Fábio Diniz

UNIVERSIDADE DO ESTADO DE MINAS GERAIS – UEMG
UNIDADE FRUTAL
CURSO DE BACHARELADO EM SISTEMAS DE INFORMAÇÃO
PLATAFORMA WEBGIZ: PROPOSTA DE DESIGN PARA

INTERFACE MOBILE
FÁBIO DINIZ
Frutal
2017
Fábio Diniz

INTERFACE MOBILE
Trabalho apresentado como exigência parcial para a obtenção

do título de Bacharel em Sistemas de Informação, à Banca de
Avaliação de Trabalho de Conclusão de Curso – TCC, do Curso
de Sistemas de Informação, da Universidade do Estado de
Minas Gerais – Unidade de Frutal.
Orientador: Prof. Me. Edna Yoshiko Senzako
Orientando: Fábio Diniz
UNIVERSIDADE DO ESTADO DE MINAS GERAIS - UEMG
UNIDADE FRUTAL
CURSO DE SISTEMAS DE INFORMAÇÃO
A Comissão Examinadora, abaixo assinada, aprova o Trabalho de Conclusão de Curso (TCC)

INTERFACE MOBILE
Elaborado por
FÁBIO DINIZ
Como requisito parcial para obtenção de Bacharel em Sistemas de Informação
Frutal, 28 de novembro de 2017.
Prof. Dr. Geraldo Nunes Corrêa

Coordenador do Curso
BANCA EXAMINADORA:
Prof(a). Me. Edna Yoshiko Senzako

Orientadora
Prof. Dr. Geraldo Nunes Corrêa

Membro da Banca Examinadora
Prof. Ivan José dos Reis Filho

Membro da Banca Examinadora
AGRADECIMENTOS
À Deus, pois sem Ele nada disso seria possível.

Aos meus pais, Arnaldo e Ana Helena, que sempre me motivaram e me apoiaram em
todas as fases da minha vida, especialmente nas mais difíceis.
À minha irmãzinha Ana Clara, dona do coração mais puro.
À minha namorada Jéssica Fernandes, por estar sempre ao meu lado, me apoiando e
me incentivando; por todo amor e carinho.
À Selina, nova integrante da família, por toda a agitação nas madrugadas de trabalho
dedicadas à este projeto.
À minha orientadora Edna Senzako, que abraçou a ideia do início ao fim.
Aos meus irmãos de faculdade Rodrigo Bertucci, Wanner Menezes, Jonathas Correa e
Ramon Sposito, por todo o companheirismo durante os bons e maus momentos desta fase que
marcou nossas vidas.
E aos demais que, de alguma forma, contribuíram na conclusão deste projeto.
RESUMO
O WebGiz, sistema de gestão acadêmica utilizado pela UEMG, é a plataforma oficial para a
interação entre os discentes e a universidade. Praticamente todos os alunos da instituição
utilizam o sistema para consulta de notas, solicitação de matrícula, entre outros serviços. Em
pesquisa realizada durante o desenvolvimento deste trabalho, pôde-se constatar que um
grande número de alunos utiliza a plataforma em dispositivos móveis, embora esta não seja
apropriada para o uso em telas pequenas. Este projeto tem como finalidade apresentar uma
proposta de uma nova interface para o WebGiz, direcionada exclusivamente para celulares.
Para a elaboração da interface, foram aplicados processos e conceitos da disciplina Design de
Interação, documentados etapa por etapa nesta monografia. Foi realizado um levantamento
bibliográfico a respeito do tema, citando obras de grandes autores do assunto. No final do
projeto, com base no modelo de avaliação heurística de Nielsen (1994), foi realizado um teste
de usabilidade com a solução proposta, a fim de validar o projeto desenvolvido.
Palavras-Chave: Design de Interação; User Experience (UX); Arquitetura da Informação;
Gestão Acadêmica.
ABSTRACT
This monograph aims to introduce a proposal for a new interface of the WebGiz platform -
academic management system used by UEMG - aimed exclusively at mobile devices. The
work is based on the study of some of the leading authors in the subject. For the elaboration of
the interface, processes and concepts of Interaction Design were applied, documented step by
step. Finally, based on the heuristic evaluation model of Nielsen (1994), a usability test was
performed in order to validate the developed project.
Palavras-Chave: Interaction Design; User Experience (UX); Information Architecture;
Academic Management.
LISTA DE FIGURAS
Figura 1 - Relação entre Design de Interação, UX1, Design Industrial e HCI2 ............ 16
Figura 2 - Objetivos de usabilidade e experiência do usuário ...................................... 17
Figura 3 - Elementos da Experiência do Usuário por Garret ........................................ 18
Figura 4 - Web como interface de software .................................................................. 19
Figura 5 - Web como sistema de hipertexto .................................................................. 19
Figura 6 - Ilustrando holística em User Experience ...................................................... 20
Figura 7 - Total de problemas encontrados em testes de usabilidade ........................... 23
Figura 8 - Curva de problemas de usabilidade encontrados vs. número de usuários
testados .......................................................................................................................... 23
Figura 9 - Análise da interface do Safari em um iPhone .............................................. 29
Figura 10 - Captura de tela em dispositivo móvel (iPhone 5) ...................................... 37
Figura 11 - Sitemap WebGiz ........................................................................................... 39
Figura 12 - Captura de tela: Login ................................................................................ 40
Figura 13 - Mensagem de erro na autenticação ............................................................ 41
Figura 14 - Captura de tela: Esqueci minha senha ........................................................ 41
Figura 15 - E-mail de recuperação de senha ................................................................. 41
Figura 16 - Formulário de troca de senha ..................................................................... 42
Figura 17 - Captura de tela: Interface Padrão ............................................................... 42
Figura 18 - Captura de tela: Notas/Frequência ............................................................. 43
Figura 19 - Captura de tela: Menu de navegação .......................................................... 44
Figura 20 - Captura de tela: Repositório de Arquivos .................................................. 44
Figura 21 - Captura de tela: Conteúdo Ministrado ........................................................ 45
Figura 22 - Captura de tela: Plano de Estudo ................................................................ 46
Figura 23 - Captura de tela: Agenda de Avaliações ..................................................... 47
Figura 24 - Captura de tela: Agenda de Avaliações ...................................................... 47
Figura 25 - Captura de tela: Atividades Complementares ............................................ 48
Figura 26 - Captura de tela: Histórico Resumido .......................................................... 49
1
User Experience
2
Interface Homem-máquina
Figura 27 - Captura de tela: Relação de Documentos ................................................... 49
Figura 28 - Captura de tela: Solicitação de Matrícula ................................................... 50
Figura 29 - Captura de tela: Comprovante de Matrícula ............................................... 51
Figura 30 - Captura de Tela: Múltiplas artboards dispostas no Sketch ......................... 52
Figura 31 - InVision: Meus Projetos ............................................................................. 53
Figura 32 - Mapa de interações do protótipo ................................................................ 54
Figura 33 - Protótipo de alta fidelidade ......................................................................... 55
Figura 34 - Paleta de cores ............................................................................................ 56
Figura 35 - Tipografia: Nunito ...................................................................................... 56
Figura 36 - Wireframe: Formulário ............................................................................... 57
Figura 37 - Wireframe: Ação Realizada ....................................................................... 58
Figura 38 - Wireframe: Dashboard (tela inicial) .......................................................... 59
Figura 39 - Wireframe: Menu Principal ........................................................................ 60
Figura 40 - Wireframe: Funcionalidades ....................................................................... 61
Figura 41 - Menu: Perfil do Usuário ............................................................................. 61
Figura 42 - Tela: Login .................................................................................................. 62
Figura 43 - Tela: Recuperação de acesso ...................................................................... 63
Figura 44 - Tela: Solicitação de troca de senha realizada .............................................. 63
Figura 45 - Tela: Troca de senha (recuperação de acesso) ............................................ 64
Figura 46 - Tela: Troca de senha (usuário autenticado) ................................................ 64
Figura 47 - Tela: Troca de senha realizada .................................................................... 64
Figura 48 - Tela: Dashboard (tela inicial) ..................................................................... 65
Figura 49 - Tela: Menu principal ................................................................................... 66
Figura 50 - Tela: Resumo da semana ............................................................................ 67
Figura 51 - Tela: Frequência ......................................................................................... 68
Figura 52 - Tela: Arquivos ............................................................................................ 69
Figura 53 - Tela: Notas (visão geral) ............................................................................. 70
Figura 54 - Tela: Notas (1ª etapa) .................................................................................. 70
Figura 55 - Tela: Notas (2ª etapa) .................................................................................. 71
Figura 56 - Tela: Notas (aprovado) ................................................................................ 71
Figura 57 - Tela: Notas (exame final) ........................................................................... 72
Figura 58 - Tela: Notas (reprovado) .............................................................................. 72
Figura 59 - Tela: Solicitação de matrícula ..................................................................... 73
Figura 60 - Tela: Matrícula realizada ............................................................................ 73
Figura 61 - Tela: Comprovante de matrícula enviado ................................................... 73
Figura 62 - Tela: Relação de documentos ..................................................................... 74
Figura 63 - Tela: Histórico resumido ............................................................................ 75
Figura 64 - Tela: Atividades complementares ............................................................... 76
Figura 65 - Tela: Quadro de aulas ................................................................................. 77
Figura 66 - Tela: Plano de ensino .................................................................................. 78
Figura 67 - Tela: Conteúdo ministrado ......................................................................... 79
Figura 68 - Tela: Agenda de avaliações ........................................................................ 80
LISTA DE GRÁFICOS
Gráfico 1 - Idade dos participantes ................................................................................ 31

Gráfico 2 - Curso matriculado ........................................................................................ 32
Gráfico 3 - Período em curso ......................................................................................... 32
Gráfico 4 - Frequência de acesso (semanal) .................................................................. 33
Gráfico 5 - Uso das funcionalidades do WebGiz ........................................................... 34
Gráfico 6 - Informações mais relevantes ....................................................................... 35
Gráfico 7 - Uso da plataforma em dispositivos móveis ................................................. 35
Gráfico 8 - Nível de satisfação ....................................................................................... 36
Gráfico 9 - Facilidade de uso ......................................................................................... 36
Gráfico 10 - A experiência em dispositivos móveis precisa melhorar? ......................... 37
Gráfico 11 - Nota para o design da plataforma web ...................................................... 38
Gráfico 12 - Avaliação: Curso ....................................................................................... 82
Gráfico 13 - Avaliação: Tempo total do teste ................................................................ 82
Gráfico 14 - Avaliação: Percepção do estado da aplicação ........................................... 83
Gráfico 15 - Avaliação: Relação do sistema com o mundo real (contexto) ................... 83
Gráfico 16 - Avaliação: Navegação ............................................................................... 84
Gráfico 17 - Avaliação: Consistência e padronização ................................................... 84
Gráfico 18 - Avaliação: Nota para o design ................................................................... 85
Gráfico 19 - Avaliação: Comparação lado a lado das respostas .................................... 85
Gráfico 20 - Avaliação: Concentração ........................................................................... 86
Gráfico 21 - Avaliação: Eficiência e flexibilidade ......................................................... 86
Gráfico 22 - Avaliação: Aprovação da proposta ............................................................ 87
SUMÁRIO
INTRODUÇÃO ................................................................................................................. 13
1. DESIGN DE INTERAÇÃO .......................................................................................... 14

