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

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

إنّ من أكثر ما يجعل العمل مُمتعا هو أن تكون مُتحمسا له، ولكنه قد يصبح أكثر ما يضرنا إذا أصبح هذا الحماس بديلا عن المعرفة وأصبح طريقنا مليئًا بالفرضيات غير المختبرة والرؤية غير الواضحة، ماذا لو كانت أيضا بيئة العمل تؤمن بنظرية العبقري المبدع الذي يعلم كل شيء وتطلب من مصمميها ومطوريها بأن يكونوا هذا العبقري المثالي الذي يستطيع لوحده أن يؤدي وظائفهُ ويتقنها بأكمل وجه، مما يجعلها بيئة عمل غير واقعية تجعل من قول كلمة "لا أعرف" شيئا مستحيلًا. إن النتيجة النهائية لمثل هذه البيئات هو منتجات منفصلة عن الواقع ولا تُلبّي احتياجات ورغبات المستخدمين الحقيقية وبالتالي تصبح منتجات فاشلة لا يُوجد لها أيّ حصة من السوق. إداراك الحاجات والرغبات الحقيقية للناس هو الشّرط الأساسي للتصميم وكما يقول خبراء هذا المجال أن التصميم المتمحور على المستخدم ­User-Centered Design هو جوهر هذا العلم وأساسه. لذلك يجب ألا ننحاز لأنفسنا أو لعملنا أو مهما كانت انحيازاتنا في بناء منتجاتنا ونجعل تركيزنا هو المستخدم النّهائي. هذا وكيف إن كانت المشكلة الرئيسية عند المصممين والمطورين أثناء عملهم هو أنهم يبنون الأشياء لأنفسهم، حيث أنهم متعلقون في الأمور التقنية أكثر من غيرهم من الناس كما قال ذلك الكاتب الأمريكي Michael E. Gerber في كتابه أسطورة الريادي  The E-Myth. هنا تظهر الحاجة الأساسية في فهم حاجات المستخدمين ورغباتهم، وحتى نحقّق ذلك لا بد لنا من عملية بحث مُمَنهجة لنتوصّل إلى نتائج يتم معالجتها، ونبني في ما بعد على أساسها منتجاتنا وبرامجنا. ما هو البحثفي البداية أرجو ألا تفزع من كلمة "بحث" وتنظر إليها على أنها تحتاج إلى وقت ودراسة وأموال حتى يكتمل البحث، فالبحث ببساطة هو تحقيق منظم للوصول إلى المعلومة. أنت تريد أن تعرف أكثر في موضوع معين لذلك أنت تتبع منهجاً معين لزيادة معرفتك في هذا الموضوع، هذا المنهج الذي ستتبعه لزيادة معرفتك يعتمد على من أنت وظيفيًا ومالذي تريد أن تعرفه. واطمئّن، فنوعية البحث المستخدمة هنا ليست بحث أساسي Pure Research معقّدة بمعنى أنه لن تكون مهمتك أن تعرف كيف تتم عملية التذكر في أعصاب الدماغ. في مجالنا هذا يتم الاستعانة بنوعين من الأبحاث للحصول إلى المعلومات هما: البحث الكمّي والبحث النّوعي، كما أن هذان البحثان أيضا هما البحثان اللذان يتم استعمالهما في إنشاء الشركات الناشئة، وهذا لاشتراك هذين المجالين في أنّهما يريدان بناء منتج يريده الناس ويحتاجونه. البحث الكمّي والنّوعيالبحث الكمّي Quantitative Research بحث منهجي للظواهر الاجتماعية من خلال الأساليب الإحصائية، الرياضية أو الحسابية، ويتم الاعتماد على البيانات بشكل رئيسي حتى يتم قياسها رقميا وبالتالي عند بداية فكرة جديدة لا نلجأ إليه لعدم وجود بيانات متعلقة بالمستخدمين وإنما يتم الاستعانة به بعد إصدار النسخة الأولية أو الحد الأدنى من المنتج القاعدي (Minimum Viable Product). البحث النّوعي Qualitative Research بحث يهدف إلى التعمق في فهم سلو الإنسان والأسباب التي دفعته للقيام بهذا السلوك وتكون عينته قليلة وطبيعة أسئلته بكيف، لماذا، وبأي طريقة. توجد طرق كثيرة لجمع البيانات منها المقابلات الفردية والجماعية، الملاحظة ومجموعات التركيز. يعتمد على فهم الناس بتعمق ولعدم وجود أي بيانات تتعلق بالمستخدمين عند بداية المشروع فعادة ما يتم البدء به. تكون نتائجه عبارة عن فرضيات يتم التحقق منها فيما بعد عن طريق البحث الكمي،  كما يتم استخدامه أيضا عند بناء خصائص جديدة للمنتج أو عند وجود غموض في نتائج البحث الكمي. ماذا أريد من البحثالبحث هو أداة بمثابة ميكروسكوب تستطيع من خلالها النظر إلى الصورة كاملة مما تسهل عملية تخطيطنا وإدارتنا. وعند بناء المنتجات يتعين علينا القيام بأربعة بحوث. بحث المنظمة وأصحاب المَصلحةفي هذا البحث تكون الفئة المستهدفة في البحث هم أصحاب المصلحة وفريق العمل المُشترِك معك في بناء المنتج، ويكون هدفه الإجابة عن الأسئلة التالية: مالذي يريد تحقيقه صاحب المنتج وأصحاب العمل، من هم، وما هي أهدافهم؟ماهي التنكولوجيا المستخدمة في بناء المنتج، وما إمكانياتنا وقدراتنا؟بحث المستخدمهو البحث المتعلق بفهم المستخدمين وسلوكهم، ويكون هدفه الإجابه عن هذه الأسئلة: من سيستخدم المنتج، ما مميزاتهم، أعمارهم، جنسهم، هواياتهم، وما سلوكهم الحالي في استخدامهم للمنتج أو لحلول مشابهة؟مالذي يريد تحقيقه المستخدم من استخدامه للمنتج؟وفي حال كان المنتج تطويرًا لنسخة سابقة: ما هي الخصائص والوظائف الحالية أو التعقيدات التي تواجه المستخدم؟ما هي الخصائص والوظائف التي سوف يجدها المستخدم جيدة لو تم إضافتها؟البحث التقييّميإذا قمت ببناء منتجك أو برنامجك بناء على حاجات المستخدم فلا بد لك من التأكد من ذلك والتأكد ما إذا كان منتجك جاهزاً لإصداره للسوق أم لا، هل هو سهل الاستخدام وما هي عيوبه؟ هنا الهدف الرئيسي من البحث التقييمي. بحث المنافسينمن هم منافسيك؟ يجب عليك أن تعرفهم وتقيمهم وتعرف ما هي مُميزّاتهم، خصائصهم وما هو الجديد الذي ستضيفه في منتجك بعد معرفتك لمنافسينك. مع العلم  بأن أصعب منتج منافس لك هو الذي يستخدمه الآن زبائنك المحتملين في المستقبل كما أن الناس كسولون بطبعهم ويكرهون تغيير عاداتهم فلذلك يجب عليك إضافة شيء مميز ورائع في منتجك يحبونه أكثر من كرهم لتغيير هذه العادة. التكلم بتفصيل عن كل هذه البحوث هو خارج نطاقنا هنا لكن سنكتفي بأهمهم وهو بحث المستخدم. بحث المستخدمإذا استطعنا أن نحدد إجابة للسؤال العملي المتعلق بالمنظمة أو الشركة وهو "ما الذي نريده من بناء هذا المنتج" نبدأ بعدها بالطرف الآخر من المعادلة وهو المستخدم وهدفنا كما قلنا أن نعرف ما الذي يريده المستخدمون من هذا المنتج. قد يبدو هذا السؤال بسيطاً وبديهيا لكن أكثر الأسئلة عمقا هي الأسئلة البديهيه. الإثنُوجرَافِي Ethnographyالبعض يسمي البحث النّوعي بالإثنوجرافي وهدفه فهم وتوثيق نشاطات، عقليات وسلوكيات مجموعة من الناس بعد أن يراها الملاحظ أو المراقب ويتم بطرق كثيرة أهمها المقابلة والاستفسار السياقي. المقابلة Interviewلقد ابتدأ العمل، استعد لمقابلة الناس المستهدفة ورتب لذلك وتذكر بأننا نريد أن نفهم السلوك فمثلا إذا كان كان منتجك هو بناء موقع إلكتروني لبيع تذاكر السينما فسنقوم باستهداف رواد السينما وليس محبي الأفلام. الدليلحضر دليل المقابلات بحيث يكون هو المرجع لجميع المقابلات، ومن أهم ما يجب أن يحتويه هذا المرجع هو: مختصر يوضح هدف الدراسة.الديموغرافيا (Demographics) وهي تختلف على اختلاف الدراسة وأهم ما تحتويه الاسم، العمر، الجنس، البلد، الوظيفة والتعليم.مجموعة من الأسئلة لتكسير الحواجز الجليدية في المقابلة، أنت لا تريد فقط أن تنتهي من مقابلتك أنت تريد أن تحصل على أصدق المعلومات لذلك لا بد من أن يخلو الجو من التوتر وتسود الراحة في المكان.الأسئلة الرئيسية في المقابلة وهي الأسئلة المتعلقة بموضوع الدراسة. تجنب أن تسأل أسئلة مثل "ما هو الحل برأيك" وذلك لأن المستخدم ليس مُصمما وغايته ببساطة أن يستخدم المنتج النهائي بسهولة ومتعة.بنية المقابلة (مع مثال توضيحي)المقدمةابدأ بتعريف نفسك مع ابتسامة وعبر عن امتنانك وشكرك له وقدر أنه يعطيك من وقته من أجل هذه المقابلة، خذ معلوماته الشخصية بطريقة مرنة وابدأ بتلطيف الجو في المقابلة واسأله أسئلة في خارج إطار الموضوع، عن تجربته وماذا يحب وما رأيه في موضوع معين بناء على سياق المقابلة وذلك لتكسير الحواجز قبل أن تبدأ في الأسئلة الأساسية في المرحلة التي بعدها. الرئيسيةهنا جوهر المقابلة، ستبدأ بالأسئلة الرئيسية، مثل: أخبرني عن أسبوعك بشكل عام؟ما مدى اهتمامك بالسينما؟هل تذهب للسينما في العطل الأسبوعية، أم لا يوجد وقت محدد؟كيف تتابع آخر الأفلام، وما نوعية الأفلام التي تحبها؟كيف تشتري تذاكرك، هل لديك مشكلة في الدفع عبر الإنترنت؟كم تقضي من الوقت متصلا بالإنترنت، وما هي وسيلة اتصالك به؟كيف تذهب للسينما، مع زوجتك وأولادك أو لوحدك؟ما هي المواقع التي تزورها في العادة؟وكما قلنا ركز على أن تكون الإجابات واقعية وأعر انتباهك لأي إجابة غريبة واستفهم عنها، حاول أن تكون مستمعا جيداً وتجنب التحدث عن نفسك كثيراً. كما أفضل أن تقوم بتدوين الإجابات بعد المقابلة مباشرة وذلك لتجنب تأثير هورثون (وهو أن سلوك الشخص قد يتغير إذا علم أنه مراقب وسُيقدم  السلوك المتوقع تقديمه). الخاتمةاعمل نقلة لطيفة لإنهاء المقابلة واختم مثلا بقولك "انتهيت من الأسئلة، ألديك أي شيء لتضيفه أو أي تعليق بخصوص ما ناقشناه؟". الاستفسار السياقي Contextual Inquiryهي طريقة أخرى من طرق بحث الإثنوجرافي وهو شبيه بالمقابلة إلا أنه يأخذ شكلا أعمق ويختلف عنها بأنه يتطلب الذهاب إلى مكان الحدث مباشرة وأن تراقب المستخدم أثناء قيامه بعمله وتقوم بملاحظته لفهم الموضوع بدقة أكثر ولمعرفة حقيقة الموضوع. ذلك، لأنه في أحسن الظروف في المقابلة النظرية لن تستطيع أن تتذكر كل شيء كمُقابل ولن تدرك حقيقة الشيء إلا إذا قمت بمعاينته وتجربته. لعل أقرب مثال لهذا النوع من البحوث هي قصة إنتاج سيارة Toyota sienna minivan سنة 2004، تم توكيل إنتاج هذه السيارة وتصميمها لـ "يوجي يوكوفا" وكان السوق المستهدف لها هو أمريكا الشمالية التي لم يكون "يوجي" يسكنها أو عنده أي خبرة حقيقة فيها. هنا قام "يوجي" بالذهاب بنفسه إلى أمريكا الشمالية قاطعا بنفس السيارة ولكن بموديل السنة السابقة 2003 ولايات أمريكا الخمسون، أراضي كندا والمكسيك. كان  هدف "يوجي" هو التحدث مع الناس مباشرة  ومراقبتهم أثناء سياقتهم للسيارة ليقوم ببحثه في أرض الحدث مباشرة. بعد أن انتهى من جولته البحثية أنتج الموديل الجديد للسيارة وكانت النتيجة أن مبيعات السيارة لموديل 2004 زادت بنسبة أكثر60% عن السنة السابقة. الجانب العاطفي أثناء البحثالعواطف موضوع خصوصي جداً، كما يبدو أنه من وجهة النظر البسيطة أن هناك فجوة بينه وبين التكنولوجيا. لذا فمن الخطأ أن يتم طرحه بصورة مباشرة في المقابلة، هذا قد يسبب الإحراج للجميع والخطأ في النتائج. هنا يكمن دورك في أن تكون يقظا في أن تفهم الخبايا وأن تقرأ ما بين السطور. راقب أثناء قيامك بالاستفسار السياقي بتأثير الجمال والمتعة على المستخدمين وابحث أيضا في فرص زيادة تأثيرهما. اهتم بالهدف العاطفي من وراء استخدام المنتج، مثلا أنا سأقوم بشراء تذكرتين إلكترونيتين لي ولزوجتي في السينما لقضاء وقت رائع معها، هنا يكون الهدف هو السرور مع الزوجة أكثر من الاستمتاع بالفيلم، ماذا لو كان الهدف هو قضاء وقت الفراغ ليس إلا؟ هنا يكون الدافع هو الملل وليس الشغف في السينما. فهمك لهذه العواطف سيساعدك على تصنيف المستخدمين كما سيجعل من منتجك أكثر عمقاً وبساطة. لمزيد من القراءة كتاب The UX Bookكتاب Just Enough Researchمقال A Five Step Process For Conducting User Researchمقال 5Useful Lies to Tell User Research Participants

