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

تصميم واجهة المستخدم من أهم المهن المطلوبة حاليًا في سوق العمل، ولكن ما هي واجهة المستخدم؟ واجهة المستخدم هي ما نراه ونتفاعل معه على شاشات الحواسيب والأجهزة المحمولة، مثل موقع الإنترنت وتطبيقات الهاتف المحمول وتطبيقات الويب. لذلك فإن الشخص الذي يختار مواقع العناصر على الشاشة وتخطيط مختلف الصفحات والشاشات ومن يخطط أنماط ألوانها ورسوماتها، هو مصمم الواجهات، ويرتبط عمله مباشرة مع مطوّر الويب والتطبيقات كما يرتبط من جهة أخرى مع مصمم تجربة المستخدم. كيف يعمل مصمم واجهة المستخدم؟ من الصعب جدًّا على مصمم الرسوميات العمل على تصميم الواجهات منفردًا، لأن عمله مرتبط كليًا بالتنسيق مع مطوّر التطبيقات والويب، لذلك فإن الغالبية العظمى من مصممي الواجهات يعملون في فرق تضم مصمم رسوميات ومطوّر تطبيقات ومدير فريق الذي يجب أن يكون لديه إلمام بالتصميم والتطوير معًا، وقد يتضمن الفريق أفرادًا أكثر إن لزم الأمر مثل كاتب المحتوى وغيره. دورة تطوير واجهات المستخدم ابدأ عملك الحر بتطوير واجهات المواقع والمتاجر الإلكترونية فور انتهائك من الدورة اشترك الآن مراحل تصميم واجهة المستخدم يمر مشروع تصميم الواجهة بعدة مراحل وهي: يتلقى المدير طلبًا لتنفيذ مشروع واجهة تطبيق أو ويب ويحصل على كافة المعطيات والمعلومات اللازمة لبدء المشروع. يجتمع المدير بأعضاء الفريق ويطلعهم على المعطيات التي بين يديه ثم يوزع المهام على المصمم والمطور وعادة ما يبدأ المصممم العمل. يعمل المصمم على إنشاء رسومات نماذج أولية باستخدام القلم والورقة إلى أن يصل إلى نماذج مرضية لرؤيته الخاصة بالمشروع. ينقل المصمم هذه النماذج من الأوراق إلى الحاسوب ليرسم هذه النماذج بطريقة احترافية ومنسقة بأسلوب الإطار الشبكي Wireframe ثم يسلم هذه النماذج إلى المدير. ملاحظة: إن كان فريق العمل يعمل معًا في نفس المكتب فإنه يسلم هذه المخططات مباشرة، أو عن طريق إرسالها بالبريد الإلكتروني أو أية وسيلة اتصال أخرى، أو قد يلجأ الفريق للعمل معًا على أحد أدوات وتطبيقات سطح المكتب أو تطبيقات الويب المخصّصة لعمل الفرق في هذا المجال، حيث يتشارك الجميع الأفكار والتصاميم والنماذج ويعلّقون عليها ويتباحثون بأمرها، سنذكر بعضًا من هذه الأدوات والتطبيقات في الجزء الأخير من المقال. يتبادل المدير والمصمم الآراء والأفكار وتُنفّذ التعديلات ثم يرسل المدير النماذج إلى العميل ليبدي رأيه فيها ويطلب تعديلاته. يبدأ المصمم العمل على استخدام العناصر الرسومية والصور والألوان لإنشاء تصاميم رسومية أولية ثم يشاركها مع المدير الذي يرسلها بدوره للعميل لإبداء الرأي وطلب التعديلات. يعمل المصمم على التعديلات المطلوبة ويسلم التصاميم النهائية للمدير الذي يسلمها بدوره للمطور ليعمل على تطوير التطبيق أو الموقع ومن ثم يسلم المشروع إلى العميل. قواعد تصميم واجهة المستخدم لتصميم واجهات جيدة ومتميزة واحترافية نحتاج إلى اتباع قواعد معينة تضمن تألق وتميز التصميم كما تضمن سهولة استخدامه وقبوله من قبل المستخدمين. التناسق يجب استخدام نفس أنماط التصميم ونفس تسلسل الإجراءات للحالات المتماثلة، يتضمن ذلك الاستخدام الصحيح للألوان والطباعة والمصطلحات في الشاشات والأوامر والقوائم الفورية خلال رحلة المستخدم، حيث تسمح الواجهة المتسقة للمستخدمين بإكمال مهامهم وأهدافهم بسهولة أكبر. يجب أن يكون المستخدم مرتاحًا في استخدامه للواجهة ولا يشعر بالارتباك، مثلًا لا يجب وضع زر القائمة المنبثقة أسفل الواجهة بينما اعتاد المستخدمون على وجودها أعلى الواجهة، وكذلك لايجب أن يوضع زر شراء المنتج أعلى صفحة المنتج وفوق صورته والمعلومات حوله بينما اعتاد المستخدمون وجود هذا الزر أسفل هذه الواجهة، وهكذا. كما يُفضّل على الدوام استخدام الأشكال المألوفة والأزرار المألوفة أكثر من الأشكال الجديدة التي قد تشعر المستخدمين بالغرابة وتجعلهم يفكرون مرتين قبل استخدام العنصر أو النقر على الزر ، فهذا التردد ليس جيدًا بمقاييس تجربة المستخدم والتصميم السليم والصحيح لواجهة المستخدم. البساطة في جميع القواعد الخاصة بتصميم أي شيء تجد مبدأ البساطة دائمًا، لأن التصميم البسيط مريح أكثر للنظر ويساعد على إيصال الرسالة بسلاسة ووضوح وسهولة دون عناء وهو الهدف من التصميم، فلا أحد يحب الواجهات المزدحمة وغير المنتظمة التي تسبب الإرباك عند محاولة التعامل معها لعدم وضوح الرسالة المفروض إيصالها أو الهدف من التطبيق أو الموقع. فإضافة المزيد من العناصر المختلفة في التصميم سيقلل التركيز على العناصر المهمة والتي يجب أن يركّز عليها المصمم. لذلك يجب التخفيف من ازدحام العناصر وتأمين تصميم بسيط يتضمن أهم العناصر فقط والابتعاد عن العناصر الأقل أهمية والتي يمكن إبرازها في واجهات أخرى يمكن التنقل إليها من الواجهة الرئيسية. مثال: أهم ما يركز عليه موقعا ياهو وجوجل هو محرك البحث وعملية البحث، وبفضل التصميم البسيط والمختصر لجوجل فإن التركيز منصب على محرك البحث فحسب، بينما يسبب ازدحام العناصر المختلفة في واجهة ياهو تشتيت الانتباه عن العنصر الرئيسي الأهم وهو خانة البحث. تناسق الخطوط من المهم التمييز بين أنواع الخطوط الواجب استخدامها عند تصميم واجهات المستخدم، حيث أن هناك خطوطًا يمكن عرضها بوضوح ضمن واجهات الويب لسطح المكتب ولكنها صعبة القراءة وقليلة الوضوح عند استخدامها في الأحجام الصغيرة ضمن الشاشات الصغيرة للأجهزة المحمولة. لذلك يجب الانتباه واستخدام خطوط ثخينة نسبيًا في الواجهات المصممة للشاشات الكبيرة والخطوط النحيفة نسبيًا عند التصميم للشاشات الصغيرة. من أهم القواعد المتبعة في هذا السياق تجنب استخدام أكثر من نوعين من الخطوط ضمن أي واجهة لضمان تناسق وأناقة التصميم. مراعاة التصميم المتجاوب تساعد بعض برامج تصميم الواجهات على إنشاء تصاميم متجاوبة تتمتع بقابلية تغيير حجم العناصر والأجزاء الأساسية بحسب حجم الشاشة المعروض عليها التصميم، مثل حجم الشعار والقوائم والفقرات النصية وغيرها، بينما لا تتمتع برامج أخرى بهذه الميزة مثل برنامج الفوتوشوب والإليستريتور، لذلك يجب أن يخصص المصمم إما عناصر بأحجام متوسطة تراعي كافة الأحجام المحتملة أو يجب عليه أن ينشئ عدة نسخ من العناصر بأحجام مختلفة ليستخدمها المطور في برمجة الواجهة حتى تكون متجاوبة وقابلة للتكبير أو التصغير بحسب حجم شاشة العرض. التباين كثيرًا ما نرى واجهات لمواقع أو لتطبيقات لا تراعي مبدأ التباين على الاطلاق بحيث تكون الألوان بين العناصر المختلفة ولاسيما بين العناصر والخطوط ذات تباين متدني بحيث يكون من الصعب تمييز العناصر أو قراءة النصوص، وعلى العكس أيضًا أحيانا يكون التباين مبالغًا فيه ما يجعل النظر ومتابعة العناصر أو القراءة مزعجة للعين وغير مريحة، لذلك يجب أن يكون التباين متوسطًا ومدروسًا حتى يحقق تجربة مستخدم مريحة وجيدة. أحد أبرز أساليب تطبيق مبدأ التباين هو تصميم واجهة بلون واحد مع التدرجات القريبة وبالأخص اللون الرمادي وتدرجاته، ومع استخدام لون حيوي مميز للعنصر أو العناصر الأهم لتأمين بروزها مع تحقيق جمالية وأناقة في التصميم. الهرمية هو من المبادئ المهمة في التصميم عامة وكذلك تصميم الواجهات خاصة، نستطيع من خلاله توجيه عين المستخدم واهتمامه بطريقة تدريجية في الاتجاه الذي نريد، ويكون تطبيق هذا المبدأ عبر تعزيز خصائص مميزة إضافية تُبرز العنصر الأهم في الواجهة مع تخفيف نسبة التعزيز للعنصر التالي في الأهمية وهكذا، وبذلك يعلم تمامًا المستخدم كيفية التوجّه ضمن الواجهة. المحاذاة يجب تطبيق هذا المبدأ على جميع محاور وأطراف التصميم، وعلى عكس تصاميم أخرى حيث يطبق هذا المبدأ على محور واحد ويكون ذلك كافيًا، إلا أن ذلك غير كاف في تصميم الواجهات نظرًا لأن هذه الواجهات عادة ما تكون مكتظة بالعناصر بالموازنة مع تصاميم فنية أخرى، ما يستوجب تطبيق المحاذاة على مختلف المحاور والأطراف ليكون المنظر العام للتصميم متوازنًا ومتناسقًا. انظر للشكل التوضيحي السابق وستلاحظ مبدأ المحاذاة بكل وضوح. التقارب وهو أحد مبادئ التصميم العامة، حيث أن تطبيقه يحسّن تجربة المستخدم لأن تناثر العناصر ضمن الواجهة وتباعدها يؤدي لتجربة مزعجة للمستخدمين وغير فعّالة لذلك يجب تنظيم العناصر بقرب بعضها وبتسلسل مرتب حتى نؤمن تجربة سلسلة ومريحة للمستخدمين. الوضوح ويقصد هنا تأمين الوضوح في الخيارات والقرارات والمتطلبات التي يجب أن ينفذها المستخدم، فعلى سبيل المثال عندما تتواجد في صفحة التسجيل حقول إدخال عدة ويتطلب كل حقل نوعية إدخال مختلفة، يجب أن يكون واضحًا ومفهومًا للمستخدم ما يجب عليه إدخاله ضمن هذه الحقول وما هي الأخطاء التي ارتكبها أثناء عملية الإدخال حتى يتداركها ويصححها بطريقة سلسلة ومفهومة وواضحة. الصورة بواسطة Antonin Kus من موقع dribbble المساحة البيضاء حافظ على المساحات البيضاء قدر الإمكان وأكثر منها دون تردد، لأنها أثبتت فعاليتها في اجتذاب المستخدمين فهي تسبب الشعور بالراحة والرقي والأناقة وبها تتحقق مبادئ التناسق والبساطة بسهولة، لذلك تجنب استخدام المربعات والمستطيلات والخطوط التي تفصل بين العناصر قدر الإمكان واسمح للمساحات البيضاء بالسيطرة على مساحة التصميم العامة. مصدر الصورة أدوات تصميم واجهة المستخدم تقدم بعض هذه الأدوات والبرامج إمكانات متكاملة في تصميم الواجهات وبعضها يسمح بمشاركتها مباشرة مع باقي أعضاء الفريق لمناقشتها وتحديثها مباشرة، بينما البعض الآخر تقليدي للغاية حيث يجب أن تصمم الواجهات يدويًا من البداية ومن ثم إرسال النماذج إلى باقي أعضاء الفريق، وفي أحيان كثيرة يحتاج المصمم إلى استخدام أكثر من برنامج وتطبيق ومنصة لإتمام المهمة على أكمل وجه. أدوبي فوتوشوب أشهر برنامج للتصميم ومعالجة الصور وأكثرها شيوعًا، يمكن استخدامه لتصميم واجهات مواقع الويب أو حتى التطبيقات حيث يحتوي على أدوات الشرائح الخاصة بتقسيم وتقطيع التصميم إلى شرائح بحسب العناصر المرسومة، ومن ثم تصدّر هذه الشرائح إلى ملفات صور مستقلة لكل عنصر بتنسيق PNG لضمان خاصية الشفافية في حال تواجدها ضمن الشريحة المصدّرة، ليتمكن المطور من استخدام هذه العناصر معًا وتركيبها لإنشاء الواجهة أو التطبيق. ويمكن استخدامه لمعالجة الصور المستخدمة في التصميم أو لإنشاء عناصر أخرى كالأزرار أو الخلفيات أو أشكال القوائم وغيرها. أدوبي إليستريتور بسبب تخصصه في إنشاء الرسومات الشعاعية، فإنه البرنامج الأقوى والأنسب لإنشاء عناصر مميزة شعاعية متجاوبة التصميم لكل أجزاء وأنواع التصاميم مثل القوائم والأزرار والنماذج والرسوميات والأيقونات وغيرها. كما يمكن استخدامه لإنشاء تصاميم النماذج الأولية للمشاريع بتقنية الإطار الشبكي (Wireframe)، حيث تساعد أدواته القوية على إنشاء هذه التصاميم بسهولة وسرعة. Sketch سكتش برنامج مميز ومتخصص في إنشاء وتصميم الواجهات عالية الدقة بكل أنواعها ويعد من أقوى البرامج في هذا المجال، حيث يتضمن قوالب جاهزة للمساعدة في إنشاء هذه التصاميم، كما يتضمن إعدادات مخصصة جاهزة بحسب قياسات مختلف الأجهزة لتصميم التطبيقات والويب. لعل أبرز عيوبه هو أنه برنامج مخصص للعمل على نظام واحد فقط وهو ماكنتوش العامل على حواسيب آبل بينما لا تتوفر منه نسخ تعمل على ويندوز أو لينكس. Adobe X D يوفر أدوبي إكس دي أفضل بيئة للمشاريع الرقمية ضمن مجموعة Adobe Creative Cloud لأدوات تصميم الواجهات. لا تشبه واجهة هذا البرنامج واجهات بقية برامج أدوبي مثل الفوتوشوب والإليستريتور وغيرها، إلا أنك ستعتاد العمل عليه بسرعة لسهولة استخدامه ووفرة أدواته الخاصة بهذا النوع من التصاميم. Figma تمكنك فيجما من إنشاء واجهات وتصميمها بسرعة. حيث تفخر منصة Figma بكونها أداة تصميم تعاونية حيث يمكن لعدة مستخدمين العمل في وقت واحد على المشروع نفسه وهذا فعّال للغاية عندما يكون لديك العديد من أصحاب العلاقة في المشروع ذاته يشاركون في تشكيل النتيجة مثل المصممين والمطورين والمدراء، ولذلك هي أداة مثالية عندما تعمل على مشروع واحد بالاشتراك مع مصمم ومطور وكاتب محتوى في نفس الوقت. Balsamiq بالساميق أداة مميزة وقوية إنشاء نماذج الإطار الشبكي Wireframe حيث يمكنك تطوير البنية والتخطيطات لمشاريعك بسهولة، وتعمل عناصر السحب والإفلات على تسهيل الاستخدام ويمكنك ربط الأزرار بصفحات أخرى. هذا يعني أنه يمكنك البدء بسرعة في تخطيط واجهاتك ومن ثم مشاركتها مع فريقك أو عملائك. Zeplin مع أن زيبلن أداة جيدة لإنتاج النماذج الأولية، إلا أنه يناسب إلى حد كبير مرحلة ما بعد التصميم وما قبل التطوير جنبًا إلى جنب مع النماذج الأولية. يمكّنك تسليم التصميم والنماذج الأولية للمطورين والتأكد من تنفيذ أفكارك بطريقة جيدة. وتستطيع مشاركة ملفات سكتش Sketch و فوتوشوب Photoshop وملفات X D و فيجما Figma إلى زيبلن لاستحداث بيئة للمطورين والمصممين للعمل على المشروع معًا ومن ثم تسليمه دون الحاجة إلى إنشاء الإرشادات واستعمال وسائل التواصل المختلفة. InVision إن فيجين هو أداة تساعد في إنشاء واجهات تفاعلية جميلة مع مجموعة كبيرة من الميزات حيث يمكنك إنشاء حركات وانتقالات مخصصة من عدد من الإيماءات والتفاعلات. وبفضل هذه الأداة يمكنك التوقف عن التفكير في إنشاء العديد من النماذج لأجهزة متعددة لأنه يمكن تحقيق التصميم سريع الاستجابة داخل لوح رسم واحد. خاتمة على الرغم من أنه يجب عليك دائمًا اتخاذ قرارات قائمة على رؤيتك وخبرتك وذوقك الفني، إلا أن اتباع مجموعة من القواعد والإرشادات سيوجهك في الاتجاه الصحيح ويسمح لك باكتشاف مشاكل الاستخدام الرئيسية في وقت مبكر من عملية التصميم. تنطبق هذه القواعد على معظم واجهات المستخدم، كما تكفي مجموعة الأدوات التي ذكرناها لإنشاء تصاميم متكاملة على الرغم من وجود المزيد من التطبيقات والأدوات خارج هذه القائمة إلا أن ما ذكرناه في هذا المقال أكثر من كافٍ. والأهم هو التعاون بين أعضاء الفريق واتباع خطوات العمل لإتمام عملية التصميم وتسليم المشروع إلى العميل.

