قيود تصميم تجربة المستخدم للجوال وأفضل الممارسات والعمل مع المطورين

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

ما هو تصميم Mobile UX؟

أشارت مقالة حديثة على موقع TechCrunch إلى أن التجارة الإلكترونية عبر الهاتف المحمول تمثل ما يقرب من ثلث إجمالي المبيعات عبر الإنترنت خلال فترة عطلة عيد الشكر لعام 2018 ، وأفادت Digital Trends في عام 2017 أن 5 مليارات شخص في جميع أنحاء العالم لديهم الآن جهاز محمول. أعلنت Google أيضًا أن فهرسة الجوال تُستخدم الآن لأكثر من نصف صفحات الويب في نتائج البحث الخاصة بها.

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

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

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

أفضل الممارسات لتصميم Mobile UX

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

25 نصيحة لتصميم Mobile UX من Google

في عام 2015 ، نشرت Google 25 من أفضل ممارسات تصميم تجربة المستخدم للأجهزة المحمولة بناءً على البحث الداخلي. تم تحديث هذه النصائح مؤخرًا لجعلها أكثر حداثة. يتضمن المؤلف أيضًا ملف PDF قابل للتنزيل لجميع النصائح الـ 25 التي من الجيد الاحتفاظ بها في متناول اليد لأي مشروع UX متنقل.

إرشادات واجهة الإنسان من Apple

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

أفضل ممارسات Mobile UX الإضافية

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

• أبحاث UX . في مرحلة معينة ، قد نشعر بالميل إلى الدخول مباشرة في نماذج بالأحجام الطبيعية أو النماذج الأولية ، ومع ذلك ، فإن إجراء أبحاث UX المناسبة أولاً أمر لا يمكن التقليل من شأنه. تذكر دائمًا أنك "لست المستخدم الخاص بك" ، وتعتمد تجربة المستخدم الإيجابية على بحث شامل عن تجربة المستخدم في كل حالة. فيما يلي دليل Adobe الشامل لأساليب بحث UX لمزيد من المرجع.
• فوضى . لقد عانينا جميعًا من قلق سطح المكتب المزدحم - تخيل ذلك على جهاز محمول! كل زر مضاف ، صورة ، جزء من المحتوى ، وما إلى ذلك ، يجعل الأشياء أكثر تعقيدًا. من الجيد التخلص من أي شيء ليس ضروريًا تمامًا في واجهة مستخدم الهاتف المحمول. نصيحة رائعة هي السعي لتحقيق البساطة ، ولكن ليس على حساب قابلية الاستخدام الجيدة. يمكن تحقيق ذلك غالبًا من خلال تحديد أولويات إجراء رئيسي واحد على كل شاشة.
• تحديد الأولويات . هناك ميل لمحاولة إضافة أكبر عدد ممكن من الميزات. نشعر أن ترك شيء ما سيخلق بطريقة ما تجربة أقل للمستخدمين. على العكس من ذلك ، احتفظ بالميزات شديدة التركيز بناءً على الأهداف الأساسية ، وقم بتحسين التصميم من خلال تحليل الميزات الأكثر استخدامًا ، ثم بذل الجهد في جعل هذه الميزات بديهية وممتعة.
• أهداف اللمس . يمكن للمستخدمين أن يغضبوا جسديًا ويبدأوا في ضرب أجهزتهم المحمولة عندما ينقرون على شيء ما ولا يستجيب. وجدت دراسة أجريت في معهد ماساتشوستس للتكنولوجيا أنهم كانوا ينقرون على شيء به هدف لمس صغير جدًا. من أفضل الممارسات إنشاء عناصر تحكم وأزرار وروابط وما إلى ذلك (أي شيء يعمل باللمس) على الأقل 7-10 مم وهو متوسط ​​عرض أطراف الأصابع. من الجيد أيضًا التأكد من وجود مسافات كافية بين عناصر واجهة المستخدم هذه.
• نص مقروء . نظرًا لأن الكثير مما يفعله المستخدمون يعتمد على استهلاك المحتوى ، من أجل توفير تجربة متسقة عبر جميع أنواع الأجهزة المحمولة ، تأكد من اختيار المحارف التي تعمل جيدًا بأحجام وأوزان متعددة. يوصى باستخدام أحجام خطوط لا تقل عن 11 نقطة لتقليل إجهاد العين. تعد المحارف النظيفة وسهلة القراءة مثل Roboto و Noto من Google أو خط Apple الجديد في سان فرانسيسكو خيارات رائعة لاستكشافها.
• ملاحظات واجهة المستخدم . تجعلنا التطبيقات المصممة جيدًا على اطلاع أثناء تفاعلنا معها. يمكن أن يؤدي عدم وجود تعليقات جيدة إلى إرباك المستخدمين ودفعهم إلى التساؤل عما إذا كان شيء ما قد حدث أو يحدث أو لماذا حدث / لم يحدث. أفضل ممارسة هي استخدام أشكال مختلفة من التعليقات (الصوت ، اللمسات ، التصورات) ، بناءً على عنصر واجهة المستخدم أو الحالة الحالية للتطبيق.
• سهولة الوصول . ربما يكون هذا أحد أكثر الجوانب التي يتم التغاضي عنها في تصميم تجربة المستخدم وخاصة تصميم UX المحمول. يعاني 15٪ من سكان العالم من شكل من أشكال الإعاقة. تعد إرشادات الوصول إلى محتوى الويب موردًا متاحًا مجانًا ، وبالنسبة للمصممين الرقميين ، "يجب أن يكون لديهم" كجزء من مجموعة أدواتهم.

