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

فهرس سلسلة مدخل إلى تجربة المستخدم:

• مدخل إلى تجربة المستخدم User Experience
• فهم ودراسة المستخدمين في مجال تجربة المستخدم
• دراسة الشريحة المستهدفة في مجال تجربة المستخدم  (هذا الدرس)
• كيفية التصميم للأجهزة المختلفة
• هندسة المعلومات في تجربة المستخدم
• تعرف على أنماط التصميم في مجال تجربة المستخدم
• أشياء لا يمكن اعتبارها رسوما تخطيطية (Wireframes) في مجال تجربة المستخدم
• تعرف على الرسوم التخطيطية (Wireframes) في مجال تجربة المستخدم
• مفهوم الثقل المرئي (Visual Weight) والألوان في مجال تجربة المستخدم
• التكرار ومخالفة الأنماط في مجال تجربة المستخدم
• المحاذاة والقرب في مجال تجربة المستخدم
• تعرف على أساليب مسح الواجهة والتراتب المرئي في مجال تجربة المستخدم
• أساليب الإطلاع في مجال تجربة المستخدم: التصفح، البحث والاكتشاف
• تصميم هيكل صفحة الويب والعناصر الأساسية في مجال تجربة المستخدم
• الأزرار، النماذج والدعوات إلى الإجراء في مجال تجربة المستخدم
• استخدام علم النفس في مجال تجربة المستخدم لتكييف المستخدم وإقناعه
• كيف تغير الخبرة من تجربة المستخدم؟
• تصميم تجربة المستخدم من خلال بيانات وإحصائيات المستخدمين
• تعرف على أنواع المخططات الإحصائية في مجال تجربة المستخدم
• اختبارات أ/ب (A/B Test) في مجال تجربة المستخدم

تحديد الشريحة المستهدفة

لكي نفهم الشّخصيّة المُستهدفة (نُسمّيها Persona أو User Profile)، يجب أن نُدرك أنّها لا تعني أيًّا ممّا يلي:

• أنماط الشّخصيّة
• الصفات الديموغرافية
• الشخصيات الظاهرة في "قصّة علامتك التّجاريّة"
• الآراء المُسبقة المبنيّة على خبرتك الشّخصيّة
• المفاهيم
• التّنبّؤات

إذًا ما المقصود بالشّخصيّة المُستهدفة؟ المقصود هو أهداف المُستخدمين الحقيقيّة، وتوقّعاتهم، ودوافعهم، وسلوكهم: لماذا يزورون موقعك؟ ما الذي يبحثون عنه؟ ما الّذي يُزعجهم فيه؟ وهلمّ جرًّا...

يُفترض أن تكون كلّ المعلومات الّتي تحتاجها مُستقاة من الأبحاث والبيانات الّتي جمعتها، فإنّ لم يكن لمعلومات ما يدعمها من البيانات والأبحاث، فإنّ استنتاجاتك مُختلقَة، وعليك أن تتوقّف!

مواصفات شخصية غير مفيدة

الشّخصيّة أ تُمثَّل أنثى بين 35-45 من العمر، متوسّطة الدخل والتّعليم، لديها طفل واحد على الأقل ولديها سيّارة جديدة واحدة على الأقل، تحبّ الاختلاط بالنّاس والعمل، وتميل إلى تغليب النّصف الأيمن من دماغها.

لماذا لا تُعتبر هذه المواصفات مفيدة؟ قد تكون مفيدة إن كنت تبيع الإعلانات، ولكنّها غير مُجدية لنا كمصمّمي تجربة المُستخدمين، لأنّها لا تسمح لنا باستبعاد أيّة أفكار أو ميّزات في المشروع، إذ أنّنا لا نعلم ما الميّزات الّتي تحتاجها أنثى عمرها 35-45! فقد تكون أيّ شيء!

مواصفات شخصية مفيدة

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

لما تُعتبر هذه المواصفات مُفيدةً؟ لأنّ لدينا الآن معلومات كثيرة يمكن استخدامها، فنحن نعلم أن المحتوى السّخيف لن يكون شائعًا، وأن تجميع المحتوى سيكون مُهمًّا، ونحتاج لآليّة لتنصيف المحتوى في فئات، كما أنّه من الضّروريّ أن تكون عمليّة المشاركة على الشبكات الاجتماعيّة سهلة وسريعة.

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

فكر في المستخدمين "المثاليين"

عندما تفكّر في ميّزات المشروع، احرص على وضع صورة المُستخدم المثاليّ نُصب عينيك، فمهمّتك ليست تكريس السّلوك الحاليّ للمستخدم، بل دفعهم نحو هذه الصّورة المثاليّة.

تذكّر أن النّاس يختلفون، وسيكون لديك مجموعات ذات سلوكيّات مختلفة، فاحرص على تمثيل كلّ مجموعة بشخصيّة مُناسبة.

ترجمة بتصرّف للدرس Creating User Profiles من سلسلة Daily UX Crash Course لصاحبها Joel Marsh.

اقرأ أيضًا

• النسخة العربية الكاملة من كتاب مدخل إلى تجربة المستخدم (User Experience - UX) 1.0.0
• كيف تصبح مرشحًا مميزًا لوظيفة تجربة المستخدم تلك، الجزء الأول

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

1. أوضح مكان تسجيل الدخول

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

من الأفضل أن تظهر حقول الإدخال في موقعك مثلما تفعله فيس بوك، بدلاً من وضع رابط فحسب.

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

سيحتاج مستخدمو Evernote إلى البحث كثيرًا لإيجاد طريقة تسجيل الدخول.

2. ميز ما بين تسجيل الدخول وتسجيل حساب

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

من السهل تشتيت المستخدم عن نموذج تسجيل الدخول بنموذج تسجيل الحساب في موقع AxShare.

3. اسمح للمستخدمين بتسجيل الدخول عبر حساب خارجي (كحساب فيس بوك مثلا)

لماذا تجبر المستخدمين على تذكر معلومات إدخال جديدة كل مرة في حين أن تسجيل الدخول من حساب خارجي قد صار أسهل الآن، كتسجيل حساب باستعمال حساب مسبق في Facebook ،Google أو LinkedIn، بالطبع، لن يوّد الجميع فعل ذلك، لكنها طريقة جيّدة لتسهّل تسجيل الدخول على مستخدميك في موقعك أو تطبيقك، باستخدام حساب يستعملونه يوميًّا.

يسمح موقع Ocado بذكاء لمستخدميه بأن يسجّلوا دخولهم مستعملين حساباتهم على Facebook أو PayPall.

4. استعمل البريد الإلكتروني، بدلا من اسم المستخدم

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

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

5. وفر للمستخدمين إمكانية رؤية كلمة المرور (إن أرادوا ذلك)

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

تسمح Microsoft بذكاء لمستخدميها بأن يُظهروا كلمة مرورهم أثناء تسجيل الدخول في العديد من تطبيقاتهم على الهواتف.

6. أخبر المستخدم إذا كان يستخدم الأحرف الكبيرة

سيكون تحذير المستخدم بكون زر Caps Lock مفعّلاً طريقةً بسيطةً لمساعدة المستخدمين على إدخال كلمة المرور الصحيحة.

إخبار المستخدمين بأنهم يستعملون الأحرف الكبيرة هو أمر جيّد.

7. سهل عملية تغيير كلمة المرور إذا نسيها المستخدم

مثلما ينسى الجميع في بعض الأحيان أسماء الناس، محفظاتهم، أو أعياد ميلادهم، أو ذكرى زواجهم (وأنصحك بأن تتجنب نسيان هذه الأخيرة)، سينسى المستخدمون كلمات سرّهم أيضًا.

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

لدواعِ أمنية قد ترغب في التّحقق من هوية المُستخدم قبل أن تسمح له بطلب إعادة كلمة السّر (يحدث الأمر عادة مع مواقع الـB2B). اطلب من المُستخدم أن يجيب على سؤال مُعيّن تعلم أن المستخدم الحقيقي للحساب هو الوحيد القادر على الإجابة عليه. المهم هو أن تكون منطقيًّا أثناء عرضك لأسئلة الأمان، فلن يتذكر أغلب الناس الإجابة الصحيحة إذا سألتهم عن أشياء يسهل الإجابة عنها بشكل خاطئ.

أحد الأفكار الذكيّة التي يتّبعها موقع Evernote هو تذكير المستخدمين بآخر مرة غيّروا فيها كلمة مرورهم إذا أدخلوا كلمة المرور الخاطئة.

8. حذر المستخدمين قبل إقفال الحساب

لتجنّب هجوم القوة العمياء، يُقفل حساب المستخدم عادة لفترة زمنيّة بعد بضعة محاولات فاشلة لتسجيل الدخول. بالطبع، هذا أمر ضروري لأمان الحساب، لكن من الواجب عليك أن تُعلم المستخدم بأن حسابه سيتعرض للإقفال، كمثال، إذا كان الحساب سيُقفل لـ10 دقائق بعد خمسة محاولات مخفقة للدخول، حذّّر المستخدم بعد المحاولة الثالثة بأن حسابه سيُقفل لعشرة دقائق إذا لم ينجح في تسجيل الدخول في المحاولتين القادمتين.

9. أبق حسابات المستخدمين مفتوحة بعد فتح حساباتهم

مضت تلك الأيام التي يدخل فيها النّاس إلى المواقع والخدمات من حواسيب عمومية (هل تتذكر أيام مقاهي الإنترنت؟)، لذا، بدلاً من إتاحة خيار "احفظ بيانات تسجيل الدخول" (Keep me signed in)، من الأفضل أن تُبقي حسابات المستخدمين مفتوحة بعد تسجيل الدخول في الموقع أو التطبيق لمدة زمنيّة محددة (طالما أن الأمان ليس مطلبًا بالغ الأهميّة مثلما هو عليه الحال مع التطبيقات والمواقع البنكية). بالطبع، في بعض الأحيان سيكون الحاسوب مشتركًا (بين أفراد الأسرة على سبيل المثال)، ولهذا، من الضروري أيضًا أن يتمكّن المستخدم من تسجيل الدّخول بحساب آخر في أي وقت.

10. تذكر المستخدم حين يعود

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

تسهّل خدمات Google على مستخدميها تسجيل الدخول بتذكّر الحساب، بحيث لا يحتاج المستخدم إلا لإدخال كلمة المرور.

ترجمة -وبتصرف- للمقال: Ten 10 tips for a better login page and process لصاحبه Neil Turner.

المستخدمون، محور عالم تجربة المستخدم، وهمّنا الأوّل والأخير. أحد القوانين المقدّسة في تجربة المستخدم: "لا تلم المستخدم مهما يكن"، على الرغم من أنّ لومه قد يكون مُغريًا أحيانًا.

فهرس سلسلة مدخل إلى تجربة المستخدم:

