ماذا يعني تصميم الواجهة وتجربة المستخدم فعلًا
اختصاران وفكرة واحدة بسيطة. UI (واجهة المستخدم) هو شكل موقعك: الألوان والأزرار والتنسيق والخطوط. وUX (تجربة المستخدم) هو الإحساس عند استخدامه: كم يستغرق الزائر ليجد الأسعار، وكم ضغطة تلزمه ليتواصل معك، وهل القائمة منطقية على الهاتف.
ولماذا يهم صاحب العمل هذا؟ لأن الزائر يحكم على شركتك في خمس ثوانٍ تقريبًا، قبل أن يقرأ جملة واحدة. الموقع القديم أو المربك يقول له «هذه شركة صغيرة أو بطيئة أو غير مهتمة» حتى لو لم يكن أي من ذلك صحيحًا. رأينا هذا يحدث مع عملائنا: نفس الشركة ونفس الخدمات، ونتائج مختلفة تمامًا بمجرد أن توقف الموقع عن العمل ضدهم.
الواجهة هي السطح، والتجربة هي القرار
تخيّل معرضًا في المهندسين. الواجهة هي الإضاءة واللافتات وطريقة عرض المنتجات على الرفوف. أما التجربة فهي: هل تجد مقاسك، وهل يخبرك أحد بالسعر. والمعرض الجميل الذي لا تستطيع الشراء منه فشل في التجربة لا في الذوق.
الزر الذي يبدو زرًا هو واجهة، والزر الموضوع حيث تنظر بالفعل هو تجربة. والمصمم الذي يتقن نصفًا واحدًا يسلّمك شيئًا يصلح للتصوير ولا يصلح للبيع. ومبادئ الاستخدام العشرة من Nielsen Norman Group عمرها ثلاثون عامًا، وما زال معظم المواقع في مصر يخالف نصفها.
الثواني الخمس قبل أن يقرأ أحد كلمة
قاست Nielsen Norman Group مدة بقاء الزوار على الصفحة: أعلى احتمال للمغادرة يقع في العشر ثوانٍ الأولى، والزائر المصري ليس أكثر صبرًا. وفي تلك اللحظة يجيب عن ثلاثة أسئلة صامتة: هل أنا في المكان الصحيح، وهل هؤلاء أشخاص حقيقيون، وماذا يُفترض أن أفعل. ضع الجملة الواضحة أولًا: ماذا تفعل، ولمن، وأين.
ماذا يفعل التصميم الجيد لعملك
التصميم الجيد ليس زخرفة. إنه يجيب عن ثلاثة أسئلة لحظة وصول الزائر: ماذا تقدم، ولماذا أثق بك، وما الخطوة التالية. وحين تكون الإجابات واضحة، يتصل عدد أكبر ويحجز ويشتري. وحين تكون مدفونة، يغادر الناس بلا أن تسمع عنهم شيئًا.
كل شاشة نصممها لها هدف واحد. الصفحة الرئيسية تكسب الضغطة نحو أعمالك. وصفحة المنتج تكسب الإضافة للسلة. وصفحة التواصل تزيل كل عذر لعدم المراسلة. وأي عنصر لا يساعد الشاشة في أداء مهمتها، يُحذف.
ترتيب الصفحة هو الحجّة
ترتيب العناصر هو تسلسل حجّة. معظم صفحات الشركات في مصر تبدأ بتاريخ الشركة، ثم الخدمات، ثم نموذج تواصل في الأسفل. وهذا ترتيب تفكير صاحب العمل، لا ترتيب قرار المشتري. المشتري يريد الادعاء، ثم الدليل، ثم الطلب: أسماء عملاء، وصور أعمال حقيقية، وأرقام. وBeef Point يبيع لحومًا تُقطَّع طازجة في القاهرة والجيزة، وصفحاته تعرض القطعة ونطاق التوصيل والحد الأدنى للطلب قبل أن تطلب شيئًا.
صمّم لهاتف بعرض ٣٧٥ بكسل على شبكة 4G مصرية
معظم زياراتك تأتي من هاتف أندرويد متوسط يُمسك بيد واحدة على بيانات فودافون أو أورنج. لذلك يبدأ التصميم عند عرض ٣٧٥ بكسل ثم يتوسع صعودًا. وعند ٣٧٥ بكسل يوجد متسع لفكرة واحدة وعنوان واحد وإجراء واحد، ولا ينجو غير ذلك. ومؤشرات Core Web Vitals من جوجل تقيس متى يظهر المحتوى الأساسي وكم تستغرق الصفحة للاستجابة للمسة، وكلاهما ينهار على موقع ثقيل فوق شبكة مزدحمة.
العربية مشكلة تصميم لا مشكلة ترجمة
معظم المواقع ثنائية اللغة في مصر هي موقع إنجليزي صُبّ فيه نص عربي. وتعرف ذلك خلال ثانية: القائمة ما زالت تسير من اليسار لليمين، والشعار في الركن الخطأ، والأسهم تشير في الاتجاه المعاكس. والانعكاس هو العمل كله. ففي الاتجاه من اليمين لليسار ينقلب التخطيط: القوائم، ومسار التنقل، وخطوات التقدم، والشرائح، وكل أيقونة تدل على اتجاه، وحتى الجهة التي يقف فيها عنوان الحقل. والمسافات تُكتب كخصائص منطقية ليحدث الانعكاس مرة واحدة.
ثم يأتي الخط. العربية بلا حروف كبيرة، لذلك يأتي التسلسل البصري من الوزن والحجم والمسافة لا من شكل الحرف. والحروف متصلة ولها علامات فوق السطر وتحته، لذا تحتاج العربية ارتفاع سطر أكبر من الإنجليزية. ويجب أن يكون الخط عربيًا حقيقيًا بمجموعة أوزان كاملة، لا خطًا لاتينيًا وراءه خط عربي بديل. والأرقام قرار أيضًا: القارئ هنا يستخدم ٠١٢٣ و0123 معًا، لكن الأسعار والتواريخ يجب أن تبقى على نظام واحد في الموقع كله.
والجزء الأخير هو الكتابة. العربية المترجمة آليًا تُقرأ كعربية مترجمة آليًا عند كل من يتحدثها، وتكلفك المصداقية التي كسبها الجانب الإنجليزي. وأسماء العلامات تبقى بالحروف اللاتينية: Google وShopify وFawry وPaymob وInstaPay وWhatsApp. بنينا IGBS، أكبر مكتب علامات تجارية في مصر، بخمس لغات وعربية كاملة من اليمين لليسار، ومتجر البدوي ثنائي اللغة يشحن الجلد المصنوع يدويًا إلى العالم. وفي الحالتين صُمِّمت العربية جنبًا إلى جنب مع الإنجليزية.
العربية المضافة في النهاية ترجمة. أما العربية المصممة من البداية فهي موقع ثانٍ يتصادف أنه يشارك الكود نفسه.
نماذج يكملها الناس فعلًا
كل حقل تضيفه يكلفك استفسارات. اطلب فقط ما تحتاجه للرد: الاسم، ووسيلة تواصل واحدة، وسطر واحد عن المشكلة. واقبل الرقم المصري كما يكتبه الناس، أحد عشر رقمًا تبدأ بـ 010 أو 011 أو 012 أو 015، ولا ترفض المقدمة +20. وأتح واتساب أيضًا: كثير من المشترين في مصر لن يملأوا نموذجًا أبدًا لكنهم سيرسلون رسالة خلال ثوانٍ. ومؤشر Interaction to Next Paint هو ما يكشف زر إرسال يبدو ميتًا على هاتف متوسط.
أين يستسلم الزوار، وكيف ترى ذلك بعينك
الجدل حول التصميم تخمين، والتسجيلات ليست كذلك. Microsoft Clarity مجاني ويُريك ثلاثة أشياء تستحق النقاش. نقرات الغضب: زائر يضغط العنصر نفسه مرارًا لأنه يبدو قابلًا للضغط وليس كذلك. والنقرات الميتة: ضغطات على عنوان أو صورة ظنها الزائر رابطًا. وعمق التمرير: النسبة الدقيقة التي يتوقف عندها الناس. ورشِّح التسجيلات على الهاتف وباللغة العربية ولمن لم يتواصلوا، وستتوقف عن التخمين بشأن ما كانت زيارات البحث تريده.
كيف نعمل
نصمم حول طريقة اتخاذ عملائك للقرار، لا حول الموضة السائدة. يبدأ ذلك بفهم ما تبيعه ومن يشتريه، ثم رسم المسار من أول زيارة حتى إتمام الصفقة. والتصميم والبرمجة هنا في يد فريق واحد، فلا يضيع شيء بين التصميم الجميل والموقع الحقيقي.
الأسئلة الشائعة
ما الفرق بين UI و UX؟
الواجهة هي شكل الصفحة: التخطيط واللون والخط والأزرار. والتجربة هي ما يحدث حين يستخدمها أحد: كم يستغرق ليجد السعر، وهل تعمل النسخة العربية كما ينبغي. والصفحة قد تكون جميلة وغير قابلة للاستخدام. أما التي تجلب مالًا فهي المصممة للأمرين معًا.
لماذا يأتي موقعي زوار بلا استفسارات؟
غالبًا الترتيب لا التصميم. طلب التواصل في المكان الخطأ، أو مدفون حيث لا يصل إليه أحد. وعمق التمرير ونقرات الغضب في Clarity ستريك عادةً الشاشة التي يتوقف عندها الناس بالضبط. وذلك عمل أصغر من إعادة تصميم كاملة.
هل تصممون النسخة العربية بشكل منفصل؟
نصممهما معًا. التخطيط ينعكس، والخط يتغير، وارتفاع السطر يتغير، والنص يكتبه إنسان. وموقع IGBS يعمل بخمس لغات وعربية كاملة من اليمين لليسار. وإن عرض عليك استوديو العربية كإضافة في نهاية المشروع، فهذا بالضبط ما ستحصل عليه.
ما أضيق عرض يجب أن يُصمم له الموقع؟
٣٧٥ بكسل. هذا أصغر هاتف ما زال مستخدمًا بانتظام في مصر. وإن تماسكت الصفحة هناك تماسكت في كل مكان. صمّم تلك الشاشة أولًا، ثم دع التخطيط يتوسع. والعكس يعطيك موقعًا مكتبيًا بنسخة هاتف مضغوطة.
هل يؤثر التصميم في ترتيب جوجل؟
بشكل غير مباشر، وأكثر مما يتوقع الناس. جوجل يقيس سرعة ظهور المحتوى الأساسي وسرعة استجابة الصفحة للمسة، والتصميم الزخرفي الثقيل يفشل في الاثنين على شبكة 4G. فالتصميم الجيد والموقع المبني ليُعثر عليه في مصر مشروع واحد لا مشروعان.
تريد موقعًا يؤدي دوره فعلًا؟
أرسل لنا المشكلة التي تحاول حلها. وسنخبرك بصراحة إن كنا الفريق المناسب لتنفيذها.