Попереджаємо відразу: редизайн сайту - ризикована затія.
Зазвичай цей процес являє собою серйозну витрату грошей, часу та інших ресурсів в надії на вдалий результат.
За свою багаторічну кар'єру я стикався і оцінював тисячі і тисячі сайтів, тому зрозуміти, який з них зроблений якісно, а який - як-небудь, для мене не така вже й складне завдання.
У цьому матеріалі ми розберемо 4, не побоюся цього слова, монстрів індустрії, які впоралися з редизайном сайту на ура.
До речі, розповім трохи про те, як я дізнався про їх редизайне.
Я досить давно співпрацюю з хлопцями з Crayon.co. Те, що пропонує їх сайт, найпростіше описати як "нові ідеї і натхнення для веб-дизайнерів". Вони дуже допомогли з формуванням нашої власної стилістики на DigitalMarketer.com, за що я безмежно їм вдячний.
Так ось, одного з найбільш прикольних фішок, яку пропонує Crayon, є моніторинг сайтів, які запланували і почали редизайн. Як тільки на їх радарах з'являється такий ресурс, я і інші користувачі відразу ж дізнаємося про це. Плюс до всього даний сервіс дає подивитися і порівняти, як сайт виглядав "до" і "після" редизайну.
Як ви розумієте, недавно на мене зійшло осяяння, і я вирішив написати цю статтю, використавши можливості Crayon.co.
Оцінювати успішність "переробки" сайтів я буду спираючись на 5 критеріїв - 5 елементів оптимізації, за якими будуть зараховуватися бали.
5 елементів оптимізації веб-дизайну
Ясність (Clarity). Якщо ваші відвідувачі в перші кілька секунд не зрозуміли, про що сторінка і яку цінність вона для них представляє ... на жаль і ах.
Ось що потрібно, щоб ніяких "на жаль" і "ах" не було:
- Детально і ясно відобразіть на сторінці, що саме вона пропонує і яку цінність несе;
- Ваше "пропозицію" має виглядати привабливо;
- Подбайте про те, щоб відвідувачеві було зрозуміло куди йти після прочитання інформації, і відповідь на питання "а що ж робити далі?" З'являвся в його голові сам собою.
Читабельність (Readability). Цей дуже значущий фактор з якихось причин постійно не береться до уваги практично скрізь, крім, може бути, блогів.
Ось на що обов'язково слід звернути увагу:
- шрифт;
- Кількість символів в рядку;
- Розмір абзаців і відстань між ними;
- Виділення жирним;
- Кольори.
Постарайтеся зробити так, щоб текст був чітким, ясним і легким для читання. І запам'ятайте одне просте правило: погана читаність = втрачений посил.
Зовнішній вигляд (Appearance). Знаєте, в чому основна перевага якісного, професійного дизайну сайту? Відвідувачі довіряють йому, а отже, і вам.
Автентичні зображення, правильна колірна гамма і чітка візуальна ієрархія - все це є ключовими факторами для вашого сайту.
Сторінки, на яких все це опрацьовано, дозволяють розставити акценти там, де це потрібно вам, при цьому залишаючи відвідувачеві почуття автономії і свободи вибору.
Призначений для користувача досвід (On-site experience). На кожній сторінці повинна бути чітко сформульована мета, відточена юзабіліті для користувачів з будь-яким рівнем навичок і швидке завантаження всіх елементів. Якщо один з цих елементів буде упущений, то вашим відвідувачам буде важко перебувати на сайті, і в підсумку вони з нього просто підуть, не зробивши цільове дію (не купивши ваш товар, не залишивши вам email і т.д.).
Навігація (Navigation). Якщо ми говоримо про Лендінзі, то навігація повинна бути мінімальною. Але для будь-яких інших сторінок її необхідно зробити якомога повнішої та інтуїтивної.
Ми окремо розглянемо кожну сторінку, розберемо шорсткості і кути, порівняємо редизайн-версію зі старою, а потім підіб'ємо підсумок і з'ясуємо, які сайти рухаються в правильному напрямку, а над якими ще потрібно грунтовно попрацювати.
підсумковий рахунок
Висновок: креатив - це, безперечно, добре, але якщо ми говоримо про класичному інтернет-магазині, то він повинен бути скоріше схожий на оновлений варіант Versace, ніж на версію "до".
2. Сайт Iron Mountain
підсумковий рахунок
Найголовніше, що зробили Iron Mountain, - зупинилися, віддихалися і як слід обдумали свою нову концепцію. Їм вдалося позбутися від усіх елементів, з яких вони давно здмухували пил, і за якими люди навіть не кликали. Звичайно, залишилися деякі похибки в ясності посилу і юзабіліті, але в цілому сайт виглядає оновленим і свіжим.
3. Прес-центр компанії Freshdesk
Багато, і ми в тому числі, використовують класичну форму "однієї колонки", таким чином зосереджуючи всю увагу відвідувачів на контенті. Проте, для багатьох компаній одна колонка, навпаки, працює гірше і не дозволяє просувати їх продукт або сервіс.
Давайте подивимося, як хлопці з Freshdesk (сервіс підтримки клієнтів) спробували поліпшити користувальницький досвід на їх блозі, перейшовши від одноколонной структури до двоколонні.
підсумковий рахунок
Отже, редизайн-версія, на мою думку, більше сподобається користувачам.
Єдине, що мене в ній напружує, так це невелике вікно для листування зі службою підтримки. Ну навіщо воно потрібне на блозі? Якщо хто-небудь з команди Freshdesk читає цю статтю, дайте відповідь мені, будь ласка, з якою метою вона там знаходиться, чи допомагає вона в читанні статей або покращує інші показники користувацького досвіду?
4. Сервіс-сторінка сайту Best Buy
Іноді буває, що великі компанії повністю переробляють і оновлюють зовнішній вигляд і подачу контенту на сторінках свого сайту, при цьому залишаючи недоторканими верхнє меню (шапку сайту) і футер (підвал сайту). У підсумку виходить такий веб-франкенштейн - ні риба ні м'ясо, незрозуміло що.
Давайте подивимося, що створила компанія Best Buy (великий магазин електроніки та супутніх товарів) в спробі переробити свою сервіс-сторінку, присвячену підключенню до інтернету.
підсумковий рахунок
Незважаючи на деякі помарки, Best Buy все-таки вдалося поліпшити дизайн свого сайту. Звичайно, є деякі відгомони "веб-Франкенштейна" (крос-Селл, наприклад), але в цілому вони взяли вірний курс і в недалекому майбутньому, я на це дуже сподіваюся, зроблять свій сайт ще краще.
Про те, як повинен виглядати сайт в реаліях сьогоднішнього часу, ми детально пояснили в статті «Анатомія першого екрану»