Как создать снимки экрана программы для сканирования

1656516749 kak sozdat snimki ekrana programmy dlya skanirovaniya

автор Гириш Рават

Переработка скриншотов HeyDoctor’s App Store

1*jQQ2k7-ZTuvm_fBsGOig2A

Давайте поиграем в игру. Выберите приложение на телефоне, которое вам действительно нравится. Вы являетесь создателем этой программы и хотите привлечь деньги от инвесторов. У вас есть минута, чтобы представить свое приложение венчурным компаниям. Деньги можно получить, но только если вы сможете убедить их за 60 секунд. Как вы это делаете? Вы описываете, что делает приложение? Скажете ли вы, чем приложение уникально по сравнению с конкурентами? Показываете ли вы, насколько хорош опыт пользователя?

Пользователю в App Store нужно в среднем 7 секунд, чтобы решить, хочет ли он загрузить ваше приложение или нет. В исследовательском исследовании решений по загрузке, в котором приняли участие 25 000 посетителей и 10 000 установок, скриншоты являются второй причиной для установки, а рейтинг занимает первое место.

Мы обнаружили, что среднее время, которое люди проводят на странице приложения, составляет 7 секунд. Дело в том, что подавляющее большинство людей покидают страницу еще раньше. Вовлеченные пользователи держатся немного дольше, но все они выполняют один и тот же процесс: проверьте значок, просмотрите первые два снимка экрана и отсканируйте первую строку описания программы — Петр Фодор, почему 7 секунд могут сделать или сломать ваше мобильное приложение

Снимки экрана представляют собой зеркало историй пользователей вашего приложения и отображают его опыт. Я изучил 100 лучших приложений и их снимки экрана, используя данные, собранные хорошими людьми в Incipia. Здесь я ссылаюсь на ключевые выводы многих исследований.

Приложение в фокусе: HeyDoctor

1*b_vKDZBlMOkgYTckLdaGwg

HeyDoctor – это программа, которая позволяет пользователям получать медицинские рецепты онлайн без необходимости посещать врача первичного звена. HeyDoctor может выписывать и пополнять лекарства, начиная от контроля рождаемости, роста волос до лечения инфекций мочевыводящих путей, лабораторных отчетов и т.д. Вы также можете получить лечение в случаях первичной помощи, таких как лечение акне, ИМП, лечение герпеса и т.д. Мобильное приложение HeyDoctor было хорошо принято в App Store: 122 отзыва оценили его на 4,7 звезды.

Мы переработаем скриншоты HeyDoctor и узнаем снимки экрана, которые можно сканировать.

Отказ от ответственности

Заметьте, что я не работаю в HeyDoctor, и мнения, высказанные в этом примере, чисто мои. В отличие от дизайнеров, менеджеров по продуктам и всех, кто отвечает за принятие ключевых решений, связанных с дизайном, работающих в HeyDoctor, у меня нет доступа к аналитике на базе его пользователей и, возможно, не смотрю на полную картину. Проектные решения могут основываться на бизнес-целях, приоритете ресурсов или технических ограничениях. Таким образом, любое нежелательное исследование не исчерпывающее, и я, конечно, не предлагаю HeyDoctor отказаться от своих текущих скриншотов и принять мой редизайн.

1*wmaVEQdPEskC4HXYnfNCeg
«Сделайте свое приложение плоским» – какой-то парень. Авторы мема:@паросмаель

Современный дизайн

Мы будем работать над приложением HeyDoctor для iOS. Вот как выглядят имеющиеся скриншоты:

1*K_JNBDrKErv4JsWeQcRyFg

Он соответствует стандартным настройкам заголовков и субтитров, хорошо объясняющих истории пользователей программы. Нас не интересует редизайн бренда или интерфейса, поэтому мы стараемся сохранить их последовательными в нашем редизайне.

Истории пользователей

Прежде чем углубиться и начать вносить визуальные изменения, нам нужно узнать, зачем пользователи устанавливают HeyDoctor и что они ищут, когда находят это приложение.

  1. Получите рецепты и заправки. Пользователи ищут простой способ получить рецепты и пополнения в Интернет без необходимости посещать врача.
  2. Пройдите лечение от болезни. Пользователи ищут, как лечить болезнь в Интернете.
  3. Поговорите с врачом первичного звена. Пользователи хотят поговорить с врачом, но они, вероятно, не могут посетить его в настоящее время через время, финансовые ограничения или ограничения на дорогу.
  4. Делайте все это без каких-либо страховых документов. Пользователи не хотят привлекать свою медицинскую страховку, поскольку либо ее нет, либо их доплата слишком высока.

Скриншоты или миниатюры?

