- 1. Шаблони для сайтів
- 2. Матеріальний дизайн
- 3. Плоский дизайн (Flat design)
- 4. Критичний дизайн
- 5. Сайти з фоновими фото і відео
- 6. «Гамбургер» в меню
- 7. Нескінченний скролінг
- 8. Scrolljacking
Тенденції в 2015-2016 такі, що вже й не видно кордонів, де закінчується SEO і починається контент-маркетинг. Все працює в комплексі і, просуваючи сайт, корисно покращувати його з усіх боків. При подачі контенту на перший план виходять легкість, лаконічність, зручність і користь. Веб-дизайн як частина юзабіліті розвивається за тими ж законами. Ми зібрали 8 головних трендів веб-дизайну в 2016 році і прокоментували їх з точки зору SEO.
1. Шаблони для сайтів
Слідом за популярною відкритою платформою WordPress «в маси» ступив сервіс готових UI-шаблонів Wix і його аналоги. Тепер створення простих і зручних сайтів - загальнодоступне благо. На виході виходить гідний продукт з легким і сучасним дизайном. У готових UI-шаблонів є свої недоліки - обмежені можливості і неоригінальність (як наслідок - гомогенізація сайтів, їх одноманітність). Але для невеликого промо-сайту або посадкової сторінки цього вистачить.
приклад:
Наш вердикт: шаблон дозволяє заощадити ресурси і прискорити запуск простих сайтів з мінімальним наповненням. Але просування сайтів на шаблонах (зокрема, на Wix) практично не можливо. На них не можна встановити сервіси веб-аналітики (або це платна опція), провести перелинковку і коректно прописати URL, проставити редирект і відредагувати robots.txt. Є й інші обмеження по функціоналу, які перекривають первісну вигоду.
2. Матеріальний дизайн
Вперше з'явився в мобільних додатках Google і став активно застосовуватися в мобільних версіях сайтів. Пріоритет тут - тактильне взаємодія з елементами меню - натискання, «змахування» в сторону (swipe). Головним елементом дизайну стає кнопка, а нефункціональна графіка йде на другий план. Головний прийом - надання обсягу, «матеріальності» елементам.
Наш вердикт: ідеально для мобільних версій, які все більше враховуються пошуковими системами при формуванні видачі. Втілення легкості, функціональності та простоти, спонукання до дії - все це збільшує відгуки і конверсію. Чи не підійде для сайтів з великим об'ємом інформації та безліччю розділів.
3. Плоский дизайн (Flat design)
На відміну від матеріального дизайну, тут не використовуються градієнти, тінь і глибина. Зате активно працюють колір і фігурні елементи. Головний плюс - простота і зручність: все гранично лаконічно, інтуїтивно зрозуміло і не відволікає. Сьогодні плоский дизайн активно трансформується в «напівплощиною» (або Flat 2.0), поєднуючи риси карткового і матеріального. Що з цього вийде - побачимо.
приклад:
Наш вердикт: з точки зору SEO такий дизайн - практично універсальне рішення. Допомагає добре структурувати і не перевантажувати сторінку візуально. Помістіть головні розділи з іконками і описами в центрі, і ви спростите життя відвідувачам, направивши їх в потрібну сторону. Однаково зручний для десктопних і мобільних версій.
4. Критичний дизайн
Прийшов з соціальної мережі Pinterest, де користувачі викладають свої «дошки» з фото і колажів. Виявився наочним і життєздатним, особливо для розважальних і кулінарних порталів. Дозволяє зручно представити контент, в тому числі в мобільній версії.
приклад:
Наш вердикт: зручність - це добре. Зручність мобільної версії - просто чудово. З точки зору SEO такий хід цілком виправданий, хоча і з оглядкою на аудиторію: не підійде «солідним» ресурсів з консервативної публікою. Відчутний мінус - мінімальна кількість тексту на таких сайтах, що ускладнює просування. Велика кількість зображень збільшує навантаження на сервер і відволікає відвідувачів, якщо вони прийшли не за контентом, а за конкретним товаром або послугою.
5. Сайти з фоновими фото і відео
Мова про веб-сторінках з великими фоновими зображеннями, флеш-анімацією і відео на тлі. Прямий наслідок безлімітного швидкісного інтернету, яке дозволяє відразу зачепити увагу користувача.
приклад:
https://www.airbnb.ru
Наш вердикт: що добре для багатомільйонних проектів, то необов'язково допоможе вам. Пам'ятайте: Яндекс враховує швидкість завантаження сторінок при ранжируванні сайтів, плюс акцент на графіку призводить до мінімізації тексту (про що ми вже говорили вище).
6. «Гамбургер» в меню
«Гамбургер» - елемент, що складається з трьох горизонтальних смужок. Зазвичай використовується в мобільних версіях, щоб заощадити місце: при наведенні на елемент спливають розділи меню. У «гамбургера» є свої прихильники і противники. Перші вважають, що лаконічність - це добре, тим більше, що користувачі вже звикли і легко зчитують значення елемента. Інші переконані, що «гамбургер» тільки заважає: через нього не видно карта сайту, і потрібно здійснювати додаткові дії для переходу. Альтернатива видно на прикладі YouTube (див. Фото): в мобільній версії сервісу вирішили відмовитися від «гамбургера» на користь tab-елементів.
приклад:
Наш вердикт: використовувати «гамбургер» варто з обережністю: він хороший для мобільних версій, якщо ваша аудиторія - молодше 40. Більш вікова може не брати до уваги і заплутатися. Кращий спосіб зрозуміти, допомагає «гамбургер» збільшити глибину перегляду (а з нею і конверсію) або навпаки - відстежити поведінку відвідувачів сайту. Поки що дані статистики свідчать на користь інших варіантів.
7. Нескінченний скролінг
Прийшов до нас з 2011 року, але для російського інтернету актуальний досі. Під нескінченним скроллингом розуміють розміщення контенту таким чином, що він завантажується і подгружается в процесі прокрутки вниз. Прийом дозволяє створити ефект багатосторінкового сайту і утримати увагу користувача за умови, що контент дійсно захоплює.
приклад:
Наш вердикт: нескінченний скролінг зручний в мобільних версіях - не потрібно натискати на кнопки меню. Зручна мобільна версія з точки зору SEO - це плюс. Також він актуальний для сайтів з постійно оновлюється контентом: інформаційних і розважальних порталів, промо-сайтів фестивалів. Але не всі користувачі захочуть крутити вниз в пошуках потрібної інформації і просто покинуть сайт. Страждає і зручність навігації, прямі посилання на розділи, які важливі для SEO. Ще один мінус - підвищене навантаження на сервер за рахунок JavaScript. Нагадаємо, що Google не шанує сайти з нескінченної прокруткою.
8. Scrolljacking
Не плутати з нескінченним скролінгом. При скроллджекінге контент змінюється в процесі прокрутки. Сфера застосування поки не широка: в основному метод використовується для наочної презентації продукту в сегментах преміум і люкс.
приклад:
Наш вердикт: виглядає ефектно, але працює далеко не скрізь. Сильно ускладнює сайт, що позначається на швидкості завантаження і може не сподобатися пошуковим роботам. Якщо контент при цьому обмежений однією сторінкою, просувати такий сайт вкрай складно.
У наявності дві головні тенденції: мінімалізм і його повна протилежність. І та, і інша мають право на існування, за умови, що вони доречні саме для вашого сайту. Пам'ятайте: дизайн - це частина юзабіліті, а не самоціль. Його завдання - допомагати конверсії та просування сайту.
