الدليل النهائي لكيفية تصميم موقع الكتروني يتمحور حول المستخدم

مفهوم التصميم المتمركز حول المستخدم ليس جديدًا على مواقع الويب. تُعد تجربة المستخدم منطقة سريعة النمو من تصميم الواجهة ، وقد أصبحت شائعة للغاية بين مصممي تطبيقات الويب والجوال.



ولكن كيف بالضبط تذهب من خلال عملية تصميم تتمحور حول المستخدم؟ أرغب في تغطية بعض النصائح حول التصميم الذي يركز على المستخدم والتي يمكنك تطبيقها على كل مشروع جديد. من خلال وضع المستخدم أولاً واعتباره قابلية الاستخدام ، يصبح من الأسهل تصميم واجهات تلتقط الانتباه وتترك الأشخاص في الصفحة.

ما هو التصميم الذي يركز على المستخدم؟ 


كانت فكرة التصميم الذي يركز على المستخدم موجودة في تطوير البرمجيات منذ عقود. يعمل المصممون على اعتبار سلوك المستخدم لكل خطوة في العملية الإبداعية. إذا كنت تركز على المستخدم ، فأنت تريد التفكير في كيفية تصرف المستخدم وما هي إجراءاته النموذجية.

في ما يلي مقالة مقتبسة من مدخل ويكيبيديا لتصميم مرتكز على المستخدم.
يمكن وصف التصميم الذي يركز على المستخدم بأنه عملية حل المشكلات متعددة المراحل والتي لا تتطلب فقط من المصممين تحليل وتوقع كيفية استخدام المستخدمين لمنتج ما ، ولكن أيضًا لاختبار مدى صحة افتراضاتهم فيما يتعلق بسلوك المستخدم في العالم الحقيقي الاختبارات.

أفضل طريقة لتصميم واجهة للمستخدم هي وضع نفسك في عقليته. ما هي أهدافهم؟ ما هي الوظائف التي يحتاجون إليها لأداء هذه الأهداف؟ هل من الواضح ما هي الإجراءات المتاحة فقط من خلال النظر إلى واجهة؟
على موقع الويب مثل PayPal ، قد يكون الهدف إرسال الأموال أو إرسال فاتورة أو تحويل الأموال إلى / من حساب مصرفي أو العديد من الإجراءات المشابهة الأخرى. سيكون لكل هدف سلسلة مختلفة من الخطوات في العملية.

يتطلب تصميم واجهة متعددة الأوجه اتجاه واضح. أجد أنه من الأفضل إدراج جميع الميزات الأساسية للموقع وتنظيمها حسب الأولوية. بهذه الطريقة سيكون من الأسهل تصميم واجهة تركز على أهم المهام.
الهدف هو خلق تجربة يختارها المستخدمون بسرعة. أو إذا لم يكن ذلك ممكنًا ، فعلى الأقل قم بإنشاء واجهة قابلة للتعلم وسهلة الإلتقاط مع بعض الإرشادات.

يتأرجح التصميم المرتكز على المستخدم بين مرحلتين مختلفتين: التصميم والاختبار. أنت تخطط لأول مرة خارج الواجهة على أساس افتراضات من سلوكيات المستخدم. ثم يمكنك اختبار الواجهة على المستخدمين الحقيقيين ومعرفة ما إذا كانت افتراضاتك صحيحة.
قد يكون البعض على حق ، والبعض الآخر ليس كذلك. من هناك أنت قرص واختبار مرة أخرى.
تفرض هذه الاستراتيجية على المصممين إنشاء واجهات تكون طبيعية لسلوك المستخدم بدلاً من إجبار المستخدمين على تعلم سلوكيات جديدة فقط للواجهة الخاصة بك.

خذ على سبيل المثال أدوبي فوتوشوب أو مايا. هذه البرامج معقدة بشكل لا يصدق وليس هناك طريقة لجعل هذه بديهية بشكل طبيعي للمبتدئين. ولكن بمجرد أن تتعلم Photoshop ، يكون من الأسهل تعلم برامج Adobe الأخرى مثل Illustrator أو Flash أو InDesign.

