トリバゴがどうやってマテリアル・デザインアプリの堅実な基盤を作っているか

  • このエントリーをはてなブックマークに追加

      2016/11/17

1-edgdvbr7mjfob46-65imhg

トリバゴのデザイナーたちは、会社のブランディングについて共通の認識を持っていますが、急成長を遂げるトリバゴでは、一貫性に関する問題が深刻化しています。2016年現在、当社には25人以上のデザイナーがいます。私たちには、開発に取り組んでいる製品に適用できる、当社の全体的なブランドを忠実に守るルールが必要です。2015年に、Daniel Riemeranki delfmannが、この大きな問題に立ち向かうために、Brad Frost氏によるAtomic Designのアイデアを基にパターン・ラボを作り始めました。

2015年の第三四半期には、Christoph ReinartzのチームがIRONMANプロジェクトを開始しました。トリバゴのコアとなるウェブサイト全体の、CSSリファクタリングです。その時、すべてのアセット、色、フォントが、新しく堅実な土台に合うよう変更されました。最高のブランディングとユーザエクスペリエンスのために、これらのパターンをAndroidアプリに適用し、Googleのガイドラインにも従う時が来たのです。

再設計とは言わないで!全ては洗練と調整のためです。
#licsと呼んでください!これは、レイアウト(Layout)、アイコン(Icons)、カラー(Colors)と標準化(Standardization)のことです。
Androidプロダクトマネージャ Rafael Alves

挑戦

ドイツでは、「zu viele Köche verderben den Brei」と言います。「料理人が多過ぎるとスープが駄目になる」という意味です。これは過去に実際に起きたことですが、作る人も、重点を置く場所もバラバラにレイアウトが作成されていました。それぞれの画面、プロジェクト、ストーリーではうまく行っていましたが、決して一つにまとまることはありませんでした。だから、僕たちはこれを完全に再設計する代わりに、きれいに整理して、少しだけ磨き上げることにしました。僕たちには、拡大し成長していくための土台が必要だったのです。

僕のアイデアは、スケッチファイルで使う全てのパターンを適用できるシステムを作って、何度も繰り返し使えるようにすることでした。ロジックや寸法などの変更は、動的にするべきです。僕の解決策は、単一ファイルを作成して、そこでレゴみたいにコンポーネントをくっつけられるようにすることでした。僕がそれをモジュール式にした理由がこれです。

1-qnwe1uektxqz6nvn00zn8w

僕たちがどうやってマテリアル・デザインの堅固な基盤を築いているか

トリバゴは数字が全てなので、僕たちは最初からずっと、androidアプリをテストしてきました。当社の基本理念の一つである「Power of proof」を実践すれば、何が良いアイデアなのかを知り、改良することが容易にできます。しかし、基盤を形作るために、このルールを時折破らなければならないこともあります。これは、僕たちがアイデアを植え、最も効率良く美しいものへと発展させることのできる土壌として利用されています。

#LICS

(レイアウト、アイコン、色、標準化)
物事には順序があります。僕たちは、手が込んだアニメーションや、真新しいナビゲーション、イースターエッグについて考える前に、まず宿題をやらなければなりません。マテリアル・デザインに従うつもりであれば、それはデザイナーがandroidエコシステムで使うべき唯一のデザイン言語なので、僕たちは当社アプリのデザインを考え直し始めました。さあ、始めましょう・・・。

最も重要なルールは、「機能的な変更はしないこと」で、これについては、見て頂ければわかると思います。

ツールバー、スナックバー、ダイアログでは一つのロジックをやるというのが僕にはものすごく一貫しているように思えますし、そのほうが開発者たちにとっても実装しやすいのです。

僕は大量のモジュールを作成しました。僕たちジョイントチーム(プロダクトマネージャ、開発者、僕)は全てのモジュールを紙に印刷し、それらを遊び倒しました。全プロジェクトの新しいスクリーンを適宜作るのは僕たちにとってすごく簡単でした。

レイアウト

1-p4m4hebouiyxunw401qjkwレゴブロック

