whyand how design ui

Post on 17-Aug-2015

946 Views

Category:

Design

1 Downloads

Preview:

Click to see full reader

TRANSCRIPT

How

What

Why

Why and How Design UI

2015 Goodpatch Inc. Mikihiro Fujii

藤井 幹大株式会社グッドパッチ 組織デザイン担当 執行役員 チーフUXデザイナー VOYAGE GROUPでBePROUDさんとお仕事

自己紹介

人々のハートを揺さぶるようなDesign&Productを生み出し、世界をより良い方向に前進させる

プロトタイプをつくるツールではなく、

プロトタイピングをチームにインストールするツール

Prottの基本的な使い方

なぜ、今 「デザイン」

なのか

2013/5 2015/5

2012/10 2014/10

2013/5 2015/5

2012/10 2014/10

デザイン会社の買収が進み、 ビジネス×デザインへの期待が高まっている。

ビジネス×デザインへの期待が高まっている。

なぜ UIをデザイン

するのか

User Interface?

User ?

Interface

User / Interface / ?【Interface】接触面、境界 「User」が誰で「?」が何なのかによって、その間に入るべきInterfaceは変わる。

User ?User

Interface

User / Interface / ?

コンピュータ アプリ

サービス 事業 社会

【Interface】接触面、境界 「User」が誰で「?」が何なのかによって、その間に入るべきInterfaceは変わる。

UI Design?

体験 行動

UI

UI

事業 サービス システム

ユーザーの 体験

ユーザーの 行動

UIの役割• 事業/サービス/システム/社会…と人の接点 • 体験と行動を生み出す。

既存のマインドセット事業の存続のためにモノをつくるというマインドセットでは成功しにくくなっている。

ユーザーの 体験

ユーザーの 行動モノ

