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

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

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

1. اختبار أ/ب (A/B Test)

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

2. تخطيط المتشابهات (Affinity Diagramming)

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

3. التحليل (Analysis)

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

4. الإطلاق التجريبي (Beta Launch)

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

5. تصنيف البطاقات (Card Sorting)

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

6. نظرية الألوان (Color Theory)

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

7. تحليل المنافسين (Competitor Analysis)

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

8. التحليل الموازن (Comparative Analysis)

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

9. مراجعة المحتوى (Content Audit)

يُفهرَس كل المحتوى الحالي أثناء مرحلة المراجعة والتقييم الأولية، ويُقيَّم من حيث قابليته المستمرة للنشر.

10. خطة المحتوى (Content Strategy)

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

11. الاستعلام السياقي (Contextual Enquiry)

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

12. دراسة اليوميّة (Diary Study)

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

13. تخطيط التجربة (Experience Architecture)

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

14. المراجعة الإرشادية (Heuristic Review)

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

15. التصميم التفاعلي (Interactive Design)

هو شكل من أشكال تصميم الويب، يركز على إنشاء صلة قيّمة بين الزائر والموقع.

16. التصميم التكراري (Iterative Design)

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

17. لوحة المزاج العام (Mood Board)

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

18. الشخصيات (Personas)

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

19. الكشف التصاعدي (Progressive Disclosure)

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

20. النموذج الأولي (Prototype)

النموذج الأولي هو رسم تخطيطي عام للموقع، ولا يحتوي النموذج الأولي ذو المستوى المنخفض –low level prototype- عادة إلا على الهيكل الأساسي مما سيبدو عليه الموقع، أما النماذج عالية المستوى فتحتوي تفاصيل أكثر، لكنها لا ترقى بحال من الأحوال إلى نموذج كامل بالحجم الطبيعي للموقع –full website mockup-.

21. البحث النوعي (Qualitative Research)

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

22. البحث الكَمّي (Quantitative Research)

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

23. السيناريو (Scenario)

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

24. التصور الرسومي (Storyboard)

قد يكون التصور الرسومي أو القصصي في تجربة المستخدم رسومات بصرية لسيناريو –إذ تترجم Storyboard إلى "القصة المصورة"- أو حتى تخطيطات سريعة وعامة للهيئة التي يتصورها المصمم للموقع.

25. عناصر واجهة الاستخدام (UI Elements)

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

26. سهولة الاستخدام (Usability)

هي مقدار سهولة التفاعل مع الموقع والتنقل فيه.

27. التصميم المرتكز حول المستخدم (User-centered Design)

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

28. رحلة المستخدم (User Journey)

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

29. بحث المستخدم (User Research)

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

30. اختبار المستخدم (User Test)

الفرق الجوهري بين اختبار المستخدم والاستعلام السياقي هو أن المستخدمين هنا يُراقَبون بشكل مباشر وشخصي بينما يتفاعلون مع الموقع.

31. عناصر تجربة المستخدم (UX Assets)

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

32. الإطارات السلكية (Wire Frames)

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

ترجمة –بتصرف- لمقال Thirty Common UX Terms Every Web Designer Should Know لصاحبته Brenda Stokes Barron

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

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

منهجية التدافع (Scrum Methodology)

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

ويقوم فريق التدافع (Scrum Team) بكتابة الشيفرة البرمجية واختبار أداء المزايا خلال المرحلة الأولى التي تُسمّى "First Agile Sprint”، وهي إطار زمني قصير من العمل المكثّف.

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

ثم يعرضوا ما أنجزوه في نهاية المرحلة على المالكين (حملة الأسهم [stakeholders]) ليتلقّوا منهم النقد والملاحظات، فيخططوا للمرحلة التالية من التطوير وما سيتغير فيها أو يُراجَع على ضوء هذه المراجعات.

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

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

الانتقال إلى أنماط عمل تجربة المستخدم المرنة

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

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

تصميم تجربة المستخدم القِطَعية للتخطيط المرن (Chunk UX Design)

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

ويأتي دور التصميم القِطَعي (Chunk design) هنا في أنه يقسّم العمل إلى مهام أصغر كي تعيد تركيزك إلى البحث المرتكز حول المستخدم، فتحدد أولًا هدفك ثم تخطط أنشطة تجربة الاستخدام التي تدعم هذا الهدف، ثم بعد ذلك تقسّم تلك الأنشطة إلى مهام أصغر، وتستخدم بعدها برنامج يعتمد النظام المرن-agile أو بطاقات لاصقة لإنشاء قصص المستخدم- user stories.

ويجب أن تقرر الترتيب المناسب لإنجاز تلك المهام ومن سيكون مسؤولًا عن كل واحدة، ويجب أن يكون كل قرار مرتبطًا بإحدى قصص المستخدم- user story.

العمل مثل جوجل

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

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

تفصيل المشروع (Unpack the Project)

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

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

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

إن نمط العمل المرن يبدأ بتوضيح رؤيتك من البداية، حتى لو لم تتبع أو تستخدم تسلسل جوجل في مشاريعها، فيقدّم المصممون رؤيتهم المبدئية للفريق، سواء عبر رسومات سريعة "Sketches” أو عبر تخطيط لرحلة المستخدم "cutomer journey mapping” داخل الموقع أو المنتج بشكل عام.

صياغة مسوّدات للحلول (Sketching Solutions)

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

اتخاذ القرارات (Making decisions)

اسرد العوامل المهمة لك، مثل ميزانيتك، والعوائق التقنية، ومدخلات المستخدمين، ثم راجع الحلول المحتملة لتقلل هذه الحلول إلى عدد محدود وفقًا لما تقتضيه العوامل التي لديك. أيضًا، أنشئ لوحات قصصية "Storyboards” لأفضل الحلول التي جمعتها، واستخدم حائط تصميم "Design Wall” -حائط أو لوحة تعلق عليها الحلول- لتعرض الحلول التي لديك، ثم أعد تقييمها من حيث تركيز كل منها على المستخدم.

إنشاء نماذج أولية (Creating Prototypes)

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

اختبار التصاميم (Testing Designs)

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

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

تعقّب الوقت وضبطه (Time Tracking and Time Boxing)

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

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

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

العمل الجماعي هو الذي يوجه مخطط العمل

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

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

وإن للمصممين أغلب المدخلات في المزايا التقنية الضرورية للمشروع "Backlog#Product_backlog)"، وكذلك التحليل والتطوير والاختبار، ويكون الوقت مناسبًا لمساهمة المصممين حين يبدأ مطوِّر في العمل على التفاصيل، ويمكن استخدام أدوات إدارة مشاريع مثل basecamp ومنصات التصميم مثل UXPin وتطبيق invision لتسهيل عملية التواصل بين المصممين والمطورين.

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

ترجمة -بتصرف- لمقال How to Create an Agile UX Workflow لصاحبه Stephen Moyers

هل تواجه شركتك بعض المشاكل في تحديد مدى أهمية تجربة المستخدم؟ لا تقلق، فقد قام "جوزيف توث"، كبير مستشاري واجهة المستخدم أو تجربة المستخدم UX/UI في شركة فايزر "Pfizer" بإجمال بعض أقوى الإحصائيات المتعلقة بتجربة المستخدم.

1- التمرير المستمر والذي هو خاصية تحميل المحتوى كلما مررت بالصفحة لأسفل بإمكانه أن يخفض عدد الزوار لموقعك، فنسبة الزوار لموقع Time.com كانت قد انخفضت بمقدار 15% بعد أن قاموا باستخدام خاصية التمرير المستمر. المصدر

2- استثمار بقيمة 10 آلاف دولار في الشركات المتخصصة بالتصميم قد يعود خلال 10 سنوات بربح بنسبة 228% أكثر من نفس قيمة الاستثمار في البورصة الأمريكية "S&P". المصدر

3- زادت إيرادات موقع ESPN.com بقيمة 35% بعد أن استمعوا لجمهورهم وللاقتراحات المتعلقة بتصميم صفحتهم الرئيسية. المصدر

4- اختيار درجة معينة من اللون الأزرق والتخلي عن بعض الدرجات الأخرى نتج في زيادة الأرباح السنوية بمقدار 80 مليون دولار لشركة Bing. المصدر

5- قيمة الربح العائدة على كل 1 دولار يتم إنفاقه على التسويق عبر البريد الإلكتروني هي بمعدل 44.25 دولار. المصدر

6- 88% من المستهلكين عبر الإنترنت قد لا يعودون لزيارة موقعًا إلكترونيًا ما بعد تجربة سيئة. المصدر

7- المواقع التي تستغرق وقتًا أطول في التحميل تكبد تجار التجزئة عبر الإنترنت خسائر تقدر بـ 2.5 مليار دولار سنوياً. المصدر

8- الحكم على مصداقية الموقع تعتمد بنسبة 75% على المظهر الكلي للموقع والكماليات. المصدر

9- الانطباع الأول عن الموقع تعتمد بنسبة 94% على التصميم. المصدر

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

11- في تقييم لـ200 موقعًا إلكترونيًا خاصًا بشركات صغيرة، وُجد بأن 70% منها لم تعرض حثًا واضحًا للتفاعل على صفحاتها الرئيسية كالعروض الخاصة والنشرات الإخبارية عبر البريد الإلكتروني والأدلة الإرشادية والنسخ التجريبية والأدوات التفاعلية. المصدر