قيود تصميم UX للجوال

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

قيود التخزين

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

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

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

الشاشات والضوابط

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

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

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

بيئة

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

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

شاشة صغيرة الحجم ، نافذة واحدة

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

هناك جهود لمحاولة استيعاب "الشاشات المتعددة" و "المهام المتعددة" ولكن هذه ليست القاعدة بعد وتأتي مع مجموعات القيود الخاصة بها.

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

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

كيف يحمل الناس الأجهزة المحمولة

هناك قيد أخير يجب أن تكون على دراية به: حمل أدواتنا. كيف يحتفظ بها الناس وماذا يعني هذا لتصميم UX المحمول؟

وفقًا لبحث أجراه Steven Hoober وتم توضيحه في Design for Fingers، Touch، and People ، الجزء 2 ، تم اكتشاف أن الأشخاص يتفاعلون مع أجهزتهم بشكل مختلف اعتمادًا على كيفية حملهم لها ، مما يؤثر لاحقًا على تصميم UX للجوال.

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

فيما يلي بعض النصائح الإضافية لتجربة المستخدم على الأجهزة المحمولة من بحث ستيفن:

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

العمل مع المطورين

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

نموذج تجريبي

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

المواصفات الفنية

يتضمن معظم العمل المنجز كمصممي UX مطورين في وقت مبكر من المشروع ، ومن الطرق الرائعة لتسهيل الفهم المستمر لعملية التصميم وإنشاء خط اتصال أفضل عن طريق إنشاء واستخدام مستند المواصفات الوظيفية ، أو "Func". -المواصفات ".

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

فيما يلي مثال جيد لمواصفات وظيفية عاملة:

ينسخ

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

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

تحديد

يعد هذا أحد أهم أجزاء توصيل التصميمات مع المطورين. هنا تتألق أدوات مثل Zeplin و InVision 's Inspect حقًا لأنها تهتم بمواصفات التواصل مثل القياسات وأدلة النمط والخطوط وتدفق تجربة المستخدم وكيفية عمل كل جزء من التصميم.

التواصل IRL (في الحياة الحقيقية)

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

ربط كل شيء معًا

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

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

• • •

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

• مبادئ التصميم وأهميتها
• أفضل مجموعات مصممي UX - أمثلة ودراسات حالة ملهمة
• استكشاف مبادئ تصميم الجشطالت
• Adobe XD مقابل Sketch - ما أداة UX المناسبة لك؟
• أفضل 10 تسليمات لتجربة المستخدم يستخدمها كبار المصممين