1.1 Definição ...................................................................................................................... 14
1.2 Usabilidade ................................................................................................................... 15
1.3 User Experience (UX) ................................................................................................. 16
1.4 Arquitetura da Informação ........................................................................................... 20
1.5 Processo ....................................................................................................................... 21
1.5.1 Identificar necessidades e estabelecer requisitos ...................................................... 21
1.5.2 Desenhar interfaces que atendam os requisitos ........................................................ 21
1.5.3 Construir versões interativas da interface ................................................................. 22
1.5.4 Avaliar o produto que está sendo desenvolvido ........................................................ 22
1.6 Avaliação com 5 usuários ............................................................................................ 22
1.7 10 Heurísticas de Nielsen ............................................................................................ 24
2. DESIGN PARA DISPOSITIVOS MÓVEIS ............................................................. 27
2.1 Contexto ....................................................................................................................... 27
2.2 Mensagem .................................................................................................................... 28
2.3 Layout .......................................................................................................................... 28
3. DESENVOLVIMENTO .............................................................................................. 30
3.1 Contextualização .......................................................................................................... 30
3.1.1 WebGiz ...................................................................................................................... 30
3.1.2 Pesquisa com usuários (discentes) ............................................................................ 30
3.1.2.1 Perfil dos usuários .................................................................................................. 31
3.1.2.2 Perfil de uso ........................................................................................................... 33
3.1.2.3 Opinião dos usuários .............................................................................................. 35
3.1.3 Sitemap ..................................................................................................................... 38
3.1.4 Recursos disponíveis ................................................................................................ 40
3.1.4.1 Autenticação .......................................................................................................... 40
3.1.3.2 Recuperação de Acesso ......................................................................................... 41
3.1.3.3 Notas e Frequências ............................................................................................... 42
3.1.3.4 Repositório de Arquivos ........................................................................................ 44
3.1.3.5 Conteúdo Ministrado ............................................................................................. 45
3.1.3.6 Plano de Estudo ..................................................................................................... 45
3.1.3.7 Agenda de Avaliações ........................................................................................... 46
3.1.3.8 Atividades Complementares .................................................................................. 48
3.1.3.9 Histórico Resumido ................................................................................................ 49
3.1.3.10 Relação de Documentos ....................................................................................... 49
3.1.3.11 Solicitação de Matrícula ....................................................................................... 50
3.1.3.12 Comprovante de Matrícula ................................................................................... 50
3.2 Prototipagem ................................................................................................................ 51
3.2.1 Ferramentas ............................................................................................................... 51
3.2.1.1 Sketch ..................................................................................................................... 52
3.2.1.2 InVision .................................................................................................................. 53
3.2.2 Cores ......................................................................................................................... 55
3.2.3 Tipografia .................................................................................................................. 56
3.2.4 Wireframe .................................................................................................................. 56
3.2.4.1 Formulário .............................................................................................................. 57
3.2.4.2 Ação Realizada ....................................................................................................... 57
3.2.4.3 Dashboard (tela inicial) .......................................................................................... 58
3.2.4.5 Menu Principal ....................................................................................................... 59
3.2.4.5 Funcionalidades ..................................................................................................... 60
3.2.5 Protótipo de alta fidelidade ....................................................................................... 61
3.2.5.1 Autenticação ........................................................................................................... 62
3.2.5.2 Recuperação de Acesso .......................................................................................... 63
3.2.5.3 Troca de Senha ....................................................................................................... 64
3.2.5.4 Dashboard (tela inicial) .......................................................................................... 65
3.2.5.5 Menu Principal ....................................................................................................... 66
3.2.5.6 Resumo da Semana ................................................................................................ 67
3.2.5.7 Frequência .............................................................................................................. 67
3.2.5.8 Arquivos ................................................................................................................. 68
3.2.5.9 Notas ...................................................................................................................... 69
3.2.5.10 Matrícula ............................................................................................................... 73
3.2.5.11 Relação de Documentos ....................................................................................... 74
3.2.5.12 Histórico Resumido .............................................................................................. 75
3.2.5.13 Atividades Complementares ................................................................................. 76
3.2.5.14 Quadro de Aulas ................................................................................................... 77
3.2.5.15 Plano de Ensino .................................................................................................... 77
3.2.5.16 Conteúdo Ministrado ............................................................................................ 78
3.2.5.17 Agenda de Avaliações ........................................................................................... 79
4. AVALIAÇÃO DE USABILIDADE ............................................................................. 81
CONCLUSÃO .................................................................................................................... 88
REFERÊNCIAS ................................................................................................................. 89
13
INTRODUÇÃO
Desde os primórdios da computação, diversas tecnologias foram desenvolvidas para a

solução de diferentes problemas humanos. A possibilidade de automatizar e dar escala ao
processamento das informações, fez do computador peça fundamental para as inovações
atuais.
No contexto acadêmico, é muito comum o uso de sistemas de gestão, a fim de
proporcionar a interação entre a comunidade e melhorar os processos específicos do meio. O
WebGiz é um sistema desenvolvido pela empresa AIX Sistemas utilizado pela UEMG para
otimizar o acesso às informações acadêmicas, tais como: notas, frequência, avaliações, entre
outras.
Este projeto foi desenvolvido com a finalidade de proporcionar uma nova experiência
aos alunos da Universidade Estadual de Minas Gerais, apresentando a proposta de uma nova
interface para a plataforma WebGiz, projetada exclusivamente para dispositivos móveis. O
principal motivo se dá ao fato de que plataforma atual não apresenta uma interface responsiva
- que se adapte ao tamanho da tela de dispositivos móveis - proporcionando uma má
experiência de uso. O objetivo final do projeto foi, portanto, a proposta de interface para um
aplicativo móvel.
Por se tratar de uma adaptação de um sistema em uso, a elaboração da interface exigiu
que um estudo fosse realizado para entender os detalhes da plataforma atual, assim como um
levantamento bibliográfico sobre as disciplinas Design de Interação e User Experience
(Experiência do Usuário). Também foi abordado o modelo de avaliações heurísticas de
Nielsen.
A metodologia utilizada para a obtenção dos dados (idade, curso, dificuldades e
preferências encontradas no sistema) é de caráter quantitativo e qualitativo, através da
aplicação de um questionário online respondido por alunos, usuários da plataforma.
Após realizar a análise das pesquisas aplicadas, juntamente com as informações
colhidas junto ao sistema WebGiz, foi desenvolvida uma nova interface; que por fim, passou
por um processo de avaliação realizado por alunos da universidade.
Este trabalho representa 4 anos de experiência obtidas dentro e fora da universidade e
você poderá conferir tudo o que foi realizado nas páginas que se seguem. Boa leitura.
14
1. DESIGN DE INTERAÇÃO
Este primeiro capítulo descreve os princípios do Design de Interação, vertente do

design que tem como foco o desenvolvimento de artefatos interativos. Compreendido por
muitos como parte da disciplina User Experience, abordada no capítulo 1.3.
Para Preece, Rogers e Sharp (2002), a preocupação central do design de interação é a
de desenvolver produtos interativos realmente úteis, fáceis de aprender e que entreguem uma
boa experiência de uso. Estas preocupações exigem que algumas considerações sejam
levadas, como “quem usará?”, “onde será usado?”. Outro cuidado chave é o de entender que
tipo de atividades as pessoas estão fazendo enquanto estão interagindo com os produtos. A
depender do tipo de atividade a realizar, é feita a escolha do tipo de interface a ser
implementada. Um exemplo citado pelos autores é um caso, cujo qual teria como atividade a
comunicação entre pessoas à distância. Estes sugerem que um sistema que permitisse o envio
fácil de mensagens (escrita ou falada), cujas quais pudessem ser facilmente acessadas pelo
remetente; e que tivesse uma interface em que os usuários interagissem com as mensagens
(editar, anotar, arquivar); seria este um sistema bem útil para atender às necessidades da
atividade exemplificada.
Ainda de acordo com os mesmos autores, a tomada de decisão deve ser tomada com
base no entendimento profundo dos usuários. Isto envolve:
● Considerar o que as pessoas são boas e o que elas são ruins.
● Considerar o que poderia ajudá-las a melhorar a forma como fazem as coisas
atualmente.
● Pensar no que poderia promover uma experiência de uso mais agradável.
● Ouvir o que as pessoas querem e envolvê-las no processo.
1.1 Definição
Winograd (1997) descreve o Design de Interação como a construção de espaços para

comunicação e interação humana. Segundo Preece, Rogers e Sharp (2002), significa o
desenho de produtos interativos que auxiliem pessoas nas atividades e trabalhos do dia-a-dia.
Em outras palavras, a procura de formas que dêem suporte às pessoas em suas tarefas diárias.
15
Os autores citam a relação entre o design de interação e a engenharia de software, como

semelhantes à relação entre a arquitetura e a engenharia civil. Citam exemplos de possíveis
preocupações de um arquiteto ao se fazer uma casa: “os espaços para visitas e os espaços
privados estão bem distribuídos?”, “a cozinha está em um local apropriado?”, “a cobertura da
garagem faz sombra durante todo o dia?”. Por outro lado, as preocupações do engenheiro civil
já seriam algo como: custos, durabilidades, aspectos estruturais e ambientais, etc. Seguindo o
raciocínio, o designer de interação deve se preocupar com a experiência de uso e o engenheiro
de software com a arquitetura aplicada na solução.
1.2 Usabilidade
Parte do processo de concepção do design é o entendimento das necessidades dos

usuários; focar na resolução dos problemas que esses usuários vivenciam. Por exemplo: o
objetivo é desenhar um sistema que permite os usuários terem um aumento de produtividade
em seu trabalho? Ou que desafiem e motivem alunos a aprenderem efetivamente? Estas
preocupações são chamadas objetivos de usabilidade e experiência do usuário (Preece, Rogers
e Sharp, 2002).
Segundo os mesmos autores, os objetivos de usabilidade são:
● Eficácia: refere-se a quão bom o sistema é ao realizar o que ele é projetado
para fazer.
● Eficiência: refere-se a forma que o sistema auxilia os usuários na realização
das atividades chave.
● Segurança: envolve a proteção do usuário de situações de perigo e situações
indesejadas.
● Utilidade: preocupa-se com a funcionalidade projetada, avaliando se o usuário
pode fazer o que precisa ou quer fazer.
● Facilidade de aprendizagem.
● Fácil memorização do uso.
16
1.3 User Experience (UX)
A percepção de que as novas tecnologias estão criando oportunidades de melhorar a

