برنامج تعليمي لسير عمل التصميم للمطورين: تقديم واجهة مستخدم / تجربة مستخدم أفضل في الوقت المحدد

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

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

ما الذي يمكنك ، كمطور UX ، القيام به لضمان تسليم المنتج الذي قمت بإنشائه في الوقت المناسب دون التضحية بجودة واجهة المستخدم وتجربة المستخدم؟

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

هل لديك كل ما تحتاجه؟

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

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

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

إذا كان لدى المطور كل ما يحتاجه أمامه ، فسيؤدي ذلك إلى تسريع العملية. PSD النظيف ليس كافيًا.

ما الذي تحتاجه لإنجاز المهمة بفعالية وكفاءة؟

هذه هي الأصول التي يجب أن يتوقعها المطور من المصمم لإحضار تصميم UI / UX إلى التنفيذ:

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

• الأصول - تأكد من حصول المطورين على جميع الأصول المطلوبة ، حيث لا ينبغي لمس ملفات المصدر بعد الآن.

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

• اصطلاح التسمية - اطلب بنية تسمية الملفات للحفاظ على تنظيم الأشياء. ستسهل على كلاكما التنقل في الملفات. (لا أحد يحب إخفاء الأشياء في مجلد الخلفية.)

• موارد HDPI - نحن نعيش في "أوقات عصيبة" ، مع كثافة هائلة للشاشات. تأكد من أن المصمم سيقوم بتسليم الصور بجميع درجات الدقة المطلوبة ، لذلك سيبدو تطبيقك متموجًا في كل مكان. ملاحظة: استخدم أكبر عدد ممكن من النواقل ؛ سيساعدك كثيرًا (svg).

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

أعمال جارية

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

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

UI / UX Design Project Management

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

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

فيما يلي بعض الاقتراحات لأداة إدارة المشروع:

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

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

تصميم وتطوير تجربة المستخدم يجتمعان معًا

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

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

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

ردود الفعل حلقة

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

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

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

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

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

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

• Skype (Hangouts) - يعد Voice أداة قوية حقًا للتعليقات. يمكنك طرح الأسئلة والإجابة عليها على الفور. ولكن ، تأكد من تدوين الملاحظات وإرسالها عبر رسالة المتابعة (البريد الإلكتروني) بعد المكالمة.

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

فيما يلي بعض الأدوات الرائعة:

تعليق توضيحي:

• https://redpen.io/
• http://collabshot.com/
• http://www.designdrop.io/

أدوات التعاون:

• http://www.invisionapp.com/
• https://basecamp.com/

خاتمة

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

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