كيفية تصميم لقطات التطبيق القابلة للفحص

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

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

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

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

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

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

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

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

تنصل

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

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

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

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

قصص المستخدم

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

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

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

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

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

أقل من 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 الخاص بي مثل تطبيقاتي. تحديث وعلى fleek (آسف).

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

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

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

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

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

الدردشة UI

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

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

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

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

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

بطاقات وإسقاط الظل

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

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

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

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

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

إضافة شاشات منظور

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

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

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

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

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

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

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

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

في احسن الاحوال!

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

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

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

قبل

بعد

خاتمة

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

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