تصميم تطبيق توصيل الطعام: إعادة تصميم الشاشة الرئيسية، قبل وبعد
شاشة رئيسية مبتدئة لتطبيق توصيل طعام يصرخ فيها كل عنصر، ثم الشاشة نفسها بعد الإصلاح. أربعة تغييرات رئيسية وخمسة أصغر، والسبب وراء كل واحد، وملف Figma المجاني.
للشاشة الرئيسية في تطبيق توصيل الطعام مهمة واحدة: أن توصل شخصًا جائعًا إلى مطعم في ثوانٍ قليلة. المسودة الأولى أدناه تفشل في هذه المهمة، لا لأن جزءًا واحدًا منها قبيح، بل لأن كل جزء يطلب الانتباه في وقت واحد. الحل لم يكن ميزات جديدة ولا أسلوبًا جديدًا. كان إزالة الأشياء حتى صار كل جزء يقول شيئًا واحدًا.
الشاشة كاملة، قبل وبعد
مسودة المبتدئ
بعد الإصلاح
عدّ ما على العين أن تعالجه قبل أن تصل إلى أول مطعم. على اليسار: عنوان شارع كامل، وأيقونتان في الرأس، وشريط بحث بأيقونتين إضافيتين، ولافتة متدرجة بثلاثة أسطر نصية وزر، ونقاط دوّارة، وخمس حلقات بخمسة ألوان، وعنوان قسم بأيقونة لهب، وثلاث شارات على صورة واحدة. على اليمين: اسم مكان، وسلة، وشريط بحث، وخمس بلاطات، وعرض واحد وبطاقة واحدة.
لا ينقص اليمين أي ميزة كانت في اليسار. العنوان والبحث والتصنيفات والعرض والمطاعم كلها ما زالت هناك. كل واحد منها فقط توقف عن منافسة الآخرين.
| مسودة المبتدئ | بعد الإصلاح | |
|---|---|---|
| الهوامش الجانبية | 12 px يسارًا، 16 px يمينًا | 20 px على الجانبين |
| أحجام النص | من 9 إلى 30 px، بلا نظام | أنماط نص iOS، من 11 إلى 22 pt |
| ألوان حلقات التصنيفات | 5 | 1، فقط على البلاطة المحددة |
| الشارات على أول بطاقة | 3 | 1 |
| المعلومات تحت اسم المطعم | 6 | 2 |
| التبويبات | 5 | 4 |
الإصلاح 1: قل أين، بكلمة واحدة
قبل
بعد
تعرض المسودة عنوان الشارع كاملًا، 221B Baker Street، مقطوعًا في منتصف كلمة بخط صغير بجانب دبوس. أما الإصلاح فيعرض الاسم الذي أعطاه الشخص لذلك العنوان، "المنزل"، بخط كبير، مع سهم صغير يقول إنه قابل للتغيير.
لا أحد يفتح تطبيق توصيل ليقرأ عنوانه. كل ما يحتاجه هو تأكيد أمر واحد: هل سيذهب الطلب إلى المكان الصحيح؟ تسمية اختارها بنفسه، المنزل، العمل، بيت ماما، تجيب أسرع من اسم شارع، وتبقى مقروءة مهما كان الطول لأنها كلمة واحدة. العنوان الكامل مكانه على بعد نقرة، في الشاشة التي تعدّله فيها.
الإصلاح يحذف أيضًا أيقونة الملف الشخصي من الرأس. المسودة كانت تضعها مرتين، مرة في الأعلى ومرة كتبويب الحساب. بابان إلى الغرفة نفسها يجعلان الناس يتساءلون إن كانا يؤديان إلى غرفتين مختلفتين.
الإصلاح 2: شكل واحد، حالة تحديد واحدة
قبل
بعد
قبل، كل تصنيف من الخمسة داخل دائرة بحلقته الملونة الخاصة: أصفر، أخضر، أزرق، وردي، بنفسجي. بعد، تتشارك البلاطات شكلًا واحدًا وإطارًا محايدًا واحدًا، والمحددة وحدها، البيتزا، تنال الأحمر الخاص بالعلامة على حدّها وتسميتها.
اللون في الواجهة إشارة، وخمسة ألوان ترسل خمس إشارات. القارئ الذي يمسح الصف عليه أن يسأل ماذا يعني الأخضر ولماذا السوشي أزرق. الجواب لا شيء، وهذه هي المشكلة: زخرفة تبدو كأنها معلومة.
حين يُنفق اللون على شيء واحد فقط، يصير له معنى. بلاطة حمراء واحدة تقول "أنت هنا" دون كلمة. وتتكفل الصور بالباقي، لأن صور الطعام أصلًا أكثر ما في الشاشة ألوانًا ولا تحتاج مساعدة.
الإصلاح 3: عرض واحد، رسالة واحدة
قبل
بعد
تكدّس لافتة المسودة "MEGA SALE!" والعرض والرمز والحد الأدنى للطلب و"تطبق الشروط والأحكام" بخط صغير جدًا، ثم زرًا. أما الإصلاح فيُبقي 50% OFF ويقول ثلاثة أشياء: متى (اليوم فقط)، ولمن (طلبك الأول فوق 20$)، والرمز، كزر يمكن نسخه.
العرض لم يكن المشكلة. خصم 50% سبب وجيه للطلب، والإصلاح يُبقيه بالحجم نفسه.
ما تغيّر هو كل ما حوله. "MEGA SALE!" و"50% OFF" قالا الشيء نفسه مرتين. والخط الصغير حشر أربع حقائق في سطر واحد بحجم 9 px تفصلها خطوط. وزر "اطلب الآن" لم يكن له وجهة، لأنه لا يوجد مطعم واحد يُطلب منه بعد.
الرمز الآن هو الإجراء. النقر عليه ينسخ YUMMY50، وهو الشيء الوحيد الذي يحتاج الشخص حمله من هذه اللافتة إلى صفحة الدفع. والشروط تنتقل أيضًا إلى صفحة الدفع، حيث تنطبق فعلًا.
الصورة تغيّرت كذلك. المسودة تقصّ البرغر في دائرة تطفو على تدرج برتقالي. والإصلاح يصوّره على الأحمر الخاص بالعلامة، فيجلس الطعام على البطاقة نفسها بدل ملصق فوقها.
الإصلاح 4: شارة واحدة، معلومتان
قبل
بعد
قبل، تحمل الصورة ثلاث شارات (توصيل مجاني، خصم 20%، ممول) ويسرد النص تحتها المطابخ ووقت التوصيل والرسوم ومستوى السعر والحد الأدنى للطلب وساعات العمل. بعد، شارة واحدة والاسم والتقييم ومعلومتان: كم يستغرق وكم يكلّف.
تُقرأ بطاقة المطعم في القائمة في نحو ثانية، وفي هذه الثانية يقرر الشخص أمرين: هل أريد هذا الطعام، وهل يستحق الانتظار والرسوم. البطاقة بعد الإصلاح تجيب عن هذين بالضبط. الصورة تجيب عن الأول. و"من 25 إلى 35 دقيقة، توصيل 2.99$" تجيب عن الثاني.
كل ما عدا ذلك في البطاقة القديمة معلومات حقيقية، لكنها ليست معلومات النظرة الأولى. قائمة المطابخ ظاهرة أصلًا في الصورة. والحد الأدنى للطلب 15$ وموعد الإغلاق 11 مساءً لا يهمان إلا بعد الاختيار، فمكانهما صفحة المطعم نفسه.
"ممول" لمصلحة المطعم لا العميل، وثلاث شارات جنبًا إلى جنب تلغي بعضها. شارة واحدة، تُختار بالأولوية، هي التي تُقرأ.
خمسة إصلاحات أصغر
الأجزاء الأربعة أعلاه هي الكبرى. وهذه التغييرات الخمسة مقصودة بالقدر نفسه:
- هامش واحد. استخدمت المسودة 12 px يسارًا و16 px يمينًا، فلم يصطف شيء مع شيء. الإصلاح يستخدم 20 px على الجانبين، وكل حافة في الشاشة تقع على ذلك الخط.
- نظام للخطوط. كان في المسودة نص من 9 إلى 30 px دون درجات بينها. الإصلاح يستخدم أنماط نص iOS، من 11 إلى 22 pt، فلكل حجم دور ولا شيء أصغر من أن يُقرأ.
- شريط بحث أهدأ. كان في بحث المسودة ميكروفون وأيقونة فلتر داخله، ونص إرشادي طويل لدرجة القطع. الإصلاح يُبقي أيقونة واحدة وعبارة أقصر: "أطباق أو مطاعم أو مطابخ".
- بلا نقاط دوّارة. النقاط تحت اللافتة تعد بلافتات أخرى. معظم الناس لا يسحبونها أبدًا، والنقاط تضيف شيئًا آخر للنظر. عرض واحد لا يحتاج نقاطًا.
- أربعة تبويبات لا خمسة. غادرت المفضلة شريط التبويبات. الحفظ ما زال يتم بقلب كل بطاقة، وأربعة تبويبات تمنح كل واحد مساحة أكبر وهدفًا أسهل للنقر.
راجع شاشتك الرئيسية
ضع شاشة تطبيقك الرئيسية بجانب هذه القائمة. كل "لا" هو جزء يصرخ.
| السؤال | لماذا يهم |
|---|---|
| هل يعرف الشخص أين يوصل التطبيق بنظرة واحدة؟ | يتحقق منه في كل مرة، فاجعله كلمة واحدة |
| هل للون معنى في كل موضع يُستخدم فيه؟ | اللون الزخرفي يُقرأ كإشارة |
| هل يقول كل عرض عرضًا واحدًا، مرة واحدة؟ | الادعاءات المكررة والخط الصغير يُتجاهلان |
| هل يمكن الحكم على بطاقة في ثانية؟ | اختر المعلومتين اللتين تحسمان الطلب |
| هل تصطف كل الحواف على هامش واحد؟ | عدم المحاذاة يُقرأ كعمل غير مكتمل |
| هل كل حجم نص من سلم واحد؟ | الأحجام العشوائية تجعل التراتبية مستحيلة |
احصل على ملف Figma
الملف المجاني يضم الشاشتين كمكونات، وكل إصلاح كزوج قبل وبعد، ومتغيرات الألوان وأنماط نص iOS.
ملف Figma مجاني
الشاشة الرئيسية لتوصيل الطعام، قبل وبعد
الشاشتان وكل جزء مُصلَح كمكونات Figma. مجاني، للعرض فقط، انسخه إلى مسوداتك.
الأسئلة الشائعة
ما الذي يجب أن تعرضه الشاشة الرئيسية لتطبيق توصيل الطعام أولًا؟
أين يذهب الطلب، وشريط بحث، والتصنيفات وعرض واحد، ثم المطاعم. كل بطاقة مطعم تحتاج صورة والاسم والتقييم ووقت التوصيل ورسوم التوصيل.
كم شارة يجب أن تحمل بطاقة المطعم؟
واحدة. ثلاث شارات جنبًا إلى جنب تلغي بعضها؛ اختر الأهم للعميل، مثل التوصيل المجاني.
هل يجب أن يستخدم تطبيق الطعام لونًا مختلفًا لكل تصنيف؟
لا. أعطِ كل تصنيف الشكل نفسه وإطارًا محايدًا، وأنفق لون العلامة على المحدد فقط، ليعني اللون "أنت هنا".
كيف تصمم لافتة عرض تحقق تحويلًا؟
قل عرضًا واحدًا مرة واحدة: الخصم ولمن هو والرمز. اجعل الرمز هو الإجراء، قابلًا للنقر للنسخ، وانقل الشروط إلى صفحة الدفع.
كم تبويبًا يجب أن يحوي تطبيق توصيل الطعام؟
أربعة أو خمسة على الأكثر. هنا أعطت الأربعة (الرئيسية، البحث، الطلبات، الحساب) كل تبويب مساحة أكبر، مع تولي القلب على كل بطاقة أمر الحفظ.
المصادر
- الشاشتان من تصميمنا، صُمّمتا وقيستا في Figma. القياسات في الجدول مأخوذة من ملفات Figma.
- صور الطعام عبر Unsplash من Fernando Andrade وsina piryae وMahmoud Fawzy وAnna Pelzer وAlana Harris وThimotius Timmy وPoul Hoang. برغر العرض من Elements Interactive على Pexels، مع استبدال خلفية الاستوديو بالأحمر الخاص بالعلامة عبر اللون، دون ذكاء اصطناعي.
- أحجام نص iOS من Human Interface Guidelines, Typography من Apple.
- نُشر أول مرة كاروسيل على 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
