直感的なUI

「直感的なUIとは」直感的なUIがいい。とはよく言うければ、そもそも「直感的」とは何を指すのか。今回は書籍「Intuitive Design」の内容を参考に自分なりの解釈を加えたものを書いてみたい。

僕自身もつい最近まで、UIを考えるときPerceptibility, Predictability,Feedback, Consistency, Learnabilityという5つの考え方を基準に考えていた。しかし「Intuitive Design」では次の8つの指標を推奨している。

1.Discoverability

ターゲットユーザーが目的を達成するためのUIを発見できるか

2.Affordance

Aターゲットユーザーに操作可能なUIであり、どのように操作するかが伝わるか

3.Comprehensibility

ターゲットユーザーがそのUIの意味を理解できるか

Comprehensibilityは次のような点が判断指標となる。  

  • ユーザーの言葉で語っているか
  • 期待通りの動作をしているか
  • 的確なアイコンを表示しているか

4.Responsive Feedback

ターゲットユーザーの現在の状況や操作の結果を正確、
明確かつ即座に示せているか

5.Predictability

ターゲットユーザーが操作する前にその操作の結果を予測できるか

6.Efficiency

ターゲットユーザーが不要な動作や繰り返しをせずに最優先事項を完了できるか

7.Forgiveness

ターゲットユーザーの誤操作を防げるか、誤操作による打撃を最小限に抑えているか、誤操作から簡単に復旧できるか

マウスアップで動作させているか、タップエリアは十分大きいかなどがForgivenessの一例である。

8.Explorability

ターゲットユーザーがミスをすることや迷うことを恐れずに使えるか

次のような明らかなナビゲーションがあること

  • タスクの完了方法、および次のステップへの移動方法が明らかである
  • 前へ戻る方法が明らかである
  • 現在のタスクのキャンセル方法が明らかである
  • ホーム画面へ戻る方法が明らかである

保存方法が明確である

  • 即時保存の場合、保存が実行されていることを示す
  • 手動保存の場合、保存ボタンを明確にする(スクロールしないと見えないとかはだめ)

直感的なUI」への2件のフィードバック

  1. Willie G youllied

    Hello just wanted to give you a quick heads up. The text in your article seem
    to be running off the screen in Ie. I’m not sure if this is a format issue or something to do with internet browser compatibility
    but I thought I’d post to let you know. The style and design look great though!

    Hope you get the problem solved soon. Cheers

    1. Thank you so much for telling me the problem. I fixed the problem, I think you mentioned. I should be more careful for those who visit through smart phone these days.

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です