TRABALHO DE CONCLUSÃO DE CURSO

Antonio Marcos Braga de Oliveira

Proposta de Redesign
da Interface utilizada
pelos alunos no SIGAA*
*Sistema Integrado de Gestão das Atividades Acadêmicas

Fortaleza - CE, 2017

 ANTONIO MARCOS BRAGA DE OLIVEIRA

PROPOSTA DE REDESIGN DA INTERFACE UTILIZADA PELOS ALUNOS NO SISTEMA

INTEGRADO DE GESTÃO DE ATIVIDADES ACADÊMICAS (SIGAA)

Trabalho de Conclusão de Curso (TCC)

apresentado ao Curso de Graduação em
Design da Universidade Federal do Ceará,
como requisito parcial à obtenção do título
de Bacharel em Design.

Orientador: Prof. Dr. Paulo Jorge Alcobia Simões

FORTALEZA
2017
 ANTONIO MARCOS BRAGA DE OLIVEIRA

PROPOSTA DE REDESIGN DA INTERFACE UTILIZADA PELOS ALUNOS NO SISTEMA

INTEGRADO DE GESTÃO DE ATIVIDADES ACADÊMICAS (SIGAA)

Trabalho de Conclusão de Curso (TCC)

apresentado ao Curso de Graduação em
Design da Universidade Federal do Ceará,
como requisito parcial à obtenção do título
de Bacharel em Design.
Aprovado em: ___/___/______.

BANCA EXAMINADORA
________________________________________
Prof. Dr. Paulo Jorge Alcobia Simões (Orientador)
Universidade Federal do Ceará (UFC)

_________________________________________
Prof. Dr. Roberto Cesar Cavalcante Vieira
Universidade Federal do Ceará (UFC)

_________________________________________
Prof. Carlos Eugenio Moreira de Sousa
Universidade Federal do Ceará (UFC)
 Dados Internacionais de Catalogação na Publicação
Universidade Federal do Ceará
Biblioteca Universitária
Gerada automaticamente pelo módulo Catalog, mediante os dados fornecidos pelo(a) autor(a)

O45p Oliveira, Antonio Marcos Braga de.

Proposta de Redesign da Interface utilizadas pelos alunos no Sistema Integrado de
Gestão das Atividades Acadêmicas (SIGAA) / Antonio Marcos Braga de Oliveira. – 2017.
141 f. : il. color.

Trabalho de Conclusão de Curso (graduação) – Universidade Federal do Ceará, Centro

de Tecnologia, Curso de Design, Fortaleza, 2017.
Orientação: Prof. Dr. Paulo Jorge Alcobia Simões.

1. Redesign. 2. Interface. 3. Sistema. 4. Experiência. 5. Usuário. I. Título.

CDD 658.575
Dedico esse trabalho ao meu pai, que sempre me
incentivou a batalhar para realizar os meus sonhos,
mas infelizmente não está mais entre nós e não pôde
ver em vida a concretização de um deles.
 Agradeço à minha família, em especial a minha mãe Gercina, e a minha esposa Ana

Agradecimentos
Célia por todo apoio durante essa caminhada.

Ao meu orientador Profº Paulo Alcobia, pelas orientações e por compartilhar seus
conhecimentos para chegarmos ao melhor resultado para este trabalho.

À todo corpo docente do curso de Design, por todos ensinamentos e contribuições

para minha formação profissional.

Aos meus amigos de turma, por fazerem parte dessa jornada cheia de dificuldades,
muito trabalho e vitórias.

Aos professores que compuseram a banca, que prontamente se disponibilizaram a

ler, ouvir e contribuir para o enriquecimento deste trabalho.

E aos alunos que participaram da pesquisa ou da realização do projeto, por dedicarem

um pouco do seu tempo e contribuir com o trabaho.
Resumo O presente trabalho tem o intuito de propor uma nova interface para o Sistema
Integrado de Gestão de Atividades Acadêmicas (SIGAA) utilizada pelos alunos,
provendo-lhes, com isso, uma melhor experiência e qualidade de uso. Para isso,
partiu-se do levantamento das necessidades dos usuários e objetivos do sistema,
através de um questionário e de uma inspeção de usabilidade. Através disso,
buscou-se o entendimento e delineamento da natureza do problema, a identificação
do perfil dos usuários e do contexto de uso. Além de traçar seus objetivos e tarefas
que realizam com mais frequência, e identificar as falhas do sistema que afetavam
negativamente a experiência do usuário, dentre outros aspectos relevantes para
um projeto de interface centrado no utilizador. Baseado nessas informações, foram
estabelecidas as funções necessárias para dar suporte ao usuário na realização de
suas tarefas e alcance de seus objetivos. As fases subsequentes concentram-se
em projetar a interface propriamente dita e o modo como o usuário vai interagir com
ela, para compor um produto funcionalmente eficiente e esteticamente agradável.
Pois este, é um dos principais problemas da interface do sistema atual, um visual
ultrapassado, incompatível com as expectativas dos usuários, acostumados com
interfaces melhores projetadas. Muitos produtos digitais evoluíram, tanto do ponto
de vista tecnológico quanto visual, o que não é o caso do objeto de estudo desse
trabalho. Por conta disso, relevou-se a relevância de uma proposta de intervenção,
que apoiasse adequadamente as necessidades dos usuários.

Palavras-chave:
Redesign; Interface; Interação; Sistema; Usuário; Experiência.
 This study aims to propose a new interface for the Integrated System of Academic

Abstract
Activities Management (SIGAA) used by the students, providing them with that, a better
experience and quality of use. For this, it started with the survey of user needs and
system objectives through a questionnaire and an inspection of usability. Through this,
it sought the understanding and delimitation of the nature of the problem, identifying
the profile of users and your context of use. In addition to trace your goals and tasks
you perform most frequently, and identify system failures that negatively affected the
user experience, among other aspects relevant to an interface design user-centered.
Based on this information, the necessary functions to support the user in performing
their tasks and achieve their objectives were established. Subsequent phases are
focused on designing the actual interface and how the user will interact with it, to
compose a functionally efficient and aesthetically pleasing product. For this is one of
the main problems of the current system interface, a visual outdated, incompatible
with the expectations of users, accustomed to better interfaces designed. Many digital
products have evolved, both from the technological point of view and look, which is
not the case of the study of the work object. Because of this, it relented the relevance
of a proposal for intervention, which would support adequately the needs of users.

keywords:
Redesign; Interface; Interaction; System; User; Experience.
Lista de Figuras Figura 2.1 – Elementos envolvidos no processo de interação ............................................................. 25
Figura 2.2 – Síntese dos três níveis do Design Emocional .................................................................. 34
Figura 2.3 – Modelos conceituais ......................................................................................................... 41
Figura 2.4 – Organograma geral de um mapa de site de um designer ................................................ 43
Figura 2.5 – Exemplo de Wireframe de um website ............................................................................. 43
Figura 2.6 – Variáveis visuais de Bertin ................................................................................................ 45
Figura 2.7 – Adaptação das variáveis visuais de Bertin para o design ................................................ 46
Figura 2.8 – Sistema de navegação global, local e contextual ............................................................ 47
Figura 2.9 – Sistemas de navegação suplementares ........................................................................... 47
Figura 2.10 – Sistema de grid e possibilidades de layout ...................................................................... 52
Figura 3.1 – Diagrama da metodologia ................................................................................................. 54
Figura 3.2 – Os elementos da experiência do usuário ......................................................................... 55
Figura 3.3 – A dualidade básica da web ............................................................................................... 56
Figura 3.4 – Estrutura do Projeto E ....................................................................................................... 58
Figura 4.1 – Persona 1 .......................................................................................................................... 71
Figura 4.2 – Persona 2 .......................................................................................................................... 71
Figura 4.3 – Organograma geral do sistema ....................................................................................... 77
Figura 4.4 – Designing UI Flows ........................................................................................................... 78
Figura 4.5 – Modelagem das tarefas: Login e Cadastro ....................................................................... 79
Figura 4.6 – Modelagem da tarefa: Detalhes das disciplina ................................................................ 80
Figura 4.7 – Modelagem da tarefa: Consultar Unidades Acadêmicas .................................................. 81
Figura 4.8 – Modelagem da tarefa: Consultar Cursos ........................................................................... 81
Figura 4.9 – Modelagem da tarefa: Consultar Componente Curricular ................................................ 82
Figura 4.10 – Wireframe Estrutural geral do sistema ............................................................................. 83
Figura 4.11 – Wireframe estrutural: Página Inicial ................................................................................... 84
Figura 4.12 – Wireframe estrutural: Detalhes da disciplina .................................................................... 84
Figura 4.13 – Wireframe estrutural: Matrícula ......................................................................................... 84
Figura 4.14 – Wireframe estrutural: Consultas ........................................................................................ 84
Figura 4.15 – Grid de construção ............................................................................................................ 85
Figura 4.16 – Wireframe: Login ............................................................................................................... 85
Figura 4.17 – Wireframe: Cadastro ......................................................................................................... 85
Figura 4.18 – Wireframe: Págna inicial ................................................................................................... 86
Figura 4.19 – Wireframe: Atividades da disciplina .................................................................................. 86
Figura 4.20 – Wireframe: Notícias da disciplina ...................................................................................... 86
Figura 4.21 – Wireframe: Integrantes da disciplina ................................................................................ 86
Figura 4.22 – Wireframe: Plano de aula da disciplina ............................................................................. 87
Figura 4.23 – Wireframe: Fórum da disciplina ........................................................................................ 87
Figura 4.24 – Wireframe: Passo 1 da Matrícula ...................................................................................... 87
Figura 4.25 – Wireframe: Busca avançada de Disciplina ....................................................................... 87
Figura 4.26 – Wireframe: Passo 2 da Matrícula ...................................................................................... 88
Figura 4.27 – Wireframe: Passo 3 da Matrícula ..................................................................................... 88
Figura 4.28 – Wireframe: Informes do processo de Matrícula ................................................................ 88
Figura 4.29 – Wireframe: Detalhe de uma disciplina .............................................................................. 88
Figura 4.30 – Print da página Turma Virtual do SIGAA ........................................................................... 89
Figura 4.31 – Print da Página Inicial do SIGAA ....................................................................................... 89
Figura 4.32 – Print da Consulta de Componente Curriculares ............................................................... 89
Figura 4.33 – Wireframe: Consulta de Componentes Curriculares ........................................................ 89
Figura 4.34 – Redesign da página de Login .......................................................................................... 93
Figura 4.35 – Print da página de Login .................................................................................................... 93
Figura 4.36 – Redesign da página de Cadastro (Popup) ....................................................................... 93
Figura 4.37 – Print da página de Cadastro ............................................................................................. 95
Figura 4.38 – Redesign da Página Inicial ............................................................................................... 96
Figura 4.39 – Print da Página Inicial ...................................................................................................... 97
Figura 4.40 – Print da Página Turma Virtual .......................................................................................... 98
Figura 4.41 – Redesign da página de Atividades da Turma Virtual ....................................................... 99
Figura 4.42 – Redesign da página de Notícias da Turma Virtual ............................................................ 100
Figura 4.43 – Redesign da página de Integrantes da Turma Virtual ....................................................... 101
Figura 4.44 – Redesign da página de Plano de Aula da Turma Virtual .................................................. 102
Figura 4.45 – Redesign da página de Fórum da Turma Virtual .............................................................. 103
Figura 4.46 – Print da página de Matrícula Online ................................................................................. 104
Figura 4.47 – Redesign da página de Matrícula Online ........................................................................... 105
Figura 4.48 – Redesign da página de Matrícula Online, 1........................................................................ 106
Figura 4.49 – Redesign da página de Matrícula Online, 2........................................................................ 107
Figura 4.50 – Redesign da página de Matrícula Online, 3........................................................................ 108
Figura 4.51 – Redesign da página de Matrícula Online, 4 ....................................................................... 109
Figura 4.52 – Redesign da página de Matrícula Online, 5....................................................................... 110
Figura 4.53 – Redesign da página de Matrícula Online, 6 ....................................................................... 111
Figura 4.54 – Print da página de Histórico do IRA ....................................................................................112
Figura 4.55 – Redesign da página e Histórico do IRA ............................................................................. 113
Figura 4.56 – Print da página de Pendências de Conclusão ................................................................... 114
Figura 4.57 – Redesign da página de Pendências de Conclusão............................................................ 116
Figura 4.58 – Redesign da página de Bolsas .......................................................................................... 116
Figura 4.59 – Redesign da página de Bolsas, 2 ...................................................................................... 117
Figura 4.60 – Print da página de Consulta de Unidades Acadêmicas .................................................... 117
Figura 4.61 – Redesign da página de Consulta de Unidades Acadêmicas.............................................. 119
Figura 4.62 – Redesign da página de Detalhe da Unidade Acadêmica................................................... 120
Figura 4.63 – Redesign da página de Consulta de Cursos ..................................................................... 121
Figura 4.64 – Redesign da página de Consulta de Componentes Curriculares...................................... 122
Figura 4.65 – Redesign da página de Atendimento ao aluno .................................................................. 124
Figura 4.66 – Redesign da página de Perfil do aluno............................................................................... 124
Figura 4.67 – Redesign da página de Dados Pessoais........................................................................... 125
Lista de Tabelas TABELA 1 – Cursos participantes do questionário online ..................................................................... 62

TABELA 2 – Respostas do tópico Outros .............................................................................................. 65

TABELA 3 – Resp. do tópico Outros com indicações de defeitos do SIGAA ........................................ 67

TABELA 4 – Frequência de acessos às opções da Turma Virtual ........................................................ 69

TABELA 5 – Resultados da inspeção de usabilidade ........................................................................... 72

TABELA 6 – Participantes do Teste de Usabilidade ............................................................................. 127

TABELA 7 – Frequência de acessos às opções do menu Ensino ....................................................... 135

TABELA 8 – Frequência de acessos às opções do menu Bolsas ........................................................ 136

TABELA 9 – Frequência de acessos às opções do menu Ambiente Virtuais ....................................... 136

TABELA 10 – Frequência de acessos às opções do menu Outros ........................................................ 136

 gRÁFICO 1 – Faixa etária dos participante ............................................................................................. 63

Lista de Gráficos GRÁFICO 2

GRÁFICO 3
–

–
Quantidade de participação por semestre ........................................................................ 63

Tempo de utilização da internet em anos ......................................................................... 64

GRÁFICO 4 – Nível de conhecimento no uso da internet ....................................................................... 64

GRÁFICO 5 – Quantidade de horas semanais gastos com internet ....................................................... 64

GRÁFICO 6 – Velocidade da internet dos participantes........................................................................... 64

GRÁFICO 7 – Sites e aplicações online mais utilizadas pelos participantes .......................................... 65

GRÁFICO 8 – Aprendizado na utilização do SIGAA ................................................................................ 66

GRÁFICO 9 – Quantidade de acesso semanal ao SIGAA ...................................................................... 66

GRÁFICO 10 – Nível de satisfação na utilização do SIGAA ...................................................................... 66

GRÁFICO 11 – Nível de desempenho na utilização do sistema ............................................................... 66

GRÁFICO 12 – Principais defeitos do SIGAA, segundo os alunos ........................................................... 67

Sumário 1 INTRODUÇÃO .................................................................................................................. 18
1.1 Problema ............................................................................................................................ 19
1.2 Justificativa ......................................................................................................................... 19
1.3 Objetivos ............................................................................................................................ 21
1.4 Objetivo Geral .................................................................................................................... 21
1.5 Objetivos Específicos ......................................................................................................... 21

2 REFERENCIAL TEÓRICO ............................................................................................... 22

2.1 O que é design? ................................................................................................................ 22
2.2 Interação Humano-Computador ........................................................................................ 23
2.2.1 Interação e Interface .......................................................................................................... 24
2.2.2 Qualidade em IHC .............................................................................................................. 27
2.3 Experiência do usuário ...................................................................................................... 31
2.4 Métodos de avaliação de interfaces .................................................................................. 35
2.4.1 Questionários ..................................................................................................................... 36
2.4.2 Inspeção de usabilidade utilizando checklists ................................................................... 37
2.4.3 Teste de usabilidade .......................................................................................................... 39
2.5 Design de Interação ........................................................................................................... 40
2.6 Arquitetura da Informação .................................................................................................. 42
2.7 Design de Informação ........................................................................................................ 44
2.8 Design de Navegação ........................................................................................................ 46
2.9 Design da Interface Gráfica ................................................................................................ 48
2.10 Design Visual ...................................................................................................................... 50

3 METODOLOGIA ............................................................................................................... 54
3.1 Aplicação ............................................................................................................................ 58
3.1.1 Estratégia ........................................................................................................................... 59
3.1.2 Escopo ............................................................................................................................... 59
3.1.3 Estrutura ............................................................................................................................. 60
3.1.4 Esqueleto ............................................................................................................................ 60
3.1.5 Superfície ........................................................................................................................... 60
3.1.6 Execução ........................................................................................................................... 61

4 RESULTADOS .................................................................................................................. 62
4.1 Estratégia ........................................................................................................................... 62
4.1.1 Características dos sujeitos estudados ............................................................................. 62
4.1.2 Descobertas principais ...................................................................................................... 67
4.1.3 Descobertas secundárias .................................................................................................. 69
4.1.4 Criação de personas .......................................................................................................... 71
4.1.5 Inspeção de usabilidade no SIGAA ................................................................................... 71
4.2 Escopo ............................................................................................................................... 72
4.2.1 Especificações funcionais e requerimentos de conteúdo .................................................. 72
4.3 Estrutura ............................................................................................................................. 76
4.3.1 Modelagem das tarefas ...................................................................................................... 76
4.3.2 Organograma geral da estrutura do site............................................................................. 78
4.4 Esqueleto ............................................................................................................................ 83
4.4.1 Wireframes estruturais ........................................................................................................83
4.4.2 Wireframes arquiteturais .....................................................................................................85
4.5 Superfície ............................................................................................................................ 91
4.5.1 Guia de Estilo ..................................................................................................................... 91
4.6 Interface final ...................................................................................................................... 93
4.7 Teste de Usabilidade .......................................................................................................... 126
4.7.1 Resultado dos testes .......................................................................................................... 127

5 CONSIDERAÇÕES FINAIS .............................................................................................. 128

REFERÊNCIAS BIBLIOGRÁFICAS ................................................................................... 130

APÊNDICES ....................................................................................................................... 134

 01 As tecnologias de informação e comunicação (TICs)
estão incorporadas nos mais diversos tipos de
interativos numa abordagem de dentro para fora, dando
ênfase aos dados, algoritmos que processam esses
dispositivos eletrônicos, estão presentes e influenciam dados, arquitetura do sistema, dentre outros aspectos
diretamente em diversos aspectos das nossas vidas, relacionados ao perfeito funcionamento do sistema.
Introdução

estão no rádio, TV, telefonia, internet, nos ambientes Assim, pouca ou nenhuma atenção era dado ao contexto
de aprendizado digital, na urna eletrônica, dentre de uso no qual esses sistemas seriam inseridos, a quem
outros meios. A incorporação dessas tecnologias no iria utilizá-lo e aos demais atores envolvidos, também
nosso cotidiano implica em modificações profundas e chamados de stakeholders (fabricantes de software
significativas que afetam diretamente “a nossa forma e hardware, vendedores, profissionais de suporte,
de trabalhar, de prestar serviços, de nos relacionarmos organizações, provedores de internet, dentre outros).
com outras pessoas e instituições, de ensinarmos Essa visão da construção de sistemas interativos
e aprendermos, de participarmos da política, de tendia ao fracasso desde sua concepção, uma vez que
lidarmos com o dinheiro, de cuidarmos da saúde, e cada uma dessas partes tem visões diferentes sobre o
assim por diante. ” É importante salientar, que essas desenvolvimento do sistema. Por exemplo, um usuário
modificações não afetam apenas o que se faz e está mais preocupado no quanto um dispositivo vai lhe
como se faz, mas também quem as faz, onde e por ajudar a cumprir seus objetivos, do que nas peças que
quê. (BARBOSA; SILVA, 2010, p.5). É por isso que se o compõe. (BARBOSA; SILVA, 2010)
tornou imprescindível o engajamento dos utilizadores
no processo de projeto de qualquer produto digital. Os estudos na área de Interação Humano-Computador
(IHC), entram nesse cenário com o intuito de mudar a
Por muito tempo, aqueles que estavam responsáveis forma de se projetar sistemas interativos, para que eles
pela construção de sistemas computacionais interativos se adequassem ao contexto onde estavam inseridos,
(categoria na qual o objeto de estudo desse trabalho seguindo uma abordagem de “fora para dentro”. Dessa
se enquadra) tinham a qualidade de desenvolvimento forma, segundo Barbosa e Silva (2010):
como prioritária. Dessa forma, concebiam os sistemas

18
 “O projeto começa investigando os atores envolvidos, 1.1 Problema
