أفضل ممارسات UX: كيفية تصميم لقطات شاشة للتطبيق قابلة للفحص

إعادة تصميم لقطات شاشة متجر تطبيقات HeyDoctor

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

يستغرق المستخدم في App Store 7 ثوانٍ في المتوسط ​​ليقرر ما إذا كان يريد تنزيل تطبيقك أم لا. صنفت دراسة بحثية حول قرارات التنزيل التي شملت 25000 زائر و 10000 تثبيت لقطات الشاشة على أنها ثاني أكثر سبب للتثبيت ، مع احتلال التصنيف المرتبة الأولى.

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

لقطات الشاشة هي مرآة لقصص مستخدمي تطبيقك وتعكس تجربة المستخدم. لقد درست أفضل 100 تطبيق ولقطات الشاشة الخاصة بهم باستخدام البيانات التي جمعها الأشخاص الطيبون في Incipia. سأشير إلى النتائج الرئيسية من دراسات متعددة هنا.

التطبيق في التركيز: HeyDoctor

HeyDoctor هو تطبيق يسمح للمستخدمين بالحصول على الوصفات الطبية عبر الإنترنت دون الحاجة إلى زيارة طبيب رعاية أولية. يمكن أن يصف HeyDoctor وصفات طبية للأدوية التي تتراوح من تحديد النسل ونمو الشعر إلى علاجات عدوى المسالك البولية والتقارير المعملية والمزيد. يمكنك أيضًا الحصول على علاج لحالات الرعاية الأولية مثل علاج حب الشباب ، وعلاج التهاب المسالك البولية ، وعلاج قرحة البرد والمزيد. لقد تم استقبال تطبيق الهاتف المحمول HeyDoctor بشكل جيد في App Store حيث صنفه 122 تقييمًا بـ 4.7 نجمة.

سنقوم بإعادة تصميم لقطات شاشة HeyDoctor والتعرف على لقطات الشاشة القابلة للفحص.

تنصل

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

التصميم الحالي

سنعمل على تطبيق HeyDoctor لنظام iOS. إليك ما تبدو عليه لقطات الشاشة الحالية:

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

قصص المستخدم

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

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

لقطات الشاشة أو الصور المصغرة؟

نمت أحجام الشاشة بنسبة 72٪ منذ إطلاق iPhone الأصلي بشاشة 3.5 بوصة. يبلغ متوسط ​​حجم شاشة الهواتف الذكية المباعة في الولايات المتحدة في 2018 5.5 بوصة. الشاشات أكبر من أي وقت مضى ومصممي المنتجات يتطورون باستمرار للاستفادة من هذه المساحة الإضافية المتوفرة. قد يعتقد المرء أن الشاشات الأكبر ستغري المصممين بوضع المزيد من التعليقات النصية على لقطات الشاشة. لكن ما نلاحظه هو عكس ذلك تمامًا.

لاحظنا باستمرار أن أقل من 4٪ من المستخدمين الذين يبحثون عن تطبيق يكبرون لقطات شاشة عمودية ، وأن 2٪ فقط من لقطات شاشة أفقية مكبرة. بالنسبة للاعبين ، فهي أقل بنسبة 0.5٪ فقط. ربما يرجع هذا إلى أن طريقة اللعب عادة ما تكون واضحة بما يكفي حتى من الصور المصغرة — Peter Fodor

أقل من 4٪ من الأشخاص الذين يزورون صفحة تطبيقك ينقرون على لقطات الشاشة الخاصة بك.

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

دعونا نلقي نظرة على إعادة تصميم بعض لقطات الشاشة من 2016 إلى 2018. لاحظ كيف أن كل واحدة منها تقريبًا بها كلمات أقل وخطوط أكبر.

الرقم السحري 2

يحتوي 78 من أفضل 100 تطبيق على خمس لقطات شاشة ، و 13 تطبيقًا بها أربع لقطات شاشة ، و 6 تطبيقات بها ثلاث لقطات شاشة و 3 تطبيقات بها اثنان فقط. بصفتك مطورًا ، قد تفكر في الحصول على خمس لقطات شاشة لأن المزيد من المحتوى أفضل ، أليس كذلك؟ خطأ.

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

