SlideShare ist ein Scribd-Unternehmen logo
1 von 57
Downloaden Sie, um offline zu lesen
Storytelling for UXD
Designing UX by Experience plotting




                       Yoshinori Wakizaka
                       @UX Tokyo
                       3rd Jan 2013
Introduction

                      Yoshinori Wakizaka
                      Current
                      UI/UX specialist, Mobile Strategy Section

                      Past
                      Usability Engineer, Mobile phone R&D
                      UCD Specialist, Design department

                      Member of UX TOKYO
 yoshinori wakizaka
 @wackiesrock
Overview
•UX Tokyo has been conducting many storytelling
workshop during 2012 in Japan.
•Walkthrough full of step for crafting UX story at the
workshop.
•Invent “Experience plotting” to generate a plot of story.
•Trying to utilize storytelling approach for generating
design idea also.

      Experience plotting: a method to create a plot of UX story


                        Generating design ideas

                  Crafting UX Story                                Telling UX Story
Storytelling workshop by UX Tokyo
 •“Storytelling for User Experience” Japanese edition has
 issued Dec 2011.
 •UX Tokyo has had presentation in seminar and
 conducted storytelling workshops.



                      2012/2         2012/2                   2012/5        2012/6         2012/9        2012/10       2012/11
                      Dev Love      World IA Day              Info design     Design       Info design   HCD-net        Web UX
   2012/12                                                       Forum                        Forum
                                                                            Association
Japanese Edition
                            2012
Seminar
Workshop
               2012/12           2012/1     2012/2      2012/4                       2012/8                        2012/11
                   Web UX         Chiba       HCD-net   Dev LOVE                    UX Nagoya                      UX Nagoya
                            Institute of tech                                       & UX Osaka                     & UX Kyoto
How to utilize UX story for designing
How to utilize UX story for designing
 Visualize UX by crafting UX story
3 steps to craft UX stories
•3 steps to craft UX story.


   Collecting              Selecting               Crafting
    Stories                 Stories                Stories




                                                 Context


                                ストーリー    ストーリー             Image
                                                                                     Context
                                                                   Context                     Image
                                分類してまとめたストーリー

                                                                             Image
                                                                                       Image

                                ストーリー    ストーリー



                        UXチーム
Collecting Stories
•Stories start from listening.

 Investigate into log                   Hearing / Observation
          (Quantitative)                            (Qualitative)




 • Search queries                       • Hearing from;
 • Server log                             - Users
 • Online forum/ community                - Business stakeholders
 • Record of customer service
 • Consumer survey in marketing dept.     - Colleagues
 • Log in usability testing             • Observation
Selecting Juicy Stories
•Select juicy stories from ingredients.
  Ingredients         Selection

                                                  Story board
     Anecdotes




      Images                                            UX Story
                                          P5 - ジミー

                                                                 デモグラフィックス                安心してオンラインバンキングを利用
                                                                 ・20代中盤                   することはできないが、オンラインショ
                                                                 ・どこかの大学生                 ップで買い物をするだろう。
                                                                 ・自宅でウェブを利用している           スポーツの試合結果をみるためにウェ




     Context
                                                                 ・造園家として働いている             ブを利用する。
                                                                                          ホテルをオンラインで予約したことが
                                                                                          ある。




                                                         Persona
                                                                                          新しいことはウェブで検索して調べる。


                                          コメント、引用、ストーリー
                                          ・私はただ、   これを自分のホームページとして使います。   何故ならウェブでサイン     お気に入りのページ:
                                           アップした時に、   そのページが表示されるからです。                    ISP(ホームページ)
                                          ・ストーリー  :彼の妹は、 インターネットで誤って自分が欲しいものとは別のものを       ヤフー
                                           買ってしまった。   この注文をキャンセルしようとしたが、   それはできなかった。 彼   ESPN
                                           らは彼女の返品を受け付けようとはしなかった。      そこで彼女は、 最終的にその商    Travelocity and Expedia
                                           品の代金をクレジットカードで支払った。     それは、 さほど高い買い物ではなかっ     YouTube
                                           たが、  家族は皆、 この悲惨な物語を彼女から聞かされている。    そして長い間、彼    WebMD
                                           をオンラインから遠ざけている。                                SportsAuthority
                                          ・試合結果を控えておくのに、    ESPNを使っている。友達は、 携帯電話にスコアを
                                           送るのに 何か を使っていて、   ジミーもそれを使いたいと思っている。           ニーズ:慣れ親しんだサイトでする様に
                                          ・Youtubeが大好きで、友達と おばかな ビデオをたくさん見ている。            失敗すること を恐れないようにしたい
Crafting Story
•Craft story by weaving the ingredients of the story.

 Anecdotes    Anecdotes      Anecdotes    Anecdotes




 Elements                     Context                 Image


             Point of view    Context    Character    Images   diction
                                         (Persona)



 Structure
How to utilize UX story for designing
  Designing UX by using UX story
Steps for creating design idea
•Creating design idea while crafting stories.
                                                                    Ideation

                                                                                       Generating
  Collecting            Selecting            Crafting                                       &
                                                                    Iteration
   Stories               Stories              Story                                     Applying
                                                                                       Design idea




                            ストーリー    ストーリー
                                                  Context

                            分類してまとめたストーリー




                            ストーリー    ストーリー                  Image
                                                                                         Context
                UXチーム
                                                                     Context                       Image



                                                                               Image
                                                                                           Image
Crafting stories
•Create design idea on the way of crafting UX story.




                      Anecdotes
Structure                                                                           Context
                                          Context
                                                                                     of use              Images
                                                                                                     for the design
                                                           Anecdotes

                                                                                           Scenario
                                                                                       for design idea



        1. Craft UX story of the beginning. The story can be a set of   2. Generating design idea based on UX
        “context of use”, “user insight” or “user scenario”.            story. The idea will be part of the story.
Experience Plotting
A proposal of framework for creating UX story
Proposal of Experience Plotting
•A “semi-structured” method to design a plot (skelton) of
UX story.
•Plot ingredients of the story collected by survey/
research onto story structure.
•Put context of use and images as well as anecdote onto
the plot.
•Creator can add ad-hoc story elements if need more
elements.
•Flexibility; Can be applied to both of crafting UX story or
generating design idea with UX story.
Experience plotting
•Storyteller can craft the plot (skeleton) by plotting
ingredients onto story structure.
•Preparing story structure and framework before
crafting UX story, storyteller can craft a quality assured
story effectively.
                                                        Context
                          Context
                                    Image
              Anecdotes
                                            Anecdotes
                                                                  Anecdotes

  Story
Structure
            Scene A         Scene B
                                                        Scene D
                                            Scene C
                                                                  Scene E
Procedure of the method
•4 steps to create the plot for crafting UX stories.

                       Anecdote                                                       Anecdote
                                                                     Anecdote
                         elements
                                                                                                 Anecdote
                                    elements
                                                 elements                       Anecdote
            elements
Structure
                                                                                                 Anecdote
                                                                           Anecdote
            Anecdote                       Anecdote

                 Add ad-hoc elements to the plot            4   1   Collect anecdotes (fragments of stories)

             Plot anecdotes onto story structure            3   2   Selecting anecdotes that collected at step1

                       Anecdote
                                                                                      Anecdote
                                                                     Anecdote

                                                                                                 Anecdote
                                                                                Anecdote
Structure
                                                                                                 Anecdote
                                           Anecdote                        Anecdote
            Anecdote
Pattern A: Story Structure framework
•Plot story elements along with story structures (e.g. hero)
                                                                          contents
                                                                                        emotion
                                                                           activity

                                                      Everyday World
                                                        日常の世界             anecdote
                                                                                        context




            contents                                                                                  contents
                          The return                                                    The call to
             activity   日常世界への帰還
                         to the world                                                 冒険へのきっかけ
                                                                                        Adventure      activity

            anecdote                                                                                  anecdote

  emotion                                                                                                         emotion

  context                                                                                                         context


                                                        Threshold
                                                       世界の境界線




            contents      Achieving
                             目的の達成                                                      Initiation
                                                                                      はじまりと試練
                                                                                                      contents

             activity      the goal                                                     and trials     activity


            anecdote                                                                                  anecdote

  emotion                                                                                                         emotion


  context                                                                                                         context
                                         contents      冒険の世界
                                                     World of the Quest
                               emotion
                                          activity
                               context
                                         anecdote