• مدخل إلى تجربة المستخدم User Experience
• فهم ودراسة المستخدمين في مجال تجربة المستخدم (هذا الدرس)
• دراسة الشريحة المستهدفة في مجال تجربة المستخدم
• كيفية التصميم للأجهزة المختلفة
• هندسة المعلومات في تجربة المستخدم
• تعرف على أنماط التصميم في مجال تجربة المستخدم
• أشياء لا يمكن اعتبارها رسوما تخطيطية (Wireframes) في مجال تجربة المستخدم
• تعرف على الرسوم التخطيطية (Wireframes) في مجال تجربة المستخدم
• مفهوم الثقل المرئي (Visual Weight) والألوان في مجال تجربة المستخدم
• التكرار ومخالفة الأنماط في مجال تجربة المستخدم
• المحاذاة والقرب في مجال تجربة المستخدم
• تعرف على أساليب مسح الواجهة والتراتب المرئي في مجال تجربة المستخدم
• أساليب الإطلاع في مجال تجربة المستخدم: التصفح، البحث والاكتشاف
• تصميم هيكل صفحة الويب والعناصر الأساسية في مجال تجربة المستخدم
• الأزرار، النماذج والدعوات إلى الإجراء في مجال تجربة المستخدم
• استخدام علم النفس في مجال تجربة المستخدم لتكييف المستخدم وإقناعه
• كيف تغير الخبرة من تجربة المستخدم؟
• تصميم تجربة المستخدم من خلال بيانات وإحصائيات المستخدمين
• تعرف على أنواع المخططات الإحصائية في مجال تجربة المستخدم
• اختبارات أ/ب (A/B Test) في مجال تجربة المستخدم

دراسة المستخدمين (User Research)

تختلف الآراء حول ترتيب دراسة المستخدمين في تجربة المستخدم، فالبعض يقول بالبدء بها، والبعض يقول بالدراسة بعد التخطيط، والبعض يقول بعد الوصول إلى نسخة عاملة من المنتج.

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

السؤال الأهم ليس "متى نقوم بدراسة المستخدمين؟". بل "ما الغرض منها؟". ما الذي تحاول فهمه عن مستخدميك؟

للمعلومات التي يمكن استخلاصها من دراسة المستخدمين نوعان رئيسيّان: موضوعيّ وشخصيّ.

دراسة شخصية

كلمة "شخصيّ" (subjective) تعني أنّ الأمر متعلّق برأي معيّن، أو بذكرى معيّنة، أو بانطباع معيّن عن شيء ما. المقصود هو الشعور الذي ينتج عن هذا الشيء، والتوقّعات التي يخلقها، وليس الحقيقة المجرّدة.

"ما لونك المفضّل؟"

"هل تثق بهذه الشّركة؟"

"هل أبدو سمينًا بهذا السّروال؟"

ما أقصده من هذه الأسئلة هو أنه ما من إجابة "صحيحة" عليها.

للقيام بهذا النوع من الدراسة ينبغي على من يقوم بالدراسة طرح أسئلة على المستخدمين.

دراسة موضوعية

الكلمة "موضوعيّ" (objective) تعني حقيقة الأمر، وهي شيء يمكن إثباته، لا تغيّره الآراء مهما تمنّينا عكس ذلك.

"كم أمضيت من الوقت ضمن تطبيقنا؟"

"أين وجدت رابط موقعنا؟"

"كم مستخدمًا زار موقعنا اليوم؟"

لو أن للناس ذاكرة سليمة تمامًا، ولو أنّهم يصدقون دومًا، لكنّا سألنا المستخدمين هذه الأسئلة (لو وجدت شخصًا بهذه المواصفات، أخبرني!)

الحقيقة أنّنا نصل إلى المعلومات الموضوعيّة من خلال القياسات والإحصاءات. ولكن إحصاء شيء ما لا يعني مباشرةً الوصول إلى الحقيقية المجرّدة.

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

حجم العينة

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

هل تعني ضخامة المعلومات الشّخصيّة معلومات أقرب ما تكون للموضوعيّة؟

إن طلبت من أناسٍ كثيرين أن يُخمّنوا الجواب لأمر موضوعيّ (مثلًا عدد حبّات الحلوى في علبة) فإن متوسّط التّخمينات سيكون قريبًا جدًّا من الإجابة الحقيقيّة الموضوعيّة.

ولكن "حكمة الجماهير" في أمر موضوعيّ قد تؤدّي إلى الفوضى أحيانًا وأحيانًا أخرى إلى انتخاب جورج بوش! لذا كن حذرًا!

كيف تطرح الأسئلة على العينة؟

هناك 3 أنواع أساسيّة للأسئلة:

• أسئلة مفتوحة: "لو طلبت منك أن تصفني، فكيف ستصفني؟" وهذا النّوع يفتح الباب لنطاق واسعٍ من الإجابات، ويكون مناسبًا عندما تريد أكبر قدر من الآراء والتّعليقات.
• أسئلة تبدأ بافتراضات: "ما أهي أجمل ملامحي؟" وهذا النّوع يحصر الإجابات ضمن فئة محدودة، فالسؤال ذاته يفترض أنّني جميل (وهذا قد لا يكون صحيحًا!). توخَّ الحذر! فقد يحجب هذا النّوع من الأسئلة إجابات قد ترغب بسماعها!
• أسئلة مغلقة أو مباشرة: "أيّهما أجمل: مرفقي أم ركبتي؟". هذا النّوع يوفّر خيارًا، نعم أو لا، هذا أو ذاك، ولكن تذكّر: إن كانت الخيارات غبيّة، فستكون النّتائج غبيّة كذلك.

بعض الأمثلة على الأبحاث الموضوعية

• مقابلات: اسأل شخصًا ما مجموعة من الأسئلة المتتالية.
• المُلاحظة: أسنِد مجموعة من المهمّات أو التّعليمات إلى العيّنة وراقب كيف يستخدمون تصميمك دون مساعدة، بعد ذلك يمكنك طرح أسئلتك.
• مجموعات التّركيز: اجمع بعض النّاس في غرفة واطلب منهم مناقشة أسئلتك. ملاحظة: عادةً ما يُقنع الأفراد الواثقون من أنفسهم غيرهم ممّن في الغرفة برأيهم، وعلى العكس يكون البعض غير أهلٍ للمناقشة، ولذا أفضّل عادةً أن ألقي بنفسي في النّار على أن أختار هذا الأسلوب.
• الاستبيانات: نموذجٌ تملأه العّينة على الورق أو على الويب، من ميّزاته عشوائيّة العيّنة، وهذا قد يكون مُفيدًا.
• ترتيب البطاقات: يحصل كل فرد في العيّنة على مجموعة من الأفكار أو الفئات (مكتوبة على بطاقات) ويُطلب منه ترتيبها في مجموعات ذات معنى مُفيد. تُعطي هذه العمليّة بعد إجراء عدّة أشخاص لها فكرة عن التوزيع المرغوب للعناصر في قوائم الواجهة. (ملاحظة: لا تستخدم زملائك في العمل لهذا الغرض، اجلب عيّنة حقيقيّة).
• Google: يمكنك العثور على آراء مُفيدة للغاية على الويب، مجّانًا وعند الطّلب.

ملاحظات هامة

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

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

ترجمة بتصرّف للدّرسين What is User Research و How to Ask People Questions من سلسلة Daily UX Crash Course لصاحبها Joel Marsh.

حقوق الصورة البارزة: Designed by Freepik.

اقرأ أيضًا

• النسخة العربية الكاملة من كتاب مدخل إلى تجربة المستخدم (User Experience - UX) 1.0.0
• أفضل خمس طرق اختبار للمستخدم
• كيف تتصرف في جلسة بحث عن تجربة المستخدم UX

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

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

1. قدم لمحة سريعة عن المنتج بدون تسجيل حساب

أتذكر آخر مرة تسوّقت فيها داخل متجر حقيقي؟ هل تتذكر أنك قد احتجت حينها إلى ملء نموذج لتتمكن من دخول المتجر؟ لا؟ أتعني أنك كنت قادرًا على إلقاء لمحة سريعة على منتجاتهم دون الاحتياج إلى "تسجيل حساب" لديهم؟

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

تسمح Balsamiq لمستخدميها بإطلاق نسخة تجريبيّة من رسومات واجهة تطبيقهم الأوليّة دون الاحتياج إلى تسجيل أي حساب جديد.

2. أعط مستخدميك أسبابا مقنعة لتسجيل حساب جديد

إنها نصيحة معروفة بالتأكيد، لكنها مع ذلك أفضل النصائح التي ستحصل عليها غالبًا: أعطِ المستخدم سببًا مقنعًا لكي يسجّل حسابًا جديدًا عندك. أجب عن ذلك السؤال الصغير الذي تردّد دائمًا في أذهان المستخدمين: ما الذي سأحصل عليه عبر تسجيل حساب جديد؟

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

تُبرز Evernote فوائد تسجيل حساب جديد بطريقة ممتازة.

3 . إذا كان تسجيل الحساب مجانيا، فوضح ذلك

إذا كان من الممكن للمستخدمين تسجيل حساب جديد مجّانًا في منتج أو خدمة، حتى لو كان هذا لفترة تجربة قصيرة، فمن الواجب حينها إيضاح هذا جيدًا. يقوم موقع Trello (أداة لإدارة المشاريع والمهام عبر الويب) بتوضيح إمكانية تسجيل حساب مجّانًا بطريقة رائعة. لقد استبدلوا زر "سجّل" الذي يُستعمل عادة بزر آخر، يعلمك بكل وضوح بأنّ التسجيل مجاني.

يُبرز موقع Trello إمكانية التسجيل المجّاني جيّدًا.

4. اجعل عملية التسجيل من خطوة واحدة فقط

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

يُقدم موقع tumblr تجربة تسجيل سريعة من خطوة واحدة (وإن كنت لا أتفق مع وضع نصّ أبيض على صورة خلفية).

5. اهتم بتوقعات المستخدم

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

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

تذكر شركة MailChimp أنك لن تحتاج إلى إدخال معلوماتك البنكية وأن التسجيل سيستلزم ثلاثين ثانية من وقتك.

6. أبرز عدد الذين سجلوا بالفعل حتى الآن

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

تشجّع InVision زوّار موقعها على تسجيل حساب جديد عبر إبراز أن أكثر من مليون مصمم قد استعملوا الأداة حتى الآن.

7. اطلب أقل قدر من المعلومات

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

بدلاً من السؤال عن الكثير من المعلومات مباشرة عند التسجيل، من الأفضل أن تطلب أقل قدر ممكن من المعلومات (البريد الإلكتروني وكلمة المرور عادة) ثم السؤال عن بقية المعلومات كجزء من عملية إتمام الحساب، وكمثال حي، يطلب موقع Slack (أداة للتراسل والتواصل بين أعضاء الفرق) البريد الإلكتروني عند التسجيل فحسب، ثم يطلب خلال تفعيل البريد الإلكتروني تحديد كلمة للمرور.

