Распространенные ошибки, которых следует избегать в веб-дизайне
Всплывающие окна
Всплывающие окна используются для отображения дополнительных действий или информации и довольно популярны для отображения подсказок верхнего уровня. Обычно существует три типа всплывающих окон: успешное или неудачное, подтверждение и регистрация.
Не перегружайте всплывающие окна
Часто я видел приложения, в которых всплывающие окна были завалены элементами и информацией - не делайте этого. Убедитесь, что ваши всплывающие окна предоставляют минимум информации и относятся к делу.
- Предоставьте сообщение ("Подтвердить изменения"), которое сообщает пользователям о предстоящих результатах их действий и кнопках, связанных с этими действиями (не должно быть больше чем 3 во всплывающем всплывающем окне).
Используйте правильный фон
Всплывающие окна лучше видны, если задан правильный фон. Вы можете легко это сделать, добавив несколько наложений к фону под ним. Вы можете использовать темный оттенок со значением непрозрачности 70%, чтобы все было просто и гладко.
Использование слегка прозрачного фона позволяет вашему пользователю различать различные контексты всего экрана, простыми словами ваши пользователи будут помнить положение всплывающего окна на экране.
- Вы также можете использовать полностью черный (# 000000) с 70% непрозрачности или темный оттенок цвета вашего приложения для более стабильного результата.
Кнопка X
Кнопка закрытия должна быть достаточно большой, чтобы пользователи не разочаровались, нажав ее, она должна иметь достаточный контраст и большую активную область. Хороший способ сделать это - просто создать X как кнопку с выбранным фоном. Это простой способ, который всегда работает сразу после установки.
- Интерактивная область всегда должна быть больше, чем сама X, и хорошее рекомендуемое значение для активной области составляет около 44x44 точек для мобильных устройств и 32x32 точек для настольных компьютеров.
- Не добавляйте маленькую кнопку с низкой контрастностью и небольшой интерактивной областью вокруг нее, которая может расстроить ваших пользователей, поскольку они должны быть очень точными для достижения желаемого действия. .
- Еще один отличный совет, который может заставить вас встать, - это использовать дополнительную кнопку закрытия во всплывающем окне, как показано ниже.
Примечание. Если вы используете всплывающие окна с формами регистрации, убедитесь, что вы не раздражаете пользователя автоматическими всплывающими окнами, поскольку пользователи не ожидают этих всплывающих окон и большинство из них инстинктивно закрывают окно. Это легко может привести к разочарованию пользователей.
Однако рекомендуется создать страницу формы регистрации без использования всплывающих окон.
Навигация
Важная часть пользовательского интерфейса, которая определяет, как пользователи взаимодействуют с вашим приложением, имеющим несколько экранных элементов. Небольшая проблема с навигацией может привести к массовому отказу пользователей, поскольку вы затрудняете пользователям использование приложения. Чтобы построить навигацию с хорошими деталями, вам нужно обратить внимание на три основных типа навигации и упростить задачу для всех.
- Видимый: всегда видимый на экране, это может быть набор вкладок, из которых выделены активные в данный момент.
- Скрытый: меню навигации, которое не отображается, пока не будет инициировано действие активации.
- Контекстные. Это активные ссылки или кнопки, которые позволяют перейти на дополнительную страницу с текущей.
Текстовые вкладки всегда лучше
Один из самых простых способов обеспечить навигацию в приложении - использовать текстовые вкладки, но, тем не менее, разработчики допускают некоторые серьезные ошибки, которые делают их продукты менее привлекательными с точки зрения навигации.
Всегда начинайте с шаблона, имеющего минимальную высоту 44p для мобильных устройств и 24–32p для настольных компьютеров. Вы должны убедиться, что ваши вкладки состоят из трех состояний (Нейтрально, Активно, Выбрано).
- Даже сами вкладки представляют собой всего лишь текст, ваша интерактивная область всегда должна быть достаточно большой и иметь достаточно места с каждой стороны от ссылок .
Используйте боковые панели только тогда, когда вам нужно
Боковую навигацию (боковые панели) следует рассматривать только для длинных списков вкладок, как в приложениях электронной коммерции. Этот шаблон очень удобен, если у вас много вкладок с вложенной структурой.
- При разработке таких боковых панелей вы легко можете попасть в ловушку, если поместите слишком много элементов без иерархии категорий. Избегайте использования плотно сложенного текста, так как сканирование и понимание для пользователей занимает гораздо больше времени, и из-за этой проблемы ваши пользователи могут легко щелкнуть неправильные вкладки.
Больше контента на plainenglish.io