Handwriting used for workshop
Experience plot by using the framework

            insight




                                 context




               Design idea

                                           anecdotes



                      contents
Pattern B: UX matrix framework
•More structured matrix to fill out story elements.

                       The call to           Initiation                                                                           The return
Plot of the story      Adventure             and trials
                                                                 Departures                   World of the Quest
                                                                                                                                 to the world



                         Activity             Activity             Activity             Activity              Activity             Activity



                      Sub Activity         Sub Activity          Sub Activity         Sub Activity          Sub Activity         Sub Activity

Activity
                      Sub Activity         Sub Activity          Sub Activity         Sub Activity          Sub Activity         Sub Activity



                      Sub Activity                               Sub Activity                                                    Sub Activity




Context              Context of use        Context of use       Context of use      Context of use         Context of use      Context of use




Contents                Contents             Contents              Contents            Contents              Contents             Contents




Emotion                Emotions              Emotions             Emotions             Emotions              Emotions             Emotions



Device              Device touch-point   Device touch-point   Device touch-point   Device touch-point    Device touch-point   Device touch-point
touch point
Pattern B: UX matrix framework (example)
•Craft partial story and generate and plot design ideas.

                        The call to           Initiation                                                                             The return
Plot of the story       Adventure             and trials
                                                                 Departures                      World of the Quest
                                                                                                                                    to the world


                    Plan a schedule for
                                          search something        launch app         book something            do activities      Finish activities
                        next month


                    check with friends       launch PC         search something         book a plan             go outside       Reflect the activity

Activity
                    check my schedule      visit to website    see informations     check date/ place         do an activity     Plan next actions



                         UX backgroundアプリ起動
                                      story                    Design idea             Design details, Context of use
                                                                                                         ○○する



                        Commute               Commute              Commute
Context                 or at office          or at office         or home
                                                                                           home                  outside               outside




Contents            contents user uses    contents user uses   contents user uses   contents user uses      contents user uses   contents user uses




