УКС најбоље праксе: Како дизајнирати снимке екрана апликација који се могу скенирати

Редизајн снимака екрана апликације ХеиДоцтор'с Апп Сторе

Хајде да се играмо. Изаберите апликацију на телефону која вам се заиста свиђа. Ви сте творац ове апликације и желите да прикупите новац од инвеститора. Имате минут да пребаците своју апликацију на ВЦ. Новац је за грабеж, али само ако га можете убедити за 60 секунди. Како ви то радите? Да ли описујете шта апликација ради? Кажете ли како је апликација јединствена у поређењу са конкурентима? Да ли показујете колико је добро корисничко искуство?

Кориснику у Апп Стореу је у просеку потребно 7 секунди да се одлучи да ли жели да преузме вашу апликацију или не. Истраживање о одлукама о преузимању које укључује 25.000 посетилаца и 10.000 инсталирања оценило је снимке екрана као други разлог за инсталирање, а оцена је на првом месту.

Открили смо да просечно време које људи проведу на уносу у продавници износи 7 секунди. Чињеница је да велика већина људи чак и раније напушта страницу. Ангажовани корисници се мало дуже задржавају, али сви следе исти поступак: проверите икону, погледајте прва два снимка екрана и скенирајте први ред описа апликације - Петер Фодор, Зашто би 7 секунди могло да направи или поквари вашу мобилну апликацију

Снимке екрана огледало су корисничких прича ваше апликације и одражавају њено корисничко искуство. Проучавао сам 100 најбољих апликација и њихове снимке екрана користећи податке које су прикупили добри људи из Инципије. Овде ћу се позвати на кључне налазе из више студија.

Апликација у фокусу: ХеиДоцтор

ХеиДоцтор је апликација која омогућава корисницима да на мрежи добију лекарске рецепте без потребе да посете лекара примарне здравствене заштите. ХеиДоцтор може да преписује и допуњава рецепте за лекове који се крећу од контроле рађања, раста длачица до лечења инфекција уринарног тракта, лабораторијских извештаја и још много тога. Такође можете добити третман за случајеве примарне здравствене заштите као што су лечење акни, УТИ, лечење херпеса и још много тога. Мобилна апликација ХеиДоцтор је добро прихваћена у Апп Сторе-у, са 122 рецензије која је оценила са 4,7 звездица.

Преобликоваћемо снимке екрана ХеиДоцтор-а и научићемо о скенираним сликама екрана.

Изјава о одрицању одговорности

Имајте на уму да не радим у ХеиДоцтор-у и да су ставови изражени у овој студији случаја искључиво моји. За разлику од дизајнера, менаџера производа и свих који су одговорни за доношење кључних одлука које укључују дизајн који ради у ХеиДоцтор-у, ја немам приступ аналитици на бази корисника и можда не гледам комплетну слику. Одлуке о дизајну могу се заснивати на пословним циљевима, одређивању приоритета ресурса или техничким ограничењима. Отуда било која нежељена студија случаја није исцрпна и сигурно не предлажем да ХеиДоцтор напусти тренутне снимке екрана и усвоји мој редизајн.

Тренутни дизајн

Радићемо на апликацији ХеиДоцтор за иОС. Ево како изгледају постојеће снимке екрана:

Прати стандардно подешавање наслова и титлова који добро објашњавају корисничке приче апликације. Нисмо заинтересовани за редизајн бренда или корисничког интерфејса, па ћемо покушати да буду доследни у нашем редизајнирању.

Приче корисника

Пре него што ископамо и почнемо да правимо визуелне промене, морамо да научимо за шта корисници инсталирају ХеиДоцтор и шта траже када открију ову апликацију.

  1. Набавите рецепте и допуне. Корисници траже једноставан начин да на мрежи добију своје рецепте и допуне, без потребе да посећују лекара.
  2. Потражите третман за болест. Корисници претражују како да се лече од болести на мрежи.
  3. Разговарајте са лекаром примарне здравствене заштите. Корисници желе да разговарају са лекаром, али га тренутно вероватно не могу посетити због временских, финансијских или путних ограничења.
  4. Урадите све ово без икаквих папира за осигурање. Корисници не желе да укључују здравствено осигурање јер или га немају или је њихов износ превисок.