يطلب Slack عند تسجيل حساب جديد معرّف البريد الإلكتروني فحسب، ويطلب تحديد كلمة المرور أثناء تفعيل البريد الإلكتروني.

8. لا تطلب نفس المعلومة مرتين

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

• مرحبًا، أنا سامر.
• أهلاً سامر، أنا سعيد بلقائك، ما اسمك يا سامر؟
• سامر، اسمي هو سامر، ولقد ذكرتَه بنفسك للتو.

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

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

لا تطلب شبكة التواصل الاجتماعي Twitter من مستخدميها نفس المعلومة إلا مرة واحدة خلال تسجيل حساب جديد.

9. وفر خيار التسجيل باستخدام حساب خارجي

تستطيع تسهيل وتسريع عملية التسجيل عبر إتاحة استخدام حساب خارجي للتسجيل، كحساب من Google ،Twitter ،LinkedIn ،PayPal أو Facebook، ولن يجعل هذا تسجيل الدخول أسهل حالما يقوم المستخدمون بتسجيل حسابهم فحسب (بما أنهم يستعملون معلومات يدخلونها يوميًا)، لكن هذا سيجعل عملية تسجيل الحساب أيضًا فائقة السرعة والسهولة متجر Ocado (محل تسوق عبر الويب) يقدّم بذكاء خدمة تسجيل حساب بإدخال المعلومات الشخصيّة أو إدخال معلومات حسابهم الشخصيّ على PayPal أو Facebook.

يمكن لزبائن متجر Ocado إذا رغبوا بذلك تسجيل حسابهم مستعملين حساباتهم الأصلية على PayPal أو Facebook.

10. طمئن المستخدمين حول خصوصيتهم أثناء التسجيل

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

لقد فهم موقع SurveyMonkey (أداة لصنع الاستبيانات عبر الويب) أهمية هذا الأمر، ويقوم الموقع بطمأنة المستخدمين موضّحًا أنهم إن سجّلوا حسابهم باستعمال حساب مسبق من Google أو Facebook فإن معلوماتهم ستبقى سريّة تمامًا.

يزيل موقع SurveyMonkey مخاوف مستخدميه المحتملة بإيضاح أن استخدام حسابٍ مسبقٍ من Google أو Facebook يبقي المعلومات المدخلة سريّة تمامًا.

11. لا تجبر مستخدميك على الموافقة (بالنقر على checkbox) على اتفاقية الاستخدام

نحب جميعًا اتفاقيات الاستخدام، صحيح؟ بالنسبة لي، لا أجد أمرًا أكثر إمتاعًا لفعله في ليلِ سبتٍ ما سوى إمضاء الوقت بقراءة ستٍّ وأربعين صفحة بمقاس A4 (نعم، 46 صفحة، أكثر من 20 ألف كلمة) من اتفاقية Apple للاستخدام. من الواضح أن هذا أفضل من عد الخراف للتغلب على الأرق.

مع الأسف، إن اتفاقية الاستخدام شرِّ لا بد منه، لكن، بدلاً من إجبار المستخدمين على تعليّم مربّع صغير يقول بأنهم قد قرؤوا اتفاقية الاستخدام خاصتك ووافقوا عليها (يا لها من كذبة اعتدنا على قولها، فمن ذا الذي يقرأ اتفاقية الاستخدام فعلاً؟)، من الأفضل أن تجعل هذه الاتفاقية جزءًا من عملية التسجيل. شبكة Pinterest مثلاً توضح أنك بإنشاء حساب جديد تكون قد وافقت بالفعل على اتفاقية الاستخدام، سياسة الخصوصية، واستعمال الكوكيز.

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

12. لا تطلب المعلومات البنكية مباشرة

من المعتاد هذه الأيام أن تحصل على تجربة مجّانية لثلاثين يومًا في أغلب المنتجات على الويب، على الأقل للمنتجات التي لن تكون مجّانية دائمًا. إذا كان منتجك أو خدمتك تقدم هذه التجربة، فإن من المغري بالنسبة إليك أن تطلب المعلومات البنكية مباشرة. من الممكن أن يسهّل هذا تحويل الحساب من حساب تجريبيّ إلى حساب مدفوع، بغضّ النظر عن أن هذا سيساعدك أيضًا بسحب بعض الأموال من هؤلاء المُستخدمين الذين نسوا إلغاء حسابهم في الوقت المناسب. رغم أن هذا التكتيك متّبع من قبل بعض الشركات الكبيرة كـApple Music، إلا أنني أرى الحصول على المعلومات البنكية خلال فترة التجربة أو بعدها أفضل. يسهّل هذا عملية تسجيل الحساب أكثر ويقيك من غضب أي عميل أثناء إخباره أصدقاءه وعائلته عن خداعك إياه بإجباره على الدفع لمنتجك "المجّاني" أو خدمتك.

تعرف شركة VWO (أداة لاختبارات A/B Testing) أهمية عدم السؤال عن أي معلومات بنكية مباشرة وتعلن بوضوح أن البطاقة البنكية لن تكون مطلوبة للتجربة المجّانية.

تبيّن شركة VWO أن البيانات البنكية لن تُطلب للحصول على تجربة مجّانية.

ترجمة -وبتصرف- للمقال: 12Ways to improve sign up conversion لصاحبه Neil Turner.

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

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

يوجد هدفان رئيسيان خلف قابلية استخدام في مواقع الويب:

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

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

وضح الغرض الجوهري من موقعك

لا يقتصر هذا الأمر على صفحة البداية homepage فقط، بل على أي صفحة هبوط في الموقع، وذلك لكي يملك المستخدم فكرة واضحة لا تشوبها شائبة عن مقصد الموقع، بمعنى على صفحات الموقع أن تجيب عن أسئلة المستخدم لا أن تطرح أسئلة جديدة، من الحلول الشائعة الاستخدام هو استخدام العبارات tagline ("في مهمّة لتطوير الويب العربي" مثلًا) والشعارات logo، ولكن وعند الرغبة في صنع انطباع مثالي ولا يُنسى فمن الممكن استخدام الإنفوجرافيك أو حتى خلفيات الفيديو background video والتي ستدعم فكرة الموقع بشكل أفضل.

أرشد المستخدم في أرجاء الموقع رويدا رويدا

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

قلل من الأخطاء وحاول تقديم الحلول

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

أبق المستخدم على إطلاع بحالة الموقع

تُعتبر هذه النصيحة من أهم النصائح في قابليّة الاستخدام، والتي اقترحها Jacob Nielsen عام 1995، وهي ذات تأثير وفعالية ليومنا هذا، وبالتالي يجب التصريح والإشارة إلى حالة الموقع دون تأخير.

اعمل على بناء ثقة ومصداقية

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

خاتمة

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

ترجمة وبتصرّف للمقال 5Basic Usability Principles Every Website Should Follow لصاحبه Armen Ghazarian.

حقوق الصورة البارزة: Designed by Freepik.

تصميم تجربة المستخدم ليس هو نفس الشيء عندما تقارنه بتصميم واجهات الاستخدام. تجربة المستخدمين تحصل وراء الشاشات وبين الفجوات.

كمصممي ويب وواجهات استخدام محمولة فإنّ عملنا يتركّز في بناء واجهاتٍ أنيقة. واجهاتٍ تكون عناصر أساسية في تجربة المستخدم. واجهات تسمح للمستخدمين بأن يحصلوا على أجوبة لأسئلتهم أو إكمال مهام أساسية بالنسبة لهم. عملنا هو أن نساعدهم في تحقيق أهدافهم.

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

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

تفادي إزعاج دعم الهواتف

تطبيق Barclays للهواتف الذكية مثال جيّد على تصميم جيّد لتجربة المستخدم. يمتلك التطبيق بذات نفسه واجهة جميلة. ولكنّ هذا ليس هو السبب وراء تجربة المستخدم الجيّدة الخاصّة به.

يمتلك Barclays تطبيقًا ممتازًا للهاتف المحمول، ولكن السحر الحقيقي يحصل عندما تحاول الاتصال بهم.

إذا أردت الاتصال بـBaraclays فإنّه يمكنك القيام بذلك عبر التطبيق. يسمح لك هذا بتخطّي الحاجة إلى الاستيثاق عبر الهاتف لأنّك قمتَ بهذا بالفعل عندما قمتَ بتسجيل الدخول إلى التطبيق.

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

جعل عمليات الإرجاع أقل صعوبة

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

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

عند إرجاع منتج ما فهناك دومًا خوف من ألّا يعيدوا إليك نقودك. هذه فرصة سانحة لتحسين تجربة المستخدم.

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

الآن، هذه تجربة مستخدم مميّزة.

مساعدة الزبائن على أن يشعروا بالأمان

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

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

من الممكن لتجربة مستخدم جيّدة أن تقوم بزيادة أرباحك وأن تميّزك عن منافسيك.

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

كان هذا مكلفًا واستغرق الكثير من الجهد، ولكنّه في المقابل زيادةً ملحوظةً في المبيعات. كان شيئًا لم يتمكّن منافسوهم (مثل Tescos) من تقديمه.

الحفاظ على وقت المستخدم

بالحديث عن عمليات التوصيل. هل قمت من قبل بالحصول على أيّ طرد عبر شركة DPD؟

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

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

تسمح لك DPD بمعرفة موعد وصول الطرد الخاصّ بك بالضبط.

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

بسبب تجربة المستخدم هذا، فإنني أتحمّس بشدّة عندما أكتشف أنني سأستلم طردًا عبر DPD!

توفير الإلهام

وأخيرًا أريد أن أذكر Etsy. يدرك المدراء في Etsy أنّه هناك الكثير من الأمور التي يمكن الاستفادة منها من قنوات التواصل الإجتماعي غير كونها مجرّد قناة تسويق.

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

تقوم Etsy بدمج تجربة فيسبوك مع موقعهم عبر عرض اقتراحات الهدايا على المستخدمين

عبر تحليل اهتمامات أصدقاء المستخدمين، يقوم التطبيق بتقديم الاقتراحات للمستخدمين عن ماهيّة الهدايا التي يجب عليهم شراؤها. استخدموا التكنولوجيا لتوفير مصدرٍ للإلهام لتجربة الشراء.

أليس هذا هو نفسه خدمة العملاء؟

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

تجربة المستخدمين ليست محدودة بقناةٍ واحدة، جهاز أو قطعة من مشروعك.

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

مهما كان الاسم الذي تدعوها به، هناك درسٌ مهمّ لتعلّمه، وهو أنّ تجربة المستخدمين ليست محدودة بقناةٍ واحدة، جهاز أو قطعة من مشروعك.

ترجمة -وبتصرّف- للمقال User experience design is not what you think لصاحبه Paul Boag.

حقوق الصورة البارزة: Designed by Freepik.

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

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

يعود هذا الأمر إلى أنّ هذا الموضوع مغطّى بشكل كامل، يوجد بعض الكتب الرائعة حول الموضوع، وعليه لا يشعر المدونون أنّ هناك المزيد لإضافته.