يتبع برنامج سطح المكتب بعض معايير التصميم تمامًا مثل مواقع الويب. إذا تعلمت كيفية تصرف المستخدمين عادةً على إحدى الصفحات ، فسيكون من الأسهل تصميم واجهة مستخدم طبيعية لموقع الويب من البداية.
نصائح واجهة قابلة للاستخدام

من المهم أن تتذكر أن الطريقة التي تعتقد أن شيئًا ما يعمل بها قد يكون مختلفًا تمامًا عن الطريقة التي يعتقد المستخدمون أن شيئًا ما يعمل بها. هدفك كمصمم متمحور حول المستخدم هو دمج كل شيء معًا بحيث تعمل الواجهات بشكل مشابه تمامًا للطريقة التي يعتقد المستخدمون أنها يجب أن تعمل بها.

مثال جيد هو واجهة Feedly. لديها العديد من المراوغات والميزات ، بعضها يعمل بشكل أفضل من الآخرين. أعتقد أن مصممي Feedly يمكن أن يتعلموا الكثير من خلال دراسة مبادئ التصميم المتمحورة حول المستخدم.
لنفترض أنك عثرت على موجز RSS ونسخ عنوان URL لإضافته إلى حسابك في Feedly. هذا إجراء شائع جدًا لذا يجب أن يكون نقرة واحدة.

ولكن هذا هو ما تبدو عليه الشاشة عندما أسجل الدخول إلى Feedly. هل ترى أي رابط "إضافة خلاصة" واضح؟ رمز علامة الجمع؟ أي شيء على الإطلاق لإضافة مواجز جديدة؟

هذه هي قضية صارخة أواجهها باستمرار عند استخدام Feedly. ما عليك فعله هو النقر على الرابط "اكتشاف واتباع" في الشريط الجانبي ، ولصق عنوان URL للخلاصة ، ثم الانتظار حتى يتم اقتراح الخلاصة لإضافتها تلقائيًا.

يرصد حرفيا Feedly لجمع وتنظيم الأعلاف. تعد إضافة موجز جديد بمثابة وظيفة أساسية لمثل هذا البرنامج ، ومع ذلك يتم دفنه خلف رابط لا يمكن لأحد أن يخمنه للوهلة الأولى. هذا هو عكس التصميم الذي يركز على المستخدم.
هناك الكثير يمكنك تعلمه من هذا التصميم. أكبر درس هو اختبار واجهتك ضد سلوكيات المستخدم الشائعة. لا تضع قلمًا أو تنشئ مستندًا جديدًا حتى تفكر في سلوك المستخدمين عادةً.

ابدأ بإدراج جميع الميزات الشائعة التي يحتاج إليها موقعك وتنظيمها حسب الأولوية. ضع في اعتبارك أيضًا كيف يمكن أن تتغير الأولويات في صفحات مختلفة.

على سبيل المثال في Feedly قد أرغب في إضافة موجز إلى مجلد مباشرةً. لذلك عندما أتصفح مجلد "web dev news" ، يجب أن يكون هناك رمز زائد لإضافة موجز إلى هذه الفئة بسرعة.

لنعد إلى مثال PayPal ونقول إننا في صفحة الفاتورة. في ما يلي بعض الإجراءات الشائعة التي قد يحتاج المستخدمون إلى تنفيذها:


  1. إنشاء فاتورة جديدة 
  2. إنشاء نموذج فاتورة
  3. تصفح الفواتير السابقة 
  4. التحقق من الفواتير المستحقة الحالية 
  5. كل هذه الأمور سريعة وسهلة مع الموقع الحالي لـ PayPal. 


إذا قمت بتنظيم افتراضاتك لسلوكيات المستخدم ، فسيكون من الأسهل إنشاء واجهات تتوافق مع هذه السلوكيات.
تصميم مواقع الويب التي تتمحور حول المستخدم

