SlideShare uma empresa Scribd logo
CASESCOLUNISTAS
Link para a contribuição de conteúdo ao
banco de dados do GUIA.
Apresentação
Navegação de três níveis para ilustrar
melhor o entendimento do GUIA em três
passos.
Botão grande posicionado propositalmente
na parte inferior direita da tela para melhor
visualização do usuário.
Ilustração para deixar o primeiro contato
mais amigável.
Texto de apresentação com breve
descrição explicando sobre o GUIA de
forma rápida e fácil.
Logo do GUIA.
Botão branco com drop shadow ajuda a ter
um destaque sem interferir com o botão
principal de pesquisa.
Apresentação
Opção de login se comportando como
botão terciário.
O drop shadow ajuda a deixar o botão mais
clean e esteticamente agradável, muito
utilizado no material de design.
No momento em que acontece o hover, as
logos ficam coloridas.
Para textos com caracteres maiores, a
classe do CSS muda e o tamanho do texto
abaixa para encaixar bem no leiaute.
Apresentação
A indicação do slide muda
automaticamente depois de um tempo.
Ao clicar neste item, o bloco central reduz a
opacidade para zero, revelando o conteúdo de
perguntas frequentes.
Apresentação
Apresentação
mobile
Seta para retornar ao início.
Apresentação interna
Accordion aberto com o ícone de menos.
Elementos geométricos se movendo junto com
a transição de telas.
Para textos com caracteres maiores, a
classe do CSS muda e o tamanho do texto
abaixa para encaixar bem no leiaute.
Apresentação interna
Título da página compondo o leiaute.
Elementos geométricos se movendo junto com
a transição de telas.
Apresentação
interna mobile
Máscara de opacidade para destacar a
modal no centro da tela.
Login
Explorando o gradiente para unificação do
leiaute, mantendo a modal clean.
Botão fora da caixa, buscando se
diferenciar do que é padrão.
Login variações
Login variações
Login mobile
Link para retornar. Isso faz com que o
usuário tenha facilidade em navegar pelo
GUIA, indo e voltando quando quiser.
E-mail
Identificação de navegação. Faz com que o
usuário saiba onde está no GUIA.
Avançar em BOLD traz destaque para que
o usuário possa dar continuidade ao GUIA.
Input com destaque, dando bastante foco
ao item que o usuário está preenchendo.
Label de pergunta em BOLD com
destaque e foco, com comunicação simples
e objetiva em cada step do GUIA.
Barra de progresso durante o GUIA.
Nome
A identificação é alterada a cada passo do
processo de preenchimento.
Perguntas informais quebram a
formalidade do formulário, deixando a
experiência mais amigável e empática.
Barra de progresso segue em avanço
durante todo o GUIA.
Senha
E-mail, nome e senha mobile
Atuação da empresa
A seleção menu lista é algo que já está no
hábito do usuário. Então, pela variação
enorme de estados e municípios,
mantemos o comportamento.
Atuação da empresa
Abre lista com scroll de todos os estados.
Quando um estado é clicado, o texto fica em
bold com um ícone de check.
Com isso, a caixa fecha e o estado fica
ativado.
Atuação da empresa
Com o estado ativado, é revelado o
município, com o mesmo comportamento
que é mostrado no campo de estado.
Atuação da empresa mobile
Onde deseja pesquisar?
Onde deseja pesquisar? Mobile
Atuação da empresa
Os botões terão comportamento de
preto com opacidade baixa para que,
visualmente, os tons do Background
fiquem mais escuros, dando destaque
ao texto branco.
Atuação da empresa
Quando o hover acontece, o botão fica
branco, com drop shadow e tooltip
mostrando o que aquele item
específico representa.
Atuação da empresa
Com ele ativado, um ícone de check é
revelado, mostrando que o item foi
selecionado.
Atuação da empresa mobile
Onde você atua?
Onde você atua? Hover
Onde você atua? Ativo
Onde você atua? Mobile
Funcionários
A interação muda neste momento.
O usuário poderá interagir puxando e
arrastando o círculo menor para chegar ao
seu objetivo de funcionários.
Importante fazer com que este campo se
torne editável.
O tooltip fica pulsando de baixo para cima
antes de o usuário interagir com o range.
Funcionários
O range muda de cor quando o círculo se
movimenta. Lembrando que a cor utilizada
é a que aparece na paleta principal.
O valor muda como se fosse um
caça-níquel.
Funcionários mobile
Faturamento
Mesmo comportamento do passo anterior,
porém precisa ter um movimento diferente
para não entediar o usuário.
Faturamento
O texto dentro do tooltip muda de acordo
com o movimento do mouse.
Faturamento mobile
O que sua empresa precisa?
O que sua empresa precisa? Hover
O que sua empresa precisa?
Caso não encontre o que deseja, o usuário
precisa ter a opção de retornar.
#IMPORTANTE
Assim que o usuário seleciona o item
anterior, ele é direcionado para essa lista de
subitens do item selecionado.
O que sua empresa precisa?
Assim que o hover acontece, o botão
muda de cor.
O que sua empresa precisa?
Assim que é ativado, o botão ganha
ícone de check.
O que sua empresa precisa? Ativado
O que sua empresa precisa? Mobile
Resumo
Assim que o mouse passa sobre cada
item, é necessário que um link de
editar esteja visível.
Ao concluir a consulta e revisar os dados, o
usuário poderá clicar no botão destacado
“Tudo ok”.
Resumo
Assim que o mouse passa sobre cada
item, é necessário que um link de
editar esteja visível.
Resumo
Resumo
Resumo mobile
Resultado
O usuário precisa de uma opção para
filtrar tudo o que precisa para simplificar
e direcionar o resultado da sua busca.
Menu de acesso rápido. Algo muito
utilizado pelo Twitter, Google Inbox etc.
Caso o usuário queira fazer nova pesquisa,
ele tem sempre à disposição o botão.
O cabeçalho é fixo. Quando o Scroll
acontece, o cabeçalho permanece fixo.
Resultado mobile
Resultado negativo + mobile
Detalhe do resultado
O usuário tem sempre um conteúdo
relacionado com o que ele está
pesquisando. Isso faz com que ele
permaneça por mais tempo no GUIA.
Detalhe do resultado mobile
Menu de acesso rápido
Neste menu, o usuário tem sempre ao
alcance seus dados, links favoritados, além
de poder enviar sugestão e solicitar ajuda.
Menu de acesso rápido mobile
Contato
Contato
Contato mobile
Nesta opção que damos na tela inicial, o
fluxo segue para quem vai ajudar com
novos conteúdos para serem cadastrados.
Instrumentos
Formulário de
instrumentos
+ mobile
Formulário de
instrumentos
+ mobile
Formulário de
instrumentos
+ mobile
Formulário de
instrumentos
+ mobile
Assim que o usuário concluir o formulário,
vai existir pré-visualização do box do
instrumento.
Resultado formulário
Cadastro encontrado
Caso o usuário queira adicionar novo link,
ele tem sempre à disposição o botão.
Resultado formulário mobile
ABDI :: Guia de Instrumentos

