0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

ユーザビリティ備忘録

Last updated at Posted at 2022-12-06

世の中にあるいろんな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の挙動は同じなので、これを意識しておけばレイアウト設計は割とスムーズに行く気がする。

随時追加していきます。

0
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?