UXのためのUIデザイン

Hironobu Aoki

More Related Content

1.UXのためのUIデザイン
2.対象デザイン対象 スマートフォン向けアプリケーションのUI。 他のデバイス（タブレット、TV）上でのアプリケーションのUIにも応用できます。対象となる人 UXデザイナー UIデザイナー UIに関わっているステークホルダー 2
3.はじめにどんなにすばらしいUXをユーザーに提供しようとしても、UIがUXのためのデザインになっていないとユーザーは体験することが出来ません。それはいろんな意味で残念。。UXを正しく考慮したUIをデザインするためには、どうすればいいのでしょうか？ 3
4.アプリケーションを作るためにUX（体験）と、それを提供するためのUI（表現）と、UIやサービスを実現するためのSoftware（実現）それぞれの価値の最大化を図ることが大切です。 UX Software UI 4
5.UXとUIの境界UX = ユーザー体験 語られる言葉は、体験です。UI = ユーザーインターフェイス 語られる言葉は、インタラクションであり、ビジュアルであり、アーキテクチャです。UX UI UX=UIではありません。ユーザーがUIを通して体験することがUXです。 UIで語られる言葉がどんなに素晴らしくても、それがすなわちUXを実現しているとは言えません。UIデザインの理由 デザインには理由が必要です。 UXの実現をUIの目的とした場合、『デザインの理由=UXを実現していること』です。 しかし、体験をUIの言葉で語るには限界があります。そのため、UXとUIをつなぐ言葉が必要になります。 5
6.UXとUIをつなぐ言葉UXを実現するために必要なアクション（ユーザーの行動）を整理することで、UXをUIデザイン上の言葉に変換できます。 UX アクション UI 体験 インタラクション ビジュアル アーキテクチャ 6
7.アクション本ドキュメントでいうアクションとは、ユーザーがUXを達成するために行う最小単位の行動を指します。表現としては、 （ユーザーが）○○する。 （ユーザーが）△△を する。 7
8.流れUXをインプットとし、アクションに変換後、UIデザインを行います。挙げる２つに分ける アクションの整理優先順位をつけるつなげる描く UIデザイン 8
9.心構え： 立ち止まるUXデザインとUIデザインのターニングポイントをあえて意識してみましょう。 UXの定義ができました。 早速UIを描いてみましょう！ ではなく、 アクションを整理してみましょう！ 9
10.１. 挙げるUXを達成する上で、ユーザーがUIに対して行うアクションをできるだけたくさん挙げます。表現としては、 （ユーザーが）○○する。 （ユーザーが）△△を する。 10
11.１. 挙げる言葉の粒度を意識しましょう。e.g. 友達のオススメの場所を確認するアプリ レコメンドされている FBにアプリを 新規のレコメンドに レコメンド レストランの 場所を見る。 登録する。 場所の名前を されている場所に ギャラリーの中の 予約をする。 場所を検索する。 新規のレコメンドに 入れる。 写真を選択する。 チェックインする。 写真を撮る。 コメントを つける。場所のカテゴリー 既存のレコメンドに 既存のレコメンドに レコメンドを を選ぶ。 自分の写真を ログアウトする。 撮った写真を コメントを カテゴリーで レコメンドの詳細を （撮影時） 新規にレコメンドを 追加する。 確認する。 つける。 フィルターする。 見る。 投稿する。 （閲覧時） 11
12.２. 2つに分けるUXを達成するために必要なアクションを選び、以下の分類に振り分けます。分類1. 一次的アクション（mandatory） ユーザーがUXを達成する上で、必ず行うこと。分類2. 二次的（副次的）アクション（optional） 1. 分類１の達成に不可避だが、二次的なもの。（e.g. アカウントを作る。） 2. サポートしなくてもユーザーはUXを達成できるが、サポートすることでよりよい UXが提供できるもの。(mandatoryではないアクション。あったらより良くなる。) 12
13.２. 2つに分ける２つの分類に入らないアクションは不要なので、思い切って捨てましょう。 分類１ 分類２ 不要なアクション新規にレコメンドを 投稿する。 レストランの レコメンドされてい ログアウトする。 ギャラリーの中の る 場所を検索する。 予約をする。 FBにアプリを 写真を選択する。 場所を見る。 登録する。 写真を撮る。 レコメンドの詳細を 新規のレコメンドに 見る。 場所の名前を 入れる。 レコメンドを カテゴリーで 既存のレコメンドに 新規のレコメンドに 既存のレコメンドに フィルターする。 場所のカテゴリー コメントをつける。 コメントを 自分の写真を （閲覧時） を選ぶ。 つける。 追加する。 （撮影時） 撮った写真を 確認する。 13
14.３. 優先順位をつける分類１、分類２それぞれに対し、優先順位を付けます。以下のアクションの優先度が高くなるように、並べ替えてみましょう。アクションの優先順位付けは、UIデザインの土台になります。以下のようなアクションが、優先順位の高いものです。ユーザーが期待するアクション(何をしたいか？)ユーザーがよく行うアクション (何を行うか？) 14
15.３. 優先順位をつけるユーザーにとって必要なことを知る。→ユーザーがUXを達成することが出来る。分類１: UXを達成するためのアクション 分類２ : 二次的なアクション1. レコメンドされている場所を見る。 1. 場所を検索する。 1.1. レコメンドの詳細を見る。 2. Facebookにアプリを登録する。2. 新規にレコメンドを投稿する。 3. ログアウトする。 2.1. 新規のレコメンドに場所の名前を入れる。 2.2. レコメンドする場所のカテゴリーを選ぶ。 分類２ : UXを高めるためのアクション 2.3. 写真を撮る。 2.3.1 撮った写真を確認する。 4. 新規のレコメンドにコメントをつける。 5. 既存のレコメンドに自分の写真を追加する。 6. 既存のレコメンドにコメントを付ける。 15
16.4. つなげる分類分けと優先度に基づいて、アクションのフローを作成します。// 分類分け分類１は少ないステップで達成できることが大切です。分類２で分類１のアクションを妨げないようにしましょう。// 優先度優先度の高いものは、分類１の中でもより最短でたどり着けるようにしましょう。優先度の付け方に迷ったものは、フローを分けるべきかもしれません。 16
17.4. つなげる 場所の名前を 自分の写真を レコメンドの 入れる。 追加する。 詳細を見る。 FBにアプリを 登録する。 場所のカテゴ コメントをつ リー ける。 を選ぶ。 レコメンドの レコメンドを 場所を見る。 投稿する。 写真を 写真を撮る。 確認する。 場所を検索す コメントを る。 つける。 ログアウト 17
18.5. 描くフローに実際のUIをあてていきます。分類１のアクションが含まれる画面を優先的に描きましょう。分類１は画面上のわかりやすい位置に置くことが大切です。分類２は二次的なアクション、もしくはよりよいUXを提供できるものですが、必須でないものです。そのため、分類１を優先したレイアウトにしましょう。 18
19.5. 描く 19
20.振り返りUXのためのUIデザインをするために、 UX1. アクションを元にUIデザインをする。2. やらないことを捨て、できないことを残す。 アクション 挙げる3. 必要なアクションを適切な場所に入れる。 ２つに分ける 優先順位をつける 1. 1. 2. 2. 3. 3. UI つなげる 描く 20
21.効果アクションを整理することで、以下の効果が得られます。1. デザインの理由を明確にできます。2. agile開発の場合、user storyの生成に利用できます。3. user testの際に作成するスクリプトに流用できます。4. ステークホルダーとの共通認識をもつことができます。 21
22.補足対象者へ1. UIが適切かどうか、アクションに基づいて客観的にチェックしましょう。2. 不要なアクションは、UXを阻害する恐れがあることを理解しましょう。特にUIデザイナーへ1. デザインに迷った時はアクションに立ち戻り、デザインの理由を考えましょう。2. 要件追加は、アクションと照らし合わせて、要件の要不要の議論をしましょう。 22
23.おまけ私的UIデザインの原則1.simplicity (簡素さ)2.optimization (最適化)3.consistency (一貫性)4.flexibility (柔軟性) 23