seus interesses, objetivos, atividades, responsabilidades,
motivações, os artefatos utilizados, o domínio, o
Apesar desse amadurecimento da produção e
contexto de uso, dentre outros, para depois identificar
oportunidades de intervenção na situação atual, a forma interpretação dos signos e dos avanços tecnológicos
de que a intervenção tomará a interface com o usuário dos últimos anos, nem todos os produtos digitais
e, finalmente, como o sistema viabiliza essa forma de acompanharam essa evolução. O que é o caso do
intervenção (BARBOSA; SILVA, 2010, p.9).”
objeto de estudo desse trabalho, o Sistema Integrado
Não somente a forma de conceber os sistemas de Gestão de Atividades Acadêmicas (SIGAA).
interativos vêm mudando nos últimos anos, mas
É notório, através de sua interface, que ele teve pouca
também a interface gerada desse novo processo. É
ou nenhuma mudança desde a sua implementação.
nela que o usuário final terá sua experiência e o apoio
Isso pode ser observado pelo seu visual defasado
para realização de suas tarefas e cumprimento de seus
com uma estética bem característica de interfaces
objetivos. Se formos pesquisar e analisar a evolução
projetadas no começo deste século. Além disso,
das interfaces gráficas que utilizamos atualmente, tais
também são identificados problemas na arquitetura de
como as das redes sociais, por exemplo, é notório
informação, design de navegação, design de interação,
que houve uma mudança significativa e positiva. Para
dentre outros aspectos, que influenciam diretamente na
Royo (2008), isso se deve, dentre outros fatores, ao
experiência do usuário.
amadurecimento da produção e interpretação de
signos e à evolução tecnológica, que tange áreas
como o design visual, design de informação, design de 1.2 Justificativa e contextualização
interação, dentre outras áreas que serão abordadas
posteriormente. Segundo o site da Secretaria de Tecnologia da
Informação (STI) da Universidade Federal do Ceará
(UFC), o Sistema de Gestão de Atividades Acadêmicas
(SIGAA) tem como objetivo:

19
 “Informatizar os procedimentos da área acadêmica às informações, notícias, atividades, dentre outros
através dos módulos de: graduação, pós-graduação
recursos, disponibilizados pelos professores. Além de
(stricto e lato sensu), ensino técnico, ensinos médio e
infantil, submissão e controle de projetos e bolsistas de também poderem consultar e visualizar como está o
pesquisa, submissão e controle de ações de extensão, seu rendimento acadêmico.
submissão e controle dos projetos de ensino (monitoria e
inovações), registro e relatórios da produção acadêmica Na teoria, era assim que deveria ser, mas o que se
dos docentes, atividades de ensino a distância e um observa na prática é que há uma série de fatores
ambiente virtual de aprendizado denominado Turma
que tornam a utilização do sistema difícil, sobretudo
Virtual. Assim como o Sistema Integrado de Patrimônio,
Administração e Contratos (SIPAC), também disponibiliza para aqueles que estão começando a utilizá-lo. Isso
portais específicos para: reitoria, professores, alunos, gera uma insatisfação coletiva, fazendo com que
tutores de ensino a distância, coordenações lato-sensu, alunos e professores procurem por outros meios de
stricto-sensu e de graduação e comissões de avaliação,
tanto institucional, quanto do docente.” (STI, 2016)
comunicação dos quais gostam e estão habituados,
onde essa integração, que deveria ser atendida pelo
O presente trabalho vai se ater a porção do sistema SIGAA, aconteça de maneira facilitada. Com isso,
destinada ao aluno, mais especificamente tratando somente aquelas tarefas que só se consegue realizar
de aspectos da interface do usuário, que afetam o através do SIGAA são realizadas pelos usuários, e
seu desempenho na execução de suas tarefas e, todo o potencial do sistema não é explorado. Dentre
consequentemente, na sua experiência, que é expressa os fatores que influenciam nessa insatisfação por parte
através de uma avaliação subjetiva dos efeitos do uso dos usuários, observa-se que os principais dizem
sobre seus sentimentos e emoções. respeito à má estruturação da informação, de forma que
a navegação pelo sistema não aconteça de forma fácil
O SIGAA está presente durante todo o ciclo de
e intuitiva, e o visual defasado da interface do usuário.
formação dos alunos, ele é um espaço virtual que
propicia a integração entre os alunos, professores Diante disso, observa-se a necessidade de uma
e coordenação. Configura-se, portanto, como uma reformulação da plataforma atual, levando em
extensão da sala de aula, onde os alunos têm acesso consideração os elementos da experiência do

20
usuário. Estes, serão detalhadamente explicados 1.3 Objetivos
posteriormente (Capítulo 3), visto que uma interface
centrada no utilizador tende ao sucesso e uma maior 1.3.1 Geral
aceitação e utilização.
Melhorar a experiência dos usuários (alunos) na
O melhoramento da interface do usuário implica utilização do Sistema Integrado de Gestão de Atividades
diretamente no aumento da qualidade de uso, que Acadêmicas (SIGAA).
por sua vez contribui para, dentre outros aspectos,
aumentar a produtividade dos usuários e reduzir o 1.3.2 Específicos
número e gravidade dos erros cometidos por eles.
Isso gera uma maior satisfação, que se converte em • Identificar a natureza dos problemas existentes no
fidelização. Dessa forma, a qualidade de uso se torna sistema atual;
um fator de diferenciação, aumentando a percepção • Identificar as principais dificuldades dos usuários na
de valor do produto, pois influencia a percepção do utilização do sistema atual;
usuário sobre a qualidade do sistema. (BARBOSA;
• Identificar as principais tarefas realizadas pelos
SILVA, 2010).
usuários para torna-las mais facilmente executadas;

Nesse trabalho, não entraremos em questões referentes • Propor uma nova interface centrada no usuário aluno,
à robustez do sistema, que dizem respeito à aspectos embasada nas considerações feitas por eles nas etapas
do âmbito do desenvolvimento (programação), que de avaliação do sistema atual;
tornam o uso do sistema eficiente, eficaz e livre de erros, • Avaliar a melhoria na experiência do usuário;
embora existam muitos problemas dessa natureza no
SIGAA.

21
 02 2.1 O que é Design? “A maioria das definições concorda em que o design
opera a junção desses dois níveis, atribuindo forma
material a conceitos intelectuais. Trata-se portanto de
Visto que o presente trabalho tem como seu foco uma atividade que gera projetos, no sentido de planos,
de estudo o design de interfaces, é importante, esboços ou modelos.” (CARDOSO, 1964, p. 20)
Referencial Teórico

primeiramente, que se conceitue o que é design e

como essa prática vem mudando no decorrer da sua Muito dessa discussão quanto ao significado do termo
existência. Posteriormente, também serão abordadas se dá não somente pela sua ambiguidade inerente,
áreas especificas dessa disciplina, o que reforça a mas também pela evolução histórica dessa disciplina.
necessidade de tomarmos tal conceituação como ponto Durante a história, muitos paradigmas se modificam, e
de partida. com a concepção de projeto em design não foi diferente.
Percebe-se que a forma de projetar sofreu muitas
Há diversas definições do que é design, estas buscam
alterações, sobretudo desde a era industrial, que se
na etimologia da palavra um embasamento para a
tem como o início do design como uma disciplina que
conceituação, sobretudo no Brasil, “onde design é um
pode ser estuda e aplicada. Essas modificações dizem
vocábulo de importação relativamente recente e sujeito
respeito ao foco do projeto em design, na sociedade
a confusões e desconfianças” (CARDOSO, 1964, p.20).
industrial se tinha o paradigma de se projetar coisas,
Etimologicamente, enquanto verbo pode ser entendido
objetos funcionais para serem produzidos em série,
como: projetar, desenhar, esquematizar, planificar; e
porém, o que se observa na sociedade pós-industrial
como substantivo: objetivo, plano, propósito, intensão.
é que o projeto também traz consigo uma preocupação
O termo vem do inglês, mas que tem como origem a
com aspectos humanos e sociais, sendo assim
palavra designare, do latim, que significa tanto designar
caracterizado como um design centrado no ser humano.
como desenhar, gerando essa ambiguidade na própria
(CARDOSO, 1964; KRIPPENDORFF, 2000)
origem da palavra, uma vez que se tem tanto um lado
mais abstrato de concepção, projeto, atribuição, quanto Segundo Krippendorff (2000), os designers foram ao
um lado mais concreto de registro, configuração e longo do tempo percebendo que os produtos que eles
formação. (CARDOSO, 1964) projetavam eram mais do que coisas, que eles tinham

22
uma preocupação social e geravam preferência. Em 2.2 Interação Humano-Computador
sua afirmação: “Não reagimos às qualidades físicas das
coisas, mas o que elas significam para nós”, essa ideia Os avanços tecnológicos tornaram o computador uma
fica claramente expressa. (KRIPPENDORFF, 2000). ferramenta fundamental na vida de muitas pessoas.
Cardoso, reforça essa ideia afirmando de “à medida Atualmente, diversas atividades humanas podem ser
que a produção industrial vai se tornando mais precisa realizadas através do auxílio desse dispositivo. Seu
e diferenciada, é no âmbito eminentemente subjetivo da uso como meio para se atingir algum objetivo, mudou
experiência e da emoção que as verdadeiras decisões significativamente o comportamento das pessoas, e
de projeto deverão se dar”. (CARDOSO, 1964, p. 236) isso pode ser visto em simples atividades do dia-a-dia,
como fazer compras online e não precisar ir até uma
Essa perspectiva sobre o design vai de encontro
loja, se comunicar com alguém em qualquer parte do
diretamente com o argumento de que o design é um
mundo através das redes sociais sem precisar estar
ato de comunicação, em que se há uma troca de
fisicamente perto da outra pessoa, ou até mesmo
significados entre o designer e o utilizador. Sendo assim,
assistir filmes ou ouvir músicas online sem precisar
é preciso que o designer tenha um bom conhecimento
possuir a mídia física (DVD/CD) e um aparelho para
sobre o utilizador a quem é destinada a comunicação
reprodução. Essa interação é proporcionada pela
(NORMAN, 2006 apud SABOIA, 2014). Pode-se
interface do utilizador, que é formada por software
entender, portanto, que o designer fica responsável de
(sistema em si) e hardware (monitor, teclado, mouse,
capturar as ideias e lhes dar uma forma visual para que
etc.). Todas essas conveniências citadas decorrem de
os outros possam entendê-las (SAMARA, 2010).
interfaces bem projetadas, que realmente facilitam a
É essa abordagem do design como uma prática de vida dos usuários.
projeto centrada no ser humano que fundamenta e
Todavia, nem todas as interfaces disponíveis são fáceis
norteia o presente trabalho.
de usar. Muitas delas complicam um processo que
deveria ser fácil de ser realizado. Foi por isso que se
percebeu a necessidade de se aprofundar os estudos

23
 em estratégias que facilitassem o engajamento das configura como uma ciência multidisciplinar, que engloba
pessoas com os sistemas computacionais, através da diversas áreas do conhecimento. Para se entender
criação de uma disciplina que trabalhasse conceitos sobre a cultura, os discursos e comportamentos dos
relativos à facilidade de uso desses sistemas. O usuários no contexto onde realizam suas atividades,
objetivo desses estudos é formular uma série de IHC se beneficia de conhecimentos e métodos de áreas
diretrizes que conduzam o projeto de interfaces como Psicologia, Sociologia, Filosofia e Antropologia.
computacionais que simplifiquem essa interação entre Já para conceber a interface com o usuário se utilizam
humano e computador, para que qualquer pessoa sem conhecimentos das áreas de Design, Ergonomia,
o mínimo de conhecimento prévio, habilidade ou nível Semiótica, Linguística e Engenharia. (BARBOSA;
de instrução possa acessá-los (CARVALHO, 2003). SILVA, 2010; PREECE et al. 2005)

Segundo as Diretrizes Curriculares do MEC (2002 apud Essa multidisciplinaridade nos permite entender melhor
PELISSONI; CARVALHO, 2002), Interação Humano- os fenômenos de interação entre usuário e sistema
Computador (IHC) pode ser definida como “a disciplina computacional. Dessa forma, podemos melhorar
relacionada ao projeto, implementação e avaliação de a concepção, desenvolvimento e inserção dessas
sistemas computacionais interativos para uso humano, tecnologias na vida das pessoas, considerando-as
juntamente com os fenômenos relacionados a esse como parte integrante do processo para se alcançar
uso”. Portanto, percebe-se que essa disciplina não uma melhor qualidade e experiência de uso. Tais
está ligada somente às questões técnicas de interface assuntos serão expandidos e melhor abordados nos
e interação humano-computador, mas também à tópicos que se seguem.
aspectos decorrentes desse uso, tais como usabilidade
e experiência do usuário.
2.2.1 Interação e Interface
Como o próprio nome sugere, a disciplina de IHC
se preocupa tanto com aspectos relacionados ao Antes de entrarmos em detalhes sobre como se
computador quanto ao ser humano. Dessa forma, ela se consegue um aumento na qualidade e experiência

24
de uso de um sistema interativo, identificaremos os A definição de interação nesse contexto evoluiu
elementos envolvidos no processo de interação entre ao longo do tempo, inicialmente, entendia-se esse
usuário e sistema e conceitua-los. processo como a operação de máquinas. Contudo,
após o surgimento de pesquisas de base cognitiva,
A Figura 2.1 ilustra uma situação típica de uso, onde
passou-se a enfatizar a interação como um processo
um usuário busca cumprir seu objetivo através de um
de comunicação com máquinas. (CARD, MORAN
processo de interação com a interface do sistema
e NEWELL, 1983). Segundo Norman (1968 apud
interativo em determinado contexto de uso. Este, diz
BARBOSA; SILVA, 2010), a interação começa com a
respeito ao momento de utilização do sistema (quando)
formulação de um objetivo pelo usuário, que planeja
e o ambiente físico, social e cultural em que ocorre a
suas ações, utiliza a interface, percebe e interpreta
interação (onde). (BARBOSA; SILVA, 2010)
as respostas do sistema e avalia se seu objetivo foi
alcançado. Porém, o que observa mais recentemente
Figura 2.1 – Elementos envolvidos no processo de interação
é uma abordagem da interface como a comunicação
de pessoas através dos sistemas computacionais (DE
SOUZA, 2005 apud BARBOSA; SILVA, 2010).

Para se entender melhor essas diferentes perspectivas

de interação usuário-sistema, Kammersgaard (1988
apud BARBOSA; SILVA, 2010;) as categorizam em
quatro tipos: perspectiva de sistema, de parceiro de
curso, de ferramenta e de mídia.

Fonte – BARBOSA; SILVA, 2010 (Adaptado). Na perspectiva de sistema o processo de interação entre
usuário e sistema é entendido como uma transmissão de
dados, e se aproxima da comunicação entre máquinas.
Para isso, é comum se utilizar linguagem de comando

25
 ou programação. Utilizar o terminal de comando do assim, a eficiência no uso depende muito do nível de
sistema operacional (Prompt Comando) ou utilizar os conhecimento que o usuário tem sobre determinada
atalhos Ctrl + C, Ctrl + V, são exemplos da utilização da ferramenta. Quanto maior seu conhecimento, mais
perspectiva de sistema. fluida e automática serão suas ações, e esse é o
objetivo da utilização dessa perspectiva.
Na perspectiva de parceiro de curso, em contraponto a
anterior, a intensão é tornar a interação entre humano e Na perspectiva de mídia o sistema interativo é visto
computador mais próximo da interação entre humanos. como um meio pelo qual as pessoas se comunicam
Dessa forma, o sistema interativo assume um papel à umas com as outras. Ela pode estar presente tanto
altura de um ser humano, “sendo capaz de raciocinar, como uma mediação da comunicação entre pessoas,
fazer interferências, tomar decisões, adquirir informação, como também nos sistemas de ajuda ou instruções
enfim, o sistema deve ser capaz de raciocinar de forma de uso de uma interface, em que o designer comunica
semelhante ao usuário” (BARBOSA; SILVA, 2010, p.23). como determinadas ações podem ser realizadas.
Nessa perspectiva utiliza-se de linguagem natural, o
Diante disso, sabendo que a interação é o processo
que torna o processo mais complicado, uma vez que
que ocorre durante o uso, o que seria a interface?
ainda se têm muitos desafios no processamento desse
Para Moran (1981, apud BARBOSA; SILVA, 2010, p.
tipo de linguagem. Um exemplo disso são problemas
25), “a interface de um sistema interativo compreende
na tradução automática de textos.
toda a porção do sistema com a qual o usuário mantém
Na perspectiva de ferramenta, “o sistema interativo é contato físico (motor ou perceptivo) ou conceitual
considerado um instrumento que auxilia o usuário a durante a interação”. Esse contato físico na interface
realizar suas tarefas” (BARBOSA; SILVA, 2010, p.23). ocorre através “do combinado de software e hardware
Um exemplo da aplicação dessa perspectiva seria necessário para viabilizar e facilitar os processos de
a utilização de softwares gráficos por um designer comunicação entre o usuário e a aplicação” (DE SOUZA
em um estúdio, em que ele manipula as ferramentas et al.,1999).
disponíveis para desenvolver seus projetos. Sendo

26
 Dispositivos de entrada, como teclado, mouse, joystick, 2.2.2 Qualidade em IHC
microfone, caneta (que escreve sobre a tela) e câmera
(webcam), permitem ao usuário agir sobre a interface
do sistema e participar ativamente da interação. Já Já é sabido que ao interagir com a interface de um
os dispositivos de saída, como monitor, impressora e sistema interativo o usuário possui um objetivo e ele
alto falante, permitem ao usuário perceber as reações espera receber o apoio computacional necessário para
do sistema e participar passivamente da interação.
conseguir cumpri-lo. Quando as percepções do usuário
(BARBOSA; SILVA, 2010, p. 25)
sobre as respostas dadas pelo sistema são positivas,
O contato conceitual com a interface envolve a temos implicações diretas na qualidade e experiência
interpretação das respostas dada pelo sistema referente de uso. Portanto, uma das principais preocupações do
ao contato físico com os dispositivos de entrada e saída. designer ao projetar interfaces deve ser atentar para os
“Essa interpretação permite ao usuário compreender as critérios de qualidade que tornam uma interface mais
respostas do sistema e planejar os próximos caminhos rápida, segura e agradável de ser utilizada.
de interação”. (BARBOSA; SILVA, 2010, p. 26) O critério de qualidade mais conhecido é a usabilidade
Como a interface é o único meio de interação entre e, por conseguinte, o mais frequentemente considerado
usuário e sistema, muitos acreditam que a interface (BARBOSA; SILVA, 2010), pois está relacionada
que entram em contato é o próprio sistema. (ROCHA; com a facilidade e eficiência no uso de um sistema
BARANAUSKAS, 2003). Por isso, Fonseca et al. (GOULD; LEWIS, 1985; apud PRATES, 2007). Porém,
(2012) enfatiza que uma interface mal projetada pode não menos importante, existem outros critérios que
acarretar no fracasso do sistema, por melhor que seja potencializam o sucesso do projeto de uma interface,
toda a engenharia, tecnologias e princípios aplicados e eles também serão abordados nesse trabalho, são
na sua concepção e desenvolvimento. Logo, faz-se eles: acessibilidade e comunicabilidade.
necessário investimentos em aspectos que promovam
a qualidade da interação e uso da interface, para que
os usuários aproveitem ao máximo as funcionalidades
oferecidas pelo sistema.

27
 [Link] Usabilidade • Facilidade de aprendizado (learnability)
• Facilidade de recordação (memorability)
Segundo a norma ISO/IEC 9126 (1991 apud • Eficiência (efficiency)
BARBOSA; SILVA, 2010, p.28), que define os critérios • Segurança no uso (safety)
de qualidade de um sistema, usabilidade é definida • Satisfação do usuário (satisfaction)
como: “Um conjunto de atributos relacionados com o
esforço necessário para o uso de um sistema interativo, Preece et al. (2005), elencam além dos fatores listados
e relacionados com a avaliação individual de tal uso, acima, mais dois fatores. São eles: ser eficaz no uso
por um conjunto específico de usuários”. Esse conceito (eficácia) e ser de boa utilidade (utilidade).
evoluiu e foi redefinido em 1998, sendo agora descrito
A eficácia se refere a quanto um sistema é bom em
como a “capacidade do software de ser compreendido,
fazer o que se espera dele. Já a eficiência, refere-se
aprendido, usado e apreciado pelo usuário, quando
à quanto o sistema auxilia os usuários na realização
usado nas condições especificadas” (ABNT, 1998 apud
de suas tarefas. Por exemplo, em uma compra online,
DIAS, 2006).
a possibilidade de se adicionar o produto desejado ao
Para Preece et al. (2005), a usabilidade de um produto carrinho e efetuar a compra, caracteriza sua eficácia.
interativo refere-se aos fatores que determinam o quão O site gravar os dados pessoais de cadastro tais como
fácil de usar, eficiente e agradável é esse produto, na endereço de entrega, para que em uma compra futura o
perspectiva do usuário. Nielsen (2007), complementa usuário não precise preencher novamente todos esses
dizendo que usabilidade se refere também à rapidez dados, caracteriza sua eficiência, uma vez que tornou
com que os usuários aprendem a utilizar um produto o processo mais fácil e rápido de ser feito.
interativo, a eficiência deles ao usá-lo, o quanto lembram
A facilidade de aprendizado (learnability) se refere
de como se utiliza, seu grau de propensão a erros e o
ao quão fácil é aprender a usar um produto interativo,
quanto gostam de utilizá-lo. Esse conjunto de fatores
para que se alcance um bom nível de desempenho e
por Nielsen considerados podem ser descritos como:
competência nesse uso, levando em consideração o

