メニューやボタンの表示は単純明快を旨に

アメリカ在住のある人が、 SHAKE SHACK というハンバーガー店にスマホで注文しようとした際に、

  • チーズを追加
  • レタスも追加
  • トマトも追加
  • ソースも追加

としたつもりが、注文画面のせいで

  • チーズ抜き
  • レタス抜き
  • トマト抜き
  • ソース抜き

のハンバーガーを注文して、そのまま配達されてしまったという悲劇がありました。

togetter.com/li/1633733

注文画面のユーザーインターフェース(使い勝手)がそんなに悪いのかと確認しました。

・米SHAKE SHACKのとあるお店の注文画面
htn.to/n4dx48U3zu

上記の注文フォームで、選択していない項目は黒枠&黒字です。

orderform1

選択済みの項目はモスグリーンの枠&文字になっています。

orderform2

全く区別が付かないということはないのですが、選択していてもしていなくても、
Add(追加)
という表示のままなのは非常にまずいです。

「追加」と書いてあるボタンをタップしたら、書いてあるものが追加されると思うのは当然でしょう。

また、しばらく前に書いた記事で紹介したように、特に色盲の方には色の区別が付きにくいので、色だけで見分けさせることは避けるべきです。

この場合であれば、

 レタス

みたいに、選択していなければチェックが外れて、選択済みならチェックが入るのが分かりやすくなります。

 

ちなみに、注文画面などで個々のボタンに

Add(追加)

と書くのは、

・タップすると追加される

のか、

・すでに追加されている

のかが分かりにくいので、避けた方が良いです。

※ちなみに、日本にも SHAKE SHACK が出店していますが、そのページは下記のようにチェックボックスになっています。

t.co/PNtoJTUAfj

 

WordPressの操作画面でしばしば見掛ける

on_off

のような、クリックしてOn/Offを切り替えるスイッチも、今Onなのか、クリックしたらOnになるのかが分かりにくいです。

そのため、実際にスイッチを切り替えて確かめたことが何度もあります。

 

普通のホームページのメニューやボタンでも

「スマホで画像が小さくなって、画像に載せている文字が読みにくい」

という方は下記サービスをご検討ください。

 

ご縁があってホームページを見てくれている方、特に、問い合わせや予約・購入をしようとしている方に帰られてしまうのは非常にもったいないことです。

ホームページに載せる文章や画像も重要ですが、フォームやメニューなどが操作しやすいかどうかにも気を配ってください。


社名・屋号
社名・屋号ふりがな
ご氏名 (必須)
ふりがな (必須)
メールアドレス (必須)
ホームページURL
お問い合わせ内容 (必須) 当会へのご登録について
当会のご登録内容の変更・削除
取材・原稿執筆のご依頼
取扱ノウハウ・サービスについて
それ以外について
お問い合わせ詳細 (必須)

ホームページ

Posted by 新谷貴司