Mobile search ui/ux improvement

I find when I initiate a search in a mobile view I can become stuck due to the lack of an obvious cancel button to return me to my prior screen.

I can swipe back or use a browser back button; however, displaying a simple “cancel” button could be a worthwhile UX improvement.

3 лайка

Not sure I agree with this. Do you also feel stuck on a user page on mobile?

I think what feels inconsistent is that the other two buttons alongside the search one open pop-ups that can be dismissed by clicking on the button again.

Not sure I have a great suggestion as to how to resolve the inconsistency though…

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

Мы пытаемся это исправить, чтобы опыт поиска на мобильном был идентичен опыту на десктопе (всплывающее окно, которое можно закрыть).
Есть какие-нибудь идеи, как это настроить?

1 лайк

Мы избегали этого из-за серьёзных багов в Safari, которые делали невозможным использование position: fixed. Уверен, что @pmusaraj недавно сталкивался с этой проблемой. Не думаю, что у вас получится легко настроить это.

1 лайк

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

1 лайк

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

Привет, спасибо за вопрос!
Я записал немного UX с рабочего стола при вводе поиска и возвращении к контенту:

search-dropdown

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

search-fullpage

Я понял, что мне нужно вернуться на предыдущую страницу, увидев URL /search в строке адреса, но у меня ушло немного времени, чтобы разобраться в этом, и дизайнер UX был очень сбит с толку таким опытом.

4 лайка

Спасибо за записи экрана. Я понял, что вы имеете в виду: проблема в том, что неочевидно, что поиск переводит на отдельную страницу. Вероятно, мы можем что-то сделать, чтобы пользователю стало понятнее, что он перешел на отдельную страницу поиска.

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

2 лайка

Мне очень нравится паттерн использования полноэкранного режима на мобильных устройствах вместо модальных окон и выпадающих списков — он гораздо лучше использует пространство и избавляет от множества проблем со скроллом… Интересно, помогло бы добавление какой-нибудь клавиши X или кнопки «Назад»? Или, возможно, нажатие на :mag: должно возвращать вас на страницу до поиска?

Это всё ещё работает не очень хорошо! У нас есть множество обходных решений для проблем со скроллом в модальных окнах и выпадающих списках на iOS. Насколько мне известно, разработчики даже не считают многие из этих различий ошибками.

5 лайков