لقد شاع استخدام الاقتباس التالي (وأحيانًا بطريقة خاطئة) لهنري فورد، وقد اتضح مؤخّرًا أن هنري فورد لم يقل هذه الكلمات أصلاً، لكنني لحسن الحظ لا أكتب بحثًا أكاديميًا، وإنما أكتب مقالاً، لذا، بغض النظر عن دقة المعلومات التاريخية، أظن أنكم تتفقون معي حيال كون هذا الاقتباس محفزًا للعديد من الأفكار. وإليكم اقتباسًا آخر، هذه المرة من ستيف جوبز: لقد عرف ستيف جوبز بوضوح أن المستخدم ليس على حق دائمًا. لا يعرف المستخدمون ما هو مناسب لهم كما ترى، لقد عرف كل من ستيف جوبز وهنري فورد درسًا بالغ الأهميّة. درسٌ لم يفهمه الكثير من المصمّمين، الباحثين ورجال الأعمال: لا يعرف الزبون والعميل ما هو جيّد له. ولا أتحدث هنا عن أمور ابتكار المنتجات والخدمات الجديدة، أنا أتحدث بصفة عامة. لا يعرف المستخدمون ما هو جيّد بالنسبة لهم ببساطة وحسب، نعم، لقد سمعت ذلك بوضوح. ليس المستخدم على حقٍ دائمًا، في الواقع، غالبًا ما يكون المستخدم مخطئًا بكل بساطة. بالطبع، ليس ذلك خطأ المستخدم. فكيف نتوقع من المستخدمين أن يكونوا على صواب مع ضيق أفقهم ومحدوديته في نظرتهم السطحية للأمور وآرائهم الفردية حيال مشكلة ما في التصميم؟ لنتوقف عن ممازحة أنفسنا. فالمستخدمون ليسوا مصممين، وفي أغلب الوقت لا يكونون خبراءً في المجال، وحتى لو عرفوا مدخلات ومخرجات الموضوع، سيبقون دائمًا ناقصي الخبرة في تحويل المعرفة بالموضوع إلى حلول تصميم جيدة. مع ذلك، أصادف أحيانًا من يتوقعون أننا سنحتاج فقط إلى سؤال المستخدمين كي يعطونا بأعجوبة كل الأجوبة التي نريدها. سنسأل المستخدمين عمّا يحتاجونه، سنسأل المستخدمين عن المزايا الأهم بالنسبة لهم، سنسأل المستخدمين عن كيفية تنظيم الموقع، سنسأل المستخدمين عمّا يجب وضعه في الصفحة الرئيسية. لنسأل المستخدمين تذكّرني هذه الثقافة الخطرة، ثقافة "لنسأل المستخدمين" بحلقة مميزة من "The Simpsons". أحب أن أستخرج أفضل دروس الحياة من هذه المُسلسل، كنصيحة Homer التي تقول، "إذا لم تنجح من المرة الأولى، استسلم". في إحدى الحلقات يكتشف Homer بأن لديه أخًا غير شقيق يدعى Herb، وصادف أن Herb هو رئيس مصنع Powell motors، مصنع أمريكي كبير، ومع انخفاض مبيعات المصنع، يطلب Herb من Homer أن يساعده في تصميم سيارة للمواطن الأمريكي البسيط، سيارة عادية لزيد وعبيد، من المصمم فلان العادي (أو ربما الأقل من العادي بالنسبة لـ Homer)، ويأمر Herb مصممي سياراته بأن يعطوا زمام تصميم السيارة إلى Homer ويستعملوا كل أفكاره، مهما بلغ جنونها. إنها مريعة لأنها سيارة مصممة بواسطة ولأجل Homer، ولأن من صمّمها ليس مصمّمًا، آمل أن لدى مستخدميك ذوقًا أرقى من ذو Homer (رغم أنني لا أضمن لك ذلك)، لكنني عمومًا أظن بأن هنالك درسًا مهمًا وراء هذه القصة: لا يعرف المستخدمون ما هو أفضل لهم، حتى المستخدمين الخياليين. سيارة Homer - إيضاح لما قد يحدث عندما تتبع اقتراحات المستخدمين اتباعًا أعمى. التصميم ليس مهمة الزبون كما ترى، إنها مسؤولية المصممين. ليس على المستخدمين أن يبدعوا حلولاً مذهلة لتحلّ مشاكلهم. ولا أعني بمسؤولية المصممين فقط من عمله هو التصميم، إنني أعني كامل فريق المنتج. يمكن للمطوّر أن يكون مصمّمًا بقدر ما يمكن لمصمم تجربة الاستخدام أن يكون مصممًا عاديًّا، يمكن للمستخدم من ناحية أخرى أن يكون مصمّمًا سيئًا، وتوقع غير هذا هو مجرّد كسلٍ في التصميم. إن مهمة فهم المستخدمين تعود على المصممين وفريق المنتج مهمة تحديد احتياجاتهم، مشاكلهم، آمالهم، أمنياتهم وأحلامهم، مهمة صنع حلول تصميمٍ أنيقة، مفيدة وسهلة الاستعمال لتلبّي احتياجاتهم تعود تمامًا عليهم، حتى لو لم يدرك المستخدمون حاجتهم لتلك الحلول، كما هو عليه الحال مع سيارة model T وجهاز الـ iPad. التصميم للأطفال كأبٍ لطفلين صغيرين، أرى أن العلاقة بين المصممين والمستخدمين تبدو مشابهة بعض الشيء للعلاقة بين أب وأطفاله (أو طفله). يجب عليك كأب أن تضع أبناءك في المركز. أبناؤك يأتون دومًا في المقام الأول، بدءًا من اتخاذ قرار حيال ما يجب عليك أن تفعله في يوم ماطر ووصولًا إلى التفكير في الطعام الذي يجب عليك أن تشتريه لهذا الأسبوع، كل ما تفعله مرتكز على احتياجات أطفالك. لكن ما يجب عليك ألّا تفعله هو ترك الأطفال ليُخبروك بما يجب عليك فعله لأنهم سيحاولون فعل ذلك، صدّقني سيحاولون! أنت الرئيس بالتأكيد بلا شك، لذلك، أنت العاقل هنا وأنت الأعلم بالأمور (أو على الأقل، هذه هي الصورة التي تحاول إظهارها). وهذه هي الطريقة التي يجب أن تعامل بها المستخدمين. لا أعني بهذا أن الواجب عليك هو معاملة المستخدمين كأطفال (إلا إن كانوا أطفالًا بالفعل)، لكن الواجب عليك هو إمضاء وقتك في محاولة فهمهم، إيجاد ما هو أفضل لهم، أخذهم لأيامٍ من المرح بجانب البحر، وأن لا تتبع إراداتهم اتباعًا أعمى. بالتأكيد، يجب عليك أن تُشرك المستخدمين في عملية التصميم، أن تأخذ آرائهم، تجرّب أفكارهم وتصوّراتهم، اقتراحاتهم وإضافاتهم، دون أن تنسى بأنك خبير التصميم وليسوا هم. أنت من تقود عملية التصميم، وليسوا هم. أود أن أترككم مع هذا الاقتباس الأخير، هذه المرة من Alan Cooper خبير تجربة المُستخدم وأب الـ Visual Basic، وقد أُخذت هذا الاقتباس من محادثة في مؤتمر لـ Microsoft يتحدث فيه Alan عن السبب الذي يجعل من المستخدمين مصدرًا سيّئًا لأخذ لتكوين فكرة عن برنامج ما. إليكم ما قاله Alan Cooper: أظن بأن Alan كان يمزح قليلًا حين قال بأن المستخدمين لا علاقة لهم به، لكنني أرجو أن فكرة Alan قد وصلت إليكم. وبالنسبة لي، لا أخالفه الرأي أبدًا. ترجمة -وبتصرف- للمقال Why the user is not always right لصاحبه Neil Turner.

