Android エンジニアが知っておきたい UX アンチパターン

More than 3 years have passed since last update.


はじめに

Android Developers 公式チャネルで公開されている「UX アンチパターン」の紹介です。UX の改善はユーザの満足度向上にもつながりますので、紹介内容をチェックすることをおすすめします。

動画 URL

https://www.youtube.com/watch?v=x_gxZd9kLv4

トピック別の再生用リンク

ちなみに個人的に残念だと感じるトップ3はこちらです。


ダイアログ


読み込み中のダイアログ

ちらつきについては、ProgressDialog を使用した場合のイメージでしょうか。

ダイアログ全般について、基本的に Dialog#setCancelable は使わないほうがよいと思います。


アンチパターン


  • 読み込みのたびに画面がちらつく

  • ローディングをキャンセルできない


関連ドキュメント

デザインガイドライン : Progress & Activity

http://developer.android.com/design/building-blocks/progress.html


確認ボタンの位置

右側にポジティブなボタンを配置しましょう。

過去にAlertDialog に関する記事を投稿したので、こちらも参考になれば幸いです。


アンチパターン


  • (Android4.0以降)ポジティブな選択肢が左側にある


関連ドキュメント

デザインガイドライン : Dialog

http://developer.android.com/design/building-blocks/dialogs.html

API ガイド : Dialog

http://developer.android.com/guide/topics/ui/dialogs.html


タッチできない


ボタンが小さすぎる

縦も横も 48dp 以上が望ましいと紹介されていますので、原則その通りに実装しましょう。

ちなみに、Material Design のダイアログでは、ボタンの高さが 36 dp となっています。


アンチパターン


  • タッチ領域が縦/横ともに 48dp 未満


関連ドキュメント

デザインガイドライン : Metrics and Grids

http://developer.android.com/design/style/metrics-grids.html


フィードバックがない

タッチ可能な要素に pressed と focused の状態を用意しましょう。

こちらも過去に関連の投稿がありますので、参考になれば幸いです。


アンチパターン


  • クリックイベントのある領域をタッチしてもフィードバックがない


関連ドキュメント

デザインガイドライン : Touch Feedback

http://developer.android.com/design/style/touch-feedback.html

API ガイド : State List

http://developer.android.com/guide/topics/resources/drawable-resource.html#StateList


UI デザイン


UI デザイン ≠ お絵かき

色、文字、画像、スペーシングなど、UI デザインの基本的な考えは WEB デザインと一緒だと思います。ネイティブでも Web に劣らない美しいデザインを心がけたいですね。


アンチパターン


  • 派手な装飾のデザイン

  • 一貫性のないデザイン

  • 画面サイズが変わるとレイアウトが崩れる


関連ドキュメント

デザインガイドライン : Metrics and Grids

http://developer.android.com/design/style/metrics-grids.html

API ガイド : Supporting Multiple Screens

http://developer.android.com/guide/practices/screens_support.html


時代遅れ


Menu Button of Shame

マニフェストの targetSdkVersion を最新にしましょう。ActionBar を使いましょう。


アンチパターン


  • Menu Button of Shame が表示されている


関連ドキュメント

API ガイド : <uses-sdk>

http://developer.android.com/guide/topics/manifest/uses-sdk-element.html

デザインガイドライン : ActionBar

http://developer.android.com/design/patterns/actionbar.html

API ガイド : ActionBar

http://developer.android.com/guide/topics/ui/actionbar.html


GingerBread 時代の UI 要素

見た目がかなり古臭くなってしまいますね。マニフェストの targetSdkVersion を最新にして、テーマを Holo にしましょう。


アンチパターン


  • GingerBread 時代の UI が使われている


関連ドキュメント

API ガイド : <uses-sdk>

http://developer.android.com/guide/topics/manifest/uses-sdk-element.html

デザインガイドライン : Themes

http://developer.android.com/design/style/themes.html

API ガイド : Styles and Themes

http://developer.android.com/guide/topics/ui/themes.html


他プラットフォームの移植


下タブバー

上タブ+スワイプ、もしくは、NavigationDrawer を使いましょう。


アンチパターン


  • 下タブバーが配置されている


関連ドキュメント

デザインガイドライン : Pure Android

http://developer.android.com/design/patterns/pure-android.html

デザインガイドライン : Swipe Views

http://developer.android.com/design/patterns/swipe-views.html

トレーニング : Creating Swipe Views with Tabs

http://developer.android.com/training/implementing-navigation/lateral.html

デザインガイドライン : Navigation Drawer

http://developer.android.com/design/patterns/navigation-drawer.html

トレーニング : Creating a Navigation Drawer

http://developer.android.com/training/implementing-navigation/nav-drawer.html


リスト項目に右向き矢印

これもよく見かけますね。これからデザインするのであれば、手間をかけて作るのはやめたほうがよいと思います。


アンチパターン


  • リスト項目に右向き矢印が表示されている


関連ドキュメント

デザインガイドライン : Pure Android

http://developer.android.com/design/patterns/pure-android.html


非標準ナビゲーション


ナビゲーション

わざわざコストをかけて、非標準の残念なカスタムナビゲーションを作るのはやめましょう。素直に ActionBar 使いましょう。見た瞬間にそっとアプリを閉じたくなってしまいます。


アンチパターン


  • 非標準のナビゲーションを使用している

  • 設定がナビゲーション上に表示されている


ドキュメント

デザインガイドライン : ActionBar

http://developer.android.com/design/patterns/actionbar.html

API ガイド : ActionBar

http://developer.android.com/guide/topics/ui/actionbar.html

デザインガイドライン : Navigation Drawer

http://developer.android.com/design/patterns/navigation-drawer.html

トレーニング : Creating a Navigation Drawer

http://developer.android.com/training/implementing-navigation/nav-drawer.html


共有機能を独自実装


共有機能を独自実装


アンチパターン


  • SNS ごとに独自のアプリケーション連携ボタンがある


ドキュメント

API ガイド : Intents and Intent Filters

http://developer.android.com/guide/components/intents-filters.html


WebView で UI を作る


WebView で UI を作る

プログレスバーとアクション操作用のボタンくらいはネイティブにしてあげましょう。


アンチパターン


  • WebView を基本としたアプリとなっている


しつこい


しつこい

取り返しのつかない操作でなければ、しつこく確認するのはやめましょう。


アンチパターン


  • スプラッシュスクリーンを表示している

  • アプリの終了にバックキーを2回押す必要がある

  • アプリの終了確認のダイアログを表示している


関連ドキュメント

デザインガイドライン : Confirming & Acknowledging

http://developer.android.com/design/patterns/confirming-acknowledging.html


縦向き固定・電話限定


縦向き固定・電話限定


アンチパターン


  • アプリが縦向き固定でしか使えない。


関連ドキュメント

過去の記事内のリンクです。

http://qiita.com/suzukihr/items/f0cabf6d8a9356bd7bb7#1-7


その他


その他

アプリのアイコン、ActionBar のアイコン、通知バーのアイコンは、それぞれにフィットするものを分けて作りましょう。


アンチパターン


  • 通知アイコンがカラフル

  • 高解像度の端末で画像がぼやけている

  • アプリのアイコンがすべて同じ角丸四角


関連ドキュメント

デザインガイドライン : Iconography

http://developer.android.com/design/style/iconography.html