12- 90% من الأشخاص يستخدمون شاشات متعددة بشكل متعاقب. المصدر

13- هنالك فرصة بأن تتسلق قمة إيفرست 279.64 مرة على أن تضغط على لافتة إعلانية! المصدر

ترجمة -بتصرف- للمقال ‎13 Impressive statistics on user experience لصاحبه: Jozef Toth

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

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

ثم اجتمع بعض المطورين في فبراير من 2001 بعد أن سئموا هذا الأسلوب وخرجوا بشيء أفضل، وهو أسلوب Agile لتطوير البرمجيات -حيث agile تعني مرن-، وكتبوا بيانًا يضعون فيه المبادئ العامة لهذا المنظور الجديد من أجل نشره في وسط المبرمجين:

اقتباس

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

• الأفراد والتفاعلات عوضًا عن العمليات والأدوات.

• البرمجيات التي تعمل عوضًا عن التوثيقات المفصّلة.

• تعاون المستهلكين عوضًا عن التفاوض على العقود.

• التجاوب مع التغيير عوضًا عن الالتزام بالخطط الأولية.

ونعلم أن هناك قيمة في العناصر على اليمين، لكننا نقدر العناصر على اليسار أكثر.

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

التعاون عوضًا عن العمل في صوامع

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

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

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

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

النماذج الأولية التفاعلية، عوضًا عن التوثيق الثابت

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

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

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

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

يمكنك إنشاء نموذجًا أوليًا بسرعة وبسهولة باستخدام برنامج مثل Axure.

التصميم للمستخدمين عوضًا عن التصميم لحملة الأسهم

إن مصطلح UX يختصر كلمتي User eXperience واللتان تترجمان إلى "تجربة المستخدم"، لطالما تساءلت لماذا كانت X وليس E من الكلمة الثانية، لعلها تبدو أجمل هكذا، المهم أني أريدك أن تذكّر نفسك بمعنى هذا الاختصار في كل مرة يأتيك أحد حملة الأسهم ليحاول التحكم في مسار أو شكل تصميم ما.

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

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

ما يحتاجه المستخدمون، عوضًا عما يريدونه

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

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

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

ما يفعله المستخدمون عوضًا عما يقولونه

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

أنا: كيف وجدت هذا المنتج من حيث سهولة استخدامه؟

المشارِك: أوه، لقد كان سهلًا، لم أعاني أية مشكلة في استخدامه.

أنا: حقًا؟ لم تختبر أية مشكلة؟

المشارِك: لا.

أنا: فماذا عن المهام الثلاثة التي لم تستطع إتمامها، أو تلك النافذة التي قلتَ أنَّ من صممها غبي؟

المشارِك: آه صحيح! .. لكن بخلاف ذلك، لقد وجدته سهل الاستخدام.

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

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

ملاحظات المستخدمين، عوضًا عن الافتراضات

لقد كتبت من قبل "لماذا يجب أن يقوم المصممون بدراسات، ولماذا يجب أن يصمم الباحثون"، فدراسة المستخدم (User Research) وملاحظات المستخدم (User Insights) التي تخرج من دراسة جيدة للمستخدمين هي حجر الزاوية في تصميم تجربة استخدام ناجحة.

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

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

الواقعية عوضًا عن مثالية التصميم المرتكز حول المستخدم

لقد قدّمت عرضًا قبل بضع سنين بعنوان يقول "كيف تخلصت من عادة التصميم حول المستخدم وتعلمت أن أحب التصميم الرشيق لتجربة الاستخدام" في UX Cambridge. وقد تحدثت حول تجربتي مع التصميم المرتكز حول المستخدم (User-Centered Design) وكيف بدأت في اعتماد عقيدة جديدة هي التصميم الرشيق لتجربة المستخدم.

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

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

وصحيح أني معجب بالتصميم الرشيق لتجربة المستخدم لكني أريده أن يكون عمليًا فهذا أهم عندي، وقد ذكرت في كلمتي التي ألقيْتها مثلًا عن صيغة mp3، فالشخص المثالي هنا سيكون ذلك الذي لن يتردد في شراء نظام Hi-Fi رغم ثمنه الباهظ، وستجده يتحدث عن مساوئ مشغلات mp3، وكيف أن جودة الصوت منها رديئة وباهتة وصناعية.

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

ألن يكون أفضل أن يكون لديك صيغة تعطيك صوتًا أفضل وأغنى بالتفاصيل والطبقات؟ بالتأكيد! لكن من المنظور العملي (pragmatic)، فإن الجودة التي تعطيها صيغة mp3 ممتازة في 99% من الحالات.

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

خاتمة

ها قد انتهيت من بياني لتجربة المستخدم، ألخصه لك فيما يلي:

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

وأنا أريد الآن أن أسمع منك، فماذا ترى؟ وما هي القواعد التي تريدها في "بيانك" الخاص بك؟

ملاحظة: “ … وأعلم أن هناك قيمة في العناصر على اليمين، لكني أقدّر العناصر على اليسار أكثر".

ترجمة -بتصرف- لمقال A UX manifesto لصاحبه Neil Turner

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

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

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

Material UI

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

Ionic Material

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

Materialize

هذا إطار متجاوب بالكامل، يستند إلى دليل تصميم المواد (material design) من جوجل. ويوفر مجموعة من مكونات CSS مثل grid، و table، و color، و shadow وغيرها. علاوةً على ذلك، يستخدم أيضًا مكونات الـ JavaScript مثل القائمة المنسدلة، ومربعات الحوار، واختلاف الموضع، وعلامات التبويب، والانتقال وغيرها.

Leaf

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

Angular Material

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

MUI

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

Bootstrap Material Design

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

Lum X

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

Polymer

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

Paper

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

الخلاصة

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

ترجمة – وبتصرف – للمقال Best Material Design Frameworks for Modern UX/UI Web Design لصاحبه Tom Hardy

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

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

1. Mason

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

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

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

يتم تشغيل Mason عند الحاجة دون أن يؤثر تشغيله على سرعة موقعك، وستظل الميزات التي تنشئها دائمًا موثوقة وقوية وقابلة للتوسيع والتطوير.

2. UXPin

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

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

إبدأ بفكرة إثبات مفهوم الإطارات الشبكية، ثم تدرج في العمل نحو النماذج منخفضة الدقة إلى النماذج عالية الدقة. أنجز كل شيء آنيًّا دون الحاجة إلى ترك ومغادرة UXPin. تعد أداة تصميم واجهة وتجربة المستخدم UX/UI المعتمدة على السحابة أداةً ثابتةً ومفضلة لدى شركات 500 Fortune كشركة PayPal و Microsoft وذلك بفضل امكانياتها الهائلة في تصميم النماذج الأولية. فهي تتضمن العديد من الخصائص مثل: حالات التفاعل، والشرط المنطقي، والمتغيرات، ومكونات الشيفرة، وتعابير JavaScript وغيرها. ناهيك عن الطريقة التي تعزز وتبسط بها تعاون الفريق.

3. Interfacer

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

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

4. Webflow

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

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

لماذا من المهم أن تختار واحدة أو أكثر من بين تلك الأدوات أو الموارد؟

التصميم الجيد لتجربة المستخدم UX يزيد من نسبة العثور على الموقع واستعماله وتفوقه على منافسيه.

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

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

أليس من الرائع أن تكون مالكاً لذلك الموقع؟

التركيز على تصميم تجربة المستخدم UX يمكن أن يزيد من إخلاص العملاء للعلامة التجارية.

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

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

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

خاتمة

ما الذي تحاول تحقيقه؟

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

الأدوات والخيارات التي ذكرناها آنفًا توفر وتتيح لك ذلك بالإضافة إلى تحسين تصميم واجهة وتجربة المستخدم UI/UX. يمكنك اختيار واحدة منها، أو جميعها، ومن المؤكد أنك ستصل إلى نتائج جيدة باستعمالها.

ترجمة -وبتصرف- للمقال Need help choosing a UX/UI tool? Check out these options

ربّما تكون شاشات اللّمس أحد الأسباب التي جعلت الأجهزة الجوّالة ذات شعبيّة كبيرة جدّا.

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

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

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

ما لذي تصلُح له المنزلقات

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

مصاعب عند استخدام المنزلقات

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

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

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

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

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

فكّر في مشاكل قابليّة الاستخدام

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

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

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

يجب أن تظهر جميع اللافتات (Labels) والقيّم التي تفسّر المنزلق بجانب أصابع المستخدم وزرّ التمرير، أو فوقهما.

استخدم المنزلقات لترك انطباع بصريّ واضح

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

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

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

أنواع المنزلقات التي يمكنك استخدامها

توجد أنواع عدّة يمكن استخدامها عند تصميم موقع أو تطبيق:

• المنزلقات المنفردة (Single sliders): مناسبة للعمل مع قيمة وحيدة في كلّ مرة.
• المنزلقات المزدوجة (Double sliders): مناسبة للعمل مع مجال من القيم (مثلًا، منزلق للقيمة الدنيا وآخر للقيمة القُصوى).
• المنزلقات المتواصلة (Continuous sliders): تسمح المنزلقات المتواصلة بتحديد موقع نسبي على مجال مُحدَّد بقيمتين دنيا وقُصوى.
• المنزلقات المتقطّعة (Discrete sliders): تتميّز بنقاط توقّف يمكن للمستخدم استعمالها لإعطاء قيمة دقيقة.

