UXPUB 🇺🇦 Дизайн-спільнота: Софія Наконечна

Спецсимволи у Типографіці

Софія Наконечна — Sat, 03 Jun 2023 07:39:55 +0000

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

Саме тому я підготувала статтю на доволі не тривіальну тему “Спецсимволи у Типографіці”. У ній я розповім не лише про спецсимволи, але й знаки пунктуації. Можливо, дана стаття не буде надто цікавою для когось, або ж хтось вважає, що при наявності “Рибного” тексту, тексту надісланого копірайтером, або ж згенерованого за допомогою Chat GPT (P.S. я й сама обожнюю його юзати), знання використання специфічних символів не є надто важливими. Сподіваюся після прочитаного Ви зміните свою думку, адже і я раніше не помічала різниці між цифрами Старого стилю та Табличними цифрами, різниці між довгим та коротким тире, Curly Quotes та Single Quotes, але різниця є і круто вміти використовувати всі можливості Вашого ПК і гарнітури, при цьому роблячи Ваш текст зручним для читання 📚

☝🏼 По-перше, що ж таке Спецсимволи, — це альтернативні версії символів, такі як капітель, цифри старого стилю, цифри верхнього та нижнього індексів, лігатури і ще багато інших.

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

Розпочнемо з базових і найчастіше вживаних знаків пунктуації 👀👇🏼

Тире vs Дефіс

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

✏️ Em dash (Довге Тире) — це символ найширшого тире.

Застосування:

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

Для того, аби набрати даний символ на клавіатурі слід використати поєднання shift option - на клавіатурі Macintosh, та alt 0 1 5 1 на клавіатурі Microsoft.

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

✏️ En Dash (Коротке Тире) — це тире, яке більше за дефіс (Hyphen), але менше за тире (Em Dash). Це по-суті проміжний символ між довгим тире та дефісом. З обох сторін не виділяється пробілами.

Застосування:

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

До прикладу: January–June, 2:00–5:00, 2001–2003, Florida–Texas.

Для того, аби набрати даний символ на клавіатурі слід використати поєднання option - на клавіатурі Macintosh, та alt 0 1 5 0 на клавіатурі Microsoft.

При цьому ми ніколи не замінюємо коротке тире на дефіс.

✏️ Hyphen (Дефіс) — це символ коротший за коротке та довге тире.

Застосування:

у складних словах, при написанні номерів телефону, подвійних прізвищ, у математиці у якості знаку “мінус” та при перенесенні слів;

Дефіс ніколи не потрібно виділяти пробілами.

Лапки

Лапки — це завжди парний знак пунктуації. Вони використовуються для виділення назв, прямої мови, цитат, а також слів, що вживаються у переносному значенні.

✏️ Curly Quotes (Подвійні Лапки-лапки) — використовуються в більшості випадків, а саме для позначення прямої мови та власних назв.

На Mac — використовуємо комбінацію option [ для відкритих подвійних лапок (“), та option shift [ для закритих подвійних лапок (”).

Є ще одна комбінація для лапок, проте вони мають інший вигляд, і викликаються лише на розкладці української клавіатури, а саме option . для відкритих подвійних лапок (“), та option shift . для закритих подвійних лапок („).

✏️ Single Quotes — використовуються всередині прямої мови (внутрішні лапки), коли подвійні лапки вже використано, а також у якості апострофу, — лише закрита поодинока лапка (option shift ] або ‘ у стандартному наборі).

На Mac — використовуємо комбінацію option ] для відкритих поодиноких лапок (‘), та option shift ] для закритих поодиноких лапок (’).

✏️ Prime Symbols (Комп’ютерні Лапки) — використовують лише для позначення футів ´ і дюймів ˝ та інших одиниць виміру.

На Mac — використовуємо комбінацію option shift E для поодинокого символу (´), та option shift G для подвійного символу ( ˝ ).

Також є ще ✏️ Straight Quotes, які не варто ніколи не використовувати, адже це не лапки, як більшість призвичаїлося вважати, а застосовуються вони знову ж таки при позначенні секунд та дюймів. Використовуємо комбінацію shift 2.

✏️ Лапки-ялинки або Кутові Лапки — це лапки, які виконують ту ж саму функцію, що і подвійні лапки, проте застосовуються не у всіх мовах, і у деяких, — такого поняття як лапки-ялинки не існує.