هناك عدد من التقنيات المختلفة لمواقع الويب التي تتمحور حول المستخدم وتعود جميعها إلى فكرة التصميم السليم.
يتعرف الجميع على الويب على أنماط التصميم الأساسية. غالبًا ما تتضمن الرؤوس ارتباطات التنقل. عادةً ما تكون منطقة المحتوى هي أكبر كتلة على الصفحة. غالبًا ما يتضمن التذييل روابط غير بارزة في قائمة التنقل العلوي.
باتباع هذه الاتفاقيات كنت تتبع افتراضات المستخدم. من النادر أن نكافح المد عندما يكون الكثير من الأشخاص مشردين للتفاعل مع مواقع الويب بطريقة محددة جدًا.

على سبيل المثال ، يحتوي موقع Apple's Mac على ارتباطات في التنقل الفرعي لكل نوع مختلف من iMac أو MacBook. هذا هو عادة ما يبحث عنه كل مستخدم عند زيارته لهذه الصفحة.

لا يختلف مستخدمو الويب كثيرًا عن مستخدمي البرامج. لدى الوسائط المختلفة أنماط تصميم خاصة بها ، لكن سلوكيات المستخدم تتبع عادةً مسارًا خطيًا للعمل.

إذا كنت تنشئ مواقع ويب تتمحور حول المستخدم ، فأنت مهتم بشكل أساسي بالسلوكيات على الصفحة. معظم المواقع تحتوي على معلومات يحتاجها الناس. لكن المواقع الأخرى أكثر ديناميكية مثل الشبكات الاجتماعية والمنتديات.
صياغة واجهة على أساس احتياجات المستخدم والسلوكيات. هذا هو المفتاح إلى موقع ويب مرتكز على المستخدم وستتعلم الكثير من خلال اختبار الموقع على المستخدمين الحقيقيين.

أدوات اختبار المستخدم 


إن أساس التصميم المرتكز على المستخدم هو إنشاء واجهات للمستخدمين وإجراء اختبارات لقياس التفاعلات. الجزء الأول سهل إذا كنت تعرف القليل عن سهولة الاستخدام.
هذا الأخير هو أكثر صعوبة ولكن لا يزال قطعة مهمة جدا من اللغز. فأنت لا تعرف أبدًا ما إذا كان المفهوم سيعمل حتى تختبره على جمهور حي.

لحسن الحظ هناك طن من الأدوات و webapps يمكنك استخدامها لجمع ردود فعل المستخدمين الحقيقية. هذه هي أهم الاقتراحات التي أقدّمها لكن الأدوات الجديدة تنبثق من حين لآخر وتتغير المناظر الطبيعية دائمًا.
اختبار المستخدم

أكثر الخدمات المعروفة والموثوقة هي UserTesting.com. لا يمكنك فقط اختبار سلوكيات المستخدم الأساسية ، بل يمكنك أيضًا اختبار التفاعل وتتبع الحملات مثل التنزيلات أو مشاهدات الفيديو.

لديهم خدمة مجانية تسمى Peek مثالية لبدء الاستخدام في التصميم المرتكز على المستخدم. يمكنك الحصول على فيديو مجاني مدته 5 دقائق لمستخدم يتفاعل مع موقعك على الويب. هذا مجاني تمامًا وهو طريقة لقياس جودة خدمات UserTesting.
لا يمكنك أن تخطئ في استخدام ميزة "نظرة خاطفة" ، ومع أن حجم العينة صغير ، يمكنك التقاط بعض الأفكار من اختبار مستخدم واحد فقط.


تتجه خدمة Lookback أكثر نحو البرامج وتطبيقات الجوال ، ولكن يمكن تطبيق الوظيفة على واجهات الويب أيضًا. يمكنك الحصول على فيديو مباشر لكل شخص في تجمع اختبار المستخدم الخاص بك.
يتضمن هذا مقطع فيديو للشاشة إلى جانب ردود أفعال المستخدم على الواجهة. يمكن مشاهدة كل شيء ومشاركته عبر Skype لتسهيل العملية.
يعد Lookback رائعًا للتعاون ومشاركة الأفكار مع الأعضاء الآخرين في الفريق. إنها واحدة من أبسط الأدوات لاختبار المستخدمين وتقدم الكثير من الميزات المتميزة.

