Embed Size (px)
Citation preview
UNIVERSIDADE FEDERAL DE PERNAMBUCO
CENTRO ACADEMICO DO AGRESTE
NÚCLEO DE DESIGN E COMUNICAÇÃO
CURSO DESIGN
MAURIDENES VINICIUS DO NASCIMENTO RIBEIRO DE FRANÇA
A EXPERIÊNCIA DO USUÁRIO PARA O DESIGN DE
INTERFACE DO SISTEMA GRAPHIC NOVELS
Caruaru
2018
MAURIDENES VINICIUS DO NASCIMENTO RIBEIRO DE FRANÇA
A EXPERIÊNCIA DO USUÁRIO PARA O DESIGN DE
INTERFACE DO SISTEMA GRAPHIC NOVELS
Trabalho de Conclusão de Curso apresentado
ao Curso de Design da Universidade Federal de
Pernambuco, como requisito parcial para a
obtenção do título de Bacharel em Design.
Área de concentração: Design.
Orientador: Profº. Fábio Caparica
Caruaru
2018
Catalogação na fonte:
Bibliotecária – Simone Xavier - CRB/4 - 1242
F837e França, Mauridenes Vinícius do Nascimento Ribeiro de.
A experiência do usuário para o design de interface do Sistema Graphic Novels. / Mauridenes Vinícius do Nascimento Ribeiro de França. – 2018. 142 f. il. : 30 cm.
Orientador: Fábio Caparica de Luna. Monografia (Trabalho de Conclusão de Curso) – Universidade Federal de
Pernambuco, CAA, Design, 2018. Inclui Referências. 1. Usuários de internet. 2. Sites - Internet. 3. Usabilidade. 4. Histórias em
quadrinhos. 5. Design. I. Luna, Fábio Caparica de (Orientador). II. Título.
CDD 740 (23. ed.) UFPE (CAA 2018-350)
UNIVERSIDADE FEDERAL DE PERNAMBUCO
CENTRO ACADEMICO DO AGRESTE
NÚCLEO DE DESIGN E COMUNICAÇÃO
PARECER DA COMISSÃO EXAMINADORA
DE DEFESA DE PROJETO DE
GRADUAÇÃO EM DESIGN DE
Mauridenes Vinicius do Nascimento Ribeiro de França
“A experiencia do usuário para o design de interface do sistema Graphic Novels”
A comissão examinadora, composta pelos membros abaixo, sob a presidência do
primeiro, considera o aluno Mauridenes Vinicius do Nascimento Ribeiro de
França, APROVADO.
Caruaru, 11 de Dezembro de 2018
FÁBIO CAPARICA DE LUNA
RODRIGO MIRANDA BARBOSA
MARCOS BUCCINI PIO RBEIRO
MAURIDENES VINICIUS DO NASCIMENTO RIBEIRO DE FRANÇA
A EXPERIÊNCIA DO USUÁRIO PARA O DESIGN DE
INTERFACE DO SISTEMA GRAPHIC NOVELS
Trabalho de Conclusão de Curso apresentado
ao Curso de Graduação em Design da
Universidade Federal de Pernambuco, como
requisito parcial para a obtenção do título de
Bacharel em Design.
Aprovada em: 11/12/2018.
BANCA EXAMINADORA
_________________________________________________
Profº. Fábio Caparica de Luna Xxxxxxx (Orientador)
Universidade Federal de Pernambuco
_________________________________________________
Profº. Rodrigo Miranda Barbosa(Examinador Interno)
Universidade Federal de Pernambuco
_________________________________________________
Profª. Marcos Buccini Pio Ribeiro (Examinador Interno)
Universidade Federal de Pernambuco
Dedico esse trabalho à Deus, meus pais, meu
irmão, minha noiva, aos amigos e colegas que
me ajudaram em toda essa caminhada.
AGRADECIMENTOS
Agradeço primeiramente a Deus por me possibilitar a caminhar e superar cada curto
período de dificuldade que já passei.
A meus pais, Marcos e Taciana e irmão Meydson que sempre estiveram comigo, me
orientando, ajudando e me fazendo nunca desistir dos meus objetivos.
À minha querida Lany por todo o suporte, carinho, paciência e compreensão que me
mantiveram em toda a minha caminhada até aqui.
A todos meus irmãos e amigos que me deram força e palavras de incentivo em
momentos difíceis e complicados.
À Marciano, fiel companheiro de casa, por toda a ajuda e boas situações vividas.
A todos os colegas que foram essenciais para o aprendizado dentro e fora de aula.
A todos os parentes que acreditaram no sonho da universidade e sorriram comigo a cada
nova conquista realizada.
Agradeço também a todos os professores e professoras que me ensinaram e
direcionaram para cada vez mais conhecimento e compreensão do design. Sou grato por cada
um que compartilhou um pouco do que sabe me busca de alunos mais aplicados. Especialmente
ao professor Fábio Caparica por sua paciência em me orientar em alguns passos a serem
seguidos e desempenhados nesse projeto. Agradeço também a todos os profissionais do Centro
Acadêmico do Agreste por prestar suporte em várias situações vividas dentro da universidade
durante esse tempo.
Por fim, agradeço a todos que diretamente ou indiretamente contribuíram para que mais
um estudante pudesse se formar em uma universidade federal. Muito obrigado!
RESUMO
Esse trabalho tem por motivação expandir a compreensão da perspectiva dos usuários
acerca de uma plataforma de quadrinhos. Visando o desenvolvimento dessa plataforma,
partimos para entender as necessidades, selecionar os principais problemas, pesquisar possíveis
soluções, desenvolver um produto viável e que foque no usuário, testar a validação e finalizar
o projeto com a aprovação dos usuários envolvidos. Pautado em diversas metodologias de
conceituados autores do campo, lidamos com diferentes técnicas e etapas para a compreensão
do real problema, assim como a sua resolução. Com uma leve observação de ferramentas que
fazem a catalogação de livros, filmes e outras mídias, percebemos que os quadrinhos ainda não
têm uma plataforma que integre todos os assuntos referentes à mídia e que seja totalmente em
português. Dessa forma, desenvolver algo que possibilite que esse público resolva um problema
é de grande importância para essa realidade. Portanto, esse presente trabalho está sendo
direcionado para os meios acadêmicos e profissionais no campo do design.
Palavras-chave: Experiência do usuário, site, quadrinhos, design.
ABSTRACT
This work has the motivation to expand the understanding of the perspective of the users
about a comic platform. Aiming at developing this platform, we intent to understand the needs,
select the main problems, search for possible solutions, develop a viable product which focus
on the user, test the validation and finalize the project with the approval of the users involved.
Based on several methods of renowned authors of the area, as well as their resolution. With a
brief observation of tools that catalog books, films and other media, we realize that the comics
do not yet have a platform that integrates all matters related to the media and that is totally in
Portuguese. In this way, developing something that allows this audience to solve a problem is
of great importance for this reality. Therefore, this present work is directed to the academic and
professional circles in the design field.
Keywords: User Experience, site, comics, design.
.
LISTA DE FIGURAS
Figura 1 – Campos interdisciplinares para o Design de Interação ....... 21
Figura 2 – Gráfico demonstrativo das Metas de Usabilidade………… 26
Figura 3 – Os 5 planos de usabilidade ................................................ 30
Figura 4 – Quadro representativo da metodologia do Projeto E ......... 33
Figura 5 – Escopo com todas as fases do projeto apresentadas ....... 35
Figura 6 – Tela inicial do League of ComicGeeks .............................. 36
Figura 7 – Letterboxd.com .................................................................. 37
Figura 8 – Tela de segundo nível do League of ComicGeeks ............ 38
Figura 9 – Menu de segundo nível do League of ComicGeeks .......... 38
Figura 10 – Descrição da persona do projeto ....................................... 43
Figura 11 – Descrição da persona do projeto........................................ 43
Figura 12 – Jornada do usuário para o sistema .................................... 44
Figura 13 – Tela de primeiro nível do League of ComicGeeks ............. 47
Figura 14 – Tela de segundo nível do site............................................. 48
Figura 15 – Fluxograma de segundo nível …………............................. 64
Figura 16 – Wireframe da HOME .................................................................. 67
Figura 17 – Wireframe HOME - Sessão 1....................................................... 68
Figura 18 – Wireframe HOME - Sessão 2 ...................................................... 69
Figura 19 – Wireframe Home - Sessão 3 ........................................................ 70
Figura 20 – Wireframe Menu Quadrinhos.......................................................
Figura 21 – Wireframe Quadrinho - Sessão 1.................................................. 71
Figura 22 – Wireframe Quadrinhos - Sessão 2 ............................................... 71
Figura 23 – Wireframe Quadrinhos - Sessão 3 ............................................... 73
Figura 24 – Wireframe Novidades .................................................................. 74
Figura 25 – Wireframe Novidades - Elementos da página ............................. 75
Figura 26 – Wireframe Novidades – Elementos da página 2 ......................... 76
Figura 27 – Wireframe usuário ...................................................................... 76
Figura 28 – Wireframe Usuário - Elementos da página ................................. 77
Figura 29 – Wireframe Usuário - Sessão 2 ............................…………......... 78
Figura 30 – Wireframe Usuário - Sessão 3 ..................................................... 79
Figura 31 – Wireframe Quadrinho .................................................................. 79
Figura 32 – Wireframe Quadrinho - Section 1 .............................................. 80
Figura 33 – Wireframe Quadrinho - Section 2 ............................................... 81
Figura 34 – Logo Graphic Novels e variações ................................................ 84
Figura 35 – Paleta de Cores ............................................................................ 85
Figura 36 – Esquema do uso das cores na Graphic Novels ............................ 86
Figura 37 – Ícones do site ............................................................................... 87
Figura 38 – Algumas fontes da família tipográfica Margem .......................... 88
Figura 39 – Selos de Leitura ........................................................................... 88
Figura 40 – Layout final da HOME ................................................................ 90
Figura 41 – Layout final do menu QUADRINHOS ....................................... 91
Figura 42 – Layout final da página Novidades ............................................... 92
Figura 43 – Layout final da página de USUÁRIO .......................................... 93
Figura 44 – Layout final da página de QUADRINHO FECHADO ............... 94
Figura 45 – Layout final da página de Listas .................................................. 95
Figura 46 – Layout final da página de Prateleira ............................................ 96
Figura 47 – Layout final da página Coleção ................................................... 97
Figura 48 – Layout final da página Quero Ler ................................................ 98
Figura 49 – Tela HOME na versão mobile da Graphic Novels ...................... 100
Figura 50 –
Figura 51 –
Figura 52 –
Figura 53 –
Figura 54 –
Figura 55 –
Figura 56 –
Figura 57 –
Figura 58 –
Figura 59 –
Figura 60 –
Figura 61 –
Tela de QUADRINHOS na versão mobile da Graphic Novels ...
Tela NOVIDADES na versão mobile da Graphic Novels ..........
Tela LISTAS na versão mobile da Graphic Novels ....................
Tela COLEÇÃO na versão mobile da Graphic Novels ..............
Tela PRATELEIRAS na versão mobile da Graphic Novels .......
Tela QUERO LER na versão mobile da Graphic Novels ...........
Tela QUADRINHO FECHADO na versão mobile da Graphic
Novels ..........................................................................................
Tela USUÁRIO na versão mobile da Graphic Novels ................
H1 da tela inicial .........................................................................
Tela USUÁRIO na versão mobile da Graphic Novels ................
Sessão apresentada na versão mobile ..........................................
Sessão que não foi apresentada na versão desktop ......................
101
101
102
102
103
103
104
105
108
109
109
110
Figura 62 –
Figura 63 –
Tela da página "Quero Ler" antes da alteração ...........................
Página de "Quero Ler" após o ajuste no layout ...........................
114
115
LISTA DE ABREVIATURAS E SIGLAS
UI
UX
Interface do Usuário
Experiência do Usuário
HCI Interação Humano-Computador
AI
HQ
Arquitetura da Informação
História de Quadrinhos
DI
SEO
Design de Interação
Search Engine Optimization
HEADER
DROPDOWN
Cabeçalho
Menu Suspenso
FOCUS GROUP
H1
Grupos Focais
Especificação de HTML para Títulos
HTML
LIKES
Hypertext Markup Language
Expressão usada para quem gostou de determinada coisa
COMIC’S
STREAMING
Quadrinhos
Um tipo de assinatura mensal online
UI DESIGN
MVP
Design de Interface do Usuário
Minimum Viable Product
TEXT AREA
LIKES
Área de texto
Expressão usada para quem gostou de determinada coisa
FEEDBACK
SIDEBAR
Resposta a algo
Uma espécie de painel usado em sites
SUMÁRIO
1 Introdução .......................................................................................................... 15
2 Planos de Pesquisa ............................................................................................. 16
2.1 Objetivo Geral .................................................................................................. 16
2.2 Objetivos Específicos ....................................................................................... 16
2.3 Justificativa ....................................................................................................... 17
3 REFERENCIAL TEÓRICO .......................................................................... 20
3.1 Design De Interação ...................………….….………………………............ 20
3.2 Usabilidade ………………...............……………...………………………..... 22
3.3 Usabilidade e Ergonomia …………………………......................................... 24
3.4
3.5
4
Experiência do Usuário ....................................................................................
Design Emocional ............................................................................................
METODOLOGIA ……………………………..............................................
26
28
30
4.1.1
4.1.2
4.1.3
Estratégia ..........................................................................................................
Objetivos do Sistema ........................................................................................
Analisando os Concorrentes e Encontrando Problemas ..................................
34
35
36
4.1.4 Necessidades dos Usuários ............................................................................... 39
4.1.5
4.1.6
Identificando usuários, definindo personas e mapeando a jornada de uso .......
Cenários de Uso ...............................................................................................
40
45
4.2
4.2.1
4.2.2
4.2.3
4.2.4
4.2.5
4.2.6
ESCOPO ...........................................................................................................
Identificando Necessidades ..............................................................................
Teste de Usabilidade do League of Comicgeeks .............................................
Usuário 1 - Estudante de Design e lê Quadrinhos Regularmente ....................
Usuário 2 – Contadora e Lê Quadrinhos Alguns Vezes na Semana ................
Usuário 3 – Designer e Lê Quadrinhos Regularmente .....................................
Estabelecendo Requisitos .................................................................................
46
46
48
50
50
51
56
4.2.7
4.2.8
Requisitos do Usuário ......................................................................................
Requisitos da Interface .....................................................................................
57
58
4.3
4.3.1
4.3.2
4.3.3
Estrutura ...........................................................................................................
Aplicando o Design de Interação .....................................................................
Arquitetura da Informação ...............................................................................
Organizando os Conteúdos e Desenvolvendo Organogramas .........................
60
60
61
62
4.4
4.4.1
4.4.2
4.4.3
4.4.4
4.5
4.5.1
4.5.2
4.5.3
4.5.4
4.5.5
4.5.6
4.5.7
4.5.8
5.
5.1
5.2
5.3
5.4
6
Esqueleto ..........................................................................................................
Design de Interface ...........................................................................................
Design de Navegação .......................................................................................
Design da Informação ......................................................................................
Wireframes .......................................................................................................
Design Visual ...................................................................................................
A Logo ..............................................................................................................
Paleta de Cores .................................................................................................
Ícones ...............................................................................................................
Tipografia .........................................................................................................
Selos .................................................................................................................
Design de Interface ...........................................................................................
Versão Mobile ..................................................................................................
Formas de Monetizar esse Produto ..................................................................
DISCUSSÃO DOS RESULTADOS ..............................................................
Teste Piloto .......................................................................................................
Resultados do Teste Piloto ...............................................................................
Teste De Usabilidade Final ..............................................................................
Resultados do Teste de Usabilidade .................................................................
CONSIDERAÇÕES FINAIS ........................................................................
REFERÊNCIAS .............................................................................................
APÊNDICE A - QUESTIONÁRIO REDES SOCIAIS
QUADRINHOS................................................................................................
APÊNDICE B –QUESTIONÁRIODO LEAGUEOFCOMICGEEK ........
APÊNDICE C –QUESTIONÁRIODO TESTEPILOTO ...........................
APÊNDICE D –QUESTIONÁRIODO TESTEFINAL DE
USABILIDADE ..............................................................................................
64
65
65
66
66
82
83
84
86
87
88
89
99
105
107
107
108
110
112
117
120
124
126
129
131
15
1. INTRODUÇÃO
Como parte integrante da área de comunicação, o design tende a ser uma ferramenta
crucial para transmitir informações. As soluções apresentadas pela profissão, são de grande
relevância para a sociedade como um todo. Com a expansão de nichos de mercado, várias
definições foram sendo adotadas. Moura (2003, p. 119) apresenta uma definição mais clara:
“Design significa ter e desenvolver um plano, um projeto, significa designar. É trabalhar com
a intenção, com o cenário futuro, executando a concepção e o planejamento daquilo que virá a
existir.” Podemos definir o design como uma forma de idealizar um artefato, seja ele digital,
físico ou de qualquer outra natureza. Por assim dizer, esse trabalho estará focado no âmbito do
design digital direcionado principalmente para o design de interfaces digitais.
Interfaces digitais são uma importante ferramenta para facilitar a vida das pessoas em
diferentes tarefas todos os dias. Elas representam um conjunto de ferramentas que servem para
especificar informações acerca de algum assunto - dando uma experiência além da estética.
Nesse quesito, consideramos a usabilidade como um grande princípio em artefatos digitais.
Assim, Oliveira (2014, p. 2) apresenta uma simples definição acerca da usabilidade através da
expressão:
A Usabilidade e o Design de Interação surgem como formas de se avaliar e conceber
– de maneira objetiva, seguindo métodos e estruturas – a interação entre pessoas,
artefatos e instituições (levando-se em conta cenários e contextos) e sugerir soluções
para melhorar esse processo.
De acordo com a expressão do autor, conectar pessoas à interfaces é algo difícil e exige
várias técnicas de design para seu sucesso. Como em qualquer outra profissão, o design se
expande para diferentes nichos. O design gráfico é uma das áreas com mais vertentes de atuação
existentes, principalmente com a expansão que a internet proporcionou nos últimos anos. Essa
expansão permitiu que áreas como o desenvolvimento de novas mídias aparecessem ainda mais
no cenário digital. Para qualquer interface digital é imprescindível que o artefato passe por
diversos processos até o resultado final. Dentro desses processos, podemos destacar: design de
interação, design de interface (UI), experiência do usuário (UX), usabilidade, tipografia para
web, cores, interação humano-computador (HCI), design emocional, arquitetura da informação
(AI) e outras áreas.
O cenário digital trouxe novas possibilidades de uso e a forma de acessar informações.
Com esse grande impacto na vida das pessoas, surgem plataformas para diversas tarefas todos
os dias. Acompanhando esse crescimento na forma de abordar conteúdos, os quadrinhos
16
conquistaram mais espaços online, trazendo novos leitores e fãs que consomem a mídia. Com
filmes e séries sendo apresentadas pelo cinema e TV, as pessoas começaram a dar mais atenção
ao tema. Agora, não só os leitores, mas também outros tipos de público debatem e trocam ideias
sobre o assunto. Dessa forma, espaços online para discussões estão mais cheios e atraindo mais
público – o que gera mais carências e necessidades de estar em um desses espaços. Assim, uma
plataforma se faz válida para que eles possam conhecer novos leitores, novas edições, fazer
controle sobre a leitura, entre outras funções. O principal problema deve-se ao fato de que
diversos sites e plataformas podem fazer a troca de informações de forma generalista sobre os
quadrinhos, mas um local que reúna diversos elementos das HQ’s (histórias em quadrinhos)
num mesmo espaço ainda faz falta para no ambiente digital. Para apoiar a ideia de uma
plataforma digital que atenda as propostas já discutidas, será desenvolvido o sistema web
“Graphic Novels”, voltado para leitores e fãs de quadrinhos que querem conhecer apreciadores
da mídia e catalogar suas leituras.
2. PLANOS DE PESQUISA
2.1 Objetivo geral
A pesquisa tem como tema a experiência do usuário para o desenvolvimento do design
de interface do sistema Graphic Novels. A discussão central de toda a pesquisa é voltada para
as metodologias de pesquisa, entendimento do público e suas especificidades, criação de
requisitos úteis para as pessoas e fazer a interação entre leitores dentro de uma interface com a
validação do usuário em cada processo. Assim, toda a pesquisa visa responder a seguinte
questão: Como entender as necessidades dos usuários para desenvolver uma plataforma de
catalogação de quadrinhos e interação entre leitores?
2.2 Objetivos específicos
▪ Verificar qual a necessidade que pretendemos suprir com a pesquisa.
▪ Analisar e entender as formas de contato dos usuários e suas principais dores em
relação ao problema.
▪ Analisar possíveis interfaces concorrentes e/ou que forneçam serviços parecidos afim
de extrair possíveis problemas e requisitos de uso.
▪ Desenvolver a interface digital do sistema Graphic Novels que permita a troca de
informações entre leitores, catalogação de quadrinhos, fóruns, listas pessoais, que seja
totalmente em português - já que não existe uma ferramenta desse seguimento
totalmente nacional - além de outras funções.
17
▪ Testar e validar o produto através do feedback do público.
Os primeiros computadores eram limitados apenas para o hardware, sendo praticamente
inexistente uma interface visual para o maior entendimento do sistema pelo usuário. Após o
aparecimento de telas gráficas e computadores pessoais, que se construiu a ideia de interação
através de interfaces, por volta dos anos 70 e 80 (GRUDIN APUD PREECE; ROGERS E
SHARP, 1990/2007). A interação homem-máquina é a forma que acontece a comunicação entre
interfaces gráficas ou analógicas com as pessoas. Com o advento dos computadores mais
avançados e sistemas digitais, os processos se tornaram cada vez mais meticulosos e buscando
uma melhor experiência de uso. Com cada vez mais estudos, testes e aperfeiçoamentos, essas
técnicas se expandiram e deram mais possibilidades de uma utilização qualificada e que resolva
necessidades. O design tem papel fundamental nessa troca de informação. Mais precisamente
no design de interface, técnicas, fundamentos e metodologias são implementados para que as
tarefas possam ser realizadas de forma satisfatória.
2.3 Justificativa
Na internet existem milhares de sites e sistemas. De acordo com o site Internet Live
Stats (2017), até agora, existem aproximadamente 1,264, 229, 730 sites em toda a web. Mesmo
com a proliferação da mídia dos quadrinhos e diferentes conteúdos sendo apresentados
diariamente, existe a falta da resolução de alguns problemas específicos. Dessa forma, muitas
pessoas procuram por sites que levem a solução de suas insuficiências. Nesse âmbito, as
interfaces precisam ser planejadas para obter sucesso na interação com pessoas, trazendo
resultados satisfatórios nas tarefas as quais lhe são atribuídas.
O avanço de mídias como podcasts, blogs, aplicativos mobile e vídeos fez com que
grandes nichos de informações viessem a se espalhar pela internet - fazendo com que fossem
filtrados os assuntos a serem pesquisados. Assim como Jekings (2008, p.9) apresenta com a
expressão: “Não é segredo que ocorreu uma mudança de paradigma no modo como o mundo
consome as mídias”. Com os avanços de sistemas web e mobile, várias mídias como revistas,
jornais e até HQ’s foram migrando para o meio digital. Decorrente de várias mudanças no
comportamento e na forma em que as pessoas consomem conteúdo, as HQ’s vêm se
transformando de analógico (nesse caso, impresso) para o digital, e mudando a forma que esses
conteúdos chegam para o público, com grandes impactos na sua produção e nos contextos que
estão inseridos (Jenkins, 2008). De acordo com o site Good E-Reader (2014), a Editora Marvel
já vem estudando processos de substituição de quadrinhos impressos para digitais alegando que
não ocupam espaço físico e que possibilitam uma melhor compra das mídias pelo público. Com
18
isso, os conceitos de crossmídia e transmídia já estão sendo implementados nos quadrinhos no
digital, assim como define Coutinho (2014, p. 4), da seguinte forma: “Os fenômenos de
“crossmídia” e “transmídia”, resumidamente, eventos no qual há o uso de múltiplas mídias e a
transição de conteúdos entre elas, são hoje mais intensos do que nunca[...]”. Analisando a
citação e os conceitos sociais ao qual estamos inseridos, verificamos que vários desses
conteúdos foram espalhados de formas diferentes pela grande rede mundial. Assim como afirma
Jekings (2008), a transição de temáticas para novos meios, dá espaço para outras esferas de
relação entre o público e artefato, possibilitando que essas informações fiquem mais acessíveis
e alcancem mais pessoas. Com toda essa expansão de mídia e sua distribuição através da
internet, os quadrinhos conquistaram mais espaço em vários blogs e sites especializados.
O atual projeto apresentará formas e metodologias para criar um sistema que faça a
interação de leitores, assim como catalogação dos quadrinhos lidos e comprados, que seja de
fácil uso e no idioma português – já que sites diretamente voltados para esse tipo de serviço não
foram encontrados no idioma até o presente momento. Para isso, a análise de outros sites e
sistemas serão feitas durante o processo de pesquisa, afim de identificar as falhas de uso,
navegação, experiência, layout e feedback de usuários. A partir dos dados obtidos através dessas
pesquisas, poderemos ter uma melhor percepção dos principais problemas e a forma de abordar
o sistema que será construído. O projeto tem como finalidade apresentar soluções práticas no
uso, criar um layout consistente e funcional que apresente o máximo de informações sem pedir
a inserção de dados desnecessários no primeiro momento de contato (um login, por exemplo)
pra que assim, possamos fazer com que qualquer usuário, mesmo leigo, use o site de forma
completa. Por fim, a versão desktop será o principal modelo de aplicações para o projeto, sendo
disponível também a versão mobile.
O público do sistema é voltado para leitores de quadrinhos que sentem a necessidade
de discutir sobre as histórias, autores, artistas, entre outros, mas que não tem um espaço que
conte com todo um aglomerado de informações sobre. Nesse contexto, interfaces gráficas tem
um papel fundamental para alavancar experiências agradáveis e funcionais para os usuários.
Luesch-Reis (1991, p.26) afirma: “o Design de Interface é responsável por propiciar ao usuário
a capacidade de visualizar uma informação, ou seja, transpô-la para suportes físicos de modo a
facilitar o seu entendimento e assimilação”. Interfaces interferem muito mais do que apenas a
estética, mas nas condições emocionais, psicológicas e de uso das pessoas. Mesmo com novos
termos sendo adotados pelos designers, os conceitos de design emocional já existem desde o
início da profissão. Artefatos são projetados para, além de serem usados de forma a resolver
19
problemas, causar experiências produtivas para os indivíduos (FORLIZZI; DISALVO E
HANINGTON, 2003).
Projetar interfaces de sites, aplicativos e sistemas é um processo que faz uma ligação
direta entre pessoa e máquina. Essa relação entre as duas partes precisa ser mais consistente
possível para que exista um bom relacionamento. Não adianta apenas ter uma interface
esteticamente agradável se ela não atende as necessidades de uso do público. Projetar artefatos
que sejam de fácil uso, que crie a comunicação funcional e que possam ser agradáveis ao utiliza-
los é o maior objetivo que as interfaces precisam ter (Preece, Rogers, Sharp, 2013). Quando o
sistema não corresponde aos requisitos dos usuários, todo o projeto se torna inapropriado,
fazendo-o se irritar.
A experiência de uso se apresenta de forma diferente nos indivíduos, pois cada um
viveu de forma distinta e com experiências particulares. Mas mesmo com perspectivas e hábitos
opostos, o projeto precisa entregar resultados satisfatórios – considerando a forma em que é
usada a interface, o segmento de mercado, interesse de público e outros fatores essenciais que
podem ocasionar no fracasso ou sucesso da usabilidade do artefato.
Nielsen e Loranger (2007, prefácio xvi), trazem uma definição sobre a usabilidade
através da seguinte expressão:
A usabilidade é um atributo de qualidade relacionado à facilidade de uso de algo. Mais
especificamente, refere-se à rapidez com que os usuários podem aprender a usar
alguma coisa, a eficiência deles ao usá-la, o quanto lembram daquilo, seu grau de
propensão a erros e o quanto gostam de utilizá-la. Se as pessoas não puderem ou não
utilizarem um recurso, ele pode muito bem não existir.
Com o argumento apresentado pelos autores, podemos dizer que muitas interfaces causam
problemas de uso por causa da quantidade de informações que apresentam, sendo muitas dessas
desnecessárias para a qualidade do uso. Assim, aquilo que não for necessário, não precisa ser
apresentado. Botões, comandos e funcionalidades que atrapalham a interatividade devem ser
retirados da plataforma. Quanto mais fácil e simples for o uso de um determinado sistema, mais
qualidade para a experiência. Se todas as funções e atributos estão claros, a usabilidade se torna
mais completa e permite um grau de satisfação elevado pelos os usuários.
20
3. REFERENCIAL TEÓRICO
3.1 Design de Interação
O design de interação (DI) é uma linha de estudo e pesquisa que visa fazer a ligação
entre pessoas e sistemas priorizando o uso e experiência que as pessoas podem vir a ter nesse
processo. “Especificamente, significa criar experiências que melhorem e estendam a maneira
como as pessoas trabalham, se comunicam e interagem”, como expressado por Rogers, Sharp
e Preece (2005, p. 28). Dessa forma, apresentar maneiras agradáveis de relação na comunicação
entre as partes.
Como já mencionado anteriormente, esse nicho do design tem uma relação direta com
a Interação-Humano-Computador (IHC), que estuda metodologias com o propósito de criar
laços produtivos entre pessoas e sistemas computadorizados, independente do tipo de
máquina a ser usada. Esse relacionamento pode revelar pontos altos e baixos e que pode ser
observado antes, durante e depois de cada processo. Para Padovani (2002), “Interação
Humano-Computador é um campo de estudo interdisciplinar que tem como objetivo geral
entender como e porque as pessoas utilizam (ou não utilizam) a tecnologia da informação”.
A partir disso, podemos dizer que esses sistemas existem para facilitar a vida das
pessoas suprindo necessidades e nunca pode ser categorizado de forma contrária. IHC tem por
finalidade, apresentar resultados - através da interface – que possam ser satisfatórios e
produtivos. Nas “metas do design de interação”, (PREECE; ROGERS E SHARP, 2007, p. 35)
os autores apresentam pontos que são importantes para o relacionamento das pessoas e sistemas.
Esses pontos devem ser considerados no processo de criação da determinada interface para que
o resultado possa ser o mais utilizável possível. Entre as várias metas apresentadas, gostaríamos
de destacar a eficácia e eficiência. A primeira afirma que o sistema precisa fazer tudo o que ele
se propõe. Já a segunda, alega que o sistema necessita executar as tarefas do usuário da forma
mais prática e rápida possível (PREECE; ROGERS E SHARP, 2007, p. 36). Observando essas
informações, concluímos que apesar de parecidas, todo projeto de interface tende a ter esses
dois conceitos bem estruturados.
O design de interação se apropria de modos para a análise e configuração de forma
direta, baseados em metodologias e princípios para que produtos digitais sejam usados por
pessoas, empresas e organizações fundamentados nas formas de como vivem e nas
circunstâncias de onde vivem; afim de recomendar resultados que aprimorem o resultado final
(OLIVEIRA, 2014). Os processos que englobam a interação estão preocupados com as
maneiras de utilização e proximidade entre pessoas e sistemas. Analisar a forma de contato, se
foi bom ou ruim, se atendeu as necessidades e se o que foi proposto naquele sistema foi
21
atendido. Assim, entendemos que vários elementos interdisciplinares são importantes para que
esse resultado possa ser alcançado. “Sempre se soube que para o sucesso de design de interação,
muitas disciplinas precisariam estar envolvidas”, como apresenta Preece, Rogers e Sharp (2007,
p. 28).
Como os autores sugerem, não é possível projetar artefatos com apenas um campo de
estudo. Grandes projetos de UX dificilmente apresentam apenas um profissional para todo o
desenvolvimento, mas sim, times com diferentes funções e propostas para o resultado final.
Para uma visão mais clara e objetiva das definições de pluralidade para os projetos de interação,
os autores Preece, Rogers e Sharp (2007) apresentam um quadro de disciplinas e campos1 que
tem uma relação direta com o objeto de estudo.
Figura 1 - Campos interdisciplinares para o Design de Interação
Ainda acrescentaria outra área que é importante nas empresas e que não está relacionada
com o gráfico: o marketing. Todo o trabalho de desenvolvimento do projeto precisa ser vendido
e convidar os clientes/usuários para que possa ser utilizado. Esse time também participa de
pesquisas do usuário e outros cenários do processo e é indispensável para a equipe. Assim,
1 Quadro de representação entre disciplinas acadêmicas, práticas de design e campos interdisciplinares do design
de interação. Fonte: Preece, Rogers e Sharp, 2007.
22
entendemos que cada disciplina tem uma participação grande para o resultado final. Entre esses
variados times encontram-se a ergonomia cognitiva e engenharia cognitiva. Essas disciplinas
atentam em oferecer uma base de dados sólidos com o objetivo de alcançar os melhores
propósitos para a interface. Mesmo contribuindo como conjunto, cada área foca em seu campo
de estudo (PREECE ET AL., 2005, p. 29). Essa pluralidade de profissionais e informações que
contemplam vários campos são de importante valor para os aplicativos desenvolvidos, pois
atestam os mais variados pontos de vistas sobre o problema a ser resolvido.
3.2 Usabilidade
A usabilidade é a característica que define um bom uso de um sistema. Através dela,
sistemas podem ser eficazes e eficientes. Quando esse aspecto não acompanha o projeto, não
há sucesso, pois, os usuários não conseguem entender como um determinado artefato funciona.
Não se pode definir a usabilidade apenas por si própria, existe uma série de variáveis e
peculiaridades que definem um bom uso de um sistema ou não; principalmente se a interface
não estiver alinhada ao seu público, aos objetivos do artefato e o que o usuário espera (CYBIS;
HOLZ E FAUST, 2007, p. 15).
Nielsen (2007, p.16), acredita que: “A usabilidade é um atributo de qualidade
relacionado à facilidade do uso de algo.” Nem todos os usuários tem o mesmo objetivo ao
utilizar o sistema. Mesmo sendo um site que possibilite os mesmos recursos, os usuários
possuem especificidades diferentes, e por isso, a experiência de uso se torna distinta. Além
disso, é importante considerar o estado mental dos utilizadores e as condições dos equipamentos
onde os sistemas estão. Essas condições podem ser primordiais para o sucesso ou não sucesso
da interação (CYBIS; HOLZ; FAUST, 2007).
Essa base de dados permite ao time de design informações precisas para testes e
avaliações. Quanto mais informações forem obtidas, mais resultados satisfatórios podem ser
abordados para o projeto. Ao decorrer dos anos, mais princípios e metodologias foram sendo
definidas para o sucesso na utilização de uma interface, entre eles, as famosas heurísticas de
usabilidade desenvolvidas por Nielsen (1994) e que apresentam uma série de atributos que
formam uma boa usabilidade, como podemos perceber a seguir:
Visibilidade O sistema indica o que está ocorrendo em cada local
da interação, apresentando reações para cada tarefa
realizada e com o mínimo de tempo.
Compatibilidade do sistema com o mundo real O sistema se utiliza do vocabulário que o usuário
entende.
23
Controle do usuário e liberdade Apresenta formas que o usuário possa se mover de
locais incomuns, apresentando opções de saídas
rápidas e de fácil identificação.
Consistência e padrões Criar uma linguagem visual que não confunda o
usuário, independente do local em que está inserido.
Ajuda os usuários a reconhecer, diagnosticar e
recuperar dados
Soluções simples para apresentar transtornos e a forma
de soluciona-los.
Prevenção de erros O sistema apresenta recursos que impedem o usuário
de errar.
Reconhecimento em vez de memorização Mostrar ações e opções mais perceptíveis possíveis.
Flexibilidade e eficiência de uso Permite que usuários leigos e experientes usem o
sistema de acordo com suas habilidades.
Estéticas e design minimalista Exibe apenas o necessário para o sistema.
Ajuda e documentação Cria uma série de passos para que as pessoas possam
encontrar as informações o mais rápido possível. Tabela 1 – Heurísticas de Nielsen
Entre tantos pontos apresentados na Tabela 1, gostaria de destacar o feedback – que
apresenta retornos sobre o que o usuário está fazendo e onde ele está situado. Esse processo é
extremamente útil para o entendimento das funções e a forma como elas se comunicam com o
público. A compatibilidade entre o sistema e o mundo real destaca que não se pode fugir aos
modelos mentais e convenções que já existe em boa parte dos sistemas. Sendo assim, criar uma
interface que seja “totalmente nova” pode ser um problema para o uso, já que não faz parte do
modelo mental das pessoas. O tópico “estéticas e um design minimalista” indica que tudo que
não for necessário ao sistema, não precisa ser apresentado, por isso devemos focar no que
importa para que possamos evitar que o usuário se perca ao realizar tarefas. Na “ajuda e
documentação”, entendemos que as interfaces precisam ser as mais indicativas possíveis, e
assim, garantir que as pessoas resolvam seus problemas e alcancem sucesso nas tarefas
realizadas. Todas heurísticas são importantes para a interface, mas gostaríamos de destacar as
citadas por já englobarem a maioria das outras funções. As heurísticas de Nielsen apresentam
caminhos que os designers podem usar para ter um pouco mais de embasamento e, criar
interfaces realmente funcionais e que apresentem o mínimo de problemas possíveis.
A usabilidade está ligada a diversos fatores, como já vimos anteriormente. Mas é sempre
bom ressaltar que muitos outros fatores estão envolvidos no ato de usar alguma coisa, por isso,
vamos nos aprofundar em mais áreas de estudo com se unem a usabilidade para tornar a
experiência melhor e mais completa.
Mas gostaríamos de destacar o visual estético – já que é o primeiro contato do usuário
com uma interface. A estética do artefato tem um importante valor para a interação. Ela precisa
ser atrativa e afetiva para que as pessoas se sintam confortáveis em seu uso. A funcionalidade
precisa estar alinhada com a beleza, mas esse segundo é o que mais aproxima os usuários do
artefato.
24
3.3 Usabilidade e Ergonomia
A ergonomia tem um fator crucial para a boa experiência do usuário. Como uma boa
usabilidade atrela vários fatores que precisam se comunicar para que o resultado final seja
funcional, a ergonomia tem um papel fundamental no bem-estar dos clientes do produto. Ela
tem como principal objetivo trazer para o usuário um sistema produtivo, efetivo e que traga
conforto na adequação ao usuário (CYBIS; HOLZ; FAUST, 2007, p. 15). Interfaces funcionais
são as que apresentam características mais intuitivas possíveis e que façam as pessoas
realizarem suas tarefas sem nenhum impedimento. O maior intuito da ergonomia é se apropriar
de metodologias e técnicas que entendam como o usuário age, as suas formas de contato e com
isso, criar artefatos que sejam prazerosos ao serem utilizados.
O relacionamento entre humano e máquina é o principal ponto de pesquisa do time de
desenvolvimento. Os sistemas precisam ter uma grande bagagem cognitiva que facilite os
processos e que estabeleça objetivos claros de utilização. Quando existem desconfortos na
usabilidade, aspectos ergonômicos podem estar falhando na relação com as pessoas. De acordo
com Cybis, Holz e Faust (2007, p.174): “um problema de ergonomia é identificado quando um
aspecto da interface está em desacordo com as características dos usuários e da maneira pela
qual ele realiza sua tarefa.” O autor ainda cita que requisitos ergonômicos podem estar sendo
desrespeitados quando contextos que não fazem parte da interface prejudicam o desempenho.
A ergonomia cognitiva tem uma relação direta com o comportamento do usuário. Logo,
quando sistemas não cumprem o que prometem, demoram a carregar páginas e alimentam o
espaço com informações irrelevantes - entre outros motivos - fazem com que as pessoas se
irritem e parem de usar o produto. Por isso as empresas investem bem mais em desempenho,
com recursos de programação, SEO (Search Engine Optimization - otimização para
mecanismos de busca), experiência do usuário, design e outras coisas que criam uma
performasse mais completa. Quando problemas como esses acontecem, empresas perdem
milhões de dinheiro em ações e vendas. Uma recém pesquisa realizada pelo site Hobo
(atualização em 2018), afirmou que os usuários não esperam mais que 4 segundos para um
carregamento de um site. Quando um sistema demora mais que isso, os usuários se sentem
desconfortáveis e em muitos casos, não retornam novamente, criando uma perspectiva de que
aquele produto não funciona, ocasionando em perdas de dinheiro.
“Sob essa perspectiva, a satisfação do usuário estará mais ligada à obtenção de seus
objetivos do que aos aspectos artísticos”, como afirma Cybis, Holz e Faust (2007, p.15).
Assumindo essa posição, quando um sistema não oferece o mínimo de funcionalidade e
precisão, ele perde acessos e utilizadores daquela plataforma, o que pode gerar falta de
25
lucratividade para as empresas. “Os efeitos de um problema de usabilidade se fazem sentir
diretamente sobre o usuário e indiretamente sobre sua tarefa” Cybis, Holz e Faust (2007, p.174).
Um bom sistema é aquele que desperta o interesse cativando os usuários além da estética e
funcionalidade, mas trazendo aspectos emocionais e atrativos. Deixar o usuário confortável
com a navegação é um dos principais objetivos da ergonomia.
3.4 Experiência do Usuário
O termo UX vem sendo muito usado nesses últimos anos. Empresas e marcas vem
trabalhando com profissionais dessa área afim de estabelecer melhores experiências de uso para
seus clientes e melhorando seus serviços e produtos. Apesar de estar se tornando muito popular,
ainda existem pessoas que não entendem o que realmente tudo isso significa. Como é algo que
ainda está se expandindo, não existe uma única resposta para determinar a área de atuação. Para
Teixeira (2014, p. 1), UX se apresenta da seguinte forma: “Apesar do estrangeirismo que deu
origem à sigla UX (User eXperience), o termo é bem mais simples do que parece. Experiência
do usuário. Experiência de quem usa”. Assim, compreendemos que o contexto do uso, a forma
de interagir, o que o usuário sente ao utilizar o produto e outras considerações fazem parte da
definição de experiência do usuário.
Se fossemos definir o termo com apenas uma palavra, poderíamos dizer que UX é
circunstância, pois envolvem todos os processos de uso antes, durante e depois do contato com
o artefato. Esses contextos são variáveis e exigem que os profissionais que projetam estejam
atentos para todas essas etapas. Dessa forma, compreendemos que experiência do usuário
demanda de vários conhecimentos e muitas análises no processo de design, mas com muito
foco no usuário e como ele se comporta com o artefato.
Com tantas informações que cercam a usabilidade, os vários profissionais que estão por
trás de um bom sistema demandam de todo um arquétipo de metodologias, com objetivos que
precisam ficar claros e a definição de requisitos bem alinhados com essas necessidades. Preece,
Rogers e Sharp, (2007, p. 40) apresentam nas “Metas decorrentes da experiência do usuário”2,
requisitos que precisam ser alinhados com o time para um sistema mais interativo possível.
Então, de acordo com os autores, para um sistema funcional, os designers envolvidos precisam
dar mais atenção na criação de sistemas que sejam: “satisfatórios, agradáveis, divertidos,
interessantes, úteis, motivadores, esteticamente apreciáveis, incentivadores de criatividade,
compensadores e emocionalmente adequados.” Essas metas desenvolvidas pelos autores
2 Representação das "Metas da usabilidade", segundo Preece, Rogers e Sharp (2005. P, 41)
26
remetam aos sentimentos que os usuários terão em acesso com o sistema. Assim como
observamos na figura 2.
Para um bom embasamento sobre o problema, é necessário a consolidação de requisitos
projetuais que sejam prioridade para as pessoas. Definir os tipos de usuários, propósitos para o
novo sistema, categorização de como essa interface será usada e que forma essa interação vai
acontecer através do visual, é o alicerce da pesquisa para gerar alternativas. O ideal é que esses
requisitos sejam alinhados com pesquisas com o usuário, priorizando as intenções e os pontos
de falha que essa interação apresenta.
Os sites precisam orientar bem os usuários nas tarefas aos quais eles se comprometem,
para que assim, eles possam apresentar resultados e experiências agradáveis. Assim, esses
requisitos englobam o que o usuário precisa sentir ao utilizar o sistema. Abordaremos um pouco
mais sobre requisitos nas próximas páginas. A realização das tarefas e o seu sucesso por parte
do usuário comumente interligados com os processos que cercam a interação, é o que permite
que o sistema seja funcional e tenha uma usabilidade prática e assertiva. Pensar na facilidade
Figura 2 - Gráfico demonstrativo das Metas de Usabilidade
Figura 2 – Ilustração das metas de usabilidades
27
de uso e na utilidade de cada elemento é o papel do UX Design, principalmente no contexto de
sites – que é para onde é direcionada essa pesquisa.
3.5 Design Emocional
A emoção é uma das características mais básicas das pessoas. Através dela, sentimos
atração ou repulsa, gostamos ou não gostamos, e até fazemos ou não fazemos algumas coisas.
Ela é responsável por indicar os caminhos para seguir, sejam bons ou ruins. Norman (2008, p.
30), descreve a emoção da seguinte forma:
[...] a emoção é um elemento necessário da vida, afetando a maneira como você se
sente, como você se comporta, e como você pensa. De fato, a emoção torna você
inteligente. [...] Sem emoções, sua capacidade de tomar decisões ficaria prejudicada.
A emoção está sempre fazendo juízos de valor, apresentando informações imediatas
a respeito do mundo: aqui está um perigo em potencial, lá está um conforto em
potencial; isto é bom, aqui é ruim.
Considerando as afirmações do autor, percebemos que grande parte das nossas decisões é
derivada por aquilo que sentimos por uma determinada coisa. Os sentimentos e experiências
passadas com artefatos ou pessoas são de grande importância para as resoluções futuras, sendo
um ponto crucial no momento da escolha. Além disso, a emoção está bem refletida na maneira
em que nos vestimos, andamos e como nos portamos.
A forma como estamos está refletida diretamente se aquilo faz bem ou mal pra nós e se
nos sentimos bem ou não. Cada linguagem corporal, expressões e outras respostas naturais do
corpo é provocado através dos nossos sentimentos. Norman (2008, p.25) ainda apresenta que o
design emocional é inserido em 3 aspectos através da frase: “O design visceral diz a respeito às
aparências. O design comportamental diz a respeito ao prazer e à efetividade no uso. E o design
refletivo considera a racionalização e a intelectualização de um produto’’. Sendo assim, o
primeiro aspecto se caracteriza pelo “impulso” de querer/consumir alguma coisa na primeira
vez que vê. Ele está relacionado ao nosso subconsciente e é o que desencadeia a sensação de
querer algo novo e bonito, nos afastando da ideia de querer algo velho ou feio. Esse nível é o
mais grave para compradores compulsivos – pois fazem com que as pessoas sintam que vão se
sentir bem com aquele determinado artefato.
O segundo nível, o comportamental está ligado ao contato direto com o produto. As pessoas
precisam sentir o artefato e observar seus detalhes para adquirir o produto ou não. Nesse caso,
o contato é bem importante para o consumo.
O nível reflexivo é o que resulta no uso do artefato e na percepção do usuário na
utilização. Pode considerar também a forma como outras pessoas veem a utilização do artefato,
o que caracteriza a percepção do “status” que aquele determinado produto pode passar para
28
outros. O autor ainda traz algumas considerações importantes através da frase (2008, p.102):
“A sensação física é muito importante”. Enfatizando o quão é importante para as pessoas o
contato com produtos. Norman (2008, p. 11) ainda fala sobre o papel do designer dentro do
contexto emocional: “Os designers voltam sua atenção para as pessoas e o modo como elas
interpretam e interagem com o meio físico e social. E passam a projetar com foco na emoção e
com a intenção de proporcionar experiências agradáveis”. Os designers precisam prestar
atenção para essa disciplina. As emoções são um dos maiores artifícios que podem ser usados
pelas empresas para aumentar vendas. Atrair usuários despertando suas emoções e sentimentos
na interação com a interface é o maior objetivo do design emocional. Em um site, por exemplo,
se ele não despertar esse sentimento de alguma forma com os utilizadores, dificilmente essa
pessoa voltará a utiliza-lo. Por isso, é preciso ter em mente o público, sua rotina e seus gostos
afim de lidar com essas emoções no processo de desenvolvimento do artefato digital.
O design emocional também pode estar atrelado a processos mentais que os usuários
têm estabelecido decorridos de anos de utilização de vários sistemas. O “apego” que eles podem
sentir em utilizar um determinado sistema é uma consequência do resultado que esse sistema
trouxe. Em um cenário imaginativo, um usuário qualquer utiliza um site a muito tempo para
pagar suas contas, e até esse momento, tudo funciona bem. Com o passar do tempo, o site
começa a apresentar problemas de uso e desempenho, consequentemente, o usuário começará
a ver aquele sistema com outros olhos e se o problema persistir, a troca para outro acontecerá.
Quando a troca for feita, ele tentará migrar as “táticas” que utilizava no antigo para o novo. Se
a lógica do site for a mesma, ele conseguirá utiliza-lo corretamente. O que quereremos salientar
com todo esse exemplo é que os modelos mentais já estão interligados com a emoção. Um case
até recente é a mudança de interface do Windows 7 para o Windows 8, que nessa última versão
apresentou o sistema sem o conhecido “Menu Iniciar”, causando experiências terríveis na
usabilidade por parte dos usuários que já estavam acostumados com aquele recurso.
Assim, se utilizar dos modelos mentais e convenções que a web já tem é o ponto de
partida para sites emocionalmente úteis. Não adianta querer trazer um site “totalmente novo”
se ele está longe dos padrões de uso que as pessoas esperam. “Os modelos mentais também são
utilizados para se saber o que fazer quando ocorrer algo inesperado com o sistema e ao deparar-
se com sistemas com os quais não se está familiarizado” (PREECE; ROGERS; SHARP, 2007,
p. 112).
Steve Krug (2008 – reimpressão, p. 34) apresenta em resumo o porquê as convenções/modelos
mentais podem ser utilizadas em sites web da seguinte forma:
29
“Esse processo de adoção leva tempo, mas acontece rapidamente na internet [...] Por
exemplo, um número suficiente de pessoas está familiarizado com a convenção de
usar um carrinho de compras metafórico em sites de comércio eletrônico, de forma
que é seguro para os projetistas usar um ícone de carrinho de compras sem precisar
colocar um rótulo “Carrinho de compras”.
Com o parágrafo, o autor afirma que devemos nos aproveitar do que os usuários já têm
guardado em suas mentes. Mudar totalmente a forma como os sistemas são, pode ser desastroso,
pois o usuário não terá identificação naquele ambiente. O maior problema de se criar interfaces
é que cada pessoa cria um padrão de utilização para os contextos de uso, abrangendo mais
possibilidades de desenvolvimento (CYBIS; HOLZ; FAUST, 2007).
30
4. METODOLOGIA
Para o desenvolvimento de qualquer projeto de design, uma série de regras e
processos precisam ser seguidos/adotados para um bom resultado. Munari (1981, p. 10) defende
o uso de metodologias de projeto com a seguinte colocação: “O método projetual não é mais
do que uma série de operações necessárias, dispostas por ordem lógica, ditada pela experiência.
O seu objetivo é o de se atingir o melhor resultado com o menor esforço”. Projetos que seguem
por esse caminho tendem a apresentar uma estrutura melhor, especificando caminhos a serem
seguidos, poupando tempo e esforços para o desenvolvimento.
Para a concepção do projeto foram utilizadas várias metodologias de aplicações.
Entretanto, o método de Garret (2002) foi o mais abordado dentro da pesquisa. Os outros
métodos adotados serão apresentados um pouco mais a frente. Dessa forma, Garret constitui o
seu método a partir de 5 etapas de aplicação: estratégia, escopo, estrutura, esqueleto e superfície.
Para criarmos um entendimento maior sobre essa metodologia, Garret (2002, p. 21) 3explica a
funcionalidade das etapas na seguinte afirmação: “Estes cinco planos [...]fornecem um quadro
conceitual para falar sobre a experiência do usuário, problemas e as ferramentas que usamos
para resolvê-los” – tradução nossa. Cada uma dessas partes apresenta particularidades de
pesquisa e aplicação que precisam ser seguidos no processo criativo. Como descrito na figura
3.
3 “Os 5 planos” apresentados por Garret.
Figura 3 – Os 5 planos de usabilidade
31
Na figura 3, o autor apresenta os métodos de pesquisa que devem ser seguidos começando pela
estratégia e seguindo até a superfície (design visual), que é o resultado final ao qual os usuários
têm acesso. Em seu livro “The Elements of User Experience (2002)”, o autor apresenta uma
breve explicação acerca das etapas.
Estratégia: reunir informações sobre a funcionalidade da plataforma, público, o propósito de
uso, interesses dos usuários e o que se espera dessa interface. É a parte da metodologia que
define o foco do artefato.
Escopo: definir os conteúdos de abordagem da interface e escolha das funcionalidades que
devem ser desenvolvidas e estarem alinhadas as necessidades dos usuários. Nessa parte, os
recursos que a plataforma vai oferecer são estabelecidos.
Estrutura: desenvolver os fluxos de acesso a informação, os pontos de interação e tarefas do
usuário. Nessa etapa são feitos os primeiros fluxogramas da navegação.
Esqueleto: definição de espaços, formas, imagens, textos e outros elementos para disposição.
Essa fase apresenta funcionalidades que facilitem o uso do sistema pelo usuário. Geralmente os
primeiros wireframes são feitos nessa parte do projeto.
Superfície: a fase onde são inseridos os últimos elementos de cores, formas e textos que
proporcionam uma estética mais agradável e com uma maior interação. Essa parte também
amplifica a navegação das páginas e é a área que o usuário tem acesso as informações e
funcionalidades.
Mesmo de forma resumida, essas estruturas nos mostram quais caminhos seguir e como afunilar
o processo de desenvolvimento. Apesar de o autor ter bastante renome e seu método ser
utilizado até hoje por muitos profissionais e citados por outros vários autores, a metodologia se
tornou “antiga” para os dias de hoje. Com as novas necessidades e recursos aparecendo com o
passar dos anos, o procedimento apresentado por ele começou a apresentar falhas por se limitar
apenas a parte de “prototipação” e esquecendo dos testes com usuários. Hoje, já não é mais
possível desenvolver uma interface sem testes para comprovar a eficácia do artefato. Assim, o
método desenvolvido pelo autor pode ser usado, mas com adaptações para as necessidades de
projetos digitais.
Em decorrência disso, os autores Meurer e Szabluk (2011) desenvolveram o “Projeto
E”, que visa uma reformulação do processo criativo para desenvolvimento de interfaces,
baseada principalmente no método de Garret (2002), mas com bases de muitos outros autores,
como apresentado seguinte citação pelos autores Meurer e Szabluk (2011, p. 2):
[...] o Projeto E traz, em sua estrutura, processos, métodos e conceitos oriundos de
vários pensadores do design. A influência não vem somente de autores do design de
interação e arquitetura da informação tais como Venn (2001), Götz (2002), Garrett
32
(2003), Nielsen (2004), Memória (2005), Preece et al (2005), Agner (2006), Norman
(2006) e Scheiderman (2007), mas também de autores de áreas adjacentes. Neste
grupo estão incluídos Solas (2004), Strunck (2007) e Wheeler (2008) no quesito
identidade gráfico-visual; Müller-Brockmann (1996), Samara (2002), Elam (2004) e
Ribeiro (2004) para composição e diagramação; e Bonsiepe (1983), Löbach (2001),
Dreyfuss (2003), Gomes (2004), Redig (2005) e Bürdek (2006), para métodos e
processos em design.
Mesmo se baseando em diversos autores renomados do campo do design, a metodologia
apresenta os mesmos elementos apresentados por Garret (2002), mas com um último processo
chamado “Execução”, que é direcionado para testes de validação e possíveis melhorias. Assim,
além de todo o planejamento apresentado pelos autores nas diversas metodologias de design, a
execução vem como um processo de consertos e melhorias das interfaces em contato com os
usuários – o que possibilita a remoção de funções que não se encaixam com o público que usará
o artefato.
As fases do desenvolvimento, segundo os autores Meurer e Szabluk (2011, p. 3-6) são
uma das principais referências para o projeto de interface e são distribuídas da seguinte forma:
1 - Estratégia: fase de construção do problema, das necessidades dos usuários e o melhor
método de lidar com o projeto.
2 - Escopo: Início da definição de conteúdo, funcionalidades e as formas de abordagem do
sistema com o público.
3 – Estrutura: Uma das fases mais complexas do processo. Nela, os designers começam a criar
o fluxo das atividades, com detalhamento de funções e ações que a interface irá apresentar.
Nessa fase que muitas alternativas são criadas até afunilar para a melhor opção considerando o
que seria melhor.
4 – Esqueleto: Aqui, o wireframe do sistema é desenhado de forma mais fiel ao produto final.
Botões, espaços para imagens, textos e outros elementos já começam a aparecer.
5 – Estética: Layout final com cores, efeitos e todos os outros elementos adicionados. É preciso
considerar que as implementações visuais sejam válidas para alinhar funcionalidade e beleza
para o projeto.
6 – Execução: Fase de validação do projeto. Com implementação de testes de usuários e
análises para ajustar o que for necessário.
Um resumo de tudo isso pode ser apresentado na Figura 4.
33
Após a avaliação de todas as metodologias apresentadas, percebemos que esses processos se
correlacionam e se baseiam nos mesmos princípios. Ao desenvolver um produto digital, os
designers precisam passar por diversos caminhos/etapas para obter um resultado satisfatório.
Por isso, ele deve se basear em vários autores, práticas e expertises afim de apresentar o melhor
resultado possível. Baseado nas muitas metodologias apresentadas anteriormente, esse projeto
seguirá a seguinte linha de desenvolvimento:
1 – Entendimento do problema (entendendo a necessidade e o usuário);
2 – Busca de referências e artefatos com a mesma linha (teste com artefatos concorrentes ou de
mesma funcionalidade);
3 – Planejamento de informações (arquitetura da informação e plano de requisitos);
4 – Planificação de ideias (wireframes e fluxogramas);
5 – Apresentação de ideias (prototipação);
6 – Testes de usabilidade e validação do projeto (testes com usuários e reajustes).
Seguindo os conceitos apresentados por vários autores e embasado nas teorias, o projeto de
desenvolvimento do sistema web Graphic Novels seguirá por esses caminhos para o resultado
final.
No design, qualquer tipo de projeto é pautado em um problema. Esse problema pode ser
informacional, visual, de uso e de manipulação. Ao perceber isso, o designer precisa abordar
metodologias e estratégias de resolução para o objeto, sempre considerando o usuário para
quem se está planejando. É necessário analisar bem os processos de uso, a interatividade com
o espaço ou artefato e encontrar os conflitos da utilização. Para se entender as necessidades, é
preciso investigar os vários aspectos que envolvem o processo.
Quando se fala em “design”, as pessoas tendem a pensar apenas na estética do
determinado artefato. Elas geralmente trazem teorias de possíveis melhorias e como aquilo
ficaria melhor visualmente, mas esquecem que para esse fim, uma série de medidas precisam
Figura 4 - Quadro representativo da metodologia do Projeto E
34
ser tomadas para o resultado final. Claro, é impossível considerar que a estética não é
importante, afinal: ela é o contato mais direto com o usuário. Mas para um visual que funcione
e atenda às necessidades, é preciso todo um background de informações e conceitos para formar
o que é visto. Assim como afirma os autores Preece, Rogers e Sharp (2007; p 56): “[...] é
necessário conceitualizar o que se deseja criar e pensar em por que se quer fazer isso”. Design
é resolução de problemas, assim, pensar em como será o impacto que o projeto terá com o
usuário e a sua reação em contato com essa interface. A partir disso, se faz necessário explanar
mais sobre as fases do projeto embasadas por alguns autores em páginas passadas.
4.1.1 Estratégia
Como já mencionado antes, a estratégia é a fase do projeto responsável por analisar os
problemas e definir a melhor forma de abordagem. Essa etapa é onde se define os usuários, as
necessidades de uso e os objetivos que serão desenvolvidos nas próximas fases do projeto.
Garret (2002, p. 28) coloca a seguinte afirmação sobre a necessidade dos usuários: “Devemos
entender o que nosso público quer de nós e como isso se encaixa nos objetivos que eles têm” –
tradução nossa. Dessa forma, o usuário é o ponto central de todas as fases do desenvolvimento
e não deve nunca ser desconsiderado.
De acordo com o “plano de escopo” apresentado por Garret (2002), a fase de estratégia
tem como objetivo identificar necessidades do usuário e os objetivos do sistema. O plano
apresenta fases que precisam ser cumpridas para se chegar na próxima etapa. Cada uma tem um
papel importante na construção do artefato. Como cita Garret (2002, p. 31): “[...]dentro de cada
plano, os elementos devem funcionar juntos para atingir os objetivos [...]” – tradução nossa.
Na imagem a seguir, podemos encontrar todos esses planos com suas descrições para um
melhor entendimento de cada necessidade.
35
Figura 5 - Escopo com todas as fases do projeto apresentadas
Como podemos observar, os conceitos abordados por Garret nos dão um caminho até a fase de
prototipação, permitindo que explanemos acerca de cada fase detalhadamente. Como
apresentaremos a seguir.
4.1.2 Objetivos do Sistema
Antes de realmente começar a rabiscar os primeiros layouts, precisamos nos perguntar
o que esse produto precisa realizar em sua última fase. Por que estamos construindo isso? Que
relevância ele vai ter? O que ele deseja atingir? Essas questões precisam ser pensadas e
discutidas na fase de objetivos do sistema. Elas estarão sempre como pauta para definirmos os
caminhos a serem trilhados. Os autores Preece, Rogers e Sharp (2007; p 222) apresentam uma
opinião sobre os objetivos do sistema da seguinte forma: “[..] consiste em entender o máximo
possível os usuários, seu trabalho e o contexto desse trabalho, de forma que o sistema em
desenvolvimento possa fornece-lhes suporte na realização de seus objetivos”. Como visto,
vários aspectos definem o objetivo do sistema e o que precisamos responder para partir para a
próxima fase. Mas como conseguimos esses resultados? O que precisa ser feito agora já que
temos ideia de onde seguir?
36
4.1.3 Analisando os concorrentes e encontrando problemas
Para entender melhor os objetivos, é necessário abordar outros sites com o mesmo
serviço, descrever as suas falhas e assim, corrigir essas falhas com o novo sistema. O site que
tomaremos por referência é o www.leagueofcomicgeeks.com. Esse site é um hospedeiro de
quadrinhos, que dá possibilidade para troca de informações e catalogação de quadrinhos lidos.
A estrutura é bem parecida com o que estamos desenvolvendo, sendo ele o ponto fundamental
de base para o novo modelo. Os problemas iniciais que podemos observar é que a primeira tela
inicial do site não permite um entendimento grande sobre o seu propósito. A frase: “Share Your
Inner Geek – The world of comics at yout fingertips”, que tem como tradução livre algo como:
“Compartihe o Geek que existe em você – O mundo dos quadrinhos ao alcance dos seus dedos”
não faz menção ao objetivo do site – que é basicamente catalogação de quadrinhos. Logo, se
um usuário que não faz parte do universo ou caiu no site por engano, vai ter dificuldade de
descobrir para que a plataforma serve. O problema nessa situação é mais de arquitetura de
informações do que necessariamente de design. Se o usuário não entende ao que o sistema se
propõe logo de cara, provavelmente ele sairá em seguida. Por isso, é necessário a utilização de
títulos fortes e autoexplicativos e que afirmem a que ele se propõe. Nessa perspectiva, Steve
Krug (2008, p. 22) apresenta a seguinte afirmação: “Um dos poucos fatos bem documentados
sobre o uso da Web é que as pessoas tendem a gastar muito pouco tempo lendo páginas web.
Em vez disso, nós passamos por elas, procurando palavras ou frases que nos chamem atenção”.
Assim, o site necessita apresentar referências visuais impactantes e que tragam clareza ao seu
objetivo ainda na primeira página.
Figura 6 - Tela inicial do League of ComicGeeks
37
Um outro ponto que podemos abordar ainda na tela inicial é que o site faz chamada para
um cadastro logo de cara – o que pode afastar usuários que estão tendo um primeiro contato. O
ideal seria apresentar o máximo de informações antes de fazer o usuário ter o trabalho de se
cadastrar, aumentando sua experiência e carinho pelo artefato. Sites como o Letterboxd –
página direcionadas para catalogação de filmes – utilizam esse recurso de forma melhor,
inclusive, afirmando para que veio logo de cara e mais claramente.
Figura 7 - letterboxd.com (acesso em 20/02/2018)
O letterboxd apresenta os filmes mais comentados e lançamentos da semana em sua
segunda sessão, já alertando e chamando atenção para o conteúdo do site. A frase: “What are
you watching? Start a diary and tell your friends…”, que em tradução livre é: “O que você está
assistindo? Comece um diário e conte aos seus amigos...” alerta o usuário dizendo que o site
tem o objetivo de catalogar filmes assistidos. Assim, qualquer pessoa que entrar em contato
com o sistema, terá de cara informação sobre o que se trata. É interessante observar que ele não
pede cadastro para a navegação por outros menus, o que já aproxima mais os usuários.
Outro grande problema apresentado pelo site League of ComicGeeks é o idioma. Como
o site é em inglês, usuários não familiarizados com o idioma sentiriam limitações em sua
utilização. Assim, um dos objetivos da Graphic Novels é oferecer um sistema totalmente em
português. Existem outras plataformas para catalogação de livros e até HQ’s, mas nenhuma
totalmente focada em quadrinhos e com funcionalidades que enquadrem o universo.
Com o uso do sistema, observamos mais problemas. Não só de estrutura, mas de navegação e
usabilidade também. Ele apresenta vários pontos que fazem com que o usuário se sinta perdido
e sem indicar caminhos que podem ser seguido, deixando de ser intuitivo. “Não há muito
sentido em desenvolver uma série de funcionalidades se a maioria dos usuários não pode ou
38
não está preparada para passar algum tempo aprendendo a utiliza-las” (PREECE; ROGERS;
SHARP, 2007, p. 38).
Apresentaremos apenas os principais problemas dessa primeira análise.
Figura 8 - Tela de segundo nível do League of ComicGeeks
Ao fazer login no sistema, percebemos que ele não nos indica um caminho que podemos
seguir para explorar todo o conteúdo. A tela aparece quase toda sem informações, os menus e
ícones não são intuitivos e claros para os usuários que acessam. Ele apresenta 2 menus. O
primeiro no header (cabeçalho) traz os seguintes botões, que representam, em tradução livre:
“Procurar, Comunidade, Pesquisar, Quadrinhos Novos, Lista de Puxar, Lista de Leitura e Lista
de desejo”. As quantidades de opções podem confundir os usuários na utilização. O
recomendado seria filtrar informações para proporcionar um melhor fluxo de navegação. Por
exemplo: os menus “Lista de Puxar”, “Lista de Leitura” e “Lista de Desejos” – com tradução
nossa - poderiam estar num mesmo menu com a opção “dropdown” (menu suspenso) filtrando
todas os tipos de listas no mesmo local. Assim, facilitaria a procura por essa opção.
Figura 9 – Menu de segundo nível do League of ComicGeeks Figura 9 - Barra de Menus do League of ComicGeeks
39
Outro menu que pode confundir os usuários são “Pesquisar” e “Procurar” já que ambos
têm praticamente o mesmo significado. Os usuários poderiam se confundir e errar ao utilizar,
já que ambos têm funções diferentes. Abaixo do menu principal, existe outra barra de opções
com botões que não facilitam a compreensão. Não é necessário a utilização desse menu já que
tudo poderia estar agrupado no menu superior. Outra vez vemos necessário a estruturação de
uma arquitetura de informações que priorize o que precisa ser mostrado para o usuário.
Se torna necessário priorizar as informações ao qual o usuário terá acesso, assim como
cita Reis (2007, p. 73): “organizar a informação de forma a torná-la facilmente compreensível
e que ajude o usuário a encontrar o que precisa para atingir seu objetivo”. Ao navegar por outros
menus, percebemos que se torna difícil a utilização do site por ser muito trabalhoso acessar
menus funcionais. Mesmo usuários já avançados precisam clicar diversas vezes em botões para
ter acesso ao material que querem, deixando a experiência exaustiva e corriqueira. Tendo em
vista essa primeira análise sobre a arquitetura de informação, usabilidade e navegação do
sistema, temos como base problemas que precisam ser pensados e estruturado de forma mais
clara no site que estamos criando, para que os objetivos possam ser alcançados mais facilmente
por usuários – tanto leigos, como experientes no uso da web.
Dessa forma, podemos definir os principais objetivos do sistema:
- Apresentação dos propósitos do site em primeira mão;
- Desenvolver uma navegação mais consistente e prática;
- Amplificar a usabilidade, permitindo que os usuários saibam exatamente onde estão e assim,
tenham sucesso na busca;
- Catalogação prática de quadrinhos e uma interface de melhor interação entre usuários;
- Apresentar todo o conteúdo em português;
4.1.4 Necessidades dos usuários
Quando nos referimos a necessidades, englobamos várias situações. Dentro de um
sistema, por exemplo, usuários diferentes apresentam necessidades diferentes. Se tomarmos por
exemplo o Facebook, algumas pessoas acessam para passar o tempo, outras para jogar, outras
para conversar, outras para se atualizarem e assim continua o ciclo. Apesar de um mesmo
usuário poder fazer tudo isso, ele foca sua atenção naquilo que mais necessita. Como afirma
Garret (2002, p. 42): “Identificar as necessidades dos usuários é complicado porque os usuários
podem ser bastante diversificados” – tradução nossa. As pessoas acessam sistemas porque
precisam de alguma coisa. É impossível entender as necessidades sem conhecer os usuários.
Eles são o principal meio da pesquisa para a criação de requisitos dos projetos. “Dentre todos
40
os que participam de uma equipe de projeto de interface, o usuário é a pessoa que mais conhece
o sistema interativo no contexto de seu trabalho” (CYBIS; HOLZ; FAUST, 2007, p. 106).
Portanto, para nos aproximarmos desse contexto, é preciso entender todos os processos de uso
e a forma de interação entre as partes. Quanto mais informações puderem ser obtidas nessa
etapa, melhor o resultado final da interface.
Descobrir as necessidades é uma tarefa árdua e difícil, e para saber por onde iniciar,
precisamos buscar referências bibliográficas para formular os caminhos que podemos seguir.
Nessa perspectiva, os autores Preece, Rogers e Sharp (2007; p.222), nos apresentam algumas
perguntas que precisamos fazer para entender melhor o que os usuários precisam. A primeira
pergunta que precisamos fazer é “o que estamos tentando alcançar com essa atividade de
design?” Esse tipo de pergunta é bem pertinente, pois faz menção ao problema de design que
estamos tentando resolver. Dessa forma, a frase que pode resumir o problema geral do projeto
é a seguinte: leitores de quadrinhos precisam de um espaço para catalogar HQ’s lidas,
interagir com outros usuários, ter acesso a informações sobre o universo e usar uma
plataforma que seja brasileira, fácil de usar e seja acessível para todos/as. A partir dessa
definição, podemos entender que reunir um sistema web que reúna todos os itens citados acima
é o maior objetivo. Após o esclarecimento do objetivo, precisamos identificar o público ao qual
esse sistema vai interagir. Essa tarefa é extremamente importante e vai guiar todos os passos a
partir daqui.
4.1.5 Identificando usuários, definindo personas e mapeando a jornada de uso
O primeiro passo é identificar os usuários que podem utilizar a plataforma. Não é uma
tarefa fácil, pois cada pessoa pode acessar o site para um fim. É necessário se colocar no lugar
do usuário para começar a entende-lo. Dessa forma, Garret (2002, p. 46) afirma: ”Para entender
o que nossos usuários precisam, primeiro temos que ter uma sensação de quem eles são. O
campo de pesquisa de usuários é dedicado a colecionar os dados necessários para desenvolver
essa compreensão” – tradução nossa. Existem diversas formas de fazer um primeiro contato
com o usuário. Entrevistas, pesquisas e focus group (grupos focais) são as mais tradicionais.
Utilizaremos a entrevista como a principal forma de captação de informações.
As entrevistas podem ser feitas através de questionários ou pessoalmente, com
utilização de algum material para anotar. Para um melhor aproveitamento das informações,
seguimos o formato apresentado por Cybis, Holz e Faust (2007, p. 122) denominado como
“Questionários de uso e de perfil”. Essa técnica se consiste em determinar um aparato geral dos
usuários e como eles entram em contato com esses sistemas. A ideia é criar um questionário
41
que abranja vários tipos de pessoas, com idades e profissões diferentes, mas que sejam leitores
de quadrinhos. Para isso, utilizamos a plataforma Google Forms – um criador de questionários
online.
O importante desses questionários é ser objetivo com as perguntas e delimitar o que as
pessoas podem responder. Perguntas muito abrangentes ou com respostas complicadas podem
não ser objetivas e acabam não passando nenhuma ideia do que o usuário está pensando. As
perguntas do questionário são bem simples e servem para identificar o público e suas principais
necessidades.
As perguntas apresentadas no teste foram respondidas por 14 pessoas e tinham um total de 7
perguntas. Mesmo com poucas pessoas o questionário foi bastante oportuno, pois confirmou o
que elas buscam em relação ao assunto. Todas as perguntas e respostas apresentadas no teste,
com suas porcentagens de respostas podem ser conferidas a seguir:
1 - Você costuma ler quadrinhos diariamente?
Sim Não
64,3% 35,7%
2 - Você usa/usou alguma plataforma para catalogar os quadrinhos que já leu? Se sim,
qual?
Sim. Anotação no
celular
Não Sim. Bloco de notas Sim. O Skoob.com
7,1% 78,5% 7,1% 7,1%
3 - Você já comprou algum mangá/HQ repetido por não lembrar que já tinha comprado?
Sim Não
35,7% 64,3%
4 - Se houvesse uma plataforma para organizar a sua leitura e os quadrinhos que tem,
você usaria?
Sim Não
85,7% 14,3%
5 - Você gostaria de pontuar os quadrinhos que leu em alguma plataforma?
Sim Não
85,7% 14,3%
42
6 - Gostaria de um espaço voltado para a troca de informações sobre quadrinhos com
outros leitores?
Sim Não
100% 0%
7 - Você usaria uma rede social voltada para assuntos relacionados à quadrinhos?
Sim Não
92,9% 7,1%
Após a pesquisa, foi possível perceber o perfil e o que eles estão procurando em um
sistema com esse propósito. É importante ressaltar que todos os usuários são leitores de
quadrinhos, e assim, sentem necessidades diferentes, embora todos estejam incluídos no
processo de design do produto. Dentro dessa perspectiva, com esse simples questionário
algumas questões importantes já foram levantadas e podem ser exploradas mais à frente da
pesquisa.
Agora que já definimos essa etapa de entendimento do problema e das pessoas, é necessário
determinar uma persona que represente o sistema. De acordo com Lowdermilk (2013, p.73):
“Uma persona é um elemento segundo a personalidade que ajuda você a se lembrar para quem
o aplicativo está sendo criado. É uma personagem de ficção que consiste na personificação de
seus usuários reais”. Como o próprio autor menciona, personas são representações dos usuários.
São usadas para ter uma noção de para quem se trata o produto em desenvolvimento. Entretanto,
a criação de personas deve ser feita com cuidado para que haja a maior aproximação do usuário.
A partir de conversas, questionários e o foco do público fomos identificando
particularidades dos personagens. Com o propósito de ampliar as informações, é necessário
buscar por descrições que sejam mais que apenas nome, gênero e idade. De acordo com Cybis,
Holz e Faust (2007, p. 142) o processo deve começar com a definição de nome e uma imagem
representativa do visual. Após isso, características de personalidade, preferências, hábitos,
desejos e outras informações devem ser extraídas. Sendo assim, as personas identificadas
apresentam as seguintes características.
43
.
Figura 11 - Descrição das personas do sistema
Figura 10 - Descrição das personas do sistema
44
As personas constituem uma ideia das ansiedades e o perfil do público. Entender os hábitos,
vontades, manias e como se comportam nos dão uma base sólida de como podemos pensar o
sistema para pessoas que estejam dentro desses perfis de comportamento. As personas,
juntamente com a jornada de uso, são importantes para o processo de UX; de forma que nos
ajudam a identificar quais pontos podem ser mais explorados nas próximas fazes do
desenvolvimento.
A jornada do usuário, por exemplo, nos fornece todos os pontos de apoio para a entrega
de um material realmente funcional e interativo, pois várias ânsias dos usuários são
apresentadas dentro desses esquemas, assim como quais oportunidades podem ser válidas para
o resultado final. Dessa forma, a jornada do usuário para esse projeto foi concebida através de
entrevistas e conversas com pessoas que sentem essa necessidade. Assim, representamos essas
dores através da seguinte imagem:
Figura 12 - Jornada do usuário para o sistema
45
Percebemos que muito do público-alvo do sistema tem essas mesmas necessidades quando
pensam em catalogar quadrinhos que já leram. Foi feita uma grande pesquisa dessas
necessidades e vontades e uma coleta de dados por meios digitais e através de conversas para
determinar todos os pontos que visualizamos na figura 12.
4.1.6 Cenários de uso
Os cenários de uso são representações de situações que os usuários se encaixam. Dessa
forma é possível apresentar o contexto em que o sistema está inserido e do que se trata o
problema de design. Segundo Lowdermilk (2013, p.74): “Quanto mais detalhes você atribuir a
suas personas, mas fácil será imaginar como elas reagirão a um dado cenário. Como diz o nome,
os cenários são como cenas de um filme”. A ideia central dos cenários é a narrativa. Os usuários
falam dos seus problemas de forma natural e que possa ser entendida rapidamente pela equipe
de projeto. Dessa forma, Cybis, Holz e Faust (2007, p. 242) apresentam a seguinte afirmação:
“Contar história é uma maneira natural de as pessoas explicarem o que estão fazendo ou como
realizar algo”.
A criação desses cenários exige variadas situações em que os usuários podem realizar
atividades. Com as personas já definidas, fica mais fácil criar uma estrutura de história que
possa planificar essas ações. Nos baseando em uma de nossas personas, nesse caso o Eric,
vamos criar um cenário que o represente juntamente com sua necessidade.
“Eric é um freelancer de Recife que gosta de ler e acompanhar quadrinhos. Mesmo com a rotina
apertada, ele reserva um tempo todos os dias para ler alguma revista. Com tantas leituras e
histórias diferentes, ele percebeu que precisava catalogar os gibis que vinha lendo, tanto para
ter um controle maior, como para saber o que já foi lido e o que precisava ler. Ele acreditava
que se houvesse um sistema que o ajudasse nesse processo, o fluxo de leituras seria muito mais
prático. Como ele não conhecia muitas pessoas que liam quadrinhos, conhecer outras pessoas
que faziam a mesma atividade poderia ser interessante para discutir sobre as histórias. Portanto,
um sistema que o auxiliasse nessas atividades e que desse a possibilidade de conhecer outros
leitores, daria a possibilidade de organizar melhor os seus quadrinhos.”
Agora, fica muito mais fácil entender o que as pessoas precisam e as oportunidades que o
projeto em design pretende sanar. Os cenários são essenciais para empatia com os problemas
que os usuários passam todos os dias e essenciais na compreensão por apresentar uma narrativa
comum e direta sobre a perspectiva das pessoas.
46
4.2 ESCOPO
Com o entendimento do problema, dos usuários e das brechas para a solução, chegou a
hora de começar a desenvolver estratégias que sanem as dores das pessoas a quem esse projeto
se destina. No escopo é onde apontamos os possíveis erros que podem vim a acontecer. É a fase
de encarar as necessidades começando a idealizar suas possíveis soluções. Garret (2002, p. 58)
reforça a importância do escopo com a seguinte afirmação: “O processo é valioso porque obriga
a abordar potenciais conflitos e manchas ásperas no produto, enquanto a coisa toda é ainda
hipotética. Podemos identificar o que pode ser resolvido agora e o que terá que esperar até mais
tarde” – tradução nossa. Dessa forma, o escopo é uma fase de muita importância para o
desenvolvimento do produto, ela vai ditar tudo o que precisamos nos embasar para as próximas
fases de construção.
Por isso, Garret (2002, p. 59) compara em um exemplo prático o que a falta de um escopo
bem definido pode trazer para o projeto através da seguinte afirmação: “Na ausência de
requisitos claros, o seu projeto provavelmente será como um jogo de “telefone sem fio” da
escola – onde cada pessoa
da equipe recebe uma impressão do produto por meio do “boca a boca”, e a descrição de todos
acaba ligeiramente diferente” – tradução nossa. Por isso, conhecer bem as necessidades e
estabelecer requisitos de conteúdo e especificações das funcionalidades é o primeiro passo
nesse processo.
4.2.1 Identificando Necessidades
Para atribuir especificações funcionais é preciso pensar nos objetivos do sistema. O
contexto de uso e como o sistema que estamos construindo vai atender as necessidades dessas
pessoas. Após o entendimento dessa situação, precisamos formar as condições do projeto e
onde ele precisa estar para atender quem usará o sistema. O importante nessa etapa é definir
necessidades em larga escala e depois ir filtrando as principais que serão abordadas mais
rapidamente. Como já refletimos, existem diferentes tipos de necessidade para cada usuário.
Dessa forma, expandir o pensamento para sanar a maior parte dessas necessidades é o principal
objetivo. Alinhar conteúdo e funcionalidade caracteriza a identificação dos problemas do
artefato de design. Para priorizar as necessidades é preciso voltar para o site
LeagueOfComicGeeks.com e verificar as páginas de primeiro e segundo nível novamente.
47
Figura 13 - Tela de primeiro nível do League of ComicGeeks
Na tela inicial, temos um problema de apresentação do propósito do site. Ele não informa pra
quem ou pra que ele se direciona. Outro problema é que não apresenta nenhum tipo de conteúdo
sem “forçar” o usuário a fazer login no sistema. A partir do primeiro contato, o usuário já fica
confuso sobre a maioria das funcionalidades que ele deveria apresentar. O tipo de conteúdo
apresentado, não fornece nenhum tipo de laço com o usuário em seu primeiro contato, assim,
dificilmente ele ficará por muito tempo na plataforma. A primeira necessidade que podemos
definir a partir daqui é apresentação de conteúdo do sistema. As pessoas precisam saber sobre
o que se trata o site em seu primeiro contato. Isso permite clareza nas informações e um tempo
de visita maior. Ao confundirem ou não entenderem o site, o design proposto foi falho, e isso é
um erro também de conteúdo.
48
Figura 14 - Tela de segundo nível do site.
Na tela de segundo nível, os problemas se mantêm. Se o site é sobre quadrinhos, o primeiro
contato após o login (que já se torna um problema inicial) deveria ser apresentar quadrinhos
para que as pessoas passeassem descobrindo e interagindo com os seus componentes. O excesso
de botões e funções deixam as pessoas confusas, ocasionando erros e frustrações sobre o uso
do sistema. Ele não deixa claro os caminhos a se seguir e não abre portas pra o usuário possa
ter facilidade na utilização.
Todos esses problemas já são necessidades claras sobre o uso do artefato. E apesar de o
sistema analisado terem outros problemas, esses apontados são inestimáveis falhas. Para uma
compreensão das dores dos usuários, fizemos um teste com algumas funcionalidades básicas
no League of ComicGeeks. Esse teste tem por princípio explorar como os usuários entram em
contato com essas funcionalidades e calcular o sucesso ou fracasso de suas ações em uma
plataforma semelhante a que estamos desenvolvendo. Entendendo isso, poderemos definir
requisitos que sejam melhor explorados na continuidade do projeto.
4.2.2 Teste de Usabilidade do League of ComicGeeks
Os testes de usabilidade são técnicas que maximizam o entendimento do problema e das
pessoas que envolvem o sistema. Preece, Rogers e Sharp, (2007, p. 230) apresentam a
importância dessa coleta de dados através da seguinte citação: “O propósito da coleta de dados
é reunir informações suficientes, relevantes e apropriadas, de forma que um conjunto de
49
requisitos estável possa ser produzido”. Os requisitos iniciais podem ser expandidos, trazendo
novas soluções e dores que nem foram pensadas pelos desenvolvedores do projeto no primeiro
momento.
Ao realizar uma tarefa como essa, se torna fácil para o usuário explicar os principais
problemas de usabilidade – visto que um simples questionário pode ser insuficiente para um
aparato maior de informações. Facilitar o que os usuários sentem é uma solução que poupa
tempo e investimento dentro de um artefato de UX. Cybis, Holz e Faust (2007, p. 192) mostram
o papel do teste de usabilidade para o entendimento dos dilemas e frustrações dos usuários
através da seguinte expressão: “O objetivo é constatar esses problemas, medir seu impacto
negativo sobre as interações e identificar suas causas na interface”.
Várias técnicas podem ser usadas para testes com usuários. Já utilizamos as entrevistas
e questionários previamente, aqui, os usuários precisarão testar algumas funcionalidades do site
leagueofcomicgeek.com para classificar suas principais falhas e assim, aplica-las de forma
diferente no novo sistema que estamos desenvolvendo. Como cita Cybis, Holz e Faust (2007,
p. 192): “Os testes de usabilidade tem com o foco de avaliação a qualidade das interações que
se estabelecem entre usuários e sistemas.” Dessa forma, identificar esses pontos de fraqueza e
medir como os usuários interagem com eles são essenciais para a versão final do nosso artefato.
Afim de determinar quais funções são bem executadas e quais fazem os usuários falharem, a
observação do teste é fundamental para a análise dos dados. Por isso, definir tarefas que o
usuário precisa realizar é uma alternativa palpável para a expansão da situação.
Para a realização do teste, foram convidadas 3 pessoas de diferentes locais, profissões e
idades. 2 dessas pessoas leem quadrinhos rotineiramente e o outro algumas vezes no mês. O
teste foi rápido e baseado na estrutura que o leagueofcomicgeek.com apresenta. Especificamos
algumas funções básicas de ferramentas desse tipo para verificar se o resultado seria satisfatório
ou não. Todos os testes foram feitos remotamente, ou seja, com cada um em suas casas. Não
aconteceram de forma simultânea, mas todos possuíam a mesma estrutura de ação. Segue a lista
de tarefas para o teste:
▪ Entrar no site >> https://leagueofcomicgeeks.com;
▪ Fazer o cadastro;
▪ Procurar e pontuar com 5 estrelas o quadrinho “BATMAN: THE DARK KNIGHT
RETURNS”;
▪ Achar a comunidade/fórum do site e fazer um post com a mensagem: “Batman: The
Dark Knight Returns it's amazing!”;
▪ Se conectar/adicionar um usuário qualquer;
50
▪ Sair do sistema;
Como utilizamos o site por algumas vezes, era necessário fazer um teste um pouco mais
simples, considerando que nem todos os usuários tem o mesmo repertório de sistemas na
internet. Dessa forma, as funcionalidades mais básicas foram escolhidas para o experimento.
Como todos os testes foram filmados e narradas por eles ao realizarem, foi fácil compreender
as maiores dores e lamentações para o uso do site. Isso permitiu aumentar ainda mais o
entendimento do problema. Seguem os resultados de cada teste:
4.2.3 Usuário 1 - Estudante de design e lê quadrinhos regularmente.
Em seu teste, ele conseguiu fazer todas as tarefas de forma satisfatória e rapidamente.
Mesmo tendo algumas dificuldades para tentar achar as opções corretas, o que era esperado foi
feito. Deu pra perceber que ele sentiu dificuldade em alguns pontos – já que o sistema está em
inglês e não informa corretamente o que é proposto. Continuou afirmando que conseguiu ter
um bom resultado graças ao seu repertório com sites (mapa mental) e por associar os ícones às
funções. Ele achou dificultoso pontuar os quadrinhos, tanto por feedback do site, como por
poder pontuar apenas as edições soltas e não a versão encadernada. Ainda continuou achando
a navegação do site boa, apenas afirmando que a parte de pontuação não foi conclusiva.
Para finalizar, podemos dizer que por se tratar de um usuário avançado, as tarefas foram mais
fáceis de serem realizadas, mas mesmo para ele, o site não comunicou como deveria as
informações a serem pesquisadas. Ele finalizou o teste em 5:21 minutos.
4.2.4 Usuário 2 – Contadora e lê quadrinhos alguns vezes na semana.
Em seu teste, não conseguiu realizar praticamente nenhuma tarefa, com exceção do
cadastro no site. Afirmou que: “o site pode ser fácil para leitores de quadrinhos e pra quem usa
mais esses tipos de site, mas não me direcionou bem”. Exalta a linguagem em que o site se
encontra como um problema. Percebemos que ficou percorrendo por vários menus procurando
por funcionalidades que funcionassem. Várias tentativas e erros que cansaram a experiência e
fizeram com que terminasse o processo sem conseguir concluir a tarefa. As dificuldades do
sistema fizeram com que o processo por tentar achar o que se foi pedido, se transformasse em
uma tarefa maçante e repleta de tentativas em vão, concluindo que o usuário sentiu muita
dificuldade em usar o sistema. Por não ter tanto conhecimento em sistemas desse tipo, isso
interferiu; mas mesmo clicando e buscando dentro do site, as tarefas não foram realizadas pela
falta de informação sobre essas funções. Ela finalizou o teste em 4:05 minutos.
51
4.2.5 Usuário 3 – Designer e lê quadrinhos regularmente.
Demorou muito para realizar o que se foi pedido. Como o site não apresenta feedback,
o usuário ficou sem entender se a ação foi realizada ou não. Afirma que o site demora para
carregar as páginas, mesmo com sua internet funcionando normalmente. O usuário ficou
confuso em muitas partes do teste. Como não sabia se as funções estavam corretas, ela procurou
por vários menus e páginas até encontrar os locais certos. Ao encontrar, não sabia se estava no
lugar ideal por falta de feedback. Conseguiu completar o teste, mas demorou mais tempo do
que o esperado, finalizando o teste em 7:46 minutos.
Após o teste, apresentamos 2 questionários. O primeiro é um questionário de satisfação
apresentado por Unger (2009) que classifica cada tarefa partindo de “1º discordo totalmente,
2º discordo, 3º nem concordo nem discordo, 4º concordo e 5º concordo totalmente.” Uma escala
gradativa de opiniões. O segundo questionário foi um que criamos com perguntas mais pessoais
sobre a experiência. Os resultados do primeiro questionário podem ser conferidos a seguir:
Usuário 01
TAREFA: Criar um perfil e acessar o site.
Discordo
totalmente
Discordo Nem
Concordo nem
Discordo
Concordo Concordo
totalmente
A tarefa levou mais tempo
para terminar do que o
esperado
X
A tarefa foi fácil de
completar
X
Fiquei frustrado ao tentar
completar essa tarefa
X
TAREFA: Procurar e pontuar com 6 estrelas o quadrinho “BATMAN: THE DARK KNIGHT
RETURNS”;
Discordo
totalmente
Discordo Nem
Concordo nem
Discordo
Concordo Concordo
totalmente
A tarefa levou mais tempo
para terminar do que o
esperado
X
A tarefa foi fácil de
completar
X
52
Fiquei frustrado ao tentar
completar essa tarefa
X
TAREFA: Achar a comunidade/fórum do site e fazer um post com a mensagem: “Batman: The
Dark Knight Returns it's amazing!”
Discordo
totalmente
Discordo Nem
Concordo nem
Discordo
Concordo Concordo
totalmente
A tarefa levou mais tempo
para terminar do que o
esperado
X
A tarefa foi fácil de
completar
X
Fiquei frustrado ao tentar
completar essa tarefa
X
TAREFA: - Se conectar/adicionar um usuário
Discordo
totalmente
Discordo Nem
Concordo nem
Discordo
Concordo Concordo
totalmente
A tarefa levou mais tempo
para terminar do que o
esperado
X
A tarefa foi fácil de
completar
X
Fiquei frustrado ao tentar
completar essa tarefa
X
TAREFA: Sair do sistema
Discordo
totalmente
Discordo Nem
Concordo nem
Discordo
Concordo Concordo
totalmente
A tarefa levou mais tempo
para terminar do que o
esperado
X
A tarefa foi fácil de
completar
X
53
Fiquei frustrado ao tentar
completar essa tarefa
X
Usuário 2
TAREFA: Criar um perfil e acessar o site.
Discordo
totalmente
Discordo Nem
Concordo
nem Discordo
Concordo Concordo
totalmente
A tarefa levou mais
tempo para terminar do
que o esperado
X
A tarefa foi fácil de
completar
X
Fiquei frustrado ao tentar
completar essa tarefa
X
TAREFA: Procurar e pontuar com 6 estrelas o quadrinho “BATMAN: THE DARK KNIGHT
RETURNS”
Discordo
totalmente
Discordo Nem
Concordo nem
Discordo
Concordo Concordo
totalmente
A tarefa levou mais tempo
para terminar do que o
esperado
X
A tarefa foi fácil de
completar
X
Fiquei frustrado ao tentar
completar essa tarefa
X
TAREFA: Achar a comunidade/fórum do site e fazer um post com a mensagem: “Batman: The
Dark Knight Returns it's amazing!”
Discordo
totalmente
Discordo Nem
Concordo nem
Discordo
Concordo Concordo
totalmente
A tarefa levou mais tempo
para terminar do que o
esperado
X
54
A tarefa foi fácil de
completar
X
Fiquei frustrado ao tentar
completar essa tarefa
X
TAREFA: Se conectar/adicionar um usuário
Discordo
totalmente
Discordo Nem
Concordo nem
Discordo
Concordo Concordo
totalmente
A tarefa levou mais tempo
para terminar do que o
esperado
X
A tarefa foi fácil de
completar
X
Fiquei frustrado ao tentar
completar essa tarefa
X
TAREFA: Sair do sistema
Discordo
totalmente
Discordo Nem
Concordo nem
Discordo
Concordo Concordo
totalmente
A tarefa levou mais tempo
para terminar do que o
esperado
x
A tarefa foi fácil de
completar
x
Fiquei frustrado ao tentar
completar essa tarefa
x
Usuário 3
TAREFA: Criar um perfil e acessar o site.
Discordo
totalmente
Discordo Nem
Concordo nem
Discordo
Concordo Concordo
totalmente
A tarefa levou mais tempo
para terminar do que o
esperado
X
55
A tarefa foi fácil de
completar
X
Fiquei frustrado ao tentar
completar essa tarefa
X
TAREFA: Procurar e pontuar com 6 estrelas o quadrinho “BATMAN: THE DARK KNIGHT
RETURNS”
Discordo
totalmente
Discordo Nem
Concordo
nem Discordo
Concordo Concordo
totalmente
A tarefa levou mais
tempo para terminar do
que o esperado
x
A tarefa foi fácil de
completar
x
Fiquei frustrado ao tentar
completar essa tarefa
x
TAREFA: Achar a comunidade/fórum do site e fazer um post com a mensagem: “Batman: The
Dark Knight Returns it's amazing!”
Discordo
totalmente
Discordo Nem
Concordo nem
Discordo
Concordo Concordo
totalmente
A tarefa levou mais tempo
para terminar do que o
esperado
X
A tarefa foi fácil de
completar
X
Fiquei frustrado ao tentar
completar essa tarefa
X
TAREFA: Se conectar/adicionar um usuário
Discordo
totalmente
Discordo Nem
Concordo nem
Discordo
Concordo Concordo
totalmente
A tarefa levou mais tempo
para terminar do que o
esperado
x
56
A tarefa foi fácil de
completar
x
Fiquei frustrado ao tentar
completar essa tarefa
x
TAREFA: Sair do sistema
Discordo
totalmente
Discordo Nem
Concordo nem
Discordo
Concordo Concordo
totalmente
A tarefa levou mais tempo
para terminar do que o
esperado
X
A tarefa foi fácil de
completar
X
Fiquei frustrado ao tentar
completar essa tarefa
X
O segundo questionário abordou perguntas de cunho mais aberto, para obter respostas mais
informais acerca do problema. As respostas foram muito satisfatórias para expandir o
entendimento. Conseguimos ampliar os problemas que já havíamos coletado e ter mais certeza
do que podemos apresentar no site da Graphic Novels, afim de traçar o melhor resultado para
o projeto.
Como já conseguimos identificar as principais necessidades e pontos altos do problema
de design, podemos filtrar esses resultados e começar a estipular o que vai começar a ser
desenvolvido para o novo sistema. É importante salientar que analisar essas necessidades é um
processo difícil – já que esses problemas definem todos os próximos passos em seguida. Se essa
etapa não for bem conclusiva, o projeto ficará errado e todas as possíveis soluções não ajudarão
em nada o usuário. Dessa forma, e como já estão definidas as principais dores de usabilidade,
chegou a hora de definir os requisitos de navegação e configurar o conteúdo do site.
4.2.6 Estabelecendo requisitos
Os requisitos do projeto são definições das ações que serão tomadas para o
funcionamento do sistema baseado nas necessidades dos usuários. Os autores Preece, Rogers e
Sharp (2007; p. 224) explicam os requisitos através da seguinte citação: “Um requisito consiste
em uma declaração sobre um produto pretendido que especifica o que ele deveria fazer ou como
deveria operar.” É deixar as funções mais claras possíveis e desenvolve-las futuramente. Se
57
fossemos exemplificar um requisito para um e-commerce, poderíamos citar o carrinho de
compras em algum lugar estratégico do site, para fazer com que os usuários pudessem adicionar
os produtos a serem comprados. Se esse carrinho não está no site ou não é encontrado
facilmente, a experiência não funcionará corretamente e o usuário ficará frustrado com o
sistema. Para corroborar com as especificações de requisitos, os autores Cybis, Holz e Faust
(2007, p. 137) apresentam a “Especificação de requisitos de usabilidade”, apontando uma série
de pontos importantes que podem ser usados para definir tudo o que envolve os requisitos. São
eles:
▪ quem serão seus usuários diretos e indiretos e quais são as categorias de usuários para
quem o sistema será desenvolvido;
▪ quais os objetivos que cada categoria terá em relação ao sistema e como os usuários
deverão proceder para realizar seus objetivos;
▪ como será o ambiente técnico, físico e organizacional em que o sistema será operado;
▪ quais os requisitos para a interface e para a usabilidade do sistema;
Com essa série de pequenos pontos, os autores nos direcionam para qual caminho pode ser
seguido na busca de requisitos funcionais. É importante considerar todos os fatores para definir
especificações, mas sempre enfatizando que especificações de usabilidade e de interface são
coisas diferentes e precisam de uma visão diferente. Nesse contexto, Lowdermilk (2013, p.60)
aumenta o entendimento dos diferentes tipos de requisitos através da seguinte citação: “Um
requisito de usuário refere-se ao que o usuário necessita; um requisito funcional refere-se ao
que o aplicativo necessita.” Por isso, é importante diferencia-los.
4.2.7 Requisitos do usuário
Para definir requisitos é preciso voltar e pensar nos problemas que já encontramos no
site leagueofcomicgeeek.com. Ao utiliza-lo, uma série de “erros” em usabilidade foram
apontados. Dessa forma, para a Graphic Novels, o importante é criar um sistema que se afaste
dos erros que outros sistemas cometeram. As tarefas precisam ser mais intuitivas e dinâmicas e
o site precisa ser amigável para o usuário, afim de evitar que ele se sinta perdido ou irritado
utilizando. Com base em todos os dados, questionários e entendimento dos problemas, podemos
apontar uma lista com os requisitos do usuário com os seguintes itens:
▪ Facilidade para o entendimento do conteúdo: a ideia é mostrar a maior parte do
conteúdo do site sem pedir login para as pessoas. Dessa forma, ele pode navegar
pela maioria das páginas e ver o que ele representa sem precisar se conectar. Isso
facilita o entendimento e não força a criar uma conta para obter o conteúdo.
58
▪ Recurso de interação com outros usuários: a ideia desse projeto é fazer com que
diferentes tipos de pessoas que leiam e se interessem por quadrinhos possam
interagir de lugares distintos. Por isso, praticamente toda página terá alguém
falando sobre algum quadrinho lido para tentar introduzir o usuário para a interação.
Nomes de usuários que mais interagem aparecerão em algumas páginas afim de
tentar conectar essas pessoas.
▪ Sistema informativo: o site deve informar ao usuário onde ele está e o que ele pode
fazer. Esse é um dos maiores problemas do site que analisamos. Por isso, as páginas
devem descrever a sua funcionalidade e como o usuário pode voltar para páginas
anteriores ou ir para outras páginas do sistema. O feedback e informações devem
ser os mais claros possíveis.
▪ Navegação simples e baseada nas convenções: o site deve fornecer uma
navegação simples e prática. Nada de inventar funcionalidades que sejam difíceis
de entender ou de usar. O projeto se baseia nas convenções estabelecidas da internet
para facilitar a interação entre humano e software. Dessa forma, o usuário terá
facilidade de passear entre todas as opções.
▪ Conteúdo em português: a maior parte dos sites que fazem esse tipo de serviço
está me inglês. Isso se torna uma barreira para usuários brasileiros. No teste de
usabilidade, esse problema foi apontado como um dos principais. Assim, para que
o entendimento seja ampliado, todo o site será em português.
Os requisitos de conteúdo são todas as prioridades que os usuários reivindicaram através
dos testes, pesquisas e questionários. Com esse tipo de informação, torna-se mais fácil
desenvolver um sistema que se adapte as pessoas e impedindo que o contrário aconteça.
Principalmente para o usuário entender o que vai acontecer nos próximos passos, assim como
afirma Lowdermilk (2013, p.62) através da citação: “Se você estiver trabalhando para um grupo
de usuários ou clientes específicos, então a lista dos requisitos funcionais poderá ajudar a
comunicar aos usuários o funcionamento de seu processo de desenvolvimento”.
4.2.8 Requisitos da interface
Os requisitos da interface são os direcionamentos visuais que a interface precisa conter
para a melhor experiência com o usuário. O design de interação está diretamente ligado nessa
etapa, pois ele é quem faz essa ligação entre pessoas e sistema. Para expandir os conhecimentos
sobre esses requisitos é importante conhecer as funcionalidades do sistema e pra que cada uma
59
delas serve. Assim, podemos criar requisitos válidos. As definições para a interface podem se
dividir em:
▪ Minimalismo: para que cada coisa fique no seu lugar, o site terá uma estética
minimalista e prezando o conteúdo, utilizando apenas informações que sejam
válidas para o sistema. Tudo o que não for relevante e preencha o layout, não
será utilizado.
▪ Feedbacks funcionais: como o sistema tem diversas informações, o conteúdo
precisa comunicar bem as pessoas o que elas estão fazendo. Seja a página que
elas estejam acessando ou se clica em alguma imagem ou link. Elas precisam
ser informadas rapidamente do que aconteceu após cada ação realizada.
▪ Divisão de sessões: por causa das várias informações presentes, as sessões do
site precisam ficar claras. Para isso, tudo precisa estar bem dividido e informado
para que eles consigam passear por todos os menus sem ficarem confusos.
▪ Hierarquia de informações: os 3 níveis de informações estarão alinhados
dentro do sistema. O que o usuário precisa ver primeiro, o que precisa ver em
segundo e o que precisa ver em terceiro. Cada uma das páginas terá esse tipo de
distribuição ajudando na compreensão das coisas.
▪ Tipografias funcionais: a família tipográfica precisa condizer com a proposta.
Ela precisa ser bem explorada para as variedades de pesos de informações do
sistema. A presença de hierarquia para títulos, subtítulos e textos são coisas que
serão abordadas.
▪ Interação entre menus: cada nova página do sistema será integrada com
páginas de acesso a outras informações. Por exemplo, a home do site dará acesso
a outras páginas sem necessariamente ter que usar o menu para isso. Estará
integrada na navegação. Isso permite com que os usuários passem mais tempo
usando a interface e interagindo com outras pessoas – que é um dos princípios
do projeto de design.
Os requisitos de interface são caminhos práticos a serem seguidos para o melhor tipo de
experiência com a interface. É imprescindível que esses elementos sejam bem projetados e que
sejam de fácil percepção para as pessoas que o usarão. Todas essas especificações são baseadas
nos princípios de usabilidade e precisam ser adotados na formatação do sistema. Por fim, como
já definimos o os principais requisitos, podemos partir para a etapa dos primeiros passos de
desenho da interface. Essa fase fornecerá os caminhos para se usar o site, assim como o fluxo
de usabilidade e as apresentações das informações.
60
4.3 ESTRUTURA
Ao entrarmos nessa fase, saímos um pouco dos planos das ideias e definição de
estratégias e partimos para os primeiros sketches de como trabalharemos as informações e o
esqueleto do site. Essa etapa é muito importante para mapear os caminhos que os usuários vão
percorrer, o que ele vai ver, como irá realizar as ações e uma série de outros pontos que serão
recorrentes no processo de UX. A estrutura também é responsável por estruturar o fluxo de
navegação do usuário pelo sistema, criando um organograma que seja funcional para o que as
pessoas estão buscando. Esse conceito é de suma importância para testarmos se os dados
coletados nos requisitos estão de acordo com o público ao qual o site se destina.
O pilar da estrutura tem duas bases para a sua formação: design de interação e
arquitetura da informação. Um é dependente do outro e precisam funcionar bem para o
desenvolvimento da plataforma. De forma simples, o design de interação é definido pelas
aplicações dos fluxos de tarefas e funcionalidades do site, explanando como o usuário vai se
comportar no sistema. A arquitetura de informação, é a estrutura do conteúdo que precisa estar
inserido no site, para a facilidade de entendimento do usuário. Nessa perspectiva, Garret (2002,
p. 81) afirma a importância dos campos de estudo para o UX através da seguinte frase:
“O design de interação e arquitetura de informação compartilham uma ênfase na
definição de padrões e sequências em que as opções serão apresentadas aos usuários.
O design de interação diz respeito às opções envolvidas executando e completando
tarefas. Enquanto arquitetura de informação oferece as opções envolvidas na
transmissão de informações para um usuário” (tradução nossa).
Assim, os dois campos dispõem de um valor inimaginável para a compreensão das
informações e fluxo. Por serem disciplinas altamente técnicas, todas as metodologias se
consistem no entendimento da personalidade do usuário, seus anseios, principais necessidades
e o seu comportamento. Se isso for bem entendido, a experiência será bem projetada.
4.3.1 Aplicando o design de interação
Como o nome já sugere, a interação é o relacionamento entre interface e pessoas,
sugerindo como funciona um relacionamento comum - onde um entende o que o outro expressa.
A ideia é que um responda ao outro de forma a criar uma experiência funcional e mais clara
possível. Garret (2002, p. 81), define em poucas palavras o que significa o termo: “O design de
interação está preocupado em descrever o possível comportamento do usuário e definir como o
sistema irá acomodar e responder a esse comportamento” (tradução nossa). Todo produto
61
digital precisa ser o mais eficaz e eficiente possível, precisa antecipar os pensamentos das
pessoas, fazendo o seu trabalho serem realizados mais facilmente.
Por muito tempo, a web foi regida por sites que não se preocupavam com a experiencia
e o comportamento dos usuários, mas apenas por definir funções para os sites e esperar que as
pessoas pudessem identificar essas funções ao utiliza-lo. Hoje, com o aprimoramento das
necessidades e dispositivos, guiar e apresentar ao usuário o caminho que pode seguir são
funções que criam contextos funcionais de usabilidade.
Entender o comportamento do usuário é essencial para criar uma navegação de interface
agradável e funcional. Para isso, é primordial que conheçamos as convenções que a própria web
desenvolveu. Ao entender esses princípios, poderemos projetar um site que tenha empatia com
o usuário. Como já falado antes, desenvolver um site que seja totalmente novo em questões de
layout pode não ser a melhor escolha – já que o conhecimento de como um site funciona já está
definido na cabeça das pessoas. Elas já têm um modelo mental de que a logo fica no lado
esquerdo, dos tipos de menus existentes (de lista horizontal e hambúrguer), que a maioria dos
sites são divididos por sessões, entre outros exemplos. Nessa perspectiva, Krug (2008 –
reimpressão, p. 34) afirma o seguinte: “Todas as convenções nascem como uma brilhante ideia
de alguém. Se essa ideia funcionar suficiente bem, outros sites a imitam e acaba que um número
suficiente de pessoas a veem em um número suficiente de lugares para que não seja necessária
uma explicação sobre ela”. Nos apoiando nessa lógica, o sistema terá uma navegação simples
e baseada em diversos modelos mentais que o usuário já tem estabelecido e tentando abordar
pontos estratégicos de informação.
4.3.2 Arquitetura da informação
A AI (arquitetura da informação) é de maneira simples a forma de esquematizar os
conteúdos que aquele sistema terá. Com a quantidade de informação que temos acesso hoje,
priorizar o que é relevante para o usuário é extremamente importante para o entendimento do
sistema. Nessa perspectiva, as autoras Camargo e Vidotti (2010, p. 327) definem o termo da
seguinte forma: “A arquitetura da informação oferece um conjunto de procedimentos
metodológicos para auxiliar desenvolvedores nos processos de organização, armazenamento,
representação, navegação, recuperação, apresentação e distribuição e disseminação da
informação”. Assim, todas essas informações que um sistema tem para apresentar precisam ser
organizadas e bem distribuídas. A soma de imagens, textos e outros elementos precisam ocupar
bem a tela, de modo que tudo isso seja harmonioso e entendível.
62
A AI controla parte da experiencia que o usuário vai ter ao utilizar o site. Positivo ou
não, o acesso a essas informações e a forma de interação são pontos fundamentais para a
usabilidade. Revigorando essa ideia, as autoras Camargo e Vidotti (2010, p. 329) acrescentam
com a seguinte frase: “A AI oferece informações que auxiliam no desenvolvimento e na
utilização de ambientes informacionais digitais, a fim de aumentar a usabilidade e facilitar a
interação usuário-sistema”. Nesse sentido, é fundamental o esquema que seja intuitivo para a
apresentação dessas informações. O conteúdo que vai ser apresentado precisa causar impacto
no usuário, tanto para entendimento, como para filtrar o que ele quer ver ou não. Nessa
perspectiva, D’andréa (2006, p.4) afirma os conceitos e passos para se estipular a AI de um
sistema através da seguinte afirmação: “especificar como o usuário pode encontrar as
informações, definindo a organização, navegação, classificação e mapeando o site”. Portanto,
percebemos a importância de sequenciar essas informações e apresentar ao usuário tudo o quer
for relevante.
4.3.3 Organizando os conteúdos e desenvolvendo organogramas
Com todo o background de pesquisa e entendimento do usuário que já temos, podemos
ir definindo as principais funcionalidades e fluxo de informação que o sistema irá utilizar.
Estruturar o conteúdo é uma tarefa difícil - já que ele precisa ser pontual em todos os seus
sentidos, facilitando o usuário a encontrar as informações que ele deseja de forma eficaz e
eficiente. Para embasar de forma mais clara o papel da estrutura de conteúdos e AI, Garret
(2002, p. 89) acrescenta: [...]”as arquiteturas de sites são frequentemente chamadas para fazer
mais do que apenas ajudar as pessoas a encontrar coisas; em muitos casos, eles têm que educar,
informar ou persuadir os usuários” (tradução nossa). Dessa forma, as informações apresentadas
necessitam estar na mesma sintonia dos anseios das pessoas que o utilizarão.
Uma das formas mais práticas de determinar os conteúdos é estabelecer hierarquias para
o fluxo de transição entre cada um dos menus. Para isso, é necessário mapiar o que é mais e
menos importante, o que precisa ser apresentado primeiro, segundo e em terceiro plano, e como
isso irá interferir na experiência. Para isso, precisamos voltar ao que já foi abordado
anteriormente: qual a principal função do sistema? Quais as necessidades os usuários mais
apontaram? Ao responder essas perguntas, já expomos o que o sistema precisa propiciar. Como
nosso maior foco é fazer as pessoas catalogarem seus quadrinhos e interagirem com outros
usuários, todo o sistema terá opções que proporcionem esse resultado. Para sintetizar as
estruturas de navegação, o sistema apresentará as seguintes páginas de distribuição de conteúdo:
63
• INÍCIO: O primeiro contato com o sistema. Nessa página, estarão quadrinhos mais
lidos da semana que são uma amostra do que os leitores estão lendo, esses
quadrinhos serão apresentados de acordo com algoritmos que irão mapiar o site e
ver as HQ’s com mais movimento; descrições das funcionalidades que o site terá;
quadrinhos recém comentados por outros leitores – para fomentar a interação entre
as pessoas; novidades sobre os quadrinhos com atualizações sobre o universo e por
último, uma lista de quadrinhos que foram criadas por leitores com temas e gêneros
definidos por eles mesmo.
• QUADRINHOS: Essa página é responsável por sintetizar todas as informações
sobre os quadrinhos. Por isso, ele é constituído por 3 subpáginas: Coleção,
Prateleira e Quero ler. Cada uma dessa páginas tem uma funcionalidade diferente.
O menu Quadrinhos, tem o papel de sintetizar todas essas informações sobre HQ’s
e alocar as subpáginas. O menu Coleção diz para o usuário quais quadrinho ele já
leu. O menu Prateleira é responsável por estipular as revistas que a pessoa já
comprou. E o menu Quero ler, apresenta os itens de leitura que se ainda não foram
lidos.
• NOVIDADES: Apresentará notícias, novos quadrinhos e o que está acontecendo
no mercado. Todas as informações nesse menu serão listadas uma a baixo da outra.
• LISTAS: Aqui, todas as listas criadas por leitores serão mostradas e estarão ao
alcance de todos os usuários do sistema. Essas listas são baseadas em gostos pessoais
e criadas para gerar a interação maior de pessoas que gostam daquele determinado
grupo de revistas.
• USUÁRIO: Painel de configuração de perfil, quantos HQ’s lidos essa pessoa tem,
quantos quer ler, nome de usuário, foto do perfil e outras informações.
• QUADRINHOS FECHADOS: Ao clicar em um quadrinho, o usuário será
direcionado para essa página que contém todas as informações sobre a edição, notas,
quem já leu, capas, autores e outras informações. Além disso, uma sessão de
comentários que chamamos de Discussão será usada para fazer os leitores criarem
um fórum sobre a edição contando suas opiniões.
Todas essas informações de menu serão aprofundadas no próximo capítulo, mas aqui,
começamos a entender o fluxo de informação e menus bases para o sistema. É interessante
observar que essa é a primeira versão, ou seja, uma versão beta do protótipo. Dessa forma,
64
várias dessas funcionalidades estarão em seu primeiro formato e poderão ser expandidas com
as próximas atualizações.
Para deixar visualmente claro os menus e a forma de navegação, a principal técnica
usada para descriminar isso são os fluxogramas. Eles são a representação gráfica de um
processo que definem como as etapas se conectam através de desenhos. Cada passo está
interligado com outro para fazer as pessoas seguirem de acordo com suas necessidades. Garret
(2002, p. 101) indica a importância do fluxograma para o entendimento das pessoas envolvidas
na seguinte afirmação: “Representar a estrutura visualmente é a maneira mais eficiente de
comunicarmos os ramos, grupos e inter-relações entre os componentes do nosso site” (tradução
nossa). Como já definimos os menus bases, criaremos o fluxo entre eles para um melhor
entendimento.
Figura 15 - Fluxograma de segundo nível.
Essa será a estrutura de navegação da Graphic Novels. A estrutura é de até segundo
nível para as funcionalidades básicas estabelecidas. É importante esclarecer que o fluxograma
não mostra todas as funcionalidades do software, mas o diagrama de navegação entre as
páginas. Os próximos capítulos expandirão mais a relação das funcionalidades do sistema.
4.4 ESQUELETO
Essa é a etapa do projeto que definimos o esquema básico das páginas. Agora, além de
inserirmos o fluxo de informações, adicionamos os componentes estruturais de cada menu e
objeto de interação do site para mapear a navegação. Esse capítulo apresentará o design de
informação (DI) e o primeiro nível de estrutura entre esses elementos. A inserção de detalhes,
65
botões e formas já podem ser configuradas para aproximar o usuário mais perto do produto
final. O esqueleto reúne a interface, o design da navegação do sistema e DI dos conteúdos
Garret (2002, p. 108). Nessa perspectiva, reunir esses 3 elementos de forma harmoniosa é o
princípio básico para uma experiência agradável. Garret (2002, p. 109), complementa essa ideia
através da frase: “Um bom design de navegação não corrige um design de informação ruim. Se
não podemos dizer a diferença entre os tipos de problemas, não podemos dizer se realmente os
resolvemos” (tradução nossa). Assim, compreendemos que muito mais do que os outros
processos, esses precisam estar em conjunto.
4.4.1 Design de Interface
O design de interface reúne todas informações do sistema, acrescentando imagens,
textos, ícones e outros recursos visuais para a integração dos elementos. Organizar essa
quantidade de itens requer uma devida atenção dos projetistas para trazer clareza em cada uma
das sessões. Para que a interface funcione, se faz necessário priorizar o que precisa ser
apresentado. Uma interface que entende o usuário e faz com que sua necessidade seja resolvida
de forma fácil é o que cria a empatia de uso. Como já abordado, os princípios de usabilidade
são baseados em convenções de uso que as pessoas já têm. A interface é a camada em que o
usuário tem contato. Ela precisa estar pronta para que todas as especificações das pessoas
possam ser resolvidas.
4.4.2 Design de Navegação
O design de navegação é a amarração entre os vários menus e opções do sistema. A
consistência de um link ou botão que funciona está diretamente ligado a ela. Fazer a ligação de
todas essas páginas, funcionalidades e diretrizes é o principal propósito da navegação de
qualquer sistema. Uma interface pode ser visualmente bonita, mas se sua navegação não
funcionar corretamente, toda a estética não valeu de nada. Para Garret (2002, p.118-119), um
bom design de navegação gira em torno de 3 pontos:
• Funcionalidade: Para dar segurança aos utilizadores do site, todas as páginas precisam
se conectar e atribuir funções válidas entre elas.
• Consistências de elementos: Tudo o que estiver no sistema precisa fazer sentido para
o usuário. Não adianta usar de artifícios que não tenham relação com o público-alvo.
Nessa perspectiva, uma hierarquia do que é mais importante e menos importante precisa
ser feito e as pessoas precisam saber identificar o que elas podem usar e o que não.
66
• Relação entre conteúdo e usuário: tudo o que for descrito no sistema precisa dar
opções de uso para as pessoas. Se elas estão em uma página, o usuário precisa saber
quais meios serão mais práticos para resolver suas necessidades.
A navegação é o elo que une todos os outros conteúdos das páginas e possibilita ao usuário a
confiança para a interação com o sistema.
4.4.3 Design da informação
O design de informação (infodesign) é a forma de apresentação de um determinado
conteúdo. Não apenas textos, mas imagens e desenhos também. A forma de como se fala com
o público e o seu entendimento sobre essa comunicação é o principal conceito do infodesign.
De acordo com Lipton (2007, p. 1), design da informação significa “o estudo e prática de se
trazer clareza e compreensibilidade a produtos visuais voltados a orientar, ensinar, explicar ou
informar” (tradução nossa). Com essas afirmações, percebemos o quão é importante o tom da
comunicação que dita o objeto de design ao qual estamos nos referindo. Ao utilizar o design de
informação, a linguagem usada é percebida com mais facilidade pelo público alvo, criando um
engajamento entre emissor e receptor. Ela aprimora os princípios de interface visual e o
conteúdo para passar a mensagem.
4.4.4 Wireframes
Como já entendemos os princípios básicos do esqueleto, chegou a hora de representar
todos esses conceitos através da prototipagem de baixa fidelidade através dos wireframes. Para
Teixeira (2014, p. 41), wireframes podem ser definidos por: “desenho básico da estrutura de
determinada interface que demonstra de forma simplificada como o produto final deverá
funcionar”. Esse desenho, como descrito pelo autor, não é o final e serve apenas para ilustrar o
funcionamento das opções que o sistema irá implementar. É muito importante esse passo do
projeto, pois facilita com que o time de desenvolvimento tenha ideia das possibilidades de uso.
São esses esquemas que abrem caminho para o protótipo final.
Nessa perspectiva, Teixeira (2014, p. 44), afirma quais fatores são importantes para que
um wireframe funcione perfeitamente, entre eles estão:
• Os objetivos de negócios do cliente, que normalmente são passados no início do projeto
em formato de briefing;
• Os requisitos técnicos do sistema – seja um novo sistema ou um sistema legado;
• O conceito criativo do produto;
67
• As boas práticas conhecidas de usabilidade e navegação;
Uma vez que todos esses e outros fatores estão bem definidos, o wireframe pode começar a ser
desenvolvido para os primeiros testes. Uma coisa boa dessa fase é que muitas destas funções
que estão sendo usadas serão aplicadas no produto final. Claro, isso depende do relacionamento
do usuário com o protótipo, mas geralmente muito do que foi feito nessa fase, estará nos
próximos passos.
Não é necessário preparar todo o layout final, com cores, botões e imagens para esse
primeiro esquema. O time pode fazer um layout de marcação com as principais funções e
colocar pra o teste. Dessa forma, o usuário entra em contato com aquele produto, identifica o
que funciona ou não e aponta essas possíveis falhas. Como não é o produto final, alterações e
novas estruturações do conteúdo podem ser feitas sem muito problema. Todo esse processo é
mais uma facilidade para o desenvolvimento, pois cria uma interação necessária para o produto
final. Sendo assim, apresentaremos imagens do wireframe da Graphic Novels com as principais
funcionalidades das páginas de navegação do produto.
Figura 16 - Wireframe HOME - Sessão 1
68
Esse é o esquema de navegação da tela inicial do site. Nela, estruturamos as principais
informações para o contato com o usuário. É importante salientar que essa tela aparece após o
login. Sendo assim, as pessoas já têm uma conta no site e esse é o primeiro contato dela após
esse processo. Os principais acessos para outras páginas e outros conteúdos do site estão
localizados nessa tela, facilitando a interação. Para uma abordagem mais profunda,
apresentaremos com detalhes cada uma das sessões, explicando suas funcionalidades e formas
de interação.
Essa é a primeira sessão do site. Pra começar, fizemos uma página mais compacta e com poucas
informações. A página compreende menos funções e tem um acesso mais prático à informação.
Nessa lógica, os menus são apontados nessa ordem: Início, Quadrinhos (que contém
subpáginas para acesso a Coleção, Prateleira, Quero ler – serão explicados mais a frente),
Novidades, Listas, barra de pesquisa e Usuário. Esse tipo de optimização, facilita o acesso a
informação, apresentando os conteúdos de uma forma mais clara. Logo abaixo, no
H1(especificação de HTML para títulos mais fortes), temos a chamada “O que as pessoas
andam lendo”, que sintetiza o que as pessoas leram ultimamente. Essa medida é feita através
de algoritmos que capitalizam essas informações para apresentar aos usuários. Cada quadrinho
tem um quantitativo de porcentagem que indica o quanto de relevância ele possui. Quando
acontece o acesso a um quadrinho, uma classificação pode ser dada para ele. Exploraremos isso
mais a fundo novamente.
Figura 17 – Wireframe HOME - Sessão 1
Figura 16 - Wireframe da HOME.
69
Logo abaixo, temos o título “CATALOGUE SEUS QUADRINHOS E ENCONTRE
AMIGOS”, uma frase que sintetiza bem o objetivo do site. Abaixo dela, estão algumas tag’s de
direcionamento do que é permitido aos usuários. Dessa forma, o usuário é informado sobre as
possibilidades que o sistema possui para suas necessidades. Nela estão 3 ícones, seus títulos e
descrições para cada uma dessas funções abordadas.
Figura 18 - Wireframe HOME - Sessão 2
Nessa segunda sessão, como forma de fazer os usuários interagirem mais, temos os mais
recentes comentários de amigos sobre os quadrinhos. No H1, temos o título “VEJA O QUE
ACONTECE AGORA NA GRAPHIC NOVELS”, que sintetiza os comentários dos amigos
sobre quadrinhos que eles leram, com a intensão de fazer o usuário participar da discussão e
comentar sobre a HQ também. Do lado de cada quadrinho, tem o nome, capítulo e o comentário
da pessoa. Abaixo disso, o nome e número de “likes (quantitativo de pessoas que gostaram)”
que esse comentário recebeu. Achamos essa medida mais prática porque não precisa
necessariamente de ícones e prioriza as informações através de texto – trazendo mais
entendimento sobre o que está acontecendo.
No lado direito, temos as NOVIDADES. A intenção do site é também informar sobre
acontecimentos sobre as comic’s (quadrinhos). Trazer notícias de editoras, quadrinistas e novos
quadrinhos para sintetizar mais esse conteúdo e manter as pessoas atualizadas. Entendemos que
a plataforma pode funcionar como uma referência nesse sentido – além de seu principal
70
objetivo, e até para criar um relacionamento maior com o público do sistema, fazendo com que
eles se envolvam ainda mais com o produto digital.
Figura 19 - Wireframe Home - Sessão 3.
Na última sessão da Home, temos as listas. Uma forma de fazerem os usuários
interagirem ainda mais com suas criações e o feedback das pessoas sobre a lista. Quando os
usuários vão classificando a lista como boa ou ruim, ela vai criando um percentual que vai
definir se ela aparece nessa primeira tela.
Esse foi a versão dos wireframes em média fidelidade do home do site. Como o
importante é priorizar o conteúdo, abordamos essa estratégia mais sofisticada e bem
hierarquizada para catalogar as informações que o usuário pode ter acesso ou não. Toda essa
estrutura foi pensada para facilitar o entendimento do usuário sobre o que está acontecendo.
A seguir, o wireframe do menu QUADRINHOS.
71
Esse menu tem subpáginas com mais 3 itens. Ao clicar no menu “QUADRINHOS”, a página
dará acesso para todos esses menus de forma mais compacta, para apresentar as informações
dos outros menus sem necessariamente fazer o usuário ir para lá. Dessa forma, o resumo de
toda essa estrutura se encontra em um mesmo local. Apesar de ter um pouco mais de
informação, todo o conteúdo está separado e hierarquizado para facilitar o entendimento para
as pessoas. Assim, tudo o que o usuário quiser ter acesso, estará disposto na página
separadamente.
Figura 21 - Wireframe Quadrinho - Sessão 1
Figura 20 - Wireframe Quadreinhos..
72
A primeira sessão da página também apresenta os quadrinhos mais populares na semana,
aqueles que mais tiveram movimento. Uma coisa diferente de outras páginas, é que nessa, o
usuário pode filtrar como ele quer ter acesso ao conteúdo. Através das opções “Editoras” – que
pode filtrar esses quadrinhos pelas proprietárias, ou por “Gênero” – que identifica se é um
quadrinho de herói, horror, aventura, ficção e outros. Outra possibilidade é a busca limitada.
Na opção de buscar, definida através do ícone encontrado no menu, o site possibilita acesso
para todo seu conteúdo. Dessa forma, as palavras chave usadas ali, podem servir para qualquer
coisa escrita na plataforma. Já nessa pesquisa mais limitada no canto direito, o usuário pode
realmente pesquisar apenas por títulos de quadrinhos, limitando o campo de busca e facilitando
o acesso.
Figura 22 - Wireframe Quadrinhos - Sessão 2
Na segunda sessão, vemos um pouco de alguns comentários mais recentes, como em
páginas anteriores, mas com a diferença que no lado direito existe a Prateleira do site. A
Prateleira é o recurso que define quais quadrinhos a pessoa quer comprar. Ela já pode ter feito
a leitura, mas ainda assim, quer comprar para ter posse em mãos. Esse recurso é utilizado para
quem tem muitos quadrinhos e pode vim a esquecer os volumes, por isso, adicionamos essa
opção para as pessoas não comprarem quadrinhos repetidos. Essa especificação foi bem
73
apresentada nas pesquisas e conversas com o público alvo do produto, principalmente quando
conversamos com leitores de mangás.
Figura 23 - Wireframe Quadrinhos - Sessão 3
Na última sessão, temos a Coleção – que são os quadrinhos que o usuário tem posse.
Abaixo, temos a sessão dos quadrinhos que ele quer ler. Do lado direito, temos pessoas que o
site sugere para amizade/seguir. Como uma das propostas do sistema é a interação, essa função
tem esse propósito. Abaixo de cada um deles, tem um ícone de quantos quadrinhos essas
pessoas já leram e quantos elas avaliaram como preferidos. Esses marcadores são importantes
pra dizer qual o nível de leitor de quadrinhos a pessoa é.
No menu “NOVIDADES”, estará disposto notícias sobre o universo dos quadrinhos. A
proposta é criar um relacionamento com os usuários além das funções do site. Ele vai servir
para ser um referencial em informações. As notícias apresentadas nessa página são do site
universohq.com.br e servem apenas para ilustrar como seria esse tipo de conteúdo.
74
O menu NOVIDADES é mais um recurso para criar interação entre sistema e usuários. Dessa
vez, com o propósito de criar um relacionamento com eles. As atualizações dessas informações
serão feitas pelos integrantes do sistema. Além de propiciar esse relacionamento, esse menu é
um diferencial a mais dos possíveis concorrentes, pois não se resumem apenas em catalogar
quadrinhos, mas se compromete com outras etapas de relacionamento.
Figura 24 - Wireframe Novidades
75
Figura 25 - Wireframe Novidades - Elementos da página
As notícias aparecerão com uma imagem de chamada do lado. Um pequeno resumo e
data da notícia também estará a amostra para informar aos leitores do período da informação.
Abaixo, continuarão os ícones de comentários e o like. A primeira, informará quantas pessoas
já falaram sobre o assunto e a segunda, a quantidade de pessoas que gostaram daquela
informação. Esse já é um recurso muito utilizado em outros sistemas, mas que se adequa ao
nosso projeto muito bem. No lado direito, continuam os comentários mais recentes de pessoas
que você segue, como forma de fazer as pessoas se integrarem.
76
Figura 26 - Wireframe Novidades – Elementos da página 2
No lado direito, seguem as indicações de amigos para os usuários. Esse elemento se repete em
algumas páginas, mas consideramos importante mantê-lo afim de aproximar mais e mais
pessoas com gostos de leitura parecidos.
A seguir, a página de usuário.
Figura 27 - Wireframe Usuário
77
A construção dessa página foi um pouco mais difícil devido a infinidade de páginas de usuários
já adotadas na web. Projetar uma página com um funcionamento um pouco diferente de outras
várias considerou um tempo maior de pesquisa e aprofundamento nos requisitos do usuário. O
infodesign foi de grande importância para priorizar o que precisava está ou não como conteúdo.
A divisão de informações, a prioridade e a forma de apresentação foram remodeladas várias
vezes pensando em como o usuário poderia ter acesso com o menor índice de desentendimento
possível. Ainda é cedo para definir se essa foi a melhor solução, pois ainda precisamos do teste
de usabilidade, mas o resultado, pelo menos por agora, parece ser o mais viável para a
experiência funcionar bem. A seguir, a resolução de cada item da página de acordo com as
perspectivas do usuário.
A página conterá todas as informações e atividades recém feitas na plataforma.
Comentários, novas amizades, quadrinhos lidos recentemente, onde se destaca, quais
quadrinhos tem, quantos quer ler, quantos já leu, quantas pessoas segue, biografia, redes sociais
e outros elementos informativos sobre a personalidade da pessoa serão descritos dentro da
plataforma.
Figura 28 - Wireframe Usuário - Elementos da página
Para começar, o nome da pessoa e abaixo o nome de usuário. Depois, a idade e local
onde esse indivíduo mora. As redes sociais Twitter e Instagram também foram incluídas. Essa
opção não é obrigatória e o usuário pode colocar se desejar. Esse recurso foi usado para dar um
caráter mais pessoal no contato dos integrantes da plataforma. Logo após, temos a biografia –
que é um curto resumo sobre a personalidade da pessoa. Essa característica também é opcional.
Continuando, temos os itens pessoais. Essa lista é a soma de tudo o que foi construído
no sistema desde de seu primeiro contato. No item QUADRINHOS LIDOS, estão dispostos os
quadrinhos que a pessoa leu e catalogou no site. MINHA COLEÇÃO apresenta os quadrinhos
que a pessoa tem adquirido em sua casa. QUADRINHOS FAVORITOS são os preferidos
escolhidos por eles. O item NA PRATELEIRA são os quadrinhos que o usuário quer comprar
- servindo como
78
uma lista de interesses. O item QUERO LER são os HQ’s que a pessoa tem interesse em
consumir. As LISTAS são as que o usuário criou e compartilhou para a rede. E por último, os
seguidores dentro do site – pessoas que se conectaram e visualizaram as atualizações do usuário.
Figura 29 - Wireframe Usuário - Sessão 2
Na figura 29 temos a sessão que fica abaixo do histórico do sistema. Nela, são mostrados
os quadrinhos lidos recentemente e um grupo do lado o selo indicando o gênero que o usuário
se destaca. Nesse caso, se ele/ela já leu mais quadrinhos de Super Herói e de Terror, essa
classificação é medida através da quantidade de volumes lidos. Por exemplo, se uma pessoa leu
500 HQ’s de super-herói, ela é classificada como destaque naquela categoria. Existem os
subníveis que podem ser alcançados. Com 500 HQ’s lidos, o leitor se destaca em “Super Herói
Júnior”, e com a leitura de mais quadrinhos, vai avançando de nível. Ao todo são 5 níveis
divididos nas seguintes categorias: Júnior, com 500 HQ’s lidas; Mega, com 2000; Premium,
com 5000; Sênior, com 10000 e Ultra acima de 100000. Parecem números altos, mas com a
quantidade de sagas que saem todos os meses, esses números podem ser alcançados de forma
rápida.
Esse sistema de classificação do leitor é uma oportunidade para recompensa-lo por acessar e
catalogar seus quadrinhos. Dessa forma, quanto mais ele realizar a ação de que o sistema se
propõe, mais o seu nível de usuário aumenta. A ideia é incentivar ainda mais o relacionamento
com o sistema, viabilizando pequenos prazeres para as pessoas que acessam todos os dias. Além
do fato de que quanto mais se ler, mais status aquele usuário terá com outros leitores.
Para finalizar a página, a última sessão.
79
Figura 30 - Wireframe Usuário - Sessão 3
Na última sessão da página, temos as conexões recentes e os últimos quadrinhos que ele
comentou. Essa última parte é mais simples e complementa a ideia de interação que o site se
propõe. Na parte de novas conexões, as pessoas que forem visitar um perfil específico, podem
ver se as conexões são comuns e assim, começar uma nova amizade partindo dessa ideia. Esse
conceito não é novo e já é bem utilizado em mídias sociais, mas nesse contexto de atividades,
pode ser bem alavancado para a experiência que as pessoas vão proporcionar ao utilizarem essa
página da Graphic Novels.
A seguir, a página fechada de quadrinho.
Figura 31 - Wireframe Quadrinho
80
Essa página do site representa os clicks que o usuário deu em um quadrinho qualquer. Todo o
seu volume de informação e a forma de comunicar esses elementos serão apresentados dessa
forma. A página específica de cada quadrinho é uma abordagem sobre tudo o que envolve esse
volume da série. A intenção é fazer uma espécie de gerenciador de como ele classifica a
qualidade do material e principalmente, como ele interage mais com o sistema. Através dessa
página, muito do que se diz respeito ao perfil da pessoa na plataforma pode ser construído. Com
tantas informações, foi extremamente mais complicado formular essa página. Visto que todo o
conteúdo relacionado precisa estar claro e entendível para quem acessa.
Essa primeira sessão é onde as principais informações são apresentadas. Na parte
esquerda, temos o título, edição e capa do quadrinho. Ao lado, temos as estrelas de classificação
– onde o usuário irá marcar o grau de qualidade dessa edição. A porcentagem será o esquema
de avaliação que iremos adotar. Invés de usar, em um exemplo hipotético, “3,5 Estrelas” de
classificação, como muitos sites já fazem, os quadrinhos serão classificados por números de
aprovação. Por exemplo, quando um usuário classifica uma revista com 2,8 estrela, por
exemplo, esse resultado vai sendo acumulado e somado com o que outros usuários falaram.
Assim, no final, todos esses números darão um resultado em porcentagem e o quantitativo de
Figura 32 - Wireframe Quadrinho - Section 1
81
pessoas que gostaram ou não disso, como no exemplo acima que diz”70 de 72 aprovam isso”.
Nesse caso, 72 pessoas avaliaram a edição e 70 delas deram notas máximas. Achamos que essa
forma de avaliar é mais prática e um pouco mais disruptiva e condizente com o perfil do público
e a proposta do site.
Ao lado da capa da HQ, temos data de lançamento, editora, preço sugerido, categoria
do quadrinho e os autores. A categoria é bem importante para definir o que os leitores mais
leem. Como falado antes, quando um usuário ler muito um determinado tipo de gênero, ele
começa a se destacar nele. Logo abaixo, temos a equipe criativa por trás da edição. Numa
próxima versão, a função de procurar por autores e editoras estaria formulada dentro do sistema,
por isso insistimos nessa ideia para deixar aberto a oportunidade. Também abaixo da capa,
temos as maneiras de monetizar a plataforma, que exploraremos nos próximos capítulos, mas
basicamente são opções que as pessoas podem ter para ler online - através de serviços de
streaming (um tipo de assinatura mensal para leitura de quadrinhos) ou comprar em lojas
especializadas da internet.
No lado direito, temos a classificação da HQ, que é onde as pessoas podem adicionar o
quadrinho para algum grupo. Ela pode adicionar para a coleção de leitura pessoal, colocar na
prateleira – que é quando quer comprar o produto, adicionar a categoria “quero ler”, e adicionar
a alguma lista, já criada ou não por ela. Abaixo dessa função, temos as pessoas adicionadas no
círculo de amizades que já leram essa edição. Essa função é apenas para criar mais interação
entre pessoas da plataforma.
Figura 33 - Wireframe Quadrinho - Section 2
Figura 33 – Wireframe Quadrinho - Section 2
82
Na figura 33, temos a continuação do que já foi falado anteriormente. No lado direito, temos a
opção de capas variantes. É comum nos quadrinhos as capas serem desenhadas por mais de um
artista. Dessa forma, a segunda capa está sendo apresentada para que os leitores possam ter
acesso, e se caso o sistema apresentar apenas uma capa, um botão de “adicionar capa” pode ser
utilizado para que o próprio usuário possa fazer inserir a capa ao quadrinho. Logo abaixo, temos
as edições anteriores da saga, assim as pessoas podem conferir o que aconteceu antes da edição
atual do quadrinho. No lado esquerdo, temos a opção de discussão sobre o HQ. Ela funciona
como um fórum sobre a edição. Esse “fórum” funciona em todas as HQ’s que aparecem no site.
Dentro de cada comentário, as pessoas podem responder e curtir se gostou da opinião falada.
Esse tipo de fórum é bem comum em sites com esse perfil, sendo também um grande
incentivador da troca de ideias e experiências acerca do universo dos quadrinhos.
A estrutura dos wireframes é superimportante para o entendimento do site pelos
usuários. Como as funções estéticas ainda não estão definidas, as pessoas tendem a verificar
mais as informações e estruturas proporcionadas pela experiência que ele produz. Esses
primeiros desenhos da interface já revelam muito de seu layout final, apesar de ser uma versão
mais para uma maior percepção. Teixeira (2014, p. 44), corroborando essa ideia, afirma que:
“Durante o processo de desenho de um wireframe, o profissional de UX precisa fazer uma série
de decisões que eventualmente informarão o layout do produto”. A metodologia de
implementar os wireframes são de grande valia para o time também, pois polpa tempo no
desenvolvimento.
Por fim, a estrutura de navegação do sistema já pode ser vista, assim como as informações e
interações que o site proporciona para quem acessa. O resultado das últimas imagens
apresentadas são das principais telas do sistema e para entender a navegação dos elementos. O
protótipo final irá apresentar um pouco mais de recursos, mas nada que fuja muito da estrutura
já desenvolvida até aqui.
4.5 DESIGN VISUAL
O design visual é o penúltimo escopo do projeto e é responsável por tudo o que o usuário
tem acesso dentro da experiência do produto, ou seja, é a superfície de tudo. É uma das fases
mais importantes pois coloca a prova tudo o que foi pesquisado nas fases anteriores de design.
Garret (2002, p. 133), afirma a importância dessa etapa no processo de desenvolvimento através
da seguinte expressão: “Aqui, conteúdo, funcionalidade e estética se juntam para produzir um
design que agrada os sentidos enquanto cumpre todos os objetivos dos outros quatro planos”
(tradução nossa). Toda a sensibilidade e interação do sistema ocorre nessa fase, por isso é
83
importante ter todos os antigos processos alinhados e bem estruturados, para que tudo funcione
corretamente. Claro, é importante considerar que o teste de usabilidade (última fase da
implementação) ainda dirá bastante sobre o desempenho desse sistema.
A organização de todos os elementos de conteúdo e arquitetura da informação, agora se
encontram com elementos do design para a unificação. Dessa forma, cores, grids, botões,
imagens e outros recursos visuais vão se apropriando das necessidades de projeto para um
resultado qualitativo entre usuários e sistema. Lowdermilk (2013, p.97), afim de explanar mais
a finalidade dos princípios e técnicas visuais, afirma que: “Ter um bom domínio dos princípios
de design e de modelos previsíveis pode ajudar você a criticar eficientemente o seu trabalho. É
a linguagem perfeita para expressar o que está correto ou o que está errado em design”. Se
apropriando das palavras do autor, entendemos que além de conhecimento, um pouco de
referências visuais e vivências na área são essenciais para a autoavaliação dos itens do projeto.
O design visual traz grandes desafios pois busca se apropriar de vários princípios e técnicas
para proporcionar a estética que seja fácil de entender, atrativa e que se manifeste sem
dificuldades.
Para isso, várias desses elementos e conceitos serão apresentados ao longo do capítulo, afim de
justificar todas as decisões de UI Design (Design de interface do usuário). É importante
salientar que UI Design é muito mais que apenas a forma estética, mas sim a interação que esse
conjunto de fatores da pesquisa se relaciona com o visual da interface.
Para apresentar todos esses recursos é preciso primeiramente apresentar outros
elementos corporativos da Graphic Novels. A logo e aplicações, paletas de cores e outros
recursos precisam ser previamente analisados e conceituados para que a interface se aproprie
disso no desenvolvimento de grids, botões, cores e o tom da comunicação. Assim, todos esses
estágios até o visual final serão configurados previamente.
4.5.1 A Logo
A logo é um grande elemento da marca. Através dela, as primeiras impressões sobre o
produto serão tiradas. Nesse sentido, Healey (2012, p.6), afirma o papel do logotipo como
integrante da marca através da seguinte citação: “Um logotipo funciona verdadeiramente como
um signo ou um pictograma, uma marca visual mais ou menos abstrata, referindo-se a uma
palavra”. Dessa forma, para a construção dessa logo, nos familiarizamos com a proposta do
site. Assim, de acordo com nossas percepções, a logo precisava ser simples e objetiva, sendo
extrovertida, confiável e que apontasse diretamente para quadrinhos. Não é tão simples
imaginar um logo com poucos elementos assim disponíveis, mas como já desenvolvemos boa
84
parte do projeto, os outros conceitos foram rapidamente se encaixando dentro da proposta. Uma
coisa importante a se considerar é que as aplicações da logo são mais propriamente para o meio
digital. Dessa forma, as fontes e formas utilizadas são para o entendimento nas mídias desse
formato.
A ideia era construir algo mais moderno e voltado para um público mais “descolado” que
o normal. Varia muito o perfil das pessoas que leem e acompanham quadrinhos. Vai de crianças
à idosos, várias idades e gostos... e ter uma marca que pudesse aproximar tantas pessoas é algo
mais complicado. Entretanto, conseguimos chegar em um resultado que consideramos
satisfatório. Como mencionado antes, as aplicações são, em sua maioria, para meios digitais,
por isso, escolhemos essa paleta de cores.
A tipografia é leve e divertida e tem um pouco dessas características de quadrinhos, o balão
com o contorno funciona para agrupar todos os elementos e também passar essa ideia mais
“cômica” do universo. A tagline “organize e catalogue seus quadrinhos” descreve bem o
propósito que o site se propõe. No site, não utilizaremos a tagline pelo ponto de vista que ficaria
pequeno para a visualização. Para as aplicações dentro da plataforma, usaremos as gradações
de cores da própria marca, como plano do design de interface.
4.5.2 Paleta de Cores
Como já abordado antes, as cores da logo se expandirão durante as aplicações no site.
Ou seja, as gradações de cores se perpetuarão em cada elemento construído. Nessa perspectiva,
Garret (2002, p. 145) faz a seguinte afirmação: “As paletas de cores de uma empresa são
Figura 34 - Logo Graphic Novels e variações
85
Figura 35 - Paleta de Cores
selecionadas especificamente para o quão bem eles podem trabalhar juntos, complementando
um a outra sem competir” (tradução nossa). Embasado nesse sentido e pensando em um
conforto visual melhor dos usuários, o site será projetado com tons mais escuros e informações
de texto com mais intensidade de luz para que assim, possamos destacar e hierarquizar os
conteúdos que os usuários vão ter acesso.
Para uma melhor aplicação, uma paleta de cores em tons cinza será a base da
composição. Para os backgrounds, barras, alguns botões e outros elementos, o cinza será
fundamental. Para informações com mais destaque, a paleta com tons azuis será utilizada, pois
visa dar mais atenção para determinadas informações. Como afirma Lowdermilk (2013, p.100):
“Tradicionalmente, itens com cores mais fortes ou contrastantes atrairão mais atenção”. É
importante salientar que o tom de cinza se encaixa com praticamente todas as cores, sendo um
elemento muito natural por sua neutralidade e conforto. Para afirmar um aprofundamento maior
nesses conceitos, tomamos por base o que afirma Garret (2002, p. 145): “Uma paleta deve
incorporar cores que se apresentam em uma ampla gama de usos. Na maioria dos casos, cores
mais brilhantes são usadas para o primeiro plano do seu design - elementos para os quais você
quer chamar atenção” (tradução nossa). As referências desse estilo já são usadas em grandes
sites como o do Medium, Spotify, LinkedIn e outros, que utilizam o cinza como predominância
e as cores de destaque para algumas informações.
Com o propósito de elevar o nível de entendimento de como as cores serão introduzidas
no conteúdo do site, construímos um esquema do comportamento das informações e seus
respectivos níveis de impacto visual, definindo uma hierarquia de destaque para umas
informações e menos destaque para outras.
86
Com esse curto esquema, a identificação dos elementos fica mais clara. Esse será o
padrão utilizado para o desenvolvimento do sistema. Percebemos que o conforto visual
apresentado nessa ideia pode aprimorar a experiência dos usuários da plataforma, além de
indicar os focos de mais destaque e suas subcategorias. Como todo o site apresentará muitas
capas de quadrinhos, e cada uma com diferentes cores e desenhos, o mais viável para o conforto
visual é que a estrutura do site fosse escura, além do fato que cores claras cansam a visão após
muito tempo de uso.
Os contrastes apresentados nesse esquema são de grande fundamento para que o design visual
funcione – tendo em vista que basicamente 60% de todo o conteúdo é em forma de texto.
4.5.3 Ícones
Os ícones são elementos essenciais para o design visual. Através deles, as pessoas
conseguem associar a informação que estão lendo a alguma figura. Além de orientar no
entendimento, eles são componentes importantes pra auxílio da navegação. Para a definição
dos ícones do site, foi preciso estar um pouco familiarizado com as convenções que a internet
já criou. Dessa forma, o entendimento de outros sites já utilizados pelas pessoas, se estendem
até esse com o uso de desenhos que já criam associação. Novamente vemos o modelo mental
se aplicando no entendimento da plataforma. Nos apoiando no conceito mais descontraído e
leve do site, resolvemos utilizar ícones com traços mais firmes e com poucas informações,
focando sempre na experiência. Não queríamos que os ícones tivessem um peso grande dentro
da navegação, já que o site já está com a arquitetura da informação bem estruturada, os ícones
tinham que agregar esse conceito sutil.
Figura 36 - Esquema do uso das cores na Graphic Novels
87
Com a linguagem de ícones definidas, suas aplicações se tornam mais práticas para o sistema.
Alguns deles são botões que desempenham funções, e outros são apenas ilustrativos para
facilitar o entendimento da informação em que está composta.
4.5.4 Tipografia
A tipografia é um importante elemento de qualquer projeto de design. Nas aplicações
digitais, esse elemento pode determinar uma boa ou má experiência. O uso pode passar conforto
ou incomodar os que tem acesso aquela informação. A escolha da tipografia deve ser feita com
cautela e focado sempre no feedback das pessoas, levando também o propósito do site e o
contexto de todo o projeto. Por isso, Garret (2002, p. 147) afirma: “Para o texto do corpo -
qualquer material que será apresentado em blocos maiores ou que será lido pelos usuários em
trechos mais longos – quanto mais simples, melhor” (tradução nossa). Dessa forma, a partir de
algumas pesquisas, definimos a família tipográfica Margem, do designer Fabio Haag, para
compor o projeto. Ela foi escolhida por seus traços dinâmicos, por ser moderna e principalmente
por ser sem serifa – facilitando a leitura em mídias digitais.
Figura 37 - Ícones do site
88
Figura 38 - Algumas fontes da família tipográfica Margem
A escolha de uma família tipográfica é o mais indicado para projetos como esse. Pois
cada peso de fonte pode ser escolhido para diferentes coisas, facilitando a compreensão e dando
mais embasamento para a arquitetura da informação. Assim, os títulos utilizarão a fonte com
peso bold (negrito), as informações de segundo nível utilizaram a fonte medium (médio), e essa
hierarquia vai seguindo durante as outras informações. Com o uso desses recursos, o usuário –
mesmo que inconscientemente – percebe a relevância de cada parte escrita na plataforma.
4.5.5 Selos
Os selos são uma espécie de recompensa que o site vai oferecer para os usuários ao
alcançarem determinadas marcas de leitura. Assim, quando ele chegar ao número de quadrinhos
lidos, o selo condizente com o gênero aparecerá na sua página pessoal. Esse conceito faz com
que o usuário ganhe algo por catalogar seus quadrinhos. Cada gênero tem um determinada cor
e desenho específico. Assim, para ilustrar, apresentaremos os 2 selos usados no site.
Figura 39 – Selos de Leitura
89
Como já mencionado antes, as classificações são dadas de acordo com os volumes. Mas para
diferencia-los, optamos por colocar cada selo numa cor diferente, mudando apenas o ícone do
centro, o gênero que ele se destaca, e em baixo, o grau de leitura. Como essa opção é apenas
demonstrativa, não se torna necessário apresentar todas as variações de selos. Por isso, focamos
nossa atenção em explicar o conceito dessa funcionalidade.
4.5.6 Design de interface
Após todos esses itens que serviram de padrão para o desenvolvimento do design final,
podemos introduzir as versões finais do projeto para desktop. É importante salientar que essas
versões são as que antecedem o teste de usabilidade. Muito do que se vê nessas telas pode ser
alterado após as percepções dos usuários ao utilizarem. Afim de unificar todo esse sistema de
design já apresentado nas páginas anteriores, as versões finais da interface apresentam todos
esses elementos integrados. Mesmo com a particularidade de cada página, algo que as define é
a consistência de recursos gráficos visivelmente ilustrados, fazendo o usuário entender que tudo
aqui faz parte de um mesmo universo.
A seguir, apresentamos todas as páginas com o design final e algumas considerações
sobre elas. Como já falamos bastante sobre as construções da página no capítulo de wireframes,
vamos atentar para detalhes menores agora.
90
Sem muitas mudanças da versão de wireframe, essa página será o primeiro contato com o
usuário. Ela contém um pouco menos de informação que as outras, o que facilita o entendimento
desse primeiro contato. Como optamos por trabalhar com um background mais fechado, as
imagens e textos tem mais destaque e causam um bom contraste entre os elementos – facilitando
a experiencia e o conforto visual que a página proporciona. Visando o entendimento da página,
adicionamos botões de indicação no canto superior esquerdo. Ali, o usuário sabe de onde veio
e onde ele está – facilitando a navegação e a página que ele está localizado. Esse recurso se
repete em várias páginas.
A seguir, a página de Quadrinhos.
Figura 40 - Layout final da HOME
91
Essa talvez seja a página com mais informações devido a quantidade de quadrinhos que ela
apresenta. Mas, mesmo com tantos elementos, as informações estão bem divididas por seus
tópicos. Por isso a necessidade de uma paleta mais fechada, pois em casos como esses, mesmo
com diversos elementos na tela, não existe uma desorganização visual. Sem contar que essa tela
Figura 41 - Layout final do menu QUADRINHOS
92
é estática e todos esse visual vai aparecendo gradualmente enquanto as pessoas deslizam para
baixo. Essa é a página que todos os gostos e interesses do usuário aparecem.
A próxima a ser comentada é a página de Novidades.
Figura 42 - Layout final da página Novidades
93
A página de novidades é bem simples por conta da quantidade de informações. Apenas as
notícias sobre o universo dos quadrinhos aparecem aqui. No lado direito é que adicionamos as
formas de interação do sistema, com quadrinhos recém comentados por usuários que seguimos
e abaixo, indicação de pessoas para seguir, com seus respectivos números de quadrinhos lidos
e números de HQ’s preferidas. Como essa é uma página mais diferente, optamos por utilizar o
formato de imagem mais largo. Quando a notícia falar sobre mais de um quadrinho, eles irão
estar dimensionados para caberem dentro do espaço, como no último exemplo da página.
Continuado, a página de Usuário.
Figura 43 - Layout final da página de USUÁRIO
94
Essa sessão é onde as cores tem um papel principal nesse projeto. Como são muitos
dados sobre usuário na parte de cima, as cores são usadas para diferenciar cada tipo de
informação e organizar esses itens. Informações com mais importância aparecem com cores
mais fortes e as com menos importância, em tons de cinza mais fechados. Por ter pouco o que
se mostrar, todo o conteúdo é claramente bem organizado e definido.
A página de Quadrinhos Fechados.
Figura 44 - Layout final da página de QUADRINHO
95
As cores são um dos destaques dessa página. Ela tem um pouco mais de informações e ainda o
recurso do fórum. Botões e informações pra mais destaque seguem com as cores mais fortes e
informações menos relevantes com tons de cinza mais fechados. Um recurso interessante dessa
página é o poder de interação que ela tem. Tanto pela discussão – que já reforça a ideia de
escrever alguma opinião - como pela opção de adicionar uma capa variante. Como muitos
artistas desenham as capas de quadrinhos, mais de uma versão pode ser feita e eles mesmos,
podem adiciona-la se o site não o fizer.
Outro recurso foi colocar as fotos dos responsáveis pela edição em preto e branco, para
que não tivesse mais um ponto focal dentro da página, dando atenção pra outras coisas que
entendemos como mais importantes. Ao clicar em qualquer quadrinho, essa será o modelo de
página que aparecerá, só se alterando as informações de cada um.
Continuado, a página de Listas do sistema.
Um dos principais momentos de interação do site se encontra nessa página. Aqui, usuários
podem criar listas de quadrinhos para outras pessoas terem acesso. Assim como em outras
Figura 45 - Layout final da página de Listas
96
partes, cada lista tem uma curta descrição, a quantidade de curtidas e comentários que teve,
quantos HQ’s fazem parte e a pessoa que fez tudo isso. Esse tipo de informação facilita o
entendimento e abre margem pra uma noção maior do conteúdo sem a necessidade do clique.
O botão de cima é uma chamada para a criação da própria lista do usuário. Além disso, as tags
filtram as principais informações do conteúdo da página, direcionando o usuário para pesquisas
específicas.
Na apresentação, temos 3 listas com maior destaque e definidas através do que os usuários mais
procuraram ou visualizaram. Essas listas mudam 2 vezes por semana de acordo com o
comportamento do público. Abaixo, temos as outras listas feitas. Essas, no entanto, são mais
antigas que as de destaque, mas ainda são comumente mantidas com alguma interação.
Agora, vamos para a tela de Prateleira.
Figura 46 - Layout final da página de Prateleira
97
Sendo um sub-menu da página QUADRINHOS, a Prateleira é o menu de marcação onde os
usuários podem adicionar os quadrinhos que eles desejam adquirir. A maior importância da
página é catalogar todos os quadrinhos para saber quais ainda precisam estar na sua coleção
pessoal. Além de apresentar quadrinhos adicionados recentemente e toda a lista completa, essa
página ainda traz uma sidebar4 com quadrinhos recém comentados por seus seguidores. Dessa
forma, o usuário pode perceber o que essas pessoas andam lendo e compartilhando.
Para dar uma maior explicação sobre as atividades feitas pelas pessoas, no H1 temos
todos os quadrinhos presentes na Prateleira, os números adquiridos na semana e depois, os selos
com os gêneros que mais estão na lista. Esse recurso se repete nas duas próximas páginas que
serão explicadas.
Dando continuidade, a página de Coleção.
Figura 37 - Layout final da página Coleção
98
Essa página consiste em acoplar todos os quadrinhos que as pessoas têm posse. Assim, ela não
corre o risco de comprar uma mesma história duas vezes. O interessante dessa página é que ela
fornece um contato direto entre pessoas. Elas podem perguntar onde os quadrinhos foram
comprados, perguntar se gostou de uma edição qualquer e outros tipos de perguntas através do
recurso de discussão. No seu desenvolvimento, optamos por colocar 8 quadrinhos com mais
destaque, e a opção de “ver mais” no lado direito. Essa opção mostra todos os quadrinhos da
lista e não apenas os mais destacados. Abaixo, temos a opção “recém adquiridos”, que filtram
os quadrinhos comprados no último mês.
Finalizando a versão desktop, a página Quero Ler.
Figura 48 - Layout final da página Quero Ler
99
A página de Quero Ler apresenta os quadrinhos desejados pelo usuário. Com essa organização,
fica mais fácil ter um controle maior sobre os objetos de leitura. Uma parte importante dessa
página são as recomendações que a Graphic Novels oferece. São 6 quadrinhos baseados em
gostos de leituras do usuário e com boas notas de avaliação que talvez interessem. Essa ação
proporciona o conhecimento de outros quadrinhos e interfere na emoção que o projeto de design
também precisa passar. Aqui, o menu de prateleira volta para fazer parte integrante. Assim, os
quadrinhos que ele quer adquirir e os que deseja ler podem ser visualizados e devidamente
catalogados.
Em sua composição, optamos por colocar 18 quadrinhos como principais, sendo eles os mais
recentes adicionados. Abaixo vem a recomendação da Graphic Novels. E do lado, a Prateleira.
A versão desktop conta com as páginas acima mencionadas. Os layouts finais
das páginas foram apenas a continuação do que os wireframes já tinham mostrado antes. Todos
os recursos e elementos foram pensados para que o usuário conseguisse se manter no site sem
ter nenhum tipo de problema. O entendimento de todas as informações e recursos é de vital
importância para a experiencia e interação do sistema.
Todo o período de estudo e pesquisa nesses meses se refletem no seu desenvolvimento. É
importante considerar que muitas das nossas percepções são atribuídas para o projeto, e isso
pode ser alterado e redefinido após o teste de usabilidade e validação. Mas, construir essa
progressão de escalas até o resultado final é bem satisfatório, e uma forma de mostrar ao usuário
um pouco do resultado dos anseios que ele mesmo revelou ter. Como corrobora Lowdermilk
(2013, p.132): “Os protótipos são uma maneira de fazer a avaliação do design visual de seu
aplicativo sem fazer um investimento significativo em programação”. Se fosse no meio das
Startups4, diria que esse produto é um MVP (Minimum Viable Product – Mínimo produto
viável). Que representa uma primeira versão de um projeto que está em desenvolvimento.
4.5.7 Versão Mobile
Com o avanço das tecnologias mobile, quase todas as pessoas têm acesso a internet
através do celular. Uma pesquisa intitulada “Google Consumer Barometer”, divulgada em 2017
apresenta resultados importantes para o uso do mobile. Em 2012, por exemplo, apenas 14% da
população possuía smartphones. Já em 2016, o número subiu para 62%. Ao analisar esses dados
e o comportamento das pessoas com o mobile, podemos concluir que é inviável estar na internet
e não ter um site ou aplicativo responsivo, ou seja, adaptado para diversos formatos de tela. É
4 Empresa de caráter mais prático e com um modelo de negócio escalável e rodeados de incertezas de sucesso.
Geralmente com o objetivo de criar um produto ou fazer algum serviço.
100
necessário considerar que o acesso a tecnologias se tornou mais prático e democrático,
incentivando ainda mais o uso de dispositivos móveis. Teixeira (2014, p. 111), fala sobre o
impacto do mobile nas situações cotidianas das pessoas através da seguinte citação: “[...] Uma
mudança de paradigma que afetou não apenas a forma como os sistemas são desenhados, mas
também a maneira como os usuários se comportam ao interagirem com eles”.
Dessa forma, a Graphic Novels também apresenta uma versão mobile e totalmente
adaptada para celulares e tablets. Toda a estrutura de navegação e interação continua a mesma
já apresentada, mas com algumas adaptações para o formato da tela. É importante saliente que
para os testes de usabilidade que serão feitos nos próximos capítulos as duas versões serão
usadas.
A seguir, as versões para dispositivos móveis do sistema.
A página inicial é o primeiro contato que os usuários têm com o sistema, principalmente no
mobile, que já é mais usado que desktops. Essa primeira visualização precisa ser clara e direta
com o conteúdo que vai apresentar para as pessoas. Assim, uma das principais referências para
essa definição de layout foi usar o espaço vertical dos aparelhos para distribuir informações.
No H1, por causa do tamanho, usamos apenas 4 HQ’s invés de 6 que estão na versão de desktop.
A seguir, a tela de quadrinhos.
Figura 49 - Tela HOME na versão mobile da Graphic Novels
101
A segunda tela, a de Quadrinhos, apresenta uma quantidade maior de edições em sua
composição. Novamente, resumimos os quadrinhos mostrados. Por isso, os filtros de pesquisa
são importantes para serem usados para definir melhor o que o usuário quer ver.
Em seguida, a tela de novidades.
A página de novidades é bem importante pois gera uma interação maior com os usuários. Para
que as pessoas tenham mais escolhas na hora de navegar, adicionamos outras páginas. É
importante salientar que ao contrário da versão desktop em que a sessão “Pessoas que talvez
você conheça” tem nomes dos usuários e outros dados, aqui, pela falta de espaço, nos limitamos
apenas ao avatar para identificação. Uma preocupação no desenvolvimento eram os tamanhos
que as descrições das novidades e botões iriam ter. Mas conforme fomos ajustando, percebemos
que o resultado ficou satisfatório.
Próxima tela, a de Listas.
Figura 50 - Tela de QUADRINHOS na versão mobile da Graphic Novels
Figura 51 - Tela NOVIDADES na versão mobile da Graphic Novels
102
Na página de listas, a quantidade de curtidas e comentários da lista são bem visíveis para criar
uma empatia maior. Mais uma vez, utilizar as informações de forma vertical funciona bem para
definir as sessões e espaços de cada item. Principalmente as listas com menos destaque, que
aproveitam mais o espaço horizontal, como vemos no 3º celular.
Seguindo, a tela de Coleção
A página de Coleção é a primeira que aparece a sessão de comentários. Era importante manter
essa parte bem organizada para a demanda de pessoas que podem inserir suas opiniões. Por
isso, optamos por manter o “text area”5 com tamanho significativo, expandindo a altura das
extremidades para que haja um entrelinhamento grande, facilitando a compreensão da leitura.
5 Área de texto. Expressão usada para falar do espaço que as pessoas têm para digitar em comentários nas
páginas web.
Figura 52 - Tela LISTAS na versão mobile da Graphic Novels
Figura 53 - Tela COLEÇÃO na versão mobile da Graphic Novels
103
A seguir, a página de Prateleiras.
Essa página é uma das mais curtas, mas dá margem para o sistema de porcentagem usado no
site. Assim, vários quadrinhos podem ter esse índice. Alguns deles não apresentam essa
porcentagem por conta da quantidade, como visto no 2º celular, o que tornaria inviável o uso
desses elementos – já que não seria possível ver com clareza, dificultando a experiência do
público.
A tela de Quero Ler na versão mobile.
Figura 54 - Tela PRATELEIRAS na versão mobile da Graphic Novels
Figura 55 - Tela QUERO LER na versão mobile da Graphic Novels
104
Aqui, a preocupação maior era não deixar a página poluída demais com muitos quadrinhos. Por
isso, além dos títulos de cada sessão estarem representado do que faz parte aquela HQ, os
tamanhos dos quadrinhos variam também entre eles. A ideia era fazer o usuário ter um auxílio
para a compreensão através dessas associações de tamanho de cada item, mesmo que
inconscientemente.
Continuando, a página de Quadrinho Fechada.
Assim como na versão desktop, existia uma preocupação nessa página com a quantidade de
informações. Na primeira sessão, posicionamos todo o conteúdo verticalmente, aumentando até
o seu tamanho para uma melhor leitura e adaptando alguns botões para ícones, otimizando o
espaço. Esse exemplo pode ser visto nos botões de Compra e Ler Online, que agora são ícones
posicionados ao lado do quadrinho.
Finalizando, a página de Usuário.
Figura 56 – Tela QUADRINHO FECHADO na versão mobile da Graphic Novels
105
A sessão inicial da página, por conta de tantos dados, foi bem optimizada para o mobile. Assim,
aumentamos os espaços entre cada elemento e o tamanho das fontes para que o usuário possa
entender melhor cada linha da comunicação.
Assim, toda a linha de interface já explicada e analisada da outra versão, foi adaptada
para os dispositivos móveis, permitindo que a navegação entre os tantos recursos do sistema
possa ser feita de forma eficaz. A consistência é um importante fator nessa migração de
elementos. As pessoas precisam identificar os recursos do site independente de onde ela estiver
acessando.
4.5.8 FORMAS DE MONETIZAR ESSE PRODUTO
Uma ferramenta com tantas funções e suprindo tantas necessidades como a Graphic
Novels, precisa se manter. Mesmo com a maioria das funções habilitadas para todos os tipos de
usuário de maneira gratuita, muitas outras funções poderiam se tornar premium, e dessa forma,
receber algum tipo de monetização. Sistemas como Trello, Spotify, IMDB e outros já possuem
uma versão de assinantes com algumas particularidades. O mesmo pode acontecer nesse
projeto.
Mesmo não apresentado nessa primeira versão, nas próximas continuidades do projeto,
funções exclusivas para assinantes poderiam ser integradas. Duas dessas funções já estão
habilitadas no modo gratuito. A opção de comprar a HQ e a de ler online, apresentada na página
de quadrinhos fechados. Essa é uma das formas de gerar monetização através da compra ou
leitura online do site, o que permitiria que a plataforma recebesse algum valor por essas ações.
Figura 57 - Tela USUÁRIO na versão mobile da Graphic Novels
106
Mas ainda assim, se tornaria muito pouco o valor arrecado apenas nesse quesito. Por isso é
necessário aprimorar as funções para que o impacto fosse maior para usuários interessados.
Uma das formas de gerar monetização é fazer da plataforma uma facilitadora entre
editoras e autores. Assim, para quem assinasse essa versão, roteiristas e artistas poderiam
disponibilizar materiais feitos para que estúdios pudessem analisar e fazer convites para suas
equipes criativas. Entendendo que muitos autores e artistas não conseguem esses espaços
facilmente, a plataforma seria responsável por criar uma ponte entre as partes.
Outra forma seria a possibilidade de assinantes receberem os quadrinhos primeiro.
Como a maioria das histórias que lemos no Brasil são de outros países, por conta de editoras
locais, os materiais demoram meses para chegarem traduzidos, assim, dependendo do tipo de
assinatura, os usuários poderiam receber as revistas no seu idioma original assim que forem
lançadas. Essa cultura já acontece muito em fóruns e grupos na internet. Pelo menos dessa
forma, se tornaria algo licito e o usuário poderia ter em mãos a revista original.
Claro, essas são apenas algumas opções para uma ideia que pode ser expandida ainda
mais em futuras versões, mas fazer render financeiramente um investimento como esse é uma
ótima abordagem para fazer a plataforma sobreviver. Não podemos esquecer que se fosse
existir, o site seria parte de uma empresa ou startup e precisaria se manter parar continuar
existindo.
107
5. DISCUSSÃO DOS RESULTADOS
5.1 Teste Piloto
O teste piloto é uma pequena demonstração feita para um grupo restrito de utilizadores.
Ele é mais curto e visa melhorar o máximo a experiência para o teste final. Dessa forma,
podemos identificar pequenos problemas e algumas sugestões para que quando formos analisar
o protótipo com mais pessoas, possamos fazer o melhor possível visando sempre o aspecto de
UX do produto. Esse formato permite o ganho de tempo e de pessoas em uma aplicação mais
sensível em relação a validação do processo. Além de expandir o nível de feedback sobre as
aplicações do artefato.
Assim, realizaremos esse teste piloto com 5 usuários distintos de classes socias, idades,
profissões e gostos. Interessante observar que esse teste será feito com leitores e não leitores de
quadrinhos, visando o impacto da usabilidade e navegação do protótipo na versão mobile e
desktop. Após feito o teste, um questionário com algumas perguntas será passado para os
participantes afim de esclarecer as suas percepções. As perguntas serão de múltipla escolha e
poderão ser adicionados alguns comentários sobre as questões levantadas. Conversas de tom
mais informal serão feitas com o usuário para entender mais sobre sua perspectiva.
O roteiro do teste será basicamente navegar pelo site para entender suas funções nas versões
mobile e desktop. Não será atribuída nenhuma tarefa específica pois isso se consolidará no teste
final, mas para esse primeiro contato, navegar por todas as páginas e funções do site e tentar
entender a lógica de todas aquelas informações será o necessário.
Com o roteiro pronto, as perguntas para o questionário é o próximo passo para seguir. Dessa
forma, serão levantadas as seguintes perguntas para a análise:
▪ Navegue pelas páginas do site, clicando nos botões, links e menus. Após isso, explique
rapidamente como foi o seu primeiro contato com a plataforma.
▪ As informações e conteúdo estão sendo compreensíveis e fáceis de entender?
▪ Você conseguiu entender a lógica de navegação e usabilidade?
▪ Existe algum botão, informação ou menu que está com algum tipo de erro?
▪ Alguma coisa está ambígua?
▪ A dinâmica do teste foi boa?
▪ Você consegue ver consistência de informações, layout e interação entre as versões
mobile e desktop?
▪ Qual a sua percepção do projeto como um todo?
Essas são algumas questões levantadas no questionário para a interpretação dos usuários do
projeto.
108
É importante salientar que esse é apenas uma antecipação do último teste de usabilidade, e dessa
forma, poderão ser feitas eventuais ajustes para o teste final. Essa avaliação foi feita por 5
pessoas de áreas distintas, realizada entre os dias 9 e 10 de outubro de 2018.
5.2 Resultados do teste piloto
O teste serviu de base para aperfeiçoar o sistema para o exame final. Através dele,
pudemos perceber algumas falhas de conteúdo, layout e navegação apontadas pelos usuários.
As opiniões e dicas que eles forneceram foram de ótima ajuda para identificar pontos que
estavam com falhas. Quando estamos tão imersos no processo de desenvolvimento, por tanto
ver e testar as funções, temos a falsa impressão de que tudo está certo. Mas com feedback de
pessoas inerentes a esse processo, percebemos que alguns pontos estão desalinhados com as
necessidades do usuário. Esse mesmo pensamento é apresentado por Lowdermilk (2013, p.115)
através da seguinte expressão: “A verdade é que todos querem marcar um gol de placa.
Queremos mostrar nosso novo aplicativo aos usuários, clientes, amigos e familiares e ouvir que
acertamos em cheio [...]”. O autor ainda cita que mesmo sendo frustrante perceber que algumas
funções estão erradas, é necessário absorver isso como positivo, tendo a certeza de que existe
muito a melhorar.
Após os testes com 5 usuários, recolhemos diversas opiniões sobre o layout,
navegação, conteúdo e usabilidade. Num panorama geral, eles afirmaram que as cores e
informações do site estão bem distribuídas e que se sentiram confortáveis ao utilizar o protótipo.
Acharam intuitivo e com uma navegação simples de ser usada e compreendida. Afirmaram que
o conteúdo dos quadrinhos está bem apresentado e que eles perceberam tudo o que precisavam
rapidamente. O feedback das principais questões de interação do sistema foi bem recebido e
entendido, absorvendo assim, que pelo menos nesse teste inicial, a estética, arquitetura de
informações, interação e usabilidade foram bem usadas.
Entretanto, mais importante que apontar o que acertamos é avaliar com cautela o que
falhamos nesses quesitos citados acima. 3 usuários questionaram o uso de alguns títulos estarem
sublinhados e com textos que sugeriam perguntas, como vemos na figura 58.
Figura 58 - H1 da tela inicial
Nesse título, eles pensaram que poderia ser uma pergunta. Mesmo estando sem interrogação,
por estar sublinhado e por o título ser um pouco ambíguo, a percepção que eles tiveram é que a
frase seria uma pergunta que teria que ser respondida. Aconteceu a mesma percepção em outros
109
títulos semelhantes a esses. Assim, achamos mais adequado mudar os títulos para algo mais
claro e deixar essas linhas menores, apenas como elemento estético de indicação de hierarquia.
Para facilitar ainda mais o entendimento, será usado uma fonte mais pesada afirmando que se
trata de um título, talvez por ter uma tipografia mais fina, o repertório deles tenha definido que
a forma que se encontrava as frases, poderia ser uma pergunta. Dessa forma, o texto se manteria
mais direto, tirando essa percepção ambígua. Após o ajuste das versões mobile e desktop, os
títulos ficarão de acordo com o apresentado na figura 59.
Figura 59 - Correção da estética para títulos do protótipo
Com esse ajuste de texto e estética, o protótipo apresentará títulos mais consistentes e claros de
se entender. Sem a observação dos usuários, essa singela alteração não teria sido realizada.
Outro problema apontado pelos usuários foi o erro de botões e links. Quando clicadas,
algumas opções não correspondiam para o que se era esperado. Alguns usuários falaram sobre
esses erros de navegação que foram identificados durante o exame. Assim, esses links foram
corrigidos e direcionados para suas respectivas funções – algo que passou despercebido durante
a fase de desenvolvimento. Um outro erro de conteúdo apresentado por um usuário foi a falta
de uma opção usada na versão mobile, mas que faltou na versão desktop.
Figura 60 - Sessão apresentada na versão mobile
110
Essa falha foi detectada na página de usuário, onde a opção de “comentado recentemente” - que
indica quais quadrinhos essa pessoa deu sua opinião por último – está faltando. Na revisão que
fizemos do protótipo, não percebemos que essa opção de vital fator de interação estava apenas
no mobile. Como podemos ver na figura 61 que a funcionalidade não está na versão desktop.
Figura 61 – Sessão que não foi apresentada na versão desktop
Assim, ao perceber essa falha, adicionamos a opção na versão desktop priorizando a
consistência de informação nas duas versões do protótipo. Sem a percepção do usuário acerca
de todos esses determinados erros de consistência e usabilidade, o site apresentaria problemas
para sua utilização.
Portanto, incluir o usuário nessa fase, além das outras, é muito significativo para a
construção de um bom produto. A imersão no projeto pode ser prejudicial no processo de
encontrar erros. Estamos tão envolvidos naquilo ao decorrer dos dias que as coisas vão passando
sem que possamos perceber. É exatamente aí que os usuários, que tem um olhar mais apurado
para identificar falhas, podem ser ainda mais úteis para aprimorar a experiência. E assim,
colaborando para melhorias de boas práticas.
5.3 Teste de usabilidade final
Agora que as imperfeições já foram supridas, podemos finalmente testar o produto com
tarefas mais específicas e questionamentos mais profundos. Como o ideal é que testes sejam
feitos periodicamente, apenas o teste piloto não é suficiente para abordar todos os possíveis
problemas que o protótipo possa apresentar, principalmente por o primeiro ser feito com um
número restrito de pessoas. Assim, para aprofundar a percepção e experiencia do usuário, o
teste de usabilidade é usado como medida para saber se tudo o que fizemos desde o começo se
111
encaixa com o que as pessoas precisam. Corroborando com esse pensamento, Lowdermilk
(2013, p.117) afirma: “Somente se permitirmos que os usuários ofereçam feedback
continuamente, poderemos testar nossos pressupostos e garantir que estamos seguindo na
direção correta”. Nos apoiando no que declara o autor, o teste será uma grande balança para
mostrar os possíveis erros no modo em como as pessoas vem e usam a plataforma, por isso é
importante escutar bem suas opiniões.
Para o teste, utilizamos a técnica de questionário com perguntas a serem respondidas e
comentadas. Além disso, conversas informais foram feitas após o teste visando ter um
entendimento maior sobre como as pessoas enxergavam a plataforma. O que foi extremamente
válido, pois elas conseguiam se expressar melhor que nas perguntas do questionário. O exame
foi realizado por 15 pessoas de diferentes idades, profissões e cidades. Todos os testes foram
realizados em um período de 10 dias. O objetivo principal era validar as propostas que o sistema
se comprometeu em fazer desde o começo das pesquisas: catalogar quadrinhos lidos,
comprados, quadrinhos que as pessoas querem obter e fazer a interação entre os leitores, entre
outras funções já explicadas anteriormente.
Com o propósito de realizar um teste prático e que não cansasse os participantes,
formamos perguntas de múltipla escolha, com respostas que variavam em sua maioria entre:
“Sim”, “Às vezes” e “Não”. Assim, após ler a pergunta e responder, o usuário precisaria
justificar sua resposta logo abaixo. Composto por 18 perguntas, que em sua maioria eram de
múltipla escolha com justificativa, o questionário foi apresentado aos usuários com suas devidas
tarefas a serem realizadas. Basicamente, o usuário realizava a tarefa que era entregue para ele
e comentava sua opinião sobre. Dessa forma, o feedback é mais prático sobre cada tarefa.
Precisamos facilitar o exame afim de obter os melhores resultados na pesquisa. Assim,
adicionamos as seguintes perguntas no questionário para serem respondias pelas pessoas que
participaram:
▪ Qual o seu nome?
▪ Você ler quadrinhos regularmente?
▪ Navegue por alguns minutos pelo site para conhecer o ambiente. Após esse passeio,
você sabe explicar sobre o que se trata este produto?
▪ Após acessar a página de "usuário", observe bem o conteúdo e responda: você consegue
entender cada uma dessas opções que estão descritas?
▪ Após acessar a página de "Coleção", responda: você sentiria vontade de interagir com
usuários pra falar sobre quadrinhos a partir do que viu na página?
112
▪ Após acessar a página de "Listas", responda: você gostou da distribuição de hierarquia
das listas principais e secundárias?
▪ Classifique um quadrinho com 3 estrelas. Após isso, responda: as informações
apresentadas na página estão fáceis de compreender e interagir?
▪ Encontre a página “Quero Ler”, após isso, observe se - mesmo com tantos quadrinhos
– a hierarquia está compreensível?
▪ Na versão mobile, encontre a página “Prateleira” e compare se existe consistência de
layout e usabilidade entre as duas versões. Tudo está de acordo?
▪ Encontre a página de "Novidades". Após uma análise rápida, responda: você se agradou
dessa página? Tudo está com fácil entendimento?
▪ Como você classificaria a sua experiência ao utilizar o site?
▪ Utilize por alguns minutos a versão mobile do site. Após isso, responda: você sentiu
falta de alguma coisa que já encontrou na versão desktop?
▪ Você usaria a Graphic Novels para catalogar quadrinhos e interagir com outros leitores?
Por que?
▪ Como você classificaria as ideias de interação entre usuários que o site apresenta?
Mesmo considerando que são muitas perguntas para serem resolvidas, acreditamos que a
dinâmica do teste é útil pelo embasamento fácil e prático que as perguntas têm.
Assim, o principal objetivo do teste é validar os levantamentos apresentados durante todo o
trabalho. Ao conectar os usuários no processo de resolver seus problemas, várias de nossas
ideias e fundamentos para o projeto são testadas afim de saber se foi útil ou não o caminho que
escolhemos.
5.4 Resultados do teste de usabilidade
Após algumas semanas colhendo informações sobre os diversos feedbacks que o teste
recebeu, é hora de analisar tudo e verificar quais foram as principais dificuldades e acertos que
conseguimos passar para o usuário através do site. Depois de 15 questionários com diferentes
tarefas aplicadas e variadas conversas sobre o sistema, absolvemos o que mais foi prático de
ser usado, e principalmente, no que o usuário não entendeu direito. Assim, para entender um
pouco mais sobre os resultados, discutiremos acerca de cada pergunta de forma resumida e
apresentando os principais pontos, positivos ou negativos do teste de usabilidade.
Na primeira pergunta do teste, a tarefe se consistia em fazer um uso rápido e depois
identificar sobre o que se tratava o site. Todas as respostas apontaram que conseguiram entender
de que se tratava de um local para catalogar quadrinhos e fazer interação. Para não comprometer
113
a expectativa, decidimos dar poucos detalhes sobre o intuito do site antes do teste, justamente
pra não dar uma resposta sobre a primeira pergunta. Essa parte do projeto em criar uma
identidade para a catalogação do quadrinho foi bem recebida, apontando que todos os
participantes entenderam qual o objetivo da plataforma em seu primeiro contato.
A segunda pergunta já apontou pra uma tarefa mais específica. O participante deveria
encontrar a página de usuário e responder se conseguia entender todas as informações que
estavam ali descritas e se tinha alguma coisa que o incomodava nesse menu. Mais uma vez, os
participantes entenderam todas as informações descritas na página. Eles apontaram que a forma
que as informações foram distribuídas ajudaram bastante no entendimento de todo o conteúdo.
Apenas um participante indicou que os termos usados, nesse caso "Minha Coleção" e "Na
Prateleira" deixaram questionamentos dúbios sobre suas funções. Mas quando clicou nessas
opções, percebeu do que se tratava com facilidade. Muito do reconhecimento do site se vem
com o constante uso. Como a plataforma oferece variadas funções, para se ter o conhecimento
de todas, o usuário necessita de um pouco mais de relacionamento para entender os significados.
A terceira pergunta foi sobre a página “Coleção”. Nela, o usuário teria que encontrar a
página, entender sobre o que se tratava e depois informar se sentiria à vontade pra expor sua
coleção pessoal a partir do que viu. A ideia era entender se eles gostavam da forma em que sua
coleção pessoal interagia com outros leitores. A percepção de cerca de 90% dos usuários é que
a forma que a coleção foi apresentada, com a possibilidade de interação com outras pessoas,
estava de acordo com o que eles esperavam. Elogiaram bastante a ideia de poder organizar os
quadrinhos que foram comprados e ver a parte de comentários das pessoas falando sobre os
itens de colecionador foi algo que os cativou. Apenas uma participante que apontou que não se
sentiria confortável em apresentar seus itens pra outras pessoas. Esse problema poderia ser
sanado nas configurações de perfil. Ali, o usuário poderia escolher se deixaria seus quadrinhos
visíveis para o resto da comunidade ou não. Infelizmente no teste, isso não estava disponível,
mas numa próxima versão com mais detalhamento, essa seria uma adição importante sobre
privacidade das pessoas.
A quarta pergunta foi sobre a página “Listas”. O usuário deveria acha-la, observar e
navegar, e após isso, identificar se a hierarquia das listas estava entendível. O ponto central era
verificar se o conteúdo estava simples de ser assimilado através do que era mais importante e o
que era menos importante para ser mostrado. Mais uma vez, a maioria dos usuários captaram a
ideia da página apontando que conseguiram observar bem o que era apresentado primeiro e em
segundo lugar. Apontaram que a forma de colocar as mais comentadas da semana em primeiro
plano e a segunda abaixo era uma forma de prender o usuário. Apenas um usuário afirmou que
114
não gostou da forma que a distribuição foi feita, afirmando que entendeu a proposta, mas não
sentiu que a disposição dos elementos dava essa ideia de primeiro e segundo. O resto das
pessoas achou intuitivo e interativo a forma que foi desenvolvido a página.
Na quinta pergunta, o usuário deveria classificar um quadrinho com 3 estrelas e informar
se as informações da página estavam entendíveis. A lógica dessa questão era saber se as pessoas
assimilavam as muitas coisas que essa página apresenta. Com 100% de aprovação com os
envolvidos no teste, a página foi ranqueada boa pelos usuários, citando que foi fácil o processo
e que os dados referentes a cada quadrinho estavam bem apresentados e destacados,
incentivando também a interação através da área de comentários.
Na sexta pergunta, foi pedido para os usuários acessarem a página “Quero Ler” e
verificar se a hierarquia estava compreensível. Como é uma página com muitos quadrinhos,
queríamos saber se a disposição dos elementos estava compreensível. Assim, 73, 3% de
usuários afirmaram que estava sim. 26, 7% afirmaram que estava mais ou menos, e 6,7%
afirmaram que não. Dessa forma, ficou claro que algumas opções não foram boas apostas para
a página. Foi a única página que apresentou mais problemas de acordo com usuários. Alguns
falaram que não conseguiram compreender a hierarquia, outros que precisavam de ajustes e um
outro falou que achava desnecessário a sidebar da página, no caso, o recurso de “Prateleiras”.
Assim, afim de melhorar a aprovação do usuário, vamos optar por retirar a sidebar “Prateleira”
que se encontra do lado direito, para diminuir o volume de coisas na página.
Figura 61 – Sessão que não foi apresentada na versão desktop.
115
Como percebido na Figura 62, existem 3 blocos de conteúdo e isso não facilita a compreensão
de alguns dos usuários. Por isso, será feito o ajuste focando no entendimento. Assim,
retiraremos a sidebar de “Prateleiras” e colocaremos mais 2 HQ’s na sessão de recomendação
da Graphic Novels. Acreditamos que com essa pequena mudança, a percepção sobre a página
será maior e mais precisa para reconhecer as funções que ela exerce. Assim, após o ajuste, o
layout ficará da forma como apresentado a seguir na figura 63.
Figura 63 - Página de "Quero Ler" após o ajuste no layout.
116
Após o ajuste na página, todos os blocos se tornaram mais compreensíveis e práticos de serem
percebidos. O mesmo ajuste acontece na versão mobile do site.
Na pergunta 7, os usuários deveriam usar a versão mobile, buscar a página “Prateleira”
e verificar se existe consistência de layout e usabilidade nas duas versões. Com 93,4% de
aprovação e apenas 6,7% de pessoas que perceberam que algumas funções não estavam
habilitadas. Observamos que a diferença encontrada pelo único usuário que marcou a última
opção citada se dá porque preferimos por adicionar menos quadrinhos na página mobile. Como
a ideia era apenas demonstrar a usabilidade, não adicionamos todos os volumes que estão na
página desktop do protótipo, justamente para não cansar as pessoas e também porque o tamanho
da tela mobile é menor.
Na oitava questão, foi sugerido as pessoas visitarem a página “Novidades” do site e
verificar se tudo está simples e fácil de ser entendido. Por ser uma página com poucos recursos
e observações, todos os 15 usuários aprovaram a forma em que foi habilitada o conteúdo.
Em seguida, foi perguntado como as pessoas classificariam sua experiencia de uso
dentro da Graphic Novels. Por ser uma pergunta aberta, abreviaremos os comentários. Todos
os usuários gostaram de utilizar a plataforma e se sentiram confortáveis em realizar as funções
pedidas no teste. Elogiaram a usabilidade, layout e a arquitetura de informação (não com esse
termo) que facilita o entendimento. No fim, todos aprovaram a plataforma.
A antepenúltima tarefa consistia em utilizar a versão mobile e tentar encontrar falhas ou
incompatibilidade com a versão desktop. Para a felicidade, nenhum usuário, pelo menos no
período de teste, encontrou qualquer diferença entre as versões.
Na penúltima pergunta, foi questionado se o usuário poderia usar a plataforma para
catalogar quadrinhos e interagir com outros leitores. Entre tantas respostas, todos avaliaram
positivamente a plataforma e falaram que usariam sem problemas os seus recursos. Alguns
falaram que usariam para ter controle das leituras, mas não para interagir com outras pessoas.
Mas num panorama geral, todos os usuários se agradaram do que viram.
Por último, foi perguntado como as pessoas classificariam as ideias de interação entre
usuários que o site oferece. 73,3% afirmaram ser muito boa esse quesito. 20% afirmaram ser
boa. 6,7% afirmaram ser boa, mas poderia ser melhor.
Para finalizar, a percepção do usuário acerca da plataforma, percebemos que
praticamente todas as decisões tomadas no desenvolvimento do produto foram viáveis para a
percepção do usuário. Percebi com os testes e entrevistas, que nem sempre a melhor opção
pensada por nós é a melhor opção para as pessoas que vão utilizar o sistema. Dessa forma, tudo
pode ser ajustado visando sempre a necessidade que se sentia ao decorrer do projeto;
117
expandindo o conhecimento na construção de artefatos digitais funcionais e eficazes em suas
propostas primárias, secundárias e terciárias.
118
6. CONSIDERAÇÕES FINAIS
Esse projeto foi trabalhado para atender um público crescente de leitores de quadrinhos
que se sentiam incomodados por não terem acesso a uma plataforma de catalogação e interação
com outros leitores. A partir disso, traçamos uma série de estratégias e métodos afim de
conhecer melhor os hábitos e gostos do público criando sempre um paralelo com a forma de
abordagem dos usuários a cada novo passo realizado.
Com a observação detalhada das principais dores e anseios dos usuários leitores de
quadrinhos, foi possível utilizar variadas técnicas do design de interação para ir construindo um
caminho que partiu desde as primeiras impressões sobre o problema de design, passando por
uma pesquisa profunda sobre as necessidades e experiências com plataformas semelhantes,
desenvolvimento de um produto, testes com utilizadores e a finalização com a validação do site.
Incluir variados métodos conceituados por diferentes profissionais da área afim de resolver uma
necessidade que inclui as pessoas em todos os estágios, é um excelente ponto de partida para
como designers podem usar o UX afim de entender melhor a perspectiva das pessoas no uso de
sistemas do dia a dia. A maneira de conduzir essa pesquisa abre margem para o crescimento e
desenvolvimento de profissionais criativos, estudantes e simpatizantes do design.
Percebemos que mesmo tratando o usuário como um desenvolvedor do projeto em
praticamente todos os estágios, erros e decisões erradas foram cometidas no trajeto,
possibilitando falhas no modo que as pessoas utilizavam a plataforma. Como percebemos no
capítulo anterior, nem sempre o que pensamos está alinhado com o que as pessoas necessitam,
com isso aprendemos a dar mais valor ao feedback do público e a explanar mais possibilidades
para os dilemas apontados. Percebemos também que muito mais possibilidades podem ser
expandidas a partir do produto que já desenvolvemos, dando brecha para mais pesquisas e
funções a serem adicionadas.
Através dos estágios de desenvolvimento, fomos trabalhando pautados sempre nos
nossos principais objetivos. Dessa forma, o processo se consistia em responder cada um
daqueles questionamentos apresentados no começo dessa pesquisa. Felizmente, todas aquelas
indagações foram respondidas e sanadas com a aprovação de todos os utilizadores que testaram
e validaram a plataforma.
Por fim, entendemos que apesar de suprir as necessidades, muitas outras opções,
técnicas e estudos podem ser ainda alavancados para outras pesquisas. Funções mais
sofisticadas, resultados mais competentes e interações ainda melhores podem ser aplicadas com
o avanço dos estudos de usabilidade, UX, navegação, layout, design centrado no usuário e
outras áreas que o design proporciona. Entendemos que muito ainda poderia ser abordado e
119
muito mais conhecimento poderia ser aprendido a partir de novas resoluções e dificuldades que
poderiam vir a aparecer no percurso. Para um desenvolvimento mais amplo no meio acadêmico
e profissional, essa pesquisa poderia ser usada para dar um ponto de partida na criação de
produtos de design voltados para o público leitor de quadrinhos e a construção de boas
interfaces.
120
REFERÊNCIAS
Arpina blog. Conheça o seu cliente com o Google Consumer Barometer. Disponível em <
https://www.arpina.com.br/blog/conheca-o-seu-cliente-com-o-google/ > Acesso em agosto de
12/08/2018.
CAMARGO, Liriane Soares de Araújo de; VIDOTTI, Silvana Aparecida Borsetti Gregório.
Arquitetura da Informação para Ambientes Informacionais Digitais. In: LARA, Marilda
Lopes Ginez; SMIT, Johanna. (Org.). Temas de pesquisa em Ciência da Informação no Brasil.
São Paulo: Escola de Comunicações e Artes /USP, 2010. p. 87-104.
COUNTINHO, Gustavo Leuzinger. A Era dos Smartphones: Um estudo Exploratório sobre
o uso dos Smartphones no Brasil. 2014. 67 f. Monografia (Especialização) - Curso de
Publicidade e Propaganda, Universidade de Brasília, Brasília, 2014.
CYBIS, Walter., HOLTZ, Adriana., FAUST, Richard., Ergonomia e Usabilidade -
Conhecimentos, Métodos e Aplicações. 3ª Edição. São Paulo: Editora Novatec, 2015.
D’ANDRÉA, Carlos. Estratégias de produção e organização de informações na web:
conceitos para a análise de documentos na internet. Ciência da Informação, Brasília, v. 35,
n. 3, p. 39-44, set./dez. 2006.
Good E-Reader. Marvel Phasing out Retail Comic Distribution to Focus on Digital.
Disponível em < https://goodereader.com/blog/digital-comic-news/marvel-phasing-out-retail-
comic-distribution-to-focus-on-digital> Acesso em 07/10/2017
FORLIZZI, J.; DISALVO, C.; HANINGTON, B. 2003. Emotion, experience and the design
of new products. The Design Journal, 6(2):29-38. 6:2, 29-38, DOI:
10.2752/146069203789355507
GRUDIN, J. 1990 The computer reaches out: the historical continuity of interface design.
In Proceedings of CHI’90,261-268
121
Internet Live Stats. Total number of Websites. Disponível em
<http://www.internetlivestats.com/total-number-of-websites/#sources>. Acesso em
04/01/2017.
Hobo. How Fast Should A Website Load in 2018? Disponível em < https://www.hobo-
web.co.uk/your-website-design-should-load-in-4-seconds/> Acesso em 14/02/2018.
Healey, Matthew. Design de Logotipos. Mais de 300 Cases Internacionais Descontruídos e
Analisados. São Paulo: Editora Rosari, 2012.
KRUG, Steve. Não me faça pensar. Rio de Janeiro: Editora Alta Books, 2008.
LOWDERMILK, Travis. Design Centrado no Usuário: um guia para o desenvolvimento de
aplicativos amigáveis. 1. Ed. São Paulo: Novatec Editora, 2013.
LUESCH-REIS, Antônio M. Comunicação didática e design. In: Boletim técnico do SENAC.
Rio de Janeiro. p. 85-106, 1991.
LIPTON, Roonie. The Practical Guide to Information Design. 1. Ed. Wiley, 2007.
WILDBUR, Peter; BURKE, Michael. Infográfica: soluciones inovadoras en el diseño
contemporáneo. Barcelona: Gustavo Gili, 1998.
MORAES, Anamaria de. Design e avaliação de interface. Rio de Janeiro: iUsEr, 2002. 148 p.
MUNARI, Bruno. Das coisas nascem coisas. São Paulo: Martins Fontes, 1998.
MEURER, Heli; SZABLUK, Daniela. Projeto E: aspectos metodológicos para o
desenvolvimento de projetos dígito-virtuais. 2010. 246 f. Tese de Doutorado - Universidade
Federal do Rio Grande do Sul. In: Ação Ergonômica. Volume 5, Número 2, Nov/2010 ISSN
1519-7859, 2010.
MindMiners. O boom dos smartphones e seu impacto no comportamento do consumidor.
Disponível em <https://mindminers.com/consumo/pesquisa-mobile >> Acesso em agosto de
12/08/2018.
122
MOURA, Monica. Faces do design. São Paulo: Rosari, 2003.
NIELSEN, J., & LORANGER, H. Usabilidade na web. (E. Furmankiewicz, & C.
Schafranki, Trans.) Rio de Janeiro: Elsevier Editora, 2007.
NIELSEN, Jakob. Usabilidade na Web: Projetando Websites na Web. 5. ed. Rio de Janeiro:
Editora Elsevier, 2007.
NORMAN, Donald A. Design Emocional: por que adoramos (ou detestamos) os objetos do
dia-a-dia. Rio de Janeiro: Rocco, 2008.
NIELSEN, Jakob. Usability Engineering. (ISBN13: 9780125184069),1994.
PREECE, J., ROGERS, Yvonne., SHARP, Helen. Design de Interacão. Reimpressão, Porto
Alegre: Editora Bookman, 2005.
UX Design Brasil. 8 regras de ouro do design de interfaces. Disponível em
https://brasil.uxdesign.cc/as-8-regras-de-ouro-do-design-de-interfaces-f188cf75f9b7 > Acesso
em 18/10/2017.
OLIVEIRA, Caio Cesar G. Vamos fazer design de interação? [e-book], 2014.
PADOVANI, Stephania. MORAES, Anamaria de. Avaliação ergonômica de sistemas de
navegação em hipertextos fechado. Design e Avaliação de Interface. Rio de Janeiro, iUsEr,
27-58, 2002.
Projeto E. Metodologia projetual como modelo de aprendizagem baseada em projeto.
Disponível em < http://projetoe.com/#sthash.7rjdmk6A.dpbs> Acesso em 02/12/2017.
PETRIE, Helen; BEVAN, Nigel. The evaluation of accessibility, usability and user
experience. In: STEPHANDIS, Constantine. The universal access handbook. Boca Raton,
Petrie, Helen & Bevan, Nigel. (2009). The Evaluation of Accessibility, Usability, and User
Experience. C Stepanidis. 10.1201/9781420064995-c20. 2009. Disponível em: <
https://www.taylorfrancis.com/books/9781420064995>. Acesso em 15/11/2017.
123
REIS, Guilhermo Almeida dos. Centrando a Arquitetura de Informação no usuário.
SãoPaulo, 2007. 250 f. Dissertação (Mestrado em Ciência da Informação) – Escola de
Comunicação e Artes/USP, São Paulo, 2007. Disponível em: <
http://www.teses.usp.br/teses/disponiveis/27/27151/tde-23042007-141926/pt-br.php> Acesso
em 25/02/2018.
TEIXEIRA, Fabrício. Introdução e boas práticas em UX Design [e-book]. Vila Mariana, São
Paulo: Casa do Código, 2014.
UX Design Brasil. Qual a diferença entre Design de Interação e UX Design? Disponível em
< https://brasil.uxdesign.cc/qual-a-diferenca-entre-design-de-interacao-e-ux-design-
66f8a4f140f > Acesso em 21/10/2017.
UX Blog.Os três níveis de design de Don Norman. Disponível em
<https://uxdesign.blog.br/os-tr%C3%AAs-n%C3%ADveis-de-design-de-don-norman-
38c565e2aa64> Acesso em 27/11/2017.
UNGER, Russ; CHANDLER, Carolyn. O Guia Para Projetar UX 1. Ed. Rio de Janeiro: Alta
Books, 2009.
124
APÊNDICES
APÊNDICE A - QUESTIONÁRIO REDES SOCIAIS QUADRINHOS
125
126
APÊNDICE B – QUESTIONÁRIO DO LEAGUE OF COMICGEEK
127
128
APÊNDICE C – QUESTIONÁRIO DO TESTE PILOTO
129
130
131
APÊNDICE D – QUESTIONÁRIO DO TESTE FINAL DE USABILIDADE
132
133
134
135
136
137
138
139
140
141
142
