AI時代だからこそ、UXデザインを深く理解する必要がある！
と思い、7月1日から、「Sociomedia ヒューマンインターフェース ガイドライン」を読み進めて、考えたことを記録して、noteマガジンにまとめている。
今日は15個目。まずは引用から。
15. エラーを回避する
操作ミスを起こしにくくする。エラーメッセージをわかりやすく示すことも大事だが、それ以前にエラーが起きないように工夫することが重要。まぎらわしいものをはっきりと区別したり、状況的に意味のない操作はディスエーブルにするなど。
https://www.sociomedia.co.jp/9138
エラーが起こったら、ユーザーは最初からやり直さないといけない。「エラーを回避する」UXデザインは、ユーザーが目的を達成するための時間を最短にする。
その意味で、このルールは、クリック数を最小限にする、とか、モードレスにする、とか、ユーザーの自由を適度に奪う、と並んで、UXデザインの3つの大前提の一つ、User Control（ユーザーの主導権）を確保するための手段と考えられる。
具体例として二つ、引用先のソシオメディアのページで示されている。
まず、ボタンが二つ並んでいる時に、十分な隙間をとって、ユーザーが押し間違えないようにすること。
画像元: ソシオメディア
ボタンなどのクリックできるものが隣り合わせになっている時、クリックできるエリアの間隔は最低8ピクセル空けることが、Google Chrome の開発チームによる2020年の記事（リンク先は日本語への自動翻訳版）で推薦されている。そうすることでスマホ画面での押し間違いを防ぐことができる。
なお、同じ記事で、クリックできるもの自体は、少なくとも縦横48ピクセルpx幅（縦も横も）あることが推薦されている。ちょうど指の腹の大きさと同じぐらいだから、とのこと。
このアドバイスを無視しているアプリは数多い。ノートアプリの Notion は、ボタンやメニュー項目の縦幅が小さすぎて、かつ、8pxの隙間がなくて、押し間違えることがとても多い。。。
もう一つの具体例は、ログイン画面で、ユーザーがパスワードを入力するまで、ログインボタンを押せない状態にする（そして、半透明にして、押せないとわかるようにする）、というもの。
画像元: ソシオメディア
パスワード欄が空欄の時に「ログイン」ボタンを押しても意味がない。ならば「ログイン」ボタンは、パスワード欄に何か入力されるまで、押せないようにするのが「エラーを回避する」ことにつながる。
あと、付け足すなら、ログインボタンなど、何かデータをサーバーに送信するボタンを押した後、そのボタンを再度押せなくすることも必要。ネットワーク環境が悪い場合、ユーザーは何も反応しないのが不安になり、何度も送信ボタンを押してしまう。それを防ぐため。
もしデザイナーが「ログイン」ボタンを押せないようにすることを忘れていたとしても、実装するエンジニアが気を利かせて押せないようにするべきだと私は思っているし、そういうことができるWebエンジニアでありたいと思っている。
こういう細々としたUXデザインのコツを、エンジニアが知っているのと知らないとのでは、出来上がるアプリの質が大きく異なってくると思う。
（私が書いたnote記事を転載しています。）
