世の中にあるいろんなWEBアプリを使ったり、時には作ったりしてきた中で、こういう工夫がユーザビリティにつながるのでは?と思ったポイントを備忘録的にまとめます。
テーブル行は交互に色を付けたほうが見やすいとかそういうのです。
(要件がどうとか諸説あると思いますが気にせず書いていきます。備忘録なので)
・有名どころの画面レイアウトをパクる参考にする
ユーザーの目は肥えてるので、彼らが慣れ親しんでいるWEBサイトやアプリの素晴らしい画面を基準に画面を操作する。
というのを前提に、独自の視点で画面を作らないようにする。
自分が作ろうとしているものの競合になりそうな(またはそれに近いジャンルの)WEBサイトの中でビュー数が多そうなものを見てみて、どうして見やすいのかを分析する作業が大事かな。
・ユーザーのIQは2であることを意識する
要は画面を見るときに、ユーザーに推測させてはいけない(頭を使わせてはいけない)。
頭からっぽでも操作できるように、小手先のテクニックをちりばめて誘導させまくるというマインドが重要。
↑の「有名どころの画面レイアウト」はエンドユーザーのことをバカだと思って作っているから成功しているんだと思う。
僕は重度のAmazonユーザーでよく利用しているんですが、たまにAmazonプライムビデオのリンクってどこだ…?ってなるときがある。
ヘッダーに「Prime Video」って出てるんだけどアホなので見逃す。こういうユーザーもいるんだと思って画面は作ったほうがよさげ。
(Amazonは何も悪くないです)
・テーブル行は交互に色を付ける
ついでにテーブル罫線はなるべく使わず、ヘッダー明細とかもできるだけ色分けで表現する。
(罫線がついてるとヘッダー固定のスクロール機能つけるときに厄介)
table tbody tr:nth-child(odd) td {
background: red;
}
・入力フォームにはプレースホルダーをつける
すぐ横にラベルがついてるからわかるでしょは通じないというマインドを持っていたほうがいい気がする。
(人間はいざ入力しようとフォームに意識を向けるとラベルが視界から消える生き物なので)
ついでに入力中でもプレースホルダーが消えないようなCSSを実装するとなおいいかも
<input type="text" placeholder="名前">
※逆にプレースホルダーがあるからといってラベルなしのフォームは用意すべきでない。
※人間は空のフォームに注目が行きやすい生き物なので、プレースホルダーがあると逆に入力済みと誤認するリスクがある。 ので一概には言えない気もする。。。
参考:
・TABキーの移動を常に意識してフォームを配置する
TABキーで移動する場合につながりのある移動を行えるようにフォームを置く。(単純なのだと姓→名とか)
人間の視界の動き方(Zの字)とtabindexの挙動は同じなので、これを意識しておけばレイアウト設計は割とスムーズに行く気がする。
随時追加していきます。