تصميم مواقع الإنترنت المحمول 10 نصائح لتحسين قابلية الاستخدام

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

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

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

1. اتخاذ قرار بشأن دقة الشاشة

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

فيما يلي قائمة بقرارات الويب الشائعة على الأجهزة المحمولة اعتبارًا من فبراير 2011 والتي قدمتها Uxbooth.com بمقالتها المنشورة, اعتبارات لتصميم مواقع الويب المتنقلة (الجزء 2): الأبعاد, ديفيد ليجيت. يشرح المؤلف بضع نقاط حول أبعاد العرض وحلول تصميم التخطيط.

2. تقسيم صفحات الويب إلى أجزاء صغيرة

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

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

سي بي اس نيوز

معانق الشجرة

3. تبسيط التصميم

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

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

افضل شراء

موقع YouTube

4. الخيار لعرض الموقع الكامل

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

على سبيل المثال ، زر Ars Technica زر الارتباط الخاص به إلى موقع الويب القياسي الموصول على العنوان. في حين أن Shangri-La لديه رابط موقعه الكامل على تذييل الصفحة.

آريس تكنيكا

شانغريلا

5. التنسيب التنسيب

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

D & G

السياسية

برجك اليومي

6. استخدام الروابط النصية

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

قائمة بصرف النظر

رديت

7. قم بالتمييز بين الرابط المحدد

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

فرقة المهوس

ديزل

8. روابط التوازن

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

فليكر

تغريد

9. تقليل إدخال نص المستخدم

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

بالنسبة إلى نموذجنا أدناه ، استفادت شركة Fedex من القائمة المرجعية والقوائم المنسدلة. بينما جعلكم Tumblr تختار لغتك باستخدام القائمة المنسدلة.

فيديكس

نعرفكم

10. لا الملوثات العضوية الثابتة أو ينعش

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

شيء صغير

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

هل لديك أي مواقع للهواتف المحمولة المفضلة ألهمتك حقًا؟ هل يمكنك مشاركة بعض النصائح الخاصة بتصميم مواقع الإنترنت على الجوال؟ دعنا نعرف!

قراءة متعمقة

1. استجابة تصميم الويب (alistapart.com)
2. جعل موقعك المحمول ودية (thinkvitamin.com)
3. W3C mobileOK Checker (w3.org)
4. اي فون محاكي