Інші назви: кутові, французькі, латинські лапки.

На Mac — використовуємо комбінацію option shift = для відкритих подвійних лапок («), та option = [ для закритих подвійних лапок (»).

Розміщення знаків пунктуації, у вигляді прямої мови, або цитати повинне бути розміщене перед текстовим блоком, а не вирівняно разом із текстом.

Висячі знаки пунктуації — це знаки пунктуації, які розміщуються за межами текстової колонки.

Враховуючи останнє оновлення, яке вийшло у Figma, тепер це стало легко реалізувати.

Цифри (Figures)

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

✏️ Табличні цифри або Маюскульні (Рівновисокі/Tabular) — цифри, що займають однаковий горизонтальний і вертикальний простір.

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

✏️ Oldstyle цифри або Мінускульні/Рядкові (Old Style Figures OSF) — мають різні форми і позицію для кожної цифри. Відрізняються по висоті. Деякі з них мають верхні/нижні винесені елементи. Мають ті ж пропорції, що і малі літери, тому другою їх назвою є Мінускульні.

Завдяки своїм візуальним характеристикам чудово підходять для суцільних масивів тексту та органічно при цьому виглядають.

Інші назви: non-lining, lowercase або hanging figures.

На зображенні, наведеному нижче, можна прослідкувати різницю між Рівновисокими цифрами та цифрами Старого Стилю 👇🏼

✏️ Пропорційні Цифри (Proportional) — цифри займають різну кількість простору залежно від їхньої форми. Тобто пробіли між ними розраховані на основі кожної цифри, так само як у великих та малих літер. Використовуються для текстів зі змішаним регістром таких як body text.

✏️ Lining (Моноширні) Цифри — розміщені на одній лінії шрифта (baseline) та їх ширина фіксована, як і ширина пробілу (однакова ширина кегельного майданчика).

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

Інша назва: uppercase figures.

Зображення нижче чудово ілюструє різницю між Пропорційними та Моноширними цифрами, аби остаточно не запутатися 🤪

P.S. Апрош — якщо коротко, це міжсимвольний простір, більш детально про термінологію у Типографіці мова піде у наступних статтях.

Слід використовувати цифри (Figures) різного стилю для відповідних потреб. У більшості цифрових шрифтів доступні всі 4 варіанти: Рівновисокі Пропорційні, Рівновисокі Моноширні, Пропорційні Старого Стилю та Моноширні Старого Стилю 🖇

Скорочена класифікація із вказанням застосування цифр у різних типах набору 👇🏼

Дужки

Це завжди парний знак.

✏️ Квадратні Дужки — як правило розміщуються всередині круглих дужок, а використовуються для позначення авторських та редакторських коментарів, посилань, виправлень.

✏️ Фігурні дужки — використовуються для групування декількох рядків абзацу.

Капітель

✏️ Капітель або Маленькі Капітали (Small Capitals або Small Caps) — це зменшений комплект великих літер. Як правило, вони мають розмір малих літер, тобто ріст досягає лише середньої лінії (mean line), або трішки вищі. Їх функція замінити великі літери, коли останні здаються надто великими.

Застосування:

у скороченнях, позначеннях історичних дат, табличних заголовків, абревіатур;

Справжня капітель має специфічні пропорції, — літери більш насичені і ширші, у порівнянні з великими.

Лігатура

✏️ Лігатура (Ligature) — це об’єднання двох знаків, або більше в один символ. Мета використання лігатур лише естетична. Більшість лігатур включають літери f, l, i.

Більшість лігатур містять малу лутеру “f” у зв'язку із наявністю керна верхнього винесеного елемента

P.S. Знак з керном — знак (буква), частина якого виступає за межі кегельного майданчика, такий знак проектується для того, аби не було надто великих пробілів між сусідніми символами.

Знаком з керном є буква «У» на зображенні.

Найчастіше вживані лігатури: fi, fl, ff, ffi, ffl.

Також найвідомішою лігатурою є амперсанд “&”, що першочергово складався із літер et, що означає “і”.

Дифтонги

✏️ Дифтонги (Diphthongs) — це лігатури, які зливають в єдиний символ дві голосні літери, об’єднані як у вимові, так і у написанні. До прикладу дифтонги “ае” та “ое”.

Для того, аби набрати æ на клавіатурі слід використати поєднання ' option на клавіатурі Macintosh.

Знаки з Розчерками

✏️ Знаки з Розчерками (Swash Characters) — це, як правило, великі літери, які мають яскраво виражені каліграфічні прикраси, тому їх часто називають знаками із завитками (flourished characters). Відверто, я жодного разу не зустрічала даний тип символів, скоріш він має більш вагоме значення у друці.

Знаки з розчерками курсивні та мають декоративний вигляд. Вони потребують застосування кернінгу. Використовуються у якості буквиць (про значення буквиць можна прочитати нижче 👇🏼)

Верхні та нижні індекси

✏️ Верхні Індекси (Superiors) — це зменшенні символи, які досягають рівня верхніх винесених елементів. Так само, як і капітель, вони спеціально проектуються.

Окрім цього є ще ✏️ Нижні Індекси, — так звані Inferiors.

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

Дробові значення

✏️ Дробові значення — бувають діагональні дроби, які використовуються найчастіше та складаються з верхніх та нижніх індексів, які розділені дробовою рискою, а також є горизонтальні дроби та дроби з косою рискою (solidus fraction), які формуються із звичайних цифр (2/3).

Багатокрапка

✏️ Багатокрапка (Points of Ellipses) — використовується для позначення пропусків, як правило всередині цитати.

На Mac використовується option : для створення даного символу (…). По ширині відрізняється від трьох набраних поспіль крапок, і є спеціально спроектованим знаком.

Pi-символ

✏️ Pi-символи — одним із найчастіше використовуваних pi-символів — є елемент, що позначає позиції списку (спискових маркерів — bullets). В маркованому списку після маркеру слід використовувати пробіл, також маркери використовують разом із зворотнім відступом.

На Mac для позначення символу використовуємо option 8 (•).

Буквиці

✏️ Буквиця/Ініціал (Drop Cap) — це збільшена у порівнянні з текстом, який слідує за нею, декоративна буква першого слова на початку абзацу. Ціль буквиці «розірвати» безперервний потік тексту і позначити новий розділ.

Розрізняють наступні варіанти Буквиць:

💭 Піднята Буквиця (Pop-Cap) — це збільшена літера, розміщена на лінії шрифта першого рядка абзацу. Абзацний відступ вимірюється на око, залежно від ширини буквиці.

💭 Звичайна Буквиця (Втоплена) — розміщена всередині тексту, на декілька рядків нижче вершини абзацу і вирівняна по верхній лінії винесених елементів першого рядка. Число рядків і розмір відступу визначається шириною та висотою буквиці.

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

Знаки охорони інтелектуальної власності

У ролі графічного дизайнера або UI/UX дизайнера, ми часто зустрічаємо дані знаки, як вони називаються, які для них слугують абревіатурні скорочення, а які використовувати у верхньому індексі, а які ні, — про все по-порядку 👇🏼

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

✏️ Знак торгової марки — для позначення символу використовуємо option (alt) @ (™).

✏️ Зареєстрована торгова марка — для позначення символу використовуємо option (alt) r (®).

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

Діакритичні Знаки

✏️ Діакритичний Знак/Акцент — це гліф, що вказує на на зміну у вимові літери, до якої він доданий, або до цілого слова.

Він може розміщуватися над або під буквою, або ж іноді всередині букви/між буквами.

Дякую за приділений Вами час, реакції та коментарі вітаються 😉

Перелік використаних джерел:

⭕️ A Beginner’s Guide to Em Dashes, En Dashes, and Hyphens
⭕️ How bad typography (almost) ruined my holiday
⭕️ ”Типографіка: шрифт, верстка, дизайн.“ Джеймс Фелічі
⭕️ ”Школа Дизайну. Шрифт.“ Річард Пулін
⭕️ ”Шрифт і Дизайн. Сучасна Типографіка.“ Крейг та Скала

Що робить хороший текстовий набір хорошим

Софія Наконечна — Thu, 20 Apr 2023 19:23:41 +0000

Останнім часом, а саме з тих пір як вийшла моя остання стаття на UXPUB, я працюю над створенням циклу статтей на тему типографіки. Відверто, — не думала, що дана тема є настільки обширною, проте, розпочавши активний research, а саме перечитування літератури, статтей, перегляду різноманітних відео на цю тему, у мене назбиралося доволі багато матеріалу, який необхідно структурувати, проаналізувати і ”кристалізувати“ у класний контент. Я ще у процесі research, але у мене виникло гостре бажання викласти хоча б одну статтю, саме тому перед Вами результат моєї роботи, тема якою я готова поділитися, а саме ”Що робить хороший текстовий набір хорошим“. Без Вашої підтримки у якості зворотнього зв’язку до попередніх статтей цього матеріалу б не було, тому я щиро вдячна кожному своєму читачеві. Ці статті, — невелике захоплення, що допомагає мені не лише розвиватися, але й сподіваюся, — приносить користь іншим. Отож, let’s go 🔥

Розбірливість (Legibility)

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

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

🚩 Що впливає на Розбірливість:

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

”Serif призначений для друку, Sans Serif — для екрану!“

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

Хороший текстовий набір сприяє читанню без втоми 👀

🚩 Як Визначають Розбірливість:

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

Зручність читання/Читабельність (Readability)

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

🚩 Що впливає на Читабельність:

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

Для довгих рядків рекомендовано використовувати збільшений інтерліньяж.

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

Інтерліньяж: при надто великому інтерліньяжі рядки виглядають не пов’язаними між собою, що ускладнює читання, а надто малий інтерліньяж перешкоджає плавному переходу від рядка до рядка;
Міжслівні Пробіли: мінімальні пробіли не дозволяють відрізнити окремі слова, в той час як великі — порушують ритм читання;
Регістр: текст набраний великими літерами складний для читання, оскільки усі літери схожої форми та однакової висоти, тим більше на практиці найчастіше зустрічаються потокові тексти набрані малими літерами, до чого відповідно пристосувалося людське око і це впливає на впізнаваність шрифтів, також серед іншого відрізнити символи між собою допомагають верхні та нижні винесені елементи;
Насиченість Шрифта: визначається товщиною основних штрихів букви по відношеню до її висоти, як правило, з діапазоном від світлого (light) до жирного (bold).

🔹 Regular або Normal (Світле) Накреслення — це базове по формі і насиченості накреслення, від якого походять всі інші варіації.

🔹 Bold (Жирне) Накреслення — шрифт з товстими штрихами, що служить для виділення в тексті. До нього належать наступні варіації Semibold, Heavy, Black, Extrabold, Ultra.

🔹 Light (Більш світле) Накреслення — це дуже світла та тонка версія нормального накреслення. Його варіація — Thin.

Співвідношення Висоти Малих та Великих Літер: при виборі гарнітури для суцільного набору тексту слід враховувати співвідношення росту малих та великих літер.

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

В гарнітурах малі літери яких, є великими по відношенню до великих літер, таких як антиква перехідного стилю та нового гротеску, над і під малими літерами залишається мало ”повітря“, тому у таких випадках рекомендується збільшити інтерліньяж.

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

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

📌 Важливо розуміти, що Розбірливість та Читабельність взаємозалежні, проте є самостійними показниками якості шрифта.

🚩 Як визначають Читабельність:

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

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

”Колір“ тексту

Шрифт на сторінці створює текстуру — ритм букв у рядках, і ритм рядків у колонці, а також ритм пробілів між усіма компонентами.
Правильний ”колір“ тексту — це коли текстура шрифта безперервна і однорідна. Щільний набір тексту в свою чергу створює темний «колір».

Деякі шрифти мають світлу насиченість і повинні набиратися щільніше, в той час як шрифти більш насичені потребують більше ”повітря“;
Колір шрифта так само залежить і від його рисунку. Шрифти з високим ростом малих літер та відносно масивними штрихами виглядають темнішими;
Гротескні шрифти слід набирати більш ”розріджено“ у порівнянні з антиквою;
Інтерліньяж також є важливим інструментом керування ”кольору“ тексту, тому для гарнітур з більшою насиченістю штрихів слід збільшувати інтерліньяж, щоб зробити ”колір“ текстового блоку світлішим та менш щільним;

Візуальний Акцент

Візуальний акцент створюється за допомогою різниці у нижченаведених параметрах:

🚩 Виключка Абзацу або Вирівнювання (Justification):

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

Виключка по краю — рядки різної довжини вирівняні по одному краю (як правило лівому). Лише в коротких текстах і заголовках варто використовувати вирівнювання по правому краю. Дане вирівнювання забезпечує рівну текстуру усьому текстовому блоку.
Важливо, щоб нерівний (рваний) край утворював приємний контур без сусідніх рядків однакової довжини та без різких перепадів довжини рядків.
Виключка по Формату — рядки однакової довжини вирівняні одначасно зліва і справа, при цьому наявність однакових міжслівних інтервалів стає неможливим, вони є нерівномірними та призводять до утворення ”коридорів“.
Виключка по Центру — центрування рядків різної довжини, при якому правий та лівий рядки залишаються нерівними. При цьому рекомендується використовувати збільшений інтерліньяж.

🚩 Контраст:

Забезпечення контрасту між текстом та фоном, і знову ж таки, — це означає зробити текст розбірливим.

Відмінність між Lightness (Світлом) та Darkness (Темрявою) — найвищим контрастом володіє білий та чорний. Низький контраст робить текст важким для читання, спричиняє напругу і втому очей;

Текст на Темному Фоні (Reverse Type) — в результаті використання візуально важкого темного фону багато тонких штрихів, якщо такі наявні, можуть бути ”втраченим“; При такому типі набору рекомендовано не використовувати шрифти із зарубками, або у протилежному випадку — збільшити розмір, або ж збільшити трекінг;

🚩 Накреслення:

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

Пряме Накреслення (”Roman“ — Римський) — накреслення, у якого основні штрихи таких літер як «Т» та «І» є перпендикулярними до лінії шрифта. Є найбільш зручним для читання;
Курсивне Накреслення (”Italic“ — Італійський) — це не прямі символи нахилені вправо, а спеціально спроектований шрифт. Застосування курсивного накреслення найчастіше застосовується у термінології та для визначень всередині речення;

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

Похилі Накреслення Шрифта («Oblique») — коли замість справжнього курсиву, використовують лише примусово нахилений прямий шрифт;

🚩 Поєднання Гарнітур:

Використання не Більше Двох Гарнітур в Дизайні: При використанні більше двох гарнітур, текст буде здаватися не пов’язаним між собою, що також спричинить до надмірного ”шуму“ та безладу у Вашому дизайні.

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

Різниця гарнітур створює контраст та висуває на перший план цю частину тексту, яку необхідно виділити.

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

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

Перш за все при виборі гарнітури слід керуватися змістом. Обрана Вами гарнітура повинна транслювати ідею текстової інформації та відповідати її сенсу. При виборі гарнітури слід звернути увагу на певні аспекти, що не є правилом, а радше рекомендацією:

🔹 Історія та Класифікація Шрифтів:
Звичайно, що неможливо знати та пам’ятати всі гарнітури, проте потрібно мати уявлення про походження деяких гарнітур, це допоможе підібрати гарнітуру у відповідності до тексту/контексту.
До прикладу класична антиква старого стилю Centaur створює атмосферу старовинності, в той час як гуманістичний гротеск Gill Sans навпаки, — сучасну.

Історія гарнітури, категорія, до якої вона відноситься, візуальні характеристики такі як будова, пропорції — усе слід брати до уваги.

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

🔹 Форма та Анатомія Гарнітури:
На зовнішній вигляд, гармонію та функціональність тексту впливають власні характеристики гарнітури. Так анатомія шрифта впливає на розбірливість текстового набору, — чим більше букви відрізняються одна від одної, тим простіше користувачу сприймати текстову інформацію. Як було неодноразово згадано, у багатьох розбірливих гарнітур наявний великий ріст літери, помітні внутрішньобуквенні просвіти.

🔹 Розуміння Контенту:
Можливо це дуже очевидна причина, проте перш ніж приступати до вибору гарнітури, слід ознайомитися із текстовим наповненням.

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

🚩 Кегль:

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

Зміна розміру тексту допомагає вибудувати візуальну ієрархію.

Ієрархія у текстовому документі створює початкову точку (start point) та кінцеву точку (end point) та вказує де користувачу слід розпочати читати, а де саме необхідно користувачу звернути свою увагу, та створює своєрідний потік, по якому користувач переміщується.

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

🚩 Білий Простір:

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

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

🚩 Візуальна Ієрархія:

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

Способи створення візуальної ієрархії: використання різних накреслень шрифта, зміна розміру шрифта, зміна гарнітури, зміна type weight (насиченості шрифта), білого простору, інтерліньяжу, трекінгу. Практично всі перераховані способи були представлено та детально описано вище.

На сторінці немає пустот, а лише пробіли (spaces) між елементами. Власне тому сенс правильного шрифтового набору полягає в регулювані пробілів, щоб забезпечити баланс і ритм чорного та білого. Це забезпечує легке і приємне читання ☝🏼

Усім приємного читання 📚
Коментарі, вподобадання, поширення та будь-які зауваження вітаються 🙂

Список використаних джерел:

• Setting Type for User Interfaces
• Font Legibility: Shapes, Kerning, and Colours
• About Legibility and Readability
• Designing with Type
• ”Типографіка: шрифт, верстка, дизайн.“ Джеймс Фелічі
• ”Школа Дизайну. Шрифт.“ Річард Пулін
• ”Шрифт і Дизайн. Сучасна Типографіка.“ Крейг та Скала

Більше 30 ресурсів, де можна знайти натхнення для дизайнерів

Софія Наконечна — Sun, 27 Nov 2022 14:38:47 +0000

Я впевнена, що кожного бодай раз питали на інтерв’ю, де Ви, як дизайнер, черпаєте натхнення. У мене теж була така ситуація, і чесно кажучи, моя відповідь була не найкращою, тому аби не обмежуватися переліком лише декількох найбільш популярних сервісів, я підготувала перелік, який містить близько 30 сайтів, де можна не лише надихнутися, але й потренувати свою надивленість та прокачати скіли і мати в запасі завжди декілька ідей на різні випадки життя.
У даній статті Ви знайдете корисні ресурси для тренування надивленості, пошуку натхнення, а також різноманітні патерни чудових User Flows.
Багато сторінок було рекомендовано дизайнерами — справжніми професіоналами своєї справи, з якими я мала можливість спілкуватися, деякі я знайшла на просторах Linkedin і не тільки. Сподіваюся, комусь ці ресурси стануть у нагоді.
І так, тут будуть не лише посилання на Behance та Dribbble 😉

Умовно даний перелік можна розділити на 3 категорії:

Ресурси із різноманітними Landing Page, UI компонентами та прикладами веб- та мобільних застосунків;
Бібліотеки, де не лише «гарна картинка», а чудово обґрунтовані User Flow;
Сайти з різноманітними підбірками фото для натхнення, щось на кшталт Pinterest, але не тільки він

🔥 Landing Page, UI компоненти, приклади веб- та мобільних застосунків:

Godly

Даний ресурс містить «Directory» — своєрідний довідник, обравши в якому бажану категорію, таку як E-commerce, Web App чи Mobile App, перед Вами з'являться приклади чудових робіт, із коротким відео-прев'ю, де можна перейти на сам сайт та ознайомитися з ним. Перелік категорій надзвичайно великий, тому знайти бажане буде легко.

Переглянути тут.

SaaS landing page examples

Якщо Вам необхідно створити Landing Page, цей ресурс допоможе Вам почерпнути трішки натхнення. Тут Ви зможете знайти не лише приклади чудових Лендінгів, але й окремі блоки, такі як Pricing, About us, Features, Blog, Testimonials, FAQ, Contact us. Обравши те, що Вам сподобалося, Ви зможете знайти інформацію про що даний ресурс, які кольори та гарнітури було використано, а також відвідати сайт.

Переглянути тут.

Siteinspire

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

Переглянути тут.

One Page Website

На даному сайті у розділі «Inspo» Ви зможете знайти приклади односторінкових сайтів, скориставшись пошуком за категоріями, а також відвідати обраний сайт.

Переглянути тут.

Ecomm.design

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

Переглянути тут.

Minimal Gallery

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

Minimal Gallery was accidentally brought to life when I started collecting websites as inspiration for client projects and screenshotting and categorizing them for better organization.

Переглянути тут.

BTW

І ще один ресурс із прикладами різноманітних Landing Page та його компонентів. На даному сайті можна переглянути представлені скріншоти секцій, проте не можна відвідати сайт. Але для того, аби швидко почерпнути натхнення — те, що треба.

Переглянути тут.

Upshift.supply

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

NiceVeryNice

Ще одна колекція, де Ви зможете знайти приклади, патерни, компоненти для натхнення.

Переглянути тут.

Pixels

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

Переглянути тут.

Good Web Design

Багато Landing Page не буває. Пошук здійснюється за поділом по секціях. Кожен сайт можна відвідати.

Переглянути тут.

Land-book

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

Переглянути тут.

OGimage.gallery

Ще одна галерея з великою кількістю прикладів сайтів та застосунків із чудовим поділом за темами. Кожен знайдений ресурс можна відвідати за посиланням.

Переглянути тут.

Lapa Ninja

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

Переглянути тут.

Muzli Inspiration

Ця платформа не лише про веб-сайти та веб-застосунки. Це справжня скарбниця з натхненням, де можна знайти приклади Wireframes, UI-kits, Logos, App Icons і набагато більше. Те, що сподобалося можна зберегти, переглянути колірну палітру, а також завантажити розширення Muz.li на свій комп'ютер.

Переглянути тут.

Behance

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

Переглянути тут.

Dribbble

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

Переглянути тут.

Awwwards

Дуже популярний, — однозначно. Відверто кажучи, я вкрай рідко користуюся даним ресурсом, мабуть, це тому що я новачок, а дизайни представлені тут дуже «fancy».

Переглянути тут.

🔥 User Flows, і не тільки

Page Collective

Тут ви знайдете не лише приклади Landing Page, але й екрани мобільних застосунків та User Flow, на окремих сторінках платформи. Справжньою цінністю даної платформи є те, що можна переглянути відео, де відтворено обраний Вами User Flow. Тому, не забудьте перейти за посиланням до «App Screens» та «User Flows».

Переглянути тут.

Growth.Design

Я впевнена, Ви бодай раз чули про цей ресурс, а якщо ні, — повірте це те, що неодмінно допоможе Вам стати професіоналом своєї справи. Якщо коротко, то на даній платформі представлено близько 40 Case Study, кожен з яких ви можете переглянути у вигляді інтерактивних відео, де представлені кейси одних з найпопулярніших застосунків із порадами «UX tips», як покращити та вдосконалити користувацький досвід.

Definition: Growth design is a process at the intersection of Growth (a scientific method to improve business metrics) and Design (a human-centered process used to solve problems). It involves crafting meaningful experiences at scale so that an organization can exceed its business goals while delighting their customers.

Переглянути тут.

UX Archive

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

Переглянути тут.

Mobbin

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

Переглянути тут.

Webframe

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

Переглянути тут.

NicelyDone

Платформа з великою бібліотекою екранів популярних застосунків та User Flow. Оскільки платформа має свій Pricing, стартовий пакет є доволі обмеженим, проте кількість різноманітних продуктів є досить великою. Можна зберегти вподобаний Flow, а також перейшовши за посиланням, відвідати сайт.

Переглянути тут.

UI Sources

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

Переглянути тут.

Scrnshts

Чудова платформа, де зібрані скріншоти Onboarding популярних застосунків. Інтерфейс простий та зрозумілий, а також цікава сама історія створення даної платформи.
Однозначно цей сайт вартий Вашої уваги.

Переглянути тут.

The App Fuel

Мега крута бібліотека з різноманітними User Flow, а також корисними статтями. Платформа дуже зручна у користуванні, однозначно моя рекомендація до застосування.

Переглянути тут.

Screenshot Inspiration

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

Переглянути тут.

UI Garage

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

Переглянути тут.

🔥 Чисте натхнення

BUAMAI

Даний сайт — це каламбур різноманітних фото, як і hero section для веб-сайтів так і «fancy» контенту. Надихає — так.

Переглянути тут.

Baubauhaus

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

Baubauhaus is here to feed your daily need of design, illustration, photography, fashion and of all else art-related. Our goal is to visually inspire and entertain by promoting great content. It can be anything from your bookmark of images made by others (us), a trend, you - we call it Baubauhaus.

Та й назва говорить сама за себе.

Переглянути тут.

DesignInspiration

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

Переглянути тут.

Packaging of The World

Даний ресурс не зовсім для UI/UX designer, адже тут представлений вигляд різноманітних упакувань. Якщо Ви графічний дизайнер, цей ресурс саме для Вас.

Переглянути тут.

Це банально, — можливо. Ним користуються всі, і навіть не дизайнери, — так! Але я дуже люблю цей сайт, особливо алгоритм підбору схожих зображень. Тут можна знайти все, і навіть більше.

Переглянути тут.

Якщо у Вас є свої ресурси для натхнення, залишайте у коментарях, я радо поповню свою колекцію 😊
Сподіваюся дана стаття буде корисною.

Все про етап «Дослідження»

Софія Наконечна — Thu, 20 Oct 2022 11:00:45 +0000

Типи досліджень:

🟣 Якісні дослідження — Це ті дослідження, які здатні дати відповідь на питання «Що?», «Як?» і «Чому?» розгорнуто і з різноманітними деталями. Якісні дослідження допомагають нам вивчити поведінку, погляди, схильності потенційних користувачів продукту, предметну область, способи застосування вже існуючих продуктів.

1) Інтерв'ю

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

