البحث في الموقع

يستخدم النّاس المواقع والتّطبيقات لأسباب مُختلفة، فإن صمّمت لسلوك غير ما تريده، فلن تحصل على النّتائج الّتي تريدها. سنتعلّم اليوم الأساليب المُختلفة للنّاس في الاطّلاع على التّصميم: التّصفّح، والبحث، والاكتشاف. قد تعني هذه الكلمات أمورًا مختلفة في سياقات مُختلفة، ولهذا سنوضّح المقصود منها في هذا الدّرس: التصفّح يعني إلقاء نظرة "بحثًا عن أفكار"، كأن تذهب إلى متجر بلا هدف، وتخرج حاملًا بعض المُنتجات غير الضّروريّة. البحث هو أن تذهب إلى المتجر لشراء غرض مُحدّد. الاكتشاف هو أن تذهب إلى المتجر لشراء ذاك الغرض، وتعود به مع غرض آخر أعجبك. فهرس سلسلة مدخل إلى تجربة المستخدم: مدخل إلى تجربة المستخدم User Experience فهم ودراسة المستخدمين في مجال تجربة المستخدم دراسة الشريحة المستهدفة في مجال تجربة المستخدم كيفية التصميم للأجهزة المختلفة هندسة المعلومات في تجربة المستخدم تعرف على أنماط التصميم في مجال تجربة المستخدم أشياء لا يمكن اعتبارها رسوما تخطيطية (Wireframes) في مجال تجربة المستخدم تعرف على الرسوم التخطيطية (Wireframes) في مجال تجربة المستخدم مفهوم الثقل المرئي (Visual Weight) والألوان في مجال تجربة المستخدم التكرار ومخالفة الأنماط في مجال تجربة المستخدم المحاذاة والقرب في مجال تجربة المستخدم تعرف على أساليب مسح الواجهة والتراتب المرئي في مجال تجربة المستخدم أساليب الإطلاع في مجال تجربة المستخدم: التصفح، البحث والاكتشاف (هذا الدرس) تصميم هيكل صفحة الويب والعناصر الأساسية في مجال تجربة المستخدم الأزرار، النماذج والدعوات إلى الإجراء في مجال تجربة المستخدم استخدام علم النفس في مجال تجربة المستخدم لتكييف المستخدم وإقناعه كيف تغير الخبرة من تجربة المستخدم؟ تصميم تجربة المستخدم من خلال بيانات وإحصائيات المستخدمين تعرف على أنواع المخططات الإحصائية في مجال تجربة المستخدم اختبارات أ/ب (A/B Test) في مجال تجربة المستخدم التصفح عندما تزور متجرًا إلكترونيًّا لمجرّد أنّ منتجاتهم تبدو مغرية أو لأنّك تتابع "الموضة"، أو لأنّك تحلم بذلك اليوم الّذي ستقتني فيه تلك الحقيبة الثّمينة الّتي ستجعلك إنسانًا أفضل (!)، فأنت تتصفّح. المُستخدم المُتصفّح سيُلقي نظرة سريعة على معظم الصّور، واحدة تلو الأخرى، بدءا من أيمن وأعلى الصّفحة، قد يتجاهل بعض المنتجات، ولا بأس في ذلك، وقد ينقر على بعض الصّور الّتي تجذب انتباهه أكثر من غيرها. إذا أردت التّصميم بهدف التّصفّح، فاجعل المحتوى مُختصرًا ومرئيًّا، وسهِّل مسح الصّفحة بالعين، لا تحشر عناصر غير مهمّة في الصّفحة، بل ركّز على جوانب المُنتجات الّتي تلبّي مشاعر المستخدم، قدّم وصفًا يناسب هذه الحاجات، فلو كان يحبّ الأسماء التّجاريّة، فاعرض شعارات الشّركات بجوار المنتجات، وهلمّ جرًا. البحث عندما يحاول المُستخدم إيجاد شيء ما في ذهنه، فقد يبدو الأمر مُشابهًا للتصفّح، إلّا أنّ دراسات تتبّع العين تبيّن سلوكًا مختلفًا تمامًا. فالمستخدم الباحث سيتجاهل منتجات وصور كثيرةً، وسيُعينه تنظيم موقعك بصورة حسنة على تتبّع الخيارات بصورة منهجيّة، فهو لا يُريد أن يفوته أحدها. واجهة مثل واجهة موقع Pinterest غير مناسبة لهؤلاء المستخدمين لأنّها تبدو فوضويّة، ولكنّ إمكانيّة تصفيّة الخيارات قد تكون مفيدة. إذا أردت التّصميم بهدف البحث، فركّز على مزايا كلّ عنصر، فلو كان يبحث عن مُنتجٍ بصفات مُعيّنة فسيقف عند كل صورة فيها هذه الصّفات، أمّا غيرها فسيكون عقبة أمامه. أبرز المزايا الّتي تكون أساسيّة لمعظم المستخدمين، ولا شيء غيرها. تجاهل كون الموقع مليئًا بالمعلومات، فلا بأس في ذلك طالما كانت المعلومات مُفيدة. عندما يجد المُستخدم ما يُريد، فسينقر على المُنتج لقراءة معلومات أكثر أو لشرائه، وسيتوقّع معلومات مُفيدة مثل اسم المنتج وصوره وآراء المُستخدمين. الاكتشاف لنتفرض مثلًا أن لديك منتجًا رائعًا لم يجده مستخدمو موقعك، وتعتقد أنّهم قد يشترونه إن عُرض لهم، فكيف تخلق قابليّة الاكتشاف؟ قد تكون فكرتك عن الاكتشاف مخالفة تمامًا للواقع، فمرحبًا بك إلى عالم تجربة المُستخدم الغريب! فيما يلي فكرتان خاطئتان عن الاكتشاف: ستضيف المُنتج إلى القائمة الرّئيسيّة، أو تُنشئ إعلانات في أعلى الصّفحة تدعو لشرائه. تتوقّع أن مُستخدميك الأكثر وفاءًا سيجدون المنتج أوّلًا، لأنّه يقضون وقتًا أطول مع تصميمك. كلا الفكرتين خاطئتان. أوّلًا: لا ينقر المستخدمون على ما في القائمة إلا إن كانوا يبحثون عن شيء معيّن. لا أحد "يكتشف" من خلال القائمة. كما أن الإعلانات في أعلى الصّفحة غير مُجدية لأنّها لم تكن يومًا مُجدية! ألم تستخدم الإنترنت من قبل؟ ما الّذي سيجعل مستخدميك يُقبلون على هذا الإعلان على حين غرّة؟! ثانيًا: كلّما خَبِر مُستخدموك تصميمك، قلّت إمكانيّة اكتشافهم لأشياء جديدة، فالواقع أنّه ما من أحد سوى المُبتدئين يتصفّحون المواقع والتّطبيقات بحثًا عمّا يمكن إنجازه بها، وأمّا الخبراء فيعرفون ما يريدون، وكيف يُتِمّونه، فلم يتصفّحون؟ "إن أعجبك هذا، فقد يعجبك هذا أيضا..." بدلًا من ذلك، دع مستخدميك يجدون ما يبحثون عنه بالفعل، ثمّ اعرض عليهم أشياء جديدة مرتبطة بها بحيث يمكنهم "اكتشافها"، قد تعتقد أنّ هذا إخفاء لها، إلّا أنّه في الحقيقة أفضل ما يمكن فعله لضمان اكتشافها. في مواقع مثل Reddit، يأتي المستخدمون بحثًا عن أعلى المواضيع تقييمًا، وليس أحدثها، ولكن إن لم يُصوّت أحد على المواضيع الجديدة، لن يكون هناك مواضيع جديدة أعلى تقييمًا! ولهذا يضيف Reddit بعض المواضيع الجديدة من الفئات الّتي يحبّها الزّائر بين الأعلى تقييمًا، بحيث تحصل على تقييمات جديدة، لتعود الدّورة من جديد. كلّما فهمت مستخدميك، زاد فهمك لهدف تصميمك، ومن هنا تنبع أهميّة أبحاث المستخدمين. ترجمة بتصرّف للدّرس Browsing vs. Searching vs. Discovery من سلسلة Daily UX Crash Course لصاحبها Joel Marsh. اقرأ أيضًا النسخة العربية الكاملة من كتاب مدخل إلى تجربة المستخدم (User Experience - UX) 1.0.0 كيف تتصرف في جلسة بحث عن تجربة المستخدم UX أساسيات البحث في تصميم تجربة المستخدم هل تحتاج إلى المساعدة في اختيار أداة واجهة وتجربة المستخدم UX/UI؟ أنت في المكان الصحيح بيان تجربة المستخدم: مبادئ التصميم، دراسة المستخدم، التصميم المرتكز حول المستخدم، تصميم وتخطيط تجربة المستخدم

بعد أن حدّدنا أهدافنا، وأنهينا أبحاثنا عن المستخدمين، وأسّسنا هندسة المعلومات، حان الوقت للبدء بالتّصميم! فهرس سلسلة مدخل إلى تجربة المستخدم: مدخل إلى تجربة المستخدم User Experience فهم ودراسة المستخدمين في مجال تجربة المستخدم دراسة الشريحة المستهدفة في مجال تجربة المستخدم كيفية التصميم للأجهزة المختلفة هندسة المعلومات في تجربة المستخدم تعرف على أنماط التصميم في مجال تجربة المستخدم أشياء لا يمكن اعتبارها رسوما تخطيطية (Wireframes) في مجال تجربة المستخدم تعرف على الرسوم التخطيطية (Wireframes) في مجال تجربة المستخدم مفهوم الثقل المرئي (Visual Weight) والألوان في مجال تجربة المستخدم التكرار ومخالفة الأنماط في مجال تجربة المستخدم المحاذاة والقرب في مجال تجربة المستخدم تعرف على أساليب مسح الواجهة والتراتب المرئي في مجال تجربة المستخدم أساليب الإطلاع في مجال تجربة المستخدم: التصفح، البحث والاكتشاف تصميم هيكل صفحة الويب والعناصر الأساسية في مجال تجربة المستخدم (هذا الدرس) الأزرار، النماذج والدعوات إلى الإجراء في مجال تجربة المستخدم استخدام علم النفس في مجال تجربة المستخدم لتكييف المستخدم وإقناعه كيف تغير الخبرة من تجربة المستخدم؟ تصميم تجربة المستخدم من خلال بيانات وإحصائيات المستخدمين تعرف على أنواع المخططات الإحصائية في مجال تجربة المستخدم اختبارات أ/ب (A/B Test) في مجال تجربة المستخدم هيكل الصفحة قد يكون من المُغري العمل على تنفيذ الرّسوم التّخطيطيّة واحدًا تلو الآخر، لكنّها طريقة غير فعّالة، بل ينبغي البدء بالأجزاء الكبيرة ثم إضافة التّفاصيل الصّغيرة أثناء العمل، والأجزاء الكبيرة هنا هي العناصر الّتي ستظهر في جميع الصّفحات، أي عناصر التّنقّل (navigation) وتذييل الصّفحة (footer). التذييل عادة ما يكون قائمة من الرّوابط الثّابتة ذات الموضوع العامّ وغير المهمّة بحيث لا تستحقّ أن توضع في القائمة الرئيسيّة. بعض المواقع تعتني أشد الاعتناء بمظهر التّذييل، وهذا أمرٌ حسن، ولكن إن احتوى التّذييل على روابط يحتاجها المستخدم لإنجاز مهمّته على الموقع، فالتّذييل ليس المكان المناسب لهذه الرّوابط. اسأل نفسك: "هل سيحتوي الموقع على صفحات فيها تمريرٌ غير منتهٍ (infinite scrolling)؟ وإن كانت الإجابة نعم، فتأكّد أنّ كلّ ما يحويه التّذييل متوفّر أيضًا في مكان آخر، فإن كان حقل اختيار اللّغة موجودًا في ذيل الصّفحة، وكلّما حاول المستخدم نقره ابتعد عنه للأسفل، فأنت مصمّم فاشل! عناصر التنقل هناك نوعان على الأقل من القوائم: رئيسيّة وفرعيّة. القائمة الرئيسيّة: إن كنت قد أسّست هندسة المعلومات بصورة صحيحة، فأنت تعرف الآن ما يجب أن تحويه هذه القائمة، فهي المستوى الأول من الرّوابط في خريطة الموقع (تحت الصّفحة الرئيسيّة). يجب أن يكون ترتيب عناصر القائمة من اليسار إلى اليمين (أو من اليمين إلى اليسار في حالة العربية مثلا) أو من أسفل إلى أعلى بحسب شعبيّة العنصر (وهذا يُقاس باهتمام المستخدمين، وليس بما يحلو لك!). إن كنت تصنع قائمة جديدة من الصّفر، افعل افضل ما يمكنك، ثم أخبر المُطوّرين أنّك ستحتاج لإعادة ترتيبها لاحقًا، وعندما يزداد عدد الزّوّار بصورة معتبرة، ادرس شعبيّة العناصر وأصلح الترتيب إن دعت الحاجة. القائمة الفرعيّة: وهي قائمة بالصّفحات الّتي تندرج تحت الصّفحة الحاليّة الّتي يراها المستخدم في خريطة الموقع، (أخبرني الحقيقة: لقد رسمت خريطة الموقع، صحيح؟). النّقطة الأكثر أهمّيّة في القوائم الفرعيّة هي أنّها يجب أن تكون في الحالات المثاليّة في الموضع ذاته في كلّ صفحة، حتّى وإن تغيّر الرّوابط، وهذا يسمح للمستخدمين بإيجادها بسرعة. لا تجعل القوائم الفرعيّة ضخمة يُفاجئني بعض المصمّمين عندما يحاولون إقناعي بقائمة فرعيّة عملاقة، فذلك يعني أن هندسة المعلومات (ومهندسها) في غاية السوء. رمي كلّ شيء في قائمة واحدة هو أكثر التّصاميم كسلًا في الكون، كن أفضل من ذلك. وجود هذا العدد الكبير من الرّوابط في القائمة يعني أنّه يجب التّخلّي عن بعضها! الخلاصة: أنشئ عناصر التنقل وتذييل جميع الصّفحات في تطبيقك قبل البدء بالمحتوى، ستكون لي شاكرًا فيما بعد. الطية (Fold) الطّيّة في التّصميم تعني الجزء من الصّفحة الّذي يراه المستخدم قبل أن يبدأ التمرير للأسفل، وهناك الكثير من الأفكار الخاطئة عنها. كلّ شيء فوق الطّيّة سيتلقّى أكبر قدر من المُشاهدات، ولكن يمكن (بحسب الدّراسات) أن تتوقّع نسبة من المستخدمين بين 60 و80 في المئة سيُمرّرون للأسفل إن كانوا يظنّون أنّهم سيجدون شيئًا مفيدًا. كلّ ما فوق الطّيّة يجب أن يُعلم المُستخدمين بما تحته، فإن لم يعلم المستخدم ما سيجده أدناها، فقد لا يتكلّف عناء التمرير. كن حذرًا: يشيع اليوم استخدام خلفيّة كبيرة على كامل القسم العلويّ من الصّفحة، فإن بدت الصّفحة وكأنّها تنتهي عند الطّيّة، فقد يغادر المُستخدم الموقع بدل أن يمرّر الصّفحة، وإن اضطررت لإضافة رسالة تخبره بأن "يمرّر للأسفل"، فتصميمك ضعيف. الصور يُعامل كثيرٌ من مصمّمي تجربة المُستخدم الصّور على أنّها بلا وظيفة، ولكنّ الصّور كثيرًا ما تقود عيني المُستخدم، ولذا يجب أن تفكّر فيها. بشكل خاصّ، تجذب صور النّاس الانتباه أكثر من أيّ شيء آخر في الواجهة. وكقاعدة عامّة، كلّما عزّزت الصّورة مشاعر المستخدم، كان تفاعله أكبر. نصيحة: في صور النّاس، حاول جعل الشّخص في الصّورة ينظر بالاتّجاه الّذي تريد المُستخدم أن ينظر نحوه، فهذا يصنع فرقًا كبيرًا. كلا الخريطتين الحراريّتين أعلاه تظهران التّخطيط نفسه، لكن إحداها تجعل الطّفل ينظر للعنوان، والأخرى تجعله ينظر نحو المُستخدم. تُظهر الخريطتان أن المُستخدمين ركّزوا على وجه الطّفل في الصّورة كثيرًا، لكن الثّانية جذبت انتباهًا أكبر للمحتوى النّصّي وصورة المُنتج والشّاعر. أي الصّورتين ستختار؟ العناوين بالإضافة لصور النّاس، تنجذب العينان نحو النّصوص الكبيرة عالية التّباين في الواجهة، فعندما تضيف عنوانًا كبيرًا إلى تصميمك، فهذا يعني أنّك اخترت الموضع الّذي سيبدأ المُستخدم مسح الصّفحة بعينيه منه. ولهذا ينبغي محاذاة العنوان مع النّص الأكثر أهمّية أسفله، فلو كان هذا المُحتوى غير مهمّ لجذب الانتباه بغير فائدة، وصرفه عن محتوى قد يكون أهمّ، ولو لم يُحاذَ النّص والعنوان لبحث المُستخدم عن نقطة أخرى يُركّز نظره عليها بعد قراءة العنوان. الخلاصة: ضع شيئًا يُركّز المستخدم عليه قبل أن يُمرّر الصّفحة. اجعل إمكانيّة التّمرير واضحة. اختر صور تثير المشاعر وتوجّه عينيّ المُستخدم. استفد من العناوين بتوجيه المستخدمين إلى المُحتوى المهمّ. محور التفاعل من أكثر الأسئلة شيوعًا في تصميم تجربة المُستخدم السؤال عن موضع الأزرار، هل تكون على اليمين أم على اليسار؟ الجواب ليس مُطلقًا، فالأمر يعتمد على موقع "الحوافّ" المرئيّة الّتي صنعتها. محور التّفاعل هو الحافّة التّخيليّة الّتي تتبعها عينك بصورة طبيعيّة، والعناصر الأقرب إلى محور التّفاعل تكون أكثر ظهورًا للمُستخدم. الفكرة بسيطة جدًّا: اهتمام الإنسان محدود، ولا يمكنه التّركيز إلا على شيء واحد في لحظة واحدة، فلو ركّز على جزء من المحتوى، ستكون الأجزاء الأخرى غير ظاهرة عمليًّا.إن لم تصدّقني، فشاهد هذا. اعثر على الحواف ستستخدم مبادئ التّصميم المرئيّ الّتي تعلّمناها في كل تصميماتك، فإذا توقّفت قليلًا ونظرت إلى تخطيط الصّفحة، ستجد أنّك خلقت "خطوطًا" أو "حوافّ" أو "قطعًا" في الصّفحة. قد تتشكّل هذه الحوافّ من محاذاة النّصوص أو الصّور أو تجميع العناصر في صفّ. كلّ حافّة هي محور تفاعل، ستتبع العين هذا المحور حتى ينقطع أو ينتهي. تركيز المُستخدم يكون مُنصبًّا على محور التّفاعل دومًا، وعندما يصرف اهتمامه عنه، فإنّه ينتقل إلى محور آخر. إن أردت أن ينقر الزُوار على شيء ما، فضعه على محور التّفاعل أو قربه، والعكس بالعكس. ترجمة -وبتصرّف- للدّروس Page Framework و The Fold, Images, & Headlines و The Axis of Interaction من سلسلة Daily UX Crash Course لصاحبها Joel Marsh. اقرأ أيضًا النسخة العربية الكاملة لكتاب مدخل إلى تجربة المستخدم (User Experience - UX) 1.0.0 عشر مبادئ رئيسية لتصميم تجربة مستخدم على الهواتف الذكية التصميم للهواتف: تصميم الإجراءات التفاعلية مهام مصممي تجربة المستخدم المبادئ الخمسة الأساسية في قابلية الاستخدام (Usability)

من السهل أن ننجرف وراء فكرة أنّ المستخدم سيقرأ كلّ حرف نكتبه في واجهتنا، وسيُشاهد كل بكسل، لكنّ الحقيقة عكس ذلك، فالمستخدم يمسح الصّفحة بعينيه سريعًا، ثمّ يتوقّف عند جزء ما يلفت انتباهه. سنتعلّم اليوم عن أسلوبي مسح الواجهة: النّمط Z والنّمط F، والتّراتب المرئيّ. قد تظنّ أن تجربة استخدام تطبيق أو موقع مختلفة عن تجربة التّطبيقات والمواقع الأخرى، إلّا أنه في الحقيقة يمكن بسهولة توقّع نمط اطّلاع المستخدمين على الواجهة. فهرس سلسلة مدخل إلى تجربة المستخدم: مدخل إلى تجربة المستخدم User Experience فهم ودراسة المستخدمين في مجال تجربة المستخدم دراسة الشريحة المستهدفة في مجال تجربة المستخدم كيفية التصميم للأجهزة المختلفة هندسة المعلومات في تجربة المستخدم تعرف على أنماط التصميم في مجال تجربة المستخدم أشياء لا يمكن اعتبارها رسوما تخطيطية (Wireframes) في مجال تجربة المستخدم تعرف على الرسوم التخطيطية (Wireframes) في مجال تجربة المستخدم مفهوم الثقل المرئي (Visual Weight) والألوان في مجال تجربة المستخدم التكرار ومخالفة الأنماط في مجال تجربة المستخدم المحاذاة والقرب في مجال تجربة المستخدم تعرف على أساليب مسح الواجهة والتراتب المرئي في مجال تجربة المستخدم (هذا الدرس) أساليب الإطلاع في مجال تجربة المستخدم: التصفح، البحث والاكتشاف تصميم هيكل صفحة الويب والعناصر الأساسية في مجال تجربة المستخدم الأزرار، النماذج والدعوات إلى الإجراء في مجال تجربة المستخدم استخدام علم النفس في مجال تجربة المستخدم لتكييف المستخدم وإقناعه كيف تغير الخبرة من تجربة المستخدم؟ تصميم تجربة المستخدم من خلال بيانات وإحصائيات المستخدمين تعرف على أنواع المخططات الإحصائية في مجال تجربة المستخدم اختبارات أ/ب (A/B Test) في مجال تجربة المستخدم النمط Z لنبدأ بأكثر التّصميمات إثارةً للملل: صفحة نصّيّة في جريدة، كلّها قصّة واحدة، دون عناوين أو صور أو فواصل أو اقتباسات بخطّ كبير، لا شيء سوى النّص، من أوّلها إلى آخرها. في تصميم كهذا (أرجو أن لا يكون من صنعك!) سيمسح القارئ الصّفحة بما يُشابه حرف Z (معكوس في العربيّة). نريد من خلال ما تعلّمناه عن أنماط التّصميم المرئيّ أن نُحسّن من هذا التّصميم. لو أضفنا عنوانًا (ثقل مرئيّ)، وعمودًا واحد يتبعه (خطّ وهميّ) ثمّ جزأنا النّص على أقسام أصغر (تكرار) لحصلنا على ما يُشبه النّمط F الشّهير. النمط F تُظهر الصّورة أعلاه نتائج تتبّع العين، وهي تقنيّة تُسجّل موضع نظر المُستخدم، وكلّ ما أطال المُستخدم نظره في موضع ما، بدا هذا الموضع أكثر "حرارة" في الخريطة الحراريّة أعلاه. التّخطيطات المُشابهة للصّورة أعلاه تعطي نتائج مُشابهة للخريطة الحراريّة السّابقة. اكتسب مؤسّسو مجموعة Nielsen Norman بعض الشّهرة من خلال النّمط F، وعلى الرّغم أنّهم لم يأتوا بثورة مُشابهة منذ زمن، فإنّهم ما يزالون ينشرون مقالات كثيرة تستحقّ القراءة. هكذا يعمل النّمط F: ابدأ في الزّاوية العلويّة اليُسرى (لقارئي الإنكليزية، أو العلويّة اليُمنى لقارئي العربيّة)، كما في النّمط Z. اقرأ أو امسح العنوان أو السّطر الأوّل من النّصّ. امسح بنظرك القسم الأيسر (أو الأيمن بالعربيّة) مُتجّها للأسفل من العمود حتّى تجد شيئًا مثيرًا للاهتمام. اقرأ ما أثار اهتمامك بتأنٍّ. تابع المسح بنظرك نحو الأسفل. بتكرار هذه الخطوات مرارًا ستبدو الخريطة الحراريّة وكأنّها حرف F أو E (معكوسين للعربيّة)، ومن هنا جاءت التّسمية. ما المهم في ذلك؟ لاحظ كيف تستحوذ بعض أجزاء الصّفحة على اهتمام كبيرة بصورة طبيعيّة دون أجزاء أخرى قد يتجاهلها المُستخدم معظم الوقت، وهذا ما يُسمّى المناطق القويّة والضّعيفة في التّصميم. فزرّ يقع في أيمن وأعلى الصّفحة سيتلقّى نقرات أكبر من زرّ يقع في يسارها وأعلاها، والّذي سيتلقّى نقرات أكثر بدوره من زرّ يقع في يمينها وأسفلها، وأمّا أقلّها نقرًا فستكون الأزرار الموضوعة في أماكن عشوائيّة في منتصف الصّفحة، ما لم نفعل شيئًا يُحسّن من وضعها. اعلم أيضًا أنّ كل "قطعة" من المحتوى يمكن أن تُنشئ نمط F مستقلّ عن بقيّة القطع، فقد تحوي الصّفحة على أكثر من نمط F، وهذا موضوع متقدّم خارج عن حديثنا اليوم. التراتب المرئي (Visual Hierarchy) عندما تستخدم الخطوط للإشارة إلى أهمّية نصّ ما، وبعض الألوان لتمييز الأزرار، وتُضفي ثقلًا مرئيًّا على الأجزاء المُهمّة، فهذا يخلق تراتبًا مرئيًّا، أي تصميمًا يمكن للنّاس مسحه بسهولة، إذا تنتقل العين سريعًا من جزء مهمّ إلى جزء مهمّ آخر وهكذا... يعتقد بعض المصمّمين أن التّراتب المرئيّ أمرٌ جيّد لكونه يُعطي مظهرًا أفضل للتّصميم، وهذا صحيح، ولكنّه أيضًا يُعطي شعورًا مُريحًا لأنّه يسهلُ مسحه بالعين. هل تريد مشاهدة نتائج أكثر لمتابعة العين؟ ألقِ نظرة على صفحة متابعة العين الّتي أنشأتها على Pinterest سنتابع الحديث عن مواضيع متعلّقة بمتابعة العين في الدّرس القادم، ومن ذلك كيف يستخدم النّاس التّصميم بأساليب مختلفة، بين التّصفّح والبحث والاكتشاف. ترجمة بتصرّف للدّرس Z-Pattern, F-Pattern, and Visual Hierarchy من سلسلة Daily UX Crash Course لصاحبها Joel Marsh. اقرأ أيضًا النسخة العربية الكاملة لكتاب مدخل إلى تجربة المستخدم (User Experience - UX) 1.0.0 المبادئ الخمسة الأساسية في قابلية الاستخدام (Usability) كيف تقوم تجربة المستخدم (UX) في خمس دقائق كيف تنشئ منزلِقًا Slider مناسبا للواجهة الرسومية عند التصميم للجوال

