Проектиране на уеб страница за уеб приложения: Примери, съвети и Peeves
Мрежата е напълно пренаситена с приложения, които ви помагат да се свържете със социална мрежа, да правите списъци с хранителни стоки, да управлявате големи проекти, да решавате кой ще прави чай и всяка друга луда задача, която можете да си представите.
С цялата тази конкуренция как е възможно да убедите посетителите, че приложението ви е пословичната игла сред сеното? Днес ще разгледаме някои реални примери, за да видим дали можем да научим кои стратегии да имитираме и кои да избягваме.
Началната страница на приложението ви е изключително важна
Прекарали сте тонове време, пари и усилия, създавайки уеб приложение. Това е първокласно начинание, което сте сигурни, че ще се хванете като див огън. Има само една уловка, трябва да убедите хората да я опитат.
Без значение колко добро е вашето уеб приложение, все още трябва да имате солидни тактики на продажбите, които в крайна сметка убеждават хората да натиснат бутона „регистриране“. Дори ако услугата е напълно безплатна и предлага множество функции, наистина трябва да работите, за да спечелите тези реализации.
Никога не приемайте, че само защото потребителят е кацнал на началната ви страница, че наистина се интересува от това, което можете да предложите, и следователно се нуждаете само от леко натискане, за да продължите напред. Коефициентите са, те последваха някаква връзка само с неясна представа къде ще се озоват и са в деликатен етап, в който е вероятно да се преместят на друг сайт за секунди, ако не ги изтеглите.
Началната страница на уеб приложението ви е един от най-ценните маркетингови инструменти. Съпротивлявайте се на стремежа просто да загърбите нещо заедно и вместо това да приложите най-добрите си усилия. Нека да разгледаме някои примери, за да видим какво можем да научим.
Съвет: Поддържайте дизайна прост и съобщението силно
Първият ни пример идва от нова услуга, наречена Kroud. Нека да разгледаме частта от сайта над сгъвката.
Има много неща, които харесвам в тази страница. На първо място, това е много просто и фокусирано. Това не ви затрупва с празни претенции за това как услугата ще промени живота ви, нито се набива около храста за това какъв е сайтът. Няма нищо по-лошо от страница, която не се определя добре. Ако не мога да кажа какво прави приложението ви за пет секунди, продължавам.
Kroud наистина изпълнява задачата да свърже сложна услуга в ясно съобщение, което служи и като силен призив за действие: „Създайте интерактивна страница с често задавани въпроси за секунди.“ Този ред е едно от първите неща, които виждам, когато зареждам страницата и веднага предава точно какво прави сайтът.
Големият бутон
Друго, което можем да научим от Kroud е, че големите, смели бутони за регистрация са добро нещо! Ето бутона Kroud в действителни размери.
Този бутон е огромен и много ясно какво се случва, когато го натиснете: „Стартирайте Kroud“, със второстепенното съобщение „Free е!“. Забележете как този бутон привлича вниманието ви не само с размер, но и с цвят. То е толкова по-ярко от другото съдържание, че очите ви веднага се привличат към него.
Съвет: Снимките са задължителни!
Началната страница на уеб приложението Ви има две основни цели: да обучите хората за вашия продукт и да ги убедите да го изпробват. Това са същите цели, които виждате в маркетинга и рекламата от почти всяка компания на планетата.
Представете си реклама на списание или уебсайт за нова Corvette. Как смятате, че ще изглежда тази страница? Има милион възможни дизайни, но едно нещо вероятно ще остане постоянно: ще видите колата. Корветите имат наследство от добър дизайн и знаят, че най-добрият начин да покажат най-новия си подвиг е да ви покажат негова снимка в цялата си слава. Кой би могъл да бъде убеден да купи спортна кола, без дори да я види? Това би било още по-добре, ако спортният автомобил не беше Corvette, а вместо това нещо, за което никой не беше чувал.
Това работи като метафора за началната страница на уеб приложението ви. Уеб приложенията са десетина десетки и никой никога не е чувал за вашите. Освен ако не се срамувате от лошите си дизайнерски умения, хората ще искат да видят как точно ще изглежда услугата, преди да отделят време за регистрация.
Хората от Freckle знаят това добре и избраха да оглавят страницата си с масив от пет скрийншота.
Въпреки че са покрити големи части от някои от тях, изображението като цяло наистина ви дава достоен поглед върху това как изглежда услугата.
Функции като Screenshots
Настоящата тенденция в дизайна на началната страница на уеб приложението е да се показват функциите на началната ви страница с малки икони. Това е чудесна идея, която наистина увеличава естетическата стойност на страницата и помага да се разделят големи блокове от копие. Ето пример от Ballpark Invoicing.
Въпреки че иконите са по-добри от текстовите, в случая, когато наистина имате солиден интерфейс, всъщност мисля, че екранните снимки могат да бъдат много по-силен визуален елемент. Снимките на екрана директно предават вашата услуга, докато общите икони просто представят абстрактно представяне на това, което потребителите могат да очакват да видят. Вижте как Freckle обсъжда техните характеристики.
Вижте как съобщенията тук са подсилени от изображение на това как точно ще изглежда това в приложението? Това е тенденция, която наблюдавам все повече и повече напоследък и мисля, че е добра, която наистина се подобрява върху идеята за иконите на предишното поколение уеб приложения.
Като друг пример, TodayPulse показва три от техните основни функции в хоризонтална лента от екрани:
Peeve: Без скрийншоти
Може да си мислите, че екранните снимки са доста основни и че никой не се нуждае от това напомняне, но истината е, че има безброй начални страници на уеб приложение, които не ви дават и най-малък намек за това как изглежда приложението всъщност.
Дори ако тези страници са доста атрактивни, като Wordfaire по-долу, шансовете на мен да го пробвам са много по-малко, просто защото не мога да видя преглед.
Старата поговорка „снимката струва хиляда думи“ наистина се оказва вярна на тази сцена. Просто няма начин да прочета седемте абзаца от текста на началната страница на Wordfaire. Бих търгувал поне пет от тях за екранна снимка, без да се замислям.
Съвет: Нека потребителите да играят с пример на живо
Концепцията „опитайте преди да купите“ съществува от зората на продавача. Това е проста концепция, която ще съществува, докато има продукти. Ангажиментите са гадни, особено когато има несигурност. Като оставите потребител да изпробва първо уеб приложението си, несигурността се премахва.
Изключително важно е да имате предвид, че „опитайте преди да купите“ се отнася дори за безплатни услуги! Това изглежда объркващо, но наистина е доста просто. Дори безплатна услуга ми изяжда времето, ресурс, който намирам за доста ценен и няма да търгувам за нищо. Записването за безплатна уеб услуга все още се чувства ангажимент; такъв, който не искам да правя, освен ако наистина не съм сигурен, че ще хареса продукта.
Концепцията е проста, създайте начин, по който потребителите могат да обикалят и да ритат гумите на приложението ви, без да въвеждат нито един бит информация. Това виждаме в действие по-долу за Pen.io. Това е друга страница без скрийншоти, но е направена малко по-добре чрез включването на линк към пример, за да можете да видите какво получавате от услугата.
Отново е чудесно, че Pen.io включва това, но изпълнението е по-силно обратно в Kroud, където връзката към страницата за изпит е подсилена от визуализация.
Peeve: Дълги обиколки
Някои уеб приложения ще ви заведат на десет минутна екскурзия, която обяснява много подробно тяхното обслужване. Не ме разбирайте погрешно, информацията е добра и ако плащам за услуга, ще искам. Но дали „продуктовата обиколка“ наистина трябва да бъде толкова трудоемка?
Ако щракнете върху връзка, на която пише „Направете обиколка“, това, което наистина искам да направя, е да видите приложението. Жив пример, какъвто току-що обсъдихме с много по-силни от 2000 думи, обясняващ какво ще бъде, когато най-накрая стигнете до точката, в която ви е позволено действително да го изпробвате. Някои сайтове дори изграждат модифициран „интелигентен“ пример на живо, който ви превежда през процеса. Това е чудесен начин да накарате потребителите да изпробват вашата услуга, като наистина гарантирате, че ще получат смисъл и да видят какво искате от тях.
Отново не е задължително да се гмурнете за функциите си, но не забравяйте, че е важно да позволите на потребителите просто да влязат и да видят какво мислят.
Включете видео
Друга идея за показване на вашето уеб приложение в действие е да включите кратко видео направо на началната страница. Ако една снимка струва хиляда думи, тогава една минута със скорост 15-30 кадъра в секунда е безценна! Един видеоклип постига същата цел като примера и екранните снимки, само че е по-динамичен от екранните снимки и по-структурираното преживяване от тестовата площадка в свободна форма.
Aviary върши добра работа в това, като показва показване на време на техния редактор на изображения, създавайки сложна фото манипулация.
Една от любимите ми любими реализации на видео за начална страница на уеб приложение е Greplin. Тук се появява видеоклип, когато зареждате страницата, но ако не стартирате видеото след няколко секунди, той се превръща в слайдшоу на екранни снимки.
Peeve: Карикатури, които никога не показват приложението
По някаква причина, готиното нещо, което трябва да направите в момента, е да хвърлите заедно един от тези видеоклипове като забавен малък анимационен филм. Това често е чудесна идея, но проблемът, който имам, е, че след две минути на някоя скучна малка анимация, все още имам почти никаква представа какво всъщност е приложението!
Двете видеоклипове по-долу от Minus и Summify са добри примери за това. Разбира се, те в крайна сметка ще ви покажат почти илюстрирана версия на приложението, но само в самия край и дори тогава е малък, абстрактен поглед.
Заключителни мисли: Рецепта за успех
Всички съвети в тази статия са насочени към двете основни цели за началната страница на уеб приложението ви, които вече обсъдихме: образование и привличане. Първо, съблечете цялата струя от дизайна си и я намалете до най-важните елементи, така че посетителят да може да се съсредоточи върху жизненоважната информация, без да се разсейва.
В съобщенията си направете смело заявление за това какво прави приложението и за кого е предназначено. Днес не обсъждахме тази последна точка, но има силен аргумент, който предполага, че ще спечелите повече реализации, като ясно идентифицирате целевата си аудитория. Пример: „MyCoolWebApp помага на дизайнерите и разработчиците да организират информация за клиента и проекта“ е по-добре от „MyCoolWebApp организира информация за клиента и проекта“. Също така не забравяйте да посочите всички важни функции и защо посетителите трябва да използват приложението.
След като изтриете съобщенията си, е време да се съсредоточите върху представянето на продукта си пред аудиторията. Три страхотни начина да направите това са скрийншоти (няколко, ако можете да го разклатите), примерни акаунти на живо и видео тур (видът, който действително показва продукта). Целта й е да намали несигурността около вашия продукт. Колкото по-малко е несигурността, толкова по-малко потребители ще се колебаят да се регистрират.
Това разбира се предполага, че имате качествен продукт. Ако вашият интерфейс е куц, тогава по всякакъв начин го скрийте от обществото и се придържайте към скучни, дълги описания вместо това!
