الموت للهيكل السلكي. مباشرة إلى دقة عالية!

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

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

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

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

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

المشكلة مع Wireframes

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

دعونا نلقي نظرة على عملية التصميم للحصول على أمثلة عندما يكون تصميم الإطار السلكي بمثابة عنق زجاجة:

السبب 1: العملاء لا يفهمون ما يبحثون عنه

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

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

المشكلة هي أن الإطارات السلكية مجردة للغاية.

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

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

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

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

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

السبب 2: إنها ليست مناسبة دائمًا لاختبار المستخدم

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

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

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

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

في بعض الأحيان ، يكون من الأفضل اختبار كل هذه الأشياء معًا بشكل كلي.

مثال على ذلك: منتج أو خدمة متعددة اللغات. قد تحتوي اللغات على قواعد نحوية وأبجدية وعرض أحرف مختلفة يمكن أن تؤثر على التصميم العام.

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

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

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

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

السبب 3: جعلوا الحياة جحيماً للمطورين وضمان الجودة

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

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

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

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

لماذا لا نمنح المطورين مستندًا دقيقًا واحدًا يتضمن كل شيء؟ سيقدر معظم العملاء أيضًا نسخة لاستخدامها كمرجع كامل للعمل.

الحل: تخطي Wireframes

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

قد تفكر في تخطي مرحلة الإطار السلكي إذا كان أي منها صحيحًا:

هناك مواد مرجعية صلبة في المكان.

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

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

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

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

لقد قمت بجدولة الكثير من النماذج الأولية المتكررة والاختبار على طول الطريق.

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

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

المشاركون في الاختبار الخاص بك حرفيون للغاية.

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

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

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

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

عميلك لديه وقت و / أو ميزانية محدودة.

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

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

كيف تقتل مرحلة الهيكل السلكي

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

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

الخطوة 1: ابدأ بعملية البحث والاكتشاف المعتادة.

المقابلات والملاحظات الميدانية والبحث المكتبي والتحليلات التنافسية - مهما كان ما تفعله عادة (أو حددت موعدًا للقيام به) ، أكمل هذه المرحلة كما تفعل عادةً.

الخطوة 2: ارسم قليلاً على طول الطريق.

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

الخطوة 3: قم بإعداد مستندك عالي الدقة

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

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

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

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

الخطوة 4: ابدأ التصميم.

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

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

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

الخطوة الخامسة: معرفة متى تتوقف عن التصميم.

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

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

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

الخطوة 6: استمتع بملاحظات ونتائج اختبار عالية الجودة.

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

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

تغليف

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

ومع ذلك ، في الحالات الصحيحة ، يمكن أن يؤدي الانتقال مباشرة إلى الدقة العالية إلى تحسين عمليتك:

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

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

• • •

مزيد من القراءة على مدونة Toptal Design:

• تجربة مستخدم التجارة الإلكترونية - نظرة عامة على أفضل الممارسات (باستخدام مخطط المعلومات الرسومي)
• أهمية التصميم المتمحور حول الإنسان في تصميم المنتج
• أفضل مجموعات مصممي UX - أمثلة ودراسات حالة ملهمة
• مبادئ ارشادية للواجهات المتنقلة
• التصميم التوقعي: كيفية إنشاء تجارب مستخدم سحرية