experiência que as pessoas têm ao fazer as coisas do dia-a-dia, direcionou pesquisadores a
considerarem novos objetivos em seus trabalhos. A emergência de tecnologias (realidade
virtual, a Internet, computação móvel) em uma variada área de aplicação (entretenimento,
educação, áreas públicas) tem trazido à tona novos desafios. User experience (ou UX) se
preocupa com a forma que a interação é vivenciada pelo usuário. Tem como prioridade
alcançar as expectativas e metas do mesmo (Preece, Rogers e Sharp, 2002).
Segundo Gonzalez (2014):
Geralmente, design de experiência leva em conta um escopo muito mais

amplo do que a usabilidade tradicional, olhando para o que atrai uma pessoa
para o serviço, o que os ajuda a compreendê-lo e usá-lo, como ele se integra
no contexto de suas vidas, como eles são encorajados a continuar usando e
como eles se comunicam com outros ao redor do produto/serviço.
Veja na figura 1, a relação entre as disciplinas UX3, Design de Interação e HCI4:
Figura 1 - Relação entre Design de Interação, UX, Design Industrial e HCI

Fonte: uxdesign.css Brasil.
3
User Experience (UX)
4
Human-Computer Interaction (HCI)
17
A figura 2 é um gráfico que representa relação entre os objetivos de usabilidade e os

de experiência do usuário, dispostos em um formato circular e de forma que ambos se
complementam. Segundo Preece, Rogers e Sharp (2002), os objetivos de usabilidade são
relacionados com a eficiência, enquanto que a experiência do usuário tem como foco a forma
que os usuários fazem uso de um produto ou serviço, a partir da perspectiva do mesmo.
Figura 2 - Objetivos de usabilidade e experiência do usuário

Fonte: Preece, Rogers e Sharp, 2002, p.19.
A figura 3 representa os elementos da experiência do usuário, segundo Garret (2002).

De acordo com o autor, o processo de desenvolvimento da experiência do usuário se trata de
assegurar que nenhum aspecto da aplicação aconteça sem a consciência do profissional, sem
intenção explícita. Isto significa levar em conta todas as possibilidades de cada interação que
o usuário possa executar e entender as expectativas dos usuários para cada etapa da atividade
em questão. Ainda de acordo com Garret, isto pode soar um grande trabalho; e de certa forma
é mesmo. Mas ao dividir o trabalho em componentes ou elementos, torna-se mais fácil
compreender o problema e propor soluções.
18
Jesse James Garret, em seu livro Elements of User Experience propõe cinco
planos que facilitam a compreensão das decisões feitas em cada um deles. Cada
decisão de um plano superior depende do inferior. Esses planos são: estratégico,
escopo, estrutura, esqueleto e superfície. O primeiro mais abstrato até chegar ao
último, mais concreto (CAELUM, 2017).
Figura 3 - Elementos da Experiência do Usuário por Garret

Fonte: Caelum, 2017, p. 6.
“[...] Garret dividiu cada plano em dois contextos: a web como funcionalidade
(interface de software) e a web como meio de informação (sistema de hipertexto). Para cada
contexto, um elemento se destaca.” (CAELUM, 2017, p. 5).
19
Figura 4 - Web como interface de software Figura 5 - Web como sistema de hipertexto
Fonte: Caelum, 2017, p. 6. Fonte: Caelum, 2017, p. 6.
Segundo a estrutura de Garret, os elementos da experiência do usuário são, do mais

concreto ao mais abstrato: estratégia, escopo, estrutura, esqueleto e superfície.
Conforme figura 4 e figura 5, cada plano tem uma disciplina associada que se destaca
em cada caso: interface de software ou sistema de hipertexto. Mas estas disciplinas se
completam e se relacionam, conforme é explicado na citação a seguir e ilustrado pela figura 6:
“[...] se tratando de contexto, dificilmente uma aplicação será apenas uma

interface de software ou apenas um sistema de hipertexto, e por isso todos esses
elementos devem ser considerados como uma unidade no desenvolvimento de um
produto, não devendo ser tratados isoladamente” (CAELUM, 2017, p. 9-10).
20
Figura 6 - Ilustrando holística em User Experience

Fonte: Caelum, 2017, p. 10.
1.4 Arquitetura da Informação
De acordo com Fling (2009), a arquitetura da informação é a base para produtos

voltados a dispositivos móveis. Um produto com uma boa engenharia e com um bom visual
ainda podem falhar por falta de uma boa arquitetura de informação. Os produtos de sucesso
possuem sempre uma arquitetura bem definida. De um simples website5 à um aplicativo para
iPhone, a arquitetura de informação define não somente o quão estruturada sua informação
será, mas também como as pessoas vão interagir com ela. Isto se torna um pouco mais
complexo quando se percebe que diferentes dispositivos móveis possuem diferentes
capacidades e diferentes modelos de interação.
Para Morville e Rosenfeld (2008), a arquitetura da Informação é:
● O desenho estruturado de ambientes de informação compartilhados.
● A combinação de sistemas de organização, rotularização, pesquisa e navegação
em websites e sistemas web.
● A arte e a ciência da manipulação de produtos e experiências a fim de melhorar
a usabilidade.
● Uma disciplina emergente e uma comunidade focada na prática de princípios
do design e arquitetura aplicadas no contexto digital.
5
Sítio ou página web.
21
1.5 Processo
Segundo Preece, Rogers e Sharp (2002), o design de interação envolve basicamente

quatro etapas:
● Identificar necessidades e estabelecer requisitos.
● Desenhar interfaces que atendam os requisitos.
● Construir versões interativas da interface.
● Avaliar o produto que está sendo desenvolvido.
1.5.1 Identificar necessidades e estabelecer requisitos
A concepção de toda aplicação interativa exige um plano ou esquema que trace

objetivos e roteiros para a execução do trabalho. Para que este tenha força de um plano sólido,
com começo meio e fim, é necessário que o mesmo seja criado com conhecimento
aprofundado sobre o público alvo, contexto e atividades a serem desenvolvidas.
No Design de Interação investiga-se o uso do artefato e o domínio alvo por meio de
uma abordagem centrada no usuário. Isto significa que as preocupações com as metas e
expectativas dos usuários possuem maior impacto no desenvolvimento que as preocupações
com questões técnicas (Preece, Rogers e Sharp, 2002).
1.5.2 Desenhar interfaces que atendam os requisitos
Segundo Preece, Rogers e Sharp (2002), esta etapa é o coração do design: a sugestão
de novas ideias que atendam aos requisitos. Esta atividade pode ser divida em sua
subatividades:
● Design conceitual: envolve a produção de um modelo conceitual para o produto; e a
produção de um modelo descritivo do que o produto deveria ser, se comportar e se
parecer.
● Design físico: considera os detalhes do produto como cores, sons, imagens, menus e
ícones.
22
1.5.3 Construir versões interativas da interface
Ainda de acordo com Preece, Rogers e Sharp (2002), design de interação envolve o
desenho de produtos interativos. A forma mais eficaz dos usuários avaliarem tais conceitos, é,
portanto, interagindo com eles. Isto requer uma versão interativa do design a ser construído,
mas não significa que seja necessária uma versão do software. Por exemplo, um protótipo
feito em papel são rápidos e baratos de se construir, além de serem muito eficazes para
identificar problemas nos primeiros estágios do processo. Com isso é possível ter uma noção
real de como seria a interação dos usuários com o produto.
1.5.4 Avaliar o produto que está sendo desenvolvido
Para Preece, Rogers e Sharp (2002), a avaliação é um processo que determina a

usabilidade e aceitabilidade de um produto ou design, medido por meio de uma variedade de
critérios, como erros cometidos pelo usuário ao usá-lo, quão direto ao ponto é o design, quão
bem se enquadra nos requisitos levantados, entre outros. O design interativo requer um alto
nível de envolvimento do usuário durante o desenvolvimento, aumentando as chances de
aceitação do produto a ser entregue. Na maioria das situações, o designer realizará diversas
atividades comprometidas com a qualidade e testes que garantam que o produto final está
preparado para uso. A avaliação não substitui essas atividades, mas complementa e melhoras
elas.
1.6 Avaliação com 5 usuários
Nas palavras de (Nielsen, 2000): “Algumas pessoas pensam que usabilidade é um

processo caro e complexo e que testes com usuários devem ser reservados para raros projetos
de design com orçamento alto e cronograma generoso. Não é verdade.”
O autor afirma em seu artigo “Why You Only Need to Test with 5 Users”, que,
juntamente com Tom Landauer, concluiu que o número de problemas de usabilidade
encontrados em um teste com n usuários é representado pela função:
23
Figura 7 - Total de problemas encontrados em testes de usabilidade

Fonte: Nielsen, 2000.
Seguindo a função ilustrada na figura 7, N é o número total de problemas de

usabilidade no design e L é a proporção de problemas de usabilidade encontrado ao fazer o
teste com apenas um usuário. O valor típico de L é 31%, calculado por meio de um grande
número de projetos estudados pelos autores.
Segundo Nielsen (2000), a maior verdade ilustrada pela curva é que teste com zero
usuários entrega zero insights6; ou seja, sem teste, sem insights. O autor afirma que na
primeira entrevista, são encontrados em média ⅓ (um terço) de todos os possíveis problemas
a se descobrir. Da segunda entrevista em diante, a tendência é de que cada vez menos
problemas sejam encontrados. A figura 8 representa a curva de problemas encontrados, em
relação ao número de usuários testados.
Figura 8 - Curva de problemas de usabilidade encontrados vs. número de usuários testados

Fonte: Nielsen, 2000.
De acordo com o gráfico, o teste aplicado a 5 usuários retorna em média cerca de 80%
do total de problemas de usabilidades possíveis de se encontrar. A partir do 6º (sexto) usuário,
o número de novos insights é cada vez menor, exigindo um aumento significativo de pessoas
para se conseguir uma diferença considerável de novos insights.
6
Insight é um substantivo com origem no idioma inglês, que significa compreensão súbita de alguma coisa ou
determinada situação. Pode também ser entendido com uma ideia, um ponto de vista diferente.
24
1.7 10 Heurísticas de Nielsen
Segundo a perspectiva de Nielsen (2005), “o objetivo da avaliação heurística é

encontrar os problemas de utilização na concepção de modo que eles podem ser atendidos
como parte de um processo iterativo de design”.
Análise heurística, nada mais é do que a análise da interação homem

