shoreline
shoreline copied to clipboard
vtex
Vertical tabs component with data
How can we help?
Estamos desenvolvendo um componente de funil + gráfico para uma dashboard que deve ser claramente identificável como clicável. Exploramos diversas opções de design e já realizamos testes de usabilidade. Após testes, um dos usuários mencionou que não estava intuitivo e os outros três demoraram a entender o clique (mas clicaram).
Acreditamos que isso pode ocorrer porque, ao abrir a interface, o primeiro gráfico já está aberto, o que pode dar a impressão de que o componente é estático e depende da curiosidade do usuário para clicar no resto. Quero abrir uma discussão para explorar novas opções de design que possam melhorar a clareza de que o componente é clicável. Busco sugestões para aumentar a visibilidade e a intuitividade desse elemento para todos os usuários.
Existe algum padrão de design ou exemplo que poderia ser aplicado aqui?
Agradeço qualquer insight ou sugestão!
What have you tried?
Algumas das alternativas já exploradas
Additional information
Figma com protótipo para testar
Sobre a implementação desse padrão, recomendo o uso de tabs. https://www.w3.org/WAI/ARIA/apg/patterns/tabs/.
Fizemos com tabs também porém ela exige que o funil seja separado do gráfico, gerando clique repetido pra ver cada etapa do funil da esquerda
Eu acho que a sugestão de Matheus era que por trás se usasse o padrão de Tabs do WAI-ARIA para implementar, mas não necessariamente o componente de Tabs do Shoreline. Entre os estudos que você compartilhou, essa daqui parece seguir uma linguagem visual parecida com o nosso componente de tabs atual, por tirar a saturação das tabs que não estão sendo visualizadas:
Queria deixar aqui na thread um exemplo que já está implementado no Admin, na página de Sales Performance:
Outro exemplo é um estudo que fiz para o produto de search:
Já tentou fazer algo parecido com o do sales performance @BeatrizAlbino ? Que eu acho que nessa solução é onde tá melhor resolvida a conexão da informação com o gráfico. Talvez até testar algo nessa linha mas na disposição que vc tá usando mesmo (vertical).
A do sales performance tem uma proposta que não envolve um funil, teria que separar os componentes e voltaria com a redundância de informação
Olá, achei que as soluções com as cores no cinza acaba parecendo que fica em estado de disabled e perde um pouco da visualização do funil. Decidi seguir com as cores no azul mesmo.