すぐに改善できるUIのチェックポイント3選 その2 

2023.03.24

前回、ユーザビリティ改善のために必ずチェックすべきUIのチェックポイント3選をご紹介しました。

すぐに改善できるUIのチェックポイント3選 その1

基本的だけどとても重要なポイントは他にもあるので、今回も引き続きご紹介していきます。

1.メニュー項目の選択状態を表示する

1つ目は、メニューで選択した項目をひと目でわかるようにすることです。

以下でZoomのページを例に、選択状態のありなしを比較します。

選択状態の表示がある場合

選択状態の表示がない場合

たったこれだけのデザインの適応ですが、ナビゲーションとしての効果が大きいことに気が付くと思います。

ユーザーは自分が選択したオブジェクトが何の変化もしないと、UI上で何が起こっているのか理解できなくなります。

ユーザーのアクションに対してUI側がリアクションすることと、UI上で何が今表示されているかを示すこと、この2つの点で選択状態を示すことは重要です。

2.ボタンの表示ルールを決める

利用者にストレスがなく、進んで使いたくなるデジタルサービスやプロダクトは必ずと言っていいほど、良質なデザインシステムの元で開発されています。

デザインシステムとは端的にいうと、そのサービスやプロダクトをデザインするための原則やパターン、コンポーネントをまとめたものです。範囲は多岐にわたりますが、その中の基本的な要素としてボタンの表示ルールがあります。

これはユーザーのUI上でのアクションに直結する要素なので、特に自然で分かりやすくしておく必要があります。noteを例にポイントを説明します。

ボタンの機能に応じて左から右に配置した例

基本的に人は、目にみえるモノを左から右に、上から下に認知します。したがって、ボタンもこの認知の流れに沿って配置すべきです。

ユーザーが行うアクションに応じて、左から、あるいは上から配置し、最終的に右側、下側のボタンに辿り着く構造にしておくと、迷うことが少なくなります。

これは幾多のユーザビリティテストでも明らかな人間の習性です。例え最初につまづいても、後々順応しやすい構造になります。


ボタンの色のルールを決めておくこともとても重要です。

特に色は、ユーザーが認知しやすく、色のルールを整えておくことで目的のアクションが取りやすくなります。色覚異常の方にも配慮した色設定を採用することをおすすめします。

ボタンの色を役割で分けた例

一般的に、Webサービスやアプリではテーマカラーを設定するので、その色を使ってルールを決めます。ここで注意しておきたいのが、色を何色も使わないことです。上記のnoteの例で示した通り「アクションの開始」「決定」「選択中」といった頻繁に起こる操作に対して共通の1色を割り当てれば十分です。

それ以上の色数を用意しても色の意味を認識できるユーザーは少なく、逆に混乱させてしまいます。

「破棄」や「削除」といった頻繁に行う操作とは異なるもの、あるいは取り消しができないものは注意喚起の意味も含めて色を変えておくとユーザーにとって分かりやすくなります。

3.次に取るべきアクションを示す

ユーザーがUI上で目的を達成するまで、不安になる瞬間が一瞬もない状態が理想の形です。

これは極論のように聞こえますが、私がサービスの構造やUIをチェックする時は、ユーザーを不安にさせる要素がないかをかなり厳密に評価します。これをいかに無くせるかが、次にまた使いたくなるか、さらに別の機能も使ってみたいと思うかに直結するからです。

不安や違和感を抱えたままでは、サービスやアプリを使い続けることも好きで居続けることもできません。

ユーザーの不安を解消し、操作をスムーズに進めてもらう工夫として、操作を実行した直後に次のアクションを示すことが有効です。

多くのサービスで使われているチュートリアルの案内がわかりやすい例ですね。確認するステップがひと目で分かるようになっています。

チュートリアルの例

また、操作した結果や操作後に何をすれば良いかを明確に示すことで、ユーザーに安心感を与えるとともに、迷いなく次のアクションに促すことができます。

一時保存の例

サービスの作り手は、どの画面でどんな操作をすれば何が起こるのかを知っていますが、ユーザーは知りません。新しいサービスや機能では、操作するたびに理解して進めていかなければならず、不安や負担を感じやすくなります。

ユーザーが利用し続けたくなるサービスを作るためには、作り手は常に「利用者が初めて認知してアクションを起こしている」ということを忘れないことが大切です。

いかがだったでしょうか?

前回に引き続き基本的だけど重要なチェックポイントを3つご紹介しました。

UI(ユーザーインタフェース)はその名の通り、サービスとユーザーのコミュニケーションのためのインターフェースです。相互のやり取りがスムーズにできて初めて、ユーザーはサービスの価値を受け取ることができます。

そのためには、サービスの作り手は常にユーザー側に立ってコミュニケーションがうまく行われているかをチェックし続ける必要があります。


サービスを作り続けていく過程で、ユーザー側の視点に立って自分たちのサービスを評価することが難しく感じることがあったら、その時は迷わずユーザーに会って話を聞いてみましょう。改善のスピードも品質も格段にアップします。

ユーザーに直接会って調査を行うノウハウも紹介しておりますので、興味のある方はぜひご覧ください。

村上通子

株式会社toya代表取締役。課題解決の研修講師。デジタルサービスの支援プロジェクト数は100以上に及び、業界問わず本当に必要な課題解決ができる人材育成を推進中。2019年グッドデザイン賞受賞。