أصبحت المشاريع الرقمية أكثر تعقيدًا وأهميةً للأعمال، لذلك يجب أن يتكيف نهج تصميم واجهة المستخدم مع هذا التغيير، مما أدى إلى ظهور نهج تكراري. وبالعودة إلى بدايات تصميم الويب، فقد كان مصمم الويب يعمل على كل المشروع بمفرده عند إنشاء مواقع إلكترونية لعلامةٍ تجارية، لكن الأمر مختلف في يومنا هذا، حيث يتطلب إنشاء موقع إلكتروني فِرَقًا كبيرةً من الأفراد المتخصصين، بدءًا من كُتّاب الإعلانات وصولًا إلى المصممين والمطورين. وتجدر الإشارة إلى أن تلك التخصصات تضم تخصصات دقيقةً، مثل مصممي واجهة المستخدم UI ومصممي تجربة المستخدم UX ومطوري الواجهة الأمامية ومهندسي الخادم وخبراء قواعد البيانات ومهندسي المعلومات والمسوقين الرقميين وغير ذلك كثير. إن وجود عدد كبير من الخبراء في يومنا هذا طبيعي، فقد أصبحت معظم مواقع الأعمال أكثر تعقيدًا بمئات أضعاف ما كانت عليه قبل 20 عامًا، ولا يمكن أن ننسى وجود تطبيقات الويب وتطبيقات الأجهزة المحمولة وروبوتات الدردشة وما إلى ذلك، وكلها أمور أدت إلى حدوث هذا التعقيد، وحدوث تطور سريع في جميع أنواع المجالات، بما في ذلك تصميم واجهة المستخدم. صورة 1: أصبح تصميم واجهة المستخدم أكثر تعقيدًا من أي وقت مضى أهمية تطوير تصميم واجهة المستخدم UI تتزامن زيادة تعقيد المشاريع مع زيادة المصاريف التي تسبب خطرًا حقيقيًا ناتجًا عن تضخم الطبيعة الحرجة للمشاريع الرقمية. حيث لم يَعُد بإمكان المؤسسات العمل دون وجود نظام رقمي فعال، كما تجذب المخاطر العالية للمشاريع الرقمية عددًا متزايدًا من الجهات المعنية، بمن فيهم الأشخاص من جميع أنحاء المؤسسة الذين يحتاجون إلى نجاح المشروع، ولديهم آراء قوية حول كيفية تحقيق الشركة لتلك الرؤى والأهداف. ويمكن للشركات أن تهدر استثمارات كبيرةً وتعاني من عواقب وخيمة في حال فشل تصميماتها، ولهذا يجب الأخذ في الحسبان آراء المستخدمين الذين يرفعون من المخاطر باستمرار بتوقعات متصاعدة، حيث يبني المستخدم عادةً توقعاته من خلال آخر أفضل واجهة استخدمها، وبذلك فإن تصميم واجهة المستخدم الحديثة هي أن تحدد توقعات المستخدم من خلال آخر واجهة مستخدم واجهها أثناء تصفح المواقع الإلكترونية. وبذلك فإن الطريقة الوحيدة التي يمكن للمؤسسات أن تعمل بها لمواجهة هذه الطلبات المتزايدة، هي تشكيل فِرَق أكبر تتكون من العديد من المتخصصين، ومع ذلك لن ينتهي التعقيد بسبب تضارب الأولويات ووجهات النظر المختلفة، فمن المتوقع أن تتعطل النماذج القديمة لبناء مواقع الويب، حيث لم يَعُد يكفي صب المحتوى في قوالب التصميم، فقد أصبح الأمر معقدًا وتخصصيًا لدرجة كبيرة. يمثل الابتعاد عن نموذج الشلال -وهو عملية تصميم متتالية تستخدم في عمليات تطوير البرمجيات- تحديًا ثقافيًا للعديد من المنظمات، وهو الأمر الذي يسبب إخفاقاتٍ كبيرةً، حيث توجد العديد من الشركات التي حاولت تنفيذ عمليات إعادة تصميم واسعة النطاق، وانتهى بها الأمر في تجاوز الميزانية، وعلى الرغم من كل هذا التعقيد، يقدم التفكير التصميمي نهجًا أكثر تكراريةً لعملية تطوير وتصميم واجهة المستخدم UI. صورة 2: أحد الأسباب التي تؤدي إلى الفشل الكبير لمشاريع المواقع الإلكترونية هو طريقة إدارة هذه المشاريع النهج التكراري لتصميم واجهة المستخدم UI تتنوع الطرق لإنشاء واجهة المستخدم UI، حيث لا توجد طريقة صحيحة تمامًا، ولا يوجد حجم واحد يناسب جميع الحلول، ولكن هناك تحول بعيد عن النهج الخطي إلى شيء أكثر تكراريةً، حيث يكون التعاون هو مفتاح نجاح التصميم، بعد أن يتفقد المختصون صحة الأفكار باستمرار، وهو النهج الذي يبدأ غالبًا بما يُعرف بمرحلة الاكتشاف. مرحلة الاكتشاف تبدأ المشاريع بمرحلة أولية مناسبة لطبيعتها، حيث تحدّد طبيعة المشروع والهدف منه، في حين أن مرحلة الاكتشاف مرحلة مشابهة لما يحدث في المشاريع التقليدية، إلا أنها متميزة وفريدة من نوعها، حيث تبدأ هذه المرحلة بالبحث الجيد عن رغبات وتوقعات المستخدم، بينما تركز المرحلة الأولية في المشاريع التقليدية على الهدف الذي يجب تحقيقه، وتتكامل الأهداف التنظيمية وتوقعات المستخدم، حيث يساعد التركيز على احتياجات المستخدم في تحقيق الأهداف التنظيمية طويلة المدى. وتركز أبحاث المستخدم على فهم احتياجات المستخدم ومراقبة سلوكه، بدلًا من البحث عن طريقة لإقناعه بالشراء أو استطلاع رأيه في المسائل المختلفة، حيث يمكنك بصفتك مصممًا استبدال المجموعات المركزة والعوامل الديموغرافية بتحليل المهام الأعلى والتركيز على أسئلة المستخدم، وكذلك يمكنك النظر إلى ما هو أبعد من شخصيات التسويق إلى خرائط التعاطف Empathy Maps التي توفر لك فهمًا أعمق للمستخدمين ورسم خرائط رحلة العميل. صورة 3: تعمل خرائط التعاطف على تحويل تركيز الجمهور نحو تلبية احتياجاته بعيدًا عن إقناعه بشكل مباشر وتختلف مرحلة اكتشاف تصميم واجهة المستخدم عن تلك التقليدية، حيث تأخذ وقتًا أقل من المعتاد، وذلك لأن تصميم واجهة المستخدم يدرك أن التغيير أمر حتمي ومرغوب فيه حتى عندما تتعلم المزيد عن احتياجات المستخدم، حيث يُعَد التوسع في المشاريع التقليدية أكبر عدو لهذه المشاريع، وذلك بسبب تكلفة التغيير العالية، ونتيجةً لذلك فغالبًا ما تتضمن المرحلة الأولية من المشروع إنشاء مواصفات مفصلة تغطي كل جوانب المشروع، التي عادةً ما تستغرق وقتًا طويلًا. ويختلف الأمر في المشاريع الرقمية، حيث يمكنك فهم توقعات واحتياجات المستخدمين، من خلال الاختبارات الملموسة معهم، كما أن التعديل والتوسع في مشروعك غير مكلف نسبيًا، لأن المواد الخام المستخدمة هنا -وهي وحدات البكسل- مجانية، ولذلك يجب أن تتقبل التغيير في واجهة المستخدم، وتذكر أن فهم احتياجات المستخدمين يؤدي إلى تقليل الوقت اللازم للتعديل مستقبلًا. تصميم واجهة المستخدم والهوية المرئية ترتبط الهوية التجارية ارتباطًا وثيقًا في تصميم واجهة المستخدم، كما يمكن أن ينفذها المصمم نفسه، إلا أنها تمتلك تخصصات تختلف عن بعضها، حيث يركز تصميم واجهة المستخدم على قابلية الاستخدام والتفاعل، بينما يضع التصميم الجمالي والعلامة التجارية تركيزًا أكبر على الإحساس والتواصل العاطفي. ينشئ المصمم شخصية العلامة التجارية عند بدء المشروع، وتصبح الوظيفة الرئيسية هي تجسيد الشخصية في واجهة المستخدم، ويُعَد من الضروري معالجة مسألة التصميم الجمالي بعد مرحلة الاكتشاف الأولية، لأنه من غير المعتاد إجراء تحديث للعلامة التجارية في نفس وقت إعادة تصميم موقع الويب، وعلى الرغم من عدم وجود طريقة صحيحة للتعامل مع هذا الأمر، إلا أن الطريقة التي يفضلها المصممون المحترفون، هي معالجة التحديث بعيدًا عن تصميم واجهة المستخدم. من ناحية أخرى يمكن أن تساعد العديد من التمارين في تحديد هوية علامتك التجارية، مثل تمارين العمل التعاوني وتصميم مناطق الاستقبال ومعرفة الشخص المشهور الذي سيمثل العلامة التجارية، كما يمكن اختبار مدى توافق تصورات المستخدم عن العلامة التجارية مع أهدافك العملية، حيث يمكن تحديد الكلمات التي تريدها أن تمثل علامتك التجارية، ومن ثم إظهار تلك الكلمات للمستخدمين ليختاروا الكلمات المناسبة من وجهة نظرهم. صورة 4: هناك العديد من التمارين التي تساعد في إنشاء هوية العلامة التجارية بما في ذلك لوحة المزاج. ومع ذلك يمكن تطوير العناصر الجمالية للتصميم جنبًا إلى جنب مع واجهة المستخدم، لكن من الأفضل تعلم الأساسيات قبل البدء بالعمل على واجهة المستخدم نفسها، وذلك حتى تتمكن من التركيز على عنصر واحد من عناصر التصميم في كل مرة، وتذكر أن اختبار رغبات المستخدمين هو العمود الفقري لمنهج تصميم واجهة المستخدم، ولهذا السبب تُعَد النماذج الأولية أهم خطوة في خطوات تصميم واجهة المستخدم. صورة 5: يمكن أن تكون مطابقة الكلمات الرئيسية طريقةً مفيدةً لتحديد ما إذا كنت قد أنشأت الشكل الجمالي الصحيح للعلامة التجارية. بناء نموذج أولي مستمر بدلا من المواصفات الوظيفية يحل النموذج الأولي مكان المواصفات الوظيفية في كثير من الأوقات، حيث يصبح الرؤية المشتركة التي يبحث عنها الجميع، وذلك بسبب مرونة هذا المفهوم الذي يتطور حسب ملاحظات المستخدم، على عكس المواصفات الفنية، ويمكن تحديد أساس موقعك الجديد وتصميم واجهة المستخدم المرتبطة به من خلال مرحلة الاستكشاف، التي تعتمد على الأسئلة التي يطرحها مصمم الموقع على المستخدمين، لمعرفة رأيهم وتوقعاتهم المستقبلية من عملك. ولعل أبرز طريقة لتقديم تجربة المستخدم بطريقة مميزة، هي إجراء فرز البطاقات Card sorting على تلك الأسئلة والمهام، وهو أسلوب لتصميم تجربة المستخدم وتحديد بنية المعلومات وطريقة عمل الموقع، وذلك بعد اتباع الخطوات البسيطة التالية، بدايةً ستكتب كل سؤال أو مهمة على بطاقة فهرسة منفصلة، ثم تطلب من المستخدمين جمعها في الفئات التي تناسبهم، وأخيرًا تطلب منهم تسمية هذه الفئات، لتصبح معلوماتك الخاصة جاهزةً في نهاية هذه العملية. صورة 6: ينظم المستخدمون المعلومات في مجموعات تكون منطقيةً بالنسبة لهم خلال تمرين فرز البطاقات تختلف طريقة إنشاء النماذج الأولية بين المواقع ذات المحتوى الثقيل وتطبيقات الويب، حيث تبدأ العملية في المواقع ذات المحتوى الثقيل، بإدخال بنية المعلومات المقترحة في نظام إدارة المحتوى، حيث تكون الصفحات الموجودة في نظام إدارة المحتوى فارغةً في هذه المرحلة؛ أما الخطوة التالية فتتمثل في تشكيل فرضية حول نهج محتمل لتصميم واجهة المستخدم، مما يساعد في إجراء مزيد من التحسينات على بنية المعلومات، للانتقال إلى المرحلة التالية دون مشاكل تُذكر. هذه العملية من الفرضية والاختبار والتكرار هي أساس عملية تصميم واجهة المستخدم الحديثة، وينطبق نفس المبدأ الأساسي سواءً العمل على هندسة المعلومات أو أي جانب آخر من تصميم واجهة المستخدم، وبذلك يصبح المصمم أكثر ثقةً مع مرور الوقت، وبالتالي يمكنه البدء في إضافة المزيد من الدقة إلى النموذج الأولي، كما يمكن لمتخصصي المحتوى البدء في تحديد المكونات الرئيسية لإجابات أسئلة المستخدم وتحديدها في قائمة نقطية، وفي الوقت نفسه يمكن لمصممي واجهة المستخدم البدء في التفكير في التسلسل الهرمي المرئي للمواقع، وتقديم عناصر التخطيط الأساسية لجذب انتباه المستخدمين إلى المكونات الرئيسية للصفحة. صورة 7 : ستكون النماذج الأولية لواجهة المستخدم أساسيةً للغاية مع التركيز على هندسة المعلومات وأسئلة المستخدم في هذه المرحلة يوحد المصممون عناصر تصميم واجهة المستخدم في أنماط مكتبية، وهي مكتبة قابلة لإعادة الاستخدام من مكونات التصميم، يمكن من خلالها بناء الموقع النهائي، وتضمن الأنماط المكتبية الاتساق وتحسين إمكانية الصيانة وتقليل تكلفة إنشاءات الموقع في العديد من الحالات. صورة 8: بمرور الوقت يمكن أن يتطور النموذج الأولي ليشمل التسلسل الهرمي المرئي ومحتوى أكثر اكتمالًا بينما يمكن لكاتب المحتوى البدء في صياغة إجابات كاملة لأسئلة المستخدم، في حين يمكن للمصممين تقديم أنماط واجهة المستخدم مثل الطباعة واللون، وبهذه الطريقة سيبدأ تصميم واجهة المستخدم والمحتوى في الظهور من خلال عملية الاختبار والتطور، وبذلك تقدم كل جولة من التكرار تدريجيًا مزيدًا من الدقة في تجربة المستخدم، مما يسهل على الشركة إصدار التحديثات المتتالية لموقعها الإلكتروني، دون مفاجأة المستخدمين بخواص جديدة، حيث اختبر الجمهور المستهدف كل الخصائص في كل خطوة من خطوات التصميم بفضل الاختبار. صورة 9: يمكن أن يستمر التصميم في التطور بناءً على ملاحظات المستخدم ومع تقديم المزيد من الدقة من النموذج الأولي إلى الإصدار التجريبي إلى بدء العمل تتأثر طريقة إدارة المشاريع الرقمية بالعالم المادي، حيث تكون لحظة إطلاق منتج في العالم المادي مهمةً وتأخذ الكثير من الوقت لمعرفة رأي الجمهور وتعليقاته، والمدة الزمنية الطويلة التي استغرقها المنتج منذ بدء العمل عليه وحتى إصداره، بخلاف العالم الرقمي الذي يتسم بالمرونة الشديدة. حيث ينتقل النموذج الأولي إلى بيئة الإنتاج، عندما يكون فريق التطوير وأصحاب العمل أكثر ثقةً في اتجاه نموذجهم الأولي، وهنا يمكن وضع بنية أكثر قوةً في مكانها لإنجاز أعمال التكامل المعقد، ويُشار إلى موقع الويب الذي لم يُطرح بعد على أنه إصدار تجريبي، الذي يصبح موقعًا قابلًا للاستخدام الرسمي، عندما يكون فريق التصميم واثقًا من قدرته على تلبية احتياجات المستخدم. وعلى الرغم من عمليات اختبار الموقع مع المستخدمين خلال مرحلة النماذج الأولية، إلا أن تفاعل المستخدمين الحقيقي والطبيعي لا يزال غير ملموس في هذه المرحلة، لذلك يجب أن يكون الإصدار التجريبي متاحًا للجمهور، من خلال وضع علامة الإصدار التجريبي على الموقع الرئيسي، وسؤال المستخدمين عما إذا كانوا يرغبون في تجربته. صورة 10: يجب إتاحة الإصدار التجريبي بشكل عام حتى تتمكن من مراقبة طريقة تفاعل المستخدمين معه في العالم الحقيقي يتيح ذلك لفريق العمل فرصة مراقبة طريقة استجابة المستخدمين للموقع الجديد، باستخدام أدوات التحليل ومُسجِّلات الجلسة، حيث يمكن رؤية تفاعل المستخدمين رؤيةً طبيعيةً مع الإصدار التجريبي وإجراء التغييرات النهائية بناءً على تجربتهم، وبعد إجراء المزيد من التحسينات على الإصدار التجريبي، سنصل إلى مكان يكون فيه الإصدار التجريبي أفضل من الموقع الحالي، وهنا يتخذ فريق العمل وأصحاب العمل قرارًا بإيقاف تشغيل الموقع الحالي واستبداله بالإصدار التجريبي، وهي نقطة انطلاق الموقع للعمل ولكنها ليست الخطوة الأخيرة في المشروع. المراقبة المستمرة والتدقيق والتطور صورة 11: نتعلم المزيد عن سلوك المستخدم بعد إطلاق المشروع أكثر من أي مرحلة أخرى، لكن لسوء الحظ يحدث هذا عادةً عندما نحتاج المزيد من المال إن أكبر الأخطاء التي تحدث عند تصميم واجهة المستخدم هو الاعتقاد بأن المشروع قد انتهى بمجرد تشغيل الموقع، فبمجرد نشر موقعك الإلكتروني، ستتوفر لديك أعداد كبيرة من البيانات التي تبين طريقة تفاعل المستخدمين الحقيقيين مع الموقع، وبذلك أدركت الشركات في يومنا هذا أن واجهة المستخدم ومحتوى الموقع، مفهومان قابلان للتطور والتحسن لفترة طويلة بعد تاريخ تشغيل الموقع الإلكتروني، حيث يراجع فريق العمل المحترف العمل السابق دوريًا، ويدقق التحليلات والمشاكل التي تحتاج إلى إيجاد الحلول، ويتتبع سلوك المستخدم ليتناسب العمل الجديد مع تغيرات سلوكه واهتماماته، لذلك يجب تطوير موقع الويب كل بضعة أشهر، بما في ذلك تطوير واجهة المستخدم، من خلال النهج التكراري الذي يُعَد من أفضل تقنيات إدارة المشاريع التقليدية. مزايا النهج التكراري لتصميم واجهة المستخدم تشكو المنظمات من عدم توفر الوقت أو المال لعمل النماذج الأولية، وهو السبب الذي تستخدمه الشركات لعدم اعتماد النهج التكراري لتصميم واجهة المستخدم، بينما توفر النماذج الأولية الكثير من الوقت والتكاليف، إذا اتبع فريق العمل خطوات التصميم والتطوير اتباعًا صحيحًا. فمن خلال التحقق من صحة كل مرحلة من مراحل التطوير، يمكن للمؤسسات تجنب الأخطاء والافتراضات المكلفة حول احتياجات المستخدم، والتي ستكون مكلفةً وتستغرق وقتًا طويلًا لإصلاحها في مراحل لاحقة من المشروع، وبذلك تصل إلى السوق وصولًا أسرع بسبب تجنب مراحل المواصفات الطويلة. صورة 12: يؤدي اختبار نموذج أولي مع مستخدمين حقيقيين إلى حل الخلافات حول الاتجاه في جزء صغير من الوقت ويعمل النهج التكراري لتصميم واجهة المستخدم على تحسين الاتصال، حيث يقدم كل شخص أفكاره لتكوين رؤية مشتركة للنموذج الأولي، الأمر الذي يضمن سير العمل بطريقة جيدة وضمن بيئة مرنة، كما يساعد اتباع النهج التكراري على تجنب النقاشات والخلافات، من خلال الاختبار مع مستخدمين حقيقيين وبالتالي إيجاد الحلول سريعًا. ترى بعض الشركات أن الانتقال إلى هذا النموذج الجديد يمثل مخاطرةً كبيرةً للغاية، حيث يفضل الناس التمسك بالمناهج المجربة والمستخدمة على مر السنين، لكن هذه المخاوف ليست في مكانها، فلا يوجد موقع إلكتروني بقي متصدرًا وملائمًا لفترة زمنية طويلة دون تحديث، حيث يتجاوز الميزانية ويفشل في الوصول إلى السوق بالسرعة الكافية، وحتى عندما لا يقع المشروع في هذه المشاكل، فإنه غالبًا ما يفشل في تحقيق الأهداف التنظيمية. وبذلك نجد أن أحد أفضل الأشياء في اتباع النهج التكراري لتصميم واجهة المستخدم هو أنه يقلل من المخاطر، من خلال التحقق المستمر من صحة الأفكار مع المستخدمين طوال العملية، حيث يمكنك التأكد من أنك تبني موقعًا إلكترونيًا يلبي احتياجاتهم، وبذلك تكون منظمة العمل أكثر ثقةً في دخول السوق والتأكد من أن استثمارها سيحقق عائدًا جيدًا. جرب تصميم واجهة المستخدم باعتماد النهج التكراري وتحقق من النتائج لا تتردد في تجربة النهج التكراري لتصميم واجهة المستخدم، وابدأ بطريقة هادئة، فأنت لا تحتاج إلى تبديل النهج بين عشية وضحاها، لذلك يمكنك استخدام هذا النهج الجديد في مشروع ذي أولوية منخفضة، وإذا نجحت هذه الطريقة، فحاول إدخال بعض الجوانب في المشاريع الأكبر، وربما تكون هذه مرحلة اكتشاف أو على الأقل مرحلة إعداد بعض النماذج الأولية والاختبار، حتى تنفيذ بعض جوانب تصميم واجهة المستخدم التفاعلي أفضل من عدم فعل أي شيء، وتذكر أنه لا يوجد نهج صحيح تمامًا، لذلك اختر النهج الذي يناسب أهدافك وتطلعاتك. ترجمة -وبتصرّف- للمقال How to adopt an iterative approach to UI design لصاحبه Paul Boag. اقرأ أيضًا اختبار التصميم وأفضل الطرق لإجرائه موازنة بين أفضل أدوات تصميم واجهة المستخدم UI منافسة البيدق والملك في تصميم واجهة المستخدم UI Design قواعد تصميم الواجهات النسخة الكاملة من كتاب أساسيات تصميم الرسوميات

يُعَد اختبار التصميم أمرًا ضروريًا لا يقل أهميةً عن اختبار المواقع الإلكترونية، الذي يحدث بواسطة مجموعة من تقنياتٍ مميزة لاختبار قابلية استخدام الموقع، ويستخدم العديد من مصممي الويب نهجًا تكراريًا لتصميم واجهة المستخدم، ومع ذلك لا تركز أي من هذه التقنيات على اختبار جماليات التصميم أو تركيبات التصميم، لذلك يأتي السؤال الأبرز هنا، ما أهمية اختبار التصميم؟ وكيف تؤثر على عمل المصمم؟ أهمية اختبار التصميم لا يفضل العديد من المصممين إجراء اختبارات التصميم، حيث إن التصور السائد هو أن العميل يدفع للمصمم مقابل خبرته، لذلك يجب أن يكون المصمم هو الشخص الوحيد في هذه العملية، بحيث يطور الشكل والمظهر دون تدخل من أحد، كما يعبّر الكثير من المصممين عن خوفهم من تعرض التصميم للخطر إذا أعربت الجماهير عن رأيها به. وقد تكون بعض هذه المخاوف في مكانها أحيانًا، وهنا يجب أن يتخذ المصمم قرارات التصميم وحده، ومع ذلك يتدخل أصحاب العمل في عملية التصميم، مما يبرز أهمية اختبار التصميم، الذي قد يكون طريقةً فعالةً لتقليل تأثير شخص واحد ضعيف المعرفة، لذلك سنلقي نظرة أقرب على فوائد اختبار التصميم. اختبار التصميم أبعد من التفضيلات الشخصية يقدم المصممون كل خبرتهم وإبداعهم لإظهار التصميمات بأفضل صورة، ولا شك بأنهم يجرون العديد من التعديلات حتى يصل شكل التصميم إلى الجودة المطلوبة من وجهة نظرهم الشخصية، لكن الحقيقة تختلف قليلًا، حيث ما يهم هو ما إذا كان المستخدمون يستجيبون لهذه التصميمات بطريقة إيجابية أم لا. لذلك يجب ألا يكون التفضيل الشخصي عاملًا رئيسيًا عند تصميم الموقع الإلكتروني، حتى ولو كان هذا هو تفضيل المصمم، فمن الطبيعي أن يُنشئ المصمم مواقع ويب لا ترضي ذوقه الشخصي، إنما تكون من أفضل المواقع لدى المستخدمين، وهذا أهم ما في الأمر كله. يغني اختبار التصميم عن المواجهات المتعلقة بالتصميم نفسه تُلغَى العديد من المشاريع لأن العميل والمصمم لا يمكنهما الاتفاق على التصميم، حيث يشعر المصمم أن العميل يجب أن يرضخ لتجربته وتدريبه، بينما يعتقد العميل أنه المسؤول عن سير العمل لأنه يدفع مقابل تصميم الموقع الإلكتروني، والحقيقة أنه يمكن أن يكون هذا النوع من الجمود ضارًا بطريقة كبيرة، لكن اختبار التصميم طريقة ممتازة لإنهاء هذه الخلافات. يساعد اختبار التصميم على متابعة العمل بدقة يتعلق اختبار التصميم بإبلاغ العميل عن سير عملية التصميم، حتى ولو كان المصمم هو الشخص الرئيسي في هذه العملية، فالحقيقة أنه كلما كان المصمم أكثر انفتاحًا لمناقشة عمله مع العميل، زادت فرصة تقديم موقع إلكتروني بتصميمٍ عالي الجودة، فمن خلال مقابلة مستخدمين حقيقيين وإتاحة الفرصة لهم لطرح أسئلة حول شكل وأسلوب الموقع، يمكن للمصمم أن يكون على دراية أفضل عند تطوير مفاهيمه. يقلل اختبار التصميم من فرص الرفض من اللجنة الرئيسية غالبًا ما يُعرَض التصميم للعديد من الأشخاص المختلفين قبل الموافقة النهائية، وقد يحدث ذلك من خلال لجنة رسمية أو نقطة الاتصال بين المصمم وأصحاب العمل، وهنا يأتي دور اختبار التصميم الذي يقدم نهجًا بديلًا، من خلال توفير بياناتٍ حقيقية حول كيفية استجابة المستخدمين للتصميم، وبالتالي تجنب المخاوف التي تنشأ حول صحة التصميم من عدمها. كيف تختبر جماليات التصميم؟ يرغب المصمم في اختبار أفضل الألوان والأشكال، لإخراج تصاميم عالية الجودة، حيث يبحث المصمم عادةً عن أفضل الطرق، ليتأكد من نجاح تصميمه في نقل الإحساس والشخصية الصحيحة للمستخدمين، ومن هنا تأتي أهمية اختبار جماليات التصميم. سؤال المستخدمين غير كافٍ يعتقد الكثير من المصممين أن الطريقة الصحيحة لمعرفة رأي المستخدمين حول تصميماتهم، هي عرض هذه التصاميم على المستخدمين واختبار مدى إعجابهم بها، لكن هذا النهج كفيل بخلق مشكلتين، الأولى تتمثل في عدم الدقة، حيث لا يُعَد إعجاب المستخدمين في تصميمك المعيار الوحيد للحكم النهائي، أما المشكلة الثانية أن تعليقات المستخدمين عادةً ما تكون غير محددة ونابعةً من مزاجهم وتفضيلاتهم الشخصية، وكلها تعليقات غير مفيدة للتصميم في نهاية الأمر. ركز على قيمة العلامة التجارية وهويتها تعد النماذج الأصلية في العلامة التجارية أداةً مفيدةً لتحديد طابع علامتك التجارية. إن المعيار الأساسي الذي يحدد جودة تصميمك، هو مقدار تقديم التصميم انعكاسًا جيدًا للشركة التي يمثلها، لذلك يحتاج المصمم الناجح إلى معرفة خصائص العلامة التجارية بدقة، حيث توجد عدة طرق للتعرف على العلامة التجارية عن قرب، ولعل أبرز تلك الطرق هي معاملة العلامة التجارية على أنها شخص حقيقي، بحيث ترغب في التعرف على صفات هذا الشخص الافتراضي عن قرب. وبغض النظر عن أن هذا الشخص ستكون لديه سمات شخصية محددة، فيمكنك التعبير عنها بصفتك مصممًا باستخدام الكلمات الرئيسية، كأن يكون هذا الشخص رسميًا أو منفتحًا أو مفعمًا بالحيوية، وبذلك تصبح هذه الكلمات وغيرها جوهر العلامة التجارية، وعندها يبدأ البحث عن أفضل تصميم يمكنه توصيل هذه الكلمات إلى المستخدمين بصورة جيدة، وهنا تأتي أهمية الاختبار مع مستخدمين حقيقيين، حيث يمكنك استخدام مجموعة من التقنيات سنتعرف عليها عن قرب. تقنيات اختبار التصميم اختبار A / B يُعَد اختبار A / B الاختبار الأساسي والمثالي، عندما لا تكون متأكدًا من أفضل نهج لإجراء اختبار التصميم، ففي بعض الأحيان يمكنك الذهاب في اتجاهات مختلفة مع التصميم، وأنت غير متأكد من اختيار الاتجاه المناسب لك، عندها يكون اختبار A / B خيارك الأمثل للبدء، حيث يمكن من خلاله تقديم تصميمين مختلفين للمستخدمين، لاختيار الأنسب والأفضل من وجهة نظرهم. Helio هي أداة تجعل اختبار A/B تصميمًا مباشرًا يساعد هذا الاختبار على تحديد وحصر الخيارات، فبدلًا من طرح أسئلة مفتوحة حول التصميم، يمكن طرح قائمة تضم كلمات علامتك التجارية، بحيث يختار المستخدمون أفضل الكلمات التي تمثلها، مما ينقل المحادثة من إظهار آراء بسيطة إلى أمور أعمق مرتبطة مباشرةً بعلامتك التجارية. الدراسات الاستقصائية الدلالية يقدم المصمم للمستخدم في هذا الاختبار، تصميمات فرديةً أو متعددةً مرفقةً بتصنيفاتها والكلمات المتعارضة معها، مثلًا التصميم رسمي أو غير رسمي، بسيط أو متكلف، حيث يمكن أن تكون هذه الاختيارات إما اختيارًا أبيض وأسود أو مقياسًا منزلقًا، ويُعَد المسح الاستقصائي الدلالي طريقةً ممتازةً لمعرفة كيفية أداء موقعك مقابل الكلمات الرئيسية التي اخترتها. يعد المسح التفاضلي الدلالي طريقةً ممتازةً لمعرفة أداء موقعك مقابل الكلمات الرئيسية التي اخترتها ولتحقيق أفضل النتائج من الدراسة الاستقصائية، احرص على استخدام عدد فردي من الخيارات لقياس صفة ما للتصميم، مثل أن يكون مقياسك من 1 إلى 5 بدلًا من 1 إلى عشرة، حيث يميل المستخدمون عادةً لاختيار الخيار الأوسط في حالة التعداد الزوجي، لذلك يجبرهم استخدام مقياس بأعداد فردية على الاختيار الدقيق. من ناحية أخرى يمكن أخذ الكلمات الرئيسية المستهدفة التي تمثل العلامة التجارية، ومن ثم إضافة كلمات أخرى محتملة لوصف التصميم، كما يمكن تصميم استبيانٍ يُظهر التصميم ويطلب من المستخدمين الكلمات المناسبة التي تصفه، حيث يمكن أن يكون هذا الاختبار مفيدًا لاكتشاف نقاط الضعف المرافقة للتصميم. يمكن أن تكون مطابقة الكلمات الرئيسية طريقةً مفيدةً لتحديد ما إذا كنت قد أنشأت الشكل الجمالي الصحيح للعلامة التجارية اختبار التصميم عن طريق المنافسة تتيح لك طريقة اختبار التصميم عن طريق المنافسة، معرفة جودة أداء تصميمك موازنةً بتصميمات المنافسين، حيث تعرض تصميمك جنبًا إلى جنب مع تصميمٍ منافس في مكان واحد، وبعدها تطلب من المستخدمين اختيار أفضل تصميم يمثل كل كلمة من الكلمات الرئيسية في قائمتك (مثلًا الموقع الأكثر رسميةً وموثوقيةً واحترافيةً). يمنحك تصنيف تصميم موقع مقابل المنافسة فكرةً عما إذا كنت قد نجحت في تمييز علامتك وتُعَد هذه الطريقة ممتازةً لمعرفة ما إذا كنت تتفوق على المنافسين، كما تحدد مشكلةً شائعةً حيث ينتهي الأمر بالتصميمات داخل قطاع ما بنفس الشكل، وبذلك إذا واجه المستخدمون صعوبةً في اختيار تصميمٍ على آخر، فمن الواضح أنك لم تفعل ما يكفي ليتميز تصميمك. الاختبارات المفاجئة يركز الاختبار النهائي على الانطباعات الأولى، حيث يصدر المستخدمون أحكامًا حول المواقع من أول نظرة، حيث تُظهر الأبحاث أنه إذا كان لدى الأشخاص انطباع سلبي أولي عن موقع، فمن المرجح أن ينظروا إليه نظرةً نقديةً فيما يتعلق بالمحتوى وسهولة الاستخدام، لذلك يجب أن يترك الموقع انطباعًا أوليًا ممتازًا لدى المستخدمين. وهذا ما يفعله الاختبار المفاجئ، حيث تُظهر تصميماتك للمستخدم لمدة ثانية أو ثانيتين فقط ثم تحصل على رد فعله، وعندها قد تجد أن المستخدمين يسارعون لإطلاق الأحكام السريعة على تصميمك، بسبب الإطار الزمني القصير، ومع ذلك يمكنك اكتشاف ما إذا كان لديهم رد فعل إيجابي أو سلبي لما شاهدوه. العناصر الجمالية لا تقل أهمية عن قابلية الاستخدام يحب العديد من مصممي الويب الإشارة إلى أنفسهم على أنهم "مصممون يركزون على المستخدم"، وقد جاء اختبار قابلية الاستخدام للتأكيد على هذا الهدف، ومع ذلك فإن اختبار قابلية الاستخدام بعيد كل البعد عن الطريقة الوحيدة للاختبار مع المستخدمين، حيث يمكن أن يكون الموقع قابلًا للاستخدام بطريقة سهلة، ولكن تأثيره على المستخدمين غير موجود، لذلك يجب أن تختبر القيم الجمالية تمامًا كما تختبر قابلية الاستخدام، حتى يعمل موقعك الإلكتروني بفعالية. ترجمة -وبتصرّف- للمقال Testing design: How do you test a design comp? لصاحبه Paul Boag. اقرأ أيضًا مقدمة في تصميم واجهة المستخدم UI ومتحكماتها مجموعة نصائح لتصميم أفضل النماذج المحاكية لمواقع الويب قواعد تصميم الواجهات موازنة بين أفضل أدوات تصميم واجهة المستخدم UI النسخة الكاملة لكتاب أساسيات تصميم الرسوميات

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

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

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

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

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

