Interaction Design / UX / Visual DesignJosé Erick Rio de Janeiro, 14 de abril de 2015

Arquitetura e Design nova loja MILONRio de Janeiro, 15 de dezembro de 2014

Filtros de Produtos – Projeto C&ARio de Janeiro, 23 de dezembro de 2014

Ao abrir a página o Menu de Filtros virá aberto sem nenhum filtro aplicado.

O botão de “limpar filtros” aparece em modo DESABILITADO.

Ao rolar a página o container é fechado automaticamente e a barra de filtro volta a

sua configuração normal.

Enquanto o usuário não utilizar nenhum filtro o botão permanece

DESABILITADO.

Ao passar o mouse na barra ela indica interação no mouseover do botão.

A barra é preenchida pela cor do botão esquerdo.

A seta vermelha indica a seleção do botão/barra de filtros

Animação GIF Exemplo interação

Clicando na barra, o filtro é aberto novamente e o usuário pode filtrar com

as opções indicadas.

Qualquer alteração de filtro, o botão de “limpar filtro” entra em modo

HABILITADO.

Os produtos são filtrados automaticamente e a parcial é indicada

logo abaixo.

Rolando a página ou clicando na barra novamente, ela será fechada com as

alterações feita pelo usuário.

Clicando em “LIMPAR FILTROS”, a página é atualizada sem os filtros e o botão volta ao modo DESABILITADO.

Planejamento UX – Branding SCHUMANNRio de Janeiro, 10 de dezembro de 2014

Obrigado!