سنشرح اليوم خامس مبادئ التّصميم المرئي وآخرها، والمتعلّقَ بكيفيّة تنظيم عناصر التّصميم ومنحها معنى، دون إضافة عناصر جديدة. الفكرة بسيطة لكنّها تؤثّر في كلّ ما تراه من حولك يوميًّا. سنودّع اليوم بطّاتنا المطاطيّة الّتي رافقتنا في دروسنا السّابقة، ولكنّ ليس قبل أن تشرح لنا اثنين من أهمّ مبادئ التّصميم المرئيّ. فهرس سلسلة مدخل إلى تجربة المستخدم: مدخل إلى تجربة المستخدم User Experience فهم ودراسة المستخدمين في مجال تجربة المستخدم دراسة الشريحة المستهدفة في مجال تجربة المستخدم كيفية التصميم للأجهزة المختلفة هندسة المعلومات في تجربة المستخدم تعرف على أنماط التصميم في مجال تجربة المستخدم أشياء لا يمكن اعتبارها رسوما تخطيطية (Wireframes) في مجال تجربة المستخدم تعرف على الرسوم التخطيطية (Wireframes) في مجال تجربة المستخدم مفهوم الثقل المرئي (Visual Weight) والألوان في مجال تجربة المستخدم التكرار ومخالفة الأنماط في مجال تجربة المستخدم المحاذاة والقرب في مجال تجربة المستخدم (هذا الدرس) تعرف على أساليب مسح الواجهة والتراتب المرئي في مجال تجربة المستخدم أساليب الإطلاع في مجال تجربة المستخدم: التصفح، البحث والاكتشاف تصميم هيكل صفحة الويب والعناصر الأساسية في مجال تجربة المستخدم الأزرار، النماذج والدعوات إلى الإجراء في مجال تجربة المستخدم استخدام علم النفس في مجال تجربة المستخدم لتكييف المستخدم وإقناعه كيف تغير الخبرة من تجربة المستخدم؟ تصميم تجربة المستخدم من خلال بيانات وإحصائيات المستخدمين تعرف على أنواع المخططات الإحصائية في مجال تجربة المستخدم اختبارات أ/ب (A/B Test) في مجال تجربة المستخدم المحاذاة (Alignment) تبدو البطّات القريبة مرتبطة ببعضها. نرى في الصّورة السابقة مجموعة من 6 بطّات جميلة، ونرى كذلك الكثير من العلاقات فيما بينها، وذلك بسبب كيفيّة مُحاذاتها: نرى صفّين نرى البطّتين في أقصى اليمين وأقصى اليسار على أنّهما "منفصلتان" تبدو البطّتان في الوسط أكثرها "انتظامًا" تبدو كلّ البطّات متّجهة باتّجاه واحد إن كنت ترى حركةً، فإن البطّة في أقصى اليسار تبدو متأخّرة عن رفيقاتها إن كنت ترى حركةً، فإن البطّة في أقصى اليمين تبدو وكأنّها تقود رفيقاتها جميع البطّات متطابقة، والاختلاف في إدراكنا يعود إلى أسلوب مُحاذاتها. يمكن مُحاذاة الأزرار المتشابهة الوظيفة، كما يمكن مُحاذاة مستويات مُختلفة من المستوى، أو تنظيم المعلومات في شبكة من الصّفوف والأعمدة لإيصال معنىً مُعقّد. القرب (Proximity) كلّما كانت البطّات أقرب إلى بعضها، بدت أكثر ارتباطًا. قرب الشيء أو بُعده عن شيء آخر يعطي انطباعًا عن مدى ارتباط هذين الشيئين. في الصّورة الثّانية نُشاهد 6 بطّات متماثلة ولكنّها لم تُحاذَ أفُقيًّا أو شاقوليًّا، ولكنّنا نُدرك وجود مجموعتين، إذ تبدو البطّات في كلّ مجموعة مرتبطة معًا كفريق أو عائلة، ولا شيء يُسبّب هذا الإحساس سوى قربها. في تصميماتك، اجعل العناصر المرتبطة فيما بينها أقرب بعضها من بعض، وأبعدها عن العناصر غير المرتبطة. مثلًا: عنوان وشرح مُختصر وزرّ (كدعوة لشراء أو تنزيل تطبيق)، هذه العناصر يجب أن تكون مُتقارَبة بحيث ينظر لها المستخدم على أنّها مجموعة، وهذا يُعفي المُستخدم من عناء قراءة كامل النّص لكي يدرك ارتباطه بالزّرّ. سنتعرّف في الدّروس القادمة على أنواع أنماط التّصميم والتّراتب المرئي (Visual Hierarchy). ترجمة بتصرّف للدّرس Alignment & Proximity من سلسلة Daily UX Crash Course لصاحبها Joel Marsh. اقرأ أيضًا النسخة العربية الكاملة من كتاب مدخل إلى تجربة المستخدم (User Experience - UX) 1.0.0 أنواع وطرق محاذاة النماذج (Forms) كيف تنشئ منزلِقًا Slider مناسبًا للواجهة الرسومية عند التصميم للجوال عشرة أمور أساسية يجب أخذها في الحسبان لدى تصميم النوافذ المنبثقة أهمية الفراغات البيضاء في تصميم الويب

سنتابع في هذا الدّرس الحديث عن مبادئ التّصميم المرئيّ، وسيكون موضوعنا عن الأنماط والتّكرار، ومتى يجب الخروج عن النّمطيّة. فهرس سلسلة مدخل إلى تجربة المستخدم: مدخل إلى تجربة المستخدم User Experience فهم ودراسة المستخدمين في مجال تجربة المستخدم دراسة الشريحة المستهدفة في مجال تجربة المستخدم كيفية التصميم للأجهزة المختلفة هندسة المعلومات في تجربة المستخدم تعرف على أنماط التصميم في مجال تجربة المستخدم أشياء لا يمكن اعتبارها رسوما تخطيطية (Wireframes) في مجال تجربة المستخدم تعرف على الرسوم التخطيطية (Wireframes) في مجال تجربة المستخدم مفهوم الثقل المرئي (Visual Weight) والألوان في مجال تجربة المستخدم التكرار ومخالفة الأنماط في مجال تجربة المستخدم (هذا الدرس) المحاذاة والقرب في مجال تجربة المستخدم تعرف على أساليب مسح الواجهة والتراتب المرئي في مجال تجربة المستخدم أساليب الإطلاع في مجال تجربة المستخدم: التصفح، البحث والاكتشاف تصميم هيكل صفحة الويب والعناصر الأساسية في مجال تجربة المستخدم الأزرار، النماذج والدعوات إلى الإجراء في مجال تجربة المستخدم استخدام علم النفس في مجال تجربة المستخدم لتكييف المستخدم وإقناعه كيف تغير الخبرة من تجربة المستخدم؟ تصميم تجربة المستخدم من خلال بيانات وإحصائيات المستخدمين تعرف على أنواع المخططات الإحصائية في مجال تجربة المستخدم اختبارات أ/ب (A/B Test) في مجال تجربة المستخدم تخلق هذه البطّات نمطًا، والنّمط يُغيّر إدراك النّاظر. يميل النّاظر إلى التّركيز في موضع مخالفة النّمط. يتعامل الدّماغ مع الأنماط والسّلاسل بمهارة فائقة، إذ يلاحظ بسرعة تكرّر شيء ما في الطّبيعة، ويميل إلى التّفكير بصورة مختلفة عن هذه الأشياء المُتكرّرة. تُظهر الصّورة الأولى أعلاه خمس بطّات متماثلة في صفّ واحد، إلّا أنّنا لا نرى خمس بطّات منفردة، بل صفًّا من البطّ، نعاملها على أنّها مجموعة أو سلسلة، وعادة نراها من اليمين إلى اليسار بحسب اتّجاه قراءتنا. لو كان صفّ البطّ هذا قائمة في موقع، لعاملناه بطريقة مماثلة، لذا توقّع أن ينقر النّاس على العناصر في يمين القائمة أكثر من تلك في يسارها. الخروج عن النمط تُظهر الصّورة الثّانية البّطات الخمس ذاتها، ولكنّ واحدة منها قررت الخروج وحدها، وهذا غيّر تمامًا من إدراكنا. نرى الآن صفّا من أربع بطّات، وواحدة منفردة، تظهر بارزة، ويصعب تجاهلها، مع أنّ البطّات جميعها مُتماثلة. لو كانت هذه البطّات قائمة، لكان الخيار الأوسط هو الأكثر نقرًا، لأنّ عيوننا تحدّق فيه، وستكون النّقرات على بداية القائمة (اليمين) أقلّ ممّا سبق، وإن بقيت أكثر ممّا في يسارها. فهم هذه الفكرة أمرٌ عظيم الأثر. قد تبدو الفكرة بسيطة وواضحة، ولكنّ تطبيقها على التّصميم يمكن أن يجعل المُستخدمين يُركّزون على الأزرار والخيارات المُهمّة. ولكن توخّ الحذر فقد يؤدّي الخروج عن النّمط إلى صرف نظر المُستخدم عمّا يهمّه، وعليك قبل الخروج عن النّمط أن تخلق هذا النّمط! اجمع مبادئ التصميم المرئي معا لخلق نمط أو سلسلة، ساوِ الثّقل المرئيّ واللّون، وعندها ستتجّه عينا المُستخدم من البداية إلى النّهاية. للخروج عن النمط، اختر عنصرًا ما تريد إبرازه كزرّ التّسجيل في الموقع، واجعل لونه أو حجمه أو شكله غير مُتوقّع، ومخالفًا لبقيّة النّمط، وعندها ستأتيك النّقرات! الخطوط والحواف الوهمية (Line Tension and Edge Tension) تعلّمنا إذن أن تكرار الأشياء يخلق نمطًا، إلّا أنّه يمكن أن يوحي بوجود "شكل" ما، ويؤثّر بدوره على اتّجاه عيني المُستخدم، وهذا ما نُسمّيه بالخطوط والحوافّ الوهميّة. أنت ترى صفّا من البطّ فيه فراغ. لم لا ترى 8 بطّات فقط؟ هل ترى 12 بطّة، أم مُستطيلًا من البطّ؟ هذه هي الحوافّ الوهميّة. (لم تملّ من رؤية البطّ بعد... صحيح؟) تنضوي هذه الفكرة تحت مُسمّى الشّدّ المرئي (Visual Tension) مفهوم يبدو بسيطًا جدًّا، ولكنّه عظيم التأثير، فالدّماغ البشريّ يُبالغ في التّعرّف على الأنماط لدرجة أن يرى أنماطًا غير موجودة! ويمكنك كمصمّم الاستفادة من ذلك. الخطوط الوهمية (Line Tension) تُظهر الصّورة الأولى في الفقرة السّابقة 8 بطّات في صفّ، ولكنّنا لا نرى 8 بطّات مُنفردة، بل خطًّا، وهذا من الشّدّ المرئيّ الّذي يعني إدراك وجود خطّ أو مسار غير موجود. ستتبع عيوننا هذا المسار لترى أين ينتهي، وهذا مفيدٌ للمصمّم. إن خرجنا عن هذا المسار (كأن نُنشئ فجوة)، فإنّه (كالخروج عن أيّ نمط) يجذب النّظر نحو الفجوة. الحواف الوهمية (Edge Tension) افترضنا حتّى الآن وجود خطّ واحد، لكن ماذا إن جمعنا عدّة خطوط؟ ستكون النّتيجة "شكلًا". في الصّورة الثّانية نلاحظ كيف رُتّبت البطّات بحيث تبدو وكأنّها تخلق زوايا في مستطيل، يمكن أن نعتبرها 12 بطّة، أو 4 مجموعات كلّ منها مكوّن من 3 بطّات، ولكنّ دماغك يميل إلى تفسيرها على أنّها مستطيل، وهذا ما يفعله. يمكن الآن وضع أشياء ضمن هذا المستطيل (مزيد من البط؟!) أو مساحات بين هذه الزّوايا، وكما في الخطوط الوهميّة، يجذب الفراغ النّظر. من جهة تخطيط الواجهات، قد يكون هذا الأسلوب مناسبًا للتركيز على العناصر الصّغيرة، كأسماء الحقول، أو يمكن إنشاء مسارات وهميّة تقود إلى الزّر المطلوب نقره، وهو اسلوب مُستخدم في الإعلانات القديمة. كما أنّه يمكن لهذا الأسلوب أن يزيد من بساطة الواجهة أو انسجامها لأنّ المسار أو المُستطيل ليس سوى مفهوم ذهني، ولكنّ النّظر إليه على أنّه 12 بطّة يعطي انطباعًا بالتّعقيد. اجمع مبادئ التصميم المرئي معا خلقنا فجوة في صفّ البطّ لجذب الانتباه، إلّا أنّه يمكن ملء الفراغ بعنصر ملوّن لإنشاء مسار مثل إنشاء تدرّج لونيّ على مجموعة عناصر في قائمة، أو يمكن إضافة ثقل مرئيّ إلى مجموعة من العناصر بُمعاملتها على أنّها شكل واحد بدل أجزاء منفصلة، وهي طريقة ممتازة للفت النّظر دون إضافة عناصر أخرى إلى الواجهة. ترجمة بتصرّف للدّرسين Repetition & Pattern-Breaking و Line Tension & Edge Tension من سلسلة Daily UX Crash Course لصاحبها Joel Marsh. اقرأ أيضًا النسخة العربية الكاملة من كتاب مدخل إلى تجربة المستخدم (User Experience - UX) 1.0.0 الإدخال المزدوج لحقول النماذج من منظور تجربة المستخدم كيف تعيد تصميم موقع إلكتروني قائم بالشكل الصحيح أنواع وطرق محاذاة النماذج (Forms) عشرة أمور أساسية يجب أخذها في الحسبان لدى تصميم النوافذ المنبثقة المبادئ الخمسة الأساسية في قابلية الاستخدام (Usability)

يتحدّث هذا الدّرس عن اثنين من مبادئ التّصميم المرئيّ التّي تساعدك في توجيه انتباه المُستخدم، فبعض أجزاء التّصميم أكثر أهمّية من غيرها، ولكنّها قد لا تكون أوّل ما يلحظه المُستخدمون، وعلينا أن نُعين المُستخدم ليُلاحظها. فهرس سلسلة مدخل إلى تجربة المستخدم: مدخل إلى تجربة المستخدم User Experience فهم ودراسة المستخدمين في مجال تجربة المستخدم دراسة الشريحة المستهدفة في مجال تجربة المستخدم كيفية التصميم للأجهزة المختلفة هندسة المعلومات في تجربة المستخدم تعرف على أنماط التصميم في مجال تجربة المستخدم أشياء لا يمكن اعتبارها رسوما تخطيطية (Wireframes) في مجال تجربة المستخدم تعرف على الرسوم التخطيطية (Wireframes) في مجال تجربة المستخدم مفهوم الثقل المرئي (Visual Weight) والألوان في مجال تجربة المستخدم (هذا الدرس) التكرار ومخالفة الأنماط في مجال تجربة المستخدم المحاذاة والقرب في مجال تجربة المستخدم تعرف على أساليب مسح الواجهة والتراتب المرئي في مجال تجربة المستخدم أساليب الإطلاع في مجال تجربة المستخدم: التصفح، البحث والاكتشاف تصميم هيكل صفحة الويب والعناصر الأساسية في مجال تجربة المستخدم الأزرار، النماذج والدعوات إلى الإجراء في مجال تجربة المستخدم استخدام علم النفس في مجال تجربة المستخدم لتكييف المستخدم وإقناعه كيف تغير الخبرة من تجربة المستخدم؟ تصميم تجربة المستخدم من خلال بيانات وإحصائيات المستخدمين تعرف على أنواع المخططات الإحصائية في مجال تجربة المستخدم اختبارات أ/ب (A/B Test) في مجال تجربة المستخدم فكرة "الثّقل المرئيّ" (Visual Weight) بديهيّة نسبيًّا، فبعض العناصر تبدو "أثقل" من غيرها في تخطيط الواجهة، فتجذب الانتباه بصورة أسهل، وهذه الفكرة مهمّة لك كمصمّم لتجربة المُستخدم. وظيفتنا هي أن نُساعد المُستخدم على مُلاحظة الأشياء المُهمّة، وألّا نُشغله عن هدفه في الوقت ذاته. بإضافة ثقل مرئي لبعض عناصر التّصميم، يمكنك زيادة احتمال أن يراها المُستخدم، وبالتّالي تغيير ما سيقوم به بعد ذلك. تذكّر: الثقل المرئيّ مفهوم نسبيّ، وكلّ مبادئ التّصميم المرئيّ تقوم على مقارنة عنصر في التصميم بما حوله من عناصر. ولكي لا نطيل الحديث، إليكم نجم هذه السّلسلة من الدّروس: البطّة المطّاطيّة الأصيلة! التباين تجذب البطّة في المنتصف النّظر أكثر ممّا حولها، فالتّباين يؤثّر في الثّقل المرئيّ. هو الفرق بين العناصر الداكنة والعناصر الفاتحة، وكلما زاد الفرق بين عنصرين زاد التّباين بينهما. ما نريده في تجربة المُستخدم هو زيادة تباين العناصر المُهمّة، كالبطّة السّوداء في الصّورة أعلاه، فمعظم محتوى الصّورة فاتح اللّون، وهذا يؤدّي إلى زيادة مُلاحظة البطّة السّوداء، ولو كانت الصّورة سوداء في معظمها، لبدت البطّات البيضاء أكثر ثقلًا. لو كانت هذه البطّات أزرارًا في واجهة، لنقر معظم المُستخدمين الزّر الدّاكن. العمق والحجم يميل البشر إلى الانتباه إلى العناصر القريبة منهم في العالم المادّيّ أكثر من تلك البعيدة عنهم. وبالمثل فإنّنا نميل إلى فهم العناصر الأكبر حجمًا في العالم الرّقميّ على أنّها "أقرب" إلينا، كالبطّة الوسطى في الصّورة أعلاه، والعناصر الأصغر حجمًا على أنّها أبعد عنّا (كالبطّة المُشوّشة أعلاه). لو كانت هذه البطّات متماثلة الحجم، لنظرنا إليها غالبًا من اليمين إلى اليسار (كما نقرأ). يؤدّي استخدام تأثير التّشويش (blur) والظّلال إلى زيادة واقعيّة مفهوم العمق، والحجم يعطي هذا التأثير حتى لو كان التّصميم يتبع الأسلوب المُسطّح (flat design). كقاعدة عامّة، اجعل العناصر الأكثر أهمّية ذات حجم أكبر من تلك قليلة الأهميّة، وهذا يؤدّي إلى إنشاء تراتب مرئيّ ضمن الصّفحة يُسهّل فحصها بالعين، ويُساعدك على اختيار ما يُلاحظه المُستخدم أوّلًا. من هنا نُدرك خطأ فكرة "جعل الشّعار أكبر"، لأنّنا لا نريد للمستخدمين أن يُطيلوا النّظر في شعارنا بدل أن يشتروا شيئًا ما من الموقع! اللون لدينا في الحياة الواقعية نور الشمس، والأضواء الصّناعيّة، والحرارة والبرودة، والثياب، والأسماء التّجارية وكثير من العوامل المشابهة الّتي تؤثّر في إدراكنا للون، ونحن كمصمّمي تجربة المُستخدم علينا أن نفهم الألوان، وإن لم يكن من المطلوب التعمّق في تفاصيلها. أي هذه الألوان يبدو باردًا؟ وأيها يبدو وكأنّه تحذير؟ للألوان معنى. أي من هذه البطّات تبدو وكأنّها أقرب؟ يمكن للألوان أن "تتقدّم" أو "تتراجع". يمكن لنا أن نتعلّم بعض الأمور من البطّات في الصّورتين أعلاه. عادةً ما ننجز الرّسوم التّخطيطيّة (wireframes) بالأسود والأبيض، وهذا أمر حسن، لأنّه يسمح لنا بالتّركيز على الوظيفة، أمّا المظهر فهو مسؤوليّة مصمّمي الواجهة. إلّا أن الألوان في بعض الأحيان تكون ذات وظيفة، كألوان إشارات المرور، أو كأن يكون لون "المصّاصة" مطابقًا لطعمها، فهذا مهمّ! معنى الألوان في الصّورة الأولى ضمن الفقرة السّابقة، نرى ثلاث بطّات: زرقاء وصفراء وحمراء، وهي بطّات جميلة، ويمكن أن نُلاحظ مُباشرة أن لكلّ بطّة صبغة، ولكلّ من هذه الصّبغات "معنى" ما. لو كانت البطّات أزرارًا، فقد تكون: "تأكيد" و "إلغاء الأمر" و "حذف"، ولو كانت مؤشّرًا لامتلاء الخزّان، لكانت "مليء" و "نصف مليء" و"فارغ"، ولو كانت مؤشّرًا في فرن لكانت "بار" و "دافئ" و "حار". لعلّك أدركت الفكرة: البطّات متماثلة، لكنّ اللّون غيّر المعنى. إن لم تكن بحاجة للإشارة إلى الاختلاف في الوظيفة، فدع مصمّم الواجهة يختر الألوان، وإلّا فاجعل الألوان جزءًا من رسومك التّخطيطيّة. التراجع والتقدم يمكن للألوان كذلك أن تكون "صاخبة" أو "هادئة"، ففي الصّورة الثّانية نُشاهد بطّة حمراء واثنتين زرقاوين، تبدو الحمراء أقرب قليلًا، ولكنّها ليست كذلك. الجأ إلى هذه الحيلة في أزرار الشّراء حيث تبدو وكأنّها "تقفز" من الشّاشة، فالمستخدم يميل إلى نقر الألوان الأقرب. وبالعكس، قد ترغب أحيانًا بأن تُبقي بعض العناصر ظاهرة دون أن تُشتّت انتباه المستخدم، كالبطّتين الزّرقاوين، فهي تبدو "متراجعة"، وهذا الأسلوب مناسب لقائمة تبقى دومًا ظاهرة على الشّاشة، فلو كانت "صاخبة" لصرفت انتباه المُستخدم عن عناصر أهمّ. أبق رسومك بسيطة استخدم الألوان في الرّسوم التّخطيطيّة لبيان الوظيفة فقط، فلا داعي للمبالغة في استعمالها أو الحرص على تجميلها لعرضها أمام الزّبون، فقد يدخل معك في نقاش لا طائل من وراءه لاختيار ألوان أخرى. اجمع مبادئ التصميم المرئي معا يمكن استخدام الألوان مع ما تعلّمناه عن الثّقل المرئيّ، إذ يسهل ملاحظة العناصر الكبيرة، وأمّا العناصر الكبيرة حمراء اللّون فيستحيل تجاهلها! اجعل رسائل الخطأ والتّحذيرات حمراء وعالية التّباين، وأمّا إن كانت رسالة تأكيد لنجاح العمليّة، فيكفي أن تكون صغيرة الحجم بلون أخضر مُتراجعٍ. ترجمة بتصرّف للدّرسين Visual Weight, Contrast & Depth و Colour من سلسلة Daily UX Crash Course لصاحبها Joel Marsh. اقرأ أيضًا النسخة العربية الكاملة من كتاب مدخل إلى تجربة المستخدم (User Experience - UX) 1.0.0 دليل المبتدئين إلى التصميم التفاعلي Interaction Design تطور العمل في إتاحة الألوان كيف تختار اللون المثالي لعلامتك التجارية عشرة أمور أساسية يجب أخذها في الحسبان لدى تصميم النوافذ المنبثقة أهمية الفراغات البيضاء في تصميم الويب

تتبادر إلى أذهان معظم النّاس عندما يسمعون عبارة "تجربة المستخدم" تلك المُخطّطات المكوّنة من مستطيلات وخطوط، والكثير منهم يظنّون -مُخطئين- أنّ هذه رسم المُخطّطات (الّتي نسمّيها wireframes) هي كلّ ما في تجربة المُستخدم. فهرس سلسلة مدخل إلى تجربة المستخدم: مدخل إلى تجربة المستخدم User Experience فهم ودراسة المستخدمين في مجال تجربة المستخدم دراسة الشريحة المستهدفة في مجال تجربة المستخدم كيفية التصميم للأجهزة المختلفة هندسة المعلومات في تجربة المستخدم تعرف على أنماط التصميم في مجال تجربة المستخدم أشياء لا يمكن اعتبارها رسوما تخطيطية (Wireframes) في مجال تجربة المستخدم تعرف على الرسوم التخطيطية (Wireframes) في مجال تجربة المستخدم (هذا الدرس) مفهوم الثقل المرئي (Visual Weight) والألوان في مجال تجربة المستخدم التكرار ومخالفة الأنماط في مجال تجربة المستخدم المحاذاة والقرب في مجال تجربة المستخدم تعرف على أساليب مسح الواجهة والتراتب المرئي في مجال تجربة المستخدم أساليب الإطلاع في مجال تجربة المستخدم: التصفح، البحث والاكتشاف تصميم هيكل صفحة الويب والعناصر الأساسية في مجال تجربة المستخدم الأزرار، النماذج والدعوات إلى الإجراء في مجال تجربة المستخدم استخدام علم النفس في مجال تجربة المستخدم لتكييف المستخدم وإقناعه كيف تغير الخبرة من تجربة المستخدم؟ تصميم تجربة المستخدم من خلال بيانات وإحصائيات المستخدمين تعرف على أنواع المخططات الإحصائية في مجال تجربة المستخدم اختبارات أ/ب (A/B Test) في مجال تجربة المستخدم ما هي الرسوم التخطيطية؟ إن كنت قد تابعت الدّروس الماضية من هذه السلسلة، فلعلّك تفهم الآن أنّ تجربة المُستخدم كجبل الجليد من حيث أنّ الجزء الظاهر منها ليس إلا جزءًا صغيرًا من المشكلة. قبل أن نبدأ الشّرح، أنصحك بالاطّلاع على مقالة أشياء لا يمكن اعتبارها رسوما تخطيطية لتصحّح بعض المفاهيم الخاطئة الّتي قد تعلّمتها بمفردك أو ضمن شركتك. الفكرة العامة الرسوم التّخطيطية هي مُستندات تقنيّة، كالّذي في الصّورة أعلاه (ولكنّها ليست دومًا حسن المنظر كهذا!)، وهي مكوّنة من خطوط ومستطيلات وأسماء، وربّما بعض الألوان. كثيرًا ما تُقارن الرّسوم التّخطيطيّة بالمُخطّطات الهندسيّة (blueprints) لأنّهما متقاربان في الهدف. فالمُخطّط الهندسيّ يُملي على البنّائين كيفيّة إنجاز خطّة المُهندس، وليس لون الجدران أو شكل الأثاث المُفضّل، وينبغي عليهم التّقيّد بما فيها بصورة جدّيّة، فهي ليست مُجرّد "اقتراح" أو "فكرة عامّة" أو "تصوّر سريع للمشروع". أمّا الرسوم السريعة الّتي تُنجز على الألواح أو خلال جلسات العصف الذّهنيّ فهي لا تُسمّى رسومًا تخطيطيّة لأنّها فقط تضع أساسًا لإنجاز الرّسوم المطلوبة فيما بعد، وهي مع ذلك لا تزال قيّمة. قد لا يستغرق الرّسم التّخطيطيّ أكثر من ساعة، لكنّ التّخطيط له قد يطول أسابيع أو شهورًا، ومن المهمّ أن تشرح ذلك لزبائنك وزملائك في العمل. إن كان مُصمّم الواجهات أو مُطوّرها لا يستطيع استخدام رسمك التّخطيطيّ بعد، فهو إذًا ليس رسمًا تخطيطيَّا، بل تصوّرا مبدئيًّا له. قد لا يكون درسنا طويلاً، ولكنّني سأتوقّف هنا، لأنّ الدروس القادمة ستشرح كيفيّة تحسين الرّسوم التّخطيطيّة بحيث تؤدّي إلى تصميم يعمل بصورة جيّدة، وليس فقط ذا مظهر جيّد. ترجمة بتصرّف للدرس ?What is a Wireframe من سلسلة Daily UX Crash Course لصاحبها Joel Marsh. اقرأ أيضًا: النسخة العربية الكاملة من كتاب مدخل إلى تجربة المستخدم (User Experience - UX) 1.0.0 كيف تختار اللون المثالي لعلامتك التجارية دليل المبتدئين إلى التصميم التفاعلي Interaction Design كيف تصمم دعوة إلى إجراء CTA لتحويل زبائن متجرك الإلكتروني