28
tempo e esforço necessários para isso. Os usuários cometidos durante a interação. Preece et al. (2005)
não gostam de passar muito tempo tendo que aprender dizem que existem duas formas de se conseguir
a utilizar algo, quando isso acontece eles podem se segurança no uso: prevenindo situações problemáticas
sentir frustrados e até desistir de continuar usando. e auxiliando os usuários a se recuperarem das
mesmas. A primeira pode ser alcançada reduzindo a
A facilidade de recordação (memorability) se refere
possibilidade de o usuário pressionar teclas, comandos
ao esforço cognitivo exigido do usuário para que ele
ou botões indesejados. Um exemplo seria não colocar
recorde como utilizar a interface. Uma vez aprendido
um botão “deletar” próximo de um botão de “gravar”. A
a utilizar, é importante que a interface dê suporte ao
segunda maneira, seria fornecer ao usuário formas de
usuário para que, mesmo depois de passar um longo
se recuperar de um erro cometido, como os recursos
tempo sem utilizá-la, não tenha que aprender tudo
de desfazer e refazer ações (undo/redo), ou caixas de
novamente.
confirmação do tipo “Tem certeza que deseja excluir
“Há muitas formas de projetar a interação para que esse arquivo permanentemente?”, no caso de ativar
ela forneça suporte nesse aspecto. Por exemplo, os
uma opção de deletar.
usuário podem ser auxiliados a lembrar a sequência
de operações em estágios diferentes de uma tarefa por A utilidade refere-se “à medida na qual o sistema
meio de ícones representativos, nomes de comandos e
propicia o tipo certo de funcionalidade, de maneira que
opções de menu”. (PREECE et al., 2005, p.39)
os usuários possam realizar aquilo de que precisam
A segurança no uso refere-se ao “grau de proteção ou que desejam.” (PREECE et al., 2005, p. 37). Um
de um sistema contra condições desfavoráveis ou software de edição de texto como InDesign que permite,
até mesmo perigosas para o usuário”. (BARBOSA, além da edição do texto, que o usuário possa criar
SILVA, 2010, p. 31) O erro faz parte de um processo formas vetoriais sem recorrer a outro software gráfico
de aprendizado, por isso, é importante que o sistema específico para essa função, possui alta utilidade. Já
seja seguro para que o usuário não tenha medo de um software de desenho que só permite o desenho
explorar a interface e aprender com isso. Além disso, através de formas poligonais e não permite que sejam
ter a possibilidade de se recuperar de eventuais erros feitos desenho à mão livre, possui pouca utilidade.

29
 O último fator refere-se à satisfação do usuário, que O Decreto Federal nº 5.296/2004, em seu artigo 8º, I,
está relacionado à “avaliação subjetiva que expressa estabelece que:
o efeito do uso do sistema sobre as emoções e os “I – acessibilidade: condição para utilização, com
sentimentos do usuário”. (BARBOSA, SILVA, 2010, p. segurança e autonomia, total ou assistida, dos espaços,
31). Esse fator, embora seja considerado por muitos mobiliários e equipamentos urbanos, das edificações,
dos serviços de transporte e dos dispositivos, sistemas
um critério de usabilidade, segundo Bevan (2009 apud
e meios de comunicação e informação, por pessoa
BARBOSA, SILVA, 2010), para Preece et al. (2005) portadora de deficiência ou com mobilidade reduzida;”
é considerado como experiência do usuário (user (BRASIL, Decreto Federal, nº 5.296, 2004)
experience). Consideramos a segunda abordagem mais
válida, e por isso voltaremos a tratar desse assunto em Percebe-se que a definição acima é bem abrangente,
mais detalhes na seção 2.3. focalizando desde espaços a meios de comunicação.
Embora ressalte adequadamente que a utilização
[Link] Acessibilidade deve se dar com segurança e autonomia, restringe
sua abrangência apenas às pessoas com deficiência
O critério de acessibilidade diz respeito a capacidade
ou com mobilidade reduzida (W3C BR, 2013). Barbosa
do usuário de interagir com a interface de um sistema
e Silva (2010) ressaltam que sistemas não devem ser
interativo sem que haja obstáculos nesse processo.
desenvolvidos para atender a um grupo específicos
Melo e Baranauskas (2005, apud BARBOSA;
de usuários, pelo contrário, tratar de acessibilidade
SILVA, 2010) definem acessibilidade como sendo “a
significa “incluir pessoas com limitações ou deficiências
flexibilidade proporcionada para o acesso à informação
no grupo de usuários-alvo, e não excluir desse grupo as
e à interação, de maneira que usuários com diferentes
pessoas sem limitações ou deficiências”. (BARBOSA;
necessidades possam acessar e usar esses sistemas”.
SILVA, 2010, p. 33)
Mais especificamente, acessibilidade na web significa
que “pessoas com deficiência podem perceber, Para isso, é importante conhecer os usuários finais
entender, navegar, interagir e contribuir para a web.” do sistema interativo, com o objetivo de identificar se
(WAI, 2005) existem, dentre estes, usuários com necessidades

30
especiais, que tipos de limitações eles possuem e que Barbosa e Silva (2010), ressaltam que compreender
estratégias podem ser desenvolvidas para suprir suas a lógica do design não significa dizer que os usuários
necessidades. necessitam adquirir conhecimentos técnicos sobre
design de sistemas interativos, mas sim entender as
É sabido que a Universidade Federal do Ceará possui
reações de causa e consequência decorrentes de suas
alunos com necessidades especiais permanentes,
interações.
tais como auditivas e visuais. Logo, é importante que
se apliquem estratégias inclusivas para esse tipo de A analogia é comumente utilizada para facilitar a
usuários também. Esta, é uma função frequentemente compreensão da lógica do design. Este recurso de
atribuída ao desenvolvedor web, por isso, só ressaltamos comunicação, permite ao usuário, com base em suas
sua relevância sem entrar em detalhes sobre o tema. experiências anteriores, ter uma noção de como
interagir com determinada função de um sistema
interativo, mesmo que nunca o tenha feito. Dessa forma,
[Link] Comunicabilidade este recurso deve contribuir para que “as hipóteses
do usuário sobre como interagir sejam compatíveis
Segundo de Souza et al. (1999, p.5), a comunicabilidade
com aquelas pretendidas pelo designer”. (BARBOSA,
de um sistema “é a sua propriedade de transmitir ao
SILVA, 2010, p. 38)
usuário de forma eficaz e eficiente as intensões e
princípios de interação que guiaram o seu design”. A Um exemplo de comunicabilidade, pode ser observado
interface deve comunicar ao usuário a lógica do design, no reprodutor de música de um computador, que
para que ele entenda as intensões e decisões tomadas claramente expressa uma analogia feita com um
durante o processo de projeto. Segunda a autora, reprodutor de música de um automóvel. A metáfora
quanto mais o usuário compreende a lógica aplicada do Desktop, proposta por Alan Kay, é outro exemplo
na concepção da interface, “maiores são as chances clássico da apropriação de elementos do mundo real
do usuário conseguir fazer um uso criativo, eficiente e para facilitar a aproximação de usuários (até mesmo os
produtivo da aplicação”. leigos) de experiências computacionais mais intuitivas
e agradáveis.
31
 2.3 Experiência do usuário projeto (PREECE et al., 2005). Dessa forma, cada vez
mais estão se criando interfaces que são “satisfatórias,
A satisfação do usuário, citada anteriormente como uma agradáveis, divertidas, interessantes, úteis, motiva-
meta de usabilidade, é entendida por Preece et al. (2005) doras, esteticamente apreciáveis, incentivadoras
como uma área a parte, designada experiência do usuário de criatividade, compensadoras, emocionalmente
(User Experience – UX). Para as autoras, as metas de adequadas” (PREECE et al., 2005, p. 40)
usabilidade são mais objetivas, uma vez que enfocam a
Norman (2008), em seu livro Design Emocional, fala
maneira como os usuários lidam com o sistema interativo.
sobre os três níveis do design, que ele denomina:
Esse enfoque visa, principalmente, a melhoria da eficiência
visceral, comportamental e reflexivo. O nível visceral
e da produtividade no trabalho. Já as metas decorrentes
do design está intrinsecamente ligado à aparência do
da experiência do usuário têm um caráter mais subjetivo,
produto, diz respeito ao impacto emocional imediato
pois lidam com aspectos ligados à emoção e sentimentos
e julgamentos subsequentes (feio ou belo; seguro ou
resultantes da experiência de uso.
perigoso). É o nível biológico atuando, que tende a
Até pouco tempo, o uso de sistemas interativos explicar porque nós gostamos mais de formas simétricas,
era muito relacionado ao trabalho. Por conta disso, organizadas e cores fortes, claras e saturadas. É o que
os aspectos funcionais eram mais trabalhados em nos faz escolher determinado produto só por causa de
detrimento da satisfação do usuário. Com o passar sua embalagem, por sua cor, cheiro ou textura.
do tempo, os sistemas interativos foram se tornando O nível comportamental se refere ao uso, e está
cada vez mais presentes na vida das pessoas, em diretamente relacionado ao desempenho no mesmo. O
áreas bem diversificadas tais como entretenimento, usuário gosta de se sentir no controle, sentir que têm as
saúde, educação, política, etc. Além disso, podendo competências necessárias para realizar suas tarefas
ser utilizados em diversos locais como no trabalho, em sem obstáculos, mesmo que ele saiba que determinada
casa, na escola, na rua, etc. Diante disso, pesquisadores interface foi projetada para lhe dar o suporte necessário
e profissionais tiveram que considerar os aspectos que e guia-lo na sua experiência. Segundo o autor, “alguns
criam uma boa experiência do usuário no processo de
32
itens muito bem concebidos em termos estéticos usuário abre o jogo e começa sua experiência de uso,
erram o alvo quando se trata de cumprir seu propósito consegue rapidamente entender o funcionamento do
funcional” (NORMAN, 2008, p. 92), por isso muitos mesmo e realizar suas tarefas com um bom desempenho.
produtos fracassam. Portanto, é nesse nível que os Isso faz com que ele sinta prazer e vontade de continuar
profissionais de usabilidade enfocam, para que o uso jogando (nível comportamental). O usuário volta até
se torne eficiente, fluído, automático. a página do jogo na loja de aplicativos, avalia-o com
cinco estrelas e deixa um comentário falando sobre sua
O terceiro nível é denominado reflexivo, é onde há
experiência positiva. No dia seguinte, fala para seus
a interpretação, compreensão e raciocínio sobre
amigos sobre o novo jogo que adquiriu, recomendando
determinado produto e seu uso. É onde a cultura,
para eles (nível reflexivo).
experiência, grau de instrução e diferenças individuais
atuam, podendo até anular os demais níveis. Segundo Acima foi descrito uma situação ideal, em que houve
Norman (2008, p. 107), “por um lado, diz respeito uma sintonia entre os três níveis. Porém, algumas
ao significado das coisas, às lembranças pessoais peculiaridades poderiam acontecer. Ainda levando
que alguma coisa evoca. Por outro, diz respeito à o exemplo em consideração, mesmo que os gráficos
autoimagem e às mensagens que um produto envia às do jogo fossem bons, mas sua jogabilidade fosse
outras pessoas”. É por isso que determinados produtos ruim, os usuários poderiam ficar frustrados e não iriam
podem ser, ao mesmo tempo, feios e desagradáveis recomendar o jogo para outras pessoas. Ou o contrário,
para alguns e bonitos e agradáveis para outros. os gráficos poderiam ser desagradáveis, mas se o jogo
proporciona uma boa jogabilidade, o usuário vai ter uma
Para exemplificar, imaginemos a seguinte situação: um
boa experiência, e os níveis comportamental e reflexivo
usuário, em seu celular, utiliza a loja online de venda
se sobressaem em detrimento do visceral.
de aplicativos. Ele acessa um jogo em destaque e logo
se impressiona com a qualidade dos gráficos vista nas Segundo Norman (2008), a interação entre os três
telas de pré-visualização da interface. Por conta disso, níveis é complexa. O designer tem a difícil missão de
faz rapidamente download do jogo (nível visceral). O fazer com que eles trabalhem de forma equilibrada.

33
 Evidentemente, não é uma tarefa fácil, mas quando bem seja porque a aplicação não funciona adequadamente
feita impulsiona a experiência do usuário, garantindo ou o sistema não lhe fornece informações suficientes
a aceitação e aprovação dos mesmos. Norman (2008, para utilizá-lo com mais eficiência, isso vai prejudicar
p. 59) complementa dizendo que “nenhum produto a experiência do usuário e ele sairá frustrado do seu
individual pode esperar satisfazer todo mundo. O sistema interativo (PREECE et al. 2005).
designer deve conhecer seu público-alvo”. Embora Garret (2003, p. 19) diz que se um site não fornece uma
ele tenha descrito os níveis separadamente, qualquer experiência positiva ao seu usuário, eles não vão utilizá-
experiência real envolve todos três. O autor sintetiza lo. E sem usuários, “tudo o que se têm é um servidor
esses níveis em características de produto, como pode Web empoeirado em algum lugar, esperando atender
ser visto na Figura 2.2. uma solicitação que nunca virá”. Portanto, ao visitarem
um site, os usuários devem ser contemplados com uma
Figura 2.2 – Síntese dos três níveis do Design Emocional.
experiência coerente, intuitiva e prazerosa.
Para que isso aconteça, o designer deve tentar prever
todas as decisões possíveis que os usuários podem
tomar durante seu processo de interação, e formular
estratégias para dar o apoio adequado ao usuário. Essa
prática de projeto é denominada design centrado no
usuário (user-centered design) (GARRET, 2003). “Se as
vozes e necessidades dos usuários forem claramente
Fonte – Do autor, adaptado de NORMAN, 2008, p. 59. ouvidas e levadas em consideração, é mais provável
que o resultado final preencha as suas necessidades e
expectativas” (PREECE et al., 2005, p. 223).
Quando esses níveis não interagem corretamente, a
experiência do usuário é afetada negativamente. Se Garrett (2003) propõe a divisão da experiência do
as expectativas do usuário não são atendidas, quer usuário em seus elementos componentes, observando-

