Ваш UI-дизайн неаккуратный? 7 частых ошибок, которых можно избежать

Оригинал. By Denislav Jeliazkov

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

Больше интересных и актуальных статей ищите в нашем блоге и телеграм-канале.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Это позволит сделать желаемый акцент на самых важных и больших элементах. Самый крупный текст – заголовок – имеет большее пространство вокруг. Но это пространство должно быть ближе к связанным элементам, которые следуют за ним.Источник: Ваш UI-дизайн неаккуратный? 7 частых ошибок, которых можно избежать

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

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

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

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

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

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

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

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

Если вы поместите два совершенно разных элемента очень близко друг к другу, пользователь не поймет, какой элемент является «основным». Вот почему можем сказать, что контраст – это не только применение разных визуальных стилей к элементам, но и искусство использования белого пространства. Это связано с тем, что иногда, чтобы элементы контрастировали, вам нужно разделить их пустым пространством.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Больше интересных и актуальных статей ищите в нашем блоге и телеграм-канале.