يعتبر React.js -على حداثته- من أقوى أطر عمل Javascript (بعضهم قد يسميه مكتبة وليس إطار عمل) لبناء الواجهات الرسومية على الويب، حيث طبّق أفكارًا جديدة في هذا المجال، جعلت شِفرة الواجهات البرمجية أكثر نظافة، سرعة وأكثر قابلية للصيانة. يسمح لك React ببناء الواجهة الرسومية في مجموعة مكونات، كل مكوّن عبارة عن سرد لهيكلة ومنطق المكون، إذا تمزج بين شِفرة HTML مخصصّة وشِفرة جافاسكربت تصف سلوك ذاك المكون، ليكون قائما بذاته وقابلا لإعادة الاستعمال. إطار عمل React مُطور من طرف شركة فيس بوك (Facebook)، وقد يكفيك ثقة ويجذب انتباهك بمجرد أن تعرف أن فيس بوك نفسها تستخدم React في واجهتها البرمجية على موقع Facebook نفسه! يمكنك فتح موقع Facebook وعرض شفرة HTML الخاصة به والبحث عن كلمة react للتأكد بنفسك. سنقوم في هذا الدرس بإنشاء مُربَّع تعليقات بسيط وفعَّال بإمكانك وضعه في مدوَّنتك، سيكون المُربَّع عبارة عن نُسخة مُجرَّدة من التعليقات الآنية التي تُقدمها لك تعليقات Disquse ،LiveFyre أو فيس بوك. ستجد في نهاية الدَّرس أنَّ لديكَ مُربَّع تعليقات يوفِّر ما يلي: عرض لجميع التعليقات.نموذج لإرسال تعليق.خُطَّافات لتوفير مُنتهى خلفي مُخصَّص custom backend.سوف يحتوي مُربَّع التعليقات كذلك على بعض المزايا اللَّطيفة: تعليق مُحسَّن: تظهر التَّعليقات في القائمة قبل أن يتمّ حفظها على الخادم وبناءً عليه تظهر التَّعليقات في التوِّ واللَّحظة.تحديثات حيَّة: تظهر تعليقات المستخدمين الآخرين في عرض التَّعليقات في نفس وقت الإرسال.هيئة Markdown: يُمكن للمستخدمين استخدام Markdown لتهيئة نصوصهم.هل ترغب في تخطِّي كل هذا ومعاينة المصدر؟ كل شيء موجود على GitHub. تشغيل الخادمرغم أنَّه ليس من الضروري أن تبدأ بهذا الجزء من الدرس إلَّا أنَّنا سنقوم في وقت لاحق بإضافة وظائف تتطلَّب المُشاركة POST إلى خادم قيد التشغيل. إذا كُنتَ واثقٌ من أنّك على دراية بهذا الأمر وترغب في إنشاء خادمك الخاص يُمكنكَ القيام بذلك. ولِمَن يُريد التَّركيز على تعلُّم React دون الحاجة إلى القلق بشأن جوانب الخادم، فلقد كتبنا خوادم بسيطة بعددٍ من اللُّغات: Python ،Ruby ،Go، Node.js و PHP. كلُّ هذا مُتاح على GitHub. يُمكن الاطِّلاع على المصدر أو تحميل ملفّ مضغوط للبدء. للبدء بتطبيق هذا الدَّرس، كلّ ما عليكَ فعله هو بداية تحرير public/index.php. البدءسنستخدم لهذا الدرس ملفَّات JavaScript سبق إنشاؤها على شبكة توصيل مُحتوى CDN. قم بفتح المُحرِّر المفضَّل لديك وقم بإنشاء مُستند HTML جديد: <!-- index.html --> <!DOCTYPE html> <html> <head> <title>Hello React</title> <script src="https://fb.me/react-0.13.3.js"></script> <script src="https://fb.me/JSXTransformer-0.13.3.js"></script> <script src="https://code.jquery.com/jquery-2.1.3.min.js"></script> </head> <body> <div id="content"></div> <script type="text/jsx"> // Your code here </script> </body> </html>سيتمّ كتابة شفرات JavaScript في وسم السكربت هذا طوال الفترة المتبقية من الدرس. مُلاحظة: قُمنا بإدراج jQuery هُنا لأننا نٌريد تبسيط الشَّفرات لاستدعاءات Ajax في المُستقبل، ولكنَّها ليست إلزاميَّة لعمل React. مُكوِّنكَ الأوَّلتتمحور الفكرة الأساسيَّة لـ React حول كل شيءٍ له علاقة بالمُكوِّنات التركيبيَّة القابلة للتَّشكيل modular, composable components. سنستخدم بنية المُكوٍّنات التالية لمثال مُربَّع التَّعليقات لهذا الدرس: - CommentBox - CommentList - Comment - CommentFormسنقوم الآن ببناء المُكوِّن CommentBox وما هو إلَّا وسم بسيط: // tutorial1.js var CommentBox = React.createClass({ render: function() { return ( <div className="commentBox"> Hello, world! I am a CommentBox. </div> ); } }); React.render( <CommentBox />, document.getElementById('content') );لاحظ أن أسماء عناصر HTML تبدأ بحرف صغير في حين أن أسماء فئات React تبدأ بحرف كبير. 1. صياغة JSXستُلاحظ أوَّل ما تلاحظ تلكَ الصياغة المُشابهة لـ XML في شفرة JavaScript. لدينا precompiler بسيط يُترجم الجُملة البسيطة Syntactic Sugar إلى شفرات JavaScript المُجرَّدة هذه: // tutorial1-raw.js var CommentBox = React.createClass({displayName: 'CommentBox', render: function() { return ( React.createElement('div', {className: "commentBox"}, "Hello, world! I am a CommentBox." ) ); } }); React.render( React.createElement(CommentBox, null), document.getElementById('content') );إنَّ استخدام صياغة JSX اختياري ولكن وجدنا أنَّها أسهل استخدامًا من شفرات JavaScript مُجرَّدة. يُمكن قراءة المزيد في مقال صياغة JSX 2. ماذا يحدث هنانقوم بتمرير بعض الوظائف في كائن JavaScript إلى دالَّة ()React.createClass لإنشاء مُكوِّن React جديد. أهم هذه الوظائف ما تُسمَّى تصيير render والتي تُعيد شجرة من مُكوِّنات React والتي في نهاية المطاف ستقوم بالتصيير عبر HTML. لا تُعتبر وسوم عُقَد نموذج كائن مُستند DOM فعليَّة، وإنَّما هي تمثيلات من مُكوِّنات div الخاصَّة بـ React. يُمكنكَ اعتبارها كوسوم أو قطع من البيانات والتي يعرف React كيفيَّة التعامل معها. React آمن. لا نقوم بتوليد سلاسل HTML لذلك فإن حماية XSS تُعتبر الافتراضيَّة. لا يجب عليكَ إعادة شفرات HTML قياسيَّة. وإنَّما يُمكنكَ إعادة شجرة من المُكوِّنات التي قُمتَ (أو شخص آخر قام) ببنائها. هذا ما يجعل React قابلة للتَّشكيل composable: وهي عقيدة أساسيَّة في الواجهات الأماميَّة القابلة للصّيانة. يقوم ()React.render بتمثيل المُكوِّن القاعدي، بدء عمل الإطار، ثم إدخال الوسوم إلى عنصر نموذج كائن مُستند خام، يتمّ تقديم تلك الوسوم كمُعطى ثاني . تركيب المُكوِّناتسنُنشيء الآن هياكل بناء لكلٍّ من المُكوِّنين CommentList وCommentForm والتي ستكون -مرَّة أخرى- عبارة عن وسوم بسيطة. أضِف هذين المُكوِّنين إلى ملفِّك مع الحفاظ على تعريف commentBox الحالي واستدعاء React.render: // tutorial2.js var CommentList = React.createClass({ render: function() { return ( <div className="commentList"> Hello, world! I am a CommentList. </div> ); } }); var CommentForm = React.createClass({ render: function() { return ( <div className="commentForm"> Hello, world! I am a CommentForm. </div> ); } });ما سنقوم بعمله الآن هو تحديث مُكوِّن CommentBox لاستخدام المُكوِّنات الجديدة: // tutorial3.js var CommentBox = React.createClass({ render: function() { return ( <div className="commentBox"> <h1>Comments</h1> <CommentList /> <CommentForm /> </div> ); } });لاحظ كيف تمَّ مزج وسوم HTML والمُكوِّنات التي قُمنا ببنائها. إنَّ مُكوِّنات HTML ما هي إلَّا مُكوِّنات React مُنتظمة، تمامًا مثل تلك التي تقوم بتعريفها ولكن مع فارق واحد. سيقوم مترجم JSX تلقائيًا بإعادة كتابة وسوم HTML إلى تعبيرات React.createElement() tagName وترك كل شيء على حدة. وهذا لمنع حدوث التَّلوّث في مساحة الاسم العموميَّة global namespace. استخدام الخصائصسنقوم الآن بانشاء مُكوِّن Comment، والذي سوف يعتمد على البيانات التي تمَّ تمريرها إليه من المُكوِّن الأساسي. يتمّ اتاحة البيانات التي تمّ تمريرها من مُكوِّن أساسي كـ "خاصيَّة" في المُكوِّن الفرعي. ويتمّ الوصول إلى هذه "الخصائص" من خلال this.props. يُمكننا باستخدام الخصائص props قراءة البيانات التي تمّ تمريرها إلى Comment من CommentList، وتصيير بعض الترميزات: // tutorial4.js var Comment = React.createClass({ render: function() { return ( <div className="comment"> <h2 className="commentAuthor"> {this.props.author} </h2> {this.props.children} </div> ); } });يُمكنكَ وضع نصّ أو مُكوِّنات React في الشَّجرة وذلك بإحاطة تعبير JavaScript بأقواس داخل JSX (إما كخاصيَّة أو كمُكوِّن فرعي). نقوم بالوصول إلى خاصيَّات مُسمَّاه تمّ تمريرها إلى عنصر كمفاتيح على this.props وأيّ عناصر مُتداخلة كما this.props.children. خصائص المُكوِّننحتاج الآن وبعد أن قمنا بتحديد مُكوِّن Comment إلى تمرير اسم الكاتب ونصّ التعليق إلى هذا المُكوِّن. يسمح لنا هذا بإعادة استخدام نفس الشَّفرة لكلِّ تعليق مُختلف. لنقوم الآن بإضافة بعض التَّعليقات داخل مُكوِّن CommentList: // tutorial5.js var CommentList = React.createClass({ render: function() { return ( <div className="commentList"> <Comment author="Pete Hunt">This is one comment</Comment> <Comment author="Jordan Walke">This is *another* comment</Comment> </div> ); } });لاحظ أنَّنا قد قُمنا بتمرير بعض البيانات من مُكوِّن CommentList الأساسي إلى مُكوِّنات Comment الفرعيَّة. مرَّرنا على سبيل المثال Pete Hunt (عن طريق خاصيَّة) وThis is one comment (عن طريق عُقدة فرعيَّة تُشبه XML) إلى Comment الأوَّل. وكما ذكرنا بالأعلى فإنَّ مُكوِّن Comment سيعمل على الوصول إلى هذه الخصائص من خلال this.props.author، وthis.props.children. إضافة MarkdownMarkdown هي طريقة بسيطة لتهيئة مُضمّنة inline لنصِّك. على سبيل المثال، احاطة النص بعلامة النجمة (*) سيقوم بتأكيده. أولًا، أضِف مكتبة الطرف الثالث marked إلى تطبيقك. Marked هي مكتبة JavaScript تقوم بأخذ نص Markdown وتُحوِّله إلى صيغة HTML خام. هذا الأمر يتطلَّب وسم سكربت في قسم head (قُمنا بادراجه بالفعل في أرضيَّة React): <!-- index.html --> <head> <title>Hello React</title> <script src="https://fb.me/react-0.13.3.js"></script> <script src="https://fb.me/JSXTransformer-0.13.3.js"></script> <script src="https://code.jquery.com/jquery-2.1.3.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/marked/0.3.2/marked.min.js"></script> </head>سنقوم بعد ذلك بتحويل نصّ التَّعليق إلى Markdown ومن ثمَّ إخراجه: // tutorial6.js var Comment = React.createClass({ render: function() { return ( <div className="comment"> <h2 className="commentAuthor"> {this.props.author} </h2> {marked(this.props.children.toString())} </div> ); } });كل ما فعلناه هنا هو استدعاء مكتبة marked. نحتاج إلى تحويل this.props.children من نصّ React مُحاط إلى سلسلة خام يُمكن لمكتبة marked فهمها ولذلك فإننا نقوم بستدعاء دالَّة ()toString. لكن لدينا مشكلة وهي أنَّه يتمّ إظهار وسوم HTML الموجودة في التَّعليقات بالشكل التَّالي في المُتصفح: This is another comment. هذا الأمر هو حماية React لك من هجوم XSS. هُناك طريقة للالتفاف على ذلك، ولكنَّ إطار العمل يُحذِّرُكَ من استخدامها: // tutorial7.js var Comment = React.createClass({ render: function() { var rawMarkup = marked(this.props.children.toString(), {sanitize: true}); return ( <div className="comment"> <h2 className="commentAuthor"> {this.props.author} </h2> <span dangerouslySetInnerHTML={{__html: rawMarkup}} /> </div> ); } });هذه الشَّفرات هي API خاصّ والذي عمدًا يجعل من الصَّعب إدراج شفرات HTML خام، في حالتنا بالنِّسبة لمكتبة marked فإنَّنا سنقوم بالاستفادة من هذا المنفذ الخلفيّ. تذكَّر: باستخدامك لهذه الميزة فإنَّك تعتمد على مكتبة marked أن تكون آمنة. نقوم في هذه الحالة بتمرير sanitize: true التي تطلب من مكتبة marked تنفيذ أي وسم HTML في المصدر بدلًا من تمريره دون تغيير. إضافة نموذج البياناتحتَّى الآن فإنَّنا نقوم بإدراج تعليقات مُباشرة في شفرات المصدر. بدلًا من ذلك، سنقوم بتصيير بضع من بيانات JSON في قائمة التعليق. يأتي هذا من الخادم في نهاية المطاف، ولكن في الوقت الراهن سنكتبها نحن في المصدر: // tutorial8.js var data = [ {author: "Pete Hunt", text: "This is one comment"}, {author: "Jordan Walke", text: "This is *another* comment"} ];الآن نحنُ بحاجة إلى إدخال هذه البيانات في مُكوِّن CommentList بطريقة نموذجيِّة. قُم بتعديل CommentBox واستدعاء ()React.render لتمرير هذه البيانات إلى CommentList عن طريق الخصائص props: // tutorial9.js var CommentBox = React.createClass({ render: function() { return ( <div className="commentBox"> <h1>Comments</h1> <CommentList data={this.props.data} /> <CommentForm /> </div> ); } }); React.render( <CommentBox data={data} />, document.getElementById('content') );الآن حيثُ أنَّ البيانات مُتاحة في CommentList، سوف نقوم بتقديم التَّعليقات بطريقة ديناميكيَّة: // tutorial10.js var CommentList = React.createClass({ render: function() { var commentNodes = this.props.data.map(function (comment) { return ( <Comment author={comment.author}> {comment.text} </Comment> ); }); return ( <div className="commentList"> {commentNodes} </div> ); } });هذا كل شيء. الاستدعاء من الخادمسنعمل الآن على استبدال البيانات الثَّابتة ببعض البيانات الديناميكيَّة من الخادم. يتمّ ذلك بإزالة خاصيَّة البيانات data prop واستبدالها بعنوان URL للجلب: // tutorial11.js React.render( <CommentBox url="comments.json" />, document.getElementById('content') );هذا المُكوِّن مُختلف عن المُكوِّنات السَّابقة حيثُ أنَّه سيضطر إلى إعادة تصيير نفسه. لن يحتوي المُكوِّن على أيّ بيانات إلى أن يعود الطَّلب من الخادم، في هذه الحالة قد يحتاج المُكوِّن إلى تصيير بعض التَّعليقات الجديدة. الحالة التفاعليَّةقام كلّ مُكوِّن حتَّى الآن على أساس خصائصه بتصيير نفسه مرة واحدة. الخصائص props ثابتة: يتمّ تمريرها من المُكوِّن الأساسي و”مملوكة” من قبل المُكوِّن الأساسي كذلك. لتنفيذ التَّفاعلات، فإنَّنا نُقدِّم حالة قابلة للتغيير إلى المُكوِّن. حالة this.state هي خاصَّة بالمُكوِّن ويُمكن تغييرها من خلال استدعاء ()this.setState يقوم المُكوِّن بإعادة تقديم نفسه عند تحديث الحالة. وظائف ()render مكتوبة إلزاميًّا كدوال this.props وthis.state. يضمن إطار العمل أن تكون واجهة المستخدم دائمًا مُتَّسِقَة مع المُدخَلات. عندما يقوم الخادم بجلب بيانات سنقوم نحن بتغيير بيانات التعليق لدينا. لنُضيف الآن مصفوفة من بيانات التَّعليق كحالة للمُكوِّن CommentBox: // tutorial12.js var CommentBox = React.createClass({ getInitialState: function() { return {data: []}; }, render: function() { return ( <div className="commentBox"> <h1>Comments</h1> <CommentList data={this.state.data} /> <CommentForm /> </div> ); } });يتمّ تنفيذ دالَّة ()getInitialState مرَّة واحدة فقط خلال دورة حياة المُكوِّن كما أنَّها تبدأ الحالة الأوليَّة للمُكوِّن. تحديث الحالةنُريد عند إنشاء المُكوِّن لأوَّل مرَّة أن نحصل على (GET) بعض بيانات JSON من الخادم وتحديث الحالة لتعكس أحدث البيانات. هذا من شأنه أن يكون نقطة نهاية ديناميكيَّة لو كان الأمر في تطبيق حقيقي، ولكن سنستخدم لهذا المثال ملف JSON ثابت لابقاء الأمور بسيطة: // tutorial13.json [ {"author": "Pete Hunt", "text": "This is one comment"}, {"author": "Jordan Walke", "text": "This is *another* comment"} ]سنقوم باستخدام مكتبة jQuery للمساعدة في عمل طلب غير متزامن asynchronous request إلى الخادم. مُلاحظة: حيثُ أنَّ هذا الأمر أصبح تطبيق AJAX فإنَّك سوف تحتاج لتطوير تطيبقك باستخدام خادم ويب بدلًا من أن ملف موجود في نظام ملفاتك. قدَّمنا -كما هو مذكورٌ بالأعلى- العديد من الخوادم التي يُمكنكَ استخدامها على GitHub. توفر تلك الخوادم التأدية الوظيفيَّة التي تحتاجها لبقيَّة هذا الدرس. // tutorial13.js var CommentBox = React.createClass({ getInitialState: function() { return {data: []}; }, componentDidMount: function() { $.ajax({ url: this.props.url, dataType: 'json', cache: false, success: function(data) { this.setState({data: data}); }.bind(this), error: function(xhr, status, err) { console.error(this.props.url, status, err.toString()); }.bind(this) }); }, render: function() { return ( <div className="commentBox"> <h1>Comments</h1> <CommentList data={this.state.data} /> <CommentForm /> </div> ); } });وظيفة componentDidMount هنا هي وظيفة تُستدعى تلقائيًا بواسطة React عندما يتمّ تصيير مُكوِّن. مفتاح التَّحديثات الديناميكيَّة هو استدعاء دالَّة ()this.setState. نقوم باستبدال مصفوفة التَّعليقات القديمة بواحدة جديدة من الخادم وتقوم واجهة المستخدم بتحديث نفسها تلقائيًا. بسبب هذا التفاعل، يُعتبر التغيير لإضافة تحديثات حيَّة طفيفًا. سوف نستخدم أسلوب بسيط في هذا الدَّرس ولكن لكَ الحُريَّة في استخدام WebSockets أو غيرها من التكنولوجيَّات. // tutorial14.js var CommentBox = React.createClass({ loadCommentsFromServer: function() { $.ajax({ url: this.props.url, dataType: 'json', cache: false, success: function(data) { this.setState({data: data}); }.bind(this), error: function(xhr, status, err) { console.error(this.props.url, status, err.toString()); }.bind(this) }); }, getInitialState: function() { return {data: []}; }, componentDidMount: function() { this.loadCommentsFromServer(); setInterval(this.loadCommentsFromServer, this.props.pollInterval); }, render: function() { return ( <div className="commentBox"> <h1>Comments</h1> <CommentList data={this.state.data} /> <CommentForm /> </div> ); } }); React.render( <CommentBox url="comments.json" pollInterval={2000} />, document.getElementById('content') );كل ما فعلناه هنا هو نقل استدعاء AJAX إلى وظيفة مُستقلَّة واستدعائها عند تحميل المُكوِّن الأوَّل واستدعائها كلّ ثانيتين بعد ذلك. حاول تشغيل هذا في مُتصفِّحك وتغيير ملف comments.json. في غضون ثانيتين ستظهر لكَ التغييرات. إضافة تعليقات جديدةحان الآن الوقت لبناء النموذج. على مُكوِّن CommentForm أن يسأل المُستخدم عن اسمه ونصّ التَّعليق، ثم يقوم بإرسال طلب إلى الخادم لحفظ التعليق. // tutorial15.js var CommentForm = React.createClass({ render: function() { return ( <form className="commentForm"> <input type="text" placeholder="Your name" /> <input type="text" placeholder="Say something..." /> <input type="submit" value="Post" /> </form> ); } });دعونا نجعل النموذج متجاوب. عندما يقوم المُستخدم بإرسال النَّموذج، يجب علينا مسحه clear، تقديم طلب إلى الخادم، ثُمَّ تحديث قائمة التعليقات. للبدء في تنفيذ هذا، سقوم بالاستماع إلى حدث ارسال النَّموذج ومسحه. // tutorial16.js var CommentForm = React.createClass({ handleSubmit: function(e) { e.preventDefault(); var author = React.findDOMNode(this.refs.author).value.trim(); var text = React.findDOMNode(this.refs.text).value.trim(); if (!text || !author) { return; } // TODO: send request to the server React.findDOMNode(this.refs.author).value = ''; React.findDOMNode(this.refs.text).value = ''; return; }, render: function() { return ( <form className="commentForm" onSubmit={this.handleSubmit}> <input type="text" placeholder="Your name" ref="author" /> <input type="text" placeholder="Say something..." ref="text" /> <input type="submit" value="Post" /> </form> ); } });1- الأحداث Eventsتقوم React بإرفاق مُعالجات الحدث في المُكوِّنات باستخدام اتفاقية التَّسمية camelCase. نقوم بإرفاق مُعالج onSubmit إلى النَّموذج الذي يعمل على مسح حقول النَّموذج عند إرساله مع إدخال صحيح. عليكَ استدعاء ()preventDefault بالحدث لمنع الإجراء الافتراضي للمُتصفِّح من اعتماد النَّموذج. 2- المراجع Refsنستخدم خاصيَّة ref لتعيين اسم للمُكوِّن الفرعي وthis.refs لارجاع المُكوِّن. يمكن أن نستدعي (React.findDOMNode(componentعلى مُكوّن للحصول على عنصر نموذج كائن مُستند المُتصفِّح الأصلي. 3- نداءات الخصائصعندما يُرسِل المُستخدم التَّعليق، فإنَّنا سوف تحتاج إلى تحديث قائمة التَّعليقات لتشمل التَّعليق الجديد. من الطبيعي أن تفعل كل هذا في مُكوِّن CommentBox حيث أنَّ المُكوِّن يمتلك الحالة التي تُمثِّل قائمة التَّعليقات. نحن بحاجة لتمرير البيانات من نُسخة المُكوِّن الفرعي الاحتياطيَّة إلى المُكوِّن. يتمّ فعل هذا في وظيفة render الخاصَّة بالأب عن طريق تمرير رد نداء جديد (handleCommentSubmit) في الابن ثُمَّ الزامها لحدث الابن onCommentSubmit. كُلَّما تم تشغيل الحدث، سيُنفَّذ الاستدعاء: // tutorial17.js var CommentBox = React.createClass({ loadCommentsFromServer: function() { $.ajax({ url: this.props.url, dataType: 'json', cache: false, success: function(data) { this.setState({data: data}); }.bind(this), error: function(xhr, status, err) { console.error(this.props.url, status, err.toString()); }.bind(this) }); }, handleCommentSubmit: function(comment) { // TODO: submit to the server and refresh the list }, getInitialState: function() { return {data: []}; }, componentDidMount: function() { this.loadCommentsFromServer(); setInterval(this.loadCommentsFromServer, this.props.pollInterval); }, render: function() { return ( <div className="commentBox"> <h1>Comments</h1> <CommentList data={this.state.data} /> <CommentForm onCommentSubmit={this.handleCommentSubmit} /> </div> ); } });سوف نستدعي الآن النِّداء من CommentForm عندما يقوم المُستخدم بإرسال النَّموذج: // tutorial18.js var CommentForm = React.createClass({ handleSubmit: function(e) { e.preventDefault(); var author = React.findDOMNode(this.refs.author).value.trim(); var text = React.findDOMNode(this.refs.text).value.trim(); if (!text || !author) { return; } this.props.onCommentSubmit({author: author, text: text}); React.findDOMNode(this.refs.author).value = ''; React.findDOMNode(this.refs.text).value = ''; return; }, render: function() { return ( <form className="commentForm" onSubmit={this.handleSubmit}> <input type="text" placeholder="Your name" ref="author" /> <input type="text" placeholder="Say something..." ref="text" /> <input type="submit" value="Post" /> </form> ); } });الآن وبعد أن أصبح النِّداء في مكانه الصحيح، كل ما علينا القيام به هو الإرسال إلى الخادم وتحديث القائمة: // tutorial19.js var CommentBox = React.createClass({ loadCommentsFromServer: function() { $.ajax({ url: this.props.url, dataType: 'json', cache: false, success: function(data) { this.setState({data: data}); }.bind(this), error: function(xhr, status, err) { console.error(this.props.url, status, err.toString()); }.bind(this) }); }, handleCommentSubmit: function(comment) { $.ajax({ url: this.props.url, dataType: 'json', type: 'POST', data: comment, success: function(data) { this.setState({data: data}); }.bind(this), error: function(xhr, status, err) { console.error(this.props.url, status, err.toString()); }.bind(this) }); }, getInitialState: function() { return {data: []}; }, componentDidMount: function() { this.loadCommentsFromServer(); setInterval(this.loadCommentsFromServer, this.props.pollInterval); }, render: function() { return ( <div className="commentBox"> <h1>Comments</h1> <CommentList data={this.state.data} /> <CommentForm onCommentSubmit={this.handleCommentSubmit} /> </div> ); } });تحديثات مُحسَّنةمشروعنا الآن كامل الوظائف ولكن من المُمل أن نقوم بانتظار الطَّلب حتَّى يكتمل قبل ظهور تعليقك في القائمة. يُمكننا إضافة هذا التَّعليق إلى القائمة لجعل التطبيق يعمل بشكلٍ أسرع. // tutorial20.js var CommentBox = React.createClass({ loadCommentsFromServer: function() { $.ajax({ url: this.props.url, dataType: 'json', cache: false, success: function(data) { this.setState({data: data}); }.bind(this), error: function(xhr, status, err) { console.error(this.props.url, status, err.toString()); }.bind(this) }); }, handleCommentSubmit: function(comment) { var comments = this.state.data; var newComments = comments.concat([comment]); this.setState({data: newComments}); $.ajax({ url: this.props.url, dataType: 'json', type: 'POST', data: comment, success: function(data) { this.setState({data: data}); }.bind(this), error: function(xhr, status, err) { console.error(this.props.url, status, err.toString()); }.bind(this) }); }, getInitialState: function() { return {data: []}; }, componentDidMount: function() { this.loadCommentsFromServer(); setInterval(this.loadCommentsFromServer, this.props.pollInterval); }, render: function() { return ( <div className="commentBox"> <h1>Comments</h1> <CommentList data={this.state.data} /> <CommentForm onCommentSubmit={this.handleCommentSubmit} /> </div> ); } });ختامًاانتهيتَ لتوك من إنشاء مربع تعليقات في بضع خطوات بسيطة. يُمكنك الآن التَّعرُّف على المزيد حول أسباب استخدام React، أو الخوض في مراجع API وبدء العمل. ترجمة -وبتصرّف- للمقال: Tutorial | React.

