この動画番組の概要を日本語で作成しましたので、こちらに掲載いたします。 皆さまの Android アプリの UI/UX デザインをご検討いただく際のヒントとしてご活用いただけましたら幸いです。
この番組の出演者は下記のとおりです (出演順):
- Roman Nurik - Developer Advocate, Android - New York
- Rachel Garb - Interaction Designer, Android Design - Mountain View
- Marco Paglia - Interaction Designer, Android Design - Mountain View
- Nick Butcher - Developer Advocate, Android - London
- Richard Fulcher - Interaction Designer, Android Design - Mountain View
- Mike Denny - Developer Advocate, Android - Mountain View
- Adam Koch - Developer Advocate, Android - New York
Foursquare の検索結果の階層表現 [再生時刻 01:14] - Roman Nurik
- Foursquare (Google Play リンク) というアプリは、すでにご利用いただいている人も多いかと思います。
- ここでは "Pizza" のような言葉を検索するときの優れた UI/UX 表現について紹介します。
- 検索フィールドにフォーカスをあてます。文字を何も入力しなくても、検索フィールドの下に主な遷移先や検索機能のリストが表示される点は便利です。
- "pizza" と入力してみます。すぐに、その言葉に関連する人気の検索ワードのリスト ("pizza hut", "pizza place" など) が表示されるのもいいですね。ここでは "pizza" を選んでみます。
- 画面が検索結果の表示に遷移します。遷移の直後に、地図がなめらかに拡大していき、左右の 2 ペーンに分かれた表示になります。
- 検索結果の表示が秀逸です。ここには、非常に多くの情報がコンパクトに表示されています。たとえば、 Amici's East Coast Pizzeria の項目の中を見ると、そこには "$" サイン (価格帯)、そこに行ったことがある私の友人の画像などが表示されています。とくに友人の画像は、「そこが重要な場所 (良い検索結果) かもしれない」というシグナルを表現しています。レストランの点数 (レーティング) も表示されています。
- スクロールすると、情報の階層構造がとても見やすく表現されていることがわかります。それぞれのレストランの種類、誰がそこに行ったことがあるか、などが一目でわかります。Typography (文字フォント、色、サイズ、太さの選択) も見やすく、Roboto Light などのフォントが上手に使われています。このリストの中では、ピザの種類について繰り返されている情報は冗長ですので、ユーザーの認識の邪魔をしないように他の文字よりも薄い灰色で表示されています。
- リストをスクロール操作するということは、ユーザーが まだ良い場所を見つけていない可能性があるという文脈に着目し、このアプリではスクロール操作を始めると そのリストの最下部に新たなバーが出現し、ユーザーに代替提案をします ("Or try..." と表示されているバー)。 この例では、food, dinner, italian, lunch, restaurant, というような選択肢が提案されています。 このような、ユーザーの文脈に応じた動的な表現は、検索をする体験をさらに優れたものにしています。
- 他にも、右側の地図をタッチすると、左側のリストの対応する項目が (画面外であれば そこまで滑らかにスクロールして) ハイライトされる、というような優れた表現がこのアプリでは用いられています。
- 私は、このアプリの検索のときのユーザー体験、とくに情報の階層的な表示の方法、文脈に応じた動的な表現が洗練されていると思います。
airbnb の基本に忠実な仕上がり [再生時刻 05:05] - Rachel Garb
- こんにちは、Android Design チームの Rachel です。 airbnb (エアビーアンビー) というアプリ (Google Play リンク) のお気に入りの点について紹介します。
- 何よりもまず、ログインや登録の必要がない点は便利です。アプリを起動するとすぐに、ログインも登録もせずにコンテンツを見ることができます。
- コンテンツは、たいへん美しい内容です。高品質な写真が大きく表示されています。Typography (文字フォント、サイズ、太さの選択) も洗練されており、重要な情報 (価格) も 見やすく配置されています (写真の下端が薄暗いグラデーション表示となっており、そこに白い太字で価格を表示)。
- それぞれの宿泊施設の詳細画面に遷移します。画面遷移時のアニメーション (transition; 左右方向の画面のスライドのアニメーションおよびロード中であることを示す控えめなアニメーション表示) は少しの間の待ち時間を良い体験にしています。 前の画面と同様に高品質な写真、洗練された Typography が用いられています。
- 詳細画面では、左右方向のスワイプ操作により、すべての詳細な情報を すぐに確認することができます。 その画面での重要な機能 ("Book It" と "Contact Host") も判りやすく、大きく表示されています。
- その宿泊施設について他の人と話したいときに用いることのできる「共有」機能も、Action Bar から すぐに利用できるようになっています。
- これらの高品質な写真、美しい文字フォント、アニメーション表現 (transition)、スワイプ操作、共有機能は、「宿泊施設を選ぶ」という単調になりがちな作業を 楽しいものにしてくれています。
Google Play ニューススタンドの Action Bar 表現 [再生時刻 06:13] - Marco Paglia
- こんにちは、Android Design チームの Marco です。 リリースされたばかりの Google Play ニューススタンド (Google Play リンク) というアプリについて紹介します。
- これが Google Play ニューススタンド アプリです。 他の典型的な Google Play アプリと同様に、 Navigation Drawer を採用しており、アプリ内の主要な各セクションへの遷移を提供しています。
- 各画面を最初に訪れたときに、その画面の概要 (目的) をお伝えするためのカードが表示されます。 たとえば、 "Get started with My News" というカードでは My News 画面の目的を紹介。 "Welcome to Google Play Newsstand" というカードでは、Google Play ニューススタンド アプリの目的を紹介しています。 これらのカードは、用が済んだら そのままカードの下にある "Got it" ボタンをタップすると表示されなくなります。
- アニメーションをさまざまな場面で活用しています。すべての表現は滑らかです。
- 各ニュースソース (媒体) および話題を選択する画面に行ってみましょう。 The Verge, New York Times といったニュース媒体に加えて、主な話題がリスト表示されています。 それぞれの話題には、違った色が割り当てられていることにご注目ください。 ここでは、"Google Play" という話題は水色、 ”Google" という話題は赤紫、"Architecture" という話題は紫で表示されています。
- 試しに "Architecture" という話題を開いてみます。 すると、 Action Bar の色がその話題の色 (紫) に変化します。 ここで、画面の左端をスワイプして、 Navigation Drawer を引き出してみましょう。 Action Bar の色が少しづつ変化し、Navigation Drawer が引き出された状態では ニューススタンド アプリそのものの色 (青) に変化します。 このような色の滑らかな変化により、「特定の話題」という文脈と、「アプリそのもの」という文脈の間を行き来していることをユーザーに伝えています。
- "The Verge" というニュースソース (媒体) を見てみましょう。 私たちは、いくつかのニュースソースについて、とくに感情的に豊かな表現をしたいと考えました。 背景の写真画像が、 Kent Burns effects に似た感じでアニメーションしています。 この画面をゆっくり指でスクロールすると、The Verge のロゴ画像は画面左上 (Action Bar の App Icon の位置) にスライドし、ニュースソースの名前 ("The Verge") が透過アクションバーの中に現れます。
- 記事本文の画面を見てみましょう。 New York Times の記事を見ると、文字フォントは通常のフォントではなく、 New York Times のフォントが用いられています。 このような方法で、それぞれのニュースソース (媒体) の特色を表現しようとしています。 また、無料で読める範囲に制限をつける方法の一つとして、1 日に読むことのできる記事数の上限が画面下部に表示されています。 画面をゆっくり下にスクロールしていくと、この数字 (この例では "11") が滑らかにアニメーションしながら "10" に変化していきます。 途中でスクロールをやめれば、数字は "11" に戻ります。
- "Stingray" という自動車の記事を見てみましょう。 記事を開くと、しばらくして Action Bar は (画面上部に wipe out して) 表示されなくなり、画面全体が記事表示になります。 下にスクロールしていくと Action Bar は表示されないままです。 一方、上に (記事の始めの方向に) スクロールすると、Action Bar が再度画面に現れます。 そして記事上端に達すると、記事冒頭の写真を尊重し、 Action Bar は半透明になります。
- 上記のような、このアプリで用いられている表現の細部は、他のアプリよりも 際立って洗練された体験を提供するためにデザインされています。 このアプリを ぜひ研究していただき、皆さまが優れた体験を提供されるときの参考にしてくださることを願っています。
Chrome のタブ管理のジェスチャー操作 [再生時刻 10:59] - Nick Butcher
- Chrome ブラウザ (Google Play リンク) の、とくにジェスチャー操作のデザインについて紹介したいと思います。
- タブのアイコンに触れると、"Open tabs" という案内が薄く表示されます。 タップすると、タブを管理する画面に滑らかにアニメーションしながら切り替わります。 もう一度同じ場所をタップすると、通常どおりの画面に再びアニメーションしながら戻ります。
- このジェスチャー操作で特筆すべき点は、ユーザーが「自分がこのアプリをコントロールしている」と感じることができるようにアニメーション表現に細心の注意が払われている点です。 たとえば、タブ管理画面に移ってから指をそのまま下にドラッグすると、各タブが斜め上から見ているように変形し、指を上に戻すとまたもとに戻ります。 ユーザーのタッチ／ドラッグ操作に対するこういった滑らかな画面変化により、ユーザーは自分の操作の意味をすぐに理解することができます。
- もう一点重要なのは、タブの表現が contextual (文脈に応じた表現) になっている点です。 たとえば、タブ管理画面の下に表示されているタブを拡大表示してから再度 指をドラッグすると、タブの順序が保存されたまま滑らかにアニメーション表示していることがわかります。 このことにより、タブの順序の中で自分が何を操作しているのかをユーザーはすぐに理解することができます。
- 画面を左右にスワイプすることで、タブどうしの間を滑らかに行き来することも可能です。 このことで、タブどうしの空間的な位置関係をユーザーに判りやすく伝えています。
- これらの表現は、タブを管理するという単純な作業を、より楽しく豊かな体験にしています。 タブ管理画面で、特定のタブを閉じるには、そのタブを右にドラッグして画面の外に押し出す (swipe away する) こともできます。
- Chrome で用いられているジェスチャー操作のような UI/UX 表現 (ドラッグ操作、スワイプ操作と滑らかなアニメーションを組み合わせた表現) は、ユーザーに機械的にコマンドを呼び出すことを要求する操作に比較して、より豊かなユーザー体験を提供します。 皆さまのアプリの UI/UX 表現をご検討いただく中で、これらも是非参考にしていただけましたらと思います。
Libra の時間スケール表現 [再生時刻 13:27] - Rich Fulcher
- こんにちは、Android Design チームの Rich Fulcher です。 私自身がここ数年使っている、Libra というアプリ (Google Play リンク) をご紹介したいと思います。 これは、体重を管理するためのアプリです。 このアプリは、Notification (通知) を使って、体重を入力することを求めたり、というような便利なリマインダー機能を備えています。
- 今日特にお話したいのは、 Libra が、ユーザーの入力したデータを視覚化 (visualize) しているその手法です。 とくに、異なった時間スケールでの表現の間を行き来する手法について紹介したいと思います。
- 標準的な画面では、 Libra はユーザーが入力した体重データを、数週間の間について表示しています。 オレンジの小さい丸が、それぞれの日に入力されたデータを示しています。 そこから、灰色の縦の直線が、数日間の平均値のトレンド線 (赤色) まで伸びています。 そして、最近のトレンドからの予測線が右に向かって薄い灰色で表示されています。
- Libra でとくに優れているのは、画面に表示する時間スケールを変化させたいときの そのスムーズな表現方法です。 二本の指でピンチイン・ピンチアウト操作を行うことで、時間スケールを広げたり狭めたりすることができ、 その操作に伴って細部のデータの表示の方法がリアルタイムに変化しています。
- たとえば、ピンチイン操作により長い時間スケールの情報を表示すると、オレンジの小さい丸 (一日ごとのデータの表示) は画面から消えます。 しかし灰色の縦の直線の表示は残っていますので、平均値との差分についての概要はひきつづき画面で確認することができます。 そして、さらにピンチイン操作により時間スケールを長くしていくと、その灰色の縦の直線の表示も消え、赤いトレンド線のみが表示されます。
- また、画面上をタップすると、その日付を中心とする一段階詳しい (＝時間スケールの短い) 表示に滑らかにジャンプすることができます。 また、タップ操作後、画面には、同様のショートカット操作を提供する薄いボタンも表示されます。
- このアプリは、私が一日のほんの短い間 (30秒未満) を過ごす小さなアプリですが、アプリを見るときのユーザーの目的に良く応えてくれています。 特定の日の情報を見る、長い時間スケールの情報を俯瞰する、といった操作がじつに滑らかに行えます。
Timely の徹底した洗練 [再生時刻 16:18] - Mike Denny
- Bitspin の素晴らしい人たちにより開発された Timely というアプリ (Google Play リンク) について紹介します。
- このアプリは、これまでも Android チームの動画で何度か紹介しています。 Android Design の考え方が実に美しく表現されているアプリです。 Android 端末はユーザーを Enchant (喜ばせる) すべきである、という考え方が随所に見られます。
- Timely は、アラーム付き時計、タイマー、ストップウォッチの機能を提供するアプリです。 私自身、目覚まし時計として利用しています。 これらの機能はごく普通の (特別なことはない) 機能なのですが、このアプリは 他のアプリに比較して 洗練の度合い、細部のこだわりが抜きん出ています。 アニメーション、色の活用、タイポグラフィーについて、「さらに 1% 良くする」という努力が このアプリの体験を特別なものにしています。
- これが Timely の画面です。 私が画面をタッチすると、水紋のようなアニメーションが広がります。 ぱっと見には、よくある Android アプリには見えません。 塗りつぶされた Action Bar もありませんし、明るい灰色や黒を基調とするテーマがあるわけではありません。 鮮やかな色が採用されており、 Live Wallpaper っぽいアニメーションが背景の中で動いています。 これらは触ってみると、実に Android アプリらしい振る舞いをします。
- 画面を左右にスワイプすると、滑らかにグラデーション表現された色の変化が左右にスクロールします。 また、画面上のすべての要素は「タッチ可能 (touchable)」です。 タッチすると何らかの反応をすることで、ユーザーが画面に触ることを歓迎しています。 ユーザーは、「ここを操作しなさい」とわざわざ説明してもらう必要はありません。
- タイマー画面で「再生」ボタンをタッチすると、滑らかにカウントダウンが始まります。 また、タイマー画面を触って指を上下に動かすと、チルト表現 (斜め上から見た表現) がアニメーションし、それには何か意味がありそうです。 画面左下のボタンをタップすると、タイマーとストップウォッチ画面がぐるっと回転して切り替わります。 このことで、チルト表現の場面で指を動かし続けると、タイマーとストップウォッチを上下のドラッグ操作のジェスチャーで切り替えることができることがわかります。
- もう少し複雑な操作をユーザーに伝える必要があるときには、「優しく控えめに」説明されます。たとえば、ここではアラームの時刻を設定するために、画面を左端からスワイプしてください、という操作がアニメーションで説明されています。
- それに従って画面を左端からスワイプすると、アラーム時刻の設定画面になります。この画面でも、多くの部分がドラッグ操作に反応します。また、時刻の上下には「+ 5 min」「- 5 min」という案内が（優しく控えめに）表示され、その部分をタップすることでも時刻を調整することができます。 そして画面上部の "Done" をタップするとセット完了です。 素晴らしい表現ですね。 セット後、アラーム時刻部分をタップすると再び時刻設定画面に戻ります。
- このような "Extra 1% of effort" (追加の 1% の努力) により、ユーザーを喜ばせ、感動させることにこのアプリは成功しています。
Etsy のレイアウト表現、blur 表現 [再生時刻 20:26] - Adam Koch
- Etsy というアプリ (Google Play リンク) は、手作りのグッズが販売されている電子市場です。
- いま Google Play からこのアプリをダウンロードした直後です。 起動してみましょう。
- 起動するとすぐに、コンテンツが表示されます。チュートリアル、ログイン画面、登録画面などによりユーザーが邪魔をされることなく、すぐに "Trending" (流行) のグッズのリストが表示された画面が表示されます。これは素晴らしいと思います。私の同僚の Nick Butcher も、この初回起動時のユーザー体験を気に入ることでしょう。
- 下の方にスクロールしていくと、画面のレイアウトが、 Stacked Gridview とも呼べるレイアウトになっていることがわかります。 これは、ありがちな平板な (すべてのアイテムが同じ大きさの) Gridview レイアウトに比較して、変化があってよいと思います。各アイテムの画像は、必ずしも正方形である必要はありません。たとえば、このセーター商品の画像は縦長になっています。 また、この方式の画面レイアウトは、さまざまな画面サイズにもうまく対応できます。 たとえば、スマートフォンの portrait モード (縦画面) では、アイテムは縦に一列で表示され、画面サイズが大きくなるとマルチカラム表示になります。
- 若干気づきにくいかもしれませんが、スクロールしているときの各アイテムの place holder 表示 (写真画像がロードされる前の表示) として、その後ロードされるアイテムの写真に合わせた 淡い色の矩形が表示されています。 たとえば、写真画像が緑と茶の多い画像の場合は、その写真がロードされる前には それを淡い色で示唆する矩形が表示されています。 これも、素敵なことだと思います。
- タッチに対するフィードバックは、控えめに ほんの少しだけ色が暗くなるという表現が用いられています。 これは Android 4.4 KitKat のガイドラインにも適合した考え方です。
- Navigation Drawer を開くと、コンテンツ本体は (次第に滑らかに) blur (ぼかし) 状態になります。 これは素晴らしいアイディアです。 このことで、自分がアプリの中にいる感覚を失わずに、注意を Navigation Drawer に向けることができます。 Navigation Drawer を閉じると、コンテンツ本体は (再び滑らかに) シャープな表示に戻ります。
- 何かのアイテムを「お気に入り」しようとすると (アイテム右上のハート記号をタップ)、そこで はじめてサインイン (またはユーザー登録) が求められます。 この場面でも、"Not Now" (後で) という選択肢が表示されています。 Sign in に進むと、ログインまたは登録のダイアログ (ログイン、登録はタブ/スワイプで切り替え可) が表示されます。 この画面でも、 Etsy はコンテンツを背後に blur (ぼかし) 状態で表示しています。 これも美しくて判りやすいですね。
- アイテムの詳細画面に行ってみましょう。 写真が大きく表示され、コンテンツを強調するために、システム標準の UI としては Action Bar のみが表示されています。
- 詳細画面を上スクロール (scroll down) して内容をさらに見ていくと、画面の下端に 追加の画像のリストが出てきます。 これらは、この特定の販売者が提供している他のアイテムのリストです。 亀のグッズがお好きであれば、このリストを眺めて楽しむことができます。
0 件のコメント:
コメントを投稿