Shane Morris氏はMicrosoftでUXのエバンジェリストを務め、今は独立してUXのアーキテクトとして活躍している。氏はTechEd Australia 2010で“Pimp My App”と題したセッションを行った。このセッションで氏はUXの始める前に知っておく必要のある5つのこと、良いレイアウトを作成する4つのステップ、そして製品を素晴らしく見せるための方法についての6つのヒントを紹介した。
氏はUXの開発は次のステップを踏むべきだと考える。最初に情報の設計を伴う概念の設計を行い、次に操作の設計、そして最後に表示の設計を行う。UXは見てくれの良いページを作成するための技法/科学だと思われているかもしれないが、それはUXの一番最後の部分だ。氏はUXを始める前に知っておくべき5つのことを列挙した。
- UXデザインの最初の役割は色やフォントを確立することではなく、ユーザが操作方法やタスクを手元に引き寄せる方法を見つけることを支援するために、情報の表示と情報のワークフローを確立するために情報を分類することだ。そしてその後に製品の“エモーショナルトーン”を考える。
- ユーザ、ビジネス、ユーザビリティ、エクスペリエンスの視点を元にしてゴールを設定する。これらがデザインに影響するからだ。
製品を使うときやページにアクセスしたとき、ユーザは何を探しているか。
製品を提供する組織は何を達成しようとしているか。
どんなことが製品のユーザビリティを向上させるか。使いやすさか。柔軟性か。適合性か。
製品を利用することでどんなエクスペリエンスを提供するのが望ましいのか。製品の潜在的なユーザがこの問いに答えてくれるのが一番良いが、そうでなければデザイナが自分が顧客だったらどういう外観の製品がよいのかを自問する。 - “あなたはユーザではない”。デザイナはユーザが製品を使うときに何を見たいのかを想像しなければならないが、ユーザの好みやユーザが何をよいと感じるのかを本当に理解することはできないということを忘れてはならない。したがって自分の好みと他のすべてのユーザの好みが一致していると考えてはならない。
- 2から3スプリント毎にユーザビリティのテストを実施すること。これは新しいデザインの実装が上手く受け入れられているかどうかを確認するためだ。
- 製品内の情報の流れを十分に理解すること。そうすることで情報の表示の仕方をより良く想像できる。そして、ここからUIのデザインを始めるべきだ。
氏は続けてレイアウトのための4つのステップを示す。
- ワークフローを計画する。ユーザが仕事をするために行いそうな一連の動作を決定する。
- コンテンツを一覧する。ワークフローを実現するのに必要なウィジェットを決定する。チェックボックス、ラジオボタン、スピンボタンなどを適切に選ぶ。ボタンやチェックボックスに使う言葉の使い方を適切にする。
- 要素の順番を整える。ページ上の要素の並びはページの流れを考慮しなければならない。多くの国では、ページの流れは上から下、左から右だ。そして要素を自然な並びにする。
- グループを確認する。他の要素と強く関係する要素もあるので、そのような要素はページ上でグループにするのが自然だ。そのためには要素の再配置が必要かもしれない。
それから、氏は製品の姿を改善する6つのヒントを紹介した。
- 不要な要素をすべて削除すること。最小限のアプローチを採用するべきである。すべての飾りは特定の目的があるから作成される。既にデザインが施された製品を扱う場合は、本当に不要な要素や表示を汚くしている要素、ユーザをミスリードする要素はどんな要素であれ削除するべきだ。例えば、関連する2つの要素はひとつではなく単一のグループボックスで囲われるべきであり、ある要素をページ上の他の要素から分離するためにグループボックスを利用するなら、各要素をひとつづつグループボックスで囲うべきだ。
- バリエーションを小さくすること。フォントやレイアウト、色の使い方に一貫性を持たせる。すべてのページを全く同じにするということではなく、利用するフォントやレイアウト、色の使い方のバリエーションを小さくする。人々は一貫性があり、予測可能なGUIに惹き付けられる。
一方、バリエーションがあるとアプリケーションの異なる部分や側面が解りやすくなる。例えば、ウェブサイトのチェックアウトページは他のページと異なるようにして、このページが提供している情報とは目的が異なっていることをユーザに示すようにするのがよいだろう。 - 一列に並べる。視覚の流れを作るを作るためには、ページ上のさまざまな要素を可能な限り一列に並べるのが重要だ。そうすることでユーザはページが読みやすくなる。
- 要素の間を等間隔にあけ、各要素の大きさをそろえる。要素の大きさと間隔にはある程度バランスが必要だ。人間の目は似たような大きさで同間隔に並んでいる要素を好む。しかし、すべてが同じだと不自然に見える何の変化もないページになってしまう。
- まとまりを示すためにグループボックスを使う。または要素を似せたり、近くに配置したり、位置を合わせる。ホワイトスペースを利用するのも良い。
- 視覚的重みを調整する。各要素によって差異のある視覚的重みを作り出す。色、大きさ、形、コントラスト、不均衡、アニメーションなどを使うことで、ユーザが適切な順でページ遷移を行うよう促す。例えば、目は大きくて背景色とのコントラストがはっきりしている要素か熱い色の要素に素早く気付く。にする。
氏は色についてもアドバイスしている。
- “赤と緑を使う場合は、その間に何らかの色を配置する。”色の組み合わせに注意すること。
- 利用する色の数を最低限に押さえること。氏はデザイナに1から5の基準値のいずれかを選ばせる。1はUXの技術を全く持っていない状態、5は自分がデザインの専門家であるということをそれぞれ表す。プロジェクトではこの選んだ数と同じだけの色を利用できる。したがって、開発者自身が自分が全くデザイン技術を持っていないと考えてるものの、アプリケーションのデザインについて決定をしなければならないときは、ひとつの色しか使わない。自分が優れたデザイナであり、基準値3ぐらいだと考えていれば、4つの色を使える。デザインの専門家なら5つの色が使えるだろうが、専門家であればこのようなやり方をすでに知っているかもしれない。
- 背景色には中立なものを選ぶ。白、灰色、黒、濃紺色、茶色などだ。これらの色はページ上の他の色と相性がいい。
- どんな色を使っていいか解らない場合は、淡い色を使うのがいい。
- kuler.adobe.comまたはcolourlovers.comでカラーパレットを選ぶ。
- 色覚異常に配慮する。氏によれば10%の人間は色覚異常の影響を受けている。 vischeck.comはこの観点からデザインが問題ないかどうか確かめるのに便利だ。また、情報の伝達するときは色に頼るべきでない。
- 涼しい色、青や緑は遠く感じられる傾向がある。したがって、ユーザに遠くにあように見せたい要素に利用できる。熱い色、赤やオレンジは近く感じられる傾向にある。したがって、下記のイメージのように見る者に近く感じられる要素に使うべきだ。下記のイメージの場合、一番目の例がおすすめだ。
フォントの数については、氏はUXの経験によって色の数を決めるのと同じアプローチを勧めている。 初心者はひとつのフォントだけ使い、専門家は5つまで使える。
その他のリソース: UXパターンライブラリ.