Mais conteúdo relacionado

Semelhante a ABDI :: Guia de Instrumentos

Guia de criação de layout de lojas EZ Commerce
Guia de criação de layout de lojas EZ CommerceGuia de criação de layout de lojas EZ Commerce
Guia de criação de layout de lojas EZ Commerce
Rafael Berto
 
Desenvolvendo apps para windows 8
Desenvolvendo apps para windows 8Desenvolvendo apps para windows 8
Desenvolvendo apps para windows 8
Ricardo Guerra Freitas
 
Ebook Lemon - 6 erros no design de dashboars
Ebook Lemon - 6 erros no design de dashboarsEbook Lemon - 6 erros no design de dashboars
Ebook Lemon - 6 erros no design de dashboars
Cassio Henrique. F. Ramos, CRISC
 
e-commerce/ Amazon - Novas Tecnologias e Inovações
e-commerce/ Amazon - Novas Tecnologias e Inovaçõese-commerce/ Amazon - Novas Tecnologias e Inovações
e-commerce/ Amazon - Novas Tecnologias e Inovações
Tahis Garrido
 
Design de temas para WooCommerce - Anyssa Ferreira
Design de temas para WooCommerce - Anyssa FerreiraDesign de temas para WooCommerce - Anyssa Ferreira
Design de temas para WooCommerce - Anyssa Ferreira
Anyssa Ferreira
 
