8creative

UX, tech, Sado

#03 User control and freedom ヒューリスティックなデザインを見つける

#03 User control and freedom ユーザコントロールと自由

Users often choose system functions by mistake and will need a clearly marked "emergency exit" to leave the unwanted state without having to go through an extended dialogue. Support undo and redo.

ユーザはよく誤った操作することがありますが、その誤操作によって起こる不測の事態を、新たなダイアログを通さずに、避けるための明確な「脱出方法」を求めます。
「undo(取り消し)」と「redo(やり直し)」ができるようにしましょう。

10 Heuristics for User Interface Design: Article by Jakob Nielsen

これはヒューリスティック評価の講座で言われていたのですが、あるダイアログが表示されたとき、キャンセルボタンがない場合があります。

ただ、実際にキャンセルボタンがなくてもキーボードのEscを押せば抜けられる。

そういうのは無くし、キャンセルボタンをちゃんと用意しましょうということですね。

f:id:hatch8888:20180721105433j:plain

システムの都合でユーザに操作の制限を与えてはいけない。つねにその状況から抜けられるように操作の自由を与えましょうということ。

同時に話題になったのがかつて炎上?したWindowsのアップデートによる強制再起動はもう改善されたそうですが、未だに一部Android端末で起こります笑

事例

 

#02 Match between system and the real world ヒューリスティックなデザインを見つける2

#02 Match between system and the real world システムを現実の世界に調和させよう

The system should speak the users' language, with words, phrases and concepts familiar to the user, rather than system-oriented terms. Follow real-world conventions, making information appear in a natural and logical order.

システムの専門用語を使わず、ユーザがつかう言葉や表現、馴染みのある概念に沿った表現をすべきです。現実の世界の原則に従い、自然で論理的な順序で情報を整理しましょう。

10 Heuristics for User Interface Design: Article by Jakob Nielsen

「専門用語を使わない」なんて皆わりと分かっているよ、という感じなのかもしれませんが意外と「ユーザにとって馴染みのある表現」を追求すると奥が深い。

後半部分の「自然な順序」というのは見てすぐわかる順番や位置関係ということですが、簡単にいえばエレベーターのボタンの位置が逆だったらややこしいですね、という話。

f:id:hatch8888:20180721101227p:plain

合成です笑

よい事例、悪い事例

セブで泊まったホテルにて。(写真とりわすれた)部屋に向かうときに客室案内板がこういうものだったので何度か迷いましたw

f:id:hatch8888:20180721101727p:plain

1020号室に行こうとすると、右と左、一瞬どちらかわからなくなる

 

#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)電車やバスの停止所における車両の場所情報

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

 

UXトライアウト・2時間で学ぶヒューリスティック評価【レポート】

UXトライアウト・2時間で学ぶヒューリスティック評価
2018年7月20日@渋谷  

ニールセンの提唱するヒューリスティックス10要件をもとに、手軽にUXを評価する手法について、理論から演習まで学べる充実した2時間でした。

ヒューリスティックは、要は人の思い込み。(記事後半部分でググった)

人の思い込みに反しない/思い込みを積極的に活用する=ストレスをあたえないデザインを目指すために、あらかじめ整理された指標をもとにコストをかけずに製品テストをできる、というもの。

紙媒体のデザインをやっている身としてはデザインの原理原則に通ずるものが多く、親しみやすい概念でとてもおもしろかった。アフォーダンスとかもこのあたりの話かなーと。

一方で動的なもの、インタラクションなもののデザイン、という意味では紙ではカバーできていない視点が多く興味深かったです。

実際にスポーツウォッチのユーザビリティを検証する演習もおもしろかったです(デザインを批判するとき、なぜか人はイキイキするという法則ですw)。

ããªã¼ã¤ã©ã¹ã, ãã¯ãã«ãã¼ã¿, EPS, èæè¨, æè¨, æé, è¨æ¸¬æ©å¨,

デジタル時計のボタンってなんかややこしいから使う気起きませんよね・・・。

 

今回は専門家じゃなくても自分たちで手軽にUX検証できる手法をかなり具体的に教えてもらいました。(評価シートなどのテンプレもあって結構手厚い)

ただいきなり自社製品をUX検証すると、みんな言いたい放題言ってしまって、制作側とギスギスしそうなので最初は当たり障りない他社製や競合製品で評価トレーニングをするのもいいなと思った次第です。

個人的にもいくつかやってみようと思います。

今日頭に残っていることダイジェスト
(資料を振り返らない範囲で覚えていること)

・UX検証にはユーザーテストが必須かつ最適だけど、なんせコストがかかりすぎるので

、前段階として低コストな「ヒューリスティック評価」を活用しよう

ヒューリスティック評価とは、「人が快適・意識せずに使える要件」にもとづき、それらにフォーカスしながらユーザビリティを検証すること

・「人が快適・意識せずに使える要件」はすでに多くの学者等によって整理されており、今回は代表的なものとしてニールセン氏がまとめた10の要件を取り上げる