الرّسوم التّخطيطيّة (Wireframes) هي مستندات تقنيّة مفصّلة مليئة بالمستطيلات الفارغة والتّسميات ("ضع اسم المستخدم هنا" أو "صورة")، وهي بصراحة مملّة، لكنّها ضروريّة، فهي كالمخطّطات الهندسيّة للأبنية الّتي يضعها المهندسون. فالرّسم التّخطيطيّ إذًا هو بالفعل مستند تقنيّ يصف خطّة عمل، ويشرح التّعليمات الّتي يجب على "البنائين" اتّباعها، وهي تسمح لنا بالتأكّد من أنّ كل عناصر التّصميم في موضعها وأنّنا لم ننسى أيًّا منها. لكنّ موضوعنا اليوم هو بيان بعض الأشياء الّتي لا تعتبر رسومًا تخطيطيّة. فيما يلي قائمة ببعض الاستخدامات الخاطئة للرّسوم التّخطيطيّة، وهي من الخطايا الّتي لا تغتفر! فهرس سلسلة مدخل إلى تجربة المستخدم: مدخل إلى تجربة المستخدم User Experience فهم ودراسة المستخدمين في مجال تجربة المستخدم دراسة الشريحة المستهدفة في مجال تجربة المستخدم كيفية التصميم للأجهزة المختلفة هندسة المعلومات في تجربة المستخدم تعرف على أنماط التصميم في مجال تجربة المستخدم أشياء لا يمكن اعتبارها رسوما تخطيطية (Wireframes) في مجال تجربة المستخدم (هذا الدرس) تعرف على الرسوم التخطيطية (Wireframes) في مجال تجربة المستخدم مفهوم الثقل المرئي (Visual Weight) والألوان في مجال تجربة المستخدم التكرار ومخالفة الأنماط في مجال تجربة المستخدم المحاذاة والقرب في مجال تجربة المستخدم تعرف على أساليب مسح الواجهة والتراتب المرئي في مجال تجربة المستخدم أساليب الإطلاع في مجال تجربة المستخدم: التصفح، البحث والاكتشاف تصميم هيكل صفحة الويب والعناصر الأساسية في مجال تجربة المستخدم الأزرار، النماذج والدعوات إلى الإجراء في مجال تجربة المستخدم استخدام علم النفس في مجال تجربة المستخدم لتكييف المستخدم وإقناعه كيف تغير الخبرة من تجربة المستخدم؟ تصميم تجربة المستخدم من خلال بيانات وإحصائيات المستخدمين تعرف على أنواع المخططات الإحصائية في مجال تجربة المستخدم اختبارات أ/ب (A/B Test) في مجال تجربة المستخدم 1. الرسوم التخطيطية ليست "تصورات سريعة" يعامل البعض الرّسوم التّخطيطيّة على أنّها رسمٌ سريع يعطي فكرة عامّة عن التّصميم (sketch)، وهذا خاطئ تمامًا، فهي لا تتضمّن كيف سيبدو الموقع أو التّطبيق أساسًا، بل تشرح كيف سيعمل، ومع أنّه هذه الرّسوم السّريعة مهمّة، إلّا أنّها ليست كالرّسوم التّخطيطيّة. اشرح الأفكار الأوّليّة بالكلمات والصّور، لا بالرّسوم التّخطيطيّة، اعرض مسار الاستخدام بالرموز والرّسوم اليدويّة، فهي أسرع وأفضل، ويسهل على الزّبون فهمها. 2. إنجاز الرسوم التخطيطية يستغرق وقتا فمع أنّها تبدو بسيطة المظهر، إلّا أنّ تحتاج الكثير من التّفكير، وكلّ جزء منها يسبقه تخطيط، ويوضع بعناية في موضعه وصفحته، وكلّ رابط يحتاج وجهة، وكلّ صفحة تحتاج رابطًا يصل إليها (في صفحة أخرى)، وكلّ زرّ يجب أن يكون في موضعه حيث يحتاجه المستخدم، وأن لا يوضع في موضع لا يحتاجه؛ فالرّسوم التّخطيطيّة تُنجز بـ 90% تفكير و10% رسم. تأكّد من أنّ الجميع يفهمون الحاجة للتّفكير! 3. الرسوم التخطيطية لا تعرض في مراحل كلّ ما يصنعه الإنسان يمرّ بمراحل حتّى يصل إلى النّضج، إلّا الرّسوم التّخطيطيّة، فهي إمّا أن تكون جاهزة أو لا تكون، فإن لم تكن جاهزة فذلك لأنّ مشكلة ما لم تُحلّ، أو لأنّها غير مُنظّمة، أو لأنّها صعبة الاستخدام، أو ناقصة. إن لم يكن بالإمكان أخذ هذه الرّسوم والبدء بالبناء، فهي غير مُنتهية، لا تخشَ أن تقول ذلك للزّبون أو المُدير، فاتّخاذ قرارات على رسوم نصف جاهزة سيكون كابوسًا، وهذا من تجربتي. 4. يجب أن تؤخذ الرسوم التخطيطية على محمل الجد شاهدت في عملي بعض المُصمّمين ينقلون رسمًا تخطيطيًّا على الورق من قسم في الموقع إلى قسم آخر لأنّه رأوا أن ذلك أفضل، وشاهدت كذلك رسومًا على 70 صفحة لشبكة اجتماعيّة ليس فيها صفحة الملفّ الشّخصيّ (أنجزتها واحدة من أكبر شركات الإعلانات في العالم!)، وشاهدت كذلك محتوى يُفترض أنّ يُنشئه المُستخدم ليس له مكان في الرّسوم التّخطيطيّة، وشاهدت زبونًا يمحو زرّ التّسجيل في الرّسم لأنّه يبدو قبيحًا! وشاهدت موقعًا صُمّم وأنجز دون قائمة رئيسيّة على يدي مُصمّمين من شركة كُبرى (لست أمزح!). قد تبدو بعض هذه الأمثلة سخيفة، لكنّها جميعًا تُمثّل خطأ قد ينتهي بدمار مُنتجك أو خدمتك. ضع وقتًا كافيًا للرّسوم التّخطيطّيّة، وخصوصًا في المشاريع الكبيرة، صف واشرح كلّ عنصر في كلّ صفحة، بحيث لا يحتاج المُطوّر أن يسأل عن وظيفة هذا الزّر أو ذاك. 5. ليس عليك أن تجعل الرسوم التخطيطية "جميلة" ليس عليك أن تلوّنها وتحرص على كل صغيرة وكبيرة في مظهرها، وإن فعلت ذلك فإنّك لا تحترم ما تُنجزه، لأنّ تحاول أن تُمرّر هذه الرّسوم أمام مديرك أو زبونك بتركيزك على مظهرها بدل تفاصيلها التّقنيّة. ترجمة بتصرّف للدرس What isn't a wireframe?‎ من سلسلة Daily UX Crash Course لصاحبها Joel Marsh. اقرأ أيضًا النسخة العربية الكاملة من كتاب مدخل إلى تجربة المستخدم (User Experience - UX) 1.0.0 النماذج وواجهات المستخدم المنبسطة Flat UI أنواع وطرق محاذاة النماذج (Forms) عشرة أمور أساسية يجب أخذها في الحسبان لدى تصميم النوافذ المنبثقة

عندما يواجه المُصمّمون مشكلةً مُشتركة (مثل القوائم في تطبيقات الهواتف) ويحلّها أحدهم بأسلوب أنيق (كالقائمة المخفيّة في فيسبوك على الهاتف) ثمّ يتبنّى هذا الحلّ كثيرٌ من المُصمّمين، فإنّ هذا الأسلوب يُصبح نمطًا يألفه المُستخدمون ويُساعدهم في فهم التّطبيق بصورة أسرع. نُسمّي هذه الحلول الشّائعة الاستخدام أنماط التّصميم. فهرس سلسلة مدخل إلى تجربة المستخدم: مدخل إلى تجربة المستخدم User Experience فهم ودراسة المستخدمين في مجال تجربة المستخدم دراسة الشريحة المستهدفة في مجال تجربة المستخدم كيفية التصميم للأجهزة المختلفة هندسة المعلومات في تجربة المستخدم تعرف على أنماط التصميم في مجال تجربة المستخدم (هذا الدرس) أشياء لا يمكن اعتبارها رسوما تخطيطية (Wireframes) في مجال تجربة المستخدم تعرف على الرسوم التخطيطية (Wireframes) في مجال تجربة المستخدم مفهوم الثقل المرئي (Visual Weight) والألوان في مجال تجربة المستخدم التكرار ومخالفة الأنماط في مجال تجربة المستخدم المحاذاة والقرب في مجال تجربة المستخدم تعرف على أساليب مسح الواجهة والتراتب المرئي في مجال تجربة المستخدم أساليب الإطلاع في مجال تجربة المستخدم: التصفح، البحث والاكتشاف تصميم هيكل صفحة الويب والعناصر الأساسية في مجال تجربة المستخدم الأزرار، النماذج والدعوات إلى الإجراء في مجال تجربة المستخدم استخدام علم النفس في مجال تجربة المستخدم لتكييف المستخدم وإقناعه كيف تغير الخبرة من تجربة المستخدم؟ تصميم تجربة المستخدم من خلال بيانات وإحصائيات المستخدمين تعرف على أنواع المخططات الإحصائية في مجال تجربة المستخدم اختبارات أ/ب (A/B Test) في مجال تجربة المستخدم لكنّ شيوع تصميم مُعيّن لا يعني بالضّرورة أنّه حلّ مناسب للمشكلة، وليكون نمط التّصميم جيّدًا، يجب أن يكون شائع الاستخدام وقابلًا للاستخدام في الوقت نفسه. تشيع بعض الأنماط بين المصمّمين الكُسالى لأنّها تسمح لهم بتجنّب عناء التّفكير في حلّ مناسب للمشكلة. ومن ذلك قائمة الهامبورغر الشّهيرة الّتي يستعملها فيسبوك، والّتي تمثّل قائمة مخفيّة من الأوامر تُستعمل في عديد من المواقع على الهواتف الذّكيّة، والّتي أخذت تظهر في مواقع ويب مُصمّمة للاستخدام على شاشات كبيرة لا مُبرّر لإخفاء العناصر فيها. شاع هذا النّمط لأنّه يوفّر على المُصمّم عناء إنشاء قائمة جميلة، وليس بالضّرورة لأنّه الحلّ الأفضل. في كثير من الحالات، لا يستخدم زوّار الموقع هذه القوائم لأنّهم لا يلحظونها، فإمّا أن يُغادروا الموقع أو يتخبّطوا بحثًا عن الأوامر. هذا حلّ سيئّ. وكسول. إيّاك أن تستعمله. لا يمكنني حصر قائمة بأنماط التّصميم لأنّها كثيرة ومُتغيّرة طوال الوقت بما يناسب تطوّر الأجهزة والتّقنيّات، ولكن إليك بعض الرّوابط لتطّلع عليها: GoodUI: قائمة ممتازة من الأفكار البسيطة الموضّحة بالرّسوم، والّتي يمكنك استخدامها أو تجربتها على الأقل عند تصميم مشروعك. PatternTap: مكتبة تجمع أمثلة يُشاركها أعضاء الموقع عن مختلف مكوّنات مواقع الويب. ملاحظة: بعض هذه الأمثلة جيّد، وبعضها سيئّ، ولكنّ الاطّلاع عليها يُعطيك فكرة عمّا هو شائع وما هو نادر الاستخدام. The Anatomy of a Perfect Landing Page: مقالة قديمة بعض الشّيء لكنّها لا تزال صالحة، تشرح كيفيّة تصميم صفحة عامّة للموقع تُعرض للزّوار القادمين من محرّكات البحث (أي أوّل ما يراه الزّائر). إن أعجبتك، فقد تُعجبك هذه أيضًا: Unbounce blog. Mobile Patterns: يُشبه PatternTap، وهي قائمة من تصاميم بعضها جيّد وبعضها سيّئ، لكنّها تعطيك فكرة عمّا هو شائع في تصاميم الهواتف الذّكيّة. Timoa on Pinterest: مجموعة منظّمة من عناصر الواجهات مُصنّفة حسب الميّزات. في الدّرس القادم سنطّلع على المكوّن الأكثر أهمّيّة في تصميم تجربة المُستخدم، ألا وهو هيكلة المعلومات. ترجمة بتصرّف للدّرس Design Patterns من سلسلة Daily UX Crash Course لصاحبها Joel Marsh. اقرأ أيضًا النسخة العربية الكاملة لكتاب مدخل إلى تجربة المستخدم (User Experience - UX) 1.0.0 تعرف على الرسوم التخطيطية (Wireframes) في مجال تجربة المستخدم كيف تطور تجربة تسجيل دخول المستخدم أنواع وطرق محاذاة النماذج (Forms) أفضل خمس طرق اختبار للمستخدم

هذا ختام سلسلة تجربة المُستخدم، ولكنّه ليس إلا بداية طريقك في هذا العالم، فإن كنت رافقتنا منذ البداية، فهذا يعني أنّ لديك أدوات كثيرة عليك استخدامها، وقبل أن تبدأ عملك المهنيّ، ينبغي تعلّم شيء واحد أخير: اختبارات أ/ب. فهرس سلسلة مدخل إلى تجربة المستخدم: مدخل إلى تجربة المستخدم User Experience فهم ودراسة المستخدمين في مجال تجربة المستخدم دراسة الشريحة المستهدفة في مجال تجربة المستخدم كيفية التصميم للأجهزة المختلفة هندسة المعلومات في تجربة المستخدم تعرف على أنماط التصميم في مجال تجربة المستخدم أشياء لا يمكن اعتبارها رسوما تخطيطية (Wireframes) في مجال تجربة المستخدم تعرف على الرسوم التخطيطية (Wireframes) في مجال تجربة المستخدم مفهوم الثقل المرئي (Visual Weight) والألوان في مجال تجربة المستخدم التكرار ومخالفة الأنماط في مجال تجربة المستخدم المحاذاة والقرب في مجال تجربة المستخدم تعرف على أساليب مسح الواجهة والتراتب المرئي في مجال تجربة المستخدم أساليب الإطلاع في مجال تجربة المستخدم: التصفح، البحث والاكتشاف تصميم هيكل صفحة الويب والعناصر الأساسية في مجال تجربة المستخدم الأزرار، النماذج والدعوات إلى الإجراء في مجال تجربة المستخدم استخدام علم النفس في مجال تجربة المستخدم لتكييف المستخدم وإقناعه كيف تغير الخبرة من تجربة المستخدم؟ تصميم تجربة المستخدم من خلال بيانات وإحصائيات المستخدمين تعرف على أنواع المخططات الإحصائية في مجال تجربة المستخدم اختبارات أ/ب (A/B Test) في مجال تجربة المستخدم (هذا الدرس) لنفترض مثلًا أنّك تريد تصميم صفحة لبيع الأحذية، وتريد بالطّبع بيع أكبر عدد ممكن، لكن ما الّذي يؤدّي إلى شراء المزيد من الأحذية؟ هل هو فيديو عن الأحذية؟ أم تفاصيل الشّحن الكاملة قبل النّقر على زرّ الشّراء؟ أم شعار الشّركة المُنتجة للحذاء؟ أم ضمان استعادة الأموال؟ كيف ستختار؟ إن كان أول ما تبادر لذهنك هو "أن نسأل المُستخدمين" فهذه الفكرة ليست سيّئة، ولكنّ هذه الخيارات شخصيّة غير موضوعيّة، ولهذا فإنّ لكلٍّ رأيه. إذًا كيف نُحسن الاختيار من بين خيارات شخصيّة؟ الجواب: صمّمها كلّها، ثمّ أطلق هذه الخيارات في الوقت نفسه في صيغة اختبار أ/ب. ما المقصود باختبارات أ/ب ( A/B Test)؟ اختبار أ/ب هو طريقة لسؤال آلاف أو ملايين الزّوّار الحقيقة أيّ الخيارات هو الأفضل، حيث تُصمّم كلّ الخيارات الّتي تريد مقارنتها، وتُصدرها جميعًا. يضمن الاختبار أن لا يرى زائر فريد واحد سوى واحدًا من هذه الخيارات، وبعد أن يرى عددٌ كافٍ من الزّوّار كلّ الخيارات، يمكنك معرفة الخيار الّذي تلقّى نقرات أكثر. يقيس الاختبار أيضًا "مستوى الثّقة" بالأرقام، لتعرف متى توقف الاختبار (احذر من إيقافه قبل أوانه!) يمكنك تطبيق هذا الاختبار على إصدارين أو عشرين، ولكن تذكّر أنّ زيادة عدد الخيارات تتطلّب زيادة عدد الزّوّار، وبالتّالي وقتًا أطول. بعض التفاصيل اختبارات أ/ب مجّانيّة عادةً، ولا تُكلّف سوى وقت تصميم وإنشاء الصّفحات، ولكنّ النتيجة تكون قيّمة للغاية على المدى البعيد. اختبارات أ/ب مختلفة عن تغيير تصميم الصّفحة بالكامل ثمّ مقارنته بالتّصميم القديم، والطّريقة الوحيدة لمقارنة تصميمين هي إطلاقهما معًا لشريحتين متساويتين تقريبًا من الزّوّار. يكون اختبار أ/ب A/B Test أكثر دقّة إذا غيّرت عنصرًا واحدًا في كلّ مرّة، فلو كانت لديك صفحتان متماثلتان تمامًا إلا في لون الرّوابط، فالاختبار دقيق، ولكن إن كان في الصّفحتين قائمتان مختلفتان فلا يمكن معرفة أيّ التّغييرين يصنع الفرق، لون الرّوابط أم القوائم؟ لا فائدة من مقارنة صفحتين مُختلفتين تمامًا كالرئيسيّة وصفحة الدّفع، فهذا لا يُعتبر اختبار أ/ب صحيحًا. انتهينا! إن كنت تابعتنا على مدى السّلسلة كلّها فهنيئًا لك! فقد أصبح تفكيرك في التّصميم أكثر سعةً، وما عليك الآن إلّا أن تعزّز ما تعلّمته بالتّدريب، فتجربة المُستخدم في طلب متزايدٍ في قطاع المُنتجات التّقنيّة. ترجمة بتصرّف للدّرس A/B Tests من سلسلة Daily UX Crash Course لصاحبها Joel Marsh. اقرأ أيضًا النسخة العربية الكاملة لكتاب مدخل إلى تجربة المستخدم (User Experience - UX) 1.0.0 بيان تجربة المستخدم: مبادئ التصميم، دراسة المستخدم، التصميم المرتكز حول المستخدم، تصميم وتخطيط تجربة المستخدم تجربة المستخدم للهواتف المحمولة وتوقعات المستخدمين كيف تصمم أسلوب عمل مرن في مجال تجربة المستخدم كيف تقوم تجربة المستخدم (UX) في خمس دقائق

ليس عليك أن تكون خبيرًا في الإحصاء لكي تخرج بشيء مُفيد من مُخطّط إحصائيّ، يظهر سلوك البشر على المُخطّطات بأشكال يمكن توقّعها، وهذا سيكون حديثنا اليوم. فهرس سلسلة مدخل إلى تجربة المستخدم: مدخل إلى تجربة المستخدم User Experience فهم ودراسة المستخدمين في مجال تجربة المستخدم دراسة الشريحة المستهدفة في مجال تجربة المستخدم كيفية التصميم للأجهزة المختلفة هندسة المعلومات في تجربة المستخدم تعرف على أنماط التصميم في مجال تجربة المستخدم أشياء لا يمكن اعتبارها رسوما تخطيطية (Wireframes) في مجال تجربة المستخدم تعرف على الرسوم التخطيطية (Wireframes) في مجال تجربة المستخدم مفهوم الثقل المرئي (Visual Weight) والألوان في مجال تجربة المستخدم التكرار ومخالفة الأنماط في مجال تجربة المستخدم المحاذاة والقرب في مجال تجربة المستخدم تعرف على أساليب مسح الواجهة والتراتب المرئي في مجال تجربة المستخدم أساليب الإطلاع في مجال تجربة المستخدم: التصفح، البحث والاكتشاف تصميم هيكل صفحة الويب والعناصر الأساسية في مجال تجربة المستخدم الأزرار، النماذج والدعوات إلى الإجراء في مجال تجربة المستخدم استخدام علم النفس في مجال تجربة المستخدم لتكييف المستخدم وإقناعه كيف تغير الخبرة من تجربة المستخدم؟ تصميم تجربة المستخدم من خلال بيانات وإحصائيات المستخدمين تعرف على أنواع المخططات الإحصائية في مجال تجربة المستخدم (هذا الدرس) اختبارات أ/ب (A/B Test) في مجال تجربة المستخدم هناك نمطان للمخطّطات الإحصائيّة يتكرّران كثيرًا في السّلوك الإنسانيّ، وهما: الزّيارات والسّلوك المُهيكَل. ملاحظة: استخدمت هنا مخطّطات من نوع الأعمدة (bar graph) لأنّها ببساطة أسهل رسمًا، قد يستخدم برنامج الإحصاءات الّذي تستخدمه أنواعًا أخرى، لا تقلق فهي جميعًا ذات مبدأ واحد، ولهذا نحن نتعلّم أشكال المُخطّطات وليس أنواعها. مخططات الحركة (Traffic Graphs) تُظهر هذه المخطّطات عدد النّاس الّذين قاموا بفعل مُحدّد على فترة زمنيّة مُحدّدة، كعدد الزّوّار في اليوم، يُسمّى هذا الحركة أو "traffic". ستكون الحركة دومًا بين صعودٍ وهبوط متقاربين، لأنّ أشياء عشوائيّة تحدث كلّ يوم في العالم، حتّى وإن لم يتغيّر موقعك، ولهذا لا يمكن اعتبار أن سبب تُغيّر بسيط في الحركة هو ميزة جديدة بعينها أو تغيير التّصميم. إليك أشكال المُخطّطات! الميل العام للحركة لو كان هناك تغيّر بطيء مُنتظم، ستُشاهده خلال الوقت. يسهلُ النّظر إلى مُخطّط يُظهر هبوطًا أو صعودًا منتظمًا واستنتاج استمرار ذلك، ما لم يطرأ تغيير ما على موقعك. أحداث فردية عشوائية/طارئة لا يُغيّر النّاس سلوكهم فجأة دون مُحرِّض. هل قمت بحملة إعلانية خلال عطلة الأسبوع؟ أو هل هي مشكلة تقنيّة في إحدى صفحات الموقع؟ عندما تُشاهد "طفرة" في المُخطّط (أو هبوطًا مُفاجئًا) فحاول تحديد سببه، ولا يغرينّك الاعتقاد بأنّ موقعك في تحسّن، بل لا بدّ من سبب لهذه الطّفرة، أحيانًا يكون حسنًا وأحيانًا سيّئًا. الحركة المتوقعة هل ترى نمطًا مُتكرّرًا مرّة بعد مرّة؟ لنقل إن موقعك شائع بين الموظّفين في مكاتبهم، ستشاهد ارتفاعًا في الحركة خلال أيام الدّوام، إمّا إن كان زوّارك من الأطفال الّذين يقضون يومهم في المدارس، فترتفع الحركة في عطلة الأسبوع، هذا أمر طبيعيّ وشائع. ولكن هذا النّمط المُتكرّر سُيعاني من نموّ بطيء، لو كان النّمط مُتكرّرًا ولكن الأرقام في هبوط، فهذا يعني أنّ مُستخدميك يغادرون من الملل، افعل شيئًا ما! مخططات السلوك المهيكل النّوع الآخر المُهم للمُخطّطات يُظهر ما يفعله النّاس، ولا يهتمّ بوقت أو تاريخ الفعل. يمكن التأثير على هذه المخطّطات بشدّة بتغيير هندسة المعلومات الّتي يقوم عليها الموقع. ملاحظة: أتيت بكلمة "السّلوك المُهيكل" من نفسي لهذا الدّرس، ولو قلتها أمام غيرك لبدوت ذكيًّا، ولكن لن يفهم أحد مقصدك! المخطط الأسي (Exponential graph) يُظهر هذا المُخطّط انحيازًا كبيرًا نحو نوع مُعيّن من السّلوكيّات أو القرارات. يبيّن المُخطّط أعلاه أنّ النّاس سينقرون مثلًا أولّ عنصر أكثر من الثّاني، والثّاني أكثر من الثّالث... إلخ. وحيثما وجد ترتيب مرئي (كما في القوائم) أو تسلسل طبيعيّ، سيبدو المُخطّط مثل هذا. من الأمثلة على هذا المُخطّط قائمة "أكثر الصّفحات زيارة"، لأنّه لا يمكن الوصول للصّفحة 2 دون المرور بالصّفحة 1، وكذلك المُخطّط التّفصيليّ لمتوسّط مدّة الجلسة أو عدد الصّفحات في الجلسة، لأن البقاء أكثر من 10 ثوانٍ في الموقع أمر بالغُ الصّعوبة! المخطط الأسي ذو الترتيب غير المتوقع (Exponential graph with unexpected order) هذا المُخطّط مثيرٌ للاهتمام، وهو ينتج عادة عن ترتيب البيانات في مواضعها الصّحيحة ما عدا بعض المُكوّنات، وهو يشير إلى أنّ أوّلويّات المُستخدمين مُختلفة عمّا تعتقده، فهم ينقرون العنصر الثّاني أكثر من الأوّل، هؤلاء المجانين! حاول تغيير تصميمك أو هندسة معلومات بما يطابق ما تُشير إليه هذه البيانات، لا تحاول تغيير المُستخدمين، فهم يُبغضون التّغيير. مخطط أسي مع مستخدمين متقدمين يبدو هذا المُخطّط مشابها للمُخطّط الأسّي التّقليديّ، ولكنّ فيه صعودًا بسيطًا في موضع مُحدّد، وهذا يشير إلى وجود مجموعة من المُستخدمين المُخلصين يُمضون وقتًا طويلًا في الموقع، ويفعلون أشياء أكثر من المُستخدمين العاديّين. اعثر على ما يشجّعهم، وأكثر منه! مخطط أسي مع مشكلة في معدل التحويل (Conversion) يجب أن يكون المُخطّط انسيابيًّا، فلو وُجدت أيّ فروقات كبيرة بين عمودين لأشار ذلك إلى وجود مُشكلات، كأن تكون الصّفحة الرئيسيّة مُعقّدة فلا يصل الزّوار إلى ما بعدها. الجأ إلى اختبارات أ/ب في حالات كهذه إن لم تكن المُشكلة واضحة، وهي موضوع فصلنا القادم! ترجمة بتصرّف للدّرس Graph Shapes من سلسلة Daily UX Crash Course لصاحبها Joel Marsh. اقرأ أيضًا النسخة العربية الكاملة لكتاب مدخل إلى تجربة المستخدم (User Experience - UX) 1.0.0 كيف تقوم تجربة المستخدم (UX) في خمس دقائق الربط العميق للمحتوى: ما هو، وما المعايير التي تحدد جودة الروابط العميقة كيف تطوّر تجربة تسجيل دخول المستخدم