Размеры экрана выросли на 72% с момента запуска оригинального iPhone с 3,5-дюймовым экраном. Средний размер экрана смартфонов, проданных в США в 2018 году, составляет 5,5 дюйма. Экраны стали больше, чем когда-либо, и дизайнеры продуктов постоянно развиваются, чтобы использовать это дополнительное доступное пространство. Можно было бы подумать, что экраны будут побуждать дизайнеров размещать больше текстовых подписей на скриншотах. Но то, что мы наблюдаем, совершенно противоположно.

Мы постоянно наблюдали, что менее 4% пользователей, которые ищут приложение, увеличивают портретные снимки экрана и только 2% – увеличенные альбомные снимки экрана. Для геймеров это еще меньше – всего 0,5%. Это, вероятно, потому, что игровой процесс обычно достаточно четкий даже из миниатюр Петр Фодор

Менее 4% людей, которые переходят на страницу вашего приложения, затрагивают ваши снимки экрана.

Дизайнеры начали обращать внимание на этот показатель, поскольку многие приложения рассматривают свои скриншоты как эскизы, на которые можно подсмотреть, а не как нечто, что можно касаться. Ожидается, что пользователи в 2016 году коснутся снимка экрана, чтобы прочесть на нем текст. Но с новым макетом магазина приложений и большими экранами пользователи больше не затрагивают ваши скриншоты.

Давайте посмотрим на обновленный дизайн некоторых скриншотов с 2016 по 2018 год. Обратите внимание, что почти каждый из них имеет меньше слов и более шрифт.

1*AacKwwec2tzyqNOr75UrBw

Магическое число 2

78 из 100 лучших программ имеют пять снимков экрана, 13 программ имеют четыре снимка экрана, 6 программ имеют три снимка экрана, а 3 – только два. Как разработчик, вы бы подумали сделать пять скриншотов, потому что чем больше содержимого, тем лучше, не правда ли? Неверно.

Только 9% пользователей прокручивают первые два скриншота. Альбомные скриншоты работают хуже – 5%. Это делает необходимым заманить пользователя на первых двух скриншотах. Расскажите своим пользователям, что делает ваше приложение, на первом экране и расскажите об этом на соответствующих снимках экрана.

Результаты нашего исследования дают понять, что вы должны объяснять основные преимущества вашего приложения на первых двух (iOS10, Google Play) или трех (iOS11) снимках экрана, если вы используете портретные изображения. Если вы действительно хотите использовать пейзажное изображение, у вас есть только один – Петр Фодор

Давайте рассмотрим первые два снимка экрана некоторых популярных программ.

1*OL3200-Ug5bBh-faKQetJg

Выделенные элементы пользовательского интерфейса

Пользователи, просматривающие снимки экрана, пытаются оценить функциональность программы. Текстовые подписи помогают им понять контекст за экранами. Дизайнеры делают это проще для пользователей, выделяя элементы интерфейса, которые пытается объяснить текстовую подпись.

Давайте рассмотрим несколько примеров.

1*gPvYkFQOCnT73ESDdBs-uQ

Обучение

  1. Объясните важнейшую историю пользователя вашего приложения на первых двух снимках экрана. Только 9% пользователей, входящих на страницу вашего приложения, будут прокручивать первые два снимка экрана.
  2. Увеличьте размер шрифта и сократите текст. С большими экранами пользователи вынуждены сканировать и просматривать снимок экрана, а не касаться его и читать. Менее 4% пользователей коснутся ваших скриншотов, чтобы прочитать их.
  3. Выделите элементы пользовательского интерфейса, представляющие текстовые подписи. Это упрощает сканирование скриншотов и улучшает возможность просмотра снимков экрана.

Теперь, когда мы немного знаем, как сделать снимки экрана более читабельными, давайте начнем применять наши ключевые выводы к скриншотам HeyDoctor.

Шаг 1: Обновите iPhone до новых поколений

На скриншотах HeyDoctor используется старое поколение iPhone. Хотя я и не прерываю сделки, мне нравятся мои iPhone, как и мои приложения. Обновлено и на fleek (извините).

1*DCJJjHTMleDNz4msxdOp3g

Шаг 2. Сократите текст и сделайте его более читабельным

Мы попытаемся сделать подписи чуть более читабельными, излагая истории пользователей в коротком формате. Мы также откажемся от субтитров и описаний, чтобы вместить больше заголовков.

1*L4ibILF69FpckRyqJ_y0Sw

На третьем снимке экрана показана страница настроек программы, а подпись говорит о том, что программа не нуждается в страховом полисе. Давайте заменим его на более подходящий экран. Я собираюсь заменить его первым экраном, который вы видите, когда пытаетесь получить рецепт в программе, косвенно намекая на то, что вам не нужна страховка, чтобы начать.

