プレイブック -デザイン-

驚く方もいるかもしれませんが、弊社のデザイナーのほとんどが、Vimをテキストエディタとして優先的に使用しています。thoughtbotが他社と大きく異なる点はこれだけではありません。

私たちが抱える多くのプロジェクトでは、しばしば状況が急激に変化します。昔ながらのPhotoshopのカンプや仕様書なしに、デザイナーはどのようにしてプロセスを組み立てていくのでしょう?

スケッチ

デザインスプリントを行っている時もそうですが、弊社のデザイナーはプロダクトを実装する前に、インターフェースをスケッチすることがよくあります。また、スプリントで行うように、チームの皆には、どんな時でもスケッチをさせるようにしています。

ですから、オフィスの至る所にポケットサイズのMoleskine社製スクエア型ノートブックをたくさん常備し、誰でも使っていいようにしています。ポケットサイズであれば、いつでもどこでもアイデアがひらめいた時にノートに書き留めるという習慣を持たせることができますし、デザインに制約を持たせ、モバイルファーストという考え方を促すこともできます。

Moleskines
Moleskine社製のノートブック

ワイヤーフレーム

デザイナーは、スケッチしたものに手を加え、HTMLやCSSワイヤーフレームに組み込んでいきます。HTMLやCSSワイヤーフレームの構築に使用する BourbonNeatはブラウザ上で公開されており、チームメンバーは主要なエクスペリエンスを素早く把握することができます。また、開発者がワイヤーフレーム内で機能を実装していくことも可能です。

開発するよりもアプリケーションのデザインを先に行うことは非常に重要です。重点を置くべきは、ワイヤーフレームの使いやすさやユーザエクスペリエンス、フローなのです。

私たちは、デザインと開発のサイクルを適度に縮めることが重要だという点に気づきました。ワイヤーフレームの構築に1カ月費やしたりはしません。特定のプロダクトのデザインを行う場合、結果的に機能を削除したり変更したりすることがよくあるからです。

これらの変更は、繰り返し行われるプロセスや、クライアント、thoughtbotのチーム、そしてユーザ間で行うフィードバックの中で予測できることなので、組み込まれることのないワイヤーフレームの機能や、使われることのない機能を構築することに時間をかけることは無駄なことなのです。

ユーザインターフェース

インターフェースとは、人間とコンピュータの両者が情報をやりとりする場所のことです。コンピュータはそれを動かす機能を持ち合わせており、人間はそれらの機能を動かすために入出力を行うという立場にあります。インターフェースは、人間が得たい結果を引き出すために、コンピュータの機能を使って入出力を行う場所の配置なのです。- Ryan Singer

私たちのソフトウェアのコンテキストにおいては、個々のユーザが求める結果を提供できるインターフェースとなるようにデザインしています。

インターフェースの評価に設けている基準は以下の通りです。

  • 結果を最優先する
  • ユーザにアフォーダンスを提供する
  • 関連するプラットフォームと適合させる
  • アプリケーション全体に一貫性を持たせる

私たちは、ユーザが求める結果にまず重きを置きます。ソフトウェアが美しいからというだけで、それを利用するユーザはいません。彼らが私たちのソリューションを求めるのには理由があるのです。私たちが優先していることは、価値のあるソリューションを提供し、それらを容易に導き出せるということです。

簡単に理解することができる。そういったソフトウェアを作るように心掛けています。複雑な動作は避け、ユーザが入力する事柄に対してソフトウェアがどのような結果を返してくれるのか予測することができる。そしてこのソフトウェアがその能力を持ち合わせているのだと、ユーザに理解してもらわなければなりません。ですから、直感的にそのことが分かるソフトウェアであることが大事なのです。

私たちは、ソフトウェアを作成する際、プラットフォームのガイドラインに沿うようにしています。その方が、無理にプラットフォーム全体をブランド化させるよりも、コンテキストに調和させた時にインターフェースの見た目が良くなるのです。ですから、デザインをする際には、ユーザに馴染みのあるインターフェースを選ぶようにしています。

一貫性を保つようにすることで、使いやすいインターフェースは、アプリケーション全体で期待通りの機能を果たしてくれるのです。

インタラクションデザイン

インタラクションデザインによってユーザはキャンバスを変更したり、直接操作したりすることができます。このようなインタラクションのデザインが、私たちのソフトウェアに躍動感を与えるのです。インタラクションデザインは、アフォーダンスを提供する必要があります。例えば、アニメーションなら、ユーザのインターフェースの理解を助ける強力なメタファーになるでしょう。また、ユーザをあるタスクの開始から完了まで誘導するのも役割のひとつです。

デザイナーは、これらのインタラクションのプロトタイプ構築から実装までのかじ取りをします。Webアプリケーションの場合はブラウザ、iOSであれば、QuartzComposer、レビューではgifsをインタラクションのデモに用います。

ビジュアルデザイン

私たちはアプリケーションのビジュアルデザインをもっぱらそのアプリケーションのスタイルと呼んでいます。私たちは、アプリケーション内のアイデアを伝え、またそこに秩序を与えるために、ユニバーサルデザインの原則を使います。
下記はその原則の一部です。

  • 整列配置(グリッドを用いて実現させることが多い)
  • 強調(サイズ、配置、色によって実現させることが多い)
  • 一貫性(ボタン、リンク、ヘッダを基本的には統一する)
  • 余白(エレガントでいつ誰にでも好感をもたれ、目にやさしい)

