Проектування орієнтованих інтерфейсів для кращого залучення користувачів

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

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

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

Захоплення новинки

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

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

Одним з поширених прикладів є кнопка виклику до дії, яку можна знайти на більшості цільових сторінок. Ви також можете побудувати новинку з фонові фотографії, ілюстрації або скріншоти програм, наприклад, на цільовій сторінці Uber for Business.

На цій сторінці є кнопка виклику до дії, але мою увагу відразу йде на скріншоти. Вони анімують при першому завантаженні, тому це поєднує новизна дизайну з рухом привернути увагу.

Альтернативою може бути використання GiftRocket ілюстровані іконки як посилання заглибитися далі в сайт.

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

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

Типографіка

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

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

1. Розділити вміст з чіткими субтитрами
2. Розбийте абзаци щоб зробити їх меншими
3. Використовуйте маркіровані списки швидше поділитися своїми балами

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

Перевірте блог Quick Sprout для прикладу цього стилю написання. Зміст написаний Нілом Пател, і він часто пише дуже тривалий зміст, але він розбиває абзаци на 1-3 речення.

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

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

Зображення очей

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

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

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

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

TechCrunch робить це за допомогою зображень у своїх статтях, де ви часто знаходите a Вибране фото над складкою.

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

Контрастні елементи сторінки

Якщо вам потрібно звернути увагу на одну конкретну область на сторінці, то асиметрія Ваш найкращий друг. Контраст приводить жорсткий клин між окремими ділянками конструкції або певними блоками контенту.

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

Мій улюблений приклад контрастування елементів сторінки - це, можливо, домашня сторінка Sketch. Знайдено багато контрасту між двома кнопками заклику до дії, один для завантаження ескізного випробування, а інший для придбання копії.

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

Ви помітите a подібна техніка на головній сторінці Optin Monster. Цей заголовок містить лише одну кнопку з позначкою Get OptinMonster Now. Це яскраво-зелена кнопка на синьому тлі без інших зелених елементів.

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

Для блогу можна мати різні кваліфікації для взаємодії з користувачем. Один загальний вибір - це форма реєстрації бюлетеня наприклад на прикладі Aeolidia.

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

Найкращим способом розробки з контрастом є вивчення прикладів і просто експеримент. Подивіться, що працює, а що ні відстеження показників з A / B-тестуванням. Якщо ви шукаєте більше прикладів, ознайомтеся з цим записом Codrops, наповненим порадами та екранами живих асиметричних веб-сайтів.

Заохочуйте взаємодію користувачів

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

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

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

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

Подумайте про те, наскільки незрозумілою буде перспектива щебетати з новим користувачем. Якщо вони не слідують нікому і не мають жодних послідовників, чому б вони твітте?

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

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

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

• Тактика користувача, що працює на борту, для збільшення взаємодії (thinkapps.com)
• Урок поступового залучення (uxbooth.com)
• Не вважайте, що нові користувачі хочуть навчитися користуватися вашим продуктом (uxdesign.cc)