computador (HCI). Exatamente por ser o elo entre o Homem e o Computador, as
interfaces, pautadas nas heurísticas, definem o eixo que deve ser considerado como
primordial para o desenvolvimento de websites e, em seu bojo, é necessário
considerar os elementos relacionados à sua adequada estruturação: Arquitetura da
Informação, Arquitetura de Design, Navegabilidade, Conteúdo e Interatividade, que
relacionados entre si, definem a usabilidade de um websites (MOULIN, 2013).
O método visa identificar problemas de usabilidade seguindo uma lista de diretrizes ou

heurísticas (Nielsen, 1994). São chamadas de heurísticas porque são regras gerais e não
diretrizes específicas de usabilidade (Nielsen, 1995).
A origem da palavra heurística deriva do grego, que literalmente tem o mesmo

significado de “descubro” ou “acho”, sendo que sua etimologia deriva do que
conhecemos por eureka, que foi um termo originário de uma exclamação utilizada por
Arquimedes quando descobriu como medir o volume de um objeto irregular
utilizando a água (MOULIN, 2013).
a) Diálogo simples e natural

Os diálogos não devem conter informações que sejam irrelevantes ou que sejam
raramente necessárias. Cada unidade extra da informação em um diálogo compete com as
unidades relevantes da informação e diminui sua visibilidade relativa (MOULIN, 2013, apud
Nielsen e Molich [1990]).
b) Linguagem do usuário
O diálogo deve ser expressado claramente em palavras, frases e conceitos familiares
ao usuário ao invés dos termos originados do sistema (MOULIN, 2013, apud Nielsen e
Molich [1990]).
25
c) Mais reconhecimento que recordação

Minimizar a carga da memória do usuário permitindo a visualização de objetos, ações,
e opções. O usuário não deve ter que lembrar informações de uma parte do diálogo para outra.
As instruções para o uso do sistema devem ser visíveis ou facilmente recuperáveis sempre que
apropriado (MOULIN, 2013, apud Nielsen e Molich [1990]).
d) Coerência e padrões
Os usuários não devem ter que saber se palavras, situações, ou ações diferentes
significam a mesma coisa. O sistema deve seguir as convenções da plataforma (MOULIN,
2013, apud Nielsen e Molich [1990]).
e) Feedback
O sistema deve sempre manter os usuários informados sobre o que está ocorrendo,
com respostas apropriadas e dentro do tempo razoável (MOULIN, 2013, apud Nielsen e
Molich [1990]).
f) Saídas claramente marcadas

Usuários normalmente escolhem algumas funções no sistema por engano e precisarão
de saída emergências bem demarcadas para sair do estado indesejado sem passar por um
longo caminho (MOULIN, 2013, apud Nielsen e Molich [1990]).
g) Atalhos
Os diálogos não devem conter informações que sejam irrelevantes ou que sejam
raramente necessárias. Cada unidade extra da informação em um diálogo compete com as
unidades relevantes da informação e diminui sua visibilidade relativa (MOULIN, 2013, apud
h) Boa mensagem de erro

As mensagens de erro devem ser expressas de forma clara (sem códigos), indicar
precisamente o problema, e sugerir construtivamente uma solução (MOULIN, 2013, apud
26
i) Prevenção de erro
Por melhor que seja a mensagem de erro, um cuidadoso projeto de interface é que
impede a ocorrência dos problemas em primeiro lugar. Eliminar circunstâncias que sejam
propícias aos erros, ou verificá-las e apresentar ao usuário uma opção de confirmação antes
que incidam no erro (MOULIN, 2013, apud Nielsen e Molich [1990]).
j) Linguagem do usuário
Pode ser necessário que o sistema forneça ajuda e documentação, apesar de ser melhor
quando o sistema é usado sem documentação. A informação deve ser fácil de ser encontrada,
focada nas tarefas do usuário. Devem ser listados passos concretos a serem seguidos, e não ser
muito extenso (MOULIN, 2013, apud Nielsen e Molich [1990]).
27
2. DESIGN PARA DISPOSITIVOS MÓVEIS
Segundo Fling (2009), é impossível construir boas experiências para dispositivos

móveis sem três ingredientes principais:
● Contexto
● Mensagem
● Layout (design visual)
Ainda de acordo com o mesmo, o design visual da experiência é a representação direta
de tudo que está por baixo dos panos; é a primeira impressão que o usuário terá da aplicação.
Um bom design entrega ao usuário grandes expectativas; um design ruim cria no usuário
expectativas baixas.
A expectativa do usuário pode ser traduzida em valor e confiança. Estruturas confusas
e de baixo desempenho - como demora no carregamento - criam expectativas ainda mais
baixas. Estas preocupações direcionam para o mais significativo desafio no design para
dispositivos móveis: criatividade. Ninguém consegue ser sempre criativo como se deseja ser.
Alguns dispositivos simplesmente não suportam alguns designs complexos, por exemplo. No
entanto todo dispositivo tem a capacidade de criar a melhor experiência apropriada para o
mesmo; isto depende de quão importante é a aplicação naquele contexto (Fling, 2009).
2.1 Contexto
Para Fling (2009), contexto é o conceito mais importante em experiências para

dispositivos móveis. O papel do designer é garantir que o usuário consiga descobrir como se
localizar e utilizar a aplicação em questão. É importante para o designer ter as respostas para
as seguintes questões:
● Quem são os usuários? O que você sabe sobre eles? Que tipo de comportamento
padrão você poderia citar a respeito dos usuários?
● O que está acontecendo? Quais são as circunstâncias em que os usuários vão absorver
o conteúdo que você está apresentando?
● Quando eles vão interagir? Eles estarão em casa com tempo disponível? Estarão no
trabalho com pouco tempo disponível? É dia ou noite?
28
● Onde estão os usuários? Estão em um espaço público ou privado? Estão dentro de

alguma construção ou a céu aberto?
● Por que eles vão usar o seu aplicativo? Qual o valor transmitido aos usuários ao
usarem a sua aplicação?
Ainda segundo o autor, a resposta dessas perguntas afetarão de forma positiva o
desenvolvimento da sua interface.
2.2 Mensagem
Fling (2009) afirma que outro elemento importante do design é a mensagem, ou o que
você está tentando dizer sobre o seu site ou aplicação (visualmente falando). A abordagem do
seu design definirá a mensagem e criará expectativas. Um estilo espaçado e minimalista dirá
ao usuário que este deve focar no conteúdo. Um estilo “pesado” com uso de cores escuras e
muitos elementos gráficos dirá ao usuário que espere por uma experiência imersiva.
O visual da sua interface é que estabelecerá como será a comunicação com o usuário.
A pergunta que se deve fazer ao usuário é: “o design entrega a mensagem correta ao usuário
no contexto certo?”.
2.3 Layout
O layout consiste da estrutura visual do design. É um elemento importante pois este

define como o usuário processará a página visualmente. Segundo Fling (2009), o primeiro
momento em que o layout deve ser lembrado é durante a fase de arquitetura da informação.
Ele revela que prefere definir 90% das decisões de layout durante esta fase. Diz que pergunta
a si mesmo coisas como:
● Onde deveria ficar a navegação desta página?
● Que tipo de navegação eu deveria usar?
● Eu deveria usar abas ou uma lista?
● Que tal uma barra lateral para telas grandes?
29
Figura 9 - Análise da interface do Safari em um iPhone

Fonte: Fling, 2009, p. 124.
A figura 9 é uma análise da interface do navegador padrão utilizado pelo sistema

operacional do iPhone. Pode-se observar a existência de 4 seções principais:
● Barra de status.
● Campo de texto para o endereço a ser acessado.
● Área visível do site.
● Barra de botões (recursos do navegador, como abas).
30
3. DESENVOLVIMENTO
Neste capítulo encontra-se a documentação da concepção do design, resumindo-se em

três etapas principais: contextualização, prototipagem e validação.
3.1 Contextualização
Este subcapítulo descreve a primeira etapa do processo, cujo objetivo é entender o

contexto em que o WebGiz se encontra, a fim de coletar as informações necessárias para que
o desenvolvimento da interface seja realizado.
3.1.1 WebGiz
A plataforma WebGiz é desenvolvida pela empresa AIX Sistemas e é utilizada pela

UEMG para a gestão acadêmica. O acesso é feito por meio de de um link público, hospedado
pela própria universidade.
Segundo o site da UEMG, o WebGiz é um espaço criado para os discentes acessarem
orientações e informações acadêmicas. Contudo, estes não são os únicos usuários do sistema.
Existem outros níveis de acesso, sendo eles: professores, secretários e coordenadores.
A interface desenvolvida nesta monografia contempla exclusivamente os recursos
disponíveis aos discentes. Alguns dos motivos são:
● Conhecimento prévio do autor sobre a plataforma como discente.
● Quantidade limitada de informações públicas sobre os outros níveis de acesso.
● Somados os recursos disponíveis para todos os níveis, o desenvolvimento seria
muito extenso.
3.1.2 Pesquisa com usuários (discentes)
A fim de entender as atuais necessidades dos usuários da plataforma, foi realizada uma
pesquisa, por meio de um formulário online divulgado nas redes sociais para os discentes. No
total 81 pessoas participaram da pesquisa.
31
Foram coletadas informações sobre o perfil dos usuários, perfil de uso da plataforma e
opinião sobre a plataforma em si.
3.1.2.1 Perfil dos usuários
A primeira parte da pesquisa teve como foco coletar informações sobre o perfil dos
usuários entrevistados para identificar, por exemplo, se havia representantes de todos os
cursos, a idade média dos participantes, entre outros dados.
Os resultados obtidos demonstram que mais da maioria dos discentes têm entre 21 e
25 anos, sendo a segunda maioria entre 17 e 20 anos.
Gráfico 1 - Idade dos participante

Fonte: Dados obtidos na pesquisa online.
Como pode-se observar no gráfico 2, a maioria dos entrevistados cursam Direito (42),
seguidos por Sistemas de Informação (12) e Publicidade/Propaganda (12), que juntos somam
81,5% dos participantes da pesquisa.
32
Gráfico 2 - Curso matriculado

A terceira pergunta era sobre o período em curso, sendo a maioria discentes do 8º

período. Conforme o gráfico 3, pode-se observar que houve participação de todos os períodos
em vigência.
Uma outra observação a se fazer é que na UEMG Frutal iniciam-se turmas apenas no
começo do ano; sendo a pesquisa realizada no segundo semestre do ano, os discentes
participantes são somente de períodos pares.
Gráfico 3 - Período em curso

33
3.1.2.2 Perfil de uso
A segunda etapa teve como objetivo coletar informações sobre o uso da plataforma.
Foram perguntas relacionadas a frequência de acesso, o uso de recursos e informações mais
relevantes para os discentes.
A frequência de acesso (semanal) média é de 4,27 vezes na semana. Mas, conforme o
gráfico 4, também pode-se notar que a maior parte dos entrevistados acessam apenas 1 vez na
semana.
Gráfico 4 - Frequência de acesso (semanal)

