تناولنا في الجزء السابق من المقال عن ال UX Research وأقسامه وهو اول خطوة
من خطوات تصميم تجربة المستخدم اليوم سنتحدث عن باقي الخطوات بشكل
سردي يوضح المعنى لا تفصيلي سنتحدث بالتفصيل عن كل قسم في مقالات منفصله
نستعرض سريعاً خطواط تصميم تجربة المستخدم
1- Ux Research
- test the idea
- User Research
- Comptitive Research
- Stackholder Research
2- Information Architecture
- Site map
Usability Test
- FlowChart
Usability Test
3 - Prototype & WireFrame
Usability Test & Usability Test
4- Ui
Usability Test
2- ماهو Information Architecture ؟
إذا كنت ترغب في بناء منزل كبير ، فإن الشخص الذي تتصل به
هو المهندس المعماري نعلم جميعًا ذلك ، ولكن العمارة ليست فقط للمباني التقليدية
ولكن أيضًا لمساحات المعلومات الضخمه الكبيرة على غرار المباني ،
يجب تنظيم المعلومات بأساس متين
إن فهم المبادئ الأساسية لهندسة المعلومات الجيدة أمر ضروري
لأي مصمم يبتكر منتجات تكنولوجيه للجمهور سواء كانت مواقع او تطبيقات
ولفهم أكثر لأهمية هندسة المعلومات تخيل إنك تتصفح موقع تواصل اجتماعي جديد
وأردت أن تبحث عن مكان الرسائل فى الموقع فإن الافتراض الذهني في عقلك
إن تكون الرسائل أعلى الموقع مثلما هو الحال في مواقع كثيرة ولكن اذا كانت الرسائل
في يسار الموقع أو أسفله ؟ سيحدث تشويش لك وستجد صعوبه في إيجاده
والتشويش لإي زائر للموقع او التطبيق غير مرغوب فيه نحن في الاصل نصمم
تجربة مستخدم جيدة من أجل عدم تشويش ورضاء الزائر وجعل تجربته جيده للموقع
مثال أخر أذا استخدمت مصعد في أحدى البنايات العاليه وبحثت عن رقم الطابق ال 4
فإن الافتراض الذهني في عقلك إن رقم 4 متواجد فالصف الثالث
وإن كل صف به 3 ارقام فقط الصف الثاني 123
الصف الثالث 456
ماذا لو وجدت الرقم 4 في الصف الثاني ؟ ماذا لو وجدت ان كل صف به 4 ارقام
سيحدث لك القليل من التشويش ويستغرق الامر منك ثواني زائده لتدرك إنك امام
هندسة معلومات غريبة لذلك من المهم جداً دراسة هندسة المعلومات لبناء
موقع او تطبيق جيد فالموقع او التطبيق عبارة عن مبني ضخم ملئ بالمميزات
والاقسام وغيره كأن المستخدم داخل مول تجاري لديه رحله طويله عميقة
الهدف من عمل هندسة للموقع
1- تصميم تقسيم للمعلومات في الموقع يناسب النموذج العقلي للجمهور Site map
نجد هنا فالصوره تصور لهيكلة وبناء أحد المواقع وتقسيم الاقسام به بعد الانتهاء
من وضع تلك التقسيمة واختبارها لدى الجمهور لقياس درجة سهولتها
2- صنع خريطة للموقع FlowChart فيها توضيح أكثر وتطبيق عملي
مع اختبارها لدى الجمهور لتقييم درجة سهولتها
3- ماهو ال Prototype & WireFrame ؟
ال WireFrame بأختصار هو التخطيط الهيكلي للتصميم البصري النهائي
بمعنى اذا كنت تريد أن تبني غرفة جميله فإن اول ماتفكر به هو الشكل واللون
والديكور والجماليات لكن فعلاً إن أول مايتم تصميمه وتنفيذه هو البناء بالطوب الاحمر
وتقسيم الغرفة بشكل ما
الوايرفريم يحقق لنا 5 أهداف
(هيكل الواجهة - المحتوى - تصميم المعلومات - وظيفة الواجهة - تفاعلها مع المستخدم)
الوايرفريم لايتم فيه تحديد اي الوان او نوع خط أو اي تصميمات بصرية
هذا مثال لشكل الوايرفريم لواجهة ما
وهذه تطبيق ال UI على الوايرفريم في المثال السابق واضح الفرق بين العمليتين
بعدها نقوم بعمل Usability Test للتأكد من ان الوايرفريم مناسب للجمهور
ال Prototype
يكمن تعريف البروتوتايب في معناه اللغوي وهو نموذج أولى وهو بالفعل
عبارة عن نموذج اولى تفاعلي للتصميم بعد الانتهاء من عمل الوايرفريم للموقع
وعلى افتراض ان للموقع 125 واجهة مستخدم وتم تحديداً خريطة الموقع مسبقاً
يتم ربط الواجهات ببعضها البعض وعمل تجربة أولية بشكل تفاعلي
مثال
الواير فريم والتصميم البصري UI مجرد صور ليس لها اي تفاعل او نشاط
بمعنى زر التحميل الموجود فالواجهة عندك هو مجرد صوره متي يكون له وظيفة ؟
عندما يتم ربطه بكود برمجي حسناً تخيل إنه لايوجد Prototype فإن التصميم
سيذهب لمرحلة التكويد والبرمجة ولكن ماذا لو اكتشفنا خطأ ما فالتصميم ؟
ماذا لو احتجنا الي تعديل جزء ما فى التصميم او اضافه اشياء او حذفها
هل سنعيد عمل المبرمج مره أخرى ؟ كم من الوقت والمال سنخسر ؟ الكثير بالتأكيد
لذلك تأتي أهمية ال prototype نعطي تفاعل للصور والواجهات كأنه مبرمجه
وكأن هذه هيا النسخه النهائية للتطبيق
هذه الصور المتحركه توضح لكم
 |
ا
بعدها نقوم بعمل Usability Test للتأكد من سهولة استخدامه لدى الجمهور
ومن فوائده ايضاً انك تقوم بعمل بترويج وتسويق للمنتج قبل ظهوره
4 - UI
بعد ذلك نأتي لإخر جزء وهو تصميم ال UI الواجهة البصرية للمنتج
انظر وراجع معي كم العمليات التي تمت لكي نصل الي تلك المرحله بنجاح
1- عمل بحث لتحديد احتياجات الجمهور
2- عمل بحث عن الشركات المنافسة لتحديد مميزات المشروع
3- عمل دراسة بحثيه مع اصحاب المشروع لتحديد الاهداف الربحية
4- عمل هيكلة وتصميم للمعلومات
5- عمل موقع وخريطة للمشروع
6- اختبار سهولة الخريطة وتصميم المعلومات
7- عمل الوايرفريم للمشروع واختبار سهولته
8- عمل البرروتاتيب للمشروع واختبار سهولته
9 - الوصول الي ال UI
وتصميم ال UI الهدف منه حسن اختيار الالوان والفونت المستخدم وكذلك
ستايل التصميم اختيار الاستايل المناسب للفئة المستخدمه فالتصميمات لاتناسب الجميع
بعدها نقوم بعمل Usability Test أخيرة للمشروع قبل تسليمه الي فريق المبرمجين
كل هذه مجرد مقدمه بسيطه عن اقسام التصميم ماعليك هو إن تدرس بعمق
كل قسم لانك كمصمم يجب عليك إن تتقنهم جميعاً ستجد هنا فى الموقع مقالات تفصيلية
عن كل قسم من الاقسام المذكوره تابع معنا
لينك الجزء الأول من المقال 👈 الجزء الاول
