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

Transcript

1. Copyright Nulab Inc. All Rights Reserved.
   UI大好きプログラマーが
   大好きプログラマーが
   GUIを考える道筋
   を考える道筋
   （個人の感想）
   （個人の感想）
   株式会社ヌーラボ
   藤田　正訓
   

   View Slide

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

   View Slide

3. Copyright Nulab Inc. All Rights Reserved.
   使いやすい
   使いやすいGUIって、結局慣れてるって
   って、結局慣れてるって
   だけじゃない？
   だけじゃない？
   

   View Slide

4. Copyright Nulab Inc. All Rights Reserved.
   「慣れ」ってなんだろう
   「慣れ」ってなんだろう
   2004 2023
   慣れてるアプリは使いやすい。
   慣れてるアプリに新機能が生えても特にマニュアル見ないで使える気がする。
   慣れってなんだろう。慣れのメカニズムを解き明かしたい
   

   View Slide

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

   View Slide

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

   View Slide

7. Copyright Nulab Inc. All Rights Reserved.
   操作方法の規則性
   操作方法の規則性
   → 当たっていれば
   「直感的に使えた！」
   見た目で操作方法がわかる（慣れの要素の一つ）
   UIの2次元表現
   見えていない情報の取り出し方
   やりたいアクション
   予測
   予測
   + 経理関係 経理関係
   2000年代 2020年代 ▼と▶だけで開閉を表せるように
   マイクロソフトの発明？
   

   View Slide

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

   View Slide

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

   View Slide

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

    View Slide

11. Copyright Nulab Inc. All Rights Reserved.
    「慣れ」を作ろう
    「慣れ」を作ろう
    

    View Slide

12. Copyright Nulab Inc. All Rights Reserved.
    慣れを作る方法
    慣れを作る方法
    操作方法の規則性
    ユーザーが学習済みの操作方法の規則性をなぞる
    （≒シェアの大きい有名アプリからパク流用する）
    デザインの流行→安心感
    ユーザーが普段見慣れているデザインの法則に従う
    どこかで見たようなUIしか作
    れないのでは？
    YESでありNO
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

17. Copyright Nulab Inc. All Rights Reserved.
    ちょっと宣伝（個人開発）
    ちょっと宣伝（個人開発）
    Backlog Sprinter
    BacklogでScrumやってる方を助けるChrome拡張
    おしまい。
    

    View Slide