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
Yahoo Newsletter Clicker Template
xuechunwu
0
290
Памятка-раздатка по Карте процесса-опыта, А4
ashapiro
1
370
root COMPANY DECK / We are hiring!
root_recruit
1
14k
ABEMAの進化 – 複雑化したコンテンツ構造とUI改善への道 – / abema-ui-improve
cyberagentdevelopers
PRO
2
300
ZKK_001.pdf
nicholaspegu
0
830
Lightning Talk: Beautiful Slides for Beginners
inesmontani
PRO
1
130
共創するのはモノではなく価値 ── 日本の「はたらく」を変える挑戦 / Designship2024 MainStage
visional_engineering_and_design
1
250
Managing Design Systems (Smashing NY 2024)
nathanacurtis
2
280
デザインスプリントを活かすチームの在り方
mixi_design
PRO
1
760
Картирование процесса фасилитация стратсессий с Картой гипотез при помощи Карты процесса-опыта
ashapiro
0
390
志ある事業の種を社会に開花させるための挑戦/ Designship2024_Nishimura
root_recruit
0
160
SpectrumTokyoMeetup12_自動貯金アプリ『finbee』での取り組みについて
shihorishimazu
2
380
Featured
See All Featured
Being A Developer After 40
akosma
86
590k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
226
22k
A better future with KSS
kneath
238
17k
GitHub's CSS Performance
jonrohan
1030
460k
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.1k
Bash Introduction
62gerente
608
210k
A Tale of Four Properties
chriscoyier
156
23k
Keith and Marios Guide to Fast Websites
keithpitt
408
22k
Navigating Team Friction
lara
183
14k
Designing the Hi-DPI Web
ddemaree
280
34k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
364
22k
Gamification - CAS2011
davidbonilla
80
5k
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のライブラリ機能で構築したデザ
インシステムは、変更に強く効率的に作業 できた。 • 事前にいろんなツールを試⽤したことで、 組織やプロジェクトにフィットするソ リューションを選択できた。