المشكلة هي أنه عندما تتم تغطية الموضوع بشكل جيد، فإنه ينتقل إلى عالم المعرفة العامّة. إن مشكلة المعرفة العامّة أنّه يعلوها الغبار مع مرور الوقت، تظهر معلومات خاطئة وتكبر بعض الخرافات.هذا الأمر يتكرّر دائمًا، مثلما هو عليه الحال مع فكرة أن المُحتوى يجب أن يكون فوق خط الطّي الوهمي above the fold بحجة أن المُستخدمين لا ينزلون أسفل الصّفحة users don’t scroll.

للأسف أصبحت هندسة المعلومات مشبعة بمثل هذه الخرافات، ولهذا أود أن آخذ القليل من الوقت لتبديد بعضٍ منها.

أريد أن أبدأ مع الاعتقاد السّائد بأنه يُفترض ببنية المواقع أن تكون منطقيّة.

يجب أن تكون بنية موقعك منطقيّة

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

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

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

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

يجب على المستخدم أن يكون قادرا إلى الوصول إلى المحتوى بثلاث نقرات

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

بدأت هذه الخرافة من الأيام الأولى للويب عندما كان المستخدمون يستخدمون صلات dial-up. جعلت السرعات البطيئة المستخدمين يشعرون بالإحباط أثناء التصفّح بين العديد من الصفحات، وفسّر هذا الأمر بشكل مغلوط على أنّه مرتبط بعدد النقرات.

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

يجب أن يكون لديك فقط 7 خيارات (زائد أو ناقص 2)

إحدى خرافات الأرقام السحرية الأخرى هي فكرة أنه لا يجب أن يكون لديك أكثر من 7 خيارات (زائد أو ناقص 2) أثناء التصفّح.

يعود أصل هذا الاعتقاد إلى بحث في علم نفس أعدّه جورج ميلر. يُعلّل جورج ميلر ذلك بأن الأشخاص لا يستطيعون استيعاب أكثر من 7 خيارات (زائد أو ناقص 2) في ذاكرتهم قصيرة الأمد. إلا أنّ هذا الفرضية خاطئة لسببين:

• أولًا، هناك بحثُ آخر يقول أننا نجد صعوبات لكي نبقي أكثر من 4 أشياء في ذاكرتنا قصيرة الأمد، ولهذا فإن بطاقات الدّفع الإلكتروني تقوم بجمع الأرقام في مجموعات من أربعة أرقام.

• ثانيًا، إن صفحة الويب لا تطلب من المستخدم أن يقوم بحفظ الخيارات في الذاكرة قصيرة الأمد وذلك لأن المعلومات تظهر أمامه بشكل بصريّ.

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

من المستحيل تجنب تحديد الأولويات

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

حاول أن تقوم بذلك، لكنه لا يُمكنك تجنب تحديد الأوليات وبالتالي فمن باب أولى أن تُعطي الأولية لما هو أكثر أهمّيّة.

لا يهم إن لم يفهم المستخدم مصطلحا ما، ما لم يكن موجها إليه

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

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

ثم ما لبثوا أن وقعوا في فخ المُغالطة التي يقع فيها الكثيرون: "سيتجاهل الزوّار المُصطلح إذا لم يفهموه وسيعتقدون بأنّه غير مُوجّه لهم".

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

والمزيد من الخرافات

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

ترجمة -وبتصرّف- للمقال What you know about information architecture, might not be true لصاحبه Paul Boag.

حقوق الصورة البارزة: Infographic vector designed by Freepik.

هل قمت مسبقًا بتعبئة نموذج ما على الويب وطُلب منك إدخال نفس البيانات مرّتين؟

هذا ما يسمى بالإدخال المزدوج (double entry) يدعى أيضًا "إعادة الإدخال" (re-entry) أو "التأكيد" (confirm) ، ومن المؤكَّد أنّك قد صادفت هذا الشيء في العديد من المواقع المشهورة مثل Google (يتم طلب إدخال كلمة المرور مرّتين) و Facebook (يتطلب إدخال البريد الإلكتروني مرّتين. أُنظر الشكل 1).

الشّكل 1: نموذج التسجيل لموقع Facebook يتطلب إدخال البريد الإلكتروني مرَّتين.

لماذا يطلب منك إدخال نفس المعلومات مرتين

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

يهدف الإدخال المزدوج إلى منع الأخطاء

الهدف الرئيسي من الإدخال المزدوج (double entry) هو منع الأخطاء. فعندما يُطلَب من المستخدم إعادة كتابة بريده الإلكتروني أو كلمة المرور فإنّ ذلك يعطينا القُدرة للتّأكد بأنّ معلومات الحقلين متطابقة. أمّا إذا لم تتطابق الحقول، فهذا يعني احتمالية وجود خطإ مطبعي/إملائي (بسبب الإستعجال في الكتابة مثلًا أو عدم الإنتباه). الشّكل 2 يحتوي على لقطة من نموذج التسجيل الخاص بشركة Google وكيف يظهر الخطأ بسبب عدم تطابق الحقلين.

الشّكل 2: نموذج تسجيل Google وكيف يظهر الخطأ في حالة عدم تطابق الحقلين.

(كلمة احتمالية مهمة هنا لأن الخطأ قد يكون في حقل إعادة الإدخال وليس في الحقل الأصلي. وفي هذه الحالة، سيُطلب من المستخدم إعادة إدخال الحقلين معًا).

الإدخال المزدوج يمنع الأخطاء ولكنه يسبب المشاكل أيضا

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

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

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

قد يَستخدم بعض الأشخاص أدوات مبرمجة تقوم بتعبئة النماذج بشكل آلي. وقد تكون هذه الأدوات مبنية في المتصفّح أو على شكل إضافة يتم تحميلها وإضافتها للمتصفّح. لهؤلاء المستخدمين، ستكون النماذج المزدوجة معدومة الفائدة (بالنّسبة لحقل البريد الإلكتروني على الأقل).

قد يجد بعض المستخدمين في الإدخال المزدوج نوعًا من التعالي عليهم أو الإستهانة بهم. فقد يُفهَمُ من وجود الإدخال المزدوج بأنَّ صاحب النّموذج لا يثق بقدرات المستخدم على إكمال النموذج بشكل صحيح. وبالتالي، فقد يُهَدِّدُ الإدخال المزدوج الثقة المبنية بين المستخدم وصاحب النّموذج والتي تعتبر مُهِمَّة في زيادة نسبة التّحويل (conversion) ومعدلات إكمال النّماذج.

لماذا يستخدم الإدخال المزدوج في أغلب الأحيان لعناوين البريد الإلكتروني وكلمات المرور فقط؟

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

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

سيقول أولئك الذين يفكرون بطريقة منطقية بأنَّ الإدخال المزدوج سيكون مناسبًا لأرقام الهواتف. وممّا لا شكَّ، أنّه إذا كان رقم الهاتف هو الوسيلة الوحيدة (أو الأساسية)  للتواصل مع المستخدم، فسيكون استخدام الإدخال المزدوج أمرًا مناسبًا. وإن كان رقم التّواصل عبارة عن رقم هاتف محمول فيمكننا التّحقق من هويّة المستخدم عن طريق إرسال رسالة نصّيَّة قصيرة تطلب منه القيام بأمرٍ ما لإتمام العملية.

طرق أخرى للتأكد بأن البريد الإلكتروني صحيح

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

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

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

لقد وُجِدَ في دراسة أجراها موقع Smashing Magazine في عام 2008 على أفضل 100 موقع إلكتروني بأن 18% فقط من تلك المواقع تتطلب من المستخدمين الإدخال المزدوج لعناوين بريدهم الإلكتروني مقارنة مع 72% من المواقع تتطلب الإدخال المزدوج لكلمات المرور.

لم يعتبر الإدخال المزدوج لكلمات المرور شائعا أكثر من البريد الإلكتروني؟

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

أحد أهمِّ الأسباب -وعلى عكس البريد الإلكتروني- فإنّه عند إدخال كلمات المرور في الحقول المخصَّصة لها (وعلى افتراض أنّه تمَّ تكويد هذه الحقول بشكلٍ صحيح) ، فإنّها تكون مخفيَّة أو "محجوبة" بشكلٍ افتراضي (على شكل نقاط سوداء دائريّة، كما في الشَّكل 3). وتهدف عمليَّة الحجب هذه إلى منع الأشخاص من استراق النظر ورؤية كلمة المرور التي يدخلها المستخدم.

الشكل 3: حجب كلمة المرور. تمَّ كتابة كلمة "testing" في الحقل ولكنها ظهرت على شكل نقاط سوداء.

ولأنّ المستخدم لن يتمكنّ من رؤية الرّموز التي يدخلها، فستكون نسبة حدوث الأخطاء أكبر، وبالتالي وجود حاجة أكبر إلى الإدخال المزدوج.

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

بدائل الإدخال المزدوج لكلمات المرور

يُعتبر الإدخال الوحيد/الفرديّ أحد بدائل الإدخال المزدوج. وقد تعمل هذه الطريقة بشكل مناسب إذا ما افترضنا أنّه تم تزويد المستخدم بطريقة سهلة لِتَذكُّر كلمة المرور أو إعادة ضبطها إذا ما نسيها (يُفضَّل إضافة هذه الخاصيّة في جميع الأحوال، فقد ينسى أيّ شخصٍ كلمة المرور خاصته). ومن المثير للإهتمام بأنّ نماذج التسجيل الموجودة في Facebook ،LinkedIn وTwitter تتطلب إدخال كلمة المرور مرّة واحدة فقط.

الشكل 4: لا يوجد إدخال مزدوج في نماذج التسجيل الخاصّة بشركة LinkedIn.

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

هناك العديد من الطّرق لفعل هذا ولكنّ الطّريقة التي يوصى بها موضّحة بالشّكل 5. حيث يفضّل إضافة زر "Show password" على إضافة مربّع اختيار (checkbox) أو زوج من أزرار الرّاديو (radio buttons) لأنّه يُسهّل عمليَّة إظهار أو حجب كلمة المرور.

الشكل 5: إظهار أو حجب كلمة المرور عند النَّقر على "Show password"

قد يواجه المستخدم صعوبة في تفسير مربّع الاختيار، وقد يكون من الصَّعب مَوضَعَة أزرار الرّاديو وترتيبها بشكلٍ فعّال. فقد تأخذ أزرار الرّاديو حَيِّزًا أكبر من السؤال ذاته إذا ما وضعت فوق بعضها البعض، وإذا وُضعت بجانب بعضها قد تسبب لك المشاكل في استعمال ما يسمى بالمجاورة (proximity) لتوضيح أيّ إجابة ترتبط بأيّ زرّ. إنّه لمن الصّعب أيضًا أن تربط حقل كلمة المرور بمربّع اختيار أو زوجٍ من أزرار الرّاديو مقارنة مع ربطه برزٍّ واحد.

