Організація контенту у веб-дизайні, або як не зробити із сайту сміттєзвалище

Фуа-гра з яблуками під малиновим соусом. Це один із пунктів меню в ресторані. Лаконічна назва містить все, аби відвідувач зрозумів, що він їстиме. Якщо людина прийшла в заклад, де готують фуа-гра, то вона напевно знає, що це таке. Додаткові складові страви у назві дають їй приблизне уявлення смаку. Тобто, вона усвідомлює, з чим матиме справу, коли переглядає меню. А категорії підказують їй, де саме шукати. Зрозуміле структурування вмісту допомагає людині легко орієнтуватися серед інформації. Організація контенту веб-сайту має бути подібною до меню. Людина не буде шукати борщ в десертах, так само як контактний номер сервісу доставки в розділі "гарячі пропозиції " на сайті. Користувач повинен легко ідентифікувати кожен елемент інтерфейсу і розуміти, що за ним ховається. Але відвідуючи деякі інтернет-ресурси, користувач швидше зголодніє, перш ніж знайде потрібну “страву”, або взагалі піде звідти ненагодованим. Візьмемо наприклад веб-сайт Інституту журналістики КНУ.

В чому його проблема?

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

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


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


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

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


Вигляд сайту говорить про те, що при його розробці дизайнери не проводили попередніх UX досліджень. Перед створенням веб-ресурсу або при його переробці дизайнерові потрібно дати собі відповіді на запитання:

  • Для кого та для чого він створюється?
  • Які потреби в потенційних користувачів?
  • Як їх зручно задовольнити?
  • Чи однією мовою спілкується сайт з юзерами?
  • Чи сайт керує діями користувача, допомагає йому в навігації?

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

Card sorting як метод UX дослідження

У практиці веб-дизайну існує метод сортування карт, який допомагає дизайнерам зробити вигляд сайту зрозумілим для користувачів. Він полягає в тому, що потенційні відвідувачі формулюють структуру вмісту на власний розсуд. Організатори дослідження дають учасникам картки з назвами основних видів контенту, а ті у свою чергу сортують їх за зрозумілими для себе категоріями. Для легшого розуміння візьмемо простий приклад. Уявіть, що ви розробляєте сайт для інтернет-магазину техніки. В пунктах меню ваша компанія використовує технічні терміни: “вимірювальні прилади”, “обчислювальна техніка”, “смарт-техніка” і т.д. Користувачі можуть не розуміти різниці між цими категоріями або не здогадуватись, що вони містять. Тут на допомогу приходить Card sorting. Ви пропонуєте потенційним користувачам організувати всю техніку за групами, які будуть зрозумілі для них. Наприклад, хтось з учасників відсортує картки з назвами “ваги”, “холодильник”, “пральна машина” в окрему групу і назве її “техніка для дому”. І за таким принципом розподілить інші види. Кожен учасник дослідження сформує свої категорії, які будуть логічними для нього. Результати дослідження дають розробникам розуміння про те, як побудоване мислення користувачів та чого вони чекають від веб-сторінки. Завдання дизайнерів — на основі цього зробити сайт зрозумілим для них. UX дослідники з Nielsen Norman Group зазначають, що знання про те, як потенційні користувачі бачать сайт допомагають дизайнерам:

  1. Побудувати структуру веб-сторінки;
  2. Вирішити, що ставити на головну сторінку;
  3. Створити категорії та елементи навігації із зрозумілими назвами.

Головна проблема сайту Інституту журналістики, що контент в ньому оформлений незрозуміло для потенційних користувачів. Якщо провести Card sorting зі студентами і дати їм можливість по-своєму, зрозуміло для них, організувати інформацію, то вигляд сайту кардинально зміниться. Перше, що на картках буде відмінним від теперішньої веб-сторінки — назви категорій меню та їхній вміст.

Процес Card sorting проходить таким чином:

  1. Організатори визначають основні теми. Вони створюють 40-60 карток із темами, кожна з яких репрезентує певний контент. Темами можуть бути назви пунктів меню, рубрик, елементи інтерфейсу, інформація про керівництво, будь-що стосовно всього вмісту сайту.
  2. Користувач сортує теми у групи (категорії). Організатори спочатку перемішують картки та віддають їх учаснику. Користувач дивиться на них по черзі та складає разом ті, які, на його думку, стосуються одного типу контету й повинні на сайті бути поруч. Наприклад, все, що учасник хоче бачити на головній сторінці сайту він складає до купи.
  3. Користувачі дають назви створеним групам. Після того, як учасник згрупував усі картки за своїм бажанням, він повинен підписати кожну групу. Цей крок показує організаторам, як мислить користувач щодо ідентифікації тем контенту. Вони отримують ідеї для майбутніх назв категорій меню або інших інструментів навігації.
  4. Організатори опитують учасників. Експерти з NNg радять після проведення тесту поспілкуватися з користувачами, запитати в них, чим вони керувались при створенні груп, попросити логічно обґрунтувати свій вибір.
  5. Організатори аналізують результати дослідження. Вони переглядають усі картки, визначають теми, які користувачі часто поєднували, а які не були занесені до груп взагалі, які групи найчастіше створювалися і т.д. Навколо цих результатів вони намагаються зрозуміти, яка система організації буде найбільш ефективною для потенційних користувачів.

За стандартом NNg, проводити дослідження слід із групою до 20 учасників. Головна задача — отримати картинку того, як мислить потенційний користувач. Більше людей не дадуть якусь нову інформацію, а тільки заплутають.

Веб-дизайн сайту ІЖ можна і потрібно змінювати за допомогою UX досліджень

Метод Card sorting слід взяти до уваги веб-дизайнерам, особливо тим, які займаються сайтом Інституту журналістики. Опитавши потенційних відвідувачів ресурсу, дизайнер зрозуміє їхню мету та головні потреби — для чого вони взагалі заходять на сайт.

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

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

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

+38 (0) 63 572 62 52  |   yellow.arrow.publishing@gmail.com  |   Skype: Pavlo Salyga
© 2017 YellowArrow.Design