ノンデザイナーでもできる。直感的で使いやすいUIの設計方法

Slide 1

Slide 1 text

ノンデザイナーでもできる。直感的で使いやすい UIの設計方法 2024 / 6 / 24 NCDC株式会社 NCDC Online Seminar

Slide 2

Slide 2 text

自己紹介 2 建設業向けアプリのUX/UIデザイン、業務システムのUI改善などのプロジェクトのほか、NCDCのUXデザイン方法論の策定メンバーとしても活躍。複雑な機能を持つ業務システムのUI設計では、業務フローの理解からユーザーヒアリングまで多くの情報をインプットして分析を行うなど、ユーザーに寄り添って考える情報設計を得意としている。経歴東京造形大学絵画専攻卒業東京デザインプレックス研究所 UI/UXコース修了数年間にわたり現代アート事業や広告制作プロダクションに従事し、クリエイティブデザインやイラスト制作に携わる。その後、関心を抱いたUX/UIデザインや人間中心設計（HCD）などを学び、 NCDCにUX/UI デザイナーとして入社。 UXデザイナー伊藤玄哉

Slide 3

Slide 3 text

NCDCのご紹介

Slide 4

Slide 4 text

Business 事業領域の推進 Design ユーザ視点での設計 Technology 技術による課題解決 Innovation • コンサルティング • 新規サービス企画 • PoC⽀援 • デザイン思考 • UX/UIデザイン • モバイル・Web先端技術 • IoT / AI / AR • クラウドインテグレーション 4 NCDCのサービス体系

Slide 5

Slide 5 text

本セミナーについて l 受講対象 l webサービスやソフトウェア、システム開発の企画や管理を行う方 l 意思決定やデザイナーに発注する前に、コンテンツを具体化したい方 l 概要 l UIデザインに関する以下の内容について解説します。 l UI、UIデザインとは？ l 使いやすいUIのための情報設計とWF l 既存プラットフォームのデザインパターン l その他UIデザイン品質を向上する手法 l 取り扱わない内容 l ビジュアルデザイン・グラフィックデザイン 5

Slide 6

Slide 6 text

UI、UIデザインとは？ノンデザイナーでもできる。直感的で使いやすいUIの設計方法

Slide 7

Slide 7 text

UIとは？ 7 UI（User Interface）とは？ User = 使用者・操作者 Inerface = 接面・界面 / 使用する人「と」何らかの仕組みとの接面 /

Slide 8

Slide 8 text

UIの種類 8 User 物理UI / CUI / GUI / System System System

Slide 9

Slide 9 text

UIの種類 9 User 物理UI / CUI / GUI / System System System 本日のテーマ

Slide 10

Slide 10 text

開発されたシステム UIデザインとは 12 UIデザインとは、定義された要求或いは要件を、ユーザーにとって分かり易い導線構造、画⾯設計に書き起こす⼯程 / GUI 要件要求 System • ユーザーの位置から nKm半径の飲食店を検索できる • 検索した飲食店の料理を注文できる • 注文を飲食店に通知できる • 作られた料理を届ける住所をドライバーに表示できる • 調理せず簡単に美味しい食事を摂りたい UIデザイン

Slide 11

Slide 11 text

WFとVD 13 UIデザインは、⽬的別にWF（ワイヤーフレーム）と VD（ビジュアルデザイン）の⼯程に分けられます WF • 目的 • UI全体の構成を早期に確認して、要件の網羅性や導線構造、レイアウトの実現性を検討するための設計手法 • 方法 • PowerPoint、Excel、 drawIOやその他デザインツールで描画 VD • 目的 • 実装するUIの最終的な見た目を決定する • サービス・コーポレートのブランディングを正しく表現する • 方法 • デザインツールで描画本日の解説範囲

Slide 12

Slide 12 text

開発されたシステム UIデザインとは 14 NCDCでは、以下のイメージでプロジェクトを実施しています。 / GUI 要件要求 System • ユーザーの位置からnKm半径の飲食店を検索できる • 検索した飲食店の料理を注文できる • 注文を飲食店に通知できる • 作られた料理を届ける住所をドライバーに表示できる • 調理せず簡単に美味しい食事を摂りたい UIデザイン

Slide 13

Slide 13 text

使いやすいUIのための情報設計とWF ノンデザイナーでもできる。直感的で使いやすいUIの設計方法

Slide 14

Slide 14 text

正しいUIとは 16 使いやすいUIとはどんなUIだと思いますか？ / ？

Slide 15

Slide 15 text

正しいUIとは 17 使いやすいUIとは使用する人がイメージする通りのUIです / /

