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

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

وفقًا لـ Statista ، كانت حركة مرور الهاتف المحمول مسؤولة عن 52.64٪ من إجمالي حركة المرور العالمية في عام 2017 ، مما يعني أن موقع الويب الذي لم يتم تحسينه جيدًا للأجهزة المحمولة يفقد ما يقرب من نصف حركة المرور الخاصة به . بحلول نهاية عام 2018 ، من المتوقع أن تنمو حصة حركة المرور العالمية للأجهزة المحمولة إلى 79٪ ، وهي زيادة استثنائية.

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

يمكنك إجراء اختبار Google المناسب للجوّال هنا.

هل يعني أي من هذا أن الهاتف المحمول أهم من سطح المكتب؟ لا. يقول 83٪ من مستخدمي الهاتف المحمول أنه ينبغي أن يكونوا قادرين على مواصلة التجربة على سطح المكتب إذا رغبوا في ذلك.

ألقِ نظرة على هذا الإصدار المحسَّن للجوّال من eBay مقابل ما سيبدو عليه إذا لم يكن مُحسَّنًا للجوّال. هل يمكنك حتى التفكير في الإصدار غير المحسن؟

من أجل تصميم مواقع الويب التي يمكنها المنافسة على الإنترنت اليوم ، يجب أن يكون مصممو الويب خبراء في تصميم الويب سريع الاستجابة (RWD). من أين يجب أن يبدأوا؟

نهج الهاتف المحمول أولاً لتصميم الويب سريع الاستجابة

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

1. تحتوي مواقع الويب للجوّال على المزيد من المخاوف المتعلقة بقابلية الاستخدام (ويرجع ذلك في الغالب إلى نقص العقارات المعروضة على الشاشة) ، لذلك من العملي والأكثر فاعلية أن يكون التركيز الأساسي على تصميم الأجهزة المحمولة.
2. من الأسهل توسيع نطاق إصدار الهاتف المحمول بدلاً من تقليص إصدار سطح المكتب (مرة أخرى ، بسبب نقص المساحة على مواقع الويب للجوال).
3. يساعد تصميم الويب الذي يعتمد على الجوّال في إعادة تقييم ما هو ضروري بصريًا ووظيفيًا.

يُجبر تصميم موقع ويب كموقع سريع الاستجابة للجوّال المصممين على طرح عدد من الأسئلة المهمة نظرًا لوجود عدد أقل من العقارات المعروضة على الشاشة للعمل معها. فيما يلي الأسئلة التي يجب طرحها:

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

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

ما هي دقة الشاشة ذات الصلة بتصميم الويب سريع الاستجابة؟

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

• 360 × 640 (جوال صغير): 22.64٪
• 1366x768 (كمبيوتر محمول عادي): 11.98٪
• 1920 × 1080 (سطح مكتب كبير): 7.35٪
• 375 × 667 (متوسط ​​الجوال): 5٪
• 1440 × 900 (سطح المكتب المتوسط): 3.17٪
• 720 × 1280 (جوال كبير): 2.74٪

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

على سبيل المثال ، ارتفعت دقة 360x640 (التي تتوافق في الغالب مع أجهزة Samsung التي تستخدم Android) بنسبة 5.43٪ في العام الماضي. يمكن للمصممين استخدام رؤى قيمة مثل هذه لاتخاذ قرار بشأن نقاط التوقف الرئيسية سريعة الاستجابة قبل البدء في تصميم موقع الويب.

ما هي متصفحات الويب الشعبية اليوم؟

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

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

فيما يلي تفصيل عالمي لحصة سوق متصفح الويب للجوال وسطح المكتب.

• الكروم: 55.04٪
• سفاري: 14.86٪
• متصفح UC: 8.69٪
• Firefox: 5.72٪
• الأوبرا: 4.03٪
• إنترنت إكسبلورر: 3.35٪

لا يقتصر التصميم سريع الاستجابة على "جعل كل شيء مناسبًا" فحسب - بل يتعلق أيضًا بالتكيف مع إمكانيات أجهزة الجهاز ومتصفح الويب بالإضافة إلى دقة الجهاز. يمكن أن يكون أحد الأمثلة على ذلك أنه بينما يدعم Google Chrome خاصية overscroll-behavior: (التي تحدد ما يحدث عندما يقوم المستخدم بالتمرير بشدة نحو حافة منفذ العرض) ، فإنه غير مدعوم في أي متصفح ويب آخر.