Снимке екрана или сличице?

Величине екрана порасле су за 72% од када је оригинални иПхоне представљен са 3,5-инчним екраном. Просечна величина екрана паметних телефона продатих у САД-у 2018. године је 5,5 инча. Екрани су већи него икад и дизајнери производа се непрестано развијају како би искористили овај додатни расположиви простор. Могло би се помислити да би већи екрани подстакли дизајнере да на снимке екрана ставе више натписа. Али оно што ми посматрамо је потпуно супротно.

Стално смо приметили да мање од 4% корисника који траже апликацију увећавају портретне снимке екрана, а само 2% повећане пејзажне снимке екрана. За играче је то још мање, са само 0,5%. То је вероватно зато што је играње игре обично довољно јасно чак и из сличица - Петер Фодор

Мање од 4% људи који долазе на страницу ваше апликације тапкају на вашим снимцима екрана.

Дизајнери су почели да обраћају пажњу на ову метрику с пуно апликација које своје снимке екрана третирају као сличице у које треба завирити уместо у нешто што треба додирнути. Од корисника у 2016. години могло се очекивати да додирну снимак екрана да би прочитали текст у њему. Али с новим изгледом продавнице апликација и већим екранима, корисници више не тапкају на вашим снимцима екрана.

Погледајмо неке редизајниране снимке екрана од 2016. до 2018. Приметите како готово сваки од њих има мање речи и веће фонтове.

Магични број 2

78 од 100 најбољих апликација има пет снимака екрана, 13 апликација има четири снимка екрана, 6 апликација има три снимка екрана, а 3 само два. Као програмер, помислили бисте да изаберете пет снимака екрана јер је бољи већи садржај, зар не? Погрешно.

Само 9% корисника се помиче поред прва два снимка екрана. Снимке пејзажног екрана имају лошији резултат од 5%. Због тога је неопходно намамити корисника у прва два снимка екрана. Реците својим корисницима шта ваша апликација ради на првом екрану и проширите то на одговарајућим снимцима екрана.

Налази нашег истраживања јасно показују да МОРАТЕ да објасните основну предност своје апликације на прва два (иОС10, Гоогле Плаи) или три (иОС11) снимка екрана ако користите портретне слике. Ако заиста желите да користите пејзажну слику, на располагању вам је само једна - Петер Фодор

Испитајмо прва два снимка екрана неких популарних апликација.

Истакнути елементи корисничког интерфејса

Корисници који гледају ваше снимке екрана покушавају да процене функционалности ваше апликације. Текстуални натписи помажу им да разумеју контекст иза екрана. Дизајнери још више олакшавају корисницима истицањем елемената корисничког интерфејса које текст опис покушава да објасни.

Погледајмо неке примере.

Учења

  1. Објасните најважнију корисничку причу ваше апликације у прва два снимка екрана. Само 9% корисника који дођу на вашу листу апликација ће се померити поред прва два снимка екрана.
  2. Повећајте величину фонта и смањите текст. Са већим екранима корисници се условљавају да скенирају и погледају снимак екрана, уместо да га тапкају и читају. Мање од 4% корисника ће додирнути ваше снимке екрана да би их прочитали.
  3. Истакните елементе корисничког интерфејса који представљају натписе текста. Олакшава скенирање снимака екрана и побољшава могућност прегледа вашег екрана.

Сада када знамо мало о томе како да снимке екрана учинимо читљивијим, почнимо да примењујемо наша кључна открића на снимцима екрана ХеиДоцтор-а.

Корак 1: Ажурирајте иПхоне на новије генерације

Снимке екрана ХеиДоцтор-а користе старије генерације иПхоне-а. Иако нисам прекидач договора, иПхонеи ми се свиђају као и апликације. Ажурирано и на флеек (извините).

