- Вступ
- структура сайту
- Навігація
- Головна сторінка
- прототипування
- Новини
- список статей
- Стаття всередині
- Реклама
- висновки
Ми вирішили розширити рубрику і розповідати також про методику розробки інтерфейсів. Матеріал буде корисний маркетологам, які беруть участь в розробці інтернет-продуктів, а також UX-фахівцям, яким цікаво побачити підхід колег по цеху.
Буду радий, якщо ви поділитеся своїм баченням, як поліпшити наше рішення або висловите альтернативну думку. Також варто відразу зазначити, що ми були сильно обмежені в часі на створення проекту редизайну, тому могли не звернути увагу на деякі дрібниці.
Вступ
Багато популярних онлайн-ЗМІ з'явилися на зорі епохи Інтернету. І їх сайти в процесі розвитку обростали новими розділами і функціями, поки не досягли певної критичної точки неповернення, коли на них стає просто неможливо споживати контент - яким би цікавим він не був.
«Навколо світу» - дуже корисний журнал з захоплюючим контентом, але сприймати цей контент складно через те, що сайт журналу дуже захаращений і громіздкий. У цьому сенсі редизайн був не тільки цікавим завданням, але і якоюсь даниною поваги журналу, знайомому мені з дитинства.
Сайт «Вокруг света» - відмінний приклад того, що при збільшенні великої кількості інформаційних блоків сайт перетворюється в «неповороткого монстра». У нього є ряд недоліків - це і застаріле візуальне відображення, і складна неявна навігація, і нелогічна структура подачі контенту. Методологія розробки інформаційних проектів, яку ми застосовуємо, досить прозора. Яким би великим не був проект, його можна дробити на дрібні частини, після чого послідовно і методично йти від загального до конкретного.
структура сайту
В першу чергу важливо зрозуміти, який контент повинен бути присутнім на сайті. Ми беремо весь наявний контент і розбиваємо його на групи, об'єднані за змістом і формату: наприклад, «Статті про тварин» і «Статті про людей» знаходяться в одному блоці, також як і «Блоги» «фотоблогів» - в групі соціальної активності користувачів . Якщо ми говоримо про статті, то вони будуть представлені здебільшого в текстовому форматі, на відміну, наприклад, від блоку «Фото дня».
Коли весь контент розділений на блоки, починається процес відбору - від деяких ми позбавляємося, деякі об'єднуємо. Щоб зробити це правильно і залишити тільки дійсно потрібний контент, потрібний досвід і розуміння моделей поведінки аудиторії на сайті.
Навігація
Меню - найважливіший елемент, який залишається незмінним протягом усього існування сайту. Його можна проектувати окремо від усього контенту, так само, як і контент можна проектувати окремо від меню. Але при об'єднанні цих елементів важливо зробити так, щоб стилістично вони відповідали один одному.
У випадку з «Вокруг света» ми вибрали горизонтальне меню як більш звичне вже існуючим користувачам. Зокрема, на сайті «Вокруг света» навігацію розбили на три частини: рівень 1 (основний), рівень 2 (додатковий) і рівень 3 (системний). Контент першого рівня - найважливіший, популярний і потрібний. Як правило, це тематична група «Статті» - і саме на них ми і робимо акцент. В даному випадку беремо найцікавіший контент і виносимо його на перший план, в той час як розділи «Вхід», «Особистий кабінет» та інші подібні, які в цілому теж відносяться до першого рівня - відсуваємо на другий план. І вже в підвал ми витягуємо все саме непотрібне.
Головна сторінка
Головна сторінка за традицією - це агрегатор всього самого важливого. Фактично, це зміст сайту, всі динамічні оновлювані розділи, які дають користувачеві повну картину.
У кожної контетной одиниці є два формати відображення - preview і fullsize. До редизайну на сайті в окремих блоках були різні шрифти, різна подача, різні відстані і стилістика. Єдине, що було загальним у всіх блоках - використання помаранчевого кольору. Якщо порівняти формат подачі статей на сайті «Вокруг света» до і після редизайну, можна помітити відмінності. Таким же чином ми пройшлися по всім контентним блокам, акуратно підрівнюючи, допрацьовує, приводячи все елементи до єдиній стилістиці.
прототипування
Для того, щоб спроектувати головний сторінку, необхідно для початку зрозуміти, які елементи ми хочемо на ній бачити. Потім накидати превью - але не занадто його деталізувати, досить визначитися з тим, які типи елементів будуть присутні в кожному блоці. Коли з'являється розуміння, як блоки будуть виглядати на сторінці, можна накидати грубий функціональний прототип, композиційне розташування елементів. Коли функціональний прототип готовий, його можна починати заповнювати графічними превью елементів, і оцінюючи, як вони виглядають разом, вже формувати гайди - розміри шрифтів, заголовків, відстаней і так далі. На скріншоті показано, як від превью ми перейшли до прототипу і до заповнення його графічними об'єктами.
Головну сторінку ми ділимо на дві частини: сайд-бар і основна тематична частина. Розподіл на три колонки вже важкувато для сприйняття, а одна колонка використовується тільки на сайтах з невеликою кількістю контенту (як правило, це блоги). Сайд-бар в даному випадку розташований зліва - і тут знаходиться найбільший частообновляемий динамічний контент. Справа ми розміщуємо «Фото дня», оскільки «Вокруг света» завжди публікує якісні і створюють атмосферу видання фотографії.
Новини
Новини - динамічний розділ, і ми поділили його на кілька категорій. Найяскравіша - актуальні і гарячі новини - виділена графічно. За нею йдуть менш гарячі новини та архів. Варто відзначити, що способів відображення досить багато, але найбільш зрозумілі користувачеві формати - «списком» і «блоками». Для того, щоб зрозуміти, який формат відображення буде актуальний для конкретного сайту, варто подивитися, які формати зараз в тренді, що використовують конкуренти, до чого звикли користувачі.
список статей
Блок «Статті» - це колектор всього контенту в форматі статей, який представлений нескінченним списком. Виділяємо ті опції, на яких необхідно зробити акцент - наприклад, все ті ж шикарного якості фотографії «Вокруг света», які не можна приховувати. Внизу сторінки ми можемо зробити крос-блоки, які ведуть на сусідні тематичні розділи. Крім того, у кожного розділу статей є тематичні новини - їх ми виділяємо зліва.
Стаття всередині
При роботі з кожним блоком ми розглядаємо всі можливі варіанти. Зокрема, для формату статей є цілий ряд тематичних блоків: заголовки першого і другого рівня, виділення, виноска, цитата, фото і відео і так далі. Відповідно до цього ми виставляємо всі основні блоки і стилістично їх підганяємо до тих Гайдая, які виставляли при формуванні функціонального прототипу. У процесі створення кожного нового блоку ми починаємо акуратно подтюнівать всю лінійку гайдів, не тільки нові інформаційні блоки, але і попередні - таким чином ми зберігаємо одноманітність і чистоту контенту. Це дуже важливо, оскільки неакуратний контент ніхто не читає, і чим акуратніше подача, тим більша ймовірність того, що користувач дочитає його до кінця. Особливо це стосується великих текстів, якими також славиться «Вокруг света».
Реклама
Не варто забувати про те, що практично всі інформаційні ресурси заробляють на рекламі. Типів банерів - величезна кількість.
Закладати рекламні місця необхідно вже на початковій стадії розробки прототипу. Ми не згадали про це на самому початку з однієї простої причини - наша специфіка розробки передбачає створення сайтів-конструкторів, всередині яких можна пересувати і змінювати блоки. У випадку з «Вокруг света» ми розробили пропозицію для партнерів, які можуть розмістити інформацію про себе як в header, так в перед динамічними новинами, а також всередині статей в якості спецпроектів. Рекламу, таким чином, можна інтегрувати в проект різними способами, і вона при цьому не буде заважати сприйняттю контенту.
висновки
І якщо підходити до поставленого завдання послідовно і методично, будь-яка, навіть найскладніше завдання, розв'язувана. Будь редизайн передбачає під собою головне завдання: збільшення кількості перегляду сторінок і глибини перегляду сторінок. На даний момент у «Вокруг света» цей показник коливається в районі 1,9, тобто в основному це стандартний сценарій, коли людина відкрила головну, зайшов на одну зі статей і закрив сайт. Після впровадження тих змін, які ми реалізували в своєму проекті редизайну, з досвіду цей показник може вирости до 2,6-3,2. Якщо узагальнювати, що це буде реалізовано за рахунок:
- структура сайту стала більш прозорою;
- головна сторінка стала агрегатором актуального контенту;
- користувач може знаходитися всередині одного розділу і користуватися ним як міні-сайтом, отримуючи підказки про релевантних матеріалах і сусідніх розділах;
- якщо ми даємо людині зрозумілий контент, він менше втомлюється від його споживання і втрачає увагу, і його уваги - і готовий більше часу витратити на сприйняття більшої кількості інформації.