الآن وقد تعلّمنا كيف نُجرِي أبحاث المُستخدمين، ونحدّد أهدافنا، ونضع هندسة المعلومات، ونلفت انتباه المُستخدمين، ونضع الرّسوم التّخطيطيّة، ونفهم عقليّة المُستخدم، حان وقت إطلاق الخدمة! وهذا يعني أنّنا سنحتاج إلى إجراء بعض القياسات. فهرس سلسلة مدخل إلى تجربة المستخدم: مدخل إلى تجربة المستخدم User Experience فهم ودراسة المستخدمين في مجال تجربة المستخدم دراسة الشريحة المستهدفة في مجال تجربة المستخدم كيفية التصميم للأجهزة المختلفة هندسة المعلومات في تجربة المستخدم تعرف على أنماط التصميم في مجال تجربة المستخدم أشياء لا يمكن اعتبارها رسوما تخطيطية (Wireframes) في مجال تجربة المستخدم تعرف على الرسوم التخطيطية (Wireframes) في مجال تجربة المستخدم مفهوم الثقل المرئي (Visual Weight) والألوان في مجال تجربة المستخدم التكرار ومخالفة الأنماط في مجال تجربة المستخدم المحاذاة والقرب في مجال تجربة المستخدم تعرف على أساليب مسح الواجهة والتراتب المرئي في مجال تجربة المستخدم أساليب الإطلاع في مجال تجربة المستخدم: التصفح، البحث والاكتشاف تصميم هيكل صفحة الويب والعناصر الأساسية في مجال تجربة المستخدم الأزرار، النماذج والدعوات إلى الإجراء في مجال تجربة المستخدم استخدام علم النفس في مجال تجربة المستخدم لتكييف المستخدم وإقناعه كيف تغير الخبرة من تجربة المستخدم؟ تصميم تجربة المستخدم من خلال بيانات وإحصائيات المستخدمين (هذا الدرس) تعرف على أنواع المخططات الإحصائية في مجال تجربة المستخدم اختبارات أ/ب (A/B Test) في مجال تجربة المستخدم البيانات موضوعية تحدّثنا في الدّروس الأولى من السّلسلة عن أبحاث المُستخدمين. البيانات مختلفة عن الأبحاث، فهي تقيس سلوك المُستخدم، أي ما يفعله، وكم مرّة، وكم دام هذا الفعل، وهكذا... تُجمع البيانات بواسطة حاسوب، فهي حياديّة لا تؤثّر في المُستخدم، وهامش الخطأ فيها صغير لأنّها ذات مقاييس مُعرَّفة بدقّة؛ ويمكن أن نقيس بها سلوك ملايين النّاس دون عناء، ويمكن أن تخبرنا بمتصفّح المُستخدم وبلده. البيانات لا تكذب، فهي علمٌ. لكنّها أيضًا لا تخبر شيئًا عن السياق، لذا كُن حذرًا. للأسف يقع عاتق تفسير هذه البيانات علينا نحن المُصمّمين، وهنا تقع الأخطاء. البيانات قائمة على الناس سيُغريك قول أنّ البيانات "ليست إلّا أرقامًا مُجرَّدة"، وهذا يعني أنّك ستفسرها كما تشاء. تذكّر أنّ هذه الأرقام تُمثّل أفعال أناسٍ حقيقيّن ذوي حياة مُعقّدة. لا تختزل ملايين النّاس في عدد مُفرد وتتوقّع أن تعتمد عليها في كلّ موقف. قد يغريك أيضًا أن تبحث عن أرقام "تُثبت" رأيك، لا تفعل ذلك! ولا تسمح لأحد أن يطلب منك ذلك! كلما زادت البيانات كانت أفضل إن قست نقرات 5 أشخاص، فلن تكون بياناتك تمثيليّة بما يكفي، أمّا إن قست بيانات 5 ملايين زائر، فلا بدّ أنّها تغطّي شرائح كبيرة من الزّوار. كلّما زادت أهمّيّة القرار الّذي تريد بناءه على أساس البيانات، احتجت إلى بيانات أكبر قبل اتّخاذه. طرق جمع بيانات موضوعية تتوفّر طرق كثير لجمع بيانات موضوعيّة: التحليلات (Analytics) توفّرها Google وغيرها بأسعار رخيصة أو مجّانًا، وتسمح بمتابعة ما يفعله المُستخدمون دون كشف هويّتهم. كلّما نقر المُستخدم زرًّا أو انتقل إلى صفحة جديدة، سيظهر لديك ذلك، ويمكنك تصميم قياسات خاصّة بك، ولا حدود لإمكانيّاتها! اختبارات أ/ب صمّم إصدارين من عنصر ما وأطلقهما معًا، ستعلم أيّ الاثنين أفضل، لأنّك تُجرّبهما على أناس حقيقيّن في فترة مناسبة، سيُخبرك البرنامج متى توقف الاختبار، لأنّه زيادة عدد الخاضعين للاختبار بعد حدّ معين أمرٌ غير مُجدٍ. متابعة العين يُجرى هذا الاختبار في مُختبر خاصّ، ولكن لا يستطيع المُستخدم التّحكّم به، لذا يُعتبر موضوعيًّا، وتُستخدم فيه برامج وأدوات خاصّة لقياس موضع نظر المُستخدمين أثناء استخدامهم لتصميم، لتستفيد من ذلك في معرفة سلامة الأساليب الّتي استخدمتها للفت نظرهم. ClickTale هذا مثال عن استخدام الخرائط الحراريّة لمتابعة النّقرات وتمرير الصّفحات والانتقال بينها، ولكنّ هناك أمثلة أخرى. يسمح برنامج ClickTale بجمع بيانات استخدام الواجهة للمُستخدمين الحقيقيّين دون كشف هوّيتهم، وبطريقة مخفيّة، ويسمح لك بمشاهدة مواضع نقراتهم وتحرّك مؤشّر الفأرة ومدى تمرير الصّفحة، وأيّ الصّفحات شاهدوها، وهو غايةٌ في الفائدة. سجلات البحث لا يُدرك كثيرٌ من النّاس أن حقل البحث في موقعك يمكنه أن يحتفظ بكلّ كلمة تُكتب فيها، فلو كان المُستخدمون يبحثون عن شيءٍ ما، فهذا يعني أنّهم لا يجدونه، وعندها تكون سجلّات البحث قيّمة جدًّا لتحسين هندسة معلوماتك وتخطيط الواجهة. التصميم اعتمادا على البيانات المجموعة إن كنت تُخطّط لتحليل استخدام موقعك، فلن يطول الأمر قبل أن تحتاج إلى فهم ما تعنيه إحصاءات Google، وتُجرى دراسة هذه الإحصاءات بأسلوب مُختلف عن خبراء التّسويق. هناك 7 إحصاءات تحتاج لفهمها قبل فعل أيّ شيء، لا أقصد فهم ما تقيسه فقط، بل ما تعنيه أيضًا. لا يمكن أن نقول عن الأرقام أنّها "جيّدة" أو "سيّئة"، فالأمر نسبيّ، ومليون مستخدم لا تعتبر جيّدة إلّا إن كانت أعلى من الشّهر الماضي، لو كنت فيسبوك وكان زوّارك هذا الشّهر مليونًا، فأنت في ورطة. قبل تحليل أي رقم، فكّر بما يجب أن يفعله موقعك، وافهم ما يجب أن تُشير إليه الأرقام عن سلوك المُستخدمين. الجلسات (الزيارات الكلية) والمستخدمون (الزيارات الفريدة) عبارة الزّيارات الكلّيّة تعني مجموع عدد زيارات الموقع (يا للمفاجأة!) أمّا الزّيارات الفريدة (Unique Visits) فهي مختلفة، فلو زرتُ أنا موقعك 50 مرّة، لاحتُسبتُ مُستخدمًا فريدًا واحدًا (unique visitor)، وللدّقّة، فإنّها من النّاحية التّقنيّة تقيس الأجهزة الفريدة وليس النّاس. معنى كلّ منهما: مقارنة هذين الرّقمين سيُقودك إلى استنتاج بعض الحقائق عن الزّيارات: جودة عالية: الكلّيّة أكبر بكثير من الفريدة. كميّة عالية: الكلّيّة مساوية تقريبًا للفريدة، والفريدة أكبر من الشّهر الماضي. كلاهما: الفريدة أعلى من الشّهر الماضي والكلّيّة أعلى بكثير من الفريدة. ليس أيّ منهما: الفريدة أقلّ من الشّهر الماضي والكُلّيّة مساويةً تقريبًا للفريدة. الزّيارات الفريدة تمثيل أكثر صدقًا للزّيارات، ولكنّني أفضّل أن يزور موقعي 1000 شخص كلّ يوم على أن يزوره 10 آلاف شخص مرّةً في الشّهر، ولكن مع ذلك، إن زار شخصٌ واحد موقعي مليون مرّة، فلن يكون هذا مُفيدًا، وربّما يُعاني هذا الشّخص من مشكلة ما! عدد مرات مشاهدة الصفحات (Pageviews) ما تقيسه: تزداد بمقدار 1 في كلّ مرّة يحمّل فيها أيّ زائر أيّ صفحة. ما تعنيه: يمكنك اعتبارها "مؤشِّرًا عامًّا" على الزّيارات، لأنّها تصف المقدار الكليّ للمحتوى المُشاهدة وتتجاهل معظم العوامل الأخرى. لو كان موقعك يعتمد على الإعلانات في أعلى الصّفحات فهذا رقم مهمّ. لو كان موقعك مُعتمدًا على المحتوى، كالأخبار، فقد تكون زيادة هذا الرّقم أكثر أهمّية. معدل عدد الصفحات في كل جلسة (Pages-per-Visit) ما يقيسه: متوسّط عدد الصّفحات الّتي يُشاهدها كلّ زائر، في كلّ زيارة، يمكن اعتبارها عدد "النقرات" في كلّ زيارة (ولكن هذا غير دقيق من النّاحية التّقنيّة). ما يعنيه: إن كان موقعك مُركّزًا على المّهامّ أو التّفاعلات الاجتماعيّة، فقد يكون هذا الرّقم أهمّ من مرّات مشاهدة الصّفحات (pageviews). خلافًا لذلك، إن كنت مُحرَّك البحث Google، فسترغب في تخفيض هذا الرّقم قدر الإمكان، لأنّ نتائج البحث الأكثر جودةً يجب أن تكون في الصّفحة الأولى. متوسط مدة الجلسة (Time-per-Visit) ما يقيسه: مدّة كلّ زيارة المتوسّط، قد تكون مقارنته مع الصّفحات/الجلسة مهمّة جدًا. ما يعنيه: في عالم مثالي، من المُفترض أن يقرأ الزّائر المقال بكامله في الموقع المُعتمد على المُحتوى، وأن يقرأ مقالات كثيرة، وهذا يعني رقمين كبيرين لكلّ من "متوسّط مدّة الجلسة" و"الصّفحات/الجلسة". لو كان الرّقم "الصّفحات/الجلسة" كبيرًا والآخر ("متوسّط مدّة الجلسة") صغيرًا، فقد يعني هذا أنّ الزّوّار يبحثون عن شيء ما ولا يجدون (وهذا سيّئ) أو أنّهم يُنجزون مهمّاتهم بسرعة شديدة (وهذا جيّد)، فالأمر نسبيّ كما ترى. لو كان "متوسّط مدّة الجلسة" كبيرًا والآخر ("متوسط عدد الصّفحات في كل جلسة") صغيرًا، فقد تكون عناصر التّنقّل في الموقع غير فعّالة (وهذا سيّئ)، أو أنّ المقالات طويلة والمُستخدمون مُهتمّون بقراءتها (وهذا جيّد). لو كان الرّقمان مُنخفضين فهذا مؤشّر سيّئ، إلّا إن كان هدف موقعك هو الدّخول والخروج بسرعة، مثل Google. معدل الارتداد (Bounce Rate) ما يقيسه: الزّوّار الّذين يُشاهدون صفحة واحدة ويُغادرون دون أن ينقروا أيّ شيء. ما يعنيه: بشكل عامّ يُعتبر هذا الرّقم رفضًا من الزّوّار لموقعك، ولكن هناك بعض الاستثناءات. تميل المُدوّنات إلى معدّل ارتداد عالٍ لأنّها مُصمّمة لمُشاهدة صفحة واحدة: إمّا مشاهدة صفحة آخر التّدوينات أو زيارة تدوينة مُعيّنة. يمكن أن يتأثر مُعدّل الارتداد بشدّة بِبُنية موقعك ومصدر زياراتك، فحتّى إن بدا الرّقم بسيطًا، فهو مؤشّر مُعقَّد. النسبة المئوية للزيارات الجديدة (New vs. Return Visitors) ما يقيسه: لو أنّ زائرًا (أو جهازًا) زار موقعك من قبل، فإنّه يُعتبر "عائدًا" (returning)، وإلّا فهو جديد. ما يعنيه: يعرف العائدون موقعك أكثر، ولهذا "يرتدّون" أقل ويشاهدون صفحات أكثر، فإن كانوا يعودون فهذا لأنّه ما تقدّمه يُعجبهم، ولهذا يقضون وقتًا أطول عادةً. أمّا الزّوّار الجدد فهم مؤشّر جيّد، لأنّ ذلك يعني أنّ موقعك يصل إلى أناس أكثر. الفكرة الأساسيّة هي نسبة الجُدد إلى العائدين، فلو لم يكن لديك زوّار عائدون فهذا يعني أنّ موقعك جديد، أو سيّئ، ولو لم يكن لديك إلّا زوّار عائدون فهذا يعني أنّ مُستخدميك مُخلصون، ولكنّ الموقع يحتضر. بشكل عامّ، كلّما كان الموقع أكثر "نُضجًا"، سيكون العائدون أكثر (كنسبة مئويّة)، لأنّ العائدين إلى موقعك بصورة مُتكرّرة أفشل من الزّيارات من خلال مُحرّكات البحث والحملات الإعلانيّة. ترجمة بتصرّف للدّرسين What is Data وSummary Statistics من سلسلة Daily UX Crash Course لصاحبها Joel Marsh. اقرأ أيضًا النسخة العربية الكاملة من كتاب مدخل إلى تجربة المستخدم (User Experience - UX) 1.0.0 تجربة المستخدم للهواتف المحمولة وتوقعات المستخدمين تجربتنا في إنشاء أداة تسجل تفاعلات المستخدم 150 خدعة للعمل بذكاء أكثر في مجال تجربة المستخدم UX كيف تصمم أسلوب عمل مرن في مجال تجربة المستخدم

هذا هو الجزء الثاني من درس علم نفس المُستخدمين، وفيه سنُلقي نظرة على الاختلاف بين المُستخدمين الجُدد والخبراء في تعاملهم مع تصميمك. فهرس سلسلة مدخل إلى تجربة المستخدم: مدخل إلى تجربة المستخدم User Experience فهم ودراسة المستخدمين في مجال تجربة المستخدم دراسة الشريحة المستهدفة في مجال تجربة المستخدم كيفية التصميم للأجهزة المختلفة هندسة المعلومات في تجربة المستخدم تعرف على أنماط التصميم في مجال تجربة المستخدم أشياء لا يمكن اعتبارها رسوما تخطيطية (Wireframes) في مجال تجربة المستخدم تعرف على الرسوم التخطيطية (Wireframes) في مجال تجربة المستخدم مفهوم الثقل المرئي (Visual Weight) والألوان في مجال تجربة المستخدم التكرار ومخالفة الأنماط في مجال تجربة المستخدم المحاذاة والقرب في مجال تجربة المستخدم تعرف على أساليب مسح الواجهة والتراتب المرئي في مجال تجربة المستخدم أساليب الإطلاع في مجال تجربة المستخدم: التصفح، البحث والاكتشاف تصميم هيكل صفحة الويب والعناصر الأساسية في مجال تجربة المستخدم الأزرار، النماذج والدعوات إلى الإجراء في مجال تجربة المستخدم استخدام علم النفس في مجال تجربة المستخدم لتكييف المستخدم وإقناعه كيف تغير الخبرة من تجربة المستخدم؟ (هذا الدرس) تصميم تجربة المستخدم من خلال بيانات وإحصائيات المستخدمين تعرف على أنواع المخططات الإحصائية في مجال تجربة المستخدم اختبارات أ/ب (A/B Test) في مجال تجربة المستخدم الخبراء هم الأقلية يستحيل من النّاحية الإحصائيّة أن يكون المُستخدمون الخبراء هم غالبيّة مُستخدميك، مع أنّه قد يحلو لك هذا التّفكير. معظم المُستخدمين القادمين إلى خدمتك، ما لم تكن ذات طابع تقنيّ، سيكونون عاديين، مشغولين بأعمال أخرى، ليسوا ملمّين بالتّفاصيل التّقنيّة مثلك أنت ومثل زملائك في العمل. الحقيقة المُرَّة: إن أردت ملايين المُستخدمين الراضين، فعليك التّصميم بما يراعي هذا النّمط من المُستخدمين، وليس أولئك المُهووسين العباقرة! الإخفاء والإظهار: مفارقة الاختيار ستمرّ عليك مواقف تضطّر فيها إلى اختيار مدى "نظافة" واجهتك. سيختار المُصمّمون عادةً إخفاء كلّ شيء لأنّ ذلك يبدو أجمل، بينما يريد غيرهم إظهار ميزاتهم المُفضّلة كل الوقت (وهذه مختلفة من شخص لآخر)؛ فماذا تختار؟ ستكون الميّزات الظّاهرة أكثر استعمالًا دومًا من تلك المخفيّة، فنحن نتذكّر وجودها كلّما رأيناها. إلّا أنّ "مفارقة الاختيار" تنصّ على أنّه كلّما كثرت الخيارات، قل احتمال اعتماد أحدها، فإذا أغرقت مستخدميك العاديّين بالخيارات، فسيشعرون بالحيرة ويغادرون الموقع. تأكّد من أن المُبتدئين بإمكانهم إيجاد الميّزات الأساسيّة بسهولة، دون الحاجة إلى نقر أيّ شيء في الحالة المثاليّة، ثمّ حاول أن توفّر وصولًا سهلًا لكامل الميّزات تلبيةً لرغبة المُستخدمين المُتقدّمين، حتّى وإن لم تكن ظاهرة طوال الوقت. نصيحة: هل أنت راضٍ عن إخفائك خيارات مُشاركة الشّبكات الاجتماعيّة وراء زرّ مشاركة واحد؟ للأسف هذه الواجهة ليست بسيطة، فلقد عطّلت خيارات المُشاركة لأنّك أوّلًا أضفت خيارات كثيرة، ثمّ أخفيتها. اعرض خيارات أقلّ، واجعلها ظاهرة طوال الوقت، ستشكرني لاحقًا. التعرف مقابل الذاكرة كم أيقونة يمكنك أن تسردها من ذاكرتك الآن؟ كم أيقونة يمكنك أن تتعرّفها إن أعطيتك قائمة بها؟ إن كنت إنسانًا عاديًّا، فستكون الإجابة الثّانية أكبر بكثير من الأولى. إن صمّمت واجهتك بحيث يحتاج النّاس إلى السؤال عن شيء ما (كالبحث مثلًا)، فلن يستخدموا إلا ما يمكنهم تذكّره، وهذا يعني ميّزات أقل فأقلّ مع مرور الوقت. إن كان على مستخدميك التّعامل مع قدر كبير من المعلومات، فقدّم لهم اقتراحات بفئات أو شيئًا مشابهًا يُساعدهم أن يتذكّروا أين يجدون ما يريدون. التعلم بطيء والعادات سريعة يُستخدم المُصطلح "Onboarding" لوصف التّعليمات الّتي نعرضها للمُستخدمين على شكل خطوات عند بداية استخدام الواجهة، وهي تساعد في إيجاد الميّزات الرئيسيّة وتجنّب الحيرة. لكن ما الّذي يحدث إذا استمرّ استخدامهم طيلة عامين؟ تُخلق العادات في أذهان المُستخدمين بسرعة شديدة، ولهذا عليك تصميم "طريقة سريعة" لتأدية المّهام الأساسيّة، والّتي قد تكون غير واضحة، وسينفق المُستخدمون المُتقدّمون بعض وقتهم لتعلّمها مقابل حصولهم على مستوى إنتاجيّة أعلى، اختصارات لوحة المفاتيح والقائمة الّتي تظهر بالنّقر بزرّ الفأرة الأيمن مثالان على ذلك، وحيلة "نقطة متبوعة بـ@" في تويتر مثال آخر. سنتحدّث في الدّرس القادم عن البيانات والإحصاءات واستخداماتها في تصميم تجربة المُستخدم. ترجمة بتصرّف للدّرس User Psychology How Experience Changes Experience من سلسلة Daily UX Crash Course لصاحبها Joel Marsh. اقرأ أيضًا النسخة العربية الكاملة لكتاب مدخل إلى تجربة المستخدم (User Experience - UX) 1.0.0 لماذا ينبغي على المصممين والباحثين أن يتبادلوا الأدوار؟ مهام مصممي تجربة المستخدم 13 إحصائية مدهشة حول تجربة المستخدم UX تصميم تجربة المستخدم ليس ما تعتقده

قد تكون مهارة التصميم لُبّ تجربة المُستخدم، ولكن عليك أيضًا أن تفهم كيف يفكّر النّاس لتكون مصمّمًا ناجحًا، ولهذا سيكون حديثنا اليوم عن علم نفس المُستخدمين. فهرس سلسلة مدخل إلى تجربة المستخدم: مدخل إلى تجربة المستخدم User Experience فهم ودراسة المستخدمين في مجال تجربة المستخدم دراسة الشريحة المستهدفة في مجال تجربة المستخدم كيفية التصميم للأجهزة المختلفة هندسة المعلومات في تجربة المستخدم تعرف على أنماط التصميم في مجال تجربة المستخدم أشياء لا يمكن اعتبارها رسوما تخطيطية (Wireframes) في مجال تجربة المستخدم تعرف على الرسوم التخطيطية (Wireframes) في مجال تجربة المستخدم مفهوم الثقل المرئي (Visual Weight) والألوان في مجال تجربة المستخدم التكرار ومخالفة الأنماط في مجال تجربة المستخدم المحاذاة والقرب في مجال تجربة المستخدم تعرف على أساليب مسح الواجهة والتراتب المرئي في مجال تجربة المستخدم أساليب الإطلاع في مجال تجربة المستخدم: التصفح، البحث والاكتشاف تصميم هيكل صفحة الويب والعناصر الأساسية في مجال تجربة المستخدم الأزرار، النماذج والدعوات إلى الإجراء في مجال تجربة المستخدم استخدام علم النفس في مجال تجربة المستخدم لتكييف المستخدم وإقناعه (هذا الدرس) كيف تغير الخبرة من تجربة المستخدم؟ تصميم تجربة المستخدم من خلال بيانات وإحصائيات المستخدمين تعرف على أنواع المخططات الإحصائية في مجال تجربة المستخدم اختبارات أ/ب (A/B Test) في مجال تجربة المستخدم التكييف (Conditioning) إن كنت سمعت من قبل بتجربة بافلوف، فلا بد أن الفكرة مألوفة لك في سياقها العلميّ. الفكرة تنطبق على الحيوانات وكذلك على البشر. التكييف يعني أنّ الإنسان سيعيد فعل شيء ما ثانيةً عندما يتلقّى مُكافأة، وسيتفاداه عندما يتلقّى عقابًا. قد يبدو هذا واضحًا، لكن 99% من المصمّمين الّذي أعرفهم يتجاهلونه في عملهم، مع أنّه الطّريقة الوحيدة لجعل التّصميم مُسبّبًا للإدمان إن صحّ التعبير. لاحظ أنّنا نتحدّث عن مشاعر المكافأة والعقاب، لا الأشياء المادّيّة. عندما نقول "مكافأة المستخدم"، يتبادر لذهن معظم السّامعين أنّنا نقصد فرصة ربح iPhone أو تذاكر لمشاهدة فيلم أو ما شابه ذلك. نحن نتحدّث عن ملايين المُستخدمين هنا، فهذا غير عمليّ. المكافأة والعقاب الأكثر فاعليّة هما مجّانيّان، لأنّهما ببساطة شعور وليس شيئًا مادّيًّا. تخيّل معي أنّنا أتينا بك على منصّة وأخبرناك أمام خمسين ألفًا من الحاضرين أنّك من أفضل الأصدقاء ، وأنّ العالم أفضل بوجودك. هل سترغب في إعادة ذلك ثانية؟ ربّما. تخيّل الآن أنّنا أتينا بك على منصّة وأخبرنا الجميع أنّك أقلّ البشر خيرًا، بإجماع أصدقائك وعائلتك. هل سترغب في إعادة ذلك ثانية؟ لا، غالبًا! هذه أمثلة بعيدة عن الواقع قليلًا، ولكن لاحظ أنّنا لم نُعطك شيئًا ولم نحرمك شيئًا، بل الأمر تصوّر النّاس عنك فقط، والمشاعر الّتي يولّدها هذا التّصور قد تكون قويّة جدًّا. أنشئ حلقة دافع-نتيجة (Feedback Loop) إذًا كيف نستخدم التّكييف عمليًّا في التّصميم؟ الفكرة هي إنشاء حلقة غير مُنتهية من المشاعر والسلوكيّات، بحيث يصبح يُعطي شعور المكافأة بشكل مُستمرّ، هذا نموذج الحلقة: دافع > فعل > نتيجة > دافع لنقل مثًا أنّك أخذت صورة جميلة لطفلك، الآن لديك دافع لنشرها على فيسبوك بحيث يرى النّاس كم هو جميل طفلك، ولذلك تقوم بالفعل وتنشرها. يجب على فيسبوك تصميم طريقة لدفعك للقيام بهذا الفعل. بعد ذلك تتلقّى النّتيجة من أصدقائك الّذين يبدون إعجابهم بالصّورة ويكتبون تعليقات تُجاملك، بل ربّما تتلقّى رسالة بريد إلكتروني عن الموضوع. يجب على فيسبوك تصميم طريقة لتقديم هذه النّتيجة، والّتي بدورها تخلق دافعًا لنشر صورة أخرى مجدّدًا. هذه "الحلقة" ستستمر حتّى يتوقّف النّاس عن الإعجاب والتّعليق أو "يعاقبوك" بإبداء سخطهم على صورة شيطانك الصّغير هذا (سيناريو تخيليّ!) إذًا إليك الفكرة: إن صمّمت ميزة تمنح النّاس شعورًا إيجابيًّا، فسيعودون مرارًا لتنشيط هذا الشّعور، وإن كانت هذه الميزة تحقّق هدفك التّجاريّ، فقد صنعت مُنتجًا ناجحًا! كن حذرًا بخصوص العقاب: يجب على المُستخدم أن يحاول تفادي العقاب، فصمّم ميّزاتك على هذا النّحو، لا تحاول معاقبة المُستخدمين بإصرار، فهذا كفيل بفقدانهم، الحالة المثالية أن تجعل انقطاعهم عن فعل الأشياء الّتي تمنحهم شعورًا إيجابيًّا يؤدّي إلى انخفاض نقاطهم أو انتباههم أو مستوى الإنتاجيّة الّذي يريدونه. مثلًا: كانت هناك لعبة مزرعة (بدون ذكر أسماء!) فيها تصبح مزرعتك أكبر مع الوقت (مكافأة)، وإن توقّفت فترة طويلة عن اللّعب تبدأ محاصيلك بالجفاف والموت (عقاب)، ولكن يمكن أيضًا أن تدفع لتسريع الإنتاج وشراء أشياء جديدة لمزرعتك (مكافأة أكبر!) لا عجب أنّها من أنجح الألعاب في التّاريخ! احذر من تكيفك أنت! التكييف يطال الجميع، في كلّ مكان، ولكنّه مختلف النّوع من شخص لآخر، ولهذا لديك لونك المُفضّل، وتصميمك المُفضّل، ومأكولاتك المُفضّلة. لا تحسب أن الجميع يحبّون كلّ شيء تحبّه أنت! الإقناع (Persuasion) الإقناع موضوع مُعقّد. كتابي The Composite Persuasion يقع في 270 صفحة، يتحدّث عن كيف تجعل الأشياء مُقنعة، وهو على طوله ليس سوى "دورة مُكثّفة"! يمكن اعتبار هذا الجزء تتمّة لفقرة "الدّعوة إلى الإجراء" في الدّرس السّابق، كونه يعلّمك كيف تُنشئ نصوصًا ومقالات أكثر إقناعًا. إليك فكرتين أساسيّتين: للإقناع 8 مكوّنات عامّة، تكون أكثر فعاليّة عندما تُطبّق بترتيب مُحدّد، لأنّ كلّا منها يعتمد على ما سبقه. دوافع النّاس يمكن حصرها بـ14 دافعًا. سأشرح 4 منها وهي الأكثر شيوعًا في العالم الرقميّ. معادلة الإقناع بعد مقارنة 40 علمًا من أعلام الإقناع، وجدت أنّ أساليبهم تشترك في 8 صفات: قبل التفاعل السّمعة الطّيّبة: لن يفيدك شيء دون الثّقة، وفي الحالة المثالية عليك أن تبني سمعتك في الواقع، والنّقطة الأهم هي أن تتواصل مع جمهورك بأسلوب عالي القيمة، وفي عالم تجربة المُستخدم، ينطبق هذا على كلّ شيء، بدءًا من العلامة التّجاريّة الموثوقة، والصّدق في تسعير المُنتجات، وشهادات الزّبائن. لا تقل أنّ علامتك التّجاريّة مرموقة، بل أثبت ذلك بالأفعال. اعرف جمهورك: في عالم تجربة المُستخدم يعني هذا أن تُجري دراسات المُستخدمين لكي تعلم من تحاول إقناعهم وما اهتماماتهم. أثناء التفاعل كن مُنفتحًا وصريحًا: عليك أن تجذب انتباه المُستخدم مُباشرةً، ثمّ تتابع لتزيل أيّة اعتراضات واضحة قد تكون لديه، في عالم تجربة المُستخدم، قد يفيدك عنوان جميل أو صورة لافتة للنّظر فوق الطّيّة، لو كان السّعر موضع اعتراض، مثلًا، فليكن من المعلومات الأولى الّتي يمكن أن يراها المُستخدم، لا تفترض أنّهم سيتابعون القراءة حتى يصلوا إليه في النّهاية. عزّز شعور الألفة: اجعل المستخدم يألفك، مُستفيدًا بما يشترك فيه النّاس جميعًا، في عالم تجربة المستخدم، استخدم لغةً مألوفة، واعرض للزّائر ما يجمع بينه وبين زبائنك، أو اشرح الشّخص الرّئيسيّ في مقالك بطريقة تجعله قريبًا من المستخدم. ركّز على الهدف: عندما يصبح هدف المُستخدم واضحًا، استبعد أيّة معلومات قد تُشتّته، في عالم تجربة المستخدم قد يُفيدك إزالة القوائم والإعلانات خلال عمليّة الدّفع لكي لا تُشتّت المُستخدم عن الشّراء. أقنع: عندما تكون عمليّة الإقناع مُعقّدة، الجأ إلى دفع المعلومات على دفعات، من أبسطها إلى أعقدها، خطوةً بخطوة. هناك عدّة طرق لتحقيق ذلك، من بينها الانحياز المعرفيّ، والّذي يُساعد على تقديم المعلومات بصورة تجعلها أسهل قبولًا واستيعابًا. أتمّ الصّفقة: لا تقعّد الأمور عند انتهاء العمليّة، يكفي وضع زر "نشرّ" أو "تأكيد الشّراء" أو "المشاركة". بعد التفاعل لخّص الفكرة وأكّدها: لا تُنهِ عمليّة الإقناع بمجر انتهاء التّفاعل، بل اجعل النّاس يُشعرون بتقديرك لهم حتّى تحصل على ما تريد، في عالم تجربة المُستخدم، يمكن اللّجوء إلى إرسال رسالة بريد إلكتروني تذكّر المُستخدم بما يمكن فعله بمنتجه الجديد، أو قائمة بمقالات مُقترحَة، أو كم شخصًا أُعجب بمنشوره. الدوافع العامة هل سمعت بهرم ماسلو للحاجات الإنسانيّة؟ انسَه، فقد نسيه علماء النّفس منذ زمن، بينما ما يزال خبراء التّسويق يدرسونه في الجامعات! هناك 14 أمرًا يحتاجها الإنسان دومًا: تجنّب الموت، وتجنّب الألم، والهواء، والماء، والغذاء، والصّحّة البدنيّة، والنّوم، والجنس، والحب، وحماية الأبناء، والمكانة الاجتماعيّة، والانتساب، والعدالة، وفهم كلّ من هذه الأشياء بصورة أفضل. لكلّ هذه الأمور جمهور، وكلّ منها يُطلق ردود أفعال مختلفة الدّرجة، ولكن على الويب تكون المكانة الاجتماعيّة والانتساب والعدالة والفهم أكثرها فائدة، لأنّها مجرّد أفكار، كما أنّها غير محدودة، وبإمكانك خلقها من الصّفر، مجّانًا. المكانة الاجتماعيّة: هي المكوّن الرئيسيّة في عمليّة تقديم المنتج بشكل لعبة (gamification)، فهي طريقة لقياس مستواك بالنّسبة للآخرين. عندما تُصمّم نظامًا يُقدّم نقاطًا وجوائز رمزيّة وما شابهها، فإنّك تتحكّم بإدراك المُستخدمين لمكانتهم، يمكن أن تكون هذه الأمور أوسمة، أو إعجابات، أو مراحل في لعبة Candy Crush! سيكون لدى المستخدمين دافع أقوى للتفوّق على بعضهم، وإذا استطعت ربط هذه الإنجازات بأهدافك التّجاريّة، فإنك ستجني الأموال دون كلفة، سوى تعزيز هذه المشاعر. الانتساب: إن كنت مُشجّعًا مُخلصًا لفريق رياضيّ أو علامة تجاريّة، فإنّك تشعر بالفخر لكونك جزءًا من مُنظّمة أو مجموعة. هذا هو الانتساب، سبب انضمام النّاس إلى مجموعات فيسبوك، أو لبسهم ثيابًا مُعيّنة، أو إجرائهم اختبارًا لمعرّفة "أيّ شخصيّة من المسلسل الفلانيّ أنت؟!"، فهم مدفوعون للانتماء إلى أشياء مُعيّنة. صمّم ملتقىً يعزّز انتماء النّاس، وشاهد كيف يتجمّع النّاس في مجموعات وفئات. العدالة: هي فكرة أن يتلقّى كلّ مرء ما يستحق، سواء كان ذلك عقابًا أم ثوابًا. صمّم طريقة يتلقّى فيها الانتباه من يستحقّه، أو لعبةً يحارب فيها المُستخدمون الشّر، وستجدهم يفعلون ذلك بالضّبط. الفهم: لدى النّاس دافع لفهم كلّ من الدّوافع السّابقة أكثر (وهم يستحقّون أن يفهموها). إن حاولت أن تغيّر شيئًا أنفق عليه النّاس أوقاتهم في تعلّمه، كتصميم واجهتك، فقد تغضبهم، هل تذكر الصّفحات الغاضبة عندما فعل فيسبوك ذلك؟ هذا ما أقصده! ملاحظة: هل لاحظت أنّ المال ليس من بين الدّوافع المذكورة؟ هذا لأنّه ليس دافعًا بحدّ ذاته، فلو كان كذلك لكنت مُتحمّسًا لجني مال تعلم أنّك لن تنفقه، ولكنّك لست كذلك. نحن نشعر بدافع لكسب المكانة الّتي يصنعها المال، حتّى لو كان ذلك مجرّد نقاط في لعبة لا قيمة لها في العالم المادّيّ. ابحث عن أمثلة من الواقع تدعم هذا الدّوافع. سنتعلّم في الدّرس القادم كيف تُغيّر الخبرة من تجربة المستخدم، بين المُبتدئ والخبير. ترجمة بتصرّف للدّرسين User Psychology Conditioning و User Psychology Persuasion من سلسلة Daily UX Crash Course لصاحبها Joel Marsh. اقرأ أيضًا النسخة العربية الكاملة من كتاب مدخل إلى تجربة المستخدم (User Experience - UX) 1.0.0 الحركة في تصاميم المواقع... الطريقة الذكية! خمس إرشادات لجعل صفحة الخطأ 404 أكثر فعالية مهام مصممي تجربة المستخدم 12 طريقة لتحسين عملية التسجيل على موقعك

