تصميم واجهة المستخدم وتجربة الاستخدام لعلامات المنتجات
باختصار
في علامات المنتجات، الواجهة هي المكان الذي يستخدم فيه العملاء العلامة: في المتجر، وفي أداة التخصيص، وفي حساب العميل. تصميم تجربة الاستخدام يخطط كيف يتحرك الناس هناك، وتصميم الواجهة يشكّل ما يرونه. وسهولة الاستخدام والحضور القوي للعلامة لا يتعارضان، بل ينشآن معًا على أفضل وجه.
كثير من علامات المنتجات تستثمر كثيرًا في العبوات والحملات. أما الواجهة التي يشتري بها العملاء فعلًا، أو يخصصون، أو يطلبون، فتُعامل غالبًا كتفصيل تقني. مع أنها بالضبط المكان الذي يستخدم فيه العملاء العلامة، لا يكتفون بالنظر إليها.
ما هو تصميم UI/UX؟ ببساطة
تصميم UI/UX هو تصميم المنتجات الرقمية بحيث يفهمها الناس، ويستخدمونها بسهولة، ويصلون إلى هدفهم. والاختصاران يعنيان User Interface، أي واجهة المستخدم، وUser Experience، أي تجربة الاستخدام. والمقصود المواقع، والمتاجر الإلكترونية، والتطبيقات، وأدوات التخصيص، وبوابات العملاء: كل ما ينقر عليه أحد أو يلمسه أو يمرره.
وصورة بسيطة: في المقهى، تجربة الاستخدام هي سؤال: هل تجد المدخل، وأين تطلب، وكم تنتظر؟ وواجهة المستخدم هي كيف صُممت القائمة، وكيف يبدو المكان، وهل تُقرأ الأسعار. والاثنان معًا يقرران هل تعود.
واجهة المستخدم وتجربة الاستخدام: وجهان لعمل واحد
| تجربة الاستخدام (UX) | واجهة المستخدم (UI) | |
|---|---|---|
| السؤال | كيف يصل العميل إلى هدفه؟ | كيف صُممت الواجهة؟ |
| النتيجة | مسارات، ومخططات أولية، ونموذج | تخطيط، وخطوط، وألوان، وأزرار |
| الخطأ إن غابت | لا يجد العملاء طريقهم | تبدو العلامة رخيصة أو عادية |
تجربة استخدام جيدة بواجهة ضعيفة قد تبدو قابلة للاستبدال. وواجهة جيدة بتجربة ضعيفة قد تبهر، وتخسر العملاء مع ذلك في الطريق.
الأسس: العناصر والمبادئ
متجرًا كان أو أداة تخصيص، بعض الأسس تصلح تقريبًا دائمًا.
| العنصر | موضوعه | السؤال المعتاد |
|---|---|---|
| بنية المعلومات | ترتيب المحتوى والتنقل | أين سيبحث العميل عن هذا المنتج؟ |
| مسار المستخدم | الخطوات حتى الهدف | أي الخطوات يمكن حذفها؟ |
| الترتيب البصري | ما يلفت النظر أولًا | هل الإجراء الأهم ظاهر فورًا؟ |
| الخطوط | القراءة والتقسيم | هل يُقرأ النص العربي واللاتيني على الجوال؟ |
| الألوان والتباين | التوجيه وأثر العلامة | هل تتميز الأزرار بوضوح عن النص؟ |
| الردود | رد الفعل على الإدخال | هل يعرف العميل ما حدث وما التالي؟ |
| النماذج | إدخال بأقل جهد ممكن | هل يُسأل فقط عما يلزم فعلًا؟ |
| الاتجاه | العربية من اليمين والإنجليزية من اليسار | هل تتبع الأسهم والخطوات اتجاه القراءة حسب وظيفتها؟ |
ومن هنا تأتي مبادئ أثبتت نفسها في العمل: الاتساق (الأشياء المتشابهة تبدو وتتصرف بالطريقة نفسها)، والوضوح قبل الأصالة في عناصر التحكم، واللغة المفهومة بدل المصطلحات، والطرق القصيرة إلى أكثر المهام تكرارًا.
سهولة الاستخدام والعلامة لا يتعارضان
يُقال كثيرًا إن التصميم القوي يأتي على حساب سهولة الاستخدام. وقد يحدث ذلك حين تصعّب القرارات التصميمية الاستخدام. أما حين تنشأ المسارات والتصميم معًا، فالواجهة تستطيع أن تكون واضحة وتشبه العلامة مع ذلك: بخطها، وألوانها، وطريقتها في عرض الأشياء.
وفي موقعي Vouch وSyber Technology جمعنا هذا بالضبط: توجيه مفهوم خلال المحتوى، وتصميم يناسب كل علامة. Vouch علامة منتجات تقوم على الثقة، وSyber Technology علامة تقنية بموقع واضح وحديث وموثوق.
أين تحتاج علامات المنتجات تصميم UI/UX؟
- المتجر الإلكتروني: صفحات المنتجات، والفلاتر، وسلة الشراء، والدفع، على سلة أو زد أو متجر خاص
- أداة التخصيص: الاختيار من الخيارات حتى السعر
- حساب العميل: الطلبات، وإعادة الطلب، والفواتير
- بوابة الموزعين: قوائم الأسعار، والمخزون، والطلبات للبائعين
وفي The Cargo Brothers تقود أداة التسعير المخصصة العميل خطوة بخطوة حتى العرض. وترتيب الأسئلة قد يؤثر في وصول المهتم إلى النهاية.
كيف يجري مشروع UI/UX؟
البرمجة تتبعه كموقع، أو تطبيق ويب، أو أداة تخصيص. ولدى Alkeme Design يأتي التصميم والتنفيذ من جهة واحدة؛ ومع ذلك يُفحص في القبول هل يطابق المنتج النهائي التصميم المعتمد، فهذا ليس أثرًا مضمونًا.
- التحليل: من يستخدم الواجهة، ولماذا، وعلى أي جهاز، وبأي لغة؟
- المسارات: أي الخطوات تقود إلى الهدف، وأيها زائد؟
- المخططات الأولية: رسوم بسيطة للشاشات.
- التصميم: الواجهة بهوية العلامة.
- النموذج: نسخة قابلة للنقر، تُفحص بها المسارات قبل البرمجة.
- نظام التصميم: قواعد ومكونات، حتى تُصمَّم الشاشات الجديدة لاحقًا بشكل موحد.
أمثلة UI/UX من عملنا
| المشروع | مهمة الواجهة | قرار تجربة الاستخدام |
|---|---|---|
| The Cargo Brothers | تحديد سعر نقل مركبة | أسئلة متتالية حتى عرض فوري على الصفحة |
| Vouch | موقع علامة منتجات تقوم على الثقة | موقع مبني حول المنتج والمستخدم، مع حساب إنستغرام متناسق |
| Syber Technology | موقع علامة تقنية | التركيز على الوضوح وحضور حديث وموثوق |
والأمثلة تبيّن مهام مختلفة. ويجمعها أن المسار والتصميم طُوّرا معًا، لا واحدًا بعد الآخر.
أخطاء UI/UX معتادة في علامات المنتجات
- خيارات كثيرة دفعة واحدة. أداة تخصيص تطرح كل الأسئلة في صفحة واحدة قد ترهق العميل؛ وهذا خطر يُفحص باختبار مع المستخدمين.
- السعر في النهاية فقط. من ينقر طويلًا دون تصور للسعر، ينسحب أسهل.
- التصميم للحاسوب أولًا. كثير من العملاء يأتون من الجوال؛ فيجب أن تعمل المسارات هناك أولًا.
- أزرار غير واضحة. «التالي» تقول أقل من «عرض السعر».
- رسائل خطأ بلا حل. «إدخال غير صالح» لا تساعد أحدًا.
- تصميم لا يعمل إلا في المسودة. الأسماء الطويلة، والنص العربي مع أرقام وكلمات لاتينية، والصور الحقيقية تكشف هل تصمد الواجهة.
كم يكلف تصميم UI/UX؟
الجهد يتبع أساسًا عدد المسارات والشاشات، لا عدد الصفحات. فصفحة منتج مع سلة شراء نطاق غير بوابة موزعين بأدوار وقوائم أسعار وسجل طلبات. ومن العوامل الأخرى:
- عدد أحجام الأجهزة واللغات
- هل يُبنى نظام تصميم للتوسعات اللاحقة
- هل تُخطَّط اختبارات مع المستخدمين
- هل يأتي التصميم والبرمجة من جهة واحدة
لدى Alkeme Design يُحسب تصميم UI/UX بسعر ثابت حسب النطاق. وسعر أداة التخصيص يبدأ من 3,375 ر.س (3,300 درهم)، والمواقع ضمن النطاق من 9,000 إلى 45,000 ر.س (8,800 إلى 44,050 درهم). والسعر الثابت يصلك بعد المكالمة الأولى.
UI/UX بأدوات الذكاء الاصطناعي؟
أدوات الذكاء الاصطناعي تستطيع اليوم أن تولّد بسرعة مسودات شاشات، ونصوصًا للأزرار، ونسخًا من تخطيط. وللأفكار الأولى هذا مفيد. لكن العمل الحقيقي في قرارات لا تعرفها الأداة: من عملاؤك، وأي الأسئلة يطرحون، وأي خطوة حاسمة لعملك؟ فالمسودة المولدة دون هذا التوضيح تبدو جاهزة، لكنها نادرًا ما تحل المشكلة الصحيحة. وفي العربية خاصة، كثير من المسودات المولدة تعكس التخطيط آليًا أو تضع النص العربي في قالب لاتيني.
إمكانية الوصول من البداية
التخطيط لإمكانية الوصول مبكرًا يمنع العمل المتكرر لاحقًا. ومعيارنا في التصميم WCAG 2.2 بالمستوى AA. أما المتطلبات القانونية التي تنطبق على متجرك أو خدمتك، فتُفحص لكل سوق مع الجهة المختصة.
كيف تعرف UI/UX الجيد؟
- يجد العملاء ما يبحثون عنه دون شرح.
- على الجوال يعمل كل شيء كما على الحاسوب.
- رسائل الخطأ تقول ما يجب فعله، لا أن شيئًا خاطئ فقط.
- النسخة العربية تعمل بنصوص حقيقية من اليمين، لا كنسخة مقلوبة.
- الواجهة تشبه علامتك، لا قالبًا.
والمزيد عن عملنا في صفحة تصميم واجهات وتجربة الاستخدام.
UI مقابل UX: كيف يظهر الفرق في المشروع؟
واجهة المستخدم تصف السطح المصمم. وتجربة الاستخدام تنظر إلى تجربة الاستخدام في سياق المهمة. ففي أداة تخصيص المنتج مثلًا، تخص الواجهة الحقول والمسافات والحالات. وفحص تجربة الاستخدام يسأل أيضًا: هل يفهم الناس الاختيار، ويصلون إلى النتيجة المطلوبة؟
ولاختبار مشترك نقترح مهمة محددة دون مساعدة. سجّل أين يتوقف الناس، وأي المعلومات تنقص، وأي رسائل الخطأ مفهومة. فالواجهة المتناسقة بصريًا نتيجة يمكن فحصها. أما هل المسار كله مفهوم، فيحتاج ملاحظة منفصلة.