- Інтерв’ювання зацікавлених лиць:

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

- Інтерв’ювання експертів у предметній області (ЕПО):

ЕПО – як правило добре проінформовані про продукт, та необхідні в таких спеціалізованих предметних областях як медицина, наука, фінансові служби.

- Інтерв’ювання покупців:

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

- Інтерв’ювання користувачів існуючих та потенційних:

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

2) Етнографічне або контекстне дослідження:

Полягає у тому, що проектувальник спостерігає і вивчає як користувач працює з продуктом безпосередньо «на місці» в його звичайному середовищі та ставить відповідні питання до користувача; наприклад користувачі працюють в специфічному оточені (в лікарні), яке має вплив на користувача.

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

3) Щоденникове дослідження:

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

4) Спостереження:

Даний вид дослідження дає кращі результати, ніж інтерв’ю. Проте найкращим варіантом буде поєднання інтерв’ю та спостереження. Також при цьому може здійснюватися аудіо– та відеозапис.

5) П'ятисекундні тести:

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

6) Фокус–групи:

Це групова дискусія з представниками цільової аудиторії, де з модератором дискусії обговорюється певна тема. Як правило групи від 3 до 10 учасників збираються разом в одній кімнаті для обговорення певної теми (або набору тем). Мета – розкриття емоцій; дане дослідження скероване на розкриття емоційної реакції, особистого відношення та ідей учасників стосовно теми.

