O documento apresenta os resultados de um processo de cardsorting realizado para analisar a estrutura do site do Detran-RJ. Foram identificados os principais menus do site e realizados quatro cardsortings individuais para propor novas categorias para a organização da informação.
1. ARQUITETURA DE INFORMAÇÃO
Detran/RJ
Adriana Maccacchero
Diana Amado
Eduardo Azevedo
Paulo Sabino
Viviane Mesquita
Professores
Luiz Agner
Cinthia Ruiz
Arquitetura de Informação
Detran-RJ
Grupo
2. ARQUITETURA DE INFORMAÇÃO
Detran/RJ
Avaliar a usabilidade do site do Detran-RJ,
por meio da técnica de cardsorting, realizar
o benchmarking com instituções semelhantes
e propor uma nova interface mais adequada
às necessidades dos usuários.
Proposta do Projeto
3. ARQUITETURA DE INFORMAÇÃO
Detran/RJ
O que é o Detran-RJ
Departamento Estadual de Trânsito
(Detran) responsável pela:
● fiscalização e trânsito de veículos
terrestres;
● formação e fiscalização de
condutores;
● avaliação da capacidade física,
mental e psicológica dos candidatos à
obtenção da Carteira Nacional de
Habilitação (CNH).
www.detran.rj.gov.br
4. ARQUITETURA DE INFORMAÇÃO
Detran/RJ
Quantidade excessiva de informações, mal distribuídas,
trazendo dificuldades para o usuário atingir seus objetivos.
Alguns menus são muito extensos, com nomenclaturas
muito específicas e de difícil entendimento.
Peça a ser criada:
Redesign do site atual
Principais problemas no site atual
5. ARQUITETURA DE INFORMAÇÃO
Detran/RJ
Público alvo
Homens e mulheres, acima de 18 anos,
residentes do estado do Rio de Janeiro,
com acesso a internet, interessados em
emissão ou renovação de habilitação,
emissão de identificação civil, consulta
e agendamentos referentes a veículos,
multas e infrações.
Pessoas com deficiência visual/auditiva
que utilizam os serviços de
agendamento e consultas.
Regiões geográficas a serem
cobertas (estados, regiões, países,
etc.)
Apenas o Estado do Rio de Janeiro.
6. ARQUITETURA DE INFORMAÇÃO
Detran/RJ
Imagem a ser transmitida
Moderno, acessível, objetivo, limpo e de fácil
entendimento.
Obrigatoriedade
Utilizar o azul como cor predominante, seguindo o
padrão de sites do governo do Estado do Rio de
Janeiro.
A tipografia deve ser sem serifa, para beneficiar a
leitura de conteúdos muito extensos.
Briefing
Quantas e quais páginas internas
Seguir o mapa do site como referência,
redefinindo a organização e nomenclaturas.
Páginas especiais
Cadastros e agendamentos online, em
sincronia com os serviços realizados pelo
telefone.
7. ARQUITETURA DE INFORMAÇÃO
Detran/RJ Benchmarking
O benchmarking foi realizado em sites do Detran de
outros estados e de instituições semelhantes em outros
países, como Estados Unidos e Canadá, que prestam os
mesmos tipos de serviço.
Referências
Detran-SP, Detran-MG, ICBC Driver Licensing (Canadá) e
NY DMV (Estados Unidos).
8. ARQUITETURA DE INFORMAÇÃO
Detran/RJ Benchmarking
Site do Detran São Paulo
Cadastro com
senha no site
Busca geral
no site por
campo aberto
Uso de
ícones de
fácil
associação
ao assunto
9. ARQUITETURA DE INFORMAÇÃO
Detran/RJ
Site do Detran Minas Gerais
Controles de
acessibilidade
Links de rápido
acesso com
ícones e cores
relativas
Consulta rápida
Busca geral no
site
Sinalização das
principais
categorias por cor
Benchmarking
11. ARQUITETURA DE INFORMAÇÃO
Detran/RJ
Sinalização
da área que foi
selecionada
Destaque/
Acesso
rápido para
os mais
procurados
da seção
Exibição de
todas as
categorias da
seção com
visualização
dos principais
acessos
Ícone para
sinalização
da categoria
Benchmarking
Site do Detran Minas Gerais
12. ARQUITETURA DE INFORMAÇÃO
Detran/RJ
Sinalização
das principais
categorias
por cor
Busca geral
no site por
campo aberto
ICBC Driver Licensing (Canadá)
Benchmarking
Visual clean
que facilita a
identificação
do conteúdo
disponível
http://www.icbc.com/
13. ARQUITETURA DE INFORMAÇÃO
Detran/RJ
Uso de ícones
de fácil
associação ao
assunto
Busca geral
no site por
campo aberto
Benchmarking
ICBC Driver Licensing (Canadá)
14. ARQUITETURA DE INFORMAÇÃO
Detran/RJ
New York
State DMV
(Department
of Motor
Vehicles)
Atendimento por
telefone com seleção
de Idioma
Sinalização das
principais categorias
por cor para pessoa
física e para pessoa
jurídica
Cadastro com
senha no site
Link de acesso
aos sites dos
outros Estados
Benchmarking
15. ARQUITETURA DE INFORMAÇÃO
Detran/RJ
New York
State DMV
(Department
of Motor
Vehicles)
Ao entrar, é aberto um
pop up para que o
usuário responda
como teve
conhecimento do site
Benchmarking
16. ARQUITETURA DE INFORMAÇÃO
Detran/RJ
● Acesso rápido para acompanhamento e emissão de documentos;
● Acesso rápido aos serviços através de ícones;
● Atendimento por telefone com seleção de idioma;
● Busca geral no site por campo aberto com sugestao automática;
● Cadastramento através do CPF ou do CNPJ com senha no site para acesso à informações particulares;
● Controle de acessibilidade;
● Consulta rápida de processo administrativo, pontuação do CNH e situacao do veículo;
● Consulta rápida separada por categoria;
● Destaque e acesso rápido para os itens mais procurados da seção;
● Disponibilização de site responsivo;
● Exibição de todas as categorias da seção com visualização dos principais acessos;
● Ícone para sinalização de categoria;
● Links de acesso rápido com ícones e cores relativas aos assuntos;
● Link de acesso aos sites do Detran de outros estados;
● Opção para realização de download do aplicativo do site para smartphones;
● Principais ações com link direto da página principal;
● Seleção de Idiomas;
● Sinalização das principais categorias por cor;
● Sinalização da área que foi selecionada;
● Uso de ícones de fácil associação assunto.
Principais funcionalidades identificadas
Benchmarking
17. ARQUITETURA DE INFORMAÇÃO
Detran/RJ
Devido à quantidade de informações contidas no site, para análise do
cardsorting, foram escolhidos os quatro menus principais:
Cardsorting
Veículo
Multas
Habilitação
Identificação civil
18. ARQUITETURA DE INFORMAÇÃO
Detran/RJ Inventário
1. Agendamento (Licenciamento anual; 1ª licença; Licenciamento sem vistoria; Transferência de propriedade; Troca
de município; Transferência de jurisdição; Alteração de características em geral; 2ª via de documentos; Baixa de
gravame comercial; Baixa de veículo; Baixa de Caminhão; Retificação de dados; Cancelamento de certidão;
Consulta de agendamento; Cancelar agendamento)
2. Serviços (relacionados ao veículo como licenciamento e certidões)
3. Calendário (IPVA; Vistoria)
4. Detran e você (canal que envia avisos por e-mail)
5. Vistoria (motocicleta; veículo de carga; carros de passeio)
6. Perda, roubo ou furto de veículo
7. IPVA (Orientações; Consulta Bradesco; Dúvidas)
8. Compra e venda (Informações sobre como comprar e vender veículos)
9. Seguro DPVAT (Passo a passo de como receber)
10. Veículos apreendidos (informações sobre veículos apreendidos)
11. Veículos blindados (Passo a passo para regularização)
12. Leilões (de veículos – editais e dúvidas frequentes)
13. Estatísticas (relacionadas ao veículo, infrações e frota)
14. Formulários (relacionadas ao veículo – mudança de endereço, venda, vistoria)
Menu Veículo
19. ARQUITETURA DE INFORMAÇÃO
Detran/RJ
1. Infrações
2. Consultas (sobre multas – pontuação, veículos e outros estados)
3. Como pagar (multas)
4. Pagamentos (link para o Bradesco)
5. Comissão Cidadã (analisa e opina sobre processos de acidentes de trânsito com
vítimas graves e/ou fatais)
6. Suspensão do Direito de dirigir (regras de pontuação)
7. Defesa prévia/recursos (Abertura de processos, como e onde recorrer)
8. Convênios (Órgãos e municípios)
9. Formulários (de multas e requerimentos)
10. Dúvidas (frequentes sobre multas)
Menu Multas
Inventário
20. ARQUITETURA DE INFORMAÇÃO
Detran/RJ
1. Agendamentos (1ª habilitação; Renovação da habilitação; Alteração de dados; Prova de atualização;
Atividade remunerada;)
2. Serviços (1ª habilitação; Renovação da habilitação; Alteração de dados; Prova de atualização; Atividade
remunerada;)
3. Consultas (Pontos da carteira; validade; relação de clínicas; Ressarcimento do Duda; Listas de postos;
Postos com prova eletrônica)
4. Exames necessários à habilitação (lista dos exames necessários)
5. Exames práticos de direção (Consulta e manual de exame prático)
6. Autoescola – CFCSs (Consultas, cursos, abertura de autoescola)
7. CFC – Detran/RJ (Cursos e certificados)
8. Detran e você (canal que envia avisos por e-mail)
9. Simulado online (prova)
10. Condutor surdo
11. Suspensão do direito de dirigir (regras de suspensão)
12. Curso de reciclagem – CRCI
13. Formulários (Requerimentos de devolução de CNH; Devolução de taxas; Declaração de residência)
14. Dúvidas (dúvidas frequentes em relação à habilitação)
Menu Habilitação
Inventário
21. ARQUITETURA DE INFORMAÇÃO
Detran/RJ
Menu Identificação civil
1. Agendamento (carteira de identidade)
2. Serviços (1ª/2ª via de carteira de identidade; Renovação da carteira; Correção de dados;
Comunicação extravio, roubo ou furto; Devolução de carteiras perdidas)
3. Consultas (extravio, roubo ou furto; carteiras perdidas; certidões de
nascimento/casamento; status do pedido; lista de postos; cadastro de cartórios; atestados
de antecedentes)
4. Detran e você
5. Formulários (Declaração de extravio, roubo ou furto; Devolução de taxas; Declaração de
residência; Requerimento geral)
6. Dúvidas (dúvidas frequentes sobre identificação civil)
Inventário
39. ARQUITETURA DE INFORMAÇÃO
Detran/RJ
Planilha Donna Spencer
Os dados obtidos no Cardsorting foram inseridos na Planilha de Donna Senpcer para escolha
das categorias e da taxonomia final.
Cardsorting
41. ARQUITETURA DE INFORMAÇÃO
Detran/RJ
O que você está procurando?
Veículo Habilitação Infração
Meu Detran
INSTITUCIONAL I IDENTIFICAÇÃO CIVIL I EDUCAÇÃO
Logo
Detran
RJ
Informação Pública | Rio Poupa Tempo na Web
Logo
Prefeitura
RJ
CONSULTA RÁPIDA ÚLTIMAS NOTÍCIAS
AGENDAMENTO
ONLINE
Acesse agora >
Digite a placa
Situação do Veículo
Digite o número da CHN
Pontuação da CHN
Digite o número da CHN
Processo Administrativo
30-10-2014 Teleatendimento do
DETRAN entra em manutenção, mas
agendamentos podem ser…
29-10-2014 DETRAN adota medidas
para o cumprimento da Lei 6.897/14
29-10-2014 DETRAN leva serviço de
vistoria itinerante a 49 municípios do
interior em…
24-10-2014 Vistoria itinerante do
DETRAN visitará 13 municípios na
próxima semana
Dúvidas
Frequentes
Sketch Inicial
42. ARQUITETURA DE INFORMAÇÃO
Detran/RJ
O que você está
procurando?
Veículo Habilitação Infração
Meu Detran
INSTITUCIONAL I IDENTIFICAÇÃO CIVIL I EDUCAÇÃO
Informação Pública | Rio Poupa Tempo na Web
Logo
Prefeitura
RJ
CONSULTA RÁPIDA ÚLTIMAS NOTÍCIAS
AGENDAMENTO
ONLINE
Acesse agora >
Digite a placa
Situação do Veículo
Digite o número da CHN
Pontuação da CHN
Digite o número da CHN
Processo Administrativo
30-10-2014 Teleatendimento do DETRAN
entra em manutenção, mas agendamentos
podem ser…
29-10-2014 DETRAN adota medidas para
o cumprimento da Lei 6.897/14
29-10-2014 DETRAN leva serviço de
vistoria itinerante a 49 municípios do
interior em…
24-10-2014 Vistoria itinerante do DETRAN
Dúvidas
Frequentes
Ícone da
Categoria
Ícones de
Acessibilidade
Sinalização por
cores diferentes
para cada categoria
principal
Logo
Detran
RJ
Fotos ilustrativas
(mudam com o
recarregamento
da página)
Sketch Inicial
43. ARQUITETURA DE INFORMAÇÃO
Detran/RJ
O que você está
procurando?
Veículo Habilitação Infração
Meu Detran
INSTITUCIONAL I IDENTIFICAÇÃO CIVIL I EDUCAÇÃO
Informação Pública | Rio Poupa Tempo na Web
CONSULTA RÁPIDA ÚLTIMAS NOTÍCIAS
AGENDAMENTO
ONLINE
Acesse agora >
Digite a placa
Situação do Veículo
Digite o número da CHN
Pontuação da CHN
Processo Administrativo
30-10-2014 Teleatendimento do DETRAN
entra em manutenção, mas agendamentos
podem ser…
29-10-2014 DETRAN adota medidas para
o cumprimento da Lei 6.897/14
29-10-2014 DETRAN leva serviço de
vistoria itinerante a 49 municípios do
interior em…
Dúvidas
Logo
Detran
RJ
Logo
Prefeitura
RJ
Número do CPF ou CNPJ Senha
Não é cadastrado? Clique aqui!
Esqueci minha senha
Entrar
Acesso Rápido
Primeiro item + acessado
Segundo item + acessado
Terceiro item + acessado
No mouseover o
ícone diminui e
são mostrados
os links mais
acessados/
principais da
categoria
Ao clicar no
botão o menu
desliza para
baixo mostrando
a área de login
Sketch Inicial
46. ARQUITETURA DE INFORMAÇÃO
Detran/RJ Descrição Funcional
2
2 Carrossel de imagens com chamadas para
novidades e campanhas institucionais.
1 1 Fluxo de login com autentificação e cadastro de
usuário, alem de link de “Esqueci a senha”.
Quando logado aparece o nome do usuário e link
para sua página.
3
3 Ferramenta de busca interna, o resultado aparece
numa página específica.
4
4 Área de destaque de "Veículo" com a lista dos links
mais acessados e link para pagina principal desta
categoria. A categoria deverá ter um destaque de
cor diferenciado do restante do site
5 Área de destaque de "Habilitação" com a lista dos
links mais acessados e link para pagina principal
desta categoria. A categoria deverá ter um destaque
de cor diferenciado do restante do site
6 Área de destaque de "Identificação Civil" com a lista
dos links mais acessados e link para pagina principal
desta categoria. A categoria deverá ter um destaque
de cor diferenciado do restante do site
5 6
7
8 9 10
11
12
13
14
47. ARQUITETURA DE INFORMAÇÃO
Detran/RJ Descrição Funcional
8 Área de consulta rápida para "Processos
Adiministrativos", "Situação do Veículo" e
"Pontuação da CHN". O resultado aparece numa
página específica para cada consulta.
7 Carrossel de ícones e links dos principais serviços
do site representados com as cores de suas
categorias
7
8 9 10
11
12
13
9 Área de acesso para "Dúvidas" com a lista dos links
mais acessados e link para pagina principal desta
categoria.
10 Link de acesso para página de "Agendamentos"
11 Link de acesso para página de "Pagamentos"
12 Link de acesso para página de "Auto Escola"
13 Link de acesso para página de "Ouvidoria"
14 14 Rodapé com links de acesso para todas as páginas
do site, segunda opção de navegação.
48. ARQUITETURA DE INFORMAÇÃO
Detran/RJ Descrição Funcional - Wireflow
B Ao clicar no botão “Meu Detran” uma
camada por trás do menu desliza para
baixo com as informações de login e
acesso para a área do usuário.
C
A
A Ao clicar no item “Institucional” abre
um menu dropdown com os itens da
categoria.
C Sugestões de links de páginas do site de
acordo com a palavra digitada.
B
51. ARQUITETURA DE INFORMAÇÃO
Detran/RJ Descrição Funcional
15
16 Carrossel de imagens com chamadas para
novidades e destaques de “Veículo”
17
15 Fluxo de acesso do usuário. (Breadcrumb)
16
17 Ferramenta de busca apenas no conteúdo da
categoria, o resultado aparece numa página
específica.
18
18 Menu vertical com as sub-categorias e links para as
páginas.
19 Área de destaque para "Licenciamento Anual" com
uma breve descrição e link para página do serviço.
23 Carrossel de ícones e links de serviços de outras
categorias relacionados com a categoria atual.
19
20
21
22
23
20 Área de destaque para "IPVA" com uma breve
descrição e link para página do serviço.
21 Área de destaque para "Veículos apreendidos" com
uma breve descrição e link para página do serviço.
22 Área de fácil acesso para links de serviços mais
procurados.
54. ARQUITETURA DE INFORMAÇÃO
Detran/RJ Descrição Funcional
25 Botões de compartilhamento do conteúdo e versão
de impressão.
25
24 Área de conteúdo da página.
26 Links de ações/serviços relacionados ao conteúdo.
27 Link de acesso rápido para área de “Agendamentos
Online”
24
26
27
58. ARQUITETURA DE INFORMAÇÃO
Detran/RJ Descrição Funcional
29 Link para sincronizar data com o Google Agendas
29 30 31
30 Link para gerar versão de impressão do
agendamento
31 Link para modal de formulário de envio de email
59. ARQUITETURA DE INFORMAÇÃO
Detran/RJ Conclusão
Podemos afirmar que o objeto em estudo não atende perfeitamente às
expectativas dos usuários.
A disposição dos serviços na página inicial e no menu principal não são
intuitivas. O usuário precisa se acostumar e aprender as nomenclaturas
utilizadas.
Há páginas importantes e que podem ajudar aos proprietários de veículos
que são subutilizadas.
Outro ponto importante na relação entre o sistema e seus usuários é a
falta de identificação do visitante já cadastrado e a opção de acessar
rapidamente informações prioritárias e relevantes.
60. ARQUITETURA DE INFORMAÇÃO
Detran/RJ
Através do cardsorting, conseguimos colher do público uma nova
perspectiva, diferente do que havia sido projetado. Isso nos ajudou a
reavaliar algumas nomenclaturas confusas previamente utilizadas,
além de criar novas categorias para agrupar estes dados.
Envolver usuários nos estágios iniciais de um projeto facilita o
processo criativo e traz segurança ao desenvolver uma nova
arquitetura, pois nos aproximamos mais da maneira que o usuário
pensa e organiza informações.
Conclusão
61. ARQUITETURA DE INFORMAÇÃO
Detran/RJ Lições aprendidas
A elaboração dos cartões deve ser feita com cuidado, para não dar
margem à interpretações errôneas, ambiguidade e problemas do gênero.
Notamos também que completar um cardsorting demanda bastante
tempo, fator que pode ser limitador para alguns usuários.
Também é necessário explicar nos cartões a função dos itens para
diferenciá-los e não deixar o participante do card sorting confuso e,
dessa forma, alterar o resultado final.
Porém, de algum modo, as pessoas pareciam satisfeitas em realizar a
tarefa, apesar de todo o esforço.
62. ARQUITETURA DE INFORMAÇÃO
Detran/RJ Desdobramentos futuros
Pretendemos testar o protótipo navegável com mais alguns usuários e utilizar
métodos que nos ajudem a colher seus feedbacks de maneira efetiva como
avaliação através de questionário no próprio site.
Baseado no benchmark, uma oportunidade de melhoria contínua seria a aplicação
de uma enquete para identificar os pontos positivos e negativos da navegação.
Criaremos questionários que serão disponibilizados no próprio site com o objetivo
de avaliar a experiência do usuário, acessibilidade, entre outros tópicos diversos.
A partir destes comentários, aperfeiçoaremos o protótipo para criar uma
interface nova, aberta para um público mais abrangente, em uma espécie de
open beta.