Slide 16

Slide 16 text

正しいUIとは 18 使⽤する⼈がイメージする通りのUIをデザインするための⼿法はいくつかあります。今回はデザイナーでなくても簡単にできるオブジェクト指向UIのデザイン⼿法をご紹介します / /

Slide 17

Slide 17 text

オブジェクト指向UIデザインとは 19 オブジェクト指向UIデザインは、要件における名詞的概念をオブジェクトとして抽出して、それを画⾯としてデザインする⼿法です。料理:deal • 料理名:Name • 価格:Price • 説明:Detail • お店:Store 要件 • ユーザーの位置からnKm半径の飲食店を検索できる • 検索した飲食店の料理を注文できる • 注文を飲食店に通知できる • 作られた料理を届ける住所をドライバーに表示できる Object ラーメン＄9.99 魚介ダシの効いた一品です！

Slide 18

Slide 18 text

オブジェクト指向ではないUI 20 オブジェクト指向UIと対照的なUIとしてタスク指向UIがあります。タスク指向の代表例としては⾃動販売機が挙げられます。ユーザーはお金を入れるユーザーは飲み物を選ぶユーザーは飲み物を受け取る「飲み物を購入する」という意思決定タスクが先行している本来であれば、買い物体験としては先に好きな数・種類の飲み物を選べることが好ましい

Slide 19

Slide 19 text

オブジェクト指向が優れる理由 21 オブジェクト指向UIが使⽤する⼈のイメージ通りのUIになる理由として、現実世界におけるヒト・モノ・コト（⾏為）の関係をそのまま再現している点が挙げられます。取る置く食べる取る置く食べる

Slide 20

Slide 20 text

オブジェクト指向UIの作り方 22 要件の概念・⾔葉から、名詞（主語・⽬的語）と動詞を抽出します。動詞は、関係する主語・⽬的語との関連をわかるようにします。要件 • ユーザーの位置からnKm半径の飲食店を検索できる • 検索した飲食店の料理を注文できる • 注文を飲食店に通知できる • 作られた料理を届ける住所をドライバーに表示できるユーザー位置飲食店料理注文ドライバー検索できる注文できる通知できる表示できる住所

Slide 21

Slide 21 text

オブジェクト指向UIの作り方 23 抽出した⾔葉を、現実世界において⾃然な考え⽅になるような属性にグルーピングします。これがオブジェクトとなり、グループを代表する概念が画⾯の単位となります。ユーザー位置飲食店料理注文ドライバー検索できる注文できる通知できる表示できる住所

Slide 22

Slide 22 text

オブジェクト指向UIの作り方 24 より現実的な要件で再現すると以下のようになります。ユーザー位置飲食店料理注文ドライバー検索できる注文できる通知できる表示できる住所氏名注文履歴登録できる決済情報店名営業時間価格住所料理名注文番号料理飲食店合計金額注文日時到着予定時間氏名位置

Slide 23

Slide 23 text

オブジェクト指向UIの作り方 25 画⾯単位のオブジェクトの流れを作り、画⾯遷移図を作ります。ユーザー飲食店料理注文ドライバー注文

Slide 24

Slide 24 text

オブジェクト指向UIの作り方 26 画⾯遷移を満たす導線のメニュー（ナビゲーション）を置きます。飲食店飲食店ユーザードライバー

Slide 25

Slide 25 text

オブジェクト指向UIの作り方 27 オブジェクトの内容を⼀覧→詳細の流れで配置します。基本的にはこれだけの作業で使いやすいUIをデザインすることができます。飲食店飲食店ユーザードライバージャンル ▼ 🔎 フリーワード飲食店料理検索できる注文できる店名営業時間価格住所料理名 ABCハンバーガー AM10:00~PM17:00 東京都丸の内… DEFタコス AM10:00~PM17:00 東京都丸の内… ← ABCハンバーガーハンバーガーセット ¥ 1,000 AM10:00~PM17:00 東京都丸の内1-1-1 チーズバーガーセット ¥ 1,200 ダブルチーズバーガーセット ¥ 1,200 カートを見る

Slide 26

Slide 26 text

実際の業務としてのUIデザインについて l 直感的で使いやすいUIのWFは、前ページまでの内容で設計することができます。しかし、実際のサービスをデザインする際には下記のような事柄についても配慮してデザインしなければなりません。 l ビジネスとしての目的 l 開発技術の制約 l ユーザーについての様々な文脈 l 身体的特性（年齢、視力、聴力 etc…） l 環境的特性 l 文化的特性 l 対象業務・体験について l フロー/ジャーニー l 権限 28

