【Y! MAP】混雑予報機能の提供とそのUI制作について#yjbonfire

Yahoo! MAP 混雑予報機能の提供と そのUI制作について ヤマネ ナツミ 2020/11/4 Bonfire Design #yjbonfire

デザイナー ヤマネ ナツミ 2017年新卒⼊社。新規サービスやコロナ 緊急対策案件のデザインなどを担当し、 現在はYahoo!カレンダーのデザインやヤ フーのデザインの品質管理などを担当。 @ymnt723

Yahoo! MAPについて

Yahoo! MAPについて

本題に⼊る前に CTF(コロナタスクフォース)について CTF 前期より社内で発⾜した、サービスを 横断したチーム コロナ関連で緊急対応が必要な案件が 発⽣して、要請があればこのチームか ら最適な⼈員がアサインされる。 サービス サービス サービス

混雑予報UI制作の舞台裏あれこれ 1 データの⾒せ⽅ 2 いち早く混雑情報を提供するために 3 提供できるデータに最適なデザインを

舞台裏 01. データの⾒せ⽅

施設周辺の混雑予報 施設詳細画⾯で、 曜⽇や時間ごとの混雑予報や、 当⽇の実績がグラフでわかる。

データについて 実は混雑予報のデータは性質の異なる２つのデータがある。 混雑 データA 混雑 データB

データの性質 データA 保有データ データ形式 データB 過去１週間の混雑実績 過去4週のデータからの予測 当⽇の混雑実績 当⽇の混雑実績 混雑、通常、緩和の 細かな数値表現可能な ３ステータス スケールデータ ※いずれも１時間ごとの混雑データ

データの性質 こちらのデータの⽅が多く使⽤されている データA 保有データ データ形式 データB 過去１週間の混雑実績 過去4週のデータからの予測 当⽇の混雑実績 当⽇の混雑実績 混雑、通常、緩和の 細かな数値表現可能な ３ステータス スケールデータ ※いずれも１時間ごとの混雑データ

課題① 実績と予報という過去と未来予測のデータを同じUIでどう⾒せるか？ データA 保有データ データ形式 データB 過去１週間の混雑実績 過去4週のデータからの予測 当⽇の混雑実績 当⽇の混雑実績 混雑、通常、緩和の 細かな数値表現可能な ３ステータス スケールデータ ※いずれも１時間ごとの混雑データ

課題② ３つのステータスしかない情報をどうやってスケールデータに合わせるか？ データA 保有データ データ形式 データB 過去１週間の混雑実績 過去4週のデータからの予測 当⽇の混雑実績 当⽇の混雑実績 混雑、通常、緩和の 細かな数値表現可能な ３ステータス スケールデータ ※いずれも１時間ごとの混雑データ

リリースしたUI 課題① 実績と予報のデータを同じUIでどう⾒せるか？ 曜⽇ごとの傾向として出すことで 過去と未来の概念をなくす

リリースしたUI データA ３ステータス データB スケールデータ 課題② ３つのステータスしかない情報をどうやってスケール データに合わせるか？ ３ステータスのみのデータAも 棒グラフで表⽰

他にもいろんな検討があった A B C D リリース版 etc.

舞台裏 02. いち早く混雑情報を提供するために

混雑予報リリーススケジュール 5⽉20⽇頃 5⽉25⽇ 6⽉17⽇ キックオフ 緊急事態 解除宣⾔ リリース

混雑予報リリーススケジュール 5⽉20⽇頃 5⽉25⽇ 6⽉17⽇ キックオフ 緊急事態 解除宣⾔ リリース もっと早くユーザーに提供せねば…！

混雑予報リリーススケジュール 5⽉20⽇頃 5⽉25⽇ 6⽉1⽇ 6⽉17⽇ キックオフ 緊急事態 解除宣⾔ リリース リリース スーパー スーパー

どうやって２回に分けたのか？ Aだけならすぐにでもデータの⽤意ができる！ 混雑 データA 混雑 データB

どうやって２回に分けたのか？ 5⽉20⽇頃 5⽉25⽇ キックオフ 緊急事態 解除宣⾔ 6⽉1⽇ 6⽉17⽇ 本来のリリース 提供できるデータから提供することで、 より早く混雑情報をユーザーに提供することができた

舞台裏 03. 提供できるデータに最適なデザインを

データの性質 データA 保有データ データ形式 データB 過去１週間の混雑実績 過去4週のデータからの予測 当⽇の混雑実績 当⽇の混雑実績 混雑、通常、緩和の 細かな数値表現可能な ３ステータス スケールデータ ※いずれも１時間ごとの混雑データ

データの性質 こちらのデータの⽅が今後多く使われる予定 データA 保有データ データ形式 データB 過去１週間の混雑実績 過去4週のデータからの予測 当⽇の混雑実績 当⽇の混雑実績 混雑、通常、緩和の 細かな数値表現可能な ３ステータス スケールデータ ※いずれも１時間ごとの混雑データ

初回リリースのUI まだデータAしかないけど、今後データのメインとなる データBに最適なUIを適応するべきか、 データA に最適なUIで提供すべきか...

初回リリースのUI データAに最適なUIを提供 ユーザーからするとデータBが今後出てくる から云々…とかは関係ない。 その時ある情報がみやすいことが⼤事。 今回の場合はその時提供できるデータに最適 なUIを提供すべきと判断。 スーパー スーパー

データAに最適なUIの検討 A リリース版 B スーパー C D etc. スーパー

6/1 スーパー スーパー 6/17

舞台裏で制作した感想 重要なのはユーザーの⾏動を促すこと 今回のような情報の提供にあたっては、UIが綺麗とか使いやすいというのはも ちろんのこと、いち早くわかりやすい情報を提供することでユーザーの⾏動を 促し、新しい⽣活様式をうまく過ごすための⾏動指針となることが⼀番重要。 情報の⾒せ⽅はより慎重に イレギュラーな対応と判断が求められる場合であっても、ユーザーが誤った解 釈をしないために、情報の⾒せ⽅をより慎重に⾏わないといけない。

ご清聴ありがとうございました！