10 принципов UI-дизайна, о которых часто забывают

1. Придумывайте применение для пустых пространств

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

Что бы вы ни решили сделать, там не должна стоять надпись: «Здесь пока ничего нет».

2. Не используйте ползунки для ввода количественных значений

Ползунки отлично подходят для регулировки качественных характеристик, таких как яркость, громкость, цвет и так далее. Но не стоит использовать их для ввода количественных значений: если пользователь захочет выбрать цифру 6, почти наверняка ползунок будет постоянно сбиваться то на 5, то на 7.

3. Ставьте выпадающее меню, только если вариантов много

При выборе страны или года рождения есть много вариантов ответа, поэтому выпадающее меню подходит идеально. Но если вариантов всего несколько, лучше добавить кнопку единичного выбора (radio button) или ползунок.

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

4. Делайте элементы управления достаточно крупными для пальцев

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

Предотвратить это поможет зазор в 2 мм. По версии Apple, минимально возможный размер элемента управления — это 44 на 44 пикселя. Microsoft рекомендует делать сторону таких кнопок равной 34 пикселям. Допустимый в этой компании минимум — 26 пикселей.

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

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

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

6. Используйте нумерацию страниц для контента, у которого есть начало, середина и конец

Нумерация страниц может показаться устаревшим методом, но у нее есть несколько преимуществ.

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

7. Выбирайте визуальные объяснения, а не текстовые инструкции

Выражение «не нужно рассказывать, нужно показывать» часто приписывают Антону Чехову. Это литературный метод, который позволяет читателю проникнуться историей с помощью чувств и ощущений, а не описаний автора.

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

8. Давайте текстовое пояснение для иконок

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

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

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

9. По возможности используйте интерфейс устройства

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

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

10. Если задача займет неопределенное количество времени, ставьте вращающийся диск

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

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

Источник.

Иллюстрации: Дэнни Сапио