Как я улучшила пользовательский опыт выбора временного слота: История редизайна
Недавно я переехала в новую квартиру (принимаю поздравления!), и одной из первых задач было подключение интернета. Чтобы это сделать, мне нужно было выбрать удобное время для визита мастера через сайт провайдера. Казалось бы, простая задача, но интерфейс, с которым я столкнулась, оказался настоящим UX-кошмаром, и я просто не могла не вмешаться.
Проблемы, с которыми я столкнулась:
- Отсутствие поясняющего текста:
В оригинальном дизайне не было чётких инструкций или заголовков, объясняющих, что нужно делать. Поля ввода выглядели неинформативно, и я не сразу поняла, какие данные нужно ввести и для чего они предназначены. Отключённая кнопка "Дальше":
После выбора временного слота кнопка "Дальше" оставалась неактивной, если пользователь не заполнил все данные. Это вызывало замешательство, так как система не объясняла, что именно пропущено и почему кнопка неактивна. Пользователю приходилось гадать и проверять, что он мог забыть.Неинформативные недоступные временные слоты:
В оригинальном дизайне недоступные временные слоты отображались как затенённые, что могло сбить с толку пользователя и не давало никакой информации о причинах их недоступности.
Улучшения, которые я внесла:
Добавление поясняющего текста и заголовков:
В новом дизайне я добавила заголовок "Выберите время визита мастера", чтобы объяснить пользователю, что нужно сделать. Под календарём появился текст "Подключение обычно занимает до 30 минут. Пожалуйста, планируйте своё время заранее, чтобы процесс прошёл гладко." Этот текст был разработан с учётом поведенческих паттернов пользователей и их потребности в планировании времени. Исследования показывают, что пользователи предпочитают заранее знать, сколько времени займёт процесс, чтобы лучше организовать своё расписание и избежать стресса. Чёткие и своевременные подсказки снижают когнитивную нагрузку и повышают удовлетворённость пользователей интерфейсом. (Nielsen Norman Group)Активная кнопка "Подтвердить" с поясняющим текстом:
В новом дизайне кнопка "Подтвердить" всегда активна. Если пользователь пытается перейти на следующий шаг, не заполнив обязательные поля, система отображает ошибку рядом с незаполненным полем. Например, если не введён номер телефона, появляется сообщение "Пожалуйста, введите ваш номер телефона", выделенное красным цветом. Это решение основано на исследованиях, которые показывают, что отключённые кнопки без объяснений вызывают у пользователей путаницу и фрустрацию. Активная кнопка с немедленным отображением ошибок позволяет пользователю быстро понять, что нужно исправить. (Outsource Services)Скрытие недоступных временных слотов:
Я решила полностью скрыть недоступные временные слоты, чтобы избежать визуального шума и сделать процесс выбора времени более интуитивным и простым. Это решение соответствует лучшим практикам UX, согласно которым минимизация ненужной информации на экране улучшает восприятие и ускоряет процесс принятия решений.Улучшение контраста и размера текста:
Я также увеличила контраст и размер текста, чтобы улучшить читаемость и доступность интерфейса для пользователей с различными уровнями зрения. Это соответствует стандартам WCAG 2.1 и обеспечивает удобство использования интерфейса для всех категорий пользователей.
Итог:
Эти изменения сделали интерфейс более понятным и удобным для использования. Теперь пользователи легко могут понять, что от них требуется, и завершить процесс выбора временного слота без затруднений. Скрытие недоступных слотов, активная кнопка "Подтвердить" и добавление поясняющих текстов сделали взаимодействие с интерфейсом более гладким и предсказуемым.
Этот опыт напомнил мне о том, насколько важны интуитивность и простота в пользовательских интерфейсах. Даже небольшие изменения, такие как добавление текста или улучшение видимости кнопок, могут значительно улучшить пользовательский опыт. Если вы работаете над подобными задачами, рекомендую пересмотреть текущие решения и подумать, как их можно улучшить, основываясь на проверенных UX-паттернах и исследованиях. Ведь даже самые простые улучшения могут существенно повысить удовлетворённость пользователей.
А зачем показывать пустые столбцы для ближайших дат, на которые уже нет свободных слотов? Также, кажется, что в этом интерфейсе многовато стрелочек влево-вправо: чёрные залитые стрелки у заголовка «2−7 сентября» и контурные слева и справа от шапки таблицы. Есть подозрение, что они делают одно и то же.