この世に蔓延るゴミUIアプリを救いたい。
ダメなアプリのUIの特徴とその改善策を紹介します。
トップ画面がある
ビジネスアプリにトップ画面は不要です。いますぐ削除しましょう。
我々が普段使用しているTeamsやLINEにはトップ画面がありません。
トップ画面が必要なのはサービス紹介ページのように日常的な利用がないアプリや、テトリスなどの時間経過で画面が動くゲームです。
日常的に使用するビジネスアプリにトップ画面が存在してもユーザーの無駄な操作が増えるだけなので、今すぐ削除しましょう。
下記の方法やモダンコントロールのタブを使用してタブを作成してください。
フォームが複数列
視線移動の反復横跳びは疲れます。
カードが複数列だと横の視線移動が発生してしまいます。
入力する順番がわかりやすくなるよう、基本的にフォームのカードは一列にしましょう。
一列にするとフォームが縦方向に長くなってしまうので、以下の方法でフォームの入力をタブで切り替えられるようにしてみてください。
超カラフル
色を使い過ぎると何が重要で何が重要でないかがわからなくなります。
配色の基本ルールである、ベースカラー：メインカラー：アクセントカラー＝7 : 2.5 : 0.5を守りましょう。
ベースカラーを灰色（背景）、メインカラーを白（入力欄など）、アクセントカラー（ヘッダーなど）をコーポレートカラーにするのがおすすめです。
背景が灰色、入力欄が白になることで、入力欄がよりわかりやすくなります。
3色だけではエリアをうまく塗り分けられない場合は、灰色をうまく使い分けてください。
ちなみにモダンコントロールのフォームは背景と入力欄の配色が逆です。
ボタンから実際の操作がイメージできない
実際の操作が具体的にイメージできるようにボタンを配置しましょう。
またボタンの左側にアイコンを設置すると、ユーザーがより操作のイメージを持ちやすくなります。
ボタンの色
送信や保存のように押すと重要なアクションが発生するボタンはボタンは前述のアクセントカラーを塗りつぶしに、キャンセルや戻るボタンのようなボタンは白の塗りつぶしにしましょう。
モダンコントロールのボタンだと前者がPrimary, 後者がSecondaryに相当します。
例外的に削除ボタンや警告を示すボタンは赤色にすることで、誤ってデータを削除してしまうことを防ぐことができます。
コントロールの配置が無秩序・空白が無い
コンテナーやギャラリーを使用して、ボタンやアイコンを整列しましょう。
人間の視線はFのように移動するため、それを意識した配置にしてください。
また同じまとまりを持ったコントロールはまとめましょう。そのためにも意識してスペースを取る必要があります。
各種操作の機能を持つアイコンをヘッダーに配置し、それを各画面で統一させれば、ユーザーがヘッダーに各機能が集約されていることを認識しやすくなります。
また、ヘッダーより上にコンテンツが存在しないことをわかりやすくすることもできます。
作例
最後に作例を紹介します。
UIの本を読んで学習したり、普段利用しているアプリのUIを真似してUIについての理解を深めていきましょう！
クラシックコントロール
モダンコントロール
コメント