UXデザイン初心者のための5つのトレーニング

Ryan O'Connor

GobySavvyの共同設立者Ryan O'Connor(Ryan's LinkedIn)は、企業が楽しいデジタルUXを提供しながらのビジネス目標を達成することを支援するミッションをもっています。

この記事はSpeckyboy Design Magazineからの翻訳転載です。配信元または著者の許可を得て配信しています。

5 Simple UX Exercises That Will Change How Decision Makers Think (2017-02-18)

たとえば、あなたがデジタルビジネスのオーナーまたはマーケティングの担当役員で、UXデザインの分野について詳しく知りたいとします。すでにUX関連のニュースやデザインのトレンドについて調べただけでなく、自社のUXデザイナーやコンサルタントに、UXの業務がビジネスプラン全体とどのように適応しているか何度も尋ねてきました。さらに、最終的な製品やモックアップがどのように見えたり感じたりするかについて、UXデザイナーにフィードバックを求めたりすることもあるかもしれません。

しかし、もう一歩踏み込んで、根本的にユーザー体験がどのように作られているのかを知りたい場合はどうすればよいでしょうか。または、新しいWebサイトやアプリのアイデアがあり、専門家を雇う前に自分で作ってみたいと思うかもしれません。その場合、おそらく少しトレーニングが必要でしょう。そこで私たちの出番です。

この記事は、UXデザイン全体の流れを追ったトレーニングのリストとなっています。これは、インタラクションデザインの修士号を取った人や専門家を雇わずに、いつでも試すことができます。

宿題中

一度試しただけでは、アプリケーションやWebサイトのデザインをすべて自分でできるようにはなりませんが、UXデザイナーが日常的に実践している基本事項を理解し、それらの専門知識を考慮してビジネスに活かすことはできます。また、頭の中にあるビジネス目標や製品のアイデアを具体的に実現させて、プロジェクトを素早く進めることができます。間違ったWebサイトの作成プロセスは、プロジェクトが失敗してしまう可能性がありますが、逆に考え抜かれたプロセスであれば、よりレベルの高いプロジェクトになるかもしれません。

1. シンプルなアプリケーションを見つけ出し、ユーザーフローを設計する

もし技術系のニュースでUXの専門用語を聞いたり、UXミーティングに参加したことがあるならば、間違いなく「ユーザーフロー」という用語と出会っているでしょう。これは、UXの専門用語において特に自明な用語のひとつです。まさに読んで字の通り、Webサイトまたはモバイルアプリ内のあるコンテンツからほかのコンテンツへ移動する際のナビゲーションフローを指しています。簡単に言うと、ボタンをクリックすると何が起こるか、さらに別の部分をクリックすると何が起こるかを示しているものを、ユーザーフローと言います。

ユーザーフローのコンセプトと機能に慣れるための簡単な方法は、自分自身でマップを作ることです。

まず、使いやすいと感じるアプリを見つけます。そして、ペンと紙を使って、そのアプリのユーザーフローを書き出します(こちらの記事で、無料で印刷できるワイヤーフレームのテンプレートを紹介しています)。以下のアナログユーザーフローを見ると、どのような手順でユーザーフローを作成していくのかがわかります。

ユーザーフローを書き出すことは、単純すぎて機械的な作業だと思うかもしれません。しかし、すべてのフローを書き出すことが「優れた」ユーザーフローを作ることに慣れるための近道なのです。また、デジタル化したときに自分のアイデアがどう表示されるかがわかりやすくなるというメリットもあります。

2. 好きなページと嫌いなページのワイヤーフレームを作成する

ワイヤーフレーム作成も、間違いなく耳にしているUXの重要な用語です。ワイヤーフレームは、ペンと紙、ワイヤーフレームソフトなどを用いて作るもので、細かくモックアップを作成することを指しているわけではありません。ワイヤーフレーム作成は単に製品のスケッチであり、一般的にはコードも使用しません。つまり、これは素晴らしい彫刻を手間のかかる青銅から作るのではなく、より簡易な石膏から作るようなものです。

繰り返しますが、まだ製品全体のUXデザインを行っていないので、ソフトを使う必要はありません。手作業でワイヤフレーム作成を行うことができるのです。お気に入りのWebページを選んで、そこにあるすべての要素を、手書きでワイヤフレームに書き出してください。この方法を自分のモノにできたら、次は反対にわかりにくいと思うWebページを選んで、先ほどと同じようにワイヤーフレームを作成してみてください。

わかりにくいと思うページのワイヤーフレームを作り終えたら、別のワイヤーフレームに、良いと思えるようになるまで、手書きで要素を並べ変えたりしてみてください。見た目がすべてというわけではありませんが、ビジュアルデザインも非常に重要な部分ではあります。

ワイヤーフレーム作成の作業は、簡単に聞こえますが実際には難しいでしょう。しかし、全ユーザーの代表として自分のためにデザインすることができると思えばちょっと楽しいと思いませんか?

3. 使用しているアプリの好きなところと嫌いなところをリストアップする

UXデザインの基本原則は、インタラクションにおいてユーザーが考えることなくインターフェイスを使えるようにすることです。サービスの利用目的となるユーザーのタスクを達成できるように、裏でこっそりとサポートする必要があります。