武器を選びましょう。僕はインターフェイスデザイン用のデフォルトツールとして、Sketchを何年も使っています。僕たちは、写真や文字を生成するための独自プラグインすら書きました。その上、Sketchはこれから紹介するアプリとも完璧に連携しているのです。さて、僕は遷移とアニメーション用にPrincipleを選んでいます。Principleを使えば、簡単にアイデアを説明したり、プロダクトマネージャや開発者とコミュニケーションを取ったりできます。開発者にレイアウトを説明するには、zeplinが一番良いでしょう。全てのAndroidデバイスに、レイアウトの境界を表示するためのオプションがあります。僕はsketchの不可視ボックスを使って、この機能をzeplinに複製してレイアウトの限界を簡単に表示することができました。

上に述べたこれらのツールは、僕たちの仕事や生活をより簡単に、より良くしてくれました!:D クリエータさんたちに感謝!!!

マネージャ、開発者との共通理解

何もかも新規レイアウトに入れることが、全てをモジュールとして作成することにつながりました。チームや僕自身にとって最も良かったのは、何度もわざわざ一からやり直すことを避けることです。だから、開発者と僕が同じ言葉を話せるシステムを開発しました。このプロセスを経て、開発者が僕のミスを発見できるようになりました。僕たちは全く新しいレベルで話し合いを始めました。今は、重要なことについて話し合う代わりに、単純なアイデアに集中して取り組むこともできるようになりました。
紙の上でプロトタイピングすることで、今や皆が考えやアイデアを他の人に簡潔に説明できるようになりました。僕も、デザインやレイアウトについてチームメンバーと話せるようになりましたし、視覚的な実体験を通じて、彼らはよりいっそうアイデアを理解できるようになりました。こうして、皆が同じ方向を向いて、素晴らしい「考え」を持てるようになったのです(その時僕が何をしたかはここを見てほしい。#worstpunever)。プロダクト開発マネージャは、レイアウトを詳しく描写するのにエネルギーをそこまで注がなくても、ユーザストーリーを容易に描くことができるようになりました。

1-ax4-egq6hzrvpn9ropwucw

このレゴブロックを使って紙の上でのプロトタイピングするのは、ものすごく簡単で楽しい。
-アプリ開発リードマネージャ Farhoud Cheraghi氏-

アイコン

24x24dpのマテリアル・デザイングリッドに完璧に合うように、全アイコンがリデザインされました。これらは全て、システムのプログラムで色付けされているため、再度エクスポートしなくても、一瞬でアイコンのカラー変更が可能となっています。

1-jh5acy236beof6xds6oqgq僕たちはアセット数をほぼ1100から800以下にまで減らしました。

アイコンの色付けや輪郭の描写によって、アプリ(apkファイル)はより軽くなりました。たいてい、ボタンなどはそれぞれ異なる状態のアセットが必要でした。例えば押された状態、使われていない状態と使われている状態などです。現在、僕たちはそういった全ての切り替えをするのも、一つのアセットだけでよくなりました。次のステップは、vector-drawablesへコンバートするのに.svgを使うことでしょう。

1-b4n1kmjuxeeomuireaowtgスタックド(積層)ビュー

全体の外観のためにベーステーマを設けます。ブランド&ウェブデザインにいる僕の同僚が、すでに製品のための美しいソリッドカラーを定義してくれています。

1-fpsncozjmyvhwvq-ce3u9w

僕は、これらの色を使うために、デフォルトルールをいくつか設定しました。例えば、濃い青はタイトルなどの重要な文字に使用されます。もう一つ例を挙げると、緑色はクリックアウトのCTAにのみ使われます。

次の2つのスクリーンショットは、#licsのチェック前後でどのように色が定義されたかを表しています。右側を見て頂ければ明らかなように、かなりきれいでこざっぱりとしたと思います。

1-heoc83nxwifcilajqmueog

標準化

フォントサイズは4つだけです。

ホテルの名前用に巨大フォント一つ、メニューポイント用に大サイズ一つ、情報の文章用に小サイズ一つ、そしてサブライン用に極小サイズを一つです。

1-d2wrhtmqskzyspyhkmbysaFAB(フローティングアクションボタン)のテスト

デフォルトのマテリアル・デザインアプリにある積層オブジェクト用と同じガイドラインを適用しました(例:Elevation and shadows)。

マテリアル・デザインにおけるオブジェクトは、物質界のオブジェクトと同じような特性を持っています。物質界では、オブジェクトは相互に積み重ねたりくっつけたりできますが、互いを通り抜けさせることはできません。オブジェクトは影を落とし、光を反射します。

1-ggklsghjcpiwrsz5fi1uda

(テスト)-結果

僕たちは、テストの結果をネットプロモータスコア調査で、Playストアやその他ビジネスKPIからのレビューと評価を測るつもりです。でもこれは僕たちが現在知っている一例です…。

1-eplicq6ss1x6scdvtf9k8qPlay Storeで当社がテストしたアプリアイコンの一例

デザインでインストールが16%増える

デザインは製品にとって重要か?答えはイエスです。アイコンのように些細なことでも、信じられないほどうまく効果が出ます。その一方で、出来の悪いものは製品の意図を伝えることができません。

僕は、マテリアル・デザインに似た30以上の抽象アイコンやリアルアイコンのデザインを作ってきました。マーケティングでは、5つの異なる地域において、6パターンのデザインを3つのプラットフォーム上でテストしました。そして、まさにこの異なるアイコンが、インストールの差にかなりの影響を与えることが分かったのです。トリバゴの文字商標アイコンは旧アイコンに比べて15.9%もインストールが多く、最もパフォーマンスが良かったです。

なぜテストが必要なのか?

対照試験は、仕事を測るのに最も良い方法です。アプリに一番効果のある図形を見つけ、ユーザの本当の好みを知ることができます。トリバゴでは、アプリの最適化にベストな方法を知るために、現在のバージョンと複数のテストパターンを比較するA/Bテストを実施しています。

1-u1kpvsn1srrel11heuq5jw

*/ ヒント
手元にテストツールがないって?大丈夫、Google Playが提供している強力なA/Bテスト機能を使えば、アプリストアのリスティングを最適化することができます。

ユーザインターフェースのデザイン

以下は、v2.9(左)とv.3.0(右)を比較した時の実際のスクリーンショットです…。あ!長い文字列でもデザインがいかに良く機能するか見せたくて、あえてドイツ語を選んだよ :D

1-4jzaugxafedh7txksm3hbgスプラッシュ画面

上のスタート画面のことを、社内では「簡易HOME」と呼んでいます。これが、トリバゴ世界への入り口になります。ユーザは直接、そして直ちに理想のホテル探しに取り掛かることができます。一番明るい色を入力フィールドに使うことで、検索に最大のフォーカス寄せています。

1-wd1d-t37fefrujqsdg-hgw結果ページ

今度は、アプリの読みやすさに、よりフォーカスが置かれています。ユーザが読みやすいように、ツールバーのフォントは前より太く大きくしてあります。フォントの太さは、アイコンとほぼ同じです。

取引フォームでも同様の適用をしていて、読みやすく、重要なサブラインである到着と出発の表示がしやすいテキストになっています。

1-qmjzkynrn9131emon1gdkaホテル詳細の価格比較

ネイティブ・コンポーネントを多く使うようにすれば、アプリがより速く、使いやすくなり、空白をより多く使うことで、読みやすくなります。

1-is-qhqkdq-juy7rblwsta条件絞込みパネル

セグメントを明確にすること、タッチ操作可能エリアを正確にすること、そしてネイティブコントロールをすることで、条件絞込みパネルがいい感じにマテリアルな見た目になりますし、条件絞込みのユーザビリティも改善してくれます。ここで、「トリバゴボタン」を紹介しましょう。トグル用にカスタムの波及効果をかけた特別ボタンと、ラベルボタン、標準ボタンです。僕たちは「iOSのシェブロン矢印」をやめて、その代わりに、押した後のダイアログが示せる矢印を使うことにしました。

1-692pc-uw2nh7pawqxgsqxq設定

設定のHOME画面も新しくなりました。バージョン2.9では、全設定が条件絞込みパネルにありました。今は全ての設定に新しいアクティビティがあります。上の例で、言語選択の比較が見られると思います。ここでも、ユーザーエクスペリエンス(UX)をベストにするために、僕たちはネイティブ・ラジオボタンを使っています。

僕が学んだこと

モジュールで作業することは、素晴らしく効率がいいです。これによって、チームと僕の時間を大幅に節約することができまし。「symbols」(フォトショップのスマートオブジェクトのようなもの)を使うことで、僕はたった2~3分で画面設計を作ることができました。アプリの一部を少し変えたら、僕の(モンスター)スケッチファイルが数か所、自動的に変わりました。また、それらをzeplinにアップロードできたのは本当に便利でした。
最も良かったことの1つは、開発者たちとワークショップをしたことです。開発者たちは、デザイン言語を本当に良く理解してくれました。彼らは本当によく分かってくれて、アプリの一貫性を保つことを望みました。僕が独自のルールに合わないことを言うと、正してくれる開発者すらいました :) だから僕はいつも、みんなで一緒に開発したと言っていますし、それは素晴らしい気持ちでした。