34
os por diversas perspectivas. Com isso, pretende- objeto de estudo desse trabalho) “mudanças radicais
se assegurar que as necessidades dos usuários são possíveis se os resultados da avaliação indicam
direcionem todo o restante do processo de projeto. Essa um problema”.
metodologia será abordada em detalhes no capítulo 3.
Para efetuar essas avaliações existem vários métodos
Sua primeira etapa, consiste na aplicação de métodos
descritos na literatura, que podem ser empregados
de coleta de dados sobre os usuários, nomeadamente
para avaliar a qualidade de uso. Cada método atende
suas necessidades, o domínio do problema e o contexto
melhor a certos objetivos de avaliação, orientam quando
de uso do produto final. E é sobre esse assunto que
e onde os dados devem ser coletados, como devem
tratamos na seção seguinte.
ser analisados e quais os critérios de qualidade de uso
ele privilegia. Esses métodos podem ser classificados
2.4 Métodos de avaliação de interfaces em: métodos de investigação, de observação e de
inspeção. (BARBOSA; SILVA, 2010).
Por esse trabalho se tratar de um redesign da interface
Os métodos de investigação envolvem questionários,
de um sistema existente, percebeu-se a necessidade
a realização de entrevistas, grupos de foco ou estudos
de, primeiramente, realizar a avaliação da mesma.
de campo, dentre outros. Segundo Barbosa e Silva
O objetivo principal é de verificar se o sistema apoia
(2010, p. 301), “esses métodos permitem ao avaliador
adequadamente os usuários no cumprimento de suas
ter acesso, interpretar e analisar concepções, opiniões,
tarefas no contexto de uso em que se encontra. Com
expectativas e comportamento do usuário relacionados
isso, pretende-se identificar os problemas presentes na
com sistemas interativos”. São frequentemente
interface atual, para que os mesmos sejam resolvidos
utilizados no início do processo de projeto, para se ter
e não estejam presentes na nova interface. Obtendo,
um melhor entendimento da situação atual, identificando
portanto, um produto com uma maior qualidade
as necessidades dos usuários e oportunidades de
(BARBOSA; SILVA, 2010). Preece et al. (2005, p. 343)
intervenções.
diz que quando o sistema interativo que está sendo
avaliado não possui versões prévias (que é o caso do Os métodos de inspeção servem para tentar identificar

35
 possíveis problemas que os usuários possam ter aplicados no ambiente real de atividade do usuário ou
enquanto interagem com a interface. Esse tipo de em laboratório, mas o primeiro gera resultados mais
avaliação é feita por profissionais, pois nem sempre ricos sobre a atuação do usuário. Já a de laboratório, por
se têm acesso fácil aos usuários finais, portanto, ser controlado por um avaliador, são mais direcionadas.
são exploradas experiências de uso potenciais. Os (BARBOSA; SILVA, 2010)
avaliadores se colocam no lugar do usuário e utilizam
a interface em busca de problemas. Mas, de fato, o
2.4.1 Questionários
avaliador não é o usuário, por conta disso, ele “pode
se concentrar mais em alguns aspectos de usabilidade
Segundo Barbosa e Silva (2010, p. 150), “um
do que em outros” (NIELSEN, 1993 apud BARBOSA;
questionário é um formulário impresso ou online com
SILVA, 2010) e isso pode se caracterizar como um
perguntas que os usuários devem responder, a fim
aspecto negativo. Esses métodos podem ser aplicados
de fornecer os dados necessários em uma pesquisa,
durante todo o processo de design, conforme vão
análise ou avalição”. Eles podem conter perguntas
sendo produzidos os protótipos. (BARBOSA; SILVA,
abertas e fechadas, embora privilegiem mais as
2010; PREECE et al., 2005).
fechadas, por serem de preenchimento mais rápido.
Os métodos de observação são métodos de avaliação Como normalmente a equipe que prepara a avaliação
empíricos, em que o avaliador se encontra em um não está presente no momento em que o usuário
contexto real de uso e registra os dados observados, responde o questionário, é importante que este seja
estes permitem identificar os problemas que os muito claro, para que suas perguntas não gerem
usuários enfrentam durante sua experiência de uso. dúvidas e sejam de fácil compreensão. (BARBOSA;
Diferentemente dos métodos de inspeção, os de SILVA, 2010; FONSECA, et al. 2012)
observação demandam mais tempo, pois lidam com
É uma das técnicas de coleta de dados mais
situações reais e dependem do recrutamento de
frequentemente utilizadas. Isso se dá, principalmente,
usuários. Porém, os dados coletados costumam ser
por poder alcançar um maior número de pessoas,
mais significativos e ter mais valor. Eles podem ser

36
mesmo que estes estejam geograficamente dispersos. 2.4.2 Inspeção de usabilidade utilizando checklists
Conseguindo, dessa forma, uma amostra mais
significativa do público-alvo (PREECE, et al. 2005). Segundo Winckler (2002), com base em estudos nas
Outro ponto positivo é a possibilidade de o usuário áreas de ciência cognitiva, psicologia e ergonomia,
responder o questionário onde e quando quiser. No os conhecimentos sobre usabilidade têm sido
entanto, há a possibilidade dos usuários que receberam sistematizados sob a forma de um conjunto de
o questionário não o responderem, uma vez que não recomendações ergonômicas (guidelines). Algumas
há ninguém controlando esse preenchimento. destas, tratam-se de um conhecimento prático resultante
da observação dos acertos e erros no desenvolvimento
Para formulação de um questionário o avaliador deve,
de vários projetos.
primeiramente, ter em mente quais são seus objetivos.
Estes, serão a base para a formulação das perguntas A avaliação de interfaces utilizando essas
que compõem o questionário. Segundo Preece et al. recomendações, é feita por um ou mais avaliadores,
(2005), um questionário, normalmente, se estrutura da e exige uma grande experiência por parte destes.
seguinte maneira: primeiro são elaboradas perguntas Os avaliadores inspecionam a interface em busca de
acerca de informações demográficas (ex: sexo, idade) problemas, e quando encontram o associam à uma
e sobre detalhes relevantes sobre a experiência do ou mais recomendações que não foram seguidas
usuário (ex: quanto tempo utiliza computador e internet, (WINCKLER, 2002). Por conta disso, o avaliador deve
qual seu desempenho no uso). Essas perguntas possuir um bom conhecimento sobre as recomendações.
auxiliam o avaliador a categorizar os tipos de usuários Caso contrário, problemas graves podem passar
e entender melhor o contexto de uso. Em seguida, despercebidos e tornar o método ineficiente.
vêm as perguntas específicas, que visam responder
Como alternativa a esse problema, Winckler (2002,
aos objetivos da avaliação (ex: identificar as principais
p. 34) sugere a utilização de listas de verificação
dificuldades do usuário no uso de um sistema interativo).
(ckecklists), “que nada mais é do que um conjunto
mínimo de recomendações diretamente aplicáveis ao

37
 projeto, que em geral, não necessitam de um grande Existem diversas listas de verificação publicadas, cada
esforço de interpretação”. Este tipo de inspeção, uma focando em determinadas recomendações e se
possibilita uma avaliação rápida de usabilidade e facilita adequando ao contexto ao qual será aplicada. Um
a análise das recomendações. “Geralmente, ckecklists exemplo é o ErgoList, um serviço Web desenvolvido por
focalizam alguns aspectos considerados importantes designers, ergonomistas e cientistas da computação,
da interface e que potencialmente, podem hospedar os dentre outros profissionais, no Laboratório de
problemas mais graves de usabilidade” (WINCKLER, Utilizabilidade (LabiUtil) da Universidade Federal de
2002, p. 34) Santa Catarina (UFSC). É uma ferramenta bem didática,
possui notas explicativas, exemplos e glossário, para
Para Cybis (2007, p.187), “as inspeções de ergonomia
facilitar no entendimento das recomendações e dos
por meio de listas de verificação permitem que
termos utilizados nas mesmas.
profissionais, não necessariamente especialista
em ergonomia, identifiquem problemas menores e O Ergolist possui 18 checklists, “cada um deles é
repetitivos das interfaces”. Para o autor, a avaliação especializado em um aspecto ou critério que determina
com checklists apresenta as seguintes vantagens: a ergonomia de uma interface humano-computador”
• Fornecer conhecimento ergonômico, estando ele no (ERGOLIST, 2016). Estes checklists são baseados
próprio checklist; nas recomendações ergonômicas para avaliação de
• Sistematizar as avaliações inspecionando-as com interfaces propostas por Bastien e Scapin (1993). Tais
qualidade; critérios são descritos a seguir:
• Sistematizar as avaliações inspecionando com • Presteza: verifica se o sistema informa e conduz o
facilidade os problemas de usabilidade; usuário durante a interação;
• Reduzir a subjetividade associada a processos de • Agrupamento por localização: verifica se a distribuição
avaliação; espacial dos itens traduz as relações entre informações;
• Reduzir os custos da avaliação, pois é um método • Agrupamento por formato: verifica os formatos dos
de rápida aplicação, não necessita de pessoal itens como meio de transmitir associações e diferenças;
especializado.
38
• Feedback: avalia a qualidade do feedback imediato • Correção de erros: verifica as facilidades oferecidas
às ações do usuário; para que o usuário possa corrigir os erros cometidos;
• Legibilidade: verifica a legibilidade das informações • Consistência: avalia se é mantida uma coerência no
apresentadas nas telas do sistema; projeto de códigos, telas e diálogos com o usuário;
• Concisão: verifica o tamanho dos códigos e termos • Significados: avalia se os códigos e denominações
apresentados e traduzidos no sistema; são claros e significativos para os usuários do sistema;
• Ações mínimas: verifica a extensão dos diálogos • Compatibilidade: verifica a compatibilidade do sistema
estabelecidos para a realização dos objetivos do com as expectativas e necessidades do usuário em
usuário; sua tarefa.
• Densidade informacional: avalia a densidade
Para aplicação desse método, o avaliador não
informacional das telas apresentadas pelo sistema;
necessariamente tem que responder a todas as
• Ações explícitas: verifica se o usuário comanda
questões do checklist. Ele deve, primeiramente, verificar
explicitamente as ações do sistema;
se o item é ou não aplicável e, posteriormente, caso o
• Controle do usuário: avalia as possibilidades de o
item seja aplicável, analisar se o mesmo está ou não
usuário controlar o encadeamento e a realização das
presente no sistema interativo em questão. Segundo
ações;
Winckler (2002), é mais adequado a aplicação desse
• Flexibilidade: verifica se o sistema permite personalizar
método em protótipos funcionais, uma vez que muitos
as apresentações e os diálogos;
itens dizem respeito à aspectos de interação.
• Experiência do usuário: avalia se usuários com
diferentes níveis de experiência têm iguais possibilidades
de obter sucesso em seus objetivos; 2.4.3 Teste de usabilidade
• Proteção contra erros: verifica se o sistema oferece as
oportunidades para o usuário prevenir eventuais erros. O teste de usabilidade consiste na observação dos
• Mensagem de erro: avalia a quantidade das mensagens usuários durante a realização de determinadas tarefas
de erro enviadas aos usuários em dificuldades; de um sistema interativo, ou seja, consiste em avaliar a

39
 usabilidade a partir das experiências de uso do usuário- metas de usabilidade definidas no início do projeto”. Os
alvo (RUBIN, 2008). Para isso, são convidados usuários resultados desse processo são traduzidos em melhorias
significativos do público-alvo e são determinadas um para o sistema, através da resolução dos problemas
conjunto de tarefas para que eles as realizem. Durante encontrados durante a observação.
a observação da experiência de uso, “são registrados
vários dados sobre o desempenho dos participantes na
2.5 Design de Interação
realização das tarefas e suas opiniões e sentimentos
decorrentes de suas experiências”. (BARBOSA; SILVA,
Para Preece et al. (2005, p.185), o design de interação é
2010, p. 341)
uma área preocupada em “projetar produtos interativos
Esta observação pode ser feita em um laboratório que forneçam suporte às atividades cotidianas das
de usabilidade com o auxílio de equipamentos de pessoas, seja no lar ou no trabalho”. Portanto, falar de
gravação, como câmeras filmadoras. Estes ambientes design de interação é tratar o design sob a filosofia do
são preparados para esse tipo de atividade, com o design centrado nos usuários, o que implica dizer que
intuito de simular o ambiente real de uso. Contudo, tais “as preocupações destes direcionam o desenvolvimento
testes não necessariamente precisam ser realizados do produto mais do que as preocupações técnicas”
nesses laboratórios equipados, desde que o avaliador (PREECE et al., 2005, p. 186). O design de interação
esteja fazendo alguma forma de registro durante sua visa elaborar um modelo conceitual, estruturar as
observação (RUBIN, 2008; WINCKLER, 2002). tarefas e projetar a interação para apoiar os objetivos
dos usuários.
Após a observação, esses dados devem ser
Segundo Norman (2006, p. 40), os modelos conceituais
interpretados e consolidados. Segundo Barbosa e
fazem parte de um importante conceito de design: os
Silva (2010, p. 342), os testes de usabilidade têm
modelos mentais, que são “os modelos que as pessoas
sido empregados “para obter sobretudo resultados
têm de si próprias, dos outros, do ambiente e das
quantitativos, tais como: testar hipóteses, comparar
coisas com as quais interagem”. Os modelos mentais
soluções alternativas e verificar se o sistema atingiu as
são formados através da experiência, treinamento ou

40
instrução. Por conta disso, o modelo mental do designer “O designer espera que o modelo do usuário seja
idêntico ao modelo do design. Mas o designer não pode
é diferente do modelo mental do usuário, uma vez que
falar diretamente com o usuário: toda a comunicação
os mesmos possuem conhecimentos e experiências se faz através da imagem do sistema. Se a imagem
distintas. do sistema não deixa o modelo de design claro e
Nesse sentido, é importante que o designer conheça consistente, o usuário acabará com um modelo mental
errado” (NORMAN, 2006, p.40)
as necessidades dos usuários e entenda o seu modelo
mental, para projetar uma estrutura visível capaz de
Após entender o modelo mental do usuário, o designer
comunicar as suas decisões de projeto de forma lógica
deve estruturar as tarefas e planejar como será
e de fácil compreensão (OLIVEIRA, 2013). Norman
a interação. Para isso, ele deve criar cenários de
(2006), denomina essa parte visível do sistema
interação, que “especificam em mais detalhes as ações
interativo de imagem do sistema. Quando a imagem do
do usuário e as respectivas respostas (feedback)” do
sistema é incoerente ou inapropriada o usuário pode
sistema necessárias para apoiar adequadamente seus
encontrar dificuldades na utilização do mesmo. A Figura
objetivos (BARBOSA; SILVA, 2010, p. 209).
2.3 mostrar como se dá essa relação.
Como ponto de partida desse processo, deve-se
Figura 2.3 – Modelos conceituais
mapear os objetivos dos usuários, levando em conta o
que eles desejam, sem considerar ainda como ele fará
para alcança-los. Posteriormente, “podemos estruturar
cada objetivo do usuário de forma a explorar diferentes
estratégias que o usuário poderá seguir para alcança-lo”
(BARBOSA; SILVA, 2010, p. 225). Todo esse processo
deve considerar outro ponto importante, que é o apoio à
prevenção e recuperação de erros que eventualmente
Fonte – Do autor, adaptado de NORMAN, 2006, p. 40.
poderão acontecer durante o processo de interação.

41
 2.6 Arquitetura da Informação na segunda definição apresentada anteriormente, a
Arquitetura da Informação é formada por sistemas,
Morville e Rosenfeld (2006, p. 4), na terceira edição estes são estruturados e interdependentes. São
do livro Information Architeture for the World Wide denominados de sistemas de organização, de rotulação,
Web, apresentam as quatro definições possíveis para de navegação e de busca.
arquitetura da informação:
O sistema de organização é o responsável por agrupar
• O design estrutural de ambientes de informação e categorizar o conteúdo informacional. Dessa forma, o
compartilhados; usuário tem uma noção geral de como está organizada
• A combinação de sistemas de organização, rotulação, toda a informação do site.
pesquisa, e navegação dentro de web sites e intranets;
• A arte e ciência de dar forma a produtos e experiências O sistema de navegação determina a forma como
de informação que dão suporte a usabilidade e a se navega pelo espaço da informação e hipertextos.
facilidade com que informações são encontradas em Para isso, são utilizados recursos para facilitar essa
um site (findability). movimentação em meio as inúmeras informações e
• Uma disciplina emergente e uma comunidade páginas disponíveis.
de prática focada em trazer princípios do design e O sistema de rotulação é caracterizado pela definição
arquitetura para o espaço digital. de signos para a apresentação da informação.
Acredita-se, por tanto, que a aplicação de conceitos Nos websites os rótulos podem ser tanto textuais,
e técnicas da arquitetura da informação no representado através de palavras, quanto iconográficos,
desenvolvimento de websites, “gera sistemas que representados por desenhos ou imagens que
permitem aos usuários acessarem e encontrarem o representam conceitos.
conteúdo desejado de forma mais rápida e intuitiva” O sistema de busca permite que o usuário, por meio
(SANTA ROSA; MORAES, 2008, p. 95) de palavras-chave, encontre a informação desejada.
Segundo Morville e Rosenfeld (2006), como visto É um item fundamental em websites, sobretudo para

42
aqueles que apresentam muitos níveis de navegação e Figura 2.4 – Organograma geral de um de site de designer
informação. Dessa forma, o usuário pode chegar mais
rapidamente na informação desejada.

Segundo Morville e Rosenfeld (2006), o arquiteto

da informação, que é o profissional responsável por
esse processo, deve ter em mente as necessidades
dos usuários e os objetivos do site, além de saber o
conteúdo e funcionalidades que o website possuirá.
Fonte – Do autor.
Com base nisso, vai projetar a forma como os usuários
deverão encontrar a informação, através da integração
entre os sistemas descritos anteriormente.
Figura 2.5 – Exemplo de Wireframe de um website
“É o arquiteto da informação que vai construir estradas
da informação, atalhos, pontes e conexões com o
intuito de permitir o acesso mais rápido e intuitivo à
informação. [...] Definir as ferramentas para busca
dessas informações, bem como os critérios adotados na
indexação do conteúdo e projetar wireframes, mapa do
site, fazem parte, também, das atribuições do arquiteto
da informação (SANTA ROSA; MORAES, 2008, p.25)”.

As Figuras 2.4 e 2.5, apresentam exemplos de produtos

resultantes do processo de arquitetura da informação:

Fonte – Seguetech. Disponível em: [Link]

Acesso em 09 jun 2016.
43
 2.7 Design de Informação facilita a recepção e interpretação, proporcionando
assim, uma comunicação mais eficiente. O autor
Uma vez organizada a estrutura do espaço da caracteriza o design de informação como um domínio
informação para que o acesso ao conteúdo seja feito de em que “os conteúdos são visualizados por meio de
forma intuitiva (arquitetura da informação), é necessário seleção, ordenamento, hierarquização, conexões e
se trabalhar a apresentação desse conteúdo. distinções visuais que permitem uma ação eficaz”
Segundo o International Institute for Information Design (BONSIEPE, 1999 apud QUINTÃO; TRISKA, 2013, p. 109).
(IIID, 2007 apud QUINTÃO; TRISKA, 2013), design Dito isso, pode-se entender que a aplicação dos
de informação pode ser “a definição, planejamento conceitos de design na informação a tornam mais
e modelagem dos conteúdos de uma mensagem acessível, mais funcional, mais cativante, mais pregnante
e do ambiente em que ela é apresentada, com a e de assimilação mais prazerosa (CARVALHO, 2003).
intenção de satisfazer às necessidades de informação Diante disso, percebe que o design de informação não
dos destinatários”. No Brasil, a definição dada pela possui apenas uma função técnica, mas se caracteriza
Sociedade Brasileira de Design da Informação (SBDI) também como uma necessidade social. Em meio a essa
diz que o mesmo é: quantidade excessiva de dados e informações que são
“Uma área do design gráfico que objetiva equacionar produzidos constantemente, o design de informação
os aspectos sintáticos, semânticos e pragmáticos pode atuar como um mediador desse conteúdo,
que envolvem os sistemas de informação através da
aprimorando a capacidade da nossa sociedade em
contextualização, planejamento, produção e interface
gráfica da informação junto ao seu público-alvo. Seu coletar, processar, disseminar informação e produzir
princípio básico é o de otimizar o processo de aquisição conhecimento (FRASCARA, 2011; JACOBSON, 2000).
da informação efetivado nos sistemas de comunicação
analógicos e digitais”. (SBDI, 2006 apud QUINTÃO; Algumas dessas contribuições podem ser observadas
TRISKA, 2013) em um dos exemplos mais clássicos sobre a atuação
do design de informação, o design do mapa do metro de
Bonsiepe (2011) ressalta a importância da maneira como
Londres projetado por Harry C. Beck, em 1933. Segundo
os dados e informações são apresentados, pois o design

44
Royo (2008, p. 51), “Beck propôs um design que Figura 2.6 – Variáveis visuais de Bertin
substituía a fidelidade geográfica por uma interpretação
diagramática”. Através da diferenciação de escalas,
racionalização das linhas e diferenciação das mesmas
através de cores, ele conseguiu desenvolver um mapa
muito mais funcional e visualmente melhor trabalhado.
“O resultado foi excelente e os usuários o acharam
muito funcional” (ROYO, 2008, p. 52). Pouco importava
aos usuários saber as distanciais entre uma estação e
outra, mas sim saber onde estavam e para onde iriam.

Segundo Frascara (2004), para dar visualidade as

informações, o designer atua em duas etapas: a
organização da informação e o planejamento de sua
apresentação. “A partir de aspectos como posição,
forma, tamanho, contraste, saturação, cor e direção,
é possível organizar elementos de informação de
modo a apresenta-los de maneira adequada ao seu
Fonte – QUINTÃO; TRISKA, 2013, adaptado de Bertin, 1986.
objetivo e ao usuário” (QUINTÃO; TRISKA, 2013, p.
112). Essas variáveis visuais foram desenvolvidas por
“São definidas oito variáveis visuais, de acordo com
Jacques Bertin, um cartógrafo francês. Elas podem ser Bertin (1986): (1) coordenada x e (2) coordenada y, que
visualizadas na Figura 2.6. indicam o posicionamento no espaço bidimensional; (3)
tamanho, variável quantitativa, utilizada para informar
dados numéricos ou ordem de importância; (4) valor,
variável qualitativa, que diz respeito à variação do branco
ao preto; (5) forma, utilizada para representar elementos
similares e diferentes, e para facilitar a identificação dos

45
 elementos, a partir do uso de algumas convenções, 2.8 Design de Navegação
como um quadrado com uma cruz para representar
uma igreja; (6) orientação, que se refere ao ângulo de Após a construção do espaço da informação, bem
posicionamento dos elementos; (7) granulação, utilizada
como da organização e apresentação da mesma, é
para diferenciar áreas ou linhas a partir de texturas; (8)
cor, diz respeito à variação de um matiz (do cinza à cor necessário oferecer ao usuário suporte para navegar
pura).” (QUINTÃO; TRISKA, 2013, p. 112). nesse espaço. Essa atividade é o que configura
o sistema de navegação, citado anteriormente na
Mijksennar (1997), adaptou as variáveis propostas Arquitetura da Informação.
por Bertin para o design, apresentando-os através de
elementos gráficos, como pode ser visto na Figura 2.7. Segundo Morville e Rosenfeld (2006), as pessoas não
gostam de se perder, pois esse fator está associado
Figura 2.7 – Adaptação das variáveis visuais de Bertin
com confusão, frustração, raiva e medo. Por conta
disso, os seres humanos desenvolveram ferramentas
para ajuda-los a não se perder e encontrar os caminhos
que desejam.
“Das migalhas de pão, à bussola e astrolábio, a mapas,
placas de rua, e sistemas de posicionamento global,
as pessoas demonstram grande engenhosidade na
concepção e utilização de ferramentas de navegação e
estratégias de wayfinding” (MORVILLE; ROSENFELD,
2006, p. 115, tradução nossa).

Para os autores, um bom sistema de navegação

deve responder as seguintes perguntas, a todo
momento: onde estou, onde estive e para onde posso
ir. Para responder essas perguntas, o designer deve
Fonte – QUINTÃO; TRISKA, 2013, adaptado de Mijksennar, 1997. fornecer subsídios aos usuários que lhe ajudem a se
contextualizar.

46
Os sistemas de navegação são compostos por vários Figura 2.9 – Sistemas de navegação suplementares
elementos, ou subsistemas. Os principais são os
sistemas de navegação globais, locais e contextuais,
que estão incorporados dentro da página web.
Geralmente, eles são colocados ao redor do conteúdo
principal do site e/ou dentro do próprio conteúdo. “Estes
três sistemas principais, geralmente são necessários,
mas não suficientes em si mesmos” (MORVILLE; Fonte – MORVILLE; ROSENFELD, 2006, p. 116)
ROSENFELD, 2006, p. 116). A Figura 2.8 mostra como
eles se configuram. Um bom design de navegação faz uma combinação
correta entre os sistemas possíveis, proporcionando
Figura 2.8 – Sistema de navegação global, local e contextual uma maior flexibilidade para o usuário. Dessa forma,
ele poderá chegar ao conteúdo de maneiras diferentes.
Porém, é importante saber equilibrar o número de
opções possíveis de navegação, pois um número
limitado de opções pode ser frustrante para o usuário, ao
mesmo tempo que muitas opções de navegação podem
sobrecarrega-lo e fazer com que ele não saiba para onde
Fonte – MORVILLE; ROSENFELD, 2006, p. 116) ir. “Sistemas de navegação devem ser concebidos com
cuidado, para complementar e reforçar a hierarquia do
Existem também os sistemas de navegação
site, fornecendo contexto e flexibilidade para o usuário”
suplementares, tais como mapas de sites, índices e
(MORVILLE; ROSENFELD, 2006, p. 122)
guias que estão fora da parte principal de conteúdo.
Estes, são mostrados na Figura 2.9.

47
 2.9 Design da Interface Gráfica “A Engenharia Semiótica é, portanto, uma abordagem