توضح نتائج بحثنا أنه يتعين عليك شرح الفائدة الأساسية لتطبيقك في أول اثنين (iOS10 أو Google Play) أو ثلاث لقطات شاشة (iOS11) إذا كنت تستخدم صورًا عمودية. إذا كنت تريد حقًا استخدام صورة أفقية ، فلديك واحدة فقط - بيتر فودور

دعنا نفحص أول لقطة شاشة لبعض التطبيقات الشائعة.

عناصر واجهة المستخدم المميزة

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

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

التعلم

  1. اشرح أهم قصة مستخدم لتطبيقك في أول لقطة شاشة. فقط 9٪ من المستخدمين القادمين إلى قائمة التطبيقات الخاصة بك سوف يقومون بالتمرير بعد أول لقطة شاشة.
  2. زيادة حجم الخط وتقليص النص. مع شاشات العرض الكبيرة ، يتم تكييف المستخدمين لمسح لقطة الشاشة وإلقاء نظرة عليها بدلاً من النقر عليها وقراءتها. سينقر أقل من 4٪ من المستخدمين على لقطات الشاشة لقراءتها.
  3. قم بتمييز عناصر واجهة المستخدم التي تمثل التعليقات النصية. إنه يجعل مسح لقطات الشاشة أسهل ويحسن قدرة النظرة على لقطة الشاشة.

الآن بعد أن عرفنا القليل عن كيفية جعل لقطات الشاشة أكثر قابلية للقراءة ، فلنبدأ في تطبيق النتائج الرئيسية التي توصلنا إليها على لقطات شاشة HeyDoctor.

الخطوة 1: قم بتحديث iPhone إلى الأجيال الجديدة

تستخدم لقطات شاشة HeyDoctor الجيل الأقدم من أجهزة iPhone. في حين أنني لا أتعامل مع الصفقة ، إلا أنني أحب أجهزة iPhone الخاصة بي مثل تطبيقاتي. محدث ورائع (آسف).

الخطوة 2: قلل من النص واجعله أكثر قابلية للقراءة

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

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

الخطوة 3: تسليط الضوء على عناصر واجهة المستخدم ذات الصلة

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

واجهة مستخدم الدردشة

دعونا نرى كيف يبرز Tinder واجهة مستخدم الدردشة الخاصة بهم:

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

دعونا نحاول القيام بشيء مماثل:

دعونا ندرج هذا الأصل في لقطة الشاشة:

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

البطاقات و Drop Shadow

دعونا نلقي نظرة على كيفية إبراز Uber لعناصر واجهة المستخدم الخاصة بها.

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

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

الخطوة 4: التغييرات التجميلية

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

أضف شاشات المنظور

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

قدمت منظورين من الشاشات المتاحة لنا.

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

لقد أضفت تعليقًا على الصفحة الأولى - "طبيبك الشخصي". سهل القراءة ويلخص ما يفعله التطبيق ومختصر.

تغيير تدرج الخلفية

التباين بين الخلفية والمقدمة قاسي جدًا بالنسبة لي الآن. دعونا نغيره إلى ظل أفتح من اللون الأزرق.

سنقوم بعمل تدرج مع الألوان الجديدة التي نختارها.

دعونا نرى كيف يبدو هذا في لقطاتنا.

سأقوم بإضافة بعض النتوءات أسفل النص مباشرة بحيث تعمل كمفرق بين النص والهاتف.

لقد تمكنت من قطع متجه متساوي القياس رائع من الويب. دعونا نستخدمها لعمل آخر لقطة شاشة.

التصاميم النهائية

قبل

بعد

استنتاج

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

شكرا للقراءة! كان هذا مشروعًا ممتعًا في عطلة نهاية الأسبوع بالنسبة لي وقد استمتعت بالكتابة عنه هنا. نأمل أن يكون هذا المنشور قد أعطاك نظرة ثاقبة على حالة لقطات الشاشة في متجر التطبيقات. لا تتردد في تقديم أي ملاحظات أو طرح أي أسئلة لديك في قسم التعليقات أدناه.