プロフィール画面のデザイン:アプリのプロフィールと設定をリデザイン、ビフォーアフター

プロフィール画面の仕事は3つあります。あなたが誰かを示すこと、何を持っているかを示すこと、そして設定を変える場所を用意することです。下の最初のドラフトは3つともこなしていますが、13行をフラットな1つのリストに詰め込み、ポイントは小さな1行に押し込められ、ログアウトが画面でいちばん目立っています。まさにガラクタ引き出しです。何でも入っているのに、何も見つかりません。

改善版は機能を1つも減らしません。3つの仕事にそれぞれ専用のブロックを与え、各行に状態を表示させることで、ほとんどの設定は開かなくても読み取れます。

画面全体のビフォーアフター

新人のドラフト

改善版

左は、すべてが同じ重みです。アバター、名前、メール、電話番号が中央に積み重なり、催促バナーはポイントのすぐ上に居座り、その下に13行が、それぞれ違う色のアイコンで延々と続きます。下部の幅広い赤ボタンは画面で最も強い色なので、視線が最後にたどり着くのは、誰も間違って押してはいけない操作です。

右は、4つのブロックと1つの色でできています。ID表示は短く、カードがポイントを担い、タイルと設定リストがそれ以外をすべて受け持ちます。ブランドのコバルトはカード、編集ボタン、アクティブなタブに使われ、赤はログアウトにだけ、プレーンテキストとして1度だけ登場します。

何が変わったか、数値で見る

2つのFigmaフレームから見た、1画面の全差分です。

修正1:自分が誰かは1行で

Before

After

中央揃えのアバター、名前、メール、電話番号、枠線付きのEdit Profileボタンとその下の黄色いバナーに対して、左にアバター、隣に名前とメール、右に小さなEditピルを置いた1行。

中央に積み重ねる方式は、名前とメールを伝えるのに約160ポイントもの高さを使います。電話番号はその中でいちばん役に立たない行で、Edit Profileボタンは枠線付きの立派なコントロールとして、下のすべてと注目を奪い合います。

改善は1行にすることです。左にアバター、その隣に名前とメール、末尾に小さなピルとしてのEdit。ブロックの高さは158ではなく60ポイントなので、次のブロックがより上から始まります。「プロフィールを完成させて50ポイントGET!!!」という催促バナーも、画面の最上部から消えました。プロフィール入力のお願いは、初回起動後かEditの中に置くべきもので、見に来たものの上に置くものではありません。

再利用できるルール:人は自分の名前を知っています。IDには1行だけ与え、余白は変化するものに使いましょう。

修正2:1行のテキストをカードにする

Before

After

小さなワードマークに続き、「Points: 12480 | Tier: Gold | Next: Platinum (13000)」が極小の文字で1行に並ぶものに対して、ワードマーク、Goldのタグ、大きな12,480、プログレスバー、「Platinumまであと520ポイント」を載せた濃い青のカード。

ポイントは、会員がこの画面を開く理由そのものなのに、ドラフトではページ内で最も小さい文字で表示されています。数字は全部そろっていますが、読む側が13,000から12,480を引き算しなければなりません。

改善版は、その引き算を代わりにやります。カードはポイントを44ptで表示し、ランクを金色のタグで示し、83パーセント埋まったバーと「Platinumまであと520ポイント」という一文を添えます。Goldは10,000から始まるので、12,480は次のランクのかなり手前まで来ており、バーが一目でそれを伝えます。カードはブランドのコバルトとランクを表す金色を使い、画面で最も強いブロックになりますが、それで正解です。ここは見る人に報いる唯一の場所だからです。

再利用できるルール:計算に使う数字ではなく、計算の結果を見せましょう。

修正3:設定をグループ化して状態を見せる

Before

After

My OrdersからTerms and Conditionsまで、色付きアイコンとシェブロンが付いた13行の1つのリストに対して、3つのタイル(Orders、Wallet、Saved)と、Addresses、Payment Methods、Notifications、Language、Help and Legalの5行を収めた1つの白いグループ。

同じサイズ、同じシェブロン、7色のアイコンの13行には、秩序がありません。My OrdersとTerms and Conditionsが同じ重要度に見えますし、ドラフトでは行をタップするまで、その先に何があるのかまったくわかりません。

改善版は、使われる頻度でリストを仕分けします。

