Эффективный веб-дизайн: 7 принципов сайта, который работает

Эффективный веб-дизайн — это не тот, на который дизайнер смотрит и думает: «Какая красота!»

Это тот, на котором пользователь не думает вообще.

Он пришёл — понял, куда попал.
Нашёл нужное.
Нажал туда, куда собирался.
Прочитал, купил, записался, отправил заявку или просто запомнил сайт и вернулся позже.

И нигде по дороге ему не пришлось разгадывать замысел дизайнера.

Мы любим красивые сайты. Любим анимацию, необычные интерфейсы, новые технологии и всяческие дизайнерские фокусы. Но за время работы с собственными проектами убедились в довольно простой вещи:

если дизайн мешает человеку пользоваться сайтом — он перестаёт быть хорошим дизайном, каким бы эффектным ни выглядел.

Поэтому вместо очередного списка «что сейчас модно» собрали семь принципов, по которым можно проверить практически любой сайт.

1. Пользователь должен быстро понять, куда он попал

Начнём с самого простого.

Откройте главную страницу своего сайта и представьте, что видите её впервые.

Понятно ли за несколько секунд:

кто вы, что здесь находится и зачем человеку оставаться?

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

«Создаём пространство возможностей для вашего будущего».

Красиво.

А что продаём-то? 😂

Первый экран не обязан рассказывать обо всём. Его задача — дать человеку ориентир.

Например:

«Ремонт кофемашин в Калуге — диагностика и ремонт с выездом».

Не поэзия. Зато никто не решит, что попал в магазин кофейных зёрен.

Проверяем

Посмотрите на страницу глазами человека, который ничего о вас не знает.

Если для понимания сайта ему требуется читать три экрана — возможно, объяснение стоит упростить.

2. Навигация не должна превращаться в квест

Когда мы только начинаем делать сайт, структура кажется очевидной.

Нам.

Мы знаем, где лежит каждая статья, почему эта страница находится именно в этой рубрике и что означает придуманное нами красивое название раздела.

Пользователь ничего этого не знает.

Поэтому хорошая навигация — не самая оригинальная, а предсказуемая.

Человек должен понимать, где искать услуги, каталог, контакты, статьи, цены или информацию о проекте.

При этом старое правило вроде «всё должно находиться максимум за два клика» мы бы сегодня применять не стали.

Иногда до нужной страницы действительно приходится пройти несколько уровней — и в этом нет ничего страшного.

Гораздо хуже, если путь короткий, но совершенно непонятный.

Не количество кликов главное. Главное — чтобы после каждого клика человек понимал, куда он попал и что делать дальше.

3. Визуальная иерархия должна подсказывать, что здесь главное

Представьте страницу, где:

заголовок огромный;
кнопка огромная;
баннер огромный;
картинка огромная;
ещё одна кнопка мигает;
а рядом что-нибудь на всякий случай прыгает.

Получается не визуальная иерархия, а собрание людей, которые одновременно пытаются перекричать друг друга. 😂

На хорошем экране всегда есть главное и второстепенное.

Размер, цвет, контраст, свободное пространство, расположение элементов — всё это помогает управлять вниманием.

Если главное действие страницы — записаться, кнопка записи должна быть заметна.

Если задача — прочитать материал, ничто не должно постоянно оттаскивать взгляд от текста.

Если продаём товар — фотография, цена и основные характеристики должны находиться там, где их ожидает увидеть покупатель.

Простой тест

Прищурьтесь и посмотрите на страницу.

Что осталось заметным?

Если первым в глаза бросается декоративная картинка, а главное действие приходится искать — иерархия, скорее всего, работает не туда.

4. Мобильная версия — это не уменьшенная копия компьютера

Вот здесь сайты особенно любят показывать характер.

На компьютере всё прекрасно.

Открываем телефон — меню уехало, заголовок занимает полтора экрана, таблица вылезла наружу, а две кнопки стоят настолько близко, что палец выбирает между ними самостоятельно.

Адаптивность — давно не дополнительная функция сайта. Это часть обычного пользовательского опыта. Google также рекомендует оценивать страницы в комплексе и отдельно обращает внимание на то, хорошо ли основной контент отображается на мобильных устройствах.

Причём мобильную версию мало просто «ужать».

Иногда на маленьком экране нужно:

сократить декоративные элементы;
перестроить блоки;
перенести главное действие выше;
увеличить области нажатия;
упростить меню;
иначе расположить изображения.

И обязательно проверять сайт руками на настоящем телефоне.

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

5. Красивый сайт не должен заставлять себя ждать

Можно сделать невероятную обложку.

Добавить видео.

Анимацию.

Красивейший шрифт.

Поставить изображения такого качества, что на фотографии будет видно настроение каждой травинки.

А потом посетитель закроет страницу, пока всё это великолепие загружается.

И не увидит ни травинку, ни дизайн.

Поэтому скорость — тоже часть веб-дизайна.

Это не означает, что сайт должен состоять из одного текста на белом фоне.

Нужно просто понимать цену каждого элемента.

Изображения можно оптимизировать.
Видео не обязательно загружать сразу.
Тяжёлый эффект стоит использовать там, где он действительно что-то даёт.
Ненужные скрипты и плагины полезно периодически пересматривать.

И здесь важен ещё один момент: не надо гоняться только за одной зелёной цифрой какого-нибудь теста.

Google прямо говорит, что хороший page experience складывается из множества аспектов, а не из одного-двух показателей.

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

Тут профессор Лапкинс уже одобрительно поправил очки. 😼

6. Удобство включает доступность

Это тот пункт, который раньше легко выпадал из разговоров о красивом дизайне.

Светло-серый текст на белом фоне может выглядеть очень нежно.

До тех пор, пока его не пытаются прочитать.

