Storytelling ux tokyo-en
Upcoming SlideShare
Loading in...5
×
 

Storytelling ux tokyo-en

on

  • 9,402 views

 

Statistics

Views

Total Views
9,402
Views on SlideShare
4,375
Embed Views
5,027

Actions

Likes
37
Downloads
97
Comments
0

18 Embeds 5,027

http://rosenfeldmedia.com 2939
http://uxtokyo.org 1500
http://www.scoop.it 373
http://www.gavrielshaw.com 87
http://a-hum.unoke.pfu.co.jp 46
http://www.conseilsmarketing.com 26
https://twitter.com 20
http://rosenfeldmedia.dev 14
http://seo-consultoria.com 6
http://twitter.com 3
http://translate.googleusercontent.com 2
http://feedly.com 2
http://www.feedspot.com 2
http://www.pearltrees.com 2
http://www.pinterest.com 2
http://pinterest.com 1
http://131.253.14.66 1
http://feeds.feedburner.com 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Storytelling ux tokyo-en Storytelling ux tokyo-en Presentation Transcript

  • Storytelling for UXDDesigning 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 storytellingworkshop during 2012 in Japan.•Walkthrough full of step for crafting UX story at theworkshop.•Invent “Experience plotting” to generate a plot of story.•Trying to utilize storytelling approach for generatingdesign 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 AssociationJapanese Edition 2012SeminarWorkshop 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. AnecdotesStructure 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 PlottingA proposal of framework for creating UX story
  • Proposal of Experience Plotting•A “semi-structured” method to design a plot (skelton) ofUX story.•Plot ingredients of the story collected by survey/research onto story structure.•Put context of use and images as well as anecdote ontothe plot.•Creator can add ad-hoc story elements if need moreelements.•Flexibility; Can be applied to both of crafting UX story orgenerating design idea with UX story.
  • Experience plotting•Storyteller can craft the plot (skeleton) by plottingingredients onto story structure.•Preparing story structure and framework beforecrafting UX story, storyteller can craft a quality assuredstory effectively. Context Context Image Anecdotes Anecdotes Anecdotes StoryStructure 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 elementsStructure 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 AnecdoteStructure 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 returnPlot 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 ActivityActivity Sub Activity Sub Activity Sub Activity Sub Activity Sub Activity Sub Activity Sub Activity Sub Activity Sub ActivityContext Context of use Context of use Context of use Context of use Context of use Context of useContents Contents Contents Contents Contents Contents ContentsEmotion Emotions Emotions Emotions Emotions Emotions EmotionsDevice Device touch-point Device touch-point Device touch-point Device touch-point Device touch-point Device touch-pointtouch point
  • Pattern B: UX matrix framework (example)•Craft partial story and generate and plot design ideas. The call to Initiation The returnPlot 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 activityActivity 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 CommuteContext or at office or at office or home home outside outsideContents contents user uses contents user uses contents user uses contents user uses contents user uses contents user usesEmotion relax exiting want to get ASAP hard to find out :( Finally !! enjoy reflectionsDevice mobile mobile mobile mobile PC PC PCtouch point
  • Scene Activity Context of use Emotion Contents Design idea WIreframeUX background story Design idea Design details, Context of use ○○する
  • Summary•UX story is output of user experience flow: Workshopparticipants can use storytelling approach for ensuring/empathizing UX in target users.•UX story is trigger to generate design idea: Trying toutilize storytelling approach for generating design ideaand combined the idea with UX story.•Experience plotting for crafting UX story: Using“experience plotting” enable participants to craft qualityassured 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@uxtokyofacebook 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 フォーラム フォーラム 2012SeminarWorkshop 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 facebookuxtokyo (http://www.facebook.com/groups/123561481030446/)