UI大好きプログラマーがGUIを考える道筋

Slide 1

Slide 1 text

Slide 2

Slide 2 text

Copyright Nulab Inc. All Rights Reserved. 自己紹介自己紹介藤田藤田正訓正訓 Fujita Masanori 株式会社ヌーラボ　プログラマー 2016 Backlog UIリニューアルリニューアル（開発者）（開発者） 2019 Backlog カンバンボード機能カンバンボード機能（（PO））デザイナーじゃないけど UI大好きです検索すると裏話いっぱい見つかります

Slide 3

Slide 3 text

Slide 4

Slide 4 text

Slide 5

Slide 5 text

Copyright Nulab Inc. All Rights Reserved. UIデザインの流行デザインの流行 2000年代 2020年代見出しは色で目立たせる背景色と枠線で分類位置とマージンとサイズの差で分類見出しは大きくして目立たせる背景色と枠線で分類位置とマージンとサイズの差で分類スキューモーフィズムアフォーダンスフラット（＋軽いシャドウ）情報を詰め込む色数多め認知科学の成果：変わることはあっても戻ることは無い認知科学の成果：変わることはあっても戻ることは無い安心感（慣れの要素の一つ）←デザインの流行

Slide 6

Slide 6 text

Copyright Nulab Inc. All Rights Reserved. 操作方法の規則性操作方法の規則性 → 当たっていれば「直感的に使えた！」見た目で操作方法がわかる（慣れの要素の一つ） UIの2次元表現見えていない情報の取り出し方やりたいアクション予測予測タイトル1 タイトル2 タイトル3 内容1 タイトル2 タイトル3 タイトル1 内容1 2000年代 2020年代 3D的な影や出っ張りの表現は不要に「紙が重なっている」というイメージ

Slide 7

Slide 7 text

Slide 8

Slide 8 text

Copyright Nulab Inc. All Rights Reserved. 操作方法の規則性操作方法の規則性 → 当たっていれば「直感的に使えた！」見た目で操作方法がわかる（慣れの要素の一つ） UIの2次元表現見えていない情報の取り出し方やりたいアクション予測予測 2000年代 2020年代紆余曲折を経て徐々に浸透しつつある「とりあえず右クリックすればなんとかなる」サイズ幅 400 高さ 400

Slide 9

Slide 9 text

Copyright Nulab Inc. All Rights Reserved. 操作方法の規則性操作方法の規則性 → 当たっていれば「直感的に使えた！」見た目で操作方法がわかる（慣れの要素の一つ） UIの2次元表現見えていない情報の取り出し方やりたいアクション予測予測 … オーバーレイメニュー（メイン以外の細かい機能）操作方法の規則性「この見た目のUIはこう操作すればこう動く」というルール、法則世界中のデザイナーと開発者が少しずつ増やし、変化させてきたユーザーは日々、いろんなサイトやアプリを使って知らず知らずの内に習得させられている。

Slide 10

Slide 10 text

Slide 11

Slide 11 text

Slide 12

Slide 12 text

Slide 13

Slide 13 text

Copyright Nulab Inc. All Rights Reserved. どこかで見たようなどこかで見たようなUI どこかで見たようなUIしか作れないのでは？独創的なGUIはいらない特に仕事に使うアプリケーションでは、ユーザーが学習済みのUIで機能が実現できるならベスト（個人の感想）操作のやり方に独自性はいらないユーザーの操作の結果に独自性を出そう自サービスのユーザーがどんなUIを学習済みか、頑張って調査しよう YES ※ 趣味で作るアプリではどんどん自由に遊びましょう

Slide 14

Slide 14 text

Copyright Nulab Inc. All Rights Reserved. 既存の既存のUIでは表現できない場合では表現できない場合 (1) どこかで見たようなUIしか作れないのでは？新しい操作方法の規則性を世界に広める Microsoft、Apple、Google等Big Playerがやっていること NO (1) 例：マテリアルデザイン (Google) 画面内に１つだけ、一番大事な機能のためのデカくて目立つボタンを配置する過去、流行らせようとしたけど流行らなかったものや、もう廃れてしまったものもたくさんある

Slide 15

Slide 15 text

Copyright Nulab Inc. All Rights Reserved. 既存の文法では表現できない場合既存の文法では表現できない場合 (2) どこかで見たようなUIしか作れないのでは？操作方法の規則性をユーザーに学習してもらうユーザーの負担にならない程度の、アプリケーション独自の規則性を繰り返す NO (2) 布石布石「種別＋課題キー＋タイトル」で課題を指す表現を繰り返す→新しい画面で迷わず使ってもらえる付帯する機能もついでにつけられる 2016 Backlog UIリニューアル 2019 ボード機能

Slide 16

Slide 16 text

Copyright Nulab Inc. All Rights Reserved. 慣れを作る方法慣れを作る方法操作方法の規則性ユーザーが学習済みのUIをなぞる（≒シェアの大きい有名アプリからパク流用する）デザインの流行→安心感ユーザーが普段見慣れているデザインの法則に従う新しい操作方法の規則性を広める …のは難しいけど、Big Playerが広めてるものはチェックする独自の小さな規則性を繰り返す自アプリや、自社の様々なアプリで規則性を統一する「慣れ」を作ってユーザーもニッコリ！おしまい。