Guia definitivo para dashboards perfeitos
Guia definitivo para dashboards perfeitosGuia definitivo para dashboards perfeitos
Guia definitivo para dashboards perfeitos
Karlla Costa
 
TDC2016POA | Trilha UX Design - Wow experience: como criar interfaces fáceis ...
TDC2016POA | Trilha UX Design - Wow experience: como criar interfaces fáceis ...TDC2016POA | Trilha UX Design - Wow experience: como criar interfaces fáceis ...
TDC2016POA | Trilha UX Design - Wow experience: como criar interfaces fáceis ...
tdc-globalcode
 
Tutorial de Data Studio
Tutorial de Data StudioTutorial de Data Studio
Tutorial de Data Studio
Ericson Mattoso
 
10 Templates de Call-to-action Customizáveis
10 Templates de Call-to-action Customizáveis10 Templates de Call-to-action Customizáveis
10 Templates de Call-to-action Customizáveis
Helton Bezerra
 
Facebook bots uma nova arma no relacionamento e atendimento ao consumidor
Facebook bots uma nova arma no relacionamento e atendimento ao consumidorFacebook bots uma nova arma no relacionamento e atendimento ao consumidor
Facebook bots uma nova arma no relacionamento e atendimento ao consumidor
Elife Brasil
 
Guidelines - Design de apps (Apple iOS e Google Material Design) 2019
Guidelines - Design de apps (Apple iOS e Google Material Design) 2019Guidelines - Design de apps (Apple iOS e Google Material Design) 2019
Guidelines - Design de apps (Apple iOS e Google Material Design) 2019
Rodrigo Freese Gonzatto
 
[GUTS-RS] Testar Interfaces com UX
[GUTS-RS] Testar Interfaces com UX[GUTS-RS] Testar Interfaces com UX
[GUTS-RS] Testar Interfaces com UX
GUTS-RS
 
Análise sobre o ERP MarketUp
Análise sobre o ERP MarketUpAnálise sobre o ERP MarketUp
Análise sobre o ERP MarketUp
MiguelWilbert
 
e-commerce/ Amazon - Novas Tecnologias e Inovações
e-commerce/ Amazon - Novas Tecnologias e Inovaçõese-commerce/ Amazon - Novas Tecnologias e Inovações
e-commerce/ Amazon - Novas Tecnologias e Inovações
Tahis Garrido
 
25 técnicas infalíveis para ter o melhor site mobile
25 técnicas infalíveis para ter o melhor site mobile25 técnicas infalíveis para ter o melhor site mobile
25 técnicas infalíveis para ter o melhor site mobile
Douglas Benjamim
 
25 técnicas do Google para um site Mobile.
25 técnicas do Google para um site Mobile. 25 técnicas do Google para um site Mobile.
25 técnicas do Google para um site Mobile.
José Henrique Westphalen
 
Como definir objetivos Google Analytics
Como definir objetivos Google AnalyticsComo definir objetivos Google Analytics
Como definir objetivos Google Analytics
DesignPT Agencia Digital
 
Desenvolvendo o produto
Desenvolvendo o produtoDesenvolvendo o produto
Desenvolvendo o produto
Laura Lopes
 
Cópia 2 de manual da plataforma
Cópia 2 de manual da plataformaCópia 2 de manual da plataforma
Cópia 2 de manual da plataforma
itatianechaveschaves
 
Cópia de manual da plataforma oficial - para clientes finais
Cópia de manual da plataforma   oficial - para clientes finaisCópia de manual da plataforma   oficial - para clientes finais
Cópia de manual da plataforma oficial - para clientes finais
SimoneBrito43
 

Semelhante a ABDI :: Guia de Instrumentos (20)

Guia de criação de layout de lojas EZ Commerce
Guia de criação de layout de lojas EZ CommerceGuia de criação de layout de lojas EZ Commerce
Guia de criação de layout de lojas EZ Commerce
 
Desenvolvendo apps para windows 8
Desenvolvendo apps para windows 8Desenvolvendo apps para windows 8
Desenvolvendo apps para windows 8
 
Ebook Lemon - 6 erros no design de dashboars
Ebook Lemon - 6 erros no design de dashboarsEbook Lemon - 6 erros no design de dashboars
Ebook Lemon - 6 erros no design de dashboars
 
