هل سبق أن استوقفك موقعٌ إلكتروني عندما دخلت إليه من الهاتف المحمول؟ سيطر عليك التشتت والمساحات البيضاء في الواجهة؟ وبالمثل، هل سبق أن فتحت تطبيقًا من جهاز الكمبيوتر ولاحظت الازدحام المزعج للمعلومات؟ من هنا جاءت فكرة دراسة تجربة المستخدم ما بين المواقع الإلكترونية وتطبيقات الموبايل.
تتشابه خصائص تصميم تجربة المستخدم في الهاتف المحمول والجهاز اللوحي كثيرًا. لكن معرفة الاختلافات الجوهرية في التصميم بين الواجهتين سيرتقي بالتأكيد بمشروعك التصميمي نحو الأفضل. لأن إتقان تلك الاختلافات سيساهم في تلبية احتياجات مختلف المستخدمين بدقة وبالتالي تحسين خدمة العملاء.
ملاحظة هامة قبل البدء: أجرينا هذه المقارنة باعتبار أن المُستخدم سيتّجه غالبًا إلى التطبيقات عند استخدام الموبايل، بينما سيتصفّح المواقع الإلكترونية عبر الأجهزة ذات الواجهات الأكبر كالأجهزة المكتبية والكمبيوترات.
اعتبارات تجربة المستخدم ما بين المواقع الإلكترونية وتطبيقات الموبايل
هناك العديد من الاعتبارات التي ينبغي التفكير فيها عند تصميم تجربة المستخدم في واجهتين مختلفتين كالموبايل والشاشات المكتبية مثل: شكل الواجهة – طريقة التفاعل – الأداء – التحديثات وغيرها. لنكتشف معًا أهم الاختلافات والتوصيات.
اعتبارات تصميم واجهة المستخدم للمواقع الإلكترونية وتطبيقات الموبايل
بالنسبة لمصمم تجربة المستخدم فإن واجهة الاستخدام ليست مجرد مساحة يمكن وصفها بـ كبيرة أو صغيرة. إن حجم الشاشة مهم فهو يحتوي على عناصر التصميم والتسلسل الهرمي للمعلومات (Information hierarchy) ويحدد نهج تجربة المستخدم (User Experience) بالكامل.
كما نلاحظ مهما كان نوع الموبايل فهو ذو مساحة عرض محدودة لذا يتطلب محتوى موجز جدًا ويرتكز على المعلومات المهمة. لأن التحميل الزائد على شاشة الموبايل قد يشتت المستخدم. من جهة أخرى توفر المواقع الإلكترونية – عند دخولها من جهاز مكتبي كما سبق وشرحنا – مرونة أكثر في استيعاب المعلومات والمحتوى المكثّف والمعقد. بل إذا كان المحتوى موجز وقليل فقد تشعر أنها فقيرة بالمعلومات.
يكمن مفتاح نجاح تصميم تجربة المستخدم في كِلا الواجهتين في فهم نقاط القوة والضعف لكل منصّة والتعامل معها. وفقًا لشركة Adobe، يتوقف 38% من المستخدمين عن التعامل مع الموقع الإلكتروني إذا كان تخطيط محتواه غير جذاب. لذا هناك عدّة اعتبارات يجب التأكد منها قبل عملية التصميم في كل من المواقع الإلكترونية وتطبيقات الموبايل:
| الاعتبارات (وجه المقارنة) | تصميم واجهة المستخدم في تطبيقات الموبايل | تصميم واجهة المستخدم في المواقع الإلكترونية |
| الأولويات | بساطة الواجهة: بالنظر إلى حجم الشاشة المحدود، ينبغي أن يركّز المصمم على الوظائف الأساسية وأولويات مهام المستخدم. أن يحاول الابتعاد عن عوامل التشتيت ويستخدم مبادئ التصميم البسيط | سرعة الاستجابة: باعتبار المستخدم يتّجه إلى الأجهزة المكتبية والأجهزة اللوحية الأكبر حجمًا لاستخدام مواقع الويب، فيجب التركيز على سرعة الاستجابة عند فتح الموقع لضمان تجربة مستخدم مريحة ومتّسقة |
| حجم الخط ونوعه | ينبغي ترتيب المحارف بشكل جذاب ومقروء تمامًا بحيث يكون حجم الخط صغيرًا وواضحًا | يتحمّل الموقع الإلكتروني تنوّعًا خطّيًا وأحجام خطوط كبيرة نوعًا ما |
| العناصر التفاعلية | هنا غالبًا ما يتم استخدام النصوص المصغرة (Microcopy) لضيق المساحة. ينبغي أن يكون حجم الأزرار ووسائل التفاعل مناسبًا للّمس (يُوصى بـ 44 × 44 بكسل لأجهزة الموبايل) | تُعطي المساحة الكافية واستخدام الماوس في الأجهزة المكتبية وتلك ذات الشاشات الكبيرة المصمم رفاهية تصميم العناصر التفاعلية بالطريقة المناسبة. كما يمكنه التحكم بإظهار عناصر جمالية أخرى وأدوات التلميح والمعلومات الجانبية وما إلى هنالك |
| تصميم الصّور والوسائط الأخرى | يراعي المصمم تحسين الصّور ليتمكن المستخدم من تحميلها بسرعة | هناك مجال أكبر لتحميل صورة عالية الدقة ووسائط أخرى أكثر تعقيدًا |
اعتبارات طريقة التفاعل: النقر بالإصبع والنقر بالماوس
تختلف طريقة المستخدمين في التفاعل مع المحتوى بين كل من المواقع الإلكترونية وتطبيقات الموبايل. ترتكز طريقة التفاعل المستخدم في الموبايل على اللمس الناعم والإيماءات الحذرة والنقر الدقيق. بينما تقتضي طريقة التفاعل في الموقع الإلكتروني من جهاز مكتبي النقر والتمرير بالفأرة. كما نلاحظ، هذا اختلاف أساسي يجب أخذه بعين الاعتبار أثناء التصميم. لأنه يؤثر على سهولة الاستخدام والتنقل وتنفيذ الوظائف المتتالية التي تساهم في تحقيق أهداف المستخدم وتوقعاته خلال التجربة.
وفقًا لدراسة أجرتها Nielsen Norman Group، ينبغي أن يستطيع المستخدم الحكم على موقع إلكتروني بكونه تفاعلي بامتياز (قابلية النقر والتفاعل جيدة) خلال أول 10 ثوانٍ من المشاهدة. وفي الناحية المثالية ينبغي أن يستطيع قراءة ذلك خلال 2 ثانية. هذا ما يبيّن أهمية تصميم عناصر تفاعلية فعّالة.
أهم الاعتبارات في طريقة التفاعل بين الموبايل والموقع الإلكتروني:
| الاعتبارات (وجه المقارنة) | طريقة التفاعل في تطبيقات الموبايل | طريقة التفاعل في المواقع الإلكترونية |
| الإيماءات والتمريرات | الإيماء: يدعم الموبايل مجموعة من الإيماءات التي تسهّل على المستخدم التنقّل. من بينها السحب بالإصبع (Swipe) والضّغط بإصبعين معًا على الشاشة (Pinch) لاتخاذ إجراء (مثل التكبير والتصغير) | التمرير: يتم تصميم المواقع الإلكترونية لتناسب أسلوب التمرير. يحدث التمرير عندما يضع المستخدم مؤشر الماوس فوق عنصر معين في صفحة ويب دون النقر عليه بحيث يكشف المحتويات. يُعرف أيضًا باسم “تأثير تمرير الماوس” ويُستخدم في قوائم التنقل والأزرار والروابط في المواقع الإلكترونية لتحسين تجربة المستخدم وتقديم تعليقات مرئية فورية وتلميحات والكشف عن محتويات إضافية |
| المناطق القابلة للنقر | ينبغي أن تكون منطقة النقر كبيرة بشكلٍ كافٍ لإصبع المستخدم بحيث يتجنب النقرات غير المقصودة | مناطق النقر متباعدة لتجنب النقرات الخاطئة الناجمة عن حركة الماوس |
| مدة الاستجابة | بالنظر إلى الاستجابة السريعة في عمل تطبيقات الموبايل مقارنةً بالمواقع الإلكترونية، ينبغي أن تكون استجابة النقرات سريعة أيضًا (مثل أن تتشكل إشارة “صح” على الزر عند إتمام المهمة أو أن يتغير لونه إلى الأخضر) | من الطبيعي أن تأخذ استجابة النقرات وقتًا أطول بقليل من استجابة التطبيق على الهاتف المحمول |
| إمكانيات ومزايا الاستخدام | يحتاج المستخدم إلى تمييز العناصر القابلة للنقر في كِلا الواجهتين. ذلك يمكن تحقيقه من خلال المزايا التي تساعد المستخدمين على معرفة ما يجب عليهم فعله دون الحاجة إلى استخدام الصور أو الإرشادات. من الأمثلة الرائعة على ذلك هي الأزرار المصممة بحيث يعرف المستخدم أنه يمكنه الضغط عليها لأنها تشبه الأزرار التي يستخدمها في الحياة الواقعية مثل زر المكواة أو الطبّاخ الكهربائي. | |
| إمكانية الوصول | تأكد من إمكانية الوصول إلى العناصر التفاعلية. يتضمن ذلك الاعتبارات الخاصة بالمستخدمين ضُعاف البصر مثل أيقونات النقر الأكبر في التطبيقات والأكثر وضوحًا في الموقع الإلكتروني. | |
اعتبارات أوقات التحميل والأداء
يتوقع المستخدم أوقات تحميل سريعة في تطبيقات الموبايل والمواقع الإلكترونية. تخزّن التطبيقات البيانات محليًا ما يوفر أوقات تحميل أسرع بعد الإعداد الأولي. تعتمد المواقع الإلكترونية أيضًا على الخوادم ما يعني إنشاء صور مُحسّنة وتقليل وقت التحميل. لكن لا يجري الأمر دائمًا بسلاسة هكذا.
قد يؤدي التخزين المحلي الدائم إلى تضخّم بيانات التطبيق. كما أن الاعتماد الكبير على الخوادم لمواقع الويب يمكن أن يؤدي إلى أوقات تحميل مزعجة خلال فترات الذروة.
بيّنت دراسة أجرتها هيئة الإذاعة البريطانية BBC أن كل ثانية إضافية يستغرقها الموقع أو التطبيق في التحميل تتسبّب في خروج 10% من المستخدمين من الصفحة أو التطبيق. لذا إليك بعض التوصيات حول أوقات التحميل والأداء في المواقع الإلكترونية وتطبيقات الموبايل:
- ينبغي إعطاء الأولوية للمحتوى الموجود في الجزء العلوي من الصفحة أو التطبيق: تأكد من تحميل المعلومات والموارد الأهم التي ستظهر للمستخدم أولًا كي يلاحظ سرعة التحميل والأداء.
- تحسين أحجام الصور: قد يتطلب الأمر ضغط بعض التنسيقات للحفاظ على الجودة مع تقليل وقت التحميل.
- استخدام شبكات توصيل المحتوى (CDNs): يمكن لشبكات CDN توزيع الحمل وتوفير النطاق الترددي اللازم وتسريع الوصول للمستخدمين من مواقع جغرافية مختلفة.
- استخدام تقنية التحميل البطيء (lazy loading): تعمل هذه التقنية على تأخير تحميل العناصر غير الأساسية حتى أوقات الحاجة إليها أو عند دخولها مجال العرض للمستخدم.
- تخزين البيانات: بالنسبة للتطبيقات، يُمكن استخدام تخزين البيانات لتسريع عملية استرجاع البيانات المتكررة. أما بالنسبة للمواقع الإلكترونية فيمكن استخدام التخزين المؤقت للمتصفح.
اعتبارات الوصول بدون إنترنت
إحدى الاختلافات الواضحة بين تجربة المستخدم مع تطبيق الهاتف المحمول والموقع الإلكتروني على الجهاز المكتبي هي جزئية الاتصال بالإنترنت. توفر العديد من تطبيقات الهاتف المحمول ميزة الاتصال بدون إنترنت ما يسمح للمستخدمين بالتفاعل حتى بدون اتصال. على الرغم من أن أغلب المواقع الإلكترونية تتطلّب اتصالًا بالإنترنت إلا أن بعضها يتيح تخزين البيانات مؤقتًا. كما تعمل تطبيقات الويب التقدّمية (PWAs) على سدّ هذه الفجوة حيث تقدم تجارب شبيهة بتلك التي تقدمها التطبيقات العاملة دون اتصال بالإنترنت.
هناك العديد من النصائح الخاصة بالوصول دون إنترنت ينبغي أخذها بعين الاعتبار عند تصميم تجربة المستخدم في المواقع الإلكترونية وتطبيقات الموبايل:
- ينبغي تقديم تنبيهات لطيفة للمستخدم عندما يكون المحتوى غير متاح للاستخدام بدون وصول. ذلك باستخدام المؤشرات لتحديد العناصر القابلة للاستخدام والأخرى غير القابلة للاستخدام في الصفحة أو التطبيق.
- استخدام ميزة Offline-first أي “عدم الاتصال من بداية الاستخدام” في تصميم تطبيقات الموبايل: حاول تصميم تطبيق الهاتف المحمول مع ميزة “عدم الاتصال من البداية” التي تجعله يؤدي الوظائف الأساسية دون الاتصال بالإنترنت أو تتم مزامنة البيانات بعد استعادة الاتصال.
- جعل تجربة التصفح بدون إنترنت ألطف في المواقع الإلكترونية: بدلًا من عرض رسالة بسيطة فحواها “أنت غير متصل بالإنترنت”. قدّم مجموعة من الميزات أو المحتوى الذي يمكن الوصول إليه بدون إنترنت. مثل مقالات محفوظة في ذاكرة التخزين المؤقت أو حتى ألعاب بسيطة مسلّية.
- مزامنة البيانات: إن تصميم الأنظمة التي تعمل مع وبدون اتصال بالإنترنت يحتاج وجود آلية قوية لمزامنة البيانات بمجرد الاتصال بالإنترنت.
- حفظ المحتوى للعرض في وضع عدم الاتصال: السماح للمستخدم بتحديد وحفظ محتوى معين وعرضه في وضع عدم الاتصال هو ميزة رائعة.
الاعتبارات الخاصّة بالتحديثات
تختلف آلية إطلاق التحديثات ما بين تطبيقات الموبايل والمواقع الإلكترونية ويؤثر ذلك على تجربة المستخدم بشكل كبير. يُمكن إنجاز التحديث فورًا في المواقع الإلكترونية ويرى المستخدمون ذلك فور إتمام التحديث. بينما يتطلب التطبيق تنزيل التحديثات ما قد يسبب سوء في فعالية الاستخدام ما لم يتم تنزيل التحديث فورًا. لذا قد يسبب التأخر في تنزيل التحديث في تطبيقات الموبايل مشكلات أمنية ووظيفية كبيرة تعيق تجربة المستخدم.
لذا يحتاج مصمم تجربة المستخدم إلى النظر في هذه الاعتبارات أدناه الخاصة بتحديثات المواقع الإلكترونية وتطبيقات الموبايل لتحسين تجربة المستخدم:
- إشعارات التحديثات الخاصة بتطبيقات الموبايل: من الضروري أن يلاحظ المستخدم روعة التحديث الذي أجريته كي يتشجع ويقوم بتنزيله على الفور. يمكنك تحقيق ذلك من خلال الإشعارات الجذابة والرسائل داخل التطبيق التي توضح بالتفصيل الميزات والتحسينات التي سيحظى بها بعد التحديث.
- اختبار الإصدار: عند الخروج بإصدار جديد خاصةً في تطبيقات الهاتف المحمول – حيث يكون التراجع عن التحديث صعب نوعًا ما -. يُمكنك طرح إصدار تجريبي أولًا ومشاركته مع فئة من جمهورك لتحديد المشكلات والتحقق من سلامة الإصدار.
- استراتيجية التراجع في المواقع الإلكترونية: للحفاظ على تجربة مستخدم متّسقة ينبغي أن يمتلك موقعك استراتيجية التراجع. إذا واجه المستخدم مشكلات غير متوقعة مع التحديث الجديد، سيكون سعيدًا بقدرته على العودة إلى الإصدار السابق.
- توجيه المستخدمين بعد التحديث: لا تفاجئ المستخدم بالتحديثات فور دخوله موقعك أو تطبيقك. من الجيد استخدام أدوات التلميح أو الإرشادات التفصيلية أو حتى مقتطفات فيديوهات قصيرة لتعريف المستخدمين بالميزات أو التغييرات الجديدة.
ختامًا، يُعَدّ إتقان تلك الاختلافات بين تطبيقات الموبايل والمواقع الإلكترونية أكثر من مجرّد طريقة لاختيار التصميم الأنسب. إنها تؤثر على نجاح الخدمة الذي يعني تقديم تجربة جيدة للعملاء وزيادة ارتباطهم بالخدمة. ببساطة، قد يؤثر هذا الموضوع على مدى إمكانية الاحتفاظ بالعميل وضمان ولائه.
لمعرفة المزيد حول تجربة المستخدم ما بين المواقع الإلكترونية وتطبيقات الموبايل، احجز مقعدك الآن في إحدى دوراتنا التدريبية في منصة UX Writing بالعربية. نحن بانتظارك.
الأسئلة الشائعة
ما هي الاختلافات الرئيسية بين تجربة المستخدم على المواقع الإلكترونية وتطبيقات الموبايل؟
عادةً ما تكون تطبيقات الموبايل أكثر تعقيدًا من مواقع الويب لأن المواقع هي مجموعة من الصفحات المليئة بالمعلومات فيُعتبر تصفّحها أسهل. لكن تتمتع تطبيقات الهاتف المحمول عادةً بواجهة أكثر تفاعلية.
أيهما أفضل تصفح المواقع الإلكترونية عبر الجهاز المكتبي أم الدخول إلى تطبيقات الموبايل؟
بشكل عام، يمكن أن تعمل التطبيقات أسرع من المواقع الإلكترونية. ومع ذلك يُفضل الكثير من المستخدمين تصفح مواقع الويب من الأجهزة المكتبية لأنها تتمتع بسطح أوسع. يبقى هذا الموضوع نسبي، تفضيل شخصي لأن لكل منهما ميزاته وسيئاته بحسب آلية تصميم الموقع أو التطبيق.
المقال_ترجمة_بتصرف من المصدر: UX for mobile apps vs. web: Navigating two digital worlds