لا أحد يحمّل تطبيقًا لأن كوده أنيق. يحمّلونه لأنه يبدو كأنه سيحل مشكلة، ويحتفظون به لأنه يحلها فعلًا، دون أن يجبرهم على التفكير كثيرًا. هذا ما وُجد التصميم من أجله. ليس الزخرفة. بل إزالة الاحتكاك.
ومع ذلك، التصميم هو الجزء من مشروع التطبيق الذي يشعر أصحاب الأعمال بأقل ثقة تجاهه. لا ترى قاعدة بيانات فتثق بالمطورين. وترى شاشة فيكون للجميع رأي. يتحول الرأي إلى «كبّر الشعار» و«هل نجرب أزرق مختلفًا» ولا تُطرح الأسئلة الحقيقية أبدًا.
هذا الدليل لإصلاح ذلك. سنغطي كيف يعمل التصميم في مشروع تطبيق، وكيف يبدو الجيد منه، والعادات التي تهم تحديدًا في الإمارات (العربية، وتدفقات الدفع المحلية، والجمهور المتنوع)، وكيف تقدم ملاحظات تحسّن المنتج بدل أن تُخرجه عن مساره. لا تحتاج إلى تدريب في التصميم لتتابع. إن كنت تدفع مقابل تطبيق، فينبغي أن تعرف مقابل ماذا تدفع.
الواجهة وتجربة المستخدم: كلمتان، مهمة واحدة
يستخدم الناس المصطلحين بالتبادل، وهذا يسبب الالتباس. إليك طريقة سريعة للتفريق:
تجربة المستخدم (UX) هي كيف يعمل التطبيق لشخص ما. أي الشاشات موجودة وبأي ترتيب، وكم نقرة يستغرقها الحجز، وماذا يحدث حين يسوء شيء. إنها عن التدفق والمنطق.
الواجهة (UI) هي كيف يبدو ويُشعر. الألوان والخطوط والأزرار والأيقونات والمسافات والحركة. إنها عن الوضوح والشخصية.
تجربة جيدة بواجهة ضعيفة تبدو جديرة بالثقة لكنها مملة. وواجهة جميلة بتجربة ضعيفة تبدو رائعة في العرض وتحبط كل من يستخدمها. تحتاج الاثنتين، وتحتاجهما بالترتيب الصحيح: التجربة أولًا، المظهر ثانيًا. المصممون الذين يبدؤون باختيار الألوان يدهنون غالبًا بيتًا قبل أن يرسموا مخططه.
كيف يجري التصميم فعلًا في مشروع
حين يُنجز التصميم جيدًا يمر بمراحل تبني بعضها على بعض. فهمها يساعدك على معرفة ما توافق عليه ومتى.
1. فهم الناس
قبل رسم أي شيء، يسأل الفريق من سيستخدم هذا التطبيق وماذا يحاولون إنجازه. أحيانًا يشمل ذلك مقابلات. وغالبًا، بميزانية صغيرة، هو حوار منظم معك ومراجعة للمنافسين وقائمة واضحة بأنواع المستخدمين. الناتج بسيط: وصف قصير لكل مستخدم والشيء الرئيسي الذي يريده.
2. رسم الرحلات
ثم خريطة بسيطة لكيف يتحرك الشخص في التطبيق ليصل إلى هدفه. حجز خدمة، طلب منتج، دفع فاتورة. هنا تكتشف الخطوات الناقصة والزائدة. كل نقرة إضافية تخسر بعض الناس، فأفضل الرحلات أقصرها.
3. الهياكل الأولية
الهياكل الأولية رسوم تخطيطية خشنة بالأبيض والأسود لكل شاشة. بلا ألوان ولا علامة ولا صور. وهذا مقصود. فهي تجعلك تناقش البنية لا الأسلوب. هل هذه هي المعلومات المناسبة في الشاشة الأولى؟ أين ينبغي أن يكون الزر الرئيسي؟ هل القائمة واضحة؟ تحريك مربع على هيكل أولي أرخص بكثير من إعادة بناء شاشة منتهية.
4. التصميم المرئي
حين تعمل البنية، تكتسب الشاشات مظهرها: الألوان والخطوط والصور والأيقونات. المصمم الجيد ينطلق من علامتك لكنه يكيّفها للشاشات الصغيرة واستخدام الإبهام. ستشاهد غالبًا دليل أسلوب، وهو مجموعة صغيرة من القواعد للألوان وأحجام النص والمكونات، ليبدو التطبيق كله متسقًا.
5. النموذج الأولي
يربط النموذج الأولي القابل للنقر الشاشات بعضها ببعض لتتنقل في التطبيق على هاتفك قبل كتابة أي كود. إنه أثمن لحظة مراجعة. ستكتشف أمورًا لا تكشفها الصورة الثابتة، كخطوة مربكة أو زر يصعب الوصول إليه.
6. التسليم والتنقيح
تُجهَّز التصاميم للمطورين بمقاسات وأصول دقيقة. الفرق الجيدة تبقى منخرطة أثناء التطوير، لأن مشكلات صغيرة تظهر دائمًا حين يدخل المحتوى الحقيقي والأجهزة الحقيقية.
لاحظ أن التصميم ليس مرحلة لمرة واحدة. في الجدول الذي نصفه في كم يستغرق بناء تطبيق، يأخذ التصميم عادةً حصة معتبرة من التقويم، ويستمر بشكل أصغر أثناء التطوير والاختبار.
كيف يبدو تصميم الجوال الجيد
لا توجد صيغة واحدة، لكن التطبيقات القوية تتشارك عادةً عددًا من الصفات. وعند مراجعة تصميم، تحقق منها.
من الواضح ما يجب فعله تاليًا
في كل شاشة ينبغي أن يكون هناك إجراء رئيسي واضح واحد. إن اضطر المستخدم إلى البحث عن زر الحجز، فقد فشل التصميم. يمكن وجود إجراءات ثانوية، لكن لا ينبغي أن تتنافس.
يحترم الإبهام
يستخدم الناس الهواتف بيد واحدة، غالبًا أثناء المشي أو حمل شيء. الأزرار المهمة مكانها النصف السفلي من الشاشة، في متناول اليد بسهولة. وأهداف النقر تحتاج إلى حجم كبير بما يكفي لإصابتها دون دقة. الروابط الصغيرة والصفوف المزدحمة تسبب نقرات خاطئة وانزعاجًا.
مقروء
يجب أن يكون النص بحجم مريح وتباين قوي مع الخلفية. فكر في ضوء الشمس الساطع، فكثير من مستخدميك سيفحصون التطبيق في الخارج. النص الرمادي الفاتح على الأبيض يبدو أنيقًا في الاستوديو ويختفي في العالم الحقيقي.
يعطي ردًا
حين ينقر المستخدم على شيء، ينبغي أن يستجيب التطبيق فورًا. مؤشر تحميل أو تأكيد أو حركة لطيفة. الصمت يجعل الناس ينقرون مرة ثانية ويتساءلون هل نجح الأمر. وبالمثل ينبغي أن تقول رسائل الخطأ ما الذي حدث وكيف يُصلَح، لا مجرد «حدث خطأ ما».
متسق
الأزرار التي تبدو متشابهة ينبغي أن تتصرف بالطريقة نفسها. والألوان ينبغي أن تعني الشيء نفسه في كل مكان. الاتساق يقلل منحنى التعلم فيشعر المستخدمون بالكفاءة بعد جلسة واحدة.
يعمل للجميع
إمكانية الوصول ليست ميزة خاصة. إنها تصميم جيد. التباين الكافي والنص القابل للتكبير والتسميات الواضحة وعدم الاعتماد على اللون وحده لنقل المعنى كلها تساعد من لديهم قيود بصرية، وأي شخص يستخدم التطبيق في ظروف سيئة.
التصميم لجمهور الإمارات
هنا تؤتي المعرفة المحلية ثمارها. التصميم الذي ينجح في سوق قد يبدو غريبًا قليلًا في آخر. في الإمارات، بعض النقاط مهمة بشكل خاص.
العربية ليست إنجليزية مترجمة
تُقرأ العربية من اليمين إلى اليسار، ويؤثر ذلك في التخطيط كله. التنقل ومؤشرات التقدم وأسهم الرجوع والمنزلقات والقوائم وحتى ترتيب الحقول في النموذج يجب أن تنعكس. الأيقونات ذات الاتجاه، كالأسهم، تنقلب. والأرقام وأسماء العلامات والنص اللاتيني داخل الجمل العربية تتصرف بطرقها الخاصة. التصميم للإنجليزية أولًا و«إضافة العربية لاحقًا» يؤدي بانتظام إلى شاشات مكسورة وإصلاحات متسرعة.
خطط له من البداية، حتى لو أطلقت بالإنجليزية فقط، لتجنب إعادة بناء تخطيطاتك. نسرد الفخاخ الشائعة في دليل تعريب التطبيقات.
طول النص يتغير
الرسالة نفسها تأخذ مساحات مختلفة بالإنجليزية والعربية. يجب أن يكون للأزرار والتسميات مجال للنمو. الصناديق ذات العرض الثابت التي تناسب «احجز الآن» قد تفيض بما يقابلها بالعربية، أو العكس. المكونات المرنة تحل ذلك.
الخطوط أهم مما تظن
ليس كل خط يدعم العربية جيدًا، وخلط الخطوط بشكل أخرق يجعل التطبيق يبدو غير مصقول. اختر خطوطًا لها نسخ عربية ولاتينية قوية مصممة لتعمل معًا، واختبرها بأحجام صغيرة على شاشات حقيقية.
جمهور متنوع ومتعدد اللغات
قد يأتي مستخدموك من دول كثيرة ويقرؤون لغات مختلفة. الأيقونات والصور التي تحمل معنى دون كلمات تساعد كثيرًا. والصياغة الواضحة البسيطة تساعد أكثر. تجنب العامية والنكات التي لا تُترجم. وإن كان التطبيق يخدم عدة لغات، فينبغي أن يكون مفتاح اللغة سهل الإيجاد في الشاشات الأولى، لا مدفونًا في الإعدادات.
إشارات الدفع والثقة
في كل ما يتعلق بالمال، يبحث الناس عن الطمأنينة. شعارات الدفع المعروفة والإجماليات الواضحة قبل التأكيد والإيصالات الظاهرة وطرق التواصل الواضحة مع الدعم كلها تبني الثقة. يغطي استعراضنا لـخيارات الدفع في الإمارات ما يتوقع العملاء رؤيته.
الحساسية الثقافية
ينبغي أن تناسب الصور والألوان والنبرة الجمهور. كن حذرًا مع صور الأشخاص والرموز والصياغة حول المواضيع الحساسة. وعند الشك، اسأل من يعرف الجمهور المحلي. كثيرًا ما تكشف مراجعة قصيرة من متحدث أصلي مشكلات يفوّتها فريق التصميم.
الشاشات التي تستحق عناية إضافية
ليست كل الشاشات متساوية. قلة منها تحمل معظم الوزن.
التعريف والتسجيل
هذا الانطباع الأول، وهو أيضًا أول مكان يتوقف فيه الناس. اطلب الحد الأدنى. دع الناس يتجولون قبل أن تطلب حسابًا إن استطعت. رقم الهاتف مع رمز لمرة واحدة غالبًا أسهل من النماذج الطويلة وكلمات المرور. وإن احتجت معلومات أكثر، فاجمعها لاحقًا حين يرى المستخدمون القيمة.
الشاشة الرئيسية
ينبغي أن تجيب عن «ماذا أستطيع أن أفعل هنا؟» في ثانية. أظهر الخدمات أو المنتجات الرئيسية وبحثًا واضحًا حيث يناسب وأي شيء حساس للوقت، كحجز نشط.
البحث والمرشحات
إن كان تطبيقك يحتوي عناصر كثيرة، تصبح جودة البحث مشكلة تصميم. بحث متسامح ومرشحات معقولة وعمليات بحث حديثة وحالات فارغة مفيدة («لا نتائج، جرّب هذه») تبقي الناس في حركة.
الدفع
هنا يغادر المال الأيدي، فكل حقل غير ضروري يكلفك مبيعات. املأ مسبقًا ما تستطيع، وأبقِ الخطوات قليلة، وأظهر الإجمالي مبكرًا، واجعل التعافي من الأخطاء سهلًا. اختبر هذا التدفق أكثر من أي تدفق آخر.
حالات الفراغ والتحميل والخطأ
هذه الشاشات التي ينساها الناس عند التصميم. ماذا يرى المستخدم الجديد الذي ليس لديه طلبات؟ ماذا يظهر حين تكون الشبكة بطيئة؟ شاشة بيضاء فارغة تبدو كخلل. أما رسالة ودودة بخطوة تالية فتبدو مقصودة.
الملف الشخصي والإعدادات
أقل بريقًا لكنها مهمة للثقة. سهّل تغيير اللغة وإدارة الإشعارات وعرض السجل والوصول إلى الدعم.
التنقل: كيف يجد الناس طريقهم
التنقل هيكل التطبيق العظمي، ويستحق نقاشًا قبل تلميع أي شاشة. ثلاثة أنماط تغطي معظم التطبيقات.
شريط تبويب سفلي يعمل حين يكون لديك ثلاث إلى خمس مناطق رئيسية يتنقل الناس بينها كثيرًا، مثل الرئيسية والطلبات والعروض والملف الشخصي. يبقي الوجهات الرئيسية على بعد نقرة، ويقع حيث يستقر الإبهام طبيعيًا.
قائمة جانبية تخفي الخيارات خلف أيقونة. توفر مساحة لكنها تخفي الميزات أيضًا، فينساها الناس. تناسب التطبيقات ذات الأقسام الثانوية الكثيرة، رغم أنها نادرًا ما تكون الخيار الأفضل للرحلة الرئيسية.
بنية قائمة على التدفق ترشد المستخدمين عبر تسلسل، كما في الحجز أو الدفع، مع إحساس واضح بالتقدم وطريقة سهلة للعودة.
أيًا كان اختيارك، اجعل الأسماء قصيرة وحرفية. «حجوزاتي» أفضل من «النشاط». إن احتاجت تسمية إلى شرح فهي التسمية الخاطئة. والتخطيطات من اليمين إلى اليسار تعكس الشريط وإيماءات الرجوع أيضًا، فتأكد أن مصممك خطط لذلك.
الكلمات الصغيرة التي تصنع فرقًا كبيرًا
نص الواجهة الصغير هو النص على الأزرار والتلميحات ورسائل الخطأ والحالات الفارغة. نادرًا ما ينال ميزانية، ويشكل شعور التطبيق أكثر مما يدرك معظم الناس. قارن «إرسال» بـ«احجز التنظيف». قارن «مدخل غير صالح» بـ«رقم الهاتف هذا يبدو قصيرًا. تحقق منه وحاول مرة أخرى». النسخة الثانية في كل زوج تخبر المستخدم ما يحدث وماذا يفعل.
بضع عادات تساعد. استخدم لغة بسيطة. خاطب المستخدم بـ«أنت». قل ما سيحدث بعد النقرة. حافظ على نبرة متسقة، ودودة لكن غير سخيفة، خاصة حول المال والمشكلات. واكتبه باللغتين بيد من يتحدثهما فعلًا، لأن الترجمة الآلية للعبارات الصغيرة غالبًا تبدو متصلبة أو خاطئة. مراجعة قصيرة من متحدث عربي أصلي رخيصة وتكشف الصياغة المحرجة مبكرًا.
أنظمة التصميم بكلمات بسيطة
قد يذكر مصممك نظام تصميم. هو ببساطة حقيبة مشتركة من الأزرار والألوان وأنماط النص وقواعد المسافات والمكونات القابلة لإعادة الاستخدام. تُبنى كل شاشة من الأجزاء نفسها، ما يحافظ على الاتساق ويسرّع التطوير، إذ يبني المطورون كل مكون مرة واحدة ويعيدون استخدامه في كل مكان.
لمشروع صغير لا تحتاج نظامًا متقنًا، لكنك تريد الأساسيات موثقة: لوحة ألوانك وأحجام نصك وكيف تبدو الأزرار في كل حالة وكيف تتصرف النماذج. يؤتي ثماره أول مرة تضيف فيها ميزة بعد ثلاثة أشهر من الإطلاق ويبقى التطبيق يبدو متجانسًا. ويساعد أيضًا إن غيرت الوكالة لاحقًا، لأن الفريق التالي يستطيع الاستكمال من حيث توقف السابق.
ما ينبغي أن تتسلمه من مرحلة التصميم
قبل بدء التطوير يحق لك أن ترى أشياء معينة وتحتفظ بها. تعامل مع هذه قائمة تحقق حين تراجع عرضًا أو مرحلة.
- قائمة بالشاشات وتدفقات المستخدم تطابق النطاق المتفق عليه
- هياكل أولية راجعتها ووافقت عليها
- تصاميم الشاشات النهائية لكل منصة تبنيها
- نموذج أولي قابل للنقر
- دليل أسلوب بالألوان والخطوط والمكونات
- أصول مصدّرة، كالأيقونات والصور، بالصيغ الصحيحة
- ملفات المصدر، حتى لا تُقيَّد بمورّد واحد
النقطة الأخيرة ترتبط بالملكية. تأكد أن عقدك ينص على أنك تملك التصاميم بعد دفع ثمنها، كما في قائمة تحقق العقد.
تصميم واحد أم اثنان؟
إن كان تطبيقك يستهدف آيفون وأندرويد، يبرز سؤال: هل ينبغي أن يبدو مطابقًا على الاثنين؟ تنشر Apple وGoogle إرشادات بعاداتها الخاصة، مثل أين يقع زر الرجوع أو كيف تظهر القوائم. يتوقع المستخدمون أن يتصرف التطبيق مثل بقية هواتفهم.
تشارك كثير من التطبيقات متعددة المنصات تصميمًا واحدًا لمعظم الشاشات وتكيّف التفاصيل التي يلاحظها الناس، كإيماءات التنقل وبعض عناصر التحكم. أما التطبيقات الأصلية بالكامل فتميل أكثر إلى أسلوب كل منصة. لا نهج خاطئ، لكن كن واضحًا مسبقًا ليعكس الاختيارُ ميزانيةَ التصميم والجدول. وإن كنت لا تزال تقرر بين النهجين، فقد يساعدك iOS أم أندرويد: أيهما تبني أولًا.
اختبار التصميم مع أشخاص حقيقيين
لا تحتاج إلى مختبر. الجلسة البسيطة تستغرق نحو ثلاثين دقيقة لكل شخص وتحتاج نموذجًا أوليًا وبضع مهام، مثل «ابحث عن عاملة نظافة ليوم السبت واحجزها».
- اختر خمسة أشخاص يشبهون مستخدميك الحقيقيين، لا زملاءك.
- أعطهم النموذج الأولي ومهمة واحدة في كل مرة.
- اطلب منهم التفكير بصوت عالٍ. لا تساعد.
- دوّن أين يتوقفون أو ينقرون على الشيء الخطأ أو يبدو عليهم الارتباك.
- بعد خمس جلسات ستظهر المشكلات نفسها مرارًا. أصلحها أولًا.
إنها تجربة متواضعة أول مرة. سترى شخصًا يتجاهل الزر الذي كنت واثقًا أنه واضح. هذا الانزعاج هو المقصود. إنه أرخص بكثير من تعلم الشيء نفسه من تقييمات بنجمة واحدة.
أخطاء التصميم الشائعة
- نسخ تطبيق مشهور بالجملة. ما ينجح لشركة بملايين المستخدمين وعقد من البيانات قد لا يناسب منتجك. تعلم من الأنماط؛ لا تنسخ الواجهات.
- حشو شاشة بالكثير. المساحة البيضاء ليست مساحة مهدرة. إنها تساعد على التركيز.
- إخفاء الإجراءات الرئيسية خلف أيقونات بلا تسميات. إن اضطر الناس إلى تخمين معنى أيقونة، فأضف كلمة.
- تصميم المسار السعيد فقط. في الحياة الحقيقية مدفوعات فاشلة وحجوزات ملغاة وغياب إشارة. صمم لها.
- تجاهل الهواتف الصغيرة والأقدم. اختبر على أجهزة أرخص وشاشات أصغر. التخطيطات التي تبدو مثالية على هاتف رائد قد تنكسر في غيره.
- التعامل مع الوضع الداكن كفكرة لاحقة. إن دعمته فصمم الألوان للوضعين من البداية.
- إضافة حركة لمجرد الحركة. ينبغي أن تشرح الحركة لا أن تشتت. الانتقالات البطيئة تزعج المستخدمين المتكررين.
- تخطي اختبار المستخدمين. خمسة أشخاص حقيقيين ينقرون عبر نموذج أولي سيكشفون أكثر من شهر من النقاش الداخلي.
كيف تقدم ملاحظات تفيد فعلًا
هذا الجزء الذي يستطيع أصحاب الأعمال التحكم فيه، ويغير نتائج المشاريع أكثر مما تتوقع.
صف المشكلة لا الحل. «لا أستطيع معرفة أي زر أضغط» يعطي المصمم ما يعمل به. «اجعله أحمر» لا يفعل. دعه يقترح الحلول.
تحدث كمستخدم لا كمالك. أنت تعرف المنتج جيدًا جدًا. حاول أن تنظر إلى كل شاشة كمن يراها أول مرة.
وحّد آراءك. إن أرسل خمسة أشخاص من جانبك خمس ملاحظات مختلفة فالمصمم عالق. اجمع الملاحظات وحل التعارضات وأرسل بصوت واحد.
راجع في سياقه. انظر إلى النموذج الأولي على هاتف حقيقي لا على شاشة كبيرة. وفي الخارج إن أمكن.
افصل ما يجب إصلاحه عن التفضيل. تدفق مربك يجب إصلاحه. درجة مختلفة من الأخضر تفضيل. كلاهما مقبول، لكن اعرف أيهما أيهما.
اختبر مع غرباء. اطلب من أشخاص لا يعرفون عملك إنجاز مهمة، ثم اصمت وراقب. حيث يترددون هناك يحتاج التصميم إلى عمل.
التصميم والتكلفة
التصميم جزء مما تدفع مقابله، ويتفاوت بحسب الطموح. تطبيق مباشر مبني من مكونات قياسية يكلف أقل من تطبيق برسوم مخصصة بالكامل وحركة وتفاعلات خاصة. ليس أي منهما خاطئًا. السؤال ما الذي يحتاجه منتجك لكسب الثقة وإبقاء المستخدمين.
نهج معقول للنسخة الأولى تصميم نظيف تقليدي يتبع أنماط المنصة، مع صقل إضافي للشاشتين أو الثلاث الأهم. يمكنك الاستثمار أكثر في الشخصية البصرية بعد أن تتأكد أن الناس يريدون المنتج. ولرؤية كيف يندرج التصميم في السعر الإجمالي، اطلع على دليل تكلفة تطبيقات الجوال.
وإن كنت تخطط للبناء على آيفون وأندرويد معًا، فتذكر أن لكل منصة أعرافها. اتباعها يجعل التطبيق يبدو في بيته. يشرح دليلنا عن الأصلي ومتعدد المنصات وPWA كيف يؤثر ذلك في خيارات التصميم والتطوير.
قائمة تحقق للتصميم قبل الموافقة
- هل الإجراء الرئيسي واضح في كل شاشة؟
- هل يمكن إتمام الرحلة الرئيسية بأقل عدد ممكن من الخطوات؟
- هل الأزرار كبيرة وفي متناول الإبهام؟
- هل النص مقروء في الضوء الساطع؟
- هل صُممت حالات الفراغ والتحميل والخطأ؟
- هل ينعكس تخطيط العربية بشكل صحيح، إن كانت العربية مخططًا لها؟
- هل تدعم الخطوط اللغتين جيدًا؟
- هل إشارات الدفع والثقة واضحة؟
- هل اختبر النموذج الأولي شخص من خارج الفريق؟
- هل يبدو متسقًا من الشاشة الأولى إلى الأخيرة؟
حين يُعتمد التصميم يبدأ الاختبار بجدية. تعرض قائمة تحقق الاختبار لدينا كيف تتأكد أن التطبيق المنتهي يطابق ما صُمم.
كلمة أخيرة
تصميم التطبيقات الجيد يدور في معظمه حول التعاطف والتحفظ. افهم الشخص على الجانب الآخر من الشاشة، وامنحه مسارًا واضحًا واحدًا إلى ما يريد، وأزل كل ما يعيقه. وفي الإمارات أضف عناية بالعربية وبجمهور متنوع وبطريقة الدفع.
لا يلزم أن تكون مصممًا لتصيب في هذا. يكفي أن تطرح الأسئلة الصحيحة وتقدم ملاحظات صادقة وتصر على رؤية نموذج أولي قابل للنقر قبل بدء التطوير. وإن أردت مناقشة مشروعك، فراسلنا عبر صفحة التواصل، أو استكشف خدمات تطوير تطبيقات الجوال لدينا.
