理想的なUIに改善するための5つのポイント
UIを改善するための第一歩は、エンジニア自身が仕様を確認し「この画面の主要アクションはどれか」を明確にすることから始まります。「上から降りてきた仕様通りに実装すればいい」と考えるのではなく、作る前に確認することが重要です。
主要アクションと補助アクションを区別できたら、以下の5つのポイントでUIを改善していきましょう。
①主要アクションと補助アクションを視覚的に分ける
全部のボタンを同じにするのではなく、「予約確定」などの主要なアクションにだけ背景色や影（立体感）をつけたり、十分な余白を取ったりして際立たせます。まずは“引き算”をして、本当に目立たせるべきものだけを残す意識が大切です。
②抽象的すぎるラベルは具体化する
コード内の「save」や「submit」という単語に引きずられ、ボタンのラベルを「保存」「送信」とつけていないでしょうか。
その「保存」は、予約が完了したという意味なのか、クーポンの条件を保存するのか、ユーザーには判別できません。「保存」とつけるのではなく、「予約を確定する」など、押した結果何が起きるのかが明確に伝わる具体的なラベルにしましょう。
③アイコンだけに頼らない
「鉛筆」のアイコンだけを置いて「情報を変更するボタン」として機能させるのは危険です。「変更する」「ログイン」といったテキストラベルを必ず併記し、意味を推測させないようにします。人型のアイコンだけでログイン状態を示すのも避けるべきNG事例です。
④クリック可能な要素と単なるテキストを混同させない
「リンクやボタンなどの操作可能な要素は青、またはボタン形状にする」「操作できないテキストは黒にする」というように、画面内のルールを統一します。リンクではない説明文や注釈を、クリックできるかのように装飾するのはNGです。
⑤ユーザーの視線が自然に主要アクションへ流れるように配置する
予約内容を上から下へと確認した後、自然に押せる「右下」の位置に主要アクションを配置しましょう。その視線の流れの途中に、クーポンなどの“寄り道”を作ってはいけません。
シグニファイアを意識して作成した予約確定画面は以下の画像です。初めの画面と比べると、予約確定がスムーズにできることがわかると思います。
UIの改善は「センス」ではなく、スキルと知識があれば誰でもできます。
エンジニアが自身でUIをチェックする際は、「主要アクションよりも目立っている補助要素はないか」「押すと何が起きるかユーザーが想像できないボタンはないか」「網羅的に不要な情報まで詰め込んでいないか」の3点をぜひ意識してみてください。
