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
UXを視野に入れたUIリニューアルのプロセス
Search
Keisuke Miyajima
July 18, 2019
Design
1
730
UXを視野に入れたUIリニューアルのプロセス
2019/07/18(木)に京都で開催された「業務システムデザイン勉強会 #2」で発表した資料です。
Keisuke Miyajima
July 18, 2019
Tweet
Share
More Decks by Keisuke Miyajima
See All by Keisuke Miyajima
UIデザイナーが500ページ超のヘルプを書いて得られたもの
myzksk
0
280
Other Decks in Design
See All in Design
TUNAG BOOK 2024
stmn
0
320
若手デザイナーチームが手がける CADC2024クリエイティブディレクションの全貌 / opening-design
cyberagentdevelopers
PRO
1
620
管理画面の全体UXは利用時品質モデルで考える
readymadegogo
2
2k
拡大するマルチプロダクトSaaSの顧客理解にデザイン組織はどう取り組んでいるか / RAKUSTechCon2024_Design
rakus_dev
0
2.1k
世界中のチームワークをどうデザインしているのか
ka3zu1ma10
0
210
なぜデフォルトが青色!? Tint Colorの理由に迫る
akidon0000
0
460
Design Your Own App Using Figma by Medha Muppala
gdgmontreal
0
160
Arborea Art Book
thebogheart
1
290
Design System for training program
mct
0
280
Fleet Gas Station
joshtang
0
140
アフォーダンスとシグニファイア
ryokanakai
1
320
AIと創る広告の未来 ― タップルと極AIお台場スタジオの最新事例― / ai-tapple-odaiba
cyberagentdevelopers
PRO
1
350
Featured
See All Featured
Statistics for Hackers
jakevdp
796
220k
Site-Speed That Sticks
csswizardry
0
24
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
27
840
Designing on Purpose - Digital PM Summit 2013
jponch
115
7k
Building a Scalable Design System with Sketch
lauravandoore
459
33k
Imperfection Machines: The Place of Print at Facebook
scottboms
265
13k
Designing Experiences People Love
moore
138
23k
It's Worth the Effort
3n
183
27k
How GitHub (no longer) Works
holman
310
140k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
93
16k
The World Runs on Bad Software
bkeepers
PRO
65
11k
Large-scale JavaScript Application Architecture
addyosmani
510
110k
Transcript
UXを視野に⼊れた UIリニューアルのプロセス 【業務システムデザイン勉強会 #2】 2019/07/18 株式会社グラッドキューブ 宮島 敬右
⾃⼰紹介 宮島 敬右 Keisuke Miyajima HCD-Net認定 ⼈間中⼼設計スペシャリスト ⼀般社団法⼈エクスペリエンスデザインユニット 監事 過去にパソコンのアプリケーション、スマートフォンのアプリ、家電の組み込
みまで幅広いUIデザインを⼿がける。 現在はインハウスのUIデザイナーとしてベンチャー企業に勤務し、⾃社製品の Webアプリケーションの全⾯的なUIデザインのリニューアルを担当。 2014年、2015年グッドデザイン賞を受賞。
「SiTest(サイテスト)」は、ウェブサイトの解析・改善によく⽤いられる 「ヒートマップ」や「A/Bテスト」などのツールを『オールインワン』で提供する、 SaaSビジネスモデルのウェブアプリケーションです。
リニューアルの背景 UIの⾒た⽬の陳腐化、ユーザーからのクレームの改善や要望の反 映、市場での競争⼒の低下 リニューアルの⽬的 ユーザビリティの向上、ブランドイメージの向上、市場と既存顧客 へのアピール、競合との差別化、⼤⼿クライアントへの提案の強化 チーム構成 デザイナー:1名(私) エンジニア:6名(内4名は派遣でフロントエンド専任は2名) セールス兼コンサルタント:3名(要件の検討とレビューのみ参加)
スケジュール 当初の予定は6ヶ⽉、実際には10ヶ⽉ ⾃分の役割 リニューアル要件の検討、画⾯遷移・画⾯構成の検討、プロトタイ プの作成、すべてのデザインリソースの作成、すべてのボタンラベ ル・メッセージの作成
やること やらないこと 制約 •UIを「全⾯的」にリニューアルする。 •現状のビジネスモデル(ツールの⽉額利⽤+オプションで コンサルティング・クリエイティブの制作)は変えない。 •移⾏はリニューアル前と後のUIを「切り替えられる期間」 を設けて、段階的に⾏う。 •スケジュールを優先するため機能追加は優先度を下げる。 •リニューアル後にユーザーのデータに不整合を起こさな
い。 •スケジュール的に新しい価値の探索はしない。 •スケジュール的にバックエンドの仕様は⼤幅に変更しな い。 •派遣のエンジニアに来てもらうので、実装後の⼿戻りには 余計なコスト(社員より⾼い残業代)がかかる。
UXの5段階モデル:社内向けのコミット •⾒た⽬の古臭さを解消する •UIに⼀貫性を持たせて学習コストを削減する 表層 ⾻格 構造 要件 戦略 具象 抽象
ビジュアルデザイン レイアウト・ナビゲーション モデリング 要件定義 ⽬的・⽬標設定 •現状のUIに慣れているユーザーのメンタルモデルか ら逸脱しない画⾯設計・画⾯遷移にする •過去の機能追加時の不可解な画⾯設計・画⾯遷移の 不整合を改善する •アプリ内の検索機能の強化 •UIをフルリニューアルする •⼤機能は維持する •競合が提供している機能に並ぶ •市場での競争⼒の向上させる Jesse James Garrett ⽒「Elements of User Experience」をもとに再構成
UXの5段階モデル:⾃分の⽬標 •Atomic Designでデザインシステムを構築する •よく併⽤される「Google Analytics」との親和 具象 抽象 •フィードフォワード・フィードバックを徹底する •画⾯の動線のショートカットを設ける •OOUI(名詞→動詞、コレクション→シングル)
•モードレスなUIを⽬指す •あたりまえ品質までユーザビリティを改善する •価値の低い機能を廃⽌する •サポートコストを削減する •レポートを改善してコンサルティングの質を上げる ➡社内の顕在的・潜在的な課題を解決する Jesse James Garrett ⽒「Elements of User Experience」をもとに再構成 表層 ⾻格 構造 要件 戦略 ビジュアルデザイン レイアウト・ナビゲーション モデリング 要件定義 ⽬的・⽬標設定
⾃分の⽬標 +α • プロトタイプに重点を置いて、関係者の合意を得な がら進める。 • できる範囲でHCD(⼈間中⼼設計)やUXのプロセ スを取り⼊れる。 • 社内の
SiTest ユーザーをペルソナに設定してリ サーチする。 • 社内のサポートコストを削減して、継続的な改善や 新機能の開発業務の⽣産性を向上させる。 • 利⽤中のユーザーが「SiTestを使っている⾃分がイ ケてる」と思ってもらえる体験を提供する。 • UIのリニューアルだけでも、ユーザーに新しい価値 を何か提供する。 • 残業しない。
λΠτϧςΩετ
「ペーパープロトタイプ」に 重点を置いたら UIリニューアルのプロセスが うまくいった
デザイナー「1⼈」の状況でも 上流からデザインドリブンで進めたい。 しかし、オープンな場で情報共有と 議論を進めることで「UIデザイン」を 関係者全員の「⾃分ゴト」にしたい。 【なぜ】
デザイナー(私) コンサルタント セールス エンジニア 【誰と】
デザイナー(私) コンサルタント セールス エンジニア 【誰と】 SiTestを業務で⽇常的に 使っているヘビーユー ザーでもある
私以外の参加者を 「ユーザー」としても扱い、 彼らを「リサーチ」しながら その場で「リアルタイム」に ペーパープロトタイプを作った。 【どうやって】
! ✓ そのタスクで「本当に達 成したいこと」はなんで すか? ✓ そのデータから「本当に 知りたいこと」はなんで すか? ✓
達成したり知りたいこと がわかると、「どんな気 持ち」になりますか? ユーザーの求めるゴール を深掘りして、ユーザー の「本質的要求」と最終 的な「ありたい姿・気持 ち」を理解する
! ✓ いつもやっているタス クの⼿順を実際に⾒せ てください。 ✓ くりかえしやっている タスクはありますか? ✓ 頻
繁 に 往 復 す る 動 線 や、探したりする画⾯ はありますか? ⽇常的な利⽤状況を把握 して「作業の⾃動化・省 略化」や「動線のショー トカット」を発⾒する
! ✓ どの情報を⾒て「意思 決定∕正誤の判断」を していますか? ✓ その情報はデータベー スにありますか? ✓ そのデータを表⽰する
のにどのくらい時間が かかりますか? 実際の利⽤状況とバック エンドの仕様から、画⾯ の表⽰内容や表⽰速度に 対する「効果・効率・満 ⾜度」を確認する
! ✓ 普段、その項⽬をなん て呼んでいますか? ユーザーの「話す⾔葉」 をボタンラベルやメッ セージの⽂⾔に適⽤する
デザインの制作環境とプロセス ペーパー プロトタイプ Sketch Adobe XD Zeplin Storybook Bitbacket (事前に現状のUIをエキス
パートレビュー済み) ⾃分・セールス責任者(事実 上のPO)・Web解析コンサ ルタント(本製品を活⽤して コンサルティング、カスタ マーサポートも担当)・エン ジニア(開発と技術サポート を担当)の責任者で、隔⽇2 時間程度、要件と技術的な課 題の確認、ユーザーからの要 望・クレーム、前述のリサー チをインプットしながら、⾃ 分がリアルタイムでペーパー プロトタイプを作成。 ペーパープロトタイ プからAdobe XDで 動作するワイヤーフ レームレベルのプロ トタイプを作成して 関 係 者 に 展 開 、 レ ビューを⾏い合意を 形成。 平⾏してSketchでUI をコンポーネント単 位 で 作 成 し て 、 Symbolのライブラ リを構築。 ラ イ ブ ラ リ か ら Symbolを呼び出し てプロトタイプの画 ⾯を精緻化。 Sketchで作成した画 ⾯とライブラリから 作成したデザインガ イドをZeplinに書き 出して、フロントエ ンドエンジニアに共 有。 画⾯イメージとデザ インガイドからフロ ントエンドエンジニ ア が V u e . j s の Storybookを構築。 画⾯の実装に⼊る前 にコンポーネント単 位で実装後の表⽰と 動作をチェック。 UIが実装された画⾯ をステージングで確 認して、発⾒した課 題をBitBacket上で 管理。
After Before
After Before 表⽰を⾼速化 意思決定に重要な情 報を表⽰ 主要機能へのショー トカット
After Before
After Before トーン&マナーの整 理 データ表⽰の優先順 位を⾒直し 重 要 な 画
⾯ へ の ショートカット
After Before
After Before 条件を「⾃由」に組み 合わせたヒートマップ を、並べて分析できると いう「新しい価値」を 提供
After Before
After Before エディタらしい操作 性 ステータスを視覚的 に明⽰ 横幅サイズの変更を 可能にしてレスポン シブデザインに対応
After Before
After Before テストの勝敗・成果 がひと⽬で判定でき る プリントアウトして もレポートとして成 ⽴するレイアウト
After Before
After Before 横に並べて結果をひ と⽬で⽐較 縦 ⽅ 向 の み の
ス ク ロールを死守
まとめ • 社内のヘビーユーザーをリサーチ対象にし てユーザビリティやUXを検討した結果、 素早く確実に成果が上がった。 • プロトタイプに重点を置いたプロセスは、 合意の形成と⼿戻りの削減に有効だった。 • Sketchのライブラリ機能で構築したデザ
インシステムは、変更に強く効率的に作業 できた。 • 事前にいろんなツールを試⽤したことで、 組織やプロジェクトにフィットするソ リューションを選択できた。