دليل شامل لتصميم تجربة المستخدم

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

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

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

• إنشاء بعض مسارات المستخدم الواضحة التي تلبي احتياجات المستخدمين المختلفة من خلال تبني قصص المستخدمين والسيناريوهات ولوحة العمل ؛

• تطبيق بعض الدروس من عالم التفاعل بين الإنسان والحاسوب (HCI) بحيث نصمم مع وضع المبادئ الأولى في الاعتبار ؛ و

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

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

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

الحصول على الهيكل العظمي في المكان

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

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

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

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

اقض بعض الوقت مع المستخدمين ، وتعرف على احتياجاتهم ، وما الذي يحاولون تحقيقه ، فهذه هي "الوظائف التي يتعين عليهم القيام بها".

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

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

قصص المستخدم

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

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

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

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

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

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

• بصفته (شخصًا في دور معين) ،
• أريد أن (أقوم بعمل ما أو أجد شيئًا ما) ،
• بحيث (يمكنني تحقيق هدفي).

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

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

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

كطالب ، أريد الوصول إلى شرائح المحاضرات حتى أتمكن من الرجوع إليها عند المراجعة.

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

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

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

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

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

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

• في المستوى الأساسي ، يريد الطلاب الوصول إلى الشرائح.

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

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

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

تعيين تدفق التصميم الخاص بك

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

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

• إنها منخفضة التكلفة ، مما يسمح لك باستكشاف أفكار متعددة مع وجود عائق ضئيل للغاية للدخول ؛

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

• إنه سريع ، مما يتيح لك التكرار بسرعة من خلال أشكال متعددة للتدفق.

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

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

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

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

لإعادة صياغة جيسون سانتا ماريا:

لا يتعلق الرسم بكونك فنانًا جيدًا ، بل يتعلق بكونك مفكرًا جيدًا.

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

بقعة من العلم: قوانين UX

قد تكون تجربة المستخدم (UX) تخصصًا جديدًا نسبيًا ، لكنها مستوحاة من عقود من البحث في مجال التفاعل بين الإنسان والحاسوب (HCI).

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

تم تلخيص العديد من هذه المبادئ في شكل "قوانين" يمكننا الاستفادة منها ، على سبيل المثال:

• قانون هيك ، الذي يشدد على الحاجة لتقليل الخيارات لتخفيف العبء المعرفي والمساعدة في دفع عملية صنع القرار ؛

• قانون فيت ، الذي يقدم نصائح قيمة حول كيفية تسهيل التفاعلات من خلال التحديد الدقيق لحجم عناصر الواجهة وتحديد مواضعها ؛ و

• قانون ميلر ، الذي يؤكد على فوائد "التقسيم" لتسهيل المهام المعقدة .

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

موقع Jon Yablonski الممتاز ، Laws of UX ، عبارة عن مجموعة مفيدة من المبادئ ، والتي تستحق الإشارة إليها. ليس فقط قطعة جميلة من التصميم في حد ذاته ، ولكنه يوفر أيضًا نظرة عامة جيدة لكل مبدأ مصحوبًا بروابط لمزيد من القراءة.

قانون هيك

ينص قانون هيك (أو قانون هيك-هايمان بالكامل) على ما يلي:

يزداد الوقت المستغرق لاتخاذ القرار مع زيادة عدد الاختيارات وتعقيدها.

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

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

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

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

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

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

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

قانون فيت

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

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

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

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

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

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

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

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

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

قانون ميلر

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

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

• 07700984964

• 07700 984964

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

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

يمكننا تطبيق قانون ميلر على تصميم تجربة المستخدم بعدة طرق:

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

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

• قلل العبء المعرفي عن طريق الحد من عدد الخيارات المعروضة.

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

الشكل والمظهر: توصيل التصميم المرئي

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

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

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

• لوحات المزاج
• نمط البلاط
• صور مجمعة للعنصر

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

Moodboarding

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

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

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

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

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

صور مجمعة للعنصر

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

هناك عدد من الأدوات التي يمكنك استخدامها للقيام بذلك بما في ذلك Style Tiles و Element Collages. يتمتع كلاهما بنقاط قوتهما ، حيث يعملان في المقام الأول كمحفزات للانطلاق نحو الشكل والمظهر المكتمل.

كما تقول سامانثا وارين ، التي طورت منهجية Style Tiles:

تعد Style Tiles حافزًا للمناقشات حول تفضيلات العميل وأهدافه.

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

من واقع خبرتي ، يمكن أن يساء فهم Style Tiles من قبل العملاء الذين يعتقدون خطأً أنهم نماذج بالأحجام الطبيعية المرئية. أفضل نهجًا أكثر حرية وأقل يعتمد على القوالب ، وعندما اكتشفت نهج Dan Mall's Element Collage ، كنت مدمن مخدرات.

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

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

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

في الختام

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

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

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

باختصار ، لا تضيع في التفاصيل حتى تنتهي من رسم كل شيء.

واقترح ريدينج

هناك العديد من المنشورات الرائعة - غير المتصلة بالإنترنت أو عبر الإنترنت - والتي ستساعدك في مغامرتك. لقد قمت بتضمين القليل أدناه لبدء رحلتك.

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

• "قصص المستخدم" ، Mountain Goat Software
  يقدم هذا الدليل نصائح مفيدة حول تقسيم قصص المستخدم إلى سلسلة من القصص الصغيرة والمتصلة وإضافة "شروط الرضا" التي تستحق الدراسة.

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

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

• "Element Collages" دان مول
  هذا يستحق القراءة إذا كنت ترغب في اكتساب فهم لكيفية استخدام هذه الأدوات في خدمة مشاريع العملاء النموذجية.

هذه المقالة جزء من سلسلة تصميم UX التي ترعاها Adobe. تم تصميم Adobe XD لعملية تصميم UX سريعة وسلسة ، حيث يتيح لك الانتقال من الفكرة إلى النموذج الأولي بشكل أسرع. التصميم والنموذج الأولي والمشاركة - كل ذلك في تطبيق واحد. يمكنك الاطلاع على المزيد من المشاريع الملهمة التي تم إنشاؤها باستخدام Adobe XD على Behance ، وكذلك الاشتراك في النشرة الإخبارية لتصميم تجربة Adobe للبقاء محدثًا ومطلعًا على أحدث الاتجاهات والرؤى لتصميم UX / UI.