الدقة أم التخمين؟

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

يكون استخدام المنزلقات – غالبًا – أسهل عندما لا تكون دقّة القيمة المُختارة مهمّة. إنْ كان المستخدم يستطيع استخدام المنزلق لمشاركة قيمة تقريبيّة، فسيكون ذلك – غالبا – كافيّا.

مالعمل إنْ احتجت لقيمة دقيقة؟

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

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

عرض مجال قِيم

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

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

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

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

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

يمكن استخدام التحريكات (Animations)، حالات الحومان (Hover)، والتأشير فوق العناصر (Rollover) للتواصل مع المستخدم. تجذب هذه الميزات انتباه المستخدم وتخلُق بالتالي قناة اتّصال معه. مواقع الويب التفاعليّة جذّابة دائما.

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

خاتمة

تبدو المنزلقات بديهيّة وسهلة الاستخدام في تطبيقات الويب؛ كما أنّها خيّار جمالي، إلّا أنّها ليست دائمًا الأداة الأفضل للاستخدام.

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

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

ترجمة – بتصرّف – للمقال How to Create a Good UI Slider in Mobile Design لصاحبه Bogdan Sandu.

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

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

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

إنْ كنت تعرف هويّتك التجاريّة جيّدًا وتفهم مالذي تبحث عنه، فيمكنك إكمال تقويم تجربة المستخدم في ما لا يتجاوز خمس دقائق. سواءٌ أخذت خمس دقائق مرّةً في الشهر، أو مرّةً في الأسبوع، فتستطيع إجراء تحسينات كبيرة في معدّل الارتداد (Bounce rate)، ومعدّلات التحويل (Conversion rates)، و – عمومًا - العائد على الاستثمار (Return on investment, ROI) من حملاتك التسويقيّة.

الجانب البصري (دقيقتان)

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

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

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

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

التفاعل (دقيقتان)

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

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

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

• الأيقونات: هل تلبّي الأيقونات حاجات هويّتك التجاريّة أو المجال الذي تعمل فيه؟ هل الرسومات واضحة ومناسبة للمعايير التي حدّدتها؟ هل يمكن للمستخدمين النقر على الأيقونات للحصول على معلومات أكثر إنْ كانوا يريدون ذلك؟
• الأزرار: تأكّد من حصول المستخدمين على نفس القابليّة للتفاعل عبر الموقع، سواءٌ تعلّق الأمر بنصوص الدعوات إلى إجراء (Call-to-action)، أو ألوان الأزرار وأحجامها.
• الروابط: هل تعمل الروابط جميعًا على النحو المرجو؟ هل تُميَّز الروابط التشعبيّة بنفس اللون، وهل تسهُل رؤيتها؟
• النوافذ المنبثقة (Pop-ups) والقوائم المنسدلة (Drop-downs): هل تعمل العناصر البصريّة المُجمَّعة، سواءٌ كانت عناصر قائمة بذاتها أم جزءًا من قائمة، بطريقة مناسبة؟ وهل تندمج في مساحة معيَّنة دون أن تتجاوزها أو تحجُب محتوى مهمًّا آخر؟
• المؤشّر: كيف يتغيّر مؤشّر الفأرة عند التفاعل مع الموقع؟ تأكّد أنّ كلّ تغيير متناسق ومتناسب مع الهدف المُراد منه.

الزيارة (دقيقة واحدة)

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

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

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

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

ترجمة – بتصرّف – للمقال How to Evaluate Your UX in Under 5 Minutes لصاحبه Kayla Naab.

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

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

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

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

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

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

فكر في الأمر:

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

• ما هي المنصة الجماهيرية التي يتم استخدامها؟
• ما هي العمليات التجارية الداخلية؟
• ما هي إجراءات سياسة خصوصية الموقع؟
• تصميم واجهة الصفحة.
• و لا تنسى السريّة.

يجب أن يكون موضع التسجيل واضحًا

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

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

عمليات تسجيل الدخول المفضلة

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

الأمر بأسره متعلق بالسريّة

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

وإليك بعض الحلول العملية للمشكلة:

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

استخدم البريد الإلكتروني كإسم مستخدم

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

تجنب ألعاب التخمين من فضلك

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

على سبيل المثال:

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

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

استخدم الصورة كتوكيد

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

تسجيل الدخول الفوري

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

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

هل هذا تسجيل دخول أم اشتراك في الموقع؟

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

نحتاج جميعًا للمساعدة عندما نرتكب الأخطاء

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

التبسيط

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

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

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

ترجمة -بتصرف- لمقال How to Improve the User Login Experience لصاحبهIggy

حقوق الصورة البارزة محفوظة لـ Freepik

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

الجانب المادي في عملية التصميم

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

التصاميم الصالحة للاستعمال

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

هيكل التصميم:

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

مساحة التمرير والسحب:

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

التفاعلات سهلة الاستخدام

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

مناطق ضغط الزر:

كما ناقشنا في الجزء الثاني من السلسلة: تصميم الإجراءات التفاعلية، فإن وجود حجم كافٍ، وتباعد مناسب بين الأزرار يُسهل من عملية تفعليها. من الناحية المثالية، فإن على الأزرار أن تكون بين 44px و57px على الشاشة القياسية، و88px إلى 114px على شاشة (retina) عالية الكثافة؛ وهذا يُعطي مساحة كافية للإصبع المتوسط أن يُفعّل هذه الأزرار بسهولة.

أدوات تحكم واضحة ومن السهل الوصول إليها:

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

الجانب التواصلي في عملية التصميم

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

الاتزان الرأسي (Vertical rhythm)

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

إضافةً إلى نظام الشبكة العمودية سالفة الذكر، فإن الشبكة الأساسية (baseline grid) تساعد كذلك في إنشاء اتزان عمودي مناسب، جاعلة قراءة وفهم المحتوى أكثر سهولة؛ خصوصًا وأنها تُنشأ بنيةً من خلال مواصفات ارتفاعات الأسطر، وهذا يعطي قواعد أفقية واضحة توضح المسافة بين قاعدة كل سطر (typography leading) وكذلك حجم الخطوط؛ كما أنها مفيدة في تحديد التباعد بين مجموعات المحتويات.
إن اتباع هذه القواعد يجعل قراءة الفقرات واضحة، ويجعل المستخدم قادرًا على التفريق بين الأقسام (sections) ومجموعات المميزات (feature groups)؛ وربما يكون من الصعب تنفيذ نظام الشبكة الرئيسية بدقة في كل من HTML وCSS، إلا أنها توفر إرشادات مفيدة فيما يتعلق بتطوير التحجيم والتباعد في عملية التصميم.

استخدام الألوان

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

درجة اللون وطرازه:

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

التفرقة بين الأقسام

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

التفرقة بين العناصر الثابتة والوظائف التفاعلية:

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

التعريف بأحوال مختلفة:

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

استخدام التجسيد أو التشبيه (Using metaphor)

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

دعم موضوع أساسيّ:

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

الأزرار والتفاعلات:

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

الرموز المصورَّة (Iconography):

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

مستقبل الهواتف المحمولة

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

ترجمة- وبتصرف- للمقال Designing for Mobile Part 3: Visual design لصاحبته Elaine McVicar

حقوق الصورة البارزة محفوظة لـ Freepik

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

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

تصميم الإجراءات التفاعلية

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

بيئة العمل

إن التصميم لبيئة العمل يتطلب منا أن نولي اهتمامًا لأبعاد الجهاز، والطبيعة العملية للشاشة اللمسية؛ فالطريقة التي يحمل بها المستخدمُ جهازًا ويتفاعل مع شاشته اللمسية، تؤثر في مدى سهولة وصوله إلى أجزاء الشاشة؛ لذا ينبغي أن توفر مناطقُ اللمس (Hit areas) مساحة كافية للمستخدم؛ كي يتمكن من الضغط على الشاشة بدقة وثقة.
إن متوسط عرض طرف الإصبع ما بين 1سم إلى 2سم، والذي بالكاد يُمكنه أن يأخذ مساحة تقع بين 44px إلى 57px على شاشة قياسية، وبين 88px إلى 114px على شاشة (retina) عالية الكثافة. توصي كل من شركات Nokia، Apple، وMicrosoft بالأخذ في الاعتبار أحجامًا مختلفة قليلًا لطبيعة الشاشة اللمسية.
لا توجد بعد قواعد صارمة وسريعة فيما يتعلق بمناطق اللمس، وبدلًا من النظر إلى معايير مختلفة من أجل الحصول على إجابة، انظر إلى ما يريد المستخدم إنجازه على الشاشة، ومدى أهميته له، ومدى السرعة التي يحتاجها لإنجاز الأمر، ثم ابْنِ تصميمك بِناءً على ذلك.

حركات اليد (Gestures)

إن كل جزء من أجزاء الشاشة اللمسية مخصص لوظيفة معينة، ويمنع عرض أي محتوى آخر على هذه المساحة من الشاشة، مما يجعل من حركات اليد عنصرًا حاسمًا في التصميم التفاعلي للهاتف؛ وكل أنظمة التشغيل اللمسية الرئيسية توظفها، بما في ذلك: Google’s Android، Apple’s iOS، وMicrosoft’s Windows 8.
يقدم الجدول أدناه ملخصًا موجزًا:

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