O gráfico 5 (página seguinte) ilustra o uso e o conhecimento das funcionalidades do

WebGiz. No questionário utilizado, em uma tabela com os principais recursos da plataforma,
o discente escolheu uma de três possibilidades: “não conheço”, “sei que existe, mas não uso”,
“conheço e já utilizei”.
Com os dados obtidos, pôde-se concluir que os recursos mais utilizados pelos
discentes são, respectivamente:
● Notas/Frequência
● Comprovante de Matrícula
● Solicitação de Matrícula/Rematrícula
● Histórico Resumido
Os recursos menos conhecidos são, na sequência:
34
● Repositório de Arquivos
● Plano de Estudo
● Relação de Documentos
● Agenda de Avaliações
● Atividades Complementares
Gráfico 5 - Uso das funcionalidades do WebGiz

O último dado obtido nesta segunda etapa da pesquisa lista as informações mais
relevantes da plataforma. No questionário constavam diversas informações pré-definidas,
onde o usuário selecionava as 3 opções mais relevantes. Também era possível adicionar novas
informações que não estivessem mapeadas ainda. Este dado foi importante para a construção
da página inicial do protótipo7, cuja proposta é entregar ao usuário de forma rápida as
principais informações que ele procura.
7
Capítulo 3.2.5.4
35
Gráfico 6 - Informações mais relevantes

O gráfico 7 ilustra a porcentagem de entrevistados que acessam ou já acessaram a

plataforma por dispositivos móveis, como celular ou tablet. Quase todos (98,8%)
responderam “sim”.
Gráfico 7 - Uso da plataforma em dispositivos móveis

36
3.1.2.3 Opinião dos usuários
A última etapa da pesquisa coletou a opinião dos usuários sobre a plataforma. Esta
informação é importante para a análise da experiência do usuário como um todo. A primeira
pergunta foi sobre o nível de satisfação com a plataforma. Como pode-se observar no gráfico
8, a maioria (99%) optou por uma classificação igual ou menor a 3 (em uma escala de 1 a 5).
Gráfico 8 - Nível de satisfação

Sobre a usabilidade, foi perguntado o “quão fácil é utilizar o WebGiz”. A maioria

escolheu 3 (em uma escala de 1 a 5). Pode-se também observar no gráfico 9 que a quantidade
de pessoas que escolheram 4 ou 5 é maior que a quantidade que escolheu 1 ou 2.
Gráfico 9 - Facilidade de uso

37
A pergunta seguinte foi a respeito da experiência de uso em dispositivos móveis.

92,6% dos entrevistados responderam “sim” ao serem questionados se achavam que a
plataforma precisa de uma experiência melhor em dispositivos móveis. Junto a pergunta foi
anexado uma captura de tela em um dispositivo móvel, conforme ilustrado na figura 10.
Gráfico 10 - A experiência em dispositivos móveis precisa melhorar?

Figura 10 - Captura de tela em dispositivo móvel (iPhone 5)

Fonte: WebGiz (tela capturada pelo autor).
38
A última pergunta foi sobre o design da plataforma web, com os seguintes dizeres:
"Em uma escala de 1 à 5, qual a sua opinião sobre o design da interface do WebGiz? (leve em
consideração as cores, formas e organização geral da informação)".
Gráfico 11 - Nota para o design da plataforma web

3.1.3 Sitemap
De acordo com Fling (2009), o primeiro entregável no processo da Arquitetura da

Informação para dispositivos móveis é o sitemap. Este documento representa visualmente a
relação que existe entre um conteúdo e outro, além de prover um mapeamento do fluxo do
usuário pela interface.
O autor sugere que alguns cuidados extras devem ser tomados no design para
dispositivos móveis. No contexto mobile, as tarefas são curtas e usuários possuem pouco
tempo para executá-las. O uso desses dispositivos estão normalmente sujeitos à condições
como: má conexão com a Internet, uso em trânsito para outros lugares, interações limitadas,
entre outras.
Ainda segundo Fling (2009), a melhor opção é reduzir os caminhos que o usuário pode
seguir, limitando-se à 5 ou menos caminhos principais. Também dividir em grupos e
subgrupos para facilitar a compreensão sobre o conteúdo disposto.
A seguir, o sitemap dos recursos disponíveis para os discentes no WebGiz:
39
Figura 11 - Sitemap WebGiz

Fonte: Elaborado pelo autor.
Além do fluxo de autenticação, recuperação de acesso e alteração de senha, pode-se

notar que existem 3 subdivisões de conteúdos principais (dia-a-dia, acadêmico e
informações). Devido ao grande número de recursos dispostos para os discentes (12), a
divisão destes em grupos de quatro funções auxilia na compreensão do conteúdo e
consequentemente na utilização do aplicativo.
No centro do mapa consta uma dashboard, que será a tela principal da aplicação; um
acesso rápido à informações importantes. Segundo Tidwell (2011), uma dashboard consiste
de uma página densa com informações relevantes ao usuário; normalmente é atualizada
regularmente. É comum encontrar muitos números, gráficos e botões que invocam ações.
Outra observação a se fazer sobre o documento é a respeito de dois conteúdos não
existentes na plataforma atual, que foram inseridos como proposta para serem implementados
na versão mobile. São eles: “resumo da semana” e “quadro de aulas”.
40
3.1.4 Recursos disponíveis
Esta seção é uma análise breve das principais páginas do WebGiz, a fim de explorar os
recursos disponíveis e identificar os detalhes do funcionamento da plataforma.
Foram documentadas as principais funcionalidades - com análise e capturas de telas -
divididas em 12 seções.
3.1.4.1 Autenticação
A primeira página da plataforma é a tela de login (autenticação). Apenas usuários

cadastrados conseguem acessar o sistema.
A autenticação é realizada por usuário e senha. Como usuário, é utilizado o registro
acadêmico - um código único para fins de identificação; cada aluno tem o seu.
Figura 12 - Captura de tela: Login

Fonte: WebGiz
41
Figura 13 - Mensagem de erro na autenticação

Fonte: Tela capturada pelo autor no WebGiz.
3.1.3.2 Recuperação de Acesso
O usuário que por acaso perdeu o acesso à plataforma (esqueceu a senha, por
exemplo) consegue recuperá-lo através da seguinte página (figura 14), acessada via página de
login (figura 12):
Figura 14 - Captura de tela: Esqueci minha senha

Fonte: WebGiz
Figura 15 - E-mail de recuperação de senha

Fonte: Tela capturada pelo autor.
42
Figura 16 - Formulário de troca de senha

3.1.3.3 Notas e Frequências
Após a autenticação do aluno, o sistema encaminha para a tela de notas e frequência.

A interface desta página é utilizada por todo o sistema. Separando em partes, pode-se
observar que há um cabeçalho, um menu de navegação lateral e o conteúdo principal, que fica
disposto ao lado do menu.
Figura 17 - Captura de tela: Interface Padrão

Fonte: WebGiz
43
A tabela de notas e faltas é dividida em algumas colunas: Etapa 1, Etapa 2, Média do

Semestre, Exame Final (EF) e Resultado Final (RF). Além destes dados, o discente visualiza a
situação acadêmica na disciplina.
Figura 18 - Captura de tela: Notas/Frequência

Fonte: WebGiz
O menu de navegação é divido em 3 seções:

● Dados Pessoais
● Mensagens
● Acadêmico
O menu capturado na figura 19 é referente ao acesso de alunos na plataforma. Os links
do menu diferentes para cada nível de acesso.
44
Figura 19 - Captura de tela: Menu de navegação

Fonte: WebGiz
3.1.3.4 Repositório de Arquivos
Esta página destina-se à disponibilização de documentos pelos docentes para os

discentes. O aluno faz download desses arquivos e consegue filtrar por disciplina e professor.
Figura 20 - Captura de tela: Repositório de Arquivos

Fonte: WebGiz
45
3.1.3.5 Conteúdo Ministrado
Nesta tela o aluno visualiza o conteúdo ministrado nas aulas em um calendário

interativo. Ao clicar em alguma das aulas dispostas no calendário, é possível ver a data,
turma, etapa, professor, disciplina e conteúdo da mesma.
Figura 21 - Captura de tela: Conteúdo Ministrado

Fonte: WebGiz
3.1.3.6 Plano de Estudo
Nesta tela o aluno possui acesso ao Plano de Estudo de todas as disciplinas da sua
grade curricular. É possível fazer o download do documento disponibilizado pelo professor da
disciplina.
46
Figura 22 - Captura de tela: Plano de Estudo

Fonte: WebGiz
3.1.3.7 Agenda de Avaliações
Nesta tela o aluno possui acesso a todas as avaliações (marcadas previamente pelos
professores). A interface é baseada em um calendário. Ao clicar na avaliação, um popup
aparece com informações detalhadas, como pode ser observado na figura 23:
47
Figura 23 - Captura de tela: Agenda de Avaliações

Fonte: WebGiz
Figura 24 - Captura de tela: Agenda de Avaliações
Fonte: WebGiz
48
3.1.3.8 Atividades Complementares
Nesta tela o aluno consegue fazer o lançamento de atividades complementares, além

de visualizar a situação das atividades já cadastradas; também é possível descobrir quantas
horas aprovadas o usuário possui no total.
Figura 25 - Captura de tela: Atividades Complementares

Fonte: WebGiz
49
3.1.3.9 Histórico Resumido
Esta página possui uma tabela contendo todas as disciplinas cursadas. Além de ano,
semestre, período, carga horária, número de faltas, média final e situação final.
Figura 26 - Captura de tela: Histórico Resumido

Fonte: WebGiz
3.1.3.10 Relação de Documentos
Nesta tela o aluno visualiza a relação de documentos entregues à secretaria; também é

possível ver a data de entrega dos documentos que estão em dia.
Figura 27 - Captura de tela: Relação de Documentos

Fonte: WebGiz
50
3.1.3.11 Solicitação de Matrícula
Através dessa página, o aluno atualiza seus dados pessoais e solicita a matrícula nas
disciplinas que ele optar. Somente serão dispostas àquelas disciplinas disponíveis para o
mesmo.
A solicitação de matrícula acontece no começo de todo semestre. Para os calouros,
este é o primeiro contato com a plataforma WebGiz.
Figura 28 - Captura de tela: Solicitação de Matrícula

Fonte: WebGiz
3.1.3.12 Comprovante de Matrícula
Nesta página o aluno consegue imprimir o comprovante de matrícula. No

comprovante é possível ver dados de cadastro e a grade das disciplinas matriculadas.
51
Figura 29 - Captura de tela: Comprovante de Matrícula

Fonte: WebGiz
3.2 Prototipagem
Este subcapítulo contém o processo de prototipagem; desde as ferramentas utilizadas,

