こんなUI/UXはイヤだ
業務中にメモっていた、イヤなUI/UXのメモを公開。（スマホ中心）
こう見てみると、多少はチェックリスト的に使えるかも知れないです。各事例の画像が貼られていないのはご勘弁を。
- 思ってたのと違う。。
△ 入力フォームなのにその場で入力できない
見た目は入力フォームなのに、タップするとモーダルで入力画面が立ち上がってしまうと違和感がある。そのままその画面で入力できるようにするか、どうしても別画面を立ち上げる必要があれば、入力フォームをボタンに変えた方が自然なUIになる。
△ 押せそうなのに押せない
立体感があったり囲まれていたりしてボタンのように見えるUIなのに、実際には押すことができないとストレス。遷移先の画面が存在しないのであれば、ボタンに見えるような紛らわしいデザインにしない。
△戻るボタンなのに1つ前に戻らない
アプリ内ブラウザで外部サイトを立ち上げる際、画面の上部（ナビゲーションバー）と下部（ツールバー）に戻るボタンが2つ表示されていることがある。アプリ内ブラウザ内で回遊している最中でも、1つ前の画面に戻ろうとしてついナビゲーションバー上の戻るボタンを押してしまうことが多いが、この時にアプリ内ブラウザ自体が閉じてしまう挙動になる。この紛らわしさを解決するために、アプリ内ブラウザはモーダルで立ち上げ、それを閉じるための「×」ボタンを配置しておく方が良い。（この話、テキストの説明だけで伝わるだろうか。。）
△ タブに見えるのにボタン
タブの中に通常のタブ切り替えとは違う動きをするボタンが紛れていて、カメラが起動したりモーダルで投稿画面が立ち上がることがある。タブ的な役割ではないということを明示するために、ボタン的なデザインにして差別化するべき。（例：Instagramの投稿ボタン）
- 今何してるか分からない。。
△ ローディング表示がない
ローディングアイコンが表示されていない状態で画面が真っ白になると、読み込み中なのかどうかも判断ができない。アプリ内ブラウザで外部ページを表示する際などによく見かける対応漏れ。
△ 長時間ローディングアイコンが回っている
あまりに長時間ローディングアイコンが回っていると、不具合かと思ってアプリを終了してしまう。あらかじめ読み込みに時間がかかると分かっている場合は、進捗を明示できるプログレスバーを表示する。
- 触感が悪い。。
△ タップしてもハイライトしない
ボタンをタップしても反応しない（色が変わらない）と気持ちが悪い。テキストリンクなども含め、タップすることのできるオブジェクトは漏れなくチェック。また、これに近いものでカレントタブ（今選択しているタブ）の色が反転していないのも微妙。
△ 押してもすぐ切り替わらない
いいね！ボタンやタブを押した時に、画像や画面が切り替わるまでに時間がかかるとストレス。まずはクライアント側の処理で画像を切り替えてしまう（通信はその後）。体感速度を上げるには、触ったらまず動かすことが重要。
△ 画面遷移アニメーションがない
ネイティブアプリの場合は画面遷移アニメーションが設定されていないと触感が悪い。通常の画面遷移は横スライド、モーダルの場合は下方から上に被さるように画面が出現するのがスタンダード。
- 無駄に読み込みが走る。。
△ タブ切り替えの度に読み込む
タブをタップする度に読み込みが走るとタブ切り替えに時間がかかる。チャットのように極端に更新頻度が高いサービスでない限りは、更新はアプリ起動時やユーザー手動で問題ない。タブ切り替え時にはサクっとキャッシュを表示する方がベター。
△ 戻る際にもいちいち読み込む
頻繁に発生する「戻る」動作の際にいちいち読み込みが走るのもナンセンス。短時間で前ページの情報が更新されている可能性はかなり低いので、この場合もキャッシュを表示すれば十分。（Webアプリの場合はhistory.back）
- 無駄に画面遷移する。。
△ ポップオーバービューで見たいのに画面遷移
Facebookの通知のようなものを見る際にわざわざ画面遷移してしまうのは非常にストレス。サクっと見てサクっと元の画面に戻りたいような画面を開く際には、ポップオーバービューを活用する。
△ コメント投稿後に画面遷移
コメントを投稿した後、わざわざ画面全体を更新して画面の一番上に戻されることがあるが、これもやめてほしい。その場でコメント欄の該当位置だけを更新し、投稿したコメントが必ず自分の目に入るように。
- 八方塞がりになる。。
△ エラー画面に更新ボタンや戻るボタンがない
真っ白なエラー画面が表示されると、完全に行き場を失ってしまう。タブやメニューから他の画面に遷移できれば良いが、モーダル系の画面などではそれらが残っていないことも多い。エラー画面には必ず更新（再読み込み）ボタンやホームに戻るボタンを配置するように。
△ ローディング中に画面全体がロックされる
ローディング表示が画面全体に被さって読み込み中どこもタップできなくなると、何かしらの問題で読み込みが終わらない時などにアプリを終了せざるを得ない。通信中でも最低限タブや戻るボタンなどはタップできるようにしておいて、逃げ道を用意する。
- その他
△前の画面に戻ると画面最上部に戻ってしまう
これは特にWebアプリで発生しやすいですが、使ってみると相当なストレスです。例えば、ECサイトで上から商品をずらずらと見ている際に、商品詳細画面に遷移→前の画面に戻る→画面の一番上に戻ってしまうという状況になると、またはじめから商品を見なければいけません。きちんと画面遷移する前の状態（位置）に戻すべきです。
△ フォーム画面や入力する文字が異様に小さい
入力フォームやその中に入力する文字が異様に小さいことがありますが、それだけで視覚的/操作的にかなりストレスです。適切なサイズ感は、純正アプリや他のスタンダードサービスを参考に。
△ スクロールしているのにタップと判定される
主にWebアプリだが、画面をスクロールしているだけなのにタップと判定されてしまうことがある。これはもはやバグなので、きちんと実装を修正する。
△ 読み込み時に画面がガコガコする
画面内の情報を読み込んでいる時にフッター部分がせり上がって来て、読み込み完了後に下がることがある。画面がガコガコするので、表示領域は先に確保しておいてフッターなどが上がって来ないようにすべき。
△ 完了/保存のアクションに統一感がない
特に設定画面などに多いが、チェックを入れただけで保存されている場合と、完了/保存ボタンを押してはじめて保存になるケースがある。どちらでも問題ない気がするが、同じアプリの中に両UIが混在しているのは良くないので統一すべき。
まだまだありそうですが、むしろこれを全部やっちゃったアプリを作ってみたいです。もの凄いイライラさせられる自信あります。