التحولات

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

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

أنماط شائعة

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

قائمة التنقل الرئيسية

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

القائمة الامتدادية لموقع (starbucks) المتجاوب

القائمة الامتدادية (Expanding Menu)

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

تطبيق فيسبوك بقائمة جانبية

القائمة الجانبية (Side menu)

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

قائمة تبويبية في تطبيق Amazon

القائمة التبويبية (Tabbed menu)

هذا النمط متوافق مع المقالة السابقة من هذه السلسلة، حيث يستمر وجود شريط الأدوات أعلى أو أسفل التطبيق، متيحًا للمستخدم أن ينتقل سريعًا بين الأقسام.
الإيجابيات: مناسب للتطبيقات التي تحتوي على عدد محدود من خيارات القائمة؛ ويرجع ذلك إلى مقدار المساحة الأفقية المتاحة على شاشة الهاتف؛ وهذا غالبًا ما يستخدم كنظام تنقل في iOS، حيث يُنصح فيه بخمسة خيارات للقائمة.
السلبيات: ربما تتعارض التبويبات السفلية مع التفاعلات الأساسية لـ Android و Windows 8.

قائمة لوحة التحكم لتطبيق LinkedIn

قائمة لوحة التحكم/ المحور والعجلة (Hub & Spoke menu)

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

تحديد المحتوى

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

التنقل التقادمي (forward navigation) في تطبيقBBC news

اضغط للمضي قُدُمًا

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

معاينات تتابعية في تطبيقApp store

المعاينة التتابعية (Cover flow)

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

نمط التحول والعودة في تطبيقiOS maps لمعلومات أكثر.

التحول والعودة (Flip over/ Peel back)

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

تسجيل الدخول

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

تطبيق انستجرام

تسجيل دخول تلقائي

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

تطبيق Gmail

تذكُّر بيانات التسجيل

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

تطبيق Paypal

رمزPin

إن إنشاء طريقة سريعة للولوج ولا تُلزم المستخدم بإدخال المعلومات الأساسية كل مرة، يُعد أمرًا مميزا؛ ويتيح لك تطبيق PayPal إدخال رمز Pin لتسجيل الدخول بطريقة سريعة.
الإيجابيات: مناسب للتطبيقات التي تتطلب نوعًا من الحماية، ويمكن ربطها بجهازك المحمول.
السلبيات: على المصمم التأكد من أن مستوى الحماية المطلوب قد تم تطبيقه.

استخدام النماذج

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

يسمح لك تطبيق Amazon بالولوج إلى البيانات الشخصية وسجل الطلبات.

حفظ بيانات المستخدم

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

يوفر تطبيق Just Eat لوحة مفاتيح مكبرة.

توفير لوحة المفاتيح المناسبة

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

عملية الشراء في تطبيقTopshop

شريط التقدم

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

الخطوات القادمة

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

ترجمة- وبتصرف- للمقال Designing for Mobile, Part 2: Interaction Design لصاحبته Elaine McVicar.

حقوق الصورة البارزة محفوظة لـ Freepik

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

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

يتطلب المقياس AA أن تحتوي النصوص والصور النصية على حد أدنى من نسبة تباين الألوان (Contrast Ratio) وهي 1:4.5؛ بمعنى آخر، يجب أن يحتوي اللون الأفتح في زوجٍ ما على استِضْوَاء (Luminance)- وهو مؤشر لمعرفة درجة السطوع التي سيظهر بها اللون- أكثر أربع مرات ونصف من اللون الآخر الداكن. تم حساب نسبة التباين هذه حتى تشمل تحتها أصحاب الرؤية المقبولة، الذين لا يحتاجون إلى الاعتماد على التكنولوجيا المساعدة على تعزيز التباين، بالإضافة إلى الذين لديهم قصور في رؤية الألوان؛ وقد قُصِد بذلك تعويض النقص لديهم في حساسية التباين، والتي غالبًا ما تكون لدى أصحاب نظر 20/40، أي الذين مستوى نظرهم نصف المعدل الطبيعي 20/20.

ويتطلب المقياس AAA أن تكون نسبة التباين 1:7، والتي من شأنها أن توفر تعويضًا لأصحاب نظر 20/80، أي الذين مستوى نظرهم ربع المعدل الطبيعي. أما الذين مستوى نظرهم أقل من ربع المعدل الطبيعي، فيلزمهم الاعتماد على التكنولوجيا المساعدة على تعزيز التباين والقدرات المكبرة.

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

وإذا لزِم الأمر، فيمكن وصف الشعار باستخدام النصوص المعرفة للصور (Alt Attribute)؛ وذلك تسهيلًا على من يستخدم تطبيقًا قارئًا لمحتويات الشاشة. لمزيد من التعلم، راجع تدوينة Julie Grundy، أخصائية الإتاحة، على   Simply Accessible، حيث ناقشت أفضل الممارسات حول وصف النصوص المعرفة للصور.

يلعب حجم الخط دورًا بارزًا في تحديد مقدار التباين المطلوب، فالنص الرمادي بقيم 150 للأحمر، 150 للأخضر، و150 للأزرق (RGB 150,150,150) على خلفية بيضاء نقية، يُعدَ مجتازًا للمقياس AA، طالما كُتبت به العناوين الرئيسية بحجم أكبر من 18 نقطة. أما النص الرمادي بقيم 110 للأحمر، 110 للأخضر، و110 للأزرق (RGB 110,110,110) فإنه يجتاز المقياس AA بأي حجم كُتب به، ويُعد متوافقًا مع المقياس AAA إذا كُتبت به العناوين الرئيسية بحجم أكبر من 18 نقطة. وربما يختلف خطان في درجة الوضوح مع أن لهما نفس الحجم؛ وذلك بسبب الاختلاف في نوع النمط المكتوب به، خصوصًا إذا كان النمط دقيق البنية.

يلعب حجم الخط دورًا مهمًا في حساب نسبة التوافق

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

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

لكن هذا ليس صحيحًا؛ فبتجربة برنامج فاحص تباين الألوان (color-contrast checker)، ثبت أن هناك العديد من نسب التوافق المعقولة وتحقيقها سهل، خصوصًا إذا كان المصمم مدركًا للقواعد من البداية؛ فالأمر سيكون محبطًا للغاية إذا كان المصمم يريد تغيير لونٍ ضعيف المستوى إلى لون أكثر إتاحة في مرحلة لاحقة من التصميم، أو بعد أن تم اختيار ألوان العلامة التجارية بالفعل. أما إذا قرر المصمم اختيار الطريق الصعب، فسيجد بعد ذلك أنه غير مقيد على الإطلاق.

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

فاحص التباين

إحدى أدواتي المفضلة هي Lea Verou’s Contrast Ratio ؛ فهي تسمح لك بإدخال رمز للون الخلفية، ورمز للون النص، ثم تحسب لك النِّسب.

أداة    Lea Verou’s Contrast Ratio checker لفحص نسبة التباين 

إن نسبة التباين تدعم أسماء الألوان، رموز ألوان هيكس (hex color code)، قيم الأحمر والأخضر والأزرق وألفا (RGBA)، قيم التنوع والتشبع والسطوع وألفا (HSLA)، وحتى أنها تدعم مزيجًا من كل منهم، ودعمها لقيم (RGBA) و(HSLA) يعنى أنها تدعم الألوان الشفافة أيضًا، فهي حقًّا أداة مميزة. كما يمكنك بسهولة مشاركة نتائج الفحص عبر نسخ ولصق الرابط؛ إضافة إلى ذلك، يمكنك تعديل الألوان بتغيير القيم في الرابط السلسة (URL string) بدلًا من استخدام حقول الإدخال في الصفحة.

أداة رائعة أخرى هي Jonathan Snook’s Colour Contrast Check، ومن مميزاتها أنها تُظهر لك إذا ما كان مزيج الألوان يمكنه اجتياز كِلَا المقياسين AA وAAA أم لا؟ 

أداة Jonathan Snook’s Colour Contrast Check لقياس نسبة التباين 

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

أدوات اختيار الألوان

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

نموذج من عمليات بحث برنامج Color Safe لألوان إتاحية متوافقة اعتمادًا على لون الخلفية المختارة

أدوات التعديل

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

هذا الزوج من الألوان غير متوافق مع المقياس AA 

مجموعة بدائل مقترحة من Tanaguru متوافقة مع المقياس AA 

ترجمة -وبتصرّف- للمقال Color Accessibility Workflows لصاحبته Geri Coady.

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

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

من الواضح جدًا أن الهواتف النقالة سوف يستمر بقاؤها لفترة طويلة؛ وتبقى معها أيضًا مجموعة من القيود (والفرص) الجديدة للمصممين؛ لذا دعونا نلقي نظرة عن كيف يمكننا تطوير نهجنا في التعامل.

كيف تختلف الهواتف عن غيرها؟

إن أول شيء علينا فهمه حول تصاميم الهواتف هو أنها مختلفة، ليس فقط بشأن الحجم؛ فبِنْية ومواصفات الجهاز المحمول تعطينا تصاميمَ مختلفة القدرات والمتطلبات. ونحن نجد أن الهواتف المحمولة أنسب في الاستخدام لكونها خفيفة وسهلة الحمل والتنقل، ومع استخدامها المنتظم تتكون لدينا معها رابطة عاطفية مميزة.

