「使いやすい」インターフェイスの作り方６

はじめに

こんにちは！UI UX講座も第6回目となりました。
使いやすいインターフェイスを作成するためのテクニックを身に着けることができているのではないでしょうか？
第6回目では、「次のアクションを明確にするテクニック」について解説します。

•第3回・第4回・第5回のおさらい
第3回では、わからないについて解説しました。
（詳しくは「使いやすいインターフェイスの作り方3 ～「わからない」を徹底解説～」をご覧ください）
その中の「場所がわからない」について、第４回で解説しました。
（詳しくは「使いやすいインターフェイスの作り方４ ～webサイト上で迷わせないテクニック解説～」をご覧ください）
またその中の「状態がわからない」について、第５回で詳しく解説しました。
（詳しくは「使いやすいインターフェイスの作り方5 ～形を見分ける力解説～」をご覧ください）

今回は、第3回の「操作がわからない」を解決する方法についてさらに詳しく解説します。

・操作がわからないとは
以下の画面をご覧ください
これらは、商品を選択し、購入する画面を想定して作成しました。

AとBの画面の違いを見つけてみてください。

Aの画面

Aの画面をより使いやすく改良したものが以下になります。

Bの画面

これらの画面の違いは、ボタンの名称です。
Aは「終了」ボタンで、Bは「支払い方法選択」ボタンとなっています。

Aの「終了」のみ記載のボタンでは、ボタンを押した後の操作の想像が人によって異なります。
カート画面が終了して次の支払い方法選択画面に遷移することは予想できますが、
「終了」という文言では、買い物自体が終わってしまうような印象も与えてしまいます。

つまりこのボタンでは、商品を選択した後の購入までのアクションが不明慮です。

対して、Bの「支払い方法選択」ボタンであれば、商品選択後の購入までのアクションが明確です。
一目見ただけで、次の支払い方法選択画面へ遷移することが直感的に理解できます。

操作がわからない画面、とは、
A画面のように、次に行うべきアクションが不明瞭な画面のことです。

最後に

上記のように、ボタン名称のみの変更であっても
インタラクションコストを低減させることができます。

次どのような操作を行うのかわからない、といった状態を発生させない
インタラクションコストが低いインターフェイスの設計を引き続き心がけていきましょう！