• Orders、Wallet、Savedはタイルになります。 人が最もよく行く3か所なので、大きなタップ領域と、それぞれ最新の情報を持たせます。「2 active」「$42.50」「18 items」です。
• 設定は1つのグループにまとめます。 Addressesは「2 saved」、Payment Methodsは「Visa ·· 4242」、Languageは「English」と表示します。タップしなくても確認できます。
• 通知はスイッチになります。 オンかオフかの選択なので、専用の画面は要りません。
• めったに使わない行はHelp and Legalの奥へ移します。 Invite Friends、Rate the App、About Us、Privacy Policy、Termsは残っていますが、1タップ奥にあります。

ドラフトにあった行は、すべてたどり着けます。何も削除せず、使用頻度が示す場所に置いただけです。アイコンも1つの色味に統一したので、画面上の色が意味を持ちます。ブランドカラーは、アクティブでタップできるものを示します。

修正4:ログアウトを静かにする

Before

After

白い大文字で「LOG OUT」と書かれた幅いっぱいの赤いボタンに対して、周りに余白をとった、17ptで中央揃えの赤い文字「Log Out」。

ベタ塗りの赤いボタンはドラフト画面で最も目立つコントロールで、押してほしそうにしています。ログアウトはめったに行わず、サインイン画面に戻されるので軽い破壊的操作です。見つけやすく、うっかり押しにくくあるべきです。

改善版は、赤は残します。赤はこれが「去る」操作だと伝えるからです。そして塗りをなくします。設定グループの下に、余白をとったプレーンテキストとして置きます。1タップで届くことに変わりはありませんが、もう視線を引きつけません。

細かな修正

• ナビバーの代わりに大きなタイトル。 戻る矢印、共有アイコン、太陽アイコンの付いた「My Profile」は、34ptの「Profile」になりました。タブバーが現在地をすでに示しているので戻る矢印は不要になり、残るアイコンは通知のベルだけです。
• マージンは1種類。 ドラフトは左14、右12でした。改善版は両側20、ブロック間は14です。
• 文字サイズは1つのスケール。 ドラフトの文字は8から15pxまでばらばらでした。改善版は11から34ptのiOSサイズを使います。
• アクセントは1つ。 ドラフトは7色のアイコン、黄色いバナー、赤いボタンがありました。改善版はブランドのコバルト、ランク用の金色1色、ログアウト用の赤だけです。
• フローティングのタブバー。 5つのタブは残しますが、アイコンスタイルは1種類で、塗りになるのはアクティブなタブだけです。

自分のプロフィール画面を監査する

Figmaファイルを入手する

無料ファイルには両方の画面が入っていて、改善したブロックはコンポーネントになっています。

無料のFigmaファイル

プロフィール画面のリデザイン、ビフォーアフター

両方の画面とすべてのパーツをFigmaコンポーネントで収録。無料、閲覧専用、ドラフトに複製して使えます。

Figmaで開く

FAQ

アプリのプロフィール画面には何を表示すべきですか?

その人が誰か、何を持っているか、そして設定を変える手段です。IDは短い1行に、ポイント・残高・プランはカードに入れ、設定はその下にグループ化して置きます。

プロフィール画面のログアウトボタンはどこに置くべきですか?

設定の最下部、最後のグループの下に、プレーンテキストとして置きます。たどり着けるべきですが、ページで最も目立つコントロールには決してしないでください。

設定リストは何行にするのがよいですか?

最初のビューで5〜7行が目安です。法的ページやアプリ評価のようなめったに使わないものは、Help and Legalのような1行の奥に移します。

設定の行は現在の値を表示すべきですか?

はい。「English」や「Visa ·· 4242」のような値は、タップせずに疑問へ答えてくれます。単純なオンオフの選択なら、行よりスイッチのほうが適しています。

プロフィール画面でロイヤルティポイントはどう見せればよいですか?

数字を大きく、現在のランクをタグにして、次に何があるかを一文で示すカードにします。たとえば「Platinumまであと520ポイント」です。引き算は読む人の代わりにやってあげましょう。

出典

• 両方の画面は自作で、Figmaでデザインし計測したものです。アプリ、会員、数字はすべて架空です。
• 文字サイズはAppleのHuman Interface GuidelinesにあるiOSのタイプスケールに従っています。
• アバター写真:Pexelsの Tamra Creatives Agency。
• 最初はApp Brainyでカルーセル投稿として公開しました。