Slide 1

Slide 1 text

から始める UXデザイン Kazuki Yamashita 21st Apr. 2018 @MeetUp! UXD #00 情報設計

Slide 2

Slide 2 text

山下 一樹 メーカーの IT 部門にてソフトウェアの企画、UI 設計、 開発に従事。その後、株式会社インパスを設立。 インフォメーションアーキテクト、 ユーザビリティを専門とするアプリデザイナー。 人間中心設計推進機構、 ヒューマンインタフェース学会所属。 @yamashitakazuki

Slide 3

Slide 3 text

UI と UX デザインを専門 デザインと web・アプリ開発 情報設計、改善、UX コンサルティング、 クライアントは大手・スタートアップが中心

Slide 4

Slide 4 text

から始める UXデザイン 情報設計

Slide 5

Slide 5 text

情報設計

Slide 6

Slide 6 text

情報アーキテクチャ

Slide 7

Slide 7 text

Information Architecture

Slide 8

Slide 8 text

2003 2011 2015 IA Google Trend UI/UX

Slide 9

Slide 9 text

IA の目的って?

Slide 10

Slide 10 text

Text Hogehoge Text Hogehoge Text Hogehoge Basically, creating a wireframe sketch saves you time by reducing the number of revisions you’d need to do, and it helps you stay on track with Basically, creating a wireframe sketch saves you time by reducing the number of revisions you’d need to do, and it helps you stay on track with Basically, creating a wireframe sketch saves you time by reducing the number of revisions you’d need to do, and it helps you stay on track with Text Hogehoge Text Hogehoge Text Hogehoge Basically, creating a wireframe sketch saves you time by reducing the number of revisions you’d need to do, and it helps you stay on track with your design by being a prototype you can work off of. Basically, creating a wireframe sketch saves you time by reducing the number of revisions you’d need to do, and it helps you stay on track with your design by being a prototype you can work off of. Basically, creating a wireframe sketch saves you time by reducing the number of revisions you’d need to do, and it helps you stay on track with your design by being a prototype you can work off of. ワイヤーフレームを描く?

Slide 11

Slide 11 text

利用状況把握 要求分析 要求への評価 調査・評価設計能力 ユーザー調査 実施能力 専門知識に基づく 評価実施能力 ユーザーによる 評価実施能力 定性・定量データの 分析能力 現状の モデル化能力 ユーザー体験の 構想・提案能力 ユーザー要求仕様 作成能力 新製品・新事業 企画提案能力 システム・サービスの 要求仕様作成能力 情報構造の設計能力 デザイン仕様 作成能力 プロトタイピング 能力 プロマネ チーム 運営能力 プロジェクト 企画能力 導入 人材 組織 プロジェクト調整 推進能力 手法 開 教育プ 開 設計解決案 人間中心設計推進機構 コンピタンス

Slide 12

Slide 12 text

情報構造の設計能力 製品やシステム、サービスの使用に際し、 ユーザーが情報を理解しやすく、 またユーザー自身が情報を探しやすくなるような構造を、 要求仕様に基づいて設計できる能力のこと どのような構造を、どういった判断根拠で組み立てたか? 「ユーザーが理解しやすく探しやすい」をどう客観的に担保したか? 人間中心設計推進機構 コンピタンス

Slide 13

Slide 13 text