شجرة مسار الصفحة (سنقوم بتسميتها لاحقًا بـالمسار) هي عبارة عن التفريعة الكاملة للصفحة بدءًا من الصفحة ‏الرئيسة للموقع، ثم التصنيف الرئيس للصفحة وأي تصنيفات فرعية لها، ومن ثم اسم الصفحة الحالية، مع وجود ‏روابط للبندين الأولين في الشجرة دون الأخير لأنه مفتوح أمامك حاليًا في المسار.‏ هناك تقنيات وخصائص في الإصدارات القديمة لـCSS‏ لا تزال تستخدم بكثرة في الوقت الحالي بالرغم من توفر ‏الإصدارات الحديثة ‏CSS3‎‏. سنقوم في هذا الدرس بإنشاء مسار ذي تصميم مُسطح، بدون الحاجة إلى وضع خلفية ‏صورة له.‏ ستكون روابط المسار مُنسَّقَة بأشكال الشارات لدعم فكرة التنقل الهرمي في المحتوى. وقد اعتدنا على وضع صورة ‏خلفية من نوع ‏PNG‏ للمسار مشابهة لأشكال الشارات، لكننا اليوم بفضل تقنيات الحدّ الذكي ‏clever border‏ سنقوم ‏بإنشاء كامل الخلفية باستخدام CSS‏ فقط.‏ يمكم معاينة مثال حي لما سيكون عليه المثال بعد نهاية الدرس. سنبدأ مباشرة بعمل روابط التنقل في المسار على هيئة ‏‎ul‎‏. سيظهر كل رابط في المسار كـ ‏li‏ ضمن نقطة ‏عنصر في المسار: ‏<div id="crumbs"> <ul> <li><a href="#">Breadcrumb</a></li> </ul> </div> نستهلّ كتابة كود CSS‏ بإنشاء كل نقطة عنصر كمربع أزرق اللون. ونقوم بتوسيط النص في المسافة المخصصة ‏للرابط متساوية على الجانبين. نستخدم ‏position: relative‎‏ لضبط خاصية التموضع للعناصر بحيث تكون ‏مرتبطة بـ ‏ul‏ الأب: #crumbs ul li a { display: block; float: left; height: 50px; background: #3498db; text-align: center; padding: 30px 40px 0 40px; position: relative; margin: 0 10px 0 0; font-size: 20px; text-decoration: none; color: #fff; } نقوم بإعادة تشكيل تأثيرات شكل الشارة في CSS‏ كي تصبح مثل خلفية صورة. استخدم مُحدِّد ‏‎:after‎‏ لإنشاء ‏عنصر إضافي يكون تنسيقه خاصًا به دون غيره. تشكّل المُثلث من خلال تطبيق العديد من حدود الـCSS، فكما ترى ‏في الصورة السابقة أن المثلث يمكن إنشاؤه بتطبيق الحدّ العلوي والسفلي بحيث تتقاطع بهذا الشكل. لعلك لاحظت ‏وجود المساحات الحمراء، تركتُها لإيضاح الفكرة فقط، حيث سنقوم فيما بعد بتحويل اللون إلى شفاف حتى يظهر ‏المثلث الأزرق جليًا. سنقوم باستخدام تأثيرات الحدود هذه في مكان آخر من خلال التموضع الحر.‏ #crumbs ul li a:after { content: ""; border-top: 40px solid red; border-bottom: 40px solid red; border-left: 40px solid blue; position: absolute; right: -40px; top: 0; } سينتج لدينا المثلث المطلوب بعد تطبيقنا لتأثيرات الحدود مع الألوان المُحَدَّدَة لكل حدّ، وبهذا يتكون لدينا شكل الشارة ‏لكل رابط نضعه ضمن المسار:‎ ‎ border-top: 40px solid transparent‏;‏ border-bottom: 40px solid transparent‏;‏ border-left: 40px solid #3498db‏;‏ باستخدامنا لنفس المبدأ السابق، نستطيع تطبيق الخطوات لينتُجَ لدينا شكل جديد على يسار المسار. سنقوم هذه المرة ‏بوضع لون الحدّ بنفس لون خلفية الصفحة حتى تختفي أجزاء من لون خلفية الرابط، ويظهر كامل الشكل مرتبًا: #crumbs ul li a:before { content: ""; border-top: 40px solid transparent; border-bottom: 40px solid transparent; border-left: 40px solid #d4f2ff; position: absolute; left: 0; top: 0; } نلاحظ أن المثلث المضاف حديثًا يؤثر على مظهر النص الخاص بوصف الرابط الذي قبله، ولكن يمكننا تدارك الأمر ‏بتعديل بسيط في الـ‎padding‎‏: padding: 30px 40px 0 80px‏;‏ كلما أضفت روابط جديدة للمسار، فإنه يزداد حجمه طولاً. وكل رابط منها مُنسق بشكل الشارة، بفضل تأثيرات حد ‏المثلث في الـCSS‏ واللمسة الجمالية للـ‏right margin‏.‏ <div id="crumbs"> <ul> <li><a href="#1">One</a></li> <li><a href="#2">Two</a></li> <li><a href="#3">Three</a></li> <li><a href="#4">Four</a></li> <li><a href="#5">Five</a></li> </ul> </div> يمكن تنسيق قائمة المسار بشيء أجمل، قم بإزالة تأثيرات المثلث عن العنصر الأول والأخير من خلال المُحدِّد ‏‏‏‎:first-child ‎‏ و ‏‎:last-child‏ باستخدام ‏‎border-radius‏، تلاحظ تحول زوايا العنصرين الأول والأخير ‏إلى زوايا مستديرة.‏ #crumbs ul li:first-child a { border-top-left-radius: 10px; border-bottom-left-radius: 10px; } #crumbs ul li:first-child a:before { display: none; } #crumbs ul li:last-child a { padding-right: 80px; border-top-right-radius: 10px; border-bottom-right-radius: 10px; } #crumbs ul li:last-child a:after { display: none; } كل ما تبقى علينا هو تطبيق تأثيرات الـ‏hover‏ على الروابط. لا تنس تغيير لون الحد اليسار ‏border-left-‎color‏ في حدث التنسيق ‏hover‏ الخاص بتأثيرات المثلث، حتى تضمن أن تتغير الألوان مع مرور الماوس على ‏روابط المسار.‏ ‏#‏crumbs ul li a:hover‏ ‏{ background: #fa5ba5‎‏;‏ ‏}‏ ‏#‏crumbs ul li a:hover:after‏ { border-left-color: #fa5ba5‎‏;‏ ‏}‏ يمكن معاينة المثال من هنا، أو تحميل الشفرة المصدرية لكامل المثال من على حساب أكاديمية حسوب على github. ترجمة -وبتصرف- للمقال How To Create Flat Style Breadcrumb Links with CSS لصاحبه Iggy.

إذا كنت قد عشت على وجه الأرض لمدة، فمن المؤكد أنك تذكر هذه الصور المتحركة المبتذلة التي تقول "الموقع قيد الإنشاء" والتي استُخدِمَت في أواخر التسعينات. لقد أحببناها، أليس كذلك؟ على أيّة حال، لقد حصل الكثير لتصميم المواقع منذ ذلك الحين. وهكذا بالنسبة للرسوم المتحركة على الوِب، حيث لم تعد هذه الحركات مبتذلة هذه الأيام، بل أنها – على ما يبدو – وجدت مكانها بين أدوات وآليات التصميم الأخرى. فلنلقِ نظرة إذًا على كيفيّة استخدام الرسوم المتحركة بفعالية، والمكان الذي تشغله في عالم تصميم المواقع الحديث. دور الحركات في الوِب الحديثقد يبدو هذا مفاجئًا في البداية، لكن عندما يتعلق الأمر بالفوائد الأساسيّة التي يمكن للحركات الجيدة أن تُضفيها، فلا شيء تغير خلال العقد الماضي، وذلك بالأساس لأن العقل البشري ما زال يعمل بنفس الطريقة تقريبًا، بغضّ النظر عن توجهات التصميم الأكثر شيوعًا هذه الأيام. فعلى سبيل المثال، أُثبِتَ أن هذه الحركات تُساعدنا على فهم ما يحصل على الشاشة، وما العنصر الأكثر أهميّة الذي علينا أن ننتبه إليه. لماذا؟ لأن هذه هي الطريقة التي يعمل بها دماغُنا. آلاف السنوات من التطور جعلتنا ما نحن عليه، وجعلتنا نعير انتباهنا للحركة. عدا ذلك، لم نكن لننجو من هجمات المفترسين في اماضي عندما كنّا نعيش في الكهوف. ولهذا، فمن المثير للاهتمام – حتى في عصر التصاميم المسطّحة والبسيطة – أنّ الحركة ما زالت تحتفظ بمكانها، وما زال بالإمكان (والمفروض أن يتم) بكل تأكيد استخدامها لإثراء تجربة المستخدم وجعل تصاميمنا مفهومة أكثر. إن الشيء الوحيد الذي تغير هو الشكل الذي يمكننا أن نستخدمه به بفعالية. لا تبدو الحركات الجيدة في 2015 – من وجهة نظر تقنيّة – مشابهة للحركات التي كانت شائعة في أواخر التسعينات وبداية العقد الأول لهذا القرن على الإطلاق. هناك العديد من الأسباب لذلك، لكن اثنين منها، وهي: 1- التقنيات الحديثةباستخدام مكتبات CSS وجافاسكربت الحديثة، صار بإمكاننا الآن إنشاء حركات مُذهلة عبر واجهات برمجة تطبيقات (APIs) والأطر البرمجية (frameworks) المُعدّة مسبقًا. وليس علينا أن نفهم الأشياء في أدنى مراحلها البرمجية؛ لكن ما علينا فهمه بدلًا من ذلك هو كيفية العمل داخل الواجهة التي توفرها لنا واجهة برمجة التطبيقات. فعلى سبيل المثال، من الأشياء التي من الممكن أنك تعرفها من مجموعة أدوبي بيئةُ إدج أنيميت Edge Animate. إن هدفها هو السماح لمصممي المواقع أن ينشئوا رسوم HTML متحركة تفاعلية عبر واجهة يسهل فهمها. في نهاية المطاف، إنها الأداة التي تزيح عنك الأحمال لتدعك تركز على الجزء الإبداعي دون القلق بشأن ما يحدث خلف الكواليس. لكن التقنيات لا تتعلق فقط بالأدوات وبجافاسكربت وCSS، بل وتتعلق أيضًا بالعتاد، وعلى وجه الخصوص العتاد الموجود بداخل الأجهزة النقّالة. لنواجه الأمر؛ إنّ الأجهزة النقّالة هذه الأيام هي حواسيب معياريّة دون قدرات عالية على المعالجة، والشيء الوحيد المختلف بشأنها هو حجم شاشة العرض. عدا ذلك، يمكن لهذه الأجهزة أن تواكب كلّ شيء. 2- نُضج تصاميم المواقعقد يكون هذا انطباعي الشخصي وحسب، لكن يبدو أن مدراء المواقع قبل سنوات كانوا يرغبون بوجود أجزاء متحركة في مواقعهم لمجرد وجودها وحسب. لقد جعلت هذه الحركات التنقّل أصعب (أصعب فيزيائيًّا، حيث تتطلب تلك العناصر وقتًا أطول لتحميلها، إلخ) وأقل وضوحًا (كان من الصعب اكتشاف ما يمكن النقر عليه وما لا يمكن). الأمر محتلف هذه الأيام، فلم نعد مُبهرين بالرسوم المتحركة منفردة، ونرغب برؤيتها تخدم هدفًا محدّدًا عوضًا عن مجرد أن تكون هناك دونما سبب يدعو لذلك. وبعبارة أخرى، فإن ما يحدث للحركات مشابه – نوعًا ما – للأيام الأولى لمركبات السير. عندما ظهرت السيارات في بادئ الأمر، كان ما زال بإمكانك السفر أسرع باستخدام الحصان (وبشكل يُعتمد عليه أكثر). إذا كانت لديك سيارة في ذلك الوقت، فقد كانت لديك لمجرد أن تكون لديك، أو للتباهي بها فقط. لكن السيارة هذه الأيام صارت أداة لتحقيق إنجاز معيّن. إن حركات الوِب تذهب بنفس الاتجاه تقريبًا. وبناء على ذلك، ما زلنا في بداية هذا الطريق وسيستغرق الأمر بعض الوقت للاعتياد على الأدوات والمكتبات والنواحي التقنية عمومًا. وهو الأمر الذي أشار إليه ستيفِن سنِل من فاندِلي ديزاين عندما سُئِلَ عن الدور الذي ستلعبه الرسوم المتحركة في مستقبل تصاميم الوِب، حيث قال: ولهذا، في نهاية المطاف يكون السؤال عن كيفيّة استخدام الحركة لوضع نفسك على المسار الصحيح ولجعل واجهاتك سلسة الاستخدام أكثر، بدلًا من أن تكون أكثر بهرجة وإرباكًا. وفيما يلي بعض الأفكار: 1- استخدم الحركات لعرض تسلسل هرميّ.تُظهِر معظم تصاميم المواقع الثابتة المخطط الهرمي لها باستخدام ألوان محدّدة وعناصر كبيرة وسميكة والكثير من المساحات الفارغة حول أهم الأجزاء. هذه استراتيجية سليمة، لكن يمكننا عمل أكثر من هذا بكثير باستخدام حركات إضافيّة. لقد أثبِتَ علميًّا أنَّ الحركة ملحوظة أكثر بكثير من أيّ طريقة للعرض. ولهذا، فليست هناك أيّ طريقة أفضل لتوضيح أهميّة بعض العناصر أكثر من إضفاء الحياة عليها باستخدام الحركة. خذ هذه على سبيل المثال: [حركة تطبيق موسيقى لسِرجى فاليوك و توبيك ستوديو في Behance] واضح من النظرة الأولى العنصر الأكثر أهميّة في هذه الصفحة، وهو استعراض التطبيق. يؤدي هذا التطبيق دوره بامتياز في تركيز انتباه الزائر مباشرة. 2- اجعل التصميم المسطّح أسهل للفهموبقدر ما هي التصاميم المسطّحة عظيمة، ما زالت هناك بعض المشكلات العويصة بالنسبة للمفهوم ذاته. فمثلًا، رغم أنّ المستخدمين ذوي الخبرة في كيفية عمل واجهات المواقع ليست لديهم أيّة مشكلة في التفاعل مع المواقع المسطحة، إلا أن المستخدمين الأقل معرفة يواجهون صعوبة أكبر بكثير، والسبب وراء هذا الإرباك هو أن توجهات التصاميم المسطحة لجعل العديد من عناصر الواجهات العديدة تبدو متشابهة، إلّا أنّ هذه العناصر – كالأزرار مثلًا – ليست دائمًا مباشرة في مظهرها مقارنة بالأشياء الأخرى. في هذه الحالة تكون الحركة واحدة من الآليّات القليلة التي ما زال بإمكانها التفرقة وجعل الواجهة مفهومة من جديد. فمثلًا، ألقِ نظرة على الأيقونات التالية: [115 أيقونة متحركة لهَنَك إرتَن و سِنان كَرتشَم من Behance] رغم أن الحركة البسيطة ليست مميزة في ذاتها، إلا أنها تؤدّي غرض جذب انتباه الزائر وتشجيعه على التفاعل مع الأيقونة. 3- كُن مُرهفًا، لا مُبَهرجًالقد مضت التسعينات منذ زمن بعيد، ووجد الحركة لمجرد وجودها لم يعد له مكان في الوِب، وبما أن المستخدمين لم يعودوا يُبهَرون بالأشياء التي تتحرك، فالطبيعة الأساسيّة للحركات يجب أن تكون أكثر رقّة. إن المعيار الذهبيّ هو جعلها حيويّة بما يكفي لملاحظتها، لكن أن تكون أيضًا خفيفة بما يكفي بحيث لا تغطّي على التصميم بأكمله. إنّ قيمة هذا التوجُّه هي تقليل احتماليّة أن يتشتت الزائر وأن يُركِّز على الحركة ذاتها، بدلًا من أن يركز على عامل الجذب الذي تضجّ به هذه الحركة. 4- استمر في التجربة على الأجهزة النقّالة دون توقُّفإن الهاتف النقّال هو البيئة الرئيسيّة التي يجب تحسين تصميمك لها هذه الأيام. لا يمكن التأكيد على هذا بما يكفي، لذا دعني أعيد ذلك من ناحية أخرى مختلفة كليًّا – الأجهزة النقّالة الآن أكثر أهميّة من الحواسيب المكتبيّة. أولًا، 60% من كل سير البيانات على الوِب هذه الأيام يأتي من الأجهزة النقّالة. ثانياً، حتى جوجل ضاقت ذرعًا بالمواقع غير المناسبة للأجهزة النقّالة، ولذه نشروا هذا البيان: ما يعني هذا بلغة مبسطة هو أنه إذا لم يكن موقعك مناسبًا للهواتف النقّالة، فستعاني من تدني مستواه في نتائج البحث. إضافة إلى ذلك، فإن جعل الموقع مناسبًا للهواتف النقّالة يتعدّى مجرّد جعله سريع الاستجابة، وهذا من الأمور التي ينبغي أن تُبقيها في بالك ليس فقط عند تصميم الحركات، بل عند عملك على موقعك التالي عمومًا. ولهذا، فإن إدراج حركات ليست مناسبة للأجهزة النقّالة أو – أسوأ من ذلك حتى – لا يمكن الوصول إليه عبر الأجهزة النقّالة على الإطلاق هو بحث عن المتاعب. اجعل الاستمرار في اختبار حركاتك على كلّ الأجهزة النقّالة الشائعة خطوةً مستمرة في عملية التطوير لديك. 5- استخدم الحركات كالعنصر الذي يجعلك فريدًافلنبقَ مع التصاميم المسطّحة لدقيقة أخرى هنا. كما قلنا سابقًا في هذا المقال، فإنّ العديد من التصاميم المسطّحة تبدو عادًة متشابهة جدًّا، ولهذا فجعل عملك مميزًا أمرٌ صعب. ورغم أنه بإمكانك دائمًا البحث عن أنماط ألوان إبداعيّة أو ما شابه، إلّا أنك ما زلت محصورًا بهويّة الشركة والمظهر المرتبط بالماركة التجاريّة التي تبني التصميم لها. إنّ كلّ هذه المحدوديّات تجعلُ الحركةَ الأداة المثاليّة لجعل تصميمك فريدًا. والأهم على الإطلاق أنك لست بحاجة للتكون مختلفًا جدًّا. خذ هذه الأمثلة بعين الاعتبار: عين النَّسر (تحليلات لتويتر وإنستجرام) لفرحان رَزَق Dianping Film promotion Html5 / FURY بواسطة wang 2mu, He Fan & 3 Water على Behance كلا التصميمين بسيطان جدًّا بطبيعتهما، والحركات المستخدمة فيها هي العناصر الوحيدة التي تجعل هذه المواقع مميزة. إذا كنت لتزيل هذه الحركات، فسيبدو التصميم بسيطًا جدًّا، ولن يجلب هذا القدر من الانتباه. 6- استخدم الحركة لأجزاء محدّدة من المحتوىعمل تصاميم مواقع مخصّصة باستخدام الحركات أمرٌ، ولكن بإمكانك أيضًا أن تسير باتجاه أقل بُعدًا، وأن تستخدِم الحركات عند العمل على عناصر منفردة. فمثلًا، يُعرَف نِل باتِل من كويك سبراوت بنشره وزيادته لشعبية مفهوم الإنفوجراف المتحرّك. إن الفكرة ذاتها واضحة من حيث المبدأ، حيث يُنشئ ما يمكن أن يكون إنفوجراف معياريّ، لكن بعد ذلك يضيف عناصر متحركة إليه. فيما يلي مثال لإنفوجراف متحرك آخر. عمل ذلك سيعطيك ميزة إضافيّة عن المنافسين والمواقع الأخرى في ذات الموضوع، والتي تُكافِح كلها لجذب انتباه الزائر. الإنفوجراف هذه الأيام مجرد مفهوم واحد. يمكنك أن تستخدم نفس هذه الفكرة في النشرات والمقالات والدراسات القياسيّة وأيّ محتوى آخر. 7- جرِّب الحركات المعتمدة على التمريرإنّ الحركة موضوع واسع، ومتشابك. فمثلًا، ليتم اعتبار شيء ما متحرّكًا، هل يجب أن يكون متحرّكًا فعليًّا أم أنه يجب فقط أن يبدو كذلك؟ من الأمثلة العضيمة على هذا تأثير parallax للتمرير (وهو التأثير الذي يكون فيه المحتوى على شكل طبقات بحيث يتحرك جزء منه بشكل أرع من الآخر، فيبدو كأن هذه العناصر على مسافات مختلفة من الرائي) والحالات الأخرى للحركة المحفّزة بحدث. إن الفكرة هي إنشاء انطباع بوجود حركة، وذلك باستخدام CSS وجافاسكربت وHTML. إن التصميم ذاته ثابت، لكن بمجرد أن يبدأ الزائر بالتمرير، فسيكون بإمكانه أن يرى وهمًا لعمق الميدان، أو حتى عناصر متحركة كاملة النُضج. خُذ هذين المثالين بعين الاعتبار: الأول تأثير انتقال parallax بسيط، والثاني حركة تمرير أكثر تعقيدًا مفعلة بحدَث. 8- استخدم الحركة للإشعاراتتكون الحركة أكثر ظهورًا عندما تبدو أول مرة من شاشة العرض. هذا يجعلها أداة مثاليّة لعرض الأنواع المختلفة للتنبيهات. فمثلًا، يمكنك في أيّ وقت يكون فيه حدث يجري خلف كواليس واجهة الموقع (كحفظ بعض الإعدادات في لوحة تحكّم المدير مثلًا) أن تُنبِّه الزائر إلى أنّ العمليّات تمّت وذلك باستخدام صندوق متحرك يظهر في مكان ما في رأس شاشة العرض. هذا الشعور المتعلق بالحركة غير المتوقّعة في بيئة ثابتة هو كلّ ما تحتاجه لتنبيه المستخدم. فمثلًا، ألقِ نظرة على الإشعارات التي يُمكن أن تُبنى باستخدام هذه الأداة. لا شيء مُبهر من ناحية التصميم، لكنها تقوم بعملها على أكمل وجه وتجذب انتباه المستخدم. 9- ركّز على جودة الحركةكلما كانت الحركة في الوِب هذه الأيّام أقلّ كلما كانت أفضل (وكذلك في المستقبل)، لكن لا يمكنك أن تُخاطِر بالجودة من خلال سعيك نحو الأقلّ. حتى جوجل تُظهِر هذا في قواعد التصميم الماديّ الخاصّة بهم فيما يتعلق بالعمل مع الحركة. إنهم يشجعون في وثائقهم الرسميّة المصممين على جعل حركة كلّ عنصر حقيقيّة؛ مما يعني إضفاء وزن وزخم وتسارع وخصائص أخرى تحظى بها عناصر العالم الحقيقيّ. لا تتردّد في الذهاب لرؤية القواعد إضافة إلى المرئيات الاستعراضية التي عملتها Google. الخُلاصةلم تكن الحركة دائمًا الأداة الأكثر تقديرًا في تاريخ تصميم الوِب، ولكن هذا في الغالب سيتغير في 2015 وما يليها. فمع التطورات التقنيّة والنُضج التام لعالم تصميم المواقع، صار الناس راغبين أكثر في أن يجربوا وأن يحاولوا تحسين واجهات الاستخدام لديهم باستخدام عناصر متحركة بسيطة ولكن مفيدة. فمن ناحية، ذهبت أيام استخدام الحركات المُبَهرجة لمجرد استخدامها منذ زمن بعيد، ولكن من ناحية أخرى، بدأت الأيام التي تُثري فيها الحركات تجربة المستخدم وتجعل الموقع أكثر فعالية. ما رأيك بهذا؟ هل وقعت يدك على أيّة طرق لاستخدام الحركة في تصميم المواقع تجدر الإشارة إليها؟ ترجمة -مع شيء من التصرف- للمقال: Motion in Web Design the Smart Way.

