8 طرق لتحسين موقعك للجوال
عندما تحول العالم من أجهزة الكمبيوتر المكتبية إلى الأجهزة المحمولة ، أصبح المصممون أكثر تركيزًا على تجربة المستخدم. على الرغم من أن واجهة المستخدم تلعب دورًا مهمًا في إنشاء تصميمات ملائمة للجوّال ، إلا أن تجربة المستخدم أصبحت الآن مهمة بنفس القدر ، لا سيما وأن لدينا الآن أجهزة أكثر للتركيز عليها وتختلف تجربة المستخدم مع نوع الجهاز.
UX هو شيء يمتد خارج حدود الرسومات وعلم الجمال. تماما مثل راهول فارشني ، المؤلف المشارك foster.fm ، يقول:
واجهة المستخدم بدون UX تشبه طلاء الرسام الصفع على القماش دون التفكير.
كان راهول على حق في هذا التشبيه. قد يكون لديك إصدار سطح المكتب الأكثر جاذبية وسهولة الاستخدام والفريد والوظيفي لموقع الويب الخاص بك ، ولكن إذا كنت لا تأخذ تجربة المحمول في الاعتبار ، فأنت مجرد رسم بدون أي تفكير.
إذن ، ما الذي يفصل تجربة جوّال جيدة عن تجربة سيئة؟ ليس من الصعب فصل المكونات الرئيسية التي تشكل تصميمًا عالي الفعالية ومثاليًا ومركّزًا على المستخدم. ولكن إليك بعض أفضل الممارسات التي يجب أن توجهك على طول الطريق:
1) لا ترفض المحمول أولا
إذا كان موقعك على الويب يستهدف UX للجوال ، فقد ترغب في كسر التقليد من خلال اتباع إستراتيجية "الجوال أولاً". لا يوجد أي ضرر في اعتناق هذه التقنية عندما تكون متأكدًا من أن معظم المستخدمين سيقومون بالوصول إلى موقع الويب الخاص بك من خلال جهاز محمول. نحن فقط codemyviews تشير إلى أن تصميم مواقع الويب للجوّال ليس مكانًا مناسبًا ، فهناك في واقع الأمر "1.2 مليار مستخدم للويب على مستوى العالم" ولا يبدو أن العدد يتراجع في أي وقت قريب (من المرجح أن يزداد في المستقبل القريب). قد يكون هذا تحديًا بعض الشيء في البداية ؛ ولكن إذا كنت ترغب في وضع المستخدم أولاً ، فيستحق تصويره.
فقط لأنك تهدف إلى تصميم موقع ويب بسيط ، نظيف ، أو محمول - لا يعني أنه لا يجب أن يكون متطورًا. Karimrashid.com هو مثال ممتاز على كيفية مزج البساطة والرقي في تصميم أنيق ونابض بالحياة ، ولكنه أنيق.
2) إنشاء تخطيطات السوائل
ببساطة هناك الكثير من أحجام الشاشات الممكنة للاختيار واختيار أي منها ستصمم. ستحتاج إلى إنشاء تخطيط يتكيف بأكبر قدر ممكن من السهولة مع جميعهم. لحسن الحظ ، هناك تخطيطات سائلة هنا لإنقاذ اليوم!
استنادًا إلى النسب المئوية بدلاً من القياسات المحددة مثل البكسل ، أصبحت التخطيطات السائلة هي المعيار بين محترفي الويب. يمكن أن تكون خادعة ، ولكن التأكد من أن أكبر عدد ممكن من الأشخاص يمكنهم استخدام موقعك بالفعل يستحق الجهد.
3) تهدف للوظيفة
ما هي وظيفة؟ إنه ما تقدمه لزوارك لإنجاز الأمور ، وبسرعة. استنادًا إلى الغرض من موقعك على الويب ، يجب أن تساعد جميع الأدوات ، مثل أقرب مواقع المتاجر ، أو البحث عن المنتجات ، أو مراجعات المنتجات ، أو محولات العملات ، المستخدمين في أداء "الوظائف" المقصودة وتحقيق الأهداف بشكل أسرع.
بورينا ، مزود أغذية الحيوانات الأليفة ، هو مثال مثالي لكيفية جعل "الوظائف" أسهل على صفحة الويب. تحتوي الصفحة الرئيسية على مربع بحث يمكنك من خلاله البحث عن الشيء الذي تبحث عنه. يوجد أدناه عمودان منفصلان لنوع الأغذية الحيوانية التي يتخصصون فيها. يسهل تصفح الموقع بالكامل باستخدام العمود والأزرار والأدوات وعناصر التصميم التي تحدد أفضل أنواع أغذية الحيوانات الأليفة - ثم الشراء - نسيم.
4) تحديد المستخدمين لديك
لا تحاول أن تصبح رافعة لكل الصفقات ، لأنها قد تكلفك مستخدمًا نموذجيًا ، ولا أحد يريد ذلك. تعرف أولاً على مستخدمي موقعك. ثم معرفة سلوك تصفح الويب المعتاد. بمجرد وضع هذا جانبا ، معرفة ما يجعلها علامة. يتألف المستخدمون العصريون من نوعين رئيسيين: أولئك الذين يتصفحون دون وضع هدف في ذهنهم ، وأولئك الذين يتطلعون إلى أداء مهمة ما. تتطلب كل مجموعة من هذه المجموعات "وظائف" مختلفة بناءً على احتياجاتها.
ليس من الصعب تخمين التركيبة السكانية لمستخدمي موقع ويب Body Shop نظرًا لأنه يترك تلميحات في جميع أنحاء الصفحة. بما أن The Body Shop يركز بشدة على "المكونات الطبيعية" والنشاط الاجتماعي ، والتغيرات الخضراء أحادية اللون ، وشريط التمرير من المكونات الطبيعية ، والاختيار "الأخضر" للصور ، وكذلك تقارير عن التجارة العادلة ، والتعهدات ، وغيرها من الأحداث الاجتماعية هو أمر مفهوم مفهوم تصميم متطور.
5) ابحث دائما عن المكتبات والمبادئ التوجيهية للمطورين
استنادًا إلى النظام الأساسي الذي ستستخدمه ، من الضروري إعطاء إرشادات واجهة المستخدم نظرة فاحصة. بعض المنصات تسمح بمرونة أكثر من غيرها. بغض النظر عن الحالة ، يجب أن تظل بعض المكونات الرئيسية للعلامة التجارية أو "التوقيعات".
يجب على مطور تطبيق Apple إلقاء نظرة عليه iOS Interface Guidelines واتباع معايير Apple عندما يتعلق الأمر بتصميم أساسيات واستراتيجيات التصميم وعناصر واجهة المستخدم وتصميم الأيقونات / الصور ، إلخ. يجب على مطور Android ، من ناحية أخرى ، أن يتعلم كل شيء عن المكونات والأسلوب وقابلية الاستخدام والتخطيط لتطبيقات Android النموذجية مع مساعدة من دليل مطوري برامج Android .
6) جعل جميع المحتويات متاحة لجميع المستخدمين
سيختار بعض المصممين ، بدلاً من جعل كل المحتوى الخاص بهم يعملون في تخطيطات مرنة ، ببساطة إخفاء بعضه عن مستخدمي الجوال. في بعض الأحيان يرجع السبب في ذلك إلى أن التصميم صعب ، أو أنهم يشعرون أن هناك محتوى كثيرًا جدًا لتخطيط الجوّال. هذا هو نهج خاطئ.
لا يعد منح المستخدمين إصدارًا "عتيلاً" من موقعك أو تطبيقك ظالماً لمستخدمي أجهزة الجوال فقط ، بل يمكن أن يؤدي إلى نتائج عكسية وخسارة عميقة. قد تضطر إلى تبسيط التخطيط إلى أقصى الحدود ، ونقل بعض المحتوى إلى شاشات أخرى لتقليل الفوضى ، أو مجرد محاولة تنظيمها بشكل أفضل. لكن يجب أن يكون هناك .
قارن نسخة سطح المكتب من موقع بي بي سي إلى النسخة المحمولة. على الرغم من أنها أبسط مما كانت عليه من قبل ، إلا أنها لا تزال تضع كل أنواع المعلومات في جميع أنحاء الشاشة. على النقيض من ذلك ، تسقط النسخة المحمولة بعض الصور (التي لا تزال متوفرة في المقالات نفسها) ، لكنها تحافظ على جميع العناوين الرئيسية ، لتبسط التجربة بشكل كبير على شاشة بحجم الهاتف.
7) تصميم للمس
من المفيد أيضًا أن تضع في اعتبارك حقيقة أن مستخدم الجهاز المحمول سيستخدم الأصابع بدلاً من مؤشرات الماوس الصديقة. يجب أن يكون تصميمك سهل التنقل باستخدام الأصابع من جميع الأحجام والأشكال ، مع الأخذ في الاعتبار أن جميع أجهزة الجوال هي الآن شاشة تعمل باللمس. لا يجب أن يضطر المستخدم إلى الضغط كثيرًا أو تكبيره للاستفادة من شيء أو ملء نموذج أو النقر على زر. كما أن الحنفيات غير الدقيقة شائعة جدًا على الأجهزة الصغيرة التي يجب أن تُحسب في التصميم مع مدخلات أو مساهمات كبيرة باللمس كافية لإنجاز المهمة.
هنا طاولة اللمس بواسطة بيتر بول كوخ التي قد تساعد. لاحظ كيف أن أحداث اللمس (والإجراءات الأخرى) قد تختلف باختلاف توافق الجهاز والجهاز.
8) استخدام أدوات الضغط
إن كمية الأدوات المتاحة اليوم لجعل عمل المصمم أقل عبئا أمر لا يسبر غوره. ستجد ضواغط البرامج النصية مثل ضاغط HTML أو غزيب الضغط الذي سيؤدي إلى إزالة التعليقات غير الضرورية أو المساحة البيضاء أو الشفرة تلقائيًا. منخل CSS و ضاغط CSS وبعض الأدوات الأخرى التي تسمح لك بتسلسل شفرة CSS وتحسين الأداء. ضغط الصورة هو أيضا على نفس القدر من الأهمية. بعض من شأنها أن تقلل من حجم ملفاتك .jpeg و. png مع الحفاظ على جودة سليمة EWWW محسن الصورة ، smush.it ، optiPNG و jpegtran .
وهنا مثال على تصميم محفظة استجابة للغاية من قبل RyJohnson . الموقع مليء بالصور الرائعة التي لا تختلف عن نسخة سطح المكتب. سر التحميل السريع هنا هو ، دون أدنى شك ، تحسين الصورة.
