2019年12月25日カテゴリ:Webデザイン

UXの事件は現場で起きている〜令和元年のかき揚げ事件〜(1/3)

「かき揚げ事件」発生

先日当社のフロントエンジニアが、立ち食いそば店で食券を買い間違えて、「白だし豚しゃぶそばかき揚げそばの2杯のそば(しかも大盛り!)を食べる羽目になった」という事件が発生しました。

本人は豚しゃぶそばにかき揚げをトッピングしたかったのに、トッピングのかき揚げと思って押したボタンがかき揚げそばだった、ということです。

急いでいるから立ち食いそば店を選択し、それでもお腹はすいているので大盛りを選んだ結果、熱々かつ大盛りのそばを2杯食べなくてはならず、午後の業務パフォーマンスに大きなマイナスインパクトを与えた事件でした。

現場検証

一般的には凡ミスとして笑って済ませるレベルの話です。しかし正確無比なコーディングを行うフロントエンジニアが、そんなミスを犯すことには違和感があります。また、UXの事件として示唆に富む構造を含んでいるため、編集部をあげて調査を行いました。(決して暇なわけではありません)

券売機の再現イラストはこちら

券売機を写真に撮るのは流石にアレなので、記憶とネット調査をもとに書き起こしたので一部曖昧ですがこんな感じです。

券売機のボタンのラベルと配置(イラスト)

ボタンのラベルに「うどん・そば」の文字がない

つまり「かき揚げそば」の食券を買ったというのは便宜上で、「かき揚げ」とだけ書かれたボタンを押したのが事実。

かき揚げトッピングの正しいボタンと間違えやすいボタン(イラスト)

トッピングの場合は「トッピング かき揚げ 又 ごぼう天」というラベル

結果的にボタンラベルの文字数が多く文字が小さくなり、見つけにくいことになっていた。トッピングのボタンは下の方に色違いでグルーピングされていた。

Getting Betterとは

企業の忙しいWeb担当者の方のために、コーポレートサイトやオウンドメディアの運営に欠かせない情報やトレンド・ノウハウを解説するブログです。

日々のサイト運営のご参考になれば幸いです。

IMAGICA Lab.のWebサイト構築サービスについてはこちら
https://iiw.imagicalab.co.jp/web/

「株式会社IMAGICAイメージワークス」は、2018年10月1日に「株式会社IMAGICA Lab.」となりました。

トップへ