البنية والمواصفات

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

كيف، أين ومتى

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

كيف نتصرف ونشعر

لدينا طرقًا وسلوكيات وأولويات مختلفة في استخدامنا للهواتف المحمولة؛ ففي جزء من دراسة  Going Mobile 2012، وجدت وكالة User Experience Design agency Foolproof أن الهواتف أعطتنا شعورًا جديدًا من الحرية والتحكم؛ لذا يشعر بعض المستخدمين بمودة حقيقية بينهم وبين هواتفهم! فقد وجدت وكالة Foolproof أن 63% من الناس يفتقدون هواتفهم إذا لم يستطيعوا الوصول إليها بسهولة، ووصفوا هواتفهم بأنها (على قيد الحياة)، وأنها جزء من أجسامهم وشخصياتهم.

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

كيف تؤثر الهواتف على المصممين

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

طرق التقديم والعرض

على عكس مواقع الإنترنت التقليدية، هناك أربع طرق شائعة لتقديم محتوى الهواتف المحمولة: بالنسبة للمستخدمين الذين يفضلون عرض المحتوى على المتصفح، فتناسبهم المواقع المخصصة للهواتف (mobile-specific site)؛ أو المواقع المتجاوبة (responsive site) التي تعيد ترتيب واجهتها بحيث تتناسب مع أبعاد الهاتف. أما بالنسبة للذين يفضلون تحميل التطبيقات على هواتفهم المحمولة، فيناسبهم إما تحميل التطبيقات المخصصة (native app)؛ أو التطبيقات الهجينة (hybird app). التطبيقات المخصصة مستقلة بذاتها؛ فكل صفحة من صفحات التطبيق محددة في تصميمها من الألف إلى الياء. أما التطبيقات الهجينة ففيها بعض المرونة؛ إذ أنها تستطيع عرض المحتوى من الإنترنت كالمتصفحات، مع الاحتفاظ بواجهة مستخدم شبيهة بواجهة التطبيقات.

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

هندسة معلومات الهواتف المحمولة

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

ليست هناك طريقة (صحيحة) لهندسة مواقع أو تطبيقات الهواتف المحمولة؛ بدلًا من ذلك، دعونا نلقي نظرة على بعض الأنماط الشائعة: نمط التسلسل الهرمي (Hierarchy)، المحور والعجلة (Hun & Spoke)، الدمية المنزلية (Nested doll)، العرض المُبوّب (Tabbed view)، صندوق بينتو (Bento box)، والعرض المُصفّى (Filtered view):

التسلسل الهرمي (Hierarchy)

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

إن مبادرة Luke Wroblewski في كتابه Mobile First تساعدنا في التركيز على الأمور المهمة أولًا: المميزات، ورحلات المستخدم (user journeys)؛ حيث ستساعدنا تلك الأمور على إيجاد نماذج أفضل لتجارب المستخدم.

الإيجابيات: يستطيع التسلسل الهرمي ترتيب هيكل مواقع معقدة، مثل تلك التي تحتاج إلى اتباع هياكل مواقع سطح المكتب.

السلبيات: يمكن أن تمثل هياكل التنقل متعددة الأوجه (Multi-faceted navigation structures) مشكلة لمن يستخدمون الشاشات الصغيرة.

المركز هو المحور (Hub)، والفرعيات هي العجلة (Spoke)

المحور والعجلة (Hub & Spoke)

يعطيك نمط المحور والعجلة فهرسًا في المركز يمكنك التنقل من خلاله إلى المحتويات، وهذا هو النمط الافتراضي في أجهزة Apple’s iPhone. لا يستطيع المستخدمون التنقل بين العجلات، بل عليهم العودة إلى المحور؛ هذا النمط مستخدم منذ فترة طويلة في سطح المكتب حيث يتم وضع قيود على سير العمل (غالبًا ما تقود قيودًا تِقَنية، مثل الموجودة في نموذج لعملية شراء)؛ ومع ذلك، فبمرور الوقت يصبح هذا النمط أكثر انتشارًا على الهاتف المحمول؛ لأن المستخدم صار يركز على مهمة واحدة، كما أن عامل تكوين الجهاز يجعل التنقل الشامل أصعب في الاستخدام.

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

السلبيات: غير مناسب لمن يفضل القيام بمهام متعددة.

الدمية المنزلية (nested doll)

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

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

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

العرض المُبوّب (Tabbed view)

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

الإيجابيات: مناسب للتطبيقات المتفقة الموضوع والمعتمدة على الأدوات، ولديه القدرة على القيام بمهام متعددة.

السلبيات: التعقيد؛ فهذا النمط مناسب جدًا للمحتويات ذات البنية البسيطة.

مربع بينتو (Bento box)

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

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

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

العرض المُصَفّى (Filtered view)

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

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

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

الخطوات القادمة

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

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

ترجمة -وبتصرّف- للمقال Designing for Mobile, Part 1: Information Architecture لصاحبته Elaine McVicar

حقوق الصورة البارزة محفوظة لـ Freepik

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

إذًا، كيف ستنتقي اللون (أو الألوان) التي تناسب علامتك التجارية؟ ذلك اللون الذي يجعلها جذّابة وبارزة، ويتوافق في الوقت نفسه مع الوعود الأخرى لعلامتك التجارية. لنكتشف ذلك!

كيف يتعامل عقلك مع الألوان

لكي نفهم كيفية تأثير اللون على تفكيرنا، يجب أن نفهم أولًا الطريقتين الأساسيتين اللتين تتعامل عقولنا بواسطتهما مع محفّزٍ كاللون:

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

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

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

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

فعالّية ارتباطات الألوان (وكيفية استخدامها)

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

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

أو ما هو أهم من ذلك، ماذا تريد منهم أن يروه؟

ابدأ بالتفكير حول هوية علامتك التجارية. فقد وجد الباحثون في دراسة The Interactive Effects of Colors (التأثيرات التفاعلية للألوان) أنّ العلاقة بين العلامات التجارية والألوان تتوقّف على "المُلاءمة المحسوسة للّون المُستخدم في العلامة التجارية".

بعبارة أبسط، يجب أن يُشعِر اللون بالتلاؤم الجيّد مع المنتج أو الشيء المُباع.

انظر إلى استخدام Apple للّون الأبيض وكيف أنّه يجسّد قيمهم للتصاميم البسيطة والواضحة، أو إلى استخدام Victoria’s Secret للّون الوردي بكثافة في علامتهم التجارية ومنتجاتهم؛ الشركتان كلتاهما تستخدمان اللون لدعم هويتهما.

سيبدأ عملاؤك بتمييزك أكثر من خلال الألوان كلّما زاد استخدامك لها لتعزيز قيم علامتك التجارية. فقد أوضح المؤلفان Labrecque و Milne في دراستهما Exciting red and competent blue: the importance of color in marketing (الأحمر المثير والأزرق المنافس: أهمية الألوان في التسويق):

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

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

وفي الواقع، وجد الباحثون في دراسة Impact of Color in Marketing (تأثير الألوان في التسويق) أنّ 62% - 90% من الأحكام السريعة حول المنتجات يمكن أن تكون مبنية على اللون وحده.

دليل مفصّل إلى إنشاء لوحة ألوان لعلامتك التجارية

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

فيما يلي دليل أساسي سريع يوضّح خطوة بخطوة كيف تُنشِئ لوحة الألوان لعلامتك التجارية.

الخطوة 1: اختر الألوان الأساسية

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

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

لنبدأ بعجلة الألوان:

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

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

وتتضمّن عجلة الألوان الثانوية الألوان الأخضر، البرتقالي، والأرجواني؛ أي الألوان التي يُتحصَّل عليها بدمج الألوان الأساسية معًا.

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

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

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

إذا نظرنا إلى عجلة الألوان سنجد أنّه يمكن خلق انسجام الألوان بعدد من الطرق المختلفة:

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

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

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

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

الخطوة الثانية: اخلق المزيد من الانسجام (أو التباين)

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

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

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

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

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

الخطوة 3: أنشئ مجموعة من قواعد الألوان

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

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

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

بذلك تكون قد انتهيت من إنشاء قواعد الألوان.

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

خاتمة

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

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

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

ترجمة – بتصرّف - للمقال How to pick the perfect colors for your brand لصاحبه: Jory MacKay.

حقوق الصورة البارزة محفوظة لـ Freepik

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