cores, fontes, wireframe e implementação de cada tela com comentários.
3.2.1 Ferramentas
Durante a prototipagem foram utilizadas 2 ferramentas principais:

● Sketch (design digital)
● InVision (prototipagem)
52
3.2.1.1 Sketch
O Sketch é uma ferramenta para profissionais de design digital, criado para a

plataforma MacOS7.
Figura 30 - Captura de Tela: Múltiplas artboards dispostas no Sketch

Fonte: Tela capturada pelo autor
Possui uma interface intuitiva e diversos plugins desenvolvidos pela comunidade.

Alguns dos principais recursos são:
● Renderização próxima a dos navegadores.
● Coleção de símbolos reutilizáveis.
● Boas ferramentas de medição.
● Consegue exportar estilos CSS.
7
MacOS é um sistema operacional com base em UNIX desenvolvido pela Apple.
53
● Canvas8 infinito (livre espaço para trabalhar).

● Múltiplas Artboards9 (na figura 30, pode-se ver o uso das artboards).
● Exportação em diferentes formatos e resoluções.
● Integração com a plataforma InVision.
3.2.1.2 InVision
O InVision é um serviço online voltado para o desenvolvimento de produtos digitais.

Disponibiliza recursos para a prototipação. Com ele é possível desenhar telas de forma
colaborativa e interativa.
O recurso mais utilizado no desenvolvimento deste projeto foi a pré-visualização de
protótipos. Através de uma página online, é possível simular o uso do aplicativo através de
interações definidas durante a criação das telas. Este recurso facilita a validação do design e
possibilita o uso de processo iterativo de design, onde cada etapa é validada com usuários da
plataforma, para que haja tempo se existir a necessidade de mudanças.
Figura 31 - InVision: Meus Projetos

Fonte: InVision.
8
Canvas é o espaço disponível para se trabalhar na ferramenta de design gráfico. Na figura 30, o canvas é a
região central em que as telas (artboards) estão dispostas.
9
Artboards são telas criadas por designers em ferramentas de design gráfico (como o Sketch). São renderizadas
no canvas e distribuídas da forma que o designer quiser. O tamanho também é manipulável.
54
As interações são criadas com o plugin Craft by InVision, instalado na ferramenta

Sketch (figura 32) e são sincronizadas para o InVision junto as telas (artboards). O plugin
possui vários recursos, dentre eles a possibilidade de criar links entre as telas. Esses links são
utilizados na simulação do protótipo, com a navegação completa do projeto.
Figura 32 - Mapa de interações do protótipo

A plataforma InVision também possui um aplicativo para Android e iOS, que

sincroniza os protótipos e simula o uso no celular, de forma semelhante a uma aplicação
nativa, próxima da experiência final de uso.
55
Figura 33 - Protótipo de alta fidelidade

Fonte: Protótipo online na plataforma InVision.
3.2.2 Cores
As cores escolhidas para compor a paleta de cores da aplicação foram:

● Primária: Verde
● Secundária: Azul
● Terciária: Cinza
Atualmente a plataforma WebGiz possui estas mesmas cores, com a diferença que as
cores primárias e secundárias são invertidas (predominância do azul). Além disso, as cores
possuem diferenças nas tonalidades usadas.
Para a aplicação mobile, a paleta escolhida ficou mais clara que a atual e fez uso de
alguns gradientes sutis no fundo de algumas páginas. A ideia é proporcionar um visual leve ,
que não dispute a atenção do usuário com o conteúdo.
56
Figura 34 - Paleta de cores

3.2.3 Tipografia
A fonte escolhida se chama Nunito. Foi criada pelo designer Vernon Adams, que
estudou e vive na Califórnia. Trata-se de uma fonte sem serifa open-source (desenvolvido
pela comunidade para uso livre).
Figura 35 - Tipografia: Nunito

Fonte: Google Fonts (por Vernon Adams)
3.2.4 Wireframe
Nesta etapa inicia-se a implementação da interface. Foi feita uma análise do sitemap
para planejar os padrões a serem adotados na interface. A ideia é criar um esboço do conteúdo
e uniformizar os componentes da interface a fim de reutilizá-los durante o desenho da
aplicação.
57
3.2.4.1 Formulário
O primeiro padrão a ser elaborado foi o de formulários (figura 36). São utilizados em
telas como de autenticação, recuperação de acesso, troca de senha, entre outras. Consiste de
um espaço fixo para a logo, espaço para os campos de entrada; um botão que realiza uma ação
e um link de apoio no rodapé (normalmente tem a função de “voltar”).
Figura 36 - Wireframe: Formulário

3.2.4.2 Ação Realizada
Este padrão será utilizado para feedback10 de alguma ação (figura 37). Tem a função
de avisar o usuário se a ação dele foi realizada com sucesso ou não.
10
Resposta ao usuário de alguma ação que ele disparou.
58
Será utilizado em ações como a solicitação de recuperação de acesso, troca de senha e

solicitação de comprovante de matrícula.
Figura 37 - Wireframe: Ação Realizada

3.2.4.3 Dashboard (tela inicial)
A dashboard, como já citado no capítulo 3.1.3, é um compilado de informações. Um

painel com as informações mais relevantes ao usuário. Na figura 38 pode-se ver como será a
estrutura base desta tela inicial.
Observe os dois ícones no canto superior direito. O da esquerda é o link para o menu
principal (documentado na seção seguinte - 3.2.4.5). O ícone da direita abre um submenu com
as opções “Alterar minha senha” e “Logout”. Este cabeçalho será usado por toda a aplicação.
59
Seguindo o desenho, abaixo do cabeçalho, existem vários blocos. 5 serão para widgets
11
e 1 para feature12.
Figura 38 - Wireframe: Dashboard (tela inicial)

3.2.4.5 Menu Principal
A figura 39 demonstra a estrutura do menu principal. A ideia é que este menu apareça
por cima da página atual, como um modal13, com uma animação na entrada de baixo para
cima e de cima para baixo na saída.
Clicando no ícone do canto superior direito o usuário consegue fechar o menu,
voltando para a tela anterior, que estava “por baixo” do menu.
11
Ainda segundo Tidwell (2011), “widgets” são elementos gráficos interativos, como um botão.
12
Feature é uma funcionalidade/recurso da aplicação.
13
Segundo Tidwell (2011), “modal panel” pode ser uma página, caixa de diálogo ou qualquer componente que
retenha a atenção do usuário até que a ação seja concluída.
60
Figura 39 - Wireframe: Menu Principal

3.2.4.5 Funcionalidades
Esta tela define o padrão para as páginas de funcionalidades, ou feature como na

figura 40. Nesta tela o cabeçalho (logo, botão home, botão menu e botão perfil) é fixo,
ficando acima do restante do conteúdo (como o título da página) ao rolar a página. No
protótipo final hospedado na InVision pode-se simular este comportamento. Na parte branca
fica o conteúdo principal da funcionalidade.
61
Figura 40 - Wireframe: Funcionalidades

A figura 41 ilustra o menu flutuante do perfil do usuário, onde o aluno consegue

alterar sua senha e finalizar a sessão ativa.
Figura 41 - Menu: Perfil do Usuário

3.2.5 Protótipo de alta fidelidade
Esta seção contém descrito o desenho das telas, com comentários à respeito das
alterações realizadas e na abordagem utilizada.
62
3.2.5.1 Autenticação
No desenho final da tela de autenticação (figura 42), pode-se notar como ficará o
fundo com o gradiente azul e a aplicação do verde em alguns pontos do design. Este desenho
segue o wireframe criado para as telas de “formulário”.
Figura 42 - Tela: Login

Uma observação a se fazer é no título do primeiro campo, anteriormente chamado

“usuário”, optou-se por usar o termo “RA”, sigla de registro acadêmico, já que esta é a
informação usada como “usuário”. Este termo é comum no vocabulário dos estudantes, pois é
utilizado em outros serviços, como a biblioteca. A mudança se deve ao fato de que alguns
alunos não sabem o que colocar no campo “usuário”.
63
3.2.5.2 Recuperação de Acesso
O processo de recuperação de senha também recebeu algumas alterações (figuras 43 e

44). Na plataforma web o processo exige CPF e data de nascimento do usuário. Com a
proposta de facilitar o processo, o usuário preenche apenas seu RA. Na sequência um e-mail é
enviado para a caixa de entrada do discente (pré-cadastrado na plataforma) contendo um link
para a página de troca de senha, documentado na seção seguinte (3.2.5.3).
Figura 43 - Tela: Figura 44 - Tela: Solicitação de

Recuperação de acesso troca de senha realizada
Fonte: Elaborado pelo autor. Fonte: Elaborado pelo autor.
64
3.2.5.3 Troca de Senha
O processo de troca de senha manteve-se o mesmo, apenas sendo aplicado a

identidade visual do aplicativo. Pode-se notar que foram documentadas duas possibilidades
para troca de senha:
● O usuário que pediu a recuperação de acesso e acessou pelo link encaminhado para o
e-mail cadastrado (figura 45).
● O usuário que estava autenticado na plataforma e clicou na opção “Alterar senha”
(figura 46).
A diferença é que somente para o segundo caso é solicitada a senha atual, pois o
usuário que solicitou a recuperação do acesso, normalmente não se lembra da senha.
Figura 45 - Tela: Troca de senha Figura 46 - Tela: Troca de senha Figura 47 - Tela:
(recuperação de acesso) (usuário autenticado) Troca de senha realizada
Fonte: Elaborado pelo autor. Fonte: Elaborado pelo autor. Fonte: Elaborado pelo autor.
65
3.2.5.4 Dashboard (tela inicial)
A dashboard é a tela principal da aplicação (figura 48). Tem a proposta de ser uma
central com as informações mais úteis ao aluno. Os itens selecionados para compor a
dashboard foram escolhidos com base nas respostas da pesquisa, referentes às 5 informações
votadas como mais importantes (conforme foi ilustrado pelo gráfico 6).
Figura 48 - Tela: Dashboard (tela inicial)

O primeiro widget é o de “Aulas do Dia”. Um quadro que contém o horário das aulas.
Ao clicar no painel abre-se a tela “Quadro de Aulas” (capítulo 3.2.5.14).
Abaixo ficam “Média Geral” e “Frequência”, dados calculados com base em todas as
disciplinas. Ao clicar nesses painéis, o usuário é encaminhado para a tela de “Notas” e
“Frequência”, respectivamente. Na sequência há o “Resumo da semana”, com a quantidade de
66
faltas, trabalhos e provas na semana atual. Ao clicar no painel, o usuário é encaminhado para
a tela específica do recurso, onde o usuário consegue navegar semana por semana.
Por fim um botão para realizar a solicitação de matrícula. Se o discente já estiver
matriculado, a ação será de envio de comprovante de matrícula.
3.2.5.5 Menu Principal
O menu principal (figura 49) foi criado com base no recursos mapeados no sitemap14.
Seguido pela aplicação das cores15, tipografia16 e escolha dos ícones.
Figura 49 - Tela: Menu principal

