inFablic

Fablic開発者ブログ

UIデザインの為の集中講座：ワークショップレポート

こんにちは、Fablicデザイナーの@kurechonです。

先日、海外のUXに関する著名人を日本に招待してカンファレンスやワークショップなどをするUX DAYS TOKYO 2015に会社を代表して参加させていただきました。

今回の記事では、MailChimpのUXディレクターとして活躍するアーロン・ウォルター氏が担当するワークショップ「UIデザインの為の集中講座」に参加したときのレポートをご紹介させていただきます。

001.png

UX DAYS TOKYO 2015

概要

UX Days Tokyoは、今後のビジネスにおいて大事なUIをより良い形でデザインするためのイベントです。世界で活躍するUXの重鎮スピーカーを招いたカンファレンスとワークショップの開催です。国外でも珍しいスピーカーの共演が日本で繰り広げられます。

…

世界的ベストセラー「iPhoneアプリ設計の極意」を執筆したUXデザイナー Josh Clark氏をはじめ、世界最多の利用者数を誇るメールシステム「MailChimp」のUIを設計したAarron Walter氏、日本でも著名なコンサルティングファーム「Adaptive Path」のChris Risdon氏やUXをマーケティングの糧として成功に導くKate Rutter氏、元「Facebook」と「Instagram」のUXディレクターであるリサーチの世界的権威のあるNate Bolt氏が登壇します。

公式サイトより引用

ワークショップ：UIデザインの為の集中講座

イベントは3日間にわたって開催されましたが、今回はそのうち3日目に実施されたアーロン・ウォルター氏による「UIデザインの為の集中講座」というワークショップに参加しました。Designing for Emotionの著者でありMailChimpのUXディレクターである方に直接ご指導いただけることに魅力を感じたのが主な理由です。（しかも通訳付き…！）

010.png

STEP 0 : イントロダクション

まずアーロン氏からデザインプロセスやもとになったアイデアの紹介などのイントロダクションを済ませたあと、インタビューの心構えやインタビューのお手本を披露していただきました。

そのとき、Jesse James GarrettのThe Five Planesというアイデアがデザインプロセスの基礎になっているものとして紹介されました。これはデザインを5つの段階に分け、これらの段階を役割をはっきりさせることで、より戦略的で意図のあるインターフェイスを最終的なアウトプットとして生み出すことができるという考え方です。

013.png

戦略を考えるレイヤーを出発点として表面的なデザインに落とし込んでいくプロセス（図の下のレイヤーから上のレイヤーに上がっていく）をイメージしつつ、プロセスのファーストステップであるインタビューリサーチにつなげていきます。

009.png

STEP 1 : リサーチ

今回のワークショップのミッションは「イベント参加者のためのアプリを考える」だったので、参加者のなかから3〜4人のグループをつくり、そのうち1人がインタビュイー、他の2~3人がインタビュアーとなりインタビューを実施しました。

ここで紹介されていたのはSWITCHINGというアイデア。ユーザーがどのように既存のプロダクトから新しいプロダクトに乗り換えるのか、その動機や不安などを概念化し図に表したものです。

014.png

  • PUSH：既存サービスに問題を感じ押し出される
  • PULL：新規サービスの新しい解決策に惹かれる
  • INERTIA：既存サービスを使い慣れているため出たくない
  • ANXIETY：新規サービスに乗り換えるのに不安を感じる

015.png

インタビューを通じて、以上のポイントを意識しつつユーザーがどこで感情が高まっているのか＝エナジーシフトを観察し、うまくSWITCHINGの概念と組み合わせることで破壊的なイノベーションとなりそうなアイデアを模索していきます。

また、このSWITCHINGとは別に、インタビューのお手本で紹介されていた注意点としては

  • できるだけ記憶の新しいひとをインタビューに選ぶこと
  • ドキュメンタリー番組のインタビューのようにインタビューすること
  • いつ？どこで？どういう日だった？何曜日だった？などかなり具体的な質問から深掘りしていくこと
  • 感情の高まり＝エナジーシフトを観察すること

などが紹介されていました。

008.png

STEP 2 : ディスコープ

インタビューリサーチからユーザーがどのようなことを達成したいと思いどこに価値を感じるのかを明らかにできたら、これからつくるプロダクトのJOBS TO BE DONEを設定していきます。

JOBS TO BE DONEとは、ユーザーインタビューや定量的な調査からアプリ・サービス・機能として「果たさなければならない役割」を設定し、それをもとにフローやワイヤーフレームに落とし込んでいくアイデア。ペルソナとは少し違う、目的型の目標設定です。iOSのデザインガイドラインでもステートメント定義という形でよく似た目的のものが採用されています。

016.png

Link：「ペルソナ」を捨てて、JTBD（Jobs-To-Be-Done）モデルでターゲット顧客を定義せよ

ブレストを続けるほどどんどんアイデアは広がっていきますが、MVP(Minimum Viable Product)を意識しつつ、アイデアのスコープを絞っていきます。 MVPとしてプロダクトを確立できたら、画面フローを設計していきます。

011.png

STEP 3 : フローの作成

プロダクトを使うユーザーがどのようにミッションを達成するかを表す画面フローを設計していきます。

ここで紹介されていた手法は37signalsで使われているUI Flowsというもの。

017.png

  • SCREEN：ユーザーが何をみるか
  • ーーーーーーーーーーーーーーー
  • ACTION：どうアクションするか

をひとつのユニットとして、それぞれをつなげてフローにしていきます。一本のフローである必要はなく、アクションが複数あって分岐していても構いません。

この手法を使ってよかったところは、それぞれのユニットを画面でなく機能やモチベーションでセクション分けするためそれぞれのユニットの目的がはっきりすること、アクションを複数くっつけることもできるので複雑なものにも簡潔に対応できることなどがあります。

UI Flowで画面フローができたら、実際の画面に載せる要素を確定させていきます。

012.png

STEP 4 : インタラクション

ミッション達成までのフローができたら、そのフローをもとに画面に必要な要素をスケッチしていきます。

Link：Sketchboards: A Technique for Better + Faster UX Solutions

ワークショップではこのビデオを参考にしながら、複数人でコラボレーションしながらスケッチを完成させていきました。ポイントとしては

  • 大きな一枚の紙を使って作業すること
  • みんなでデザインすること
  • つねにJOBS TO BE DONEを確認できる場所に貼っておくこと
  • 途中でチームのみんなにフィードバックを求めること

などが挙げられていました。

—

今回は時間の都合上、ここでワークショップ終了となりました。

アーロン氏の代名詞であるインターフェイスのエモーショナルな味付け的な部分まで体験することができなかったのですが、ふだんMailChimpでも採用されているアイデアの選択からワイヤーフレームの作成までを体験することができました。

まとめ

  • 必ず「なぜつくるのか？」から始め、プロセスを進めていく
  • インタビューではエナジーシフト＝感情の高まり＝他サービスからSWITCHINGしそうなポイントを見つける
  • JOBS TO BE DONEを設定し「プロダクトがなすべきこと」をはっきりさせる
  • デザインにたくさんのひとを巻き込む

のようなポイントをこのワークショップを通じて発見することができました。

デザインプロセスでよく知られるDesign Sprintと比較しても小さくプロセスを回せることや小さな機能でも活用できるのが強みだそうなので、どんどん業務に活かしていきたいと思います。

kurechon