para o design de interfaces de usuários na qual o
sistema computacional é visto como um meio de
A interface gráfica é a porção do sistema com a qual o
comunicação através do qual o designer envia, para o(s)
usuário entra em contato. Os elementos que a compõe usuário(s) uma mensagem cuja expressão é a interface
exercem uma função de extensão do usuário dentro e o conteúdo é (1) o que o usuário pode fazer com o
da máquina, executando as funções comandadas pelo sistema e (2) como ele pode interagir com o sistema.
Esta mensagem não é uma mensagem simples como
mesmo. Segundo Garrett (2003, p. 120), interfaces uma palavra ou frase, mas uma mensagem bastante
bem-sucedidas são aquelas em que o conteúdo mais complexa, pois ela é dinâmica, interativa, multimídia,
importante é notado mais facilmente. Para ele, “um dos multi-código e metacomunicativa. Ela é também
unidirecional, pois vai sempre do designer para o
maiores desafios de design de interface para sistemas
usuário. Por exemplo, quando o designer quer que o
complexos é descobrir qual aspecto os usuários não usuário pressione com o mouse uma determinada área
precisam de tratar e reduzir a sua visibilidade”. O da tela para acionar a execução da função imprimir ele
designer tem que conhecer os cursos de ações que pode utilizar o widget botão de acionamento (também
conhecido como command button) com um rótulo escrito
o usuário está propenso a tomar e fazer com que os Imprimir. Este widget tem uma função comunicativa
elementos da interface tenham fácil acesso e uso. que diz algo equivalente a ‘pressione aqui para ativar a
função Imprimir’” (LEITE, 2000).
Segundo Leite (2000), para que o usuário utilize um
Nessa perspectiva, todos os elementos da interface
sistema com sucesso, ele deve perceber quais as
tais como ícones, botões, formulários, sons, rótulos
funções disponíveis e como ele pode interagir com cada
ou qualquer outro signo tem o potencial de comunicar
uma delas, isto é, “qual o modelo conceitual da aplicação
algo. Dessa forma, toda decisão de projeto feita
o designer concebeu para ele”. Para conseguir isso o
pelo designer tem um grande impacto sobre como o
designer deve, segundo o autor, traduzir o modelo de
usuário irá perceber e interpretar a interface. Garrett
interação e comunicar as funcionalidades associadas
(2003) ressalta ainda que tudo se trata de escolher
as funções através da interface do usuário.
os elementos certos para cada tarefa que o usuário
pretende realizar, organizando-os de forma lógica para
que sejam facilmente compreendidos e utilizados.
48
Existem diversos elementos (widgets) que podem • Text fields permitem que os usuários façam entradas
compor uma interface gráfica e eles dependem de textos.
da tecnologia utilizada para o desenvolvimento da
aplicação. Na Web a tecnologia predominante é o
HTML (HyperText Markup Language), uma linguagem • Dropdown lists fornecem as mesmas funcionalidades
de marcação utilizada na construção de sites. No seu dos radio buttons, mas fazem isso em um espaço mais
início, a Web era utilizada apenas como um novo meio compacto, permitindo a apresentação de mais opções
de publicação e compartilhamento de informações de forma eficiente.
com o auxílio de hipertextos. Conforme foi evoluindo,
passou a se tornar cada vez mais interativa e logo
foram adicionados elementos padrões que facilitam • List boxes fornecem as mesmas funcionalidades
e conduzem essa interação (GARRET, 2003, p. 122). dos checkboxes, mas fazem isso em um espaço
Alguns exemplos são mostrados a seguir: mais compacto (por causa da rolagem). Assim como
• Checkboxes permitem aos usuários selecionarem dropdowns, permite que a list box suporte facilmente
mais de uma opção dentre as disponíveis. um grande número de opções.

• Radio buttons permitem aos usuários selecionarem

apenas um opção dentre as disponíveis. • Action buttons podem fazer muitas coisas diferentes.
Normalmente, dizem ao sistema para pegar todas as
informações fornecidas pelo usuário via outro elemento
da interface e executar alguma ação com elas.

49
 Em suma, percebe-se que o design da interface é, os elementos corretos e mais eficientes, é tentar prever
sobretudo, o processo de criação os elementos que também situações atípicas e prover uma comunicação
dão suporte à interação entre usuário e sistema. E que através dos próprios elementos para ajudar o usuário
essa interação deve corresponder às expectativas do a executar sua tarefa da forma correta, evitando
usuário quanto a funcionalidade dos elementos a ele frustrações ou contornando-as.
apresentados.

Em uma página de contato, por exemplo, um usuário 2.10 Design Visual

espera que existam os campos necessários para
receber entradas de textos (text fields), tais como O Design Visual se refere ao design aplicado em
assunto, e-mail e mensagem. Além disso, espera qualquer mídia ou suporte de comunicação visual. É
também que, ao final do preenchimento, exista um uma terminologia que abrange as práticas de design
botão que ao ser acionado envie essas informações aplicados à comunicação, “que recorre ao canal visual
para os administradores do site, o que caracterizaria para a transmissão de mensagens, precisamente
uma interação ideal apoiada com eficiência. Porém, porque este termo se reporta ao conceito de linguagem
há situações em que o usuário por algum motivo visual” (DSI, 2012). Por conta disso, não se limita a
deixa de preencher algum dos campos, embora este mídia envolvida no processo, podendo ser aplicado
seja de preenchimento obrigatório. Ao acionar o botão tanto em mídia gráfica impressa (design gráfico), como
de enviar, diante dessa situação, os elementos da também em mídia interativa digital (design digital).
interface devem fornecer informações suficientes para
Após a criação do espaço da informação, do agrupamento,
que o usuário entenda que necessita preencher todos
tratamento e organização da mesma dentro desse
os campos e que o envio da sua solicitação de contato
espaço (Arquitetura e Design de Informação); do
só será efetuado após essa correção.
planejamento das interações, da criação dos sistemas
Portanto, percebe-se que, tão importante quanto apoiar de navegação e elementos da interface (Design de
a interação do usuário adequadamente, fornecendo-lhe interação, navegação e interface gráfica), é preciso

50
determinar como a integração desses resultados será Segundo Garret (2003, p. 145), o primeiro recurso que
apresentada visualmente (GARRETT, 2003). se usa para chamar a atenção do usuário é o contraste.
Garrett (2003, p. 143) diz que “inicialmente, pode-se “Um projeto sem contraste é visto como uma massa
pensar que design visual é uma simples questão de cinzenta, sem traços característicos, fazendo com que
estética”. Contudo, não se trata apenas de avaliar as o olhar do usuário percorra o conteúdo sem se fixar em
ideias de design visual em termos do que parece mais nada”. Percebe-se, portanto, que o contraste é muito
esteticamente agradável, e sim “concentrar a atenção importante para ressaltar os aspectos essenciais da
em o quão bem elas funcionam”. Mullet e Sano (1995, interface. “Dentre todas as técnicas visuais nenhuma
p.1) em consonância com esse pensamento afirmam é mais importante para o controle de uma mensagem
que “o design visual tenta resolver os problemas de visual do que o contraste” (DONDIS, 2007, p. 99).
comunicação de uma forma que a solução seja tanto Segundo Mullet e Sano (1995, p.52), os contrastes
funcionalmente eficaz quanto esteticamente agradável”. visuais podem ser aplicados através do tratamento
Isso se dá, segundo Garrett (2003), devido ao fato de da forma, cor, tamanho, textura, posição, orientação
que todo mundo possui gostos diferentes, e cada um e movimento. Para os autores, o design visual eficaz
tem uma visão diferente do que constitui um design “consiste em selecionar – para cada parte e para a
visualmente agradável. Por isso, o autor afirma que as composição como um todo – o tratamento visual que
decisões de design não devem se basear apenas no mais efetivamente realiza a meta de comunicação”.
que os envolvidos acham mais interessante. Com isso, o designer consegue estabelecer hierarquias
Diante disso, percebe-se que o processo de design visuais que guiam indiretamente a experiência do
visual não é apenas uma questão estética, mas usuário.
também uma questão estratégica. O que implica dizer Contudo, não basta tratar efetivamente o visual dos
que, através do tratamento visual dos elementos que elementos que constituem a interface do usuário, uma
constituem a interface do usuário, pode-se determinar o vez tratados, eles precisam se manter consistentes
que é mais importante para a experiência do mesmo e, todas vezes que aparecerem. “Quando o tratamento de
consequentemente, guia-lo da melhor forma possível.
51
 dois elementos é semelhante, mas não exatamente o visual uniforme e consistente. Para Samara (2010,
mesmo, os usuários ficam confusos” (GARRETT, 2003, p. 202), “a grid introduz uma ordem sistêmica em um
p. 147). Isso pode gerar uma série de questionamentos layout, ajuda a distinguir vários tipos de informação e
que podem atrapalhar a experiência do usuário, tais facilita a navegação de um usuário por elas”. A Figura
como “Porque eles estão diferentes? Eles deviam ser 2.10 demonstra uma grid com exemplos de variações
do mesmo jeito? Talvez seja só um erro. Ou eu deveria de layout.
notar alguma coisa com isso?”. Segundo o autor, esse
Figura 2.10 – Sistema de grid e possibilidades de layouts
tipo de situação não deve acontecer, as decisões
de design devem ser claramente percebidas como
intencionais.

Para ajudar os utilizadores é importante estabelecer

e manter regras para utilização e tratamento dos
elementos da interface. Dessa forma, estabelece-se
e mantem as expectativas dos usuários, por meio do
uso de elementos reconhecíveis que se comportam
de forma familiar. Assim, criam-se convenções e uma
lógica de como a linguagem visual do sistema funciona.
(SCHLATTER; LEVINSON, 2013).

Garrett (2003, p. 148) diz que layouts baseados em

grids, “asseguram a uniformidade do design através de
um esquema principal que é utilizado como um molde
para criar variações de layout”. Segundo o autor, nem
todo layout vai utilizar todas as partes da grid, mas a
distribuição dos elementos sobre ela mantem o design
Fonte – GARRETT, 2003, p. 142

52
Schlatter e Levinson (2013, p. 29) elencam seis
elementos onde a consistência no design visual pode
ser aplicada, seguidas de perguntas que auxiliam no
entendimento. São eles:
1. Layout: Você tem posicionado elementos que
desempenham a mesma função no mesmo lugar em
cada página?
2. Tipografia: Você trata elementos semelhantes da
mesma maneira tipograficamente?
3. Cor: Você tem um conjunto de cores definidas, e um
sistema de aplicação das mesmas que apoiam sua
hierarquia de informação?
4. Imagem: Você usa o mesmo estilo de imagens para
transmitir informações semelhantes?
5. Controles e Affordances: Você usa os mesmos
elementos de interface e tratamentos de design para
representar as mesmas ações? Você usa as mesmas
propostas de feedback e controles interativos?

Todas as decisões de design tomadas durante o

processo são compiladas em um documento chamado
Guia de estilos (Style guides). “Padrões globais que
afetam todas as páginas, tais como grids, paleta de
cores, padrões tipográficos, ou diretrizes de tratamento
da logo, são geralmente as primeiras coisas a ir em um
style guide.
53
 03 O diagrama a seguir apresenta de
forma sintética as etapas, atividades e
Figura 3.1 – Diagrama da metodologia

resultados de cada passo da metodologia

adotada. As duas primeiras fases serão
Metodologia

executadas no primeiro semestre, e as

demais no segundo.

A metodologia utilizada para esse

trabalho foi proposta por Garrett (2000)
em uma estrutura diagramática, que
demonstra os cinco níveis que compõem
o processo de design focado na
experiência do usuário. Essa estrutura
foi detalhadamente explorada em seu
livro “The Elements of User Experience:
User-Centered Design for the Web”,
publicado em 2003.

Segundo o autor, o processo de

desenvolvimento da experiência do
usuário se trata de se assegurar que
nenhum aspecto dessa experiência
Fonte – GARRETT, 2003, p. 142
aconteça sem o consentimento do
designer. Isso significa estar ciente de
todas as possibilidades de ações que
o usuário possa ter e entender suas

54
expectativas a cada passo do caminho desse processo Esse esquema proposto pelo autor traz uma
de interação. (GARRETT, 2003, p. 21) abordagem holística dos elementos que contribuem
para experiência do usuário, uma vez que a cada
Para se entender melhor como se projeta a experiência
plano nos deparamos com problemas cada vez menos
do usuário, o autor descreve os cinco níveis — que
abstratos e mais concretos. No plano mais baixo, não
ele denomina planos — que a compõem. Esses cinco
nos preocupamos com a forma final do site, mas sim
planos, “fornecem uma estrutura para tratar sobre
em como ele se enquadrará dentro da nossa estratégia
problemas de experiência do usuário e ferramentas que
(conforme vamos conhecendo as necessidades dos
usamos para poder resolvê-los. ” (GARRETT, 2003, p.
usuários). Já no plano mais alto, o foco são os detalhes
23). A Figura 3.2, demonstra como são organizados os
mais concretos da aparência do produto final. (GARRET,
planos propostos pelo autor.
2003, p. 24).
Figura 3.2 – Os elementos da experiência do usuário.
Segundo Garret (2003), a Web no seu início era voltada
para a troca de informações, as pessoas a entendiam
somente como um novo meio de publicação. Porém, a
medida que os avanços tecnológicos foram ocorrendo,
novos recursos foram sendo incorporados aos
navegadores e servidores da Web, dando-a novas
capacidades funcionais.

“Depois que a Web começou a pegar uma grande

comunidade na Internet, desenvolveu-se um conjunto
de recursos mais complexos e robustos que permitiam
os Web sites não apenas distribuir informação mas
coletar e manipula-las também. Com isso, a Web se
Fonte – GARRETT, 2003, p.24. tornou mais interativa. ” (GARRETT, 2003, p. 27)

55
 Isso configura, segundo o autor, a natureza dúbia da Para Garret, uma vez feita essa divisão dos planos em
Web, uma vez que uma parte é voltada ao conteúdo seus elementos constituintes, podemos ter uma visão
e a outra à funcionalidade. Diante disso, ele propõe mais especializada de como esses componentes se
uma versão mais detalhada do esquema mostrado encaixam no curso de toda a experiência do usuário.
anteriormente, dividindo os planos ao meio e
O Plano da Estratégia (Strategy), é plano mais baixo e,
evidenciando as partes que o compõe, conforme pode
por conseguinte, o mais abstrato. Está concentrado em
ser visto a seguir.
levantar as Necessidades dos Usuários e os Objetivos
Figura 3.3 – A dualidade básica da web. do Site. As Necessidades dos Usuários (User Needs)
são os objetivos do site de origem externa, identificados
por meio de pesquisa com os mesmos. Deve-se
entender o que o público deseja do produto e saber
como isso se encaixa com os outros objetivos do site.
Estes (Site Objectives), são metas de origem interna,
metas de negócio. No caso de um site de comércio
eletrônico poderia ser “fazer R$ 1 milhão em vendas
pela Web nesse ano”, por exemplo.

O Plano do Escopo (Scope), com base nos levantamen-

tos feitos no plano anterior, tem como finalidade gerar
uma lista de requisitos e especificações que atendam às
necessidades dos usuários. No lado da funcionalidade,
a estratégia é traduzida em Especificações Funcionais
(Functional Specifications), que são descrições
Fonte – GARRETT, 2003, p. 33.
detalhadas do conjunto de funcionalidades que o site
deve possuir. Já no lado da informação, são definidos os

56
Requerimentos de Conteúdo (Content Requeriments), responsável pelo design dos elementos da interface
em que são descritos os conjuntos de elementos de que facilitam a movimentação do usuário em meio a
conteúdo necessários para atender as necessidades arquitetura da informação.
dos usuários.
O Plano da Superfície (Surface), é o nível mais alto e,
No Plano da Estrutura (Structure), com base na por conseguinte, o mais concreto, no qual se busca
descrição das funcionalidades que o site deve possuir, apresentar de uma forma visualmente agradável
são definidos como serão as interações do usuário o resultado das decisões tomadas nos planos
com essas funcionalidades. Isso é feito através do abaixo. Independentemente de o site ser orientado
desenvolvimento de fluxos de aplicação para facilitar a à funcionalidade ou um recurso de informação, a
realização das tarefas do usuário. Essa parte voltada à preocupação com os aspectos estéticos, que vão gerar
funcionalidade diz respeito ao Design de Interação. Já a experiência sensorial do usuário, é fundamental. Por
a parte voltada ao conteúdo, em que é feito o design ser o nível mais palpável, o visual final do produto é
estrutural do espaço da informação para que o acesso determinante para o sucesso do projeto. O Design
ao conteúdo seja intuitivo, é feita pela Arquitetura da Visual é o responsável por essas atribuições, fazendo
Informação. o tratamento visual do texto, elementos gráficos da
página e componentes de navegação.
O Plano do Esqueleto (Skeleton), é dividido em
três partes. Para ambos os lados do plano, deve- Segundo Garrett (2003), esse modelo teve uma
se pôr em prática o Design de Informação, que é o repercussão muito positiva, disseminando-se
design da apresentação da informação para facilitar mundialmente. Só em 2000, quando o autor publicou
a compreensão por parte do usuário. Para facilitar o o modelo pela primeira vez, ainda de forma resumida,
processo de interação do usuário com o site, são teve mais de vinte mil downloads. Diante disso,
desenvolvidos os elementos da interface pelo Design surgiram estudos correlatos que se embasavam
da Interface, como os botões, por exemplo. O outro nos estudos de Garrett, como é o caso do Projeto E,
componente desse plano é o Design de Navegação, desenvolvido por Meurer e Szabluck desde 2008 e

57
 publicada em 2010. Segundo os autores, o Projeto E desenvolvedores”. (MEURER, 2014). Essa fase é
é uma metodologia projetual com aplicação prática importante para o presente trabalho, mas o foco do
em projetos profissionais e acadêmicos, para guiar e mesmo não é o desenvolvimento (programação) do
otimizar o desenvolvimento de projetos de interfaces produto final e sim a parte gráfica da interface. Dito isso,
gráficas (MEURER; SZABLUCK, 2010). A Figura 3.4 vale ressaltar que nessa fase final será desenvolvido
mostra o modelo proposto pelos autores: apenas um protótipo de média fidelidade. Este, segundo
Santos (2006), difere-se de um de baixa fidelidade,
Figura 3.4 – Estrutura do Projeto E
principalmente, por ser exibido no suporte final. Além
disso, o visual já pode ser próximo do definitivo, o que
o torna a experiência de uso mais realística.
“No entanto, o grau de funcionalidade e a similaridade
de interação não são fatores fundamentais nesse tipo
de protótipo. A média fidelidade pode ser implementada
na forma de uma apresentação de telas em sequência,
com algumas zonas de salto predefinidas para simular a
navegação. ” (SANTOS, 2006, p. 262)

Essa nova fase proposta por Meurer e Szabluck, é

Fonte – MEURER; SZABLUCK, 2010, p. 2. importante para que se identifiquem possíveis erros,
para que os mesmos sejam corrigidos, gerando
Como pode ser visto, nesse novo esquema, além melhorias para o produto final.
de os autores mudarem a nomenclatura de uma das
fases, de Superfície para Estética, há o acréscimo de
uma nova etapa denominada Execução. Nessa etapa 3.1 Aplicação
são “desenvolvidos modelos interativos para simular
as principais funcionalidades do produto, fazer testes Em consonância com a metodologia adotada, que foi
de uso e efetuar a programação do produto pelos acima descrita, o detalhamento do processo de projeto

58
será organizado conforme os cinco planos. Aqui serão é ou será utilizado. Além de conhecer sistemas que os
descritas as atividades que serão realizadas em cada usuários estejam acostumados a utilizar, analisando
plano e os resultados esperados para cada uma delas. os pontos positivos e negativos, para que eles sirvam
como referência no desenvolvimento do projeto
(BARBOSA; DA SILVA, 2010). Com essas informações,
3.1.1 Estratégia
serão criadas personas, que são personagens fictícios,
arquétipos hipotéticos de um grupo de usuários reais,
Conforme dito anteriormente, o plano da estratégia
criada para descrever um usuário típico (BARBOSA;
busca responder duas questões básicas: O que nós
DA SILVA, 2010, p. 176). Isso serve para se ter em
queremos oferecer com este site? E o que nossos
mente quem é o usuário final e assim manter o foco
usuários esperam encontrar nele? (GARRETT, 2003).
nele durante todo o processo.
A primeira pergunta, que diz respeito aos objetivos do
site, é contemplada pela descrição dos objetivos deste
trabalho presentes na seção 1.3, em que o principal é 3.1.2 Escopo
o de melhorar a experiência dos usuários (alunos) na
utilização do Sistema Integrado de Gestão Acadêmica De posse dos dados levantados na estratégia, passa-se
(SIGAA). da pergunta “Porque estamos fazendo esse site?” para
“O que vamos fazer nesse site?”. Sendo assim, devem
Quanto à segunda pergunta, que diz respeito às
ser pensados quais funcionalidades e conteúdos o site
necessidades dos usuários, ela será respondida através
deve possuir para suprir as necessidades dos usuários
de pesquisas feitas junto aos mesmos. Para isso, será
identificadas na fase anterior.
aplicado um questionário online.
Como resultado desse plano, serão descritas as
Como resultado do questionário, espera-se ter um
especificações funcionais e requerimentos de conteúdo,
entendimento sobre a situação atual, que inclui o domínio
apresentados em forma de listas.
do problema, os papéis e perfis dos usuários, seus
objetivos e atividades, e o contexto em que o sistema

