Java
Android

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

More than 1 year has 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