هناك علامة تجارية شائعة أخرى هي UsabilityHub والتي تقدم عددًا من اختبارات الاستخدام المختلفة. يمكنك تشغيل اختبار النقرات لمشاهدة سلوكيات المستخدم ، أو يمكنك تشغيل اختبار سؤال حيث يتم طرح الأسئلة على المستخدمين حول تجربتهم. وتشمل الخيارات الأخرى اختبارًا بخمسة ثوانٍ واختبار تفضيل حيث يختار المستخدم تصميمه المفضل بين خيارين (مثل الشعار أو الواجهة).
الاختبارات محددة للغاية وسهلة للغاية لتشغيل. وأعتقد أيضا أن UsabilityHub هي واحدة من أفضل الصفقات بالنسبة للسعر. يمكنك الوصول إلى جميع اختباراتهم ويمكنك الدفع لهم بشكل فردي مع نظام النقاط الفريد الخاص بهم. تحقق من صفحة التسعير لمعرفة المزيد حول كيفية عمل ذلك.

لم أكن أتلاعب مع TryMyUI ولكن يبدو أن معظم التعليقات إيجابية للغاية. يمكنك إعداد اختبار محدد والاختيار من بين مجموعة سكانية واسعة من المستخدمين.

يعمل الاختبار ويسجل كل شيء على الشاشة. يمكنك بعد ذلك تشغيل العملية بأكملها ومشاهدة المستخدم في محاولة حل مشكلة في واجهتك. يسمح كل اختبار بأربعة أسئلة فريدة لكل مستخدم والتي يمكن أن تقدم معلومات إضافية.
يحتوي TryMyUI على حساب مجاني لائق حيث لا تدفع إلا مقابل كل اختبار تجريه. الميزات قابلة للمقارنة مع أدوات أخرى وهذا مثالي لمصمم UI / UX يعمل تحديدًا على مواقع الويب.

ومن المرجح أن توفر هذه الأدوات الأربعة أفضل نقطة انطلاق لاختبار التصميم الذي يركز على المستخدم. ولكن هناك العديد من الخيارات الأخرى المتاحة ، حفنة منها مذكورة أدناه:

  1. OpenHallway 
  2. Validately
  3. WhatUsersDo 
  4. Loop11 


كل هذه الأدوات هي خيارات رائعة لمصممي الويب. بغض النظر عن ما ستقوم باختياره ، ستحصل على نتائج جيدة يمكن التعامل معها لتحسين الواجهة.

عندما تتدرب على التصميم الذي يركز على المستخدم لأول مرة ، قد يبدو الأمر غريبًا بعض الشيء. ولكن مع مرور الوقت سوف تنمو لتصبح جزءاً من إيقاعك الطبيعي. إنه بلا شك أفضل طريقة لتصميم واجهات تعمل بشكل صحيح ولديها أكبر قدر من التعلم للمستخدمين الجدد.

إذا كنت مهتمًا بمعرفة المزيد ، فاطلع على هذا المنشور حول سهولة الاستخدام أولاً.
أفضل طريقة للتعلم هي أن تحفر وتمارس مشروعك التالي. عندما تبدأ مشروع تصميم ويب جديد فكر في سلوكيات المستخدم النموذجية والإجراءات والتوقعات. ويمكن أن تساعد هذه المشاركة في توجيهك على طول الطريق خلال عملية تصميم تتمحور حول المستخدم.

تعليقات

المشاركات الشائعة من هذه المدونة

6 مبادئ تطبقها شركات تصميم مواقع الانترنت المحترفه في اعمالها

أساسيات مهمة لتصدر موقعك الالكتروني بمحركات البحث

كيفية تصميم موقع صفحة واحدة بسيط وجميل