لن يطول الأمر قبل أن تحتاج إلى وسيلة لجمع المعلومات من مستخدميك، ولهذا سنبدأ حديثنا اليوم بالنّماذج (Forms). فهرس سلسلة مدخل إلى تجربة المستخدم: مدخل إلى تجربة المستخدم User Experience فهم ودراسة المستخدمين في مجال تجربة المستخدم دراسة الشريحة المستهدفة في مجال تجربة المستخدم كيفية التصميم للأجهزة المختلفة هندسة المعلومات في تجربة المستخدم تعرف على أنماط التصميم في مجال تجربة المستخدم أشياء لا يمكن اعتبارها رسوما تخطيطية (Wireframes) في مجال تجربة المستخدم تعرف على الرسوم التخطيطية (Wireframes) في مجال تجربة المستخدم مفهوم الثقل المرئي (Visual Weight) والألوان في مجال تجربة المستخدم التكرار ومخالفة الأنماط في مجال تجربة المستخدم المحاذاة والقرب في مجال تجربة المستخدم تعرف على أساليب مسح الواجهة والتراتب المرئي في مجال تجربة المستخدم أساليب الإطلاع في مجال تجربة المستخدم: التصفح، البحث والاكتشاف تصميم هيكل صفحة الويب والعناصر الأساسية في مجال تجربة المستخدم الأزرار، النماذج والدعوات إلى الإجراء في مجال تجربة المستخدم (هذا الدرس) استخدام علم النفس في مجال تجربة المستخدم لتكييف المستخدم وإقناعه كيف تغير الخبرة من تجربة المستخدم؟ تصميم تجربة المستخدم من خلال بيانات وإحصائيات المستخدمين تعرف على أنواع المخططات الإحصائية في مجال تجربة المستخدم اختبارات أ/ب (A/B Test) في مجال تجربة المستخدم النماذج سيتطلّب تصميم النّماذج وقتًا طويلًا، معظمه في الاهتمام بقابليّة استخدامها، فعادةً ما تسبّب النّماذج حيرة المُستخدم أو أنّه يُخطئ في استخدامها أو لا يستخدمها نهائيًّا، ومع ذلك تبقى النّماذج من أكثر أجزاء الموقع قيمة. إن لم تكن النّماذج أكثر أجزاء موقعك قيمة، فلم تستخدمها؟ هل نسيت أنّها تسبّب حيرة المُستخدم أو خطأه أو أنّه لا يستخدمها؟ صفحة واحدة طويلة أم عدة صفحات قصيرة؟ من أكثر الأسئلة الّتي يُكرّرها المُصمّمون والمُسوّقون: ما الحدّ الّذي تُعتبر بعده النّماذج طويلة جدًّا؟ كقاعدة عامّة حاول جعل النّماذج أقصر ما يمكن، ولكن لا تتردّد في تقسيمها إلى صفحات إن كان ذلك منطقيًّا، أو إن احتجت إلى حفظ المعلومات في خطوات، إن كنت تتوقّع أن يغادر المُستخدم الموقع أثناء ملء النّموذج. الأهمّ من ذلك أن يبدو الحقل بسيطًا، اجعل الأسئلة المرتبطة متقاربة، استبعد الأسئلة الّتي لا تحتاجها حقًّا، واستخدم بالضّبط عدد الصّفحات الذي تحتاجه (لا أكثر ولا أقل). أنواع الحقول غرض النّموذج هو الحصول على المعلومات من المستخدم، وهناك عدّة طرق لجمع هذه المعلومات، فاستخدم نوع الحقل الّذي يُعطيك أكثر المعلومات فائدة، سواء كان ذلك حقلًا نصيًّا عاديًّا أم علامة مُنزلقة (slider). لنقل أنّك تريد للمستخدم اختيار أنواعه المُفضّلة من الماعز (!)، يصلح هنا استخدام مربّعات الاختيار الواحد (Radio Buttons) أو المُتعدّد (Check Boxes)، فإذا كنت تريد إجابة أكثر اكتمالًا، فاختر الثّانية، وإلّا فاختر الأولى لأنها تُعطي نتيجة أكثر انتقائيّة. مسميات الحقول وتعليمات استخدام النموذج سنبدأ الحديث عن وظيفة المُسمّيات (labels)، فوظيفتها هي شرح ما يجب فعله في كلّ حقل في النّموذج، وعليك أن تجعلها قصيرة وواضحة وسهلة القراءة، وقريبة من الحقل المعنيّ، وهذا كفيل بحلّ 99% من مشاكل الحقول. قد تحتاج أحيانًا إلى إضافة تعليمات عن السؤال إن كان مُعقّدًا أو غير تقليديّ، أضف هنا شرحًا قصيرًا قرب الحقل إن كان بضع كلمات فقط، أو أضفه إلى جانب النّموذج بدلًا من كونه داخله إن كان أطول من ذلك، لكي لا يقطع سير عمليّة ملء الحقل على المُستخدمين الّذين يعرفون ما وظيفة الحقل. أنصحك بقراءة الكتاب Web Form Design لمؤلّفه Luke Wroblewski. التعامل مع أخطاء المستخدم ومنعها كثيرًا ما يُخطئ المُستخدمون في ملء النّماذج، ووظيفتنا منع ذلك ما أمكن، والتّعامل مع ما لا يمكن منعه بمرونة. يمكن منع الخطأ بجعل الحقول "ذكيّة"، فلو كان الحقل مُخصّصًا لرقم الهاتف، فاجعله ذكيًا بحيث يتعامل مع تنسيق رقم الهاتف في البلد المعنيّ (هذا يتطلّب تعاون المُطوّرين). يمكن أيضًا تفادي الأخطاء بإضافة بعض الأمثلة على تنسيق المعلومات المطلوب ضمن الحقل نفسه أو ضمن التّعليمات المُرافقة. عندما ينسى المُستخدم ملء حقل ما أو يخطئ، ينبغي عليك تنبيهه، وذلك بعرض علامة X مثلًا بجواره إن كان خاطئًا أو علامة "صح" إن كان صحيحًا، وهذا ما يُسمّى التّعامل مع الأخطاء في موضعها (inline error handling). تُستخدم هذه التقنيّة أيضًا في حقول كلمات المرور لبيان مدى قوّتها أثناء إدخالها. لا تستخدم هذه التّقنيّة إن لم يكن بإمكانك التّحقق من صحة البيانات، كما في حقل الاسم الكامل. عندما ينقر المُستخدم "التّالي" أو "تمّ"، تحقّق من كامل النّموذج بحثًا عن الأسئلة الّتي نسيها أو أخطأ فيها، اعرض المُشكلة بوضوح شديد وبيّن له سببها. نصيحة: تأكّد من أنّ بإمكان المُستخدم رؤية الخطأ من أسفل النّموذج، فلو كان عليه أن يُمرّر لأعلى ليُلاحظ الخطأ، فلن يفعل! السرعة مقابل الأخطاء هذه النّقطة متقدّمة بعض الشيء، لكنّها مفيدة للغاية. إذا كنت تطرح أسئلة تقليديّة على المُستخدم مثل اسمه وعنوان بريده الإلكترونيّ، فاجعل مُسمّيات الحقول في أعلى ويمين الحقل، فهذا يُسرّع إدخال المعلومات، لأنّه يُبقي كلّ شيء على محور التّفاعل. أمّا إن كانت الأسئلة مُعقّدة أو غير شائعة، فاجعل المُسمّيات على يمين كل حقل في الصّف ذاته، فهذا يجعل المُستخدم يتمهّل قليلًا في إدخال البيانات، ويخفّض احتمال الخطأ. اجعل زرّ "تمّ" على يسار (على يمين، إذا كان النموذج بالعربية) محور التّفاعل . إن كان الحقل يؤدّي إلى حذف شيء ما أو فقد بيانات قد تكون مهمّة، فاجعله على يمينه (أو على يساره، إن كان النّموذج بالعربية)، بحيث يتوقّف النّاس بحثًا عنه بدل نقره بطريقة لا شعورّية. الدعوات إلى الإجراء والتعليمات والمسميات هناك 4 مواضع يمكن أن يتدخّل فيها مُصمّم تجربة المُستخدم ليُبدي رأيه في الجمل المُستخدمة للتّواصل مع المُستخدمين، وأمّا في ما سوى ذلك، فمن الأفضل أن يُترك هذا الشأن لكتُّاب المُحتوى: الدّعوات إلى الإجراء (calls to action) التعليمات (instructions) المُسمّيات (labels) الشّروح الطّويلة الّتي تهدف لإقناع المُستخدم سنشرح في هذا الدّرس النّقاط الثلاث الأولى، أمّا الأخيرة فستكون في درس منفصل. الدعوات إلى الإجراء (Calls-to-Action) ويُقصد بها العناوين والنّصوص الّتي تكون بجانب الأزرار، وتدعو المُستخدم لفعل شيء ما، مثل "نزّل التّطبيق الآن!" أو "احصل على المميّزات المدفوعة مجّانًا!" أو ما شابهها، وقد يُفاجئك مدى التغيير الّذي تُحدثه العبارات المُتقنة الأسلوب في حالات كهذه. المُعادلة العامّة لعبارة ترويج جيّدة: فعل + فائدة + أجل/مكان قريب الفعل: ما تريد من المُستخدم فعله. الفائدة: ما سيحصل عليه المُستخدم (إن لم يفي الفعل بالمعنى) الأجل/المكان القريب: مدى زمنيّ مثل "الآن" أو مكان مثل "هنا"، الكلمة "مجانًا" قد تُعطي إحساسًا بالعجلة إن كان ذلك يُناسبك. التعليمات (Instructions) إن لم يكن واضحًا تمامًا ما يجب على المُستخدم فعله (وحتى وإن كان واضحًا) فقد ترغب بمساعدته، تحدّثنا في فقرات سابقة عن النّماذج وكيفيّة كتابة التّعليمات، فهي أكثر العناصر احتياجًا لها. يجب أن تكون التّعليمات قصيرة ومباشرة وحرفيّة، لا داعي لاستخدام مُصطلحات جزلة، أو كلمات تقنيّة، لا داعي للتّذاكي أو الاستهزاء أو المُزاح. أخبر المستخدم ما عليه فعله بالضّبط بأبسط الكلمات والعبارات، حدّثه وكأنّه طفل ذكيّ، أو كأنّه حديث عهد باللّغة، لا أقصد أن تكون العبارة غبيّة، بل واضحة. مثال عن جملة سيئة: "حلّق بفأرتك فوق الزّر الأصفر فور انتهائك من العمل!" مثال عن جملة سيّئة أيضًا: "كل المُدخلات في هذه المنطقة هي بيانات مطلوبة ويجب أن تُرسل بنجاح لبدء عمليّة إنشاء الحساب." مثال عن جملة غبيّة: "عليك أن تفخر بنفسك! فأنت بارعٌ في ملء النّماذج! حالما تنتهي من ملء هذه النّماذج، فعليك المتابعة إلى الزّر الأصفر أدناه ونقره، كدت تصل أيّها البطل!" مثال عن جملة جيّدة: "أجب على كلّ الأسئلة ثمّ انقر على الزّر الأصفر المُسمّى تمّ في نهاية هذه الصّفحة". المسميات (Labels) قد يكون مُغريًا جدًّا جعل المُسمّيات مُميّزة أو ذكيّة، لكن عليك أن تقاوم هذا الإغراء دومًا. استخدم الشّكل الأكثر شيوعًا وبساطة وسهولة من المُسمّى، لو كان المُسمّى يؤدّي إلى أكثر من نوع من الإجابات، فهو غير واضح. مثال عن مُسمّى سيّئ: "حيث يهفو القلب..." مثال عن مُسمّى أقل سوءًا: "مكان معيشتك" مثال عن مُسمّى أفضل: "العنوان" مثال عن المُسمّى الأفضل: "عنوان المنزل" تنطبق هذه القواعد على الأزرار أيضًا، وهو شيء يتجاهله كثيرٌ من المُصمّمين. إن تجاهلت العناوين والتّعليمات، هل يمكنك فهم وظيفة الأزرار؟ إن لم يكن الحال كذلك، فعليك تحسين المُسمّيات. أمثلة عن مُسمّيات سيّئة للأزرار: "نعم" و"موافق" أمثلة عن مُسمّيات جيّدة للأزرار: "حذف الحساب" و"حفظ التّغييرات" قد يبدو الحديث سهلًا، لكنّ الحياة العملية ستضعك في موقف ستضطّر فيه أن تقول لا للزّبون أو زملاء العمل عندما يطلبون جعل العبارات "أكثر روعة"! أثبت حجّتك باختبارات أ/ب إن اضطرت، ولكن لا تتراجع عن رأيك، فأحيانًا ما يحتاجه المستخدم هو عبارات بسيطة وواضحة، وليست "رائعة ومميّزة". الأزرار الرئيسية والثانوية كقاعدة عامّة ستحتاج نوعين من الأزرار فقط، لأنّ معظم الأفعال تقع في فئتين: أفعال رئيسيّة تخدم هدفك المطلوب أفعال ثانويّة لا تخدم الهدف الأزرار الرئيسية بعض الأفعال المُتاحة للمُستخدم تكون "مُنتجَة"، كالتّسجيل في الموقع أو الشّراء أو إرسال محتوى أو حفظه أو مُشاركته... فهي تُنتج أشياء لم تُوجد من قبل، وهذه نُسمّيها الأفعال الرئيسيّة (primary actions)، وهي ما نريد للمُستخدم فعله أكثر ما يمكن. يجب أن تكون الأزرار الّتي تؤدّي إلى أفعال رئيسيّة ظاهرة بوضوح، ويمكن تحقيق ذلك بتطبيق مبادئ التّصميم المرئيّ الّتي تعلّمناها في الدّروس السّابقة. تنسيق الأزرار الرئيسيّة: تباين عالٍ بالنّسبة للخلفيّة (لون أو درجة لونيّة مختلفة جدًّا) موضع الأزرار الرئيسيّة في الواجهة: على محور التّفاعل أو قربه بحيث يلاحظها المُستخدم تلقائيًّا. الأزرار الثانوية بعض الأفعال المُتاحة للمُستخدم تكون غير مُنتجة، كالإلغاء أو التخطّي، أو تفريغ النّموذج أو رفض عرضٍ ما وهكذا... فهي توقف أو تمنع إنشاء أشياء جديدة، وهذه نُسمّيها الأفعال الثّانوية، والّتي لا نريد للمستخدم أن يؤدّيها ولكنّنا نوفّرها من باب قابليّة الاستخدام. يجب أن تكون الأزرار الّتي تؤدّي إلى أفعال ثانوية أقل ظهورًا، لمنع النّقر عليها لا شعوريًّا. تنسيق الأزرار الثّانوية: تباين مُنخفض بالنّسبة للخلفيّة (لون أو درجة لونيّة متشابهة) موضع الأزرار الثّانويّة في الواجهة: بعيدة عن محور التفاعل بحيث لا يلاحظها المُستخدم إلّا إن كان يبحث عنها. استثناء: أهمية الفعل قد تكون بعض الأفعال الثّانويّة مهمّة، كحذف الحساب، وهذه يجب أن تكون ذات تنسيق رئيسيّ ولكن في موضع ثانويّ في الواجهة، وذلك لأنّنا نريد للمُستخدم أن يجدها ولكن نريد أيضًا أن يفكّر في نتائجها قبل تنفيذها. من المفيد أيضًا إعطاء هذه الأزرار لونًا يُشير إلى أهمّيتها (أحمر أو برتقاليّ أو أصفر...). الأزرار الخاصة قد يكون لديك نوع مُعيّن من الأزرار فريدٌ ضمن سائر تطبيقك أو موقعك، ويتطلّب انتباها خاصًّا، صمّم هذا الزّر بشكل خاصّ بحيث يبرز في الواجهة (الخروج عن النّمط)، مثلًا: زرّ "الإضافة إلى سلّة المشتريات" في Amazon، أو زرّ "Pin it" في Pinterest أو زرّ الإعجاب في فيسبوك. سنبدأ في الدّرس القادم الحديث عن الجوانب النّفسيّة لتجربة المُستخدم. ترجمة بتصرّف للدّروس Forms و Calls-to-Action, Instructions & Labels وPrimary & Secondary Buttons من سلسلة Daily UX Crash Course لصاحبها Joel Marsh. اقرأ أيضًا النسخة العربية الكاملة من كتاب مدخل إلى تجربة المستخدم (User Experience - UX) 1.0.0 كيف تصمّم دعوة إلى إجراء CTA لتحويل زبائن متجرك الإلكتروني كيف تصبح مرشحا مميزا لوظيفة تجربة المستخدم تلك -الجزء الأول- تجربتنا في إنشاء أداة تسجل تفاعلات المستخدم أفضل أطر تصميم المواد لتصميم تطبيقات الويب الحديثة الخاصة بواجهات المستخدم وتجربة المستخدم

ناقشنا في الدروس الماضية كيف نفهم ونُخطّط لتصميم تجربة المُستخدم، سنبدأ اليوم بالعمل الحقيقيّ. أوّل خطوة في تصميم حلّ متكامل هي تأسيس البُنية العامّة، وهذا يعني أنّ علينا التّعرف على معنى هندسة المعلومات (Information Architecture). فهرس سلسلة مدخل إلى تجربة المستخدم: مدخل إلى تجربة المستخدم User Experience فهم ودراسة المستخدمين في مجال تجربة المستخدم دراسة الشريحة المستهدفة في مجال تجربة المستخدم كيفية التصميم للأجهزة المختلفة هندسة المعلومات في تجربة المستخدم (هذا الدرس) تعرف على أنماط التصميم في مجال تجربة المستخدم أشياء لا يمكن اعتبارها رسوما تخطيطية (Wireframes) في مجال تجربة المستخدم تعرف على الرسوم التخطيطية (Wireframes) في مجال تجربة المستخدم مفهوم الثقل المرئي (Visual Weight) والألوان في مجال تجربة المستخدم التكرار ومخالفة الأنماط في مجال تجربة المستخدم المحاذاة والقرب في مجال تجربة المستخدم تعرف على أساليب مسح الواجهة والتراتب المرئي في مجال تجربة المستخدم أساليب الإطلاع في مجال تجربة المستخدم: التصفح، البحث والاكتشاف تصميم هيكل صفحة الويب والعناصر الأساسية في مجال تجربة المستخدم الأزرار، النماذج والدعوات إلى الإجراء في مجال تجربة المستخدم استخدام علم النفس في مجال تجربة المستخدم لتكييف المستخدم وإقناعه كيف تغير الخبرة من تجربة المستخدم؟ تصميم تجربة المستخدم من خلال بيانات وإحصائيات المستخدمين تعرف على أنواع المخططات الإحصائية في مجال تجربة المستخدم اختبارات أ/ب (A/B Test) في مجال تجربة المستخدم تكون هندسة المعلومات (أو IA اختصارًا) بسيطة نسبيًّا في المشاريع الصّغيرة، ولكنّها تصبح غايةً في التّعقيد في مشروع ضخم. بنية المعلومات هي مفهوم غير ملموس، ولكي نتعامل معه، علينا أوًّلا رسم خريطة للموقع، كهذه مثلًا: يعرض هذا المثال موقعًا فيه 6 صفحات: الرئيسيّة، وقسمان في القائمة الرئيسيّة، و 3 أقسام فرعيّة. تمثّل الخطوط الصّفحات المرتبطة من خلال عناصر التّنقّل (navigation) وهي القوائم والأزرار. ملاحظة: عندما تُرتّب الصّفحات بهذا الأسلوب (كشجرة عائلة)، نُسمّيها "شجرة" أو "سلسلة هرميّة" (hierarchy)؛ وهي مُستخدمة في تنظيم معظم التّطبيقات والمواقع (إلّا أنّها ليست الأسلوب الوحيد). ما من قواعد صارمة في رسم خريطة الموقع، ولكن إليك بعض الإرشادات العامّة: الخريطة البسيطة لا تعني بالضّرورة ترتيبًا منطقيًّا للمعلومات. أبقِ الخريطة سهلة القراءة وواضحة. عادةً نرسم من الأعلى للأسفل، وليس من اليسار لليمين [أو العكس]. ليس بالضّرورة أن تكون الخريطة جميلة المظهر، فهي مُستند تقنيّ وليست عرض أزياء! الخريطة إما أن تكون عميقة أو مسطحة بشكل عام، عليك أن تجعل الخريطة مُسطّحة قدر الإمكان (وهذا يعني إضافة الأقسام الفرعيّة في القائمة وبالتّالي لا يضطر المستخدم إلى النّقر مرّات كثير للوصول إلى عمق الموقع)، أو أن تجعلها عميقة (وهذا يعني قوائم أبسط لكنّها تحتاج نقرات أكثر). لاحظ أن للبنيتين أعلاه العدد نفسه من الصّفحات، ولكنّهما مختلفتان. بعض المواقع الّتي تقدّم منتجات كثيرة مثل Wal-Mart تحتاج عادةً بنية عميقة وإلّا أصبحت القائمة ضخمةً، بينما تحتاج مواقع أخرى مثل YouTube بنية مُسطّحة لأنّها لا تتضمّن غير مفهومين: المُستخدمين ومقاطع الفيديو. أسوأ الأمور أن تجعل موقعك عميقًا و مُسطّحًا في الوقت ذاته، عليك حينئذٍ تبسيط أهدافك، أو تصميم مربّع بحث وعرضه كمكوّن أساسيّ. خرافة شائعة: قد تسمع البعض يقول أن كلّ شيء في الموقع ينبغي أن يكون على بُعد 3 نقرات دومًا. هذا يعني أنّك تعلّمت تجربة المُستخدم في التّسعينيّات ولم تتعلّم شيئًا بعد ذلك. ركّز على المُستخدم، تأكّد من أنّهم يعرفون مكانهم في الموقع، وكيف يمكن أن يتنقّلوا، لا يهمّ عدد النّقرات إن كان التّنقّل واضحًا ويسيرًا. قصص المستخدمين (User Stories) تصف "قصّة المُستخدم" إحدى الطّرق الّتي يمكن أن يسلكها المُستخدم ضمن موقعك أو تطبيقك، ويجب أن تكون القصّة موجزة وكاملة معًا، وستحتاج إلى أكثر من قصّة لشرح تصميمك بالكامل. فيما يلي مثّال عن قصّة مستخدم يزور موقع Google: يصل المستخدم إلى صفحة البحث الرئيسيّة. يُدخِل المستخدم عبارة بحث ويُرسلها بالنّقر أو بلوحة المفاتيح. تعرض الصّفحة التّالية قائمة بنتائج البحث تكون مرتبّة بحسب مُلائمتها لعبارة البحث. يمكن للمُستخدم النّقر على الرّابط للوصول إلى الموقع المُناسب، أو تصفّح المزيد من نتائج البحث حتّى يجد شيئًا يُفيده. ملاحظة: هذا المثال مُبسَّط، ولكنّ كافٍ لشرح الفكرة. لاحظ أنّه ما من شيءٍ في القصّة يشرح تفاصيل التّصميم، وإنّما فقط يفرض إمكانيّتها، فغرض قصّة المُستخدم شرح مسير الاستخدام، أي تتابع خيارات المُستخدم، وليس الواجهة النّهائيّة للمشروع. إن كان مسير المُستخدم بسيطًا وفعّالًا، فقد أحسنت صنعًا (حتى الآن!) يميل مُدراء المشاريع إلى الاعتقاد أنّ قصّة المستخدم هي ذاتها تجربة المُستخدم، وهذا خاطئ، لأنّها ببساطة تُمثّل قائمة من المزايا والوظائف، فمصمّم تجربة المُستخدم يضع هذه القصص الّتي بدورها تُحوّل إلى الفريق. الآن وقد أصبح بإمكاننا كتابة قصص المستخدم، علينا أن نبني هندسة المعلومات، فبنية الصّفحات تُحدّد الخطوات الّتي تقوم عليها قصّة المستخدم، وعلينا أن نختار نوع هندسة المعلومات الّتي نرغب بتنفيذها، وربّما نحتاج عدّة أنواع. أنواع هندسة المعلومات الفئات (Categories) المهمّات (Tasks) البحث الزّمن النّاس الفئات لنفكّر مثلًا في متاجر بيع الملابس بالتّجزئة: يمكن تخيّل قائمة من مجموعة فئات: "الرّجال، والنّساء، والأطفال، والتّخفيضات" وهكذا... تُشير هذه الفئات إلى أنواع المحتوى المتوفّر، عندما تنقر على إحداها، ستتوقّع محتوىً ينتمى إلى الفئة المعنيّة. هذا أكثر أنواع هندسة المعلومات شيوعًا، ولكن قد تكون الفئات أكثر تعقيدًا، وعندها قد تعتري الحيرة مُستخدميك عندما يزورون فئة لا تحتوي ما يطلبونه. المهمات من الطرق الأخرى تنظيم المعلومات في الموقع أو التّطبيق توزيعها بحسب الأهداف الّتي يريد المُستخدمون إنجازها، فإن كنت تصمّم موقعًا لمصرف، قد يكون من المناسب تصميم قائمة تحتوي "التوفير، القروض، الاستثمارات، المساعدة، فتح حساب". إن كان مُستخدمك يعرف بالضّبط ما يُريد، فهذه من أفضل الطّرق لهندسة المعلومات، ولكن توخّ الحذر: فقد لا يعلم كلّ المُستخدمين ما يُريدون. فكّر قليلًا في النّوعين السّابقين، تصميم قائمة لموقع واحدٍ بأحد هذين النّوعين يختلف كثيرًا عنها بالنّوع الآخر، واعتماد أحدهما يتطلّب اهتمامك. البحث إن كان موقعك شديد التّعقيد، أو مليئًا بمحتوى يُنتجه المُستخدمين، فقد يكون من الأفضل اللجوء إلى البحث، مثل YouTube، فلو لم يحوِ YouTube إلا فئات المقاطع (مضحكة، أفلام، إعلانات...) لكان صعب الاستخدام، كما أنّ ذلك يعني الحاجة دومًا إلى تصنيف الفيديوهات المنشورة بشكل صحيح. الزمن إن كنت مُبتدئًا في تجربة المُستخدم فقد تُربكك هذه الفكرة: يمكنك تصميم هندسة معلومات تتغيّر مع الزّمن، فمثلًا: صندوق البريد الإلكتروني، حيث تعرض الرّسائل بترتيب وصولها، هذا تصميم قائم على الزّمن، في مواقع المحتوى قد تستخدم فئات مثل "شائع، مؤرشف، حديث..."، نشرة الأخبار في فيسبوك مثال على هذا. الناس فيسبوك أيضًا مثال على هندسة معلومات قائمة على النّاس، فكلّ الصّفحة مصمّمة حول فكرة لمن تعود هذه المعلومات، والعلاقات بين النّاس، عندما تصل إلى صفحة شخص ما، تتحوّل هندسة المعلومات إلى نوع الفئات (صور، أصدقاء، أماكن) لتصنيف هذه الأنواع المختلفة من المحتويات. قد يكون هناك أنواع عديدة أخرى! لكنّ مقالتنا أصبحت طويلة بعض الشيء. ترجمة بتصرّف للدرسين What is Information Architecture و User Stories & Types Of Information Architecture من سلسلة Daily UX Crash Course لصاحبها Joel Marsh. اقرأ أيضًا النسخة العربية الكاملة من كتاب مدخل إلى تجربة المستخدم (User Experience - UX) 1.0.0 التصميم للهواتف: هندسة المعلومات كيف تعيد تصميم موقع إلكتروني قائم بالشكل الصحيح كيف تنشئ منزلِقا Slider مناسبا للواجهة الرسومية عند التصميم للجوال

