الانتقال من تصميم متجر على الويب إلى تصميم تطبيق للمتجر نفسه ليس نقلاً للشاشات بمقاس أصغر. التطبيق يُثبَّت لا يُزار، ويُفتح بيد واحدة في لحظات مقتطعة، ويُحذف بنقرتين إن أزعج مستخدمه. كان دوري في تطبيق «باسورد موبايل ستور» على أندرويد و iOS تصميم واجهات التطبيق وتجربة الاستخدام داخله.
لماذا لا يُنسخ الموقع إلى تطبيق
الخطأ الأول في مشاريع التطبيقات هو معاملة التطبيق كنسخة مضغوطة من الموقع. الفارق ليس في المقاس بل في العلاقة: الموقع يُزار مرة عند الحاجة، أما التطبيق فيحتلّ مساحة على شاشة المستخدم ويطالبه بتبرير بقائه هناك باستمرار.
هذا غيّر أولوياتي بالكامل. على الموقع أصمّم لزائر أول قد لا يعود، فأشرح وأطمئن وأقنع. في التطبيق أصمّم لمستخدم قرّر بالفعل، فالمطلوب سرعة الوصول لا الإقناع. كل شاشة تعريفية أو ترحيبية جرّبتها ثم حذفتها، لأنها تقف بين مستخدم عائد وبين ما جاء من أجله — وهو أسوأ ما يمكن أن يفعله التصميم.
منصّتان بعادتين مختلفتين
التطبيق يعمل على أندرويد و iOS، ولكل منهما عادات راسخة في ذهن مستخدمه. زر الرجوع، موضع الإجراءات الأساسية، سلوك القوائم، شكل مربّعات الحوار — كلها تختلف، ومخالفتها تجعل التطبيق يبدو غريباً على المنصّة حتى لو كان جميلاً في ذاته.
القرار الذي اتخذته: هوية بصرية واحدة موحّدة عبر المنصّتين، مع احترام أنماط التفاعل الأصلية لكل منها. اللون والخط والأيقونات والإيقاع البصري متطابقة تماماً، أما سلوك التنقّل والرجوع فيتبع كل منصّة عرفها. المستخدم يجب أن يشعر أنه في تطبيق العلامة نفسها، وفي الوقت ذاته أن التطبيق يتصرّف كما يتوقّع من أي تطبيق على هاتفه.
التنقّل السفلي وعدد التبويبات
شريط التنقّل السفلي هو العمود الفقري للتطبيق، وعدد عناصره قرار مصيري. أكثر من خمسة تبويبات يجعل كلاً منها ضيقاً يصعب إصابته بالإبهام، وأقلّ من ثلاثة يدفع بالوظائف إلى قوائم مخفية لا يجدها أحد.
استقرّيت على العدد الذي يغطّي المهام الأساسية فقط: التصفّح، البحث، السلة، والحساب. كل ما عدا ذلك — الطلبات السابقة، المفضّلة، الإعدادات — نُقل داخل شاشة الحساب. القاعدة التي أعمل بها أن شريط التنقّل مخصّص لما يُستخدم في كل جلسة تقريباً، لا لكل ما يمكن للتطبيق فعله.
التصفّح على مساحة ضيقة
شبكة المنتجات على شاشة هاتف تتحمّل عمودين لا أكثر. هذا يعني أن كل بطاقة تملك مساحة ضئيلة جداً، وكل عنصر داخلها يجب أن يبرّر وجوده بشكل قاطع.
حصرت البطاقة في الصورة والاسم والسعر وزر الإضافة، وحذفت كل ما عداها. واعتمدت التمرير اللانهائي بدل الترقيم بالصفحات، لأن النقر على «الصفحة التالية» على الجوال حركة معطِّلة تكسر تدفّق التصفّح. لكنني حرصت على أن يظل موضع المستخدم محفوظاً عند الرجوع من صفحة منتج — فقدان الموضع بعد تمرير طويل من أكثر ما يثير الإحباط في تطبيقات المتاجر، ويدفع للخروج مباشرة.
| البند | التفاصيل |
|---|---|
| المشروع | تطبيق باسورد موبايل ستور |
| المنصّات | أندرويد و iOS |
| دوري في المشروع | تصميم واجهات التطبيق وتجربة الاستخدام |
| بنية التنقّل | شريط سفلي بأربعة مسارات أساسية |
| محور التصميم | سرعة الوصول للمستخدم العائد لا إقناع الزائر الجديد |
| الاتجاه | واجهة عربية من اليمين لليسار |
| سنة التنفيذ | 2025 |
الشراء داخل التطبيق
مسار الشراء في التطبيق أقصر منه على الويب لأن المستخدم مسجّل الدخول غالباً، وبياناته محفوظة. هذه ميزة التطبيق الأساسية، وإهدارها بإعادة طلب البيانات في كل مرة يلغي سبب وجوده أصلاً.
صمّمت المسار ليستفيد من ذلك: العنوان ووسيلة الدفع محفوظان وقابلان للتعديل بنقرة، والمراجعة النهائية في شاشة واحدة تعرض كل شيء دفعة واحدة. وضعت زر التأكيد النهائي في متناول الإبهام أسفل الشاشة، وميّزته بوضوح عن أي زر آخر — فآخر ما يحتاجه المستخدم في لحظة الدفع هو التردّد بين زرّين متشابهين.
الإشعارات: الخط الفاصل بين التذكير والإزعاج
الإشعارات هي الميزة التي تبرّر وجود التطبيق على الهاتف، وهي في الوقت نفسه السبب الأول لحذفه. الفارق بين الاثنين رفيع جداً.
القواعد التصميمية التي وضعتها: لا يُطلب إذن الإشعارات عند أول فتح للتطبيق قبل أن يفهم المستخدم قيمتها، بل بعد أول تفاعل حقيقي. والإشعار يجب أن يحمل معلومة تخصّ المستخدم — حالة طلبه، توفّر منتج انتظره — لا رسالة ترويجية عامة. طلب الإذن في اللحظة الخاطئة يُنتج رفضاً دائماً يصعب التراجع عنه لاحقاً.
الحالات التي لا يفكّر فيها أحد
الجزء الأكبر من عمل تصميم التطبيقات ليس في الشاشة المثالية، بل في كل ما عداها: شاشة تُحمّل بيانات، سلة فارغة، بحث بلا نتائج، طلب فشل، انقطاع الاتصال في منتصف عملية.
صمّمت كلاً من هذه الحالات صراحة. حالات التحميل استخدمت فيها هياكل بديلة بشكل المحتوى القادم بدل مؤشّر دوّار، لأنها تُشعر بالسرعة وتمنع قفز التخطيط عند وصول البيانات. والحالات الفارغة لم أتركها فراغاً بل جعلتها توجّه المستخدم لخطوة تالية. أما انقطاع الشبكة فهو الحالة الأهم في السوق المصري تحديداً، حيث تتفاوت جودة الاتصال بشكل كبير، ورسالة واضحة مع إمكانية إعادة المحاولة تحفظ الطلب بدل أن تضيّعه.
اللمس والحركة
على الويب يوجد مؤشّر يحوم فيكشف ما هو قابل للنقر. على الهاتف لا يوجد شيء من ذلك، وكل عنصر تفاعلي يجب أن يُعلن عن نفسه بصرياً، وأن يستجيب فور لمسه.
ضبطت مساحات اللمس بحيث لا تقلّ عن الحدّ الآمن حتى لو كان العنصر المرئي أصغر، لأن الإبهام أقلّ دقة من المؤشّر بكثير. وأضفت استجابة فورية لكل لمسة — تغيّر بسيط في اللون أو الحجم — لأن غياب الاستجابة يجعل المستخدم يظنّ أن اللمسة لم تُسجَّل فيكرّرها، وينتهي الأمر بطلبين بدل واحد. أما الحركات الانتقالية فأبقيتها قصيرة جداً؛ الحركة الطويلة تبدو أنيقة في العرض الأول وتصبح عائقاً في الاستخدام اليومي.
أصول المتجر: الأيقونة ولقطات الشاشة
الجزء المنسي في مشاريع التطبيقات هو ما يراه المستخدم قبل التثبيت أصلاً: أيقونة التطبيق ولقطات الشاشة في المتجر. هذه هي الواجهة الحقيقية الأولى، وأداؤها يحدّد إن كان التطبيق سيُثبَّت.
الأيقونة صُمّمت لتظلّ مقروءة عند أصغر مقاس تظهر به على الشاشة، وهو اختبار يسقط فيه كثير من الأيقونات التفصيلية التي تبدو ممتازة بحجم كبير. ولقطات الشاشة لم تُؤخذ كما هي من التطبيق، بل رُتّبت لتحكي ما يفعله التطبيق بترتيب مفهوم، لأن المستخدم في المتجر يمرّ عليها في ثوانٍ ولا يقرأ الوصف المكتوب غالباً.
أسئلة عن تصميم التطبيقات
لماذا لا تكفي نسخة الموقع على الجوال؟
لأن العلاقة مختلفة. التطبيق يحتفظ بالجلسة والبيانات والتفضيلات، ويتيح الإشعارات، ويُفتح من الشاشة الرئيسية بنقرة واحدة. هذه فوارق في السلوك لا في الشكل، وهي ما يبرّر وجوده.
هل يجب أن يتطابق التطبيق على المنصّتين؟
الهوية البصرية نعم، أنماط التفاعل لا. توحيد كل شيء يجعل التطبيق يبدو غريباً على إحدى المنصّتين، والمستخدم يشعر بهذا الاختلاف حتى لو لم يستطع تسميته.
ما أكثر ما يُهمَل في تصميم التطبيقات؟
الحالات غير المثالية: انقطاع الشبكة، القوائم الفارغة، فشل العملية. الشاشة المثالية يصمّمها الجميع، والفرق بين تطبيق محترم وآخر مزعج يظهر في اللحظات التي لا يسير فيها كل شيء كما يُفترض.
