5 кращих UX практик щодо покращення сайту

20

Від автора: наш зір це найсильніший орган відчуття. Неважливо, хто ви, веб або UX дизайнер, для досягнення емоційної зв’язку зі своїми читачами вам необхідно освоїти метод візуального розповіді.

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

5 кращих UX практик щодо покращення сайту

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

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

Ілюстрації як альтернатива фотографій

Для створення емоційної прив’язки ви не зобов’язані робити свої власні знімки.

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

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

5 кращих UX практик щодо покращення сайту

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

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

Наприклад, розглянемо зображення на Le Printemps du Polar сайті – це досить дорослі і спокусливі зображення, відмінно підходять під основну аудиторію сайту – творчих людей. Сайт присвячений архетипу фатальної жінки в кіно, тобто можна припустити, що люди, що заходять на цей сайт, мають досить досвідчені погляди на кіно.

5 кращих UX практик щодо покращення сайту

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

5 кращих UX практик щодо покращення сайту

Якщо загальне враження від сайту надто важке і депресивний, то користувачі можуть відштовхнути ваш сайт, піти з нього (що контрпродуктивно). У такому разі сайти з parallax ефектом будуть занадто похмурими, а досвід від їх використання буде не самим приємним.

Не бійтеся емблем

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

Погляньте на емблему сайту MailChimp Freddie, наприклад. Фредді це говорить логотип, в ньому закладені різні рухи, амбіції та цілі. Ця дуже гнучка, змінювана емблема, яка може сама розповідати історію. Хоча емблема не може повноцінно передати всі візуальне оповідання, вона може посилити деякі візуальні ефекти на вашому сайті.

5 кращих UX практик щодо покращення сайту

Фредді – невід’ємний компонент непередаваного досвіду на сайті MailChimp: чіткість картинки, проста зворотний зв’язок і плавність переходів. Він розповідає анекдоти, жартівливо нервує перед відправкою (вспотевшая долоню, що нависла над червоною кнопкою), і навіть дає вам п’ять.

5 кращих UX практик щодо покращення сайту

У статті Кращі практики інтерактивного дизайну на сайті UXPin емблеми описуються наступним чином — емблеми надають індивідуальність взаємодій між сайтом і користувачем. Даний підхід не завжди можна використовувати, особливо на технічних сайтах з автоматичною маркетингової email розсилкою. Велика частина успіху Mailchimp припадає на веселий досвід взаємодії з Фредді. Емблеми це більше ніж просто грайливі думки вголос: вони створюють емоційний зв’язок і підвищують конверсію сайту.

Не забувайте про фонові зображення

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

Використання обертових або змінюваних зображень в залежності від цілей сторінки додає додатковий вимір реальності вашого сайту. Чим більш «живий» ваш сайт, тим більш сильне враження він залишає – а значить, користувачі запам’ятають вашу історію.

5 кращих UX практик щодо покращення сайту

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

Також не варто забувати, що з ростом доступності Retina дисплеїв високої роздільної здатності відчуття від відвідування сайту стають порівнянні з переглядом кіно. HD фонове відео з накладенням інформації створює багатий мультимедіа досвід.

5 кращих UX практик щодо покращення сайту

В останні роки фонове HD відео стало одним з найпопулярніших способів візуального розповіді. Від гігантів як AirBnB і до більш маленьких сайтів майже всіх категорій стрімінг відео став невід’ємною частиною дизайну. Приміром, навіть гольф компанія Ashworth використовує фонове відео з певною метою.

5 кращих UX практик щодо покращення сайту

Зверніть увагу на те, як вони підібрали спокійне зациклене відео, як чорно-білий фільтр підкреслює елегантність. Таким чином, створюється відчуття, що гольф це атмосферна гра – а отже, основне завдання сайту це передати этуатмосферу. Нижче я навів 5 способів, як добре вписати фонове HD відео в дизайн сайту:

Зверніть увагу на вагу і тривалість відео – фонові відеоролики повинні передавати візуальну історію користувачам всього за кілька секунд. В ідеалі відео потрібно зациклити; відео має бути чітким, ясним і зрозумілим. Для зациклення підходить тривалість від 10 до 30 секунд.

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

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

Продумайте альтернативи для пристроїв або інтернет-з’єднань, які не можуть програвати HD відео – Відкрийте в Google Analytics список популярних пристроїв і проектуйте під них свій дизайн. Ви відразу ж зрозумієте, що в якості запасного варіанту краще всього використовувати статичне зображення.

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

Зображення повинні підходити користувачам

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

5 кращих UX практик щодо покращення сайту

Нижче я склав кілька підказок, які допоможуть визначити, чи підходять ваші зображення з контексту:

Чи підходить вам зображення? – Якщо ваш сайт присвячений 20-ти річним молодим людям, які важко працюють і також «важко» відпочивають, то не треба вставляти на сайт зображення людей середнього віку, провідних повсякденні спосіб життя.

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

Зазначене вище твердження стосується і стилів – Складного сайту – складні зображення, забавному сайту – забавні і т. д.

Складіть список (навіть уявний) з описом вашого сайту – переконайтеся, що вибрані зображення потрапляють під опис.

Розглянемо сайт House of Borel, розкішний бутік модних аксесуарів – відмінний приклад подачі історії публіці.

5 кращих UX практик щодо покращення сайту

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

Кожна секція підписана як «secret», що додає загадок, які наша головна героїня повинна розкрити. Якщо відкрити всі секрети, то можна помітити, як персонаж знаходить залишки ручного розкішного клатча. На кожному етапі сайт підживлює ваше бажання пройти трохи далі – як кіноперсонаж.

Бренд спілкується через головного героя з такими ж складними дівчатами, які знаходять своє відображення у головній героїні. Великі прогалини, описані в статті Тренди веб-дизайну 2015 і 2016 також підвищують витонченість сайту. Фонова музика з хорошим вокалом, хоча і включається автоматично, створює правильну атмосферу, не дратівливу користувачів.

Як результат – оригінальна історія розказана: наш бренд створений для вищого класу, ми не такі, як інші розкішні бренди, ми – та перлина, яку ви шукали.

Персоналізуйте оповідання

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

5 кращих UX практик щодо покращення сайту

Як вже говорилося вище, насамперед необхідно визначити, чи підходять зображення по контексту. Але можна піти ще далі і за допомогою декількох кроків зробити зображення ще більш особистими:

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

Складіть список опису властивостей вашого сайту, які не підходять конкурентам – Дотримуйтесь порад з статті competitive heuristic reviews, поиграйтесь з вашими перевагами перед конкурентами, зробіть на них основний наголос.

Показуйте людей – Люди автоматично порівнюють себе з іншими людьми. Подумайте про те, як багато інтернет-магазинів показують фото з людьми, які носять їх одяг або використовують їх товари. Jakob Nielsen у своєму дослідженні з’ясував, що соціальне схвалення мотивує людей до купівлі товарів. Для заманювання користувачів техніка дуже ефективна, навіть якщо ви нічого не продаєте.

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

Основне завдання – переконатися, що ваш сайт відповідає критеріям візуальної послідовності: відповідайте очікуванням користувачів на основі їх попереднього досвіду, забезпечте послідовність дизайну на всіх сторінках і додайте що-небудь від себе, що перебування на вашому сайту запам’яталося.

Висновок

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