أفضل ممارسات التصميم المتجاوب

القضاء على الاحتكاك

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

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

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

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

تصميم للإبهام

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

دعنا نلقي نظرة على بعض الأمثلة:

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

يوصى بالقراءة: الدليل الأساسي لاستخدام الهاتف المحمول.

استفد من الأجهزة الأصلية للأجهزة المحمولة

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

دعنا نلقي نظرة على بعض الأمثلة:

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

اجعل المخططات سائلة / قابلة للتكيف افتراضيًا

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

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

ضع هذه النصائح في الاعتبار عند تصميم التخطيطات المرنة / التكيفية:

• ستسمح وحدات النسبة المئوية للعناصر بأن تكون سائلة.
• يمكن أن يؤدي تعيين الحد الأدنى والحد الأقصى للعرض إلى تمكين سيناريو "ولكن لا تكون أصغر / أكبر من هذا".
• يمكن زيادة حجم تنسيقات صور SVG وتقليصها دون فقد الجودة ، كما أنها مستقلة عن الدقة (على عكس JPGs و PNG ، وهي ليست كذلك).

لا تنسى الاتجاه الأفقي

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

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

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

تذكر أن الطباعة يمكن أن تكون مستجيبة أيضًا

على الرغم من أن مصممي UX يستخدمون عادةً وحدات البكسل لتصميم مواقع الويب ، على الويب الفعلي ، فإن نقطة واحدة لا تعني بالضرورة بكسل بعد الآن ، لأن الأجهزة المختلفة لها دقة مختلفة. جهاز iPhone X ، على سبيل المثال ، يحتوي على 458 بكسل لكل بوصة (Pixels Per Inch) ، لذلك عندما تصبح أحجام البكسل أصغر ، يمكننا تحقيق رسومات أكثر وضوحًا في نفس المساحة المادية (تطلق Apple على تقنية "Retina" هذه ، ويطلق عليها Android "hDPI").

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

يمكن أن تساعد أدوات تسليم التصميم مثل Zeplin و Sympli و Marvel و InVision المصممين على التعاون مع المطورين في الأمور التي هي مسؤولية مشتركة. بينما ينفذ المصممون التصميم ، وينفذ المطورون الكود ، فإن سير عمل تصميم المنتج ككل هو جهد جماعي يتطلب اتصالًا قويًا.

نصائح لتحسين أداء التصميم سريع الاستجابة وأفضل الممارسات

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

تحميل صور ومقاطع فيديو غير حيوية

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

تحميل مشروط

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

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

صور مستجيبة

كما ذكرنا سابقًا ، تعرض بعض الأجهزة عددًا أكبر من وحدات البكسل لكل بوصة ، مما قد يؤدي إلى تشويش الصور إذا لم يتم تصديرها بالدقة الصحيحة. اعتمادًا على دقة الجهاز ، سيتطلب البعض صورًا بحجم مضاعف (@ 2x) وثلاثية (@ 3x) وحتى أربعة أضعاف (@ 4x). تدعم متصفحات الويب الآن عنصر <picture> ، الذي يختار دقة الصورة الصحيحة اعتمادًا على الجهاز.

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

خاتمة

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

تتيح أدوات التصميم الحديثة مثل Adobe XD و Marvel و InVision للفرق اختبار نماذج أولية على أجهزة حقيقية ومناقشة الملاحظات في السياق والتعاون بشكل عام كفريق حتى يعمل التخطيط في جميع السيناريوهات.

سيضمن استخدام سير عمل Lean UX حيث يتم توجيه التصميم المتجاوب عن طريق الاختبار الداخلي والتعليقات أن تجربة المستخدم تعمل بسلاسة عبر جميع الأنظمة الأساسية ودرجات دقة الشاشة قبل تقديمها إلى مستخدم حقيقي لأول مرة.

• • •

مزيد من القراءة على مدونة Toptal Design:

• تجربة مستخدم التجارة الإلكترونية - نظرة عامة على أفضل الممارسات (باستخدام مخطط المعلومات الرسومي)
• أهمية التصميم المتمحور حول الإنسان في تصميم المنتج
• أفضل مجموعات مصممي UX - أمثلة ودراسات حالة ملهمة
• مبادئ ارشادية للواجهات المتنقلة
• التصميم التوقعي: كيفية إنشاء تجارب مستخدم سحرية