فكر مليا قبل استخدام الإدخال المزدوج

يُعتبر منع الأخطاء في أيّ نموذج من الأمور المحبَّبة، ولكن من المهمّ جدًا أن توجد حاجة ملحّة لاستخدام الإدخال المزدوج وذلك يعود إلى النقاط التالية:

• أنّها تزيد العبء والجهد على كل المستخدمين.
• يمكن تجاوزها عن طريق النّسخ واللصق أو باستخدام أدوات تعبئة النماذج بشكل آلي.
• تضمن فقط أنّ الحقلين متطابقين ولا تضمن احتواء هذه الحقول على معلومات صحيحة.
• يمكن أن تُرى كنوعٍ من الاستخفاف والإستهانة بالآخرين.

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

حتّى في الحالات المذكورة في الأعلى، فإنّ البحث عن بدائل للإدخال المزدوج (مثل المصادقة أو بعض الطرق البسيطة لإعادة الضبط والاسترداد) يستحقُّ النَّظر فيه بِجدِّيَّة.

ترجمة -وبتصرّف- للمقال Double entry of form fields.

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

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

مختلف أنواع المحاذاة (alignment)

بالنسبة للمحاذاة، هناك العديد من الأبعاد المختلفة التي تؤخذ بعين الإعتبار، منها:

• كيفية محاذاة الأسئلة بالنسبة لبعضها البعض.
• كيفية محاذاة نص السؤال (أعلى أم يسار حقل الإجابة؟).
• في الأسئلة المغلقة مع فئات استجابة متعددة، كيف يتم محاذاة هذه الفئات.
• كم عدد الحواف (edges) الموجودة في النموذج لمختلف أنواع المحاذاة.

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

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

1. كيف تقوم بمحاذاة الأسئلة بالنسبة لبعضها البعض

على افتراض أن البشر يقرؤون من الأعلى إلى الأسفل، فإنه يفضل وضع الأسئلة فوق بعضها (بشكل عمودي) بدلا من وضعها بجانب بعضها البعض (بشكل أفقي). يخلق هذا إيقاعا عموديا متناسقا ويساهم في إيجاد "مسار واضح للإستكمال" كما أسماه Luke Wroblewski.

الشكل 1: محاذاة الأسئلة عموديا كما يوضحه السهم الأزرق.

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

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

يبين الشكل 2 نموذجا يحتوي على أسئلة مرتبة/متراصة بشكل أفقي حيثما كان ذلك ممكنا. من المحتمل في مثل هذه الحالة أن يتم إهمال الحقول الموجودة في الجزء الأيمن من الصفحة خصوصا إذا لم يقم المستخدم بملئ الحقل السابق إلى نهايته (لأقصى يمين الحقل).

الشكل 2: محاذاة الأسئلة أفقيا.

يمكن استغلال المساحة في النموذج بشكل أفضل وذلك بفصله إلى عمودين (كما في الشكل 3). فإذا ما فصلت الصفحة إلى عمودين، فسوف تتم محاذاة الأسئلة في كلا العمودين، وهذا يعني أن الأسئلة ستبدأ من الأعلى إلى الأسفل للعمود الأول، ومن الأعلى إلى الأسفل للعمود الثاني وبعدها إلى الصفحة التالية. ولعدد من الأسباب سنذكرها في مقال آخر، فإنه من غير المحبذ استخدام أعمدة متعددة في نموذج إلكتروني (electronic form) خصوصا في النماذج الموجودة على شبكة الإنترنت.

الشكل 3: صفحة تحتوي على نموذج مزدوج الأعمدة.

2. كيفية محاذاة نص السؤال

افتراضيا، إن أفضل موقع لنص السؤال يكون في أعلى حقل السؤال، كما هو موضح في الشكل 4.

الشكل 4: نص السؤال يظهر أعلى حقل السؤال.

يوصي مصمم النماذج الاسترالي الشهير Robert Barnett بهذه الطريقة، وقد أثبتت فعالتيها -من حيث عدد مرات إنهاء النموذج- مقارنة بوضع النص إلى يسار حقل الإجابة (أنظر "موضعة التسمية (label) في النماذج" لكاتبه Matteo Penzo).

هناك فائدتان أخريان من وضع نص السؤال فوق الحقل:

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

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

محاذاة النص

هناك أربع خيارات لمحاذاة النص وهي دفع لليسار (flush left)، دفع لليمين (flush right)، ضبط من الطرفين (justify) وتوسيط (أنظر الشكل 5). قد تجد أيضا من يستخدم كلمتي "ranged" و "ragged" بدلا من كلمة "flush".

الشكل 5: أربع طرق رئيسية لمحاذاة النص.

إذا وضع نص السؤال فوق حقل الإجابة، فإنه يجب دفعه إلى اليسار للأسباب التالية:

• تعتبر المحاذاة لليسار من أفضل الممارسات (best practice) ومناسبة لأغلب المواد المقروءة.
• تعتبر-بشكل عام- أسهل للقراءة مقارنة بالنصوص المدفوعة لليمين (flush right) أو المتوسطة.
• قابل للقراءة كالنص المضبوط من الطرفين (justified text) ولكنه وعلى عكس النص المضبوط من الطرفين (justified text) فإنه لا يتطلب تدخلا يدويا لإصلاح مشاكل تباعد الكلمات.
• يعزز المسار العمودي للإنهاء.

عند وضع نص السؤال إلى يسار حقل الإجابة، يفضل -على عكس ما قد يتوقعه البعض- أن يكون ذلك النص مدفوعا لليمين. وقد أشار Matteo Penzo في البحث الذي ذكرناه مسبقا بأن الدفع لليمين يعمل بشكل أفضل من الدفع لليسار. (لسوء الحظ، قد لا يكون هذا صحيحا بالنسبة لمن يعانون عسر القراءة. ولهذا السبب فإن الطريقة الأفضل والتي ينصح بها هي وضع التسمية (label) فوق الحقل).

الشكل 6: محاذاة نص السؤال إلى يسار حقل الإجابة ودفعه لليمين.

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

شيء مهم أيضا، وهو أن جعل النص مدفوعا لليسار، يجعل عملية ربطه مع حقل الإجابة الخاص به أمرا صعبا خصوصا لمن يستخدم مكبرات الشاشة (screen magnifiers) أو لمن يعاني من صعوبات في الإدراك. يعود ذلك إلى أن اختلاف أطوال نص السؤال قد يعني في بعض الحالات وجود فجوة/مساحة كبيرة بين نهاية نص السؤال وبداية حقل الإجابة.

قد يكون ذلك أحد الأسباب التي دفعت المنظمة العالمية للمعايير (ISO) والمعايير الوطنيّة الأمريكية HFES200 (هندسة العومل البشريّة لواجهات استخدام البرامج) أن توصي بأن يكون نص السؤال مدفوعا لليمين إلا إذا تساوت أطوال جميع الأسطر.

3. كيفية محاذاة فئات الإستجابة

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

لنفس الأسباب التي ذكرناها بالنسبة للأسئلة، فإنه يجب محاذاة فئات الإستجابة عموديا (أي وضع الفئة "ب" أسفل الفئة "أ").

الشكل 7: محاذاة فئات الإستجابة عموديا.

كما ذكرنا سابقا، فإنه من المغري وضع الأسئلة بجانب بعضها (بشكل أفقي). ينطبق نفس الأمر على فئات الإستجابة، خصوصا إذا كانت التسميات (labels) قصيرة. غالبا ما تكون الأسئلة المتعلقة بالمسميات title (مثل "Mr" أو "Mrs") أحد العناصر الرئيسية للجوء البعض إلى استخدام المحاذاة الأفقية، لأن ذلك قد يؤدي إلى حفظ الكثير من المساحة العمودية.

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

الشكل 8: إذا استخدمنا المحاذاة العمودية (يمين الصورة) بدلا من المحاذاة الأفقية (يسار الصورة)، فسيكون من السهل على من سيقوم بتعبئة النموذج أن يربط مسميات فئات الإستخدام بما يقابلها من حقول.

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

محاذاة النّص لفئات الإستجابة

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

الشكل 9: وجود مسميات فئات الإستجابة إلى يسار الحقول ومدفوعة لليمين.

قبل 25 سنة، أثبتت Patricia Wright بأن هذه الطريقة هي الأفضل، وقد كانت الأبحاث التي قام بها Robert Barnett على مدى عقود مضت متوافقة مع ما جاءت به Patricia Wright. عندما يتعلق الأمر بالتصميم في العالم الواقعي، فلن يكون الجواب بتلك البساطة. فبالنسبة لمسألة المحاذاة لمسميات وحقول فئات الإستجابة، فسيظهر بعض التعقيد بسبب وجود الإنترنت (the web).

تاريخيا، كانت النماذج على شبكة الإنترنت تضع المسميات على يمين الحقل (كما هو الحال في الشكل 7 الموجود في الأعلى)، ويعود ذلك إلى بعض الأسباب البرمجية. على شبكة الإنترنت، يكون من الصعب محاذاة حقول الإستجابة عبر اسئلة متعددة بشكل عمودي. وعلى الرغم من صعوبة تحديد هذه الأمور، فإنه من المعقول قول بأن هذه الطريقة في وضع المسميات أصبح متعارفا عليها بشكل افتراضي (تحديدا كما أصبح نهج شركة مايكروسوفت (Microsoft) في تصميم برامج سطح المكتب أمرا متعارفا عليه افتراضيا).

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

4. عدد الحواف (edges) في النموذج

من آخر جوانب المحاذاة التي سنتحدث عنها في هذا المقال هو عدد الحواف لمختلف طرق المحاذاة الموجودة في النموذج. إن بداية أو نهاية أي كتلة نصية (block of text) أو مساحة بيضاء/فارغة (white space) يخلق ما يسمى "الحافة". قد تكون هذه الحافة هي نهاية حقل الإجابة أو حدود أحد الأعمدة أو المسافات البادئة (indentations) لجميع نصوص الأسئلة.

بمقارنة الشكلين 10 و11 في الأسفل، يظهر الشكل 10 نموذجا يحتوي على الكثير من الحواف، أما الشكل11 فيظهر نموذجا بعدد قليل من الحواف، فأيهما تفضل؟

الشكل 10: نموذج بعدد كبير من الحواف.

الشكل11: نموذج بعدد قليل من الحواف.

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

ملخص التوصيات

كخلاصة لكل ما ذكرناه في هذا المقال، فإن الطرق الواجب اتباعها والتي ننصح بها هي:

1. محاذاة الأسئلة عموديا.
2. وضع نص السؤال فوق حقل الإجابة ودفعه لليسار.
3. محاذاة فئات الإستجابة عموديا.
4. للنماذج الورقية: وضع مسميات فئات الإستجابة إلى يسار الحقول الخاصة بها ودفعها لليمين.
5. لنماذج الإنترنت: وضع مسميات فئات الإستجابة إلى يمين الحقول الخاصة بها ودفعها لليسار.
6. تقليل عدد الحواف العمودية في النموذج على قدر المستطاع.

