26 خطوات لتصميم المنتج المثالي
على مدى السنوات الأربع الماضية ، كنت أقوم بتصميم لوحات المعلومات والتطبيقات ، وتعلمت كيفية التعامل مع الأقسام المختلفة ، والاستفادة من معارفهم لجعل تصميم المنتج أكثر كفاءة.
اليوم ، سوف أشارك جميع الخطوات التي قمت ببنائها في روتين يومي ، وأعتقد أنني جعلتني أفضل مصمم.
قبل العملية
1. الحصول على أكبر قدر ممكن من المعلومات (اسأل عن ثلاثة أمثلة)
بالنسبة لي ، لا شيء يوفر المزيد من الوضوح من رؤية مثال عملي حقيقي. عندما أعمل مع عميل جديد ، أو على صفحة هبوط جديدة تمامًا لأحد المنتجات ، أجد أن نقطة البداية الأسهل هي مطالبة العميل بتقديم ثلاث أو أربع صفحات ملهمة ، لأن ذلك يساعد الطرفين بالفعل. إن منح العميل فرصة لوضع الأفكار على الطاولة يمنحك فرصة لفهم ما يعجبه بسهولة وما يتوقعه من التصميم النهائي.
إذا كنت تعمل مع فرق متعددة ، فينبغي أن تهدف إلى قضاء الكثير من الوقت مع المطورين على المنتج كما تفعل مع زملائك في التصميم. ما تعلمته هو أن المفتاح لاتخاذ قرار تصميم فعال هو التأكد من التحدث مع فريق التطوير بقدر ما تستطيع. في حالتي ، كانت هناك حالات تم العثور فيها على حل لمشكلة ، والتي لم أتمكن من الخروج بنفسي.
الهدف هو القضاء على أكبر عدد ممكن من الأسئلة قبل الانتقال إلى التطوير.
2. تعرف على personas
في البداية ، يجب أن أقول إنني كنت متشككًا بشأن شخصيات ، لكن الآن الأمر كله منطقي بالنسبة لي.
لذلك في تناقض تام مع عمليتي القديمة ، يمكنني أن أرى كيف أن الأفراد مهمون للغاية أثناء العمل على ميزات المنتج ، خاصة عندما يكون للحل العديد من حالات الحواف المختلفة. يساعدك على فهم من الذي تصمم له حقًا. أهدف إلى الحصول على حوالي أربعة إلى خمسة أشخاص.
3. قم بإعداد أهداف دقيقة - ما الذي يجب أن نتتبعه بالضبط؟
أعتقد أن معظم المصممين / العملاء يتجاهلون هذه الخطوة ، لكن أحد أهم جوانب التصميم لكلا الطرفين هو فهم أهداف المنتج الذي تقوم بتصميمه. نميل إلى القفز مباشرة إلى وحدات البكسل وسرعان ما يبرز واجهة المستخدم للمشروع. إذا كان موقع ويب جديد تمامًا ، أو ميزة جديدة ، تأكد من تحديد أهداف واضحة لما تريد تحقيقه أولاً.
نظرًا لأن كل شيء يمكن تتبعه ، تحدث عن النقاط الدقيقة التي ستتبعها. على سبيل المثال ، يمكن أن تتراوح هذه من الاشتراكات الجديدة ، إلى عدد من العملاء الذين يستخدمون Paypal مقابل عمليات الشراء باستخدام بطاقات الائتمان. تأكد دائمًا من أنك تعرف مدى التقدم الذي تسعى إليه في البداية!
(ستحتاج إلى هذا على أي حال لإعداد مسارات التحويل على Mixpanel لاحقًا في هذه العملية.)
4. قم بإعداد مجلد للمشروع وابدأ في إنشاء لوحة moodboard
هناك الكثير من المواقع للإلهام - Dribbble ، Behance ، Pttrns من السهل حقا العثور على مشاريع مماثلة لتلك التي تعمل عليها. بالإضافة إلى ذلك ، قد يكون هناك بالفعل حل لمشكلة تواجهك وتحاول حلها.
عندما أبدأ العمل في مشروع جديد ، أقوم دائمًا بإعداد مجلد يحتوي على مجلدات باسم - Source Files و Screens & Export و Inspiration & Resources . أقوم بحفظ كل شيء أجده على الإنترنت في مجلد Inspiration حتى أتمكن من استخدامه لاحقًا لإنشاء لوحات moodboards أساسية. يمكن تعبئة هذا المجلد بأي شيء من المكونات الإضافية أو الحوامل أو حتى دراسات الحالة الكاملة من Behance.
الذهاب منخفضة الإخلاص
5. السبورة
إذا أردنا إضافة ميزة جديدة أو إعادة تصميم عملية ما ، فإننا نجلس ويبدأ الجميع في الاجتماع في رسم الأفكار على السبورة أو الورق أو حتى جهاز iPad. يسمح لنا هذا الإجراء بوضع الجميع في الفريق في وضع المصمم. في وقت لاحق ، ننتهي بخيارين للتصميم لمعرفة أيهما الأفضل.
نحاول دائمًا تجربة التجربة بأكملها ومناقشة معظم حالات الحافة أثناء هذا الجزء من العملية. من المهم حقاً أن نتناولها الآن بدلاً من مرحلة التصميم ، أو حتى أسوأ من ذلك ، أثناء الجزء الخاص بالتطوير. هذا عندما يفقد الكثير من الوقت والطاقة.
6. قم بتخطيط جميع شاشاتك (ما هي البيانات التي يحتاجها المستخدم لإدخالها)
هذا هو الوقت المناسب لتجاوز لوحة المعلومات وإدراج جميع مدخلات المستخدم وقصصه. اكتب ما يجب على المستخدم إدخاله في شاشة معينة وكيف يمكن للمستخدم تحقيق الأهداف المرجوة منه.
7. اكتب جميع الحالات الممكنة
نظرًا لأن جميع لوحات التحكم أو التطبيقات أو نماذج مواقع الويب لها حالات مختلفة ، فهذه خطوة أخرى مهمة يجب ألا تنسى.
أثناء التصميم ، نحتاج إلى التأكد من معالجتها جميعًا. من الجميل أن يكون لديك رسومًا بيانية لامعة وصورًا رائعة في ملفات Sketch أو ملفات PSD. ومع ذلك ، على الأرجح ، سيرى المستخدمون الجانب الآخر من تطبيقك. خصوصا عندما يأتون لمنتجك. من الضروري أن تكون مستعدًا. فيما يلي مثال على كيفية تعاملنا مع الحالات الفارغة في أحد مكونات البيانات الخاصة بنا.
8. قم بإعداد الرسم التخطيطي الأول الخاص بك
كل هذا يؤدي إلى الجزء الأخير من انخفاض الدقة. بفضل نتيجة مهمة السبورة ، أصبحنا نعرف الآن جميع الحالات الممكنة ، ومدخلات وأهداف المستخدم. لتلخيص جميع التفاعلات ، أقوم بإنشاء رسم بياني ولأكون صادقًا لقد غيرت أسلوب القيام بهذا عدة مرات: الانتقال من ملفات Sketch ذات التخطيطات المنقطة إلى مجرد مستطيلات ترمز لكل صفحة بأسمائها أدناه. ومع ذلك ، فإن العملية كانت دائمًا مؤلمة ، وعادةً ما ينتهي بي الأمر في حالة نريد تغييرها أو إضافة شيء ما لاحقًا في هذه العملية. مع هذه الحلول ، عادة ما أجبر على القيام بالعديد من الخطوات ؛ مثل تغيير أوضاع الخطوط والأسهم والصور.
مؤخرا كنت أستخدم Camunda Modeler ، وهي ليست أداة تصميم بالضبط ؛ انها التطبيق بسيط لإنشاء الرسوم البيانية الفنية. الذي يبدو غريبا ، ولكن تم تطوير هذا التطبيق لمساعدتك في بناء الرسوم البيانية الأساسية. الأهم من ذلك أن كل شيء تم إنشاؤه قابل للتوسع بشكل كامل. يمكنك بسهولة سحب وإسقاط أي نقطة وستقوم بإنشاء خطوط وسهام تلقائيًا. يمكنك أيضًا الاختيار من بين أنواع مختلفة من النقاط التي يمكن أن تكون مفيدة لإبراز متى ، على سبيل المثال ، يتلقى المستخدم رسالة إلكترونية من Intercom. تصدر Camunda إلى SVG مما يجعل من السهل تتبع النقاط التي يمكن تتبعها في Sketch.
تصميم العمل
9. مزاج
أتمكن من البدء في إنشاء لوحة المزاج ، حيث أقوم بجمع كل الصور إلى مجلد Inspiration الخاص بي. أستخدم لوحات المزاج أساسًا لمناقشة أفكاري مع الزملاء ووصف بعض الأفكار المرئية ، قبل البدء بعملية البكسل.
10. المسودة الأولى
التصميم دائمًا عملية مستمرة. سوف تتكرر كثيرًا في طريقك إلى نتيجة رائعة. مع المسودة الأولى هي أيضا طريقة لجمع ردود الفعل. لا يتعين عليك الوصول إلى تصميم مثالي من أجل البدء في تلقي التعليقات من زملائك في الفريق أو العملاء أو المستخدمين المحتملين. للحصول على أفكارهم الأولى ولبدء مناقشة ، أقوم عادة بخلط الشاشات من تصميماتنا الحالية. هذا يسمح لنا بالبدء في اللعب مع تصاميم حقيقية في أقل من يوم. يمكنك إجراء أول نموذج أولي بسيط لاختبار ما إذا كانت الأشياء ترتبط ببعضها البعض بشكل جيد.
11. اكتب نسختك
تعد النسخة أحد الجوانب الرئيسية لقرارات المستخدمين ، وأعتبرها جزءًا مهمًا من التصميم. لا يوجد شيء أسوأ من التصميم الجميل مع مربعات الحوار المربكة حيث يكافح المستخدمون للعثور على الخطوة التالية.
12. اختبار المتدرب الأول
باستخدام المسودة الأولى ، يمكنك إنشاء نموذج أولي بسرعة في أعجوبة أو إنفجن . هذا شيء بدأت في القيام به مؤخرًا واتضح أنه جانب آخر رائع. مع النموذج الأولي يمكنك الآن بسهولة إجراء مكالمة مع 3 أو 4 أشخاص من فريقك ومشاركة رابط النموذج الأولي معهم ومحاولة طرح بعض الأسئلة أثناء اختبارها على تدفقات / سيناريوهات معينة.
وبهذه الطريقة يمكنك بسهولة اختبار مهارات طرح الأسئلة الخاصة بك واختبار قرارات التصميم الخاصة بك على المستخدمين الحقيقيين دون القلق بشأن الموارد والوقت الضائع. أميل إلى اختيار الأشخاص الذين لا يشاركون كثيرًا في تطوير لوحة المعلومات. حاول أيضًا تجنب مشاهدة شخص لديه بالفعل فرصة للعب بالنموذج الأولي من قبل.
13. الاتيكيت
نحن جميعا نعرف كم هو صعب للبقاء مرتبة. كيفية تقديم ميزة أخرى. هذا عادة ما يؤدي إلى ملفات Sketch أو PSD الفوضى. تعلمت الكثير عن الاختلافات بين العمل كمصمم واحد في شركة ناشئة ، أو العمل في فرق ، أو العمل على المنتجات الرقمية الخاصة بي.
عندما تعمل في فريق ، ففكر في PSD كما لو كنت تنشئها لشخص آخر. أنا استخدم القاعدة التي إذا كان لديك أكثر من 8 طبقات في مجلد ، فعليك إنشاء واحدة جديدة.
لقد عثرت على أحد المكوّنات الإضافية الرائعة لـ Sketch ، والتي أنقذتني ساعات أثناء عملي في مجموعات أدوات واجهة المستخدم: إعادة تسمية ذلك .
نصيحة: ضع كل شيء على اللوحة. لقد كافحت دائمًا في تصميم رؤوس لطيفة بينما كانت بقية اللوحة بيضاء اللون. أثناء تصميمها تعلمت وضع المحتوى بالكامل أولاً - ما عليك سوى اللعب بالتخطيط والطباعة. من الأسهل تصميم التفاصيل الجميلة واللعب بالمفهوم بالكامل مع المحتوى في مكانه.
14. إنشاء عناصر واجهة المستخدم والبدء في اللعب مع ليغو
ربما أتأخر عن الحفلة ، وسيبدو ذلك عفا عليه الزمن بينما أكتبه. السبب في أننا لم نقم بأي عمل من إطارات الأسلاك في الرحلة هنا بسيط. يأتي المخطط 39 مع شيء وجدته لا يصدق وهو "أشكال ذات خصائص تغيير الحجم". هذا شيء يجعل التصميم سهلًا للجميع على الفريق. ملف Sketch الخاص بنا عبارة عن سحب وإفلات خالصين الآن. يمكنك بسهولة إعطاء أي من زملائك في الفريق لوحة بيضاء ، ويمكنهم إنشاء مسودات عالية الدقة تقريبًا. وبفضل هذا ، فإننا قادرون على تخطي جميع أدوات wireframing والبدء ببكسلات تبدو حقيقية تقريبًا.
كما يترافق هذا مع كوننا قادرين على تحويل الأطر الفعلية إلى تصاميم حقيقية. أي PM يمكن أن يخلق إطارًا سلكيًا ثم يمكنني بسهولة توليه وتحويله إلى الإخلاص.
الأصول والتسليم
عندما تنتهي من التصميم والتكرار استنادًا إلى أول رد فعل لم تنته بعد. الآن حان الوقت لتسليم التصميمات الخاصة بك إلى المهندسين / ديس الخاص بك.
15. المواصفات
يتمثل أحد أهدافي الرئيسية في أن أتمكن دائمًا من نقل قراراتي مع الفريق وأن أكون قادراً على تقليل الصعوبات التي يواجهها مطورو البرامج لدينا قدر المستطاع من أجل تزويدهم بأفضل الموارد الممكنة. هذا بالنسبة لي هو بالتأكيد الجزء الأكثر أهمية في عملي كمصمم.
نظرًا لأننا وثقنا جميع التفاعلات وجعلنا كل شيء جاهزًا منذ بداية العملية ، فإن إنشاء المواصفات هو جزء من الكعكة. أميل إلى كتابة المواصفات في محرّر مستندات Google أو أسفل الشاشات في ملفات Sketch. من الجيد التعامل مع تصميماتك مع شرح كل الميزات حتى يتمكن أي شخص من انتزاع ملفك في المستقبل.
16. الرسم التخطيطي
هذه التقنية لطيفة لطباعة التصاميم ومناقشتها مع الفريق. لكن في الوقت الحاضر أعتقد أن هناك خيارات أفضل. مثل استعداد النموذج الأولي النهائي.
17. النموذج النهائي
أحد الأشياء الرئيسية بالنسبة لي هو أن يكون كل التفاعل جاهزًا دائمًا في النموذج الأولي. وعادةً ما ينتهي الأمر بامتلاك 3-5 نماذج أولية في الطريق إلى المرحلة النهائية لهذه الجلسة الصغيرة مع زملائي أو لإظهار بعض التدفقات الخاصة. أميل إلى إعداد جميع الولايات في Sketch في لوحة فنية واحدة ثم تكرار اللوحات الفنية بحيث تكون كل حالة جاهزة عند التصدير.
من الرائع إضافة تعليقات إلى أجزاء من تصميماتك لتوسيع مواصفاتك أكثر من ذلك بكثير حتى أنه بإمكان مؤلف الإعلانات الذهاب بسهولة والتحقق من البكسلات الحقيقية والتدفقات إذا كان كل نسخة ومربع حوار يعمل كما هو مطلوب.
18. Quicktime الفيديو> ملاحظات
عندما لا أقوم بعرض أي شيء على Hangout للفريق أو لأحد العملاء ، فأنا أرسل فيديو لمشاركة شاشة من خلال النموذج الأولي وشرح كل ما صممه. إنه تأكيد جيد لي قبل أي عرض تقديمي أعرف الإجابة على أي سؤال وتفاعلات خيالية محتملة قررت تصميمها. يمكن أن تستخدم أيضا بشكل جيد عند العمل في فرق بعيدة. كل شخص لديه حق الوصول إلى تكرار التفاعل كله التفكير في أي وقت.
19. تحريك
كما لمسة نهائية جميلة يمكنك استخدامها بعد المؤثرات أو المبدأ . من الجيد أن تشرح كيف تريد أن يتحرك هذا أو ذاك.
20. Styleguide
نقطة أخرى مهمة للمهندسين هي معرفة كيف ستتفاعل الأشياء في سيناريوهات مختلفة. فكر في حالات الخطأ الخاصة بالإدخال أو مكان إظهار رسائل الخطأ. وبالمثل كيف ستبدو حالة تعطيل زر إرسال ، أين تضع الدوار
من السهل جدًا على المهندسين أن ينتقلوا من خلال لوحة رسم الرموز وعناصر النمط الواحد تلو الآخر حتى يبدأوا في ترميز جميع الشاشات بفضل وجود ملف Sketch كمقاطع Lego.
الاختبار النهائي
وبما أننا انتهينا من تسليم تصاميمنا إلى المهندسين ، فنحن قادرون على التركيز على الجزء الأخير من العملية - اختبار قراراتنا!
21. منفذ / HotJar
بعد أن يتم تحويل التصاميم إلى رمز عمل لا تنسى أن تقوم بتضمين الرمز الخاص بك Inspectlet أو HotJar مقتطفات JS. أنا متحمس دائمًا (أو محبطًا) لمعرفة كيفية تنقل المستخدمين من خلال لوحة التحكم أو ما يفعلونه في صفحة محفظتي. Inspectlet مذهل في التقاط كل جلسة المستخدم الخاصة بك. يعمل بشكل جيد لمشاريع أكبر كذلك.
تأتي مع تصفية "/ صفحة" سهلة تساعدك على مشاهدة جلسات ميزة أو تدفق معين.
22. Mixpanel
Mixpanel يعمل بشكل كبير من أجل التحقق من أهدافنا (تلك التي قمنا بإعدادها في بداية عمليةنا). يساعد Mixpanel على معرفة عدد المستخدمين الذين يكملون تدفقات معينة. عدد المستخدمين انخفض قبل إعداد الحساب. عدد الأشخاص الذين انتقلوا من الصفحة المقصودة الرئيسية إلى المتجر وإلى منتجنا الأكثر قيمة.
23. Google Analytics
لست قادرًا على ترميز الأشياء الكبيرة ، ولكن على الأقل أستطيع العمل مع ملفات CSS وبرمز بسيط. لقد كنت مهتمًا مؤخرًا بمعرفة المكان الذي ينقر فيه المستخدمون وأثناء النظر إلى Heatmaps Hotjar ، لذلك قررت إعداد متتبع النقرات الأساسي في Google Analytics أيضًا. يمكنك بسهولة تتبع كل نقرات المستخدم على موقع الويب الخاص بك كذلك.
هذا يساعدني على سهولة رسم سلوك المستخدم. على سبيل المثال ، اكتشفت أن الأشخاص يستخدمون التنقل العلوي على موقعي أكثر من 5 أضعاف عبر الرابط المميز في نص المقدمة. للأسف ، لا يحسب عدد النقرات من المستخدمين باستخدام AdBlock.
24. انتركم
عندما اتفقنا على تدفقاتنا الأولية كنا نتحدث عن جزء من التدفقات حيث يتلقى المستخدم رسالة بريد إلكتروني من الاتصال الداخلي . إن مسؤوليتنا هنا هي التأكد من أن جميع النسخ والرسالة نفسها منطقية ومفيدة بالفعل للزائر. تأكد من أن رسائلك الإلكترونية توجه المستخدم إلى نتيجة حريصك وتحاول دائمًا تقديم مقالات دعم محددة ومعلومات حول كيفية المتابعة في التدفق.
الكلمات القليلة الماضية
25. ترك وراءه Dribbble
من ما تعلمته وكيف تغيرت تصميمي على مدى 4 سنوات الماضية ، وصلت إلى نقطة حيث Dribbble ليس بالضرورة المكان الذي تريد إنشاء التصميمات الخاصة بك. لطالما هدفت إلى الحصول على بيكسلات جميلة مع صور ملف شخصي مثير ، ولكن هذا ليس ما يحتاجه المستخدمون الحقيقيون وسوف يستخدمونه.
في ما يلي مثال ، على اليسار سترى شيئًا صممه لـ Dribbble. على اليمين ، سترى شيئًا قمت بتصميمه عندما أمضيت بعض الوقت في مشاهدة الأشخاص الذين يقومون بتحرير ملفاتهم الشخصية وأدركوا أن رؤيتي لم تقدم ما يحتاجون إليه.
قد تحصل على 500 إعجاب كرسوم متحركة جنونية براقة للبطاطس أو البيتزا المنزلقة ، ولكن المهم هو أن المستخدمين سيجدون كيفية إدارة تكرار رسائل البريد الإلكتروني للشركة أو كيفية تصفية تحليلات أدائهم.
[- تم نشر هذه المقالة في الأصل على المتوسط ، إعادة نشرها مع إذن المؤلف. -]