تجربة المستخدم

٥ نصائح لتصميم ويب افضل للموبيل

   -   438

السلام عليكم , إن شاء الله تكونوا بخير 🙂

من فتره طويله . بدء تبقى نسبه متصفحى المواقع من الموبيل لا يستهان بيها , فى الحقيقه بدأت تنافس بشكل شرس جدا فى الفتره الاخيره نسبه المتصفحين عن طريق الاجهزة المكتبية. شخصيا , اخر مجموعه مشاريع , كان نسبه تصفح الموبيل فيها اعلى من 60٪ ! يعنى بالنسبه دى , و بطريقه الزياده , فى الغالب انا بقيت بستهدف زوار من الموبيل بس على المدى البعيد.

ك UXer يهمنا جدا ان المشاريع تعيش فتره طويله. موش كل يوم هنشتغل على نفس المشروع من جديد. دا فى حد ذاته فشل. فى الفقرات الجايه , فى كذا فكره حطهم فى اعتبارك وانت شغال للموبيل .. هتطلع بنتيجه افضل بأذن الله.

١. RWD & AWD :

حاليا ٩٠٪ من البروجيكتس ريسبونسيف , دا شئ جميل , بس غير كافى .. الريسبونسيف مهما كان بيحدد امكانياتك بشكل ما , مرهق فى بعض الاوقات , و نتايجه موش الافضل دايما. فى الاول و الاخر انت بتعيد ترتيب محتوى موجود بالفعل , ودى ك تجربه موبيل موش حلوه , ممكن بنفسك تجرب تزور موقع بيعرض نفس الداتا عنده ريسبونسيف , و تشوف موقع شغال Adaptive web design , فى الادبتيف انت هترتاح اكتر , رغم انك شخص بيتعامل مع التكنولوجيا بشكل كبير جدا. ما بالك باليوزر العادى.

هنا انا موش بقولك متشتغلش ريسبونسيف ! لا . انت هتشتغل ريسبونسيف عادى جدا 🙂 بالعكس , موش هتغفل اى حاجه فى الريسبونسيف , هتشتغل كأنه الحل الوحيد اللى هتعتمد عليه , و هتتقنه بشكل كامل.

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

فى حل تانى “نسخة الموبيل” !

الحل دا بصراحه انا بشوفه افضل! موش بيعتمد على انى بهلك او بعمل اى حاجه على جهاز المستخدم تماما .. وبتبقى النسخه اخف بكتير جدا , و بحدد طريقه الاستخدام بشكل مريح اكتر. الحل الاخير دا بشكل مختصر , بيعنى انك هتشتغل الموقع بشكل عادى جدا ريسبونسيف , و فى نفس الوقت , هتعمل نسخه مخصصه للموبيل. الريسبونسيف هينقذك فى حاله ان اى مستخدم انت مقدرتش تحدد هو بيشتغل من ايه , او دخل من شاشه مهما كان حجمها. و نسخه الموبيل . تقدر من خلال تعمل تصميم موقعك ك تطبيق . دا هيفرق كتير جدا معاك , و مع اليوزر , و نتايجه هتكون مضمونه تقريبا :).

٢. فهمك لوقت المستخدم :

مستخدم الموبيل , فى الغالب مشغول , او بيقضى بالكتير ٥ دقايق ولا ١٠دقايق ولا حتى نص ساعه ! موش كفيله انك تهوسه اعلانات , و الموقع يحمل بشكل بطئ ولا حتى انك تعمله كونتينت يتقرى فى ١٠ سنين !

موش بقول انك تخلى المحتوى خفيف لدرجه ان اليوزر ميكملش دقيقه و يكون عرف كل اللى هو عاوزه و سابك ! لا .. بس موش معنى كده انك تدوشه  .. فى طريقه ناجحه اكتر و من غير ما يكون دمك تقيل على المستخدم.

تقدر تتبع معاه اسلوب كلامك مع اى شخص عادى , بمعنى ! انى مثلا بتكلم مع واحد صاحبى بخصوص موضوع ما , من المتوقع . انى ممكن انقل كلامى لمواضيع مرتبطه. وضحت الفكره ؟

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

٣. المحتوى المتوقع :

المستخدم زى ما قولنا , انه مستعجل ! براحته 😀 , بس فى حاجه تقدر تسيطر بيها اكتر على المستخدم , و تديله تجربه افضل. انك تنقى المحتوى الخاص بيه. فى معلومات كتير انت تقدر تعرفها عن مستخدميك , ممكن تظهر المحتوى بناء على البيانات دى. الطريقه دى هتوفر وقت اليوزر بشكل كبير , و هيحس انه الموقع دا مخصص ليه , مهتم بيه هو بالاخص ! دا هيفرق كتير فى الارتباط اللى ممكن يحصل بين اليوزر و بين مشروعك.

٤. امكانيه الضغط او “Clickability” :

دى نقطه مهمه جدا فى الموبيل. كل العناصر المرتبطه بأكشن عند الضغط عليها , لازم يكون فيها امكانيه ضغط من ناحيه المساحه مريحه للمستخدم. دا لوحده موش كفايه. فى حجات تانيه من البديهى انها موش موجوده . زى مثلا فى عرض المقال , تبقى حاطت زرار “إقراء المزيد” .. هحاول استوعب انها مناسبه للمستخدم من الديسك توب “لو ان دا غلط تماما” , لكن فى الموبيل ! الموضوع ملوش ادنى حجه او تفسير منطقى !

كل الايقونز , العناوين المرتبطه بروابط , التحكم بالكامل , لازم تراعى فيه ان دا يوزر من شاشه صغير , مينفعش يبقى بيحسس على الشاشه علشان يضغط صح على شئ ما هينقله لخطوه او لصفحه تانيه ! النقطه دى كفيله انه يقفل تصميمك و هو باله مرتاح و حاسس انه انقذ نفسه من حبل المشنقه !

٥. تناسب الواجهه مع الموبيل :

فى تصميم الموبيل , لازم تبقى فاهم كويس ان دا فى الاول و فى الاخر تصميم للموبيل .. يعنى البيئه حوليك كلها ماشيه بشكل ما , و اليوزر نفسه مناسب ليه الشكل دا , او متوقعه .. لازم متروحش لبعيد عن الاسس دى .. لازم يبقى الشكل قريب للبيئه الكامله اللى هتكون حوليه , و كذلك فى الاكسبرينس. من ناحيه القوايم و غيرها.

 

دى خمس نقط بساط , ممكن يفتحوا ليك نقط تانيه من خلال قرايتهم , يارب تكونوا استفدتوا ..

دمتم سالمين 🙂

 

المناقشة و النشر