はじめに
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