قرأت فصل التحقق من جدوى الفكرة من كتاب مصنع المشاريع الريادية. و الآن، لديك فكرة افضل عن كيف يجب ان تكون ملامح موقعك أو تطبيقك. و انت فعلياً جاهز للتطوير. كيف تبدأ؟ هل تبدأ مباشرة بالتطوير أو هل هناك خطوة تسبقها؟
في نظري هناك خطوة تسبقها و هي مفيدة أكثر لمن ليس لديه فريق تطوير و تصميم و يستعين بجهات اخرى في التطوير و التصميم. و ستوفر عليك جهد، وقت و مال. و هذا من تجربة و مشاهدات شخصية في هذا الموضوع.
لديك الآن خزينة لا بأس بها من المعرفة و المعلومات المفيدة بعدما عملت المقابلات و صنعت و نفذت نماذج MVP لفكرتك (تحدثت عن MVP في كتاب مصنع المشاريع الريادية بإسهاب). و الآن لنتعلم طرق تصميم الحل، و هي الخطوة التي انصح بها قبل التطوير الفعلي للموقع أو التطبيق.
هناك عدة طرق لتصميم الحل. و درجة ارتباط من قابلت أو من تعتقد بأنهم سيكونون عملائك في التفاعل معك بالحل المصمم يعتمد على نوع الحل المصمم. لست مجبر على تنفيذ جميع هذه الانواع و لكن تجدر الإشارة أنه كلما كان الحل المصمم قريب من التصور النهائي للموقع أو التطبيق و تفاعلي. استطعت أن تحصل على معلومات أكثر من المستخدمين و فائدة أكبر. هذا لا يعني أن الطرق الأخرى لتصميم الحل غير مهمة. بل هي تعتمد على ماذا تريد أن تحقق. كل طريقة تساعدك في تعلم شيء محدد و قد يحدث قصور منها في تعلم أشياء أخرى. لذلك هناك عدة مراحل (إذا امكن أن نسميها هكذا) لتصميم الحل.
تصميم الخطوات (Diagrams)
إذا أردت أن تتصور الخطوات أو السيناريوهات المحتملة لإنجاز عمل محدد. مثل، الخطوات و السيناريوهات المختلفة للتسجيل في الخدمة أو شراء منتج و هكذا. قد ترغب بالاستعانة و عمل تصميم لتلك الخطوات.
ميزتها، أنها تساعدك في توقع تلك الخطوات أو السيناريوهات و الوقت اللازم لعملها و مدى تعقيد تلك الخطوات. بالإضافة لعدد الصفحات أو الواجهات التي عليك أن تصمم و مدى ترابطها مع بعض، و ماهي الخطوات التي يجب أن تطور أولاً و هكذا.
مشكلتها، أنك لا تستطيع عمل تصميم كامل فهذا سيستغرق وقت وجهد كبير إذا كان التطبيق أو الموقع معقد و يتضمن العديد من المميزات. لا تفيد في اختبار قابلية استخدام المنتج (Usability Testing). في الغالب عندما تصمم الخطوات، فأنت تعملها مع فريقك لذلك دور و تفاعل عملائك يكاد يكون معدوم.
سكتش (Sketch)
تحاول هنا أن ترسم (سكتش) لملامح المنتج و أين مكوناته ممكن أن تكون وعلاقتها مع بعضها البعض.
ميزتها، بسرعة يمكنك عمل عدة رسومات (سكتشات) خصوصا إذا استخدمت خدمات مخصصة لهذا العمل. أيضاً، تساعدك على تصور المنتج، الصفحات و مكوناتها مع بعضها البعض مما يشجع فتح النقاش بين افراد الفريق حول ترابط عناصر الحل مع بعض و هل حقاً ستحل مشكلة شريحة عملائك و ستساعدهم على انجاز العمل الذي تطرقوا له في المقابلات معك.
مشكلتها، ليست جيدة للحصول على معلومات من افراد السوق عن الحل و هل هو مفيد لهم أو لا. تنفذها و تعمل عليها مع فريقك من دون تفاعل مع عملائك.
تخطيط مفصل (Wireframe)
هنا تتضح ملامح التطبيق أو الموقع أكثر. فهناك الأزرار، القوائم، خانات الكتابة، نص على الأزرار و القوائم و التفاصيل أكثر وضوح. يمكنك استخدام عدة برامج لعملها.
ميزتها، قريبة جداً من الشكل النهائي للمنتج بحيث تستطيع أن تختبرها مع فئتك. مثل اختبار هل النص على الأزرار أو القوائم واضحه للمستخدم بحيث يعرفون ماذا تعني؟ ايضاً، هذه نقطة بداية جيدة لمن يعمل مع فريق لتطوير موقعه أو تطبيقه بحيث تشاركها معهم بدل الكتابة الطويلة التي تحاول ان تشرح بها ماذا تتخيل و ينتهي الحال بتطوير شيء لا يشبه ماذا تريد. انا شخصياً و آخرون نصحتهم، وجدناها جداً مفيدة و تختصر الكثير من الوقت عند البدء بالتطوير. لأن الجميع الآن على نفس الصفحة، خصوصاً فريق التطوير و التصميم الذي تستعين بهم.
مشكلتها، ليست تفاعلية بحيث تستطيع أن تعطي المستخدم رابط وتقول له أريد منك التسجيل الآن. لذلك عليك أن تعمل نموذج تفاعلي مبسط، وهو ما سأتحدث عنه لاحقاً.
نموذج تفاعلي (Interactive Prototype)
النموذج (سواء الصفحة أو التطبيق) تفاعلي بحيث المستخدم ينتقل من صفحة لأخرى حالما يضغط على زر. تستطيع تحقيق ذلك باستخدام خدمات مخصصة لعمل Prototyping للمواقع و التطبيقات.
ميزتها، تفاعلية بحيث تختبر قابلية استخدام الحل المصمم، هل التصميم التفاعلي عند اختباره ظهرت مشاكل مع المستخدمين الذين جربوا الخدمة؟ هل استطاعوا بسهولة فهم كيفية التسجيل؟ إضافة أو نشر شيء للخدمة؟ أيضا قد تختبر أكثر من طريقة لتقديم ميزة واحدة بسرعة و تشاهد أمامك كيف يتجاوب المستخدمين معها. مفيدة لمن يعمل مع فريق لتطوير موقعه أو تطبيقه بحيث تشاركها معهم. هذه تختلف عن السابقة، بأن الفريق يستطيع معرفة بطريقة تفاعلية كيف الصفحات و العناصر مترابطة مع بعض. أيضاً، يمكنهم معرفة الألوان التي تريد استخدامها لأن في الغالب في Wireframing يستخدم الابيض، الاسود و تدرجات الرمادي لإحداث نوع من البعد. من دون استخدام الالوان الاخرى.
مشكلتها، أنت. لأن هذه النماذج التفاعلية ممكن أن تكون معقدة و مفصلة. هذا قد يعني انك تأخذ وقت أكثر (أحياناً) في عمل نسخة مصممة بدل من تطوير نسخة مبسطة وتجربتها على الحقيقة. لذلك احرص على الموازنة.
انماط التصميم
قد يخطر ببالك أكثر من طريقة لتصميم مكونات الصفحة أو التطبيق من تقييمات، خانة تعليق، صفحة تسجيل و هكذا. تسمى هذه أنماط التصميم. هناك مواقع متخصصة لعرض الأنماط المختلفة للتصاميم مثل Patterntap و patterns-mobile وغيرها الكثير فقط ابحث في قووقل أو غيرها من محركات البحث عن ui design patterns.
صورة غلاف المقالة من عمل Gilberto Taccari
