طراحی اپ خدمات خانگی: بازطراحی صفحه اصلی، قبل و بعد
صفحه اصلی یک اپ خدمات خانگی با دوازده دستهبندی ریز، بنر تخفیف قرمز و متخصصانی که در حقایق ۸ پیکسلی دفن شده‌اند، و همان صفحه پس از اصلاح: یک سؤال ساده، یک خط پیشنهاد باریک، سه کاشی و یک «بیشتر»، و متخصصان با نام، امتیاز و نوبت خالی بعدی. تک‌تک تغییرها کنار هم، با فایل رایگان Figma.
صفحه اصلی یک اپ خدمات خانگی فقط یک وظیفه دارد: کاربر را با کمترین تعداد ضربه از «یه چیزی خراب شده» به یک متخصص رزروشده برساند. پیش‌نویس اول زیر همه چیزی را که صاحب‌خانه لازم دارد دارد، اما او را مجبور به گشتن میکند. از او می‌خواهد «خدمات، دسته‌بندی‌ها، متخصصان» را جستوجو کند، تخفیف ۳۰ درصدی را در بنر قرمز فریاد می‌زند، دوازده دستهبندی با برچسب ۸ پیکسلی می‌چیند و هر متخصص را زیر چند خط حقیقت ۸ پیکسلی دفن میکند.
اصلاح، همه کارکردها را نگه می‌دارد و فقط ترتیب را عوض میکند. اول یک سؤال ساده، پیشنهاد کوچک میشود به یک خط، سه دستهبندی بار صفحه را می‌کشند و هر متخصص فقط همان چیزی را نشان میدهد که مردم بر اساسش انتخاب می‌کنند.
کل صفحه، قبل و بعد
پیش‌نویس تازه‌کار
اصلاح‌شده
سمت چپ، ده‌ها چیز با وزن یکسان توجه می‌خواهند. بنر قرمز بلندترین صداست، دوازده کاشی بزرگ‌ترین بلوک است و آدم‌های واقعی‌ای که کار را انجام می‌دهند ته صفحه نشسته‌اند، با متنی آن‌قدر ریز که باید چشم‌ها را تنگ کرد.
سمت راست، صفحه به همان ترتیبی خوانده میشود که صاحب‌خانه فکر میکند: چه چیزی خراب است، تخفیفی هست یا نه، چه نوع کاری است، چه کسی می‌تواند بیاید. متن ۱۲ تا ۱۸ پیکسل است در برابر ۸ تا ۱۵ پیکسل پیش‌نویس، حاشیه از هر دو طرف ۲۰ است و هیچ چیزی توی کارت نیست.
چه چیزی تغییر کرد، با اندازه‌گیری
| پیش‌نویس تازه‌کار | اصلاح‌شده | |
|---|---|---|
| جستوجو | فیلد ۳۲ پیکسلی، متن راهنما «جست‌وجوی خدمات، دسته‌بندی‌ها، متخصصان...» | فیلد خاکستری ۴۸ پیکسلی، «چی خراب شده؟»، میکروفون حفظ شده |
| پیشنهاد | بنر قرمز، «۳۰٪ تخفیف اولین رزرو!!!»، متن ریز، دکمه «همین حالا رزرو کن» | یک خط زرد ۴۸ پیکسلی، «۳۰٪ تخفیف اولین تعمیر شما · FIX30» |
| دسته‌بندی‌ها | دوازده کاشی، آیکن ۱۸ پیکسلی، برچسب ۸ پیکسلی | سه کاشی و یک «بیشتر»، آیکن ۲۶ پیکسلی، برچسب ۱۲ پیکسلی |
| متخصصان | چهار خط حقیقت ۸ پیکسلی، دکمه رزرو با حروف درشت | نام، یک خط امتیاز، نوبت خالی بعدی، یک دکمه رزرو ۳۴ پیکسلی |
| حاشیه‌ها | ۱۴ چپ، ۱۲ راست | ۲۰ از هر دو طرف |
| تب‌ها | پنج تا، آیکن‌های ترکیبی پر و توخالی | چهار تا، یک سبک، یک خط مویی بالای آن |
اصلاح اول: یک سؤال ساده بپرسید
قبل
بعد
یک فیلد جست‌وجوی باریک و خط‌دار با متن «جست‌وجوی خدمات، دسته‌بندی‌ها، متخصصان» و میکروفون، بالای یک خط جست‌وجوهای پرطرفدار: تعمیر نشتی، سرویس کولر، نظافت عمیق، پنکه سقفی. در برابر یک فیلد بلند خاکستری با ذره‌بین، عبارت «چی خراب شده؟» و میکروفون.
«جست‌وجوی خدمات، دسته‌بندی‌ها، متخصصان» برچسب یک پایگاه داده است. از کاربر می‌خواهد قبل از تایپ کردن یک کلمه تصمیم بگیرد دنبال خدمت است، دستهبندی یا یک آدم. هیچ‌کس وقتی وارد اپ لوله‌کشی میشود این‌طور فکر نمی‌کند. او فکر میکند «سینک نشتی داره».
«چی خراب شده؟» همان سؤالی است که اپ برای پاسخ دادن به آن وجود دارد، پس کاربر می‌تواند مشکل را با کلمات خودش بنویسد. فیلد از ۳۲ به ۴۸ پیکسل بزرگ میشود تا هدف لمس واقعی باشد و میکروفون برای وقتی که دست خیس است می‌ماند. جست‌وجوهای پرطرفدار، یعنی تعمیر نشتی، سرویس کولر، نظافت عمیق و پنکه سقفی، با لمس فیلد باز می‌شوند، پس چیزی از دست نمی‌رود و صفحه یک خط متن ۹ پیکسلی را کم میکند.
قاعده برای استفاده مجدد: متن راهنما را مشکل کاربر بنویسید، نه معماری اطلاعات خودتان.
اصلاح دوم: بنر را به یک خط تبدیل کنید
قبل
بعد
یک بنر قرمز با آیکن برچسب، متن «۳۰٪ تخفیف اولین رزرو» با حروف درشت و سه علامت تعجب، متن ریز «کد FIX30 را هنگام پرداخت وارد کنید، فقط کاربران جدید، شرایط اعمال میشود» و یک دکمه زرد «همین حالا رزرو کن». در برابر یک خط باریک زرد با متن «۳۰٪ تخفیف اولین تعمیر شما، FIX30» و یک فلش.
بنر قرمز سه کار دارد و هیچ‌کدام را خوب انجام نمی‌دهد. قرمز شبیه خطا یا هشدار خوانده میشود، علامتهای تعجب شبیه اسپم‌اند و متن ریز تنها جایی است که کد در آن زندگی میکند. دکمه «همین حالا رزرو کن» آن هم با دکمههای رزرو متخصصان پایین‌تر رقابت میکند.
خط اصلاح‌شده همان حرف را در یک نفس می‌گوید: تخفیف، مخصوص چه کسی است و کد. زرد است، یعنی تنها رنگ اقدام اپ، و کل خط خودش دکمه است، پس فلش جای «همین حالا رزرو کن» را میگیرد. نه عکسی هست و نه فریادی. کاربر تازه‌وارد هنوز تخفیف را می‌بیند و کاربر قدیمی هر بار که اپ را باز میکند سر او داد زده نمی‌شود.
قاعده برای استفاده مجدد: پیشنهاد یک خط است، نه بیلبورد. کد را به کاربر بدهید و خود خط را قابل لمس کنید.
اصلاح سوم: دوازده دستهبندی را به سه‌تا و یک «بیشتر» برسانید
قبل
بعد
عنوان «همه دسته‌بندی‌ها» با لینک «مشاهده همه» بالای دوازده کاشی کوچک خط‌دار در سه ردیف چهارتایی، هرکدام با آیکن رنگی متفاوت و برچسب ۸ پیکسلی: لوله‌کشی، برق، نظافت، نقاشی، نجاری، تعمیر کولر، لوازم خانگی، سمپاشی، اثاث‌کشی، باغبانی، قفل‌سازی، خانه هوشمند. در برابر چهار کاشی بزرگ‌تر خط‌دار با آیکن‌های ساده به رنگ جوهری: لوله‌کشی، برق، نظافت و بیشتر.
دوازده آیکن رنگی در یک شبکه منظم به نظر می‌رسند، اما کاربر باید دوازده برچسب را بخواند تا مال خودش را پیدا کند. بدتر اینکه صاحب‌خانه‌ای که نشتی دارد اغلب نمی‌داند مشکلش به کدام دستهبندی تعلق دارد. سقفی که چکه میکند لوله‌کشی است، نقاشی یا نجاری؟ یک منوی پهن به این آدم کمک نمی‌کند، حدس زدن را سخت‌تر میکند.
اصلاح در دو سطح کار میکند. فیلد جستوجو مشکل را با کلمات ساده میگیرد، پس کاربری که دستهبندی را نمی‌داند هیچ‌وقت مجبور نیست حدس بزند. سه کاشی رایج‌ترین کارها را پوشش می‌دهند و «بیشتر» نه دستهبندی دیگر را باز میکند: نقاشی، نجاری، تعمیر کولر، لوازم خانگی، سمپاشی، اثاث‌کشی، باغبانی، قفل‌سازی و خانه هوشمند. کاشی‌ها ۷۶ در ۷۲ هستند با آیکن ۲۶ پیکسلی و برچسب ۱۲ پیکسلی، و آیکن‌ها به رنگ ساده جوهری درآمده‌اند، چون دوازده رنگ متفاوت آیکن نویز بود، نه اطلاعات.
چیزی حذف نشده است. هر دوازده دستهبندی هنوز یک ضربه فاصله دارند. Thumbtack همین رویکرد را دارد: اول جست‌وجوی کار و زیر آن فهرست کوتاهی از دسته‌بندی‌ها.
قاعده برای استفاده مجدد: تعداد کمی را که بیشتر مردم لازم دارند نشان دهید و بقیه را پشت «بیشتر» بگذارید. بگذارید جستوجو سراغ کسانی برود که دستهبندی را نمیدانند.
اصلاح چهارم: هر متخصص را همان‌طور نشان دهید که مردم انتخابش می‌کنند
قبل
بعد
سه متخصص، هرکدام با عکس ۴۰ پیکسلی، یک نام، یک خط خاکستری مهارتها مثل لوله‌کشی، تعمیر نشتی، آبگرم‌کن، بازکردن مسیر فاضلاب، یک خط «۴٫۹ (۳۱۲)، ۱٬۲۴۰ کار انجامشده، ۱٫۲ مایل، ساعتی ۴۵ دلار»، یک خط «در دسترس دوشنبه تا شنبه، ۸ صبح تا ۶ عصر» و یک دکمه رزرو با حروف درشت. در برابر سه متخصص با عکس ۴۸ پیکسلی، یک نام، یک ستاره با ۴٫۹، ۱٬۲۴۰ کار و ساعتی ۴۵ دلار، و نوبت خالی بعدی به رنگ سبز، مثل «نوبت بعدی امروز، ۳ بعدازظهر»، با دکمه رزرو.
پیش‌نویس هر چه درباره هر متخصص می‌داند فهرست کرده است: مهارتها، امتیاز، تعداد نظرها، کارها، فاصله، نرخ و ساعتهای هفتگی. این هفت حقیقت است با متن ۸ پیکسلی و سه متخصص عین هم به نظر می‌رسند، پس کاربر راهی برای مقایسه‌شان ندارد. خط ساعت‌ها برای هر سه یکسان است، پس هیچ اطلاعاتی نمی‌دهد.
مردم متخصص را بر اساس سه چیز انتخاب می‌کنند: او کیست، آیا دیگران به او اعتماد دارند و کی می‌تواند بیاید. پس اصلاح یک نام نشان میدهد، یک خط «۴٫۹ · ۱٬۲۴۰ کار · ۴۵ دلار در ساعت» و نوبت خالی بعدی به رنگ سبز، مثل «نوبت بعدی امروز، ۳ بعدازظهر». زمان همان حقیقت تازه است و ساعتهای کلی هفتگی را با چیزی که رزرو واقعاً لازم دارد عوض میکند.
مهارتها، فاصله و ساعتهای کامل به صفحه خود متخصص می‌روند. عکس از ۴۰ به ۴۸ پیکسل بزرگ میشود و دکمه رزرو از ۲۱ به ۳۴ پیکسل ارتفاع می‌رسد، پس هدف لمس واقعی است.
عددها در هر دو صفحه یکی هستند. Minh Tran در هر دو ۴٫۹، ۱٬۲۴۰ کار و ۴۵ دلار در ساعت است.
قاعده برای استفاده مجدد: حقایقی را که مردم بر اساسشان انتخاب می‌کنند نشان دهید و بقیه را به صفحه جزئیات ببرید.
اصلاح‌های کوچک‌تر
- همه کارکردها می‌مانند. آدرس بلند از «24 Hayes St» و فلشش باز میشود. میکروفون در فیلد جستوجو می‌ماند. تب پیشنهادها در خط پیشنهاد ادغام شد و سبد خرید شد تب رزروها.
- یک حاشیه. پیش‌نویس ۱۴ پیکسل چپ و ۱۲ پیکسل راست دارد. صفحه اصلاح‌شده از هر دو طرف ۲۰ استفاده میکند.
- یک رنگ تأکید. زرد رنگ اقدام است، روی پیشنهاد و هر دکمه رزرو. در پیش‌نویس، قرمز، زرد و دوازده رنگ آیکن همه با هم رقابت می‌کنند.
- چهار تب، یک سبک آیکن. پنج تب با آیکن‌های ترکیبی پر و توخالی میشود چهار تب در یک سبک، روی نوار تخت ۷۸ پیکسلی با یک خط مویی.
- لوگوتایپ بزرگ‌تر، آدرس کوتاه‌تر. لوگوتایپ به ۲۴ پیکسل بزرگ میشود و آدرس خط خیابان و شهر را حذف میکند، چون کاربر می‌داند کجا زندگی میکند.
- مقیاس نوشتار. متن ۱۲ تا ۱۸ پیکسل است به جای ۸ تا ۱۵ پیکسل.
- «مشاهده همه» می‌ماند. بقیه متخصصان پشت «مشاهده همه» هستند و متخصص سوم از زیر نوار تب‌ها رد میشود تا فهرست بلندتر به نظر برسد.
صفحه خدمات خانگی خودتان را ممیزی کنید
| سؤال | چرا مهم است |
|---|---|
| آیا فیلد جستوجو درباره مشکل کاربر میپرسد؟ | مردم «نشتی» فکر می‌کنند، نه «دستهبندی» |
| آیا کسی که دستهبندی را نمی‌داند باز هم می‌تواند شروع کند؟ | بیشتر کسانی که مشکل دارند نمیدانند |
| آیا پیشنهاد یک خط است و کد دیده میشود؟ | بنر با دکمههای واقعی رقابت میکند |
| قبل از «بیشتر» چند دستهبندی نشان داده میشود؟ | بیش از حدود چهار تا باعث میشود همه همه‌شان را بخوانند |
| آیا هر متخصص نام، امتیاز و زمان نشان میدهد؟ | مردم بر اساس این سه چیز انتخاب می‌کنند |
| آیا دکمه رزرو هدف لمس واقعی است؟ | ۲۱ پیکسل برای انگشت شست کوچک است |
فایل Figma را بگیرید
فایل رایگان شامل پیش‌نویس تازه‌کار، صفحه اصلاح‌شده و هر بخش بهصورت کامپوننت است.
فایل رایگان Figma
بازطراحی صفحه خدمات خانگی، قبل و بعد
هر دو صفحه و هر بخش بهصورت کامپوننت Figma. رایگان، فقط مشاهده، برای ویرایش آن را در پیش‌نویس‌های خود کپی کنید.
سؤالات متداول
صفحه اصلی اپ خدمات خانگی چطور باید طراحی شود؟
با یک سؤال ساده مثل «چی خراب شده؟» شروع کنید، بعد یک خط پیشنهاد باریک، سه یا چهار کاشی دستهبندی با «بیشتر» و فهرست کوتاهی از متخصصان. هر متخصص را با نام، امتیاز و نوبت خالی بعدی نشان دهید، با یک دکمه رزرو.
یک اپ خدمات خانگی چند دستهبندی باید نشان دهد؟
سه یا چهار تا روی صفحه اصلی، و «بیشتر» برای بقیه. دوازده کاشی باعث میشود همه همه برچسب‌ها را بخوانند و کسانی که مشکل دارند اغلب نمیدانند مشکلشان به کدام دستهبندی تعلق دارد.
اپ خدمات باید نوار جستوجو داشته باشد یا دستهبندی؟
هر دو، به همین ترتیب. فیلد جستوجویی که درباره مشکل میپرسد کسانی را میگیرد که دستهبندی را نمیدانند و چند کاشی کارهای رایج را برای کسانی که میدانند پوشش میدهد.
کارت متخصص در بازار خدمات چه چیزی باید نشان دهد؟
یک نام، امتیاز همراه با تعداد کارهای انجامشده و نرخ، و نزدیکترین زمان در دسترس. مهارتها، فاصله و ساعتهای کامل به صفحه خود متخصص تعلق دارند، چون به انتخاب بین سه گزینه کمکی نمیکنند.
تخفیف در اپ خدمات خانگی چطور باید نشان داده شود؟
بهصورت یک خط باریک با پیشنهاد و کدش، که کل خط قابل لمس باشد. بنر قرمز با علامتهای تعجب شبیه اسپم خوانده میشود و دکمهاش با دکمههای رزرو رقابت میکند.
منابع
- هر دو صفحه کار خودمان هستند، در Figma طراحی و اندازه‌گیری شده‌اند. اپ، یعنی Fixly، آدم‌ها، آدرس و قیمت‌ها ساختگی‌اند. پیشنهاد، یعنی ۳۰٪ تخفیف با کد FIX30، و ۴٫۹، ۱٬۲۴۰ کار و ۴۵ دلار در ساعت برای Minh Tran در هر دو صفحه یکی هستند.
- الگوی بررسی‌شده: Thumbtack، با جست‌وجوی کار در ابتدا و فهرست کوتاهی از دسته‌بندی‌ها زیر آن.
- آیکن‌ها از Phosphor (MIT) هستند. عکس‌ها از Pexels هستند: Ivan S، Kindel Media، Son Hoa Nguyen و Mahmoud Yahyaoui.
- ابتدا بهصورت کاروسل در App Brainy منتشر شد.
Want this for your own app? Our team redesigns app screens like this one, from the first audit to the finished components.
Get Started