غالباً ما يعتقد البعض أنّ تصميم الشعارات عمل سهل وسريع، فما هو إلّا تصميم صغير تضع بجانبه كلمة أو كلمتين ليكتمل العمل. في الواقع الأمر أكبر من هذا بكثير، وهذا يجعل عمليّة تصميم الشعار أو الهويّة مهمّة لا تخلو من التحدّيات. سنلقي نظرة على بعض قواعد تصميم الشعارات، وسنطّلع على عدد من الإرشادات التي يجب الالتزام بها لتصميم شعارات احترافيّة، وسنشاهد معًا التّطبيق العمليّ لهذه الإرشادات في تصميم شعار يمكن استخدامه في أرض الواقع. كان من السّهل وضع قائمة بالقواعد الّتي يجب اتّباعها في تصميم الشّعار، ولكن توخّيًا للفائدة اخترت أن أبيّن ذلك من خلال تصميم شعار لشركة خياليّة لاستضافة المواقع تحت مسمّى Media Stack، وتعاملت مع المشروع على أنّه حقيقيّ (لا ينقصه إلا التّواصل مع العميل). لن يكون المقال بصورة درس متعدّد الخطوات، وإنّما سأوضّح بعض الأفكار التي تدور في ذهني وذلك من خلال عرض الطريقة التي ترجمت بها شخصيًّا خلاصة كل قاعدة في التصميم النهائي للشعار. اطرح الأسئلة لتكون نبذة جيدة عن التصميمأولى الخطوات التي يجب القيام بها عند تسلمك لمشروع تصميم شعار جديد، هي جمع المعلومات اللازمة عن الشركة، مثل ماهية عملها، الجمهور الذي تستهدفه، أهدافها والصورة التي سيعكسها الشعار عنها. يعتمد بعض المصممين في ذلك على استمارة إلكترونية يطرح من خلالها مجموعة من الأسئلة، في حين يتصل البعض الآخر بالعميل هاتفيًّا أو يتواصل معه عن طريق البريد الإلكتروني. مهما كانت الطّريقة التي ستتّبعها فعليك جمع أكبر كمية من المعلومات، إذ كلما زادت المعلومات المتوفّرة لديك كانت عملية تصميم شعار ملائم للزبون أكثر سهولة ويسرًا، والأهم من ذلك أنّك ستصمم شعاراً يمثل الشركة بالصورة الصحيحة واللائقة. نظراً لكون المشروع خياليًّا فإنّ جميع المعلومات عن شركة Media Stack هي من نسج الخيال، ولكني توخيت جعل المشروع نموذجيًّا لشركة صغيرة إلى متوسّطة. تلخص النبذة هوية شركة Media Stack وطبيعة عملها والصورة التي ترغب في عكسها إلى زبائنها. يمكن الاستفادة من كل هذه المعلومات في تكوين شعار فريد يمثل الشركة بصورة لائقة. يبدأ التصميم اليومي بمسودةيعد استخدام المسودة أمرا مهما لإطلاق الأفكار المتعددة وإبرازها على الورق، وبلا شك فقد تولدت لديك بعض الأفكار الأولية بعد قراءتك للنبذة، وهذه هي فرصتك لتسجيل هذه الأفكار إضافة إلى الكلمات المفتاحية، الخربشات، المخططات، والأفكار الإبداعية. بدأت ببعض الخربشات التي استلهمتها من بعض الكلمات المفتاحية المتعلقة باستضافة المواقع، وفكرة أكداس الخواديم. برزت بعدها بعض الأفكار حول كيفية تمثيل كدس الخواديم بصورة بصرية. يمكن الاستفادة من شكل المستطيل الرفيع للخادوم، كذلك يمكن استخدام الحروف الأولى من اسم الشركة وهي M و S، أو يمكن استخدام بعض الأيقونات التي ترمز إلى الشّكات. كون فكرةيتمحور تصميم الشّعار حول تكوين الفكرة التي ستصف الشركة وقيمها بطريقة فنية، ولك الخَيار في أن تنهج في ذلك الأسلوب الواقعي أو التجريدي، إذ ليس من الضروري أن تصف الشعارات دائمًا وبصورة دقيقة ما تقوم به الشركة، وإنما يمكن التركيز على قيمة أو رسالة معينة. هنا ستظهر فائدة البحث الأولي الذي أجريته عن عمل الشركة حيث سيساعدك هذا على تكوين صورة فريدة وذات صلة بعمل الشركة. تمخضت المسودات عن فكرة رئيسة لشعار Media Stack وهي تمثيل كدس الخواديم على هيئة مجموعة من الصناديق، وبدلًا من رسم هذه الصناديق بطريقة اعتيادية قد تبدو مملة نوعًا ما، قررت إدخال بعض الإثارة إلى الرسم وجعل الفكرة أكثر تجردًا، وذلك بإدخال البعد الثالث وتفريغ الصناديق، الأمر الذي نقل الشّعار بعيدًا عن الشكل المسطّح للصّناديق، وساهم في تطوير علامة بصرية غير اعتيادية. يمكن مشاهدة الشّعار بطريقتين، الأولى باعتباره شكلًا متناظرًا، ولكن إن أمعنت النظر في الشعار فإنك ستشاهد الطبقات الثلاثة مكدسة فوق بعضها البعض. يكون الشكل كذلك ما يشبه السهم المتجه إلى الأعلى، ويمكن ترجمة ذلك بالنمو والتقدم نحو الأمام وسيمنح ذلك المزيد من القوّة إلى الشعار وبخاصة عند تقديم العروض إلى الزبائن. صمم الشعار على هيئة Vectorالآن، وبعد اختيار فكرة التصميم، ستبدأ فعلًا ببناء الشّعار على الحاسوب، وتصميم الشّعار بصيغة Vector من أهم القواعد التصميمية التي يجب عليك اتّباعها. تسمح التصاميم المُوجهة vector format بتغيير مقاسات التصميم بحرية دون المساس بجودته، بعكس الصور النقطية المكونة من البكسلات والتي يؤدي تغيير حجمها إلى تشويهها وفقدان وضوحها. يمكن استخدام الشّعار المصمّم بصيغة Vector لجميع الأغراض، سواء أوضعته بحجم صغير على وصل أو فاتورة، أم وضعته بحجم كبير في إعلان ضخم على جانب إحدى المباني الكبيرة. يعد برنامج Adobe Illustrator الأكثر شهرة في هذا المجال، أما صيغ الملفات الأكثر شهرة هي Ai، EPS، و PDF. قد لا يمتلك الزبون البرامج اللازمة للتعامل مع هذه الملفات، لذا يجب تزويده بالشّعار وبأحجام مختلفة على هيئة صور بصيغة JPEG أو PNG للاستخدام اليومي، وتزويد ملف بإحدى صيغ المتجهات للاستخدام الاحترافيّ. صمّمت شعار Media Stack بواسطة برنامج Adobe Illustrator، وهو برنامجي المفضل في مجال العمل على المتجهات. بدأت بمستطيل بسيط تلاعبت به بواسطة أداة التحديد المباشر Direct Selection Tool لإضفاء المظهر المائل عليه، وعن طريق مضاعفة المستطيل المائل وقلبه حصلت على الشكل النهائي للشعار. تمّ ضبط مواضع كل الأشكال بصورة دقيقة جدّاً، وذلك عن طريق تكبير العرض إلى الدّرجة القصوى واختيار نمط الحدود الخارجيّة (Outline mode (Ctrl+Y, CMD. تأكد أن الشعار متوازنكما هو الحال مع أي تصميم جرافيكي، يجب عليك أن تسعى إلى التوازن في التصميم وذلك بواسطة استخدام البنية المناسبة، إذ يجب أن تكون الشعارات المؤلفة من عنصرين أو أكثر متناغمة ومتناسقة، وأفضل الطرق التي يمكن اعتمادها هي الاستفادة من بعض الرّياضيات البسيطة، أو ترتيب الأشياء على خط واحد بكل بساطة. كان بالإمكان تحجيم عناصر الشّعار ووضعها بجانب بعضها البعض بصورة عشوائية، ولكن توخيا للتناغم والتناسق رسمت بعض الدلائل التي أحاطت بحواف وزوايا كل عنصر رئيسي في التّصميم، فتكونت لدي شبكة يمكن استخدامها في ضبط موضع النّص، وقد استفدت من ذلك في التأكد من أن خطوط الشّعار تنساب بصورة جيّدة نحو النّص. يعادل ارتفاع النّص ثلث ارتفاع الشّكل، والمسافة الفاصلة بين النّص والشّعار مساوية للمسافة بين نقطتين ضمن المساحة الداخليّة للشّعار. هل تستخدم المؤثرات في الشعار؟يحب البعض الشّعارات الشفافة أو ذات الألوان المتدرّجة، ويفضل البعض الآخر مبدأ العودة إلى الأساسيات ولا يرغب بوجود تلك الأمور البراقة في الشعار. أعتقد - شخصيًّا - أنه غالبا ما يمكن للشّعار أن يستفيد من هذه المؤثرات إذا كانت الطريقة التي سيستخدم بها تسمح بذلك. فإذا كان الهدف من الشّعار عرضه على الشّاشات على سبيل المثال، فإن وجود تدرج لوني هنا أو هناك قد يكون مفيدًا في إضافة بعض من العمق إلى التصميم ونقله إلى مستوى أعلى من الوضوح والبروز. وحتى لو كان الهدف من الشعار استخدامه في مستندات مطبوعة، فإن الطّبعات المتوفرة في يومنا هذا قادرة على إعادة إنتاج جميع التأثيرات التي تظهر على الشاشات بواسطة الحبر. ولكن يجدر بك التأكد من أن الشّعار سيبدو واضحاً بدون تلك المؤثّرات، أو عند تلوينه بلون واحد فقط، وذلك لضمان تعدد الاستخدامات. قررت إضافة تدرج لوني إضافي إلى شعار Media Stack وذلك لإبراز تأثير البُعد الثالث عليه، وهذا يجعل فكرة كدس العناصر فوق بعضها البعض أكثر وضوحًا. ستكون النّسخة ذات الألوان الكاملة النّسخة الرئيسة التي ستعرض على الشّاشة أو ستستخدم على أيّ مطبوعة ذات ألوان كاملة، وهناك نسخة أخرى بألوان مسطّحة خالية من التّأثيرات وهي مثاليّة للأحجام الصغيرة، أو للطّباعة بألوان محدّدة. الشعار الجيد يبدو جيدا في لون واحدتُعدّ صفة تعدد الاستخدام خير دليل على جودة الشّعار، فمن المفترض أن يتكيّف الشّعار مع جميع الحالات، وإحدى تلك الحالات هي استخدام الشّعار بلون واحد فقط. إذا كان الشّعار الذي تصمّمه معتمدًا بشكل كبير على الألوان والتّأثيرات التي تكون مظهره، فإنه سيكون شعارًا محدودًا في أرض الواقع. فكر في الكيفية التي سيظهر بها التصميم إذا ما استُخدِم كمُلصَق سيتم قصّه من البلاستيك، أو الطريقة التي سيُنقش بها على مُنتج ما. يتميّز الشّعار أحاديّ اللون بإمكانية عكس ذلك اللون ليتلائم مع جميع الخلفيّات، إضافة إلى إمكانيّة استخدامه فوتوغرافيًّا. صمّمت نسخة ذات لون واحد من شعار Media Stack إضافة إلى النسخة ذات الألوان الكاملة والنسخة ذات الألوان المسطّحة، وباستخدام بعض الخطوط الإضافية تمكنت من المحافظة على التأثير الذي أنتجته الألوان، أي أنّ الشعار قد حافظ على هيئته البصرية المتمثلة بالعناصر الثلاثة المنفصلة، على الرّغم من استخدام لون واحد في تكوينه. استخدم سيكولوجية الألوان في تصميمكيعد اللّون واحدًا من أهم مكونات عمليّة تصميم الشعارات والعلامات التجارية، إذ يتكون لدى الناس شعور أو فكرة معينة حول التصميم بمجرد النظر إلى ألوانه، لذا فمن الضروري أن يكون اختيارك لألوان التصميم اختيارًا حكيمًا. عند تحديد الألوان التي ستوظفها في تصميم الشّعار، فكر في الألوان التي ترتبط بالرسالة والقيمة التي تحاول إبرازها بواسطة التصميم. بعض الألوان ستساعد على تقوية هذه الرّسالة، وقد تعمل مجموعة معيّنة من الألوان بصورة أفضل من مجموعة أخرى، وهنا يأتي دور معرفتك بنظريّة الألوان. قد يبدو مزيجًا مؤلفا من ألوان معينة براقا وصارخا، وقد يبدو البعض الآخر باهتًا وداكنًا، لذا قد تكون مجموعة من الألوان ملائمة لتصميمك بشكل كبير، وقد تؤدّي مجموعة أخرى إلى إفساده. اخترت اللون الأزرق لشعار Media Stack، وذلك لأنه وبالإضافة إلى كونه لونًا جميلًا، فإنه يرمز إلى الثقة والتفاني، ما يجعله اللون الأكثر شيوعًا في مجال الأعمال. إذا لم يُطلب منك إعادة تصميم الشّعار من نقطة الصّفر، فمن الأفضل أن لا تغير اللون المستخدم في الشعار القديم، إذ أنه عنصر مهم في التعرف على الهويّة التجاريّة. تخيل فقط أن تغير شركة كوكاكولا لون العلب إلى الأزرق. هل تحتاج إلى إنشاء دليل للهوية التجارية؟يمكن تشبيه دليل الهويّة التجارية بدليل الاستخدام لشعارك الذي انتهيت من تصميمه أخيرًا، فهو يُرشد الزّبون إلى الطريقة المثلى في استخدام الشّعار. على سبيل المثال، قد يتضمن الدليل تفاصيل حول الحد الأدنى لأبعاد الشعار والتي في حال تجاوزها يصبح الشعار فاقدًا للوضوح، كذلك يمكن إرشاد الزبون إلى النُّسخ التي يجب استخدامها على الخلفيات الداكنة، ومتى يكون استخدام الشّعار ذي اللون الواحد مفضلا. كذلك يجب أن يتضمن الدليل قسمًا خاصا توضح فيه أنه لا يجوز ضغط، مط أو تغيير ألوان الشعار، وقد يتضمن الدليل كذلك تفاصيل عن الألوان المستخدمة في الشعار بصيغ Hex, RGB, CMYK و Pantone والخطوط المستخدمة في التصميم. بعض المعلومات الضرورية التي ستساعد على استخدام شعار Media Stack بصورة صحيحة في جميع وثائق الشّركة، وتتضمن هذه المعلومات عرضا لمجموعات الألوان الزرقاء والرمادية المستخدمة، وخط News Gothic المستخدم في الشّعار. من المفيد كذلك حماية التّصميم من خلال توضيح الطرق التي يمكن أن يستخدم بها والطرق التي يجب تجنّبها. قد تبدو هذه الأمثلة واضحة لنا نحن معاشر المصمّمين، ولكننا نعرف ما قد يحصل لأبنائنا عندما يضع الزّبائن أيديهم عليهم. ترجمة -وبتصرّف- للمقال A Guide to Creating Professional Quality Logo Designs لصاحبه Chris Spooner. حقوق الصورة البارزة: Designed by Freepik.

سنتعلم في هذا الدرس كيفية تصميم موقع بطريقة Parallax Scrolling من الصفر حتى النهاية، وذلك باستعمال برنامج Photoshop. في درسنا هذ سيكون القالب بخصوص وكالة مختصة في الويب (Web Agency). وهذه هي النتيجة النهائية: قبل البدء أدعوكم لتحميل هذه الحزمة. نفتح مشروع جديد على Photoshop بالإعدادات التالية: 1800x4850pixelsResolution 720DpiColor Mode RVB8bitللحصول على الدقة أثناء التحويل من PSD على HTML علينا استعمال الأسطر الدلالية (Guides Lines) ليسهل التعامل بـ CSS. نضيف العلامات الافقية الذهاب إلى: Menu > View > New Guide نختار Horizontal ثم ندخل القيم التالية: 59px ،651px ،1431px ،2237px ،2613px ،3154px ،3939px ،4767px نبدأ بالقائمة في الأعلى – يسمى الجزء العلوي: header-. نأخذ أداة النص (T) ونكتب مختلف عناصر القائمة باستعمال "Open sans" كنوع للخط و13pt في حجمه (تجده في حزمة هذا الدرس). بعدة ذلك اجلب أيقونة الموقع خاصتك، في هذا الدرس سنستعمل كلمة Awesome Agency ملونة باللون الأزرق 00b3e3#. الآن نضيف للمشروع صورة من الحجم الكبير بين العلامتين الأولى والثانية. نضيف مستطيل أسود اللون باستعمال أداة الشكل الرباعي (U). نخفض قيمة الشفافية الخاصة بالمربع إلى قيمة %71. بعد ذلك نرسم مستطيل آخر بمحتوى شفاف وإطار باللون # 617b9b. ننشئ طبقة جديدة New Layer بالضغط على Ctr+Shift+N، وبأداة القلم (P) بقيمة 1px في عرض الخط، نرسم زوايا كما تبين الصورة-للحصول على خط مستقسم يكفي النقر بالفأرة في مكان بدأ الخط ثم في مكان نهاية الخط مع النقر على زر Shift في لوحة المفاتيح وبهذا يرسم خط مستقسم الشكل بين النقطتين -: ثم نرسم مستطيل أبيض اللون كهذا. نطبق عليه – المستطيل الأبيض-Filter Motion Blur وذلك بالذهاب إلى: Menu > Filter > Blur > Motion Blur نرسم مستطيل آخر ونطبق عليه نفس الفلتر، ثم نرسم دوائر بأداة الدائرة Ellipse Tool (U) للحصول على الشكل التالي: أضف الآن النص الخاص بك (النص المستعمل في الدرس مجرد مثال بسيط، والذي سيعوض بمحتوى في HTML) بالنسبة الجزء الثالث، اجلب الأيقونات المحملة في الحزمة أول الدرس كما تبين الصورة: بالطريقة ذاتها أضف النص الخاص بك باستعمال نفس الخط «Open Sans» -ينصح الويب عدم استعمال كثرة الخطوط لتفادي بطء الخوادم Servers- نمر للجزء الرابع، نأخذ أداة المستطيل ونرسم مستطيل أزرق اللون # 32bcef باتباع العلامات -Guides-. بعد ذلك نتجه إلى خصائص الدمج Blending Options: ثم نرسم مستطيل آخر بشعاع ذو قيمة 5px ولون أزرق غامق #0c1a2d. أضف أيقونة الموقع أو أي شيء تريد، في الدرس أضفنا نفس الأيقونة السابقة وشكل المتجاوب للموقع. ثم نضي فنص رمادي فاتح وغامق للعناوين كما تبين الصورة. سنصمم الآن معرض للأعمال-Portfolio – المندرج في صفحتنا هاته، أضف الصور الخاصة بك. أرسم على صورة معية مستطيل أزرق #32bcef . بعد ذلك نرسم مستطيل آخر أبيض اللون بنفس مقاس الصورة، ثم نخفض قيمة الشفافية -opacity-خاصته إلى قيمة 65% . وللانتهاء من هذا الجزء، أضف نصا كما في الصورة: في الجزء الخامس، وبنفس الطريقة نرسم مستطيل أبيض اللون بإطار رماديcacaca #. دائما بأداة الشكل المربع نرسم في الأسفل مستطيل أزرق اللون #36caf4. بعد ذلك نتجه إلى خصائص الدمج Blending Options: نغير من طول المستطيل الأزرق حتى يتناسب مع طول المستطيل الأبيض: أضف أيقونات المواقع الاجتماعية: بعد ذلك أضف النص الخاص بك وصورة –في هذا المثال وضعنا صور العاملين في وكالتنا-: بنفس الطريقة نضيف مستطيلات ونصوص أخرى حتى نتوصل إلى النتيجة المحصل عليها: الآن، قم بجلب صورة وضعها في الأسفل –هذا الجزء من الصفحة يسمى ب footer – ونطبق عليه نفس خطوات الجزء الثاني للحصول على صورة ذات إضاءة خفيفة. ونضيف بعض الكلمات وبعض الأيقونات بالشكل التالي: لرسم استمارة -Form-للتواصل بالموقع نرسم أربع مستطيلات بمحتوى شفاف وإطار أبيض ذو عرض 1-2 pixels: ثم نضيف مربع أزرق #3ec1f1 ذو زوايا دائرية مع بعض الكلمات التي تشير إلى الحقول وزر الإرسال: وفي الأخير نضيق في الأسف مستطيل باللون #1e1e1e، بغرض الصفحة يحتوي على نص وأيقونة تشير لحقوق الملكية. لنحصل في الأخير على الصورة النهائية: ترجمة -وبتصرّف- للمقال: Tutoriel comment faire un Design Responsive en Parallaxe Scrolling.