e-commerce/ Amazon - Novas Tecnologias e Inovações
e-commerce/ Amazon - Novas Tecnologias e Inovaçõese-commerce/ Amazon - Novas Tecnologias e Inovações
e-commerce/ Amazon - Novas Tecnologias e Inovações
 
Design de temas para WooCommerce - Anyssa Ferreira
Design de temas para WooCommerce - Anyssa FerreiraDesign de temas para WooCommerce - Anyssa Ferreira
Design de temas para WooCommerce - Anyssa Ferreira
 
Guia definitivo para dashboards perfeitos
Guia definitivo para dashboards perfeitosGuia definitivo para dashboards perfeitos
Guia definitivo para dashboards perfeitos
 
TDC2016POA | Trilha UX Design - Wow experience: como criar interfaces fáceis ...
TDC2016POA | Trilha UX Design - Wow experience: como criar interfaces fáceis ...TDC2016POA | Trilha UX Design - Wow experience: como criar interfaces fáceis ...
TDC2016POA | Trilha UX Design - Wow experience: como criar interfaces fáceis ...
 
Tutorial de Data Studio
Tutorial de Data StudioTutorial de Data Studio
Tutorial de Data Studio
 
10 Templates de Call-to-action Customizáveis
10 Templates de Call-to-action Customizáveis10 Templates de Call-to-action Customizáveis
10 Templates de Call-to-action Customizáveis
 
Facebook bots uma nova arma no relacionamento e atendimento ao consumidor
Facebook bots uma nova arma no relacionamento e atendimento ao consumidorFacebook bots uma nova arma no relacionamento e atendimento ao consumidor
Facebook bots uma nova arma no relacionamento e atendimento ao consumidor
 
Guidelines - Design de apps (Apple iOS e Google Material Design) 2019
Guidelines - Design de apps (Apple iOS e Google Material Design) 2019Guidelines - Design de apps (Apple iOS e Google Material Design) 2019
Guidelines - Design de apps (Apple iOS e Google Material Design) 2019
 
[GUTS-RS] Testar Interfaces com UX
[GUTS-RS] Testar Interfaces com UX[GUTS-RS] Testar Interfaces com UX
[GUTS-RS] Testar Interfaces com UX
 
Análise sobre o ERP MarketUp
Análise sobre o ERP MarketUpAnálise sobre o ERP MarketUp
Análise sobre o ERP MarketUp
 
e-commerce/ Amazon - Novas Tecnologias e Inovações
e-commerce/ Amazon - Novas Tecnologias e Inovaçõese-commerce/ Amazon - Novas Tecnologias e Inovações
e-commerce/ Amazon - Novas Tecnologias e Inovações
 
25 técnicas infalíveis para ter o melhor site mobile
25 técnicas infalíveis para ter o melhor site mobile25 técnicas infalíveis para ter o melhor site mobile
25 técnicas infalíveis para ter o melhor site mobile
 
25 técnicas do Google para um site Mobile.
25 técnicas do Google para um site Mobile. 25 técnicas do Google para um site Mobile.
25 técnicas do Google para um site Mobile.
 
Como definir objetivos Google Analytics
Como definir objetivos Google AnalyticsComo definir objetivos Google Analytics
Como definir objetivos Google Analytics
 
Desenvolvendo o produto
Desenvolvendo o produtoDesenvolvendo o produto
Desenvolvendo o produto
 
Cópia 2 de manual da plataforma
Cópia 2 de manual da plataformaCópia 2 de manual da plataforma
Cópia 2 de manual da plataforma
 
Cópia de manual da plataforma oficial - para clientes finais
Cópia de manual da plataforma   oficial - para clientes finaisCópia de manual da plataforma   oficial - para clientes finais
Cópia de manual da plataforma oficial - para clientes finais
 

Mais de wavezagencia

Arena Jovem :: Site Institucional
Arena Jovem :: Site InstitucionalArena Jovem :: Site Institucional
Arena Jovem :: Site Institucional
wavezagencia
 
ABDI :: Portal ABDI temático Campus Party
ABDI :: Portal ABDI temático Campus PartyABDI :: Portal ABDI temático Campus Party
ABDI :: Portal ABDI temático Campus Party
wavezagencia
 