14
Documentado no capítulo 3.1.3.
15
16
67
3.2.5.6 Resumo da Semana
Esta é uma proposta de nova funcionalidade para a aplicação móvel, devido à

demanda encontrada na pesquisa, onde os discentes informaram que provas, trabalhos e
frequência são dados importantes. É uma versão detalhada do conteúdo do widget com
mesmo nome disponível na dashboard. Nesta tela o usuário visualiza as faltas, trabalhos e
provas da semana; todos separados por disciplina (figura 50).
Figura 50 - Tela: Resumo da semana

3.2.5.7 Frequência
A tela de frequência consiste de uma tabela com todas as disciplinas do semestre e

duas colunas de informação, conforme ilustrado na figura 51:
68
● Total de faltas por disciplina.

● Limite de faltas17 por disciplina.
Figura 51 - Tela: Frequência

3.2.5.8 Arquivos
A tela de arquivos consiste de uma listagem de conteúdos18 disponíveis para

download, separados por disciplina (figura 52).
Estes conteúdos são enviados pelos docentes e ficam disponíveis pelo período que o
professor definir na plataforma web.
17
Excedendo o limite de faltas o discente é reprovado.
18
Normalmente são documentos PDF, Word, Excel, pastas zipadas, entre outros.
69
Figura 52 - Tela: Arquivos

3.2.5.9 Notas
A proposta para a tela de notas para o aplicativo móvel é que fique separada da
frequência, diferente da versão web. Isto se dá ao fato que a tela pequena exige uma melhor
organização do conteúdo.
A primeira tela (figura 53) é uma visão geral das notas, com a listagem de todas as
disciplinas. Ao clicar em alguma disciplina o usuário visualiza detalhes da situação (figura
54).
70
Figura 53 - Tela: Notas (visão geral) Figura 54 - Tela: Notas (1ª etapa)
Observando o conteúdo da figura 54, a primeira linha possui uma opção para voltar à
listagem de disciplinas, seguido do nome da disciplina aberta. Na linha abaixo, dois painéis:
● Etapa em curso: pode ser etapa 1, etapa 2, exame final ou situação final
(reprovado ou aprovado), caso o semestre já estiver concluído.
● Nota prévia da disciplina.
Por fim a listagem detalhada separada por etapa, contendo avaliação, nota adquirida e
valor total da avaliação.
As figuras 55 e 56, respectivamente, evidenciam duas situações diferentes:
● Disciplina em curso na etapa 2.
● Disciplina finalizada e aluno aprovado.
71
Figura 55 - Tela: Notas (2ª etapa)

Figura 56 - Tela: Notas (aprovado)
A diferença entre as duas telas está no painel da etapa em curso (nota prévia, nota
final) e no último trabalho que aparece na figura 56 (“Trabalho - Game, 19 pontos”).
72
Figura 57 - Tela: Notas (exame final) Figura 58 - Tela: Notas (reprovado)

Por fim, outras duas possibilidades são:

● Exame final: aluno não alcançou o mínimo de 60 pontos para ser aprovado na
disciplina, mas possui total maior que 40 pontos (mínimo). Neste caso a
disciplina ainda mantém-se em curso, aguardando apenas o resultado do exame
final (figura 57).
● Aluno reprovado: neste caso o aluno não alcançou o mínimo necessário para
ter direito ao exame final, que é de 40 pontos. A disciplina encontra-se
encerrada e o aluno não possui nota suficiente para ser aprovado (figura 58).
73
3.2.5.10 Matrícula
As figuras 59, 60 e 61 ilustram o

processo de matrícula ou rematrícula. A
primeira tela (figura 59) demonstra a
solicitação de matrícula com as
disciplinas disponíveis no momento. A
segunda tela (figura 60) demonstra o
estado após a matrícula ser realizada;
possui a opção de envio do
comprovante de matrícula. A figura 61
é o feedback do envio do comprovante.
Figura 59 - Tela:
Solicitação de matrícula
Figura 60 - Tela: Figura 61 - Tela: Comprovante

Matrícula realizada de matrícula enviado
74
3.2.5.11 Relação de Documentos
A relação de documentos (figura 62) consiste em uma listagem de itens necessários

para regularização da situação na secretaria. Os ícones com o ícone verde estão em dia e os
com o “x” vermelho estão pendentes.
Figura 62 - Tela: Relação de documentos

75
3.2.5.12 Histórico Resumido
A tela do histórico resumido contém uma listagem de todas as disciplinas cursadas,

contendo detalhes como média final, faltas, carga horária e situação final.
Figura 63 - Tela: Histórico resumido

76
3.2.5.13 Atividades Complementares
A tela de atividades complementares (figura 64) foi implementada com uma diferença
da plataforma web. Serão realizadas apenas consultas, sem cadastro de atividades. O registro
requer o upload19 de documentos que podem não estar disponíveis no celular do aluno, além
de exigir o preenchimento de um formulário; cuja experiência se dá melhor em computadores.
Na listagem o usuário visualiza o total de horas aprovadas e cada registro detalhado,
com data de registro, horas requeridas, horas aprovadas e status da requisição.
Figura 64 - Tela: Atividades complementares
19
Upload é quando um usuário envia - “sobe” - algum conteúdo para os servidores de um determinado serviço
online.
77
3.2.5.14 Quadro de Aulas
O quadro de aulas é um recurso novo, conforme ilustrado pela figura 65. A ideia é de
que seja um quadro com o horário e ordem das aulas do dia. Há também uma navegação entre
os dias, dando uma visão das aulas que foram dadas e as que estão por vir.
Figura 65 - Tela: Quadro de aulas

3.2.5.15 Plano de Ensino
Nesta página o aluno consegue visualizar toda a grade curricular do curso e consegue
fazer download do Plano de Ensino de cada disciplina, conforme ilustrado pelo figura 66.
78
Figura 66 - Tela: Plano de ensino

3.2.5.16 Conteúdo Ministrado
Na tela de conteúdo ministrado, ilustrada pela figura 67, o aluno pode navegar por
todos os dias e visualizar o conteúdo ministrado em aulas anteriores ou se preparar para o
conteúdo de aulas que ainda acontecerão.
79
Figura 67 - Tela: Conteúdo ministrado

3.2.5.17 Agenda de Avaliações
A agenda de avaliações, ilustrada pela figura 68, disponibiliza ao usuário todas as

avaliações - provas ou trabalhos - que foram ou que serão aplicados. A navegação é por
semana. Na listagem de avaliações, é possível visualizar a disciplina, valor total e data.
80
Figura 68 - Tela: Agenda de avaliações

81
4. AVALIAÇÃO DE USABILIDADE
Com base na avaliação heurística de Nielsen (1994), foi criado um roteiro de metas
entregue à 5 usuários da plataforma de diferentes cursos que ainda não tinham visto nenhuma
tela do protótipo desenvolvido - tiveram seu primeiro contato com a proposta. Após concluir o
roteiro (cujo qual foi cronometrado), os usuários responderam um questionário com perguntas
baseadas nas 10 heurísticas de Nielsen.
Quanto às metas do usuário, foram todas definidas com base na pesquisa realizada no
começo do desenvolvimento, quando identificou-se o perfil de uso dos entrevistados. Na
avaliação foram explorados:
● Os dois recursos mais utilizados: Notas e Frequência.
● O recurso mais conhecido, porém não utilizado: Conteúdo Ministrado.
● O recurso menos utilizado: Atividades Complementares.
● E recursos essenciais: Login, Troca de Senha e Logout.
O roteiro entregue aos usuários foi o seguinte:
● Faça login e visualize a sua nota em Tópicos Avançados em Sistema de
Informação;
● Verifique o número de faltas em Empreendedorismo;
● Veja o conteúdo ministrado no dia de hoje;
● Veja o total de horas em atividades complementares aprovadas;
● Troque sua senha;
● Faça logout.
Conforme ilustrado pelo gráfico 12, participaram da avaliação 2 alunos de Direito, 1
de Administração, 1 de Publicidade e Propaganda e 1 de Sistemas de Informação. A
distribuição foi planejada para representar perfis de diferentes contextos, a fim de reunir
perspectivas diferentes.
82
Gráfico 12 - Avaliação: Curso

Fonte: Dados obtidos na avaliação de usabilidade.
O gráfico 13 é a representação do tempo gasto (em segundos) pelos discentes para

executar todas as etapas do teste. O tempo médio foi de 99,4 segundos.
Gráfico 13 - Avaliação: Tempo total do teste

A primeira pergunta do questionário pós-teste foi: “Foi fácil ou difícil entender o que
estava acontecendo na aplicação durante as etapas executadas?”. Abaixo da pergunta foram
83
dispostos campos de seleção de 0 a 5, sendo 0 equivalente a muito difícil e 5, equivalente a

muito fácil. O gráfico 14 é a representação das respostas, que variaram entre 4 e 5.
Gráfico 14 - Avaliação: Percepção do estado da aplicação

A segunda pergunta foi: “O aplicativo mostrou-se apropriado para uso no contexto em

que ele se encaixa?”. Todos os participantes optaram por “sim”.
Gráfico 15 - Avaliação: Relação do sistema com o mundo real (contexto)

84
A terceira pergunta foi: “Você teve alguma dificuldade para navegar? Sentiu-se
restrito em algum momento?”. Novamente os usuários avaliaram com uma nota de 0 (tive
dificuldade) a 5 (não tive dificuldade). O gráfico 16 representa as respostas, em maioria 5.
Gráfico 16 - Avaliação: Navegação

A quarta pergunta foi: “Você considera a interface consistente e padronizada?”. As

opções eram de 0 (inconsistente e pouco padronizada) a 5 (consistente e padronizada). Todos
avaliaram como 5.
Gráfico 17 - Avaliação: Consistência e padronização

85
A quinta pergunta foi: “O que você achou do design da aplicação?”. As opções

variaram de 0 (desagradável e poluído) a 5 (agradável e minimalista). A maioria optou por 5.
Gráfico 18 - Avaliação: Nota para o design

O gráfico 19 ilustra a comparação lado a lado das respostas de todas as perguntas:
Gráfico 19 - Avaliação: Comparação lado a lado das respostas

86
Ainda sobre a dificuldade de uso, foi perguntado aos usuários: “Você precisou se
manter concentrado para executar as tarefas?”. A maioria (80%) respondeu não.
Gráfico 20 - Avaliação: Concentração

Por fim, foi perguntado aos usuários duas perguntas que poderiam validar ou invalidar
a solução proposta. A primeira pergunta foi: “Você considera a solução flexível e eficiente no
uso?”. Todos responderam sim.
Gráfico 21 - Avaliação: Eficiência e flexibilidade

