Ергономіка розміщення відомостей на веб-сторінці

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

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

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

Віддалення елементів один від одного полегшує їх розрізнення оком.

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

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

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

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

• Основна назва (або h1)
• Заголовок 2 (або h2)
• Заголовок 3 (або h3)
• Заголовок 4 (або h4)
• Абзац (або p)

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

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

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

Гарнітури шрифтів, доступних безкоштовно на Google Font, які добре читаються:

• Lato
• Roboto
• Raleway

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

Але мова йде про контраст. Важливо грати на контрасті між фоном і заголовками.

Щоб усі користувачі могли правильно бачити ваш вміст, ви повинні дотримуватися правила: контраст між кольором фону вашої веб-сторінки та кольором тексту має бути не менше 4,5:1.

Розглянемо приклад веб-сайту з темним фоном:

• Для типографіки виберіть світло-сірий колір замість білого. Контраст буде не менш важливим, але сірий колір буде м’якшим для очей і сприятиме читабельності.
• Для піктограм (іконок) вибирайте бадьорий колір: бірюзовий, жовтий або червоний. Ці кольори звернуть увагу читача на важливі моменти.
• Для кнопок використовуйте кілька кольорів: яскравий колір і середній колір залежно від важливості гудзика. Для кнопки «Заклик до дії» використовуйте яскравий колір.

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

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

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

Колір кнопок так само важливий або навіть важливіший, ніж сам текст. Дійсно, кожен колір має значення.

Деякі поради щодо кнопок:

• До тексту вашої кнопки додайте заклик до дії, наприклад «запустити» або інше здійснити іншу дію
• Для кольору виберіть привабливий колір і помірний колір, наприклад синій, оранжевий або зелений
• Не додавайте занадто багато тексту на кнопку
• Анімуйте кнопку при наведенні на неї курсору, як у прикладі нижче

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

• зареєструватися
• підключення
• контакт
• підписка, тощо

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

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

Дотримання «веб-стандартів» дозволяє зробиту більш плавну навігацію. Деякі автоматизми створені користувачами Інтернету! Такі як:

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

Сьогодні більше половини всіх пошукових запитів в Інтернеті здійснюються з мобільного телефону чи планшета. Тому адаптивний дизайн необхідний!

58,99% світового трафіку сайтів посідає пошук з мобільних телефонів. (Джерело: Statista)

Оптимізація веб-сайту на комп’ютері – це не те саме, що оптимізація на мобільному! Будьте обережні, ваш веб-сайт може бути оптимізовано на комп’ютері, але не на мобільному пристрої. І так, у вас може бути дуже швидкий сайт на комп’ютері та дуже повільний на мобільному.

Це пов'язано з:

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

Ви повинні пам'ятати, що не всі мобільні екрани великі! Тому, щоб уникнути ситуації натискань 2 кнопок одночасно, слід дотримуватися правил:

• мінімальний рекомендований розмір для кнопки становить приблизно 48 x 48 пікселів, тобто приблизно 9 міліметрів
• відстань між кнопками має бути не менше 8 пікселів по горизонталі та вертикалі
• візьміть піктограми розміром 24 пікселя та додайте фон, щоб оптимізувати область натискання

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

Наприклад, коли ви просите свого користувача зв’язатися з вами через форму зворотного зв'язку, ви повинні дотримуватися кількох правил ергономіки:

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

Таким чином, уникайте розміщення багатьох полів у формі.

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

Розмістіть поле пошуку у верхній частині веб-сайту. Але чому вгорі? Оскільки користувачі Інтернету звикли знаходити це поле у верхній частині сторінки, як у пошуковику Google.

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

Як на прикладі нижче