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

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

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

مراحل تصميم الواجهات: ?

 

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

• افهم عميلك: ?

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

• التدفق والمخططات الهيكلية (Flows and Wireframes):  ?

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

الالتزام بإطار سلكي منخفض الدقة – Low fidelity وتدّرج الخطوط الرمادية والألوان العادية هي طريقة لعدم التشتت أثناء عملية التصميم ووضع التركيز الحقيقي على تجربة المستخدم. هذه العملية (أي عدم إعطاء الشكل النهائي للتصميم) تجعل المصمم يركز بعمله دون أن يتشتت بالتصاميم إذا ما كانت خاطئة أو ذات مظهر رديء.

• اختبار قابلية الاستخدام: ✔️

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

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

 

• لوحة مزج الأفكار ( Mood Boarding): ?

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

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

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

• الاستكشاف: ?

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

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

• التصميم النهائي: ?

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

• نماذج تصميم الواجهات الأولية وإعادة اختبار تجربة المستخدم: ?‍?

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

توفر هذه النماذج الأولية فكرة واضحة للمطورين عن كيفية تفاعل جميع العناصر والتحقق من الصلاحية user validation أثناء التنقل والشكل النهائي.

• نظام التصميم – Design System: ?️

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

• التحقق من صلاحية التصميم وتسليم المشروع: ?

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

 

هكذا يمكننا القول بأنك أنهيت تصميم منتجك الرقمي بكل سهولة اذا اتبعت هذه المراحل.

 

التعلم المستمر يفتح آفاق جديدة: ?

 

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

 

مراجع مهمة:

 

فيما يلي نضع بين يديك بعض المراجع لمساعدتك بالتعلم:

 

إرشادات الواجهة البشرية – Human Interface Guidelines:

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

ستجد فيها كافة المفاهيم الأساسية وأكثرها أهمية لتصميم الواجهات، ابتداء من الترشيحات وانتهاء بالسلوكيات.

 

كتاب ABOUT FACE النسخة الرابعة لـ Allan Cooper:

 

إذا كنت تريد التعمق في المجال، نقترح لك هذا الكتاب المليء بالمعلومات والفائدة. 

نصيحة:

إن كنت لا تملك وقتاً لقراءته يمكنك اختيار الأجزاء المهمة منه، مثلاً: كان الفصل الثالث مهماً لفهم الشخصيات – Personas فهو يشرح عن نمذجة المستخدمين -Modeling Users بقسمين الشخصيات والأهداف (Persona & goals).

 

Nielsen Norman Group

 

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

 

كتاب Master Interface Design

 

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

 

الخلاصة في الممارسة:

الكثير من التحديات ينتج عنه الكثير من الإبداع، لن تنجز مشروعك المميز من أول مرة ولكن كلما اجتهدت والتزمت؛ كانت النتيجة أفضل.

 

لذا دعنا نقدم لك بعض التحديات للعمل عليها واختبار قدراتك

• Maps App
• 404 Page
• Temperature Pricing Table
• Pricing Table
• Invite People
• Stock Market
• Profile Card
• Groupon Deal
• Alarm App
• Weather App
• Calendar
• Recipe
• Workout App
• Testimonials
• Conversion
• Camera App
• Video Player
• Music Player
• Call App
• Visa Payment
• Product View
• Airplane Ticket
• Product Sales Widget
• App Onboarding
• Sign In
• Settings
• Journal
• Blog Page
• Search Results
• Design Agency Hero

 

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

 

المراجع: ترجمة_وبتصرّف_للمقال