あとはあなた次第です!Android用トリバゴの最新バージョンを試して、ぜひ僕たちに感想を聞かせてください!

Google Playストアでダウンロード

アプリを改善し続けることを決して諦めない僕のモバイルチームに感謝!

この投稿を、トリバゴのモバイルメンバー、Simon Hinz, Andreas Kwiatkowski, Rafael Alves, Stephanie Preuthen, Oleg Stirbu, Anting Chen, Farhoud Cheraghi, Alicja Ryczak, Martin Schrammに捧げます!こんな素晴らしいチームでいてくれてありがとう!
最後に、当社の素晴らしい開発者たちDaniel Lyssi, Adam Harazim, Alexander Laws, Julian Horst, Carsten Drösser, Giulio Petek and Frederik Schweigerに。

僕の初メディア投稿を読んでくれてありがとう!

― それではまた!Georg

原文:https://blog.prototypr.io/how-we-build-a-solid-base-for-a-material-design-app-a-case-study-3c4925d26d8b (2016-11-07)
※元記事の筆者には直接翻訳の許可を頂いて、翻訳・公開しております。

 -Tech

FAworksではプロのコンサルタントが案件をお探しします

  関連記事

Uberがリアルタイムマーケットプラットフォームをスケールしている方法

Uberがリアルタイムマーケットプラットフォームをスケールしている方法