Fonte: Dados obtidos na avaliação de usabilidade
87
Por fim, a última pergunta foi: “Você usaria a aplicação proposta?”. Novamente, todos
responderam que sim. O gráfico 22 apresenta as respostas dos usuários:
Gráfico 22 - Avaliação: Aprovação da proposta

Concluída a avaliação com os 5 usuários, os dados foram compilados e interpretados a

fim de analisar as informações adquiridas. Esta etapa marcou o fim do desenvolvimento do
projeto.
88
CONCLUSÃO
O desenvolvimento do presente estudo teve como resultado um levantamento

bibliográfico sobre Design de Interação e UX; uma documentação dos recursos disponíveis
aos alunos; uma pesquisa contendo informações sobre os usuários, perfil de uso e opinião
sobre a plataforma; uma proposta para uma nova interface exclusiva para dispositivos móveis;
e por fim uma avaliação do protótipo desenvolvido.
Sendo esta uma adaptação de um sistema em uso, o mapeamento dos recursos foi
essencial para a execução do trabalho. Foram analisados cada um dos recursos, a fim de
entender a fundo o funcionamento da plataforma e adaptar a implementação dos recursos para
que tenham uma boa experiência de uso em dispositivos móveis.
Ao final do desenvolvimento, o projeto pôde ser validado por usuários de diferentes
cursos, através de uma avaliação de usabilidade com um protótipo de alta fidelidade. Após o
teste, os usuários responderam um questionário produzido com base nas heurísticas de
Nielsen. As respostas obtidas no processo indicam que a solução apresentada:
● Apresenta uma interface de fácil compreensão.
● Encontra-se apropriado para uso no contexto em que se aplica.
● Apresenta uma interface de fácil navegação.
● Apresenta uma interface consistente e padronizada.
● É uma solução flexível e eficiente no uso.
● Seria utilizado pelos usuários que realizaram o teste.
Concluído os processos de desenvolvimento e avaliação, foram alcançados os
objetivos traçados como meta deste trabalho. O projeto é livre e é de interesse do autor que o
mesmo seja implementado um dia.
89
REFERÊNCIAS
ADAMS, Vernon. Nunito. Hospedado por Google Fonts. Disponível em:

<https://fonts.google.com/specimen/Nunito>. Acesso em: 18 nov. 2017.
CAELUM (São Paulo). UX e Usabilidade aplicados em Mobile e Web. Disponível em:
<https://www.caelum.com.br/download/caelum-ux-usabilidade-wd41.pdf>. Acesso em: 20
nov. 2017.
FLING, Brian. Mobile Design and Development. Sebastopol: O’reilly, 2009.
GARRETT, Jesse James. The Elements of User Experience: User-Centered Design for the
Web. San Francisco: New Riders, 2002.
GONZALEZ, Guilherme. Qual a diferença entre Design de Interação e UX Design? 2014.
Disponível em:
<https://brasil.uxdesign.cc/qual-a-diferenca-entre-design-de-interacao-e-ux-design-66f8a4f14
0f>. Acesso em: 19 nov. 2017.
INTERACTION DESIGN FOUNDATION. The Encyclopedia of Human-Computer
Interaction. 2 ed. Disponível em:
<https://www.interaction-design.org/literature/book/the-encyclopedia-of-human-computer-int
eraction-2nd-ed>. Acesso em: 25 ago. 2017.
MORVILLE, Peter; ROSENFELD, Louis. Information Architecture for the World Wide
Web. 3. ed. Sebastopol: O'reilly, 2008.
MOULIN, Robson. O que é e como fazer uma Avaliação Heurística. 2013. Disponível em:
<http://www.designinterativo.etc.br/user-experience/o-que-e-e-como-fazer-uma-ava
liacao-heuristica>. Acesso em: 20 nov. 2017.
NIELSEN, Jakob e MOLICH, R. Heuristic evaluation of user interfaces, Proc. ACM CHI'90
Conf. (Seattle, WA, 1-5 April), p. 249-256, 1990.
NIELSEN, Jakob. “Heuristic Evaluation”, in Mack, R. & Nielsen, J. (eds.) Usability
Inspection Methods. New York, NY: John Wiley & Sons, 1994, p. 25-62.
NIELSEN, Jakob. 10 Usability Heuristics for User Interface Design. 1995. Disponível em:
<https://www.nngroup.com/articles/ten-usability-heuristics/>. Acesso em: 20 nov. 2017.
NIELSEN, Jakob. Why You Only Need to Test with 5 Users. 2000. Disponível em:
<https://www.nngroup.com/articles/why-you-only-need-to-test-with-5-users/>. Acesso em: 20
nov. 2017.
90
PREECE, Jennifer; ROGERS, Yvonne; SHARP, Helen. Interaction Design: Beyond

Human-Computer Interaction. New York: John Wiley & Sons, 2002.
TIDWELL, Jenifer. Designing Interfaces. 2. ed. Sebastopol: O’reilly, 2011.
UEMG (Frutal). Site da UEMG. Disponível em: <http://www.uemg.br/>. Acesso em: 20 nov.
2017.
WINOGRAD, Terry. From computing machinery to interaction design. New York:
Springer-verlag, 1997.

Fábio Diniz

Enviado por

Dados do documento

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Fábio Diniz

Enviado por

Direitos autorais:

Formatos disponíveis

UNIVERSIDADE DO ESTADO DE MINAS GERAIS – UEMG

PLATAFORMA WEBGIZ: PROPOSTA DE DESIGN PARA

PLATAFORMA WEBGIZ: PROPOSTA DE DESIGN PARA

Trabalho apresentado como exigência parcial para a obtenção

A Comissão Examinadora, abaixo assinada, aprova o Trabalho de Conclusão de Curso (TCC)

PLATAFORMA WEBGIZ: PROPOSTA DE DESIGN PARA

Como requisito parcial para obtenção de Bacharel em Sistemas de Informação

Frutal, 28 de novembro de 2017.

Prof. Dr. Geraldo Nunes Corrêa

Prof(a). Me. Edna Yoshiko Senzako

Prof. Dr. Geraldo Nunes Corrêa

Prof. Ivan José dos Reis Filho

À Deus, pois sem Ele nada disso seria possível.

Gráfico 1 - Idade dos participantes ................................................................................ 31

1. DESIGN DE INTERAÇÃO​ .......................................................................................... 14

Desde os primórdios da computação, diversas tecnologias foram desenvolvidas para a

Este primeiro capítulo descreve os princípios do ​Design de Interação, vertente do

Winograd (1997) descreve o ​Design de Interação como a construção de espaços para

Os autores citam a relação entre o ​design de interação e a engenharia de ​software​, como

Parte do processo de concepção do ​design é o entendimento das necessidades dos

1.3 User Experience​ (UX)

A percepção de que as novas tecnologias estão criando oportunidades de melhorar a

Geralmente, design de experiência leva em conta um escopo muito mais

Veja na figura 1, a relação entre as disciplinas UX3, ​Design​ de Interação e HCI4:

Figura 1 - Relação entre Design de Interação, UX, Design Industrial e HCI

A figura 2 é um gráfico que representa relação entre os objetivos de usabilidade e os

Figura 2 - Objetivos de usabilidade e experiência do usuário

A figura 3 representa os elementos da experiência do usuário, segundo Garret (2002).

Figura 3 - Elementos da Experiência do Usuário por Garret

Segundo a estrutura de Garret, os elementos da experiência do usuário são, do mais

“[...] se tratando de contexto, dificilmente uma aplicação será apenas uma

Figura 6 - Ilustrando holística em ​User Experience

1.4 Arquitetura da Informação

De acordo com Fling (2009), a arquitetura da informação é a base para produtos

Segundo Preece, Rogers e Sharp (2002), o ​design de interação envolve basicamente

1.5.1 Identificar necessidades e estabelecer requisitos

A concepção de toda aplicação interativa exige um plano ou esquema que trace

1.5.2 Desenhar interfaces que atendam os requisitos

1.5.3 Construir versões interativas da interface

1.5.4 Avaliar o produto que está sendo desenvolvido

Para Preece, Rogers e Sharp (2002), a avaliação é um processo que determina a

1.6 Avaliação com 5 usuários

Nas palavras de (Nielsen, 2000): “Algumas pessoas pensam que usabilidade é um

Figura 7 - Total de problemas encontrados em testes de usabilidade

Seguindo a função ilustrada na figura 7, ​N é o número total de problemas de

Figura 8 - Curva de problemas de usabilidade encontrados vs. número de usuários testados

1.7 10 Heurísticas de Nielsen

Segundo a perspectiva de Nielsen (2005), “o objetivo da avaliação heurística é

Análise heurística, nada mais é do que a análise da interação homem

O método visa identificar problemas de usabilidade seguindo uma lista de diretrizes ou

A origem da palavra heurística deriva do grego, que literalmente tem o mesmo

a) Diálogo simples e natural

c) Mais reconhecimento que recordação

f) Saídas claramente marcadas

h) Boa mensagem de erro

2. DESIGN PARA DISPOSITIVOS MÓVEIS

Segundo Fling (2009), é impossível construir boas experiências para dispositivos

Para Fling (2009), contexto é o conceito mais importante em experiências para

● Onde estão os usuários? Estão em um espaço público ou privado? Estão dentro de

O ​layout consiste da estrutura visual do ​design​. É um elemento importante pois este

Figura 9 - Análise da interface do Safari em um iPhone

A figura 9 é uma análise da interface do navegador padrão utilizado pelo sistema

Neste capítulo encontra-se a documentação da concepção do ​design​, resumindo-se em

Este subcapítulo descreve a primeira etapa do processo, cujo objetivo é entender o

1. DESIGN DE INTERAÇÃO .......................................................................................... 14

Este primeiro capítulo descreve os princípios do Design de Interação, vertente do

Winograd (1997) descreve o Design de Interação como a construção de espaços para

Os autores citam a relação entre o design de interação e a engenharia de software, como

Parte do processo de concepção do design é o entendimento das necessidades dos

1.3 User Experience (UX)

Veja na figura 1, a relação entre as disciplinas UX3, Design de Interação e HCI4:

Figura 6 - Ilustrando holística em User Experience

Segundo Preece, Rogers e Sharp (2002), o design de interação envolve basicamente

Seguindo a função ilustrada na figura 7, N é o número total de problemas de

O layout consiste da estrutura visual do design. É um elemento importante pois este

Neste capítulo encontra-se a documentação da concepção do design, resumindo-se em

Gráfico 11 - Nota para o design da plataforma web

A primeira página da plataforma é a tela de login (autenticação). Apenas usuários

O Sketch é uma ferramenta para profissionais de design digital, criado para a

Figura 30 - Captura de Tela: Múltiplas artboards dispostas no Sketch