في عالم اليوم، لم يعد بالإمكان قصر اهتمامنا على الهواتف المحمولة والحواسيب، فلدينا أجهزة لوحية وأخرى "تُرتدى" كالسّاعات والنّظارات الذكيّة. سيكون موضوعنا اليوم عن التصميم لمختلف أنواع الأجهزة. فهرس سلسلة مدخل إلى تجربة المستخدم: مدخل إلى تجربة المستخدم User Experience فهم ودراسة المستخدمين في مجال تجربة المستخدم دراسة الشريحة المستهدفة في مجال تجربة المستخدم كيفية التصميم للأجهزة المختلفة (هذا الدرس) هندسة المعلومات في تجربة المستخدم تعرف على أنماط التصميم في مجال تجربة المستخدم أشياء لا يمكن اعتبارها رسوما تخطيطية (Wireframes) في مجال تجربة المستخدم تعرف على الرسوم التخطيطية (Wireframes) في مجال تجربة المستخدم مفهوم الثقل المرئي (Visual Weight) والألوان في مجال تجربة المستخدم التكرار ومخالفة الأنماط في مجال تجربة المستخدم المحاذاة والقرب في مجال تجربة المستخدم تعرف على أساليب مسح الواجهة والتراتب المرئي في مجال تجربة المستخدم أساليب الإطلاع في مجال تجربة المستخدم: التصفح، البحث والاكتشاف تصميم هيكل صفحة الويب والعناصر الأساسية في مجال تجربة المستخدم الأزرار، النماذج والدعوات إلى الإجراء في مجال تجربة المستخدم استخدام علم النفس في مجال تجربة المستخدم لتكييف المستخدم وإقناعه كيف تغير الخبرة من تجربة المستخدم؟ تصميم تجربة المستخدم من خلال بيانات وإحصائيات المستخدمين تعرف على أنواع المخططات الإحصائية في مجال تجربة المستخدم اختبارات أ/ب (A/B Test) في مجال تجربة المستخدم الخطوة الأولى: كيف سيكون التعامل مع الواجهة؟ باللمس بالإصبع أم بمؤشّر الفأرة؟ الخطوة الثانية: ابدأ بالأجهزة الصغيرة يعتقد البعض أن عبارة "mobile first" الشّائعة تأتي من صعود شعبيّة الهواتف الذّكية، وهذا جزء من الحقيقة، أمّا الجزء الآخر فهو قائم على أن التّصميم للأجهزة الصّغيرة محدودة القدرات يُجبر المصمّم على التّركيز على المحتوى والوظيفة الأساسيّة للمشروع، مؤدّيًا بدوره إلى تطبيقات بسيطة وجميلة؛ أمّا العكس (أي البدء بالأجهزة القويّة) فهو أشبه بإقحام قطّ في قفص عصفور، أمر ليس بسيطًا ولا جميلًا! الخطوة الثالثة: ما الإمكانيات المميزة لهذا الجهاز؟ تتنقّل الهواتف الذّكية معنا طيلة اليوم، وهذا يعني أنّنا نقضي وقتًا طويلًا في استخدامها، وأن باستطاعتنا استخدام الموقع في تطبيقاتنا، كما أنّها أجهزة صغيرة الحجم ويسهل نقلها، أمّا الحواسيب المحمولة فهي أقل سهولةً في النّقل ولكنّها أكثر قدرةً، وشاشاتها أكبر حجمًا، وفيها لوحة مفاتيح مُريحة، ومؤشّر يسمح بتحديد أكثر دقّة ووظائف أكثر. لا تُصرَّ كثيرًا على فكرة "وحدة الواجهة" بين الأجهزة المختلفة، بل فكّر بأسلوب مختلف لكلّ جهاز. الخطوة الرابعة: لا تنس البيئة التي يعمل فيها التطبيق هناك اختلاف في الخطوط العامّة لتجربة المستخدم بين Mac OS X وWindows، وكذلك يختلف Windows Vista عن Windows 8، وiOS 7 عن iOS 6، وقد تُضطّر لاختيار إصدارات محدودة لاستهدافها، وأخرى تتجاهلها، ففي كلّ مرّة توفّر تطبيقك لإصدار جديد، يتضاعف جهد التصّميم والتّطوير والصّيانة في المستقبل. كن بعيد النّظر! الخطوة الخامسة: كن مستجيبا هل ستوفّر تطبيقك على الويب؟ هل يدعم بضعة أنواع من الهواتف فقط؟ كيف سيعمل على الأجهزة القادمة؟ كل الأجهزة تستطيع التّواصل مع الإنترنت اليوم، لذا احرص على أن باستطاعة تطبيقك التلاؤم مع مختلف الأجهزة التي قد يرغب مُستخدمو تطبيقك باستعمالها. الخطوة السادسة: فكر بأكثر من شاشة واحدة في الوقت نفسه قد يكون هذا الموضوع متقدّمًا، ولكنّ بإمكانك بشيء من الجهد تحقيقه. هل يمكن استخدام هاتفك وحاسوبك سويّة كما يمكن التّحكم بالتّلفاز عن بُعد؟ هل يمكن لمجموعة من الهواتف أن تتحكّم بلعبة على حاسوب لوحيّ في غرفة واحدة؟ وإذا كنت تستخدم جهازين في وقت واحد، فهل يمكن نقل البيانات بينهما؟ ماذا عن مزامنة البيانات؟ هل ستؤدّي إلى مشاكل في الاستعمال؟ فكّر في الأمر! سنتعرّف في الدّرس القادم على أنماط التّصميم، وهي مجموعة من الأساليب الشّائعة لحلّ المشكلات المُتكّررة في تصميم تجربة المُستخدم. ترجمة بتصرّف للدرس Designing For Devices من سلسلة Daily UX Crash Course لصاحبها Joel Marsh. اقرأ أيضًا النسخة العربية الكاملة لكتاب مدخل إلى تجربة المستخدم (User Experience - UX) 1.0.0 كيف تعيد تصميم موقع إلكتروني قائم بالشكل الصحيح عشرة أمور أساسية يجب أخذها في الحسبان لدى تصميم النوافذ المنبثقة عشر مبادئ رئيسية لتصميم تجربة مستخدم على الهواتف الذكية التصميم للهواتف: التصميم البصري

لمصمّمي تجربة المُستخدم شريحة مُستهدفة من المستخدمين ذات مواصفات مُحدّدة، تمامًا كخبراء التسويق، تُبنى هذه المواصفات على الأبحاث كذلك، إلّا أن التّشابه بين الأمرين ينتهي هنا. فهرس سلسلة مدخل إلى تجربة المستخدم: مدخل إلى تجربة المستخدم 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 كيف تصبح مرشحًا مميزًا لوظيفة تجربة المستخدم تلك، الجزء الأول

المستخدمون، محور عالم تجربة المستخدم، وهمّنا الأوّل والأخير. أحد القوانين المقدّسة في تجربة المستخدم: "لا تلم المستخدم مهما يكن"، على الرغم من أنّ لومه قد يكون مُغريًا أحيانًا. فهرس سلسلة مدخل إلى تجربة المستخدم: مدخل إلى تجربة المستخدم 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

لكل شيء تجربة مُستخدم. مهمّتنا ليست خلق تجربة المُستخدم، بل تحسينها. ولكن ما معنى "تحسين" تجربة المُستخدم؟ هذا هو الدرس الأول من سلسلة مدخل إلى تجربة المستخدم: مدخل إلى تجربة المستخدم User Experience (هذا الدرس) فهم ودراسة المستخدمين في مجال تجربة المستخدم دراسة الشريحة المستهدفة في مجال تجربة المستخدم كيفية التصميم للأجهزة المختلفة هندسة المعلومات في تجربة المستخدم تعرف على أنماط التصميم في مجال تجربة المستخدم أشياء لا يمكن اعتبارها رسوما تخطيطية (Wireframes) في مجال تجربة المستخدم تعرف على الرسوم التخطيطية (Wireframes) في مجال تجربة المستخدم مفهوم الثقل المرئي (Visual Weight) والألوان في مجال تجربة المستخدم التكرار ومخالفة الأنماط في مجال تجربة المستخدم المحاذاة والقرب في مجال تجربة المستخدم تعرف على أساليب مسح الواجهة والتراتب المرئي في مجال تجربة المستخدم أساليب الإطلاع في مجال تجربة المستخدم: التصفح، البحث والاكتشاف تصميم هيكل صفحة الويب والعناصر الأساسية في مجال تجربة المستخدم الأزرار، النماذج والدعوات إلى الإجراء في مجال تجربة المستخدم استخدام علم النفس في مجال تجربة المستخدم لتكييف المستخدم وإقناعه كيف تغير الخبرة من تجربة المستخدم؟ تصميم تجربة المستخدم من خلال بيانات وإحصائيات المستخدمين تعرف على أنواع المخططات الإحصائية في مجال تجربة المستخدم اختبارات أ/ب (A/B Test) في مجال تجربة المستخدم يشيع الاعتقاد أن تجربة المُستخدم الجيدة هي تحقيق سعادة المستخدمين؛ وهذا غير دقيق! لو كانت السعادة غايتنا لاكتفينا بصور القطط و عبارات المديح العشوائية وعدنا إلى بيوتنا! للأسف لن يكون مديرك في العمل راضيًا (مع أن الفكرة ليست سيّئة!) هدف مصمّمي تجربة المُستخدم هو الوصول إلى كفاءة المستخدم. تجربة المستخدم ليست سوى قمّة جبل الجليد: يعتقد كثير من الناس أن كلمة UX تعني تجربة المستخدم، ولكنها بالأحرى تعني عملية تصميم تجربة المستخدم. تجربة كل مستخدم على حدة ليست سوى رأيه الشّخصي عن موقعك أو تطبيقك. صحيح أن رأي المستخدم مهم (أحيانًا) ولكن على عاتق مصممي التجربة مسؤوليات أكبر من ذلك. تصميم تجربة المُستخدم: يشمل تصميم تجربة المُستخدم (UXD اختصارًا) إجراءات مشابهة جدًّا لأصول البحث العلمي، فنحن نبدأ بفهم طبيعة المستخدمين، ثم التفكير بتلبية حاجاتهم (وحاجات المشروع)، ثم نبني هذه الحلول ونقيس أداءها على أرض الواقع. تابع معنا لتتعلم الكثير عن تجربة المُستخدم، أو تابع صور القطط إن لم تكن مهتمًّا! ركنا تجربة المستخدم الأساسيان ينبغي عليك عندما تبدأ مشروع تجربة مُستخدم جديدًأ وقبل أن تصمّم أيّ شيء، أن تفهم أهدافك؛ هدفين اثنين على وجه الدقّة. كل شيء تفعله قائم على هذين الهدفين ولا شيء أهمّ منهما لنجاح عملك كمصمّم تجربة المُستخدم: أهداف المستخدمين، وأهداف المشروع. أهداف المستخدمين يريد المستخدم شيئًا ما منك، فهو إنسان، وللإنسان دومًا حاجات. سواء كانت هذه الحاجات هادفة أو لا. أهداف المشروع لكل مؤسسة هدف من وراء الموقع أو التطبيق الذي تبنيه، عادة يكون الهدف المال، ويمكن أن يكون الدعاية للشركة، أو جذب المستخدمين للمجتمع… إلخ. تحديد نوع هذا الهدف أمر مهمّ. فلو كان الهدف عرض إعلانات أكثر، فإنّ سياسة تجربة المُستخدم ستكون مختلفة كلّ الاختلاف عمّا إذا كان الهدف هو بيع المنتجات أو الترويج للمشروع في الإعلام الاجتماعيّ. تُسمّى هذه الأمور "القياسات" (metrics) أو "مؤشرات الأداء الأساسيّة" (KPIs) كما يحلو لرجال الأعمال تسميتها. التنسيق بين الهدفين حسن التنسيق بين الهدفين السابقين هو الامتحان الحقيقي لمصمم تجربة المُستخدم، والمقصود هو كيف تجعل غاية المشروع تتحقّق عندما يحصل المستخدم على ما يريد (وليس العكس!). يجني YouTube أرباحه من الإعلانات، ويريد مستخدموه مشاهدة مقاطع فيديو جيدة، ولذلك فإن وضع الإعلانات في المقطع نفسه (أو في الصفحة نفسها) أمر منطقيّ. ولكن الأمر الأهمّ هو أن تسهيل البحث عن مقاطع الفيديو وإيجاد المقاطع المشابهة سيؤدي إلى زيادة ما يشاهده المستخدم، وهذا بدوره يزيد في أرباح YouTube. لو لم يكن الهدفان مُنسّقين، لاستطاع المستخدمون تلبية حاجتهم دون إفادة المشروع (مستخدمون كثر ولكن بلا نجاح) أو أن الأمر على العكس، أي أن المستخدمين لا يستطيعون تلبية حاجتهم (لا مستخدمين ولا نجاح). لو فرض YouTube إعلانًا مدّته دقيقة على كل نصف دقيقة تشاهدها، لانتهى به الأمر سريعًا نهاية عسيرة، ولكنّ إعلانًا مدّته بضع ثوانٍ هو ثمن قليل تدقعه مقابل مشاهدة دب الباندا وهو يعطس… صحيح؟ المكونات الخمسة لتجربة المستخدم في عملية تصميم تجربة المُستخدم، على المصمم أن يحفظ في ذهنه خمسة أمور طيلة العملية. المكوّنات الخمسة لتجربة المُستخدم: الجانب النفسي، وقابليّة الاستخدام، والتصميم، والجمل الترويجية، والتحليل. بإمكاننا أن نفرد في الحديث سلسلة طويلة لكلّ من هذه الجوانب، ولكنّنا سنبُسِّط الأمور بعض الشيء، فهذه السلسلة موجزة، وليس الغرض منها التعمّق في التفاصيل. أولا: الجانب النفسي عقل المستخدم معقّد، وأنت تعرف ذلك. يتعامل مصمّم تجربة المُستخدم مع ذهنيّة غير موضوعيّة تتحكّم بها المشاعر كثيرًا؛ ولهذه الذّهنيّة تأثير سلبيّ أو إيجابيّ على نتائجك، وعلاوةً على ذلك ينبغي على المصمم تجاهل جانبه النفسيّ الخاص أحيانًا، وهذا أمر عسير. اسأل نفسك: ما الذي يدفع المستخدم ليزور خدمتي في الأساس؟ ما شعوره عندما يفعل ذلك؟ كم من الجهد يبذله ليصل إلى ما يريد؟ ما العادات الّتي تنشأ مع تكرار ذلك مرارًا؟ ما الذي يتوقّعه عندما ينقر على هذا؟ هل تفترض أنّه يعلم شيء وهو لم يتعلّمه بعد؟ هل يريد أن يكرّر هذا الأمر؟ كم مرّة؟ هل تفكّر بحاجات المستخدم ورغباته، أم بحاجاتك ورغباتك؟ كيف تكافئ التّصرّف السّليم؟ ثانيا: قابلية الاستخدام صحيح أن الجانب النفسيّ للمستخدم أمر متعلّق ببواطنه، ولكن قابليّة الاستخدام على العكس من ذلك، وباستطاعتك ملاحظة حيرة المستخدم. أحيانًا تكون صعوبة تنفيذ شيء ما أمرًا ممتعًا (كما في الألعاب)، ولكن الغالب لكل ما سوى الألعاب أن تكون سهولة الإنجاز هي ما نريده. اسأل نفسك: هل يستطيع المستخدم إنجاز العمل المطلوب بأقل قدر من الإدخال؟ هل باستطاعتنا تجنيب المستخدم الوقوع في الخطأ؟ (الجواب: نعم!) هل الأمر واضح ومباشر، أم أنّه غامض؟ هل الأمر سهل إيجاده (وهذا أمر جيّد)، أم صعب تفويته (أفضل)، أم متوقّع دون تفكير (الأفضل)؟ هل يتلاءم تصميمك مع افتراضات المستخدم أم يعاكسها؟ هل وفّرت كل ما ينبغي على المستخدم معرفته؟ هل يمكن إنجاز الأمر نفسه بالجودة نفسها ولكن بطريقة مألوفة أكثر؟ هل تبني قراراتك على منطقك أنت؟ أم على بديهة المستخدم؟ كيف تتأكد؟ إن لم يقرأ المستخدم النصوص المكتوبة بخطّ صغير، هل يبقى الأمر مفهومًا؟ هل يمكن إنجازه؟ ثالثا: التصميم تعريفك لكلمة "التصميم" كمصمم تجربة المُستخدم مختلف بعض الشيء عن المفهوم الفنّي الذي يعرفه المصمّمون. لا يهمّ إن كانت الكلمة تعجبك أم لا. التصميم في تجربة المُستخدم يعني كيف تسير الأمور، وهو شيء يمكن إثباته؛ ولا علاقة له بالأسلوب. اسأل نفسك: هل يعتقد المستخدم أن المنتج جميل؟ هل يثقون فيه فورًا؟ هل يوصل المنتج الهدف والوظيفة دون كلمات؟ هل يمثّل العلامة التجارية؟ هل تنسجم مكوّناته معًا؟ هل يقود التصميم عيني المستخدم إلى المواضع الصحيحة؟ كيف تتأكّد؟ هل تساعد الألوان والأشكال والخطوط المستخدم في إيجاد ما يريده وتزيد من قابلية مُستخدم التفاصيل؟ هل تبدو العناصر الّتي يمكن النقر عليه مختلفة عن تلك الّتي لا يمكن النقر عليها؟ رابعا: الإنشاء/النصوص Copywriting هناك فرق هائل بين الإنشاء الخاص بالعلامة التجارية والإنشاء الخاص بقابليّة الاستخدام. فالأولى تعزّز صورة الشركة، والثانية هدفها إنجاز الأمور بأسرع وأبسط ما يمكن. اسأل نفسك: هل تبدو النّصوص واثقة وتُعلِم المستخدم بما عليه فعله؟ هل تحثّ المستخدم على إتمام هدفه؟ هل هذا ما تريده؟ هل أكبر النصوص هي أهمّها؟ إن كان الجواب لا، فلماذا؟ هل تُعلّم المستخدم أم تفترض أنّه يعلم؟ هل هي واضحة ومباشرة وبسيطة وفعّالة؟ خامسا: التحليل التحليل هو نقطة ضعف معظم المصمّمين في رأيي، ولكن يمكن إصلاح هذا الخلل. التحليل هو الفارق الرئيسي بين تجربة المُستخدم وأنواع التصميم الأخرى، وفهمه يُعلي من قيمتك. وإتقانه يعني حرفيًّا دخلًا أعلى. فاسأل نفسك إذًا: هل تستخدم البيانات لإثبات صحّة تصميم، أو الوصول إلى التصميم الصّحيح؟ هل تبحث عن آراء غير موضوعيّة أم حقائق موضوعيّة؟ هل جمعت المعلومات الّتي تعطيك الإجابات المطلوبة؟ هل تعرف لم يفعل المستخدمون ما يفعلونه؟ أمّ أنك تفسّر سلوكهم فقط؟ هل تبحث عن أرقام مجرّدة؟ أم تهدف إلى إدخال تحسينات بناء عليها؟ كيف ستقيس شيئًا ما؟ هل تقيس الجوانب المطلوبة فعلًا؟ هل تبحث عن النتائج السيّئة أيضًا؟ لم لا؟ كيف تطبّق هذا التحليل لتحسين المنتج؟ ترجمة وبتصرّف لكل من المقالات التالية للكاتب Joel Marsh: What is UX User Goals & Business Goals The 5 Main Ingredients of UX حقوق الصورة البارزة: Designed by Freepik. اقرأ أيضًا المقال التالي: فهم ودراسة المستخدمين في مجال تجربة المستخدم النسخة العربية الكاملة من كتاب مدخل إلى تجربة المستخدم (User Experience - UX) 1.0.0 تاريخ موجز عن تجربة المستخدم ثلاثون مصطلحًا في تجربة الاستخدام لا غنى عنها لمصممي الويب

