1

PONTIFÍCIA UNIVERSIDADE CATÓLICA DO RIO DE JANEIRO

(PUC­RIO) COORDENAÇÃO CENTRAL DE EXTENSÃO (CCE)

PÓS­GRADUAÇÃO EM ERGODESIGN DE INTERFACES: USABILIDADE E ARQUITETURA DA INFORMAÇÃO

ADRIANA MACCACCHERO DIANA AMADO BAPTISTA DOS SANTOS

EDUARDO AZEVEDO PAULO SABINO

VIVIANE MESQUITA

DETRAN­RJ

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ÚBLICO­ALVO……………………………………………………… 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 Detran­RJ

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 Detran­RJ, 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úblico­alvo,

briefing sobre o Detran­RJ, 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 Detran­RJ 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

Detran­RJ.

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 Detran­RJ 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

levando­se em consideração suas características, público­alvo, 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 Detran­RJ 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 Detran­RJ 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úblico­alvo, 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

Pode­se concluir que apesar do site do Detran­RJ 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úblico­alvo do Dentran­RJ,

principais objetivos do projeto, da instituição e suas características.

2.1 DETRAN­RJ: BREVE HISTÓRICO

O Departamento de Trânsito do Estado do Rio de Janeiro (Detran­RJ) 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 Detran­RJ.

No ano de 1975, o Detran­RJ passou ao nível de autarquia através do

Decreto­lei 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 Detran­RJ foram informatizados com os

registros das fichas aos pucos transferidos para o computador.

Para desafogar o sistema de emplacamento, o Detran­RJ 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 Detran­RJ 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 Detran­RJ 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 auto­escola, 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 Detran­RJ, 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ÚBLICO­ALVO

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 Detran­RJ 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: Detran­SP, Detran­MG, 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 Detran­RJ 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 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)

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 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)

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, fez­se 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 Detran­RJ e a

análise do grupo de estudo deste relatório.

O site do Detran­RJ 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 Detran­RJ 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.146­148 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 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; 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 sub­categorias.

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 Detran­RJ 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.267­292. 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 clientes­organizaçõ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/driver­licensing/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. 1­9, 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. 160­181, 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. DETRAN­MG. 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. DETRAN­RJ. 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, c2000­2011. 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.