ABDI :: #ABDINACAMPUS
ABDI :: #ABDINACAMPUSABDI :: #ABDINACAMPUS
ABDI :: #ABDINACAMPUS
wavezagencia
 
ABDI :: Capacete inteligente
ABDI :: Capacete inteligenteABDI :: Capacete inteligente
ABDI :: Capacete inteligente
wavezagencia
 
ABDI :: Startup Indústria
ABDI :: Startup IndústriaABDI :: Startup Indústria
ABDI :: Startup Indústria
wavezagencia
 
ABDI :: 2˚ Fórum Startup Indústria
ABDI :: 2˚ Fórum Startup IndústriaABDI :: 2˚ Fórum Startup Indústria
ABDI :: 2˚ Fórum Startup Indústria
wavezagencia
 
ABDI :: ABDI entrou no jogo
ABDI :: ABDI entrou no jogoABDI :: ABDI entrou no jogo
ABDI :: ABDI entrou no jogo
wavezagencia
 
Bsbeer :: Site Institucional
Bsbeer :: Site InstitucionalBsbeer :: Site Institucional
Bsbeer :: Site Institucional
wavezagencia
 
ABDI :: Industria 4.0
ABDI :: Industria 4.0ABDI :: Industria 4.0
ABDI :: Industria 4.0
wavezagencia
 
ABDI :: Portal Institucional
ABDI :: Portal InstitucionalABDI :: Portal Institucional
ABDI :: Portal Institucional
wavezagencia
 
Eliá Spa :: Dia das mães :: Planejamento
Eliá Spa :: Dia das mães :: PlanejamentoEliá Spa :: Dia das mães :: Planejamento
Eliá Spa :: Dia das mães :: Planejamento
wavezagencia
 
Eliá Spa :: Dia das mães :: Linha criativa
Eliá Spa :: Dia das mães :: Linha criativaEliá Spa :: Dia das mães :: Linha criativa
Eliá Spa :: Dia das mães :: Linha criativa
wavezagencia
 
MTur :: Game Interativo
MTur :: Game InterativoMTur :: Game Interativo
MTur :: Game Interativo
wavezagencia
 
Lamus Festival :: Stories Hero
Lamus Festival :: Stories HeroLamus Festival :: Stories Hero
Lamus Festival :: Stories Hero
wavezagencia
 
Granola :: Branding
Granola :: BrandingGranola :: Branding
Granola :: Branding
wavezagencia
 
ABDI :: Ginga é a nossa tecnologia
ABDI :: Ginga é a nossa tecnologiaABDI :: Ginga é a nossa tecnologia
ABDI :: Ginga é a nossa tecnologia
wavezagencia
 
ABDI :: Bim :: Landing Page
ABDI :: Bim :: Landing PageABDI :: Bim :: Landing Page
ABDI :: Bim :: Landing Page
wavezagencia
 
ABDI :: Personagem
ABDI :: PersonagemABDI :: Personagem
ABDI :: Personagem
wavezagencia
 

Mais de wavezagencia (18)

Arena Jovem :: Site Institucional
Arena Jovem :: Site InstitucionalArena Jovem :: Site Institucional
Arena Jovem :: Site Institucional
 
ABDI :: Portal ABDI temático Campus Party
ABDI :: Portal ABDI temático Campus PartyABDI :: Portal ABDI temático Campus Party
ABDI :: Portal ABDI temático Campus Party
 
ABDI :: #ABDINACAMPUS
ABDI :: #ABDINACAMPUSABDI :: #ABDINACAMPUS
ABDI :: #ABDINACAMPUS
 
ABDI :: Capacete inteligente
ABDI :: Capacete inteligenteABDI :: Capacete inteligente
ABDI :: Capacete inteligente
 
ABDI :: Startup Indústria
ABDI :: Startup IndústriaABDI :: Startup Indústria
ABDI :: Startup Indústria
 
ABDI :: 2˚ Fórum Startup Indústria
ABDI :: 2˚ Fórum Startup IndústriaABDI :: 2˚ Fórum Startup Indústria
ABDI :: 2˚ Fórum Startup Indústria
 
