Всем привет! Мы ИТ-компания BSL– технологический партнер в продуктовой разработке и интеграции. В данной статье наш Team Lead Frontend Developer – Андрей рассказал о типичных ошибках при разработке интерфейсов по уже отрисованным макетам, способах их решения и, в целом, о правильном подходе при проектировании. Как мы знаем, не всегда дизайн-макеты идеальны, где-то могли упустить состояния, где-то не описано поведение анимаций, где-то дизайнер не знает вашу ui-библиотеку и так далее. Обо всём этом ниже.

Давайте начнем издалека, чтобы понять корень проблем. Откуда всё-таки появляются эти ошибки при построении интерфейсов, которые тянутся и повторяются зачастую на всех последующих проектах? Зачастую это происходит по причине небольшого опыта дизайнеров, сжатых сроков, малой насмотренности. А иногда просто потому, что дизайнер не понимает всех возможностей современного веба, из-за чего наши интерфейсы сильно статичны, скучны, недостаточно интерактивны. Как это исправить? Ответ прост: больше изучать ресурсы, где собраны качественные интерфейсы. Одним из них является ресурс https://www.awwwards.com/, где собрано огромное количество качественных и креативных веб-сайтов. Это целое сообщество, где профессионалы цифрового дизайна со всего мира находят вдохновение, делятся своими знаниями и опытом, делятся конструктивной критикой. Если выработать привычку на постоянной основе просматривать подобные ресурсы, то можно неплохо прокачать навык понимания качественного проектирования UI.

Как же всё-таки нам поступать, когда дизайн-макеты реализованы в кратчайшие сроки и переданы нам уже в разработку? Как реализовать кнопки с адекватными hover-состояниями, модальные окна, которые не выскакивают настолько резко, что пользователь вздрагивает и не понимает что происходит?

В идеальном мире всё происходит следующим образом: происходит брейншторм, детально изучаются бизнес-требования, анализируются конкуренты, рисуется прототип, согласовывается прототип и уже как в чистовик рисуется дизайн с использованием всех наработок дизайнера, готовых компонентов, разрабатывается ui kit, на базе которого также создаются компоненты, рисуется адаптив для различных разрешений, рисуются различные состояния блоков/элементов с соответствующими комментариями.

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

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

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

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

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

Теория

Что такое пользовательский интерфейс?

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

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

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

Что содержит в себе пользовательский интерфейс?

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

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

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

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

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

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

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

• Пользовательский опыт. Удобство использования и положительный опыт — вот две вещи, которые должны сформироваться у пользователя после использования интерфейсов.

Почему так важен качественный пользовательский интерфейс?

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

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

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

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

Ключевые принципы эффективного дизайна пользовательского интерфейса

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

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

• Цветовая схема. Контрастные цвета для лучшей читаемости, цветовая палитра необходимы для передачи настроения продукта.

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

• Изображения. Качественные изображения передают настроение, посыл продукта и не требуют текстового разъяснения.

Тренды в дизайне пользовательского интерфейса

Вот некоторые из них:

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

• Минимализм.

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

• Неоморфизм.

Новый тренд в дизайне интерфейсов. Неоморфизм создает визуально привлекательные тактильные интерфейсы с добавлением тонких теней и бликов. Данный подход моделирует взаимодействие с объектами реального мира.

Практика

Итак мы закончили с базовой теорией. Теперь перейдём к практической части.

Оптимизация CSS, JS, изображений и других ресурсов

Вы, конечно, не раз про это слышали и скажите на это: «Сколько можно?». Но именно из-за неоптимизированных ресурсов чаще всего ваши интерфейсы и неоптимизированные. В современных фреймворках и библиотеках, таких как angular, react, vue данная оптимизация уже идёт из коробки. Но вы всегда можете покопаться в документации и поэкспериментировать с конфигурацией, обнаружив те узкие места и понять области для оптимизации.

На просторах сети Интернет полно информации по данной теме, но отметим некоторые моменты:

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

• svg-иконки: они независимы от разрешения, дают четкое изображение и повышают производительность;

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

Всё просто: нет производительности — долго грузятся страницы, пользователи не ждут и уходят.

Инструменты, которые могут проверить производительность ваших веб-страниц: Lighthouse, WebPageTest, Google PageSpeed ​​Insights, GTmetrix.

Области клика

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

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

Отступы

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

Простой пример с заголовками и текстом:

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

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

Автофокус в формах

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

Состояния фокуса

:focus необходим чтобы пользователь понимал на каком элементе формы или ссылке у него фокус в текущий момент времени. В хорошем интерфейсе пользователь может легко навигировать с помощью клавиши tab. Не забывайте использовать tabindex чтобы проставить последовательность или пропустить какие-то элементы.

Релевантный текст в действиях

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

Давайте посмотрим не самые удачные варианты:

Тут мы видим текст “ОК”/”YES” в каком-либо действии. В таком случае вам придется прочитать полностью все сообщения, чтобы понять связь данных кнопок с сообщением в тексте. Но мы можем ускорить данный процесс, посмотрим на примере:

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

Индикаторы загрузки

Зачастую мы видим картину, когда секции/блоки приложения загружаются постепенно, например, у нас моментального загрузился основной layout, приветственная секция и ряд других легковесных блоков. А тяжелые данные подгружаются позже, из-за чего мы видим как контент начинает скакать или непредсказуемо появляться в тот момент, когда вы просматриваете какую-либо информацию. Решаются данные проблемы с помощью так называемых скелетонов, о них мы поговорим позже, или с помощью индикаторов загрузки.

Такие индикаторы загрузки необходимы также при переходах между страницами одного типа, особенно в PWA/SPA приложениях, где нет полной перезагрузки страницы. Разберем на примере маркетплейса МегаМаркет:

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

Проблема отображения процесса загрузки данных решается с помощью скелетона или лоадера.

Заключение

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

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

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

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