Проектиране на фокусирани интерфейси за по-добро ангажиране на потребителите

Участие на потребителя е труден показател, който може да бъде постигнат по различни начини за различни проекти. Повечето дизайнери мислят за интерфейс когато говорят за интерактивност, но съдържание на страницата може също да насърчи взаимодействието с потребителите. За по-добро ангажиране на потребителите е важно да напишете ангажиращо съдържание, и да представи това съдържание в закачлив дизайн.

Това е много по-лесно да се каже, отколкото да се направи, но ако научите някои основи, няма да имате никакъв проблем да изработите a фокусирани UI с голямо съдържание за вашите проекти.

В тази публикация ще ви покажа как да увеличите взаимодействие с потребителя и ангажимент за съдържание на уеб-базирани интерфейси. Това са двата най-често срещани начина за ангажиране на посетителя и ако можете оптимизиране на опита няма да имате проблем с увеличаването на този доходоносен час на показателя на страницата.

Capture Novelty

Концепцията за новост определя събитие или нещо, което обикновено е ново, често много ново и уникално въз основа на контекста. Нови събития привличаме вниманието ни, защото те Да изпъкнеш. Това важи и за дизайна на интерфейса с новост, представяща елементи, които изглеждат скочи от страницата.

Наскоро намерих голям пост, в който обсъждах важността на новостта, когато става въпрос за ангажираност. Потребителите изглежда гравитират към нови преживявания, интерфейси и елементи на потребителския интерфейс защото те са различни. Единственият факт, че е проектиран по различен начин, често привлича вниманието.

Един често срещан пример е бутонът за повикване до действие, намерен на повечето целеви страници. Можете също така да създадете новост с фонови снимки, илюстрации или екранни снимки на приложения, например на целевата страница Uber for Business.

Тази страница има бутон за покана за действие, но вниманието ми незабавно отива на скрийншота. Те анимират при първото зареждане, така че това комбинира новост в дизайна с движение да привлече вниманието.

Алтернатива би било използването на GiftRocket илюстрирани икони като връзки по-нататък в сайта.

И двата примера използвайте новост в своя полза. Не винаги можете да привличате хората в сайта, но ще видите по-добри резултати, ако привлечете вниманието им на висцерално ниво първи.

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

Оптимизирана типография

Проучванията показват, че повечето потребители сканиране на уеб страница вместо да я четат дума по дума. Вероятно ще искате да привлечете хората да четат съдържанието ви, но можете да направите толкова много.

Най-добрата алтернатива е да се създаде съдържанието, което може да се възпроизвежда със заглавия, удебелен текст и снимки, които илюстрират това, което се опитвате да кажете. Поне мисля три мощни техники за писане можете да използвате в съдържанието си повиши четивността:

1. Разделете съдържанието с чисти субтитри
2. Разделяйте параграфите да ги направят по-малки
3. Използвайте списъци с маркирани знаци да споделяте точките си по-бързо

Целта е да запазите вашите читатели движите се надолу по страницата по какъвто и да е начин. Като поддържат съдържание малко в парчета с размер на захапката ще имате много по-лесно време да привличате вниманието и да карате хората по-нататък в сайта.

Разгледайте блога за бързо измиване за пример за този стил на писане. Съдържанието е написано от Нийл Пател и той често пише много дълго съдържание, но той разбива параграфите в 1-3 изречения всяка.

Ако имате подходящи заглавия, и употреба изображения / точки на куршума в цялото съдържание ще получите хора, които ще се спускат и четат много повече. Също така не забравяйте увеличаване на празното пространство между параграфите. Маржове и подложки и двете играят огромна роля в оформлението и четливостта на оформлението.

Дизайн на текста, така че всъщност да е забавно да се чете. Скучно копие няма да примамва, но няма и забавно копие, което е твърде малко или няма контраст.

Изображения, привличащи очите

Неотдавнашно проучване от Backlinko предполага, че страниците с поне едно изображение в общи линии ранг по-висок от страници без изображения. Това е страхотно от гледна точка на SEO.

Но какво да кажем за ангажираността на потребителите? Ако можете да запазите това изображение над гънките или близо до върха също така ще привлече вниманието на посетителите, преди да се откажат. Не забравяйте, че новите елементи на страницата са склонни да привличат.

Когато имате изображение (или много изображения) в цялата страница, ще можете разбийте монотонността на скучни текстови блокове. Потребителите могат вземете почивка от четенето да оцените образа или да направите връзка между изображението и писменото съдържание. Както при повечето дизайнерски техники, качеството е по-ценно от количеството.

