Як створити знімки екрана програми

Перероблення знімків екрану додатків HeyDoctor

Давайте пограємо в гру. Виберіть на телефоні додаток, яке вам дуже подобається. Ви творець цього додатка і хочете зібрати гроші від інвесторів. У вас є хвилина, щоб викласти додаток на VC. Гроші збираються за захоплення, але тільки якщо ви зможете переконати їх за 60 секунд. Як ви це робите? Чи описуєте ви, що робить додаток? Ви розповідаєте, наскільки додаток унікальний порівняно зі своїми конкурентами? Чи показуєте ви, наскільки хороший досвід користування?

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

Ми виявили, що середній час, який люди витрачають на перелік магазину, становить 7 секунд. Справа в тому, що переважна більшість людей залишають сторінку ще раніше. Захоплені користувачі зависають трохи довше, але всі вони дотримуються одного й того ж процесу: перевірте значок, перегляньте перші два скріншоти та скануйте перший рядок опису програми - Пітер Фодор, чому 7 секунд може зробити або зламати ваш мобільний додаток

Скріншоти - це дзеркало історії користувачів вашого додатка і відображає його досвід користувача. Я вивчив топ-100 додатків та їх скріншоти, використовуючи дані, зібрані добрими людьми в Incipia. Я наведу тут ключові висновки багатьох досліджень.

Додаток у фокусі: HeyDoctor

HeyDoctor - це додаток, який дозволяє користувачам отримувати медичні рецепти в Інтернеті без необхідності відвідувати лікаря первинної медичної допомоги. HeyDoctor може виписати та доповнити рецепти ліків, починаючи від контролю народжуваності, росту волосся до лікування інфекції сечовивідних шляхів, лабораторних звітів тощо. Ви також можете отримати лікування у випадках первинної медичної допомоги, таких як лікування вугрів, UTI, лікування ангіни та багато іншого. Мобільний додаток HeyDoctor отримав гарне сприйняття в App Store, 122 відгуки оцінили його у 4,7 зірки.

Ми будемо переробляти скріншоти HeyDoctor та дізнаватися про скріншоти, які можна сканувати.

Відмова від відповідальності

Зауважте, що я не працюю в HeyDoctor, і погляди, висловлені в цьому прикладі, суто власні. На відміну від дизайнерів, менеджерів продуктів та всіх, хто відповідає за прийняття ключових рішень, пов’язаних із дизайном, що працює в HeyDoctor, я не маю доступу до аналітики на його базі користувачів і, можливо, не дивлюсь на повну картину. Проектні рішення можуть базуватися на бізнес-цілях, пріоритетності ресурсів або технічних обмеженнях. Отже, будь-яке небажане тематичне дослідження не є вичерпним, і я, безумовно, не пропоную, щоб HeyDoctor відмовився від своїх поточних знімків екрану і прийняв мій дизайн.

Поточний дизайн

Ми будемо працювати над додатком для iOS HeyDoctor. Ось як виглядають існуючі скріншоти:

Це відповідає стандартній настройці заголовка та підзаголовків, що добре допомагає пояснювати історії користувачів програми. Ми не зацікавлені в перепроектуванні бренду чи інтерфейсу користувача, тому ми намагатимемося підтримувати їх послідовність у нашому дизайні.

Історії користувачів

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

  1. Отримайте рецепти та поповнення. Користувачі прагнуть знайти простий спосіб отримати свої рецепти та заправки в Інтернеті без необхідності відвідувати лікаря.
  2. Отримайте лікування від хвороби. Користувачі шукають, як лікувати свою хворобу в Інтернеті.
  3. Поговоріть з лікарем первинної ланки. Користувачі хочуть поговорити з лікарем, але вони, мабуть, не можуть його відвідати на даний момент через обмеження часу, фінансових витрат або маршрутів.
  4. Робіть все це, не залучаючи жодних страхових документів. Користувачі не хочуть займатися медичним страхуванням, тому що або вони не мають його, або їхня оплата зависока.

Скріншоти чи мініатюри?

Розміри екрану зросли на 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, як і мої програми. Оновлено та на швидкості (вибачте).

Крок 2: Виріжте текст і зробіть його більш читабельним

Ми спробуємо зробити підписи трохи читабельнішими, вказавши розповіді користувачів у стислому форматі. Ми також будемо викорінювати підзаголовки та описи, щоб вмістити більші назви.

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

Крок 3: Виділіть відповідні елементи інтерфейсу користувача

Як ми дізналися вище, виділення відповідних елементів інтерфейсу, на які посилаються підписи, робить їх більш оглядовими та читабельними. Це також допомагає користувачеві простіше сканувати скріншот.

Інтерфейс чату

Давайте подивимось, як Tinder виділяє їх інтерфейс чату:

Він вміло використовує зображення профілю та бульбашки чату з елементами бренду, як кольори, щоб імітувати його справжній інтерфейс чату.

Спробуємо зробити щось подібне:

Давайте вставимо цей актив на скріншот:

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

Картки та падіння тіні

Давайте подивимось, як Uber виділяє їх елементи UI.

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

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

Крок 4: Косметичні зміни

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

Додати екрани перспективи

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

Я зробив кілька перспектив із доступних нам екранів.

Я виберу перший перспективний макет і розділю його на два скріншоти, тому що у нас є лише 3 скріншоти на даний момент, і ми можемо додати до 5 в App Store.

Я додав підпис на першій сторінці - "Ваш особистий лікар". Легко читати, підсумовує, що робить додаток, і стисло.

Змінити фоновий градієнт

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

Ми будемо робити градієнт з новими кольорами, які вибираємо.

Подивимося, як це виглядає на наших знімках екрана.

Ідеально!

Я хочу додати декілька хребтів трохи під текстом, щоб він виступав як диференціатор між текстом і телефоном.

Мені вдалося обірвати крутий ізометричний вектор з Інтернету. Давайте скористаємося нею для створення останнього екрана екрана.

Кінцеві зразки

Раніше

Після

Висновок

Загалом ми зробили трохи більше чотирьох маленьких, ітеративних налаштувань. Але кінцевим результатом є скріншоти, які легко оглянути і відчути сучасність. Більше того, жоден з цих виправлень не потребував вродженої художньої майстерності. Вивчення декількох додатків у App Store допомогло нам дізнатися, на які проблеми слід звернути увагу.

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