WWDC19、最終日にDesign Labにいってきました。
Design LabはAppleのデザイナーと1対1でアプリデザインを相談できるLabです。
アプリのデザインはApp Storeにリリース済み、プロトタイプどちらでも構いません。
WWDCアプリから予約が必要です。
当日の7:00から7:30までに予約リクエストをして、枠が空いていれば正式に予約完了という流れになっています。
Design Labはとても人気のLabでなかなか予約が取りづらいLabです。
しかし、最終日ともなると、参加者の数も少なくなっているので予約が取りやすくなっています。

個人アプリのデザイン相談

Design Labで私は個人で製作している「フライングスター風水」のアプリデザインについて相談しました。

相談ごと1つ目

引っ越し間取り画面の写真登録UIを改善したいと思っています。

間取り画面で引越し先の住宅の運勢を占うには以下の２つのタスクが必要です。

1. 写真の北方向と端末画面上部を回転させて合わせる
2. 玄関の方向に画像を回転させる

しかしセミナーなどで実際にユーザーさんに触ってもらったのですが、やり方がわからず混乱してしまう状況となっています。
なんとかうまく誘導する方法はないのでしょうか？

現状のフローです。

• 写真を選択
• 北の方向に画像を傾ける
• ホームに戻り、玄関の方向を設定する

画面がいろんなところに遷移してわかりにくくなっています。

回答1:チュートリアルをいれよう

デザイナーさんからは「チュートリアルを取り入れよう」とアドバイスをもらいました。
ゲームのように実際にユーザーが触って試せるチュートリアル画面を取り入れたらどうだろうかと。
サンプルの間取り画像を表示してユーザーに「北の方向に傾けましょう」「次は玄関の位置に傾けましょう」と練習ができるようにする。
その後に実際にユーザーの間取り画像を取り込んで設定してもらう。
そうすることで複雑なタスクでもなんなくこなせる画面になるのではないかということでした。

その時のオンボーディングの画面遷移のイメージはアップルのアクティベート画面のイメージです。
画面にはユーザーが「一つの操作」しかできないように設計されています。

これはApple Cashの登録画面ですが、ボタンが一つだけだったり、利用規約は同意か同意しないしか選べないようになっています。

「Human Interface Guidelines」のModalityではモーダルがユーザーに行うタスクは簡潔で短く集中できるようなものが望ましいと述べられています。

Keep modal tasks simple, short, and narrowly focused. Avoid creating an app within your app. If a modal task is too complex, people can lose sight of the task they suspended when they entered the modal context. Be especially wary of creating modal tasks that involve a hierarchy of views because people can get lost and forget how to retrace their steps. If a modal task must contain subviews, provide a single path through the hierarchy and a clear path to completion. Avoid using a Done button for anything other than completing the task.

このようにユーザーに操作を集中させる画面遷移を組み、さらにチュートリアルで一度実践させてから実際の操作を行うようにすれば迷いなく操作ができるのではないかとのことでした。
納得感のある回答でした。

相談ごと2つ目:

現状、画面がごちゃごちゃしています。
ナビゲーションバーとタブバーがあるのに、画面下部に２つもボタンがあるなど要素がたくさん配置されています。
見にくいのではないかという心配になっていたので、どうしたらいいかを聞きました。

回答2:ボタンはナビゲーションバーに移動しよう

デザイナーさんからのアドバイスはカレンダーアプリのようにナビゲーションバーにボタンを配置すればいいのではということでした。

カレンダーアプリはナビゲーションバーに検索やイベント追加ボタンなどが配置されています。

それをフライングスター風水にも適応すればよいのでは？ということでした。

つまり図にするとこういうことです。

ナビゲーションバーとタブバーの間の領域は基本的にユーザーが見るだけのコンテンツを表示し、操作するものは上下に配置すれば見やすくなるといっていました。

その他

アイコンを使っているならSF Symbleを使ったほうがいいよとおすすめされました。

SF Symbols - SF Symbols - Human Interface Guidelines - Apple Developer

Design Labの感想

こちらの疑問に的確に答えていただきとても有意義な30分になりました。UIデザインをどうすればいいのか迷っていたので本当に助かりました。
また、具体的に「ここが困っているんだけど何かアドバイスはないでしょうか？」というスタンスで質問できたのでより的確に回答いただけたのかと思います。Design Labを受けた他の人が、質問の背景の共有が出来ず期待した答えが得られなかったということを聞いたことがあります。（「このデザインどう？」と聞いてそのデザイナーの好みに終始してしまったなど）

また返答はHuman Interface Guidelinesを体現したもので、さすがAppleのデザイナーだと思いました。
Apple純正アプリのデザインにも学べることが多くあることに気が付きました。

Design Labにいってよかったです。みなさんもWWDCに行った際にはぜひDesign Labで相談をおすすめします。