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大好きプログラマーがGUIを考える道筋
Search
株式会社ヌーラボ
PRO
March 15, 2023
Technology
0
190
UI大好きプログラマーがGUIを考える道筋
株式会社ヌーラボ
PRO
March 15, 2023
Tweet
Share
More Decks by 株式会社ヌーラボ
See All by 株式会社ヌーラボ
ヌーラボ‧ウェブサイト課の ⼀年間の取り組みをふり返る
nulabinc
PRO
1
900
今からでも入れる re:Inventがあるんですか!?
nulabinc
PRO
0
340
ライティングチームだからこそできた、「どことでも繋がれるチーム」づくりの結果 / Technical Writing Meetup vol.38
nulabinc
PRO
0
76
4つの基本的な組織形態を知る ~ミンツバーグの組織論 7つの類型と力学、そしてその先へ~ より GWD in Nagoya
nulabinc
PRO
2
200
必要なのは客観性。組織変革をもたらす、より良い「対話」を生み出すための活動 #scrummikawa
nulabinc
PRO
3
1.3k
悪い実装例から学ぶ ウェブアクセシビリティ改善のヒント
nulabinc
PRO
1
750
ヌーラボカスタマーサクセスチームのBacklog活用
nulabinc
PRO
0
380
言葉で「ヌーラボらしさ」をどう届ける? グローバルチームでコラボレーションする大切さ
nulabinc
PRO
1
140
タスクの可視化は争いをなくす!? 夏休みを乗り切る 宿題プロジェクトマネジメント
nulabinc
PRO
2
310
Other Decks in Technology
See All in Technology
組織におけるCCoEの役割とAWS活用事例
nrinetcom
PRO
4
120
ウォンテッドリーのデータパイプラインを支える ETL のための analytics, rds-exporter / analytics, rds-exporter for ETL to support Wantedly's data pipeline
unblee
0
120
内製化を加速させるlaC活用術
nrinetcom
PRO
2
140
PHPカンファレンス名古屋-テックリードの経験から学んだ設計の教訓
hayatokudou
2
540
役員・マネージャー・著者・エンジニアそれぞれの立場から見たAWS認定資格
nrinetcom
PRO
3
5.8k
入門 PEAK Threat Hunting @SECCON
odorusatoshi
0
150
【詳説】コンテンツ配信 システムの複数機能 基盤への拡張
hatena
0
230
急成長する企業で作った、エンジニアが輝ける制度/ 20250227 Rinto Ikenoue
shift_evolve
0
130
MIMEと文字コードの闇
hirachan
2
1.4k
Amazon Aurora のバージョンアップ手法について
smt7174
2
140
2/18 Making Security Scale: メルカリが考えるセキュリティ戦略 - Coincheck x LayerX x Mercari
jsonf
0
180
エンジニアリング価値を黒字化する バリューベース戦略を用いた 技術戦略策定の道のり
kzkmaeda
6
2.6k
Featured
See All Featured
Intergalactic Javascript Robots from Outer Space
tanoku
270
27k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
Designing Experiences People Love
moore
140
23k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
10
1.3k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
33
2.1k
KATA
mclloyd
29
14k
Become a Pro
speakerdeck
PRO
26
5.2k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
175
52k
Unsuck your backbone
ammeep
669
57k
[RailsConf 2023] Rails as a piece of cake
palkan
53
5.3k
Why You Should Never Use an ORM
jnunemaker
PRO
55
9.2k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
366
25k
Transcript
Copyright Nulab Inc. All Rights Reserved. UI大好きプログラマーが 大好きプログラマーが GUIを考える道筋 を考える道筋
(個人の感想) (個人の感想) 株式会社ヌーラボ 藤田 正訓
Copyright Nulab Inc. All Rights Reserved. 自己紹介 自己紹介 藤田 藤田
正訓 正訓 Fujita Masanori 株式会社ヌーラボ プログラマー 2016 Backlog UIリニューアル リニューアル (開発者) (開発者) 2019 Backlog カンバンボード機能 カンバンボード機能 ( (PO) ) デザイナーじゃないけど UI大好きです 検索すると裏話いっぱい見つかります
Copyright Nulab Inc. All Rights Reserved. 使いやすい 使いやすいGUIって、結局慣れてるって って、結局慣れてるって だけじゃない?
だけじゃない?
Copyright Nulab Inc. All Rights Reserved. 「慣れ」ってなんだろう 「慣れ」ってなんだろう 2004 2023
慣れてるアプリは使いやすい。 慣れてるアプリに新機能が生えても特にマニュアル見ないで使える気がする。 慣れってなんだろう。慣れのメカニズムを解き明かしたい
Copyright Nulab Inc. All Rights Reserved. UIデザインの流行 デザインの流行 2000年代 2020年代
見出しは色で目立たせる 背景色と 枠線で分類 位置と マージンとサイズの差で分類 見出しは大きくして目立たせる 背景色と 枠線で分類 位置と マージンとサイズの差で分類 スキューモーフィズム アフォーダンス フラット(+軽いシャドウ) 情報を詰め込む 色数多め 認知科学の成果:変わることはあっても戻ることは無い 認知科学の成果:変わることはあっても戻ることは無い 安心感(慣れの要素の一つ)←デザインの流行
Copyright Nulab Inc. All Rights Reserved. 操作方法の規則性 操作方法の規則性 → 当たっていれば
「直感的に使えた!」 見た目で操作方法がわかる(慣れの要素の一つ) UIの2次元表現 見えていない情報の取り出し方 やりたいアクション 予測 予測 タイトル1 タイトル2 タイトル3 内容1 タイトル2 タイトル3 タイトル1 内容1 2000年代 2020年代 3D的な影や出っ張りの表現は不要に 「紙が重なっている」というイメージ
Copyright Nulab Inc. All Rights Reserved. 操作方法の規則性 操作方法の規則性 → 当たっていれば
「直感的に使えた!」 見た目で操作方法がわかる(慣れの要素の一つ) UIの2次元表現 見えていない情報の取り出し方 やりたいアクション 予測 予測 + 経理関係 経理関係 2000年代 2020年代 ▼と▶だけで開閉を表せるように マイクロソフトの発明?
Copyright Nulab Inc. All Rights Reserved. 操作方法の規則性 操作方法の規則性 → 当たっていれば
「直感的に使えた!」 見た目で操作方法がわかる(慣れの要素の一つ) UIの2次元表現 見えていない情報の取り出し方 やりたいアクション 予測 予測 2000年代 2020年代 紆余曲折を経て徐々に浸透しつつある 「とりあえず右クリックすればなんとかなる」 サイズ 幅 400 高さ 400
Copyright Nulab Inc. All Rights Reserved. 操作方法の規則性 操作方法の規則性 → 当たっていれば
「直感的に使えた!」 見た目で操作方法がわかる(慣れの要素の一つ) UIの2次元表現 見えていない情報の取り出し方 やりたいアクション 予測 予測 … オーバーレイメニュー(メイン以外の細かい機能) 操作方法の規則性 「この見た目のUIはこう操作すればこう動く」というルール、法則 世界中のデザイナーと開発者が少しずつ増やし、変化させてきた ユーザーは日々、いろんなサイトやアプリを使って知らず知らずの内に習得させられている。
Copyright Nulab Inc. All Rights Reserved. 操作方法の規則性 操作方法の規則性 → 当たっていれば
「直感的に使えた!」 見た目で操作方法がわかる(慣れの要素の一つ) UIの2次元表現 見えていない情報の取り出し方 やりたいアクション 予測 予測 … オーバーレイメニュー(メイン以外の細かい機能) 操作方法の規則性 「この見た目のUIはこう操作すればこう動く」というルール、法則 世界中のデザイナーと開発者が少しずつ増やし、変化させてきた ユーザーは日々、いろんなサイトやアプリを使って知らず知らずの内に習得させられている。 密接に影響 つまり 「慣れ」は作れる
Copyright Nulab Inc. All Rights Reserved. 「慣れ」を作ろう 「慣れ」を作ろう
Copyright Nulab Inc. All Rights Reserved. 慣れを作る方法 慣れを作る方法 操作方法の規則性 ユーザーが学習済みの操作方法の規則性をなぞる
(≒シェアの大きい有名アプリからパク流用する) デザインの流行→安心感 ユーザーが普段見慣れているデザインの法則に従う どこかで見たようなUIしか作 れないのでは? YESでありNO
Copyright Nulab Inc. All Rights Reserved. どこかで見たような どこかで見たようなUI どこかで見たようなUIしか 作れないのでは?
独創的なGUIはいらない 特に仕事に使うアプリケーションでは、ユーザーが学習済みのUIで機 能が実現できるならベスト(個人の感想) 操作のやり方に独自性はいらない ユーザーの操作の結果に独自性を出そう 自サービスのユーザーがどんなUIを学習済みか、頑張って調査しよう YES ※ 趣味で作るアプリではどんどん自由に遊びましょう
Copyright Nulab Inc. All Rights Reserved. 既存の 既存のUIでは表現できない場合 では表現できない場合 (1)
どこかで見たようなUIしか 作れないのでは? 新しい操作方法の規則性を世界に広める Microsoft、Apple、Google等Big Playerがやっていること NO (1) 例:マテリアルデザイン (Google) 画面内に1つだけ、一番大事な機能のためのデカくて目立つボタンを配置する 過去、流行らせようとしたけど流行らなかったものや、もう廃れてしまったものもたくさんある
Copyright Nulab Inc. All Rights Reserved. 既存の文法では表現できない場合 既存の文法では表現できない場合 (2) どこかで見たようなUIしか
作れないのでは? 操作方法の規則性をユーザーに学習してもらう ユーザーの負担にならない程度の、アプリケーション独自の規則性 を繰り返す NO (2) 布石 布石 「種別+課題キー+タイトル」で課題を指す表現を 繰り返す→新しい画面で迷わず使ってもらえる 付帯する機能もついでにつけられる 2016 Backlog UIリニューアル 2019 ボード機能
Copyright Nulab Inc. All Rights Reserved. 慣れを作る方法 慣れを作る方法 操作方法の規則性 ユーザーが学習済みのUIをなぞる
(≒シェアの大きい有名アプリからパク流用する) デザインの流行→安心感 ユーザーが普段見慣れているデザインの法則に従う 新しい操作方法の規則性を広める …のは難しいけど、Big Playerが広めてるものはチェッ クする 独自の小さな規則性を繰り返す 自アプリや、自社の様々なアプリで規則性を統一する 「慣れ」を作ってユーザーもニッコリ! おしまい。
Copyright Nulab Inc. All Rights Reserved. ちょっと宣伝(個人開発) ちょっと宣伝(個人開発) Backlog Sprinter
BacklogでScrumやってる方を助けるChrome拡張 おしまい。