يا له من أمرٍ عظيمٍ أن تنجز الكثير في أقل وقتٍ ممكن، أليس كذلك؟ إذن فلتجرب هذه النصائح والتلميحات لتتمتع بتجربة عملٍ أكثر ذكاءً في مجال UX! هذا المقال هو خلاصة ورشة عمل عُقدت في مدينة Manchester في عام 2019، المحتوى متاحٌ الآن. تغطي تلك النصائح والتلميحات المجالات التالية: إدارة العمل الصحة والسلامة العامة البحوث ورش العمل التصميم الأدوات إدارة العمل 1: تخطيط العمل حضر خطة العمل للأسبوع بأكمله وكن واضحًا بشأن أهدافك لهذا الأسبوع وما الذي عليك تحقيقه حافظ على متابعة لائحة المهام (To-do list) اليومية والأسبوعية لتساعدك على هيكلة عملك وتنظيمه، من الأفضل اعتماد اللائحة الورقية فضلًا عن أي وسيلةٍ إلكترونيةٍ أخرى لا تخف من المبالغة في تقدير أي جزءٍ من العمل وأعط لنفسك مجالًا منظمًا لإتمامه رتب الأولويات، حدد ما هو الأهم وما الذي يمكن تأجيله ليومٍ آخر لا تخف من قول لا، كن واضحًا في ردة فعلك وتبريرك عن عدم كونك متاحًا لتنفيذ المهمة 2: إتمام المهام حاول أن تركز على شيءٍ واحدٍ في كل مرة، وابتعد عن أي مشتتاتٍ تعيق تركيزك فوّض المهام للآخرين عند استطاعتك، فكر بالمهام التي عليك القيام بها والأخرى التي باستطاعتك تفويضها أنهِ المهام السهلة أولًا، سيتولد لديك شعورٌ جميلٌ بالإنجاز كافئ نفسك عند إتمامك المهام، فنجانٌ شهيٌ من القهوة مثلاً بمقابل إتمامك للمهمة جرب تقنية Pomodoro – استخدم مُؤقتًا لجدولة المهام في 25 دقيقة، مع فاصلٍ زمنيٍ يستغرق 5-10 دقائق بين المهام اعتمد تقليل المدة الزمنية للمهام وكأنك في سباق، فمثلًا بإمكانك تقليل مدة المهام إلى أسبوع بدلًا من أسبوعين حاول أن تصل باكرًا إلى مكان عملك واحظ بوقتٍ مناسبٍ لإنجاز المهام بدون أي مشتتات (وهذا يتيح لك المغادرة باكرًا أيضًا) 3: الاجتماعات أجرِ الاجتماعات بدون مقاعد، هذا يعطي الاجتماع جوًا من الجدية ويمنع التكاسل لا تخف من امتناعك عن حضور الاجتماع وغادر باكرًا إن لم تكن لك صلةٌ به حافظ على وقت الاجتماع قصيرًا. ستتفاجأ بما يمكنك تنفيذه خلال تلك المدة القصيرة كن واضحًا بشأن أهداف ومخرجات الاجتماعات، يجب أن يعرف الجميع ما هي أهداف الاجتماع وما هي مخرجاته 4: البريد الإلكتروني تجنب التشتت وقلل عدد مرات تفقدك البريد الإلكتروني، مثلًا من 2-3 مرات يوميًا أعد قراءة رسائل البريد الإلكتروني التي كتبتها وأنت غاضب، امنح نفسك وقتًا كافيًا لتهدأ قبل أن تُقدم على فعل أي شيءٍ ستندم عليه 5: جدول الأعمال ضمّن يوم عطلةٍ إضافيٍ في خطاب مغادرتك للمكتب أو في تقويم العمل وبذلك تستطيع العودة للحاق بجدول أعمالك بدون اجتماعاتٍ أو مهام طارئة وضّح في جدول العمل متى تكون مُتاحًا ومتى لا تكون كذلك، لا تخف من رفض الاجتماعات في الأيام التي لا تكون مُتاحًا فيها كن واضحًا بشأن ساعات التواصل المتاحة. مثلًا بإمكانك تحديد ساعات الصباح عندما تكون في أقل حالاتك تشتيتًا حدد في جدول عملك الأوقات التي تخطط فيها للعمل داخل المنزل حتى لا تنزعج من الرسائل المرسلة باستمرار لمعرفة مكان تواجدك 6: أدوات إدارة العمل أضع بعض المرح باستخدام Habitica جرب أداة Trello لتتبع مهامك عيّن بعض التذكيرات، مثلًا باستخدام تقويمات Slack أو Google اجعل حجم العمل المكلف به أنت وفريقك مرئيًا، واستخدم سبورة لتتبع مدى تقدم الفريق في العمل 7: بيئة العمل أنجز بعض المهام التي تتطلب منك تركيزًا وتعاونًا خارج حدود المكتب بعيدًا عن التشتيت والضغط لا تتقيد بطاولة العمل، اذهب لمكانٍ هادئٍ وأعط نفسك وقتًا ومكانًا هادئًا للتفكير تجول باستخدام العجلات، إنها أسرع من المشي المكتب الدافئ والمريح قد يكون طريقةً جيدةً لإنجاز المهام بعيدًا عن المشتتات حاول أن تعمل من داخل المنزل لمرةٍ واحدةٍ على الأقل في الأسبوع، ستندهش بما تنجزه بعيدًا عن المكتب الصحة والسلامة العامة 1: التوازن ما بين الحياة والعمل أنجز مهام العمل الموكلة إليك خلال وقت الدوام ولا تحملها معك إلى البيت فكر فيما إذا كان بإمكانك ضغط ساعات العمل أو تقليل عدد أسابيع الدوام، مثلًا خصص أيام الجمعة لقضاء مزيدٍ من الوقت مع العائلة والأصدقاء استمتع باستراحة الغداء كاملة، وإلا فلماذا سميت باستراحة! حافظ على أجهزتك الخاصة لاستخدامك الشخصي، لا تثبت أدوات العمل على أجهزتك الخاصة 2: التعامل مع الضغط حاول قدر استطاعتك أن تضبط نفسك ولا تبالغ في شعورك بالضغط والإرهاق، فكر بمشاعر الآخرين ووجهات نظرهم تمامًا كما تفكر بنفسك لا تخف من طلب المساعدة! اعثر على هواية تمارسها خارج المكتب، عليك أن تعمل لتعيش وليس العكس اعقد اجتماعاتك أثناء ممارستك للمشي، وبهذا تضرب عصفورين بحجر قد يكون التأمل والتأمل الواعي طرقًا فعالةً للحفاظ على هدوئك والتقليل من توترك 3: خلق بيئة إيجابية أدخل ولو القليل من لمسة الطبيعة داخل بيئة المكتب واهتم بالنباتات والمساحات الخضراء لا تعامل الآخرين بطريقةٍ لا ترغب في أن يعاملوك بها حاول أن تغرس ثقافة ردود الفعل الإيجابية، مثلًا اسأل عن الطريقة الأفضل وما الذي سينجز بطريقةٍ أفضل بدل التركيز على الجوانب السلبية فقط أضف جوًا من المرح أثناء تقدم العمل، ولا تخف من تشجيع الفريق على إظهار روح الدعابة فيما بينهم البحوث 1: بحوث التخطيط ابدأ بالسؤال عن المشكلة التي تحاول حلها وما النتيجة التي ستتوصل إليها، أو مثلًا حاولوا معًا صياغة هدفٍ تودون تحقيقه فكر بالشيء الذي ستُقدم على قياسه، ما الذي يستثير اهتمامك؟ اطلع على نتائج الأبحاث السابقة المشابهة، وابدأ من حيث انتهى الآخرون ابحث عن نطاقٍ من الخبراء في المجال، هذه الطريقة قد تكون سريعة في معرفة الحقائق المعروفة بالفعل في المجال انتبه وتجنب الانحياز أثناء قيامك بالبحث، مثلًا في طريقة تقديمك للأسئلة أو لمهام المستخدم حالات الدعم قد تكون مصدرًا غنيًا لرؤى المستخدم 2: المشاركون في البحث حدد من الذي يجب أن تتحدث إليه حتى تتمكن من إشراك المجموعة الصحيحة من المستخدمين في البحث حاول أن تتحدث إلى مجموعةٍ متنوعةٍ من الناس، حتى "الأشخاص المصابين بالملل" قد يكونوا مصدرًا للمعلومات العينات الصغيرة غالبًا ما تكون كافيةً لبحوث المستخدم (من 5-10 مثلًا)، أنت لست بحاجةٍ إلى التحدث مع الكثير من المستخدمين 3: المقابلات واختبار المستخدم مارس الاستماع الفعال، لا تستمع فقط إلى ما يُقال ولكن انتبه إلى لغة الجسد بشكلٍ جيد عند إجرائك البحوث، انتبه أن ما يواجه الآخرين قد يكون مختلفًا تمامًا لتجربتك في ذلك الموقف (أظهر بعض التعاطف) سجل جلسات البحث (مثل المقابلات واختبار قابلية الاستخدام) إذا أمكن لإكمال أي ملاحظات، قد تحتاج إليها في فترةٍ لاحقة احرص دائمًا على اختبار أسئلة المقابلة مسبقًا، تأكد من وضوح الأسئلة وارتباطها بموضوع المقابلة تجنب استخدام كلمة "اختبار" عند إجراء اختبار المستخدم، لا تريد أن يشعر المستخدمون بأنهم يخضعون للاختبار والتقييم لا تخف من الصمت أثناء المقابلات وجلسات اختبار المستخدم، قاوم إغراء التدخل حتى يتمكن المستخدمون من متابعة حديثهم تأكد دائمًا من تقديم المشهد وضبطه عند إجراء بحث المستخدم، مثلًا عند تقديم مهام المستخدم للمحاولة يمكن استخدام أدوات مثل Marvel وInVision وAxure لإنشاء نموذجٍ أوليٍ قابل للنقر بسرعة لاختبار المستخدم يمكن أن يكون النسخ المتطابق من هاتفك المحمول مفيدًا جدًا لاختبار المستخدم 4: مخرجات البحوث كن مُختصَرًا في نتائج البحوث الخاصة بك، واجعلها سهلة الاستيعاب لجمهورك، لا أحد يحب الاضطرار إلى نبش بحثٍ طويلٍ لاستخراج الأفكار منه عليك أن تستفيد من عداد الوقت الحقيقي لتوصيل أنشطة البحث ومخرجاته ورش العمل 1: تخطيط ورش العمل حدد عدد الأشخاص في ورشة العمل على ألا يتجاوز العدد 15 شخصًا، في حال زاد العدد عن ذلك شكل ورش عمل متعددة للتعامل مع الأعداد الكبيرة حاول أن تحصل على مزيجٍ جيدٍ من الشخصيات داخل ورشة العمل، بهدف تحقيق التنوع طالما كان ذلك ممكنًا من المهم تواجد الأشخاص المناسبين في ورشة العمل، فكر بمن ينبغي عليهم الحضور وأيضًا من يتوجب عليهم المغادرة استعد لتواجد الشخصيات "الكبيرة" الخارج عن الخطة، فكر في خطةٍ لاستيعاب مشاركة هؤلاء فكر في استخدام منسقٍ خارجيٍ إذا كانت هناك حاجة لوجهة نظرٍ أكثر استقلالية تأكد من وجود فترات استراحةٍ منتظمةٍ خلال ورشة العمل، على الأقل استراحة كل ساعة توقع أن تتجاوز الأنشطة الجدول الزمني المحدد، فاحرص على التخطيط لوقت إضافي 2: إعداد ورشة العمل فكر في تنظيم الغرفة، هل تريد مجموعةً واحدةً كبيرةً أم مجموعاتٍ صغيرةً متعددة؟ ما هي نقطة الجذب المحورية في الفراغ؟ قد يكون من المفيد أن يتوفر لديك مساعدٌ لإدارة ورشة العمل بحيث يمكنك التركيز على قيادة الجلسة، مثلًا بإمكان المساعد أن يلتقط النقاط المثارة في الجلسة ويشارك في التحضير قدم وجبةً خفيفة، أي ورشة عمل لا يتوفر فيها البسكويت تعد تموذجًا سيئًا 3: المقدمات قدم نفسك دائمًا عند إدارة ورشة العمل، لا تفترض أن الجميع يعرف من أنت اجعل جدول ورشة العمل واضحًا ومرئيًا (اعرضه على السبّورة مثلًا)، وحافظ على متسعٍ يسمح لك بإدراج العناوين الطارئة التي يمكن تغطيتها فيما بعد حدد تفاصيل جدول الورشة، وضّح ما الذي ستتحدث عنه وما هو المتوقع من المشاركين اطلب من الحضور إخفاء أي مشتتات، استخدام أجهزة الحاسوب المحمولة أو الهواتف ليس محتملًا (ما لم يُطلب استخدامهم) 4: البدء بالورشة استخدم الأمثلة كلما أمكن، لا تتبع الأسلوب النظري، إذا كان بمقدورك أن تربط الأحداث بنماذج حقيقةٍ من الواقع فافعلها التقط الكثير من الصور، استخدم هاتفك لالتقاط المخرجات مثل الملاحظات والرسومات التوضيحية على السبورة إلقاء أمثلة مرئية لما أنت بحاجةٍ إلى تنفيذه تعد طريقةً رائعةً لضبط التوقعات حرك الأشخاص خلال ورشة العمل، فكر بنشاطٍ مختلفٍ عن قيام –جلوس، اطلب من الحضور الوقوف والتحرك ابق عينيك على الساعة، لا تخف من تجاوز أو قطع أي نشاطٍ عندما يداهمك الوقت 5: الأنشطة في ورش العمل تبنى أنشطةً تتطلب مشاركةً من جميع الحضور، واحرص على تفاعل الجميع طالما أمكن جدول أنشطة ورشة العمل، مثلًا 10 دقائق لتكوين فكرة اطلب من المشاركين أن يرسموا بدلًا من الكتابة، هذه طريقةٌ رائعةٌ في إشعال المناقشة والتوصّل لخلاصةٍ إبداعية شجع التحدث خلال بعض الأنشطة، مثلًا تمارين لمساعدة المشاركين في التعرف على بعضهم بعضًا طبق أسلوب التصويت الصامت (مثلًا التصويت بالنقطة) ومن ثم ناقش كمجموعة 6: معدات ورشة العمل استخدم ورق الملاحظات اللاصق ذو جودةٍ عاليةٍ فيلتصق بسهولة على الأسطح المختلفة جرب تطبيق Post-it Plus فهو يعد تطبيقًا رائعًا للاحتفاظ بالملاحظات بطريقة إلكترونية استخدم أقلامًا ذات خطوطٍ واضحةٍ سهلة الكتابة على ورق الملاحظات، ما يجعل الملاحظات أسهل في القراءة وأوضح في حال تصويرها اسحب ورق الملاحظات من العلبة بطريقةٍ صحيحةٍ كي لا يتجعد وذلك بشدها للأسفل لتتمكن من فتح العلبة أسرع اضغط على حزمة الأوراق بدلًا من إضاعة الوقت في البحث عن شريط الفتح 7: متابعة ورشة العمل بعد انتهاء ورشة العمل، أرسل بريدًا إلكترونيًا للمتابعة، اشكر فيه من حضر وأرسل لهم تذكيرًا يلخص محتويات الورشة والقائمين عليها وأي مواعيد هامة لاحقة من المهم مشاركة مخرجات ورشة العمل، قد يكون من الجيد تذكير الحضور بمخرجات الورشة بعد مضيّ أسبوعين من عقدها بعد انتهاء الورشة خصص بعض الوقت للتفكير بشكلٍ عكسيٍ واجمع ردود الأفعال وفكر في طريقة لتحسين الأمور في المرات القادمة التصميم 1: تحديد المشكلة حافظ على أهدافك واضحةً خلال مرحلة التصميم وركز على ما تريد تحقيقه حدد المشكلة قبل معالجة التصميم، وكن واضحًا في تحديد المشكلة التي تعالجها تعرف على محددات التصميم مسبقًا، مثلًا: التكنولوجيا والعلامات التجارية وغيرها… لا تعتمد اختصارات الكلمات، هناك بعض المرونة في القيام بذلك ولكن تأكد من تفسيرك لتلك الاختصارات مع العميل قبل أن تتورط لا تنجرف ببساطة وراء طلبات العميل، فكر في احتياجاته ولا تخف من الخوض في التحديات 2: استلهام أفكار التصميم لا تحاول اختراع العجلة من جديد، بإمكانك الاستفادة من تصاميم أخرى سابقةٍ أو استلهام أفكارك منها لا تخف عند البدء بعمل التصاميم السخيفة، تدريجيًا ستتوصل لمرحلةٍ مرضيةٍ وستكون على درايةٍ بماهية التصميم الجيد عندما تختبر نماذج التصميم السخيفة تلك ابدأ دائمًا باستخدام الورقة والقلم ابدأ العمل الآن، إياك والتأجيل لا تخف من كونك مبدعًا، شجع نفسك وشجع الآخرين على التفكير خارج الصندوق 3: التوصل للإبداع نوّع في مكتبة الموسيقى الخاصة بك لخلق أجواء مختلفة وملهمة عليك أن توقف تشغيل الإشعارات لتقليل التشتت احمل المفكرة معك دائمًا، فأنت لا تعلم متى يأتيك الإلهام خذ استراحةً بانتظام، ولا تضغط على نفسك للوصول لمرحلة الإبداع استقطع بعض الوقت للإلهام، أعط الإبداع متسعًا ومتنفسًا ولو ضئيلًا 4: إدارة أطراف المصلحة فكر بالأطراف الذين لديهم حدةٌ في صوت الأنا العليا (Ego) فهذا يجعلهم مغرورين وحادي الطباع، ما يُرغبك فعلًا في التوصل لطريقةٍ مناسبةٍ للتعامل معهم إدارة التوقعات مسبقًا جزءٌ مهمٌ من العمل أبقِ أطراف العمل على اطلاعٍ بسير أعمال التصميم والبحث، تأكد من عدم حدوث مفاجآتٍ سيئة فكر في تأثير التصميم أو قرار التصميم، التصميم لن ينسكب داخل فراغ بل حتمًا يؤثر على أمورٍ عديدة 5: الاتصالات اللازمة حافظ على وسائل التواصل مع العميل ومع أطراف العمل المقابلة وجهًا لوجه والمحادثة على الهاتف أفضل من البريد الإلكتروني تتبع اتصالاتك مع العملاء وأطراف العمل، لا تعتمد ببساطة على تذكُر ما قيل أبقِ الجميع على اطلاعٍ بتغييرات التصميم، كن سبّاقًا في الإطلاع عن التغييرات خصص سبورة بيضاء لأعمال التصميم لتطويرها ومشاركتها 6: تقديم التصاميم لا تعرض تصاميم لا ترغب في اعتمادها من قبل الزبون، التصاميم التي لا تعجبك كثيرًا دائمًا ما تكون محط الاختيار لا تقدم العديد من خيارات التصميم (لا تزيد عن 2-3) وتجنب ارتباط جوانب مختلفة من التصميم معًا سيبدو التصميم كوحش فرانكشتاين فكر في الجهة أو الشخص الذي ستعرض عليه التصميم، وكيف بإمكانك تطويع العرض للحاضرين 7: الحصول على تغذية راجعة حول التصميم كن دائمًا منفتحًا على التعليقات –فأنت تتجاهلها عادةً بينك وبين نفسك اعرض التصاميم بانتظام، ستحصل على تغذية راجعة أفضل وأسرع كن واضحًا في الجوانب التي تريد جمع الملاحظات حولها، لا تترك الأمر مفتوحًا 8: فريق عمل التصميم خصص بضع ساعاتٍ خلال الأسبوع لاجتماع الفريق، قد يكون هذا وقتًا لإتمام مهام مختلفةٍ معًا ضمن مشروع أو برنامج اقتطع بعض الوقت للعمل معًا على مهمة ما، مثلًا جلسة تصميم جماعية جرب أعمال التصميم في فرق من شخصين، ستكون طريقة رائعة لعمل تعاوني وتبادل الخبرات 9: التخطيط الشبكي التخطيط الشبكي والرسومات السريعة وسيلة رائعة لضبط توقعات أطراف العمل والتأكد من رضاهم عن اتجاه التصميم استخدم مجموعةً لونيةً صغيرة (لا تزيد عن 3 ألوان) فيكون التصميم ككل ثابت وواضح 10: صمم للهاتف المحمول أولًا فكر تدريجيًا، صمم للهاتف المحمول قبل أن تخوض في تصميم سطح المكتب اطلع على الثغرات الموجودة في التصاميم، وكيف يبدو التصميم بالنسبة لها 11: أدوات التصميم استخدم دائمًا مكتبات التصميم والأدوات قدر الإمكان، فهي توفر عليك الوقت والجهد وتحافظ على تصاميمك متناغمة ومتماسكة احرص على عمل نسخٍ احتياطيةٍ واحفظ كل شيء! لا شيء أسوأ من فقدان عملك الثمين أدوات التصميم السحابية مثل Figma تعمل بشكلٍ جيد جدًا مع أنظمة التصميم حيث يسهل الحفاظ على مكونات وأنظمة التصاميم محدثة استخدم أداة مثل InVision لغرض تجميع الملاحظات والتعليقات الخاصة بالتصاميم يمكن لأدوات مثل Zeplin وInVision أن تسمح للمطورين بفحص التصاميم، مثلًا في تكوين الكود اللازم لبناء التصميم الأدوات 1: اختيار الأدوات تبنّى حدس جيد لاختيار البرمجيات المحتمل العمل معها، جربها على مشروع حقيقي لمعرفة مدى نجاحها قبل اعتماد أي أداة أخرى قيّم الأدوات التي تستخدمها بشكل دوري، مثلًا هل تتوفر أدوات جديدة أكثر فعالية لك وللفريق مثل Adobe XD وFigma وInVision Studio حدد الأدوات المناسبة للتصميم، لا تخف من تغيير أدواتك حسب الموقف اتفقوا على الأدوات المستخدمة كونكم فريقًا واحدًا، ليس من الضرورة أن تتبعوا جميعًا نفس الأداة، لكن قد يصبح الحال صعبًا عند استخدام أدوات غير متوافقة في الفريق كن حذرًا من تقييد الأدوات لعملك، مثلًا استعمال أداة معقدة وبالتالي لن تستخدم إلا في مجالٍ محدد من قبل خبير الورق أفضل أداة لديك! 2: صندوق الأدوات خصّص أدوات UX الموجودة، مثلًا القوالب، والرسوم، ومكونات واجهة المستخدم (UI) 3: التدرب على الأدوات تعلم اختصارات لوحة المفاتيح لأدواتك، ستوفر لك الكثير من الوقت احتفظ لديك بنسخةٍ مطبوعةٍ من اختصارات لوحة المفاتيح إلى حين تتأقلم عليها استخدم الإنترنت وابحث فيه عن مقاطع فيديو لمساعدتك في تعلم أداة جديدة 4: الرسم استخدم أدوات الرسم الملحقة، هناك مجموعةٌ متنوعة من الأدوات ستجد فيها ما تبحث عنه استخدم ميزة in-tool للمساعدة في محاذاة التصميم، مثلًا ضبط المحاذاة الأفقية والرأسية داخل الرسم استخدم مكتبات الرموز والرسوم حيثما أمكن، ستكون بمثابة تدريبٍ جيدٍ واختصار عظيمٍ للوقت اعتماد الصورة لقاء وثيق مع فكرة لامعة لصاحبها Fachy Marín على Unsplash ترجمة وبتصرف للمقال ‎150 UX life hacks to help you work smarter لصاحبه Neil Turner

في الأيام الأولى لظهور مصطلح تجربة المستخدم (UX)، كان ظهورُ الخبراء والمختصين في هذا المجال محدودًا ونادرًا (بإمكانك أن تتخيلهم كطيورٍ نادرةٍ تستحق قطع الأميال لأجل التعرف عليها). غالبًا ما يكون القائم على مشروع UX شخصًا منفردًا، أو إن شئت فقل فريقًا متعدد المهام مندمجًا في كيان شخص واحد. تنصب تلك المهام في تصميم واجهة المستخدم (UI design) واستخراج كافة المتطلبات من المستخدمين المعقدين وإجراء جلسات اختبار للمستخدم والتحقق من عدم نسيان إمكانية الوصول بالتأكيد. مع ازدهار مجال UX، وتزايد أعداد الخبراء ظهرت مسارات أكثر تخصصية بما يتعلق بتجربة المستخدم (UX). ما عدنا نسمع عن شخصٍ خبيرٍ في تجربة المستخدم (UX)، أصبحنا نرى مصممي UX أو باحثي UX أو خبراء استراتيجيين في UX أو مصمم متفاعل أو مصمم UX للهواتف… واللائحة تطول. عادةً ما تكون الأدوار والمسؤوليات لأي مشروع ضيقة فهناك باحثون معنيون بمهام UX البحثية (مثل جمع الملاحظات والانتقادات من المستخدم، واختبار المستخدم.. وما إلى ذلك) وهناك أيضًا مصممون معنيون بمهام تصميم UX (مثل تصميم مخطط العمل wireframe، وتصميم النماذج الأولية، وتنقلات المستخدم وهلم جرًا). لدى المصممين اهتمامٌ ضئيلٌ بمجال البحث، كما أن اهتمام الباحثين بمجال التصميم ضئيلٌ أيضًا. بعد كل هذا نحن لا نريد خلط الأدوار أم أننا سنفعل؟ من المحتمل أن يعمل كلٌ من المصممين والباحثين في نفس المكان، غالبًا في نفس الفريق ولربما في نفس الغرفة، لكنهم بالتأكيد يشغلون وظائف مختلفة. وهذا مخجلٌ في حقيقة الأمر، لأنه يوسع الفجوة ما بين التصميم والبحث. ليس بالضرورة من الناحية المادية ولكن الأخطر أنه يؤثر على مدى المعرفة والتفاهم المشترك فيما بينهما. ماذا لو انخرط كلٌ من المصمم والباحث في مجال الآخر استقلالية دور الباحث والمصمم في مجال UX ليس بالشيء الخاطئ، ولكن يتوجب أن تحدث الكثير من التقاطعات بين الدورين. على المصمم أن ينخرط بعمقٍ في عمل الباحث، وعلى الباحث أيضًا أن ينخرط بعمقٍ في عمل المصمم. تتساءل عن السبب؟ التصميم المثالي يُبنى على بحث مثالي تصميم UX المثالي لا يتحقق بطريقةٍ سحرية (مع أن بعض العملاء يميلون للتفكير بتلك الطريقة)، بل يُبنى وفق رؤى المستخدم وفهمه، وهذا يتحقق بالبحث الجيد ومعرفة المستخدمين ودراسة ما هو الأفضل لهم. في حال حصر المصمم والباحث نفسيهما في مهمتي التصميم والبحث كمهام محددة ومنفصلة ولم ينخرط كلٌ منهما في عمل الآخر فلن تُستخدم الرؤى والتفاهمات بالطريقة الأمثل لخلق تجربة مستخدمٍ رائعةٍ بحق. يساعد في تعزيز التعاطف البحث المتعلق بالمستخدم يساعد على تعزيز التفاهم والتعاطف معه. الاستماع إلى شخصٍ ما يتحدث عن "المستخدمين" يختلف عن مقابلتهم مباشرةً أو التحدث إليهم. بالتأكيد الملفات الشخصية وملفات تعريف المستخدمين رائعة، ولكن في الواقع مقابلة المستخدمين وجهًا لوجه (حتى لو لم يكن على أرض الواقع) سيكون لها مردودٌ أكبر. انخراط المصممين أكثر في البحث وكذلك انخراط الباحثين في مجال التصميم يساعد أيضًا في تعزيز التفاهم والتعاطف فيما بينهم. ويساعد على تحطيم فكرة الفاصل بين "هم" و"نحن". بعد كل هذا، لا شيء يعدل أن تخوض في مجال الطرف الآخر وأن تسير قدمًا لتحقيق الفهم الأفضل لهم ولطبيعة عملهم. نتائج الأبحاث لا تضيع خلال نقلها أو ترجمتها الباحث (أو أي شخص يمت له بصلة) الذي يحاول إيصال نتائج البحث الرئيسية يشبه إلى حدٍ ما زميلك في محاولته ليشرح لك قصة فيلمٍ شاهده في السينما. بالتأكيد سيكون زميلك قادرًا على وصف جوهر الأحداث، ولكن الكثير من التفاصيل ستسقط منه وهو يحاول نقلها إليك. من الأفضل دائمًا والأكثر إمتاعًا أن تشاهد الفيلم بنفسك. نتائج الأبحاث أقل عرضة لأن تكون مهملة قد يكون من السهل جدًا على المصممين التقليل من قيمة النتائج المهمة أو رفضها تمامًا ما لم يكونوا جزءًا من عملية البحث. أن يُطلعك أحدهم على رؤى المستخدم أو مشاكل قابلية الاستخدام ليس كأن تختبرها بنفسك، وبالتالي فهي ليست مقنعة. من غير المرجح أن يُلقى بالمهام للطرف الآخر صدق أو لا تصدق، عقلية إلقاء المهام على حائط الطرف الآخر لا تزال مسيطرةً في الكثير من الفرق والمنظمات. ينجز المصمم بعض التصاميم ثم يلقي بها للباحث لجمع بعض الملاحظات من المستخدمين ليعيد توجيهها مجددًا للمصمم. وهنا تجد نفسك في ملعب كرة طاولة ما بين المصمم والباحث، وهي ليست ممتعةً أبدًا، وهي بالتأكيد ليست أفضل طريقة لخلق تجارب رائعةٍ للمستخدم. هناك مشاركة وارتباط أكثر في مجال UX من المحتمل أن تتحول الأفكار البحثية إلى أفكارٍ تصميميةٍ وتغييراتٍ فعالة في حال وجود شخص حاضرٍ طوال تلك الرحلة. إذا انخرط المصممون في البحث، وانخرط الباحثون بدورهم في التصميم، سنتوصل لدرجة أكبر من المشاركة والارتباط بما يتعلق بـ UX في أي مشروع، وهذا قد يكون شيئًا جيدًا. الملاحظات والانتقادات من طرف المستخدم يمكن تجميعها بطريقة أسرع في حال أراد المصمم الحصول على مراجعات وانتقادات من المستخدم واضطر إلى انتظار الباحث حتى يصبح متفرغًا لذلك، فهناك احتمال حدوث تأخر كبير ما بين التصميم المعد والملاحظات الموجهة من المستخدم. بينما يمكن تجميعها بطريقةٍ أسرع إذا تمكن المصممين من القيام بذلك بأنفسهم. البحث مركز بطريقة أفضل التوافق الجيد مع بحث UX يتضمن اختبار المستخدم للتصاميم وتقييمها. بعدّك شخصًا معنيًا بالخروج بتصميم من الطراز الأول (على الأقل أنت تأمل ذلك)، يكون المصمم في وضع فريد لتحديد الأسئلة التصميمية والافتراضات التي تحتاج إلى ملاحظات عاجلة. على سبيل المثال، هل هذه الفكرة مفهومة لدى المستخدمين؟ هل تعمل خاصية التنقل؟ هل رمز الطعام سيُشعر المستخدم بالجوع؟ باستطاعة الباحثين والمصممين بناء مجموعة المهارات الخاصة بهم تحدث فريق موقع uxforthemasses في مقالة سابقة عن أهمية امتلاك محترفي UX لمجموعة مهارات على شكل T. تمتلك من خلالها عدة مهارات بقدر كبير من الخبرة والمعرفة مع تعمق أكبر في جوانب محددة. بالنسبة للمصممين، سينعكس هذا العمق في التصميم وأما الباحثين فسينصب في البحث، ولكن الأهم أن كلاً منهما لديه المقدرة والفرصة للعمل على حدٍ سواء. تشجيع المصممين على المشاركة في البحوث وتشجيع الباحثين على المشاركة في التصميم، يتيح للجميع الفرصة لتوسيع مهاراتهم ويساعد في إصلاح الوضع المتأزم للمصممين والباحثين الذين يعملون باستقلاليةٍ عن وجود الطرف الآخر. هل يستحسن أن تكون أدوار التصميم والبحث منفصلة؟ الحديث عن كل ما سبق لربما يضخم السؤال –هل يستحسن أن تكون أدوار التصميم والبحث منفصلةً في مجال UX؟ في هذا العالم الحديث المتسارع تجاه المشاريع والأعمال (والذي يزدري المتخصصين) هل ينبغي أن يكون هناك دورٌ "تصميميٌ بحثيّ" (Deresearch) يجمع بين الدورين؟ تكمن مشكلة الجمع بين الدورين في أن ما يميز الباحث الجيد ليست بالضرورة نفس المهارات والمواصفات التي تجعل المصمم جيدًا. كما أن العثور على شخصٍ يمتلك مهاراتٍ تصميميةً وبحثيةً رائعةً في نفس الوقت هو ضربٌ من الحظ النادر. بالتأكيد من الممكن إيجاد مثل هذا الشخص لكن يبدو أن العثور عليه أصعب مما نتخيل. لا ندافع عن فكرة توحيد أدوار التصميم والبحث في UX، بل نعتقد أنه من المهم وجود تقاطعات عديدةٍ بين الدورين. من ناحيةٍ مثالية، ينبغي أن يكون هناك خطٌ وهميٌ بين مصممي وباحثي UX، بدلًا من السياج الفاصل الكبير الذي تراه في بعض المنظمات. على المصممين أن ينخرطوا في عملية البحث، وعلى الباحثين أن ينخرطوا في عملية التصميم. بل على فريق العمل كافة أن يخوض في مهام البحث والتصميم، في النهاية كل شخصٍ يتحمل جزءًا من المسؤولية لخلق تجربة رائعةٍ للمستخدمين. من المؤكد أن المصمم الرئيسي سيقود عملية التصميم، والباحث الرئيسي سيوجه عملية البحث، ولكن المسؤوليات والأعباء محملةٌ على الطرفين، بل هي بمجملها محملةٌ على الفريق بكامله، وهنا لا بد من عمل المصممين والباحثين ككيانٍ واحد. ترجمة وبتصرف للمقال Why designers should research and researchers should design لصاحبه Neil Turner

