الموقع الجديد شكله حلو، وكل اللي في المكتب قالوا كده. بس عدّى 3 أسابيع والحجوزات زي ما هي، والتليفون لسه بيرن بنفس السؤال: «هو الحجز بيتعمل إزاي؟».
مفيش حاجة بايظة. الصفحة بتفتح والزرار شغال. المشكلة إن العميل الحقيقي، ماسك الموبايل في عربية مترو زحمة، مش عارف يعمل إيه بعد كده في الكام ثانية اللي هو مستعد يدّيهالك.
المسافة دي بين «شكله حلو» و«بيشتغل صح» هي بالظبط الفرق بين UI وUX، وبتبان على طول في مبيعاتك.
الفرق بين UI وUX بأمثلة من حياتنا
فكّر في مطعم. الـ UI هو الأطباق، وشكل المنيو، والإضاءة، والكراسي. أما الـ UX فهو كل اللي عشته هناك: لقيت مكان تركن؟ فهمت المنيو؟ الأكل جه في معاده؟ دفعت الحساب من غير ما تفضل تشاور للجرسون 10 دقايق؟
ممكن مطعم أطباقه تجنن والتجربة فيه كارثة. وممكن محل كشري أطباقه عادية جدًا، والناس بترجعله كل أسبوع لأن كل حاجة فيه ماشية بسلاسة.
أو فكّر في باب. شكل الأوكرة UI، لكن إنك تعرف تزق ولا تشد من غير ما تقرا يافطة، ده UX. ولو الباب محتاج يافطة مكتوب عليها «اسحب»، يبقى التصميم فشل خلاص.
| UI (واجهة المستخدم) | UX (تجربة المستخدم) | |
|---|---|---|
| بيجاوب على سؤال | شكلها واضح وجذاب؟ | الناس بتعمل اللي جايين عشانه بسهولة؟ |
| أمثلة | شكل الأزرار، الألوان، الأيقونات، المسافات، الخطوط | ترتيب الصفحات، عدد الخطوات، الكلام، التعامل مع الأخطاء |
| الشغل اللي بيتسلّم | تصميمات نهائية، دليل ستايل، مكوّنات | ملاحظات البحث، مسارات المستخدم، وايرفريم، نتايج اختبار |
| بتحكم عليه إزاي | الثبات، سهولة القراية، التشطيب | إتمام المهمة، الوقت اللي خدته، أسئلة أقل للدعم |
الاتنين مش منافسين لبعض، الـ UI هو الطريقة اللي التجربة بتتقدّم بيها. بس لو الميزانية محدودة، موقع بسيط بتجربة كويسة هيبيع أكتر من موقع فخم تجربته سيئة.
ليه تجربة المستخدم بتبان في المبيعات؟
كل خطوة زيادة، وكل كلمة مش واضحة، وكل شاشة ملخبطة، فرصة إن العميل يزهق. ونادرًا ما بيشتكي. هو بس بيقفل التاب ويبعت لمنافسك.
التجربة الكويسة بتقلّل 3 حاجات: المجهود (العميل محتاج يعمل قد إيه)، والشك (هل واثق فيك وفاهم العرض)، والطرق المسدودة (لحظات مش عارف فيها إيه اللي هيحصل بعد كده). قلّلهم، وزوّار أكتر هيتحوّلوا لاستفسارات وحجوزات وطلبات، من غير ما تصرف جنيه زيادة على الإعلانات.
وكمان بتوفّر وقت فريقك، لأن الموقع الواضح بيجاوب على الأسئلة اللي فريقك بيرد عليها بإيده على الواتساب طول اليوم.
البحث: ابدأ بالناس مش بالبكسلات
قبل ما حد يفتح برنامج تصميم، اعرف عملاءك بيحاولوا يعملوا إيه بالظبط. ومش محتاج ميزانية كبيرة:
- اقرا رسايلك. الأسئلة اللي العملاء بيسألوها على الواتساب والتليفون هي قايمة باللي موقعك مش بيجاوب عليه.
- كلّم 5 عملاء. اسألهم عرفوك منين، وكانوا هيروحوا لمين بدالك، وإيه اللي كان قرّب يوقّفهم.
- بص على الأرقام. لو موقعك الحالي عليه أدوات تحليل، شوف الناس بتخرج من أنهي صفحات.
- جرّب مواقع المنافسين. سجّل إيه اللي ضايقك وإنت عميل.
ومن ده كله، اكتب أهم 3 مهام الزوار جايين يعملوها. لعيادة مثلًا: الحجز، ومعرفة الأسعار، والوصول للعنوان. كل حاجة في الموقع لازم تسهّل التلاتة دول.
الوايرفريم والنموذج التفاعلي: خطّط قبل ما تبني
الوايرفريم هو «الرسم الهندسي» للصفحة: مربعات رمادي بتوضّح إيه هيتحط فين وبأنهي ترتيب، من غير ألوان ولا صور. بيجبرك تاخد القرارات المهمة الأول: العنوان إيه؟ الأكشن الأساسي إيه؟ العميل محتاج يشوف إيه قبل ما يثق فيك؟
صمّم للموبايل الأول. أغلب زوارك في مصر والخليج غالبًا هيجوا من الموبايل، والتصميم اللي بيشتغل على شاشة صغيرة سهل تكبّره لشاشة كبيرة. العكس أصعب بكتير.
أما النموذج التفاعلي (Prototype) فهو نسخة من التصميم تقدر تدوس فيها، قبل ما يتكتب سطر كود واحد. تقدر تمشي في خطوات الحجز على موبايلك وتحس فين بتتقل. تعديل النموذج بياخد دقايق، وتعديل موقع متبرمج ومتسلّم بياخد أيام.
اختبار الاستخدام مع 5 مستخدمين حقيقيين
ده الجزء اللي أغلب الأنشطة بتفوّته، وهو أرخص معلومة ممكن تشتريها في حياتك.
ياكوب نيلسن من Nielsen Norman Group بيقول من سنين إن اختبار التصميم مع حوالي 5 مستخدمين بيكشف أغلب مشاكل الاستخدام، وإن كذا جولة صغيرة أحسن من جولة واحدة كبيرة. والمنطق بسيط: أول كام حد بيتكعبلوا في نفس المشاكل الكبيرة، فبتتعلم المهم بسرعة، وتصلّح، وتختبر تاني.
تصميم المواقع العربي: تجربة المستخدم من اليمين للشمال
الموقع العربي مش موقع إنجليزي متقلوب في مراية. في حاجات لازم تتعكس، وحاجات لازم تفضل زي ما هي.
- اعكس ترتيب الصفحة. القوايم، وترتيب القراية، وأسهم الرجوع والتقدّم، وشريط التقدّم، والسلايدر، كلهم ماشيين من اليمين للشمال.
- متعكسش كل حاجة. زرار التشغيل، والساعة، وعلامة الصح، واللوجوهات، بيفضلوا في اتجاههم.
- الأرقام والكلام المخلوط. أرقام التليفونات والأسعار وأسماء المنتجات الإنجليزي جوه جملة عربي لازم تظهر صح، وده محتاج اختبار بمحتوى حقيقي.
- اتجاه الكتابة في الخانات. خانة الإيميل والموقع تتكتب من الشمال لليمين حتى في الصفحة العربي، وخانة التليفون لازم تقبل الأرقام العربية ٠١٢ والأرقام العادية 012.
- بحث بيفهم العربي. اللي يدوّر على «احمد» لازم يلاقي «أحمد»، واللي يكتب «مدرسه» يلاقي «مدرسة».
- خط مريح. العربي غالبًا محتاج مقاس أكبر شوية ومسافة بين السطور أوسع من الإنجليزي.
ودليلنا عن إزاي تبني موقع عربي وإنجليزي صح بيغطي الجانب التقني، زي الروابط المنفصلة لكل لغة والسيو.
الفورمز وأساسيات الإتاحة
الفورم هو المكان اللي الاهتمام بيتحوّل فيه لعميل محتمل، وهو نفس المكان اللي مواقع كتير بتخسره فيه.
- اطلب اللي محتاجه فعلًا دلوقتي بس. كل خانة زيادة بتخسّرك ناس.
- خلّي اسم الخانة ظاهر فوقها. الكلام الباهت اللي بيختفي أول ما تكتب مش عنوان.
- اقبل رقم التليفون بالشكل اللي الناس بتكتبه فعلًا، بكود الدولة أو من غيره.
- اعرض الخطأ جنب الخانة نفسها، بكلام بسيط بيقول يتصلّح إزاي، ومتمسحش أبدًا اللي العميل كتبه.
- افتح الكيبورد المناسب على الموبايل:
type="email"للإيميل، وinputmode="tel"للتليفون.
والإتاحة بتفيد الكل، بما فيهم العملاء الكبار في السن وأي حد ماسك موبايل في الشمس:
- تباين النص مع الخلفية 4.5:1 على الأقل للنص العادي، زي ما بتوصي معايير WCAG.
- الأزرار واللينكات كبيرة كفاية للضغط، والإرشادات الحالية لـ WCAG بتحدد حد أدنى 24 × 24 بكسل، والأكبر أريح.
- كل صورة ليها معنى يبقى ليها وصف نصي.
- الموقع يشتغل بالكيبورد، مع إطار واضح حوالين العنصر اللي عليه الدور.
- الصفحة تعلن لغتها واتجاهها، زي
lang="ar"وdir="rtl"، عشان قارئ الشاشة ينطقها صح. - اللون عمره ما يبقى الإشارة الوحيدة. الخطأ محتاج كلام، مش إطار أحمر وبس.
أخطاء شائعة في تجربة المستخدم
- تصميم الموقع لصاحب الشغل مش للعميل. قصة التأسيس في أول الصفحة، وزرار الحجز مدفون تحت.
- إخفاء الأسعار والتفاصيل المهمة. الزائر اللي مش لاقي المعلومة الأساسية بيفترض الأسوأ.
- الاختبار على شاشة المكتب الكبيرة بس. جرّب على موبايل متوسط.
- اختيارات كتير مرة واحدة. 3 اختيارات واضحين أحسن من 12.
- الإطلاق من غير ولا اختبار واحد. 5 أشخاص وبعد ضهر واحد كانوا هيلحقوا المشكلة.
أسئلة بتتسأل كتير
إيه الفرق بين UI وUX في جملة واحدة؟
الـ UI هو شكل المنتج وإحساسه وإنت بتلمسه، والـ UX هو إذا كان الناس بيقدروا يستخدموه بسهولة ويوصلوا للي عايزينه.
هو 5 مستخدمين كفاية فعلًا للاختبار؟
عشان تلاقي أكبر مشاكل الاستخدام في جولة اختبار نوعي، حوالي 5 أشخاص قاعدة معروفة ومجرّبة. المهم إنك تصلّح اللي لقيته وتختبر تاني مع 5 غيرهم.
النشاط الصغير محتاج تصميم تجربة مستخدم؟
أيوه، بحجم صغير. إنك تعرف أهم 3 مهام لعملاءك وتختبر الموقع مع كام شخص حقيقي حاجة تكلفتها بسيطة، وبتوفّر عليك إعادة تصميم غالية.
يعني إيه RTL؟
اختصار Right to Left، يعني من اليمين للشمال، وده اتجاه قراية العربي. الموقع الـ RTL بيعكس ترتيبه وقوايمه عشان يمشي مع طريقة عين القارئ العربي.
تجربة المستخدم الكويسة بتساعد في ترتيب جوجل؟
جزئيًا. أنظمة الترتيب في جوجل بتاخد في اعتبارها إشارات تجربة الصفحة زي Core Web Vitals، اللي بتقيس سرعة التحميل والاستجابة وثبات الصفحة. ومقالنا عن سرعة الموقع بيشرح الحدود المطلوبة.
الخطوة الجاية
قبل ما تعيد تصميم أي حاجة، اكتب أهم 3 حاجات عملاءك عايزين يعملوها على موقعك، وبعدين اتفرّج على 5 منهم وهما بيحاولوا. اللي هتتعلمه في بعد الضهر ده هيوجّه كل قرار تصميم بعده.
ولو حابب مساعدة في تحويل الملاحظات دي لموقع واضح بالعربي والإنجليزي، تقدر تحجز مقابلة قصيرة معانا أو تتفرّج على شغلنا الأول.