59
 3.1.3 Estrutura dentre outros. Já no design da informação, será feita a
distribuição e apresentação da informação, de forma a
Uma vez definidas as telas, é necessário se especificar torná-la mais facilmente compreensível para o usuário.
o processo interação do usuário com as funcionalidades Ícones, cores, etiquetas, dentre outros recursos são
e os conteúdos que as constituem. Além de projetar os utilizados para reforçar essa organização da informação.
fluxos de navegação entre essas páginas.
A junção desses três componentes envolvidos no
Como resultado do Design de Interação, serão plano resultará nos wireframes, que é onde o layout
modeladas as tarefas e especificadas as formas de da página começa a tomar forma. Esses wireframes
prevenção e recuperação de erros. Já na Arquitetura são classificados em estruturais e arquiteturais, o
da Informação serão feitos diagramas que representam primeiro tem caráter geral e identifica a distribuição do
o fluxo, hierarquia e ordem do conteúdo. conteúdo. Já o segundo, é mais detalhado, pois indica
detalhes específicos deste conteúdo, e não somente
sua localização (MEURER; SZABLUCK, 2010).
3.1.4 Esqueleto

No plano anterior é definido como o site funcionará,

3.1.5 Superfície
no Plano do Esqueleto é definida a forma que essas
funcionalidades terão. No design da interface, serão Nessa etapa, será feito o refinamento das partes
trabalhadas as convenções e metáforas bem como os anteriores dando um tratamento visual para as telas
elementos da interface, tais como botões, campos de projetadas. Aqui, é elaborada a composição final do
texto, formulários, tabelas, checkboxes, radio buttons, conteúdo e a identidade visual. Nessa etapa será
dropdown lists, dentre outros. No design da navegação, trabalhado o design visual do site que consiste nas
será feito o arranjo dos elementos na tela para permitir seguintes etapas:
a movimentação do usuário pela arquitetura da
informação, esses elementos compõem o sistema de 1. Estudo e definição da malha construtiva (grid);
navegação, que pode ser global, local, suplementar, 2. Composição e diagramação do conteúdo;

60
3. Trabalhar a identidade visual:
a. Definição da paleta de cores;
b. Tipografia: definição da(s) família(s), tamanhos,
estilos, etc.;
c. Iconografia: definição dos ícones (utilizar metáforas
visuais).

3.1.6 Execução

Nessa etapa será desenvolvido um protótipo de média

fidelidade, para fazer testes e a validação com os
usuários. Serão feitos ensaios de interação, dos quais
espera-se obter dados quantitativos para se verificar
hipóteses do tipo A é melhor do que B, ou seja, verificar
se a interface do sistema proposto por esse trabalho
é melhor do que a atual, através do quanto essa
mudança otimizou a realização das principais tarefas
dos usuários. Para isso, pretende-se dar as principais
tarefas aos participantes para que eles realizem dentro
de um tempo determinado. Após isso, verificar o
desempenho dos usuários e questioná-los sobre qual
das interfaces eles preferem.

61
 04 4.1 Estratégia de mestrado. A relação dos cursos participantes e a
respectiva quantidade será apresentada resumidamente
Para primeira fase da pesquisa, que consiste no na tabela a seguir. A relação completa pode ser visa no
levantamento das necessidades dos usuários, foi Apêndice A.
Resultados

aplicado um questionário online e feita uma inspeção

Tabela 1 – Cursos participantes do questionário online
de usabilidade utilizando checklists. Com isso,
foram encontradas informações muito importantes Cursos Número de participantes
para o encadeamento das demais fases do projeto.
Design 32
A seguir serão apresentados os dados e informações
coletados na aplicação dos dois métodos adotados. Sistemas e Mídias digitais 12
Arquitetura e Urbanismo 11
Outros cursos 33
4.1.1 Características dos sujeitos estudados
Fonte – do autor

O questionário online aplicado para levantamento

Os participantes, majoritariamente, são pessoas na
desses dados foi disponibilizado à comunidade de
faixa etária entre 18 e 24 anos, contabilizando 92%.
alunos no dia 25 de maio de 2016 e permaneceu
Quanto ao semestre em que eles estão cursando, houve
aberto à resposta até o dia 22 de junho de 2016. Ele
uma maior participação de alunos do 5º semestre,
foi divulgado nos principais fóruns de discussões e
seguidos do 3º e 7º semestre. Esses dados podem ser
páginas oficiais dos cursos nas redes sociais. Foi
observados nos gráficos a seguir, respectivamente.
dividido em duas etapas, a primeira para identificar o
perfil dos usuários. Já a segunda, mais direcionada
para a avaliação da interface.

Contou com a participação de 88 pessoas, distribuídas

em 26 cursos, sendo que 25 são de graduação e 1

62
 Gráfico 1 – Faixa etária dos participantes Nas questões subsequentes da primeira etapa, buscou-
se identificar a experiência dos usuários quanto ao uso
da internet. Quando perguntados sobre há quanto tempo
utilizam a internet 50% disseram que utilizam há mais
de 10 anos, seguidos de 40,9% que indicaram utilizar
entre 6 e 10 anos. Quando perguntados sobre o seu
nível de conhecimento no uso da internet, sistemas e
aplicações online, 92% dos participantes responderam
ter conhecimento avançado. Quando perguntados sobre
quanto tempo por semana despendem com o acesso
Fonte – do autor à internet, 77,3% disseram que gastam mais de 15
horas por semana, seguido de 15,9% que dizem gastar
Gráfico 2 – Quantidade de participação por semestre entre 10 e 15 horas por semana. Por último, quando
perguntados quanto à velocidade de sua internet 33%
disseram possuir internet com velocidade entre 11 MB e
20 MB, seguidos dos 29,5% que disseram usar internet
com velocidade entre 6 MB e 10 MB. Os gráficos que
ilustram em mais detalhes os dados expostos acima
são apresentados a seguir.

Fonte – do autor

63
 Gráfico 3 – Tempo de utilização da internet em anos Gráfico 5 – Quantidade de horas semanais gastos com internet

Fonte – do autor Fonte – do autor

Gráfico 4 – Nível de conhecimento no uso da internet Gráfico 6 – Velocidade da internet dos participantes

Fonte – do autor Fonte – do autor

64
Foi questionado também aos participantes, dentre O último tópico do gráfico nomeado Outros era seguido
uma lista de sites e aplicações online, quais deles de um campo em que os participantes poderiam
os auxiliavam em atividades do dia-a-dia, que eles dizer que outras aplicações ou sites, além dos que já
gostavam e estavam habituados a utilizar. Esse tipo tinha sido listados, eles também utilizam. Esse tópico
de informação serve para buscar referências visuais recebeu 9 respostas, contabilizando 10.2%. A tabela a
e funcionais sobre como esses sites dão o suporte seguir mostra as respostas obtidas.
necessário para os usuários atingirem seus objetivos.
O resultado é mostrado no gráfico a seguir. Tabela 2 – Respostas do tópico 'Outros'

Aplicações/Sites Número de indicações

Gráfico 7 – Sites e aplicações mais utilizadas pelos participantes
Whats App 4
Google Classroom 2
Passei Direto 1
Wunderlist 1
Wrike 1
Slack 1
Notes 1
Snap Chat 1
Instagram 1
Waze 1
Fonte – do autor

Fonte – do autor

65
 Os dados apresentados a seguir caracterizam a Gráfico 10 – Nível de satisfação na utilização do SIGAA
avaliação feita pelos alunos sobre sua facilidade de
aprendizado, quantidade de acessos, nível satisfação
e sua avaliação de desempenho no uso. Os gráficos
que se seguem ilustram as respostas fornecidas.

Gráfico 8 – Aprendizado na utilização do SIGAA

Fonte – do autor

Gráfico 11 – Nível de desempenho na utilização do sistema

Fonte – do autor

Gráfico 9 – Quantidade de acesso semanal ao SIGAA

Fonte – do autor

Fonte – do autor

66
4.1.2 Descobertas principais
Tabela 3 – Respostas do tópico 'Outros', indicações de defeitos

A segunda etapa do questionário consistiu em identificar

Defeitos indicados Número de indicações
quais aspectos da interface do SIGAA tornavam a
experiência do usuário prejudicada. O gráfico a seguir Usabilidade ruim 2
demonstra quais os principais defeitos do SIGAA,
segundo os alunos.
Interface não é intuitiva 2

Gráfico 12 – Principais defeitos do SIGAA, segundo os alunos Acessível apenas por

2
Firefox e Desktop
Muitos passos para
1
realizar algumas tarefas

Bugs em botões 1

Barra de carregamento
1
da interface

Fonte – do autor Fonte – do autor

O último tópico do gráfico nomeado Outros era seguido Além disso, nessa segunda etapa, buscou-se identificar
de um campo em que os participantes poderiam também as principais tarefas realizadas pelos alunos na
dizer que outros defeitos, além dos que já tinham utilização do SIGAA. O intuito é torná-las mais facilmente
sido listados, eles identificavam. Esse tópico recebeu acessíveis. E aquelas que não são muito acessadas, mas
9 respostas, contabilizando 10.2%. A tabela a seguir que tem relevância dentro da proposta do sistema, o intuito
mostra as respostas obtidas. é de alterá-las, como estratégia para reverter essa situação.

67
 Para isso, foram listadas as opções dos itens do agora dizem respeito a indicação do número 0 na escala.
menu principal (Ensino, Bolsas, Ambientes Virtuais,
O item de menu Bolsas só apresenta uma opção:
Outros), para verificar quais eram as opções mais
Oportunidades de bolsa. Utilizando ainda a mesma
acessadas. Foram listadas também as opções de
escala de frequência, verificou-se que 61 participantes
configurações de dados pessoais. E por último, as
(69.9%) não utilizam essa opção.
opções da página Turma Virtual, que é onde acontece
a integração entre alunos e professores. O item de menu Ambientes virtuais apresenta duas
opções: Buscar comunidades virtuais e Minhas
Em uma escala de 0 a 5, em que 0 indica a menor
comunidades. Ainda utilizando a mesma escala de
frequência de acesso e 5 a maior frequência, a seguir
frequência, verificou-se que 80 participantes (90.9%)
são apresentados os resultados. Das opções do item de
não utilizam a primeira opção. Para a segunda opção,
menu Ensino, o que possui maior frequência de acesso
78 dos participantes (88.6%) disseram também não
é Matrícula Online com 45 indicações (51.1%). Embora
utilizá-la.
a função de realizar matrícula só esteja disponível nos
períodos de matrícula, quando isso acontece se torna O item de menu Outros apresenta três opções:
a opção mais acessada. Seguida de Baixar atestado Fórum de cursos; Acessar produções intelectuais; e
de matrícula com 44 indicações (50%), e logo após Atendimento ao aluno. Para a primeira opção, 68 dos
vem Consultar histórico com 37 indicações (42%). participantes (77.3%) disseram não utilizá-la. Seguida
Os números apresentados dizem respeito a indicação da segunda opção em que 79 participantes (89.8%)
do número 5 na escala. disseram também não utilizá-la. Já para a terceira
opção, 70 participantes (79.5%) disseram também
Dentre as opções menos acessadas estão a de
não utilizá-la. A tabela em detalhe desses resultados,
Cancelar matrícula institucional com 49 indicações
incluindo opções que aqui não foram citadas, estão no
(55.7%), seguida do empate entre Consultar unidades
Apêndice B.
acadêmicas e Consultar calendário acadêmico com
45 indicações cada (51.1%). Os números apresentados Na página Turma virtual, foram levantadas onze

68
principais tarefas que podem ser Tabela 4 – Frequência de acessos às opções da Turma Virtual
realizadas pelos alunos. A indicação de
Opção 0 1 2 3 4 5
acessos pelos usuários seguiu o mesmo
padrão (de 0 a 5), e como os resultados Visualizar frequência na disciplina 11 12 7 18 16 24
dessa parte são mais significativos para
o trabalho, serão apresentados a seguir Visualizar notas das avaliações 6 8 8 16 18 32
na Tabela 4. Como se pode observar,
as opções que apresentam uma maior Visualizar notícias cadastradas 7 8 7 14 16 36
frequência de acesso são aquelas em Visualizar/submeter atividades
que dependem, primeiramente, da 13 14 10 13 14 24
cadastradas
ação de um professor, como visualizar Visualizar/responder enquetes
notícias cadastradas. Já as opções que 39 14 12 10 5 8
cadastradas
podem ser executadas pelos alunos, Visualizar/submeter avaliações
tais como Chat e Fórum, praticamente 24 17 11 9 14 13
cadastradas
não são acessadas. E a proposta desse
Visualizar plano de curso 26 12 15 13 10 12
ambiente virtual de ser uma extensão da
sala de aula, acaba por ser descontruída.
Visualizar participantes da turma 10 12 18 16 20 12

4.1.3 Descobertas secundárias Visualizar programa da disciplina 23 11 16 12 15 11

A última pergunta do questionário abria Fórum 60 16 6 4 2 0

espaço para que os alunos fizessem mais
alguma consideração em relação ao Chat 77 7 2 1 1 0
SIGAA, que pudesse ajudar na pesquisa.
Fonte – do autor
Como sugestões foram colocados:

69
 Recursos atuais que poderiam melhorar; Sugestão de • Os elementos da interface gráfica deveriam conter
novos recursos; e Críticas. Algumas respostas eram explicações quando o mouse é posto em cima dos
mais voltadas para o âmbito do desenvolvimento de mesmos, para facilitar as tomadas de decisão;
sistema, como acessar o SIGAA através de outros
navegadores, foram desconsideradas, uma vez que • Possibilitar a consulta dos créditos do Restaurante
não são o foco do presente trabalho. A seguir serão Universitário;
apresentadas as respostas, de forma resumida, pois
• As ofertas de estágios deveriam ser feitas pelo SIGAA;
algumas eram comentários muito extensos e foi preciso
resumi-los.
• Deveria usar o Google Classroom como referência
para o redesign;
• A interface é complexa, confusa e mal organizada;

• Muitos recursos são difíceis de aprender e entender

• Necessita de uma página de ajuda onde são
como manipulá-los, por isso são subutilizados;
especificadas as funções disponíveis e para que elas
servem;
• Disponibilizar informações gerais de contato sobre
aqueles que compõe o departamento (Coordenador,
• Deve ser usado como um espaço de comunicação
secretário, professores, etc.);
tanto entre alunos e professores, quanto entre os
próprios alunos. Deveria ser possível criar grupos e ter
• A má organização e apresentação da informação, bem
chat, assim como em redes sociais;
como os elementos da interface gráfica prejudicam o
processo de matrícula.
• Deveria ser possível adicionar conteúdo digital como
fotos, vídeos, livros, apostilas. Possibilitando, assim,
compartilhar conteúdo entre a turma;

• A interface não é atrativa, deveria ser mais minimalista;

70
4.1.4 Criação de personas Figura 4.1 – Persona 1

Baseados nos dados coletado nessa primeiraetapa,

levantados através do questionário, foram criadas duas
personas. Personas, como já foi abordado anteriormente,
são personagens fictícios que englobam características
dos usuários típicos do sistema, tais como seus objetivos,
atitudes e preferências. Dessa forma, mantem-se o
foco em quem vai receber o produto final, o que eles
necessitam, guiando o processo de projeto.
Fonte – do autor

4.1.5 Inspeção de usabilidade no SIGAA Figura 4.2 – Persona 2

Como já foi explicado na seção 2.4.2 desse trabalho,

a inspeção de usabilidade utilizando checklists é uma
forma rápida e eficiente para identificar, baseado em
recomendações ergonômicas, problemas de usabilidade
que comumente estão presentes nos sistemas interativos.
Ela foi realizada utilizando checklists disponibilizados no
site do LabUtil (Laboratório de Utilizabilidade da UFSC),
mais especificamente na página do Ergolist. O laudo final
Fonte – do autor
gerado pelo site será apresentado na Tabela a seguir.

71
 Tabela 5 – Resultados da inspeção de usabilidade

Questão Como pode ser observado, as questões

Qntd. de Questões Não
Critério ergonômico não não conformes, que indicam aquelas que
questões conformes aplicáveis
conformes não estão seguindo as recomendações
Presteza 17 5 8 4 ergonômicas indicadas para prover uma
Agrupamento por localização 11 2 7 2 boa usabilidade, somam 108 (55.6%)
Agrupamento por formato 17 8 8 1 de um total de 194 questões. Cada
uma das recomendações, possuem
Feedback 12 4 7 1
pelo menos uma questão que não
Legibilidade 27 11 10 6
está conforme o recomendado. Isso só
Concisão 14 4 8 2 reforça as informações levantadas junto
Ações mínimas 5 2 3 0 aos usuários.
Densidade informacional 9 1 8 0
Ações explícitas 4 2 2 0
4.2 Escopo
Controle do usuário 4 1 3 0
Flexibilidade 3 0 3 0
4.2.1 Especificações funcionais e
Experiência do usuário 6 2 4 0 requerimentos de conteúdo
Proteção contra erros 7 2 4 1
Mensagens de erro 9 4 5 0 Baseado nas informações levantadas
no plano da Estratégia, nessa subseção
Correção de erros 5 1 4 0
serão especificadas as funcionalidades
Consistência 11 6 5 0 que o sistema deverá ofertar para
Significados 12 4 8 0 suprir as necessidades dos usuários.
Compatibilidade 21 4 11 6 Elas são produto da análise do perfil
TOTAL 194 63 108 23 dos usuários, de suas necessidades,

Fonte – do autor
72
suas críticas, sugestões e referências de aplicações 1. O sistema deve possuir uma área de Login, com
e sites de preferência. Além de conclusões oriundas campos para digitação do nome de usuário e senha.
do processo de inspeção de usabilidade, em que se Além disso, deve fornecer links para recuperação dessas
observou certas congruências com os resultados do informações;
questionário, validando grande parte seus dados. 2. Deve fornecer um sistema de navegação global, que
Por se tratar de um redesign, alguns aspectos da se repetirá consistentemente por todas as páginas do
interface não precisarão mudar de um ponto de vista sistema. Deve utilizar ícones como suporte para cada
funcional, mas sim de uma perspectiva organizacional rótulo de página;
e visual, que segundo a metodologia adotada, fazem
3. Deve fornecer sistema de navegação contextual, caso
parte das etapas subsequentes. Por conta disso, não se
necessário;
faz necessário o registro de todas elas aqui. Contudo,
elas passarão por uma reformulação nas etapas que 4. Deve fornecer um espaço para notificações de
se seguem. atividades recentes, fornecendo informações sobre
quem exerceu a atividade, data e hora;
Algumas especificações podem sofrer alterações ou
5. Deve fornecer um espaço que engloba a configuração
serem removidas durante o processo de projeto, bem
de informações, tais como alteração de e-mail ou senha,
como novas especificações podem surgir, faz parte da
foto de perfil e dados pessoais. Além disso, a opção de
natureza projetual, e é preciso estar apto a lidar com isso.
fazer Logout (sair);
Geralmente, as especificações funcionais são acompa-
6. O sistema deve possibilitar a consulta de informações
nhadas do conteúdo que dá suporte à essas funções,
acadêmicas, tais como: atestado de matrícula, histórico,
mas nem toda função exige a descrição de conteúdo,
pendências de conclusão, etc.
como visto na metodologia (Capitulo 3), depende se o
recurso é mais voltado à funcionalidade ou ao conteúdo. 7. Deve possuir um espaço para divulgação de
Os requisitos são mostrados a seguir em forma de lista, oportunidades de bolsas, com informação sobre como
conforme sugere a literatura. se candidatar;

73
 9. Deve possibilitar o compartilhamento de conteúdo 19. Deve fornecer feedback para todas as ações
digital, tais como vídeos, fotos, arquivos de texto, etc.; executadas pelos usuários;
10. Deve possuir poucos passos para realização das 20. O usuário deve ter controle sobre o sistema, podendo
principais tarefas; a qualquer momento abortar uma tarefa ou desfazer uma
11. Deve possuir tooltips que apresentam informações operação e retornar ao estado anterior;
sobre botões, campos de informações, opções de menu, 21. Deve evitar situações de erros, e prover suporte para
etc.; os usuários se recuperarem, caso eles ocorram;
12. Deve possuir um feed de atividades recentes, quando 22. Deve possuir layout, tratamento cromático, tipográfico
o aluno estiver visualizando detalhes de uma disciplina; e iconográfico apresentados de forma consistente em
13. Deve possibilitar a submissão de atividades e todas as páginas do sistema;
avaliações cadastradas pelo professor; 23. O sistema deve possuir opção de ajuda, com
14. Deve possibilitar a consulta de nota e frequência na documentação das funcionalidades;
disciplina de forma mais facilitada;
15. Deve possibilitar a consulta de participantes da turma
e plano de aula da disciplina;
16. Deve possuir um espaço com informações gerais de
contato sobre professores, coordenador(a), secretário(a);
17. Deve possuir um espaço para contato entre alunos e
suporte técnico;
18. Deve fornecer uma linguagem simples e clara na
rotulação dos elementos da interface, com termos
compatíveis com o público-alvo;

