【フロントエンド初心者向け】ユーザビリティを上げるちょいテク

フロントエンドの開発が初めての人が意外と抜けがちな観点をまとめてみました。 初めにざっくりと概要を話すと「デザイナーが作るデザインでは表現しづらいもの」をまとめたものになります。 デザイナーが作るデザインは静的なものなので(たまにがっつりプロトタイプを作ったりもありますが)、いわゆる"状態"を表現するのが難しかったり抜けたりしがちです。 具体的に言うとローディング、Empty、エラーなどです。これらをよしなに補完できるフロントエンドエンジニアはデザイナーからもきっと「頼りになるぅ！」と思われること間違いないでしょう。 と言うわけでそんな例を紹介していきます。 今後も思いついたら追加する可能性が無きにしも非ず。 ローディングを出そう こう言うクルクルするやつとか こんな感じでシュインシュインするやつがあります。 基本的にユーザがアクションを起こした時に待たせる場合は必ず表示させましょう。 ロ

[latena]

スクロールで出たり消えたりするヘッダー、本当にやめてください。ちょっと上を読みたいからスクロールしてるのに、ちょうど読みたい部分が隠されて、本当にイライラします。

[sabotem]

バリデーションルールを最初から表示して、通過したらOKカラーになるの良いな。

[localnavi]

良い。「エラーの表示はユーザが入力し終わってからにしよう」エラーではないが、はてブの【自分のブックマークページ】の検索窓もユーザーが入力し終わってから検索結果を出してほしい。

[akahigeg]

スケルトンローディングに関してはこれが必要なほど遅いのは負けな気がする

[tofu-kun]

“エラーの表示はユーザが入力し終わってからにしよう” これすごいわかる。実装者の気持ちもユーザの気持ちも。良い指摘。

[Keisuke69]

Emptyの状態をしっかり作るってのなるほど！ってなった。まだまだこの分野は勉強が必要だ

[d4-1977]

使ってて気持ちいいを提供する時に必要になるヤツ！納期があると省かれていく非機能要件をどうやって盛り込んでいくか？ってところが腕の見せどころ？と思ってきていて、ぐぬぬって数年なってる…

[piayo]

条件出すのいいな。

[kasuke18]

これは確かに便利。ユーザー登録時のパスワード欄でイラっと来ることが多い。セキリュティ的な懸念があるなら仕方ないが…“インプットの側に「どんな条件を満たしたらOKなのか」を記述するデザイン”

[mayumayu_nimolove]

有名なサイトでよく見るテク

[Rishatang]

スクロールで消えるヘッダ、そもそもヘッダを固定しない方向で努力してほしいってのはある

[otchy210]

Cocoda 方式良いな。みんなこうなって欲しい。

[ftype]

スクロールして消えるやつって本当にいいのかな？アプリだったらいいと思うんだけど出たり消えたりがうざく感じる場合もある

[hirose504]

“Partially Persistent Headers” を覚えた、マイクロインタラクションはやりたいけどアニメーションは自作するもんなの？ど

[Shinwiki]

イランイランの広告出てねえなぁ

[Nobkz]

内容に結構突っ込みたくなるけど、とりあえず、これを「ユーザビリティ」と呼ぶのやめろ！！！！！

[knjname]

フォーム周りはサイト全体でどの辺までバーを上げるかっていうので悩む

[kagehiens]

いいですね、こういうの。

[yarumato]

“ローディング（クルクル）を出そう　トースト（ニュッと出てサッと消えてくやつ）を出そう　スケルトンローディング（灰色の文字塊）を表示させよう　ユーザ入力中はエラー表示せず、条件を添える”

[clubman023]

いいね

[nebos]

素敵

[arx0balest]

「エラーの表示はユーザが入力し終わってからにしよう」の実装案がすばらしい。真似したい。

[take-it]

名前と知らんかったのあるので助かる。