アプリに障害やバグがある場合は難しいです。きっと、あなたも不完全なアプリを使用したときにバグを見つけたことがあるでしょう。ユーザー最適化のプロが調べていることを知るための簡単な方法は、自分自身を最終的なエンドユーザーとして扱うことです。

あなたが可もなく不可もないと感じる平凡なアプリをひとつ決めてください。すべての画面とナビゲーションフローをたどり、良い部分と悪い部分を書き出します。アクションボタンは背景に隠れていませんか? フローティングページに一度移ってからに元に戻す簡単な方法はありませんか? 入力操作中にテキストが読みづらいですか? フォントは見づらくないですか?

良い部分と悪い部分をすべて書き出し終わったら、リストを見直してみましょう。決して技術的な文書ではないですが、最初のUXレビューとしてください。

4. シンプルなユーザーインタビューを行う

ワイヤーフレームやボタンなどからもう一歩踏み込むと、UXデザインとは、ユーザーの頭の中に入り込んで、ユーザーにとって何が必要かを理解することです。UXデザイン実践の良い方法は、個々のユーザーの詳しい調査と業界の動向を通じて、ユーザープロファイルを作成することです。ですが、今はまだ試しにやっている程度だと思うので、ユーザー対象となる人と簡単なインタビューをしてみてください(地元のスターバックスなどで)。

30~60分の会話の中で、彼らの生活について、特定のアプリやサービスが生活にどう馴染んでいるか、デバイスの使用習慣などをフランクに質問しましょう。そして、インタビューをワイヤーフレームに反映させてフィードバックを得ます。また、彼らが何を好きで何が嫌いかを把握します。インタビュー中にメモを取ることを忘れずに行い、取り終わったらメモからもっとも重要で驚いたものをピックアップしてください。これで、基本的なユーザーインタビューは終了です。

5. スケッチを修正して、動かせるプロトタイプを作成し、再テストを行う

ユーザーインタビューから得た考察をもとに、スケッチを改訂し、新しい修正版を作ります。そして、今回はあなたのアイデアをデジタル化しましょう。幸いにも、アイデアをデジタル化できる優秀なツールがオンライン上に存在します。これらのツールは直感的なので、前の手順で得られた情報を付け加えてると、クリック可能な動くプロトタイプを作成できます。

Solidifyapp.comのようなものを使用することをおすすめします。ここでは、修正されたスケッチをオンライン上で簡単にアップロードできます。クリック可能な「エリア」を作成することで、 Solidifyappではスケッチにインタラクションを生み出すことができます。基本的には、スケッチのある領域を強調して、その領域をクリックするとアクションが発生するというものです。

たとえば、スケッチにナビゲーションメニューのアイコンがある場合、そのアイコンをクリックすると、別のスケッチに書いた、展開したナビゲーションメニューが開くアクションを設定できます。

プロトタイプを作成したら、ボタンやナビゲーションなどの重要なウィジェットがクリック可能であることを確認するために、自分自身で一度テストをしてみてください。もしもスケッチ通りのナビゲーションが実現できなければ、ほかの人も実行できないので、修正しなくてはならないでしょう。

ここで、インタラクティブなプロトタイプのスケッチを確認してください。

Solidifyapp.comのプロトタイプスケッチ

プロトタイプが準備できたら、友人や同僚にそれぞれのPCで実際に試してもらいましょう。購入や新規投稿などのタスクを実行するように頼みます。画面を記録したり、画面共有などで直に観察することで、操作が止まってしまう部分や混乱する部分、あるいはもっとも興味を持つ部分などを発見することができます。これらのメモは、プロジェクトが進行するにつれてデザイナーや開発者にとって貴重な情報になるので、必ず保存しておいてください。

引き継ぐ

スケッチを作成し、エンドユーザーとして行動し、インタビューを行い、クリック可能なプロトタイプを作成し、そして貴重なフィードバックを得ました。次のステップへ進み、このアイデアをデジタル製品に変換してみましょう。UXチームに引き継ぐか、または実際のデザインや開発に先立って、簡単に解決できる課題の修正するために、UXの専門家を雇いましょう。

専門家のUXレビューは、インターフェースがコンバージョンとユーザーのエンゲージメントを高められることを確実にする保険となるのでおすすめです。プロトタイプが潜在的なユーザーの役に立つ方法だと確信したら、実際に作成しましょう。

まとめ

説得力のあるデザインと、しっかりしたユーザー体験を生み出すための作業を確認しました。作業は紙にアイデアを書くという単純なことから始まります。また、ビジネスのオーナーやマーケティング担当役員にとって、顧客とデジタル製品との間にどのようなインタラクションが発生するかに共感することは必要不可欠です。早期の顧客からのフィードバックは、ビジネス上の意思決定や開発上の決定を行う上で役に立ちます。さらに、アイデアのメリットとデメリットの両方を明確にできる可能性もあります。

ごく基本的な考察でも、ユーザー体験を劇的に向上させることができます。中心となるUXプロセスを見てきたので、チームが熱心な活動をするように仕向けることができるでしょう。チームのメンバーが、あなたのデザインに感銘を受けるかもしれません! 

23-Point UX Design Checklistもぜひご覧ください。


イベント