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

في الآونة الأخيرة، كان هناك الكثير من التطورات في تصميم مواقع الإنترنت وهي آخذة بالانتشار يوميًا. هل أنت جزء من مجتمع مصمميّ الويب؟ إن كنت كذلك، وكنت تعمل على تطوير تصاميم لواجهات الويب، إما في مجال تطوير لوحات التحكم، أو كجزء من موقع على شبكة الإنترنت. فقد ازدادت أهمية دور مصمم الويب، و سيزداد الدور أهمية في المستقبل، نظرًا لأن العديد من الشركات الناشئة بدأت تركز على التصميم أكثر يومًا بعد يوم. قد يجد المصممون قليلو الخبرة صعوبة في التعامل مع واجهات الويب. ففي سبيل إنشاء تصميم مذهل لواجهة المستخدم، تحتاج للتركيز على العديد من العوامل. ومع ذلك، فإن السرّ يكمن في دقة التفاصيل. هل ترغب بأن تكون مصممًا ناجحًا لواجهة المستخدم؟ دعني أعلمّك. وسنبدأ مع الأساسيات. نصائح متعلقة بالبداهة كلما سهل استخدام موقعك، ارتفع عدد الزوار والعكس بالعكس. يحمل التصميم البديهي (Intuitive design) أهمية كبيرة حتى عندما نتحدث عن السهولة. وهذا يعني أن موقعك يجب أن يكون لديه طرق استخدام واضحة بمجرد أن يفتحه الزائر. عادةً ما يكون التصميم البديهي غير ظاهريًا و هذه أكبر ميزة له. لا توجد خطوط عريضة افتراضية وإنما نهج معتاد لمعظم المستخدمين يمكّنهم من فعل ما يريدون بسهولة. يساعد التصميم البديهي الأشخاص في التركيز على جودة التجربة. كل زائر يرغب في إكمال مهمة دون أن يخسر وقته في المقاطعات. التصميم غير البديهي مُقلق ومشوّش. لا يمكن رؤية التصميم البديهي ولكن هذا لا يعني أن الزوار ليسوا على دراية بوجوده. وسيلاحظون أن جميع العناصر ترتبط بالعمل الذي يقومون به، مما سيجعلهم سعداء بذلك. مبادئ تصميم واجهات المستخدم هناك ثلاثة مبادئ تحدد استخدام اللغة المرئية: التواصل - يظهر بطريقة مألوفة للمستخدمين التنظيم - تقديم بنية متناسقة ودقيقة الاقتصاد - يستخدم سلسلة من التوجيهات بكفاءة طبيعة تصميم واجهة المستخدم الهدف الرئيسي من واجهات المستخدم هو تقديم تفاعل نوعي، وبالتالي، إتاحة تجربة مستخدم مذهلة. إذا رغب المستخدمون بإكمال مهمتهم بسهولة،فلا بد أن يتعاملوا مع تصميم فعال ومباشر. أهمية تصميم واجهة المستخدم بالنسبة للتطوير في بعض الأحيان، يعقد أصحاب العمل اجتماعات لمناقشة ردود أفعال المستخدمين وإيجاد طرق لتطبيق ملاحظاتهم على التصميم. والنتيجة هي تجربة مستخدم مذهلة بسبب مزيج من البساطة والفعالية. ما الدور الذي تلعبه واجهة الويب أثناء التطوير؟ يتم إجراء بحث معتمد على احتياجات المستخدم وتفضيلاته. يناقش أصحاب الشركة كل منها للتوصل إلى تطبيق الممكن منها. من المهم الإصغاء إلى احتياجات العملاء والتغذية الراجعة منهم لضبط التصميم وفقًا لما سبق، آخذين بالحسبان أفضل ممارسات تصميم واجهة المستخدم. قواعد تصميم واجهة المستخدم قاعدة الوضوح - يتوقع المستخدمون رؤية عناصر واجهة واضحة وبسيطة. يتجنب الأشخاص المحتوى المعقد عندما يكونون على الإنترنت. كما أنهم لا يريدون قضاء الوقت في تعلم كيفية القيام بما يُفترض أنه عمل بسيط. قاعدة الأولوية - سيشعر المستخدمون بالثقة عندما يكون لديهم فكرة عما هو متوقع منهم. قاعدة السياق - يجب أن تتيح واجهة المستخدم للمستخدمين قدرة التحكم بما يرون بأنه يجب عليهم التحكم فيه. قاعدة الوضع الافتراضي - إن كان موقعك واضحًا، فلن يحاول المستخدمون تغيير الإعدادات الافتراضية. من المهم أن يكون لديك وضع افتراضي: تأتي أجهزة التلفزيون مع إعدادات افتراضية والتي نادرًا ما يتم تغييرها. نادرا ما يتم تغيير درجة حرارة الثلاجة نجد الأوضاع الافتراضية في كل جانب من جوانب الحياة الأوضاع الافتراضية جوهرية لكل تجربة تأكد من أن الأوضاع الافتراضية عمليّة وقابلة للتطبيق. فنادرًا ما يتم تغييرها. نصائح إنشاء واجهة جديدة معرفة المستخدمين: فرّق بين أهدافهم وأهدافك. أدرجها ضمن قائمة الأولويات. بعد ذلك، خُض في خبراتهم واختصاصاتهم لمعرفة ما يحتاجونه. تعرف على الواجهات المفضلة لديهم واستخدمها. تجنب الصيحات الحديثة وخصائص التصاميم التي بالكاد تمّ طرحها . الطريقة الوحيدة لمساعدة عملائك على إنجاز مهامهم هي بالتركيز عليهم. التنقُّل وهيكل تصميم واجهة المستخدم: حاول التوصل إلى حلول تركز على التفاعل بين المستخدمين والمنتج وتساعد المستخدمين على إنجاز مهمتهم. صنّف الحلول وفقا للأهمية والقوة ودور المستخدم وبالاعتماد على سهولة الاستخدام. اعتنِ بالهيكل، وبنية البيانات، والتنقُّل وصمم واجهة المستخدم تصميمًا عمليًّا مع محتوى غني. إعداد الوثيقة النهائية: يجب أن تحتوي الوثيقة النهائية على بنية واجهة المستخدم بأكملها. ولا بد أن تعرض نهج المنتج من مرحلة التهيئة إلى المرحلة النهائية عندما يتم عرضها على المتصفح. اتبع الأنماط: يصادف المستخدمون معظم الأوقات واجهات مختلفة عن الواجهة الخاصة بك. بعض المواقع التي يصادفها معظم المستخدمين يوميًا هي الفيسبوك و تويتر ومواقع الأخبار و الووردبريس. ربما كنت تعرف مدى نجاح هذه الواجهات لذا يتوجب عليك ألّا تعيد اختراع العجلة. بدلا من ذلك، استعن بتلك المنصات للبحث عن حلول للمشاكل التي تواجهها. فمن الجيد أن تمتلك أنماط مألوفة لواجهة المستخدم. ابحث في التعليقات: يجب عليك دومًا الاستجابة لاحتياجات المستخدمين. يجب أن تمنح المستخدمين الإرشادات وتفسّر سوء الفهم وتصحح الأخطاء. تأكد من إعلام المستخدمين بأي تغييرات. إبقائهم كذلك سيشعرهم كما لو أنهم جزء من عملية التغيير. في نهاية المطاف، وستكون واجهتك هي ما يريده المستخدمون. جعل واجهات الإنترنت سهلة التعلم كلما كان التفاعل أبسط مع واجهة المستخدم، سهل على المستخدم تذكر وظائفها. وهذا يعني أنك تحتاج إلى تصميم واجهة بطريقة تتيح للمستخدم أن يمتلك عددًا قليلًا من الأمور ليفعلها. وللقيام بذلك، سيتوجب عليك تبسيط المعلومات إلى أجزاء صغيرة قابلة للفهم. يجب عليك أيضًا مراعاة عرض ميزات الواجهة على الشاشة. لا تقذفها في وجوه المستخدمين، بل فكر في إضافتها إلى مكان ما على الشريط الجانبي، أو في الجزء السفلي من الشاشة لتجنب تشتيت انتباههم. جعل واجهات الويب بديهية إن أهم عامل يحدد أداء تطبيق الويب هو واجهة المستخدم. هل لديها تصميم بسيط للوحة التحكم؟ إن لم تكن كذلك، فحاول تبسيطها. يمكن لواجهة المستخدم أن تظهر أساليب بسيطة لتحقيق النتائج. لا يهم إذا كان لديك برامج قوية، فالناس تتجاهل تصميم لوحة التحكم عديم الفعالية. ما يهم هو تفاعل المستخدمين مع البرنامج أثناء مساعدتهم على تحقيق هدفهم. ولذلك، فتصميم المواقع الإلكترونية قائم على التركيز على المستخدم أكثر فأكثر. اجعل قرارات المستخدم بسيطة كل شيء يبدأ بجعل التصميم بسيطًا قدر الإمكان. لماذا؟ التصاميم المعقدة تشوش المستخدمين وتصعّب عليهم اتخاذ القرار. ما الذي يمكنني النقر عليه؟ أين؟ هل هو الزر الأحمر هنا؟ هل هو الزر الأخضر هناك؟ طبقّ هيكلًا بصريّا. ما هي أهم الأشياء في واجهتك؟ أبرزها لينصب تركيز المستخدمين عليها. يمكنك التلاعب بالحجم والألوان، والطباعة، والمساحة البيضاء، وغيرها. نمط الخط ربما كنت تقول "حسنًا، أنا أعرف نمط خطوط رائع". وهذا لا يكفي. فوجود خط جيد في تصميمك يصبح عديم الفائدة إن كنت لا تعرف كيفية استخدامه، أو أين تستخدمه، أو ما هو الخط الذي يمكنك استخدامه إلى جانبه. وضع خطوط فريدة في كل مكان لن يحميك، إذ كل خط له صفاته الخاصة ويصلح لجمهور معين. بالإضافة إلى اختيار الخط المناسب لجمهورك، يجب عليك أيضًا التأكد من استخدام حجمه المناسب، لتسليط الضوء على أجزاء معينة من التصميم. يجب أيضًا استخدام الألوان، ولكن كن حذرًا مع مجموعات ألوان معينة. الخلاصة التصميم الجيد للواجهة يُشبه الهواء الذي نتنفسه. لا يمكننا أن نرى أو نفكر فيه. ومع ذلك، فهو يلبي احتياجاتنا. إذا كنت قد صادفت سابقًا واجهة المستخدم سيئة، فستقدّر الموقع الذي يملك واجهة مستخدم سهلة. يجب على التصميم الجيد أن يُشعرك بالثقة دائمًا طالما كنت تركز على مهمتك ويقضي على القلق من أن ارتكابك للخطأ. يجب أن تكون التطبيقات ومواقع الويب عملية ويجب على المصممين وضع المزيد من الجهد والوقت على سهولة استخدام المنتج. ترجمة -بتصرف- لمقال Designer’s Guide for Designing Web App Interfaces لصاحبه Iggy

