Помилки в дизайні сайтів: як зіпсувати сайт?

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

Строго по сітці!

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

Дотримання стилю

Всім нам знайоме поняття стилю. У сайту теж є свій стиль.
Окремі елементи дизайну потрібно об'єднувати загальним стилем (дизайн-шаблоном), який застосовується глобально, для всіх сторінок сайту. Це допоможе досягти однаковості і полегшить взаємодію відвідувачів з сайтом – вони швидко освояться і зрозуміють що до чого. Спілкування користувачів з таким сайтом буде легким і невимушеним, і, швидше за все, вони прийдуть ще не один раз. Про деякі факти щодо дизайну сайтів читайте тут.

Як же досягти свого стилю в дизайні?

Перевірте, щоб всі однотипні елементи на сайті були оформлені однаково:

• заголовки внутрішніх сторінок;
• підзаголовки в текстах;
• тексти;
• посилання;
• кнопки;
• меню;
• іконки;
• фільтри і сортування;
• пошук.

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

А де тут у вас головне?

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

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

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

Первинні функції

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

Це посилання або текст?

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

Боляче дивитися

Щоб дизайн сайту був приємний оку, важливо грамотно підібрати кольори.
У дизайні сайту можуть бути різні проблеми, пов'язані з неправильним використанням кольорів: недостатній контраст, насичені додаткові кольори (наприклад, червоний текст на синьому тлі), надмірна колірна насиченість елементів.
На жаль, досі багато власників «зроблених на коліні» сайтів впевнені, що їх дизайн найкращий.

Вибирайте кольори правильно!

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

• нейтральний світлий фон (білий або світло-сірий),
• темні заголовки сторінок, основний текст,
• привертають увагу кольором (але не кричущі) елементи управління.

Важливо! Кольоровий фон для сайту краще не використовувати, оскільки тексти на будь-якому тлі, крім білого, важко читати.
Текст для читання повинен добре контрастувати з тлом. Має бути 80% контрасту.
Недостатній контраст призводить до того, що текст важко читати. Так і пошукові системи це не люблять, можуть і застосувати фільтр.

Контент – наше все

Для багатьох сайтів текстовий контент – основна складова, тому текст повинен бути легким для читання.
На сайті краще використовувати:

• шрифти без зарубок і з різкими контурами, такі як Arial, Verdana, Tahoma, Open Sans. Шрифти із зарубками на зразок Georgia Times і на екрані можуть виглядати дещо «неохайно», читати їх просто некомфортно.
• розмір від 12 px. Текст дрібніше 10 пікселів важко читати. Для заголовків сторінок і підзаголовків текст повинен бути більше – від 14 px.
• рядкові букви для основного тексту. Прописні букви (КАПС) слід використовувати з обережністю, не застосовувати для цілих речень і абзаців. Такий текст припустимо тільки у заголовках і підзаголовках.

В цілому для дизайну сайту достатньо 2 шрифтів для основного тексту і заголовків.
Важливо! Використання великої кількості шрифтів різних розмірів і кольорів призводить до появи візуального шуму.

Прикрашання без причини

У дизайні потрібно знати міру. Ми вже говорили, що яскраві кольори, картинки, рамки допомагають привернути увагу, виділити важливе. Але їх треба застосовувати тільки тоді, коли вони служать для вирішення якої-небудь задачі.
Інакше є ризик захопитися оформлюванням і почати робити дизайн заради дизайну.
У цьому випадку оформлення буде відволікати від корисного вмісту сайту.
Прийміть як належне: відвідувач приходить на сайт не помилуватися дизайном, а знайти інформацію. Дизайн повинен йому в цьому допомагати!
Якщо декоративний елемент (іконка, картинка, рамка) не несе смислового навантаження, а розміщується на сайті для краси, його можна сміливо видаляти.

Підсумки:

Розробіть дизайн сайту для цільової аудиторії, з урахуванням її потреб і особливостей. У кожного, навіть невеликого, елемента в дизайні має бути своє практичне призначення.
Якщо хочете, щоб ваш сайт був інструментом бізнесу – ставтеся до нього саме так, і забудьте слова «а мені це подобається, а це ні», сайт не повинен подобатися вам, він повинен подобатися вашій цільовій аудиторії і приносити вам прибуток.
P. S. Якщо на вашому сайті присутні помилки, замовте його редизайн. Послуга редизайну коштує  значно дешевше розробки «з нуля». Але при цьому ви отримаєте цікаву, привабливу сторінку. До того ж, ми не просто дизайн поміняємо, але і текст напишемо новий. Подивитися послугу «Редизайн сайтів».