رسالة الموقع
5 نصائح مهمة لتصميم موقع قابل للتعلم من قبل الزوار ( 2021 )

5 نصائح مهمة لتصميم موقع قابل للتعلم من قبل الزوار ( 2021 )

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

أولا المقصود بتصميم واجهة استخدام قابلة للتعلم Learnable هو تصميم واجهة سهلة و واضحة يتعامل معها المستخدم ( زائر الموقع ) بشكل تلقائي و كأنّه يعرف كل مكوناتها و عناصرها , بدلا من أن تكون هذه الواجهة غير مفهومة و مربكة أو أن تحتاج للشرح و التوثيق ليتمكن الزائر من التعامل معها.

أهم 5 نصائح لتصميم واجهة استخدام سهلة التعلم


1- الاتساق Consistency

ربما يكون المصطلح مُبهم و لكنّه بسيط للغاية , المقصود بالاتساق Consistency هو توحيد النسق ( الشكل أو الاسلوب ) المتبع في تصميم الموقع , مثلا إذا قررت استخدام خط معين للعناوين الرئيسية , فحافظ على استخدام نفس هذا الخط لكل العناوين الرئيسية و بالتالي بمجرد أن يرى زائر الموقع أو مستخدم التطبيق جملة مكتوبة بهذا الخط سوف يعرف مباشرة أن هذه الجملة تمثل عنوان رئيسي.

و كذلك بالنسبة للألوان المستخدمة للعناصر المختلفة حاول دائما اتباع نسق موحّد , فمثلا لا تجعل بعض الروابط بلون معين و روابط أخرى بلون مختلف , هذا قد يجعل الزائر غير قادر على تمييز الروابط سريعا داخل النصوص , كذلك ألوان اﻷزرار Buttons و اﻷلوان التي تستخدمها للعناوين الرئيسية .. إلى آخر ذلك.

بالنظر إلى تطبيقات جوجل المختلفة سوف تجد أن جوجل استطاعت توحيد النسق في واجهات تطبيقاتها المختلفة بدرجة عالية جدا , و بالتالي إذا كنت تستخدم أحد تطبيقات جوجل ثم قمت بتحميل تطبيق آخر لجوجل سوف تتمكن من فهم واجهة التطبيق الجديد سريعا ﻷن هذا التصميم الخاص بالتطبيق الجديد سبق لك رؤيته و التعامل معه من قبل .. لاحظ مثلا في تطبيق جوجل درايف Google Drive الزر الرئيسي ﻹنشاء ملف أو مجلد جديد داخل حسابك , و قارن نفس هذا التصميم مع تطبيق الجي ميل Gmail و زر إنشاء رسالة جديدة
5 نصائح مهمة لتصميم موقع قابل للتعلم من قبل الزوار ( 2021 )
5 نصائح مهمة لتصميم موقع قابل للتعلم من قبل الزوار ( 2021 )
هنا جوجل تمكنت من توحيد النسق ليس فقط داخل التطبيق الواحد و لكن على مستوى تطبيقاتها المختلفة و هذا طبعا يجعل فهم هذه التطبيقات و معرفة كيفية التعامل معها مهمة أسهل على مستخدميها.

القاعدة باختصار أنه كلما كان تصميم موقعك / تطبيق على قدر عالي من الاتساق , كلما كان من السهل على المستخدم فهمه و التعامل معه سريعا.


2- إعطاء رد فعل Give Feedback

