يعد تصميم واجهة المستخدم عملية مستمرة. حيث لايوجد شئ يمكن وصفه “بالواجهه”الممتازة حتى وان وجدت هذه الواجهه الممتازة فلن تستطيع وقتها التخلص منها وعدم النظر اليها مرة اخرى. لذلك فأنت بحاجة إلى بيانات لفهم ما يعمل أو لا يعمل ، والتغييرات التي تحتاج إلى إجرائها.
فالدخول الى خرائط التمثيل الحرارى ,يعد الطريقة المرئية لمعرفة كيف يتفاعل الناس مع صفحاتك وواجهاتك ومن ثم تستطيع التصميم واعادة تصميم نسخ اكثر فاعلية منهم.
فى هذه المقالة سنعرف كيف ولماذا نقوم باستخدام خرائط التمثيل الحرارى لتحسين تصميم واجهة المستخدم والحصول على المزيد من الرؤية المستقبلية عن طريق دمج خرائط التمثيل الحرارى مع سلوك المستخدمين الاخرين وأدوات التعليقات الأخرى.
ولكن فى البداية…
ما هى خرائط التمثيل الحرارى؟
تعد خرائط التصميم الحرارى هى تمثيلا مصورا للبيانات بحيث تساعد الفرق على تصور تفاعل المستخدمين وتفاعل الموقع على نطاق واسع. باستخدام البرنامج ، يتم إنشاء خرائط التصميم الحرارى عند تفاعل المستخدمين مع موقع ويب أو تطبيق باستخدام الماوس أو النقر على شاشة تعمل باللمس.
ومن المؤكد انك شاهدت خريطة للتمثيل الحرارى من قبل حيث يتم تظليل المناطق الشائعة باللون الأحمر والمناطق غير المعروفة باللون الأزرق ، على النحو التالي:
انواع خرائط التمثيل الحرارى
هناك ثلاث انواع رئيسية لخرائط التمثيل الحرارى التى يمكن ان يستخدمها واجهة المستخدم للحصول على البصيرة:
1-خرائط يمكن النقر عليها مباشرة بواسطة المستخدمين
2-خرائط متحركة حيث يقوم المستخدم بتحريك مؤشر الماوس اثناء البحث
3-خرائط يتم تمريرها تظهر كيف ينتقل المستخدم الى اسفل الصفحة.
وعلى ارض الواقع: إليك مثالًا دقيقًا للغاية لخريطة التمثيل الحرارى مباشرة ، مع البيانات التي تم جمعها من دليل خريطة التمثيل الحراري التي كتبتها في مدونة “هوتجار”.حيث يمكنك التبديل لعرض خرائط التمثيل الحراري “النقر” والتنقل والتمرير المختلف ، وأيضًا التشغيل لمعرفة الاختلافات الموجودة فى الجهاز.
الجزء الفعال من مجموعة أدوات واجهة المستخدم الخاصة بك
فاذا كنت فى مجال التصميم, البناء او صيانة الواجهات، فستحتاج إلى الحصول على بعض البيانات حول كيفية تفاعل الأشخاص معها. تعتبر خرائط التمثيل الحرارى جزءًا قيمًا من مجموعة أدوات واجهة المستخدم.
ومن المؤكد انك تعلم مزايا التصميم باستخدام خاصية تتبع العين (هو قياس لنظرة المستخدم عند التفاعل مع واجهة المستخدم) فى العقل, ولكن توفر خرائط التمثيل الحرارى بديلاً أرخص وأسهل لجمع بيانات تتبع العين.
ان من اكبر مميزات خرائط التمثيل الحرارى المتحركة هو اعطاء تقييم جيد عن المكان الذى ينظر اليه المستخدم عند التنقل بين واجهاتك:حيث اظهرت دراسة اجرتها شركة جوجل عن ارتباط العين بالفأر, كما وجدث ابحاثا تابعة لشركة مايكروسوفت أن متوسط المسافة بين موقع النظرة والفأرة هو 90 فقط بكسل.
بالاضافة الى ذلك يمكن دمج بيانات الحركة مع التمرير والنقر على خرائط التمثيل الحرارى للحصول على رؤية أكثر شمولاً عن كيفية مواجهة المستخدمين للواجهة أو التصميم.
خريطة التمرير (يسارا) وانقر فوق الخريطة (يمينا) للصفحة المقصودة نفسها
كيف تعمل خرائط التمثيل الحرارى على تحسين تصميم واجهة المستخدم؟
عند تنفيذ خرائط التمثيل الحرارى على مواقع الويب والتطبيقات, فإنها تتيح لك جمع البيانات على صفحة أو شاشة بأكملها ؛كما تتضمن عناصر التصميم التي تساعدك على اختبارها ، والتكرار ، والتحسين على:
الأزرار: التنسيب والنمط
الملاحة: القوائم ، فتات الخبز ، والروابط
الصور: التنسيب والحجم والروابط والنوع
النص: التنسيق ، الطول ، التنسيب
التخطيط العام: التسلسل الهرمي للمعلومات
حيث ستساعدك خريطة التمثيل الحرارى فى العثور على الافكار المعاد تصميمها وتحديد عناصر التصميم ذات الأداء الضعيف للتخلص من إطار العمل التالي الخاص بك. بالاضافة الى ذلك يمكنك جمع هذه البيانات دون مقاطعة رحلة المستخدم. على عكس الاستطلاعات على الصفحة أو النوافذ المنبثقة ، تعمل خريطة التمثيل الحرارى بصمت في الخلفية دون أي تعطيل لتجربة المستخدم.
فهم الفوائد الخاصة لتصميمك
كأداة عمل مرئية, فأن خرائط التمثيل الحرارى لديها فائدة اضافية: حيث من السهل جدًا إظهارها لغير المصممين.
ففي كل مرة تحتاج فيها إلى عملية شراء لإعادة التصميم أو التحدث إلى غير المصممين حول التحسينات المحتملة ، سيساعد وجود خريطة للتمثيل الحرارى لعرض البيانات بشكل مرئي في دعم مقترحاتك وإظهار فعالية تصميماتك للأشخاص عبر الفرق.
من الصعب الجدال مع بيانات خرائط التمثيل الحرارى
خمس حالات لاستخدام خريطة التاثير الحرارى فى تصميم واجهة المستخدم
ان تصميم خريطة جميلة ومبهجة ربما يبدو بالشئ الممتع(وهو كذلك) ، ولكن هناك ثقل خلف هذه البيانات أكبر من مجرد صورة جميلة. خذ هذه القائمة من حالات الاستخدام الخمسة كنقطة انطلاق لأول تجارب خرائط التمثيل الحرارى الخاصة بك.
افهم اذا كان نداؤك الى العمل يحصل على اكثر عدد من النقرات
نوع خريطة التمثيل الحرارى: انقر على الخريطة
ما الذى يجب ان تبحث عنه؟ هل تحصل دعوتك الى العمل على معظم النقرات؟ اذا كانت الاجابة لا, اذا من يحصل على النقرات بدلا من دعوتك للعمل مما يؤدى الى تشتيت المستخدمين؟
تحسين واجهة المستخدم: ان الاجراء الواضح الذى يمكن اتخاذه هو نقل “نداؤك الى العمل” الى المكان الاكثر نقرا بواسطة المستخدمين ولكن ربما تريد التأكد بنفسك من ذلك بشكل افضل: هل “نداؤك الى العمل” هو الشئ الذى يبحث عنه المستخدمين؟
اكتشف الى اى مدى يتم استخدام التمرير
نوع خريطة التأثير الحرارى:تمرير الخريطة
ما الذي تبحث عنه: أين يتوقف المستخدمون عن التمرير لأسفل الصفحة؟ هل توجد معلومات مهمة موجودة أسفل هذه النقطة؟ هل هناك قيعان مزيفة حيث ترى عدة مستخدمين يتوقفون عن التمرير؟
تحسين واجهة المستخدم: نقل العناصر الأساسية فوق متوسط الطول وإزالة الانحرافات المحتملة أو العناصر المربكة التي تثني المستخدمين عن التمرير أكثر. ومن ثم النظر في إنشاء صفحات متعددة وقصيرة.
3-التعرف على النقرات الزائفة
نوع خريطة التاثير الحرارى: انقر على الخريطة
ما الذى تبحث عنه: ما هي الروابط التي لا ينقر عليها المستخدمون باستمرار؟ هل يقوم المستخدمون بالنقر فوق الصور أو العناصر التي تبدو وكأنها أزرار؟
تحسين واجهة المستخدم: انشاء روابط لتوجيه المستخدمين بشكل صحيح: توضيح العناصر غير المهمة لتقليل النقر عليها.
4-تسليط الضوء على المستخدمين المشتتين
نوع خريطة التاثير الحرارى: الانتقال الى الخريطة
ما الذى تبحث عنه: هل يتنقل المستخدمون حول الصفحة بشكل عشوائي – المشار إليها بالكثير من البقع الصغيرة من “مستوى الحرارة المنخفض” غير المتصلة والكثير من النقاط حول الصفحة – مع القليل من المناطق الغير ساخنة.
تحسين واجهة المستخدم: تقليل عناصر إعادة جذب الانتباه أو إعادة تصميمها لمنح المستخدمين تركيزًا اوضح على كل صفحة. أنشئ تدفقات مرئية خطية (على سبيل المثال ، أعلى اليسار إلى اليمين) لاستكمال الأسلوب الطبيعي لقراءة الزائرين.
5-مقارنة سلوك جهازك
نوع الخريطة: نقر وتمرير
ما الذى تبحث عنه: عندما تقارن خرائط التمثيل الحرارى الخاصة بجهاز مثل (سطح المكتب مقابل الموبايل) هل يفتقد مستخدمون الجوال عناصر هامة؟ هل مستخدمون سطح المكتب يتصرفون بشكل مختلف؟
تحسين واجهة المستخدم: استخدم البيانات لتحسين التصميمات والواجهات المختلفة على سطح المكتب والجوّال حتى تكون التجربة عبر الأجهزة متسقة.
الجمع بيانات خرائط التأثير الحرارى للحصول على رؤية أعمق
من تلقاء نفسها: تقدم خرائط التمثيل الحرارى الكثير من القيم, ولكن هناك الكثير مما يمكنك فعله معهم جنبًا إلى جنب مع مصادر البيانات الأخرى. سأقدم لك مثالين:
1-خرائط التمثيل الحرارى وتسجيلات الجلسة
تسجيل الجلسات (أو إعادة قراءة الجلسة ، أو تسجيلات الزائرين) وانتزاع حركات الفأرة الدقيقة للمستخدمين الافراد وهي ثاني أفضل طريقة لمشاهدة الأشخاص تنتقل في التصاميم الشخصية.
يتم تجميع خرائط التمثيل الحرارى لتمثيل المستخدم المتوسط ولكن تسجيلات الجلسة تتيح لك تكبير التجارب الفردية ، لذلك إذا كنت قد رصدت شيئًا مثيرًا أو غير معتاد في خريطة الحرارة ، فيمكنك فقط الجلوس ومشاهدة بضع تسجيلات لمعرفة مكان الأشخاص المتعثرة بالضبط.
2- خرائط التمثيل الحرارى +موقع ردود الفعل
تساعد تعليقات موقع الويب على تفاعل المستخدمين.
بمجرد ان تكتشف مشكلة بتصميم خريطة التمثيل الحرارى, فان تجميع الملاحظات النوعية يساعدك في البحث عن السبب وراء ذلك. انه شئ واحد من المهم أن نراه بشأن الكثير من الأشخاص الذين يفشلون في التقدم إلى أسفل الصفحة من خلال خريطة التمرير ، ولسبب آخر تمامًا لقراءة تفسيرهم (الغاضب) لما لا يعمل لديهم.
تتيح لك استطلاعات الرأي أو الاستطلاعات البسيطة في الصفحة طرح أسئلة واضحة للمستخدمين مثل:
-هل وجدت ما تحتاجه اليوم؟
– ما الذي يمنعك من المتابعة؟
– ما المفقود في هذه الصفحة؟
– إذا كان بإمكانك تغيير شيء واحد فقط في هذه الصفحة ، فماذا سيكون؟
في عالم تصميم واجهة المستخدم ، تتغير الاتجاهات ، وتتطور احتياجات المستخدمين, وما نجح فى الامس ربما يفشل فى الغد ولكن هناك شيء واحد سيبقى على حاله دائمًا: معرفة المزيد عن الأشخاص الذين تصمم لهم هو مفتاح تنقية عملك وتحسينه.
تعتبر خرائط التمثيل الحرارى طريقة رائعة للاستمرار في تقديم تجارب قوية من خلال تصميم أفضل لواجهة المستخدم.
للكاتبة : فيو دوسيتو
جميع الصور بتصرف من المصدر
ترجمة : آية رضوان Invisionapp –
الكاتبة :Fio Dossetto
المصدر: https://www.invisionapp.com/inside-design/heatmaps-for-ui-design/