Slide 27

Slide 27 text

既存プラットフォームのデザインパターンノンデザイナーでもできる。直感的で使いやすいUIの設計方法

Slide 28

Slide 28 text

UIとデザインパターン 30 UIのデザイン・開発では既存のプラットフォームが⽤意するコンポーネントパーツを利⽤するのがトレンドです。 GoogleのMUI（MaterialUI） AppleのHIG（HumanInterfaceGuideline）

Slide 29

Slide 29 text

基本となるUIのパターン 31 UIの最も基本となるパターンは⼀覧→詳細です

Slide 30

Slide 30 text

基本となるUIのパターン 32 ⼀覧のパターンは以下のようなパーツがありますリストカードテーブル単一項目複数行内容訴求複数項目複数行

Slide 31

Slide 31 text

基本となるUIのパターン 33 ⼀覧→詳細は基本的に階層構造として成⽴します。前の画⾯の詳細＝現在の画⾯が次の画⾯の⼀覧、次の画⾯の詳細は次の次の画⾯の⼀覧…

Slide 32

Slide 32 text

基本となるUIのパターン 34 ⼀覧→詳細はユーザーのイメージ通りのUIをデザインする上で強⼒なデザインパターンですが、情報を分割/階層化することでユーザーが現在地と導線を認知できなくなることがあります。それを補うのがナビゲーションですスマホ向けデスクトップ向け

Slide 33

Slide 33 text

基本となるUIのパターン 35 オブジェクト指向UI、⼀覧→詳細、ナビゲーションをマスターしてサービスのWFを作成してみてください。意思決定者・デザイナーとのコミュニケーションコストが格段に削減できます最初に見せたWFは Instagramでした

Slide 34

Slide 34 text

その他UIデザイン品質を向上する手法ノンデザイナーでもできる。直感的で使いやすいUIの設計方法

Slide 35

Slide 35 text

ユーザーテスト（1/2） 37 l サービス/システムのプロトタイプをユーザーに操作体験してもらう様子を観察して得られた様子や、発話の内容などの質的情報を分析して設計の問題点を見つけ出すリサーチ手法です。 l 大きなメリットとしては以下が挙げられます。 l サービス/システムの操作性に問題がある場合リリース前に発見できる。 l サービス/システムがユーザーのニーズを満たしているかどうかについてフィードバックが得られる。 l デメリットとしては、単純に人的・時間的コストがかかる点と、計画実施にあたり、適切なスキルを持った人間が追加で必要になる点があります。ユーザーテストのイメージ

Slide 36

Slide 36 text

ユーザーテスト（2/2） 38 l ユーザーテストの代表的な成果物としては以下があります。 l プロブレムマトリクス：被験者ごとに操作タスクの成否を一覧化したもの。問題箇所の特定に用いる。 l 発話・事象一覧：被験者ごとに各操作タスクで得られた発話や動作などの質的情報を列挙したもの。問題内容の分析に用いる。 l フィードバック一覧：サービス/システムについての被験者からのフィードバックをまとめたもの。SUS法を用いて定量化してもよい。 l ユーザーテストを5人に行うことで、対象となる設計についての問題点を8割発見できるという研究結果があります。プロブレムマトリクスユーザーテストを行う人数と発見される問題数の関数曲線

Slide 37

Slide 37 text

l ユーザーテストを実施することができない場合、UX/UIの専門家による要件・設計の評価を行うヒューリスティック評価で、リリース前の評価を代替することができます。 l UXデザインの専門家が、優れたUXを実現するための経験則（ヒューリスティック）に則って設計について質的分析を行い、改善するためのアイデアを導出する手法です。その他リサーチプロセス 39 制御と⾃由現実世界の⼀致状態の可視性柔軟性と使⽤効率代表的なヒューリスティック（経験則）

Slide 38

Slide 38 text

まとめノンデザイナーでもできる。直感的で使いやすいUIの設計方法

Slide 39

Slide 39 text

まとめ l UIは定義された要求・要件に基づいてデザインします l 使いやすいUIとは、「使用する人のイメージ通りのUI」であり、それをデザインする基本的な方法はオブジェクト指向です l オブジェクト指向UIデザインは、定義した要求・要件の名詞的概念を起点・中心とした以下の情報設計により行います l 名詞・動詞の抽出 l 名詞・動詞のグルーピング・階層化（オブジェクト化） l 画面遷移図 l オブジェクトのレイアウト l UIの基本パターンは「一覧→詳細」と「ナビゲーション」 41