ABDI :: ABDI entrou no jogo
ABDI :: ABDI entrou no jogoABDI :: ABDI entrou no jogo
ABDI :: ABDI entrou no jogo
 
Bsbeer :: Site Institucional
Bsbeer :: Site InstitucionalBsbeer :: Site Institucional
Bsbeer :: Site Institucional
 
ABDI :: Industria 4.0
ABDI :: Industria 4.0ABDI :: Industria 4.0
ABDI :: Industria 4.0
 
ABDI :: Portal Institucional
ABDI :: Portal InstitucionalABDI :: Portal Institucional
ABDI :: Portal Institucional
 
Eliá Spa :: Dia das mães :: Planejamento
Eliá Spa :: Dia das mães :: PlanejamentoEliá Spa :: Dia das mães :: Planejamento
Eliá Spa :: Dia das mães :: Planejamento
 
Eliá Spa :: Dia das mães :: Linha criativa
Eliá Spa :: Dia das mães :: Linha criativaEliá Spa :: Dia das mães :: Linha criativa
Eliá Spa :: Dia das mães :: Linha criativa
 
MTur :: Game Interativo
MTur :: Game InterativoMTur :: Game Interativo
MTur :: Game Interativo
 
Lamus Festival :: Stories Hero
Lamus Festival :: Stories HeroLamus Festival :: Stories Hero
Lamus Festival :: Stories Hero
 
Granola :: Branding
Granola :: BrandingGranola :: Branding
Granola :: Branding
 
ABDI :: Ginga é a nossa tecnologia
ABDI :: Ginga é a nossa tecnologiaABDI :: Ginga é a nossa tecnologia
ABDI :: Ginga é a nossa tecnologia
 
ABDI :: Bim :: Landing Page
ABDI :: Bim :: Landing PageABDI :: Bim :: Landing Page
ABDI :: Bim :: Landing Page
 
ABDI :: Personagem
ABDI :: PersonagemABDI :: Personagem
ABDI :: Personagem
 

