そんなボタン配置で大丈夫? ユーザーの習慣にあわせてUIを考える

anthony

anthonyはUX Movementの執筆者、チーフエディターです。素敵なWeb体験をこよなく愛し、ユーザのために日々奮闘しています。

この記事はUX Movementからの翻訳転載です。配信元または著者の許可を得て配信しています。

How Button Placement Standards Reinforce User Habits (2015-07-09)

「存在しさえすれば、どこに配置されていようとかまわない」

UXを理解していない人の多くが、ボタンのことをこう考えがちです。UXでは細部こそが重要であり、特にボタンの位置は重要です。

door-knob-placement

ボタンはドアノブのようなものです。ドアノブが一定の位置についてなければ、効果的にドアを使うことはできません。常に決まった位置についているからこそ、手がありさえすれば別に考えたりしないでドアを通ることができるのです。ドアノブの定位置は、私達にとって無意識に習慣化されたものです。 

ユーザーは習慣に頼る生き物

ドアノブと同じように、ボタンもまた定位置が必要です。ボタンを一定の位置に配置することで、ユーザーはドアを通るかのようにアプリを自由に使うことができます。

ほとんどのアプリがボタンの定位置に従わず、ユーザーの習慣を壊してしまっています。このため、ユーザーがしたかったことと、実際にアプリがしたこととの間に誤差が生じてしまいます。

ケース・スタディ

ボタンが定位置にないためにユーザーが陥りやすい重大なミスの例を紹介しましょう。ユーザーが頼るのは目に見えるものではなく、習慣です。

Pocketはこんなことを学びました。

新規ユーザーは無意識に戻るボタンがあると思い込み、既読ボタンをタップして前のページに戻ろうとしていました。リーダーは閉じますが、保存したアイテムは消え、リストが空になったり記事が消えた状態で戻ってしまっていました(ソース

up-button-placement

既読ボタンとして使われたチェックマークのアイコンは、戻るボタンには見えませんが、通常戻るボタンがある場所に配置されていたために、ユーザーは習慣で、戻る操作をしたつもりで既読ボタンを押してしまっていたのです。

Pocketは、戻るボタンを失くし、そこに既読ボタンを移動させても問題ないだろうと思っていました。しかし、ユーザーとは習慣に頼る生き物であり、このような些細なことがUXに影響するのです。

あるユーザーは、ミーティングを手配していて、「詳細を全て入力し、数人を招待して、それを偶然キャンセルしてしまった」ために、混乱してしまいました。(ソース

done-button-placement

二つのボタンのラベルは「キャンセル」と「終了」で、文字を読めば違うことはすぐわかります。しかしそれでも、ユーザーが「終了」ボタンがあると思い込んだ場所にキャンセルのボタンがあったために、間違って「キャンセル」をタップしてしまいました。 

「目より手が早い(見るより前に手が動く)」とよく言いますが、この場合は「目より習慣が強い(見るより前に習慣が働く)」ということでしょう。デザイナーはこれを考慮に入れて、アプリのボタン位置を決める必要があります。

ボタンの定位置を決めてそれに従う

「キャンセル」ボタンを左右どちらに置くべきかはさておき、定位置を決め、アプリの全ページでそれに従うようにしましょう。この一貫性が、ユーザーの無意識行動を決定し、習慣を強化してくれます。

通常のボタン定位置に従わないと、ユーザーの期待を裏切ることとなります。ユーザーをイライラさせたり混乱させたりしないでください。習慣を強化すれば、ユーザーはドアを通るように簡単にタスクがこなせるのです。