O slideshow foi denunciado.
Seu SlideShare está sendo baixado. ×

UXを視野に入れたUIリニューアルのプロセス_ペーパープロトタイピングについてのLT

Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio

Confira estes a seguir

1 de 28 Anúncio
Anúncio

Mais Conteúdo rRelacionado

Semelhante a UXを視野に入れたUIリニューアルのプロセス_ペーパープロトタイピングについてのLT (20)

Mais recentes (20)

Anúncio

UXを視野に入れたUIリニューアルのプロセス_ペーパープロトタイピングについてのLT

  1. 1. UXを視野に⼊れた UIリニューアルのプロセス 株式会社グラッドキューブ 宮島 敬右
  2. 2. 宮島 敬右 Keisuke Miyajima UIデザイナー HCD-Net認定 ⼈間中⼼設計スペシャリスト ⾃⼰紹介
  3. 3. 「SiTest(サイテスト)」は、ウェブサイトの解析・改善によく⽤いられる 「ヒートマップ」や「A/Bテスト」などのツールを『オールインワン』で提供する、 SaaSビジネスモデルのウェブアプリケーションです。
  4. 4. デザインの制作環境とプロセス ペーパー プロトタイプ SketchAdobe XD Zeplin Storybook Bitbacket (事前に現状のUIをエキス パートレビュー済み) デザイナー(私)、クライア ントのウェブサイトの改善を 提 案 す る 「 コ ン サ ル タ ン ト」、営業とユーザーサポー トを担当する「セールス」、 開発と技術的サポートを担当 する「エンジニア」のリー ダーで、要件と技術的な課題 の確認、ユーザーからの要 望・クレーム、後述のリサー チをインプットしながら、リ アルタイムでペーパープロト タイプを作成。 ペーパープロトタイ プからAdobe XDで 動作するワイヤーフ レームレベルのプロ トタイプを作成して 関 係 者 に 展 開 、 レ ビューを⾏い合意を 形成。 平⾏してSketchでUI をコンポーネント単 位 で 作 成 し て 、 Symbolのライブラ リを構築。 ラ イ ブ ラ リ か ら Symbolを呼び出し てプロトタイプの画 ⾯を精緻化。 Sketchで作成した画 ⾯とライブラリから 作成したデザインガ イドをZeplinに書き 出して、フロントエ ンドエンジニアに共 有。 画⾯イメージとデザ インガイドからフロ ントエンドエンジニ ア が V u e . j s の Storybookを構築。 画⾯の実装に⼊る前 にコンポーネント単 位で実装後の表⽰と 動作をチェック。 UIが実装された画⾯ をステージングで確 認して、発⾒した課 題をBitBacket上で 管理。
  5. 5. タイトルテキスト
  6. 6. 「ペーパープロトタイプ」に 重点を置いたら UIリニューアルのプロセスが わりとうまくいった話
  7. 7. デザイナー「1⼈」の状況でも 上流からデザインドリブンで進めたい。 しかし、オープンな場で情報共有と 議論を進めることで「UIデザイン」を 関係者全員の「⾃分ゴト」にしたい。 【なぜ】
  8. 8. デザイナー(私) コンサルタント セールス エンジニア 【誰と】
  9. 9. デザイナー(私) コンサルタント セールス エンジニア 【誰と】 SiTestを業務で⽇常的に 使っているヘビーユー ザーでもある
  10. 10. 私以外の参加者を 「ユーザー」としても扱い、 彼らを「リサーチ」しながら その場で「リアルタイム」に ペーパープロトタイプを作った。 【どうやって】
  11. 11. ! ✓ そのタスクで「本当に達 成したいこと」はなんで すか? ✓ そのデータから「本当に 知りたいこと」はなんで すか? ✓ 達成したり知りたいこと がわかると、「どんな気 持ち」になりますか? ユーザーの求めるゴール を深掘りして、ユーザー の「本質的要求」と最終 的な「ありたい姿・気持 ち」を理解する
  12. 12. ! ✓ いつもやっているタス クの⼿順を実際に⾒せ てください。 ✓ くりかえしやっている タスクはありますか? ✓ 頻 繁 に 往 復 す る 動 線 や、探したりする画⾯ はありますか? ⽇常的な利⽤状況を把握 して「作業の⾃動化・省 略化」や「動線のショー トカット」を発⾒する
  13. 13. ! ✓ どの情報を⾒て「意思 決定∕正誤の判断」を していますか? ✓ その情報はデータベー スにありますか? ✓ そのデータを表⽰する のにどのくらい時間が かかりますか? 実際の利⽤状況とバック エンドの仕様から、画⾯ の表⽰内容や表⽰速度に 対する「効果・効率・満 ⾜度」を確認する
  14. 14. !✓ 普段、その項⽬をなん て呼んでいますか? ユーザーの「話す⾔葉」 をボタンラベルやメッ セージの⽂⾔に適⽤する
  15. 15. AfterBefore
  16. 16. AfterBefore 表⽰を⾼速化 意思決定に重要な情 報を表⽰ 主要機能へのショー トカット
  17. 17. AfterBefore
  18. 18. AfterBefore トーン&マナーの整 理整頓 表⽰の優先順位を⾒ 直し 重 要 な 画 ⾯ へ の ショートカット
  19. 19. AfterBefore
  20. 20. AfterBefore 条件を「⾃由」に組み 合わせたヒートマップ を、並べて分析できると いう「新しい価値」を 提供
  21. 21. AfterBefore
  22. 22. AfterBefore エディタらしいレイ アウトと操作性 要素のステータスを 視覚的に明⽰ 段階的なレスポンシ ブデザインの編集に 対応
  23. 23. AfterBefore
  24. 24. AfterBefore テストの勝敗・成果 がひと⽬で判定でき る プリントアウトして も成⽴するレイアウ ト
  25. 25. AfterBefore
  26. 26. AfterBefore 横に並べて結果をひ と⽬で⽐較 縦 ⽅ 向 の み の ス ク ロールを死守
  27. 27. !まとめ 「 動 く プ ロ ト タ イ プ 」 を 作 る 前 に 「ペーパープロトタイプ」で検討した ら、「その場で⺠主的に合意の形成」 ができたので、その後のデザインプロ セスがスムーズに進んだ。 「ペーパープロトタイプ」のプロセス は「潜在的な要求や課題の発⾒」、 「 早 期 の 技 術 的 な 実 現 可 能 性 の 検 証」、「想定外の⼿戻りの削減」、 「クリティカルな仕様の抜け漏れ防 ⽌」に有効だった。
  28. 28. ありがとうございました。

×