一般的に、成功しているビジュアルデザインは、デザインそのものには注目させないものです。コンテンツを際立たせること、サイト全体のワークフローが明確であることが重要だからです。「印象的な」、あるいは「目に飛び込む」デザインを目指したいという誘惑には抵抗しなければなりません。
良いデザインとは、使い勝手の良いデザインです。Googleのビジュアルデザインを例にとってみましょう。

Gmail
Gmail

全てがグリッドに沿って配置されています。”メール検索”と”作成”ボタンは、色調によって、その他の機能項目よりも強調されています。未読のメッセージは太文字で表示されるため、その他のメッセージよりも目立ちます。

Google Search
Google検索

全てがグリッドに沿って配置されています。余白がふんだんにとってあります(特にAdBlockを使うと、余白が際立ちます)。また、検索のインターフェイスはGmailとの一貫性を持っており、検索ボタンは色調によって強調されています。

Google Video
Googleビデオ

グリッド。余白。一貫性のある検索ボックス、検索フィルタ、検索結果一覧。

Google Places
Googleプレイス

グリッド。余白。検索とレビュー書き込みの強調。
私たちは”グラフィックデザイン”ではなく、”ビジュアルデザイン”という用語を使います。なぜなら、基本的に私たちのアプリケーションはグラフィックスを求めていないからです。
代わりにこれらの原則と、Typekittypography.comの高品質なタイプフェイスを使った素晴らしいタイポグラフィを頼りにしています。

ユーザインタビューとユーザビリティテスト

プロダクトの成功には、早期かつ頻繁なユーザインタビューと、ユーザビリティテストの実施が欠かせません。私たちはフローとメンタルモデルの感触をつかむため、スケッチでテストを行うことさえあります。早い段階では、問題の見極めと解決を繰り返すテスト、潜在的ユーザのリサーチを多く行います。そして後の段階になるほど、実際のプロダクトのユーザビリティテストを増やしていくのです。

ユーザインタビューとユーザビリティテストは、プロダクトの実行可能性とユーザビリティを確かめる上で最も効果的な方法です。テストを継続的に行うことによって、プロダクトとチームは、実際に人々が直面する問題の解決と、最善のユーザエクスペリエンスの開発に確実に集中できるのです。プロジェクトの進行中、常にユーザインタビューとユーザビリティテストを行うには、何よりテストの計画を早期に詰めることが重要です。プロジェクトの開始時は、プロジェクトのインタビューとテストは2週間に1度のペースで行うとよいでしょう。それによってインタビューとテストの必要性を意識し、チームはそのテスト計画を各個人のプロジェクトにどのように適合させていくかを議論します。テストは常に、ユーザとプロジェクトの必要性に応えるものであるべきです。

テスト対象はソフトウェアであって、あなたではありません

ユーザビリティとは、ユーザがどれだけ容易に、任意の結果を得られたかを示す尺度です。

私たちはユーザビリティテストを、テスト駆動開発と同様に捉えています。テスト駆動開発では、期待される結果をユーザが反証できる形で記載しますが、ユーザビリティテストの場合、私たちはjobs storyのようにシナリオ形式で結果を記載します。

出社後にチームの最新状況をチェックして、行き詰っているメンバーがいれば、サポートにあたります。

シナリオができたら、次はテスター探しです。

テスターの候補として最も一般的なのは、既存ユーザでしょう。Twitterで彼らにメッセージを送ったり、Webサイトにバナーを追加したり、メールマガジンにリンクを張るなどの対応をします。また、発足前のプロジェクトであっても、専用のメーリングリストを準備します。

テスターを見つけるのに苦労する、もしくは既存ユーザには関心がないという場合でも、Craigslistを使えば効率的に候補者を見つけることができます。ちなみに私たちのオフィス・マネージャは、Craigslistにメッセージを投稿し、テスターが来社する日取りを決めています。そしてテスト後は、彼らに報酬として30ドル支払っています。

Craigslistで人を探す際は、こちらのシンプルなテンプレートが便利です。

テスターが到着したら、自己紹介をして手順を説明します。形式張る必要はありません。テスターには楽にしてもらいましょう。リラックスした状態でユーザテストを行うために、テスターに対して以下の内容を伝えることが重要です。

  • 私たちは、あなたの素直なフィードバックを望んでいる。
  • あなたがこれからテストするものは、私が作ったものではない。よって、あなたがどのような反応をしようと、私の気分を害することはない。
  • テスト対象はソフトウェアであって、あなたではない。これはユーザテストではなく、ユーザビリティテストである。

テスターの様子を録画する場合は、簡単な同意書に署名してもらいます。

テストが始まったら、テスターにはソフトウェアを使っていて気付いたことを大きな声で言ってもらいます。不自然に思うかもしれませんが、これは大事なことです。テスト中にこちらから話すのは、テスターに対してもう一度大きな声で話すよう頼む時、質問を投げかける時、達成すべき目標を伝える時だけにします。

また、「その作業は難しかったですか?」というような誘導質問は避け、代わりに関連質問をするようにしましょう。たとえテスターから、「これは最高だね」という言葉が聞けたとしても、無言で互いの背中を叩いて、賞賛し合うようなことをしてはいけません。目標はあくまでもテスターの反応を理解することなので、「なぜ最高だと思うのですか?」と質問をすべきです。

テストが終わった後は記録を見返して、重要な問題の絞り込みを行います。そして、その問題を次回のユーザビリティテストまでに修正します。ナビゲーションに関わる問題が見つかると、全てやり直したいという衝動に駆られるものです。しかし、その欲求を抑えて、インパクトの少ない修正案を考えなくてはいけません。