تم عقد جلسة مع الخبير: م. حسن جاد مهندس تجرِبة المستخدم بوزارة التجارة السعودية. ومحاوره أ. محمود عبدربه مؤسس منصّة تعلّم كتابة تجربة. للحديث عن أهم المعلومات التي يجب على المصمم الاهتمام بها عند التصميم ومشاركة بعض النصائح المهمة لأي مصمم.
-
خبرات ومعلومات أساسية
1 ما الفرق بين UI و UX؟
واجهة المستخدم User Interface:
هو الطريق الذي يوصلنا إلي حيث نريد الذهاب
(الروابط/الأزرار/الأيقونات/النماذج/الصور …. الخ)
تجربة المستخدم User Experience:
هو الشعور الذي نحصل عليه عند وصولنا وإحساس المستخدم (User) بعد تنفيذ المهام أو عدم تنفيذها.
ما هو الفرق بين ال Responsive Design و Adaptive Design
Responsive Design :
يبقي العنصر في مكانه لايتغير ولكن الذي يتغير شَكَّله وذلك بناءًا على الحجم وعرض شاشة الجهاز (Device) الخاص به بحيث يكون سهل عند الاستخدام.
Adaptive Design:
يتغير العنصر بناءََا على التجربة المتعارف عليها في الجهاز(Device) الخاص به .
مثلًا عند فتح تطبيق (app) على الموبايل فبيتم التحويل إلي الطريقة المتعارف عليها بواسطة التطبيقات الخاصة بجهاز الموبايل.
ما الاختلاف بين الـ Native و الـ Hybrid ؟
| Native | Hybrid |
| تنفيذ التصميم وكتابته برمجيًا لتناسب الطريقة المُستَخَدَمة للجهاز الحالي (Device).
مثال: إذا نفذت في برنامَج اندرويد (ِAndroid) فسوف يتم تنفيذها وكتاباتها بالطريقة والإرشادات (Tools Guides)التي تتناسب مع أجهزة الاندرويد (Android Devices). |
بيتم تنفيذ تصميم (Design) واحد ييظهر بنفس الشكل في جميع الأجهزة سواء كان
(iPhone) أو اندرويد (Android) أو حتي (Desktop) أو التطبيقات الإلكترونية (Web Applications). |
| سعرها عالي بتتطلب مطورو برامج (Devloppers) ل(Native) اندرويد (ِAndroid) أو ايفون (iPhone) أو ويندز (Windows) أومواقع الويب. | بتتطلب فريق عمل لكي يتم إنتاج تصميم واحد بنفس الشكل علي جميع المنصات وتطبيقات الموبايل بكود واحد تقريبًا في الـ Front End |
| من حيث السرعة فالـ Native أفضل بكثير من الـ Hybrid. | إذا لم يتم تنفيذه بشكل احترافي سيقلل من السرعة وعادة ما يكون ابطأ من الـ Native ويستهلك مصادر أعلي. |
| جيد بالنسبة لتجربة المستخدم (UX) | ليس أفضل شئ لتجربة المستخدم (UX) |
متي يتم استخدام الوضع الليلي (Darke Mode)؟
عند تنفيذ تطبيقات الموبايل (Applications) يفضل أن يكون الوضع الليل إلزامي (Mendatory).
لكن اذا كان النظام حكومي فالوضع الليلي يعتبر إضافة جيدة لتجرِبة المستخدم (UX) ليس بالضروري الاستثمار فيه ولكن مراعاةً لذوي الاحتياجات الخاصة يُفضَل عمل الوضع الليلي في أجهزة سطح المكتب (Desktop Devices) إذا أمكن.
ماهو UDACFU؟
هو اختصارة ل6 عناصر عند توافرهم في أي تصميم أو مشروع سيكون ذوقيمة (Value) وهم كالآتي:
- نافع Useful
- مرغوب Desirable
- إمكانية الوصول Acessible
- موثوق Credible
- إمكانية العثور Findable
- سهل الاستخدام Usable
-
عناصر ومبادئ التصميم المرئي
1 مبادئ التصميم:
1 الوحدة/التماسك Uniy:
تخلق الوحدة انسجامًا بين جميع عناصر الصفحة.
2الشكل الكلي Gestalt:
يشير الشكل الكلي إلي ميلنا إلي إدراك مجموع جميع الأجزاء بدلًا من العناصر الفردية.
3 التسلسل Hierarchy:
يظهر التسلسل الهرمي الفرق بين أهمية العناصر في التصميم. يعدّ اللون والحجم والشكل من أكثرالطرق شيوعًا التي يمكننا من خلالها إنشاء تسلسل هرمي.
4 التوازن Balance:
التوازن هو المبدأ الذي يحكم كيفيه توزيع العناصر بالتساوي. تميل التصاميم المتوازنة إلى الظهور بمظهر هادئ ومستقر وطبيعي. في حين أن التصاميم الغيرمتوازنة تجعلنا نشعر بعدم الارتياح.
5 التباين Contrast:
نستخدم التباين لإبراز العناصر من خلال استخدام اللون والقيمة ( المقصود بالقيمة هنا درجة اللون ) والحجم والعناصر الأخرى.
6 الحجم النسبي/المقياس Scale:
نستخدام الحجم النسبي أو المقياس لجعل العنصر أكبرمن العناصر الأخرى التي تظهر معه.
7 الهيمنة Dominance:
الهيمنة تخلق التركيز علي عنصر واحد. يمكن استخدام اللون والشكل والتباين والحجم والموضع لتحقيق الهيمنة.
2 عناصر التصميم:
1 الخطوط Lines:
هي خطوط تربط بين نقطتين وهي العنصر الأساسي في التصميم المرئي.
2 الأشكال Shapes :
عبارة عن مناطق قائمه بذاتها وعادةً ما يتم تشكيلها بواسطة الخطوط على الرغم من أنها تتشكل حسب (اللون أو القيمة أو الملمس). الشكل له بعدان الطول والعرض. نحن نميل إلي تحديد الأشياء من خلال أشكالها الأساسية ونركز فقط على التفاصيل مثل (الخطوط والقيم والألوان والأنسجة)عند الفحص الدقيق. لهذا السبب تعتبر الأشكال عناصر حاسمة نستخدمها نحن المصممين للتواصل السريع والفعال.
3 المساحة البيضاء Negative\White Space:
هي المساحة الفارغة حول الشكل (الإيجابي). العلاقة بين الشكل والمساحة تسمي الشكل (Figure)/ الأرض (Ground)، حيث الشكل هو الشكل والمساحة المحيطة بالشكل هي الأرض.
يجب أن ندرك أنه عندما نصمم أشكال إيجابية (Postive Figure) فإننا نصمم مساحات سلبية في نفس الوقت. المساحة السلبية لا تقل أهمية عن الشكل الإيجابي نفسه.لأنها تساعد على تحديد حدود المساحة الإيجابية وتحقيق التوازن في التكوين.
4 الحجم Shapes:
ينطبق الحجم على العناصر المرئية ثلاثية الأبعاد التي لها طول وعرض وعمق. نادرًا ما نستخدم الحجم في التصميم المرئي، نظرًا لأنه يتم عَرض معظم المنتجات الرقمية على شاشة ثنائية الأبعاد مع أنّ بعض تطبيقات الموبايل والمواقع الإلكترونية تستخدم نماذج ورسومات ثلاثية الأبعاد.( من الناحية الفنية الصور ثلاثية الأبعاد التي يتم عرضها على شاشة ثنائية الأبعاد لا تزل صورًا ثنائية الأبعاد).
5 اللون Color:
اللون هو عنصر من عناصر الضوء. نظرية الألوان هي فرع من فروع التصميم يركز على مزج واستخدام الألوان المختلفة في التصميم والفن. في نظرية الألوان، يوجد تمييز مهم بين الألوان التي تمتزج بشكل طرحي والألوان التي تمتزج بشكل إضافي.
6 النمط/النسيج Texture:
يمكن إنشاء النسيج من خلال نمط متكرر من الخطوط، أو الصور المتجانبة الأنسجة.
أهم مبادئ تجربة المستخدم يجب معرفتها
التركيز علي المستخدم : لا توجد تجربة مستخدم بدون مستخدمين ، لذلك يجب وضعهم في طليعة عملية التصميم.
قابلية الاستخدام أولًا: تعني سهولة الاستخدام الجيدة أن المستخدمين يجب أن يكونوا قادرين على إكمال إجراءاتهم بدقه وفعالية، وأداء المهام بسرعة مع تلبية احتياجاتهم وتوقعاتهم دون أي إجهاد عقلي أو فكري.
التناسق: يقضي المستخدمون معظم وقتهم مع مواقع أخرى وهذا يعني أن المستخدمين يفضلون أن يعمل موقعك الإلكتروني بنفس الطريقة التي تعمل بها جميع المواقع الإلكترونية الأخرى التي يعرفونها بالفعل.
التسلسل الهرمي والبصري: يوجه التسلسل الهرمي المرئي الواضح عين المستخدم إلي العناصر الأكثر أهمية.
منح المستخدم القدرة علي الاستخدام: يمنح تصميم تجربة المستخدم الجيد المستخدمين مستوى من الحرية عند استخدام منتجًا ما أو خدمه معينة. يفضل أن تمنح المستخدمين إمكانية التحكم لتصحيح الأخطاء أوعند تغيير رأيهم، فاسمح لهم بخيار الرجوع إلى إجراء ما، أو إلغائه، أو إغلاقه، أو التراجع عنه.
التصميم لسهولة الوصول (Acessibility): إمكانية الوصول هي المدى الذي يمكن المستخدمين من خلاله فهم النظام والتنقل فيه والتفاعل معه بغض النظر عن مستوى الرؤية، أو السمع، أو الإدراك، أو الحركة الجسدية.
التصميم من أجل إمكانية الوصول يعني التصميم لأولئك الذين لديهم احتياجات خاصة إمكانية الوصول التي تشمل الاحتياجات الجسدية أو البصرية او السمعية أو التعليمية/المعرفية.
2. خبرات عملية وإدارية
العميل طلب أكثر من تصميم؟ كيف تدير هذا الطلب بمهارة؟
الأسباب:
1 في الغالب السبب الرئيسي أن الشركة قدمت تصميم واحد.
2 لم يتم تقديم ملفات ودراسات تدعم فكرة التصميم (مثل عرض مراحل من عملية التفكير التصميمي).
3 التصميم لا يعكس محتوي أصلي.
الحل المقترح:
1 قبل البَدْء في التصميم اطلب روابط للمواقع التي تعكس فكرته على التصميم إن وجدت.
2 تقديم أكثر من نمط تصميم في أول اجتماع.
3 تقديم الملفات والدراسات للتصاميم المقترحة.
السبب الرئيسي للخلاف بين قسم Front End مع الـ UI ورفض استلام التصميم برغم جودته العالية ؟
الأسباب:
1 عدم دراسة تصميم إطار العمل(Frame Work) مثل (Bootstrap) سيتم استخدامه لتنفيذ المشروع. بالرغم من جمال التصميم إلا إنه بعيد جدًا عن إطار تنفيذ المشروع.
الحل المقترح:
1 أن يتم التنسيق الكامل بين كل الأقسام والاتفاق على الجوانب التقنية قبل البَدْء في عملية التصميم.
2 دراسهة إطار العمل المستخدمة من طرف قسم الـ Front End بحيث يخرج التصميم سهل التنفيذ والصيانة والتطوير.
كيف نتخطي الخلاف بين الـ UX و الـ UI ؟
الأسباب:
مقترحات تحسين تجربة المستخدم أحيانا تؤثر على الإخراج الجمالي للتصميم.
الحل المقترح:
1على قسم تجربة المستخدم تقديم دراسات التي تؤيد المقترحات.
2على المستخدم أن يقدم مقترحات تحسينية في أغلب الحالات لا جذريه إن امكن.
3على قسم تجربة المستخدم إدراك أن المستخدم قد يغفر بعض إشكاليات الاستخدام لمجرد استمتاعه بالتصميم (Design).
نصائح لعمل سيرة ذاتية مميزة(CV)
من أهم الأشياء التي يجب التركيز عليها عند عمل سيرة ذاتية لمصمم (Designer) هو تصميم (Cover) للسيرة الذاتية بشكل مميز مختلف عن النمط العادي يعكس طريقته وخبراته وأسلوبه .
وختامًا لابد عند التصميم أن يفكر المصمم خارج الصندوق(Thinking out of the box) وإظهار إبداعه الذي يعكس تميزه وأسلوبه ولكن ذلك مع الأخذ بالمبادئ والعناصر التي تم ذكرها سابقًا فهي بمثابة مرشد لأي مصمم وأساسيات لا غني عنها.
. يمكنكم مشاهدة هذه الجلسة كاملة بالإضافة إلي جميع الجلسات على قناتنا على اليوتيوب.