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
第14回_製造業のシステムのUX_UIデザイン改善事例を公開_Webinar2022082...
Search
Fixel Inc.
August 25, 2022
Design
1
780
第14回_製造業のシステムのUX_UIデザイン改善事例を公開_Webinar20220825.pdf
Fixel Inc.
August 25, 2022
Tweet
Share
More Decks by Fixel Inc.
See All by Fixel Inc.
超簡単!デザインシステム導入の手引き
fixel_admin
1
1.3k
4つの事例から分かる ビジネスを成功させたUXデザイン
fixel_admin
1
1.3k
第13回_フロントエンド開発の課題をデザインシステムで解決しよう!
fixel_admin
2
540
第10回_業務システムのUX/UIデザイン改善によくある間違いとその解決策
fixel_admin
6
2.6k
デザインとフロントエンドの最先端! 最新ツールを駆使したデザインから実装、そしてプロトタイプまでのシームレスな流れ【第9回】
fixel_admin
2
970
SIer / 情シス向け「 IT とデザインは仲良し ! 」シリーズ 第 8 回
fixel_admin
0
940
SIer / 情シス向け「 IT とデザインは仲良し ! 」シリーズ 第 7 回
fixel_admin
1
940
SIer / 情シス向け「 IT とデザインは仲良し ! 」シリーズ 第 6 回
fixel_admin
1
1.1k
古くて使いにくい業務システムを 使いやすく新しいデザインに刷新する! セミナー資料
fixel_admin
0
1.9k
Other Decks in Design
See All in Design
Design System for training program
mct
0
280
Slip N Slime - Character Design Ideation
thebogheart
0
300
管理画面の全体UXは利用時品質モデルで考える
readymadegogo
1
1.8k
Managing Design Systems (Smashing NY 2024)
nathanacurtis
2
280
Первая беседа о Карте реализации историй
ashapiro
0
270
ito aya|Portfolio2409
itoaya116
0
250
Памятка-раздатка по Карте процесса-опыта, А4
ashapiro
1
370
Tataki Ryu
olgastoryboard
0
140
Managing Design Systems (Antwerp 2024)
nathanacurtis
1
200
Карта процесса-опыта. Презентация метода
ashapiro
0
310
202409_会社概要資料_Englishver.pdf
zakkerooni
0
200
エムスリー株式会社 デザイングループ紹介資料 / m3design-team-profile
m3designer
0
3.9k
Featured
See All Featured
10 Git Anti Patterns You Should be Aware of
lemiorhan
654
59k
Building a Modern Day E-commerce SEO Strategy
aleyda
38
6.9k
A better future with KSS
kneath
238
17k
Rebuilding a faster, lazier Slack
samanthasiow
79
8.6k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
167
49k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
27
790
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.2k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
131
33k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
3
370
Gamification - CAS2011
davidbonilla
80
5k
Keith and Marios Guide to Fast Websites
keithpitt
408
22k
KATA
mclloyd
29
13k
Transcript
SIer/情シス向け「ITとデザインは仲良し!」シリーズ 第14回 2022/8/25 製造業のシステムの UX/UIデザイン改善事例
2 工学系の大学を卒業後、デザインやアートを学ぶ。 ブランディング会社でロゴやブランドのデザイン、国立大学でのデザイン研究・ 教育などに携わった後、現在のデジタル系のデザイン分野へ。 情報のデザインを中心に、UXUIデザインやインタラクションデザインが専門。 Fixelでは数多くの企業システムの企画・デザイン・開発に携わっている。 自己紹介 清水 良介 Ryosuke
Shimizu
3 Case 1 計測装置 Case 2 半導体製造装置 Case 3 半導体ウェハ搬送装置
Case 4 自動はんだ付け装置 本日ご紹介する事例
「AI×UX/UI」を駆使した 新ソフトウェア開発 Case 1
5 電子機器に対する電磁波の影響を計測 をする装置の分析アプリケーション これまで経験則で分析し対応していた ものを、AIを利用し業務効率化できる 新製品として売り出したい 新しいコンセプトと機能を、分かりや すく操作しやすいデザインにしたい プロジェクトの概要 計測装置
「AI×UX/UI」を駆使した新ソフトウェア開発 画像はイメージです
6 ◇ UXデザインの必要性は理解しているが、詳しいデザイナーが社内に不在 ◇ 専門的な業務製品なので、そこを理解して進められるデザイン会社がいるか わからない ◇ すでに計測装置を制御する「計測アプリ」はあるので、 そのアプリとの関連性・一貫性は考慮したい ◇
プラットフォームはWindowsアプリケーション 課題や考慮すべきポイント
7 UX分析は簡易的に行い、ワイヤーフレーム検討に多くの時間をさいた。 全部の機能は(工数的に)詳細まで検討できなかったが、画面遷移など全体構成は整理した。 ビジュアルデザインは主要画面に絞って仕上げた。 フロントエンド実装も主要画面のみ。WPFで行い、バックエンドとの繋ぎこみはお客様が行った。 プロジェクトの進め方
期間:約3ヶ月 ※最初のみ対面で会議を行い、その後はオンラインで進行
8 ※業務に関連する主要なペルソナは3人。その3人を中心にユーザー視点でTo-Beのシナリオを描いていった。 検討プロセスの詳細 UXデザインの手法を用い、既存業務や新しいアプリケーションを導入した時の流れを分析
9 検討プロセスの詳細 UXデザインの手法を用い、既存業務や新しいアプリケーションを導入した時の流れを分析 ※3人の業務がどう繋がり、どこで既存製品と新製品の接点があるかを整理していった
10 新しいアプリケーションを導入 したときに必要となる、概念や 情報を整理し構造化 既存製品で取得できる情報と このアプリケーションで管理で きる情報の関係を把握
適切なUI操作・表示ができるよ う画面検討の前に、実装仕様面 についてもお客様のエンジニア とすり合わせを行った 検討プロセスの詳細 ユーザーが意識したい情報と、実装上必要な情報構造の関係を整理
11 検討プロセスの詳細 新アプリケーションの画面例
12 計測機器や既存の関連アプリのデータとどう連動させるか。 全体の業務フローに自然に馴染み使えるかを考慮した。 「開発リーダー」「開発メンバー」「品質保証」の 各ペルソナがどう関連して全体の業務が完了するかを整理。 その上で、ペルソナのインサイトにあった機能やUIを最適化 した。 UX分析を行いTo-Beのジャーニーマップを作成したことで、 当初考えてないようなユーザー視点での業務を支援する機能 が具体的に見えた。
※計測したデータをまとめる「レポート機能」が必要とわかった プロジェクト成果とデザインのポイント
13 ウェブサイトのお客様インタビューもご覧ください
半導体生産装置の 制御パネルのUX/UI改善 Case 2
15 半導体生産装置の制御パネルを、 使いやすく分かりやすいUIに改善したい 今まではエンジニアが機能主体でUIを 作っていたが、デザインの専門家に依頼 してUXの向上と、開発効率や展開しやす さなど運用面も考慮した作りに変えたい プロジェクトの概要 半導体生産装置 制御パネルのUX/UI改善
画像はイメージです
16 ◇ 複雑で機能も多いので、主要な部分から少しずつ変えていきたい ◇ タッチパネル操作、クリーンルームでの環境光など特殊条件を考慮 ◇ 装置特有の国際規格のガイドラインを踏まえてUIデザインが必要 ◇ ディスプレイは4:3モニタから、16:9のワイドモニターへ大きくなる ◇
アラーム時の対応など、 装置の状態把握や装置の停止を確実にできるようにしたい ◇ 海外でも使用するので、UI表示の多言語対応は必要 ◇ プラットフォームは、Windowsアプリケーション 課題や考慮すべきポイント
17 現行の機能や仕様を把握しながら、簡易UX分析を同時行い、適切なUIを検討していった。 一度に全機能の見直しをせず、優先度をつけ重要な部分から改善を行なっている。 画面展開していった時に、UIの見た目と操作性の一貫性を保てるよう、 UIコンポーネントやUIパターンを整理しながら設計し直した。 オンライン会議を定期的に行い、機能の把握、UX分析をして、
Figmaでワイヤーフレームやビジュアルデザインを少しずつ詰めていった。 プロジェクトの進め方 期間:約3〜4ヶ月 × 3フェーズ ※最初のみ訪問し実物確認を行い、その後はオンラインで進めた
18 ※画面例は実際のものをもとに加工してあります 検討プロセスの詳細 専門的な内容を理解した上で、一般的なユーザビリティの視点で使いやすさを向上 Before After
19 検討プロセスの詳細 デザインガイドラインを整備し、今後の画面展開時に一貫性を保てるようにした
20 利用者視点で業務分析をすることで、機能の関係性や優先 度が理解しやすい形に整理できた 画面構成やナビゲーションなど基本構造が整理できたため、 主要機能の画面から順番に改善していく進め方が可能に なった。 UIデザインと並行して、デザインガイドラインを整備して いるため、各フェーズが進むごとに基本形が整理でき、一 貫性を保ったまま効率的にUI改善が可能になった。 プロジェクト成果とデザインのポイント
半導体ウェハ搬送装置の UX/UI改善 Case 3
22 社内にデザイナーがおらずエンジニアがUIを 考えてきた。競合製品と差別化を図るために UIの見た目だけでなく、UXも向上させたい。 複雑化している実装を、フロントとバックエ ンドを分けていきたい。 将来的にはフロントはWeb技術でつくり、マ ルチプラットフォーム化にして遠隔制御など もしやすい構造にしたい。 装置に備え付けのタッチパネルモニタ。
グローブをはめた手で操作するためドラッグ ができない。 プロジェクトの概要 半導体ウェハ搬送装置のUX/UI改善 画像はイメージです
23 一度に全画面の改善は行わず、重要な部分から UI改善を行なっている。 UX分析は簡易的に行い、ワイヤーフレーム検討 に多くの時間をさいた。 お客様はWPFが初めてだったので、簡単な実装 レクチャーを行うなど、フロントエンド実装を
お客様で展開できるよう支援させていただいた。 プロジェクトの詳細 期間:約6ヶ月 × 2フェーズ ※オンライン会議のみで進行 Before After ※画面例は実際のものをもとに加工してあります
24 オペレータや設定するエンジニアにとって「装置の状態 (=ステータスや何が起こっているか)」が瞬時にわかる ことが重要だった。 複数の情報があっても、視覚的に判別しやすいように情報 構造を整理し、配色や表示形式を最適化しデザインした。 装置のタッチパネルの制約や、クリーンルームやグローブ をして使うなど環境・状況にあわせて、ボタンサイズや操 作方法などUIを最適化した。 プロジェクト成果とデザインのポイント
自動はんだ付け装置の 制御パネルUX/UI改善 Case 4
26 装置に組み込まれた制御アプリを 分かりやすくし操作性を高めたい 4:3モニタから24インチワイドモニターになる ので、一覧性を高めて業務効率も向上したい 海外の競合製品より魅力的なUIにしたい 製品のバリエーション(製造ラインの数やヒー ターの数が違うもの)に対応できるよう、可変 UIにしたい プロジェクトの概要
自動はんだ付け装置の制御パネルUX/UI改善 画像はイメージです
27 UX分析は簡易的に行い、業務と装置のオブジェクト分析し、 ユーザーが操作したい情報とその構造を明確にした ワイヤーフレーム検討に多く時間をさき、適切な情報の見せ方、 操作の流れを見つけてから、ビジュアルデザインを行った 検討の各段階で、海外の現場に詳しい担当者や責任者に確認し、 フィードバックをいただきながら詰めていった
プロジェクトの詳細 期間:約4.5ヶ月 ※オンライン会議のみで進行 UX分析のあと情報設計を行う ※各画像はイメージです ワイヤーフレーム検討 ビジュアルデザイン検討
28 本生産中はアラームがない限りはあまりモニタを見ない。 少し遠くから見ても様子がわかるようにした。 装置の状態(装置内のヒーターがどう温度変化しているの か、設定値と現在値はどうなっているか等)を、視覚的に 把握しやすい形でビジュアライズした。 ホーム画面を、オペレータが見る「Overview」モードと、 エンジニアが詳細を見る「Detail」モードに分け、情報過 多や情報不足にならないようにした。 プロジェクト成果とデザインのポイント
29 Case 1 計測装置 Case 2 半導体製造装置 Case 3 半導体ウェハ搬送装置
Case 4 自動はんだ付け装置 製造業システムのUX/UI改善事例
30 基本はUXデザインの手法で進めていき、ユーザー視点でアプリケーション設計を行う 業務フローや製品との接点もその中で整理できるので、作ったあとで使いづらいとか、 根本的にこういう機能が必要だったということが起こりにくい。 業務や製品の専門的な知識・仕様は、 現場視察やマニュアル、お客様へのヒアリングで把握して進めている デザインプロセスは、毎週の定例でFigmaで作った中間成果物を見ながら進めるので、 ブラックボックス化しない(仕様の齟齬、機能や考慮漏れが発生しにくい) 全てをデザインしなくても、部分的に徐々につくる進め方も可能。 デザインガイドラインを整備することで、今後の拡張時にエンジニアだけでも
ある程度デザイン品質を保って、機能拡張できる基盤ができあがる。 本日のまとめ
MAKE DESIGN EASY
MAKE DESIGN EASY Q&A SIer/情シスのデザインパートナー
MAKE DESIGN EASY SIer/情シスのデザインパートナー ありがとうございました! アンケート記入のお願い