6 вещей, о которых забывают дизайнеры UI/UX
UI/UX-дизайнер — очень важная должность в команде разработчиков продукта. Они являются связующим звеном между клиентами и программистами, которые расшифровывают идеи клиентов, согласовывают их с бизнес-целями и превращают их в функции, взаимодействия и интерфейсы для продуктов. Они могут взять на себя работу на ранней стадии, общую стратегию или детальную работу, например, каким должен быть поток продукта, какие цветные кнопки должны быть и т. д. В дополнение к исследованиям и дизайну UI/UX Designer также выполняет анализ данных и работу по тестированию. для оптимизации продукта.
Как UI/UX-дизайнер, вы участвуете в процессе разработки продукта, начиная с первых шагов файла требований клиента и заканчивая полным пользовательским интерфейсом.
Характер работы заставляет вас сосредоточиться на решении основных вопросов проекта. Ваш пользовательский интерфейс делает клиентов счастливыми, потому что вы так хорошо решаете их бизнес-проблемы. Вот почему вы иногда забываете о других подкомпонентах пользовательского интерфейса. Без него ваш продукт по-прежнему будет работать нормально, но с точки зрения пользователя отсутствие этих компонентов значительно ухудшит его работу.
Став старшим дизайнером UI/UX, вы должны улучшить эти моменты и предоставить клиенту и команде разработчиков максимально полную версию пользовательского интерфейса.
Вот компоненты, о которых многие новые дизайнеры UI/UX забывают в процессе проектирования.
1. Вводный экран
Когда вы впервые открываете загруженное приложение, основными вводными экранами являются начальные экраны. Вводный экран представляет собой руководство, предназначенное для краткого ознакомления с приложением, его основными функциями и способами его использования.
Онбординговый экран должен быть оформлен в простом стиле, контент должен быть отфильтрован, а основные функции должны быть представлены в первую очередь. Вводные экраны, такие как статические страницы состояния, создаются для информирования и обучения пользователей. С точки зрения UX, бортовой экран избавляет пользователей от путаницы при начале использования приложения и разочарования от необходимости самостоятельно находить функциональные возможности приложения.
Цель использования бортового экрана
Пользователь уже установил приложение, и ему не нужно читать инструкцию по эксплуатации. Пользователь еще не знаком с пользовательским интерфейсом приложения и не готов узнать о нем. Приветствуйте пользователей и расскажите им о предстоящем опыте.
Помогите пользователям неявно или явно понять, как приложение можно использовать в их жизни. Побуждайте пользователей совершать действия, повышающие вовлеченность и удержание.
2. Скелетный загрузчик
Скелет — это просто предопределенный набор фреймов, который заменяет содержимое, которое вы хотите отобразить, в ожидании загрузки данных. Skeleton помогает улучшить UX и особенно полезен, если на вашей странице/приложении слишком много данных для загрузки.
Скелет предназначен для предварительного просмотра, который упрощает загрузку контента, чтобы уменьшить ожидания пользователей в отношении времени, необходимого для полной загрузки данных. Элементы должны иметь структуру, такую как аватары, карточки, диаграммы, списки, таблицы, текстовое содержимое, изображения и т. д.
Когда использовать скелетный загрузчик
- После загрузки контента и взаимодействия пользователя при перезагрузке страницы каркас не требуется.
- Не нужен скелет с контентом, который появляется сразу и не требует много времени для загрузки
- Не используйте загрузку спиннера и загрузку скелета одновременно.
- При проектировании следует использовать различные уровни серого для представления и загружать анимацию, чтобы пользователь знал, что они загружаются.
- Используйте фигуры, соответствующие содержимому, каждая фигура представляет содержимое для облегчения идентификации. Например, в аватаре используется круг, а в длинном тексте — прямоугольник.
3. Пустое состояние
Пустые состояния — это состояния, когда пользователь входит на страницу, но ему нечего отображать. Тогда вам нужна иллюстрация этой пустой страницы без данных, из которых вы можете предложить им действие. Например, на пустой странице со списком дел можно добавить действие «Создать задачу».
- Первое использование — Конечно, при первом использовании не будет отображаться никаких данных, таких как новая учетная запись Google Диска.
- Нет результатов/нет данных — возникает, когда нечего отображать. Это может произойти, если кто-то выполняет поиск, а запрос пуст или не имеет доступных данных для отображения (например, при фильтрации диапазона дат без данных).
4. ЗаставкаЗаставка
Экран-заставка — это вводный экран, который пользователи видят при запуске приложения или веб-сайта. Это шанс создать идентичность вашего бренда, и он удерживает пользователей занятыми, пока ваше приложение загружается в фоновом режиме. Этот экран может быть изображением, графикой, логотипом или анимацией, иногда в сочетании с индикатором выполнения. Экраны-заставки часто использовались, когда устройства были медленными, а Интернет был еще медленнее.
Проблема с мобильными приложениями в том, что вы не можете позволить себе долгое ожидание; чем дольше пользователю приходится ждать, тем больше вероятность того, что он откажется от приложения. Экран-заставка делает время ожидания менее болезненным для пользователя.
5. Страница ошибки 404
Когда пользователь попадает на страницу, которой больше не существует, введен неверный URL-адрес или ссылка ведет в тупик и т. д., сайт приведет вас на страницу 404. Когда их направляют на страницу с ошибкой, это прерывает их поток, что приводит к чувству разочарования, и они найдут путь назад. Поэтому вам нужно разработать страницы ошибок, иначе это приведет к тому, что пользователь в это время потеряет интерес к веб-сайту. Отказ в этих случаях является явным признаком того, что UX продукта не очень хорош.
Пользователь, покидающий сайт, является проблемой не только для UX, но и для SEO (404 страницы — один из факторов ранжирования Google).
6. Нет интернет-состояния
Устройство пользователя не всегда подключено к Интернету, а иногда подключение к Интернету медленное, если пользователь находится в самолете и внезапно теряет соединение с Wi-Fi. Затем время от времени пользовательский интерфейс должен отображать экран, чтобы сообщить им о проблеме с подключением, похожем на пустое состояние, ошибку, это проблема, которая нарушает работу пользователя.
Если в вашем приложении есть функции, доступные только при подключении пользователя, у вас должно быть уведомление пользователя о текущем состоянии подключения. Вы можете отобразить значок автономной булавки с текстовой меткой «Вы не в сети» в виде элемента всплывающего уведомления.
Резюме
Разработка цифрового продукта — сложная и многоэтапная задача, из-за которой дизайнеры иногда забывают о других неважных элементах экрана, необходимых для улучшения взаимодействия с пользователем.