Loading presentation...

Present Remotely

Send the link below via email or IM

Copy

Present to your audience

Start remote presentation

  • Invited audience members will follow you as you navigate and present
  • People invited to a presentation do not need a Prezi account
  • This link expires 10 minutes after you close the presentation
  • A maximum of 30 users can follow your presentation
  • Learn more about this feature in our knowledge base article

Do you really want to delete this prezi?

Neither you, nor the coeditors you shared it with will be able to recover it again.

DeleteCancel

Make your likes visible on Facebook?

Connect your Facebook account to Prezi and let your likes appear on your timeline.
You can change this under Settings & Account at any time.

No, thanks

“愛用”されるためのUI/UX設計の簡単な方法と考え方

No description
by

Hiroyuki Tanaka

on 2 February 2015

Comments (0)

Please log in to add your comment.

Report abuse

Transcript of “愛用”されるためのUI/UX設計の簡単な方法と考え方

おしまい
ちょっとお知らせ
未来スコップ
生活に役立つテクノロジーを紹介するブログメディアをはじめました!
http://miraischop.com/
Learn
Action
Reward
学び
行動し
体験を得る
UIとUX
UI
ユーザーインターフェイス。
画面そのもののこと。
UIデザインといえば、画面のレイアウトやボタンなどを設計すること。
UX
ユーザーエクスペリエンス。
利用体験のこと。
UXデザインといえば、ユーザーに提供する体験を設計すること。
このふたつに
どんな関係が?
UX
UI
UXを定義して
UIを設計する
UX
IA
UXを定義して
IAを設計して
UI
UIを製造する
じつはふたつの仕事は多いのでもっと細分化できます
«カフェのテーマを考えて»
«店舗を設計する»
«カフェのテーマを考えて»
«レイアウトを製図して»
«壁材や机を決める»
IA
インフォメーションアーキテクチャ。
情報の見せ方のこと。
ユーザーが目的とする情報を適切に取り出し、利用するためのデザイン。
遷移設計やレイアウトが含まれます。
UX
UI
どんなカフェにする?
誰に何を提供する?
お客さんは何を得られる?
どんな体験を得られる?
注文方法はどうする?
テーブルの数は?
どこにレジを置く?
トイレはどこに?
すぐれた
UX

利用できる
とりあえず使えるという状態。最低限使えなければ無意味。
UXハニカム
UXピラミッド
教科書に出るUX
本当に大事なUX
信頼できる
意図しない機能/動作がなく、安心して利用できる状態。
共感できる
ユーザーが体験を気に入り、何度も使いたいと思える状態。
友達
一緒にいると心地いい相手になる。いないとつまらない。
すぐれた
UXの作り方

Learn
Action
Reward
体験を得るまでの流れ
Learn
ユーザー自身が、今何ができて、何をすべきかを知ること。
Action
決意に基づいて実際に行動すること。
Reward
行動の結果として得られる報酬。ここでひとつの体験となる。
大小さまざまな粒度でこの3つは存在します
大きい
すべての利用体験の総体。
中くらい
ひとつの機能。会員登録や閲覧、投稿など。
小さい
ひとつの操作。ボタン押下や文字入力など。
“小さい”の例
Learn
Action
Reward
いい例
押せる所がある
押す
色が変わることで押せたと分かる
わるい例
押せる所がある
押す
無反応で押せたかどうか分からない
Rewardがなく体験が得られない
わるい例2
文字入力できる所がある
押す
画面が変わった
正しくLearnできていないので期待したRewardがなく
体験が得られない
ボタン
“中くらい”の例
Learn
Action
Reward
いい例
情報を入れて登録ボタン
を押すと会員登録できる
わるい例
期待したRewardがなく
体験が得られない
わるい例2
会員登録
情報を入れて登録ボタン
を押す
完了画面に変わり登録完了したことが分かる
情報を入れて登録ボタン
を押すと会員登録できる
情報を入れて登録ボタン
を押す
本登録画面に変わりさらに細かい情報を入力する
情報を入れて登録ボタン
を押すと会員登録できる
入れる情報が多くて
やはり会員登録はしない
ない
Actionされなかったので
体験が得られない
“大きい”の例
Learn
Action
Reward
いい例
アートに特化したイベント
情報を見つけ、参加できる
わるい例
期待したRewardがなく
体験が得られない
わるい例2
アートイベント専門集客サービス
イベントに参加申込する
イベントに参加し、そのアートイベントは面白かった
アートに特化したイベント
情報を見つけ、参加できる
イベントに参加したが面白くなかった
UIのイメージ
から現代アートがメインのイベント情報を期待し、検索/参加できる
イベントを探す
古典ばかり出てくる
イベントに参加申込する
正しくLearnできていないので期待したRewardがなく
体験が得られない
フラットの建前
スキューモーフィズムの多用によって、デザインが使い方を示唆してきたが、もう十分に使い方を周知できた。スキューモーフィズムの役割が終わった。
デザイナの本音
レスポンシブが求められている中でフラットはデザインしやすい。ミニマリズムデザインは誰でも憧れる。スキューモーフィズムの反動。
などなど。
建築との比較
歴史主義建築
モダニズム建築
歴史様式を引用した装飾。
装飾の排除。
機能性、合理性の重視。
空間の概念。
フラットデザイン
いま過渡期。
今後主流になるのでは。
田中 宏幸
レイ・フロンティア株式会社
UI/UXデザイナ
http://www.rei-frontier.jp
AR(拡張現実)アプリ開発
http://sensebahn.com
UI/UX設計
コアターゲット
使用方法
中心的な機能
目的
アプリケーション定義ステートメント
プロジェクトメンバー全員で
最初に共有する、アプリの憲法
体験
具体的に何を
決めればいい?
コアターゲット
予定が追加・変更されることが多い
多忙な営業マン。スポーツが好きで、趣味でフットサルやスキーを楽しむ。
目的
これからの行動のために、いま入っている予定を知る
新しい予定を入れるために、空いている日を知る
予定を追加・変更する
中心的な機能
予定を確認する
体験
休日は仕事を忘れて、
気の合う仲間とスポーツを楽しむ!
たとえば
カレンダーアプリ
この体験を得るには
どんなアプリが
いいだろうか?
シグニファイア
アフォーダンス
ヒューマンセンタード
アフォード
する
知覚心理学
認知心理学
いろいろあるけど、簡単に言うと・・・
体験をゴールにして
設計しましょう!
いったんおしまい
Full transcript