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 curtidas

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…

A designer de UX da minha equipe ficou em pânico quando experimentou a pesquisa no mobile.
Embora a versão desktop no mobile seja bem organizada, a mudança padrão da página no mobile é contra-intuitiva.

Estamos tentando quebrar isso para que a experiência de pesquisa no mobile seja idêntica à do desktop (uma janela pop-in que pode ser fechada).
Alguma ideia de como ajustar isso?

1 curtida

Evitamos isso devido a alguns bugs muito graves no Safari que o tornavam inviável por causa do position: fixed. Tenho quase certeza de que @pmusaraj refletiu sobre esse problema recentemente. Não acho que você terá uma tarefa fácil ajustando isso.

1 curtida

Ótimo saber o motivo da decisão.
Presumo que um bug anterior a 2016 no Safari já tenha sido corrigido.
Não faria sentido simplificar isso novamente para aplicar o comportamento da versão desktop em todos os casos?

1 curtida

Você pode descrever o que quer dizer com mais detalhes? Adoraria ver algumas capturas de tela ou uma gravação de tela do problema. Isso me ajudaria a descobrir se você está enfrentando problemas legítimos no núcleo ou se se trata de algo diferente.

Ei, obrigado por perguntar!
Fiz uma pequena gravação da experiência do usuário no desktop ao digitar uma busca e retornar ao conteúdo:

search-dropdown

E uma gravação da experiência atual no mobile, onde você não consegue fechar a busca e acessar o conteúdo novamente:

search-fullpage

Percebi que precisava voltar para a página anterior ao ver a URL /search na barra de endereços, mas levei um tempo para descobrir, e o designer de UX ficou bastante confuso com essa experiência.

4 curtidas

Obrigado pelos gravações de tela. Entendo o que você quer dizer: o problema é que não fica óbvio que a pesquisa leva a uma página separada. Provavelmente podemos fazer algo para deixar mais claro para o usuário que ele foi para uma página de pesquisa distinta.

Ou talvez possamos usar o mesmo widget do desktop, como você mencionou. Geralmente, gosto de manter a mesma interface entre desktop e mobile, mas não tenho certeza se este é um bom caso para isso.

2 curtidas

Adoro muito o padrão de usar uma página inteira no mobile para substituir modais/dropdowns, pois aproveita muito melhor o espaço e evita muitos problemas de rolagem… Será que adicionar algum tipo de x ou botão voltar ajudaria? E/ou talvez tocar no :mag: deveria te levar de volta à página anterior à busca?

Ainda não está muito bom! Temos muitos hacks para contornar problemas de rolagem no iOS com modais e dropdowns. Pelo que sei, eles nem consideram muitas dessas diferenças como bugs.

5 curtidas