7) Відгуки користувачів:

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

Якщо продукт ще не запущений, таким способом можна вивчити майбутніх конкурентів.

8) Конкурентний аналіз:

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

9) Опитувальники:

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

10) Досвід вибірки (Experience sampling):

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

11) Юзабіліті тестування:

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

Це метод оцінки інтерфейсу зі сторони зручності та ефективності його використання.

12) «Коридорні» юзабіліті тести:

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

13) Огляд літератури та онлайн дослідження:

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

🟣 Кількісні дослідження — У кількісних методах дослідник вимірює поведінку користувачів у спосіб, який можна кількісно оцінити. Кількісні дослідження здатні дати відповідь на питання «Скільки?» і «В яких об’ємах?», використовуючи декілька простих шкал.

1) Аналіз даних:

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

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

2) Звіти та аналітика від дослідницьких компаній:

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

3) Карткове сортування:

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

4) А/В тестування:

Показує яке рішення найкраще працює в реальному середовищі під час реального використання. При цьому слід заздалегідь визначити що саме необхідно виміряти і як обрати найкраще рішення. Слід запустити одночасно 2 версії в А/В тестуванні з лише 1 відмінністю.

5) Анкетування:

Це заповнення анкети, яка складається в основному із закритих питань (слід вибрати із переліку варіантів одну відповідь) для виявлення закономірностей серед великої аудиторії користувачів. Результати повинні бути відображені кількісно, як правило у відсотках.

🟣 Первинні дослідження — це тип дослідження, що стосується замовників та користувачів продукту, по суті – це є збір «сирої інформації», збір нових даних, який дає зрозуміти що, як і для кого слід проектувати. 

До даного типу досліджень належать, як правило, інтерв’ю, фокус–групи, юзабіліті тестування, А/В тестування, карткове сортування, спостереження та інші.

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

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

Перелік використаних джерел:

Алан Купер «Про інтерфейс: основи проектування взаємодії»
Расс Унгер, Керолайн Чендлер «UX-дизайн. Практичне керівництво по проектуванню досвіду взаємодії»
https://xd.adobe.com/ideas/process/user-research/why-behind-qualitative-user-research/
https://uxstudioteam.com/ux-blog/ux-research-methods/
https://uxchecklist.github.io/
https://telegraf.design/byudzhetni-metody-produktovyh-ta-ux-doslidzhen/

P.S. Дана невеличка стаття не претендує на новизну, а скоріше служить угруванням всіх можливих типів дослідження, які можна знайти в одному місці.
Можливо для когось це принесе користь.