برمجه وتصميم

قابلية التعلم في تصميم الويب: أفضل 5 ممارسات

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

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

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

  1. التناسق
  2. ردود الفعل
  3. التمسك بعناصر واجهة المستخدم المعروفة
  4. معرفة
  5. تخزين

لكن أولاً ، دعنا نوضح النقطة التي تفسر أهمية قابلية التعلم.

قابلية التعلم في تصميم الويب

لماذا أهمية التعلم؟

الآن ، لماذا التعلم مهم؟ هناك العديد من الأسباب التي تجعلك تفكر في توفير واجهة مستخدم أكثر قابلية للتعلم.

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

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

أخيرًا ، القابلية للتعلم مهمة لمعدل استبقائك. واجهة معقدة ستخيف المستخدمين. في كثير من الأحيان ، سيبحثون عن بدائل أسهل توفر لهم نفس القيمة.

الآن بعد أن فهمنا أهمية قابلية التعلم ، دعنا نستكشف أفضل خمس ممارسات لتعزيز قابلية التعلم.

1. الاتساق

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

لماذا ا؟ لقد شاهد المستخدمون هذا التصميم من قبل ويعرفون كيفية التفاعل معه. دعنا نقارن واجهة كل من Google Drive و Gmail. لاحظ أوجه التشابه في تحديد مواضع العناصر مثل شريط البحث والقائمة وزر الإجراء.

العناصر في Google Drive

على سبيل المثال ، يحتوي Google Drive على زر كبير للحث على اتخاذ إجراء مع النص “جديد” لإنشاء ملف أو مجلد جديد. إذا قارنا هذا بـ Gmail ، فسنجد نفس زر الحث على اتخاذ إجراء “إنشاء” لإنشاء بريد إلكتروني جديد. يتيح ذلك للمستخدم الجديد في Gmail ولكنه كثيرًا ما يستخدم Google Drive لفهم الغرض من هذا الزر الكبير بسرعة.

واجهة Gmail

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

2. ردود الفعل

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

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

ثلاث حالات زر مختلفة: عادي ، وتحوم ، ونشط

يمكن أن تكون التعليقات دقيقة للغاية. نشير إلى هذا على أنه تفاعلات دقيقة. يمكن أن تأخذ التفاعلات الدقيقة شكل:

  • الرسوم المتحركة أو تأثيرات الانتقال
  • يتغير اللون
  • يتم التحقق من خانة الاختيار

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

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

3. لا تقم بإعادة اختراع العجلة

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

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

قائمة همبرغر تنص على رفايت عدي

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

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

4. الألفة

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

يمثل النموذج العقلي عملية تفكير الشخص لكيفية عمل شيء ما. تستند النماذج العقلية إلى حقائق غير مكتملة ، وتجارب سابقة ، وحتى تصورات حدسية. فهي تساعد في تشكيل الإجراءات والسلوك ، وتؤثر على ما ينتبه إليه الناس في المواقف المعقدة ، وتحدد كيفية تعامل الناس مع المشكلات أو الواجهات الجديدة وحلها. – سوزان كاري ، 1986 مقال من “العلوم المعرفية وتعليم العلوم” مجلة

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

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

أيقونات Font Awesome المألوفة

5. التخزين

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

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

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

ملاحظة: يمكنك معرفة المزيد عن القصص ورواية القصص في التصميم.

الخلاصة: قابلية التعلم والتعرف على الأنماط

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

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

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

المصدر

اترك تعليقاً

لن يتم نشر عنوان بريدك الإلكتروني. الحقول الإلزامية مشار إليها بـ *

زر الذهاب إلى الأعلى