بالنسبة للمتاجر الإلكترونية، يوجد مخروط تَتْبعه تقريبًا كل المواقع في هذا المجال. لذا تعتبر أزرار الدعوة إلى إجراء (Call To Action (CTA علامات مهمة لمساعدة المستخدمين في شق طريقهم خلال عملية الشراء، وهي عناصر أساسية من تصميم تجربة المستخدم. ويمكن القول أنّها مهمّة في عالم التجارة الإلكتروني أكثر من غيره، لأنّ رحلة المستخدم الناجحة تعود بقيمة نقدية.

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

الهبوط: أوضح كيفية بدء التسوّق:

للصفحة الرئيسية أو صفحة الهبوط غرضان:

1. وصف الموقع بسرعة،
2. حَمْل المستخدمين على اتخاذ الخطوة القادمة في الشراء.

ولأجل تحقيق الغرض الثاني، يجب أن تعمل على إنشاء الدعوة إلى إجراء بصورة صحيحة.

Quote

لا تستخدم عبارات عامة مثل’ شاهد المزيد’ في الدعوة إلى إجراء الأساسية

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

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

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

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

لا تُكرّر الروابط

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

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

البحث: هل تتطلّب الصفحة أيّة أزرار؟

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

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

يُظهر موقع Net-a-Porter أنّ الدعوات إلى إجراء غير ضرورية لكل نتائج البحث

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

هناك بعض الأسئلة التي أطرحها على نفسي لتحديد ما إذا كان يلزم تضمين زر كهذا في قائمة البحث:

1. هل المنتجات التي تبيعها من تلك التي يشتريها الناس غالبًا؟
2. هل يميل المستخدمون إلى طلب منتجات متعددة مختلفة في وقت واحد؟

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

المنتج: سهّل شراءه

يجب أن تؤدي صفحة المنتج الأغراض التالية:

• تعرض المنتج بأفضل حالاته (عادة من خلال الصور والفيديوهات).
• توضّح الخصائص والمواصفات.
• تطمئن المستخدمين من خلال المراجعات والدليل الاجتماعي social proof.
• تسهّل للمستخدم الشراء.

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

تتميّز صفحات المنتج لموقع Selfridges بدعوة إلى إجراء رئيسية لافتة للنظر (مع أخرى أقل بروزًا)

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

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

المنتج: بدائل ثانوية للشراء

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

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

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

الدفع: استخدم الدعوات إلى إجراء نفسها

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

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

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

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

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

الخلاصة

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

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

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

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

ترجمة - بتصرّف - للمقال Here’s How To Design Ecommerce Ctas That Convert لصاحبه Matt Isherwood.

حقوق الصورة البارزة محفوظة لـ Freepik
 

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

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

ما هو التصميم التفاعلي؟

حسب جمعية التصميم التفاعلي (IxDA) فإن التصميم التفاعلي Interaction design, IxD هو: “تعريف لبنية وسلوك الأنظمة التفاعلية. حيث يسعى المصممون فيه إلى خلق علاقة بناءة بين الناس والمنتجات والخدمات التي يستخدمونها؛ من أجهزة الحاسوب، وأجهزة الهاتف، إلى الأدوات، وما إلى ذلك؛ وممارسته تتطوّر بتطوّر العالم”.

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

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

منهجيات شائعة

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

التصميم الموجّه بهدف

لقد شاع التصميم الموجّه بهدف بعدما وضع المصمم والمبرمج Alan Cooper هذه المنهجية في كتابه The Inmates Are Running the Asylum: Why High-Tech Products Drive Us Crazy and How to Restore the Sanity الذي نُشر عام 1999. يعرّف Alan “التصميم الموجّه بهدف” على أنّه التصميم الذي يعطي الأولوية القصوى لحل المشاكل. أي بعبارة أخرى، يركز “التصميم الموجّه بهدف” أولًا وقبل كل شيء على إرضاء احتياجات ورغبات معيّنة للمستخدم النهائي end-user، على عكس أساليب التصميم القديمة التي ركّزت على الإمكانيات المُتاحة في الجانب التقني للأشياء.
واليوم، أصبحت بعض النقاط التي أشار إليها Alan واضحة، لأنّ المصممين نادرًا ما يحددون التفاعلات بناءً على قيود التطوير فقط. مع ذلك، تتمحور هذه المنهجية في جوهرها على إرضاء احتياجات ورغبات المستخدمين النهائيين، الأمر الذي يعدّ من الضروريات اليوم، كما كان من قبل.

تتطلّب عملية التصميم الموجّه بهدف، وفقًا لـ Alan، خمس تحوّلات في طريقة تفكيرنا كمصممين في مجال التصميم التفاعلي:

1. صمّم ثم برمج: بعبارة أخرى، يبدأ التصميم الموجّه بهدف بدراسة كيفية تفاعل المستخدمين مع الواجهة (وكيف تبدو هذه الواجهة)، بدلًا من دراسة الجانب التقني.
2. افصل مسؤولية التصميم عن مسؤولية البرمجة: وهذا يشير إلى ضرورة وجود تصميم تفاعلي يمكنه تلبية احتياجات المستخدم النهائي دون القلق حول القيود التقنية. يجب أن يكون المصمم قادرًا على الوثوق بالمطوّر الذي يعمل معه ليتولّى الجوانب التقنية؛ حتىّ إنّ Alan Cooper يشير إلى أنّ عدم وجود هذا التوافق بين المصمم والمطور يمكن أن يضع المصمم في تضارب للمصالح.
3. اجعل المصممين مسؤولين عن جودة المنتج ورضا المستخدم: بالرغم من أنّ الأشخاص المعنيين أو العملاء يملكون أهدافًا مختلفة، إلّا أنّ مصمم التفاعل يجب أن يكون مسؤولًا عن رضا المستخدم على الطرف الثاني من الشاشة.
4. عيّن مستخدمًا واحدًا محدّدًا لمنتجك: تطوّرت هذه الفكرة بحد ذاتها إلى شيء مرتبط أكثر بدراسة المستخدم، والذي يُعرف بالشخوص Personas. مع ذلك ينصحنا Alan بأن نربط الشخوص بالمنتج، وأن نسأل دائمًا: “أين سيستخدم هذا الشخص هذا المنتج؟ من هو/هي؟ ما الذي يرغب/ترغب في تحقيقه؟
5. اعمل في فريق: وأخيرًا، يجب على مصممي التفاعل ألّا يعملوا لوحدهم. فالتعاون مع الآخرين، الذي يسمّيه Alan “مُحاوِر التصميم Design Communicator” هو من الأمور الجوهرية. وبالرغم من أنّ مُحاوِر التصميم الذي تصوّره Alan عام 1999 كان كاتب نصوص إعلانية (copywriter) الهدف منه هو كتابة نصوص تسويقية للمنتجات، لكن اليوم توسّع مفهوم مُحاوِر التصميم ليشمل مدير المشروع، استراتيجي المحتوى، مهندس المعلومات، وغيرهم الكثير.

قابلية الاستخدام Usability

ربما يبدو المصطلح “قابلية الاستخدام” مصطلحًا مبهمًا، لكن معناه الأساسي هو أن يسأل المصممون ببساطة: “هل يمكن لأحد ما استخدام هذا (المنتج) بسهولة؟”
لقد شُرِحت قابلية الاستخدام في الكتب والمقالات بطرق عدّة، سنراجع هنا تعريفاتٍ مختلفةً لتوضيح الأفكار الشائعة والفروق الدقيقة.
تُقَسَّم قابلية الاستخدام إلى ثلاثة مبادئ حسب ما ورد في الكتاب Human Computer Interaction للمؤلفين Alan Dix، Janet E. Finlay، Gregory D. Abowd، و Russell Beale:

• قابلية التعلّم: ما مدى سهولة أن يتعلم المستخدم الجديد تصفّح الواجهة؟
  المرونة: كم عدد الطرق التي يمكن للمستخدم من خلالها التفاعل مع النظام؟
• المتانة: ما مدى جودة دعم المستخدمين عندما يواجهون الأخطاء في النظام؟
  وفي الوقت نفسه، يصف كلّ من Nielsen وschneiderman قابلية الاستخدام على أنّها تتألف من خمسة مبادئ:
• قابلية التعلّم: ما مدى سهولة أن يتعلم المستخدم الجديد تصفّح الواجهة؟
• الكفاءة: ما مدى سرعة المستخدمين في تنفيذ المهام؟
• قابلية التذكر: إذا لم يستخدم شخص النظام لمدّة من الوقت، هل سيتذكر الواجهة جيدًا؟
• الأخطاء: كم عدد أخطاء المستخدمين، وما مدى سرعة تجاوزهم لتلك الأخطاء؟
• الرضا: هل يستمتع المستخدم بالواجهة، وهل هو راضٍ بالنتائج؟
  وأخيرًا، يقسّم المعيار الدولي (ISO 9241) أيضًا قابلية الاستخدام إلى خمسة مبادئ:
• قابلية التعلّم: ما مدى سهولة أن يتعلم المستخدم الجديد تصفّح الواجهة؟
• قابلية الفهم: هل يستطيع المستخدم أن يفهم ما يراه جيدًا؟
• قابلية التشغيل: ما مقدار التحكّم الذي يملكه المستخدم في الواجهة؟
• الجاذبية: ما مدى جاذبية الواجهة من الناحية البصرية؟
• توافق قابلية الاستخدام: هل تحقق الواجهة المعايير؟
  من الواضح أنّ هناك أفكارًا شائعة تشكّل ما يعنيه أن تكون الواجهة “قابلة للاستخدام”. وتعدّ قابلية الاستخدام من الأمور المهمة لأي واجهة يعمل عليها المصمم بغض النظر عن المبادئ التي يتبعها.

الأبعاد الخمسة

في كتاب Bill Moggridge المعنون بـ Designing Interactions، والذي قابل فيه عددًا من المبتكرين والمؤثرين، قدّم Gillian Crampton Smith، أحد الأكاديميين في مجال التصميم التفاعلي، مفهوم الأبعاد الخمسة لـِ “لغة التصميم التفاعلي”. تشكّل هذه الأبعاد التفاعلات نفسها، وتؤدي بالنتيجة إلى تشكيل تواصل بين المستخدم والشاشة. الأبعاد الأربعة الأصلية هي: الكلمات، التمثيل البصري، الأشياء المادية أو المساحة، والوقت. ومؤخرًا؛ أضاف Kevin Silver وهو مصمم أقدم في مجال التصميم التفاعلي في مختبرات IDEXX البعد الخامس الذي هو السلوك.

• البعد الأول: يجب أن تكون الكلمات سهلة الفهم ومكتوبة بطريقة توصل المعلومات إلى المستخدم النهائي بسهولة.
• البعد الثاني: يشمل التمثيل البصري كل العناصر الجرافيكية أو الصور؛ أي أساسًا، كل شيء ما عدا النصوص. ويجب أن يُستخدَم التمثيل البصري باعتدال لكيلا لا يطغى على بقية عناصر الشاشة.
• البعد الثالث: تشير الأشياء المادية أو المساحة إلى الأجهزة أو الأدوات المادية، سواء كانت فأرة، لوحة مفاتيح، أو جهازًا محمولًا يتفاعل معه المستخدم.
• البعد الرابع: الوقت هو المدة التي يقضيها المستخدم بالتفاعل مع الأبعاد الثلاثة الأولى. ويتضمن الطرق التي قد يقيس المستخدم من خلالها التقدم، بالإضافة إلى الصوت والحركة.
• البعد الخامس:أضاف Kevin Silver السلوك في مقاله What Puts the Design in Interaction Design. وهو يمثّل انفعالات المستخدم وردود أفعاله عندما يتفاعل مع النظام.

باستخدام هذه الأبعاد الخمسة، يمكن لمصمم التفاعل أن يولي الاهتمام بتجربة المستخدم عندما يتواصل أو يتصل بنظام ما.

علم النفس المعرفي

علم النفس المعرفي هو دراسة كيفية عمل العقل، وما هي العمليات العقلية التي تحدث هناك. والتي تتضمّن، وفقًا لجمعية علم النفس الأمريكية، “الانتباه، استخدام اللغة، الذاكرة، الإدراك، حل المشكلات، الإبداع، والتفكير “.
علم النفس من المجالات الواسعة جدًا، لكن هناك عناصر أساسية لعلم النفس المعرفي التي تعدّ قيّمة في مجال التصميم التفاعلي، والتي قد ساعدت في الواقع على تشكيل هذا المجال. تطرّق Don Norman إلى العديد من تلك العناصر في كتابه The Design of Everyday Things، وإليك بعضًا منها:

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

أدلة تصميم واجهة المستخدم Human Interface Guidelines

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

مهام وأنشطة مصمم التفاعل

يساهم مصمم التفاعل بشكل أساسي في عملية التطوير برمّتها. فيقوم بمجموعة من الأنشطة المهّمة لفريق المشروع، والتي تتضمن عادة وضع استراتيجية تصميم، التخطيط الهيكلي Wireframing للتفاعلات الأساسية، وعمل نماذج أولية Prototyping لها.

إستراتيجية التصميم

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

التخطيط الهيكلي للتفاعلات الأساسية

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

النماذج الأولية

الخطوة المنطقية التالية لمصمم التفاعل هي إنشاء النماذج الأولية، إن لم يتطلب المشروع خلاف ذلك. وهناك عدد من الطرق التي يمكن للفريق من خلالها عمل نموذج أولي للتفاعل. لن نغطيها بالتفصيل في هذا المقال، لكن من أمثلتها نماذج CSS /HTML، أو النماذج الورقية.

كن مواكبًا للتطور

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

أداوت الصنعة

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

Balsamiq Mockups

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

InVision

InVision من أدوات النمذجة المجانية. يعمل على الويب والهاتف وعلى نظامي التشغيل Mac وWindows. صُمّم InVision لتسهيل التواصل من خلال التكامل مع الكثير من التطبيقات، مثل فوتوشوب، Sketch، Slack، Jira، وغيرها. يمكن للمصممين رفع المخططات الهيكلية وربطها عبر النقاط الساخنة Hotspots. ويمكن للعملاء، الزملاء، والأطراف المعنية إضافة التعليقات على التصميم مباشرة. كما يتيح التطبيق إمكانية التعاون في عملية التصميم مباشرةً من خلال أداة العرض الآني LiveShare.

Omnigraffle

Omnigraffle هو برنامج التخطيط الرئيسي للنظام Mac OS X. يمكن لمصممي التفاعل الاستفادة من الجماليات التي ينشئها برنامج Omnigraffle لتركيز جهد الفريق على التفاعلات وراء تصاميمهم بدلًا من التركيز على التصميم نفسه. يوفر Omnigraffle مجموعة من الخصائص المميزة مثل خاصية النقر للإظهار click-to-reveal (يمكنك مثلًا عرض كيفية عمل النافذة المنبثقة Modal box)، رسم منحنيات Bezier، وغيرها.

Patternry

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

Sketch

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

Axure

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

UXPin

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

ترجمة - بتصرّف - للمقال Complete Beginner’s Guide to Interaction Design.

حقوق الصورة البارزة محفوظة لـ Freepik

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

حفظ من أجل الويب والأجهزة في الفوتوشوب

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

File > Save for Web & Devices…

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

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

• .jpg تنسيق الضياع، وهو ممتاز للصور الفوتوغرافية.
• .png 8bit مضغوط بأقل حجم ممكن من هذا النوع ويتميز بنطاق ألوان محدود.
• .gif وهو أيضًا مضغوط بحجم ضئيل يشابه png 8bit ولكن png يشكّل خيارًا أفضل.

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

ضغط .jpg

إن تنسيق .jpg هو الخيار المناسب للصور ذات نطاق ألوان واسع التي لا تحوي تحولات حادة أو حواف ناعمة. بسبب الضغط الخوارزمي الخاص بها فهي ممتازة للصور الفوتوغرافية. من الممكن جدًا تخفيض حجم الصور وضغطه إلى حد كبير مع المحافظة على دقة عالية للصورة. خذ الصورة التالية كمثال: سيكون من الصعب جدًّا التمييز بين الصور الثلاث خصوصًا ما بين الصورة ذات الدقة العالية جدًّا (جزء مكبّر من الصورة الأصلية) والصورة المحفوظة بدقة “عالية” (أو دقة 60%). الصورة المثال تمثّل ربع حجم الصورة الأصلية.

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

ضغط .gif و .png

إن تنسيقي .gif و.png 8bit هما الأفضل للصور ذات نطاق ألوان محدود (إنها تظهر حتى 256 لونًا فقط) والتي تحوي على مساحات واسعة من لون واحد. تقدّم هذه التنسيقات في هذه الحالة نتيجة قريبة جدًّا من الصورة الأصلية مع توفير أكبر من حيث الحجم بالمقارنة مع تنسيق .jpg. وهي عادة ما تُستخدم من أجل عناصر الواجهات والأيقونات والصور التي تحوي نصوصًا يتوجب أن تظهر بدقة جيدة.
في معظم الأحيان يقدّم .png 8bit ضغطًا أفضل من تنسيق .gif. وكلا التنسيقان يدعمان شفافية أجزاء الصور (ينبغي عدم الخلط مع مسألة شفافية ألفا لتنسيق .png 24bit).

في الحقيقة إن حجم الصورة يؤثّر

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

ترجمة –وبتصرف- لمقال Speed Up Your Website with Better Image Optimization in Photoshop لصاحبه David Leggett

الصورة المستخدمة للشرح وفي الصورة البارزة من موقع Flickr للمصور Ray Dumas تحت الترخيص (CC BY-SA 2.0)

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

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

قاعدة الأثلاث Rule Of Thirds

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

إليك بعض الأمور التي تحتاج أن تعرفها:

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

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

وضع خط الأفق

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

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

خطوط التوجيه Leading Lines

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

التناظر Symmetry

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

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

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

المناظير Viewpoints

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

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

إليك بضعة مناظير لتتعرف أكثر عليها وتقرر ما الذي يناسبك في كل مرة تختار صورة فيها لتصميمك.

لقطات الزوايا العالية High Angle Shots

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

منظور عين الدودة Worm’s Eye View

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

منظور الزاوية المنخفضة Low Angle Shots

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

منظور عين الطائر Bird’s Eye View

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

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

منظور عين الرائي Point Of View

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

الخلفية

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

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

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

التأطير Framing

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

خاتمة

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

ترجمة – بتصرف - للمقال The Photography Guidelines Web Designers Should Know and Understand.

حقوق الصورة البارزة محفوظة لـ Freepik

مقدمة

ببساطة شديدة، الرابط العميق هو رابط يأخذك إلى محتوى بعينه، وعليه فإن أغلب الروابط في الوِب هي روابط عميقة، دعنا نأخذ مثالين على الروابط العادية والعميقة كي نرى الفرق بينهما:

• هذا رابط عميق، يأخذك مباشرة إلى صفحة حذاء على موقع Jet.com: http://www.jet.com/product/Rockport-Mens-Evander-Oxfords-Shoes/023eab3cfe1b4e27897f7a48d76f4168

• أما هذا، فرابط عادي، يربطك بصفحة الموقع الأساسية فقط، وليس بعنصر أو محتوى بعينه داخل الموقع:
  http://www.jet.com/

الروابط العميقة المُؤجَّلة Deferred Deep Links

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

مثال 1: التطبيق موجود لدى المستخدم، فيذهب الرابط بالمستخدم مباشرة إلى المحتوى.

مثال 2: التطبيق غير موجود لدى المستخدم، فيوجه الرابط المستخدم إلى متجر التطبيقات أولًا لتثبيت التطبيق، ثم يذهب به إلى المحتوى.

الروابط السياقية العميقة Contextual Deep Links

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

مشكلة الروابط العميقة مع الهواتف

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

الحلول المتوفرة للتطبيقات لتستفيد من الروابط العميقة

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

دعنا ننظر أولًا في سلوك الروابط العميقة التقليدية (Traditional Deep Links) ثم نستعرض البدائل.

الروابط العميقة التقليدية

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

مثال 1: التطبيق موجود على جهاز المستخدم مسبقًا، فسيفتح الرابط بشكل طبيعي داخل التطبيق.

مثال 2: التطبيق غير موجود على الجهاز، تظهر رسالة خطأ.

نُظم محددات المصادر الموحدة URI Schemes

كانت نظم URI (اختصار لـ Uniform Resource Identifier) هي الصورة الأولية للربط العميق بالنسبة لتطبيقات الهواتف، وهي تشبه إنشاء إنترنت خاص لتطبيقك بروابط مثل myapp://path/to/content. من السهل إعداد نُظُم URI، كما أن أكثر التطبيقات لديها نظام خاص بها؛ أما سيئاتها فهي أن جهاز المستخدم لن يعرف ما هو هذا الرابط إلا إن كان التطبيق المرتبط به موجودًا مسبقًا على الجهاز، إضافة إلى فقرها لخيار بديل في حالة عدم وجود ذلك التطبيق.

حُلّت تلك المشكلة باستخدام رابط http:// عادي ليُفتح في المتصفح، لكن مع استثناء أن هذا الرابط به نص JavaScript يعيد توجيه المستخدم إلى التطبيق، فيفتح التطبيق إن كان موجودًا، أو يفتح المتجر لتثبيت التطبيق. ولا زال هذا هو الأسلوب الأساسي للربط العميق في أندرويد، أما Apple فقد بدأت بحجب هذه الطريقة منذ 2015 بالتزامن مع إطلاقها للروابط العالمية Universal Links.

Quote

المعرِّف الموحَّد للمصادر Uniform Resource Identifier: هو سلسلة محارف (حروف، أرقام، رموز) تستخدم لتعريف مصدر بيانات ما بحيث نتمكن من الوصول إلى تلك البيانات من خلال شبكة؛ أما محدد المصادر الموحَّد Uniform Resource Locator فهو نوع من معرّفات المصادر الموّحّدة URIs، يحوي معلومات عن كيفية الحصول على البيانات من مصدرها، وطريقة الوصول إليها وأسلوب التعامل معها.

مثال: http://example.org/wiki/Main_Page
Mail_Page هنا هو URI يعرّف مصدر البيانات (اسم مستند HTML)، بينما يصف URL أسلوب الوصول إلى ذلك المصدر والتعامل معه (ميثاق HTTP)، إضافة إلى موقعه في الشبكة ( اسم المُضيف example.org).
نظم معرّفات المصادر URI Schemes: هي النظم التي تحدد أسلوب التعامل مع مصدر البيانات. أمثلة: http - ftp - urn - …إلخ.

 

روابط iOS الشاملة iOS Universal Links

أطلقت Apple هذا الأسلوب من الربط العميق حلًّا لعدم وجود إجراء بديل في روابط نُظم URI، والروابط في هذا الأسلوب هي روابط عادية (http://mydomain.com/) لكنها توجه المستخدم إلى التطبيق إن كان لديه، وتوجهه إلى صفحة وِب إن لم يكن التطبيق على جهازه.

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

أما إن لم يجد التطبيق فإن الرابط يفتح في متصفح سفاري كأي رابط عادي.

وقد وجدنا من دراسة أجريناها في منصة Branch على آلاف التطبيقات أن هذا الأسلوب من الروابط – روابط iOS الشاملة - قد زاد من معدل التحويل بنسبة 40%.

روابط التطبيقات App links في أندرويد

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

روابط التطبيقات من فيس بوك

أنشأت فيس بوك روابط التطبيقات في 2014 لتكون معيارًا مفتوحًا لحل مشكلة محدودية روابط نظم URI العميقة، ويتكون رابط التطبيق هنا من جزئين رئيسيين:

1. مجموعة وسوم وصفية (<meta>) تُضاف إلى وجهة صفحة الوب في رابط http:// العادي، وتحدد هذه الوسوم موقع نظام URI الخاص بالمحتوى المرتبط بالتطبيق، والإجراء الذي سيحدث إن لم يكن التطبيق مثبتا.
2. محرك توجيه (Routing Engine) لاستخدامه “داخل التطبيقات” التي تدعم فتح تلك الروابط، ويتحقق هذا المحرك من رابط التوجيه في وسوم روابط التطبيق قبل فتحها، ثم يفتح التطبيقات المرتبطة بها أو ينفذ الإجراء البديل.

غير أن هذا المعيار -معيار روابط التطبيق الخاص بفيس بوك- به عيب خطير، إذ يتطلب عملًا من التطبيق الأصلي والتطبيق الموجَّه إليه على السواء، ولم يكن محرك التوجيه routing engine إلا في تطبيقات فيس بوك وماسنجر رغم التبني الواسع الذي حظيت بع مكونات الوسوم الوصفية (<meta>).
ولأن فيس بوك تريد أن يبقى المستخدمون داخلها ما استطاعت، فقد أزالت محرك التوجيه من كل مكان عدا تطبيق أندرويد الرئيسي لها. إضافة إلى أنها تحجب روابط iOS الشاملة، فهذا يعني أنها تقطع الطريق على أي رابط يحاول فتح تطبيق خارج فيس بوك أو ماسنجر في iOS.

ترجمة –بتصرف- لمقال What is deep linking? The simplest explanation of deep links and what makes a good deep link من موقع Branch.

حقوق الصورة البارزة محفوظة لـ Freepik

تزداد أهمية اختبارات الاستخدام في المجالات الموجّهة للمستخدمين الذين يستخدمون منتجاتنا وخدماتنا وتطبيقاتنا، والهدف الأساسي من تلك الاختبارات هو تزويد عملية التصميم ببيانات من منظور المستخدم النهائي End user؛ ذلك أن التصميم المرتكز حول المستخدم يركِّز على التصميم من أجل المستخدم الحقيقي، وتخبرنا اختبارات الاستخدام من هو هذا المستخدم، وكيف يستخدم المنتج، وما الهدف الذي يسعى لتحقيقه.

طوّر الباحثون في مجال تجربة الاستخدام تقنيات عدة على مر السنين الفائتة لاختبار أفكارهم والتأكد من صلاحيتها، وتتنوع تلك الاختبارات من دراسات قابلية الاستخدام في المختبرات إلى تلك التي طُوِّرت حديثًا مثل تقييمات تجربة الاستخدام المفتوحة عبر الإنترنت، واختبارات Guerilla.
تشمل أشهر صور الاختبارات الحالية اختبارات قابلية استخدام Usability Testing، ومجموعات التركيز Focus Groups، واختبارات المرحلة التجريبية Beta Testing، واختبارات A/B، والاستبيانات Surveys. سنتعرض في هذا المقال لخمس أنواع من هذه الاختبارات.

اختبار قابلية الاستخدام Usability Testing

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

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

جلسة اختبار قابلية الاستخدام المراقَبة Moderated Usability Testing

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

متى يستخدم هذا الاختبار

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

انتبه!

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

اختبار قابلية الاستخدام غير المراقب Unmoderated Remote Usability Testing

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

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

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

مزايا الاختبارات غير المراقبة

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

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

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

متى تستخدم الاختبار غير المراقب

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

انتبه!

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

مجموعات التركيز Focus Groups

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

متى تستخدم مجموعات التركيز

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

انتبه!

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

اختبار المرحلة التجريبية Beta Testing

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

متى تستخدم اختبار المرحلة التجريبية

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

انتبه!

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

اختبار A/B

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

يسمح لك اختبار A/B بدراسة سلوك المستخدمين وكيف يتصرفون في السيناريوهات المختلفة لاستخدام المنتج.

متى تستخدم اختبار A/B

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

الاستبيانات

الاستبيانات طريقة سهلة لجمع كمية كبيرة من المعلومات عن المستخدمين دون استثمار كثير وقت يذكر، يستطيع الباحث إنشاء استبيان باستخدام أدوات مثل Wufoo، SurveyMonkey، أو Google Forms، ثم يرسلها ويستقبل مئات الردود في بضع دقائق. والمعيار الذي تتبعه في وضع أسئلة الاستبيان هنا هو مدى تغطيتها – أي الأسئلة - لحاجات المستخد ورغباته ومشاكله.

متى تستخدم الاستبيانات

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

تتيح الاستبيانات رؤية أثر مئات الردود في نفس الوقت (حقوق الصورة: SurveyMonkey)

انتبه!

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

خاتمة

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

ترجمة -بتصرف- لمقال The Top 5 User Testing Methods لصاحبه Nick Babich.

حقوق الصورة البارزة محفوظة لـ Freepik