Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
UIデザイナーを取り巻く様々な設計 / Intrinsic meaning of UI Design
Search
Tsuyoshi Higuchi
PRO
August 07, 2015
Design
46
12k
UIデザイナーを取り巻く様々な設計 / Intrinsic meaning of UI Design
UIデザイナーの周りにある"設計"について、Human-Computer Interactionからヒトとコンピュータの仕組み、エンジニアの設計手法、コミュニケーションの方法などをまとめました。
Tsuyoshi Higuchi
PRO
August 07, 2015
Tweet
Share
More Decks by Tsuyoshi Higuchi
See All by Tsuyoshi Higuchi
2024 Profile Slide - for フロントエンドのモデル駆動設計
tyshgc
PRO
0
110
開発現場でのサービスデザインとモデリング
tyshgc
PRO
7
2.9k
React Nativeで 位置情報アプリをつくった話
tyshgc
PRO
10
5.2k
Design For User #2 コンポーネント指向から考えるUIと設計・趣旨説明スライド / Design For User #2 Openning Slide
tyshgc
PRO
1
1.3k
メンタルモデルから紐解く オブジェクト指向的コンポーネント設計 / Mental-Model Component Design
tyshgc
PRO
11
5.3k
Designer meets Domain-Driven-Design
tyshgc
PRO
28
2.7k
ReactとLoopbackことはじめ / React.js meets Loopback
tyshgc
PRO
11
3.7k
UCDとDDD - ユースケースからユーザー中心について考える
tyshgc
PRO
21
4.1k
React & Go Single Page Apps
tyshgc
PRO
20
5.6k
Other Decks in Design
See All in Design
情報設計からのデザインアプローチ ~ユーザーの声を聞くよりも、もっとデータの声を聞け~
securecat
4
2.4k
Personal Story Sequence(WIP) - Younghoon Park
elrns88
0
260
Design System for training program
mct
0
280
デザインスプリントを活かすチームの在り方
mixi_design
PRO
2
790
Improve a service workshop
mastervicedesign
1
110
デザインできるもの、できないもの | Designship 2024 | Yasuhiro Yokota
yasuhiroyokota
2
890
Осязаемый потребительский опыт. Ловим его за хвост с Картой процесса-опыта
ashapiro
2
220
ゲーム開発における、Figma活用事例の紹介 / applibot-figma
cyberagentdevelopers
PRO
2
330
Design Your Own App Using Figma by Medha Muppala
gdgmontreal
0
160
ENEOS社事例|アプリ事業を加速させるデザイナーの取り組み / dx-eneos-design
cyberagentdevelopers
PRO
1
270
ZOZO CDO Office Design
zozodevelopers
PRO
1
450
ABEMAの進化 – 複雑化したコンテンツ構造とUI改善への道 – / abema-ui-improve
cyberagentdevelopers
PRO
2
410
Featured
See All Featured
The Language of Interfaces
destraynor
154
24k
A Tale of Four Properties
chriscoyier
156
23k
4 Signs Your Business is Dying
shpigford
180
21k
How to train your dragon (web standard)
notwaldorf
88
5.7k
Optimizing for Happiness
mojombo
376
70k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
191
16k
Fantastic passwords and where to find them - at NoRuKo
philnash
50
2.9k
Building an army of robots
kneath
302
43k
How STYLIGHT went responsive
nonsquared
95
5.2k
A Modern Web Designer's Workflow
chriscoyier
693
190k
[RailsConf 2023] Rails as a piece of cake
palkan
52
4.9k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Transcript
Human Intrinsic meaning of UI Design 6*σβΠφʔΛऔΓר༷͘ʑͳઃܭ Computer
みなさん、設計って何をどこまでやっていますか? Question
デザインは”設計”という意味だけど、 UIデザイナが関わる設計はそこだけなのでしょうか? UXやビジュアル・インタラクションの設計だけ?
UIデザインにおける ヒトやコンピュータの情報処理・設計について UIデザイナー視点でまとめてみました。 ͱ͍͏Θ͚Ͱɺࠓճʜ
Profile • UI Designer • 趣味でサービスつくったり、ハッカソンに参加したり • 最近熱いのはDDDと情報処理心理学 毎週日曜朝に 色々な企業・学生の
エンジニアと 渋谷で趣味開発 やってます。 デザイナーが少ないので 興味ある方はぜひ! Tsuyoshi Higuchi devMorning @tyshgc
Agenda 情報処理のデザイン 1. モデルのデザイン 2. 開発コミュニケーションのデザイン 3. まとめ 4.
情報処理のデザイン 1.
よくみるUXフロー ೝ ڵຯ ߦಈ ൺֱ ҙࢥ ܾఆ ར༻ この流れの中にUIが介在する UI
UI UI UI UI
さらに細かくユーザフローを見る
記事リーダアプリで記事を選ぶまでのユーザフロー ىಈͨ͠ΒϦετ͕ ͋Δͱࢥ͍ͬͯΔ Mainflow Subflow アプリを起動する 画像などで 内容を軽く認知 タイトルなどで 内容を軽く認知
リスト面を見る 記事をタップする 記事セルに 指でふれる 画面が記事詳細へ 切り替わるのを期待 Ϧετηϧλοϓ Ͱ͖Δͱ͍͏ࢥ͍ࠐΈ λοϓ͢Δͱը໘͕ ΓସΘͱࢥ͍ͬͯΔ
ユーザフローは単一軸ではなく、 各タスクにあるサブフローを経て次のタスクへ進む
ユーザフローを踏まえて、UIデザインってそもそもなに?
Human Computer UIデザイン = ヒトとコンピュータを繋ぐ層のデザイン User Interface Design
UIをデザインするということは、 ヒトとコンピュータ どちらの仕組みも知る必要があるのでは? ユーザの流暢性《認知や処理のしやすさ》 を向上させること
非エンジニアの考える コンピュータの情報処理の仕組みは?
ちょっと、コンピュータの処理をブラックボックスにしすぎ… エンジニアが いい感じにした 処理群 UIに入力 UIに反映
もうちょっと詳しく見てみる… 例えばWebフロントエンドのアーキテクチャ
User Interaction Action Dispatcher Store View User Interaction ユーザの入力 リクエストを受け
データを渡す ActionとStoreの 紐付け データの永続化を 担う Storeを状態から 描画処理 Fluxのアーキテクチャだとこんな感じ FluxはFacebookが提案した一方向型のアーキテクチャ WebAPI
ʜݟ͑ΔͧʂࢲʹྲྀΕ͕ݟ͑Δο
WebAPI取得時に待機アニメーションで 遅延を感じさせない工夫できるかも? とか Storeに持つデータはどんなものがあるのか見えた。 足りないフラグを追加してもらわねば… とか コンポーネントを意識してデザインし、実装コストを抑えれれば 別の大切な部分にエンジニアリングを注力できるかも? とか
ヒトってどうやって動いているのだろう?
脳、有能! でも、そんな単純なはずは… 脳 感覚 身体的 動作
感覚器官 短期記憶 パターン認識 スキーマ 身体行動 感覚器官 視覚・聴覚・触覚 などからの入力 7秒程度の記憶 長期記憶と比較、
記憶と行動の 紐付け 紐付けから行動を 呼び出す 体を反応させる 人間情報処理のおおよそなフロー もう少し実際は複雑ではあるが、ヒトの情報処理もデータ駆動
人間が認識するまでの最適化が考えられるから、 例えば、ディテールはアフォーダンスを踏まえて設計できるよね? とか カラーリングはパターン認識。そこから得られる意味情報(雰囲気) を無意識下で視覚野になげれば、ブランドのサポートになるかも? とか 繰り返し学習を行う・体験をすることで長期記憶に残ってほしい ラベリングの意味付けとかできるかもしれないね? とか
Human Computer User Interface Design UIデザイン = システムとヒトを繋ぐ層のデザイン ͲͪΒʹࡉ͔͍ใॲཧͷϑϩʔ͕͋Δ͜ͱ͕Θ͔ͬͨʂ ヒューマンコンピュータインタラクション
提供 期待 ίϯϐϡʔλʔ ώτ 価値を提供するために両サイドの仕組みを知り ใॲཧ ใॲཧ 最適化されたUser Interfaceを設計する 流暢性
向上へ
Designer Engineer UIデザイン = 二者の職域にまたがる設計 User Interface Design
いろいろな人が 職域を超えて協業するには… モノやコトの本質を抽出して 共有することが近道なのでは?
モデルのデザイン 2.
サービスは、”利用者のメンタルモデル”を基にした ”ドメインモデル”の抽象化
メンタルモデル 物事の動作がどうやって起こるのかに対する `心や意識の概念モデル` ドメインモデル サービスにあるべき `ビジネスの実体と業務の振る舞いの概念モデル`
サービスの本質に基づいて機能や画面が設計されるべきでは? 画面(GUI)駆動開発はボトムアップなので、 プロダクトの規模によってはアンチパターンになるかもしれない... サービスデザイン = 何がサービスのコアなのかの抽出が大切
ユーザーの満足度を上げて使い続けてもらうということは… サービスに関わる デザイナー、エンジニア、ビジネスパーソンが協業して、 どこに本質的課題があるか探していく長い旅
利用者のメンタルモデル から得られた ドメインモデル の抽象化で より本質的な課題の解決を論理的に行う
どうやってモデルを抽出するのか? コミュニケーションから 抽出できるらしい
開発コミュニケーションのデザイン 3.
エンジニアのみなさんの多くは… ドメインモデルをコードの構造に落とし込み、 共有するアーキテクチャをすでに実践しています
ドメイン駆動設計を大雑把にいうと ドメインモデルを設計の基盤とし、実際のコードへ落とし込み ドメインエキスパートやプロジェクトメンバと認識を共有する DDD = Domain Driven Design ドメイン駆動設計
ドメインモデルとして抽象化された サービスの関心事を コードに書いて、コードを読んで皆が理解する Ϣʔβ ໊લ ੑผ ॅॴΛอଘ type User struct
{ FirstName string LastName string Age int Hobbys []string } golang
また、ドメインモデルの抽出を行う際に、 プロジェクトメンバやドメインエキスパートなどと 共通で使用する言葉の定義をする
例:メッセンジャーサービスの場合 メッセンジャー is 自転車に乗って配送業務を行う人 顧客 is 配送元や配送先の企業 配送 is 配送元の荷物を配送先へ届ける行為
共通に認識できる言語をきめる = ユビキタス言語 ఆٛ
共通言語をデザインできれば モデルの抽出化は行いやすくなり 本質的なモデルの抽出が行えれば UIデザインも本質的になる
ドメインモデルとユビキタス ドメイン駆動設計の参考リンク・書籍 ユビキタス言語とドメインモデル、そしてモデル探索のうずまき http://j5ik2o.me/blog/2013/05/07/domain-model/ SNSチームでのドメイン駆動設計の実践 http://labs.gree.jp/blog/2013/12/9330/ エリック・エヴァンスのドメイン駆動設計 (IT Architects’Archive ソフトウェア開発の実践)
エリック・エヴァンス (著), 今関 剛 (監修), 和智 右桂 (翻訳), 牧野 祐子 (翻訳)
まとめ 4.
設計 = デザインは同義 ある目的を達成するための計画をたてて、 無駄を削ぎ本質を明確にする作業を繰り返すこと
目的 = サービスをユーザに提供し利益を生むこと… そのためには、ドメインへの理解とユーザへの理解 それらをコミュニケーションでデザインしていく
人間中心のUIデザインを行うために モノやコト・ヒトの本質の理解をすすめるため 設計に携わっていくことが近道になる UIデザイナーという職域にだけ閉じこもるのは… サービスにもヒトにも保守的な関わり方
コードをかけなくても理解ができれば ドメイン駆動設計のような本質視点の開発を エンジニアやドメインエキスパートと 一緒におこなっていき、 よりよいサービス提供ができるかもしれません。
少なくとも、 エンジニアとデザイナのコミュニケーションの促進や より現実に沿ったプロトタイピングなどができます。
UIデザイナーも コードや設計と友達になろう!