واجهة المستخدم User Interface ، أو واجهة الإستخدام كما نسميها نحن غالباً لها أهمية كبيرة في جميع المجالات سواء كان في تطوير المواقع (مواقع، تطبيقات ويب، ..) و أنظمة التشغيل (تطبيقات سطح المكتب، المهام، ..) وفي التقنية بشكل عام، واجهة المستخدم كما تجده أيضاً في الويكيبيديا ستجد له أقساماً عدة ومستخدمة في عدة أشياء أو مجالات.
أبسط مثال على ذلك إختبار مدى قابلية إستخدام منتج أو جهاز معين من قبل العميل أو مستخدمه حيث تكون سهولة أداء المهمات فيه والوصول إليها وكفائتها في نفس الوقت مهمة وإتاحة خيارات للمستخدم لإرضائه وأداء أعماله من خلال المنتج حسب ما يريد.
في هذا الموضوع سأتحدث عن واجهة المستخدم في تطوير المواقع، سأضيف بعض المحتويات التي قرأتها سابقاً وهي من مصادر أجنبية (موجودة أسفل الموضوع) إضافةً إلى وجهة نظري وإعتقادي في هذا الموضوع عموماً.واجهة المستخدم في تطوير المواقع تهدف للوصول إلى جميع مميزات وأدوات التي يقدمها الموقع وسهولة إستعمالها في نفس الوقت ومثال على ذلك عن طريق معرفة مضمون الموقع من زيارته للصفحة الرئيسية مباشرةً. (كما هو موجود في مواقع الويب 2 اليوم)
الواجهة في أي مجال (موقع، تطبيق، أداة ، ..) تتطلب فهم جيد لإحتياجات المستخدم ، يجب أن تخدم المستخدم وترضيه لأنه هو الأهم. (إرضاء المستخدم ليس سهلاً وصعب أيضاً ولكن حاول تجعل الأمور سهلة عليه قدر الإمكان وتتيح له الخيارات)
عندما نتحدث أيضاً عن واجهة المستخدم نقصد هنا بالتفاصيل الصغيرة للتصميم وكيف يمكن أن تأثر على إستعمال المستخدم للموقع غير الألوان والأحجام العامة لعناصر الموقع مثل العنصر وحدوده والفارق بينه وبين العناصر الأخرى.
إستغلال المساحات البيضاء،قابلية القراءة ،الأيقونات ،التدرجات ،أنواع الخطوط ،إستخدام الظل في العنصر أو الإيقونات ،الشفاقية ،الدقة ، .. وغير ذلك من الأمور في هذا الجانب التي تعطي إنطباع على الواجهة.
مميزات التخطيط لواجهة المستخدم
التخطيط البدائي أو البسيط للواجهة عملية سهلة ويمكن تطويرها فيما بعد ولكن أهمية التخطيط لتفاصيل الواجهة تأتي بفوائد عدة منها:
- تقسيم عناصر الموقع.
- معرفة ووضوح مضمون الموقع بسهولة.
- تسهيل توزيع عناصر الموقع بشكل سهل / ويمكن إضافة الجماليات والأدوات الأخرى.
- توازن العناصر مع الإضافات من صور وأدوات. (حيث الإضافات هذه هي تخدم العناصر والعناصر تخدم محتوى الموقع)
- تطوير التصميم في المستقبل ومعرفة الأشياء الضرورية والأشياء الغير ضرورية وإزالتها بشكل عام.
طرق التخطيط لواجهة المستخدم
يستطيع أي مصمم التخطيط لواجهة المستخدم لأي طريقة كانت أبسط طريقة بورقة وقلم أو في الجهاز بإستخدام برامج التصميم، طرق التخطيط لا تختلف عن بعضها إلا بأشياء بسيطة جداً فالهدف في الأخير تصميم الواجهة وأما الطريقة فهي ترجع للمصمم وحرية إختياره بالطبع.
نظرية الشبكة والرسم التقليدي
ببساطة عن طريق الورق والقلم يمكنك رسم الواجهة التي تريدها قبل ذلك هناك من يقسم طريقة رسم الواجهة على خطين أو ثلاثة خطوط متوازية وتساوية في المسافة أو ما يسمى بـ rule of thirds grid أو “قاعدة شبكة الأثلاث” ويمكن الإستفادة من هذه القاعدة في موازنة عناصر الواجهة من حسيث المساحة والفارق مع العناصر الأخرى وتقديمها بعدة نماذج.
قد تكون هذه الطريقة بدائية عند البعض لعدم إتقان الرسم بشكل جيد لرسم الواجهة المطلوبة وبدلاً من ذلك يكتفي بعمل الواجهة بالجهاز وبأحد برامج الرسم أو التصميم.
الخريطة الذهنيةMind Mapping
للخريطة الذهنية عموماً فوائد عدة هنا في تقسيم الأفكار المراد طرحها في الواجهة وتقسيم العناصر الرئيسية والفرعية وبين كل مرحلة تنقل بين واجهة المشروع (هنا يكون المشروع موقع ويب مثلاً) ، أعتبر الخريطة الذهنية أسهل طريقة لتوليد أقسام ومصطلحات الموقع أكثر بالتفصيل.
التطبيق المباشر على تصميم الواجهة
بعد التخطيط المبدئي لتصميم الواجهة سواء كانت على الورق أو طبقت مباشرةً على برنامج التصميم بعدة أشكال يأتي التنفيذ بعدها ليسهل عليك فكرة الواجهة التي تريدها لتطبيقها مباشرة على الصفحة بإستخدام HTML لتوزيع العناصر وCSS لتنسيق هذه العناصر والإهتمام بعدها بالتفاصيل الصغيرة كإضافة التدرجات والألوان عرض الحدود والمساحات البيضاء وغيرها.
تأتي الفائدة هنا خاصةً عند تطبيق نظام الشبكة بالتوازن المتماثل – symmetric balance – على المستوى الأفقي للصفحة (في المساحات البيضاء، عرض العناصر والمسافات بينها، ..) وتوافقها على الجهة اليمنى واليسرى. (بالطبع هذا غير مطلوب ولكن حسب إختيار المصمم أو صاحب الموقع إذ يمكنه إختيار العناصر وتوزيع الصفحة بدون توازن)
إستخدام Wireframe
كلمة Wireframe لا أعرف لها معنى باللغة العربية سوى “التأطير السلكي”، هذه الخاصية أيضاً موجودة في عدة أماكن مثل برامج ثلاثية الأبعاد وتستخدم في عدة أماكن، في واجهة المستخدم يمكن أن نضع مقصدها في هذه النقاط:
- رؤية مراحل ظهور عناصر الواجهة للتطبيق أو الصفحات في المشروع.
- يستخدم للبدأ بمرحلة التخطيط قبل تنفيذ شكل التصميم. (بحيث يكون الشكل في وقت لاحق يعتمد على تخطيط التصميم نفسه)
- معرفة تجربة المستخدم المتوقعة في التطبيق أو الصفحات بشكل عام.
- تركيز المستخدم على ما يريد سواء كانت مهام أو محتويات وطرق الوصول إليها.
- يوفر عليك الوقت في التخطيط وأسهل طرق التخطيط.
- يضم الثلاث طرق ذكرتها مسبقاً وطرق أخرى أيضاً غير مذكورة ويمكننا الإكتفاء بها بدلاً من الطرق السابقة.
واجهة المستخدم في الصفحات والتطبيقات
غرض تصميم الواجهة في الصفحات تختلف عن التطبيقات وذلك حسب هدف المستخدم، بمعنى آخر غالباً يكون التركيز عند زيارة صفحات الويب الثابتة أو الديناميكية العامة على المحتوى للقراءة أو لرؤية صور أو ما شابه ذلك المهم هو المتحوى.
أما في التطبيقات فالتركيز على المهام (مهام أو مهمات التطبيق) لإتمام المهمات التي يعرضها التطبيق مع وجود أهم العناصر في الواجهة مثل محرك بحث للبيانات، تقسيم قائمة الروابط، والإحصائيات في الصفحة الرئيسية ، .. وغيره (أيضاً مثل هذه العناصر والأدوات مهمة في الصفحات عندما يكون المحتوى هو الغرض) ، أنصحك بقراءة هذه المقالة التي تتحدث عن تصميم واجهة المستخدم في تطبيقات الويب من مجلة Digital Web.
لا ننسى أيضاً التفاصيل الصغيرة سواء كانت في الصفحات لخدمة عناصر الموقع أو التطبيقات لتحسين ظهور وأداء المهمات.
برامج مستخدمة في التخطيط
هناك أدوات تساعدك على عملية التخطيط أذكر منها حسب الطريقة/ أو حسب نوعية هذه الأدوات سواء كانت برامج، إضافات، ..
برامج Vector Graphics & Raster Graphics
سأكتفي هنا بأشهر البرامج من شركة Adobe الشهيرة مثل:
- Adobe Fireworks ، يوفر البرنامج مهام مخصصة لعمل النماذج والتخطيط للواجهات.
- Adobe Illustrator ، يمكن إستخدام البرنامج بالإستعانة بأدوات لعمل التخطيط الخاص بالواجهة.
- Adobe Photoshop ، الكثير من المصممين يحبون التطبيق مباشرة لرؤية تخطيط التصميم بشكل أفضل ويعد أفضل برنامج في التصميم بشكل عام.
برامج Wireframing
- Visio ، متوفر لنظام الويندوز فقط، وكان من قبل مجرد إضافة لـ MS Word ولكنه غير مجاني.
- Axure ، مزود بنماذج موجودة مسبقاً ويعتبر سريع ومرن لأعمال الواجهات، ولكنه متوفر في نظام الويندوز وغير مجاني ويمكن تجربته قبل شراءه.
- Omnigraffle ، موفر في نظام الماك فقط، ومناسب لعمل النماذج والتخطيطات العامة وخريطة المحتويات، ولكن ليس مجاناً ويمكن إستخدامه كتجربة.
- Pencil ، إضافة للفايرفوكس لعمل تخطيط مبسط للتخطيط ومزود بالأيقونات وأشكال الصفحة لتخيل التصميم أكثر ويمكن إستخدامه في الأعمال البسيطة وهو مجاني.
نصائح لتحسين واجهات المستخدم
نصائح أختصرها في نقاط تفيدك دائماً في تحسين تصميم الواجهات:
- الإهتمام بقابلية الإستخدام Usability.
- رؤية أفضل الواجهات عن طريق مصادر الإلهام المتعددة.
- تقليد الأعمال بهدف تحسين طرق عمل مثل هذه الواجهات أو كيفية عمل أجزاء منها ومعرفة التفاصيل الصغيرة للتصميم.
- الإستفادة من تطبيقات الويب وأدوات تقنيات الويب في تحسين أداء هذه الواجهات مثل إستخدام لغة Javascript في عدة أمور لتسريع الوصول إلى هذه المهمات وإستخدام أداة الأجاكس أيضاً، وفي نفس الوقت وضع البديل في حال كان المتصفح أو المستخدم لا يريد وجود لغة Javascript أثناء تصفحه.