سيفاجئك العملاء بطرق استخدام منتجك مبتكرة. وهذا لا يأتي من دراسة وتفكّر من جانبهم وإنّما نتيجة لجعلهم منتجك يتكيّف مع احتياجاتهم. يقول Peter Drucker قولته المشهورة: "نادرًا ما يشتري العميل ما تظنّ الشركة أنّها تبيعه"؛ وهذه إشارة إلى أنّه لكي تطوّر منتجًا ما يجب عليك أوّلًا أن تدرس وتفهم الغرض الذي سيُستخدم من أجله. لنوضّح الأمر بمثال: بعد أن أطلقنا Intercom بفترة قصيرة قمنا بإضافة ميزة الخارطة لنتمكّن من معرفة أماكن عملائنا حول العالم. كانت هذه الميزة من النوع الكلاسيكي وكانت رائعة جدًّا لكنّنا لا نعرف لماذا. ولقد استطعنا رؤية كم أصبحت هذه الخارطة شعبيّة من خلال عدد الأشخاص الذين يستخدمونها. لكن التسويق للخارطة كميزة كان صعبًا، لأنّه كان من الصعب معرفة سبب استخدامها. هل هو معرفة المكان الذي يأتي منه أغلب العملاء؟ كلّا، العديد من المُنتجات تفعل ذلك.هل هو رؤية العملاء من مدينة معيّنة؟ كلّا، فقوائم المستخدمين تفعل ذلك بشكل أفضل بكثير.هل هو معرفة عدد مستخدمي المنتج في بلد معيّن؟ كلّا، فقوائم المستخدمين تفعل ذلك بشكل أفضل بكثير أيضًا.إذًا ما هو الغرض من الخارطة بغضّ النظر عن كونها مثيرة للإعجاب؟ لقّد فكّرنا بثلاث طرق استُخدمت فيها هذه الخاصيّة: هنالك أشخاص يفضّلون استعراضها في المعارض التجارية والمؤتمرات (انظر إلى الحاسوب الشخصي): وأشخاص يفضّلون استعراضها على تويتر: وآخرون يفضّلون استعراضها أمام المستثمرين: إذًا ما تفعله الخارطة هو أنّها تبدو رائعة وتثير إعجاب العملاء؛ هذا كل ما تفعله. التحسين على أساس الاستخداملو أردنا تحسين الخارطة قبل معرفة الغرض الذي تُستخدم من أجله لحاولنا إنشاء خارطة أفضل. فيما يلي بعض الأمور التي قد نركّز عليها: الدّقة الجغرافية.المجموعات الجغرافيّة.حدود أفضل للدولة أو المدينة.خاصية السحب لإنشاء مناطق regions.تحسينات خرائطيّة أخرى متنوّعة.قد تستغرق منّا هذه التحسينات عدّة أسابيع أو أشهر، وفي النهاية تؤدّي إلى منتج أسوء؛ لأنّ العميل لم يكن يشتري ما كنّا نظن أنّنا نبيعه. فالخارطة أصبحت عبارة عن قطعة للعرض وليست خارطة. ما الذي يجعل الخارطة تقوم بتلك المهمّة بشكل أفضل؟ أولًا وقبل كل شيء، خارطة مصمّمة لتبدو جيّدة.خارطة تقوم بإخفاء البيانات الحسّاسة بشكل تلقائي مما يجعلها قابلة للمشاركة.خارطة من السهل على العملاء مشاركتها.وهذا بالضبط ما قمنا بعمله. لقد قمنا بعرض على عملائنا فرصة مشاركة خارطة متحرّكة وجميلة، وزوّدناهم بعنوان URL فريد من نوعه وقابل للمشاركة: خارطة أسوء تقوم بعمل أفضلعندما تقوم بالتركيز على الكيفيّة التي تُستخدم فيها الميزة، متجاهلًا فئة أو نوع الميزة، ستتعلم كيف تقوم بتحسينها بسرعة، وهذه التحسينات سيتردد صداها على الفور. بإمكانك مشاهدة المزيد من ردود أفعال العملاء تجاه الخارطة القابلة للمشاركة هنا. حقوق التّصميم عائدة لـHongyuan وحقوق تطوير الميزة عائدة لـEoin وPatrick. ترجمة -وبتصرّف-للمقال This is not a map لصاحبه: Des Traynor. حقوق الصورة البارزة: Designed by Freepik.

سيكون هذا هو الدرس الأول من أصل درسين سنقوم من خلالهما بتصميم وتكويد واجهة موقع لغابة افتراضية اسمها "Pinewood Forest". سنستخدم في تصميم هذه الواجهة العديد من textures وخليط من اللونين الأزرق والرمادي. ستكون النتيجة النهائية كما في الصورة التالية: سيكون الهدف من هذا الموقع هو تعريف الزوار بهذه الغابة وما تقدمه وإعلامهم بالأحداث القادمة، وستحتوي خلفية الموقع على صورة كبيرة ثابتة لتسمح بتمرير (scroll) محتوى الموقع فوقها، كما سيتم تقسيم محتوى الموقع إلى عدة أجزاء رئيسية مع استخدام بعض الصور الفوتوغرافية لجذب انتباه الزائر. سنقوم في هذا الدرس بتصميم الواجهة الرئيسية للموقع باستخدام برنامج الفوتوشوب، أمّا في الدرس الثاني فسنقوم بتكويد التصميم باستخدام لغتي HTML وCSS. سنبدأ أولًا بإنشاء مستند جديد، وبما أنّ التصميم سيحتوي على صورة خلفية كبيرة فإننا سنحتاج إلى إنشاء مستند يستطيع استيعاب الشاشات ذات الدّقة والأبعاد الكبيرة (24 أو 27 انش). باستخدام أداة marquee قم برسم منطقة في منتصف الصفحة بعرض 960px وقم بوضع guides على طرفي ما قمت برسمه. ستكون هذه المنطقة هي المنطقة التي سوف تحتوي على المحتوى الرئيسي للموقع. قم بتحميل صورة ذات أبعاد كبيرة يمكنها تغطية معظم الصفحة (يمكنك تحميل الصورة التي استعملتها في هذا الدرس من هنا). قم الآن بإدراج هذه الصورة في المستند وقم بتعديل أبعادها لتتناسب مع الشاشات الكبيرة (لنقل 1920px) واجعل هناك هامش بسيط على كلا الجانبين، ثم ضع guide أسفل الصورة ليصبح كل شيء كما في الصورة التالية: قم الآن بإضافة Layer Mask للصورة واستعمل بعضًا من الفرش المائية (Watercolor brushes) لإبهات الأطراف. قم بتخفيف شفافية (opacity) الفُرش لإنشاء مظهر أجمل لتصبح الصورة وكأنها متداخلة مع الخلفية: قم باستعمال خطّي League Gothic وClarendon لإنشاء الشّعار الخاص بالموقع وقم بوضعه في منتصف الصفحة. قم بتعديل حجم الخطوط حتى يكون التركيز أكبر على كلمة "Pinewood" وقم بمحاذاة الكلمتين عن طريق زيادة المسافة بين الحروف (the tracking) في كلمة "forest". سيكون الشعار مشابهًا للصورة: قم بإضافة تأثيري Drop Shadow وGradient Overlay لكلمة "Pinewood". سوف يضفي كلا التأثيرين نوعًا من العمق على الشعار وسيجعلانه بارزًا أكثر في الصفحة. حاول أن تجعل التباين (contrast) قليل بين تأثير الـgradient وشفافية الظل (shadow) حتى يظهر بشكل أفضل: قم بإضافة/كتابة عناصر القائمة الرئيسية وقم بتوزيعاها على التساوي على كلا جانبي الشّعار. يمكنك استعمال خط Georgia كخط بديل عن Clarendon الذي استعملناه في الشّعار. يمكن تنفيذ التباعد بين حروف الكلمات (tracking) باستعمال الخاصية letter-spacing الموجودة في لغة CSS وهو ما سنفعله لاحقًا في الدرس القادم. قم برسم مستطيل كبير بين الـguides ذات العرض 960px التي وضعناها في خطوة سابقة وقم بملء هذا المستطيل بلون رمادي فاتح كاللون المستعمل في تأثير gradient الخاص بالشّعار: قم بإضافة Noise خفيف عن طريق الذهاب إلى: Filter > Noise > Add Noise ولتكن القيمة 2.5% لإعطاء نوع من الجمال الحسي على منطقة المحتوى في الموقع. اضغط على زر ctrl في لوحة المفاتيح وأبق يدك على هذا الزر وبعدها اضغط بزر الفأرة الأيسر على الصورة المصغرة (thumbnail) للطّبقة (layer) التي أنشأناها في الخطوة السابقة. ستلاحظ أنه تم اختيار المنطقة الخاصة بتلك الطبقة. قم الآن بالضغط بزر الفأرة الأيمن على ما تمّ اختياره واختر Transform Selection ثم قم بتقليص الطول والعرض بنسبة 40px واملأ تلك المنطقة باللون الأبيض، بعدها قم بإضافة تأثير Drop Shadow على تلك الطبقة: قم بتحميل فرش paint roller واستعملها في جعل الحواف الرمادية خشنة نوعًا ما وذلك عن طريق الرسم على قناع الطبقة (layer mask). فعّل التحديد (selection) الخاص بالمنطقة البيضاء واملأها باللون الأسود فوق قناع الطبقة (layer mask) لجعلها شفافة ثم بعد ذلك قم بإنقاص شفافية الحواف الرمادية إلى 60% حتى تظهر الخلفية التي وراءها: قم بتحميل صورة ما لوضعها كخلفية للمنطقة البارزة (main feature area) في الصفحة، ثم باستخدام أداة marquee selection قم برسم مستطيل كما ها موضح في الصورة أعلاه، بعد ذلك اضغط بزر الفأرة الأيمن على تلك المنطقة واختر Select Inverse ثم اضغط على زر delete من لوحة المفاتيح: يمكنك ملاحظة أن ألوان الصورة لا تتناسب كثيرًا مع الموقع، لذلك سنقوم ببعض التعديلات باستخدام أداة Curves. قم بتعديل قنوات اللونين الأخضر والأحمر على شكل يشبه حرف S واللون الأزرق على شكل حرف S ولكن معكوس كما هو موضح في الصورة: قم بتقليل تشبّع (saturation) الصورة لتخفيف حدّة الألوان. ستظهر ألوان هذه الصورة بعد التعديلات بشكل يتلائم مع ألوان التصميم: استعمل واحدة من فرش paint roller التي قمت بتحميلها سابقًا واستعملها لرسم خلفية لوضع بعض النصوص فوقها كما تظهر الصورة: قم بتعديل حجم وتباعد الحروف الخاصة بنص العنوان لإضفاء بعض الجمال، بعد ذلك اجعل حجم الخط للفقرة 14px: عليك الآن باستعمال نفس التأثيرات المستعملة في الشّعار (Gradient Overlay و Drop Shadow) وتطبيقها على النص الذي كتبته للتو: سنحتاج الآن إلى إضافة زر call to action لإخبار الزّوار إلى أين يمكنهم ان يتوجهوا بعد تصفحهم للصفحة الرئيسية. لفعل ذلك قم برسم مستطيل بحجم مناسب واملأه بلون أزرق متوافق مع اللون العام للموقع، ثم قم بإضافة فلتر noise خفيف لتخشين الزر قليلًا. بعد ذلك استعمل أداة المسح (Eraser tool) واختر pencil بعرض 1px وقم بمسح جزء من كل طرف من الأطراف الأربعة للزر. أنظر الصورة التالية: قم بإضافة تأثير Inner Glow للزر واستعمل لون أزرق أدكن بقليل من لون الزر نفسه. لتكن الإعدادات عبارة عن Normal blending mode وشفافية (opacity) بنسبة 100% وقم بتعديل الأحجام حتى تصبح ملائمة. قم أيضًا بإعطاء الزر إطار(stroke) بحجم 1px باستعمال لون أرزق أفتح بقليل من لون الزر: ويتبقى في الآخر إعطاء نص مُعبّر لوضعه على الزر، وتأكّد أيضًا أن جميع عناصر المنطقة البارزة (feature area) مرتّبة بشكل مناسب وأنيق: قم الآن بتعبئة منطقة المحتوى بالنصوص التي تريدها، واجعل حجم خط العنوان أكبر بقليل واجعله يتمدد على عرض الصفحة بالكامل. افصل النص المتبقي إلى عمودين؛ واحد عريض للمحتوى الرئيسي والآخر بعرض أصغر للمحتوى الجانبي (sidebar). يجب علينا أيضًا أن نميّز الروابط بلون مختلف عن باقي النص، لذلك قم بتلوين بعض الكلمات بلون أزرق واجلعها تحتوي على خط أسفلها (underline). في جزء المحتوى الجانبي (sidebar) سيكون هناك ثلاث مناطق تؤدي إلى مناطق أخرى في الموقع، بحيث تحتوي كل واحدة من هناك المناطق على صورة، عنوان وفقرة قصيرة. قم بإضافة خلفية مزخرفة وذلك باستعمال paint roller brushes وقم بعد ذلك بقص صورة خارطة ووضعها داخلها: استعمل paint roller brushes لإنشاء خلفية أخرى بلون أزرق أدكن بقليل من اللون الذي استعملته في الخطوة السابقة وستكون هذه الخلفية هي المكان الذي سيحتوي على العنوان الخاص بكل منطقة. لا تنسى قص الأجزاء المتداخلة لتتوافق مع طرف الصورة. قم بإضافة عنوان قصير فوق الخلفية التي أنشأناها في الخطوة السابقة وقم بإعطاءه نفس التأثيرات المستعملة في النص الموجود في الـfeature section: قم بوضع كل العناصر التي أنشأناها إلى الآن في مجلد واحد وبعد ذلك قم بنسخ ذلك المجلد مرتين وقم بالتعديل على عناصر كل مجلد بالشكل المناسب. أنظر الصورة: سوف نضيف الآن قسم "Upcoming events" أسفل النص الموجود في العمود الرئيسي. قم باستعمال نفس تنسيقات الخطوط الموجودة في الترويسة وباقي المحتوى الرئيسي، وبعدها قم بإنشاء جزء خاص بالتاريخ واستعمل لون رمادي مشابه للإطار(border): كل حدث سيحتوي على التاريخ، عنوان، بعض المعلومات ووصف بسيط: يمكننا الآن التخطيط لكيفية تحويل هذا التصميم إلى ملف HTML وهذا ما سنفعله في الدرس القادم بإذن الله. وبهذا نكون قد وصلنا إلى نهاية المقال، وأصبح لدينا تصميم جاهز يمكننا تحويله إلى صفحة ثابتة باستعمال لغتي HTML وCSS. ترجمة -وبتصرّف- للمقال Design a Textured Outdoors Website in Photoshop لصاحبه Iggy.

