أهم اعتبارات واجهة المستخدم لأفضل تصميم PWA

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

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

خطوط النظام

إذا كنت تريد أن يشعر المستخدمون بالراحة أثناء استخدام تطبيق الويب التقدمي (PWA) ، فيجب تحسين أسلوبه قليلاً ليتناسب مع نظام التشغيل (OS) الخاص بهم. قبل تنفيذ قوائم وأزرار مختلفة لكل نظام أساسي ، يمكنك فقط البدء بالخط المفضل للنظام ، لأنظمة iOS ، و Android ، و Windows بشكل منفصل.

بمعنى آخر ، دع العمل الشاق الذي تقوم به Microsoft (Segoe) أو Google (Roboto) أو Apple (سان فرانسيسكو) أو حتى Mozilla (Fira Sans) يجعل عملك أسهل من خلال تحسين تجربة المستخدمين. نتيجة لذلك ، تعد خطوط النظام عنصرًا واحدًا يجب ألا تتركه خارج قائمتك.

 / * iOS * /
عائلة الخطوط: 'Helvetica Neue' و Helvetica و Arial و sans-serif ؛

/* ذكري المظهر */
عائلة الخطوط: "RobotoRegular" ، "Droid Sans" ، sans-serif ؛

/* هاتف ويندوز */
عائلة الخطوط: 'Segoe UI'، Segoe، Tahoma، Geneva، sans-serif؛

أيقونات التطبيق

صحيح أن مصممي تطبيقات الأجهزة المحمولة يولون اهتمامًا خاصًا لتصميم الأيقونات. ونظرًا لأن PWA الخاص بك (من خلال إضافته إلى الشاشة الرئيسية) سيجلس بجوار بقية التطبيقات الأصلية ، يجب التفكير في تصميم الرمز الخاص به أيضًا.

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

لجعل أيقونات PWA الخاصة بك تنسجم مع بقية التطبيقات في جهازك ، يجب أن تكون مرنة لتلائم الأنظمة الأساسية المختلفة - مثل Android و iOS و Windows - وأن تستوعب العناصر الأسلوبية (شكلها ، كيف تبدو مع / بدون الخلفيات أو بألوان مختلفة ، إلخ). هناك طريقة جيدة للقيام بذلك وهي جعل تصميم رمز PWA الخاص بك يطابق - أو على الأقل يقترب من - المعيار المرئي لأيقونات التطبيقات المحلية. أحد مصادر الإلهام هو إرشادات التصميم متعدد الأبعاد من Google ، الرموز المادية لـ Google.

 يوصى بقراءة: PWA مقابل التطبيق الأصلي: أيهما يناسبك بشكل أفضل؟

تفاعلات اللمس

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

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

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

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

محتوى قابل للمشاركة

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

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

ردود الفعل التي تعمل باللمس

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

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

مثال على ردود الفعل اللمسية التي تم إجراؤها بشكل جيد:

يوفر تطبيق الويب Google I / O 2016 تمييزًا رماديًا فوريًا عند النقر على محادثة وتعطيل لون النقر الأزرق الافتراضي (بشكل افتراضي ، تُظهر بعض المتصفحات تمييزها الخاص عند النقر على العناصر. هذا التصميم الافتراضي غير جذاب وقد يتعارض مع جودة بصرية العلامة التجارية).

ثانيًا ، يجب ألا يؤدي لمس عنصر أثناء التمرير إلى تشغيل تعليقات اللمس .

عندما تقوم بتنفيذ ملاحظات اللمس ، من المهم ألا يتم تشغيلها عن طريق الخطأ عندما يلمس المستخدم عنصرًا فقط لـ SCROLL الصفحة.

مثال على ردود الفعل اللمسية المقدمة في الوقت الخطأ:

أحدثت نسخة مبكرة من مكتبة Material-UI الشهيرة تموجات على العناصر الملموسة عندما تم لمسها أثناء اللفائف.

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

احتفظ بموضع التمرير في صفحة القائمة السابقة

يجب أن يؤدي الضغط على رجوع من صفحة التفاصيل إلى الاحتفاظ بموضع التمرير في صفحة القائمة السابقة

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

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

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

تجنب الإفراط في التصميم "الشبيه بالويب"

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

على سبيل المثال ، يجب استخدام الروابط باعتدال. يجب وضع الأزرار أو المناطق القابلة للضغط بعناية.

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

مظهر داكن

المظاهر المظلمة موجودة لتبقى وستتحسن فقط.

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

أولئك الذين يمكنهم إيجاد التوازن بين إمكانية الوصول إلى واجهة المستخدم المظلمة والاستجابة العاطفية للألوان الساطعة سيكونون في القمة العام المقبل. هناك دليل من Google Material يمكنه مساعدتك.

ختاماً

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

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