Корак 2: Смањите текст и учините га читљивијим

Покушаћемо да наслове учинимо мало читљивијим изношењем корисничких прича у сажетом формату. Такође ћемо уклонити титлове и описе како бисмо могли да сместимо веће наслове.

Трећи снимак екрана приказује страницу са подешавањима апликације, док њен наслов говори о томе како апликација не захтева полису осигурања. Заменимо га релевантнијим екраном. Замијенићу га првим екраном који видите када покушате да набавите рецепт у апликацији, што индиректно имплицира да вам није потребно осигурање да бисте започели.

Корак 3: Истакните релевантне елементе корисничког интерфејса

Као што смо горе сазнали, истицање релевантних елемената корисничког интерфејса који упућују на наслове чини их прегледнијим и читљивијим. Такође помаже кориснику да лакше скенира снимак екрана.

Кориснички интерфејс за ћаскање

Погледајмо како Тиндер истиче њихов кориснички интерфејс за ћаскање:

Вешто користи слике профила и облачиће за ћаскање са елементима бренда као што су боје како би имитирао свој прави кориснички интерфејс за ћаскање.

Покушајмо да урадимо нешто слично:

Уметнимо овај материјал у снимак екрана:

Покушао сам да интегришем бренд ХеиДоцтор у мехуриће за ћаскање. Нисам осећао потребу да уврстим слике профила јер лекари са којима разговарате у апликацији немају слику профила.

Карте и испустите сенку

Погледајмо како Убер истиче своје елементе корисничког интерфејса.

Волим овај минималан начин истицања елемената корисничког интерфејса помоћу карата и падања сенки. Користићемо овај стил да нагласимо неке елементе на нашим снимцима екрана.

Одлучио сам да пребацим натписе испод телефона, тако да корисник види истакнути елемент корисничког интерфејса пре него што прочита наслов.

Корак 4: Козметичке промене

Направили смо више промена на нашим снимцима екрана како бисмо оптимизирали могућност скенирања. Сада нека изгледа боље. Добар визуелни дизајн може бити невероватан мамац за кориснике и не би га требало занемарити приликом редизајнирања снимака екрана.

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

Изометрични екрани изгледају модерно и углађено. Можете видети изометричне телефоне готово свуда, од Аппле-ових савршено приказаних реклама за производе до високо полираних макета на Дриббле-у (лудост кад помислим да је Дриббле првобитно покренут као веб локација за дељење прототипа ВИП дизајна ниског нивоа!)

Направио сам неколико перспектива са екрана који су нам били доступни.

Изабраћу први изглед перспективе и поделићу га на два снимка екрана, јер тренутно имамо само 3 снимка екрана, а можемо да додамо до 5 у Апп Сторе.

На прву страницу сам додао наслов - „Ваш лични лекар“. Једноставно за читање, резимира оно што апликација ради и сажето.

Промените градијент позадине

Тренутно ми је контраст између позадине и првог плана мало преоштар. Променимо је у светлију нијансу плаве боје.

Направићемо градијент са новим бојама које одаберемо.

Погледајмо како ово изгледа на нашим снимцима екрана.

Додаћу неке гребене одмах испод текста како би се разликовао између текста и телефона.

Успео сам да уграбим хладни изометријски вектор са мреже. Помозимо да направимо последњи снимак екрана.

Финални дизајн

пре него што

После

Закључак

Све у свему, направили смо нешто више од четири мала, понављајућа подешавања. Али коначни резултат су снимци екрана које је лако погледати и осећати се модерно. Штавише, ниједан од ових подешавања није захтевао урођену уметничку вештину. Проучавање прегршт апликација у Апп Сторе-у помогло нам је да знамо на које проблеме треба пазити.

Хвала за читање! Ово ми је био забаван викенд пројекат и уживао сам писати о њему овде. Надамо се да вам је овај пост дао увид у стање снимака екрана у продавници апликација. Слободно пошаљите било какве повратне информације или поставите било која питања која имате у одељку за коментаре испод.