Чому шрифти важливі: аналіз UX і типографіки
Коли користувачі заходять на ваш веб-сайт, вони зазвичай мають певну мету. Ця мета полягає в тому, щоб рідко помітити ваш чудовий дизайн сайту та насолодитися його розширеною функціональністю.
Користувачі найчастіше приходять за інформацією, будь то про деякі аспекти життя в цілому або про продукт, який ви пропонуєте. Тут на допомогу приходить типографіка, оскільки вона покликана забезпечити найкраще сприйняття інформації на вашому веб-сайті. Сьогодні настав час заглибитися в складний зв’язок UX і типографіки та простежити вплив вибору шрифту на загальний досвід перегляду веб-сайту.
Чому типографіка настільки важлива для UX?
Повідомляється, що більше 95% інформації в Інтернеті зберігається у формі тексту (письмової мови). Ця інформація призначена для сприйняття людьми, і вони намагаються зробити все можливе, щоб обробити якомога більше інформації. Тут типографіка функціонує як допоміжний друг, який допомагає людям отримати максимальну користь від часу та зусиль у веб-перегляді.
Хорошу типографіку часто важко помітити. Це спрощує процес читання, і ви не звертаєте на нього уваги. З іншого боку, неправильний вибір типографіки може зіпсувати досвід перегляду веб-сторінок і звести швидкість сприйняття читання до мінімуму. Оскільки ніхто не любить витрачати час, типографіка стає одним із внутрішніх важелів UX, який сильно впливає на загальний досвід користувача на певному веб-сайті.
Налаштувавши типографіку веб-сайту, ви покращите:
- читабельність тексту;
- доступність контенту;
- зручність використання сайту;
- і загальний графічний баланс.
Тут ми обговорюємо лише UX і типографіку, не згадуючи про роль типографіки у формуванні візуальної індивідуальності веб-сайту, визначенні вашого бренду та приверненні уваги читача. Перегляньте цю статтю, щоб дізнатися більше.
Вибір типографіки для цього церковного веб-сайту не тільки підвищує UX на веб-сайті, але також допомагає формувати візуальну ідентичність бренду).
Як підвищити UX на вашому веб-сайті шляхом оптимізації типографіки?
Є кілька способів покращити UX на вашому веб-сайті шляхом оптимізації типографіки. Оскільки UX і типографіка тісно пов’язані, оптимізуючи типографіку, ви також оптимізуєте читабельність свого тексту та, таким чином, додаєте загальний UX на своєму веб-сайті. Давайте подивимося, які правила оптимізації типографіки:
1: Зведіть до мінімуму кількість використовуваних шрифтів
Якщо ви хочете, щоб ваш веб-сайт виглядав послідовним і професійним, використовуйте до трьох шрифтів (не більше). Різні шрифти на одному веб-сайті конфліктують і відволікають користувача від читання тексту. Використання кількох схожих на вигляд шрифтів допомагає створити узгодженість UX на сторінках вашого веб-сайту та звільняє користувачів від частої зміни стилю.
Це саме те, чого вам слід уникати на своєму веб-сайті.
Часто достатньо використання лише одного шрифту. Якщо ви все ще відчуваєте, що вам потрібна пара шрифтів, виберіть шрифти з однаковою шириною символів. У цьому випадку шрифти не будуть сильно відрізнятися один від одного і відволікати увагу читача.
Цей оновлений веб-сайт використовує нетрадиційний шрифт Six Caps для покращення візуальної ідентичності сайту. Цей шрифт поєднується з Roboto Condensed, щоб мати два шрифти, ширина символів яких збігається.
Ще одна чудова ідея щодо об’єднання кількох шрифтів – поєднання шрифтів, які імітують почерк, із звичайними. Рукописна типографіка додає індивідуальності вашому загальному дизайну веб-сайту та покращує візуальний характер вашого веб-сайту.
Цей веб-сайт має м’який і жіночний вигляд завдяки шрифту Caveat Handwriting.
2 Виберіть шрифти Sans Serif, щоб покращити читабельність
Засічки — це маленькі лінії на кінцях штрихів літер. У друкованій типографіці засічки допомагають людям швидше й ефективніше розпізнавати друковані букви. Однак на екрані, особливо на не Retina, зарубки не так чітко окреслені, як на папері, що частково погіршує читання.
Крім забезпечення кращої читабельності, шрифти без засічок говорять більш жирним і мінімальним способом.
Тут я не сперечаюся, що ви повинні повністю відмовитися від шрифтів із засічками. Кращою порадою було б бути обережнішими з ними та використовувати ті, які є чистими та точними.
Наприклад, на цьому веб-сайті креативної фотографії використовується шрифт Open Sans sans serif, який допомагає веб-сайту зробити сміливе, стильне та рішуче висловлювання.
3: Пристойний розмір шрифту
Простір в Інтернеті необмежений. Тому немає необхідності економити на ньому і переходити на дрібні розміри шрифту, які додатково напружують зір користувачів. Читачі з ослабленим зором можуть відчувати труднощі з читанням невеликого тексту, тоді як навіть читачі з хорошим зором відчувають втому і змушені робити перерви, щоб дочитати до кінця, скажімо, тексту розміром 10 пунктів.
Якщо ви не хочете, щоб вашим користувачам було важко читати поданий вами текст або збільшувати його, виберіть розмір шрифту 16pt +. Такі розміри шрифту мінімізують навантаження на зір і допомагають користувачам досягти своєї мети на вашому веб-сайті без зорового виснаження.
Веб-сайт Malcolmy використовує читабельну типографіку 16pt для своїх домашніх сторінок і сторінок блогу.
4: Дотримуйтеся оптимальної довжини лінії
На своєму веб-сайті не варто забувати весь доступний простір текстом. Дбаючи про оптимальну довжину рядка, ви дотримуєтесь високих стандартів читання. Якщо рядки занадто короткі, очі читача змушені ходити туди-сюди під час читання тексту, що створює додаткове напруження зору. Якщо рядки надто довгі, вам буде дуже важко зосередитися на конкретному слові, яке ви читаєте, і занадто легко заблукати.
Щоб уникнути обох несприятливих ситуацій, дотримуйтесь 60 символів у рядку (для екранів планшетів/ПК).
Це зображення ілюструє, що тексти з надто короткими або надто довгими рядками важче читати, ніж тексти, які дотримуються «золотої середини» довжиною рядка ~ 60pt.
Оптимальна довжина лінії для мобільних пристроїв (наприклад, смартфонів) менша. Щоб текст був читабельним на маленьких екранах, рядок повинен містити близько 30-40 символів.
5 Вибирайте шрифти, які добре працюють у різних розмірах
Як відомо, розмір букв для заголовків зазвичай більший, ніж для основного тексту. Заголовки також відрізняються за розміром, починаючи від найменшого до найбільшого. На вашому веб-сайті вам доведеться вибрати різні розміри шрифту для різних елементів (наприклад, кнопок, підписів, елементів навігації тощо), а також різну щільність шрифту для виділення.
Щоб забезпечити відмінність елементів вашого веб-сайту, вибирайте шрифти різних розмірів і ваги. Якщо ви виберете один із стандартних шрифтів, наприклад шрифт Google Fonts Roboto, ви побачите всі його варіації. Деякі шрифти доступні в 10+ варіаціях, деякі мають лише пару. Виберіть шрифт із багатим набором варіантів, щоб забезпечити різноманітне представлення вмісту на вашому сайті.
Різні стилі шрифту Roboto Google.
6 Зробіть розумний вибір кольорів
Часи різнокольорових, кричущих сайтів минули. Тепер читабельність і контрастність є керівними силами, які визначають вибір кольору. Перш за все, ваш вміст має бути читабельним, і комбінація, яка протягом багатьох років вважалася найкращою, це чорний текст на білому тлі. Ця комбінація забезпечує максимальний контраст і бере свій початок з часів класичної типографіки.
Однак останнім часом часто стверджують, що чорний колір більше напружує очі, ніж темно-сірий. Відтінки темно-сірого також добре контрастують з білим фоном, але вони трохи менш щільні та забезпечують комфортніше читання.
Ці відтінки сірого перевершують чорний у забезпеченні комфортного читання.
Сторінка веб-сайту, яка використовує темно-сірий колір тексту повзунка.
Вибираючи колір, перевірте його на різних пристроях і в різних середовищах. Текст, який добре читати в типовому офісному середовищі, може бути важко розрізнити на смартфоні, особливо коли він використовується надворі. Важко врахувати всі фактори, але вашою метою має бути врахування більшості середовищ і надання різним групам користувачів зручного перегляду.
7: Не експериментуйте з висотою лінії
Зменшення висоти рядка, щоб розмістити більше вмісту, не є хорошою практикою. Якщо рядки розташовані надто близько один до одного, читач, швидше за все, перейде до попереднього чи наступного рядка й застрягне. Відстань між рядками (лінійка) має бути на 30% більше висоти використовуваних символів. Такий ілінінг забезпечує найкращу читабельність змісту та його чітке візуальне сприйняття.
Коли висота рядка стає меншою за 1,3 символу, текст стає важко читати.
8: Нехай ваші користувачі вирішують
Застосовуючи UX і типографіку, важливо пам’ятати про свою цільову аудиторію та її потреби. Дізнайтеся, якими читачами є гості вашого сайту та в яких типових ситуаціях вони знаходять вміст вашого веб-сайту. Наприклад, якщо ви орієнтуєтеся на молодь, приділіть більше уваги мобільному UX і відповідно налаштуйте типографіку.
Виконайте A/B-тестування ваших варіантів типографіки та подивіться, яка з них зменшує показник відмов і приносить більше конверсій. Будьте готові постійно коригувати свою типографіку, щоб продовжувати вдосконалювати себе та покращувати взаємодію з користувачем.
Щоб дізнатися більше про тестування A/B, перегляньте цю статтю.
Висновки
Дослідження зв’язку між UX і типографікою може призвести до багатьох цінних покращень взаємодії з користувачем на вашому веб-сайті. Якщо ви виберете перелічені вище налаштування, пов’язані з типографікою, ви обов’язково отримаєте читабельний веб-сайт, переглядати який – справжнє задоволення. Бажаю удачі в цій справі!
Я щось пропустив? Будь ласка, дайте мені знати в розділі коментарів нижче. Також щиро вітаємо ваші питання, пов’язані з темою.
Залишайтеся на зв’язку!