Emotion                    relax               exiting         want to get ASAP      hard to find out :(         Finally !!       enjoy reflections



Device                                                              mobile                mobile
                                                                                                                  mobile               mobile
                                                  PC                 PC                    PC
touch point
Scene



                                                                      Activity



                                                                 Context of use


                                                                      Emotion


                                                                      Contents



                                                                     Design idea
                                                                     WIreframe
UX background story




                      Design idea   Design details, Context of use
                                             ○○する
Summary
•UX story is output of user experience flow: Workshop
participants can use storytelling approach for ensuring/
empathizing UX in target users.
•UX story is trigger to generate design idea: Trying to
utilize storytelling approach for generating design idea
and combined the idea with UX story.
•Experience plotting for crafting UX story: Using
“experience plotting” enable participants to craft quality
assured UX story more efficiently.
•Telling: Need to cultivate how to tell the UX story.
Appendix: Story to requirements
Defining UX requirements
•Break down UX story into activity as user requirements.

                             UX story
     Task step   Task step              Task step   Task step


      activity    activity               activity    activity

      activity    activity               activity    activity

      activity    activity               activity    activity

      activity    activity               activity    activity

      activity    activity                           activity
Defining UX requirements (example)
•Each activity can be user requirements for a development

                                         UX story
    launch an app      select a feature       reserve something         do tasks


     launch an app      check schedule        register information   confirm schedules


   show home screen    search something         register something   confirm something


    log in to system       select date              do payment         do something


    open my page          select place           check reservation     do something


    check updates         add options         check it at my page


                        see something          register schedules

                        check a venue
twitter
@uxtokyo
facebook
 uxtokyo
日本語版資料
ストーリーテリングとUX
  ストーリーを使ったUX設計




           Yoshinori Wakizaka
           @UX Tokyo
           2nd Jan 2013
Introduction


                         Yoshinori Wakizaka
                         Current
                         UX Specialist, mobile strategy section

                         Past
                         Usability Engineer in Mobile Device R&D
                         UCD Specialist in Design department

                         Member of UX TOKYO
    yoshinori wakizaka
    @wackiesrock
これまでの活動
•2011年12月、UX Tokyoで「Storytelling for User Experience」を日本語

に翻訳して出版。
•以降、2012年には、ストーリーテリングをテーマに登壇、またワーク

ショップを多数開催。
•UXストーリーをクラフトする方法として、「経験プロット」という手法

を提案。
•「経験プロット」を、UXストーリーを作るだけでなく、UXストーリー

を使ったデザイン方法論としても活用。

      経験プロット: UXストーリーのプロットを作成する方法


              デザインアイディアを生み出す

           UXストーリーの作成                   ストーリーテリング
UX Tokyoとストーリーテリング
•2011年12月”Storytelling for User Experience”を翻訳出版。

•勉強会、大学でのワークショップによる実践。




 2012/12    2012/2       2012/2               2012/5   2012/6     2012/9   2012/10       2012/11
 本の上梓       Dev Love    World IA Day         情報デザイン デザイン学会       情報デザイン    HCD-net        Web UX
                                              フォーラム               フォーラム

                 2012
Seminar
Workshop
           2012/12 2012/1 2012/2        2012/4              2012/8                   2012/11
           Web UX      千葉工大   HCD-net   Dev LOVE           UX Nagoya                 UX Nagoya
                                                           & UX Osaka                & UX Kyoto
UXストーリーをデザインに活用する方法
UXストーリーをデザインに活用する方法
  ストーリーを使ったUXの可視化
ストーリーのつくり方
•UXストーリーをつくる3つのステップ。




 ストーリーを     ストーリーを                  ストーリーを
   集める        選ぶ                      紡ぐ




                                    Context


                   ストーリー    ストーリー             Image
                                                                        Context
                                                      Context                     Image
                   分類してまとめたストーリー

                                                                Image
                                                                          Image

                   ストーリー    ストーリー



           UXチーム
ストーリーを集める
•ストーリーは聞くことから始まる。



 ログをみる                   聞く、観察する




 • サーチログ                 • ヒアリング
 • サーバログ                   - ユーザー
 • オンラインフォーラム / コミュニテイ     - ビジネスステークホルダー
 • カスタマーサービスの記録            - 同僚
 • トレーニングとセールスデモの記録      • 観察
 • マーケティング部門 / 顧客満足度調査
 • ユーザビリティ調査ログ
ストーリーを選ぶ
•ストーリーを作る前に良い素材を選ぶ。


    素材         選ぶ



   Anecdote
  (ストーリーの断片)




   Anecdote           UXストーリー
  (ストーリーの断片)




   Anecdote
  (ストーリーの断片)
UXストーリーの構成要素
•UXのストーリーは大きく3つに分けられる。


アネクドート       Anecdote     Anecdote      Anecdote
(ストーリーの断片)   (ストーリーの断片)   (ストーリーの断片)    (ストーリーの断片)




  要素                       Context                   Image



               視点         コンテクスト       キャラクター      心的イメージ    言葉遣い



  構造
 (パタン)
UXストーリーをデザインに活用する方法
  UXストーリーを使ったデザイン
デザインアイディアを生み出すステップ
•ストーリーを作りながらデザインアイディアを生み出す
                                                                  Ideation

                                                                                     Generating
 Collecting           Selecting            Crafting                                       &
                                                                  Iteration
  Stories              Stories              Story                                     Applying
                                                                                     Design idea




                          ストーリー    ストーリー
                                                Context

                          分類してまとめたストーリー




                          ストーリー    ストーリー                  Image
                                                                                       Context
              UXチーム
                                                                   Context                       Image



                                                                             Image
                                                                                         Image
ストーリーの作成
 •ストーリーを作りながらデザインアイディアを考える




ストーリー          アネクドート
                                                    利用
                          コンテクスト
 の構造                                                状況          デザインの
                                                                 イメージ
                                   アネクドート


                                                    デザインアイディアの
                                                         シナリオ




        1. まずUXストーリーの前半部分を作る。このストーリーが「利用    2. ストーリーをベースにデザインアイディアを作る。
        状況」や「ユーザーインサイト」、「シナリオ」の集まりとなる。      このアイディアはストーリーの一部になる。
経験プロット
UXストーリーを作成するフレームワークの提案
経験プロットについて
•ストーリーのプロット(設計図)をつくるための方法。

•抽出した要素を構造上にプロットしていく。

•コンテクストやイメージも追加する。

•欠けてる要素は後から追加する。

•UXをそのままストーリーにするのではなく、新しいアイ

ディアを盛り込んだストーリーを作ることもできる。

•ストーリーボードの下地にもなる。
経験プロットの手順
•ストーリーの構造の上に、集めてきた素材をプロットしてくことによっ
て、UXストーリーのプロット(骨組み、設計図)を作成する。
•UXストーリーを作成する前に、ストーリーの構造とプロットを作成す
るためのフレームワークを用意する。構造と素材を活用することによっ
て、手早く質や構成が担保されたストーリーを作成することができる。
                                            コンテクスト
                   コンテクスト
                            イメージ

          アネクドート
                                   アネクドート
                                                     アネクドート

ストーリーの
  構造
         シーンA        シーンB
                                            シーンD
                                   シーンC
                                                     シーンE
経験プロットの手順

           アネクドート                              アネクドート
                                      アネクドート
            要素
                                                    アネクドート
                                          アネクドート
                    要素
      要素                 要素
構造                                                  アネクドート
                                        アネクドート
     アネクドート          アネクドート

                    要素を追加する   4   1   アネクドート(ストーリーの断片)を集める

           アネクドートをプロットする      3   2   アネクドートを選別する

           アネクドート
                                               アネクドート
                                      アネクドート

                                                    アネクドート
                                          アネクドート
構造
                                                    アネクドート
                     アネクドート             アネクドート
     アネクドート
フレームワークA: ストーリー構造
•ストーリーの要素をストーリー構造に沿ってプロットする。
                                                 コンテンツ
                                                           エモーション
                                                 アクティビティ

                                        日常の世界    アネクドート
                                                           コンテクスト




     コンテンツ                                                              コンテンツ

    アクティビティ
              日常世界への帰還                                     冒険へのきっかけ     アクティビティ

    アネクドート                                                              アネクドート

エモーション                                                                           エモーション

コンテクスト                                                                          コンテクスト

                                        世界の境界線



         コンテンツ                                                        コンテンツ

         アクティビティ   目的の達成                                   はじまりと試練    アクティビティ


         アネクドート                                                       アネクドート


    エモーション                                                                     エモーション


    コンテクスト                                                                    コンテクスト

                              コンテンツ     冒険の世界
                     エモーション
                              アクティビティ
                     コンテクスト
                              アネクドート
ワークショップで用いる手書きのテンプレート
英雄構造のフレームワークを用いた経験プロット

      インサイト




                   コンテクスト




       デザインアイディア

                            アネクドート




          コンテンツ
フレームワークB: UXマトリクス
•プロットの段階でUXの要素を抽出、整理できる。
ストーリーの     冒険への     はじまりと                                        冒険からの
                              冒険への出発              冒険
           きっかけ       試練                                           帰還
プロット

          アクティビティ   アクティビティ   アクティビティ   アクティビティ        アクティビティ   アクティビティ


            サブ        サブ        サブ        サブ             サブ        サブ
          アクティビティ   アクティビティ   アクティビティ   アクティビティ        アクティビティ   アクティビティ
アクティビティ
            サブ        サブ        サブ        サブ             サブ        サブ
          アクティビティ   アクティビティ   アクティビティ   アクティビティ        アクティビティ   アクティビティ

            サブ                  サブ                                 サブ
          アクティビティ             アクティビティ                            アクティビティ



コンテクスト     利用状況      利用状況      利用状況      利用状況           利用状況      利用状況




コンテンツ     コンテンツ      コンテンツ     コンテンツ    コンテンツ          コンテンツ      コンテンツ



キャラクターの    喜怒哀楽      喜怒哀楽      喜怒哀楽      喜怒哀楽           喜怒哀楽      喜怒哀楽
            感想        感想        感想        感想             感想        感想
気持ち
           デバイス      デバイス      デバイス      デバイス           デバイス      デバイス
タッチポイント   タッチポイント   タッチポイント   タッチポイント   タッチポイント        タッチポイント   タッチポイント
フレームワークB: UXマトリクス(例)
•まず部分的にストーリーを作り、デザインアイディアをプロットする。

ストーリーの      旅への      はじまりと                                        ○○からの
                                 ○○へ出発               冒険
           きっかけ        試練                                           帰還
プロット
          来月の予定を                 アプリを                              ○○終了
                     ○○を調べる                 予約する          ○○する
            立てる                  起動する                             ○○を付ける


          友だちと連絡     PCを起動する     ○○を検索      ○○を予約         ○○に行く   ○○を見返す

アクティビティ
          自分のスケジュー                                                次の予定を
                     サイト訪問       ○○をみる     場所・日程確認        ○○する
            ル確認                                                    考える


           背景となるUXストーリー
                    アプリ起動      デザインアイディア          デザインのディテール、利用状況
                                                        ○○する



            オフィス      オフィス       通勤時間
コンテクスト     通勤時間       通勤時間        自宅
                                             自宅            屋外       屋外




コンテンツ      コンテンツ      コンテンツ      コンテンツ     コンテンツ          コンテンツ   コンテンツ



キャラクターの                                     なかなか
            平常心      ワクワクする    すぐ予約したい                    ついに本番   余韻を楽しむ
                                           見つからない
気持ち
                                 モバイル       モバイル
タッチポイント                 PC        PC         PC
                                                          モバイル     モバイル
シーン




                                                アクティビティ




                                                  利用状況



                                                 エモーション




                                                 コンテンツ




                                                デザインアイディア
                                                ワイヤフレーム
UXバックグラウンドストーリー




                  デザインアイディア   デザインのディテール、利用状況
                                  ○○する
まとめ
•UXストーリーはユーザー経験のフローのアウトプット:ストー

リーテリングによってUXを視覚化し、共有可能なものにした。
•UXストーリーはデザインアイディアを生み出すためのトリガ:

ストーリーテリングのアプローチを用いてデザインアイディアを

生み出し、ストーリーとアイディアを結びつけた。

•UXストーリーを作るための手法「経験プロット」:経験プロッ

トを利用してクオリティが担保されたUXストーリーを効率的に作

ることができるようになった。

•ストーリーの「テリング」への取り組みは今後の課題。
付録: ストーリーから要件を抽出する
UXの要件を定義する
•UXストーリーをユーザー要件となるアクティビティに分解する。


                  UX story
  タスクステップ   タスクステップ     タスクステップ   タスクステップ


  アクティビティ   アクティビティ     アクティビティ   アクティビティ

  アクティビティ   アクティビティ     アクティビティ   アクティビティ

  アクティビティ   アクティビティ     アクティビティ   アクティビティ

  アクティビティ   アクティビティ     アクティビティ   アクティビティ

  アクティビティ   アクティビティ               アクティビティ
UXの要件を定義する (例)
•それぞれのアクティビティが開発で必要な要件となる。


                  UXストーリー
  アプリ起動       機能選択       ○○を予約     タスクの実行


   アプリ起動     スケジュール確認    情報の登録     スケジュール確認


   ホーム表示      ○○を検索       ○○の登録     ○○の確認


   ログイン        日付選択        支払い      ○○の実施


  マイページ表示      場所選択       予約の確認     ○○の実施


 アップデートの確認    オプション追加   マイページで確認


              ○○を閲覧     スケジュール登録

              場所の確認
twitter
                       @uxtokyo
                         facebook
uxtokyo (http://www.facebook.com/groups/123561481030446/)

Weitere ähnliche Inhalte

Was ist angesagt?

『マッピングエクスペリエンス』の 見所と勘所
『マッピングエクスペリエンス』の 見所と勘所『マッピングエクスペリエンス』の 見所と勘所
『マッピングエクスペリエンス』の 見所と勘所Tarumoto Tetsuya
 
プレゼンを伝わりやすくするビジュアルデザインのポイント
プレゼンを伝わりやすくするビジュアルデザインのポイントプレゼンを伝わりやすくするビジュアルデザインのポイント
プレゼンを伝わりやすくするビジュアルデザインのポイントShinichi Miyagi
 
ジョブ理論をなんとなく理解する
ジョブ理論をなんとなく理解するジョブ理論をなんとなく理解する
ジョブ理論をなんとなく理解するharuka iwama
 
これからはじめるサービスデザイン
これからはじめるサービスデザインこれからはじめるサービスデザイン
これからはじめるサービスデザインConcent, Inc.
 
デザインのためのデザイン
デザインのためのデザインデザインのためのデザイン
デザインのためのデザインMasayuki Uetani
 
事例で学ぶデザインの原則 by Life is Tech !
事例で学ぶデザインの原則 by Life is Tech !事例で学ぶデザインの原則 by Life is Tech !
事例で学ぶデザインの原則 by Life is Tech !Naoki Kanazawa
 
「ユーザーを理解するって言うほどカンタンじゃないよね」 UXデザイン・UXリサーチをもう一度ちゃんと理解しよう!
「ユーザーを理解するって言うほどカンタンじゃないよね」 UXデザイン・UXリサーチをもう一度ちゃんと理解しよう!「ユーザーを理解するって言うほどカンタンじゃないよね」 UXデザイン・UXリサーチをもう一度ちゃんと理解しよう!
「ユーザーを理解するって言うほどカンタンじゃないよね」 UXデザイン・UXリサーチをもう一度ちゃんと理解しよう!Yoshiki Hayama
 
UXデザインとコンセプト評価 ~俺様企画はだめなのよ
UXデザインとコンセプト評価~俺様企画はだめなのよUXデザインとコンセプト評価~俺様企画はだめなのよ
UXデザインとコンセプト評価 ~俺様企画はだめなのよMasaya Ando
 
人間中心設計の国際規格ISO9241-210:2010のポイント
人間中心設計の国際規格ISO9241-210:2010のポイント人間中心設計の国際規格ISO9241-210:2010のポイント
人間中心設計の国際規格ISO9241-210:2010のポイントMasaya Ando
 
プロトタイピングとユーザビリティテストで「UXデザイン」を練りあげよう! | UXデザイン基礎セミナー 第4回
プロトタイピングとユーザビリティテストで「UXデザイン」を練りあげよう! | UXデザイン基礎セミナー 第4回プロトタイピングとユーザビリティテストで「UXデザイン」を練りあげよう! | UXデザイン基礎セミナー 第4回
プロトタイピングとユーザビリティテストで「UXデザイン」を練りあげよう! | UXデザイン基礎セミナー 第4回Yoshiki Hayama
 
速攻で価値検証して無駄なものを作らないプロダクトデザイン
速攻で価値検証して無駄なものを作らないプロダクトデザイン速攻で価値検証して無駄なものを作らないプロダクトデザイン
速攻で価値検証して無駄なものを作らないプロダクトデザインAkiko Kurono
 
Startup science 2018 8 MVPを構築する
Startup science 2018 8 MVPを構築するStartup science 2018 8 MVPを構築する
Startup science 2018 8 MVPを構築するMasa Tadokoro
 
“UI/UX”?~恥をかかないための15分UXD入門
“UI/UX”?~恥をかかないための15分UXD入門“UI/UX”?~恥をかかないための15分UXD入門
“UI/UX”?~恥をかかないための15分UXD入門Masaya Ando
 
ユーザーにうれしいチャットボットのUX 7原則 - 7 Principles to Design UX of Chatbots
ユーザーにうれしいチャットボットのUX 7原則 - 7 Principles to Design UX of ChatbotsユーザーにうれしいチャットボットのUX 7原則 - 7 Principles to Design UX of Chatbots
ユーザーにうれしいチャットボットのUX 7原則 - 7 Principles to Design UX of ChatbotsYoshiki Hayama
 
DXのためのUX(ユーザーエクスペリエンス) 〜ユーザーとシステムが手をつなぐために〜
DXのためのUX(ユーザーエクスペリエンス) 〜ユーザーとシステムが手をつなぐために〜DXのためのUX(ユーザーエクスペリエンス) 〜ユーザーとシステムが手をつなぐために〜
DXのためのUX(ユーザーエクスペリエンス) 〜ユーザーとシステムが手をつなぐために〜Yoshiki Hayama
 
データドリブン経営のメトリクス分析 AARRR!モデルの紹介
データドリブン経営のメトリクス分析 AARRR!モデルの紹介データドリブン経営のメトリクス分析 AARRR!モデルの紹介
データドリブン経営のメトリクス分析 AARRR!モデルの紹介pLucky
 
Best Practice For UX Deliverables - Eventhandler, London, 05 March 2014
Best Practice For UX Deliverables - Eventhandler, London, 05 March 2014Best Practice For UX Deliverables - Eventhandler, London, 05 March 2014
Best Practice For UX Deliverables - Eventhandler, London, 05 March 2014Anna Dahlström
 
UX RULES: 10 ESSENTIAL PRINCIPLES
UX RULES: 10 ESSENTIAL PRINCIPLESUX RULES: 10 ESSENTIAL PRINCIPLES
UX RULES: 10 ESSENTIAL PRINCIPLESJeremy Robinson
 
パワポは「最後」に開く-すぐできる!プレゼン資料作成術「大掃除編」
パワポは「最後」に開く-すぐできる!プレゼン資料作成術「大掃除編」パワポは「最後」に開く-すぐできる!プレゼン資料作成術「大掃除編」
パワポは「最後」に開く-すぐできる!プレゼン資料作成術「大掃除編」Michiyo Fukada
 

Was ist angesagt? (20)

『マッピングエクスペリエンス』の 見所と勘所
『マッピングエクスペリエンス』の 見所と勘所『マッピングエクスペリエンス』の 見所と勘所
『マッピングエクスペリエンス』の 見所と勘所
 
プレゼンを伝わりやすくするビジュアルデザインのポイント
プレゼンを伝わりやすくするビジュアルデザインのポイントプレゼンを伝わりやすくするビジュアルデザインのポイント
プレゼンを伝わりやすくするビジュアルデザインのポイント
 
ジョブ理論をなんとなく理解する
ジョブ理論をなんとなく理解するジョブ理論をなんとなく理解する
ジョブ理論をなんとなく理解する
 
これからはじめるサービスデザイン
これからはじめるサービスデザインこれからはじめるサービスデザイン
これからはじめるサービスデザイン
 
デザインのためのデザイン
デザインのためのデザインデザインのためのデザイン
デザインのためのデザイン
 
事例で学ぶデザインの原則 by Life is Tech !
事例で学ぶデザインの原則 by Life is Tech !事例で学ぶデザインの原則 by Life is Tech !
事例で学ぶデザインの原則 by Life is Tech !
 
「ユーザーを理解するって言うほどカンタンじゃないよね」 UXデザイン・UXリサーチをもう一度ちゃんと理解しよう!
「ユーザーを理解するって言うほどカンタンじゃないよね」 UXデザイン・UXリサーチをもう一度ちゃんと理解しよう!「ユーザーを理解するって言うほどカンタンじゃないよね」 UXデザイン・UXリサーチをもう一度ちゃんと理解しよう!
「ユーザーを理解するって言うほどカンタンじゃないよね」 UXデザイン・UXリサーチをもう一度ちゃんと理解しよう!
 
UXデザインとコンセプト評価 ~俺様企画はだめなのよ
UXデザインとコンセプト評価~俺様企画はだめなのよUXデザインとコンセプト評価~俺様企画はだめなのよ
UXデザインとコンセプト評価 ~俺様企画はだめなのよ
 
人間中心設計の国際規格ISO9241-210:2010のポイント
人間中心設計の国際規格ISO9241-210:2010のポイント人間中心設計の国際規格ISO9241-210:2010のポイント
人間中心設計の国際規格ISO9241-210:2010のポイント
 
プロトタイピングとユーザビリティテストで「UXデザイン」を練りあげよう! | UXデザイン基礎セミナー 第4回
プロトタイピングとユーザビリティテストで「UXデザイン」を練りあげよう! | UXデザイン基礎セミナー 第4回プロトタイピングとユーザビリティテストで「UXデザイン」を練りあげよう! | UXデザイン基礎セミナー 第4回
プロトタイピングとユーザビリティテストで「UXデザイン」を練りあげよう! | UXデザイン基礎セミナー 第4回
 
速攻で価値検証して無駄なものを作らないプロダクトデザイン
速攻で価値検証して無駄なものを作らないプロダクトデザイン速攻で価値検証して無駄なものを作らないプロダクトデザイン
速攻で価値検証して無駄なものを作らないプロダクトデザイン
 
Startup science 2018 8 MVPを構築する
Startup science 2018 8 MVPを構築するStartup science 2018 8 MVPを構築する
Startup science 2018 8 MVPを構築する
 
“UI/UX”?~恥をかかないための15分UXD入門
“UI/UX”?~恥をかかないための15分UXD入門“UI/UX”?~恥をかかないための15分UXD入門
“UI/UX”?~恥をかかないための15分UXD入門
 
ユーザーにうれしいチャットボットのUX 7原則 - 7 Principles to Design UX of Chatbots
ユーザーにうれしいチャットボットのUX 7原則 - 7 Principles to Design UX of ChatbotsユーザーにうれしいチャットボットのUX 7原則 - 7 Principles to Design UX of Chatbots
ユーザーにうれしいチャットボットのUX 7原則 - 7 Principles to Design UX of Chatbots
 
DXのためのUX(ユーザーエクスペリエンス) 〜ユーザーとシステムが手をつなぐために〜
DXのためのUX(ユーザーエクスペリエンス) 〜ユーザーとシステムが手をつなぐために〜DXのためのUX(ユーザーエクスペリエンス) 〜ユーザーとシステムが手をつなぐために〜
DXのためのUX(ユーザーエクスペリエンス) 〜ユーザーとシステムが手をつなぐために〜
 
データドリブン経営のメトリクス分析 AARRR!モデルの紹介
データドリブン経営のメトリクス分析 AARRR!モデルの紹介データドリブン経営のメトリクス分析 AARRR!モデルの紹介
データドリブン経営のメトリクス分析 AARRR!モデルの紹介
 
UX Design Process
UX Design ProcessUX Design Process
UX Design Process
 
Best Practice For UX Deliverables - Eventhandler, London, 05 March 2014
Best Practice For UX Deliverables - Eventhandler, London, 05 March 2014Best Practice For UX Deliverables - Eventhandler, London, 05 March 2014
Best Practice For UX Deliverables - Eventhandler, London, 05 March 2014
 
UX RULES: 10 ESSENTIAL PRINCIPLES
UX RULES: 10 ESSENTIAL PRINCIPLESUX RULES: 10 ESSENTIAL PRINCIPLES
UX RULES: 10 ESSENTIAL PRINCIPLES
 
パワポは「最後」に開く-すぐできる!プレゼン資料作成術「大掃除編」
パワポは「最後」に開く-すぐできる!プレゼン資料作成術「大掃除編」パワポは「最後」に開く-すぐできる!プレゼン資料作成術「大掃除編」
パワポは「最後」に開く-すぐできる!プレゼン資料作成術「大掃除編」
 

Andere mochten auch

Master Track B: "The UX & Storytelling Convergence"
Master Track B: "The UX & Storytelling Convergence"Master Track B: "The UX & Storytelling Convergence"
Master Track B: "The UX & Storytelling Convergence"iMedia Connection
 
Designing around storytelling - UX Oxford, 23 April 2014
Designing around storytelling - UX Oxford, 23 April 2014Designing around storytelling - UX Oxford, 23 April 2014
Designing around storytelling - UX Oxford, 23 April 2014Anna Dahlström
 
Persona storytelling
Persona storytellingPersona storytelling
Persona storytellingDara Pressley
 
Mobile Prototyping Essentials
Mobile Prototyping EssentialsMobile Prototyping Essentials
Mobile Prototyping EssentialsRachel Hinman
 
Storytelling for UX. Why Stories Matter
Storytelling for UX. Why Stories MatterStorytelling for UX. Why Stories Matter
Storytelling for UX. Why Stories MatterPiotr Bucki
 

Andere mochten auch (8)

Power of Story
Power of Story Power of Story
Power of Story
 
Master Track B: "The UX & Storytelling Convergence"
Master Track B: "The UX & Storytelling Convergence"Master Track B: "The UX & Storytelling Convergence"
Master Track B: "The UX & Storytelling Convergence"
 
Designing around storytelling - UX Oxford, 23 April 2014
Designing around storytelling - UX Oxford, 23 April 2014Designing around storytelling - UX Oxford, 23 April 2014
Designing around storytelling - UX Oxford, 23 April 2014
 
Persona storytelling
Persona storytellingPersona storytelling
Persona storytelling
 
Najczęściej popełniane błędy w storytellingu
Najczęściej popełniane błędy w storytellinguNajczęściej popełniane błędy w storytellingu
Najczęściej popełniane błędy w storytellingu
 
Mobile Prototyping Essentials
Mobile Prototyping EssentialsMobile Prototyping Essentials
Mobile Prototyping Essentials
 
Storytelling for UX Workshop
Storytelling for UX WorkshopStorytelling for UX Workshop
Storytelling for UX Workshop
 
Storytelling for UX. Why Stories Matter
Storytelling for UX. Why Stories MatterStorytelling for UX. Why Stories Matter
Storytelling for UX. Why Stories Matter
 

Ähnlich wie Storytelling ux tokyo-en

UX TOKYOとワークショップ サード・プレイスとしての機能と役割
UX TOKYOとワークショップ サード・プレイスとしての機能と役割UX TOKYOとワークショップ サード・プレイスとしての機能と役割
UX TOKYOとワークショップ サード・プレイスとしての機能と役割ux_tokyo
 
UX TOKYOとワークショップ サード・プレイスとしての機能と役割
UX TOKYOとワークショップ  サード・プレイスとしての機能と役割UX TOKYOとワークショップ  サード・プレイスとしての機能と役割
UX TOKYOとワークショップ サード・プレイスとしての機能と役割uxtokyo
 
UI/UXデザインでサイトを改善しよう
UI/UXデザインでサイトを改善しようUI/UXデザインでサイトを改善しよう
UI/UXデザインでサイトを改善しようKentaro Ohkouchi
 
ニコニコ動画iOSアプリの UX・マネタイズ・技術の話
ニコニコ動画iOSアプリの UX・マネタイズ・技術の話ニコニコ動画iOSアプリの UX・マネタイズ・技術の話
ニコニコ動画iOSアプリの UX・マネタイズ・技術の話Kentaro Matsumae
 
HCD-net ワークショップ part1
HCD-net ワークショップ part1HCD-net ワークショップ part1
HCD-net ワークショップ part1uxtokyo
 
HCD-net ワークショップ「ユーザーエクスペリエンスデザインのためのストーリーテリング」 part1 ストーリーテリングとは
HCD-net ワークショップ「ユーザーエクスペリエンスデザインのためのストーリーテリング」 part1 ストーリーテリングとはHCD-net ワークショップ「ユーザーエクスペリエンスデザインのためのストーリーテリング」 part1 ストーリーテリングとは
HCD-net ワークショップ「ユーザーエクスペリエンスデザインのためのストーリーテリング」 part1 ストーリーテリングとはux_tokyo
 
DeNA Creative Seminar #2 に行ってきた
DeNA Creative Seminar #2 に行ってきたDeNA Creative Seminar #2 に行ってきた
DeNA Creative Seminar #2 に行ってきたsilvers ofsilvers
 
Nutanixログほいほい作ってみた.pdf
Nutanixログほいほい作ってみた.pdfNutanixログほいほい作ってみた.pdf
Nutanixログほいほい作ってみた.pdfsatorukondou
 
キッチンにはスマートフォンとカレーライス
キッチンにはスマートフォンとカレーライスキッチンにはスマートフォンとカレーライス
キッチンにはスマートフォンとカレーライストモロヲ いちがみ
 
2012年度webゼミ前期発表
2012年度webゼミ前期発表2012年度webゼミ前期発表
2012年度webゼミ前期発表Chihiro Koyama
 
iOSアプリ制作ツールアプリビルダーを支える技術
iOSアプリ制作ツールアプリビルダーを支える技術iOSアプリ制作ツールアプリビルダーを支える技術
iOSアプリ制作ツールアプリビルダーを支える技術Tomoki Hasegawa
 
A12  坂井研究室 澤田純礼
A12  坂井研究室 澤田純礼A12  坂井研究室 澤田純礼
A12  坂井研究室 澤田純礼aomorisix
 
nomad-cliの紹介
nomad-cliの紹介nomad-cliの紹介
nomad-cliの紹介Kohki Miki
 
「UI/UXデザインでサイトを改善しよう」EC-CUBE勉強会 vol.16
「UI/UXデザインでサイトを改善しよう」EC-CUBE勉強会 vol.16「UI/UXデザインでサイトを改善しよう」EC-CUBE勉強会 vol.16
「UI/UXデザインでサイトを改善しよう」EC-CUBE勉強会 vol.16Kentaro Ohkouchi
 
Slide pocket開発物語
Slide pocket開発物語Slide pocket開発物語
Slide pocket開発物語Yuxio tech
 
Shinjuku.html5.lunch #11
Shinjuku.html5.lunch #11Shinjuku.html5.lunch #11
Shinjuku.html5.lunch #11Kazuyuki CHINDA
 
知っておきたい「Web制作イマドキの注目ポイント」
知っておきたい「Web制作イマドキの注目ポイント」知っておきたい「Web制作イマドキの注目ポイント」
知っておきたい「Web制作イマドキの注目ポイント」Mori Kazue
 
ウェブサービスのつくりかた
ウェブサービスのつくりかたウェブサービスのつくりかた
ウェブサービスのつくりかたShuhei Iitsuka
 
【Edge Animate】スマホアプリのインタラクティブコンテンツ
【Edge Animate】スマホアプリのインタラクティブコンテンツ【Edge Animate】スマホアプリのインタラクティブコンテンツ
【Edge Animate】スマホアプリのインタラクティブコンテンツTomonori Watanabe
 

Ähnlich wie Storytelling ux tokyo-en (20)

UX TOKYOとワークショップ サード・プレイスとしての機能と役割
UX TOKYOとワークショップ サード・プレイスとしての機能と役割UX TOKYOとワークショップ サード・プレイスとしての機能と役割
UX TOKYOとワークショップ サード・プレイスとしての機能と役割
 
UX TOKYOとワークショップ サード・プレイスとしての機能と役割
UX TOKYOとワークショップ  サード・プレイスとしての機能と役割UX TOKYOとワークショップ  サード・プレイスとしての機能と役割
UX TOKYOとワークショップ サード・プレイスとしての機能と役割
 
UI/UXデザインでサイトを改善しよう
UI/UXデザインでサイトを改善しようUI/UXデザインでサイトを改善しよう
UI/UXデザインでサイトを改善しよう
 
ニコニコ動画iOSアプリの UX・マネタイズ・技術の話
ニコニコ動画iOSアプリの UX・マネタイズ・技術の話ニコニコ動画iOSアプリの UX・マネタイズ・技術の話
ニコニコ動画iOSアプリの UX・マネタイズ・技術の話
 
HCD-net ワークショップ part1
HCD-net ワークショップ part1HCD-net ワークショップ part1
HCD-net ワークショップ part1
 
HCD-net ワークショップ「ユーザーエクスペリエンスデザインのためのストーリーテリング」 part1 ストーリーテリングとは
HCD-net ワークショップ「ユーザーエクスペリエンスデザインのためのストーリーテリング」 part1 ストーリーテリングとはHCD-net ワークショップ「ユーザーエクスペリエンスデザインのためのストーリーテリング」 part1 ストーリーテリングとは
HCD-net ワークショップ「ユーザーエクスペリエンスデザインのためのストーリーテリング」 part1 ストーリーテリングとは
 
DeNA Creative Seminar #2 に行ってきた
DeNA Creative Seminar #2 に行ってきたDeNA Creative Seminar #2 に行ってきた
DeNA Creative Seminar #2 に行ってきた
 
Nutanixログほいほい作ってみた.pdf
Nutanixログほいほい作ってみた.pdfNutanixログほいほい作ってみた.pdf
Nutanixログほいほい作ってみた.pdf
 
20120620_mediverse_opf_taniuchi
20120620_mediverse_opf_taniuchi20120620_mediverse_opf_taniuchi
20120620_mediverse_opf_taniuchi
 
キッチンにはスマートフォンとカレーライス
キッチンにはスマートフォンとカレーライスキッチンにはスマートフォンとカレーライス
キッチンにはスマートフォンとカレーライス
 
2012年度webゼミ前期発表
2012年度webゼミ前期発表2012年度webゼミ前期発表
2012年度webゼミ前期発表
 
iOSアプリ制作ツールアプリビルダーを支える技術
iOSアプリ制作ツールアプリビルダーを支える技術iOSアプリ制作ツールアプリビルダーを支える技術
iOSアプリ制作ツールアプリビルダーを支える技術
 
A12  坂井研究室 澤田純礼
A12  坂井研究室 澤田純礼A12  坂井研究室 澤田純礼
A12  坂井研究室 澤田純礼
 
nomad-cliの紹介
nomad-cliの紹介nomad-cliの紹介
nomad-cliの紹介
 
「UI/UXデザインでサイトを改善しよう」EC-CUBE勉強会 vol.16
「UI/UXデザインでサイトを改善しよう」EC-CUBE勉強会 vol.16「UI/UXデザインでサイトを改善しよう」EC-CUBE勉強会 vol.16
「UI/UXデザインでサイトを改善しよう」EC-CUBE勉強会 vol.16
 
Slide pocket開発物語
Slide pocket開発物語Slide pocket開発物語
Slide pocket開発物語
 
Shinjuku.html5.lunch #11
Shinjuku.html5.lunch #11Shinjuku.html5.lunch #11
Shinjuku.html5.lunch #11
 
知っておきたい「Web制作イマドキの注目ポイント」
知っておきたい「Web制作イマドキの注目ポイント」知っておきたい「Web制作イマドキの注目ポイント」
知っておきたい「Web制作イマドキの注目ポイント」
 
ウェブサービスのつくりかた
ウェブサービスのつくりかたウェブサービスのつくりかた
ウェブサービスのつくりかた
 
【Edge Animate】スマホアプリのインタラクティブコンテンツ
【Edge Animate】スマホアプリのインタラクティブコンテンツ【Edge Animate】スマホアプリのインタラクティブコンテンツ
【Edge Animate】スマホアプリのインタラクティブコンテンツ
 

Mehr von Yoshinori Wakizaka

Mehr von Yoshinori Wakizaka (9)

情報デザインの多面性
情報デザインの多面性情報デザインの多面性
情報デザインの多面性
 
UX Design Lecture in TUAD 2014
UX Design Lecture in TUAD 2014UX Design Lecture in TUAD 2014
UX Design Lecture in TUAD 2014
 
モバイルのためのUXデザイン
モバイルのためのUXデザインモバイルのためのUXデザイン
モバイルのためのUXデザイン
 
Sp design2013 v2
Sp design2013 v2Sp design2013 v2
Sp design2013 v2
 
Peanuts butterindenver ja
Peanuts butterindenver jaPeanuts butterindenver ja
Peanuts butterindenver ja
 
Storytelling workshop handout
Storytelling workshop handoutStorytelling workshop handout
Storytelling workshop handout
 
Devlove1210 wackiesrock
Devlove1210 wackiesrockDevlove1210 wackiesrock
Devlove1210 wackiesrock
 
UI for UX_Aug2011
UI for UX_Aug2011 UI for UX_Aug2011
UI for UX_Aug2011
 
#4_web_ux_wakizaka
#4_web_ux_wakizaka#4_web_ux_wakizaka
#4_web_ux_wakizaka
 

Storytelling ux tokyo-en

  • 1. Storytelling for UXD Designing UX by Experience plotting Yoshinori Wakizaka @UX Tokyo 3rd Jan 2013
  • 2. Introduction Yoshinori Wakizaka Current UI/UX specialist, Mobile Strategy Section Past Usability Engineer, Mobile phone R&D UCD Specialist, Design department Member of UX TOKYO yoshinori wakizaka @wackiesrock
  • 3. Overview •UX Tokyo has been conducting many storytelling workshop during 2012 in Japan. •Walkthrough full of step for crafting UX story at the workshop. •Invent “Experience plotting” to generate a plot of story. •Trying to utilize storytelling approach for generating design idea also. Experience plotting: a method to create a plot of UX story Generating design ideas Crafting UX Story Telling UX Story
  • 4. Storytelling workshop by UX Tokyo •“Storytelling for User Experience” Japanese edition has issued Dec 2011. •UX Tokyo has had presentation in seminar and conducted storytelling workshops. 2012/2 2012/2 2012/5 2012/6 2012/9 2012/10 2012/11 Dev Love World IA Day Info design Design Info design HCD-net Web UX 2012/12 Forum Forum Association Japanese Edition 2012 Seminar Workshop 2012/12 2012/1 2012/2 2012/4 2012/8 2012/11 Web UX Chiba HCD-net Dev LOVE UX Nagoya UX Nagoya Institute of tech & UX Osaka & UX Kyoto
  • 5. How to utilize UX story for designing
  • 6. How to utilize UX story for designing Visualize UX by crafting UX story
  • 7. 3 steps to craft UX stories •3 steps to craft UX story. Collecting Selecting Crafting Stories Stories Stories Context ストーリー ストーリー Image Context Context Image 分類してまとめたストーリー Image Image ストーリー ストーリー UXチーム
  • 8. Collecting Stories •Stories start from listening. Investigate into log Hearing / Observation (Quantitative) (Qualitative) • Search queries • Hearing from; • Server log   - Users • Online forum/ community   - Business stakeholders • Record of customer service • Consumer survey in marketing dept.   - Colleagues • Log in usability testing • Observation
  • 9. Selecting Juicy Stories •Select juicy stories from ingredients. Ingredients Selection Story board Anecdotes Images UX Story P5 - ジミー デモグラフィックス 安心してオンラインバンキングを利用 ・20代中盤 することはできないが、オンラインショ ・どこかの大学生 ップで買い物をするだろう。 ・自宅でウェブを利用している スポーツの試合結果をみるためにウェ Context ・造園家として働いている ブを利用する。 ホテルをオンラインで予約したことが ある。 Persona 新しいことはウェブで検索して調べる。 コメント、引用、ストーリー ・私はただ、 これを自分のホームページとして使います。 何故ならウェブでサイン お気に入りのページ:  アップした時に、 そのページが表示されるからです。 ISP(ホームページ) ・ストーリー :彼の妹は、 インターネットで誤って自分が欲しいものとは別のものを ヤフー  買ってしまった。 この注文をキャンセルしようとしたが、 それはできなかった。 彼 ESPN  らは彼女の返品を受け付けようとはしなかった。 そこで彼女は、 最終的にその商 Travelocity and Expedia  品の代金をクレジットカードで支払った。 それは、 さほど高い買い物ではなかっ YouTube  たが、 家族は皆、 この悲惨な物語を彼女から聞かされている。 そして長い間、彼 WebMD  をオンラインから遠ざけている。 SportsAuthority ・試合結果を控えておくのに、 ESPNを使っている。友達は、 携帯電話にスコアを  送るのに 何か を使っていて、 ジミーもそれを使いたいと思っている。 ニーズ:慣れ親しんだサイトでする様に ・Youtubeが大好きで、友達と おばかな ビデオをたくさん見ている。 失敗すること を恐れないようにしたい
  • 10. Crafting Story •Craft story by weaving the ingredients of the story. Anecdotes Anecdotes Anecdotes Anecdotes Elements Context Image Point of view Context Character Images diction (Persona) Structure
  • 11. How to utilize UX story for designing Designing UX by using UX story
  • 12. Steps for creating design idea •Creating design idea while crafting stories. Ideation Generating Collecting Selecting Crafting & Iteration Stories Stories Story Applying Design idea ストーリー ストーリー Context 分類してまとめたストーリー ストーリー ストーリー Image Context UXチーム Context Image Image Image
  • 13. Crafting stories •Create design idea on the way of crafting UX story. Anecdotes Structure Context Context of use Images for the design Anecdotes Scenario for design idea 1. Craft UX story of the beginning. The story can be a set of 2. Generating design idea based on UX “context of use”, “user insight” or “user scenario”. story. The idea will be part of the story.
  • 14. Experience Plotting A proposal of framework for creating UX story
  • 15. Proposal of Experience Plotting •A “semi-structured” method to design a plot (skelton) of UX story. •Plot ingredients of the story collected by survey/ research onto story structure. •Put context of use and images as well as anecdote onto the plot. •Creator can add ad-hoc story elements if need more elements. •Flexibility; Can be applied to both of crafting UX story or generating design idea with UX story.
  • 16. Experience plotting •Storyteller can craft the plot (skeleton) by plotting ingredients onto story structure. •Preparing story structure and framework before crafting UX story, storyteller can craft a quality assured story effectively. Context Context Image Anecdotes Anecdotes Anecdotes Story Structure Scene A Scene B Scene D Scene C Scene E
  • 17. Procedure of the method •4 steps to create the plot for crafting UX stories. Anecdote Anecdote Anecdote elements Anecdote elements elements Anecdote elements Structure Anecdote Anecdote Anecdote Anecdote Add ad-hoc elements to the plot 4 1 Collect anecdotes (fragments of stories) Plot anecdotes onto story structure 3 2 Selecting anecdotes that collected at step1 Anecdote Anecdote Anecdote Anecdote Anecdote Structure Anecdote Anecdote Anecdote Anecdote
  • 18. Pattern A: Story Structure framework •Plot story elements along with story structures (e.g. hero) contents emotion activity Everyday World 日常の世界 anecdote context contents contents The return The call to activity 日常世界への帰還 to the world 冒険へのきっかけ Adventure activity anecdote anecdote emotion emotion context context Threshold 世界の境界線 contents Achieving 目的の達成 Initiation はじまりと試練 contents activity the goal and trials activity anecdote anecdote emotion emotion context context contents 冒険の世界 World of the Quest emotion activity context anecdote
  • 20. Experience plot by using the framework insight context Design idea anecdotes contents
  • 21. Pattern B: UX matrix framework •More structured matrix to fill out story elements. The call to Initiation The return Plot of the story Adventure and trials Departures World of the Quest to the world Activity Activity Activity Activity Activity Activity Sub Activity Sub Activity Sub Activity Sub Activity Sub Activity Sub Activity Activity Sub Activity Sub Activity Sub Activity Sub Activity Sub Activity Sub Activity Sub Activity Sub Activity Sub Activity Context Context of use Context of use Context of use Context of use Context of use Context of use Contents Contents Contents Contents Contents Contents Contents Emotion Emotions Emotions Emotions Emotions Emotions Emotions Device Device touch-point Device touch-point Device touch-point Device touch-point Device touch-point Device touch-point touch point
  • 22. Pattern B: UX matrix framework (example) •Craft partial story and generate and plot design ideas. The call to Initiation The return Plot of the story Adventure and trials Departures World of the Quest to the world Plan a schedule for search something launch app book something do activities Finish activities next month check with friends launch PC search something book a plan go outside Reflect the activity Activity check my schedule visit to website see informations check date/ place do an activity Plan next actions UX backgroundアプリ起動 story Design idea Design details, Context of use ○○する Commute Commute Commute Context or at office or at office or home home outside outside Contents contents user uses contents user uses contents user uses contents user uses contents user uses contents user uses Emotion relax exiting want to get ASAP hard to find out :( Finally !! enjoy reflections Device mobile mobile mobile mobile PC PC PC touch point
  • 23. Scene Activity Context of use Emotion Contents Design idea WIreframe UX background story Design idea Design details, Context of use ○○する
  • 24. Summary •UX story is output of user experience flow: Workshop participants can use storytelling approach for ensuring/ empathizing UX in target users. •UX story is trigger to generate design idea: Trying to utilize storytelling approach for generating design idea and combined the idea with UX story. •Experience plotting for crafting UX story: Using “experience plotting” enable participants to craft quality assured UX story more efficiently. •Telling: Need to cultivate how to tell the UX story.
  • 25. Appendix: Story to requirements
  • 26. Defining UX requirements •Break down UX story into activity as user requirements. UX story Task step Task step Task step Task step activity activity activity activity activity activity activity activity activity activity activity activity activity activity activity activity activity activity activity
  • 27. Defining UX requirements (example) •Each activity can be user requirements for a development UX story launch an app select a feature reserve something do tasks launch an app check schedule register information confirm schedules show home screen search something register something confirm something log in to system select date do payment do something open my page select place check reservation do something check updates add options check it at my page see something register schedules check a venue
  • 30. ストーリーテリングとUX ストーリーを使ったUX設計 Yoshinori Wakizaka @UX Tokyo 2nd Jan 2013
  • 31. Introduction Yoshinori Wakizaka Current UX Specialist, mobile strategy section Past Usability Engineer in Mobile Device R&D UCD Specialist in Design department Member of UX TOKYO yoshinori wakizaka @wackiesrock
  • 32. これまでの活動 •2011年12月、UX Tokyoで「Storytelling for User Experience」を日本語 に翻訳して出版。 •以降、2012年には、ストーリーテリングをテーマに登壇、またワーク ショップを多数開催。 •UXストーリーをクラフトする方法として、「経験プロット」という手法 を提案。 •「経験プロット」を、UXストーリーを作るだけでなく、UXストーリー を使ったデザイン方法論としても活用。 経験プロット: UXストーリーのプロットを作成する方法 デザインアイディアを生み出す UXストーリーの作成 ストーリーテリング
  • 33. UX Tokyoとストーリーテリング •2011年12月”Storytelling for User Experience”を翻訳出版。 •勉強会、大学でのワークショップによる実践。 2012/12 2012/2 2012/2 2012/5 2012/6 2012/9 2012/10 2012/11 本の上梓 Dev Love World IA Day 情報デザイン デザイン学会 情報デザイン HCD-net Web UX フォーラム フォーラム 2012 Seminar Workshop 2012/12 2012/1 2012/2 2012/4 2012/8 2012/11 Web UX 千葉工大 HCD-net Dev LOVE UX Nagoya UX Nagoya & UX Osaka & UX Kyoto
  • 36. ストーリーのつくり方 •UXストーリーをつくる3つのステップ。 ストーリーを ストーリーを ストーリーを 集める 選ぶ 紡ぐ Context ストーリー ストーリー Image Context Context Image 分類してまとめたストーリー Image Image ストーリー ストーリー UXチーム
  • 37. ストーリーを集める •ストーリーは聞くことから始まる。 ログをみる 聞く、観察する • サーチログ • ヒアリング • サーバログ   - ユーザー • オンラインフォーラム / コミュニテイ   - ビジネスステークホルダー • カスタマーサービスの記録   - 同僚 • トレーニングとセールスデモの記録 • 観察 • マーケティング部門 / 顧客満足度調査 • ユーザビリティ調査ログ
  • 38. ストーリーを選ぶ •ストーリーを作る前に良い素材を選ぶ。 素材 選ぶ Anecdote (ストーリーの断片) Anecdote UXストーリー (ストーリーの断片) Anecdote (ストーリーの断片)
  • 39. UXストーリーの構成要素 •UXのストーリーは大きく3つに分けられる。 アネクドート Anecdote Anecdote Anecdote (ストーリーの断片) (ストーリーの断片) (ストーリーの断片) (ストーリーの断片) 要素 Context Image 視点 コンテクスト キャラクター 心的イメージ 言葉遣い 構造 (パタン)
  • 41. デザインアイディアを生み出すステップ •ストーリーを作りながらデザインアイディアを生み出す Ideation Generating Collecting Selecting Crafting & Iteration Stories Stories Story Applying Design idea ストーリー ストーリー Context 分類してまとめたストーリー ストーリー ストーリー Image Context UXチーム Context Image Image Image
  • 42. ストーリーの作成 •ストーリーを作りながらデザインアイディアを考える ストーリー アネクドート 利用 コンテクスト の構造 状況 デザインの イメージ アネクドート デザインアイディアの シナリオ 1. まずUXストーリーの前半部分を作る。このストーリーが「利用 2. ストーリーをベースにデザインアイディアを作る。 状況」や「ユーザーインサイト」、「シナリオ」の集まりとなる。 このアイディアはストーリーの一部になる。
  • 46. 経験プロットの手順 アネクドート アネクドート アネクドート 要素 アネクドート アネクドート 要素 要素 要素 構造 アネクドート アネクドート アネクドート アネクドート 要素を追加する 4 1 アネクドート(ストーリーの断片)を集める アネクドートをプロットする 3 2 アネクドートを選別する アネクドート アネクドート アネクドート アネクドート アネクドート 構造 アネクドート アネクドート アネクドート アネクドート
  • 47. フレームワークA: ストーリー構造 •ストーリーの要素をストーリー構造に沿ってプロットする。 コンテンツ エモーション アクティビティ 日常の世界 アネクドート コンテクスト コンテンツ コンテンツ アクティビティ 日常世界への帰還 冒険へのきっかけ アクティビティ アネクドート アネクドート エモーション エモーション コンテクスト コンテクスト 世界の境界線 コンテンツ コンテンツ アクティビティ 目的の達成 はじまりと試練 アクティビティ アネクドート アネクドート エモーション エモーション コンテクスト コンテクスト コンテンツ 冒険の世界 エモーション アクティビティ コンテクスト アネクドート
  • 49. 英雄構造のフレームワークを用いた経験プロット インサイト コンテクスト デザインアイディア アネクドート コンテンツ
  • 50. フレームワークB: UXマトリクス •プロットの段階でUXの要素を抽出、整理できる。 ストーリーの 冒険への はじまりと 冒険からの 冒険への出発 冒険 きっかけ 試練 帰還 プロット アクティビティ アクティビティ アクティビティ アクティビティ アクティビティ アクティビティ サブ サブ サブ サブ サブ サブ アクティビティ アクティビティ アクティビティ アクティビティ アクティビティ アクティビティ アクティビティ サブ サブ サブ サブ サブ サブ アクティビティ アクティビティ アクティビティ アクティビティ アクティビティ アクティビティ サブ サブ サブ アクティビティ アクティビティ アクティビティ コンテクスト 利用状況 利用状況 利用状況 利用状況 利用状況 利用状況 コンテンツ コンテンツ コンテンツ コンテンツ コンテンツ コンテンツ コンテンツ キャラクターの 喜怒哀楽 喜怒哀楽 喜怒哀楽 喜怒哀楽 喜怒哀楽 喜怒哀楽 感想 感想 感想 感想 感想 感想 気持ち デバイス デバイス デバイス デバイス デバイス デバイス タッチポイント タッチポイント タッチポイント タッチポイント タッチポイント タッチポイント タッチポイント
  • 51. フレームワークB: UXマトリクス(例) •まず部分的にストーリーを作り、デザインアイディアをプロットする。 ストーリーの 旅への はじまりと ○○からの ○○へ出発 冒険 きっかけ 試練 帰還 プロット 来月の予定を アプリを ○○終了 ○○を調べる 予約する ○○する 立てる 起動する ○○を付ける 友だちと連絡 PCを起動する ○○を検索 ○○を予約 ○○に行く ○○を見返す アクティビティ 自分のスケジュー 次の予定を サイト訪問 ○○をみる 場所・日程確認 ○○する ル確認 考える 背景となるUXストーリー アプリ起動 デザインアイディア デザインのディテール、利用状況 ○○する オフィス オフィス 通勤時間 コンテクスト 通勤時間 通勤時間 自宅 自宅 屋外 屋外 コンテンツ コンテンツ コンテンツ コンテンツ コンテンツ コンテンツ コンテンツ キャラクターの なかなか 平常心 ワクワクする すぐ予約したい ついに本番 余韻を楽しむ 見つからない 気持ち モバイル モバイル タッチポイント PC PC PC モバイル モバイル
  • 52. シーン アクティビティ 利用状況 エモーション コンテンツ デザインアイディア ワイヤフレーム UXバックグラウンドストーリー デザインアイディア デザインのディテール、利用状況 ○○する
  • 55. UXの要件を定義する •UXストーリーをユーザー要件となるアクティビティに分解する。 UX story タスクステップ タスクステップ タスクステップ タスクステップ アクティビティ アクティビティ アクティビティ アクティビティ アクティビティ アクティビティ アクティビティ アクティビティ アクティビティ アクティビティ アクティビティ アクティビティ アクティビティ アクティビティ アクティビティ アクティビティ アクティビティ アクティビティ アクティビティ
  • 56. UXの要件を定義する (例) •それぞれのアクティビティが開発で必要な要件となる。 UXストーリー アプリ起動 機能選択 ○○を予約 タスクの実行 アプリ起動 スケジュール確認 情報の登録 スケジュール確認 ホーム表示 ○○を検索 ○○の登録 ○○の確認 ログイン 日付選択 支払い ○○の実施 マイページ表示 場所選択 予約の確認 ○○の実施 アップデートの確認 オプション追加 マイページで確認 ○○を閲覧 スケジュール登録 場所の確認
  • 57. twitter @uxtokyo facebook uxtokyo (http://www.facebook.com/groups/123561481030446/)