ABDI :: Guia de Instrumentos

  • 2. Link para a contribuição de conteúdo ao banco de dados do GUIA. Apresentação Navegação de três níveis para ilustrar melhor o entendimento do GUIA em três passos. Botão grande posicionado propositalmente na parte inferior direita da tela para melhor visualização do usuário. Ilustração para deixar o primeiro contato mais amigável. Texto de apresentação com breve descrição explicando sobre o GUIA de forma rápida e fácil. Logo do GUIA.
  • 3. Botão branco com drop shadow ajuda a ter um destaque sem interferir com o botão principal de pesquisa. Apresentação Opção de login se comportando como botão terciário. O drop shadow ajuda a deixar o botão mais clean e esteticamente agradável, muito utilizado no material de design. No momento em que acontece o hover, as logos ficam coloridas.
  • 4. Para textos com caracteres maiores, a classe do CSS muda e o tamanho do texto abaixa para encaixar bem no leiaute. Apresentação A indicação do slide muda automaticamente depois de um tempo. Ao clicar neste item, o bloco central reduz a opacidade para zero, revelando o conteúdo de perguntas frequentes.
  • 7. Seta para retornar ao início. Apresentação interna Accordion aberto com o ícone de menos. Elementos geométricos se movendo junto com a transição de telas.
  • 8. Para textos com caracteres maiores, a classe do CSS muda e o tamanho do texto abaixa para encaixar bem no leiaute. Apresentação interna Título da página compondo o leiaute. Elementos geométricos se movendo junto com a transição de telas.
  • 10. Máscara de opacidade para destacar a modal no centro da tela. Login Explorando o gradiente para unificação do leiaute, mantendo a modal clean. Botão fora da caixa, buscando se diferenciar do que é padrão.
  • 14. Link para retornar. Isso faz com que o usuário tenha facilidade em navegar pelo GUIA, indo e voltando quando quiser. E-mail Identificação de navegação. Faz com que o usuário saiba onde está no GUIA. Avançar em BOLD traz destaque para que o usuário possa dar continuidade ao GUIA. Input com destaque, dando bastante foco ao item que o usuário está preenchendo. Label de pergunta em BOLD com destaque e foco, com comunicação simples e objetiva em cada step do GUIA. Barra de progresso durante o GUIA.
  • 15. Nome A identificação é alterada a cada passo do processo de preenchimento. Perguntas informais quebram a formalidade do formulário, deixando a experiência mais amigável e empática. Barra de progresso segue em avanço durante todo o GUIA.
  • 16. Senha
  • 17. E-mail, nome e senha mobile
  • 18. Atuação da empresa A seleção menu lista é algo que já está no hábito do usuário. Então, pela variação enorme de estados e municípios, mantemos o comportamento.
  • 19. Atuação da empresa Abre lista com scroll de todos os estados. Quando um estado é clicado, o texto fica em bold com um ícone de check. Com isso, a caixa fecha e o estado fica ativado.
  • 20. Atuação da empresa Com o estado ativado, é revelado o município, com o mesmo comportamento que é mostrado no campo de estado.
  • 24. Atuação da empresa Os botões terão comportamento de preto com opacidade baixa para que, visualmente, os tons do Background fiquem mais escuros, dando destaque ao texto branco.
  • 25. Atuação da empresa Quando o hover acontece, o botão fica branco, com drop shadow e tooltip mostrando o que aquele item específico representa.
  • 26. Atuação da empresa Com ele ativado, um ícone de check é revelado, mostrando que o item foi selecionado.
  • 32. Funcionários A interação muda neste momento. O usuário poderá interagir puxando e arrastando o círculo menor para chegar ao seu objetivo de funcionários. Importante fazer com que este campo se torne editável. O tooltip fica pulsando de baixo para cima antes de o usuário interagir com o range.
  • 33. Funcionários O range muda de cor quando o círculo se movimenta. Lembrando que a cor utilizada é a que aparece na paleta principal. O valor muda como se fosse um caça-níquel.
  • 35. Faturamento Mesmo comportamento do passo anterior, porém precisa ter um movimento diferente para não entediar o usuário.
  • 36. Faturamento O texto dentro do tooltip muda de acordo com o movimento do mouse.
  • 38. O que sua empresa precisa?
  • 39. O que sua empresa precisa? Hover
  • 40. O que sua empresa precisa? Caso não encontre o que deseja, o usuário precisa ter a opção de retornar. #IMPORTANTE Assim que o usuário seleciona o item anterior, ele é direcionado para essa lista de subitens do item selecionado.
  • 41. O que sua empresa precisa? Assim que o hover acontece, o botão muda de cor.
  • 42. O que sua empresa precisa? Assim que é ativado, o botão ganha ícone de check.
  • 43. O que sua empresa precisa? Ativado
  • 44. O que sua empresa precisa? Mobile
  • 45. Resumo Assim que o mouse passa sobre cada item, é necessário que um link de editar esteja visível. Ao concluir a consulta e revisar os dados, o usuário poderá clicar no botão destacado “Tudo ok”.
  • 46. Resumo Assim que o mouse passa sobre cada item, é necessário que um link de editar esteja visível.
  • 50. Resultado O usuário precisa de uma opção para filtrar tudo o que precisa para simplificar e direcionar o resultado da sua busca. Menu de acesso rápido. Algo muito utilizado pelo Twitter, Google Inbox etc. Caso o usuário queira fazer nova pesquisa, ele tem sempre à disposição o botão. O cabeçalho é fixo. Quando o Scroll acontece, o cabeçalho permanece fixo.
  • 53. Detalhe do resultado O usuário tem sempre um conteúdo relacionado com o que ele está pesquisando. Isso faz com que ele permaneça por mais tempo no GUIA.
  • 55. Menu de acesso rápido Neste menu, o usuário tem sempre ao alcance seus dados, links favoritados, além de poder enviar sugestão e solicitar ajuda.
  • 56. Menu de acesso rápido mobile
  • 60. Nesta opção que damos na tela inicial, o fluxo segue para quem vai ajudar com novos conteúdos para serem cadastrados. Instrumentos
  • 65. Assim que o usuário concluir o formulário, vai existir pré-visualização do box do instrumento. Resultado formulário
  • 66. Cadastro encontrado Caso o usuário queira adicionar novo link, ele tem sempre à disposição o botão.

Notas do Editor

  1. Pororoca - o choque entre comunicações
  2. Adaptar essa lâmina de acordo com a empresa que estiver apresentando o relatório. (Grupo Fields360 ou Fields Sports, etc)