5.5: Впровадження UX-дизайну
- Page ID
- 15590
Процес UX дизайну відбувається до, під час і після створення сайту. Він дуже тісно пов'язаний зі стратегією та дослідженнями, веб-розробкою та дизайном, SEO, стратегією та створенням контенту, а також подальшою оптимізацією конверсії.
Як обговорюється в розділі 5.4, Основні принципи UX дизайну, мобільний телефон не повинен бути запізненням, в UX або будь-яких інших цифрових починаннях. Він повинен бути пріоритетним у стратегії, проектуванні та реалізації. Рух «мобільний перший» підтримує це поняття і має на меті спочатку створити мобільний досвід користувачів, а потім адаптувати їх для Інтернету (замість навпаки). Проектування таким способом має багато переваг, оскільки принципи хорошого мобільного UX так само добре працюють на повноцінних сайтах, використовуючи прості конструкції, лінійні інтерфейси і зрозумілі кнопки і функції.
Проведення досліджень і відкриття
Перший крок передбачає проведення детальних досліджень щодо бізнесу, користувачів та технологій, що беруть участь. Це повністю висвітлено в розділі прийняття рішень на основі даних, який включає дослідження користувачів. Це дозволяє практикам UX точно знати, що їм потрібно зробити, щоб задовольнити потреби бізнесу та аудиторії. Це призведе до створення великої кількості даних, які потрібно відфільтрувати та організувати.
Створюємо базову структуру сайту
Інформаційна архітектура (IA) - це управління інформацією, прийняття великої кількості необроблених даних та застосування до неї інструментів та методів, щоб зробити її керованою та корисною. Категорії та сторінки повинні перетікати від широких до вузьких. Інтуїтивно розроблена структура буде направляти користувача до цілей сайту.
IA працює як на мікро, так і на макрорівні, що охоплює все, починаючи від того, як окремі сторінки викладені, наприклад, де навігація і заголовки, до того, як цілі веб-сайти складаються разом.
Більшість веб-сайтів мають ієрархічну структуру, а це означає, що вгорі є широкі, важливі сторінки і більш вузькі, більш конкретні та менш важливі сторінки далі. Ієрархічні структури можуть бути дуже широкими і дрібними, маючи багато основних розділів з невеликою кількістю нижніх сторінок або дуже вузькими і глибокими з декількома основними розділами і багатьма сторінками нижче. Це залежить від практикуючого UX, щоб знайти правильний баланс широти і глибини.
Аналізуйте вміст
Якщо ви працюєте над веб-сайтом, який вже існує, він буде заповнений найрізноманітнішим вмістом. В цьому випадку потрібно провести контент-аудит, який представляє собою експертизу і оцінку наявного матеріалу.
Якщо веб-сайт новий або якщо ви плануєте додати новий вміст на існуючий веб-сайт, вам потрібно скласти стратегію вмісту. Це план, який окреслює, який контент потрібен і коли і як він буде створений. Для цього немає жодного шаблону або моделі, тому кожна стратегія контенту буде унікальною.
Контент-стратегія значною мірою відповідає командам стратегії, копіювання та концепції, але практикуючий UX повинен брати участь у кількох ключових ролей. Пункти, на які потрібно звернути увагу UX, є:
Докладніше про це читайте в розділі Стратегія контент-маркетингу.
- Чого повинен досягти сайт. Природно, що контент повинен працювати на досягнення цілей сайту та бізнесу.
- Те, що хоче і потрібно користувачеві. Проводячи ретельне дослідження користувачів, ви повинні мати можливість відповісти на це питання. Надайте лише вміст, який додасть користувачеві реальну цінність.
- Що робить контент унікальним, цінним або іншим. Контент повинен надавати цінність для користувача. Контент-стратегія допоможе забезпечити регулярне оновлення вмісту та буде включати в себе актуальну інформацію.
- Тон і мова, що використовується. Вам потрібно враховувати тон, будь то веселий, легкий чи серйозний, реєстр, будь то формальний чи неформальний, і стиль, який ви будете використовувати у своєму контенті. Переконайтеся, що тон, стиль та регістр відповідають тексту, зображенням, відео та іншим типам вмісту. Правильна граматика та орфографія є важливими міркуваннями, оскільки вони говорять про довіру до сайту.
Принципи створення контенту
Тут слід врахувати три ключові моменти.
1. Структура
Контент повинен бути написаний так, щоб користувачі могли якомога швидше знайти потрібну їм інформацію. Розділ, присвячений цифровому копірайтингу, розповість про це більш детально. Копіювання можна зробити більш легко читабельним за допомогою:
Не забувайте про SEO. Існує безліч способів оптимізації веб-сайту під час планування UX. Погляньте на розділ SEO для деяких вказівок щодо того, що включати.
- Виділення або виділення жирним шрифтом ключових фраз і слів
- Використання маркованих списків
- Використання абзаців для розбивання інформації
- Використання описових і різних заголовків.
2. Ієрар
На сторінці використовуйте перевернутий стиль піраміди або структуру F для вашої копії. Важлива інформація повинна знаходитися у верхній частині сторінки, щоб зробити для зручного візуального сканування. Заголовок стоїть першим і є найбільшим і найсміливішим типом на сторінці. За цим слідує підзаголовок або розпис, а потім вміст представлений у спадній шкалі важливості. Речення повинні бути короткими, а важливі слова повинні з'являтися на початку речення, особливо в точках кулі. Дослідження відстеження очей показали, що структура F все ще є найбільш зручною для користувача структурою, оскільки це природний потік очей (Hanes, 2016).
3. Актуальність
Перш за все, вміст на сторінці повинен бути релевантним для користувача та мети самої сторінки. Якщо користувач натискає, щоб прочитати про продукт, але потрапляє на сторінку з вмістом про компанію, їх досвід буде заплямований.
Створіть карту сайту
У термінології UX карта сайту - це візуалізований структурний план того, як будуть викладені та організовані сторінки веб-сайту.
Щоб створити візуальні ефекти для вашої карти сайту, ви можете виконати цей процес:
- Почніть з визначення домашньої сторінки. Це повинен бути верхній пункт в ієрархії.
- Помістіть основні пункти навігації нижче цього.
- Розташуйте свої сторінки вмісту під основними навігаційними елементами, відповідно до результатів тестування та розуміння користувачів, а також вашої структури інформаційної архітектури.
- Додайте сторінки нижче цього, поки ви не розмістили весь свій вміст. Переконайтеся, що кожна сторінка доступна принаймні з однієї іншої сторінки. Це може здатися очевидним, але ви будете здивовані, як часто це не помічають!
- Визначити будь-які інші статичні елементи навігації, тобто нижній колонтитул, бічна панель, заголовок навігації, інструменти пошуку. Розмістіть їх у вашій діаграмі в логічному місці, можливо, відгалужуючись безпосередньо від домашньої сторінки або як окремі блоки.
Термін «карта сайту» може мати два значення. Одним з них є те, як це визначено вище — структурний план веб-сайту. Інша - це сторінка на вашому веб-сайті, яка перераховує всі сторінки, доступні логічним та доступним способом. Прикладом може служити карта сайту Apple: www.apple.com/sitemap. Ця карта сайту повинна бути доступна з кожної сторінки. Динамічні карти сайту можуть бути використані так, щоб карта сайту оновлювалася автоматично, коли інформація додається на веб-сайт. Різні карти сайту існують для різних цілей, тому досліджуйте, що ваші користувачі вважали б найбільш корисними.
Побудуйте навігацію
Навігація повинна легко керувати користувачами по всіх сторінках веб-сайту; мова йде не тільки про меню. Успішна навігація повинна допомогти користувачеві відповісти на чотири основні питання:
1. Де я?
Навігація повинна повідомляти користувачам, де вони знаходяться на сайті. Ієрархічні посилання, чіткі заголовки сторінок, URL-адреси та зміни меню допомагають показати користувачеві, де він або вона знаходиться. Чим більше ваш сайт і чим більше рівнів він має, тим важливішим стає дати своїм користувачам показник того, де вони знаходяться по відношенню до всього іншого на сайті. Це допомагає користувачам зрозуміти зміст сторінки, на якій вони знаходяться, і змушує їх почувати себе більш впевнено при подальшій навігації по сайту.
2. Як я сюди потрапив?
Навігація по ієрархічній крихті часто вказує загальний шлях, який користувач міг пройти. У випадку пошуку по сайту, використовуване ключове слово має бути вказано на сторінці результатів.
3. Куди я можу піти далі?
Навігаційні підказки дають користувачеві знати, куди йти далі, наприклад, «додати в кошик» на сайті електронної комерції або контекстне посилання, яке вказує «читати далі». Ключ полягає в тому, щоб параметри зрозуміли користувачеві.
Існує тенденція, думаючи про навігацію, планувати тільки в одному напрямку, від домашньої сторінки вниз по ланцюжку сторінок в ієрархії. Але дуже часто користувачі приходять на сайт з посилання або результату пошуку, який опускає їх глибоко в веб-сайт. Це робить однаково важливим дивитися на зворотну навігацію, отримуючи від сторінок нижнього рівня назад до верху.
4. Як мені дістатися додому?
Стало умовним, що логотип веб-сайту повертає користувача на домашню сторінку, але багато користувачів все ще шукають у головному меню слово «home». Переконайтеся, що вони можуть повернутися до початку швидко і легко.
Створюємо макет
Веб-сторінку можна розбити приблизно на чотири зони:
Кожен із них, як правило, містить певні типи елементів та вмісту, наприклад:
- Заголовок (у верхній частині сторінки) — використовується для ідентифікації сайту та надання основних інструментів: Логотип або ідентифікаційний знак (можливо, включаючи слоган бренду) Головна навігація Вхід Функція пошуку
- Центральна область вмісту - використовується для представлення основного змісту Фактичний вміст, специфічний для сторінки, такий як текст, зображення, відео тощо (це може бути розбито на кілька стовпців) CTA різних видів, таких як «Зареєструватися»; «Початок роботи»; «Заявка на безкоштовну пробну версію»
Користувачі вважають інформацію в бічних панелям менш важливою, тому не розміщуйте тут своє ключове повідомлення.
- Бічна панель (або зліва або справа, або іноді з обох сторін) - використовується для представлення вторинного контенту та інструментів Вторинна панель навігації, або інші функції навігації (наприклад, блог статті архів за датою)
CTA, включаючи кнопки та форми реєстрації
Додатковий контент, як-от посилання або фрагменти.
- Нижній колонтитул (в нижній частині сторінки) - використовується для важливих, але не помітних змісту і ресурсів
Юридична інформація, політика конфіденційності та відмова від відповідальності
Додаткові елементи навігації.
Найважливішим фактором для будь-якого макета сторінки є зміст, тобто те, що потрібно включити, яка найважливіша дія або частина інформації, і як це може бути структуровано, щоб задовольнити потреби користувача? Зрештою, веб-сторінки створюються для підтримки подорожі користувача. Всі сторінки на вашому сайті не обов'язково повинні виглядати однаково.
Створення ескізів, каркасів і прототипів
Каркаси - це скелетні обриси макета веб-сторінки. Їх призначення полягає в тому, щоб намітити розміщення різних елементів на сторінці як орієнтир для дизайнера для створення візуального дизайну, а веб-розробника - для створення коду та інтерактивності, необхідної. Каркаси можуть бути низької точності (дуже грубі і базові ескізи, ледь нагадують кінцевий результат) або високої точності (дуже деталізовані, складні макети, включаючи творчі елементи). Будь-який проект веб-сайту матиме кілька каркасів, принаймні по одному для кожної сторінки шаблону. Захоплюйте свої перші ідеї на папері; це найшвидший і найкращий спосіб захопити хороші ідеї.
Прототипи - це крок вгору від каркасів, в тому, що вони інтерактивні. Прототипи - це, по суті, набори каркасів, які були пов'язані між собою, як веб-сайт, так що по ним можна переміщатися, натиснувши та прокручуючи.
Прототипи - це чудові інструменти для тестування потоку та функції пропонованого веб-сайту, перш ніж зануритися в дорогі та тривалі етапи проектування та розробки. Вони можуть заощадити багато часу, грошей і зусиль, допомагаючи визначити проблеми та вдосконалення заздалегідь. Знову ж таки, прототипування паперу є найкращим методом для швидкого, ітераційного дизайну UX.
Зберіть інші елементи
Після того, як ви визначили свій контент і намітили основний макет кожної сторінки, вам потрібно додати всі додаткові елементи, які ваш сайт буде потрібно. Пам'ятайте, що сторінка повинна містити лише ті елементи, які можуть знадобитися користувачеві для підтримки їх у своєму завданні. До них можна віднести:
Паперові прототипи роблять тестування швидким і простим. Вони портативні, прості у використанні і не вимагають складних інструментів, підключення до Інтернету або навичок користувача. Мобільні додатки, такі як Pop (popapp.in), легко перетворюють паперові прототипи в інтерактивні демонстрації. Дивіться розділ 5.8, Інструменти торгівлі для отримання додаткової інформації про додаток Pop
Заклики до дії. CTA можуть приймати найрізноманітніші форми і форми, від текстових посилань до великих кнопок.
Форми. Це інтерактивні поля, де користувачі можуть вводити свої контактні дані або іншу інформацію, наприклад, підписатися на розсилку або вступити в конкурс.
Пошук. Багато сайтів можуть скористатися функцією пошуку, як для того, щоб допомогти користувачам орієнтуватися, так і полегшити пошук конкретної інформації.
Заклики до дії
Успішні CTA - це прості, швидкі, зрозумілі дії, які не вимагають від користувача нічого страшного або взяття на себе зобов'язання. Вони завжди повинні робити саме те, що заявляють, щоб вселити впевненість і ясність. Вся справа в управлінні очікуваннями користувачів, чи насправді вони йдуть туди, де вони думають, чи виконують дії, які очікують користувачі?
Позиціонування
Первинний CTA зазвичай повинен з'являтися над складкою, щоб привернути увагу, зосереджену тут. Інші CTA можуть з'являтися нижче згину, а основний CTA також може повторюватися нижче вниз.
Розстановка пріоритетів
Одна веб-сторінка може бути побудована навколо одного CTA або може включати широкий спектр можливих бажаних дій. Все це зводиться до того, чого прагне досягти сторінка та веб-сайт, виходячи з бізнес-вимог.
Коли використовується кілька CTA, повинен бути один основний, який сильно виділяється, а інші повинні бути більш приглушеними, граючи допоміжну роль. CTA можна диференціювати за кольором, формою, розміщенням та розміром; чим менше варіантів, тим краще.
Клікабельність
Будь-які CTA, на які можна натиснути, повинні виглядати тактильно або відчутно. Це означає, що вони повинні якось виділятися з фону і зі статичних елементів. Один з підходів полягає в тому, щоб кнопка виглядала як справжня кнопка, виділяючись з її оточення. Інший поїзд думки виступає за плоский дизайнерський підхід як більш елегантний і сучасний вираз цього.
Кількість
Нарешті, переконайтеся, що не переповнюйте користувачів занадто великою кількістю варіантів. Дотримуйтеся однієї центральної CTA на сторінці, роблячи очевидним для користувачів, яка головна мета, дія або результат сторінки.
Форми
Форми є надзвичайно корисними інструментами для збору інформації про користувача та заохочення взаємодії на сайті. Користувачі, як правило, знайомі з ними і мають певний досвід заповнення їх, і є багато веб-конвенцій, які регулюють, як вони повинні бути налаштовані. Як правило, чим коротше ви зробите свою форму, тим краще. Чим менше полів доведеться заповнити користувачам, тим більша ймовірність того, що вони завершать процес.
Сходинки та секції
Прості форми з лише кількома полями можуть бути зібрані у вигляді серії коробок. Для форм, які є довшими, наприклад, тих, що знаходяться в електронній комерції касах або складних процесах реєстрації, має сенс розділити їх на керовані частини. Керуйте очікуваннями користувачів, чітко вказуючи, що буде наступним кроком.
Актуальність
Простота є ключовим фактором, форми повинні бути максимально короткими і чіткими. Зусилля повинно дорівнювати отриманої нагороді. Всі включені поля повинні чітко відповідати призначенню форми, інакше користувачі можуть заплутатися або підозрювати, що ви збираєте їх інформацію.
Важливо, щоб користувачі отримували повідомлення про те, які поля є обов'язковими, а які є необов'язковими. Якщо всі поля обов'язкові, то форма повинна чітко це вказувати.
Будьте в курсі місцевих законів, які визначають, яку інформацію вам дозволено збирати, і як ви можете її використовувати.
Допомога
Це гарна ідея включити допомогу для користувачів, які заповнюють форми. Особливо це стосується випадків, коли певне поле вимагає введення введення певним чином і подвійно так для полів паролів зі спеціальними правилами. Користувачі не будуть інстинктивно знати правила, пов'язані з конкретними полями, тому ви повинні надати безліч вказівок на цьому шляху.
Форма повинна бути добре розроблена та інтуїтивно зрозуміла, а не надавати користувачам поради та текст щодо того, як її заповнити. В ідеалі користувачі взагалі не повинні потребувати допомоги.
Валідація
Перевірка означає надання користувачеві зворотного зв'язку на входи, які вони представили, чи правильно чи неправильно. Перевірка може відбуватися в двох точках, після того, як користувач надіслав форму, яка є перевіркою подання, або під час процесу заповнення форми, яка є живою вбудованої перевірки. Перевірка подання має важливе значення для захисту бази даних, але також допоможе зловити помилки користувачів. Жива вбудована перевірка зазвичай призводить до набагато кращого досвіду користувачів, оскільки користувачі потім знають, що їх інформація є правильною перед відправкою форми.
Повідомлення про помилки є важливою частиною перевірки, яка відображається користувачам. Повідомлення про помилки часто ігноруються при розробці UX і є величезним джерелом розчарування користувачів.
Деякі найкращі практики, які слід враховувати:
- Ці повідомлення повинні бути легкими для розуміння, тобто користувач не повинен боротися, щоб зрозуміти помилку або як її виправити.
- Повідомлення про помилку має залишатися видимим, доки помилка не буде виправлена.
- Тон повідомлення повинен збігатися з іншою частиною сайту.
- Важливо пам'ятати, що форма - це розмова з користувачами. Це інтерактивний діалог, навіть якщо ви не присутні.
Рекапча
reCAPTCHA - це безкоштовна послуга, пропонована Google, яка вимагає від користувачів відповіді на запитання, щоб довести, що вони не боти. Це допомагає захистити веб-сайти від спаму та зловживань, але зменшує конверсії і в деяких випадках може зробити сайт непридатним для користувачів. Незважаючи на ці проблеми доступності, reCAPTCHA все ще є важливим фактором при розробці форм для захисту вашого веб-сайту.
Пошук
Пошук має три корисні функції на веб-сайті. Це не тільки допомагає користувачам знаходити конкретні речі, він також служить важливим навігаційним посібником для великих сайтів і збирає цінні дані з досліджень ключових слів про те, що шукає користувач. З точки зору практикуючого UX, є деякі важливі нетехнічні принципи, про які слід пам'ятати.
Для великих сайтів може бути корисно дозволити користувачам здійснювати пошук в межах категорій. Наприклад, на Amazon ви можете шукати безпосередньо в категорії «книги».
Позиціонування
Пошук буде або основною відправною точкою для вашого сайту, або стане корисним додатковим інструментом. У першому випадку, наприклад, на великому сайті електронної комерції, такому як Amazon, інструмент пошуку повинен розташовуватися централізовано та помітно, щоб заохотити користувача використовувати це як основний навігаційний інструмент. В останньому випадку найкраща практика диктує, що вона повинна знаходитися в правому верхньому куті, або легко доступна в бічній панелі.
Точність
Чим краще ви зможете інтерпретувати те, що шукає ваш користувач, тим більш релевантними і точними можуть бути результати пошуку. Google дуже наполегливо працює над налаштуванням свого алгоритму пошуку, щоб користувачі отримували не просто те, що шукали, а те, що вони насправді хотіли в першу чергу.
Дослідження користувачів можуть запропонувати, чому користувачі шукають ваш сайт в першу чергу, і що вони зазвичай шукають. Популярність і недавність контенту є іншими ключовими міркуваннями.
Результати
Коли справа доходить до відображення результатів пошуку, є кілька ключових питань, які потрібно задати:
Скільки результатів має відображатися на сторінці?
Десять до 20 результатів на сторінці, як правило, є хорошим орієнтиром.
В якому порядку повинні бути результати? Найпопулярніші в першу чергу? Найдешевші? Найновіші? Найближчий матч?
Це буде залежати від характеру ділянки.
Чи можна відфільтрувати результати?
Деякі веб-сайти дозволяють користувачам робити другий пошук, обмежений результатами першого.
Що станеться, якщо результатів немає?
Якщо результатів пошуку не знайдено, функція пошуку повинна надавати користувачеві підказки та поради щодо того, як краще шукати на сайті. Те, що результатів немає, має бути викладено чітко, після чого слід список найближчого відповідності контенту пошуковому запиту. Цілком можливо, що шукач не знав точного терміну з того, що вони шукають, або зробив помилку, хоча сайт повинен прощати їх. Підказки можуть включати символи підстановки або розбивання термінів на менші шматки. Повідомлення, показане користувачам, повинно бути корисним і релевантним, а не просто скопійованим з порад Google.
Визначаємо візуальний дизайн
Перш ніж користувачі взаємодіють з вашим ретельно продуманим вмістом, відмінною структурою навігації та гладкою панеллю пошуку, їх перше враження виникає від зовнішнього вигляду веб-сайту, таких як кольори, графіка та загальні елементи дизайну. Оскільки люди проводять все більше часу в Інтернеті, вони менш толерантні до веб-сайтів, які не виглядають добре або надійно. Хоча веб-сайт не є художньою інсталяцією, це дизайн-проект, і застосовуються основи хорошого дизайну.
Детальніше про це читайте в розділі Веб-розробка та дизайн
Хоча значна частина досвіду візуального дизайну буде надходити від графічного дизайнера, для практикуючого UX важливо знати наступні принципи візуального дизайну:
Колір
Колір надає неймовірний психологічний вплив на людей. Виходячи з нашої культури, уподобань та вивчених сигналів, люди інтерпретують кольори дуже специфічними способами, і це може бути використано для інформування та керування досвідом користувачів. Вибираючи колірну палітру для вашого веб-сайту, пам'ятайте про проблеми розбірливості та доступності. Використання великої кількості відкритого або білого простору часто робить сайти простими та зручними для читання.
Образність
Вибір зображень, що використовуються на веб-сайті, може мати величезний вплив на те, як користувачі поводяться та взаємодіють на сторінці. Ви ніколи не можете бути абсолютно впевнені, які зображення матимуть найкращі результати, тому це одна область, де вам потрібно буде зробити багато тестування (докладніше про це нижче). Люди схильні тяжіти до зображень інших людей і ототожнюватися з ними. Контент-стратегія повинна включати іміджеву стратегію, особливо якщо сайт багатий зображеннями. Ракурси камери, зміст, стратегія бренду та тон візуальних ефектів - все це потрібно враховувати. Зображення завжди повинні бути актуальними і не використовуватися в якості наповнювачів або чистого прикраси.