Uberは、たった4年で38倍という目覚ましい成長を遂げたという。今回が恐らく初めてだと思うが、Ub

LL系カンファレンスの歴史

WEBエンジニアの祭典!LL系カンファレンスの歴史

例年夏から秋にかけて開催されているLL(lightweight language, 軽量プログラミン

エンジニアがもっと働きやすい環境に!エンジニアに嬉しい福利厚生と導入企業まとめ

IT関連企業を筆頭に、今やどこの企業の求人を見ても「エンジニア募集中」の文字。優秀なエンジニアを獲得

Linux OSのジッタを体系的に削減する黒魔術

Linux OSのジッタを体系的に削減する黒魔術

低遅延性の求められるトレードシステムにおいて、ジッタの原因をどのように体系的に発見してひとつずつ削除

関数型プログラミング vs命令型プログラミング~Java8でフィボナッチ、素数、階乗をやってみた~

関数型プログラミング vs命令型プログラミング~Java8でフィボナッチ、素数、階乗をやってみた~

プログラミングには多様な形式やパラダイムがあるが、有名なものを2つ挙げるとしたら、関数型と命令型だろ

あなたも聞いてる?テック系ポッドキャスト3選

あなたも聞いてる?テック系ポッドキャスト3選

最近、エンジニアの間でにわかに話題になっているのが「ポッドキャスト配信」です。エンジニア自身が時事的

待ち遠しい次の祝日がコマンドラインでわかる!‐cal‐ 端末にカレンダーを表示しよう

待ち遠しい次の祝日がコマンドラインでわかる!‐cal‐ 端末にカレンダーを表示しよう

これは“コマンドライン・マンデー”シリーズの最初の投稿です。このシリーズでは、毎週月曜日に使えるコマ

1家に1人!旦那がエンジニアだと便利な5つのこと

よく便利なものに対して「1家に1台」とか言いますよね。 まさしくエンジニアはその「1家に1人」の便利

【比較表あり】非エンジニアの人にも知ってほしい。エンジニアに優しいチャット・コミュニケーションツールまとめ

エンジニアに合ったコミュニケーションツール プロジェクトを円滑に進行させるためにも、チームでのコミュ

MySQL Cluster―MySQLはいかに2億QPSのスケーリングを実現したか

この記事は、オラクル社MySQL主任プロダクトマネージャ、アンドリュー・モルガン氏からのゲスト投稿で