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


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

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

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

* [ダイアログ](https://www.youtube.com/watch?v=x_gxZd9kLv4#t=0m37s)

* [タッチできない](https://www.youtube.com/watch?v=x_gxZd9kLv4#t=1m29s)

* [UI デザイン](
https://www.youtube.com/watch?v=x_gxZd9kLv4#t=2m20s)

* [時代遅れ](https://www.youtube.com/watch?v=x_gxZd9kLv4#t=3m00s)

* [他プラットフォームの移植](https://www.youtube.com/watch?v=x_gxZd9kLv4#t=4m01s)

* [非標準ナビゲーション](https://www.youtube.com/watch?v=x_gxZd9kLv4#t=4m41s)

* [共有機能を独自実装](https://www.youtube.com/watch?v=x_gxZd9kLv4#t=5m14s)

* [WebView で UI を作る](https://www.youtube.com/watch?v=x_gxZd9kLv4#t=5m49s)

* [しつこい](https://www.youtube.com/watch?v=x_gxZd9kLv4#t=6m20s)

* [縦向き固定](https://www.youtube.com/watch?v=x_gxZd9kLv4#t=7m00s)

* [その他](https://www.youtube.com/watch?v=x_gxZd9kLv4#t=7m28s)


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

* [下タブバー](#2-8)
* [非標準のナビゲーション](#2-10)
* [WebView で UI を作る](#2-12)


# ダイアログ
## 読み込み中のダイアログ
ちらつきについては、ProgressDialog を使用した場合のイメージでしょうか。
ダイアログ全般について、基本的に Dialog#setCancelable は使わないほうがよいと思います。

### アンチパターン
* 読み込みのたびに画面がちらつく
* ローディングをキャンセルできない

### 関連ドキュメント
デザインガイドライン : Progress & Activity
http://developer.android.com/design/building-blocks/progress.html



## 確認ボタンの位置
右側にポジティブなボタンを配置しましょう。
過去に[AlertDialog に関する記事](http://qiita.com/suzukihr/items/8973527ebb8bb35f6bb8)を投稿したので、こちらも参考になれば幸いです。

### アンチパターン
* （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 のダイアログ](http://www.google.com/design/spec/components/dialogs.html)では、ボタンの高さが 36 dp となっています。

### アンチパターン
* タッチ領域が縦／横ともに 48dp 未満


### 関連ドキュメント
デザインガイドライン : Metrics and Grids
http://developer.android.com/design/style/metrics-grids.html




## フィードバックがない
タッチ可能な要素に pressed と focused の状態を用意しましょう。
こちらも過去に[関連の投稿](http://qiita.com/suzukihr/items/f52e3ed9a196afa463f7)がありますので、参考になれば幸いです。

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


### 関連ドキュメント
デザインガイドライン : 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