#01 Visibility of system status ヒューリスティックなデザインを見つける
#01 Visibility of system status システムの状態を可視化しよう
The system should always keep users informed about what is going on, through appropriate feedback within reasonable time.
適切なタイミングで適切なフィードバックを通じて、システムの処理が今どういう状態なのかユーザへ常に知らせましょう。
10 Heuristics for User Interface Design: Article by Jakob Nielsen
適切なタイミングで適切なフィードバックて・・顧客や上司部下とのコミュニケーションも同じw心理学だから人間関係にあてはまるというのはそりゃそうですね。というのはさておき。
人は、自分の状況を知りたい、見通しを知りたい、待ちたくない、自己効力感を得たいということでしょうか。
適切なタイミングとは
先日受講した「UXトライアウト ヒューリスティック評価」によると、とくにスマホやWEBの世界の話だと思いますが。
・人は0.1秒かからなければ待たなかったと感じる
・1秒は我慢できる
・1秒よりかかると「待っている」ストレスを感じる
のだそう。逆に「あえて待たせる」ようなデザインも探してみたいところ。
フィードバックする内容の整理
・操作が完了しているのか
ex) 登録完了メール
・進捗しているのか
ex) ダウンロード状況のバー表示
・あとどのくらいで完了するのか
ex) 登録ステップの明示
・自分が操作を行っているという効力感
ex) マナーモード切替時の振動、ゲームにおける操作に対する演出
フィードバックの仕方の整理
・メッセージ(ダイアログ、メッセージ)
・グラフィック・モーション表示
・音
・振動や触感
Adobe UX道場でマイクロインタラクションを取り上げてましたが、iPhoneのマイクロインタラクションは本当は好き。ちょっとした心地よい振動で操作感を演出してますね。最近3D Touchが搭載されましたがこれも気持ちいい。
画面ロックをするときのアクションも好き。ええ信者ですとも。
iPhone Drawer 3D Touchでメニューの詳細を表示 → 画面ロックと解除の操作。
よい事例、悪い事例探し
1) Twitter iOSアプリ起動時のロード画面
ロゴの鳥ちゃんが弾ける感じが可愛くて、みずみずしい?感じで好き。
ちなみに、起動時のロード画面はアプリによって結構異なります。(2018/07/21時点)
【静止ロゴ、画像あり】
メルカリ、ANA、LINE、NIKKEI、Amazon Music、Kindle
【レイアウトのワイヤーみたいなやつ】
Eight, Facebook,
【真っ白、真っ黒、何もなし】
Facebook Messenger, Instagram, Slack, NewsPicks
2)電車やバスの停止所における車両の場所情報
とくにバス停に表示があるととても助かる。