74
75
4.3 Estrutura Figura 4.3 – Organograma geral do sistema / Fonte – do autor

4.3.1 Organograma geral do sistema

Com base nos resultados das etapas anteriores foram

levantadas quais páginas vão compor a proposta de
redesign do presente trabalho. Elas foram organizadas
de forma hierarquica em um organograma, criando o
contexto navegacional e transacional geral do sistema,
como visto na imagem a seguir.

76
77
 4.3.2 Modelagem das tarefas

Os fluxos são tão importantes para boas interfaces A forma de representação do fluxo proposto por Ryan
interativas quanto as telas em si, criar uma sequência de pode ser visto na figura a seguir:
ações específicas, guiam o usuário através do sistema
Figura 4.4 – Designing UI Flows
enquanto eles realizam suas tarefas. Apesar disso, os
fluxos são difíceis de comunicar durante o processo de
design, pois é muito demorado desenhar cada estado
de um fluxo. Além disso, eles ficam desatualizados
muito facilmente, à medida que as telas mudam. Por
outro lado, os fluxos descritos detalhadamente não são
facilmente decompostos em listas de verificação para Fonte – Signal v. Noise,
Disponível em: [Link]
a revisão do design. Em contrapartida, há formas de Acesso em 08 jun 2017.
modelar as tarefas dos usuários criando fluxos mais
simples e flexíveis, foi o que propôs Ryan Singer (2009) É importante salientar que esses esquemas não
em seu artigo A shorthand for designing UI Flows. foram determinantes no processo de projeto, eles só
Nesse artigo, Ryan diz que: auxiliaram a entender o que, em termos de interface,
seria necessário para que o usuário interaja com o
Os fluxos são feitos de interações individuais. Uma tela
oferece algumas possibilidades e o usuário escolhe sistema e consiga completar as suas tarefas. Além de
uma. Então, algo acontece e a tela muda. É uma ajudar a entender os pontos em que serão necessárias
conversa contínua. Cada momento em um fluxo é como
uma moeda com dois lados. A tela está mostrando algo estratégias de prevenção e recuperação de erros. A
de um lado, e o usuário está reagindo do outro lado. seguir serão mostrados os resultados da modelagem
Esses diagramas de fluxo ilustram esta natureza de dois
lados com uma barra. Acima da barra é o que o usuário das tarefas do usuário utilizando o método em questão.
vê, abaixo da barra é o que eles fazem. Uma seta liga a
ação do usuário a uma nova tela com mais uma ação.
(SINGER, 2009. Tradução nossa)

78
 Figura 4.5 – Modelagem das tarefas: Login e Cadastro

DASHBOARD COM DISCIPLINAS

MATRÍCULAS NO SEMESTRE
TELA DE LOGIN

TELA DE LOGIN COM MENSAGEM

Entrar com usuário
DE ERRO E SUGESTÃO DE CORREÇÃO
e senha válidos

Entrar com usuário TELA PARA RECUPERAR SENHA E-MAIL DE SOLICITAÇÃO

e/ou senha inválidos DE MUDANÇA DE SENHA TELA DE MUDANÇA DE SENHA
Entrar com e-mail registrado
Clicar em “Esqueceu à conta e enviar solicitação de Clicar no link enviado para e-mail Entrar com nova senha
sua senha?” mudança de senha

Clicar em “Cadastrar” TELA DE CONFIRMAÇÃO DO ENVIO

TELA DE CADASTRO

Entrar com Tipo de Vínculo,

Nome completo, CPF, E-mail,
Usuário e Senha, válidos

Entrar com Tipo de Vínculo,

Nome completo, CPF, E-mail,
Usuário e Senha, inválidos
TELA DE CADASTRO COM MENSAGEM
DE ERRO E SUGESTÃO DE CORREÇÃO

Fonte – do autor

79
 Figura 4.6 – Modelagem da tarefa: Detalhes das disciplina
SELETOR DE ARQUIVOS DO O.S.

Escolher arquivo da atividade

DASHBOARD SEÇÃO DAS ATIVIDADES

PERFIL DO PROFESSOR
Escolher alguma discipina Ver atividades cadastradas
na qual está matriculado pelo professor Informações do professor

Enviar atividades resolvidas

para o professor PERFIL DO ALUNO
PÁGINA DA DISCIPINA
Clicar na foto do professor Informações do aluno
e ir até o perfil do mesmo
Escolher seção
das Atividades
SEÇÃO DAS NOTÍCIAS
Escolher seção
das Notícias Ver notícias cadastradas
pelo professor SEÇÃO DO PLANO DE AULA
Escolher seção Clicar na foto do professor
dos Integrantes e ir até o perfil do mesmo Ver plano de aula cadastrado
pelo professor: Data e Descrição
Escolher seção do conteúdo da aula
SEÇÃO DOS INTERGRANTES
do Plano de Aula
SEÇÃO DO FÓRUM
Ver integrantes da turma: CRIAR NOVO TÓPICO
Escolher seção professor(es) e alunos
do Fórum Ver os tópicos cadastrados
por professor(es) ou alunos Adicionar título, descrição
Clicar na foto do professor
Ver Notas ou aluno e ir até o perfil Opcional: Adicionar
Clicar em “Novo Tópico” Anexo e/ou Imagem
do mesmo
Ver Frequência
Ordenar tópicos de acordo
com o filtro escolhido

Fazer buscar pelo nome

de um tópico SELETOR DE ARQUIVOS DO O.S.

Escolher seção Escolher anexo ou imagem

do Fórum

Fonte – do autor

80
Figura 4.7 – Modelagem da tarefa: Consultar Unidades Acadêmicas

Fonte – do autor

Figura 4.8 – Modelagem da tarefa: Consultar Cursos

Fonte – do autor
81
 Figura 4.9 – Modelagem da tarefa: Consultar Componente Curricular Os fluxos mostrados ilustram as tarefas
que envolviam processos de interação
LISTA DE COMPONENTES mais complexos, nem todas tarefas
CURRICULARES EXISTENTES
LISTA DE COMPONENTES necessitam do desenho de seu fluxo, pois
ORGANIZADOS DE ACORDO COM
Clicar em um dos componentes
A UNIDADE ESCOLHIDA
são muito simples. Como, por exemplo,
mostrados
visualizar o histórico do IRA(Indice de
Clicar em um dos componentes
Filtrar pela unidade acadêmica
motrados
Rendimento Acadêmico), que pode ser
responsável pelo componente
feito em apenas dois passos, por ser
LISTA DE COMPONENTES
Filtrar pelo nível do componente ORGANIZADOS DE ACORDO COM uma simples visualização de dados
A NÍVEL ESCOLHIDO
Filtrar pelo tipo de componente
Clicar em um dos componentes
Buscar pelo nome do motrados
componente
LISTA DE COMPONENTES
ORGANIZADOS DE ACORDO COM
O TIPO ESCOLHIDO

Clicar em um dos componentes

motrados

COMPONENTE BUSCADO

Clicar no componente buscado

DETALHE DO COMPONENTE

Informações sobre o componente

Fonte – do autor

82
4.4 Esqueleto Figura 4.10 – Wireframe estrutural geral do sistema

No Projeto E, metodologia inspirada na

proposta por Garrett, citada no capítulo
3 desse trabalho, os wireframes são
classificados em estruturais e arquiteturais,
de acordo com o grau de detalhamento.
Os estruturais são mais gerais e
identificam a distribuição do conteúdo,
já os arquiteturais são mais detalhados,
"indicando não somente a localização
de determinado conteúdo, mas detalhes
específicos deste conteúdo". (MEURER;
SZABLUCK, 2010)

4.4.1 Wireframes estruturais

Um dos principais erros do sistema atual Fonte – do autor

diz respeito a falta de consistência entre
as páginas do sitema, apresentando Para solucionar esse problema, o seguir o mesmo layout. A seguir serão
configurações diferentes dependendo primeiro wireframe feito representa a mostrados alguns wireframes estruturais
da seção do mesmo. É preciso se estrutura geral do sistema, que será de algumas das principais áreas do
estabelecer um padrão no design, replicada em toda a interface. Com sistema, onde pode ser observado como
apresentando e mantendo os mesmos exceção da página de Login e Cadastro, essa estrutura geral se comporta. Esses
elementos de forma consistente em que precedem o acesso aos recursos do esboços nortearam o desenvolvimento
todos os lugares que ele aparece. sistema, e por conta disso não precisam dos demais wireframes arquiteturais.
83
 Figura 4.11 – Wireframe estrutural: Página Inicial Figura 4.12 – Wireframe estrutural: Detalhes da disciplina

Fonte – do autor Fonte – do autor

Figura 4.13 – Wireframe estrutural: Matrícula Figura 4.14 – Wireframe estrutural: Consultas

Fonte – do autor Fonte – do autor

84
4.4.2 Wireframes arquiteturais Figura 4.16 – Wireframe: Login

Os wireframes mostrados a seguir têm um nível de

detalhamento maior, eles serviram para avaliar como o
conteúdo e as funcionalidades deveriam ser inseridos
e apresentados na interface, bem como prever erros
estruturais e de rotulação. Eles foram feitos em cima de
uma malha construtiva (grid), que serve para diagramar
o conteúdo e os elementos da interface, mantendo-os
alinhados e consistentes em todas as telas do sistema.

Fonte – do autor

Figura 4.15 – Grid de construção Figura 4.17 – Wireframe: Cadastro

Fonte – do autor Fonte – do autor

85
 Figura 4.18 – Wireframe: Página Inicial Figura 4.19 – Wireframe: Atividades da disciplina

Fonte – do autor

Fonte – do autor

Figura 4.20 – Wireframe: Notícias da disciplina Figura 4.21 – Wireframe: Integrantes da disciplina

Fonte – do autor Fonte – do autor

86
Figura 4.22 – Wireframe: Plano de aula da disciplina Figura 4.23 – Wireframe: Fórum da disciplina

Fonte – do autor Fonte – do autor

Figura 4.24 – Wireframe: Passo 1 da Matrícula Figura 4.25 – Wireframe: Busca Avançada da Disciplina

Fonte – do autor Fonte – do autor

87
 Figura 4.26 – Wireframe: Passo 2 da Matrícula Figura 4.27 – Wireframe: Passo 3 da Matrícula

Fonte – do autor

Fonte – do autor

Figura 4.28 – Wireframe: Informes do processo de Matrícula Figura 4.29 – Wrieframe: Detalhe de uma disciplina

Fonte – do autor Fonte – do autor

88
Dois dos principais problemas levantados, tanto Figura 4.30 – Print da página Turma Virtual do SIGAA
na inspeção de usabilidade quanto no questionário
aplicado junto aos alunos, diz respeito à má organização
e distribuição da informação e à navegação confusa
que possui o sistema atual, o que exigiu uma atenção
especial para essa etapa do processo.

Como pode ser observado nos wireframes, a nova

interface traz uma navegação fixa, que se mantem
consistente em todas as áreas do sistema, além de ter
ganhado uma área maior de destaque. As figuras ao
lado ilustram bem esses problemas, na 4.30 o menu no
qual o aluno tem acesso as principais funcionalidades Fonte – SIGAA. Disponível em: [Link] Acesso em 01 jul 2017.
do sistema fica na parte superior esquerda, já na 4.31
ele não aparece mais. O outro menu aparece na parte Figura 4.31 – Print da Página Inicial do SIGAA
superior direita, e se comporta como um menu principal
aparecendo em todas as telas do sistema, contudo,
algumas de suas funções não funcionam e outras não
são provém valor significativo para os usuários e, por
conta disso, são subutilizadas.

Fonte – SIGAA. Disponível em: [Link] Acesso em 01 jul 2017.

89
Outra grande mudança proposta com o redesign é Figura 4.32 – Print da Consulta de Componente Curriculares
a utilização de caixas(cards) para organização das
informações ao invés de tabelas, como pode ser
observado nas figuras ao lado.

O principal problema da utilização de tabelas na web,

é a dificuldade ou inviabilidade de apresentá-las em
dispositivos móveis. Em layouts responsivos, o uso
de tabelas implica em uma grande dificuldade para os
desenvolvedores apresentarem as informações sem
que hajam perdas de legibilidade ou leiturabilidade
das informações. Esse problema aumenta ainda
mais quando as linhas das tabelas contêm muitas
Fonte – SIGAA. Disponível em: [Link] Acesso em 01 jul 2017.
informações, como é o caso das utizadas no SIGAA.

Apesar do presente trabalho não está focado na criação Figura 4.33 – Wireframe: Consuta de Componentes Curriculares
da interface para dispositivos móveis, a responsividade
ser um prérequesito para qualquer projeto voltado
para web. Além do fato de ter sido um requesito
constantemente ressaltado pelos alunos durante
a pesquisa. Por isso, é importante viabilizar esse
requesito, e a melhor solução foi a utilização desses
cards para agrupar e apresentar as informações.

Apesar deles ocuparem mais espaço na tela, também

foi pensado um robusto sistema de buscas para
minimizar a navegação vertical e fazer com que os
usuários encontrem o que procuram mais facilmente.
Fonte – do autor
90
4.5 Superfície 4.5.1 Guia de Estilo

Uma da maiores motivações para escolher o SIGAA TIPOGRAFIA

como objeto de estudo, foi o fato de que sua interface
tem um design visual muito ultrapassado, por não ter
recebido nenhuma atualização desde sua concepção.
Esse defeito foi novamente ressaltado pelos usuários
durante a pesquisa, validando essa motivação.

Durante as etapas anteriores esse defeito foi sendo

gradativamente tratado, através da arquitetura da
informação, design de informação e etc. Nessa etapa foi
definida a interface final do usuário, foram escolhidas
as cores, tipografia e ícones, que comporam o produto
final. De acordo com Norman (2008), existem pesquisas
que mostram que produtos digitais que possuem um
visual melhor, são 25% mais fáceis de serem utilizados
do que os de seus concorrentes. Desta forma, quanto
mais aperfeiçoada for a interface, maiores as chances
dos usuários terem uma melhor experiência de uso.
ÍCONES
Como síntese desse processo, foi criado um guia de
estilo que agrupa as principais elementos visuais
utilizados nesse tratamento visual que os wireframes
arquiteturais receberam.

91
C OR ES

Inputs

Dropdown

ELEMENTOS

Botões

Paginação

92
4.6 Interface Final Figura 4.34 – Redesign da página de Login

Para ficar mais claro as mudanças

propostas nesse trabalho, essa parte
será destinada à apresentação da
interface final para o SIGAA, mostrando
também algumas telas do sistema atual.

Fonte – do autor

Figura 4.35 – Print da página de Login

Fonte – SIGAA. Disponível em: [Link] Acesso em 01 jul 2017.

93
 Figura 4.36 – Redesign da página de Cadastro (Popup)

Fonte – SIGAA. Disponível em: [Link] Acesso em 01 jul 2017.

94
 Figura 4.37 – Print da página de Cadastro

Fonte – SIGAA. Disponível em: [Link] Acesso em 01 jul 2017.

95
 Figura 4.38 – Redesign da Página Inicial

Fonte – do autor

96
 Figura 4.39 – Print da página Inicial

Fonte – SIGAA. Disponível em: [Link] Acesso em 01 jul 2017.

97
 Figura 4.40 – Print da página Turma Virtual

Fonte – SIGAA. Disponível em: [Link] Acesso em 01 jul 2017.

98
Figura 4.41 – Redesign da página de Atividades da Turma Virtual

Fonte – do autor

99
 Figura 4.42 – Redesign da página de Notícias da Turma Virtual

Fonte – do autor

100
Figura 4.43 – Redesign da página de Integrantes da Turma Virtual

Fonte – do autor

101
 Figura 4.44 – Redesign da página de Plano de Aula da Turma Virtual

Fonte – do autor

102
Figura 4.45 – Redesign da página do Fórum da Turma Virtual

Fonte – do autor

103
 Figura 4.46 – Print da página de Matrícula Online

Fonte – SIGAA. Disponível em: [Link] Acesso em 01 jul 2017.

104
Figura 4.47 – Redesign da página de Matrícula Online / Fonte – do autor

105
 Figura 4.48 – Redesign da página de Matrícula Online, 1 / Fonte – do autor

106
Figura 4.49 – Redesign da página de Matrícula Online, 2 / Fonte – do autor

107
 Figura 4.50– Redesign da página de Matrícula Online, 3 / Fonte – do autor

108
Figura 4.51 – Redesign da página de Matrícula Online, 4 / Fonte – do autor

109
 Figura 4.52 – Redesign da página de Matrícula Online, 5 / Fonte – do autor

110
Figura 4.53 – Redesign da página de Matrícula Online, 6

Fonte – do autor

111
 Figura 4.54 – Print da página de Histórico de IRA

Fonte – SIGAA. Disponível em: [Link] Acesso em 01 jul 2017.

112
Figura 4.55 – Redesign da página do Histórico do IRA

Fonte – do autor

113
 Figura 4.56 – Print da página de Pendências de Conclusão

Fonte – SIGAA. Disponível em: [Link] Acesso em 01 jul 2017.

114
Figura 4.57 – Redesign da página de Pendências de Conclusão

Fonte – do autor

115
 Figura 4.58 – Redesign da página de Bolsas / Fonte – do autor

116
Figura 4.59 – Redesign da página de Bolsas, 2

Fonte – do autor

117
 Figura 4.60 – Print da página de Consulta de Unidades Acadêmicas

Fonte – SIGAA. Disponível em: [Link] Acesso em 01 jul 2017.

118
Figura 4.61 – Redesign da página de Consulta de Unidades Acadêmicas / Fonte – do autor

119
 Figura 4.62 – Redesign da página de Detalhe da Unidade Acadêmica

Fonte – do autor

120
Figura 4.63 – Redesign da página de Consulta de Cursos / Fonte – do autor

121
 Figura 4.64 – Redesign da página de Consulta de Componentes Curriculares / Fonte – do autor

122
Figura 4.65 – Redesign da página de Atendimento ao aluno

Fonte – do autor

123
 Figura 4.66 – Redesign da página de Perfil do Aluno

Fonte – do autor

124
Figura 4.67 – Redesign da página de Dados Pessoais

Fonte – do autor

125
 4.7 Teste de usabilidade 1. Entrar ou Cadastrar-se no sistema
2. Consultar Pendências de Conclusão
De posse do resultado final da interface, foi desenvolvido
3. Ver atestado de matrícula
um protótipo de média fidelidade utilizando o aplicativo
web InVision. Este, é uma das ferramentas mais 4. Consultar Histórico
utilizadas por designers de produtos digitais, pois 5. Consultar HIstórico do IRA
permite a criação de protótipos de forma rápida e fácil, 6. Fazer matrícula online
para serem feitos testes com usuários e as devidas 7. Ver Atestado de Matrícula
melhorias, quando nececessário.
8. Visualizar Notas e Frequência de uma disciplina
Segundo Nielsen (2007), com cinco participantes se 9. Visualizar/submeter Atividades cadastradas
obtem 80% dos problemas de usabilidade. É óbvio que
10. Visualizar Notícias cadastradas
quantos mais usuários participarem do teste, melhor.
11. Visualizar Plano de Aula
Porém, o teste de usabilidade visa o levantamento de
dados qualitativos. Ainda segundo alguns estudos do 12. Visualizar Integrantes da Turma
autor, à partir do 6º participante, os problemas começam 13. Visualizar/adicionar novo tópico no Fórum
a se repetir e o aprendizado diminui. 14. Visualizar Perfil
O principal objetivo do teste foi avaliar se a nova interface 15. Visualizar/Editar Dados Pessoais
da o suporte necessário para que os usuários consigam 16. Consultar Unidades Acadêmicas
realizar as tarefas de forma fluida, sem encontrar 17. Consutar Cursos da UFC
dificuldades. Além de buscar erros de usabilidade e
18. Consultar Oportunidades de Bolsas
levantar opiniões sobre o novo visual da interface.
19. Entrar em contato com a Coordenação do Curso
A seguir serão listadas as tarefas que os usuários
realizaram durante o teste:

