1
PONTIFÍCIA UNIVERSIDADE CATÓLICA DO RIO DE JANEIRO
(PUCRIO) COORDENAÇÃO CENTRAL DE EXTENSÃO (CCE)
PÓSGRADUAÇÃO EM ERGODESIGN DE INTERFACES: USABILIDADE E ARQUITETURA DA INFORMAÇÃO
ADRIANA MACCACCHERO DIANA AMADO BAPTISTA DOS SANTOS
EDUARDO AZEVEDO PAULO SABINO
VIVIANE MESQUITA
DETRANRJ
Trabalho apresentado à disciplina Atquietura da informação para a Pós – Graduação em Ergodesign de Interfaces: usabilidade e arquitetura da informação da Pontifícia Universidade Católica do Rio de Janeiro como requisito parcial à obtenção de nota final. Professores: Cinthia Ruiz
Luiz Agner
RIO DE JANEIRO 2014
2
SUMÁRIO
RESUMO EXECUTIVO………………………………………………. 3
1 INTRODUÇÃO………………………………………………………… 4
2 BRIEFING……………………………………………………………... 5
2.1 DETRAN RJ: BREVE HISTÓRICO………………………..…….. 5
2.2 OBJETIVOS DO PROJETO………………………………………… 6
2.3 PÚBLICOALVO……………………………………………………… 7
2.4 CARACTERÍSTICAS DESEJÁVEIS……………………………….. 7
3 DESENVOLVIMENTO……………………………………………….. 8
3.1 BENCHMARKING……………………………………………………. 8
3.1.1 Benchmarking: principais funcionalidades identificadas…………. 15
3.2 BRAINSTORM………………………………………………………… 16
3.3 INVENTÁRIO DE CONTEÚDO……………………………………... 20
3.4 CARD SORTING……………………………………………………... 22
3.4.1 Elaboração e aplicação do Card Sorting………………………….... 23
3.4.2 Análise de resultados do Card Sorting……………………………... 24
3.4.3 Escolha e justificativa dos novos rótulos…………………….……... 26
3.4.4 Taxonomia: novas categorias e organização de serviços………... 30
3.5 WIREFRAMES………………………………………………………... 31
3.5.1 Descrição das funcionalidades……………………......................... 37
3.5.1.1 Tela Inicial……………………………………………………………... 37
3.5.1.2 Tela de Veículos…………………………………….………………... 40
3.5.1.3 Tela de Licenciamento Anual………………………………………... 42
3.5.1.4 Formulário de Licenciamento Anual………………………………… 43
3.5.1.5 Tela de conclusão do preenchimento do formulário………………. 44
4 CONCLUSÃO…………………………………………………………. 45
5 LIÇÕES APRENDIDAS…………………………………………….... 46
6 DESDOBRAMENTOS FUTUROS………………………………….. 47
REFERÊNCIAS……………………………………………………….. 48
3
RESUMO EXECUTIVO
Este relatório apresenta uma proposta de redesign para o site do DetranRJ
que apresenta uma alta carga informacional, nomenclaturas complexas e difícil
entendimento para o usuário.
Como parte da avaliação da disciplina de Arquitetura da Informação, o
trabalho avaliou a estrutura informacional do site do DetranRJ, com o objetivo de
melhorar a disponibilização das informações, facilitar o acesso para o usuário e
propor uma nova taxonomia.
Para o desenvolvimento do trabalho, foram considerados o públicoalvo,
briefing sobre o DetranRJ, principais objetivos da instituição e suas características.
A metodologia aplicada para avaliação do site, junto ao usuário, foi o Card
sorting, utilizando o conteúdo atual dos quatro menus principais, com maior
quantidade de informações.
Atualmente, o site do DetranRJ possui sete menus: Inicial, Veículo, Multas,
Habilitação, Identificação Civil, Educação e Institucional, mas para que o card sorting
fosse melhor aplicado e avaliado, foram selecionados os menus: Veículo, Multas,
Habilitação e Identificação Civil.
O card sorting foi aplicado em 19 pessoas, aberto. Após finalizar,
participantes apontaram as categorias mais fáceis e as mais difíceis. Todos os
dados foram inseridos na planilha desenvolvida por Donna Spencer.
Paralelamente a aplicação do card sorting, foi realizado um benchmarking em
sites do Detran de outros estados e de instituições semelhantes em outros países e
foram observadas funcionalidades e serviços que não são oferecidos no site do
DetranRJ.
A partir de um brainstorm do grupo, foram desenvolvidos sketches, baseados
nas funcionalidades identificadas nos sites similares, e escolhido um template final,
após a análise dos dados do card sorting.
Como resultado, foi observado que o site do DetranRJ necessita de uma
interface mais limpa, com categorias mais objetivas e funcionalidades que
proporcionem ao usuário maior rapidez e acesso rápido a informações.
4
1 INTRODUÇÃO
Este relatório apresenta uma proposta de redesign para o site do Detran/RJ
levandose em consideração suas características, públicoalvo, sites do Detran de
outros estados e sites de instituições semelhantes fora do Brasil.
Como parte da avaliação da disciplina de Arquitetura da Informação, este
trabalho avaliou a estrutura informacional do site do DetranRJ com o objetivo de
melhorar a disponibilização das informações, dismistificando sua imagem para o
usuário e trazendo uma nova taxonomia para o site.
Segundo Morrogh (2003 apud AGNER, 2012, p.90) a Arquitetura da
informação foca “o projeto de estruturas (ambientes informacionais) que fornecem
aos usuários recursos necessários para transformar suas necessidades em ações e
para atingir seus objetivos com sucesso”.
A partir deste entendimento constatamos a importância da realização do
estudo do perfil do usuário para a proposta de redesign de um site, já que o usuário
será o centro das atividades e serviços disponibilizados pelo site.
LEULIER, BASTIEN e SCAPIN (1998 apud AGNER; MORAES, [200?]), afirmam
que “a experiência do usuário deve ser levada em conta nos vários níveis de
interações: a interface deve se adaptar a eles”. Já que como afirmam AGNER e
MORAES, ([200?]) “os melhores sites são aqueles que dão suporte ao modo como
os seus usuários desejam abordar os problemas”.
O site do DetranRJ possui atualmente sete menus principais: Inicial, Veículo,
Multas, Habilitação, Identificação civil, Educação e Institucional, apresentando uma
grande quantidade de informações. Porém, para a realização deste trabalho, visando
a melhor execução do Card sorting e a reflexão dos principais serviços oferecidos
pelo site, foram selecionados quatro menus do site: Veículo, Multas, Habilitação e
Identificação Civil.
Na realização deste trabalho, além de uma avaliação sobre o públicoalvo, um
briefing sobre a empresa, seus principais objetivos, as características necessárias
que o site deverá ter, obrigatoriamente, um Benchmarking, apresentando ideias
interessantes a partir de sistemas similares ao site, realizamos, para avaliar os
pontos necessários de mudança na estrutura informacional do site, um Card sorting
aberto com 19 usuários utilizando para interpretação dos dados a planilha de Donna
Spencer.
5
Podese concluir que apesar do site do DetranRJ apresentar todas as
informações necessárias para a utilização de seus serviços, essas informações não
estavam dispostas de forma clara e rápida para o usuário, necessitando este de uma
nova estrutura informacional e de um novo redesenho, como veremos nos processos
descritos neste relatório.
2 BRIEFING
Nos capítulo a seguir vamos descrever o públicoalvo do DentranRJ,
principais objetivos do projeto, da instituição e suas características.
2.1 DETRANRJ: BREVE HISTÓRICO
O Departamento de Trânsito do Estado do Rio de Janeiro (DetranRJ) surgiu
com a criação do Código Nacional de Trânsito em 1966 e era composto pelas
divisões de emplacamento, fiscalização, administração e habilitação e representado
nas ruas pela Guarda Civil que ficava responsável pela fiscalização e aplicação de
multas aos motoristas.
Todo o processo era feito manualmente e os registros eram datilografados em
fichas arquivadas no prédio sede do DetranRJ.
No ano de 1975, o DetranRJ passou ao nível de autarquia através do
Decretolei n° 46 de 25 de março de 1975, estando subordinado a Secretaria de
Segurança Pública.
Em 1992, todos os serviços do DetranRJ foram informatizados com os
registros das fichas aos pucos transferidos para o computador.
Para desafogar o sistema de emplacamento, o DetranRJ descentralizou este
serviço com a utilização de postos de vistorias que são responsáveis pelo
agendamento de hora, local e data através da Internet ou por telefone desde 1996.
Já em 1999 o DetranRJ ampliou seus serviços absorvendo as funções do
Instituto Félix Pacheco de identificação civil e fornecimento da carteira de
identidade.
Hoje, o DetranRJ oferece os serviços de fiscalização, habilitação, vistoria,
identificação civil, pagamento de Taxas como o IPVA, além de oferecer serviços
6
para autoescola, cursos e educação no trânsito sendo todos esses serviços
automatizados.
2.2 OBJETIVOS DO PROJETO
Este projeto tem como objetivo avaliar a usabilidade do site do DetranRJ, por
meio da técnica de cardsorting, realizar o benchmarking com instituições
semelhantes e propor uma nova interface mais adequada às necessidades dos
usuários.
7
2.3 PÚBLICOALVO
Perfil primário: homens e mulheres, acima de 18 anos, alfabetizados,
residentes do Estado do Rio de Janeiro, com acesso a internet, interessados
em emissão ou renovação de habilitação, consulta e agendamentos
referentes a veículos, multas e infrações.
Homens e mulheres, a partir de 16 anos, que desejam obter a Carteira de
Identidade emitida pelo Estado do Rio de Janeiro, por meio do DetranRJ ou
Instituto Félix Pacheco (IFP);
Pessoas com deficiência auditiva que desejam emitir a habilitação;
Responsáveis legais de menores de idade com o intuito de identificar seus dependentes através de um documento oficial.
2.4 CARACTERÍSTICAS DESEJÁVEIS
a ) Imagem a ser transmitida
Moderno, acessível, objetivo, limpo e de fácil entendimento.
b) 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.
c) Quantas e quais páginas internas
Seguir o mapa do site como referência, redefinindo a organização e nomenclaturas.
d ) Páginas especiais
Cadastros e agendamentos online, em sincronia com os serviços realizados pelo
telefone.
8
3 DESENVOLVIMENTO
3.1 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á.
As principais referências foram os sites: DetranSP, DetranMG, ICBC Driver
Licensing (Canadá) e NY DMV (Estados Unidos).
9
10
11
12
13
14
15
3.1.1 Benchmarking: principais funcionalidades identificadas
a. Acesso rápido para acompanhamento e emissão de documentos;
b. Acesso rápido aos serviços através de ícones;
c. Atendimento por telefone com seleção de idioma;
d. Busca geral no site por campo aberto; ( com sugestao automática)
e. Cadastramento através do CPF ou do CNPJ com senha no site para acesso à
informações particulares;(carregamento de dados cadastrados em
formularios);
f. Controle de acessibilidade;
g. Consulta rápida de processo administrativo, pontuação do CNH, e situacao do
veículo;
h. Consulta rápida separada por categoria;
i. Destaque/ Acesso rápido para os itens mais procurados da seção;
j. Disponibilização de site responsivo;
k. Exibição de todas as categorias da seção com visualização dos principais
acessos;
l. Ícone para sinalização de categoria;
m. Links de acesso rápido com ícones e cores relativas aos assuntos;
n. Link de acesso aos sites do Detran de outros estados;
16
o. Opção para realização de download do Aplicativo do site para smartphones.
p. Principais ações com link direto da página principal;
q. Seleção de Idiomas;
r. Sinalização das principais categorias por cor;
s. Sinalização da área que foi selecionada;
t. Uso de ícones de fácil associação assunto.
3.2 BRAINSTORM
Para elaboração dos Wireframes, o grupo criou sketches onde foram
desenvolvidas ideias iniciais sobre as funções e o redesign do sistema, confome
Figuras relacionadas abaixo:
Figura 1 Sketch 1
17
Figura 2 Sketch 2
Figura 3 Sketch 2
18
Figura 4 Sketch 3
Figura 5 Sketch 4
19
Figura 6 Sketch 4 (conclusão)
20
3.3 INVENTÁRIO DE CONTEÚDO
O Inventário de conteúdo do site do DetranRJ descreve as funcionalidades
dos menus Veículo, Multas, Habilitação e Identificação Civil, já que os mesmos
refletem os serviços mais procurados pelos usuários do site.
a) Menu Veículo
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 email)
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)
b) Multas
1. Infrações
2. Consultas (sobre multas – pontuação, veículos e outros estados)
3. Como pagar (multas)
4. Pagamentos (link para o Bradesco)
21
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)
c) Menu Habilitação
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 email)
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)
d) 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
22
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)
3.4 CARD SORTING
O Card Sorting é uma ferramenta da Arquitetura de Informação utilizada para
verificar e estruturar a categorização de rótulos para a elaboração de uma taxonomia
através do modelo mental de organização e agrupamento do usuário.
A execução de um cardsorting visa a obter dados
concretos sobre o modelo mental dos usuários, no que diz
respeito a como deve ser organizado o espaço da
informação (...)Representa o processo cognitivo de dividir
as experiências do mundo em grupos de entidades, ou
categorias, para construir uma ordem dos mundos físico e
social. Desta forma, a categorização vai simplificar a
interação do indivíduo com o seu ambiente. (AGNER,
2012, p.283)
O site do Detran RJ possui sete menus principais: Inicial, Veículo, Multas,
Habilitação, Identificação Civil, Educação e Institucional. Devido à quantidade de
informações contidas no site, para melhor execução e análise do card sorting, foram
escolhidos os quatro menus principais: Veículo, Multas, Habilitação e
Identificação civil.
23
3.4.1 Elaboração e aplicação do Card Sorting
Após a seleção dos menus, os serviços oferecidos dentro de cada menu
foram transcritos em 42 cartões. De forma que fosse possível recategorizar a
estrutura existente selecionamos a técnica de Card Sorting aberto. Assim,
dispusemos os cartões aleatoriamente diante dos participantes e os mesmos
categorizaram e ordenaram os itens. Realizamos um total de 19 Card Sorting
individuais e 1 em grupo.
A ordem de organização dos cartões era de acordo com a sua importância na
opinião do usuário. Ao final do trabalho também foi pedido aos participantes para
destacar o card mais difícil e o mais fácil de classificar.
24
3.4.2 Análise de resultados do Card Sorting
Terminada a fase de aplicação do Card Sorting, fezse necessária a
padronização das nomenclaturas utilizadas pelos participantes. Houve casos onde
os termos utilizados coincidiam e também casos onde divergiam, apesar de
ilustrarem a mesma ideia.
A análise foi feita utilizando a tabela criada pela Donna Spencer. Como consta
na imagem abaixo, os cartões com seus respectivos números foram declarados na
aba “Cards”.
25
Em seguida o resultado de cada Card Sorting foi declarado em abas únicas.
Cada cartão e sua respectiva categoria preenche uma linha. Sincronizadamente foi
preenchida a aba “Summary”. Nesta constam as categorias utilizadas presentes nas
abas de avaliação dos participantes. A imagem abaixo ilustra o resultado após o
preenchimento de todos os dados.
26
De forma automática, toda a tabela com suas abas foi preenchida e
interligada de acordo com os dados dispostos nessas duas etapas acima. Há
contagem de repetições de categorias e suas nomenclaturas divergentes. Além
disso, foi verificado para cada card onde ele foi incluído em categorias diferentes.
3.4.3 Escolha e justificativa dos novos rótulos
Na escolha dos novos rótulos foram levadas em consideração as categorias
criadas pelos usuários no Card Sorting, o mapa atual do site do DetranRJ e a
análise do grupo de estudo deste relatório.
O site do DetranRJ apresenta atualmente os seguintes rótulos Veículo,
Multa, Habilitação, Identificação Civil, Institucional e Educação. Porém, nesse estudo
foram utilizados apenas os Menus Veículo, Multa, Habilitação e Identificação Civil.
Na planilha de Donna Spencer a aba “Correlation” mostra claramente, através
de porcentagem, quantas vezes o card foi utilizado em determinada categoria. A
contagem variou entre 5% e 47%. Isso demonstra que o resultado não foi objetivo
quanto ao uso das nomenclaturas.
Para um mesmo cartão foi possível obter até mesmo 11 categorias diferentes.
Para facilitar e criar uma padronização de acordo com a decisão da maioria dos
participantes, foi escolhida, na maior parte dos casos, a categoria com a maior
27
porcentagem de uso. No entanto, para algumas nomenclaturas onde a quantidade
de escolhas era muito próxima, os pesquisadores tiveram que chegar a um
consenso levando em consideração os termos coincidentes, sua definição e o uso
comum do termo.
Os termos escolhidos nos cards individuais não se diferenciaram muito, mas
sim, o agrupamento das funções.
a. Auto escola esta categoria foi alocada na categoria Habilitação, já que esse
serviço é um requisito para obtenção do documento de habilitação.
b. Consultas para muitos participantes esta categoria foi identificada como
importante para resumir a funcionalidade. Identificamos que a criação do
nome pode estar às diferentes consultas que podem ser realizadas. Por
exemplo: consulta prazo de entrega da carteira de habilitação, consulta de
informações de veículos.
c. Cursos o DetranRJ oferece diversos cursos de reciclagem e treinamentos,
porém não havia uma área específica que agrupassem todos eles. Como são
todos referentes à Habilitação, optamos por inseríla nesta categoria.
d. Dúvidas é uma categoria bastante recorrente nos nossos resultados, por
isso decidimos criar uma área específica pra ela, com destaque na página
inicial, agrupando questões frequentes de diversos assuntos.
e. Habilitação Identificada pelo usuário no card sorting como uma das
categorias mais importantes. Alguns resultados apresentaram a nomenclatura
“Carteira de Habilitação”, mas poderia haver confusão com o termo Carteira
de Identidade. A nomenclatura “Habilitação” era mais popular e já vinha sendo
utlizada no site atual, por isso decidimos mantêla.
f. Identificação Civil Essa categoria está presente no site atual e foi utilizada da
mesma forma. Houveram resultados com o termo “Identidade” ou “Carteira de
Identidade”, porém “Identificação Civil” teve maior reicindência.
g. Informações foram agrupados dados de informações sobre veículos.
h. Infrações foi destacada pelos participantes juntamente com “multas”, mas
pela sua menor incidência, foram agrupadas juntas.
i. Outros em diversos cards sorting esta categoria foi utilizada para agrupar
categorias em que o participante não soube determinar.
28
j. Pagamentos os participantes criaram esta categoria agrupando diversos
tipos de pagamento, como DUDA, IPVA, etc.
k. Serviços a categoria serviços teve alta incidência nos resultados do
cardsorting, mas agrupava os itens de todas as áreas. Decidimos então
adotar a categoria serviços em todas elas, porém com filtros adequados à
cada uma. Por exemplo, em Veículos, apenas serviços referentes ao mesmo.
E por conta da popularidade, criamos um carrossel com ícones nas páginas
internas para dar mais destaque à área.
l. Veículo mantivemos a nomenclatura dada devido a alta incidência nos
resultados, além do uso prévio no atual site do Detran.
A partir do cardsorting, da alteração das nomenclaturas e criação de novas
categorias notamos que as funções foram agrupadas de forma diferente pelos
usuários, resultando no quadro abaixo:
Correspondência entre categorias e cartões
Número Card Categoria Inicial Nova Categoria
1 Identificação Civil Serviços
2 Multas Dúvidas
3 Habilitação Cursos
4 Identificação Civil Dúvidas
5 Multas Consultas
6 Habilitação Habilitaçao
7 Habilitação Habilitaçao
8 Multas Dúvidas
9 Veículo Informações
10 Habilitação Auto Escola
11 Veículo Serviços
12 Veículo Veículos
13 Veículo Veículos
14 Veículo Informações
15 Veículo Dúvidas
16 Multas Dúvidas
29
17 Multas Infrações
18 Veículo Veículos
19 Habilitação Auto Escola
20 Veículo Pagamentos
21 Habilitação Identificação Civil
22 Veículo Informações
23 Multas Pagamentos
24 *Presente em Veículo,
Habilitação e Identificação
Informações
25 Habilitação Dúvidas
26 Habilitação Cursos
27 Habilitação Consultas
28 Multas Outros
29 Identificação Civil Serviços
30 Habilitação Habilitaçao
31 Multas Infrações
32 Multas Informações
33 Habilitação Auto Escola
34 Multas Outros
35 Veículo Veículos
36 Identificação Civil Identificação Civil
37 Veículo Veículos
38 Habilitação Habilitaçao
39 Habilitação Dúvidas
40 Identificação Civil Consultas
41 Veículo Veículos
42 Habilitação Cursos
30
3.4.4 Taxonomia: novas categorias e organização de serviços
Seguindo a mesma lógica de escolha das categorias através da quantidade
de uso delas e definições as nomenclaturas foram padronizadas. Os termos
similares e também aqueles, que mesmo diferentes passam o mesmo conceito,
foram agrupados e reduzidos, de forma que apenas um nome fosse representado no
cartão.
A grande quantidade de testes aplicados permitiu uma abrangência maior de
dados coletados e suas diferenças. A dificuldade estava presente na reunião das
informações e na consolidação dos grupos, além da leitura e observações dos dados
na tabela da Donna Spencer.
Concluída essa etapa foi construído o mapa do site com suas novas
nomenclaturas e separações de menus, como ilustra a imagem abaixo:
Obs: Os menus Institucional e Educação não foram objeto do estudo do card
sorting, no entanto, o grupo considerou relevante incluílos no mapa do site.
31
3.5 WIREFRAMES
Os wireframes foram desenvolvidos a partir de algumas funcionalidades
identificadas como positivas pelo grupo, levantadas no benchmarking, pelo resultado
do card sorting e pela remodelagem de algumas funcionalidades que já existiam no
site.
O wireframe é um diagrama que especifica uma página do
website. Ele representa uma página definindo seus
elementos, a hierarquia entre eles, seus agrupamentos e
suas importâncias relativas. Seu objetivo é especificar a
implementação da página e comunicar o conteúdo e as
funções de cada página para discussão com a equipe do
projeto. (REIS, 2007, p.146148 apud GONZATTO;
COSTA, 2011, p.165)
Como para a realização deste redesign utilizamos apenas quatro menus do
site: Veículo, Multas, Habilitação e Identificação civil os wireframes refletem todo o
funcionamento redesenhado do site para estes menus utilizando a nova taxonomia
encontrada após a realização do Card Sorting.
Abaixo, foram representadas cinco telas demonstrando o acesso ao
Agendamento de Licenciamento anual iniciando na Home do site.
O Wireframe de nível 1 apresenta o redesign da Home do site, com
funcionalidades novas como Acessibilidade e área para cadastro no Meu Detran.
32
Wireframe nível 1 (Home)
33
Wireframe nível 2 (Veículo)
34
Wireframe nível 3 Licenciamento anual
35
Wireframe nível 4 Agendamento de Licenciamento Anual
36
Wireframe nível 5 Confirmação do Agendamento
37
3.5.1 Descrição das funcionalidades
Para melhor compreensão as telas estão dispostas com uma numeração para
cada funcionalidade. Abaixo de cada tela estão relacionadas a numeração seguida
das descrições de cada função.
3.5.1.1 Tela Inicial
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.
2 Carrossel de imagens com chamadas para novidades e campanhas institucionais.
3 Ferramenta de busca interna, o resultado aparece numa página específica.
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
38
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. 7 Carrossel de ícones e links dos principais serviços do site representados com as cores de suas categorias; 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; 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 Rodapé com links de acesso para todas as páginas do site, segunda opção de navegação. Visualização de itens do menu ao posicionar o cursor sobre o título
A Ao clicar no item “Institucional” abre um menu dropdown com os itens da categoria.
39
Campo de login e senha Meu Detran expansível
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.
Sugestões no campo de busca
C Sugestões de links de páginas do site de acordo com a palavra digitada.
40
3.5.2.2 Tela de Veículos
15 Fluxo de acesso do usuário. (Breadcrumb);
16 Carrossel de imagens com chamadas para novidades e destaques de “Veículo”;
17 Ferramenta de busca apenas no conteúdo da categoria, o resultado aparece numa página específica;
18 Menu vertical com as subcategorias 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; 20 Área de destaque para "IPVA" com uma breve descrição e link para página do serviço;
41
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; 23 Carrossel de ícones e links de serviços de outras categorias relacionados com a categoria atual;
42
3.5.2.3 Tela de Licenciamento Anual
24 Área de conteúdo da página; 25 Botões de compartilhamento do conteúdo e versão de impressão; 26 Links de ações/serviços relacionados ao conteúdo; 27 Links de ações/serviços relacionados ao conteúdo.
43
3.5.2.4 Formulário de Licenciamento Anual
28
28 Sinalização dos passos de preenchimento do formulário.
44
3.5.2.5 Tela de conclusão do preenchimento do formulário
29 Link para sincronizar data com o Google Agendas 30 Link para gerar versão de impressão do agendamento. 31 Link para modal de formulário de envio de email.
45
4 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,
que além de confusas são também inconsistentes, como no caso de “Vistoria” e
“Licenciamento Anual”.
Há páginas importantes e que podem ajudar aos proprietários de veículos que
são subutilizadas, ou ficam escondidas nas diversas subcategorias.
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. Observamos essa função em diversos
benchmarks e vimos que o Detran também oferecia um serviço do gênero, mas
chegar até ele era muito difícil. Além de oferecer mais conveniência aos usuários,
decidimos também dar destaque ao serviço, facilitando seu acesso através da
página inicial.
Através do card sorting, 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.
46
5 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 card sorting demanda bastante tempo, fator que pode ser limitador
para alguns usuários. Mas apesar da complexidade e todo tempo levado para
concluir a tarefa, as pessoas se mostraram satisfeitas e empenhadas na realização
da mesma, apesar de todo o esforço.
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,
comprometer o resultado final do trabalho.
No caso deste estudo, algumas nomenclaturas adotadas pelo DetranRJ se
mostraram complexas até mesmo para quem aplicava o cardsorting, o que reforça a
necessidade de um texto de apoio bem elaborado.
47
6 DESDOBRAMENTOS FUTUROS
Pretendemos testar o protótipo navegável com mais usuários e utilizar
métodos que nos ajudem a colher seus feedbacks de maneira efetiva e frequente.
Além dos menus já utilizados no card sorting, há necessidade de organização
e avaliação dos outros menus não contemplados nesse estudo, como Educação e
Institucional.
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. Exemplo: se ele encontrou com facilidade as informações que desejava, o
que poderia ser melhorado, qual funcionalidade não encontrou, etc.
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 controlado.
48
REFERÊNCIAS
ACRE. Departamento de Trânsito.. DETRAN Acre. Acre, [c2014?]. Disponível em: <http://www.detran.ac.gov.br/>. Acesso em: 25 out. 2014.
AGNER, Luiz Carlos. Ergodesign e arquitetura de informação: trabalhando com o usuário. 3.ed. Rio de Janeiro: Quartet, 2012.
AGNER, Luiz Carlos. Algumas considerações teóricas e práticas sobre arquitetura de informação. In: PINHEIRO, Lena Vania Ribeiro; OLIVEIRA, Eloisa da Conceição Príncipe de (orgs.). Múltiplas facetas da comunicação e divulgação científicas: transformações em cinco séculos. Brasília, DF: IBICT, 2012. cap. 4. p.267292. Disponível em: <http://www.agner.com.br/livro/IBICT_Ebook_MultiplasFacetas.pdf>. Acesso em: 17 out. 2014.
AGNER, Luiz Carlos; MORAES, Anamaria de. Design centrado no usuário e diálogos clientesorganizações através de interfaces na Web. [S.l. : s.n.], [200?]. Disponível em: <http://www.senac.br/BTS/281/boltec281c.htm>. Acesso em: 14 nov. 2014.
COLÚMBIA BRITÂNICA (CANADÁ). ICBC. Colúmbia Britânica, c2014. Disponível em:<http://www.icbc.com/driverlicensing/Pages/Default.aspx>. Acesso em: 25 out. 2014. FARIA, Mauricio Marques de. Card sorting: noções sobre a técnica para teste e desenvolvimento de categorizações e vocabulários. Revista Digital de Biblioteconomia e Ciência da Informação,Campinas, v.7, n. 2, p. 19, jan./jun. 2010. Disponível em:<http://polaris.bc.unicamp.br/seer/ojs/index.php/rbci/article/view/436/297>. Acesso em: 1 dez. 2014. GONZATTO, Rodrigo Freeze; COSTA, Karla da Cruz. Arquitetura de informação sem wireframe. Perspectivas em Gestão & Conhecimento, João Pessoa, v.1, Número Especial, p. 160181, out. 2011. Disponível em:<http://periodicos.ufpb.br/ojs2/> . Acesso em: 1 dez. 2014. MEMÓRIA, Felipe. Design para internet: projetando a experiência perfeita. Rio de Janeiro: Elsevier, c2006. MINAS GERAIS. Departamento de Trânsito. DETRANMG. Belo Horizonte, MG, [c2014?]. Disponível em: <https://www.detran.mg.gov.br/>. Acesso em: 25 out. 2014. NEW YORK STATE. Department of motor vehicles. The DMV. New York, c2014. Disponível em: <http://dmv.ny.gov/>. Acesso em: 25 out. 2014. RIO DE JANEIRO (Estado). Departamento de Trânsito. DETRANRJ. Rio de Janeiro, [c2014?]. Disponível em: <http://www.detran.rj.gov.br/>. Acesso em: 25 out. 2014.
49
SANTA CATARINA. Departamento Estadual de Trânsito. Detran/SC. Disponível em: <http://www.detran.sc.gov.br/>. Acesso em: 25 out. 2014. SÃO PAULO (Estado). Departamento Estadual de Trânsito. Detran SP. São Paulo, [c2014?]. Disponível em: <http://www.detran.sp.gov.br/>. Acesso em: 25 out. 2014. TEXAS. Department of Public Safety TXDPS. Texas, c20002011. Disponível em: <http://www.txdps.state.tx.us/>. Acesso em: 25 out. 2014. UTAH. Driver license division. Utah driver license. Utah, c2014. Disponível em: <http://publicsafety.utah.gov/dld/>. Acesso em: 25 out. 2014.
Top Related