8creative

UX, tech, Sado

#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心理学だから人間関係にあてはまるというのはそりゃそうですね。というのはさておき。

人は、自分の状況を知りたい見通しを知りたい待ちたくない自己効力感を得たいということでしょうか。

f:id:hatch8888:20180721084015j:plain

ホイールアイコンが延々と回る時間は永遠のように感じますね
適切なタイミングとは

先日受講した「UXトライアウト ヒューリスティック評価」によると、とくにスマホやWEBの世界の話だと思いますが。

・人は0.1秒かからなければ待たなかったと感じる

・1秒は我慢できる

・1秒よりかかると「待っている」ストレスを感じる

のだそう。逆に「あえて待たせる」ようなデザインも探してみたいところ。

フィードバックする内容の整理

・操作が完了しているのか
 ex) 登録完了メール
・進捗しているのか
 ex) ダウンロード状況のバー表示
・あとどのくらいで完了するのか
 ex) 登録ステップの明示
・自分が操作を行っているという効力感
 ex) マナーモード切替時の振動、ゲームにおける操作に対する演出

フィードバックの仕方の整理

・メッセージ(ダイアログ、メッセージ)
・グラフィック・モーション表示
・音
・振動や触感

Adobe UX道場でマイクロインタラクションを取り上げてましたが、iPhoneのマイクロインタラクションは本当は好き。ちょっとした心地よい振動で操作感を演出してますね。最近3D Touchが搭載されましたがこれも気持ちいい。

画面ロックをするときのアクションも好き。ええ信者ですとも。


iPhone Drawer 3D Touchでメニューの詳細を表示 → 画面ロックと解除の操作。

よい事例、悪い事例探し

1) Twitter iOSアプリ起動時のロード画面

ロゴの鳥ちゃんが弾ける感じが可愛くて、みずみずしい?感じで好き。


Twitter

ちなみに、起動時のロード画面はアプリによって結構異なります。(2018/07/21時点)

【静止ロゴ、画像あり】
メルカリ、ANA、LINE、NIKKEI、Amazon MusicKindle

【レイアウトのワイヤーみたいなやつ】

Eight, Facebook,

【真っ白、真っ黒、何もなし】

Facebook Messenger, Instagram, Slack, NewsPicks

2)電車やバスの停止所における車両の場所情報

とくにバス停に表示があるととても助かる。