في كل مرة أسمع فيها كلمة "بيان" (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

هنالك الكثير من القواسم المشتركة بين مسوِّقٍ عبر الشّبكات الاجتماعيّة وبين مُعلنٍ رائع كان يعمل في الستّينيّات من القرن المنصرم. وقد اشتهر David Ogilvy، وهو الأب الرّوحي للإعلان، بأنّه يقضي الكثير من الوقت في انتقاء العناوين، لأن العنوان هو أكثر سطرٍ يقرأه النّاس، وهو في غاية الأهميّة. وكان Ogilvy أستاذًا في أشياء كهذه، أي في ترتيب الأشياء بحسب أهميّتها. لو عاش وشَهِد زمن الشّبكات الاجتماعيّة، فأنا متأكّدٌ من أنّه سيقول شيئًا من قبيل: لم تكن الصّور بهذه الأهميّةً من قبل في الشّبكات الاجتماعيّة. فقد أصبحت الآن مفتاحًا لجذب المزيد من التّفاعل عبر الإنترنت، ويشبه في ذلك العنوان في الإعلان. المشكلة الوحيدة هنا هي عندما لا تكون بارعًا تمامًا في تصميم الرّسوم البيانيّة، وقد يكون إنشاء صورٍ ملفتة للنّظر ومثيرة للاهتمام عندئذٍ أمرًا صعبًا. كيف يمكن لغير المصمّمين أن يقوموا بإنشاء صورٍ رائعة للشبكات الاجتماعيّة؟ يمكن فعل ذلك من خلال تعلّم مبادئ تصميم بسيطة قابلة للتّكرار. وإليك ثلاث مبادئ أساسيّة في التّصميم تساعدك على إنشاء صور ملفتة للشّبكات الاجتماعيّة كلّ مرّة: المبدأ الأول: قم بإنشاء مخطط بسيط ومتوازن هكذا بدت طاولتي في Airbnb اليوم صباحًا وهكذا بدت طاولتي بعد حوالي 30 ثانية. هل تلاحظ أيّ فرق؟ تحتوي كلتا الصّورتين على نفس العناصر. لم يتم إزالة أي شيء من الطّاولة، ومع ذلك فالصّورة الثّانية تبدو أفضل بكثير عند إجراء تعديلٍ طفيف على التّنسيق، على الأقل بالنّسبة لي. ويمكن أن نتعلّم درسًا بسيطًا من ذلك، وهو أنّ تنسيق العناصر في الصّور يُحدِث فرقًا كبيرًا. ألقِ نظرةً على هذين المثالين الأساسيين: ألا تبدو الصّورة الثّانية أفضل بكثير؟ ذلك بسبب مبدئين اثنين من مبادئ التّصميم المتعلّقة بتنسيق الصّورة، وهما التّقارب proximity والمحاذاة alignment. التقارب كما يوضّح Bakari Chavanu: في المثال أعلاه، وفي الصّورة الأولى تم وضع الأيقونة والنّص بشكل متقارب جدًا. وذلك يحرم كلًا من العناصر من الوقوف لوحدها والقيام بدورها. توصل الأيقونة بصريًا فكرة ركوب الأمواج يوصل النّص تفاصيل عن ركوب الأمواج يعني تطبيق مبادئ التّقارب أنّه يجب توجيه المشاهد مباشرةً إلى الأيقونة ثم إلى النّص بشكلٍ واضح. ممّا يتيح للمشاهد فهم ما يُراد إيصاله بشكلٍ أفضل. في المثال الثّاني، تمّ تجميع النّص إلى جانب النّص فقط. إنّ تطبيق مبدأ التّقارب يضفي الوحدة unity والتّتابع continuity على الصّور. المحاذاة إنّ محاذاة العناصر في الصّورة بشكلٍ مناسب يساعد في الحفاظ على التّوازن. وإليك مثال صور مدرسة التّزلّج مرّةً أخرى. أعلى الأيقونة والنّص متحاذيين في كلتا الصّورتين. النّص بأكمله متراصف في الصّورة اليُمنى فقط. أسفل الأيقونة والنّص متحاذيين في الصّورة اليُمنى فقط. تسهم جميع هذه الاختلافات الصّغيرة في جعل الصّورة اليُمنى أكثر توازنًا وجذبًا. كيفيّة إنشاء صور متوازنة وبسيطة عندما يكون لديك عناصر مختلفة في الصّورة التي تقوم بإنشائها، كالنّص، والأيقونات والرّسوم الإيضاحيّة، فعليك أن تفكّر بالدّور الذي يلعبه كلّ عنصر في الصّورة. حافظ على نوعٍ من المحاذاة بين العناصر المختلفة، سواء كان عموديًا، أو أفقيًا أو مائلًا. المبدأ الثاني: يحدث اللون فرقا كبيرا تقول Leslie Cabarga، مؤلّفة كتاب دليل المصمّم إلى تركيبات الألوان The Designer’s Guide to Colour Combinations: إنّ اللّون ليس مجرّد عنصر مرئي فحسب، وإنّما عنصرٌ شعوري أيضَا. وبما أنّ اللّون يثير مشاعر معيّنة، فغالبًا ما قد يحدّد فيما إذا كان النّاس ينجذبون إلى الصّور التي تقوم بإنشائها أم لا. وذلك لا يعني أنّ الأمر ببساطة الابتعاد عن درجات ألوانٍ معيّنة، وإنّما يعني ضرورة التّفكير بالدّور الذي يلعبه لونٌ معيّن في ما تبتكره. وذلك الدّور بسيط هو إحداث تباين في صورك. وتصف Callie Kavourgias وظيفة اللّون والتّباين هذه كما يلي: وإليك مثالين بسيطين عن ذلك في الصّورتين التّاليتين، لكلّ زوج من الدّوائر اللّون نفسه في المنتصف، لكن يبدو كلٌ منهما مختلفًا عن الآخر. وقد تلاحظ تغيّرات في العمق مع تغييرات الألوان المختلفة: ويُظهِر هذا التّباين أنّ إدراك الألوان المستَخدمة في صورك قد يختلف اختلافًا كبيرًا بحسب طريقة مزجك لها. إنّ المبدأ الأساسي عندما يكون الأمر متعلّقًا بالألوان والتّباين: حافظ على البساطة، فغالبًا ما يكون الأقل هو الأقوى تأثيرًا. من الضّروري أن تختار مزيجًا من الألوان المتناسبة، لكن كيف تختار الألوان؟ كيفية اختيار ألوان متباينة Paletton من الأدوات الرّائعة التي اكتشفتها مؤخّرًا للمساعدة في اختيار الألوان المتباينة. وهي أداةٌ تختار ألوانًا متباينة ومتمّمة لبعضها البعض لئلا تضطرّ للتّفكير بالموضوع كثيرًا. في هذا المثال، اخترت الأحمر كلونٍ أساسي، والمتمثّل بأعلى نقطة في عجلة الألوان، وطلبت نسق الألوان الأحاديّة، وهو نسق الألوان الذي يرتكز على ظلال ودرجات لونٍ واحد. عندما أقوم بالمرور فوق المربّعات المختلفة على اليمين، تظهر لي رموزًا ست عشرية، مثل FF6B6B الذي يمكن رؤيته في الجزء الأيمن من الصّورة أعلاه، والذي يمكن أن أستخدمه في تصميماتي. في المثال الثّاني، استخدمت الأحمر أيضًا كلونٍ أساسي، لكنّني طلبت هذه المرّة نسق ألوانٍ تكاملي ثلاثي، أي ثلاث ألوان متموضعة بشكلٍ متساوي في الخطوط حول عجلة الألوان. ومرّة أخرة، أستطيع اختيار ألوانٍ متباينة تتلاءم مع بعضها. هنالك أداةٌ أخرى أستخدمها كثيرًا وهي Brand Colors، عبارةٌ عن مجموعة رموز ألوان رسميّة للشّركات ذات الشّهرة العالميّة. يظهر الرّمز السّت عشري عند المرور فوق أيّ لونٍ من الألوان، كما فعلت هنا مع شركة Addvocate،. عندما أشعر بالعجز ولا أتمكّن من التّفكير في مزيجٍ عظيم من الألوان، فغالبًا ما أستخدم أداة Brand Colors لأستوحي الأفكار. وهذا النّوع من الأدوات ينقذ غير المصمّمين من أمثالي. المبدأ الثالث: اختر خطوطا متناسقة وتسهل قراءتها قد يكون هذا التّشبيه مستخدمًا كثيرًا، لكنّ اختيار الخط يشبه اختيار الملابس التي ترتديها إلى حدٍ ما. إنّ اختيارك لملابسك يعكس جزءًا من شخصيّتك وأسلوبك. فالدّخول إلى اجتماع وأنت ترتدي بدلة مقابل أن ترتدي قميصًا بكمّين قصيرين وسروالًا قصيرًا يترك انطباعات مختلفة عنك لدى الآخرين. ومن هذا المنطلق، فعندما تستخدم خطوطًا في الصّور التي تضعها على الشّبكات الاجتماعيّة فإنّها توصل رسالة أساسيّة عنك وعن شركتك. لنستخدم مثالًا على ذلك، إليك صورتين للشبكات الاجتماعيّة يمكن الاختيار بينهما، أيّهما تفضّل؟ في الحقيقة أنا أميل نحو الصّورة على اليسار لسببين: لأن قراءتها أسهل الخطّان يبدوان متكاملين أكثر وذلك لا يعني أنّ الصّورة الأخرى سيئة للغاية، وإنّما يوضّح أهميّة التّركيز على دور النّص. يلخّص Max Luzuriaga، وهو مصمّم ومطوِّر ويب، الأمر بشكلٍ جيد: وذلك يطرح سؤالًا هامًا للغاية، كيف نختار الخط الذي نستخدمه؟ يمكن أن نعتمد هنا على نصيحة Dan Mayer الحكيمة عندما يقول: أفضل ما في اختيار الخطوط هو أنّك غير مضطرٍ للقيام بالكثير من العمل. تكشف لك بعض المواقع مثل Font Pair الخطوط التي تتماشى مع بعضها البعض إنّ إجراء بحثٍ سريع على جوجل، (كالبحث عن "best fonts for business quotes”) ، يقدّم لك أمثلة رائعة يمكن نسخها كيف تختار الخطوط للصّور التي تقوم بإنشائها: البسيط أفضل من المزخرف كن ثابتًا واستخدم نفس الخط بشكلٍ متكرّر عند إضافة خطٍ ثانٍ، اختر شيئًا مختلفًا فعليًا لكن ببساطة الخط الأوّل ختاما يسعدنا أن نسمع رأيك: كيف تقوم أنت بإنشاء صورٍ جذّابة للشّبكات الاجتماعيّة؟ ما هي المصادر التي ساعدتك على إنشاء تصاميم رائعة؟ ما هي المبادئ التي لم أذكرها والتي أثبتت جدواها بالنّسبة لك؟ ترجمة -وبتصرّف- للمقال How to Create Engaging Images for Social Media: A Simple Guide For Non-Designers لصاحبه Roy Olende.