هنالك عدّة طرق لجمع عناوين البريد الإلكتروني على موقع ما، لكن ما هو أكثر الخيارات فعاليّة من بين السّلايدر Sliders، النّوافذ المنبثقة Lightboxes والتبويبات Tabs، ونماذج الاشتراك العاديّة؟ ولماذا؟ سنتعرّف على تقنيات بناء القوائم الخاصة بثلاث خدمات معروفة. رغم كلّ هذه الخيارات، هنالك خيار واحد فقط يمكن لمصمّمي المواقع ومدراء المواقع اختياره. لذا، ومن أجل فهم أفضل لكلّ نوع من النماذج، جمعنا 3 أشخاص يعملون ضمن أشهر نماذج التسجيل المُدمجة بالنسبة لنا وهم: Claudiu Murariu من خدمة PadiAct، Noah Kagan من خدمة AppSumo وMatt Farmer من خدمة Anchor Tab، لنطلب منهم شرح الخدمات الأفضل والسّبب الذي يجعلها كذلك. 3 أنواع من النماذج والهدف واحدعند تقرير نوع النموذج التي يجدر بك استخدامه على موقعك، سيوافق معظم النّاس غالبًا على أنّ الهدف واحد، وهو جمع أكبر عدد ممكن من التّسجيلات الجديدة في قوائم اشتراكك، لكن هنالك أشياء يجب أخذها بعين الاعتبار خلال هذه العملية، منها: ألّا تزعج هذه العمليّة أو تقاطع زوّار الموقع، خصوصًا الذين يزورون الموقع عبر جهاز محمول أو الذين سجّلوا بالفعل.ألّا يتمّ إرغام النّاس على التّسجيل من أجل الحصول على ما يريدونه.ألّا تؤثّر هذه العمليّة على سرعة الموقع بشكل مفرط.دعونا نستعرض كيفيّة عمل كل نموذج مع أخذ هذه المتطلّبات بعين الاعتبار. السلايدرز: Claudiu Murariu من PadiAct مبدأ العمل: كلّما ذهبت إلى متجر بيع الملابس المفضّل لديك وبدأت بالبحث عن شيء لشرائه ولا تجد ما يناسب مقاساتك بشكل مثالي، تصبح المساعدة التي سيقدّمها لك موظّف المتجر الودود –الحاضر دائمًا- محلّ ترحيب، وهو نفس الشّيء الذي تفعله السّلايدرز، فمثل موظف المتجر، إذا ظهرت نموذج في نفس الوقت الذي يدخل فيه زائر إلى موقعك، ستجد غالبًا أنك تفقد الزّوار قبل تصفّحهم لموقعك حتّى، لكن في حال ظهور السلايدر في الوقت المناسب وبالمحتوى المناسب، فلن يرى معظم الزوار السلايدر وإنما الرسالة التي يحملها لهم، في هذه الحالة، يكون تقديم عنوان البريد الإلكتروني إجراءً شكليًّا حيث يودّون البقاء على اتصال بك. ما مدى جودتها: يمكن للسّلايدرز زيادة معدل الاشتراكات بنسبة 15% فما فوق، حيث جمعنا 3.5 مليون بريد إلكتروني من خلالها بفضل ظهورها في الوقت المناسب مع رسالة مخصّصة حسب سلوك الزّوار، دون أي تأثير على أداء مقاييس مثل معدّلات التّحويل، نسبة الخروج من الموقع، الوقت الذي تمّ قضاؤه على الموقع وعدد الصّفحات التي تمّ زيارتها. تكون السّلايدرز فعّالة للغاية عندما تكون مستهدفة، لأنّها لا تضع جميع المستخدمين في نفس الكفّة، بل تتيح للمستخدمين تكوين فكرة عن الموقع قبل أن يقرروا الاشتراك، كما تقدّم السّلايدرز سهولة كبيرة للمستخدمين كونهم لا يحتاجون للبحث عن نموذج الاشتراك بأنفسهم. النوافذ المنبثقة: Noah Kagan من SumoMe مبدأ العمل:أعتقد أنّ نوافذ البريد الإلكتروني المنبثقة التي تظهر على المواقع مزعجة للغاية، لكنّها تعتبر كذلك أنجع طريقة للحصول على اشتراكات بريد إلكتروني جديدة. دعونا نسقط هذه النوافذ المنبثقة على أرض الواقع. لنقل أنّك ذهبت إلى مطعم ولم يعجبك الطعام المقدم هناك، ثم طُلب منك إدخال بريدك الإلكتروني من أجل نشرة المطعم البريدية، فأدخلت بريدك الإلكتروني وبدؤوا بمراسلتك يوميًّا لأسابيع، هل سيكون لبريدهم الإلكتروني تأثير عليك باستثناء زيادة كرهك تجاههم؟ طبعًا لا، فأنت لن تعود أبدًا إلى ذلك المكان ولن توصي غالبًا أشخاصًا آخرين بالذّهاب إليه. لنقل الآن أنّ هنالك مطعمًا يعجبك، وستعود له غالبًا، لكنك تنسى أحيانًا الذّهاب إليه، هنا سيكون تذكير ودّي بالذّهاب إلى المطعم مفيدًا لك. هذه هي فكرتي حول نوافذ البريد الإلكترونيّ المنبثقة، يكون تذكّر موقعك من طرف الزّوار أو العملاء صعبًا أحيانًا وسط كلّ الخيارات الأخرى المتوفّرة، وقد لا يرون طريقة أخرى لإعطائك عناوين بريدهم الإلكتروني، عندها تكون النّوافذ المنبثقة أكثر الطّرق فعاليّة حسب ما وجدت. أشجّع النّاس على تجربة هذا الخيار مادامت منتجاتهم رائعة ومحتوى مدوناتهم ممتاز. ما مدى جودتها: هذا هو عدد الاشتراكات التي حصل عليها موقع Okdork باستخدام النّوافذ المنبثقة لخدمة بناء القائمة على موقع SumoMe.com (موضحة في الجدول أدناه). لا أحاول تحسين الخدمة للحصول على أكبر قدر ممكن من الاشتراكات البريديّة لكنني أقترحها بودّ على الزّوار للاشتراك في نشرتي البريديّة. التاريخ المشتركون النّوافذ التي ظهرت معدّل التّحويل 04/10 26 754 3.45% 04/11 31 950 3.26% 04/12 14 568 4.46% 04/13 19 578 3.29% 04/14 24 1,005 2.39% التبويبات: Matt Farmer من AnchoTabمبدأ العمل:عندما يأتي زائر إلى موقعك، يكون هدفه غالبًا محدّدًا بالفعل، حيث يكون هدف معظم الزّوار الحصول على معلومة ما حول منتجك أو قراءة محتوى مدونتك، من جهة أخرى، فأنت كذلك كمدير موقع لديك هدف معيّن؛ تحويل الزّائر إلى قارئ منتظم أو عميل تستفيد منه مادّيًّا، وهكذا تكون في مواجهة معضلة لطالما عانى منها الباعة لعقود من الزمن، لنأخذ مثال بائع السيّارات، تجد البائع الانتهازيّ الذي يكون دائمًا على استعداد لفعل أي شيء باستطاعته من أجل تحقيق هدفه ببيع سيارة، إذ أنّه لا يأبه إن كان أسلوبه مريحًا أو غير مريح لك، وسيستمرّ باللّحاق بك والحديث وفعل أي شيء لجعلك تشتري. ويعدّ هذا شبه مثاليّ لاستراتيجيّة جلب عناوين البريد الإلكترونيّ التي تشتمل على إظهار نافذة منبثقة شكليّة تتمركز فوق محتواك وتجبر الزّائر على أن يقرّر ما إذا كان يودّ الاشتراك أم لا، لكنّ التّبويبات تحقّق توازنًا نسمّيه بالبائِع المُفيد، حيث لا تظهر التّبويبات أمامك مباشرة، أو تتحدّث إليك طوال الوقت الذي تكون فيه منكبًّا في محاولة تحقيق هدفك، لكنّها تكون متواجدة هنالك دائمًا. ما مدى جودتها: تمّ تحسين التّبويبات بشكل خاص للمدوّنات التي تحتوي على الكثير من المحتوى النّصي، فعند الصعود لأعلى الصّفحة من الأسفل، سيلاحظ القرّاء ظهور التّبويبة لكنّهم غير ملزمين بالتّوقف عن القراءة من أجل التّفاعل معها، كما أن عينهم تتحرّك طبيعيًّا نحو التبويبة التّالية عند انتهائهم من قراءة المقال. هذه الاستراتيجية تتيح لك الموازنة بين الرّغبة في ظهور النموذج بشكل بارز وإخفائها ضمنيًّا بحيث يكاد القرّاء لا يشعرون بها، وبالتّالي تكون قادرًا على تحقيق هدفك بالحصول على اشتراكات لبريدك الإلكتروني دون الاستعانة بتقنيّات تعرقل وصولك إلى هدفك. لاحظنا باستخدام هذه الطّريقة الأقلّ تطفّليّة معدّلات تحويل متواصلة بنسبة 1.25%، ما يجعلنا قريبين من الحلول الأخرى المنافِسة. مع التّحديث الكبير المنتظر لخدمة Anchor Tab، سيحصل "مساعِدنا المفيد" على أدوات أكثر لمساعدة عملائنا على رفع ذلك الرقم أكثر. أيها تستخدم؟بعد اطّلاعنا على الخيارات الأخرى المتاحة غير الخيارات المعهودة، حان وقت اختيارك للخدمة التي تناسبك، فأيّ نوع من نماذج الاشتراك ستختار أو أيّ نوع استخدمته وحقّق لك نجاحًا على موقعك؟ ترجمة -وبتصرّف- للمقال Subscribe form showdown: Do sliders, lightboxes or tabs work best? لصاحبته ROS HODGEKISS. حقوق الصورة البارزة: Designed by Freepik.