Проучване на случай от Moz установи, че висококачествените изображения са склонни пази посетителите на страницата за много по-дълго време. От друга страна, изображения с лошо качество също не работят и в някои случаи те са причинили на посетителите отскачам по-бързо отколкото без изображения. Трябва да опитате да включите поне едно изображение, което е свързани със съдържанието и това осигурява стойност за читателя.

TechCrunch прави това с включени изображения в статиите си, където често намирате a черта снимка над сгъва.

WordPress прави добавянето на включени изображения лесно с функцията за миниатюри. Можете да зададете отделна снимка за всяка публикация, която пишете, и да я принудите да се показва в горната част на страницата. Това е идеалният начин да разгледате посетителите какво е съдържанието, и да се увеличава CTR за сродни джаджи за публикации, които съдържат и миниатюрата на публикацията.

Елементи на контрастната страница

Ако трябва да обърнете внимание на една конкретна област на страницата, тогава асиметрия е най-добрият ти приятел. контраст задвижва твърд клин между определени области на дизайн или определени блокове съдържание.

Посетителят е естествено противопоставят защото е различно. Големи съпоставяния на цвят, размер или празно пространство привличат окото, защото то нарушава формата на всичко останало в оформлението.

Любимият ми пример за контрастиране на страниците е може би началната страница на Sketch. Има много контраст между двата бутона за подканване към действие, един за изтегляне на опит за Sketch, а другият за закупуване на копие.

Бутонът за покупка използва пълен цвят на фона много по-ярко от другите цветове в заглавката. Текстът на бутона също е по-ярък в сравнение с бутона за безплатен пробен период. Това води посетителите към бутона „Купете сега“ единствено от визуални стимули.

Ще забележите a подобна техника на началната страница на Optin Monster. Тази заглавка има само един бутон, обозначен като Get OptinMonster Now. Това е ярък зелен бутон на син фон без други зелени елементи.

Цветът, размерът и формата привличат вниманието ви, защото то контрастира с всичко останало в заглавната част. Непосредствено до бутона има малка текстова връзка за преглед на видеоклип. Това вероятно е страхотно видео и заслужава внимание, но не толкова, колкото бутонът CTA за пробна / подписване.

За блог може да имате различни квалификации за ангажираност на потребителите. Един общ избор е a формуляр за регистрация на бюлетина като пример за Aeolidia.

Ако превъртите надолу до дъното на съдържанието, което ще забележите a кутия за регистрация предназначена само за формата на бюлетина. Той се откроява от останалата част на страницата с уникален фонов цвят, забавна типография и сладка икона на King Triton.

Най-добрият начин да се проектира с контраст е да се изследват примери и просто да се експериментира. Вижте какво работи и какво не проследяване на показатели с A / B тестване. Ако търсите повече примери, разгледайте това писание на Codrops, пълно със съвети и екрани на асиметрични уебсайтове на живо.

Насърчаване на взаимодействието с потребителите

Има толкова много начини да се пазят посетителите, които се интересуват от даден сайт, но най-често срещаният е да накарайте ги да правят неща. Това важи както за статичните блогове, така и за динамичните социални сайтове. Няма никакви трикове за всички. Можете да направите каквото и да е, за да направите потребителите се чувстват ангажирани с страницата.

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

Когато става въпрос за динамични интерфейси, Целта на сайта обикновено е да насърчи ангажираността на потребителите. Най-голямата пречка е потребители на обучение как работи сайтът и как да се ангажирате правилно с интерфейса.

Вижте тази публикация от KissMetrics, която говори за техники за ангажиране на потребителите. Една от най-добрите стратегии, които открих, е да проектирайте обиколка с екскурзовод което води посетителите всяка от основните функции.

Помислете колко объркваща ще бъде перспективата на Twitter за нов потребител. Ако те не следват никого и нямат последователи, защо биха чуруликали?

Най- “Следвайте предложенията” кутия по време на регистрацията помага на новите потребители запознайте се с работата на Twitter. Тази функция ще добави нови потребители към започнете да се ангажирате с платформата и до експериментирайте с функциите като следва, туитове и лични съобщения.

Освен обиколка с екскурзовод, която също ще искате направете интерфейса ясен. Основните характеристики трябва да бъдат 1-2 кликвания от таблото за управление на потребителя или главната страница. Интуитивни интерфейси нужда от обяснение, и простота улавя вниманието много по-бързо.

Като разберете всички тези техники, ще имате по-лесен начин за изграждане на интерфейси решаване на проблемите на потребителите, и насърчаване на присъединяването на нови потребители. Ако търсите повече Съвети за дизайн на UX дизайн разгледайте тези свързани публикации:

• Тактика на потребителя за увеличаване на ангажираността (Thinkapps.com)
• Урок за постепенно ангажиране (Uxbooth.com)
• Не допускайте нови потребители да искат да научат как да използват вашия продукт (Uxdesign.cc)