Embed Size (px)
Citation preview
Jumvo 2.0 における
デザイナーとエンジニアの連携
ジェネシックス 伊野・永野
12年4月3日火曜日
• こんなことを話します 永野,伊野 (1分)
• Jumvoとは
• プロトタイピング(永野)
• Jumvo 1.0まで (永野)
• Jumvo 2.0 / UX + Prototype + UI (伊野)
• まとめ12年4月3日火曜日
Jumvoとは
• iPhoneアプリ
• http://jumvo.com
• ボイスメッセージング・サービス
• 友だちと声を送りあう、声のSMS
• 友だちリストにFacebookを使う
12年4月3日火曜日
目指したこと• 毎日使う、電話/SMSのようなサービス
• なので高度なインターフェイスが必要
•使い勝手が超重要• 高度 == 使いやすい、楽しい、やりたいことがすぐにできる、気持ちがいい、
かっこいい、がゆえに手になじむ12年4月3日火曜日
• SMS(現、Messages)のようにシンプルで使いやすい
• Tweetie(現、Twitter公式)みたいに高度なインターフェイスを持つアプリは
• いったい、どうやったら作れるのか？12年4月3日火曜日
高度なUIを実現するには1. 世界のすべてを完全に把握した、完全なるデザイナー(ネ申)が (天地を創造するように) 仕様のすべてを決定する
2. (優秀な？)デザイナーとあーだこーだ言いながら磨き上げていく=> ネ申 はいないので2しかないよね！
12年4月3日火曜日
2でいくとして• これまでの経験上、動かしてみないと分からない部分が多いし、だから仕様はゴロゴロ変わる。そして柔軟に変えていかないとよいものはできない
• つまり、仕様はなかなか決まらないし、あーだこーだ言うプロセスが重要
12年4月3日火曜日
• 仕様を確定させることが難しいのだ！
• 仕様 == UIのすべてのヴィジュアルと動き、 サウンドエフェクトなど
• 仕様が決まれば、(誰でも)作れる
12年4月3日火曜日
ここまでのまとめ1. 結局動かしてみないと分からない部分が多い
2. あーだこーだ言いながら磨き上げていく必要がある=> 変更を前提とした動くものベースの開発をやればいいんじゃないか=>プロトタイピング・ベースの開発！
12年4月3日火曜日
プロトタイピング• プロトタイピング（Prototyping）とは、実働するモデル（プロトタイプ）を早期に製作する手法およびその過程を意味する。その目的は、設計を様々な観点から検証するためだったり、機能やアイデアを形にすることでユーザーから早めにフィードバックを得るためだったり様々である。http://ja.wikipedia.org/wiki/プロトタイピング
12年4月3日火曜日
プロトタイピング
• 広い意味で使っちゃってますが概ね• (変更前提で)動くものベースで開発
• 迷ったら複数パターン動かしてみる• ひとまず動くようにして操作の流れを繋ぐ
12年4月3日火曜日
お断り
• プロトタイピングの手法を勉強したわけではないので手法や用語に詳しいわけではありません。あくまで(特にiPhoneアプリでは) 仕様を決めるのが難しいので、動くものベースでやっただけ
12年4月3日火曜日
• 実際にどうやって作っていったのか
12年4月3日火曜日
Jumvo 1.0• デザイナーのアサイン予定が1ヶ月先だった
• 企画は出したが、面白いかは不明であった
• 企画段階から、開発手法を模索しているので、と言われてプロトタイピングを提案していた
12年4月3日火曜日
•スケッチ描いて + 藤井幹大さん、伊野さんに相談しつつ コア機能を実装
=> 声を送れるようにしてDemo => g6みんな「面白い！」
4月末～5末
12年4月3日火曜日
12年4月3日火曜日
6月～6月下旬
• デザイナー アサイン(カルビン)
• 動かしては検証。デザイン案 => 実装 => デザイン案 => 実装 => デザイン案 =>実装 (2, 3周？)
12年4月3日火曜日
12年4月3日火曜日
12年4月3日火曜日
12年4月3日火曜日
12年4月3日火曜日
12年4月3日火曜日
6月末~7月上旬
• いい加減、仕様決めないと終わらないよ => まとめ作業
• 1.0完成 (8月にリリース)
12年4月3日火曜日
• そんな感じで動かしてはあーだこーだ言いつつ、開発
• スピード感をもって (2ヶ月半ぐらい)
使いやすいものが作れたと自負
12年4月3日火曜日
• Jumvo 1.0は後半、動かしてみて試せばいい、の方向によりすぎて、デザイナーが決めきれない状態があった(軸)
• すべての判定が動くものベースに行くとまずい(まずはこうあるべき、がないと)
• デザイナーがプロトタイプに引っ張られる危険性が高い
問題点
12年4月3日火曜日
• 評判
12年4月3日火曜日
• この体験は、おそらく多くの人に衝撃を与えるだろう (Techwave)
12年4月3日火曜日
• このアプリはとても使いやすくていいですね！すばらしいアプリです。(AppBank)
12年4月3日火曜日
Apple Rewind 2011受賞
12年4月3日火曜日
• が、しかし、ダウンロード数伸びず....
12年4月3日火曜日
UXデザイン
もう一段上のレベルのGUIを所望され、2.0開発へむけアサインされる。
12年4月3日火曜日
あまりうまく回ってなかった1.0の問題
・UXDとUIDとプロトタイピングがバラバラに機能していた…・動くからといってプロトタイピングに頼りすぎて仕様が 決められず…
もう一度ぐるぐるをうまく機能させるために、死ぬ気でUX・UIのデザイン主導体制に。
UXデザイン
体験することが仕様決定につながらない逆に時間ばかりとられる
12年4月3日火曜日
その前に、UXデザインってなに？
【 Wikipedia 】ユーザーがある製品やシステムを使ったときに得られる経験や満足
【 genesix 】使う人の「ゴール」を発見して道筋を設定すること！
UXデザイン
ゴール例使う人が認識してることではないかも。無意識。調査・インタビュー
Jumvoエモーショナルストレスなくコミニュケーションがとれる。ファンクショナル今より気軽かつ手軽にもっと感情豊かなメッセージングとそれを通じたコ
12年4月3日火曜日
なんでUXデザインが必要なのか？
◎ 使う人を使う人の「ゴール」に導く → プロダクトにとって必要
◎ 開発チーム内の「道しるべ」になる → 対開発チームにとって必要
・ドライブで言うと「目的地」みたいなもの ・これを共有して同じ車に乗る感じ ・道に迷った時、意見が割れた時に目的地を意識する
UXデザイン
12年4月3日火曜日
ゴール
ペルソナ
アプリケーション定義ステートメント
もっと気持ちを伝え合いたい人のためのもっと気軽で手軽なボイスメッセージングアプリ
12年4月3日火曜日
さらに、UIデザインってなに？
使う人が「ゴール」を達成するための手助けとしてインターフェイスを設計すること
（UIデザイン ≒ インタラクションデザイン）
UIデザイン
UXはゴールUIはその到達方法
12年4月3日火曜日
なんでUIデザインが必要なのか？
◎ 使う人を「ゴール」に辿り着く手助けをする
◎ ドライブでいうと、「ハンドルさばき」「ギヤチェンジ」 などの専門技術のこと → いくら技術があってもUXデザインがないと目的地には 辿りつかない
UIデザイン
かっこ良くするためではない。
あくまでゴール。ゴールがかっこわるいならかっこ悪くする。
12年4月3日火曜日
UXデザイン
UIデザイン
プロトタイピング UIデザイン
ぐるぐる ぐるぐる
ぐるぐる
デザイン主導ではあるが、それぞれ自立して動いてた
12年4月3日火曜日
UXDとUIDの間におけるプロトタイピング開発の効果
◎ リアルな体験による体験の検証◎ 仕様のスムーズな決定◎ ドライブ感のある開発（実際に見れると楽しい）◎ 不確実性の回避
UIデザイン
12年4月3日火曜日
UXD × PT × UID 例１
◎ 大きくて、同じ位置に（親指の 届く範囲に）メインボタンを設置
UXDのゴール・「もっと気軽で手軽な」・ストレスなくコミニュケーションがとれる～
UIデザイン
直感的簡単に見ただけで分かるような
会社帰りに歩きながらでもミスタップしないように
12年4月3日火曜日
◎ 送信までのタップ数を最小限に （対SMS）
UXDのゴール・「もっと気軽で手軽な」・ストレスなくコミニュケーションがとれる～
SMS：6タップJumvo：5タップ
UIデザイン
UXD × PT × UID 例２
5タップ！
12年4月3日火曜日
◎ セグメントによる利用シーンの 切り分け
ペルソナ（マネキン）の配役による機能の共存・主役：仲のいい人と親密なコミニュケーション・脇役：友だちとワイワイ楽しむ
UIデザイン
UXD × PT × UID 例３
両方を一緒くたにすると使いにくくなる両方ダメになる
12年4月3日火曜日
◎ 送信中のプログレスバーの削除
UXDのゴール・ストレスなくコミニュケーションがとれる～
「普通はあるけど、ほんとにいるの？」
UIデザイン
UXD × PT × UID 例４
使う人にはこっちの処理中は関係ないそういう時にゴールを参照して
ここのは一例実際のぐるぐるの中ではもっと細かく色々やってた
いきなり完了
12年4月3日火曜日
UI設計する時に気をつけてること
１） 触りたくなるビジュアルであるか …直感的に美しく、ダイレクトに訴える（短期的な関係の構築）
２） デザイン（設計）は透明であるか …プロダクトの目的に集中（中期的な関係の構築）
３） 温かみがあるか …使う人をもてなしているか（長期的な関係の構築）
１）出会ってすぐ「お！」や親しみやすい使いやすくて目に止まらないのじゃ意味ない／触るのがイヤじゃないっていうのは案外重要（アイコン・質感）
２） エモーショナルな感動のあとに残るのは使いやすいUIであるべき（UI）モリモリデザインで賞味期限が短いと飽きられてしまう
３） インターフェイスとの長い信頼関係、思想
３つのバランス
ちょっと脱線して…
UIデザイン
12年4月3日火曜日
UX + Prototyping + UI
デザイナーから見た、ぐるぐるの良い点
◎ 体験しながらUIのブラッシュアップができる◎ チーム内でずれた意見が出にくい◎「ゴール」とずれていないか逐一検証できる◎ チーム内の合意が容易
12年4月3日火曜日
なぜうまくいったのか（たぶん）
UX + Prototyping + UI
◎ プロトタイピングをやったことで ・「体験の検証」「仕様の決定」をその場で素早く行えた
◎ UXデザインがあったことで ・常に「共通のゴール」を見ていることができた
◎ UX・プロトタイピング・UIを常にぐるぐる回すことで ・色々試せるから、どんどんよいものになっていった ・早い段階で「不確実性を回避」できた
12年4月3日火曜日
問題点
• 動くものがあるとそれにひっぱられる
• 何をしたいのか明確な意思がなければ、おそらく仕様爆発する(捨てられない)
• コードを倍ぐらい書くことになる
12年4月3日火曜日
言いたいこと(永野)
• 「仕様が来なくて締め切りに間に合わないよー」と嘆いている時間があるならば、何か動かしみれば
• この機能は絶対ある！というのが1個はあるはずなので何か作れば
• 動かさないと分からないことが絶対ある
12年4月3日火曜日
• 目的の共有をしてないとプロダクトもチームもブレる
言いたいこと(伊野)
12年4月3日火曜日
