インタラクションの改善例【v11】

こんにちは、よろしくお願いします。先日、とあるレストランでタブレットによる注文システムを見かけたのですが、まだまだ改善の余地がありそうな操作体系でした。今日はその点についてお話ししたいと思います。

まず、そのシステムでは画面上に基本となるナビゲーションが集約されていて、それ以外の領域は左右のページングでコンテンツを参照する形になっていました。上部左側には「食事メニュー」があり、「注文(ORDER LIST)」と「呼出(CALL)」は右側に配置されています。

そうなんです。ただ、使ってみるといくつかの点で分かりにくさを感じました。

「LUNCH」を押すとランチメニューに切り替わるのですが、上部の表示には特に変化がなく、ホーム画面と全く違いがありません。どこにいるのか現在地が分かりにくいんです。

さらに、「Home」を押すと最初の状態に戻りますが、右上の「Back」を押してもひとつ前に戻れるので、操作が少し混乱します。

「DINNER」を押すとディナーメニューに切り替わるのですが、ディナーメニューはカテゴリが多いため、「LUNCH」と「DINNER」は上部から消えてしまい、前菜やデザートなどのディナー用サブメニューのみが表示されます。つまり、メニューによってナビゲーションのルールが変わってしまうんです。

ディナーメニューでも、例えば「FOOD」「WINE」「DRINK」「デザート」などジャンルが細分化されていますが、「FOOD」は4ページもあり、「WINE」と「DRINK」はそれぞれ1ページだけです。

ページングを続けてジャンルをまたぐと、現在地がさらに分からなくなります。

また、左右にページングすると画面全体が移動するのですが、上部のナビゲーションも一緒に動くため、固定されていないので操作に戸惑いを感じました。

さらに、「BACK（戻る）」ボタンが右上に設置されているのですが、通常「戻る」ボタンは左側に配置されることが多いですよね。しかも、ホーム画面では押しても何も起こらないので、不要なボタンかもしれません。

はい、基本的なレイアウトはそのままに、ナビゲーションとインタラクション、不要な要素を見直すことで、より使いやすくできると思います。

まず、今どこにいるのかを示すために、ナビゲーション上に現在地を表示します。文字色や太さ、目印を付けるなどして、ユーザーが一目で自分の位置を把握できるようにします。また、「LUNCH」と「DINNER」でナビゲーションのルールを統一し、どちらの場合でも同じ操作感を提供します。

次に、ページング時に上部のナビゲーションエリアを固定し、下部のコンテンツ部分のみを左右に動かすようにします。さらに、ナビゲーション上の現在地表示もページングに合わせてスムーズに移動させることで、ユーザーは自分がどこにいて、何をしているのかを直感的に理解できます。

「戻る」ボタンについては、左矢印を使うなら左側に配置するのが一般的です。しかし、ナビゲーションを改善したことで、「戻る」ボタンがなくても問題なさそうなので、思い切って削除してしまいます。

また、料理の写真がどれなのか分からないという問題もあります。そこで、写真と料理名を対応付けるか、写真の横に説明文を付けると良いでしょう。さらに、ディナーのサブメニューには複数ページがあるので、ドットインジケーターを使って現在の位置を示すと、ユーザーにとって分かりやすくなります。

その通りです。これらの改善を施すことで、ユーザーは直感的に操作でき、より快適に注文ができるようになると思います。