James Garrett The Elements of User Experience A basic duality: The Web was originally conceived as a hypertextual information space; but the development of increasingly sophisticated front- and back-end technologies has fostered its use as a remote software interface. This dual nature has led to much confusion, as user experience practitioners have attempted to adapt their terminology to cases beyond the scope of its original application. The goal of this document is to define some of these terms within their appropriate contexts, and to clarify the underlying relationships among these various elements. Jesse James Garrett [email protected] Visual Design: graphic treatment of interface elements (the "look" in "look-and-feel") Information Architecture: structural design of the information space to facilitate intuitive access to content Interaction Design: development of application flows to facilitate user tasks, defining how the user interacts with site functionality Navigation Design: design of interface elements to facilitate the user's movement through the information architecture Information Design: in the Tuftean sense: designing the presentation of information to facilitate understanding Functional Specifications: "feature set": detailed descriptions of functionality the site must include in order to meet user needs User Needs: externally derived goals for the site; identified through user research, ethno/techno/psychographics, etc. Site Objectives: business, creative, or other internally derived goals for the site Content Requirements: definition of content elements required in the site in order to meet user needs Interface Design: as in traditional HCI: design of interface elements to facilitate user interaction with functionality Information Design: in the Tuftean sense: designing the presentation of information to facilitate understanding Web as software interface Web as hypertext system Visual Design: visual treatment of text, graphic page elements and navigational components Concrete Abstract time Conception Completion Functional Specifications Content Requirements Interaction Design Information Architecture Visual Design Information Design Interface Design Navigation Design Site Objectives User Needs User Needs: externally derived goals for the site; identified through user research, ethno/techno/psychographics, etc. Site Objectives: business, creative, or other internally derived goals for the site This picture is incomplete: The model outlined here does not account for secondary considerations (such as those arising during technical or content development) that may influence decisions during user experience development. Also, this model does not describe a development process, nor does it define roles within a user experience development team. Rather, it seeks to define the key considerations that go into the development of user experience on the Web today. task-oriented information-oriented 30 March 2000 © 2000 Jesse James Garrett http://www.jjg.net/ia/

Slide 14

Slide 14 text

ビジュアル 骨格 構造 要件 目的 UXD 構造

Slide 15

Slide 15 text

ビジュアル 骨格 構造 要件 目的 UXD IA 体幹

Slide 16

Slide 16 text

IA の目的って? 「分かりやすさ」をきちんと設計していく

Slide 17

Slide 17 text

IA がすること

Slide 18

Slide 18 text

IA がすること 1. 把握し共有 2. 意図を作る 3. 構造化する

Slide 19

Slide 19 text

IA がすること 1. 把握し共有 情報を棚卸して、混乱の状況を見極める

Slide 20

Slide 20 text

1. 把握し共有 正確さ・改訂 統合・排除 発見・作る 情報不足 不適切 情報過多 情報による混乱の原因

Slide 21

Slide 21 text

1. 把握し共有 枚数 きっぷ購入 カード購入 使い方説明 こども 路線名選択 地下鉄きっぷ 注意書き 各線連絡

Slide 22

Slide 22 text

IA がすること 1. 把握し共有 2. 意図を作る ◯◯にとって「良い」空気を作る

Slide 23

Slide 23 text

2. 意図を作る 空気=意図を作る

Slide 24

Slide 24 text

2. 意図を作る 空気=言葉ではない意図を作る

Slide 25

Slide 25 text

2. 意図を作る 言葉そのものに意図はなく混乱の元になる 大阪国際空港 第1ターミナル 関西国際空港 伊丹空港 第2ターミナル 新千歳空港 中部国際空港 名古屋空港 千歳空港 セントレア リスト 結果一覧 明細表 一覧 商品一覧

Slide 26

Slide 26 text

IA がすること 1. 把握し共有 2. 意図を作る 3. 構造化する 適切な構造パターンを決める

Slide 27

Slide 27 text

構造のパターン 3. 構造化する 並列 階層 ハイパーテキスト シーケンシャル 情報が少ない場合 大量の情報 順序が情報を左右 構造間を移動

Slide 28

Slide 28 text

構造のパターン プッシュアップ モーダル ナビゲーション 1 2 1-A 1 1-B 3. 構造化する 情報間の移動 階層間の移動 サブ情報の操作 1 1”

Slide 29

Slide 29 text

IA がすること 1. 把握し共有 2. 意図を作る 3. 構造化する

Slide 30

Slide 30 text

これからの IA

Slide 31

Slide 31 text

これからの IA 個が進化を続ける「多様性」の中で ᴷ

Slide 32

Slide 32 text

正しい設計でみんなで個をつなぐ 「分かりやすい」を当たり前に これからの IA

Slide 33

Slide 33 text

「分かりやすいって、すばらしい」

Slide 34

Slide 34 text

Thank you! Twitter @yamashitakazuki UI デザインのコミュニティを運営しています。 よかったらフォローお願いします。