ここ数ヶ月、gleesyという新しいサービスをつくっているのですが、
どうにもデザインが難しい！
デザインが主観的な仮説の積み重ねになってしまっていて、いかがなものかと思ったので、
ユーザビリティの理論を調べてみました。
と、言ってもただの自分のためのまとめメモですが。
あと、gleesyが気になった方は
http://gleesy.com/より事前登録をお願いします。
【0.目次】
―基本
・ユーザビリティ5原則
・デザインガイドライン
―ガイドライン
・３つのチェック項目と5つの法則
・インターフェースデザインで気をつけるべき10のこと
・カラーデザインの原則
―評価方法
・ユーザビリティテスト
・ヒューリスティック
・チェックリスト
・認知的ウォークスルー
・シナリオウォークスルー
【Ⅰ.基本】
まずは、ユーザビリティの基本となる考え方です。
ユーザビリティを考慮したサイト設計は以下のようなフローになっています。
この中でも特に構造はUIの基礎となるもので、非常に重要です。
次にユーザビリティ5原則とガイドラインについてです。
■ユーザビリティ5原則
ヤコブ・ニールセン博士による有名なユーザビリティの5原則です。
この5原則がすべてのユーザビリティの基本となると言えるでしょう。
『学習しやすさ』
直感的かつ簡単に使用することが可能か
『効率性』
ユーザーが目的をどれだけ効率的に行えるか
『記憶しやすさ』
使い方は覚えやすいか
『間違えにくさ』
間違いを起こしにくいか、また起こしても簡単にやり直せるか
『主観的満足度』
ユーザがサイトを利用して楽しいと思い満足できるか
■デザインガイドライン
まず、デザインにおいて最も重要なのはデザインガイドラインを持つこと。
Apple, Googleといった企業でも、デザインのガイドラインがあります。
これをSatoshi Nkajimaさんが自身のブログで端的に表しています。
「ユーザー・シナリオを８０：２０ルールで切り分け、常に８０の方（つまり多くの人が使うだろう機能）を最優先にした設計にし、２０の方（あった方が良いかもしれない機能、一部の人が必要とするかもしれない機能）は思い切って犠牲にする」
ユーザー・インターフェイスの設計に大切なのはデザイン・ポリシー
そして、最大の原則は
『神は細部に宿る』
1pxの細かいところまでデザインすることが重要。
『ユーザーに考えさせない事』
言い換えるならば、直感的に把握できるようなデザインでなければいけないということです。
人はWebを見ているときは、基本的に考えることを好まないのです。
【Ⅱ.ガイドライン】
次に、実際のWebデザイナーさんや企業さんがデザインをしていく上で、
ガイドラインとしている項目をまとめてみました。
リンク先ではより詳細に書いてあるので、興味のある人はご覧ください。
■３つのチェック項目と5つの法則
・ユーザーの視点を理解しているか
・道しるべと現在地について適切か
・ユーザーを惑わすテキストが無いか
法則1「長いテキストを最初からよし見ようとは思わない」
法則2「長たらしい説明よりもまずキーワードをクリックする」
法則3「一度うまくいったらそれ以外の方法を模索しない」
法則4「ユーザーは現在地とそのサイトのボリュームを知らない」
法則5「最初に何の情報があるのかと気になっているのがユーザーである」
ユーザビリティの原則と現場で使えるユーザビリティテストの方法
■インターフェースデザインで気をつけるべき10のこと
１．クリック可能エリアは余裕をもって
２．ラベルテキストが上に行き過ぎないように
例）うまいことセンタリングされていないボタン上のテキスト
３．濃淡をつけて視線を誘導
４．色も使って視線を誘導
５．関連する情報はまとめましょう
６．Letter Spacingも意識しよう
７．入力フォームに自動的にフォーカスする
８．入力フォームをちょっとだけかっこよく
９．マウスオーバーでメニュー表示
１０．確認画面をカスタマイズする
インターフェースデザインで気をつけるべき10のこと
■カラーデザインの原則
ベースカラー（基調色）70%
サブカラー（副調色）25%
アクセントカラー（強調色）5%
デザイン | 実践ガイド | ユーザーサイド 株式会社アーティス
【Ⅲ.評価方法】
原則やガイドラインに沿ってデザインをしてサイトが完成したら、
次は本当にそのデザインで良いのかというチェックを行う必要があります。
ということで、ここでは割と有名なユーザビリティの評価手法５つを紹介します。
■ユーザビリティテスト
ユーザビリティテストは、実際にサイトを利用してもらい、
その様子を観察し、テスターに質問するなどして問題点を探る手法です。
ユーザーの目線に注目したアイトラッキングも合わせて行われたりします。
企業に頼むと費用が高くつきますが、友人に頼めばその点も問題ないでしょう。
テスターの人数は5人程度でも十分意味があるそうです。
■ヒューリスティック評価
専門家がトライアンドエラー方式でサイトを試し問題の発見するという手法です。
専門家に依頼する必要がり、さらにその専門家の力量に依存するので、
あまり手軽とは言えないかもしれません。
■チェックリスト評価
チェックリストに沿って評価を行うという手法です。
簡単に誰でもできるので、まずはこの方法でサイト評価をすると良いでしょう。
ユーザビリティチェックツールというサイトが便利です。
■認知的ウォークスルー
認知的ウォークスルーとは、専門家がターゲットユーザーになったつもりで
サイトを閲覧/操作してみることによって、様々な問題点を指摘する手法です。
先に挙げたユーザビリティテスト＋ヒューリスティックといった感じでしょうか。
■シナリオウォークスルー
シナリオウォークスルーとは富士通が独自に開発した評価手法だそうです。
認知的ウォークスルーと少し似ています。
具体的には以下の３ステップに評価を行います。
Step 1．イシューツリー
ビジネスの目的、サイトの目的をMECEに分解する
Step 2．シナリオ抽出
タイプ、目的、環境ごとにシナリオを作成し、そこから問題を抽出する
例）おじいちゃんが孫の誕生日のためにCMで見たおもちゃを探す￥
Step3．認知モデルに基づく評価
シナリオを３つの操作ステップ（読む、クリック、スクロール）に分け、
４つの行動モデル（動機の発生、探す、実行する、結果を評価する）に沿って評価をする
Webユーザビリティ評価手法：シナリオウォークスルー法(*PDF File)
と、こんな感じでしょうか。
AppleやGoogleのガイドラインは今度まとめてみようと思います。
最後に、ユーザビリティのサンプルを掲載しているサイトを２つ紹介して終わります。
■サンプル
ここ1年くらいで見られた素晴らしいインターフェイスデザイン 12選
ウェブデザインのユーザーインターフェースに使えるサイトまとめ
石田 優子 有限会社 アルファサラボ
インプレスジャパン
