Веб-дизайн Вашого сайту

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

 

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

Веб-дизайн мають створювати професіонали маркетологи-дизайнери.

10 принципів ефективного правильного веб-дизайну

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

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

Як думають користувачі?

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

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

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

• Користувачі не читають, вони сканують очима. Користувачі сканують веб-сторінки, шукаючи на них «зачіпки», такі як заголовки, списки, слова, виділені жирним або курсивом і т.д.

• Користувачі не читають, вони сканують. Бачите закономірність – «гаряча» зона тягнеться до середини пропозицій. Це типово для сканування контенту очима.

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

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

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

• Користувачі дотримуються своєї інтуїції. У більшості випадків користувачі виконують різні дії, не читаючи інструкцій, розміщених на сайті. Згідно Стіву Кругу: «Якщо ми знаходимо щось, що працює, ми використовуємо це. Абсолютно неважливо, як це працює, нам важливий сам факт цього! »

• Користувачі хочуть володіти ситуацією. Користувачі хочуть керувати своїм браузером.

1. Не змушуйте користувачів думати

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

Якщо ж навігація по сайту та його структура заплутані і неочевидні, то кількість питань у користувача лише зросте і він не зможе зрозуміти, як працювати з Вашим сайтом, як переміститися з точки А в точку Б …

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

Давайте розглянемо наочний приклад. У Beyondis.co.uk в самому верху веб-сторінки розміщений девіз: «beyond channels, beyond products, beyond distribution». Чому саме в цьому місці? А тому, що розробники виходили з того, що при перегляді веб-сторінок користувачі діють за схемою «F» , звідси випливає, що першим, що побачать користувачі, буде цей девіз.

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

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

ExpressionEngine використовує таку ж просту структуру, як і в попередньому прикладі, але при перегляді сторінки сайту у користувачів не виникає жодних питань – їм все зрозуміло!

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

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

2. Не випробовуйте терпіння користувачів

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

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

Жахливу помилку роблять ті, хто не пускають користувача на сайт без вказівки останніми їх e-mail.

Як цілком правильно стверджує Райан Сінгер, розробник 37Signals, користувачі охоче б дали Вам свій e-mail після того, як побачили Ваш сервіс у дії і змогли зрозуміти і оцінити, що вони отримають взамін на свій e-mail.

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

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

Найкращим варіантом буде прибрати всі бар’єри, чи то вимога зареєструватися або підписатися на що-небудь перед тим, як отримати доступ до сервісу.

3. Керуйте увагою користувачів

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

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

Humanized.com досконало використовує метод захоплення і управління увагою користувача. Єдиним елементом, який чіпляє погляд користувачів, є слово «FREE». Під та праворуч від цього заголовка розташовується контентна частина, що описує, що і як користувач отримує безкоштовно.

Фокусування уваги користувачів на певних ділянках сайту дозволяє допомогти їм потрапити з точки А в точку Б без будь-яких розумових зусиль з їхнього боку.

Чим менше у користувачів виникає питань щодо користування Вашим сайтом, тим з більшою довірою вони будуть до Вас ставитися!

4. Всі функції Вашого сайту повинні бути видні користувачам

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

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

Подібні інтерфейси дуже прості, очевидні і юзабельні.

Dibusoft.com поєднують візуально привабливий дизайн з ясною і прозорою структурою самого сайту. Сайт має 9 основних навігаційних опцій, які видно навіть при побіжному погляді.

Запам’ятайте! Всі функції Вашого сайту повинні бути видні користувачам навіть при його швидкому перегляді. Це фундаментальний принцип успішного користувальницького інтерфейсу. Користувачі повинні отримувати задоволення від взаємодії з Вашим сайтом.

5. Пишіть ефективні та зрозумілі тексти

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

Уникайте використання незрозумілих і професійних виразів – Ваш текст повинен бути зрозумілий кожному пересічному користувачеві.

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

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

6. Прагніть до простоти

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

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

Саме тому версія для друку така затребувана користувачами Інтернет.

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

7. Не бійтеся вільного простору

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

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

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

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

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

 

8. Взаємодійте з користувачами за допомогою «мови дизайну»

У своїх працях з ефективної комунікації Аарон Маркус висвітлює 3 фундаментальних принципи «мови дизайну» – всього того, що користувач бачить на екрані.

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

• Економія. Зробіть більше з мінімальним набором візуальних елементів. У своїй роботі Ви повинні використовувати наступні 4 основних принципи: простота, ясність, унікальність і виразність. Простота включає в себе тільки найважливіші елементи для комунікації. Ясність: кожен елемент сайту повинен бути зрозумілий і не викликати питань. Унікальність: всі основні елементи та їх властивості повинні бути унікальними. Виразність: всі найважливіші елементи повинні легко сприйматися.

• Комунікація. Зробіть Ваш сайт, відповідним очікуванням користувачів. У грамотному інтерфейсі в балансі перебувають чіткість, читабельність, типографіка, символіка, колір або текстура. Оптимально буде використовувати 3 гарнітури шрифту максимум 3-ох розмірів – по 18 слів або 50-80 символів на рядок.

9. Загальноприйняті стандарти (угоди) – наші друзі

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

Тільки уявіть, що б було, якщо кожен веб-дизайнер розміщував на своєму сайті свій варіант іконки RSS, а не просто перетворював загальноприйнятий.

Те ж стосується і базових принципів, як то структурувати файли по папках.

Вивчайте користувачів, їх поведінку та очікування. Ваш сайт повинен їм відповідати і виправдовувати. Більше інформації з цієї теми можна знайти на сайті Якоба Нільсена (англійською мовою) або російською мовою на WebMascon’e.

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

10. Постійно тестуйте

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

4 важливих пункти для запам’ятовування:

• Згідно Стіву Кругу, тестувати 1 користувача на 100% ефективніше, ніж жодного. Також тестувати 1 користувача на початку реалізації проекту набагато краще, ніж тестувати 50 ближче до його запуску. Відповідно до першого закону Боем, основна маса помилок зустрічається на етапі проектування. Надалі ж позбавлення від невиправлених помилок обходиться дуже дорого.

• Тестування – постійний процес. Суть цього висновку полягає в тому, що Ви повинні тестувати кожен новий елемент сайту з метою його вдосконалення.

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

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

В заключення: якщо Ви хочете створити чарівний у всіх відносинах сайт, Ви повинні регулярно піддавати його всіляким тестуванням.