ترجمة -وبتصرّف- للمقال Alignment.

إذا كنت قد عشت على وجه الأرض لمدة، فمن المؤكد أنك تذكر هذه الصور المتحركة المبتذلة التي تقول "الموقع قيد الإنشاء" والتي استُخدِمَت في أواخر التسعينات. لقد أحببناها، أليس كذلك؟

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

دور الحركات في الوِب الحديث

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

فعلى سبيل المثال، أُثبِتَ أن هذه الحركات تُساعدنا على فهم ما يحصل على الشاشة، وما العنصر الأكثر أهميّة الذي علينا أن ننتبه إليه. لماذا؟ لأن هذه هي الطريقة التي يعمل بها دماغُنا. آلاف السنوات من التطور جعلتنا ما نحن عليه، وجعلتنا نعير انتباهنا للحركة. عدا ذلك، لم نكن لننجو من هجمات المفترسين في اماضي عندما كنّا نعيش في الكهوف. ولهذا، فمن المثير للاهتمام – حتى في عصر التصاميم المسطّحة والبسيطة – أنّ الحركة ما زالت تحتفظ بمكانها، وما زال بالإمكان (والمفروض أن يتم) بكل تأكيد استخدامها لإثراء تجربة المستخدم وجعل تصاميمنا مفهومة أكثر.

إن الشيء الوحيد الذي تغير هو الشكل الذي يمكننا أن نستخدمه به بفعالية. لا تبدو الحركات الجيدة في 2015 – من وجهة نظر تقنيّة – مشابهة للحركات التي كانت شائعة في أواخر التسعينات وبداية العقد الأول لهذا القرن على الإطلاق.

هناك العديد من الأسباب لذلك، لكن اثنين منها، وهي:

1- التقنيات الحديثة

باستخدام مكتبات CSS وجافاسكربت الحديثة، صار بإمكاننا الآن إنشاء حركات مُذهلة عبر واجهات برمجة تطبيقات (APIs) والأطر البرمجية (frameworks) المُعدّة مسبقًا. وليس علينا أن نفهم الأشياء في أدنى مراحلها البرمجية؛ لكن ما علينا فهمه بدلًا من ذلك هو كيفية العمل داخل الواجهة التي توفرها لنا واجهة برمجة التطبيقات.

فعلى سبيل المثال، من الأشياء التي من الممكن أنك تعرفها من مجموعة أدوبي بيئةُ إدج أنيميت Edge Animate. إن هدفها هو السماح لمصممي المواقع أن ينشئوا رسوم HTML متحركة تفاعلية عبر واجهة يسهل فهمها. في نهاية المطاف، إنها الأداة التي تزيح عنك الأحمال لتدعك تركز على الجزء الإبداعي دون القلق بشأن ما يحدث خلف الكواليس.

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

2- نُضج تصاميم المواقع

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

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

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

إن عصر حركات الوِب ما زال في طفولته، لكن مع إدخال لمعايير HTML5 الحديثة التي تلعب دورًا هامًّا بالفعل في تصميم الوِب، إن مصممي الواجهات يقودون الطريق بإنشاء أيقونات SVG متحركة وتنقّلات عبر CSS وJavascript.

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

1- استخدم الحركات لعرض تسلسل هرميّ.

تُظهِر معظم تصاميم المواقع الثابتة المخطط الهرمي لها باستخدام ألوان محدّدة وعناصر كبيرة وسميكة والكثير من المساحات الفارغة حول أهم الأجزاء. هذه استراتيجية سليمة، لكن يمكننا عمل أكثر من هذا بكثير باستخدام حركات إضافيّة.

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

[حركة تطبيق موسيقى لسِرجى فاليوك و توبيك ستوديو في Behance]

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

2- اجعل التصميم المسطّح أسهل للفهم

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

فمثلًا، ألقِ نظرة على الأيقونات التالية:

[115 أيقونة متحركة لهَنَك إرتَن و سِنان كَرتشَم من Behance]

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

3- كُن مُرهفًا، لا مُبَهرجًا

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

إنّ قيمة هذا التوجُّه هي تقليل احتماليّة أن يتشتت الزائر وأن يُركِّز على الحركة ذاتها، بدلًا من أن يركز على عامل الجذب الذي تضجّ به هذه الحركة.

4- استمر في التجربة على الأجهزة النقّالة دون توقُّف

إن الهاتف النقّال هو البيئة الرئيسيّة التي يجب تحسين تصميمك لها هذه الأيام. لا يمكن التأكيد على هذا بما يكفي، لذا دعني أعيد ذلك من ناحية أخرى مختلفة كليًّا – الأجهزة النقّالة الآن أكثر أهميّة من الحواسيب المكتبيّة. أولًا، 60% من كل سير البيانات على الوِب هذه الأيام يأتي من الأجهزة النقّالة. ثانياً، حتى جوجل ضاقت ذرعًا بالمواقع غير المناسبة للأجهزة النقّالة، ولذه نشروا هذا البيان:

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

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

5- استخدم الحركات كالعنصر الذي يجعلك فريدًا

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

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

عين النَّسر (تحليلات لتويتر وإنستجرام) لفرحان رَزَق

Dianping Film promotion Html5 / FURY بواسطة wang 2mu, He Fan & 3 Water على Behance

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

6- استخدم الحركة لأجزاء محدّدة من المحتوى

عمل تصاميم مواقع مخصّصة باستخدام الحركات أمرٌ، ولكن بإمكانك أيضًا أن تسير باتجاه أقل بُعدًا، وأن تستخدِم الحركات عند العمل على عناصر منفردة. فمثلًا، يُعرَف نِل باتِل من كويك سبراوت بنشره وزيادته لشعبية مفهوم الإنفوجراف المتحرّك. إن الفكرة ذاتها واضحة من حيث المبدأ، حيث يُنشئ ما يمكن أن يكون إنفوجراف معياريّ، لكن بعد ذلك يضيف عناصر متحركة إليه. فيما يلي مثال لإنفوجراف متحرك آخر.

عمل ذلك سيعطيك ميزة إضافيّة عن المنافسين والمواقع الأخرى في ذات الموضوع، والتي تُكافِح كلها لجذب انتباه الزائر.

الإنفوجراف هذه الأيام مجرد مفهوم واحد. يمكنك أن تستخدم نفس هذه الفكرة في النشرات والمقالات والدراسات القياسيّة وأيّ محتوى آخر.

7- جرِّب الحركات المعتمدة على التمرير

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

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

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

8- استخدم الحركة للإشعارات

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

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

9- ركّز على جودة الحركة

كلما كانت الحركة في الوِب هذه الأيّام أقلّ كلما كانت أفضل (وكذلك في المستقبل)، لكن لا يمكنك أن تُخاطِر بالجودة من خلال سعيك نحو الأقلّ.

حتى جوجل تُظهِر هذا في قواعد التصميم الماديّ الخاصّة بهم فيما يتعلق بالعمل مع الحركة. إنهم يشجعون في وثائقهم الرسميّة المصممين على جعل حركة كلّ عنصر حقيقيّة؛ مما يعني إضفاء وزن وزخم وتسارع وخصائص أخرى تحظى بها عناصر العالم الحقيقيّ.

لا تتردّد في الذهاب لرؤية القواعد إضافة إلى المرئيات الاستعراضية التي عملتها Google.

الخُلاصة

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

ما رأيك بهذا؟ هل وقعت يدك على أيّة طرق لاستخدام الحركة في تصميم المواقع تجدر الإشارة إليها؟ 

ترجمة -مع شيء من التصرف- للمقال: Motion in Web Design the Smart Way.

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

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

إداراك الحاجات والرغبات الحقيقية للناس هو الشّرط الأساسي للتصميم وكما يقول خبراء هذا المجال أن التصميم المتمحور على المستخدم ­User-Centered Design هو جوهر هذا العلم وأساسه. لذلك يجب ألا ننحاز لأنفسنا أو لعملنا أو مهما كانت انحيازاتنا في بناء منتجاتنا ونجعل تركيزنا هو المستخدم النّهائي. هذا وكيف إن كانت المشكلة الرئيسية عند المصممين والمطورين أثناء عملهم هو أنهم يبنون الأشياء لأنفسهم، حيث أنهم متعلقون في الأمور التقنية أكثر من غيرهم من الناس كما قال ذلك الكاتب الأمريكي Michael E. Gerber في كتابه أسطورة الريادي  The E-Myth.

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

ما هو البحث

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

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

البحث الكمّي والنّوعي

البحث الكمّي Quantitative Research بحث منهجي للظواهر الاجتماعية من خلال الأساليب الإحصائية، الرياضية أو الحسابية، ويتم الاعتماد على البيانات بشكل رئيسي حتى يتم قياسها رقميا وبالتالي عند بداية فكرة جديدة لا نلجأ إليه لعدم وجود بيانات متعلقة بالمستخدمين وإنما يتم الاستعانة به بعد إصدار النسخة الأولية أو الحد الأدنى من المنتج القاعدي (Minimum Viable Product).

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

ماذا أريد من البحث

البحث هو أداة بمثابة ميكروسكوب تستطيع من خلالها النظر إلى الصورة كاملة مما تسهل عملية تخطيطنا وإدارتنا. وعند بناء المنتجات يتعين علينا القيام بأربعة بحوث.

بحث المنظمة وأصحاب المَصلحة

في هذا البحث تكون الفئة المستهدفة في البحث هم أصحاب المصلحة وفريق العمل المُشترِك معك في بناء المنتج، ويكون هدفه الإجابة عن الأسئلة التالية:

• مالذي يريد تحقيقه صاحب المنتج وأصحاب العمل، من هم، وما هي أهدافهم؟
• ماهي التنكولوجيا المستخدمة في بناء المنتج، وما إمكانياتنا وقدراتنا؟

بحث المستخدم

هو البحث المتعلق بفهم المستخدمين وسلوكهم، ويكون هدفه الإجابه عن هذه الأسئلة:

• من سيستخدم المنتج، ما مميزاتهم، أعمارهم، جنسهم، هواياتهم، وما سلوكهم الحالي في استخدامهم للمنتج أو لحلول مشابهة؟
• مالذي يريد تحقيقه المستخدم من استخدامه للمنتج؟

وفي حال كان المنتج تطويرًا لنسخة سابقة:

• ما هي الخصائص والوظائف الحالية أو التعقيدات التي تواجه المستخدم؟
• ما هي الخصائص والوظائف التي سوف يجدها المستخدم جيدة لو تم إضافتها؟

البحث التقييّمي

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

بحث المنافسين

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

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

بحث المستخدم

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

الإثنُوجرَافِي Ethnography

