Upgrade to Pro — share decks privately, control downloads, hide ads and more …

安全で使いやすいCarPlayアプリの 魅せ方：HIGと実例から学ぶ

Avatar for NAVITIME JAPAN NAVITIME JAPAN PRO
August 26, 2024
Technology
1
270

安全で使いやすいCarPlayアプリの 魅せ方：HIGと実例から学ぶ

2024/08/22-24に開催された「iOSDC Japan 2024」で発表した資料です
https://iosdc.jp/2024/

Avatar for NAVITIME JAPAN

NAVITIME JAPAN PRO

August 26, 2024
Tweet

More Decks by NAVITIME JAPAN

See All by NAVITIME JAPAN
つよつよリーダーが 抜けたらどうする？ 〜ナビタイムのAgile⽀援組織の変遷〜
Avatar for NAVITIME JAPAN navitimejapan
PRO
23
16k
実践ジオフェンス 効率的に開発するために
Avatar for NAVITIME JAPAN navitimejapan
PRO
3
980
見えないユーザの声はログに埋もれている！ ～ログから具体的なユーザの体験を数値化した事例紹介～
Avatar for NAVITIME JAPAN navitimejapan
PRO
6
3.3k
ユーザーのためなら 『デザイン』 以外にも手を伸ばせる
Avatar for NAVITIME JAPAN navitimejapan
PRO
2
1.8k
フツーのIT女子が、 Engineering Managerになるまで
Avatar for NAVITIME JAPAN navitimejapan
PRO
3
410
不確実性に打ち勝つOKR戦略/How to manage uncertainty with OKR strategy
Avatar for NAVITIME JAPAN navitimejapan
PRO
4
3.9k
アジャイルを小さいままで 組織に広める 二周目 / Agile Transformation in NAVITIME JAPAN iteration 2
Avatar for NAVITIME JAPAN navitimejapan
PRO
4
1.5k
変更障害率0%よりも「継続的な学習と実験」を価値とする 〜障害を「起こってはならないもの」としていた組織がDirtの実施に至るまで〜 / DevOps Transformation in NAVITIME JAPAN
Avatar for NAVITIME JAPAN navitimejapan
PRO
8
6k
こうしてふりかえりは終わってしまった / A Demise of a retrospective
Avatar for NAVITIME JAPAN navitimejapan
PRO
47
32k

Other Decks in Technology

See All in Technology
事例から紐解くSHIFT流QA支援 ～大規模プロジェクトの品質管理支援、QA組織立ち上げ～ / 20260320 Nozomu Koketsu
Avatar for SHIFT EVOLVE shift_evolve
PRO
0
140
FlutterでPiP再生を実装した話
Avatar for 白井翔大 s9a17
0
160
君はジョシュアツリーを知っているか？名前をつけて事象を正しく認識しよう / Do you know Joshua Tree?
Avatar for Y-KANOH ykanoh
4
120
【AWS】CloudTrail LakeとCloudWatch Logs Insightsの使い分け方針
Avatar for Yuma Tsurugasaki tsurunosd
0
120
ThetaOS - A Mythical Machine comes Alive
Avatar for Martijn aslander
0
170
Phase12_総括_自走化
Avatar for overflow ,Inc overflowinc
0
1.5k
「お金で解決」が全てではない！大規模WebアプリのCI高速化 #phperkaigi
Avatar for すてにゃん stefafafan
5
2.3k
スピンアウト講座01_GitHub管理
Avatar for overflow ,Inc overflowinc
0
1.3k
Phase02_AI座学_応用
Avatar for overflow ,Inc overflowinc
0
2.8k
新規事業×QAの挑戦：不確実性を乗りこなす！フェーズごとに求められるQAの役割変革
Avatar for hacomono Inc. hacomono
PRO
0
180
形式手法特論：SMT ソルバで解く認可ポリシの静的解析 #kernelvm / Kernel VM Study Tsukuba No3
Avatar for y_taka_23 ytaka23
1
790
データマネジメント戦略Night - 4社のリアルを語る会
Avatar for Tatsuya Koreeda ktatsuya
1
230

Featured

See All Featured
Large-scale JavaScript Application Architecture
Avatar for Addy Osmani addyosmani
515
110k
Why You Should Never Use an ORM
Avatar for John Nunemaker jnunemaker
PRO
61
9.8k
The Organizational Zoo: Understanding Human Behavior Agility Through Metaphoric Constructive Conversations (based on the works of Arthur Shelley, Ph.D)
Avatar for Dr. Kim W Petersen kimpetersen
PRO
0
270
Un-Boring Meetings
Avatar for Sebastian Deterding codingconduct
0
240
So, you think you're a good person
Avatar for Per Axbom axbom
PRO
2
2k
The AI Revolution Will Not Be Monopolized: How open-source beats economies of scale, even for LLMs
Avatar for Ines Montani inesmontani
PRO
3
3.2k
Designing Dashboards & Data Visualisations in Web Apps
Avatar for Des Traynor destraynor
231
54k
The Straight Up "How To Draw Better" Workshop
Avatar for Dennis Kardys denniskardys
239
140k
Navigating the moral maze — ethical principles for Al-driven product design
Avatar for Skipper Chong Warson skipperchong
2
300
The agentic SEO stack - context over prompts
Avatar for schlessera schlessera
0
710
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
Avatar for Joe Casabona jcasabona
34
2.7k
Building a A Zero-Code AI SEO Workflow
Avatar for Ian Lurie portentint
PRO
0
410