存続 {収益目標

ユーザー数

問題解決

2000年代前半誰よりも早くビジネスモデルを発見 Google Adwords:2000年10月 米国サービス開始Value Commerce(1999年), a8.net(2000年), Linkshare(2001年) 開始

存続 {

ユーザーの 行動 {

CTR / CVR

Acquisition Activation Retention Revenue Referral

収益目標

ユーザー数

問題解決

2000年代後半誰よりも早く開発 Ruby on Rails: 最初のバージョン公開(2004年7月)Django:BSD License で公式にリリース(2005年7月)

モノ 存続} {

ユーザーの 行動 {

事業

サービス

コンテンツ

機能、価格

収収益目標

ユーザー数

問題解決

CTR / CVR

Acquisition Activation Retention Revenue Referral

2010年代誰よりも早くユーザーに価値を提供する iPhone3G(2008年)→iPhone4S(2011年 SOFTBANK+KDDI)『The Lean Startup』『UX白書』(2011年)

ユーザーの 体験

ユーザーの 行動

モノ 存続}}

価値

感覚 / 感情 / 作業 / 意味

ストーリー {{

事業

サービス

コンテンツ

機能、価格

収益目標

ユーザー数

問題解決

CTR / CVR

Acquisition Activation Retention Revenue Referral

UIデザインの役割• サイクル全体のデザイン • モノと人の接点となり、体験と行動を生み出す。

ユーザーの 体験

ユーザーの 行動

モノ 存続}}

価値

感覚 / 感情 / 作業 / 意味

ストーリー {{

事業

サービス

コンテンツ

機能、価格

収益目標

ユーザー数

問題解決UI

CTR / CVR

Acquisition Activation Retention Revenue Referral

どうやって UIをデザイン

するのか

UIデザインのスペシャリスト集団

取締役会

経営会議

Tokyo Berlin

管理部

組織デザイン室

広報室

デザイン ディビジョン(受託)

Goodpatch組織図

プロジェクトチームプロダクト ディビジョン(自社)

プロジェクトチームMTG1. 各チーム(2人以上)が独立してプロジェクトを進める。 2. メンバーはRole別に責任と権限持つ。 3. 原則掛け持ちしない。案件ベースで招集/解散。

28.4歳

平均年齢

長老4人除外

27.7歳

PM 26%

Designer 35%

Engineer 39%

クリエイター系職種比率

メンバーの統計

経験豊富なメンバーは多くない

UIデザインのスペシャリスト集団 ?

UIデザインのスペシャリスト集団

目指してはいるがまだ途上

UIデザインのスペシャリスト集団

お互いに補い合いながらデザイン

どうやって実現しているのか?

How

What

Why

なぜやるのか

価値観の共有• 職種問わず、デザインの力を信じている人だけを採用。 • 常にビジョンや「理由」を共有する。

価値観だけでは質は高まらない。

How

What

Why

どうやってやるのか

(Co-)Prototyping (ぷろとたいぴんぐ)• アイディアをリアルな評価ができる状態にして

チームで試しながらモノをつくっていくこと。 • それを当然だと思うマインドセット。

※公式の名称ではありません。

課題チーム&前提 プロトタイピング デリバリー

!

チーム×プロトタイピング前提。 要件定義から開発完了までプロトタイピングし続ける。

デザインプロセス

※公式版作成中です。

レビュー

レビュー

レビュー

プロトタイピング発見 → 仮説 → アウトプット を繰り返しながら常にレビューを入れていく。 コツ:制限時間をつくって未完成でもレビュー。

仮説に応じたプロトタイプ

How

What

Why

何をするのか

レビュー・チーム内レビュー ・プロジェクトレビュー ・Role別MTGでのレビュー

サンク コスト効果投資は無駄に したくない

IKEA効果がんばったから いいモノができた

確証 バイアス思ったとおり

の結果だ

内なる敵人は迷わずに行動するための仕組みを持っている。 影響範囲の大きさが個人の領域を大きく超える時、 自分が自分の敵になる。

レビュー! レビュー! レビュー!

チーム内レビューMTGチーム内では常にオープンなSlackチャンネルとProttプロジェクトで共有して、職種関係なく意見を出し合う。 チームメンバーだけではなく、社内の誰でも参加可能。

プロジェクトレビューMTG毎週週明け午前中に開催。全プロジェクトを全社員で共有して、Goodpatchのデザインとしてレビューする。

各Roleで気になっていることや発見を共有する。 Role担当者だけではなく、社内の誰でも参加可能。

Role別MTGでのレビュー

(Co-)Prototyping (ぷろとたいぴんぐ)• アイディアをリアルな評価ができる状態にして

チームで試しながらモノをつくっていくこと。 • それを当然だと思うマインドセット。

※公式の名称ではありません。

?

+

まとめ

User ?

Interface

User / Interface / ?「User」だけではなく「?」を理解し、両サイドの間に入るべきリアルなInterfaceをデザインしよう。

なぜUIをデザインするのか人の体験と行動を実際に生み出すのは、アイディアではなくモノだから。

ユーザーの 体験

UI

UI

事業 サービス システム

存続

ユーザーの 行動

どうやってUIをデザインするのか• チームでデザインする。 • UIの目的を明確にした上で、可能なかぎり多くの

視点と回数で確かめる。

?

+

偉大なチームをつくり

世界を前進させるモノをつくりましょう!

ユーザーの 体験

UI

UI

事業 サービス システム

存続

ユーザーの 行動

ご静聴ありがとうございました。

Design your world!

人々のハートを揺さぶるようなDesign&Productを生み出し、世界をより良い方向に前進させる

Engineer, Project Manager, Designerなど全職種募集してます!Wantedlyでポチッと!

チームメンバー募集中!

UX Design どんな体験をしてもらうかを計画し、その体験が量産・再生産される仕組みをつくること

User Interface Smartphone App

自分の個性に 合っているかどうか

感覚的に魅力がある・よりパーソナル

・ストアで競合の中から選択

目的を 果たせるかどうか

コア機能>>>その他の機能画面に入る情報の制約

↓ 要件のフォーカス

コンテクスト上で 使いやすいかどうか

視認性/操作性の確保 移動時に小さい画面で見る

top related