هناك الكثير من الأشخاص ممن يحبون سلسة الدروس التي تبدأ بتصميم مدونة باستخدام برنامج فوتوشوب وتنتهي بتحويل ذلك التصميم إلى قالب ووردبريس كامل، وهذا ما سنقوم به في هذه السلسلة المكونة من ثلاثة دروس، بحيث سنقوم أولًا بتصميم فكرة القالب باستخدام الفوتوشوب، بعدها سنقوم بـتحويل ذلك التصميم إلى نموذج HTML5 وأخيرًا إلى قالب ووردبريس كامل. سنقوم بتسمية القالب الذي سنقوم بإنشائه بالاسم "Typo"، بحيث سيعتمد القالب بشكل كامل على مبادئ الخطوط والطباعة (typography) حتى يكون التركيز بشكل كامل على المحتوى. وبما أننا نريد للتصميم أن لا يحتوي على أي عناصر رسومية (صور مثلًا) فإننا سوف نستخدم نظام شبكي (grid) صارم لتحقيق التوازن في التصميم وربط جميع عناصره معًا. سوف نحتاج في البداية إلى نظام شبكي لوضعه في مستند الفوتوشوب الذي سنقوم بإنشائه، ولقد قمت بالفعل بإنشاء واحد مكون من 12 عمودًا (column) باستخدام موقع grid.mindplay.dk، كما أنني أنشأت نمط (pattern) على شكل خطوط لتعمل كشبكة خطوط قاعدية (baseline grid) بحجم 24px. قم بملء طبقة الخلفية (background layer) بلون رمادي فاتح وبعدها قم بإضافة Noise بقيمة أقل من 3% وذلك عن طريق الذهاب إلى: Filter > Noise > Add Noise قم بضبط الإعدادات إلى Gaussian وMonochromatic. قم بتحميل واحدة من الـtextures الموجودة هنا وضعها داخل مستند الفوتوشوب الذي نعمل عليه وقم بتحريكها إلى أعلى يسار الملف. قم بإلغاء تشبع الـtexture وتغيير نمط المزج (blending mode) إلى Darken. سوف تحتاج أيضًا إلى تعديل مستويات (levels) الصورة لتصبح ساطعة أكثر لتتناسب مع الخلفية الرمادية الفاتحة. قلنا سابقًا بأنّ هذا التصميم سوف يعتمد بشكل كلي على الـtypography بما في ذلك الشّعار. سوف نستخدم خط Droid Serif في التصميم وسنقوم لاحقًا في الدروس التالية من هذه السلسلة باستخدام خدمة Google Web Fonts. قم الآن بإضافة عناصر القائمة الرئيسية (navigation) بناءً على أعمدة النظام الشبكي والخط القاعدي (baseline)، وضع بجانب كل عنصر رقمًا (كما هو مبين في الصورة بالأسفل) وقم بتغيير لون هذه الأرقام حتى تكون أقل بروزًا من النص (أعطها لونًا أفتح/أبهت من لون عناصر القائمة نفسها). اجعل هناك مسافة قليلة بين الترويسة (header) وبين المحتوى الرئيسي للمدونة. وبما أنّ عنوان التدوينة يعدّ من أهم العناصر في أي مدونة فسوف نختار حجم خط كبير. قم باختيار أداة الكتابة وأنشئ مربع نصّي وضع بداخله نصًا عشوائيًا، واجعل حجم الخط 14pt وهو خط مناسب للمحتوى واجعل التباعد بين السطور (leading) بقيمة 24pt. يجب علينا تمييز الروابط داخل محتوى المدونة بتنسيقات مختلفة. لذلك سوف نجعلها ذات لون أزرق، مائلة (italic) وتحتها خط (underline). قم الآن بجمع العناصر التي تمثل التدوينة الأولى داخل مجلد واحد (اختر العناصر واضغط على ctrl + G من لوحة المفاتيح). قم بتكرير هذا المجلد ليصبح لدينا تدوينتين وقم بمحاذاة التدوينة الثانية أسفل الأولى واجعل بينهما مسافة مناسبة. قم بإضافة رابطين أسفل التدوينات؛ الأول "الصفحة التالية (next page)" والآخر "الصفحة السابقة (previous page)"، وقم بإعطاء هذين الرابطين نفس تنسيقات الروابط (أزرق ،مائل وتحته خط) وقم بزيادة الحجم حتى يكونا بارزين بشكل أفضل. ابدأ الآن بإضافة محتوى القائمة الجانبية (sidebar) واجعلها على نفس مستوى المحتوى الرئيسي اعتمادًا على خطوط الخط القاعدي الخاص بالنظام الشبكي، وبما أنّ ترويسات/عناوين (headers) هذه القائمة ليست مهمة كثيرًا فسوف نجعل حجم الخط الخاص بها صغيرًا. بعض الروابط في المدونة يمكن أن توضع بجانب بعضها (تكون كلمة واحدة على الأغلب)، والبعض الآخر سيكون فوق بعضه البعض (تكون جمل كاملة كعنوان لمقال على سبيل المثال، لذلك لن يكون هناك مجال لوضعها بجانب بعضها). لنقم الآن ببناء مربع البحث. قم برسم مستطيل واملأه بلون مناسب (#f7f7f7 مثلًا)، وبما أنّ مربع البحث يعد من أهم العناصر في أي موقع فسوف نقوم بإعطائه بعض التأثيرات لتمييزه عن باقي عناصر الموقع. أنقر مرتين على طبقة مربع البحث لإضافة بعض التأثيرات. قم بإضافة تأثير Inner Shadow خفيف وتأثير Color Overlay بلون رمادي فاتح وStroke بحجم 1px بلون رمادي مناسب. قم بمحاذاة النص الموجود داخل مربع البحث بالنسبة للخط القاعدي. سيؤدي هذا إلى أن يصبح الهامش أعلى وأسفل النص الموجود داخل مربع البحث غير متساوي، وبالتالي سوف نحتاج إلى قص جزء من مربع البحث حتى نصلح الأمر. بقي علينا إضافة أيقونة بحث إلى يمين مربع البحث. يمكنك رسمها يدويًا أو استخدام أيقونة جاهزة لتسهيل المهمة عليك. عندما تنظر إلى مربع البحث من دون وجود النظام الشبكي فإنّه يبدو متناسقًا ومتوازنًا. فالعناصر من مثل الأزرار أو مربعات البحث تحتاج غالبًا إلى تحجيمها من دون استعمال نظام شبكي وذلك حتى تسمح للنص الموجود بداخلها بأن يبقى على خطوط النظام الشبكي ليبدو كل شيء متوازنًا. تبقى علينا الآن أن نقوم بإضافة الـfooter، لذلك قم برسم مستطيل بسيط في نهاية الصفحة واجعل هذا المستطيل يأخذ ارتفاع سطرين من أسطر النظام الشبكي وقم بإعطائه لونًا اسودًا وقم أيضًا بتغيير نمط المزج (blending mode) إلى Overlay. أخيرًا وليس آخرًا، قم بإضافة بعض العناصر إلى الـfooter. لاحظ أنّه مع أننا لم نستخدم في هذا التصميم أي صور أو عناصر بصرية، إلّا أنّ الصفحة بقيت جميلة ومؤثرة وذلك لاستخدامنا لشبكة خطوط قاعدية (baseline grid) مناسبة مما جعل كل شيء متناسقًا. يمكنك في الصورة رؤية النتيجة النهائية بدون وجود الخطوط الشبكية وكيف أنّ كُلّ شيء في الصفحة يبدو متوازنًا ومتناسقًا مع بعضه. ترجمة -وبتصرّف- للمقال Create a Typography Based Blog Design in Photoshop لصاحبه Iggy.

عمل أطر مفرغة -أو تصاميم مبدئيّة- أثناء التصميم لا يكلف شيئًا تقريبًا، ولكن يمكنه أن يحقق عائدًا ممتازًا. ورغم أن العديد من المصممين يبدؤون برسم "سكِتش" في ذهنهم، ومن ثمّ يضعونه في برنامج فوتوشوب أو حتى يبدؤون بكتابة الأكواد مباشرة، بينما يبدأ آخرون على الورق. نعم، هو الورق العادي الذي تعرفه، والذي تكتب عليه بالقلم. يبدو هذا كتقنية عمرها عشر سنوات، ولكن حتى الآن ما زال أفضل المصممين في هذا العالم يستخدمونه لصالحهم. سيوفر عليك عمل تصميم مبدئيّ الكثيرَ من الإحباط في المراحل اللاحقة من تطوير المشروع، حيث يؤكّد بأنه ليس هناك أشياء عليك التراجع عنها أو إعادة تصميمها. إذا قمت بعمل تصميم أوليّ بطريقة سليمة، فبإمكانك أن تبيت مرتاح البال بأنك لن تضطر مستقبلًا لإعادة التصميم من البداية. إن ما تعنيه الأطر المفرغة هو وضع أفكار التصميم على الورق لكلّ من صفحات الموقع. في الغالب ستتشارك كل الصفحات ببعض العناصر، ولهذا فستكون الصفحة الأولى أكثر صعوبة في التصميم، بينما ستكون بقيتها أقل صعوبة، حيث تكون قد حصلت على فكرة مبدئيّة عن النمط العام للتصميم. أبق في بالك أن هذه العناصر مهمّة لأيّ تصميم. عندما تقلّب بين الصفحات، سيكون على المستخدم أن يقدر على التعرف على الصفحة وأن يعلم أنه لم يغادر الموقع ويذهب إلى موقع آخَر. أبق دائمًا على التنقلات والأقسام المهمة (المحتوى، الشريط الجانبي، ذيل الصفحة) في نفس المكان، ولكن هذا صار شائعًا كما لو أنه دليل للمبتدئين في التصميم، لذا لننتقل إلى أمور متقدمة أكثر. الأطر المفرغة – نظرة عامةلكي تكون قادرًا على استخدام إطار مفرغ، فأنت بحاجة إلى معرفة كيف يعمل. ما يفعله الإطار المفرغ بسيط، فهو يُظهِر الشكل العام للوقع والمكونات الرئيسيّة على الورق. يمكنك أن تستخدم أشكال مختلفة كصناديق وحاويات لرسم المحتوى فيها، وتنقلات، وعناصر وظيفيّة أخرى. قد تسأل نفسك، لم نستخدم الأشكال؟ الإجابة بسيطة: لأنها تسمح لنا بأن نركّز على التصميم أكثر وان ننسى الأكواد والتوافقية بين المتصفحات والصور وما إلى ذلك. إنه تصميم بسيط ونقيّ. الصورة من Zach Hoeken. الأطر المفرغة أم تصاميم فوتوشوب؟وكبديل عن التصاميم الأوليّة للمواقع على الورق، يمكن إنشاء التصميم المرئيّ على برنامج فوتوشوب أولًا. ورغم أن لها مزايا إلى حدّ ما، فإن إنشاء الشكل العام في فوتوشوب غير عمليّ، وذلك لأنه لا يسمح لك بالتركيز على العناصر الأساسيّة للتصميم. ولهذا، إذا أردت البدء بالتصميم في فوتوشوب، فقد تبدأ أيضًا بالتفكير في الألوان والصور والخطوط. لا حاجة لهذا الأمر إذا بدأت العمل على الورق. والعمل على الورق أسرع بكثير أيضًا، ولذا لِمَ لا تقوم بها بهذه الطريقة؟ ولهذا، يمكنك أن تبدأ التصميم في فوتوشوب في مرحلة لاحقة، ولكن لا أنصح بعمل ذلك قبل أن تكون لديك فكرة واضحة عن ما ترغب بالحصول عليه من المشروع. الطريقة الوحيدة لتحقيق ذلك هي البدء على الورق. يمكنك أن تدعو الإطار المُفرَغ بأنه "سكِتش" إذا أردت ذلك. وفي الحقيقة أن الأطر المفرغة هي سكتش بسيط للموقع. توصل الأطر المفرغة بعض الأفكار للزبون، حيث يمكنه أن يقبلها أو يرفضها. إذا رفضها، فسيكون من السهل بالنسبة لك أن تأخذ ورقة أخرى وترسم عليها أفكار أخرى من البداية. الهدف الأساسيّ من الأطر المفرغة هو أن تسمح لك بالتركيز على الأشياء المهمة في الموقع، وهي: كيف تبدو كل صفحة، وأين تقع أهم العناصر فيها، وكيف تحقق التوازن الإيجابيّ الذي تريده بشكل عام. وبعد أن تكون قد حصلت على فكرة عن ما يريده الزبون، ويقبل هو التقسيم الأساسي للموقع، يمكنك حينها أن تطوّر السكتش البسيط إلى شيء أكثر تفصيلاً. قد يكون الآن الوقت المناسب لبدء التفكير في الخطوط والألوان والصور. الصورة من Denkbeelhouwer. مرحلة عمل التصاميم الأوليةمن الضروريّ بالنسبة للمصممين والزبائن أن يعملوا معًا أثناء هذه المرحلة من المشروع. وحيث أنّه ليس لدى الزبون الكثير ليقوله أثناء مرحلة كتابة الأكواد، فهذه هي المرحلة التي يمكنه فيها تقديم الكثير من المدخلات التي عليك أن تأخذها بعين الاعتبار. تذكر أنه بمجرد موافقته على التصميم، فسيعطيك وهو راض حرية أكثر في الأفكار الأخرى؛ في هذه المرحلة يثق فيك وفي خبراتك. سيكون هذا مشروعًا طويلًا وصعبًا إذا لم تحصل منه على الموافقة على الإطار المفرغ الأساسيّ. إذا كنت زبونًا فتذكر أن لا تركز كثيرًا على عدم وجود ألوان وصور وخطوط وأمور أخرى تتعلق بالنمط. إن وظيفة المصمم في هذه المرحلة هي أن يعطيك فكرة بسيطة عن ما يراه بأنه جيد لك. إذا طلبت منه أطر مفرغة مفصلة أكثر ورفضتها ثلاثة أو أربعة مرات، فسيكلفك ذلك الكثير من المال. ومن ناحية أخرى، إذا طلبت أطر مفرغة بسيطة ورفضتها، فلن تكلفك بذلك القدر، وذلك لأن رسمها والتفكير فيها أسهل. أدوات لعمل تصاميم أولية للمواقعفيما يلي قائمة بالأدوات التي اختبرتها حديثًا لأرى إلى أيّ حد يمكن للمصممين الاعتماد عليها لبناء أطر مفرغة. إذا لم يكن الورق مناسبًا لك، فهناك خيارات أخرى ممكنة (دون ترتيب معين): 1. iPlotzتسمح ك هذه الأداة بأن تصنع أطر مفرغة يمكنك أن تنقر عليها وتتنقل خلالها. يسمح لك هذا بإنشاء تجربة مشابهة للموقع الحقيقيّ. ورغم أن بإمكانك الحصول على حساب مجانيّ، إلا أنني أنصحك بالحصول على واحد من حسابات Premium إذا كنت جادًّا في أن تبدأ بعمل التصاميم الأولية للمواقع واتخاذها كمهنة من الآن. 2. Balsamiqإذا كنت تحب الرسم، فستعطيك هذه الأداة شعورًا مشابهًا لذلك، إلا أنه رقميّ هذه المرة. يمكن تضبيط وإعادة ترتيب هذه الأدوات بسهولة، والتحكم بها سهل أيضًا. النتائج نظيفة، ومن المزايا الأخرى لها هو أنّ كل شيء يمكن تكرارها في الوقت الحقيقيّ. 3. Pencil Projectيمكن استخدام هذه الأداة لعمل مخططات انسيابية وتصاميم أوليّة للواجهات بسهولة. 4. templatrرغم أنه لن يسمح لك برسم أيّ شيء، إلى أن هذه الأداة تمكنك من إنشاء تصاميم لموقعك أثناء العمل. لست بحاجة لمعرفة HTML ويمكنك تنزيل القالب في النهاية بنقرة زر واحدة. 5. Flair Builderيمكن لهذه الأداة التفاعل مع الأطر المفرغة بسرعة عالية جدًّا. هذه الأداة سهلة الاستخدام وتأتي مع لوحة من العناصر الفعالة التي ستسهل مهمة إنشاء تصاميم أوليّة. هذه الأداة تفاعليّة، وستحسن تجربتك كثيرًا. صورة من Michael Lancaster. خلاصة القولالأطر المفرغة، أو التصاميم الأوليّة للمواقع، هي عملية يعرفها الكثير من المصممين، رغم أن القليل منهم فقط من يستخدمونها. ورغم أنها تبدو بأنها تأخذ الكثير من الوقت، إلا أنها -على المدى البعيد- ستساعدك كثيرًا. إذا كنت تعرف كيف تتواصل بطريقة سليمة وأن تعمل عن قرب مع الزبون، أثناء مرحلة عمل التصاميم الأولية، فستتم بقية العمل بسلاسة أكبر مما تتوقع. أنصحك كثيرًا أن تقوم بعمل تصميم أوليّ لعملك قبل البدء في كتابة الأكواد، أو أن تُنشئ التصميم الأولي بأكمله في فوتوشوب. هذا سيجعل المهمة كلها أسهل لك، وسيوفر عليك الكثير من الإحباط طوال مدة العمل. وإلى المرة القادمة، تواصل معنا في الردود، وأخبرنا برأيك. هل تقوم بعمل تصاميم أوليّة للتصاميم التي تعمل عليها؟ وما مدى جدوى ذلك بالنسبة لك؟ وإذا لم تكن تفعل ذلك، فلماذا؟ ترجمة -وبتصرف- للمقال: Beginner's Guide to Wireframes and Tools to Create Them.

ما الذي يجعل من موقع الإنترنت سهل الاستخدام؟ يتردد هذا السؤال في الشبكة العنكبوتية كثيرًا، ومع ذلك لم يحصل هذا السؤال على إجابة شافية ووافية حتى الآن، حيث أنه لا يوجد خلطة أو وصفحة سحرية لتحقيق هذه السهولة. يتمحور مفهوم قابلية الاستخدام في عالم الويب حول جعل موقع الإنترنت قابلًا للفهم سهلًا للاستخدام، وقد تطوّر هذا المفهوم ليصبح فرعًا له قواعد وأسس، ولم يعد الأمر مجرّد اتباع تصميم دارج/شائع أو موضة جديدة، بل الأمر متعلّق بخواص ومميزات يجب على كل موقع امتلاكُها. يوجد هدفان رئيسيان خلف قابلية استخدام في مواقع الويب: توفير الوقت على المستخدم من خلال توضيح كل شيء في الموقع وتسهيله قدر الإمكان على المستخدم النهائي.زيادة رضا الزوّار من تجربة الموقع والتقليل من الأخطاء وردود الفعل السلبية من الزوّار.يجب إجراء دراسة في قابلية الاستخدام تخص موقعك والزوّار المستهدفين من الموقع للحصول على أفضل النتائج، ولكن يوجد مبادئ عامة يمكن تطبيقها على أي موقع: وضح الغرض الجوهري من موقعك لا يقتصر هذا الأمر على صفحة البداية homepage فقط، بل على أي صفحة هبوط في الموقع، وذلك لكي يملك المستخدم فكرة واضحة لا تشوبها شائبة عن مقصد الموقع، بمعنى على صفحات الموقع أن تجيب عن أسئلة المستخدم لا أن تطرح أسئلة جديدة، من الحلول الشائعة الاستخدام هو استخدام العبارات tagline ("في مهمّة لتطوير الويب العربي" مثلًا) والشعارات logo، ولكن وعند الرغبة في صنع انطباع مثالي ولا يُنسى فمن الممكن استخدام الإنفوجرافيك أو حتى خلفيات الفيديو background video والتي ستدعم فكرة الموقع بشكل أفضل. أرشد المستخدم في أرجاء الموقع رويدا رويدا إن المهم مساعدة المستخدم على إيجاد ما يَبحث عنه بأقل جهد ممكن، بمعنى حاول دائمًا أن تكون واضحًا باستخدام الكلمات والتعابير والصياغة اللغوية، وتجنّب استخدام العناوين الغامضة والمبهمة، ولا تجعل المستخدم يُمعن في التفكير، وإن توفّر بنية من المعلومات وتصفح سلس بين الصفحات هو من العوامل الأساسية لتحقيق قابلية استخدام ناجحة، وإن كان لديك فيض من المحتوى ولا يمكن الوصول إليه بالبحث وبالسهولة المطلوبة، إذًا يوجد مشكلة ويجب حلّها على الفور. قلل من الأخطاء وحاول تقديم الحلول لا يُلام المستخدم على أخطاء الموقع بأي حال من الأحوال، حتى لو كان هو مُسبب الخطأ، ولذلك من واجب صاحب الموقع التقليل من العوامل المسبّبة للأخطاء قدر الإمكان، فمن المجدي جدًا استخدام التلميحات المرئيّة والإرشادات النصيّة والتي من الممكن أن تقلّل من أخطاء ملئ النموذج form مثلًا، مع ذلك ستبقى هناك أخطاء لا يُمكن تجنبها، وهنا يمكن الاستفادة من صفحة منسقة ومرتبة لتعرض الأخطاء المتوقعة والتي قد يتعرّض لها المستخدم وكيف له تجنّبها. أبق المستخدم على إطلاع بحالة الموقعتُعتبر هذه النصيحة من أهم النصائح في قابليّة الاستخدام، والتي اقترحها Jacob Nielsen عام 1995، وهي ذات تأثير وفعالية ليومنا هذا، وبالتالي يجب التصريح والإشارة إلى حالة الموقع دون تأخير. اعمل على بناء ثقة ومصداقية لا تدور قابلية الاستخدام حول الأمور التقنية فحسب، فإن كان المستخدم لا يثق بموقع أو منتجك، فلا شيء سيصنع الفرق، لا المحتوى ولا التأثيرات البصرية، لذا تأكّد من وجود صفحة "من نحن" أو "حول الموقع" وقدّم من خلالها فريق العمل، وحبّذا أيضًا لو تم تدعيم هذا النوع من الصفحات بالتغطيات الإعلامية أو استطلاعات الرأي أو ربما شيء من الإحصائيات التي تخص الموقع، والأهم من هذا كله شهادات العملاء وتقديرهم لخدمتك customer testimonials. خاتمةتذكّر دائمًا عند العمل على قابلية الاستخدام أن المستخدم لا يرى الواجهة بالطريقة ذاتها التي أنت تراها كمُصمّم UI، ويجب الانتباه دائمًا إلى وجود نماذج مختلفة من المستخدمين، فمنهم الصبور ومنهم المتذمّر، ومنهم من ينبه إلى التفاصيل ومنهم الذي لا يدقّق، وعليه فإن التفكير بهذه الطريقة هو السبيل في الحصول على نتائج مرضية. ترجمة وبتصرّف للمقال 5Basic Usability Principles Every Website Should Follow لصاحبه Armen Ghazarian. حقوق الصورة البارزة: Designed by Freepik.

هل تريد أن تسبق منافسيك وتصبح الأول في قطاعك التجاري؟ ركّز إذن على تجربة المُستخدم. عادةً ما تندفع الشركات نحو النجاح بأحد هذه العاملين: الخوف والفرص. تحمل الفرص الجديدة دوافع قويّة بالنسبة للشركات الصغيرة والتواقة للنجاح، فرص مثل انتزاع حصّتها السوقيّة، إخلال توازنات السوق في قطاعها التجاري، أو إحراز قفزات نوعيّة في مضمار المنافسة مع اللاعبين الكبار، وتسمح لك التقنية القيام بذلك. أما الشركات الأكبر والأكثر رسوخًا واستقرارًا فإن الخوف هو ما يحدّد سلوكها ودوافعها؛ الخوف من تخلخل القطاع التجاري عن طريق منافس ما، أو حدوث تغييرات ما في هذا القطاع. وإذا كان هذا هو حال شركتك فعليك الاحتراس لأن هذا هو ما تفعله التقنيات الحديثة بالضبط. سأطلعكم في هذا المقال على الفرص المذهلة والمخاطر المقلقة التي تجلبها التقنية لعالم الأعمال، وذلك من خلال دراسة أربع حالات متجنّبا القصص الكلاسيكية مثل iTunes وتجارة الموسيقى أو التنافس بين Blockbusters و Netflix، عوضًا عن ذلك سأركّز على أمثلة استطاعت إخلال توازن السوق في مجالاتها. أتمنى أن تكون هذه القصص مُلهمة لأولئك المتعطشين إلى الفرص الجديدة وتساعدهم على اقتحام مجالهم بقوّة، أما بالنسبة لأولئك الباحثين عن طرق يحافظون فيها على أسواقهم الخاصة فهذا المقال يجب أن يدفعهم للتغيير. Uber وسائقي سيارات الأجرة في لندناخترقت Uber عالم سيارات الأجرة وأخلّت توازناته مُستخدمة التقنية بهدف تحسين تجربة المستخدم، فأدخلوا تغييرات كبيرة في هذا المجال الساكن، ليس فقط بالنسبة لسائقي سيارات الأجرة في لندن، بل بالنسبة لخدمة سيارات الأجرة حول العالم. المشكلة أن طلب سيارة الأجرة في لندن من الممكن أن يصبح كابوسًا في ساعات معينة من النهار، لا يتعلق الأمر بتكلفتها الباهظة فحسب بل يتعدى ليشكّل تجربة شاقّة؛ حيث معظم السائقين لا يتعاملون مع البطاقات المصرفية، لذا عليك أولًا أن تسحب نقودًا من الصرّاف الآلي ATM، وأن تعتمد على ذاكرة السائق وخبرته في الأماكن لعدم وجود خدمة تحديد الموقع GPS لديه، أخيرًا وعندما تصل إلى وجهتك ستحتاج إلى انتظار بعض الوقت قبل المغادرة لدفع المبلغ المستحق واسترداد الباقي مع وصل الاستلام. جعلت Uber هذه التجربة أسهل بأسلوب رائع. فكل ما عليك فعله هو طلب سائق عبر تطبيق الهاتف المحمول، والذي سيرسل موقعك لأقرب سيارة أجرة. يعرض التطبيق موعد وصول السائق المتوقع والتكلفة التقريبيّة. في السيارة وأثناء رحلتك مع السائق إلى الوجهة التي تقصدها يمكنك متابعة الطريق عبر البرنامج نفسه للتأكد من عدم اختيار السائق لطريق أطول. عندما تصل إلى وجهتك ما عليك سوى الخروج من السيارة فورًا، فالرسوم تُخصم تلقائيًا من بطاقة الائتمان الخاصة بك لتستلم إيصال الدفع عبر البريد الإلكتروني. ليس غريبًا بعد ذلك أن ينطلق Uber بقوّة كبيرة في السوق، فقد استخدموا التقنية ليحسّنوا تجربة المستخدم بشكل ملحوظ وهو ما لا يملكه سائقو لندن التقليديين، ولا يحبونه أيضًا. وأمام هذا كلّه قام السائقون التقليديون بإضراب احتجاجًا على Uber مدّعين بأنها تتجاوز القانون، لكنهم في الحقيقة لم يحبّوا تغيّر المشهد بهذا الشكل، فالتقنية مكّنت الآخرين من المنافسة، ومعرفتهم لشوارع لندن قد عفا عليها الزمن أمام نظام تحديد المواقع GPS وخرائطه الدقيقة، كانوا يصيحون بأن هذا غير عادل عوضًا عن التكيّف مع التغيير، وفي النهاية فإنّ تجربة المستخدم وحدها من حدّد الرابح، سواء وصفنا ذلك بأنّه مُنصف أم لا. FreeAgentيُعتبر FreeAgent مثالًا آخر على اقتحام القطاعات التجارية بقوّة، وعلى العكس من uber ركّز FreeAgent على تقديم خدمة ذاتية للعميل بهدف توفير المال. باختصار فإن FreeAgent هو تطبيق لإدارة الحسابات، يسمح للشركات الصغيرة بإدارة ضرائبها، فواتيرها، أعمالها وعملائها في مكان واحد. فبدلًا من تعيين موظّف خاص لإدارة حساباتك هذه بإمكانك اليوم أن تفعل هذا بنفسك. يحوّل FreeAgent الأعمال الحسابية المُعقدة إلى خطوات بسيطة ممّا يمكّنك من إجرائها بنفسك لاغيًا الحاجة إلى توظيف محاسب. إنّه يُسهّل إدارة الأعمال التجارية، ويسمح لأرباب العمل بالتركيز على العمل الحقيقيّ بأنفسهم بعيدًا عن التعامل مع الورق. يضيق أصحاب الأعمال التجارية ذرعًا بالتعامل مع المحاسبين ومحصّلي الضرائب، من هنا قدّم مشروع FreeAgent نفسه لتبسيط هذه المهمة. ومرةً أخرى تبدو التقنية كشرّ لابدّ منه، إذ يمكنكم تخيّل التغيرات المتوقعة ضمن عالم المحاسبة في السنوات القليلة القادمة. DPDاعتماد التقنية ليس حكرًا على أصحاب الأعمال الجديدة واللاعبين الجدد الهادفين إلى الاستيلاء على حصصهم الخاصّة في السوق، فالتقنية متاحة للجميع بما فيهم الشركات التقليدية أيضًا. شركة DPD هي إحدى الشّركات التي حقّقت هذا الاستثناء. تعمل DPD على تسليم الطرود منذ عام 1970 وحتى اليوم، إلا أنّ إدخالها التقنية إلى العمل أتاح لهم تحقيق قفزات واسعة لتجاوز منافسيهم. حازت DPD على حب المستخدمين وثقتهم، ما جعلها تتعاقد مع جهات كبيرة مثل Amazon. فما السر وراء حب العملاء لـDPD؟ الجواب ببساطة:استخدامها التقنية لتقديم أرقى الخدمات للعملاء. كثيرًا ما يعطّلك انتظار طرد ما، فمعظم الشركات تحدّد لك يوم تسليم الطرد فحسب، الأمر الذي يلزمك البقاء في المنزل وعدم مغادرته في هذا اليوم حتى لو احتجت لزيارة متجر قريب بسرعة مخافة أن يفوتك الطرد. أدركت DPD هذه المشكلة واستثمرت في حلها لتعزيز تجربة عملائها، فعبر استخدام نظام تحديد المواقع GPS تتيح DPD لعملائها تتّبع طرودهم في الوقت الحقيقي. بداية ستتلقى رسالة نصيّة أو بريدا إلكترونيًا في اليوم السابق للتسليم مع تقدير موعد ساعة الاستلام، يُحسب هذا باستخدام نظام مُعقّد يعتمد على قاعدة بيانات عمليات التسليم السابقة. تاليًا في يوم استلام الطرد يمكنك أن تدخل لموقع DPD الإلكتروني لتتبّع حركة طردك في الوقت الحقيقي، وذلك بالنظر إلى إحداثيات موقع السائق على الخريطة؛ ما يمنحك إمكانية القرار فيما إذا كنت تملك الوقت للذهاب إلى المتجر أم لا، حتى أنّ البرنامج يخبرك بعدد الشحنات التي سيتم تسليمها قبل طردك. هكذا ومن خلال الاستثمار في التقنية المتاحة مثل نظام تحديد المواقع GPS، استطاع DPD تقديم خدمةٍ مختلفة تميّزه عن منافسيه. Go Henryتساعدنا التقنية على إنشاء بصمة خاصة ومساحة استثنائية حتى في أكثر القطاعات تقليديةً ومحافظةً على الثبات. لنأخذ Go Henry على سبيل المثال، والذين وفّروا إمكانية إنشاء حساب مصرفي للأطفال. لو كنتَ أبًا فستعلم المشكلة التي تشكّلها النقود للأطفال. يرغب الطفل أحيانًا بشراء مواد عبر الإنترنت بواسطة حساب مصرفي، أو يصدف أن يزور الطفل متجرًا دون نقود مما يضطرّك للدفع عبر بطاقتك الائتمانية، ناهيك عن أهمية مساعدة الصغار على تعلّم أساليب الإدارة الماليّة. حالما يبلغ ابنك العاشرة يمكنك اصطحابه للمصرف لإنشاء حساب خاص به، إلا أن معظم المصارف لا تتيح للأطفال استخدام التطبيقات المصرفية، وهكذا لن يعرف الطفل كم من المال في حسابه، وبالتالي يفقد السيطرة على ما ينفقه من المال. رأى مشروع Go Henry هذه الحاجة واستطاع إيجاد طريقة للحلّ باستخدام التقنية، مستثمرين جزءًا مُهملًا من قطاع العمل المصرفي لخلق مساحة تجارية مزدهرة بواسطة التقنية. يمكنك مع Go Henry إعطاء طفلك بطاقة للسحب الآلي، بعد تعيين كل أنواع الحدود التي تريدها، يمكنك بالإضافة إلى ذلك إعداد الحساب لسحب المزيد من المال أو تزويده بمصروف شهري بشكل منتظم وتلقائيّ دون حاجتك لتذكّر ذلك. الأهم من كل هذا تجربة الطفل ذاتها، والذي سيمكنه معرفة رصيده الحاليّ، أو إعداد جدول أهداف للادخار. تحسين تجربة المستخدم بواسطة التقنيةما هو العامل المشترك بين هذه القصص الأربع؟ هل هو تأثير التقنية في اختراق القطاعات التجارية؟ حسنًا، ما تشترك فيه القصص الأربعة هو أن التقنية حسّنت من تجربة المستخدم، الأمر الذي انعكس على تميّز هذه الشركات في قطاعاتها وبين منافسيها. انظر لعملك التجاري، قيّم تجربة العميل لديك ثم انظر إلى لطرق التي يمكن أن تُدخِل التقنية فيها لتقديم تجربة أرقى للعميل، عندها فقط سيكون بإمكانك الحصول على فرص جديدة، أو تجنّب المخاطر القادمة من هيمنة التقنية. ترجمة -وبتصرف- للمقال Disrupt your sector through a better user experience لصاحبه Paul Boag. حقوق الصورة البارزة: Designed by Freepik.

يحبّ المصممون استخدام المساحات البيضاء، ويريد أصحاب المواقع ملأها. قد تبدو المساحات البيضاء واحدة من أكثر الجوانب المثيرة للجدل في التصميم. لماذا هي مهمّة جدًا إذًا وكيف يمكننا أن نضمن استخدامها بأفضل طريقة ممكنة؟ المساحات البيضاء هي حجر البناء الأساسي للتصميم الجيّد. إنّها واحدة من أوائل الأمور التي يفكّر بها أيّ مصمم. ولكن بالنسبة إلى العديد من أصحاب المواقع، فإنّها بكلّ بساطة مجرّد إهدارٍ لمساحةٍ كان يمكن استخدامها بشكلٍ أفضل لإيصال الرسائل، الخدمات والمنتجات التي يريدونها. أرغب في هذا المقال في أنّ أشرح سبب أهميّة المساحات البيضاء وكيفيّة إبقاءها ضمن التصميم دون الإضرار بمهام العمل. وعلى كلّ حال وقبل أن أبدأ في ذلك، يجب علينا أن نوضّح ما نعنيه بـ"المساحات البيضاء". مالذي يعنيه المصممون بالمساحات البيضاء؟عندما يتحدّث المصممون عن المساحات البيضاء، فهم يعنون المساحة السلبية بذلك. بعبارةٍ أخرى فهم يقصدون المسافة بين العناصر على الشاشة. وهي ليست دائمًا "بيضاء". فقد تكون هذه المساحة ملوّنة أو خليطًا من الألوان، ولكن وفي كلتا الحالتين فهي مساحة ضمن تصميم لا تحتوي على أيّ عناصر. يمكنك بالأسفل أن ترى بعض الأمثلة على المساحات البيضاء في عدّة مواقع. الآن وبعد أن قمنا بتعريف مصطلح "المساحات البيضاء" بوضوح، فإنّ السؤال التالي سيكون: “لماذا هي مهمّة؟". لماذا المساحات البيضاء مهمّةالمساحات البيضاء هي عنصر أساسي لأيّ تصميم لسببٍ وجيه. إذا تمّ استخدامها بشكلٍ جيّد فيمكنها أن تحوّل من شكل التصميم وتوفّر له العديد من المزايا والمحاسن. بعض هذه المحاسن يكون جماليًا بحتًا بينما تمتلك غيرها أثرًا مباشرًا على فعالية موقعك. أشارك معكم أدناه 4 إيجابيات لهذا النوع الأخير: تحسين الوضوحأفضل ميّزة للمساحات البيضاء هي أنّها تزيد من الوضوح. تحتاج فقط إلى مقارنة الأمثلة الظاهرة أدناه والمستنقاة من http://alistapart.com/article/whitespace حول المساحات البيضاء لتلاحظ كيفّ أنّ استخدامها بشكلٍ جيّد يمكنه أن يحسّن بشكلٍ هائل من درجة وضوح موقعك: فهمٌ أعلىصدّق أو لا تصدّق، يمكن للمساحات البيضاء بين الفقرات وحول أقسام النصوص أن تساعد الناس على أن يفهموا ما يقرؤون بشكلٍ أفضل. وفقًا لدراسة في 2004، يمكن لهذا النوع من المساحات البيضاء أن يحسّن نسبة الفهم بنسبة 20% تقريبًا. تركيزٌ أفضليمكن للمساحات البيضاء أيضًا أن تكون طريقةً رائعة لجذب اهتمام المستخدمين إلى عنصر معيّن على الشاشة. بالنسبة إلى غير المصممين، فإنّ أسهل طريقة لجعل شيءٍ ما يجذب اهتمامًا أكبر هي عبر جعله أكبر. ولكن غالبًا ما يكون إحاطة العنصر بالمساحات البيضاء فعّالًا بنفس الدرجة. إيصال النبرة الصحيحةوأخيرًا، فإنّ استخدام المساحات البيضاء يمكن أن يكون طريقةً ممتازة لإيصال أناقة ونضارة وانفتاح التصميم. طبعًا، هذه ليست الأمور التي تريد إيصالها دومًا عبر تصميمك، ولكنّ عندما تكون هي ما تريده، فليس هناك شيءٌ أفضل من استخدام العديد من المساحات البيضاء في التصميم. أصبحت محاسن المساحات البيضاء واضحةً الآن. ولكن أحيانًا يحصل وأن يتم طرد المساحات البيضاء خارجًا من التصميم. ولمنع هذا فإنّه يجب علينا أن نفهم لما قد يحصل هذا وكيف نتغلّب عليه. أعداء المساحات البيضاء الثلاثأعتقد أنّه هناك ثلاث أعداء رئيسيين يمنعون من استخدام المساحات البيضاء ضمن التصميم. إذا كنتَ تفهم ما هي هذه الأشياء وكيف تتعامل معها، فحينها ستوفّر فرصة أكبر لتصميمك ليستخدم المساحات البيضاء التي يحتاجها. فلنبدأ بالحديث عن الطيّ (the fold). الطيّ The foldيتم طرد المساحات البيضاء خارج التصميم عادةً بسبب أنّ شخصًا ما ضمن المؤسسة يعتقد أنّ المستخدمين لا يقومون باستخدام شريط التمرير (scrollbar). النتيجة هي أنّهم يصرّون على وضع أكبر كمّية ممكنة من المحتوى في أعلى مكان ممكن على الصفحة مما يمنع من استخدام أيّ مساحات بيضاء ضمن التصميم. وعلى كلّ حال، فقد تم إثبات خطأ فكرة أنّ المستخدمين لا يقومون باستخدام شريط التمرير مبكّرًا في عام 1997، بل وأظهرت دراسات حديثة أنّ المستخدمين يقومون باستخدام شريط التمرير بكثرة للانتقال إلى نهاية الصفحات. بالإضافة إلى ذلك، فإنّه من المهم أن تتذكّر أننا لا نعرف النقطة التي سيقوم المستخدمون بالبدء فيها باستخدام شريط التمرير. يعتمد هذا على نوع نظام التشغيل، المتصفّح، دقّة الشاشة والعديد من العوامل الأخرى. في النهاية فإنّ القلق على فكرة "طيّ" الصفحات هي فكرة خاطئة. بعد قول هذا، فإنّه ما يزال من الجيّد أن تضمن أنّ الرسائل التي تحثّ المستخدمين على اتّخاذ إجراء بالإضافة إلى المحتوى موضوعةٌ في أعلى الصفحة. ولكن، هذا لا يعني أنّه يجب عليك تجاهل المحتوى الآخر ضمن الصفحة. أضف إلى ذلك أنّ وضع الكثير من المحتوى في رأس الصفحة وبدايتها سيقلل من أهمّية المحتوى الرئيسي لأنّه سيتم تجاهله في مقابل محتوىً مجاورٍ أقل كما وضّحنا في نقطة "زيادة الانتباه" في الأعلى. محاولة قول الكثيرسببٌ شائع آخر يتم من أجله عدم استخدام المساحات البيضاء ضمن التصميم هو وجود الرغبة في إيصال الكثير من المعلومات في وقتٍ واحد. يمتلك معظم أصحاب المواقع الكثير من الأشياء التي يريدون قولها ولكنّ المستخدمين لسوء الحظ لا يعيرون سوى القليل من الاهتمام. لذلك فإنّه من المهم بالنسبة لك أن تقوم بـ"صرف" هذا الاهتمام بشكلٍ حكيم. صفحتا جوجل وياهو الرئيسيتان هما مثالٌ جيّد على هذه المشكلة. تعرض كلا الشركتان خدماتٍ مشابهة. ولكنّهما تتخذان مسارًا مختلفًا لطريقة هيكلة صفحتيهما الرئيسيتين. كما يمكنك أن ترى من لقطات الشاشة التالية، تحاول ياهو جلب المستخدم لينظر إلى كلّ شيءٍ في وقتٍ واحد. بينما تعرف جوجل أنّ المستخدم لديه تركيز محدود معك ولذلك فإنّهم يركّزون على منتجهم الرئيسي أولًا – البحث. عبر النظر إلى كلتا الصفحتين فإنّك تدرك مباشرةً أيّ واحدة منهما هي الأكثر فعالية. لكي تستفيد من هذه الفكرة أقترح عليك(أو على أولئك الذين يعملون ضمن مؤسستك والذين يريدون دفع المزيد من المحتوى) أن تقوم بتحديد 15 نقطة لاهتمام المستخدم. كلّ عنصرٍ تقوم بإضافته إلى الصفحة يكلّف نقطةً واحدة. إذا كان عنصرٌ ما على الشاشة أكثر أهمّية بالنسبة لك من واحدٍ آخر فإنّك بحاجة إلى إعطائه المزيد من النقاط لتجعله بارزًا. بعددٍ قليل من النقط المتوفّرة فإنّه يصبح من الواضح بشكلٍ سريع أنّك لا تستطيع قول كلّ شيءٍ تريده على الصفحة الرئيسية، ولذا فإنّه لا يوجد حاجة لإخراج المساحات البيضاء من التصميم. السياساتبالطبع وحتّى في أحسن الأحوال في العالم فإنّ صاحب الموقع قد يضطر إلى إضافة الكثير من المحتوى إلى صفحةٍ ما بسبب سياساتٍ داخلية. عندما يصرّ أحدٌ ما أعلى منك ضمن المؤسسة أن يظهر محتوى مشروعه أو مشروعها بأكمله على الصفحة الرئيسية فإنّه هناك القليل مما يمكنك فعله. هذا هو المكان الذي يعرض فيه كتاب "Laws of Simplicity" بعض النصائح الرائعة. إذا كنت لا تستطيع إزالة قطعة معيّنة من المحتوى من الصفحة، فحينها حاول تقليصها أو إخفاءها. خذ على سبيل المثال الطريق الذي استخدمناه على صفحة موقع Wiltshire Farm Foods الرئيسية. لأسباب عدّة فقد تقرر أن تحتوي الصفحة الرئيسية على الطعام وأخبار الصحّة بغضّ النظر عنّ أنّ هذه المعلومات ستشوّش على الزائر أن يقوم باتخاذ الإجراء المطلوب منه (شراء وجبة) ولم يكن شيئًا تهتم به الشريحة الكبرى من المستخدمين. كان حلّنا هو توفير هذا المحتوى ولكن إخفاؤه إلّا في حال قرر المستخدم عرضه. قطعة صغيرة من شفرة جافاسكربت كانت كافية لتوسيع ذلك القسم عند طلب المستخدم. هذا أخفى ذلك المحتوى عن أولئك المستخدمين الغير مهتمين به وسمح للتصميم بأن يحتوي على المزيد من المساحات البيضاء. الخاتمةهناك جدالٌ بسيط حول ما إذا كانت المساحات البيضاء عبارةً عن أداة قيّمة في التصميم يمكن أن تجعل أيّ موقع يبدو أكثر فعالية. ما أراه هو أنّه لا حاجة لأن تكون هذه النقطة هي نقطة خلاف بين المصممين وأصحاب المواقع. أؤمن بأنّ أيّ تصميم سيكون قادرًا على استخدام المساحات البيضاء بشكلٍ يلائم العمل المطلوب منه تنفيذه. ولكن مالذي تعتقدونه أيها الأصحاب؟ مالمشاكل التي واجهتموها مع المساحات البيضاء؟ لماذا تعتقدون أنّ المساحات البيضاء ضمن التصميم مهمّة جدًا؟ أو لماذا لا تعتقدون ذلك؟ شاركونا آرائكم في التعليقات أدناه. تمّت ترجمة المقال: Why whitespace matters وبتصرّف لصاحبه Paul Boag. حقوق الصورة البارزة: Designed by Freepik.

تصميم تجربة المستخدم ليس هو نفس الشيء عندما تقارنه بتصميم واجهات الاستخدام. تجربة المستخدمين تحصل وراء الشاشات وبين الفجوات. كمصممي ويب وواجهات استخدام محمولة فإنّ عملنا يتركّز في بناء واجهاتٍ أنيقة. واجهاتٍ تكون عناصر أساسية في تجربة المستخدم. واجهات تسمح للمستخدمين بأن يحصلوا على أجوبة لأسئلتهم أو إكمال مهام أساسية بالنسبة لهم. عملنا هو أن نساعدهم في تحقيق أهدافهم. لكن إيّاك أن تخطئ وتعتقد أنّ هذه التفاعلات هي كلّ شيءٍ عن تجربة المستخدم. تجربة المستخدمين الرائعة تحصل دومًا خلف الشاشات وفي الفجوات. الفجوات التي تقع بين القنوات، الأجهزة وشركات الأعمال. تحصل تلك التجربة دومًا عندما تقوم المنظّمات بالاهتمام بالتفاصيل الدقيقة لتفاعلاتها مع العملاء. بسبب أنّ تصميم تجربة المستخدم يتعلّق بأكثر من أمر فإنّه من الصعب وصفه عادةً. لذا عوضًا عن ذلك، دعني أعطيك بعض الأمثلة على تفاعلاتٍ تساعد على إنشاء تجربة أفضل للمستخدمين. تفادي إزعاج دعم الهواتفتطبيق Barclays للهواتف الذكية مثال جيّد على تصميم جيّد لتجربة المستخدم. يمتلك التطبيق بذات نفسه واجهة جميلة. ولكنّ هذا ليس هو السبب وراء تجربة المستخدم الجيّدة الخاصّة به. يمتلك Barclays تطبيقًا ممتازًا للهاتف المحمول، ولكن السحر الحقيقي يحصل عندما تحاول الاتصال بهم. إذا أردت الاتصال بـBaraclays فإنّه يمكنك القيام بذلك عبر التطبيق. يسمح لك هذا بتخطّي الحاجة إلى الاستيثاق عبر الهاتف لأنّك قمتَ بهذا بالفعل عندما قمتَ بتسجيل الدخول إلى التطبيق. هذا مثال رائع على تجربة مستخدم مميّزة. أنا متأكّد من أنّ جلب نظام الهاتف والتطبيق ليتحدثا مع بعضهما البعض مباشرةً دون تدخل المستخدم لم يكن أمرًا سهلًا. ولكن بلا شكّ، فإنّه سيساعد المستخدمين على تجنّب الكثير من الإزعاج يوميًا. جعل عمليات الإرجاع أقل صعوبةإذا قمتَ من قبل بإرجاع منتج اشتريته عبر الشبكة فحينها أنت تعرف أنّ الأمر ليس سهلًا دومًا. يجب عليك كتابة طلب إرجاع، الذهاب إلى مكتب البريد والانتظار لأيّام قبل أن يعود المبلغ إلى حسابك الشخصي. وفوق كلّ هذا فهناك ذلك الأمر الذي تقلق حوله دومًا من أنّهم لن يعيدوا لك أموالك. على العكس مما سبق فقد كان لي تجربة حديثة في القيام بعملية إرجاع منتج. بعد أن أخبرت الشركة بأنني أريد إرجاع منتج خاصّ بهم، أخبروني بأنّ المال سيعود مباشرةً إلى حسابي، دون أيّ حاجة لانتظار عودة الطرد إليهم ومن ثمّ التحقق منه مجددًا. عند إرجاع منتج ما فهناك دومًا خوف من ألّا يعيدوا إليك نقودك. هذه فرصة سانحة لتحسين تجربة المستخدم. بعدها سألوني متى أريد أن يتم أخذ الطرد منّي. لم أحتج إلى توضيب الطرد وإغلاقه مجددًا أو تعبئة استمارة إرجاع ولصقها عليه والذهاب إلى البريد أو ما شابه. قام أحدهم فجأة بطرق باب منزلي حاملًا صندوقًا لكي يأخذ المنتج الذي أريد إرجاعه منّي. وضعت المنتج في ذلك الصندوق وأخذه لاحقًا. الآن، هذه تجربة مستخدم مميّزة. مساعدة الزبائن على أن يشعروا بالأمانعملت مرة مع زبون قام ببيع وجبات جاهزة مثلّجة لكبار السنّ. إنّه أمرٌ مثير للقلق بالنسبة لهم عندما يشترون المنتجات عبر الشبكة، ولا يحبّون فكرة أن يقوم شخص غريب بأن يطرق الباب عليهم. للتعامل مع هذه المشكلة، تمّ جعل اسم السائق وهويته واضحين لهم عندما يقومون بطلب عملية توصيل عبر الشبكة. بهذه الطريقة، سيتمكنون من تمييز الشخص الذي سيطرق الباب عليهم لاحقًا ليوصل الطلب إليهم. من الممكن لتجربة مستخدم جيّدة أن تقوم بزيادة أرباحك وأن تميّزك عن منافسيك. ولكنّهم لم يتوقّفوا هناك، بل يقومون بعمل فحص بواسطة الشرطة على جميع السائقين لكي يتمكّن الزبون من التأكّد من أنّ الأمر آمن. كان هذا مكلفًا واستغرق الكثير من الجهد، ولكنّه في المقابل زيادةً ملحوظةً في المبيعات. كان شيئًا لم يتمكّن منافسوهم (مثل Tescos) من تقديمه. الحفاظ على وقت المستخدمبالحديث عن عمليات التوصيل. هل قمت من قبل بالحصول على أيّ طرد عبر شركة DPD؟ أكره عمليات التوصيل، غالبًا ما لا يكون لديك أيّ فكرة عن متى سيصل الطرد الخاصّ بك وهل يجب عليك أن تقوم بمهامك وفقًا لهذا في الصباح أم في المساء. فهذا يعني أنّه يجب عليك أن تكون موجودًا ومستعدًا لرجل تسليم الطرود. لاشيء أبشع من اكتشاف وجود بطاقة تخبرك بالذهاب للمركز البريدي لاحقًا لتسلّم الطرد لأنّك اخترت اللحظة الخاطئة للذهاب إلى الحديقة. تسمح لك DPD بمعرفة موعد وصول الطرد الخاصّ بك بالضبط. تتعامل شركة DPD مع هذا. في يوم التوصيل سيقومون بمراسلتك قبل ساعةٍ من الموعد المتوقّع لوصول الطرد الخاصّ بك. كما وسيقومون أيضًا بالسماح لك بتعقّب طردك في الوقت الحقيقي ومعرفة مكانه عبر الخريطة. هذا يعني أنّه يمكنك معرفة مكان السائق وأن تقرر ما إذا كنت تمتلك 10 دقائق للذهاب إلى المتجر أم لا. بسبب تجربة المستخدم هذا، فإنني أتحمّس بشدّة عندما أكتشف أنني سأستلم طردًا عبر DPD! توفير الإلهاموأخيرًا أريد أن أذكر Etsy. يدرك المدراء في Etsy أنّه هناك الكثير من الأمور التي يمكن الاستفادة منها من قنوات التواصل الإجتماعي غير كونها مجرّد قناة تسويق. يعرفون أنّ العديد من زبائنهم يبحثون عن هديةٍ جيّدة ويحتارون في ماذا يشترون. لهذا قاموا ببناء تطبيق يقوم بالاتصال بحسابات المستخدمين على موقع Facebook. تقوم Etsy بدمج تجربة فيسبوك مع موقعهم عبر عرض اقتراحات الهدايا على المستخدمين عبر تحليل اهتمامات أصدقاء المستخدمين، يقوم التطبيق بتقديم الاقتراحات للمستخدمين عن ماهيّة الهدايا التي يجب عليهم شراؤها. استخدموا التكنولوجيا لتوفير مصدرٍ للإلهام لتجربة الشراء. أليس هذا هو نفسه خدمة العملاء؟ربّما تعتقد أنّ التفكير بهذه الطريقة هو أقرب إلى ما يشبه تصميم خدمة العملاء أكثر منه إلى تصميم تجربة المستخدم. ربّما تكون محقًا. تجربة المستخدمين ليست محدودة بقناةٍ واحدة، جهاز أو قطعة من مشروعك. الحقيقة هي أننا قمنا بتجزئة توصيفات أعمالنا بحيث تتداخل مع بعضها البعض غالبًا. أؤمن أنّ تصميم تجربة المستخدم مهمّ لأكثر من مجال. مجالات تتضمن كلا من تصميم واجهة الاستخدام وخدمة العملاء. مهما كان الاسم الذي تدعوها به، هناك درسٌ مهمّ لتعلّمه، وهو أنّ تجربة المستخدمين ليست محدودة بقناةٍ واحدة، جهاز أو قطعة من مشروعك. ترجمة -وبتصرّف- للمقال User experience design is not what you think لصاحبه Paul Boag. حقوق الصورة البارزة: Designed by Freepik.

سنقوم اليوم بإذن الله ببناء قائمة أخرى مُطَعَّمة بتأثيرات fancy hover‏. وسأعتمد التصميم ‏المُسطح الشائع مُستخدمًا الألوان الزاهية والأيقونات الرائعة، وأُطبّق تقنيات CSS‏ المتعددة، وبذلك يُصبح هذا الدرسُ ‏مقالةً رائعةً لمصممي الويب.‏ مفهوم القائمةقبل أن نبدأ بأي تنسيقات، سنقوم بإنشاء الهيكل الأساسي للقائمة بـ HTML‏. هناك عناصر جديدة في HTML5‎‏ مثل ‏nav‏ مُتاحة هذه الأيام، حتى أنها تعمل على إنترنت إكسبلورر بمساعدة بعض الإضافات مثل ‏ html5shiv. ‏ <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Flat Nav</title> <link href="style.css" rel="stylesheet" /> <link href='http://fonts.googleapis.com/css?family=Dosis' rel='stylesheet' type='text/css'> </head> <body> <div id="demo"> <nav> <ul> <li> <a href="#"> <span>Home</span> </a> </li> <li> <a href="#"> <span>About</span> </a> </li> <li> <a href="#"> <span>Portfolio</span> </a> </li> <li> <a href="#"> <span>Contact</span> </a> </li> </ul> </nav> </div> </body> </html>يبدأ الكود بتعريف ‏HTML5‎‏ كمرجعية للصفحة عن طريق <doctype html!>‏، عنوان الصفحة ‏‏title‏‏ ورابط ‏ملف CSS‏ ‏الذي سنقوم بإنشائه بعد ذلك ‏‏link>‎>. يأتي بعد ذلك ربط صفحة الويب بخط ‏ ‏Dosis‏‏ من ‏‏‏Google Webfonts‏. تبدأ ‏البُنية الرئيسة في القائمة بعنصر ‏‏nav‏، تكون داخله قائمة ‏ul‏. وكل ‏عنصر داخل ‏ul‏ يحتوي على رابط مرفقًا معه ‏عنصر ‏‎span‎‏ لإظهار تسمية الزر على يمين القائمة عند ‏مرور الماوس عليه.‏ تنسيقات CSSnav ul { list-style: none; overflow: hidden; position: relative; } nav ul li { float: left; margin: 0 20px 0 0; }نبدأ بعمل تنسيق ‏CSS‏ بأن نُزيل رمز النقطة من أمام كل عنصر من عناصر القائمة ‏ul‏، نجعل تلك العناصر ‏‏‏li‏ بجوار بعضها البعض. نضع تعريف التنسيق ‏overflow: hidden‏ للقائمة ‏ul‏ لتظهر تسميات ‏الأزرار متناسقة وغير متداخلة، من ثم وضع التنسيق الخاص بتسميات الأزرار ‏span‏ حتى تكون كلٌ منها ‏متمركزة في مكانها الصحيح على ‏li‏ الخاص بها ضمن القائمة ‏ul‏ الأب. nav ul li a { display: block; width: 120px; height: 120px; background-image: url(icons.png); background-repeat: no-repeat; } nav ul li:nth-child(1) a { background-color: #5bb2fc; background-position: 28px 28px; } nav ul li:nth-child(2) a { background-color: #58ebd3; background-position: 28px -96px; } nav ul li:nth-child(3) a { background-color: #ffa659; background-position: 28px -222px; } nav ul li:nth-child(4) a { background-color: #ff7a85; background-position: 28px -342px; }كل نقطة من نقاط القائمة الأربعة يتم تنسيقها لتظهر كمربع بعد إضافة الطول والعرض لها وهو ‏‎120px‎‏، قابلة ‏للتحول من تنسيق ‏inline‏ إلى تنسيق ‏block‏ باستخدام ‏display: block;‎‏. يتم تصدير جميع الأيقونات ‏من الفوتوشوب في صورة ‏sprite‏ واحدة تحوي خلفيات الصور الأربعة في نفس الملف، لذا فإن ملف ‏‏‏icons.png‏ يُعتبر صورة خلفية لجميع نقاط القائمة باستخدام مُحدِّد ‏nav ul li‏. حيث تقوم بتحديد موقع ‏الخلفية من داخل الملف الواحد حسب تموضعها فيه.‏ يُمكنك إضافة تنسيق مُحدَّد لكل نقطة من النقاط الأربعة على حِدة باستخدام مُحدِّد ‏li :nth-child‏. حيث تستطيع ‏أن تضيف ‏classes‏ لكل عنصر لوحده من عناصر القائمة ‏li‏ حسب رقم هذا العنصر. بالضبط كما حددنا لون ‏الخلفية لكل عنصر منفردًا.‏ nav ul li a span { font: 50px "Dosis", sans-serif; text-transform: uppercase; position: absolute; left: 580px; top: 29px; display: none; }نأتي الآن إلى ضبط موقع تسمية النص لعناصر القائمة، بتطبيق حدث التنسيق ‏on hover‏ لجميع العناصر مرة ‏واحدة، وذلك على ‏span‏ التي أضفناها لكل عنصر من عناصر القائمة. أولاً: نقوم بإضافة خصائص الخط ‏‏‏Dosis‏، وهي حجم الخط، و‏uppercase‏ (تحويل الحروف الصغيرة إلى حروف كبيرة) باستخدام خاصية ‏‏‏text-transform‏. ‏ افتراضيًا، فإن كل تسمية عنصر تتموضع في الزاوية العلوية يسارًا على بلوك عنصر القائمة، ولكننا نريدها أن تكون ‏على يمين القائمة ‏ul‏ خارج إطار العناصر. ببساطة، نضيف خاصية الموضع ‏position: absolute;‎‏ لعمل ‏ذلك. قمنا قبل ذلك بوضع الخاصية ‏position: relative;‎‏ إلى ‏nav ul‏ حتى يكون التموضع الحر مرتبطًا ‏بالقائمة ‏ul‏ (الأب)، عدا عن كونها مرتبطة بالعرض الكامل لشاشة المتصفح.‏ nav ul li a:hover span { display: block; } nav ul li:nth-child(1) a span { color: #5bb2fc; } nav ul li:nth-child(2) a span { color: #58ebd3; } nav ul li:nth-child(3) a span { color: #ffa659; } nav ul li:nth-child(4) a span { color: #ff7a85; }نرى الآن جميع تسميات العناصر ظاهرة فوق بعضها البعض في نفس الوقت، لذا سنقوم بإخفائها باستخدام الخاصية ‏‏‏display:none;‎‏ حتى لا تظهر أي من التسميات إلا حين يمر الماوس فوق عنصرها فقط، بإضافة ‏‏‏display:block;‎‏ إلى حدث التنسيق ‏on hover‏ الخاص بكل عنصر. بقي أن نُعطيَ كلَّ تسمية عنصر لونها ‏الخاص بها والمطابق للون خلفية عنصرها، هذا الأمر يتم في مُحدِّد ‏‎:nth-child‏ لكل عنصر على حدة.‏ النص الكامل لملف CSS‏، بعد أن انتهينا من الخطوات جميعها، سوف يصبح لدينا ملف CSS‏ جاهزًا كما يلي، بإمكانك نسخه من هنا: nav ul { list-style: none; overflow: hidden; position: relative; } nav ul li { float: left; margin: 0 20px 0 0; } nav ul li a { display: block; width: 120px; height: 120px; background-image: url(icons.png); background-repeat: no-repeat; } nav ul li:nth-child(1) a { background-color: #5bb2fc; background-position: 28px 28px; } nav ul li:nth-child(2) a { background-color: #58ebd3; background-position: 28px -96px; } nav ul li:nth-child(3) a { background-color: #ffa659; background-position: 28px -222px; } nav ul li:nth-child(4) a { background-color: #ff7a85; background-position: 28px -342px; } nav ul li a span { font: 50px "Dosis", sans-serif; text-transform: uppercase; position: absolute; left: 580px; top: 29px; display: none; } nav ul li a:hover span { display: block; } nav ul li:nth-child(1) a span { color: #5bb2fc; } nav ul li:nth-child(2) a span { color: #58ebd3; } nav ul li:nth-child(3) a span { color: #ffa659; } nav ul li:nth-child(4) a span { color: #ff7a85; } التصميم النهائي لقائمتنا ذات السِمة المسطحة: يمكن معاينة مثال حي عن الدرس، أو تصفح ملفات العمل الخاصة بالدرس. ترجمة وبتصرف للمقال: How To Create a Trendy Flat Style Nav Menu in CSS.

استكشف الأفكار باستخدام ورقة وقلمإنّ استخدام الورقة والقلم طريقة جيدة لبدء عمل سير الاستخدام ورسم السكتشات (جمع سكِتش sketch) غير الدقيقة للتصميم. ويتيح الورق -كوسيط للتصميم- مرونة كبيرة ويسمح لك باستكشاف الأفكار وتجربة المفاهيم. قم بحل المشاكل بحرية على الورق دون الاضطرار لأن تفكر بكيفية حل هذه المشكلة باستخدام التطبيقات أو النصوص البرمجية. يضمن لك رسم السكتشات بأن تنشئ عددًا كبيرًا من الأفكار في وقت قصير. لا تبدِ اهتماما كبيرًا لعدم دقة أو ترتيب سكتشاتـك. عليك ببساطة أن تحدد أفكارك المبدئية وأن تحدد المفاهيم. يمكنك لاحقًا أن تأخذ أفضل العناصر وترتب أفكارك. إحدى التقنيات المفضلة لدي هي أن أنسخ بعض سكتشاتـي على آلة تصوير الأوراق، وأن أقطعها إلى أجزاء أساسية -بما يتسق مع شرح Brad Frost في Atomic Design-، ومن ثم أبدأ بإثراء مفهوم التصميم وذلك بتجميع وإعادة ترتيب العناصر. شخصيًّا، أجد أن تَحْريك قصاصات الورق يسمح لي بتحديد النمط والتفكير بكيفية تفاعل المستخدم مع حلول التصميم وتفسيره لرسائلي. لقد بدأت حديثًا باستخدام حاسوب محمول متصل بـCreative Cloude لتوريد الـسكتشات بسرعة إلى التطبيقات لتحسينها أكثر ولعمل تصاميم أولية سريعة. تعتمد إعادتك وتقييمك لحلول التصميم الخاصة بك على التدريب. ارسم سكتشات يوميًا وبتكرار ونفّذ تصاميم أولية. اتبع نمط ABC والذي يعني (Always Be Creating). هرم التصميميساعدك رسم سكتشات وتكرارها مراراً على التقدم في هرم التصميم. يسمح لك هذا أن تسير بأفكارك وتصميمك من حلول غير تفصيلية إلى تفصيلية، وأن تفصل التصميم بما يتناسب مع رسالة التواصل أو المنتج الرقمي. يعتمد هرم التصميم على مفهوم التصميم المتكامل Total Design لـ Stuart Pugh الذي يقسم الأنشطة إلى ست مراحل. أما بالنسبة للتصاميم الرقمية، فقد بسطتها إلى: رسم سكتشات، عمل أطر مفرغة، تمثيل، عمل تصاميم أولية. تذكر أن السكتش لا يساوي الإطار المفرغ. تخط النصوص الحافظة للمكان. استخدم محتوى حقيقيايجب أن يبدأ تصميم أيّ حل رقمي بمحتوى نابع من الحقيقة. النصوص الحافظة للمكان مجرد تقدير لأي تصميم ممكن. يجب أن يشمل تصميمك سياقًا للمحتوى المقدم للمستخدمين (وللزبائن). يمكن أن يُفضي استخدام المحتوى الحافظ للمكان إلى اتخاذ قرارات تصميم خاطئة يمكن أن تؤثر على التصميم وعلى التطوير في المستقبل. لقد رأيت ما لا يعد من النماذج والتصاميم الأولية التي فيها عبارة "Bob Smith, job title here". استخدم محتوى حقيقيًّا لتعرف كيف سيبدو تصميمك متى تمّ إكماله. ستساعدك النسخة الحقيقية من المحتوى على تحديد طول مستطيلات الإدخال في نماذج الوِب، وطول الأقسام وأشرطة التمرير الجانبية. ستعطيك النصوص الحافظة للمكان (lorem ipsum) شعورًا مزيفًا بالأمن وستؤدي إلى افتراضات غير واقعية عن عمل التصميم الخاص بك. ستصمم لتصل إلى مقدار مثالي من النسخ أو المحتوى، والتي لا تحدث أيّ منها في العالم الحقيقيّ. قم باتخاذ قرارات التصميم التي تدعم المحتوى. التصميم يحدد كيفية العملإن البساطة هي الهدف عند تصميم الواجهات وتجربة المستخدم. إن مراجعة حالات الاستخدام وقصص العمل يمكن أن تساعد على تشكيل الواجهة والتخلص من النقاط غير السلسة في طريقة التفاعل بين المستخدم والتصميم. ولكننا ما زلنا لا نعرف بالضبط من سيكون المستخدم النهائيّ أو كيف سيتفاعل مع الواجهة. من المهم لنا كمختصين في تصميم الواجهات وتجربة المستخدم أن ننشئ واجهات ترضي احتياجات كلّ من المستخدمين المبتدئين والخبراء؛ واجهات يسهل تعلمها دون أن تكون متعالية على المستخدم. يتطلب منا الانتقال من النقطة أ إلى النقطة ب أن نصل جسرًا في الهوة بين المستخدم المبتدئ والمتقدم، وذلك باستخدام تلميحات بصرية وتغذية راجعة للمستخدمين المبتدئين، وإتاحة مزايا متقدمة يمكن أن يتعلمها ويستكشفها المستخدمون المتقدمون. اختبر الافتراضات في المتصفحاختبر مبكرًا. اختبر بكثرة. قدم سياقًا للاستخدام. ابن تصميمًا أوليًّا يمكن أن يستخدَم في المتصفحات أو الأجهزة المحمولة وذلك لاختبار افتراضات التصميم التي لديك عبر التصاميم الأولية وذلك للتحقق من أفكارك وحلولك. صمم -باستخدام التصاميم الأولية- تجربة استخدام لا تحتاج لتعلم مسبق، وإنشاء أدوات وواجهات لا يلاحظ المستخدمون أنهم يستخدمونه، الأدوات والتفاعلات التي تتحول إلى جزء من المستخدم. جهّز البيئة للتفاعل مع المستخدم، وللإبقاء على تفاعل مستمر بسيط وسريع وطبيعي. وبالتأكيد، عليك أن تصمم لشاشات اللمس. قائمة التحقق من أدوات تصميم تجربة المستخدم:قلم رصاص وممحاة.أقلام حبر شبه سائلة (جِل)، وهي المفضلة لدي.مسطرة.دفتر رسم سكتشات (إما بورق غير مسطور أو ورق مربعات).أقلام بتدرجات رمادية.شبلونة رسم مفرغة.قصاصات ورقية ملونة.أقلام (ماركَر).هل هناك شيء آخَر ترغب بإضافته إلى هذه القائمة؟ أخبرنا في التعليقات. رحلة تصميم موفقة! ترجمة -وبتصرف- للمقال: Sketch, Iterate, Repeat: Prototyping Your Website Design لصاحبه: Andrew Smyk. حقوق الصورة البارزة: Designed by Freepik.