طراحی اپلیکیشن قهوه: بازطراحی صفحه اصلی سفارش، قبل و بعد

آدم اپ قهوه را باز می‌کند تا یک کار انجام دهد: یک نوشیدنی سفارش بدهد و بگیرد. پیش‌نویس اول زیر همه چیزهای درست را دارد، اما همه را یک‌جا فریاد می‌زند: یک خط بلند برای شعبه، بنری که درباره امتیاز داد می‌زند، هشت تب و یک دکمه ADD زیر هر عکس. نسخه اصلاح‌شده شعبه، امتیاز و منو را نگه می‌دارد و به هرکدام یک جای ساده و آرام می‌دهد.

کل صفحه، قبل و بعد

پیش‌نویس مبتدی

اصلاح‌شده

در سمت چپ، آدم با یک خوشامد، یک خط شعبه، بنر امتیاز، نوار تب و شبکه‌ای از دکمه‌ها روبه‌رو می‌شود که همه با یک بلندی صدا حرف می‌زنند. در سمت راست، در هر بلوک یک چیز برای خواندن هست و در هر ردیف یک کنش.

اصلاح ۱: یک بار بگو کجا

قبل

بعد

خط شعبه فشرده در یک جعبه، در برابر کارت تحویل.

پیش‌نویس شعبه را در یک خط فشرده کرده است: «Downtown Store - 123 Main St (0.3 mi) - Open until 9PM»، ۵۴ کاراکتر با حروف ریز در جعبه‌ای قاب‌دار که آخرش فلش دارد. نام، خیابان، فاصله و ساعت کاری همه هم‌وزن‌اند، پس چشم باید کل خط را بخواند تا آن یک واقعیتی را که لازم دارد پیدا کند.

اصلاح، خط را به یک کارت تحویل تبدیل می‌کند. «Pickup at Downtown» عنوان است، «0.3 mi · Open until 9 pm» یک خط خاکستری زیر آن است، و «Change» سمت راست با آبی برند مثل یک کنش واقعی نشسته. آدرس خیابان در صفحه اصلی نیست. خوشامد به «Good morning, Leo» بزرگ تبدیل شد و علامت‌های تعجب رفتند.

قاعده‌ای که می‌شود تکرار کرد: خط بلند را به یک عنوان، یک جزئیات و یک کنش بشکن. جعبه‌ای با فلش کمتر از کلمه‌ای مثل «Change» می‌گوید «بزن رویم».

اصلاح ۲: امتیاز به‌صورت پیشرفت

قبل

بعد

بنر پرسر و صدا، در برابر نوار پیشرفت.

بنر پیش‌نویس از آبی به زرد کره‌ای محو می‌شود و متن سفیدش روی انتهای زرد نشسته، جایی که خواندنش از همه‌جا سخت‌تر است. می‌گوید «You have 1,250 points! Redeem now for FREE drinks!!!» و دکمه Redeem Now زیرش سفید با متن زرد کم‌رنگ است. می‌گوید امتیاز دارید، اما نمی‌گوید به چیزی چقدر نزدیکید.

اصلاح یک کارت آبی سیر است. «Rewards» و «1,250 points» بالا هستند و خط بزرگ «250 points to a free drink» است. نوار پیشرفت کره‌ای زیرش ۸۳٪ پر می‌شود، یعنی ۱٬۲۵۰ از ۱٬۵۰۰، و خط کوچک می‌گوید نوشیدنی رایگان کجاست. آدم فاصله را می‌بیند، که عدد جالب همان است.

قاعده‌ای که می‌شود تکرار کرد: موجودی امتیاز یک عدد است و پیشرفت یک داستان. داستان را نشان بده و بگذار عدد کنارش بنشیند.

اصلاح ۳: چهار چیپ، یکی انتخاب‌شده

قبل

بعد

هشت تب بیرون‌زده از لبه، در برابر چهار چیپ.

پیش‌نویس هشت دسته دارد: Coffee، Tea، Cold Drinks، Seasonal، Bakery، Breakfast، Merch و Gift Cards. از لبه راست بیرون می‌زنند، پس «Merch» به «Mer» بریده شده و آدم باید به کنار اسکرول کند تا بفهمد بیشتر هم هست. دسته انتخاب‌شده با یک خط زیر نازک مشخص شده.

اصلاح چهار چیپ نشان می‌دهد: All، Coffee، Cold drinks و Bakery. All با آبی کافه پر شده و بقیه سفیدند، پس انتخاب‌شده در یک نگاه معلوم است. دسته‌های دیگر در این صفحه نیستند؛ یک اپ واقعی آن‌ها را در تب Menu نگه می‌دارد، یک ضربه آن‌طرف‌تر.

