Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
安全で使いやすいCarPlayアプリの 魅せ方:HIGと実例から学ぶ
Search
NAVITIME JAPAN
PRO
August 26, 2024
Technology
1
19
安全で使いやすいCarPlayアプリの 魅せ方:HIGと実例から学ぶ
2024/08/22-24に開催された「iOSDC Japan 2024」で発表した資料です
https://iosdc.jp/2024/
NAVITIME JAPAN
PRO
August 26, 2024
Tweet
Share
More Decks by NAVITIME JAPAN
See All by NAVITIME JAPAN
実践ジオフェンス 効率的に開発するために
navitimejapan
PRO
2
130
見えないユーザの声はログに埋もれている! ~ログから具体的なユーザの体験を数値化した事例紹介~
navitimejapan
PRO
6
2k
ユーザーのためなら 『デザイン』 以外にも手を伸ばせる
navitimejapan
PRO
2
1.1k
フツーのIT女子が、 Engineering Managerになるまで
navitimejapan
PRO
3
150
不確実性に打ち勝つOKR戦略/How to manage uncertainty with OKR strategy
navitimejapan
PRO
4
3.1k
アジャイルを小さいままで 組織に広める 二周目 / Agile Transformation in NAVITIME JAPAN iteration 2
navitimejapan
PRO
4
1.2k
変更障害率0%よりも「継続的な学習と実験」を価値とする 〜障害を「起こってはならないもの」としていた組織がDirtの実施に至るまで〜 / DevOps Transformation in NAVITIME JAPAN
navitimejapan
PRO
7
4.9k
こうしてふりかえりは終わってしまった / A Demise of a retrospective
navitimejapan
PRO
44
28k
もーひとつの時間がない症候群 / Yet Another SOT Syndrome
navitimejapan
PRO
1
2.1k
Other Decks in Technology
See All in Technology
標準ライブラリの奥深アップデートを掘り下げよう!
logica0419
2
450
Towards Effortless Transaction Management in Microservices @KubeDay Japan 2024
scalar
1
110
自社開発した大規模言語モデルをどうプロダクションに乗せて運用していくか〜インフラ編〜
pfn
PRO
22
6.7k
プロダクトエンジニアを支えるための開発生産性向上施策
tsukakei
0
130
2024年版 運用者たちのLLM
nwiizo
3
520
Envoy External AuthZとgRPC Extensionを利用した「頑張らない」Microservices認証認可基盤
andoshin11
0
210
Autonomous Database Cloud 技術詳細 / adb-s_technical_detail_jp
oracle4engineer
PRO
15
40k
可視化により内部品質をあげるAIドキュメントリバース/20240910 Hiromitsu Akiba
shift_evolve
0
180
エンジニア視点で見る、 組織で運用されるデザインシステムにするには
shunya078
1
290
AI でアップデートする既存テクノロジーと、クラウドエンジニアの生きる道
soracom
PRO
2
380
サーバレスでモバイルアプリ開発! NTTコム「ビジネスdアプリ」のアーキテクチャ / The architecture of business d app
nttcom
12
210
Functional TypeScript
naoya
10
4.5k
Featured
See All Featured
Put a Button on it: Removing Barriers to Going Fast.
kastner
58
3.4k
Designing the Hi-DPI Web
ddemaree
278
34k
The Illustrated Children's Guide to Kubernetes
chrisshort
47
48k
The Cult of Friendly URLs
andyhume
76
5.9k
How GitHub Uses GitHub to Build GitHub
holman
472
290k
Rebuilding a faster, lazier Slack
samanthasiow
78
8.6k
Speed Design
sergeychernyshev
21
420
The Brand Is Dead. Long Live the Brand.
mthomps
53
37k
Designing Experiences People Love
moore
138
23k
How GitHub (no longer) Works
holman
310
140k
5 minutes of I Can Smell Your CMS
philhawksworth
201
19k
Pencils Down: Stop Designing & Start Developing
hursman
119
11k
Transcript
IOSDC JAPAN 2024 #IOSDC #B @MARUNOMI_ TRACK B 17:30 安全で使いやすいCarPlayアプリの
魅せ方:HIGと実例から学ぶ
自己紹介 MARU iOS / Android(最近) X:@marunomi_
CarPlayで 押さえたいポイント紹介します!
CarPlayで 押さえたいポイント リストの内容は情報の優先度を考慮する 1. ダークモード用の色を設定して、車内ではっきり 見やすくする 2. ユーザーの判断が楽になるような、文章や色使い にする 3.
シンプル... 🤔
目次 HIGで見るCarPlay 1. CarPlayでのレイアウト 2. 具体例 3. 分かったこと 4.
Human Interface Guidelines(HIG) Appleのプラットフォームにおいて 優れた体験を設計するためのガイドと ベストプラクティス 引用:https://developer.apple.com/jp/design/human-interface-guidelines 2. HIGで見るCarPlay
2. HIGで見るCarPlay 2-1. 操作制限 2-2. 視覚要素 (デザイン) 2-3. エラーの表示 2-4.
車による制限
2-1. 操作について 画面に集中させない 最小限で素早く完了できるタスク iPhoneで入力する状況は避ける
レイアウト ユーザーに有益な情報を、運 転席から見やすくする 不要な情報や装飾を避ける 同じような機能を持つ要素の 見た目を揃える 2-2. 視覚要素(デザイン)
色 色を付けて、インタラクティブであることを表現 操作可能な要素と、そうでないものは同じ色にしない ダークモード・ライトモードの両方で見栄え良くする 2-2. 視覚要素(デザイン)
2-3. エラーの表示 エラーの表示はCarPlayする どうしても必要な場合のみ、ユーザーに 知らせる iPhoneで解決させる操作をさせない
2-4. 車種による制限 リストの項目や地点数の制限 リストは車種により12個まで 地図上のピン表示は12個まで 📍限られた数の中で、 ユーザーに関連性のある情報を表示
テンプレートがある中で どのようにHIGが使えるだろうか... 🤔
4. 具体例 4-1. 一貫した見た目にする 4-2. リストの内容は重要度を考慮する 4-3. ダークモード・ライトモードで見栄えを良くする
4-1. 一貫した見た目にする 似たような操作には同じ色を使う タップ不可の要素には色を使わない など、 、 でも、各ボタンの色が水色で固定されている、 、 、 🤔
4-1. 一貫した見た目にする 同じ優先度のアクションに対しては同じボタンを使う HIGのCarPlayより
4-2. リストの内容は重要度を考慮する ユーザーが選択するときに重要度の高い情報に絞る! 選択させやすくするため
4-2. リストの内容は重要度を考慮する CPListTemplate 車種によってはリストの項目数が12個 CPPointOfInterestTemplate 地点ピンが12個まで リストなど、表示できる数に制限がある
CPSessionConfigurationのlimitedUserInterfaces 0 →制限なし 1→キーボードの制限あり 2→リストの表示数に制限あり 制限の確認方法 4-2. リストの内容は重要度を考慮する
何も考慮していないとき 修正前 見切れる住所 評価や金額が長い 4-2. リストの内容は重要度を考慮する
行きたい場所を選びやすく情報を並び替える 修正後 評価や値段は簡略 どのくらいの時間で 行けるか, 分表示 4-2. リストの内容は重要度を考慮する
4-3. ダーク・ライトモードで見栄えを良くする 車内のどんな照明でも 鮮明に表示したい
4-3. ダーク・ライトモードで見栄えを良くする Appleのシステムカラーを参考に ダーク用の色を用意 https://developer.apple.com/jp/design/human-interface-guidelines/dark-mode
4. 分かったこと テンプレートによるデザインの制限が厳しい CarPlayでアプリの特色を出すだけの色を使いにくい その中でも、ユーザーが直感的に選択しやすい表示に する工夫が大切
CarPlayで 押さえたいポイント リストの内容は情報の優先度を考慮する 1. ダークモード用の色を設定して、車内ではっきり 見やすくする 2. ユーザーの判断が楽になるような、文章や色使い にする 3.
1 ご静聴ありがとうございました!