Recommended
Recommended
More Related Content
Similar to UXを視野に入れたUIリニューアルのプロセス_ペーパープロトタイピングについてのLT
Similar to UXを視野に入れたUIリニューアルのプロセス_ペーパープロトタイピングについてのLT (20)
UXを視野に入れたUIリニューアルのプロセス_ペーパープロトタイピングについてのLT
- 2. 宮島 敬右 Keisuke Miyajima UIデザイナー HCD-Net認定 ⼈間中⼼設計スペシャリスト ⾃⼰紹介
- 4. デザインの制作環境とプロセス ペーパー プロトタイプ SketchAdobe XD Zeplin Storybook Bitbacket （事前に現状のUIをエキス パートレビュー済み） デザイナー（私）、クライア ントのウェブサイトの改善を 提 案 す る 「 コ ン サ ル タ ン ト」、営業とユーザーサポー トを担当する「セールス」、 開発と技術的サポートを担当 する「エンジニア」のリー ダーで、要件と技術的な課題 の確認、ユーザーからの要 望・クレーム、後述のリサー チをインプットしながら、リ アルタイムでペーパープロト タイプを作成。 ペーパープロトタイ プからAdobe XDで 動作するワイヤーフ レームレベルのプロ トタイプを作成して 関 係 者 に 展 開 、 レ ビューを⾏い合意を 形成。 平⾏してSketchでUI をコンポーネント単 位 で 作 成 し て 、 Symbolのライブラ リを構築。 ラ イ ブ ラ リ か ら Symbolを呼び出し てプロトタイプの画 ⾯を精緻化。 Sketchで作成した画 ⾯とライブラリから 作成したデザインガ イドをZeplinに書き 出して、フロントエ ンドエンジニアに共 有。 画⾯イメージとデザ インガイドからフロ ントエンドエンジニ ア が V u e . j s の Storybookを構築。 画⾯の実装に⼊る前 にコンポーネント単 位で実装後の表⽰と 動作をチェック。 UIが実装された画⾯ をステージングで確 認して、発⾒した課 題をBitBacket上で 管理。
- 5. タイトルテキスト
- 11. ! ✓ そのタスクで「本当に達 成したいこと」はなんで すか？ ✓ そのデータから「本当に 知りたいこと」はなんで すか？ ✓ 達成したり知りたいこと がわかると、「どんな気 持ち」になりますか？ ユーザーの求めるゴール を深掘りして、ユーザー の「本質的要求」と最終 的な「ありたい姿・気持 ち」を理解する
- 12. ! ✓ いつもやっているタス クの⼿順を実際に⾒せ てください。 ✓ くりかえしやっている タスクはありますか？ ✓ 頻 繁 に 往 復 す る 動 線 や、探したりする画⾯ はありますか？ ⽇常的な利⽤状況を把握 して「作業の⾃動化・省 略化」や「動線のショー トカット」を発⾒する
- 13. ! ✓ どの情報を⾒て「意思 決定∕正誤の判断」を していますか？ ✓ その情報はデータベー スにありますか？ ✓ そのデータを表⽰する のにどのくらい時間が かかりますか？ 実際の利⽤状況とバック エンドの仕様から、画⾯ の表⽰内容や表⽰速度に 対する「効果・効率・満 ⾜度」を確認する
- 15. AfterBefore
- 17. AfterBefore
- 18. AfterBefore トーン＆マナーの整 理整頓 表⽰の優先順位を⾒ 直し 重 要 な 画 ⾯ へ の ショートカット
- 19. AfterBefore
- 21. AfterBefore
- 23. AfterBefore
- 25. AfterBefore
- 26. AfterBefore 横に並べて結果をひ と⽬で⽐較 縦 ⽅ 向 の み の ス ク ロールを死守
- 27. !まとめ 「 動 く プ ロ ト タ イ プ 」 を 作 る 前 に 「ペーパープロトタイプ」で検討した ら、「その場で⺠主的に合意の形成」 ができたので、その後のデザインプロ セスがスムーズに進んだ。 「ペーパープロトタイプ」のプロセス は「潜在的な要求や課題の発⾒」、 「 早 期 の 技 術 的 な 実 現 可 能 性 の 検 証」、「想定外の⼿戻りの削減」、 「クリティカルな仕様の抜け漏れ防 ⽌」に有効だった。
- 28. ありがとうございました。