إذا كانت وظيفتك هي إنشاء تصميمات ويب عالية الجودة، عليك أن تدرك أنّ مساهمتك في العملية التسويقية مهمة جدًا، لذلك، فإن قضاء بعض الوقت لصقل معرفتك بتعلم مصطلحات التسويق المشهورة سوف يمنحك فهمًا أكثر لعملك من خلال سياق أكبر في التسويق. كميزة إضافية، من الممكن تعلم بعض المصطلحات التي تستطيع استخدامها في نقاشاتك مع المُشغلين والعملاء وإثارة إعجابهم بمعرفتك وتمكنك في هذا المجال. هذه بعض المصطلحات التي تحتاج للبدء بالتعرف عليها: اختبار أ/ب (A/B Testing) هو نسخة المسوق في المنهج العلمي. عندما تكون هناك مشكلة ما في تصميم موقع، بدلًا من إجراء تعديل شامل على التصميم، او تغيير المحتوى والخطوط أو تغيير الألوان بشكل كامل، يعمد المسوقون لاستخدام اختبار أ/ب كأداة لتجريب نُسخ بديلة للموقع وعادةً ما يتم تغيير عنصر واحد فقط. التحليلات (Analytics) يشير مصطلح التحليلات ببساطة الى بيانات كأرقام. معدل فتح البريد الإلكتروني، وعدد زائري مدونة ما، وعدد النقرات المدفوعة، وعدد المشاهدات وغيره من الأرقام، كل ما سبق يُمثّل مجموعة متنوعة من البيانات التي يُمكن استخلاصها من تحليلات عملية التسويق. B2B يُشير مصطلح B2B الى مفهوم "من قطاع أعمال إلى قطاع أعمال" ونقصد به هنا الطرفان المباشران لعملية التسويق، ويُمثل الطرفان قطاعي أعمال مختلفان بحيث يكون جمهور قطاع أعمال ما هو قطاع أعمال أخر. B2C يشير مصطلح B2C الى مفهوم "من قطاع أعمال إلى المستهلك" وفيه يستهدف قطاع أعمال ما جمهورًا من المستهلكين العاديين (ليسوا قطاع أعمال). معدل الارتداد (Bounce Rate) معدل الارتداد هو نسبة الزائرين الذين يغادرون موقعك بمجرد الدخول لصفحة واحدة. هذه الإحصائية يتم متابعتها لتحديد الجزء الذي يفقد فيه الزائر الاهتمام بالموقع. ستجد هنا دليل يُساعدك في تحسين معدل الارتداد لموقعك. هوية العلامة التجارية (Brand Identity) تتضمن هوية قطاع أعمال ما كل شيء يربطه الناس بالعلامة التجارية الخاصة بهذا القطاع. من الممكن أن تتضمن هوية قطاع الأعمال كل من اسم الشركة، شعار الشركة، ألوان العلامة التجارية، نوع خطوط الطباعة، الصور، محتوى صوتي وهكذا. شخصية المشتري (Buyer Persona) ينشئ قطاع الأعمال هوية جمهوره من خلال بناء ما يًسمى بـ "شخصية المشتري" وتُبنى معالم هذه الشخصية باستخدام المعلومات الجغرافية والسكانية أو تاريخ سلوك المستخدمين وغيره من المعلومات، وتمنح هذه الشخصية الجمهور القدرة على تشكيل محتواه، وتحديد جهود التسويق بالطريقة التي يرغبها. دعوة إلى الإجراء (Call-to-Action) كل صفحة في الموقع لابد أن يكون لها هدف واضح لجمهور الأعمال وكل جزء من التسويق لابد أن يكون مضمونًا. دعوة إلى الإجراء يمثل رسالة تقوم بتوجيه الزائر للقيام بالخطوة التالية لإكمال تحقيق الهدف المُراد منه. المحتوى (Content) المحتوى هو كل شيء يحتويه الموقع من نصوص، وصور، ومقاطع فيديو، ونداء إجراء، ومكونات القائمة الجانبية، والحركات والأيقونات ...إلخ. التحويل (Conversion) التحويل هو غاية التسويق وهدفه النهائي، ويتغير شكل التحويل من موقع لأخر، فالتحويل في مواقع العضويات يتحقق باشتراك الزائر في العضوية. في مواقع التجارة الإلكترونية، التحويل هو شراء سلعة أو منتج. للمدونات، التحويل هو الاشتراك في المدونة ومتابعة الخلاصات فيها. الاشتراك (Engagement) يشير مصطلح الاشتراك الى أي تفاعل بين قطاع أعمال ما والمستخدم النهائي لديه. يستخدم المسوقون هذا المصطلح للإشارة عادةً إلى التفاعل الحاصل في المنصات الاجتماعية والذي يحدث بأشكال متعددة مثل الإعجاب، المشاركة والتعليق. محتوى متجدد (Evergreen Content) يكون المحتوى متجددًا عندما لا يتقيد بوقت ما. وبكلمات أخرى، يبقى هذا المحتوى قيمًا وذو علاقة بغض النظر متى يقوم شخص رؤيته. الارتباك والمقاومة (Friction) تحدث حالة الارتباك ومقاومة التحويل في عملية التسويق عند إزعاج المستخدم وإرباكه أثناء محاولته إتمام إجراء معين. التسويق الضمني (Inbound Marketing) يتطلب التسويق الضمني تكتيكات خفية، وغالبًا يركز على التجربة وشرح الخبرة والمعرفة أكثر من محاولة البيع. الاصطياد (Jacking) الاصطياد (مثل الاختطاف) يحدث عند استخدام فكرة رائجة لصالح قطاع أعمال ولغرض خاص. من أمثلة ذلك هو استخدام newsjacking (تصيد الأخبار الشائعة)، و trendjacking (تصيد المواضيع الشائعة), و memejacking (تصيد النهفات والنكات الشائعة). مؤشر الأداء الأساسي (Key Performance Indicator) نعني بهذا المصطلح (يُختصر بـ KPI) قياس درجة النجاح في تحقيق هدف ما. الكلمة المفتاحية (Keyword) الكلمات المفتاحية هي ما يُركز عليه المسوقون في بناء كل جزء من المحتوى المكتوب. الكلمات المفتاحية هي أحد الطرق التي تُستخدم في تهيئة المحتوى ليناسب محركات البحث. صفحة الهبوط (Landing Page) كل صفحة في موقع ما هي صفحة هبوط. بلغة التسويق، وبشكل خاص، تُصمم صفحات الهبوط لتحقيق هدف خاص بالبيع. العميل المحتمل (Lead) يشير مصطلح Lead في لغة التسويق إلى العميل المحتمل. التسويق المؤتمت (Marketing Automation) التسويق المؤتمت هو عملية تشغيل "مهمة تسويقية" وتنظيمها باستخدام برمجية ما. التهيئة للأجهزة المحمولة (Mobile Optimization) التهيئة للأجهزة المحمولة هو المصطلح العام المستخدم عند تصميم موقع وأخذ الهاتف المحمول في الحسبان. التصميم المتجاوب وتقييم سرعة الصفحة هما مثالان للتهيئة للأجهزة المحمولة. تحسين الصفحة – الداخلي (On-page Optimization) يشير هذا المصطلح إلى أي نوع من التحسينات المتعلقة بعملية البحث التي يتم تطبيقها داخل صفحة ويب. يشمل ذلك استخدام التخطيط المتجاوب وتهيئة النص باستخدام البيانات الوصفية. تحسين الصفحة – الخارجي (Off-page Optimization) يشير هذا المصطلح إلى أي نوع من التحسينات المتعلقة بعملية البحث التي يتم تطبيقها خارج الموقع. الشبكات الاجتماعية وفرص الارتباط هما مثالان على ذلك. التسويق التقليدي (Outbound Marketing) هي العملية التقليدية للتسويق وتكتيكاتها محصورة بغرض البيع المباشر. نقطة الألم (Pain Point) كل حل أو منتج أو خدمة الهدف منه هو حل نقطة ألم للزبون. غالبًا يتم تعريفها عند بناء شخصية المشتري. التطويع (Repurposing) التطويع هو استخدام جزء من محتوى وتجديده كشيء اخر، فمثلًا، يقوم المسوقون بأخذ منشور مدونة ومناقشته خلال جلسة فيديو حية. التهيئة لمحركات البحث (Search Engine Optimization) يشير مصطلح التهيئة لمحركات البحث (السيو SEO) الى أي تكتيك تسويقي يهدف إلى تحسين ترتيب الموقع خلال ظهور نتائج البحث. تحسين الصفحة داخليا وخارجيا هما مثالان للسيو. الإثبات الاجتماعي (Social Proof) يشير الإثبات الاجتماعي إلى اعتماد المستهلك على شهادة الغير من المستخدمين لتحديد نظرته وموقفه تجاه علامة تجارية ما. الشهادات، مراجعات المنتج، التقييمات وصور منتجات الشركة المُصورة من قبل المستخدمين هي أمثلة على الإثبات الاجتماعي. القائد المُفكر (Thought Leader) يُنظر للقائد المُفكر كشخص مؤثر وخبير في مجال مُعين. من منظور تسويقي، يُشير المسوقون للمحتوى التسويقي الداخلي كمحتوى قائد مُفكر. تجربة المستخدم (User Experience) في التسويق، يُستخدم مصطلح تجربة المستخدم (UX) للإشارة غالبًا الى خبرة المستخدم في استخدام شيء ما. يوجد طريقة في تصميم الويب تُسمى تصميم UX والتي تُركز بشكل كبير على بناء كل إنش في الموقع بناءً على إعدادات المستخدمين، سلوكهم وأهدافهم. ترجمة -وبتصرّف- للمقال The Marketing Terms You Need to Know as a Web Designer لصاحبه Brenda Stokes Barron

أي عنوان سيقدّم معدّل تحويل أعلى في إعلان على موقع ما: "أدوات لاستعراض الشيفرة البرمجيّة" أم "استعراض الشيفرة البرمجية وأدواتها"؟ الأمر محيّر والاختيار والفصل بينهما لا يبدو سهلًا، ولذلك يتمّ دائمًا التقرير عبر الاختبار. حصل البديل "A" على 32 نقرة ("أدوات لاستعراض الشيفرة البرمجيّة") والبديل "B" على 19 نقرة ("استعراض الشيفرة البرمجية وأدواتها")، والسؤال ومربط الفرس: هل هذا يعني أن الأمر محسوم لصالح البديل "A"؟ أم يجب التروّي قليلًا قبل الاختيار؟ أو ربما يجب تجربة عنوان مختلف كليًا؟ ستشكل الإجابة فرقًا كبيرًا على أرض الواقع بلا شكّ، لذلك يجب الاعتماد على معايير واضحة عند الاختيار، فالانتظار طويلًا بين الاختبارات سيكون هدرًا للوقت، وعدم الانتظار بالقدر الكافي سيؤدي إلى عدم الوصول إلى نتائج صحيحة وحاسمة للفصل بين الاختبارين، وبالتالي قد يتمّ اختيار البديل الخاطئ بدلًا من الاختيار الأنسب، والذي قد لا يكون أصلًا من البدائل الحاليّة. عادةً ما تكون الأمثولة treatment التي على شكل إحصائية صعبة الحساب وتشكّل معضلة لدى البعض، ولكن سيتمّ في هذا المقال التسهيل قدر الإمكان، وذلك باستخدام معادلة بسيطة للغاية، والتي من شأنها أن تُحدّد نجاعة اختبار A/B. سيتمّ الشرح بالاستعانة بهمستر اسمه "هَمي": اختار "هَمي" في الفيديو السابق الطعام العضوي (الطبيعي) ثماني مرّات واختار الطعام غير الطبيعي conventional أربع مرّات، يُشبه هذا الاختبار إلى حدّ كبير اختبار A/B. قد يعتقد البعض أن الطعام "العضوي" هو الرابح قطعًا، حيث أن "هَمي" اختاره ضعف عدد مرات اختياره للطعام غير الطبيعي، ولكن هذا التوقّع غير صحيح وبعيد كل البعد عن الدقّة، فالأرقام لها قول مختلف في الأمر. يعود هذا الأمر إلى طبيعة البشر والمعروفة بسوء التخمين والتقدير لهذا النوع من الأمور، فعلى سبيل المثال، يهاب معظم الأشخاص من التعرّض إلى حادث طائرة أكثر مما تخاف من التعرّض إلى حادث سيارة، على الرغم من أن التعرّض إلى حادث السيارة محتمل أكثر بست مرات. يمكن القول إن الطبيعة البشرية لا تحسن الحساب في معظم الأحيان، وعليه كيف يمكن الوصول إلى نتائج حاسمة لا تجعل للشك مجالًا؟ الخطوات هي كالتالي: تمثيل "عدد المحاولات الكلّي" بالرمز N. بالنسبة لـِ "هَمي" سيكون: 8+4 = 12. بالنسبة لمثال الإعلان سيكون: 32+19 = 51. تمثيل "نصف الفرق بين الرابح والخاسر" بالرمز D. بالنسبة لـِ "هَمي" سيكون (8-4) / 2 = 2. بالنسبة للإعلان سيكون (32-19) / 2 = 6.5. نتائج الاختبار الإحصائي ستكون حاسمة (ذو مدلول) إن كان مربّع D أكبر من N. بالنسبة لـِ "هَمي" D**2 هو 4 أصغر من 12، وعليه فإن النتيجة غير حاسمة. بالنسبة للإعلان فإن D**2 هو 42.25 وهذه القيمة أصغر من 51، وعليه فإن النتيجة غير حاسمة أيضًا. يُستنتج مما سبق أن نتيجة الإعلان لم تكن حاسمة، ولكن في حال استمرار الاختبار لفترة من الوقت، سيكون في اليوم التالي هناك 30 نقرة إضافية على البديل "A" لتكون المحصلة 62 و19 نقرة إضافية للبديل "B" لتصبح المحصلة 40، وبإعادة الحساب: N = 62+40 = 102 D = (62-40) / 2 = 11 D**2 = 121 وعليه فإن 121 أكبر من 102، وبالتالي الفرق هو حاسم وذو مدلول. لا يتمّ الحصول على نتيجة ذو مدلول (حاسمة) دائمًا رغم الاستمرار في الاختبار، عندها يجب إدراك أنه لا فائدة من هذا الاختبار والذي لا يقدّم ولا يؤخّر، حيثُ أن البدائل variants التي تمّ اختيارها ليست ذات فرق جوهري للمستخدم، وهذا يعني وجوب البحث عن بدائل جديدة. بعد تطبيق المعادلة على أمثلة من الواقع العملي، سيتمّ ملاحظة أنه عندما تكون N صغيرة القيمة سيكون من الصعب -إن لم نقل من المستحيل- الوصول إلى نتيجة حاسمة إحصائيًّا، فعلى سبيل المثال، ليكن لدينا إعلان بست نقرات وآخر بنقرة واحدة، وبالتالي فإن: N = 7 D = 2.5 D**2 = 6.25 مازال الاختبار غير حاسم، على الرغم من أن "A" تغلّبت على "B" وبنتيجة ستة إلى واحد، وعليه فإن فمن الضروري الانتظار قبل التقرير والفصل، والأرقام هي دائمًا الحكم الأوّل والأخير. ولكن ماذا عن السواد الأعظم من المستخدمين والذين لم ينقروا على أيٍ من الإعلانين؟ طبعًا المقصود بذلك هو "إعلان الظهور ad impressions" والذي لم يؤدي إلى عملية النقر، هل يجب أن تؤخذ بالحسبان وتُدرج في الإحصائية؟ لا يجب أن يُدرج إعلان الظهور في الحقيقة، فهو يُعتبر غير صالح (محاولات لا قيمة لها)، ولمعرفة السبب في ذلك، يمكن الاستعانة بتجربة "هَمي" مرّة أخرى، حيث أن الفيديو السابق قد تمّ تحريره طبعًا، ولعدد كبير من المحاولات "هَمي" لم يختر أي شيء، ولا يوجد أي مدلول في ذلك، بمعنى أنه لا يمكن القول إن "هَمي" قد أعجبه الطعام أم لم يعجبه في هذه الحالة. ولأن "نسبة النقر click-through rate" تعتمد على عدد النقرات clicks وعدد مرّات الظهور impressions، فلا يجب استخدامها في الحصول على نتيجة حاسمة إحصائيًّا، بل فقط يجب استخدام عدد النقرات فقط في المعادلة. أرجو أن تساهم هذه المعادلة في تقديم نتائج مرضية على مستوى الاختيار والفصل بين الإعلان الأنسب، فهي بسيطة بشكل كافي ولا حجة في تجاهلها، خاصّة وأن تقدير الأمور اعتباطيًّا قد يقود إلى عواقب وخيمة، لذلك من الحكمة الاعتماد على الأرقام في الوصول إلى نتائج تمثّل الواقع. بالنسبة للرياضيات والحساب وللراغبين في معرفة التفاصيل: إنّ الاختبار الإحصائي المستخدم هو Pearson’s chi-square، حيث فرضية العدم null-hypothesis يعود إلى اختبار A/B على المصادفة دون أي شيء آخر، ويعرّف قانون "كاي" بالصيغة التّالية (حيث أن m هو عدد الاحتمالات الممكنة ويمثّل Oi عدد الرصد في المحصّلة #i; ويمثّل Ei العدد المتوقّع للنتائج في المحصّلة #i): ستكون قيمة m = 2 باعتبار وجود احتمالين فقط مع اختبار A/B، ومن عملية عشوائية 50/50، فإن القيم المتوقعة هي Ei = n/2 حيث أن n = O1 + O2، وبالأخذ بالحسبان أن A = O1 ستكون القيمة الأكبر وأن B = O2 ستكون القيمة الأصغر من القيم المحصّلة من المراقبة observed، ستكون المعادلة (غير المبسّطة) هي بعد التعويض: مربّع الفرق بين A و n/2 هو نفسه بين B و n/2 (لأن A+B = n)، ولذلك يمكن استبدالهما بالمتغيّر الجديد D**2 (مربّع D). تعريف D في المعادلة A-B)/2) يأتي عبر استبدال n = A+B إلى D = A - n/2، وبالتالي فإن سيكون لدينا الصيغة المبسّطة التّالية: أصبح من الممكن الآن حساب الإحصاء chi-square، ولكن يجب الرجوع إلى توزيع chi-square لتحديد المدلول الإحصائي statistical significance، وبالتحديد: ما هي احتمالية أن حدوث هذه النتيجة عن طريق الصدّفة فقط؟ إن العودة إلى التوزيع وبالقيمة 1 من درجة الحرية degree of freedom (تعتمد B على A ولذلك يوجد درجة حرية واحدة)، ونحن بحاجة إلى تخطي القيمة 3.8 من أجل الحصول على ثقة بنسبة 95% و 6.6 من أجل 99% ثقة في فعالية الإعلان، وبناءً على الخبرة اخترت القيمة 4 كعتبة حرجة، وبعد الحلّ ومن أجل مربّع D: وعليه فقط تمّ البرهان وما هو مطلوب إثباته. ملاحظة أخيرة، إن كان مربّع D أكبر من ضعف n، فإن معدّل الثقة في هذه الحالة قد تجاوز 99% تمامًا. ترجمة وبتصرّف للمقال Easy statistics for AdWords A/B testing, and hamsters لصاحبه Jason Cohen.

إنّ من أكثر ما يجعل العمل مُمتعا هو أن تكون مُتحمسا له، ولكنه قد يصبح أكثر ما يضرنا إذا أصبح هذا الحماس بديلا عن المعرفة وأصبح طريقنا مليئًا بالفرضيات غير المختبرة والرؤية غير الواضحة، ماذا لو كانت أيضا بيئة العمل تؤمن بنظرية العبقري المبدع الذي يعلم كل شيء وتطلب من مصمميها ومطوريها بأن يكونوا هذا العبقري المثالي الذي يستطيع لوحده أن يؤدي وظائفهُ ويتقنها بأكمل وجه، مما يجعلها بيئة عمل غير واقعية تجعل من قول كلمة "لا أعرف" شيئا مستحيلًا. إن النتيجة النهائية لمثل هذه البيئات هو منتجات منفصلة عن الواقع ولا تُلبّي احتياجات ورغبات المستخدمين الحقيقية وبالتالي تصبح منتجات فاشلة لا يُوجد لها أيّ حصة من السوق. إداراك الحاجات والرغبات الحقيقية للناس هو الشّرط الأساسي للتصميم وكما يقول خبراء هذا المجال أن التصميم المتمحور على المستخدم ­User-Centered Design هو جوهر هذا العلم وأساسه. لذلك يجب ألا ننحاز لأنفسنا أو لعملنا أو مهما كانت انحيازاتنا في بناء منتجاتنا ونجعل تركيزنا هو المستخدم النّهائي. هذا وكيف إن كانت المشكلة الرئيسية عند المصممين والمطورين أثناء عملهم هو أنهم يبنون الأشياء لأنفسهم، حيث أنهم متعلقون في الأمور التقنية أكثر من غيرهم من الناس كما قال ذلك الكاتب الأمريكي Michael E. Gerber في كتابه أسطورة الريادي  The E-Myth. هنا تظهر الحاجة الأساسية في فهم حاجات المستخدمين ورغباتهم، وحتى نحقّق ذلك لا بد لنا من عملية بحث مُمَنهجة لنتوصّل إلى نتائج يتم معالجتها، ونبني في ما بعد على أساسها منتجاتنا وبرامجنا. ما هو البحثفي البداية أرجو ألا تفزع من كلمة "بحث" وتنظر إليها على أنها تحتاج إلى وقت ودراسة وأموال حتى يكتمل البحث، فالبحث ببساطة هو تحقيق منظم للوصول إلى المعلومة. أنت تريد أن تعرف أكثر في موضوع معين لذلك أنت تتبع منهجاً معين لزيادة معرفتك في هذا الموضوع، هذا المنهج الذي ستتبعه لزيادة معرفتك يعتمد على من أنت وظيفيًا ومالذي تريد أن تعرفه. واطمئّن، فنوعية البحث المستخدمة هنا ليست بحث أساسي Pure Research معقّدة بمعنى أنه لن تكون مهمتك أن تعرف كيف تتم عملية التذكر في أعصاب الدماغ. في مجالنا هذا يتم الاستعانة بنوعين من الأبحاث للحصول إلى المعلومات هما: البحث الكمّي والبحث النّوعي، كما أن هذان البحثان أيضا هما البحثان اللذان يتم استعمالهما في إنشاء الشركات الناشئة، وهذا لاشتراك هذين المجالين في أنّهما يريدان بناء منتج يريده الناس ويحتاجونه. البحث الكمّي والنّوعيالبحث الكمّي Quantitative Research بحث منهجي للظواهر الاجتماعية من خلال الأساليب الإحصائية، الرياضية أو الحسابية، ويتم الاعتماد على البيانات بشكل رئيسي حتى يتم قياسها رقميا وبالتالي عند بداية فكرة جديدة لا نلجأ إليه لعدم وجود بيانات متعلقة بالمستخدمين وإنما يتم الاستعانة به بعد إصدار النسخة الأولية أو الحد الأدنى من المنتج القاعدي (Minimum Viable Product). البحث النّوعي Qualitative Research بحث يهدف إلى التعمق في فهم سلو الإنسان والأسباب التي دفعته للقيام بهذا السلوك وتكون عينته قليلة وطبيعة أسئلته بكيف، لماذا، وبأي طريقة. توجد طرق كثيرة لجمع البيانات منها المقابلات الفردية والجماعية، الملاحظة ومجموعات التركيز. يعتمد على فهم الناس بتعمق ولعدم وجود أي بيانات تتعلق بالمستخدمين عند بداية المشروع فعادة ما يتم البدء به. تكون نتائجه عبارة عن فرضيات يتم التحقق منها فيما بعد عن طريق البحث الكمي،  كما يتم استخدامه أيضا عند بناء خصائص جديدة للمنتج أو عند وجود غموض في نتائج البحث الكمي. ماذا أريد من البحثالبحث هو أداة بمثابة ميكروسكوب تستطيع من خلالها النظر إلى الصورة كاملة مما تسهل عملية تخطيطنا وإدارتنا. وعند بناء المنتجات يتعين علينا القيام بأربعة بحوث. بحث المنظمة وأصحاب المَصلحةفي هذا البحث تكون الفئة المستهدفة في البحث هم أصحاب المصلحة وفريق العمل المُشترِك معك في بناء المنتج، ويكون هدفه الإجابة عن الأسئلة التالية: مالذي يريد تحقيقه صاحب المنتج وأصحاب العمل، من هم، وما هي أهدافهم؟ماهي التنكولوجيا المستخدمة في بناء المنتج، وما إمكانياتنا وقدراتنا؟بحث المستخدمهو البحث المتعلق بفهم المستخدمين وسلوكهم، ويكون هدفه الإجابه عن هذه الأسئلة: من سيستخدم المنتج، ما مميزاتهم، أعمارهم، جنسهم، هواياتهم، وما سلوكهم الحالي في استخدامهم للمنتج أو لحلول مشابهة؟مالذي يريد تحقيقه المستخدم من استخدامه للمنتج؟وفي حال كان المنتج تطويرًا لنسخة سابقة: ما هي الخصائص والوظائف الحالية أو التعقيدات التي تواجه المستخدم؟ما هي الخصائص والوظائف التي سوف يجدها المستخدم جيدة لو تم إضافتها؟البحث التقييّميإذا قمت ببناء منتجك أو برنامجك بناء على حاجات المستخدم فلا بد لك من التأكد من ذلك والتأكد ما إذا كان منتجك جاهزاً لإصداره للسوق أم لا، هل هو سهل الاستخدام وما هي عيوبه؟ هنا الهدف الرئيسي من البحث التقييمي. بحث المنافسينمن هم منافسيك؟ يجب عليك أن تعرفهم وتقيمهم وتعرف ما هي مُميزّاتهم، خصائصهم وما هو الجديد الذي ستضيفه في منتجك بعد معرفتك لمنافسينك. مع العلم  بأن أصعب منتج منافس لك هو الذي يستخدمه الآن زبائنك المحتملين في المستقبل كما أن الناس كسولون بطبعهم ويكرهون تغيير عاداتهم فلذلك يجب عليك إضافة شيء مميز ورائع في منتجك يحبونه أكثر من كرهم لتغيير هذه العادة. التكلم بتفصيل عن كل هذه البحوث هو خارج نطاقنا هنا لكن سنكتفي بأهمهم وهو بحث المستخدم. بحث المستخدمإذا استطعنا أن نحدد إجابة للسؤال العملي المتعلق بالمنظمة أو الشركة وهو "ما الذي نريده من بناء هذا المنتج" نبدأ بعدها بالطرف الآخر من المعادلة وهو المستخدم وهدفنا كما قلنا أن نعرف ما الذي يريده المستخدمون من هذا المنتج. قد يبدو هذا السؤال بسيطاً وبديهيا لكن أكثر الأسئلة عمقا هي الأسئلة البديهيه. الإثنُوجرَافِي Ethnographyالبعض يسمي البحث النّوعي بالإثنوجرافي وهدفه فهم وتوثيق نشاطات، عقليات وسلوكيات مجموعة من الناس بعد أن يراها الملاحظ أو المراقب ويتم بطرق كثيرة أهمها المقابلة والاستفسار السياقي. المقابلة Interviewلقد ابتدأ العمل، استعد لمقابلة الناس المستهدفة ورتب لذلك وتذكر بأننا نريد أن نفهم السلوك فمثلا إذا كان كان منتجك هو بناء موقع إلكتروني لبيع تذاكر السينما فسنقوم باستهداف رواد السينما وليس محبي الأفلام. الدليلحضر دليل المقابلات بحيث يكون هو المرجع لجميع المقابلات، ومن أهم ما يجب أن يحتويه هذا المرجع هو: مختصر يوضح هدف الدراسة.الديموغرافيا (Demographics) وهي تختلف على اختلاف الدراسة وأهم ما تحتويه الاسم، العمر، الجنس، البلد، الوظيفة والتعليم.مجموعة من الأسئلة لتكسير الحواجز الجليدية في المقابلة، أنت لا تريد فقط أن تنتهي من مقابلتك أنت تريد أن تحصل على أصدق المعلومات لذلك لا بد من أن يخلو الجو من التوتر وتسود الراحة في المكان.الأسئلة الرئيسية في المقابلة وهي الأسئلة المتعلقة بموضوع الدراسة. تجنب أن تسأل أسئلة مثل "ما هو الحل برأيك" وذلك لأن المستخدم ليس مُصمما وغايته ببساطة أن يستخدم المنتج النهائي بسهولة ومتعة.بنية المقابلة (مع مثال توضيحي)المقدمةابدأ بتعريف نفسك مع ابتسامة وعبر عن امتنانك وشكرك له وقدر أنه يعطيك من وقته من أجل هذه المقابلة، خذ معلوماته الشخصية بطريقة مرنة وابدأ بتلطيف الجو في المقابلة واسأله أسئلة في خارج إطار الموضوع، عن تجربته وماذا يحب وما رأيه في موضوع معين بناء على سياق المقابلة وذلك لتكسير الحواجز قبل أن تبدأ في الأسئلة الأساسية في المرحلة التي بعدها. الرئيسيةهنا جوهر المقابلة، ستبدأ بالأسئلة الرئيسية، مثل: أخبرني عن أسبوعك بشكل عام؟ما مدى اهتمامك بالسينما؟هل تذهب للسينما في العطل الأسبوعية، أم لا يوجد وقت محدد؟كيف تتابع آخر الأفلام، وما نوعية الأفلام التي تحبها؟كيف تشتري تذاكرك، هل لديك مشكلة في الدفع عبر الإنترنت؟كم تقضي من الوقت متصلا بالإنترنت، وما هي وسيلة اتصالك به؟كيف تذهب للسينما، مع زوجتك وأولادك أو لوحدك؟ما هي المواقع التي تزورها في العادة؟وكما قلنا ركز على أن تكون الإجابات واقعية وأعر انتباهك لأي إجابة غريبة واستفهم عنها، حاول أن تكون مستمعا جيداً وتجنب التحدث عن نفسك كثيراً. كما أفضل أن تقوم بتدوين الإجابات بعد المقابلة مباشرة وذلك لتجنب تأثير هورثون (وهو أن سلوك الشخص قد يتغير إذا علم أنه مراقب وسُيقدم  السلوك المتوقع تقديمه). الخاتمةاعمل نقلة لطيفة لإنهاء المقابلة واختم مثلا بقولك "انتهيت من الأسئلة، ألديك أي شيء لتضيفه أو أي تعليق بخصوص ما ناقشناه؟". الاستفسار السياقي 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