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

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

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

Правило 1: Управляйте вниманием пользователя

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

Чаще всего, в этом примере после прочтения материала от пользователя все же требуется какое-то основное действие: оформление подписки, покупка товара, переход в каталог и так далее. Тогда нужно дополнительно держать в поле зрения форму подписки. Однако, она все же не должна отвлекать от прочтения статьи, но при этом время от времени мельтешить перед глазами. Как вариант можно сделать так, чтобы форма появлялась в виде всплывающего окна, когда пользователь близок к прочтению статьи. Правда, в этом случае важно не переборщить - всплывающее окошко не должно раздражать и отвлекать читателя.

Пример построения шаблона изучения контента с акцентами на странице

Еще пример на интернет-магазине. Посетитель должен первым делом увидеть товары, особенно, если есть какие-то акционные предложения или что-то в этом роде. Их нужно будет сделать больше остальных карточек или отметить как-то еще визуально. Элементы интерфейса: фильтры, пункты меню, поля поиска, корзина и так далее тоже должны быть, но их можно скрыть за соответствующими кнопками. На этой странице они особо не нужны.

Правило 2: Объединяйте схожий функционал в один блок

В сложном сайте неизбежно начнут появляться элементы с разными названиями, но примерно одним и тем же назначением. Близкие по своей функциональности компоненты нужно объединять в один. Например, в ТЗ предусмотрено несколько вариаций блока связи с компанией - телефон, форма обратной связи, интерактивная карта, отдельная страница с контактами, плюс, несколько ссылок на нее. Если интерфейс и без того перегружен, то лучше перенести все это на отдельную страницу, где пользователь при необходимости может заполнить форму, посмотреть карту, узнать больше о компании и так далее. На других страницах сайта оставляйте только ссылку на контакты и, если интерфейс не перегружен, еще номер телефона или иконки социальных сетей.

Объединение схожих элементов интерфейса в один

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

Правило 3: Используйте аккордеоны

Иногда техническое задание не подразумевает возможность сокращения контента на странице. В таком случае для избежания перегрузки интерфейса, делите его на смысловые блоки. По умолчанию видимым для пользователя будет только заголовок того или иного блока. Для изучения содержимого потребуется кликнуть на заголовок и блок раскроется полностью. Чтобы пользователю не приходилось для этого обновлять страницу или открывать новую, данную возможность лучше всего реализовать через аккордеоны.

Пример использования аккордеонов

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

Правило 4: Используйте как можно меньше полей в формах

Мало какому пользователю захочется тратить на заполнение формы несколько минут. Если техническое задание позволяет, то количество полей в форме лучше сделать самый необходимый минимум. Например, если задача страницы привлечь подписчиков, то в форме на ней вполне можно обойтись полем “email” и кнопкой отправить.

Однако не всегда получается сократить количество полей в форме. В таком случае ее заполнение рекомендуется разделить на несколько этапов. Например, на сайте пользователь оставляет контакты: email и свое имя. После к нему на почту приходит ссылка для дальнейшего заполнения. Еще как вариант сделать подгрузку полей: сначала контакты, потом подгружаются еще какие-то поля, затем еще. Так гораздо меньше вероятность того, что посетитель уйдет со страницы. Если все это выложить сразу одной большой формой, то человеку вполне может оказаться лень ее заполнять.

Форма без лишних полей

Правило 5: Реализуйте умные поля

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

Правило 6: Сделайте автоматическую проверку

Особенно это актуально, когда требуется заполнить объемную форму. Пользователь случайно может где-то ошибиться или пропустить какое-то важное поле. В таком случае:

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

Правильное сообщение об ошибке в форме

Правило 7: Скрывайте примечания

Зачастую у какой-то характеристики или поля в форме требуется прописать более подробное разъяснение. Однако если это сделать, то интерфейс получится очень громоздким и неудобным. Как решение можно блок с разъяснением конкретного параметра скрыть, правда, сделать это не аккордеоном, как в предыдущем совете. У многих интернет-магазинов это реализовано в виде специальной пометки при наводке на которую появляется поле с соответствующим пояснением.

Всплывающее примечание при наведении

Правило 8: Старайтесь делать знакомый интерфейс

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

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

Правило 9: Демонстрируйте прогресс пользователя

Если контекст позволяет это реализовать, то лучше показывать посетителю, сколько осталось до выполнения какого-то действия. Это можно даже реализовать на примере простого прочтения статьи, сделав индикацию прогресса. Правда, лучше всего подобное делать в тех случаях, когда от пользователя требуются какие-то конкретные действия, например, заполнение большой формы, разбитой на несколько этапов, и вот почему:

  • посетителю гораздо понятнее, как долго еще осталось делать то или иное действие на сайте;
  • появляется небольшой элемент “геймификации” из-за чего процесс воспринимается скорее как игра, следовательно, становится больше мотивов дойти до логического конца.

Правило 10: Выделяйте важную информацию отдельным блоком

Большинство людей не читают 100% информации на странице. Вместо этого они просто пробегаются глазами по картинкам и заголовкам и, если их что-то зацепило, то останавливаются для более подробного изучения. Старайтесь выделять ту информацию, которую посетитель точно должен видеть, отдельным блоком. Если речь идет о тексте, то оформите его иконками, увеличьте шрифт.

Используйте это правило осторожно. Слишком много таких “внимание”-блоков могут наоборот рассеять внимание посетителя и привести к полностью противоположному результату. Неплохо было бы в эти блоки вносить конкретные преимущества, которые пользователь получит выполнив то или иное действие.

Правило 11: Используйте отмену действия, а не подтверждение

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

Пользователь должен иметь возможность быстро отменить свои действия, если где-то допустил ошибку. Вместо всплывающего окна с подтверждением, лучше сделать небольшое уведомление. Там требуется написать, что все изменения внесены, но если нужно вы можете отметить их. Часть с “отменить” сделать ссылкой на сброс.

Один из вариантов реализации отмены действия

Правило 12: Группируйте связанные по смыслу элементы

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

Группировка связанных по смыслу элементов

Правило 13: Улучшить кликабельность

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

Вариант реализации более кликабельных элементов

Правило 14: Показывайте только нужную информацию

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

Правило 15: Подписывайте иконки

Да, это немного утяжелит интерфейс, но далеко не все иконки можно интерпретировать одинаково. Чтобы избежать двойного толкования действия, сделайте небольшую подписку к иконкам. Если подпись сделать невозможно, то реализуйте ее в виде всплывающей подсказки, которая появляется при наведении курсора на иконку.

Пример подписанных иконок

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

Заключение

Разработка дружелюбного интерфейса - это отдельное направление в веб-разработке, требующее навыков как дизайнера, так и верстальщика. Главной задачей здесь является расстановка акцентов внимания, сокращение ненужной информации. При этом в процессе не нужно “изобретать велосипед”. Лучше наоборот - пойти по уже подготовленному шаблону: так будет проще и вам как разработчику, и посетителю сайта, так как он уже будет понимать на подсознательном уровне, как с ним взаимодействовать.