Transcript

  1. IOSDC JAPAN 2024 #IOSDC #B @MARUNOMI_ TRACK B 17:30 安全で使いやすいCarPlayアプリの

    魅せ方：HIGと実例から学ぶ

  2. 自己紹介 MARU iOS / Android(最近) X：@marunomi_

  3. CarPlayで 押さえたいポイント紹介します！

  4. CarPlayで 押さえたいポイント リストの内容は情報の優先度を考慮する 1. ダークモード用の色を設定して、車内ではっきり 見やすくする 2. ユーザーの判断が楽になるような、文章や色使い にする 3.

    シンプル... 🤔

  5. 目次 HIGで見るCarPlay 1. CarPlayでのレイアウト 2. 具体例 3. 分かったこと 4.

  6. Human Interface　 Guidelines（HIG） Appleのプラットフォームにおいて 優れた体験を設計するためのガイドと ベストプラクティス 引用：https://developer.apple.com/jp/design/human-interface-guidelines 2. HIGで見るCarPlay

  7. 2. HIGで見るCarPlay 2-1. 操作制限 2-2. 視覚要素 (デザイン) 2-3. エラーの表示 2-4.

    車による制限

  8. 2-1. 操作について 画面に集中させない 最小限で素早く完了できるタスク iPhoneで入力する状況は避ける

  9. レイアウト ユーザーに有益な情報を、運 転席から見やすくする 不要な情報や装飾を避ける 同じような機能を持つ要素の 見た目を揃える 2-2. 視覚要素（デザイン）

  10. 色 色を付けて、インタラクティブであることを表現 操作可能な要素と、そうでないものは同じ色にしない ダークモード・ライトモードの両方で見栄え良くする 2-2. 視覚要素（デザイン）

  11. 2-3. エラーの表示 エラーの表示はCarPlayする どうしても必要な場合のみ、ユーザーに 知らせる iPhoneで解決させる操作をさせない

  12. 2-4. 車種による制限 リストの項目や地点数の制限 リストは車種により12個まで 地図上のピン表示は12個まで 📍限られた数の中で、 ユーザーに関連性のある情報を表示

  13. テンプレートがある中で どのようにHIGが使えるだろうか... 🤔

  14. 4. 具体例 4-1. 一貫した見た目にする 4-2. リストの内容は重要度を考慮する 4-3. ダークモード・ライトモードで見栄えを良くする

  15. 4-1. 一貫した見た目にする 似たような操作には同じ色を使う タップ不可の要素には色を使わない など、 、 でも、各ボタンの色が水色で固定されている、 、 、 🤔

  16. 4-1. 一貫した見た目にする 同じ優先度のアクションに対しては同じボタンを使う HIGのCarPlayより

  17. 4-2. リストの内容は重要度を考慮する ユーザーが選択するときに重要度の高い情報に絞る！ 選択させやすくするため

  18. 4-2. リストの内容は重要度を考慮する CPListTemplate 車種によってはリストの項目数が12個 CPPointOfInterestTemplate 地点ピンが12個まで リストなど、表示できる数に制限がある

  19. CPSessionConfigurationのlimitedUserInterfaces 0 →制限なし 1→キーボードの制限あり 2→リストの表示数に制限あり 制限の確認方法 4-2. リストの内容は重要度を考慮する

  20. 何も考慮していないとき 修正前 見切れる住所 評価や金額が長い 4-2. リストの内容は重要度を考慮する

  21. 行きたい場所を選びやすく情報を並び替える 修正後 評価や値段は簡略 どのくらいの時間で 行けるか, 分表示 4-2. リストの内容は重要度を考慮する

  22. 4-3. ダーク・ライトモードで見栄えを良くする 車内のどんな照明でも 鮮明に表示したい

  23. 4-3. ダーク・ライトモードで見栄えを良くする Appleのシステムカラーを参考に ダーク用の色を用意 https://developer.apple.com/jp/design/human-interface-guidelines/dark-mode

  24. 4. 分かったこと テンプレートによるデザインの制限が厳しい CarPlayでアプリの特色を出すだけの色を使いにくい その中でも、ユーザーが直感的に選択しやすい表示に する工夫が大切

  25. CarPlayで 押さえたいポイント リストの内容は情報の優先度を考慮する 1. ダークモード用の色を設定して、車内ではっきり 見やすくする 2. ユーザーの判断が楽になるような、文章や色使い にする 3.

  26. 1 ご静聴ありがとうございました！