・検証にあたって気をつけるべきは人の主観(人によって重視することが違う)、それによって発生する問題点の見過し。3人以上で行う、合議しないなどの実施方法についてもしっかり守ること。

 

(以下、実施する際の留意点)

・ニールセンのヒューリスティックス10要素は、ソフトウェア開発を前提にしているので物理的な使用感等についてはカバーしていないことに留意

ヒューリスティックス評価はあくまで一般論なので、特定の環境下での課題には気づきにくい

・実際にユーザにとっては重要でない点まで問題としてあがってしまう可能性がある。あら捜しになりかねない。

・あくまで、ユーザーテストの前段階として、基本的な調査と改善をするのに向いている

・開発者自身はやはりバイアスが強いのでやらないほうがいい

・検証する際は「機能の評価」にならないように注意する。あくまでユーザが実現したい「タスク」を軸に検証事項を整理すること(例:メールソフトの機能を検証するのではなく、「届いたメールに返信する」というタスクを検証する)
・批判(指摘?)するだけだと色々こじれるから「どうしたらいいのか」という改善案も一緒にだそうね!

 

全然ダイジェストじゃないw

深掘り①:そもそもヒューリスティックって?

heuristic:
[形容詞](of a method of teaching) allowing students to learn by discovering things themselves and learning from their own experiences rather than by telling them things

[名詞] a method of learning or solving problems that allows people to discover things themselves and learn from their own experiences:

 Cambrige Dictionary 

(理論などではなく)自らの目で発見したことや経験したことから学ばせる一種の教育手法、または問題解決法のこと。

・・・素直に日本語のサイトを引用すると、心理学用語の一つで「自分の経験・発見や直感によって無意識のうちに自分では合理的だと思う意思決定をすること」。

ヒューリスティックは更に3種類に分かれる。

いずれも要はバイアスということなんだけど「どんなバイアスなのか?」がわかることでコントロールできるというもの。

代表性ヒューリスティック

典型的、代表的(いわゆる皆が共通して抱いているイメージや、自分が今まで経験してきたこと)をもとに判断を下すこと。

参考1では「太っている人はそうでない人より運動ができない」ことを例示に挙げているが、もう少し掘り下げた例示としては参考2の次のようなもの:

「コインを5回投げたときの表と裏の割合は?」という質問とともに2つのパターンの選択肢を与えると、「表・裏・表・裏・裏と出る」という方を「表が5回連続で出る」よりも選ぶ人が多いのもその一つだという。

実際にはどちらのパターンも同じ確率なのだが、ランダムに出ることを経験的に知っているから選んでしまうという。

いわゆるステレオタイプはこっちにあてはまるのかな。

国、年代とかによって変わるものですね。

利用可能性ヒューリスティック(想起ヒューリスティック

想起しやすい情報、手に入りやすい情報を優先して評価してしまうこと。
最近起こった出来事、ニュース、強い情動を起こすような出来事が想起されるパターンが多い。

これは代表性ヒューリスティックとある意味相反するけど・・
自分の経験(代表性ヒューリスティック)を上回るような強い情動を起こす出来事や、ニュースによってこちらが優先される。

参考1でも挙げているように、ワイドショーはまさに典型、想起ヒューリスティック祭り状態w

他にも、今自分が関心のあることとかに寄せて物事を評価判断しまうのも当てはまるかな。

固着性(アンカリング)ヒューリスティック

アンカリング、船にいかりを下ろすかのように、はじめにある情報をあたえるとその後に来る判断はそれに基づいてしまうというもの。

つまり、初期値が異なると最終的な推定値も大きく異なる。(参考2)

UXデザインでもよく出てきますが、値段表示の際に値引き前を書くというヤツですね。

あとは松竹梅で価格を見せる。

あとはお笑いグランプリなども一番手が良くも悪くも基準になってしまうというのもこの一つですかね?違う?

参考:

1 ヒューリスティックとは?|心理学からみる合理性を鈍らせる原因 | BRAVE ANSWER

2 ヒューリスティックス | 認知心理学

ニールセンのUIにおける10のユーザビリティ ヒューリスティック指標

・・・事例を見つけていこうと思ったけど、長くなりそうなので別記事で。

UXデザイン独習 ユーザー調査

今日の教材

blogs.adobe.com

開発段階別最適なユーザー調査方法まとめ

 

【1】デザインが完成する前:管理されたユーザビリティテスト

 参考 MeasuringU: 20 Tips for your Next Moderated Usability Test

 

【2】管理されない、遠隔からのユーザビリティテスト

※1とあわせてやると効果的。最初の管理されたテストからの主要な発見を証明するために大量のサンプルを

 

【3】製品をデザインして公開するずっと前の段階:フォーカスグループ

”製品に何を求めているのか、ユーザーの個人的な考えや好みを発見するために使いましょう。”

参考 Focus Groups in UX Research: Article by Jakob Nielsen

【4】完成品に近い状態:ベータテスト

 

調査設計についての参考資料

https://uxstudioteam.com/ux-blog/ux-survey/