البعض يسمي البحث النّوعي بالإثنوجرافي وهدفه فهم وتوثيق نشاطات، عقليات وسلوكيات مجموعة من الناس بعد أن يراها الملاحظ أو المراقب ويتم بطرق كثيرة أهمها المقابلة والاستفسار السياقي.

المقابلة Interview

لقد ابتدأ العمل، استعد لمقابلة الناس المستهدفة ورتب لذلك وتذكر بأننا نريد أن نفهم السلوك فمثلا إذا كان كان منتجك هو بناء موقع إلكتروني لبيع تذاكر السينما فسنقوم باستهداف رواد السينما وليس محبي الأفلام.

الدليل

حضر دليل المقابلات بحيث يكون هو المرجع لجميع المقابلات، ومن أهم ما يجب أن يحتويه هذا المرجع هو:

1. مختصر يوضح هدف الدراسة.
2. الديموغرافيا (Demographics) وهي تختلف على اختلاف الدراسة وأهم ما تحتويه الاسم، العمر، الجنس، البلد، الوظيفة والتعليم.
3. مجموعة من الأسئلة لتكسير الحواجز الجليدية في المقابلة، أنت لا تريد فقط أن تنتهي من مقابلتك أنت تريد أن تحصل على أصدق المعلومات لذلك لا بد من أن يخلو الجو من التوتر وتسود الراحة في المكان.
4. الأسئلة الرئيسية في المقابلة وهي الأسئلة المتعلقة بموضوع الدراسة. تجنب أن تسأل أسئلة مثل "ما هو الحل برأيك" وذلك لأن المستخدم ليس مُصمما وغايته ببساطة أن يستخدم المنتج النهائي بسهولة ومتعة.

بنية المقابلة (مع مثال توضيحي)

المقدمة

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

الرئيسية

هنا جوهر المقابلة، ستبدأ بالأسئلة الرئيسية، مثل:

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

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

الخاتمة

اعمل نقلة لطيفة لإنهاء المقابلة واختم مثلا بقولك "انتهيت من الأسئلة، ألديك أي شيء لتضيفه أو أي تعليق بخصوص ما ناقشناه؟".

الاستفسار السياقي Contextual Inquiry

هي طريقة أخرى من طرق بحث الإثنوجرافي وهو شبيه بالمقابلة إلا أنه يأخذ شكلا أعمق ويختلف عنها بأنه يتطلب الذهاب إلى مكان الحدث مباشرة وأن تراقب المستخدم أثناء قيامه بعمله وتقوم بملاحظته لفهم الموضوع بدقة أكثر ولمعرفة حقيقة الموضوع. ذلك، لأنه في أحسن الظروف في المقابلة النظرية لن تستطيع أن تتذكر كل شيء كمُقابل ولن تدرك حقيقة الشيء إلا إذا قمت بمعاينته وتجربته. لعل أقرب مثال لهذا النوع من البحوث هي قصة إنتاج سيارة Toyota sienna minivan سنة 2004، تم توكيل إنتاج هذه السيارة وتصميمها لـ "يوجي يوكوفا" وكان السوق المستهدف لها هو أمريكا الشمالية التي لم يكون "يوجي" يسكنها أو عنده أي خبرة حقيقة فيها. هنا قام "يوجي" بالذهاب بنفسه إلى أمريكا الشمالية قاطعا بنفس السيارة ولكن بموديل السنة السابقة 2003 ولايات أمريكا الخمسون، أراضي كندا والمكسيك. كان  هدف "يوجي" هو التحدث مع الناس مباشرة  ومراقبتهم أثناء سياقتهم للسيارة ليقوم ببحثه في أرض الحدث مباشرة. بعد أن انتهى من جولته البحثية أنتج الموديل الجديد للسيارة وكانت النتيجة أن مبيعات السيارة لموديل 2004 زادت بنسبة أكثر60% عن السنة السابقة.

الجانب العاطفي أثناء البحث

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

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

لمزيد من القراءة

• كتاب The UX Book
• كتاب Just Enough Research
• مقال A Five Step Process For Conducting User Research
• مقال 5Useful Lies to Tell User Research Participants

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

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

1- تخلص من الصفحة القياسية

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

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

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

2- أبق الصفحة مألوفة

يُبقي موقع !Yahoo صفحة الخطأ 404 الخاصة به قصيرة وبسيطة، ولكن بنفس الوقت يظهر جليّا للمستخدم أن الصفحة تعود لهذا الموقع بالذّات، ففي بعض الأحيان يكون من المنطقي جدًا العودة إلى البداية.

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

أقل ما يمكنك فعله هو أن تبقي لافتة تعريف أو شعار يدلّ على الموقع والذي يمكن للمستخدم ربطه بشكل مباشر مع رسالة الخطأ 404، وذلك لأنّ رؤية لافتة أو شعار الموقع سيكون ببساطة مطمئنًا بشكل كافٍ لمعظم المستخدمين.

3- أبق الصفحة قاعدية

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

فعلى سبيل المثال تقوم مدونة Digital Photography School بربط المستخدمين الذين يحصلون على صفحة الخطأ 404 بأحدث المحتويات التي نشرت في موقعهم.

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

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

4- تقديم بعض التوجيهات

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

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

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

5- كن خلاقا ولكن باعتدال

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

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

ألق نظرة على صفحة الخطأ 404 الخاصة بموقع WP Candy’s WP Candy’s 404 Page ستلاحظ أنّ الهيكلية الأساسية للموقع بقيت على حالها مع إضافة خيار لتصفح الموقع وآخر للبحث، بالإضافة إلى شعار جميل يخبرك عن موضعك في الموقع، ورسالة تؤكد على أنه من الممكن أن تكون قد تمّت إزالة بعض الصفحات. ولكن الأمر غير العادي في رسالة الخطأ 404 تلك هو وجود شريط مصور قصير لمؤسس الموقع نفسه يشجعك أنت كمستخدم على متابعة البحث عن الصفحة التي تريدها (كما أنه أضاف لحن مناسب من فيلم Indiana Jones). وبهذا تكون صفحة الخطأ قد حافظت على فعاليتها مع لمسة من الخصوصيّة.

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

نحن فخورون بصفحة الخطأ 404 التي أنشأنناها

تعرض هذه الصّفحة UX Booth 404 Page الجوانب المفصلة لصفحة الخطأ 404 الخاصة بموقع UX Booth، تفضلوا بإلقاء نظرة عليها فنحن فخورون بها ونشعر بأنها مثال جيد لما يجب أن تبدوا عليه هذه الصفحات.

لمعرفة المزيد عن صفحات الخطأ 404 تفضل بزيارة الروابط التالي:

• معرض مميز لصفحات الخطأ 404 الملهمة.
• تعلم المزيد عن كيفية صنع صفحة الخطأ 404 المثالية.
• اقتراحات Google لما يجب أن تحويه صفحة الخطأ 404 خاصتك.
• دليل الزبون لمعرفة كيفية صنع صفحة الخطأ 404 بنفسك.

ترجمة -وبتصرّف- للمقال Five 5 Tips to Make Your 404 Page More Usable لصاحبه Matthew Kammerer.

un-panier-de-feu-avec-photoshop.zip

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

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

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

إنّ من أهم المزايا التنافسية في الشركات العملاقة في عالمنا اليوم أمثال Google ،Apple ،Microsoft ،Samsung هي تجربة المستخدم. فعلى سبيل المثال جهاز بلاك بيري، كانت أجهزة بلاك بيري هي الرّائدة في سوق الهواتف الذكية ولكن عندما دخلت Apple بجهاز iPhone الذي كان بتطبيقات وخصائص عملية أقل من البلاك بيري، استطاعت أن تحصل على النّسبة الأكبر من السوق. هناك عوامل تنافسية كثيرة بين المنتجات ولكن بالنسبة لمنتجين متشابهين وقابلين للمقارنة تجربة المستخدم من أهم العوامل.

ولتوضيح الفكرة أكثر انظر مثلا إلى جهاز iPod، بشكله البسيط، الرائع، الممتع في استخدامه وطرريقة ربطه مع برنامج iTunes، ما لبث أن ينزل على السّوق حتى أحَبه الجميع، مع العلم بوجود أجهزة تؤدي نفس الوظائف الرئيسية التي يؤديها iPod.

ماهي تجربة المستخدم وماذا يندرج تحتها؟

الكثير من الناس يخطئ في فهم تجربة المستخدم أو قد يختزلها في موضوع معين، فمثلا هناك من يخلط ما بين تجربة المستخدم وواجهة المستخدم User Interface أيضا هناك من يخلط ما بينها وبين سهولة الاستخدام، لا يتّسع المجال لذكر كل المفاهيم الخاطئة فلذلك سنقوم في البداية بشرحٍ بسيط لتجربة المستخدم ومن ثم نقوم بتوضيح أكثر المفاهيم الخاطئة انتشارًا.

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

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

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

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

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

تجربة المستخدم لا يمكن تصميمها

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

تجربة المستخدم ليست واجهة المستخدم

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

سهولة الاستخدام مهمة ولكن تجربة المستخدم أكثر من ذلك

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

تجربة المستخدم ليست محصورة على البرامج والأنظمة

التصميم لتجربة المستخدم ليس محصورا على البرامج أو المواقع الإلكترونية، ولكنه يضم أيضا التصميم لكافة المنتجات سواء كانت برمجية أو مادية. فمثلا، وأنت تقوم بسحب النقود من الصراف الآلي فأنت تشعر بتجربة معينة نتيجة لانتظارك في الصف، لقرائتك للتعليمات، لإدخالك البطاقة ولسحبك النقود. تخيل ماذا لو كانت نافذة الصراف الآلي أطول أو أقصر منك ماذا لو قَرَأتِ البطاقة ولم تخرجها أو أخرجت مبلغا غير الذي طلبت. ما أحاول أن أصل إليه هنا هو أن المنتجات في كل مكان ونتفاعل معها في حياتنا اليومية وانتباهك لهذه المنتجات سيحسّن من طريقة تفكيرك كمُصمم لتجربة المستخدم وسيعمّق من نظرتك للأمور.

سير العملية والاستراتيجة في تصميم تجربة المستخدم

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

في الصورة أعلاه هناك خمس خطوات لإصدار النسخة الأولية من المنتج أو البرنامج وهو ما يسمى في الشركات الناشئة بالمنتج الفعّال القاعدي (Minimum Viable Product) أما الخطوتان الأخيرتان فهما تعودان إلى ما بعد الإصدار الأول وذلك لإنه حتى نصل إلى جودة عالية في المنتج لا بد من التكرار والتحسين عليه، بناءً على التغيرات التي تحدث في العالم (تطور التكنولوجيا، زيادة المنتجات المنافسة، …) وبناءً على رُدود الفعل من المستخدمين.

منهجية العمل

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

لمزيد من القراءة

• مقال 10Most Common Misconceptions About User Experience Design
• مقالات UX Myths
• كتاب The Elements Of User Experience
• كتاب Don't Make Me Think