تخيل مثلا روابط الموقع , هذه الروابط يكون لها لون معين في البداية , ولكن عندما يؤشّر فوقها المستخدم ( يقف عليها بالماوس ) فإن لون هذه الروابط يتغيّر و كذلك شكل المؤشّر .. رد الفعل البسيط الذي حدث هذا يجعل المستخدم يعرف فورا أن ما يقف عليه بالماوس هو رابط و قابل للضغط عليه , مثال آخر هو أزرار الموقع المختلفة التي يتغير شكلها أو لونها عند التأشير فوقها أو الضغط عليها
5 نصائح مهمة لتصميم موقع قابل للتعلم من قبل الزوار ( 2021 )
تخيل مثلا أنك تحاول التسجيل بموقع ما , و بعد كتابة بياناتك و الضغط على زر التسجيل لم يتغير شكل زر التسجيل ولم يتغير أي شيء في الصفحة إطلاقا , قطعا ستظن أن هناك خطأ ما و ستضغط مرة ثانية و ثالثة .. ولكن لو أن زر التسجيل مثلا تغير محتواه النصي من " التسجيل " إلى " جاري مراجعة بياناتك " أو مثلا تغير لونه أو ظهرت بجواره أيقونة التحميل Loading ... كل هذه الأحداث البسيطة micro interactions تساعد المستخدم على فهم واجهة التطبيق و معرفة أن ما يقوم به يؤثر فعلا أو لا يؤثر في التطبيق.


3- تمسك بالتصميمات التي اعتادها الزائر Familiarity

هناك حكمة مشهورة تقول " لا تقم بإعادة اختراع العجلة " و المقصود منها أن بعض اﻷشياء تم اختراعها بالفعل و هي تعمل و تؤدي دورها على أفضل وجه فلا داعي ﻹضاعة الوقت و المال في إعادة اختراعها , و نحن هنا لا يعنينا الوقت و لا المال بقدر ما يعنينا أن إعادة اختراع العجلة هذه قد تؤدي لنتائج سلبية أصلا .. و لتوضيح الفكرة .. لاحظ هذه اﻷيقونة المستخدمة ﻹظهار القائمة المخفية bars

هذه اﻷيقونة منتشرة في معظم تطبيقات المواقع و الجوالات و قد اعتادها مستخدمي التطبيقات و بمجرد رؤيتها يفهم فورا الدور الذي تقوم به , و لكن تخيل لو أن مصمم الواجهة قرر استبدال هذه اﻷيقونة بأيقونة أخرى لتقوم بنفس المهمة , في الصورة التالية مجموعة من التصميمات للمصمم Rifayet Uday حاول فيها تقديم نماذج مختلفة قليلا لهذه الأيقونة
كما تلاحظ هذه التصميمات لا تقدم شيء جديد قد يخدم تصميم التطبيق ككل , و في نفس الوقت قد يصعب على بعض الزوار أو المستخدمين معرفة الغرض منها , و لهذا نقول أنه من اﻷفضل دائما اتباع النسق العام الذي اعتاده المستخدمين بالفعل.

مثال آخر , في مواقع التسوق مثلا نجد سلة التسوق في القائمة العلوية على اليمين أو اليسار بحسب لغة الموقع , ولكن بعض التصميمات التي يمكن وصفها بالـ " شاذة " تجعل سلة التسوق كعنصر متحرك في أسفل الصفحة على اليمين أو اليسار .. هذه التغييرات البسيطة في التصميم عن اﻷمور المتبعة بكثر هي في الواقع تؤثر سلبا على تجربة المستخدم ﻷن المستخدم يشعر بالراحة دائما مع ما تعوّد عليه , فإن لم تقدم له ذلك قطعا سيبحث عن البديل و سيجده.


4- افتح قنوات تواصل مع المستخدمين Get Feedback

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

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

البيانات اﻹحصائية سهلة الجمع و غير مكلفة و اﻷهم أنها لا تحتاج إلى جهد أو مشاركة المستخدمين في إعدادها.


5- السرد القصصي بدلا من الكتابي Storytelling

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


تخيل مثلا تطبيق أوبر Uber عندما بدأ , لا أحد يعرف كيف يتعامل معه أو خطوات حجز الرحلة , ولا توجد تجارب سابقة للمستخدمين تجعل عملية شرح التطبيق غير ضرورية , فكان من المحتّم تقديم شروحات للواجهة و كيف يمكن التعامل معها خطوة بخطوة بداية من تسجيل حساب جديد و انتهاءا بعملية الفوترة و دفع تكلفة الرحلة و إعطاء تقييم للسائق.

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

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


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