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

عملية تصميم واجهة الإستخدام

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

• جمع المتطلبات: أي تجميع قائمة من المهام المطلوبة من قبل التطبيق لتحقيق أهداف المشروع والإحتياجات المحتملة للمستخدمين عن طريق واجهة الإستخدام.
• هيكلة المعلومات: مفهوم واسع ولكن عندما نتحدث عن تصميم واجهة إستخدام موقع/تطبيق ويب فهو يركز على طريقة التعبير عن المحتوى في الموقع والذي يتكون من قائمة التصفح/الملاحة (الرئيسية/فرعية)، القوائم الجانبية/ محتوى الرئيسي للصفحة، ذيل الصفحة، .. وعناصر أخرى يمكن إضافتها على هذا النمط بحيث يتم تقسيم المحتوى الكامل الذي يقدمه الموقع أو التطبيق عبر هيكلة هذه المعلومات (المحتويات) ضمن واجهة الإستخدام. غالباً تكون أنماط الهيكلة بترتيب المعلومات من الأهم إلى الأقل أهمية.
• تحليل المستخدمين: يتم تحليل المستخدمين المتحملين لواجهة التطبيق عن طريق مناقشة الأشخاص المتعاملين مع المستخدمين أو التعامل مع المستخدمين أنفسهم بشكل مباشر. عدة أسئلة مهمة في هذه المرحلة مثل: كيف يريد المستخدم الواجهة أن تعمل؟ ما الأشياء التي يعرفها المستخدم من تنفيذ المهام، طريقة التصفح، وغيره قبل أن يتعامل مع هذه الواجهة؟ كيف يرى المستخدم الواجهة وما نوع الشعور الذي يمر بالمستخدم عند تعامله مع واجهة الإستخدام؟ يمكن الإستفادة هنا من تجربة المستخدم User Experience.
• التأطير الشبكي وعمل النماذج الأولية: الأطر أو الصور الشبكية وتسمى Wirefames باللغة الإنجليزية، عادة نراها في عمل نماذج ثلاثية الأبعاد وهي تركز على رسم واجهة الإستخدام الأولية بعدة أشكال لمعرفة الأنسب بينهم وتبني واجهة الإستخدام الحقيقية بعد التخطيط لها عن طريق التأطير الشبكي.
• إختبار قابلية الإستخدام: تتم في هذه العملية إختبار واجهة الإستخدام المقترحة بعد التأطير الشبكي عن طريق المستخدم الحقيقي أو المباشر لهذه الواجهة. عادةً هذه العملية تتكون من مهام يقوم بعملها لإجراء هذا الإختبار وأيضاً عدة أسئلة إلى المستخدم عن تجربته للواجهة وعن المراحل التي مر عليها عند إستخدامه لواجهة الإستخدام الحقيقية والمشاكل والصعوبات التي واجهته أثناء تصفحه للموقع.
• تنفيذ واجهة الإستخدام الرسومية(الحقيقية): بعد هذه المراحل يتم وبالأخص مرحلة جمع المتطلبات والتأطير الشبكي يأتي تنفيذ واجهة الإستخدام التي سوف تستخدم للموقع أو التطبيق، كما أن هذه المرحلة تحتاج إلى تعاون بين مصمم الجرافك ومصمم واجهة الإستخدام، عادة يمكن أن يكون شخص واحد منفذ لواجهة الإستخدام له خبرة في هاذين المجالين (تصميم الجرافك وواجهة الإستخدام).

مباديء تصميم واجهة الإستخدام

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

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

أدوات تساعدك على تصميم واجهة الإستخدام

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

الرسم على الورق

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

الرسم الأولي لواجهة إستخدام موقع تويتر

أحد الأوراق الخاصة بتخطيط واجهة إستخدام موقع vimeo

تطبيقات سطح المكتب

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

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

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

• Omnigraffle ، موفر في نظام الماك فقط، ومناسب لعمل النماذج والتخطيطات العامة وخريطة المحتويات، ولكن ليس مجاناً ويمكن إستخدامه كتجربة.

• Visio ، متوفر لنظام الويندوز فقط، وكان من قبل مجرد إضافة لـ MS Word ولكنه غير مجاني.
• Axure ، مزود بنماذج موجودة مسبقاً ويعتبر سريع ومرن لأعمال الواجهات، ولكنه متوفر في نظام الويندوز وغير مجاني ويمكن تجربته قبل شراءه.

إضافة الجمالية على واجهة الإستخدام

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

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