ヒューリスティック評価をやってみた

デザインチームにおける時間の制約と費用の問題で行われる評価の一つがヒューリスティック評価である。

◆◆◆

ヒューリスティック評価とは・・・

全体的なデザインやユーザーインターフェイスの特定の要素
またはセクションの使いやすさを公平に検査する方法
もともとはJakob Nielsenによって開発されたもの

ヒューリスティック評価には、ユーザーインターフェイス要素の分析が含まれる。

ユーザーインターフェイス設計のための絶対的で徹底したガイドラインではなく、ヒューリスティック(=経験則)と呼ばれる設計原理を適用している。

ヒューリスティック=
人が判断や意思決定をする際、無意識に使っている法則や手がかり

これらのヒューリスティックは、
以下のデザインを評価するために利用される。

チェックボックス
トグルボタン
メニュー
ヘルプとドキュメントの提供
ウェブサイトのアーキテクチャ(他のタイプの設計でも)
ナビゲーションの方法
一般的なディスプレイの表面的な側面など

を評価するために使用される。

◆◆◆

10 user interface design heuristics 
by Jakob Nielsen et al (1994)

1. Consistency and standards
インターフェースデザイナーは類似したプラットフォーム上で確実に用語を統一する。

2. Visibility of system status
ユーザは、適当な時間内で近況報告を理解しやすいように、運用システムについて常に通知する。

3. System match to the real world
デザイナーは、「tech-speak」とは対照的に、ユーザーが現実世界で知っているであろう言語、表現、概念の種を反映するよう努める。
論理的な順序で情報を提示し、ユーザーが現実世界で形成していたかもしれない予想や可能性を取り入れることで、インタラクションは認知負荷を軽減し、システムをより使いやすくする。

4. User control and freedom
後方へのステップが可能な機能を提供(undo/redo)

5. Error prevention
エラー回数が最小限になるようにシステムを設計する
ユーザーは問題を検出し解決するよう求められていないため、時には専門知識のレベルを超えている可能性がある。 エラーの原因になりえるアクションに排除またはフラグを立てることは、エラーを防止するためにできる2つの手段。

6. Recognition rather than recall
ユーザがなにか実行している間、認知負荷が最小限に抑えられるように、ディスプレイ内にタスク関連情報を維持する。 短期記憶の限界により、デザイナーはユーザが部分的なダイアログにわたって情報を記憶しなくてもいいようにするべき。 このような情報表示を維持したり、簡単に取得する手段を提供することは不可欠。

7. Flexibility and efficiency of use
ユーザーは、必要に応じてインターフェイスをカスタマイズできるため、より便利な手段で頻繁な操作を実現できる。
(略語、ファンクションキー、隠しコマンド、マクロ機能の使用)

8. Aesthetic and minimalist design
画面は現在のタスクに必要な要素だけにまとめなければならない

9. Help users recognise, diagnose and recover from errors
エラーを認識・改善するためにエラーメッセージを明示的に表示、解決法を提案

10. Help and documentation
理想はユーザーが文章に頼ることなくシステムを案内することであるが、ときに必要になることがある。
簡単に見つけられやすい場所に設置、現在のタスクを特定している、長すぎず必要なステップでユーザーをガイドする

◆◆◆

ヒューリスティック評価を行う

1992年にJakob Nielsenによって行われたヒューリスティック評価の結果では、異なる評価者は異なる数と種類のユーザビリティ問題を明確にしたことを示している。
そのため、高い検出率を確保するためにヒューリスティック評価では複数の評価者が推奨され、最終的なプロダクトが輩出される前にユーザービリティの問題を解決できる可能性がある。

Jakob Nielsenによると3〜5人の評価者で十分と示唆している。

しかし金銭面と時間の問題からユーザビリティの大部分の問題点を検出するには、開発の初期段階で一人、または二人の評価者で十分な場合がある。

◆◆◆

Dropboxのwebページを参考に実際に行ってみた

STEP1: 評価するwebsiteを選択
dropbox

STEP2: 課題を一つ設定
不必要なファイルを捨てて容量を増やしたい
行動を分解
①現状の容量を知る
②不必要なファイルを見つける
③削除する

STEP3: 課題を実行、ヒューリスティック等を利用して問題を検出
①現状の容量を知る

自分のアイコンをクリックすることで簡単に見つけることができた。
簡単に見つけられた理由を考察してみる

・My pageのアイコンの位置が適切(Consistency and standards)
だいたいyoutubeでもnoteでもgoogleでもweb上のプラットフォームの多くがwebページの右上にアカウントの設定を設けている。

・アイコン=アカウント情報というメタファーが適切(Consistency and standards)
今自分が使用している容量がアカウント情報に含まれると予想し、アイコンを探した。つまりアイコン=アカウント情報というメタファーが私の頭に染み付いていたのだ。

直感的なデザインとわかりにくいデザインの違いは、
突き詰めて考えると適切なメタファーが使われているかどうかという点に尽きます
メタファーという表現技法。メタファーでデザインをつくる、デザインを壊す-dropbox-

適切なメタファーを探すのに役立つツールがこちら💡

Google 画像検索:シークレットウィンドウで画像検索すると興味深いメタファーを発見するかも。入力ワードと関連するキーワードもたくさんでてくる。

Noun Project:ほとんどのアイコンを網羅するデータベース

②不必要なファイルを見つける
ここで問題発生、どのファイルが不必要か判断できなかった。
原因はサムネイルが小さすぎる、グリッド表示にできるアイコンに気づかなかった。目のアイコンをクリックするとより大きな画像を表示することが捉えられなかった。

表示の切り替えでグリッド表示させるとこのような画面になる

一方ホーム画面のデザインはこちら。
最初からリスト設定でグリッドに切り替えできない。

ホーム画面と他の画面の統一性が欠けていたため、グリッド表示に切り替えができるアイコンに気づかなかったのかもしれない。


デザイナーとしてAdobe製品を使う私としては、目のアイコンをクリックすると対象物が見えなくなるか、見えるようになるかどちらかだからだ。
ここで使っている意図とはちょっと違った。

③削除する
ゴミ箱マークを探すのに少しとまどった。

普段google driveをよく使うので、そのUIに慣れてたからだろう。

別のやり方も見つけた。

・・・に隠れていました。

STEP4:問題点はどのように影響を及ぼすか、深刻な問題なのか吟味
システムやアイコンの統一性に欠け、ユーザーが重要な要素を見落としたり、そのアイコンの意味を認識できなければ、目的を達成することができないかもしれないし、それまでに時間がかかるかもしれない。

さらにサムネイル画像はとても小さいので間違って意図しないファイルを削除してしまう恐れがある。

STEP5:解決策を提案

サムネイル画像が小さすぎてわかりにくいため、デフォルトの設定をいっそグリッド表示にすればよいのでは。ファイルの名前よりも画像の方が明らかに情報量が多く見分けやすい

目のアイコンについては、Adobe製品では見えるか見えないか、Google drive、Drop boxではプレビューを意味する。これは、Adobe製品を使わない人にとってありなのかなしなのかぶっちゃけわからん。

この記事が気に入ったら、サポートをしてみませんか?気軽にクリエイターを支援できます。

🤓♪
26

nana

デザイン学びメモ

Interaction design foundationで学んだことを実践してみたり、整理してみたり。メモです。
5つのマガジンに含まれています
コメントを投稿するには、 ログイン または 会員登録 をする必要があります。