7 распространенных ошибок при проектировании UI

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

1. Игнорирование масштабов / плохое планирование

Как часто вы пользовались продуктом, в котором есть Lorem ipsum и стоковые фотографии? Ни разу.

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

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

Выбор изображений

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

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

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

‍Понимание повторяющихся блоков

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

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

Планирование масштабирования

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

‍2. Отсутствие разницы между первичными и вторичными действиями

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

Вот как различать главные и второстепенные кнопки:

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

3. Раздражающие сообщения об ошибках

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

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

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

Дизайнеры также должны позаботиться о неожиданных ошибках (например, ошибки сервера, типа “страница не найдена”). Любое сообщение об ошибке - это препятствие на пути пользователя. Вот почему мы должны помочь пользователю справиться с ней, предоставить любые возможные решения и постараться сгладить неудачный опыт — особенно если это не ошибка пользователя. Например, хорошим решением может стать разработка иллюстраций или анимации для страниц 404 или 500.

Осторожность при проверке заполнения формы

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

Например, представьте, что у вас есть форма с обязательными полями. Это означает, что у разработчиков есть соответствующая проверка "Все обязательные поля не должны быть пустыми". Допустим, пользователь пытается заполнить форму, но в произвольном порядке. Когда первое обязательное поле теряет состояние фокуса, оно выдает сообщение об ошибке: "Пожалуйста, заполните это поле. Оно обязательно для заполнения!".

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

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

Цена и ценность

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

‍4. Плохое выравнивание

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

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

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

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

Слишком маленькие отступы означают, что пользователи не могут разбить контент на логические блоки. Чтобы логические части не сливались друг с другом, держите их отдельно и увеличьте пространство между ними.

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

• Зафиксируйте отступ в 40px между нижним краем заголовка и верхним краем следующего за ним абзаца текста.
• Зафиксируйте отступ между абзацами в 10px
• Если после абзаца идет подзаголовок, задайте ему 30px для padding-top (т.е. пространство между абзацем и верхней частью подзаголовка будет 30px) и 20px для padding-bottom (т.е. пространство между нижней частью подзаголовка и следующим абзацем будет 20px, что больше, чем пространство между абзацами).

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

‍5. Низкая контрастность

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

Просто спросите у пиццерии Domino's, на них подал в суд слепой человек, который не мог зайти на их сайт, потому что сайт был недоступен для слабовидящих. Не будьте как Domino's, разрабатывайте дизайн для доступности.

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

По мере становления меня как дизайнера, я стал понимать всевозможные ограничения, которые могут подорвать мою идею идеального дизайна. Одним из таких ограничений является соответствие ADA (от англ. Americans with Disabilities Act — Закон об американцах-инвалидах — это закон о гражданских правах человека, который запрещает дискриминацию людей с инвалидностью во всех сферах жизни общества, включая работу, школы, транспорт и все публичные и частные места, которые доступны для широкого круга граждан).

Сокращение текста до 8px, потому что он лучше вписывается в горизонтальное пространство, или использование светлого оттенка серого, потому что это красиво выглядит, — это пренебрежение к нашим посетителям с ослабленным зрением.

Это может сойти нам с рук, когда мы пытаемся набрать "лайки" на Dribbble, но это не лучшая практика при разработке продукта для реальных людей.

Руководство по доступности веб-контента ( Web Content Accessibility Guidelines,WCAG) требует контрастности не менее 4,5:1. Существуют также рекомендации для людей с двигательными, слуховыми и когнитивными нарушениями.

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

‍Использование белого пространства

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

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

‍Обеспечение достаточного контраста между текстом и изображениями

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

Другой вариант — использовать контрастное изображение изначально. В этом случае текст можно поместить поверх темного участка фотографии или изображения.

6. Использование плохих иконок

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

В приложениях иконки часто являются эквивалентом кнопок. Просто загляните в Instagram: Вы увидите только иконки и текст.

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

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

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

• Ширина линий — После изменения размера все ваши иконки должны иметь одинаковую ширину линий. В противном случае будет очень заметно, что они не одинаковы.
• Радиус угла — Если ваши иконки включают некоторые прямоугольные формы, сравните радиус скругления угла каждой иконки в вашем наборе. Если он отличается для разных значков, лучше исправить это.
• Форма линии обводки (для очерченных значков) — она может быть прямоугольной или округлой.
• Форма соединения углов (для очерченных значков) — может быть прямоугольной или закругленной.

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

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

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

‍7. Игнорирование адаптивов

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

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

Однако для профессионалов в области дизайна проблема отсутствия оптимизации для нескольких устройств не должна возникать. При создании пользовательского интерфейса всегда следует помнить о широко известном подходе "mobile-first".

Сосредоточьтесь на контенте, который каждый тип пользователя увидит на каждой странице. Затем спросите себя: “Удобен ли элемент управления пользовательского интерфейса, который я выбрал для отображения этого конкретного контента, или нет?”

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

‍Плохо спроектированные области касания

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

Поэтому при проектировании кликабельных элементов помните, что пальцы у пользователей разного размера:

• Создавайте удобные для пальцев сенсорные объекты, учитывая, что средняя ширина указательного пальца взрослого человека составляет от 1,6 до 2 см.

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

Существует еще множество правил "говорящего интерфейса", о которых я рассказываю в своем видеокурсе UI Learn, и это лишь некоторые из тех, которые я чаще всего использовал на протяжении многих лет. Если вам понравилась эта статья, ознакомьтесь с другими моими статьями о дизайне на сайте Design Newsletter, где я периодически публикую свои статьи о дизайне.