Upcoming SlideShare
確実に良くするUI/UX設計
- 1. 確実に良くするUI/UX設計 THE GUILD / 深津貴之 / fladdict
- 2. コンセプトモデルの設計提案と 最終版の監修を担当
- 3. 日経新聞電子版の抱えていた問題点
- 4. 激怒されるの覚悟の厳しいプレゼン
- 5. 機能はすごい多い
- 6. 理屈の上では動作する
- 7. 記事は素晴らしい しかし、それ以外は全て競合以下
- 8. • ガイドラインを無視 • トレンド／競合へのリサーチ不足 • 企業論理優先 • ユーザー行動を無視 • ステークホルダーが多すぎる • 部署ごとにやりたい事が違う • 大きすぎて途中で設計変更ができない • 機能が多すぎて、ユーザーの意思決定を阻害する • YahooやGoogle Newsに速報性で劣る • リアルタイム性はTwitterに劣る 直面した課題
- 9. ユーザーの利便性を優先した コンセプトモデルの提案
- 10. 大量のユーザーがいるアプリ KPIを落とさず、 炎上させず 完全リニューアルを目指す
- 11. 激怒されるの覚悟でプレゼンしたら 通っちゃった
- 12. コンセプト・コアバリュー
- 13. ユーザーの利便性を優先した コンセプトモデルの提案
- 14. 日経電子版リニューアル、コアコンセプト • デザイナーはユーザ利益を代弁する • 過半数が必要とするものを入れる • 数字に影響出そうなところから手をつける • ユーザーが必要なものと、欲しがるものは違う • タップ数を限界まで減らす • 機能追加は「操作しない機能」から • 品質やサービスの低さを機能数でカバーしない • 悩んだら試す • それでも悩んだらOSのマナーに従う
- 15. 初期コンセプトのスケッチ
- 16. ログイン不要
- 17. 会員登録不要
- 18. 記事のシェア
- 19. 過去記事の閲覧
- 20. 3行サマリー
- 21. 株価やキーワードの解説
- 22. ユーザー利便性の立場から コアに影響がでるレベルまで提案
- 23. 改善 or リニューアル
- 24. リスクを先送りして破局するか 定期的に小さな破局を起こすかのトレードオフ
- 25. 改善 リニューアル 技 術 的 な 負 債 と リ ス ク
- 26. 分析
- 27. ユーザー調査 競合アプリ調査 ビデオ調査 すべてやる
- 28. 自社も他社も徹底的に丸裸にする
- 29. 設定 ログイン画面 お知らせ ・既読オンオフ チュートリアル ・メニュー説明 スタート・セットアップ トップ画面 メイン 記事画面 ・シェア・リロード 記事 日経電子版 画面遷移図 トップ ログイン 日付選択画面 ・日付と朝刊／夕刊、誌面選択が可能 ドロワー メニュー トップ ・設定したキーワード、連 載・コラムの最新記事一覧 連載・コラム フォローしている連載の一覧 Myニュース 朝刊・夕刊／電子版ニュース（Web刊 ／速報／市況）／Myニュース（トップ ／連載・コラム／キーワード／保存記事 ／おすすめ）／設定／お知らせ 電子版ニュース Web刊 速報 市況 ・画面上部に常に市況情報を 表示するオンオフが可能 キーワード 指定したキーワードの 記事一覧 キーワード設定 保存記事 保存した記事一覧 おすすめ フォローできる 連載・コラム一覧 設定画面 ・自動ログイン・ダウンロード ・プッシュ通知 ・文字サイズの設定
- 30. ログイン画面 ・問い合わせ・プライバシーポリシー スタート・セットアップ メイン Gunosy 画面遷移図 トップ画面 ・下にひっぱって更新 ・トップ画面のみ天気／占い表示 トップ チュートリアル 記事画面 ・シェアボタン・更新 記事 カテゴリ選択 ・3つ以上選ぶ メディア選択 ・雑誌やメディアを選べる メディアプレビュー アカウント連結 動作チュートリアル ・ポップアップが出現 記事アクション ・各記事右下のボタンタップで、 いいね／クリップ／シェア クリップリスト ・クリップした記事一覧 チャンネル購読 ・メディア／記事を購読できる カテゴリ並び替え 各カテゴリ ・注目記事のみ写真が大きく表示 カテゴリ トピック／マイニュース／エンタメ／スポーツ／コラム／社会／経済／政治／国際／テクノロジー／グルメ／まとめ／TV／クリップ／チャンネル／並び替え／設定 設定
- 31. チュートリアル画面 ・左右になぞって消す スタート・セットアップ メイン LINE NEWS 画面遷移図 トップ画面 ・下にひっぱって更新 トップ チュートリアル 外部Webサイト画面 ・シェア・リロード リンク先 記事兼カテゴリ画面 ・上下にスクロールで カテゴリ内前後の記事 ・共有 ・各記事3つの外部リンク 記事・カテゴリ 設定 設定画面 通知と履歴 ・続報のあるニュースを読むと 更新時に通知が来る 定時配信の設定 ・一日4回まで通知がくるよう 設定ができる カテゴリ ・続報中カテゴリは必須 続報中画面 ・一度読んだ話題の主要ニュースが 更新された際にプッシュ通知が来る エンタメ／おもしろ・ネタ／ファッション／カルチャー おでかけ／グルメ／恋愛・エッセイ／アニメ・ゲーム ネット・IT／ビジネス・コラム／スポーツ／ニュース
- 32. チュートリアル① ・カテゴリ設定 チュートリアル② ・トップ画面の説明 チュートリアル③ ・メニューの説明 スタート・セットアップ メイン メニュー画面 ・おすすめアプリ ・バージョン情報 ・ヘルプ メニュー YahooBiz 画面遷移図 トップ画面 ・選択したカテゴリごとに3つずつ 最新ニュース表示 トップ チュートリアル チュートリアル④ ・設定の説明 チュートリアル⑤ ・ウェルカム終了 設定 ・背景色、文字サイズ、リスト表示、 通知設定 カテゴリ 媒体 ・20媒体から選択 カテゴリ画面 ・クリップ カテゴリ 記事画面 ・クリップ ・シェア 記事 検索画面 ・ニュース記事の検索 ・クリップ ・[＋]から検索キーワードを保存できる 検索 クリップ一覧 ・クリップした記事リスト デイリーランキング ・設定したカテゴリの人気ニュース一覧 ・直近1週間分の日付ごとの人気ニュース ・クリップ ・総合（ニュース／コラム／ランキング）・国内（全て／政治・社会／ 経済／企業／人事／おくやみ／マーケット）・海外（全て／海外総合／ 中国／アジア／欧米）・視野を広げる（全て／経営戦略／キャリア・成 長／リーダーの選択／ニュースの読み方／書評）・仕事術（全て／仕事術 ／IT・ツール）・産業（農業・水産・鉱業／建設・不動産／食品／素 材・エネルギー／化学・日用品／医薬／機械／電機／自動車・輸送機器 ／その他製造業／運輸／情報・通信／メディア／外食・流通／金融・保 険／サービス業） 設定 カテゴリ画面
- 33. ウェルカム① ・アプリの3ポイント ウェルカム② ・チャンネル選択 ウェルカム③ ・配信時刻設定 チュートリアル① ・ページめくり説明 チュートリアル② ・見出し選択説明 チュートリアル③ ・すぐ読む説明 時間セレクタ スタート・セットアップ トップ画面 ・カテゴリ・天気・設定 メイン 配信時刻 ・プッシュ設定 チャンネル ・並べ替え・選択／解除 プラス ・チャンネル追加 時間セレクタ Twitter ・Twitter連携 カテゴリ トップ／エンタメ／スポーツ／グルメ／コラム／政治／経済／テクノロジー 記事Web ・シェア・リロード すぐ読むモード ・文字サイズ変更 ・シェア ・Web読み込み完了通知 チャンネル情報 ・チャンネル追加 ・画面プレビュー 記事 天気 ・現在の天気・週間天気予報 何の日？ ・シェア・リロード 地域設定 10分天気予報 天気（トップタブのみ） Smartnews 画面遷移図 トップ ウェルカム チュートリアル
- 34. ログイン トップ画面 ・利用規約 ・プライバシーポリシー タグ選択チュートリアル ・タグを選択する方法の説明 スタート・セットアップ Vingow 画面遷移図 ログイン ログイン画面 ・ID/PWでログイン ・Facebookでログイン ・Twitterでログイン 使いはじめる タグ選択 ・カテゴリーごとに分かれているタグから 3つ以上を選択する ウォークスルー ① ウォークスルー ② ウォークスルー ③ ウォークスルー④ ・朝昼晩の配信時刻を設定 チュートリアル ① チュートリアル ② チュートリアル ③ ニュース一覧 ・すべての記事／クリップした記事 切り替えられる ・引っ張って更新 ・クリップ ・シェア（Twitter/Facebook） ・アクション（メールで送信／ Pocket／Evernote／URLをコピー） メイン トップ 記事画面 チュートリアル ・初回のみ 記事 記事画面 ・クリップ ・シェア（Twitter/Facebook） ・アクション（メールで送信／ Pocket／Evernote／URLをコピー） タグごとの 記事一覧画面 ・ タグフィード 設定画面 ・アカウント情報 ・SNS連携 ・要約表示オン／オフ ・記事の定期通知 ・利用規約 ・プライバシーポリシー ・ヘルプ ・フィードバック 設定 タグ一覧 ・ワードからタグ検索 あなたのタグ タグ追加 ・話題のタグ ・カテゴリから選ぶ ・ワードからタグ検索
- 35. 自社のペルソナ CJM 苦情 アンケート トラフィック できる限り目を通す
- 36. プロトタイピング
- 37. 機能をしぼったMVP（最小構成プロダクト）の提案
- 38. なぜプロトタイピングが必要か？
- 39. • いきなり設計して作ると、 • 使いやすい保証もユーザーが使ってくれる保証もない。 • 間違った設計かの確認がリリースまでできない。 なぜプロトタイピングが必要か？
- 40. 低精度 中精度 高精度 Header 日本人のあなたが外国人として 逮捕される日。 日本出国の窓口は一緒くたになっているが、 入国審査のゲートは大きく二種類ある。一 つは「日本人」、もう一つは「外国人」で ある。余談ながら外国人の英語表記は今で は「foreigner」になっているが私が日本に 初上陸した頃は、「alien」となっていたこ とを懐かしく思い出す。 10年ほど前から日本国籍である筆者が持っ ペーパープロト 部分プロト 最終モックアップ
- 41. 今回は中精度のプロトを数多く作った XCodeによる全パターン実装
- 42. 5種類のタブ方式を全て実装
- 43. 一覧表示のスタイルと面積の検証
- 44. ヘッダー、画像、文字サイズ、行間すべてを総当たりで検証
- 45. 50ページにわたるUI比較検証と候補レポを作成
- 46. あらゆる矛盾を検討し潰してから グラフィックや最終設計を行う
- 47. ユーザテスト
- 48. かならず仮説を立ててからテストする
- 49. テストは答え合わせと見落としチェック
- 50. 仮説と答え合わせを繰り返し、 テストなしでもわかる肌感覚を広げていく
- 51. フォーマルなテストができれば最高 できなくても、友達レベルでいいので 必ず外部テストを行う
- 52. 電子版では最終リリース前に調査会社に依頼。 事前にユーザーがミスするポイントを想定し、 想定との答え合わせを行った。
- 53. スケジュール
- 54. プロトタイピングに使った期間は6ヶ月
- 55. 典型的なプロジェクトのスケジュールとフロー 要件定義（1ヶ月） ↓ 設計（2週間-１ヶ月） ↓ デザイン ↓ 実装
- 56. 今回のスケジュールとフロー リサーチ（1ヶ月） ↓ 理想を体現したプロト x X個（4ヶ月） ↓ 現実と折り合いをつけたプロト（1ヶ月） ↓ 要件定義 ↓ 設計 ↓ 実装 ↓ ユーザーテスト ↓ 調整
- 57. 使いやすくする方法論はただ1つ
- 58. 大量の仮説とアプローチを考え総当たりで潰す
- 59. そのためにプロトに時間を限界までかける
- 60. 課題
- 61. クオリティコントロール
- 62. 知らないうちに搭載される実装をどうQAするか？
- 63. 横スクロールのページングが消えた
- 64. ページめくりエフェクト
- 65. 操作をロックする通知
- 66. 記事を読めない通知
- 67. いきなり実装せずに、リスクや矛盾を精査する
- 68. 実装前にPlan ABCDを作り、 それぞれのリスク・リターンをまとめて比較する
- 69. さらに磨きあげたいポイント
- 70. スペックに出ない品質向上が課題 改善インセンティブをどう高くしていくか
- 71. 速度、スムーズさ、固まらないこと
- 72. 字詰め
- 73. ビジネス的持続可能性とユーザー利便性を共存させる
- 74. 細かい品質は数値で見えにくいが、 競合と並べるとどちらが格下か明快にわかる 定性的な指標として「競合と並べる」はオススメ
- 75. KPIだけに満足せず 日経チームとより密に連携しつつ チームそのものの底上げしていく
- 76. まとめ
- 77. よいコンテンツを持っていれば 機能で小細工をする必要はない
- 78. モタつかないこと 良質なコンテンツが大量にあること 適切な内容に即座にアクセスできること
- 79. 十分に時間をかけた検証と吟味し ど真ん中に豪速球をなげる
- 80. 業界の王者に小細工は不要！！ 変な機能追加する暇があったら コアバリューを全方向から磨き上げる
- 81. ・新しい技術をどんどん取り入れてみたい方 ・少しぐらい障害があった方が燃える方 ・フロントエンド・バックエンド問いません。 ・とりあえず職場のぞいてみたい、でもOK エンジニア募集 下記まで気軽に連絡ください。 dg_lab@nex.nikkei.co.jp 日経電子版では"エンジニア"を募集しています。
- 82. ありがとうございました お仕事などは下記から http://theguild.jp fukatsu@gmail.com
Login to see the comments