Pular para o conte√ļdo principal

Stepper

Vis√£o geral#

O componente stepper possibilita que um fluxo seja apresentado em um formato de passo a passo, indicando qual passo se encontra e exibindo apenas as informa√ß√Ķes necess√°rias para o mesmo.

Quando usar#

Utilize-o para dar visibilidade e status do sistema com previsibilidade do processo.

Anatomia#

O stepper é composto por um conjunto de steps. Cada step apresenta diferentes características para indicar o status do passo atual, bem como para os demais passos durante o fluxo, conforme imagem e descriçoes abaixo:

Imagem representando as quatro possibilidades de status do componente de stepper, exibido linearmente done, current, next e current respectivamente.
  1. Done: circulo com bordas e um ícone de check, seguido por uma linha continua em coloração escura;
  2. Current: circulo preenchido e um ícone edit (personalizável) em coloração da marca seguido por uma linha pontilhada em coloração neutra;
  3. Next: circulo com bordas e o n√ļmero do passo, seguido por uma linha pontilhada em colora√ß√£o neutra;
  4. Current (return): circulo preenchido com um ícone edit (personalizável) em coloração da marca seguido por uma linha pontilhada em coloração escura.

Observa√ß√Ķes:

  1. Ao retroceder um passo, as informa√ß√Ķes do passo atual devem ser mantidas.
  2. O √ļltimo passo n√£o √© seguido por uma linha, justamente por n√£o haver um pr√≥ximo step para ligar.

O componente prev√™ tamb√©m duas varia√ß√Ķes de orienta√ß√£o: vertical e horizontal. Em ambas, os elementos possuem as mesmas caracter√≠sticas especificadas anteriormente, mudando apenas o posicionamento dos elementos e espa√ßamentos.

Varia√ß√Ķes#

Horizontal#

Na variação horizontal os steps são alinhados lado a lado seguindo a linha na horizontal, com o label abaixo do circulo, conforme imagem à seguir:

Imagem representando o componente stepper na horizontal com quatro passos, sendo eles: 1¬ļ done, 2¬ļ current, 3¬ļ next e 4¬ļ next tamb√©m.
  1. Stepper
  2. Step
  3. Circle
  4. Line
  5. Label

Vertical#

Na variação vertical, os steps são alinhados um abaixo do outro seguindo a linha na vertical, com o label à direita do circulo, conforme imagem à seguir:

Imagem representando o componente stepper na vertical com quatro passos, sendo eles: 1¬ļ done, 2¬ļ current, 3¬ļ next e 4¬ļ next tamb√©m.
  1. Step
  2. Stepper

Comportamento#

Em qualquer varia√ß√£o, as valida√ß√Ķes dos passos devem ocorrer no pr√≥prio contexto de preenchimento do formul√°rio. Em caso de erro, o feedback deve acontecer no campo (para valida√ß√Ķes em tempo real), ou via toaster quando for um retorno do sistema.

Horizontal#

Tamanho: A largura do stepper na variação horizontal é variável, de acordo com a quantidade de steps e espaço disponível. Cada step ocupa uma parte, proporcinal à divisão da quantidade de steps.

Exemplo: 4 steps = 100%, 1 step ocupa 25%.

Label: O texto se mant√©m sempre em uma linha √ļnica, sem quebras. Como o label possui uma largura m√°xima (15em), ao atingir esse tamanho o texto √© truncado (inclui reticencias) e exibe-o por completo atrav√©s do componente tooltip ao colocar o cursor sobre o texto.

Imagem representando um stepper de 3 passos com o comportamento de exibição do texto truncado através do componente tooltip no segundo passo.

Vertical#

Tamanho: A altura do stepper na variação vertical também é variável, mas além da quantidade de steps, se baseia no tamanho do label.

Label: Por ter mais espaço disponível na vertical, o texto pode ser quebrado em mais linhas, porém com um limite de 100 caracteres. Ao atingir este limite, o texto é truncado (inclui reticencias) e também exibe-o por completo com o tooltip ao colocar o cursor sobre o texto.

Leitores de tela: devem ler o texto por completo, sem a necessidade de sinalizar que est√° truncado em ambas varia√ß√Ķes.

Boas pr√°ticas#

Foram estruturados os padr√Ķes de usabilidade para auxiliar na utiliza√ß√£o do componente e garantir uma boa experi√™ncia aos usu√°rios. Por isso, √© muito importante que ao utilizar este componente, as pessoas que o projetarem devem levar em considera√ß√£o os seguintes crit√©rios:

Fazer#

  • Utilizar a indica√ß√£o dos status de cada passo, conforme defini√ß√Ķes em anatomia.
  • Utilizar o componente quando a tarefa for linear e possuir de 3 a 7 etapas grandes para serem conclu√≠das;
  • Apresentar o componente em formul√°rios ou question√°rios de v√°rias p√°ginas que deve ser preenchido em uma ordem espec√≠fica;
  • Utilizar em processos complexos que se beneficiam por serem divididos em tarefas menores;
  • Permitir que o usu√°rio volte a uma etapa anterior para revisar o envio de seus dados;
    • Utilizar um bot√£o prim√°rio para avan√ßar e um bot√£o secund√°rio para retroceder as etapas, posicionados na parte inferior do conte√ļdo da p√°gina.

N√£o fazer#

  • Quando o fluxo de trabalho n√£o for linear;
  • Quando o fluxo de trabalho contiver menos de 3, ou mais de 7 etapas grandes para serem realizadas;
  • N√£o utilizar duas inst√Ęncias do componente em uma mesma p√°gina;
  • N√£o utilizar o componente incorporado no pr√≥prio componente.

Acessibilidade tratada no componente#

O componente stepper foi projetado para atender os requisitos das Diretrizes de Acessibilidade para Conte√ļdo Web (WCAG) 2.1. Algumas diretrizes de acessibilidade j√° s√£o tratadas no componente internamente e n√£o devem ser alteradas por quem utilizar. S√£o elas:

  • A arquitetura de informa√ß√£o deve ser constru√≠da de forma que fa√ßa sentido tanto para quem v√™, quanto para quem ouve o conte√ļdo (1.3.1: Info and Relationships (A));
  • Usar medidas relativas para possibilitar um zoom de at√© 200%, sem perda do conte√ļdo ou funcionalidade (1.4.4: Resize text (A)).

Leitores de tela:

As etapas não possuem interação, porém, ainda assim pessoas que utilizam leitores de tela devem ser informados sobre:

  • Status da etapa;
  • Identifica√ß√£o da etapa (texto do label);
  • Em qual step se encontra e quantos s√£o (Exemplo: "1 de 4").