人気ブログランキング | 話題のタグを見る

Google公式UI/UXアンチパターン解説

(※)正式には「UXアンチパターン」ですが、内容からして「UIアンチパターン」の間違いではないかと思います

Googleが公式チャンネルで公開している、Androidアプリに関するUIアンチパターンの解説動画の内容をざっとまとめました。

Android Design in Action: Common UX Issues (Japanese) - YouTube
https://www.youtube.com/watch?v=x_gxZd9kLv4

まとめ自体は、自分に向けての内容でもあるので、少々過剰な表現が加わっています。



クソアプリがやらかすUIアンチパターン

1. ダイアログ
Google公式UI/UXアンチパターン解説_d0252816_22374619.png

- 「読み込み中」とかをダイアログ表示してる
- しかもキャンセルできなかったりして最悪
- 即消えようが、画面がちらつくのでユーザーはいらつく
- PullToRefreshとかコンテンツ部分で読み込み中アニメーション表示に置き換える

Google公式UI/UXアンチパターン解説_d0252816_22375829.png

- ダイアログに出て来るボタンが、標準と逆配置になってしまっている
- ダイアログは「左がキャンセル、右がOK」の順番が決まりなので、逆にしないこと
- Dialogs | Android Developers


2. タッチできない
Google公式UI/UXアンチパターン解説_d0252816_2238869.png

- ボタンが小さすぎて押せない
- ボタンは基本的に縦横48dp以上
- Metrics and Grids | Android Developers

Google公式UI/UXアンチパターン解説_d0252816_22382110.png

- タッチしたのかどうかがわからない
- 「これは押せる」「いま押した」が分かるフィードバックを必ずつける
- 例え爆速で通信が終わって画面が切り替わるような動きであっても、フィードバックを省略していい理由にはならない


3. UIデザイン≠お絵描き
Google公式UI/UXアンチパターン解説_d0252816_22383187.png

- UIデザインをアートかなにかと勘違いしてしまっている
- 「うわー、キレイなボタン!インストールしよ!」っていうユーザーなんかいねえよ!
- アートと勘違いする割に一貫性がないのって最悪だよね
- いくらピクセル単位に気を配ったデザインでも、画面サイズが変わると崩れるようなデザインに価値はない


4. 時代遅れ
Google公式UI/UXアンチパターン解説_d0252816_22384284.png

- ここ1〜2年で更新とかリリースしてるアプリで、右下に「…」が出ちゃってる
- メニューをいれたきゃアクションバー使え
- ちなみにtargetSdkVersionは常に最新でおこなうこと

Google公式UI/UXアンチパターン解説_d0252816_22385256.png

- Gingerbread時代のスタイルを使ってる
- targetSdkVersionを最新にすれば、4.x以降の標準テーマである「Holo」が使えるので、これを使うこと


5. 他のプラットフォームのマネ
Google公式UI/UXアンチパターン解説_d0252816_2239158.png

- 他のプラットフォーム(要はiOS)向けのUIになってしまっている
- タブを下表示するのはiOSで、Androidは上に表示する
- 別にタブじゃなくても、ViewPagerでもNavigationDrawer(サイドメニュー)でいいんじゃない?

Google公式UI/UXアンチパターン解説_d0252816_22391149.png

- リスト項目の右向き三角(矢印)をつけるのはiOSの話


6. 非標準ナビゲーション

- 独自実装のナビゲーションバーを使ってしまっている
- バカなことしてないでアクションバーに直せ
- ちなみにアクションバーでは、「More(「…」ボタン)」を押した時にでるリストに、設定ボタンを入れるのが一般的


7. 共有機能を独自実装
Google公式UI/UXアンチパターン解説_d0252816_22393558.png

- アプリ内で別途FacebookやTwitterの認証を行わせてしまっている
- それ全部、AndroidではIntentで実装できるので、わざわざ認証させない
- Facebookとかの認証とってないとそもそも何もできないアプリは話が別


8. WebViewでUIを作る
Google公式UI/UXアンチパターン解説_d0252816_22394876.png

- 開いてみたら、WebViewでHTML5開いてるだけの神アプリだった
- WebアプリはWebアプリで公開する


9. しつこい
Google公式UI/UXアンチパターン解説_d0252816_22395826.png

- 余計な通知や自己主張が多い
- スプラッシュスクリーンはやめろ
- バックボタンによる終了確認?それ外したらそんなに重大な問題が起きるの?
- 複数通知が連続するものは、一つにまとめること
- Confirming & Acknowledging | Android Developers


10. 縦向き固定で電話限定
Google公式UI/UXアンチパターン解説_d0252816_2240923.png

- 横向きで使えないし、タブレットだと表示が崩れている
- 今どき「縦固定、電話(ハンドセット)限定」のアプリはありえない
- ちゃんと横向き対応、タブレット対応をさせること


11. その他
Google公式UI/UXアンチパターン解説_d0252816_2240173.png

- 通知アイコンは白黒表示で
- 高解像度端末(xxhdpi)の画像もちゃんと用意すること
- (備考)多分今年一年でxxxhdpi(xhdpiの縦横2倍サイズ)の画像も必要になります
- アプリのアイコンを角丸四角にする必要はない


まとめ
- Android標準のUIをちゃんと使えば、OSがアップデートしたときにもちゃんと統一性のあるデザインに対応されます
- 個性をつけたいなら、よく考えて

参考リンク:Design | Android Developers