Маленькая изящная кнопочка прекрасно вписывается в композицию.

Пока в неё не пытаются попасть пальцем.

Поэтому проверяем:

достаточно ли хорошо читается текст;
понятно ли, что является ссылкой или кнопкой;
можно ли пользоваться интерфейсом без сверхточного попадания;
не передаём ли важную информацию одним только цветом;
не мешает ли движение воспринимать содержание.

Это не какие-то отдельные правила «для специальных сайтов».

Это нормальная забота о пользователях.

Например, WCAG 2.2 устанавливает минимальные требования к контрасту текста и отдельно рассматривает размер и расстояние между интерактивными областями.

И тут обнаруживается приятная закономерность:

когда мы делаем сайт доступнее, очень часто им становится удобнее пользоваться вообще всем.

7. Дизайн должен помогать задаче сайта

Вот мы и добрались до главного.

Можно выполнить предыдущие шесть пунктов и всё равно забыть спросить:

а зачем вообще существует эта страница?

У интернет-магазина одна задача.

У портфолио — другая.

У образовательного проекта — третья.

У статьи — четвёртая.

Поэтому нет универсального «идеального дизайна».

Если человек пришёл читать длинную статью, ему нужны удобный текст, структура и навигация по материалу.

Если выбирает товар — сравнение, фотографии, характеристики, цена и понятная покупка.

Если записывается на услугу — ему не нужен экскурсионный маршрут через всю историю компании перед кнопкой записи.

Каждый элемент страницы должен либо помогать основной задаче, либо хотя бы ей не мешать.

Именно поэтому вопрос:

«Красиво ли это?»

мы теперь всё чаще дополняем другим:

«Что это делает для пользователя?»

Если ответа нет — возможно, элементу просто очень хотелось попасть на сайт.

А где здесь бренд и индивидуальность

Конечно, эффективный веб-дизайн не означает, что все сайты должны стать одинаковыми.

Наоборот.

Цвет, иллюстрации, типографика, персонажи, фотографии, характер текста, анимация — всё это помогает проекту стать узнаваемым.

Мы сами прекрасно знаем, насколько сайт меняется, когда у него появляются собственный голос и собственные герои.

Но индивидуальность не должна требовать от пользователя заново изучать интернет.

Можно придумать необычного персонажа.

Можно сделать совершенно свою графику.

Можно создать особую атмосферу.

Но кнопка всё равно должна выглядеть так, чтобы человек понял: на неё можно нажать.

Вот это прекрасный компромисс между характером и удобством.

Анимация и микровзаимодействия: не развлекаем кнопку без причины

Микровзаимодействия могут быть очень полезными.

Кнопка изменилась после нажатия — человек понял, что действие произошло.

Поле подсветилось — стало видно, где ошибка.

Появился индикатор загрузки — пользователь понимает, что сайт не умер, а работает.

Это хорошая анимация.

А если кнопка подпрыгивает, переливается, улетает, возвращается и испускает искры просто потому, что мы научились это программировать…

Ну, возможно, кнопка отлично проводит время. 😂

Но пользователю от этого не обязательно лучше.

Мы уже подробно разбирали этот принцип в статье о внедрении трендов: современный приём имеет смысл не сам по себе, а тогда, когда помогает выполнить задачу.

А что насчёт SEO

Здесь тоже пора убрать старую магию.

SEO — не отдельный пакет заклинаний, который накладывают на готовый сайт после дизайна.

Структура страниц, понятная навигация, внутренние ссылки, скорость, мобильное отображение, содержание — всё это проектируется вместе.

Но и обратное неверно: не стоит делать страницу неудобной ради попытки угодить поисковому роботу.

Google в рекомендациях по page experience прямо связывает хороший опыт с мобильным отображением, Core Web Vitals, безопасностью, отсутствием навязчивых элементов и понятным выделением основного контента.

Поэтому хороший современный подход звучит гораздо проще:

делаем страницу понятной человеку и одновременно технически понятной поисковой системе.

Тогда дизайн и SEO не воюют между собой.

Наш чек-лист эффективного веб-дизайна

Перед публикацией или после очередного обновления страницы мы бы проверили семь вещей:

1. Понятно ли человеку, куда он попал и что здесь можно сделать?
2. Легко ли найти нужную информацию?
3. Видно ли главное или все элементы борются за внимание?
4. Удобно ли пользоваться страницей с телефона?
5. Не заставляет ли красота слишком долго загружаться?
6. Хорошо ли читается текст и удобно ли взаимодействовать с элементами?
7. Помогает ли дизайн основной задаче страницы?

А потом добавили бы восьмой, неофициальный вопрос от профессора Лапкинса:

«А результат где?» 😼🔎

Если на него есть хороший ответ — значит, мы движемся правильно.

Эффективный веб-дизайн не заканчивается после публикации

И это, пожалуй, самое важное изменение в нашем отношении к сайтам.

Раньше легко было думать:

сделали → красиво → опубликовали → готово.

На самом деле после публикации всё только начинается.

Люди пользуются сайтом не так, как мы предполагали.

Какие-то страницы оказываются удобными.

Какие-то приходится переделывать.

Где-то не замечают кнопку.

Где-то читают материал гораздо дольше, чем ожидалось.

Где-то красивое решение прекрасно работает на компьютере и совершенно разваливается в маленьком превью или на телефоне.

И это нормально.

Эффективный веб-дизайн — не идеальная картинка. Это система, которую мы наблюдаем, проверяем и постепенно улучшаем.

Поэтому сегодня наш главный критерий хорошего сайта довольно простой:

человеку понятно, удобно и ничего не мешает сделать то, зачем он пришёл.

А если при этом сайт ещё красивый, узнаваемый и хочется на нём остаться —

ну вот тогда можно наконец похвалить дизайнера. 😄