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