126
4.7.1 Resultado dos testes das informações e do sistema de navegação tornaram
o uso mais facilitado.
Os testes foram realizados com cinco usuários
representativos do público-alvo, alunos de cinco cursos Uma vez logado no sistema, algumas tarefas foram
e semestres diferentes, para obter feedbacks de realizadas em menos de 20 segundos, como a consulta
usuários com diferentes níveis de experiência quanto a do Histórico do IRA.
utilização do SIGAA, como mostra a tabela: Uma dificuldade recorrente, mas que era em pouco
tempo superada, foi o fato de algumas subseções do
Tabela 6 – Participantes do teste de usabilidade
sistema estarem em seções diferentes do sistema atual.
Cursos Semestre Como é o caso da tarefa "Ver atestado de matrícula",
que atualmente se encontra no menu Ensino, mas que
Odontologia 5º
após a reorganização da arquitetura da informação, foi
Medicina 1º movida para a seção de Matrícula, por afinidade.
Ciência da Computação 3º Ao final de cada teste, os usuários foram perguntados
Pedagogia 6º sobre o que acharam do novo visual da interface e da
Engenharia Civil 7º usabilidade na proposta de redesign do SIGAA. Todos
forneceram feedbacks positivos, argumentando que
Fonte – do autor
conseguiriam realizar suas tarefas rotineiras de forma
Os usuários foram solicitados a realizar as tarefas mais facilitada caso houvesse a implementação desse
listadas anteriormente enquanto eram observados. projeto. Destacaram também que o visual mais simples
Os testes duraram em média 25 minutos, levando em ajuda a focar na tarefa e torna a interação mais fluida
consideração também as pequenas pausas entre a e intuitiva.
finalização e a descrição da próxima tarefa. No geral, os testes forneceram bons feedbacks, usados
Todos os usuários conseguiram realizar todas as para validar hipóteses quanto a facilidade na utilização
tarefas solicitadas, segundo eles a nova organização de algumas funcionalidades.

127
 05 O intuito desse trabalho foi de, com base em uma revisão
sistemática da bibliografia, entender as disciplinas que
buscou-se delimitar o escopo do projeto, registrando
o que será possível realizar com a nova interface,
tangem o design de interface centrado no usuário, para descrevendo as funções disponíveis aos usuários que
se poder desenhar uma estrutura de ação para resolução lhes auxiliarão na realização de suas tarefas.
Considerações Finais

do problema de pesquisa. Dessa forma, têm-se um

Essas duas primeiras etapas são, segundo a literatura,
panorama de como é feita essa prática atualmente,
a parte mais importante do projeto, uma vez que todas
nomeadamente suas diretrizes, seus conceitos, técnicas
as fases subsequentes dependem diretamente das
e ferramentas. Isso, nos fornece um conjunto de boas
decisões tomadas nesses níveis mais abstratos do
práticas no projeto de uma interface de usuário, que
desenvolvimento. Por isso, foi feito um grande esforço
foram sistematicamente aplicadas e validadas.
para que todas as diretrizes fossem seguidas, embora
O primeiro passo do trabalho foi levantar as necessida- em alguns momentos estas precisassem sofrer algumas
des dos usuários, delineando a situação atual em alterações para se adaptar ao contexto do problema.
que reside o problema, o que inclui a identificação A principal dificuldade enfrentada durante esse
do perfil do usuário, seus objetivos e atividades, sua processo diz respeito ao levantamento dos dados.
avaliação sobre seu desempenho com o sistema atual, Pelo fato de a universidade possuir milhares de alunos,
suas ideias de melhorias para o mesmo, dentre outras era desejado que uma quantidade maior de pessoas
coisas. Paralelamente, foram feitas inspeções de tivessem participado da pesquisa, o que tornaria essa
usabilidade no sistema atual, com o intuito de encontrar etapa mais rica de informações. Apesar disso, aquelas
possíveis falhas que, eventualmente, podem interferir que participaram forneceram dados muito significativos,
negativamente na experiência dos usuários. que foram importantíssimos para o encadeamento
Todo esse apanhado de dados e informações, foram das ações de projeto. Através da junção dos dados
traduzidos em especificações funcionais e requerimentos adquiridos com a experiência do autor da pesquisa, que
de conteúdo, que já caracteriza um pensamento também é aluno/usuário do objeto de estudo, buscou-
estratégico sobre como resolver o problema. Com isso, se propor a melhor solução possível.

128
As fases posteriores tiveram um caráter mais prático,
um momento de gerar ideias, criar e aplicar estratégias
de design para gerar alternativas que estejam em
consonância com a proposta do trabalho.

O principal desafio dessa etapa foi tornar um sistema

que possui um certo nível de complexidade, o mais fácil
possível de ser utilizado. A universidade possui uma
diversidade enorme de pessoas, com experiências,
formações e limitações diferentes. Projetar uma nova
interface que atendesse às necessidades de um
espectro grande de usuários foi um grande desafio. Por
isso que o envolvimento dos usuários no processo foi
determinante, pois as informações fornecidas guiaram
e fundamentaram as escolhas feitas no design.

O resultado desse trabalho é apenas um recorte do

objeto de estudo, que é muito mais abrangente, não
se restringindo somente a interface utilizada pelo
aluno. Contudo, buscou-se trabalhar visando sempre
o sistema como um todo, para que todas as soluções
de design propostas pudessem ser adaptadas para as
demais áreas do sistema.

Diante disso, consideramos que todos os objetivos

apresentados no início do trabalho foram alcançados,
como mostram os bons resultados colhidos até então.

129
Referências Bibliograficas BARBOSA, S. D. J.; SILVA, Bruno Santana da. Interação humano-computador – Rio de Janeiro: Elsevier, 2010.

BRASIL. Decreto Federal nº 5.296 de 2 de dezembro de 2004. Disponível em: <[Link] Acesso
em: 30 mai. 2016.

BONSIEPE, G. Design, Cultura e Sociedade. São Paulo: Blucher, 2011.

CARD, Stuart K.; MORAN, Thomas P.; NEWELL, Allen. The Psycology of Human-Computer Interaction. Hillsdale,
NJ. Lawrence Erlbaum Associates (LEA), 1983. Disponível em: < [Link] Acesso em: 18 mai. 2016.

CARDOSO, Rafael, 1964 – Uma introdução à história do design. São Paulo, Blucher, 2008.

CARVALHO, José Oscar Fontanini de. O papel da interação humano computador na inclusão digital. Programa
de Pós-Graduação em Ciência da Informação, Pontifíca Universidade Católica de Campinas. Campinas, SP: 2003.
Disponível em: <[Link] Acesso em: 17 mai. 2016.

CYBIS, Walter; BETIOL, Adriana Holtz; Faust, Richard. Ergonomia e Usabilidade: Conhecimentos, Métodos e
Aplicações. São Paulo: Novatec, 2007.

DE SOUZA, C.S.; LEITE, J.C.; PRATES, R.O.; BARBOSA, S.D.J. "Interação Humano-Computador: Perspectivas
Cognitivas e Semióticas". In: Fuks, H. (Org.) Anais das Jornadas de Atualização em Informática. Rio de Janeiro:
Edições Entre Lugar, 1999.

DIAS, Claúdia. Usabilidade na Web. 2d. Rio de Janeiro, Alta Books, 2006.

DONDIS, Donis A. Sintaxe da Linguagem Visual. 2007. Disponível em: < [Link] Acesso em: 19
jun 2016.

DSI – DIREÇÃO DE SERVIÇOS DE INFORMÁTICA. Design Visual. Instituto de Superior Técnico, Universidade
de Lisboa. 2012. Disponível em: <[Link] Acesso em: 19 jun 2016.

130
FONSECA, Manuel J.; CAMPOS, Pedro; GONÇALVES, Daniel. Introdução ao Design de Interfaces. FCA –
Editora de Informática. Lisboa, 2012.

FRASCARA, J. Communication design: principles, methods, and practice. New York: Allworth Press, 2004.

FRASCARA, J. ¿Qué es el diseño de información? Buenos Aires: Ediciones Infinito, 2011.

GARRETT, Jesse James. The Elements of User Experience: User-centered design for the web. News York,
NY: News Riders Publishing, 2003.

JACOBSON, R. Information design. Cambridge - MA: The MIT Press, 2000.

LEITE, Jair C. Notas da aula de Engenharia de Software: Design de Interfaces do Usuário. Universidade
Federal do Rio Grande do Norte (UFRN). Disponível em: < [Link] Acesso em 18 jun 2016.

KRIPPENDORFF, Klaus. Design centrado no usuário: uma necessidade cultural. Estudos em Design, Rio de
Janeiro, v. 8, 2000.

LABORATÓRIO DE UTILIZABILIDADE (LABUTIL). Ergolist. Disponível em: < [Link]

ergolist/>. Acesso em: 09 jun. 2016.

MEURER, Heli; SZABLUCK, Daniela. Projeto E: aspectos metodológicos para o desenvolvimento de projetos
dígito-virtuais. Ação Ergonômica: Revista Brasileira de Ergonomia. v.5, n.2, p.2-8, 2010.

MEURER, Heli. Ferramenta de gerenciamento e recomendação como recurso na aprendizagem baseada em

projeto em design. Tese (Doutorado) - Universidade Federal do Rio Grande do Sul. Centro de Estudos Interdisciplinares
em Novas Tecnologias da Educação. Programa de Pós-Graduação em Informática na Educação. Porto Alegre: 2014,
246 p.

MORVILLE, Peter; ROSENFELD, Louis. Information Architecture for the World Wide Web. 3 ed. O’Reilly.
Sebastopol, CA: 2006.

131
 MULLET, Kevin; SANO, Darrell. Designing Visual Interfaces: communication oriented techniques. California:
Sun Microsystems, 1995.

NIELSEN, Jakob; LORANGER, Hoa. Usabilidade na Web. Rio de Janeiro, Elsevier, 2007.

NORMAN, Donald A. Design do dia-a-dia. Rio de Janeiro: Rocco, 2006.

NORMAN, Donald A. Design Emocional: porque adoramos (ou detestamos) os objetos do dia-a-dia. Rio de
Janeiro: Rocco, 2008.

OLIVEIRA, Caio Cesar G. Vamos fazer design de interação?. E-book. 2013.

PASSOS, Ravi Figueiredo. O Design da Informação em interfaces de hipermídias. Dissertação (Mestrado) -

Programa de Pós-Graduação Stricto Sensu em Design. Universidade Anhembi Morumbi, 2008, 100 p. Disponível
em: <[Link] Acesso em: 10 jun. 2016.

PELISSONI, Carla G.; CARVALHO, José Oscar Fontanini de. Uma Proposta de Metodologia para o Ensino da
Disciplina Interação Humano-Computador em Cursos de Computação e Informática. Faculdade de Análise
de Sistemas. Pontíficia Universidade Católica de Campinas. Campinas, SP: 2002. Disponível em: < [Link]
gl/5YNM41>. Acesso em: 17 mai. 2016.

QUINTÃO, Fernanda S.; TRISKA, Ricardo. Design de informação em interfaces digitais: origens, definições e
fundamentos. Infodesign: Revista Brasileira de Design da Informação. São Paulo. v.10, n.2, 2013. Disponível em:
<[Link] Acesso em: 10 jun. 2016.

ROCHA, Heloísa; BARANAUSKAS, Cecília. (2003). Design e Avaliação de interfaces humano-computador.

Campinas, SP: NIED/UNICAMP.

ROGERS, Y.; SHARP, H.; PREECE, J. Design de interação: além da interação humano-computador. Porto
Alegre: Bookman, 2005. 548p.

132
RUBIN, J. Handbook of Usability Testing. New York, NY: John Wiley & Sons, 1994.

SABOIA. Inga Freire. Um site, um conteúdo e incontáveis dispositivos: as estratégias de design utilizadas
para ambientes multiplataformas. Dissertação (Mestrado) - Escola Superior de Comunicação Social, Instituto
Politécnico de Lisboa. Lisboa, 2014, 204 p.

SAMARA, Timothy. Elementos do design: guia do estilo gráfico. Porto Alegre: Bookman, 2010.

SANTA ROSA, José Guilherme; MORAES, Anamaria. Avaliação e projetos no design de interfaces. Rio de
Janeiro: 2AB, 2008.

SANTOS, Robson L. G. Usabilidade de interfaces para sistemas de recuperação de informação na Web: Estudo
de caso de bibliotecas on-line de universidades federais brasileiras. Tese (Doutorado) – Pontifícia Universidade
Católica do Rio de Janeiro (PUC-RIO). Rio de Janeiro, 2006, 344 p.

SECRETARIA DE TECNOLOGIA DA INFORMAÇÃO (STI). SIGAA, Sistema Integrado de Gestão de Atividades

Acadêmicas. Disponível em: <[Link] Acesso em: 17 mai. 2016.

SCHLATTER, Tania; LEVINSON, Deborah. Visual Usability: Principles and Practices for Designing Digital
Applications. Massachusetts: Elsevier, 2013.

ROYO, Javier. Design digital. São Paulo: Rosari, 2008.

W3C BRASIL. Cartilha Acessibilidade na Web. 2013. Disponível em: <[Link] Acesso em: 30 mai.
2016.

W3C. O que é Acessibilidade na web. 2005. Disponível em: < [Link] >. Acesso em 30 mai. 2016.

133
Apendices APÊNDICE A – RELAÇÃO DOS CURSOS
Engenharia Ambiental 1
PARTICIPANTES DO QUESTIONÁRIO
Engenharia de
1
Tabela 1 – Cursos participantes do questionário online Teleinformática
Engenharia de Produção
1
Cursos Número de participantes Mecânica
Engenharia de Energias
Design 32 1
e Meio Ambiente
Sistemas e Mídias Engenharia Mecânica 1
12
digitais
Ciências Ambientais 1
Arquitetura e Urbanismo 11
Jornalismo 1
Engenharia Civil 4
Matemática 1
Ciências Biológicas 3
Geologia 1
Engenharia Química 2
Enfermagem 1
Engenharia Computação 2
Odontologia 1
Ciências Contábeis 2
Pedagogia 1
Farmácia 2
Ciências Econômicas 1
Geografia 2
Mestrado Ciência da
Engenharia Metalúrgica 1 1
Computação
Engenharia de Alimentos 1 Fonte – do autor

134
APÊNDICE B – RELAÇÃO ENTRE OPÇÕES DOS ITENS DE MENU E ACESSOS
Tabela 7 – Frequência de acessos às opções do menu Ensino

Opção 0 1 2 3 4 5

Baixar atestado de matrícula 0 5 2 13 24 44

Consultar histórico 0 4 5 19 23 37

Consultar pendências de conclusão 26 25 12 8 14 3

Realizar matrícula online 1 3 6 18 15 45

Consultar curso 20 13 12 28 6 9

Consultar componente curricular 11 10 15 21 20 11

Consultar turma 15 8 11 23 17 14

Unidades acadêmicas 45 23 10 8 1 1

Consultar calendário acadêmico 45 18 9 7 7 2

Matrícula institucional / Cancelar Matrícula inst. 49 9 4 10 9 7

Fonte – do autor

135
 Tabela 8 – Frequência de acessos às opções do menu Bolsas

Opção 0 1 2 3 4 5

Consultar oportunidades de bolsa na UFC 61 16 5 5 1 0

Fonte – do autor

Tabela 9 – Frequência de acessos às opções do menu Ambientes Virtuais

Opção 0 1 2 3 4 5

Buscar comunidades virtuais 80 7 1 0 0 0

Acessar comunidades virtuais 78 6 3 0 1 0

Fonte – do autor

Tabela 10 – Frequência de acessos às opções do menu Outros

Opção 0 1 2 3 4 5

Acessar fórum de cursos 68 13 6 1 0 0

Acessar produções intelectuais 79 6 1 1 0 1

Atendimento ao aluno 70 11 4 0 2 1

Fonte – do autor

136
APÊNDICE C – QUESTIONÁRIO APLICADO ONLINE

OBJETIVOS:
• Identificar o nível de satisfação no uso do sistema 4. Há quanto tempo você utiliza internet?
atual; ( ) Menos de 1 ano
• Verificar o conhecimento dos usuário no uso de ( ) Entre 1 e 5 anos
internet; ( ) Entre 6 e 10 anos
• Identificar as tarefas realizadas mais frequentemente; ( ) Mais de 10 anos
• Identificar as dificuldades na realização dessas
tarefas; 5. Como você avalia os seus conhecimentos no uso
• Identificar os principais defeitos do SIGAA, segundo da internet, sistemas/aplicações online?
os alunos; ( ) Básico (só utilizo para pesquisas).
• Conhecer sistemas que os usuários estão habituados ( ) Intermediário (também utilizo e-mail, redes sociais,
a utilizar, verificando os pontos que contribuem para faço download, vejo vídeo e ouço música).
essa satisfação no uso; ( ) Avançado (também utilizo outras aplicações como:
trello, evernote, dropbox, google drive, docs google).
QUESTIONÁRIO
6. Quanto tempo por semana você acessa a Web?
PARTE 1
( ) Menos de 5 horas por Semana
1. Qual seu curso?
( ) Entre 5 e 10 horas por Semana
2. Qual seu semestre?
( ) Entre 10 e 15 horas por Semana
3. Qual sua idade?
( ) Mais de 15 horas por Semana
( ) Menos de 18 anos de idade.
( ) Entre de 18 e 24 anos de idade.
( ) Entre de 25 e 40 anos de idade.
( ) Mais de 40 anos de idade.

137
 7. Como você avalia as suas primeiras experiências ( ) Tenho pouca dificuldade na utilização do sistema,
na utilização do SIGAA? mas às vezes ainda me perco na realização das
( ) Aprendi rapidamente, precisei de poucos acessos tarefas.
para me adaptar. ( ) Não tenho dificuldade na utilização do sistema.
( ) Demorei para aprender, precisei acessá-lo diversas
vezes para me adaptar. PARTE 2
11. Indique, dentre as tarefas listadas abaixo, quais
8. Quantas vezes por semana você utiliza o SIGAA? são as que você mais utiliza?
( ) De 1 a 2 vezes
( ) De 3 a 5 vezes OPÇÕES DO MENU ENSINO:
( ) De 5 a 7 vezes
( ) Mais de 7 vezes ( ) Baixar o atestado de matrícula
( ) Consultar histórico
9. Qual sua avaliação sobre sua satisfação ao utilizar ( ) Consultar pendências de conclusão
o SIGAA? ( ) Realizar matrícula online
( ) Estou satisfeito. ( ) Consultar Curso
( ) Estou insatisfeito. ( ) Consultar componente curricular
( ) Indiferente. ( ) Consultar turma
( ) Unidades acadêmicas
10. Como você avalia o seu desempenho na ( ) Consultar calendário acadêmico
utilização do SIGAA? ( ) Matricula institucional / Cancelar matrícula
( ) Não consigo realizar minhas tarefas. institucional
( ) Tenho muita dificuldade na utilização do sistema,
demoro para encontrar os recursos que me ajudem a
realizar minhas tarefas e alcançar meus objetivos.

138
TURMA VIRTUAL: AMBIENTES VIRTUAIS
( ) Visualizar frequência na disciplina ( ) Buscar comunidades virtuais
( ) Visualizar nota da disciplina ( ) Acessar comunidades que você faz parte
( ) Visualizar notícias cadastradas na disciplina
( ) Visualizar/Resolver atividades cadastradas na OUTROS
disciplina ( ) Acessar Fórum de Cursos
( ) Visualizar/Responder enquetes cadastradas na ( ) Acessar produções intelectuais (Acervo dos docentes ou
disciplina Defesas de Pós-Graduação)
( ) Visualizar/Resolver avaliações cadastradas na ( ) Atendimento ao aluno
disciplina
( ) Visualizar plano de curso 12. Caso você seja um usuário insatisfeito, indique, dentre os
( ) Visualizar os participantes da turma itens listados abaixo, quais você julga os principais defeitos
( ) Visualizar programa da disciplina do SIGAA, no que diz respeito a sua interface gráfica:
( ) Fórum ( ) Interface gráfica com visual ultrapassado.
( ) Chat ( ) Navegação confusa.
( ) Ícones com pouca ou nenhuma representatividade.
DADOS PESSOAIS ( ) Tamanho dos ícones.
( ) Alterar foto do perfil ( ) Má organização e distribuição da informação.
( ) Alterar e-mail ou senha ( ) Falta de consistência e padrão (Os elementos da
( ) Alterar demais dados tais como endereço, contatos, interface gráfica aparecem de forma de diferente durante a
documentos, etc. navegação)
( ) Tamanho das letras e espaçamento entre elas.
BOLSAS ( ) Paleta de cores.
( ) Consultar oportunidades de bolsa na UFC ( ) A linguagem utilizada nos rótulos de botões, menus, etc.

Outros: _____________________________________

139
 13. Indique dentre os sites/aplicações online listados Caso ainda tenha alguma sugestão, escreva no
abaixo aqueles que lhe auxiliam em atividades do dia- espaço abaixo:
a-dia, que você gosta e está habituado a utilizar. ___________________________________________

REDES SOCIAIS
( ) Facebook
( ) Twitter
( ) Tumblr
( ) Linkedin
( ) Google +
( ) YouTube
( ) Behance
( ) Pinterest
( ) Gmail
( ) Outlook
( ) Yahoo
( ) Dropbox
( ) Google Drive
( ) OneDrive
( ) Trello
( ) Evernote
( ) Documentos do Google
Outros:
___________________________________________

140
 UNIVERSIDADE FEDERAL DO CEARÁ

DEPARTAMENTO DE ARQUITETURA E URBANISMO

Curso de Design

141