قاعده‌ای که می‌شود تکرار کرد: ردیف فیلتر باید در صفحه جا شود. اگر برای نشان دادن فهرست خودش اسکرول افقی می‌خواهد، کمتر نشان بده.

اصلاح ۴: یک ردیف برای هر آیتم

قبل

بعد

شبکه‌ای از کارت‌ها با دکمه کره‌ای زیر هرکدام، در برابر سه ردیف.

پیش‌نویس آیتم‌ها را به‌صورت شبکه‌ای از کارت‌ها نشان می‌دهد: عکس بزرگ، نام، قیمت و دکمه کره‌ای «ADD +» با حروف بزرگ. دو ردیف و نیم کارت صفحه را زیر تب‌ها پر می‌کند، رنگ کره‌ای دکمه‌ها زیر هر عکس تکرار می‌شود و لینک «View Menu» زرد کم‌رنگ روی سفید است.

اصلاح هر آیتم را یک ردیف می‌کند با عکس ۶۰ px، نام، یک خط خاکستری و قیمت، و یک «+» گرد آبی سمت راست. سه ردیف در کارتی جا می‌شود که شبکه در آن دو کارت و نیم نشان می‌داد، و تنها دکمه هر ردیف همان دکمه افزودن است. «Full menu» با آبی برند است.

قاعده‌ای که می‌شود تکرار کرد: وقتی همه آیتم‌ها یک کنش دارند، کنش باید کوچک و هم‌تراز باشد تا چشم نام‌ها و قیمت‌ها را در یک لبه پایین بخواند.

اصلاح‌های کوچک‌تر

• یک لبه چپ. حاشیه‌های پیش‌نویس ۱۴ px چپ و ۱۲ px راست بود. اصلاح ۲۰ px در هر دو طرف و ۱۶ px بین بلوک‌ها استفاده می‌کند.
• مقیاس تایپ واقعی. متن از ۹ تا ۱۸ px به اندازه‌های iOS یعنی ۱۱ تا ۲۸ pt رسید.
• چهار تب، نه پنج. Home، Menu، Order، Rewards و Account شد Home، Menu، Rewards و Account. تب Order از نوار رفت.
• پالت چهاررنگ. آبی کافه #2342A8، آبی سیر #15276B، کره‌ای #F3C77A و کرم #F5EFE4 جای گرادیان و زمینه خاکستری را گرفتند.

صفحه سفارش خودتان را بازبینی کنید

سوالات متداول

صفحه اصلی اپ سفارش قهوه اول چه چیزی باید نشان دهد؟

شعبه تحویل روی یک کارت با لینک Change، بعد پیشرفت جوایز، بعد دسته‌ها و آیتم‌های محبوب. آدم باید پیش از اینکه چه چیزی، ببیند کجا سفارش می‌دهد.

بخش امتیاز وفاداری را چطور طراحی کنیم؟

فاصله تا جایزه بعدی را با نوار پیشرفت و یک خط ساده مثل «250 points to a free drink» نشان بده و موجودی را کنارش بگذار.

یک منو چند تب دسته‌بندی باید داشته باشد؟

هرچقدر بدون اسکرول افقی در صفحه جا شود، معمولاً چهار تا. بقیه را در تب Menu بگذار، یک ضربه آن‌طرف‌تر.

منو باید شبکه باشد یا فهرست؟

برای سفارش دادن فهرست ردیفی بهتر است، چون نام‌ها و قیمت‌ها در یک لبه هم‌تراز می‌شوند و هر ردیف فقط یک دکمه افزودن کوچک می‌خواهد. شبکه به درد مرور عکس‌ها می‌خورد.

دکمه افزودن چقدر باید بزرگ باشد؟

برای لمس دست‌کم ۴۴ در ۴۴ پوینت، حتی وقتی دایره قابل‌دیدن کوچک‌تر است. صفحه اصلاح‌شده در هر ردیف یک دکمه گرد آبی دارد.

منابع

• هر دو صفحه از خودمان است، در Figma طراحی و اندازه‌گیری شده. شعبه، آدرس، قیمت‌ها و امتیازها ساختگی‌اند.
• عکس‌های منو از Pexels، از Duc Nguyen، Melissa Jansen van Rensburg، Marcelo Verfe، Juan Pablo Serrano، Skyler Ewing و Vinícius Vieira ft.
• Apple Human Interface Guidelines: Typography، برای اندازه‌های متن iOS که در صفحه اصلاح‌شده استفاده شده.
• Apple Human Interface Guidelines: Accessibility، برای اندازه هدف لمسی ۴۴ pt.
• Kivetz, Urminsky and Zheng, The Goal-Gradient Hypothesis Resurrected، Journal of Marketing Research، 2006، درباره خرید بیشتر مشتری‌ها هنگام پر شدن کارت وفاداری.
• ابتدا به‌صورت کاروسل در App Brainy منتشر شد.