على الرغم من وجود بعض الانتقادات لواجهات المُستخدم المُنبسِطة ووصفها بأنّها مجرد موضة، أو أنها رد على التصميم المُحاكي للواقع (skeuomorpic)، فإن كثيرًا من المصممين تبنّوا فكرة التصميم المُنبسط بسبب أنّ التخفيف من حدّة التّصميم المرئي (مثل التدرج اللّوني، تأثيرات الظل، والحواف) ينتج عنه واجهات أبسط وأنظف.

تكمن المشكلة في أنه تم بناء أغلب واجهات المستخدم المنبسطة بشكل يُركّز على توفير المحتوى، أما المكونات التي يتفاعل معها المستخدم (transactional components) مثل النماذج، فلم تحظَ سوى بالقليل من الاهتمام. ماذا سيحدث عندما يتعارض التصميم المُنبسط مع النماذج؟ يُمكن أن يُواجه المُستخدم مشاكل لدى استخدامه للموقع، وهذا أمر واردٌ جدًا.

الاهتمام بالنّماذج

المقصود بالنّماذج هنا هو أي تفاعُل (interaction) يتم فيه تبادل للمعلومات لاستقبال منتج أو خدمة. هذا يتضمن عدّة أمور بدءًا بالبنوك الإلكترونية (internet banking) وصولًا إلى التجارة الإلكترونية على الهواتف الذّكيّة (mobile commerce)، ومرورًا بكلٍ من التّسجيل لاستخدام تطبيق على جهاز لوحي والقيام بعملية بحث على الويب.

احتياجات المستخدمين إلى تصميم النماذج يختلف كثيرًا عن احتياجهم إلى تصميم المحتوى، كما هو ملخَّص في الجدول التالي:

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

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

بالمقابل فإنه يتّم الوصول إلى المحتوى عبر مسارات ومن مصادر مُختلفة، ويعمد الناس إلى استعراض والتركيز على المحتوى بعدة طرق مُختلفة. فكرة النَّجاح لا تزال صحيحة هنا، ولكنّها مُختلفة بسبب اختلاف حالات الاستخدام.

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

التصميم المُنبسِط يعني معلومات أقل

كقاعدة أساسية فإنَّ النَّماذج والمحتوى مختلفان. لكن قد تتساءل، ما علاقة هذا الأمر بواجهات المستخدم المُنبسطة flat UI؟

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

كمثال على ذلك لنلق نظرة على حدثي الإرسال submit والإلغاء cancel في النماذج. كما هو معروف فإن لكل من هذين الحدثين نتائج مختلفة تمامًا، ونُريد من المستخدم أن يختار الحدث الذي يتوافق مع احتياجه بشكل سريع وسهل في آن واحد. لهذا أنصح أنا وغيري من المُصمّمين أن يتمّ التفريق بينهما وأن يكون الحدث الرئيسي (الإرسال أو الموافقة) كزّر، أما الحدث الثانوي (الإلغاء) فيكون كرابط نصّي. التصميم المرئي ليس مجرّد تحسينات جمالية، ولكنّه يُعبّر بشكل صريح عن الاختلاف الوظيفي ما بين العناصر وعن ترتيبها حسب أولويّاتها.

في المُقابل، فإن نموذج Klout التالي، يُوضّح كيف يُمكن للمعلومة أن تضيع جرّاء المُبالغة في تبسيط الواجهات المُسطّحة. وضع الزّر "إلغاء cancel" قبل الزّر "إرسال submit " يعتبر نمطًا خبيثًا (dark pattern) سيّئًا جدًا (يستخدم هذا النوع من التصميم في خداع المستخدم لفعل شيء معين)، لكن لندع هذا الأمر جانبًا . لنركز على جانب التّصميم، لاحظ كيف أنّه تمّ تنسيق الحدثين الرئيسي والثانوي كروابط نصّيّة، بنفس اللون وبنفس الخلفية، مما سيُقلّل من سرعة المُستخدم ويدفعه إلى التّركيز أكثر قبل أن يتخذ القرار.

تخيّل معي كيف سيكون هذا النموذج أكثر قابلية للاستخدام إذا ما تمًّ التَّفّريق بين الأحداث والتّوضيح بشكل بصري عن ذلك (ومرة أخرى لنترك نمط التصميم الخبيث جانبًا):

الطُرق الثلاثة المُؤدّية إلى فشل النماذج المُنبسطة

المثال السابق يوضّح هذه الطُرق والتي تؤدي إلى فشل نماذج الواجهات المُنبسطة في توفير تجربة استخدام سهلة:

1. ضُعف الجانب الإيحائي (affordance): يُقصد بذلك أن المُنتج سواء كان حسّيّا أو غير حسّي فإنّه يُفترض به أن يوحي إليك بطريقة استخدامه. كأن يتبادر إلى ذهنك مفهوم الجلوس بمُجرد أن ترى كُرسيًّا.

2. عدم وجود فروق كافية وواضحة بين عناصر النموذج (مثال، الحقول ومسمياتها والتعليمات والأزرار).

3. عدم وجود تسلسل كافٍ في داخل أصناف عناصر النموذج (مثال، الأزرار الأساسية والأزرار الثانوية).

يفتقد حدثا "الإرسال" و "الإلغاء" في واجهة Klout إلى الإيحائية، لأنَّ التصميم لا يدعوك إلى التّفاعل معه (interaction) بشكل صحيح. كان بإمكان هذه الأحداث أن تبدو قابلة للنّقر إذا تم إعطاؤها شكل الزّر (فهي أحداث actions) أو على الأقل لو تم وضع خطّ تحتها حيث أن ذلك ما يُميّز الرّابط من النّصّ العادي على الويب.

كما أنّه لم يتم التفريق ما بين عناصر النموذج بشكل جيّد، فالفرق الوحيد الذي يفصل بين الرّابط القابل للنّقر وغير القابل للنّقر هو لون النّص. أما بالنسبة لترتيب الروابط، فمثال Klout مُثير للانتباه بشكل خاص. فوضع زّر "إلغاء" أولًا يُعطيه أهمية وقيمة أكبر مُقارنة بزر "الإرسال" (وهنا حجر زاوية نمط تصميم الخبيث- حيث أن ما اُتّفق عليه هو أنّ ما يأتي أوّلا هو الخيار القياسي). وفوق ذلك، فإن لكلي الرابطين نفس التنسيق، رغم أنّها مُختلفان، وسواءً نظرت إلى الأمر من وجهة نظر Klout أو من وجهة نظر المُستخدم.

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

تعديل تصميم الحقول والأزّرار

يكون تصميم النماذج المُنبسطة ناجحًا إذا كانت الحقول تبدو مُقعّرة (hollow) والأزرار تكون بارزة. فمثل هذا التصميم يوحي بكيفية استخدام مُختلف عناصر النموذج ويظهرها مختلفة عن بعضها البعض.

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

إليك كيفية التَّفريق بين الحقول والأزرار وكذلك كيفية إضفاء الإيحائية اللّازمة عليها:

إصلاح الحقول

دعنا نلقي نظرة على الحقول قبل وبعد إصلاحها، مع التركيز على الحقول أولًا. تظهر شاشة التسجيل في موقع Hipstamatic's Oggl المُخصّصة للهواتف كما في الصورة الأولى (على اليسار) من مجموع الصورة الثلاث في الأسفل.

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

عندما أطلقت فيس بوك graph search اِكتشفت بأسوأ طريقة مُمكنة أهمية استخدام الحقول المُقعّرة. بداية، لم يكن لحقل البحث أي لون في الخلفية (كانت خلفية حقل البحث بنفس اللّون الأزرق المُستخدم في الشريط العلوي). وماذا كانت النتيجة؟ لم يتمكّن الكثير من المستخدمين من إيجاد هذه الميزة. بعد اختبار أربع نُسخ مختلفة من حقل البحث، توصّلت فيس بوك إلى أنّ الخلفية البيضاء والظل الداخلي الخفيف- مثل الحقل الذي يظهر مُقعّرًا- هو الحل الأمثل.

الاتّزان في تصميم الأزرار

والآن سنركّز على الأزرار، مع مثال آخر قبل وبعد التعديل.

في مثال مُحرّك البحث التّالي، لدينا على اليسار النّسخة الأصلية، والنّسخة المٌحسّنة والأفضل استخدامًا على اليمين.

الزّر في التصميم الأصلي كان مُنبسطًا بشكل كبير جدًا، يظهر للمستخدم بشكل مماثل للتّرويسة، لذيل الصّفحة، أو لأي كُتلة من كتل الصّفحة. إنقاص عرض الزِّر وإضافة الزوايا الدائرية، يعطي إيحائية أفضل (affordance) مع المحافظة على وجود مساحة كافية للَّمس/النّقر.

الأحداث الرئيسية والأحداث الثانوية.

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

• استخدم الأزّرار مع الأحداث الرئيسية والروابط النّصّيّة مع الأحداث الثانوية

• استخدم تنسيق يُبرِز الأزرار المُخصصة للأحداث الرئيسية، مُقارنة مع تنسيق الأزرار المُخصصة للأحداث الثانوية.

مثال عن استخدام الروابط النّصّيّة مع الأحداث الثّانوية في نموذج تسجيل الدخول.

ويُمكن الذّهاب إلى أبعد من ذلك، مثلما شرحه Riki Tanone حول كيفية التَّفريق بين الأزرار الرئيسية والثانوية في مدونته المتخصصة بقوالب واجهات الاستخدام على Dribble.

معلومات أكثر تعني قابلية وصول أفضل

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

هذا التكرار يجعل الواجهة أكثر قابلية للوصول لِطيفٍ واسع من المستخدمين، لأن التصميم لا يَفترض بأنّ المستخدم قادر على رؤية أو فهم الاختلاف البصري الوحيد الذي يدلّ على نوعيّة التّفاعل.

يُعتبر اللّون مثالًا رائعًا، فهناك نحو 12 بالمئة من البشر من يُعاني من مشاكل مع الألوان. إذا كان اللّون هو الفرق الوحيد بين النص القابل للنَّقر والنص العادي، كما في مثال Klout، فإنك -بهذه الطريقة- تُصعّب المهمّة على نسبة 12 بالمئة من المستخدمين على الأقل.

قارن هذا مع التوصيات التي طرحتها أو تلك التي طرحها Luke Wroblewski وآخرون، والتي تنصّ على أنه يجب تعليم الحقول المطلوبة بنجوم حمراء (كما في يسار الصّورة التّالية). في هذا المثال تقوم الألوان والأشكال معًا على إيصال فكرة مُعيّنة للمُستخدم، لهذا يُعد النموذج قابلًا للاستخدام حتّى من قبل المستخدمين الذين لديهم مشاكل مع الألوان (قد يظهر لديهم النموذج كما في الجزء الأيمن من الصورة).

خاتمة

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

ترجمة -وبتصرّف- للمقال Flat UI and Forms لصاحبته Jessica Enders