1*e--yMKYb4Twomc5PBK0m4g

Шаг 3. Выделите соответствующие элементы пользовательского интерфейса

Как мы узнали выше, выделение соответствующих элементов пользовательского интерфейса, которые ссылаются на подписи, делает их более удобными для просмотра и чтения. Это также помогает пользователю легче сканировать скриншот.

Интерфейс чата

Давайте посмотрим, как Tinder выделяет их чат-интерфейс:

1*X1XFH0_nF0ODsU4wlAiVLg

Он ловко использует изображения профиля и пузырьки чата с элементами бренда, такими как цвета, чтобы имитировать его подлинный чат-интерфейс.

Давайте попробуем сделать нечто подобное:

1*OA58UMljLeGyB73wx5XZKA

Давайте вставим этот объект на снимок экрана:

1*HzkAcWMNMr_-Gmbp6tEzdA

Я пытался интегрировать бренд HeyDoctor во всплывающие чаты. Я не почувствовал необходимости включать изображение профиля, потому что врачи, с которыми вы общаетесь в программе, не имеют изображения профиля.

Карты и тень

Давайте посмотрим, как Uber подчеркивает свои элементы пользовательского интерфейса.

1*9VrQw5k2aMJK3SwtHALxCw

Мне нравится этот минимальный способ выделения элементов интерфейса с помощью карт и теней. Мы собираемся использовать этот стиль, чтобы подчеркнуть некоторые элементы на наших скриншотах.

1*qZN-kTTkoJNtZcI1_V0KuQ

Я решил переместить подписи по телефону, чтобы пользователь видел выделенный элемент интерфейса, прежде чем прочитать подпись.

1*1G225-9KlBR4PcdXfiCS7w

Шаг 4: Косметические изменения

Мы внесли несколько изменений в наши снимки, чтобы оптимизировать их для сканирования. Теперь давайте сделаем это лучше. Хороший визуальный дизайн может быть невероятной приманкой для пользователей, и его не следует игнорировать при переработке скриншотов.

Разместите экраны перспективы

Изометрические экраны выглядят современно и изысканно. Вы можете увидеть изометрические телефоны почти везде, от идеально отображенной рекламы продуктов Apple до высококачественных макетов на Dribble (сумасшедшее мнение, что Dribble изначально был создан как веб-сайт для обмена прототипами дизайна WIP низкого уровня!)

Я сделал для нас доступным несколько ракурсов с экранов.

1*iwn33HPFpys14STxNuyIlw

Я выберу первый макет перспективы и разделю его на два снимка экрана, потому что сейчас у нас есть только 3 снимка экрана, и мы можем добавить в 5 в App Store.

1*QSDm10p_QyaRel0YdhRfFA

К первой странице добавила подпись — «Ваш личный врач». Легко читается, обобщает то, что делает приложение, и сжат.

Изменить градиент фона

Контраст между фоном и передним планом для меня сейчас слишком резок. Давайте сменим его на более светлый оттенок синего.

1*s1dgtAZrQB3hN4wPi7ykHg

Мы будем делать градиент с новым цветом, который мы выберем.

1*1nwKzgiuCStEfD_qgdPn1w

Давайте посмотрим, как это смотрится на наших скриншотах.

1*pdMgBD9nrj3rphapjhmmhg
Идеально!

Я собираюсь добавить несколько выступлений под текстом, чтобы он действовал как разница между текстом и телефоном.

1*7NBTNuqTtvEw2JeeJfrMaQ

Мне удалось выхватить крутой изометрический вектор из Интернета. Давайте используем его, чтобы сделать последний скриншот.

1*aZgKxVOipjmgdEO6iSBnZQ

Окончательные проекты

Раньше

1*QgBVdYeuC-vXfMdvl7571Q

После

1*B8O1AJC2mA9Oa5hEGjqbGg

Вывод

В общем, мы сделали чуть более четырех небольших итеративных изменений. Но конечным результатом есть скриншоты, которые легко пересматривать и чувствовать себя современными. Более того, ни одна из этих настроек не требовала врожденного художественного мастерства. Изучение нескольких приложений в App Store помогло нам понять, какие проблемы следует искать.

Спасибо, что прочли! Это был для меня интересный проект выходного дня, и мне понравилось писать о нем здесь. Надеемся, данная публикация дала вам представление о состоянии скриншотов в магазине приложений. Не стесняйтесь предоставлять какие-либо отзывы или задавать какие-либо вопросы в разделе комментариев ниже.

Добавить комментарий

Ваш адрес email не будет опубликован.