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

تقوم المعالجة المسبقة
بجمع أكبر قدر ممكن من المعلومات

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

التعرف على الحروف

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

السعي لتحقيق أهداف محددة

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

تحضير مجلد المشروع وعمل MooedBoard

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

السبورة منخفضة الدقة

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

جدولة الشاشة بأكملها (البيانات التي يجب على المستخدمين إدخالها)

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

تذكر كل الإشارات الممكنة

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

إعداد المخطط الأول

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

عمل/تصميم
لوحة المزاج

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

المسودة الأولى

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

نسخ الكتابة

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

اختبار المتدرب الأول

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

مراعاة النظام

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

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

إنشاء عناصر واجهة المستخدم وبدء اللعبة باستخدام LEGO

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

الأصول والعرض

بعد الانتهاء من التصميم والتكرار بناءً على الملاحظات الأولى، فإن عملك لم ينته بعد. حان الوقت الآن لتسليم تصميماتك إلى المهندسين/المطورين.

اذكر المواصفات

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

رسم بياني

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

النموذج النهائي

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

فيديوهات كويك تايم

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

تحريك

وكلمسة نهائية، يمكنك استخدام After Effects أو Principle لشرح كيفية إضافة أو إزالة ما تريد.

دليل الأسلوب  

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

الاختبار النهائي

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

إنسبيكتليت/هتجار

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

ميكسبانيل

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

تحليلات كوكل

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

الاتصال الداخلي

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

تخطي دريببل

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

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