UNIVERSIDADE DE CAXIAS DO SUL IGOR BARAZZETTI · 6.1 MAPA DO . SITE. E FLUXO DE ... conceitual...

176
UNIVERSIDADE DE CAXIAS DO SUL IGOR BARAZZETTI A RELEVÂNCIA DO DESIGN DE UX NA QUALIFICAÇÃO DA RELAÇÃO DO USUÁRIO COM INTERFACES WEB CAXIAS DO SUL 2014

Transcript of UNIVERSIDADE DE CAXIAS DO SUL IGOR BARAZZETTI · 6.1 MAPA DO . SITE. E FLUXO DE ... conceitual...

Page 1: UNIVERSIDADE DE CAXIAS DO SUL IGOR BARAZZETTI · 6.1 MAPA DO . SITE. E FLUXO DE ... conceitual sobre definição de testes de usabilidade. Utilizamos Unger e Chandler ... durante

UNIVERSIDADE DE CAXIAS DO SUL

IGOR BARAZZETTI

A RELEVÂNCIA DO DESIGN DE UX NA QUALIFICAÇÃO DA RELAÇÃO DO

USUÁRIO COM INTERFACES WEB

CAXIAS DO SUL

2014

Page 2: UNIVERSIDADE DE CAXIAS DO SUL IGOR BARAZZETTI · 6.1 MAPA DO . SITE. E FLUXO DE ... conceitual sobre definição de testes de usabilidade. Utilizamos Unger e Chandler ... durante

IGOR BARAZZETTI

A RELEVÂNCIA DO DESIGN DE UX NA QUALIFICAÇÃO DA RELAÇÃO DO

USUÁRIO COM INTERFACES WEB

Trabalho de Conclusão de Curso apresentado como requisito para graduação no curso de Comunicação Social – Publicidade e Propaganda.

Orientadora: Prof.ª Dr.ª Marlene Branca Sólio.

CAXIAS DO SUL

2014

Page 3: UNIVERSIDADE DE CAXIAS DO SUL IGOR BARAZZETTI · 6.1 MAPA DO . SITE. E FLUXO DE ... conceitual sobre definição de testes de usabilidade. Utilizamos Unger e Chandler ... durante

IGOR BARAZZETTI

A RELEVÂNCIA DO DESIGN DE UX NA QUALIFICAÇÃO DA

RELAÇÃO DO USUÁRIO COM INTERFACES WEB

Trabalho de Conclusão de Curso apresentado como requisito para graduação no curso de Comunicação Social – Publicidade e Propaganda.

Aprovado em __/__/____

Banca Examinadora

________________________________ Prof.ª Dr.ª Marlene Branca Sólio Universidade de Caxias do Sul – UCS

________________________________ Prof. Me. Marcelo Wasserman Universidade de Caxias do Sul – UCS

________________________________ Prof.ª Ma. Alessandra Pinto Nora Universidade de Caxias do Sul – UCS

Page 4: UNIVERSIDADE DE CAXIAS DO SUL IGOR BARAZZETTI · 6.1 MAPA DO . SITE. E FLUXO DE ... conceitual sobre definição de testes de usabilidade. Utilizamos Unger e Chandler ... durante

DEDICATÓRIA

Aos meus pais, pelo apoio e confiança que sempre depositaram em mim, e a todos aqueles que, direta ou indiretamente, contribuíram para que eu realizasse este trabalho.

Page 5: UNIVERSIDADE DE CAXIAS DO SUL IGOR BARAZZETTI · 6.1 MAPA DO . SITE. E FLUXO DE ... conceitual sobre definição de testes de usabilidade. Utilizamos Unger e Chandler ... durante

AGRADECIMENTOS

Agradeço aos meus pais, não apenas pelo incentivo e pelos esforços

despendidos para que eu pudesse conquistar esta jornada acadêmica, mas, por eles

terem me educado com honra, princípios e determinação, formando-me uma pessoa

digna.

A minha orientadora, Prof.ª Dr.ª Marlene Branca Sólio, pela paciência, pelas

merecidas e necessárias cobranças, e por facilitar e guiar a estruturação do meu

trabalho de forma competente, clara e objetiva.

A minha namorada, Daniella Bassani, pela dedicação, carinho e por todos os

auxílios prestados na organização de tarefas acadêmicas nos últimos anos.

Aos verdadeiros amigos, que sempre caminharam ao meu lado.

Page 6: UNIVERSIDADE DE CAXIAS DO SUL IGOR BARAZZETTI · 6.1 MAPA DO . SITE. E FLUXO DE ... conceitual sobre definição de testes de usabilidade. Utilizamos Unger e Chandler ... durante

RESUMO

Falaremos, neste trabalho, sobre Design de Experiência do Usuário (UX). Especificamente, sobre a relevância do Design de UX na qualificação da relação do usuário com interfaces digitais. Partimos do seguinte problema de pesquisa: O Design de UX pode melhorar a relação do usuário com uma interface de software ou website? Ele tem como objetivo geral avaliar a importância do Design de UX na qualificação da relação do usuário com interfaces digitais. Seus objetivos específicos são: estudar o contexto em que se desenvolvem as interações com interfaces digitais; conceituar, tensionando design, design de interação, design de interfaces, design visual, usabilidade, arquitetura da informação, design de UX; e explicar a importância da participação do usuário na construção e melhoria de uma interface. Para sua elaboração, partimos das seguintes hipóteses: o Design de UX tem importância fundamental na relação do usuário com interfaces digitais; o contexto em que se desenvolvem as interações digitais traz novas formas de relação usuário/usuário e usuário/interfaces; o conhecimento sobre as especificidades dos conceitos de design, design de UX, design de interfaces e usabilidade é fundamental na construção da relação do usuário com as interfaces, bem como a participação ativa do usuário na sua construção e melhoria. Para atingirmos nossos objetivos e buscarmos validar nossas hipóteses, adotamos o método de pesquisa bibliográfica, por ser um tema bastante teórico, e, em seguida, o método de análise crítica/comparativa, aplicada por meio de testes qualitativos e quantitativos, os quais foram colocados em prática no campo.

Palavras-chave: Design de UX. Usabilidade. Interfaces digitais.

Page 7: UNIVERSIDADE DE CAXIAS DO SUL IGOR BARAZZETTI · 6.1 MAPA DO . SITE. E FLUXO DE ... conceitual sobre definição de testes de usabilidade. Utilizamos Unger e Chandler ... durante

ABSTRACT

We'll talk in this project about User Experience Design (UX). Specifically, about the relevance of UX design in qualifying user relation with digital interfaces. We start with the following research problem: The UX Design can improve the user relationship with software or website interfaces? He has the general objective to evaluate the importance of UX design in qualifying user relationship with digital interfaces. Its specific objectives are: study the context in which interactions with digital interfaces are developed; conceptualize, tensioning design, interaction design, interface design, visual design, usability, information architecture, UX design; and explain the importance of user involvement in the construction and improvement of an interface. For its preparation, we set the following assumptions: the UX design has fundamental importance in user relation with digital interfaces; the context where digital interactions are developed brings new forms of user/user and user/interfaces relationship; The knowledge about the specifics of the concepts of design, UX design, interface design and usability is fundamental in building the user relationship with interfaces as well as the active participation of the user in its construction and improvement. To achieve our goals and seek to validate our hypotheses, we adopted the method of literature review, to be a rather theoretical issue, and then the method of critical/comparative analysis, applied by means of qualitative and quantitative tests, which were placed into practice in the field.

Keywords: UX Design. Usability. Digital interfaces.

Page 8: UNIVERSIDADE DE CAXIAS DO SUL IGOR BARAZZETTI · 6.1 MAPA DO . SITE. E FLUXO DE ... conceitual sobre definição de testes de usabilidade. Utilizamos Unger e Chandler ... durante

LISTA DE FIGURAS

Figura 1 – Fita de Moebius ....................................................................................... 22

Figura 2 – Relação entre disciplinas acadêmicas, práticas de design e campos

interdisciplinares que se preocupam com design de interação ................................ 35

Figura 3 – Exemplo de contrastes no G1, o portal de notícias da Globo. ................ 40

Figura 4 – Exemplo de layout baseado em grid........................................................ 41

Figura 5 – Exemplo de um mapa de site simples ..................................................... 51

Figura 6 – Exemplo de um fluxo de navegação ....................................................... 52

Figura 7 – Exemplo de wireframes com notas de design de interação .................... 53

Figura 8 – Wireframe do site da CNN ao lado de seu design visual ........................ 54

Figura 9 – Página inicial do site AliExpress ............................................................ 58

Page 9: UNIVERSIDADE DE CAXIAS DO SUL IGOR BARAZZETTI · 6.1 MAPA DO . SITE. E FLUXO DE ... conceitual sobre definição de testes de usabilidade. Utilizamos Unger e Chandler ... durante

SUMÁRIO

1 INTRODUÇÃO ........................................................................................... 10

2 MÉTODO .................................................................................................... 15

3 CIBERESPAÇO E INTERNET ................................................................... 20

4 DESIGN DE UX .......................................................................................... 25

4.1 ELEMENTOS DA UX ................................................................................. 26

4.1.1 Interface .................................................................................................... 26

4.1.2 Interatividade ........................................................................................... 27

4.1.3 Usabilidade ............................................................................................... 29

4.1.3.1 Arquitetura da informação .......................................................................... 32

4.1.4 Acessibilidade .......................................................................................... 33

4.1.5 Design de interação ................................................................................. 34

4.1.6 Design visual ............................................................................................ 37

5 INICIANDO UM PROJETO DE UX ............................................................ 43

5.1 USUÁRIOS E SUAS NECESSIDADES ..................................................... 43

5.1.1 Definindo os objetivos do projeto .......................................................... 44

5.1.2 Pesquisa de usuário ................................................................................. 46

5.1.3 Escolha de técnicas .................................................................................. 46

5.1.4 Personas .................................................................................................... 48

6 APLICAÇÃO DA UX: PLANEJAMENTO E PROTOTIPAGEM ................ 50

6.1 MAPA DO SITE E FLUXO DE TAREFAS .................................................. 50

6.2 WIREFRAMES ........................................................................................... 52

6.3 PROTÓTIPOS INTERATIVOS ................................................................... 55

6.4 TESTES DURANTE E APÓS IMPLEMENTAÇÃO ..................................... 55

6.5 MANTENDO OS TESTES .......................................................................... 56

7 TESTES DE CAMPO ................................................................................. 57

7.1 PROCESSO APLICADO ............................................................................ 57

Page 10: UNIVERSIDADE DE CAXIAS DO SUL IGOR BARAZZETTI · 6.1 MAPA DO . SITE. E FLUXO DE ... conceitual sobre definição de testes de usabilidade. Utilizamos Unger e Chandler ... durante

7.2 ANÁLISE DE RESULTADOS ...................................................................... 66

7.2.1 Pesquisa quantitativa ................................................................................ 66

7.2.2 Pesquisa qualitativa .................................................................................. 96

8 CONSIDERAÇÕES FINAIS ...................................................................... 123

REFERÊNCIAS BIBLIOGRÁFICAS ...................................................................... 127

APÊNDICE ............................................................................................................. 130

Page 11: UNIVERSIDADE DE CAXIAS DO SUL IGOR BARAZZETTI · 6.1 MAPA DO . SITE. E FLUXO DE ... conceitual sobre definição de testes de usabilidade. Utilizamos Unger e Chandler ... durante

10

1 INTRODUÇÃO

Iniciei minha carreira profissional em 2004, logo após o término do ensino

médio. Sempre tive interesse por disciplinas voltadas às ciências humanas,

principalmente no que diz respeito a design e comportamento.

Tive as primeiras experiências com design quando atuei como designer de

interfaces web. Desde então, continuei aprendendo e acompanhando um mercado

que se desenvolve em ritmo acelerado.

Novas segmentações do design foram surgindo e tornando-se mais

importantes para a qualificação de projetos que envolvam interações entre humanos

e interfaces, ou objetos abstratos. No meio web, onde desenvolvo, atualmente, a

maior parte de meu trabalho, comenta-se constantemente sobre a importância de

uma das últimas especificidades que surgiram nos últimos anos na área do design:

O Design de User Experience (UX).

Sendo assim, estou disposto a aprofundar meus conhecimentos nesse

assunto, com o intuito de evidenciar a importância da correta aplicação dos

conceitos dessa nova disciplina no desenvolvimento de interfaces digitais.

Este trabalho aborda, especificamente, o Design de Experiência do Usuário

(UX) – sua relevância na qualificação da relação do usuário com interfaces digitais.

A pesquisa partiu da seguinte questão: O Design de UX pode melhorar a

relação do usuário com uma interface de software ou website? O propósito é avaliar

a importância do Design de UX na qualificação da relação do usuário com interfaces

digitais. Seus objetivos específicos são: estudar o contexto em que se desenvolvem

as interações com interfaces digitais; conceituar, tensionando, design, design de

interação, design de interfaces, design visual, usabilidade, arquitetura da

informação, design de UX; e explicar a importância da participação do usuário na

construção e melhoria de uma interface. Para sua elaboração, partimos das

seguintes hipóteses: o Design de UX tem importância fundamental na relação do

usuário com interfaces digitais; o contexto em que se desenvolvem as interações

digitais traz novas formas de relação usuário/usuário e usuário/interfaces; o

conhecimento sobre as especificidades dos conceitos de design, design de UX,

design de interfaces e usabilidade é fundamental na construção da relação do

usuário com as interfaces, bem como a participação ativa do usuário na construção

e melhoria de uma interface. Para atingir os objetivos e validar nossas hipóteses,

Page 12: UNIVERSIDADE DE CAXIAS DO SUL IGOR BARAZZETTI · 6.1 MAPA DO . SITE. E FLUXO DE ... conceitual sobre definição de testes de usabilidade. Utilizamos Unger e Chandler ... durante

11

adotamos o método de pesquisa bibliográfica, por ser um tema com grande

quantidade de conteúdo teórico, e o método da análise crítica/comparativa aplicada

por meio de testes qualitativos e quantitativos colocados em prática no campo.

Primeiramente, utilizamos a pesquisa bibliográfica. Para Duarte e Barros

(2006), a pesquisa bibliográfica trata de um conjunto de procedimentos que visa a

identificar informações, selecionar documentos referentes ao tema pesquisado e

fazer anotações e fichamentos dos mesmos, para que seja possível a sua utilização

no trabalho acadêmico.

O Design de Experiência do Usuário é um assunto com grande carga teórica

e muita aplicação prática. Ao longo dos anos, muita bibliografia foi desenvolvida

sobre esse tema, fornecendo, assim, grandes possibilidades de compreensão por

meio desse método de pesquisa.

Para a análise crítica/comparativa, coletamos informações por meio de

técnicas de pesquisa qualitativa como as entrevistas filmadas, assim como dados

quantitativos por meio de avaliação ergonômica, que incluiu lista de verificação, guia

de recomendação e critérios heurísticos.

Aprofundamos esses estudos guiados pelas definições de alguns conceitos

basais (Design de UX, Usabilidade e Interfaces Digitais) que orientam a estrutura

desta monografia.

Com a introdução e método explanados, partimos ao conteúdo teórico no

terceiro capítulo, que define ciberespaço por meio de Lévy (2000) e Lemos (2004).

Fala um pouco sobre a internet e sua história, utilizando Castells (1999) e Dizard

(2000).

O quarto capítulo é um aprofundado estudo bibliográfico sobre os principais

elementos que compõem o tema central deste trabalho, o Design de UX. Para definir

esses conceitos, utilizamos o conteúdo produzido por Nielsen e Loranger (2007),

Krug (2008), Agner (2006), Donald Norman (2006), Monteiro (2013), Pedro (2013),

Garret (2011), Pereira (2014), Rogers; Sharp e Preece (2005) e, principalmente,

Unger e Chandler (2009).

O quinto capítulo introduz as primeiras etapas de um projeto de UX, fala sobre

o usuário e suas necessidades, traz conceitos fundamentais para definição de

objetivos de um projeto e dos seus públicos-alvo. Inicia, também, o conteúdo

conceitual sobre definição de testes de usabilidade. Utilizamos Unger e Chandler

(2009) e Nielsen e Loranger (2007) para construção do conteúdo.

Page 13: UNIVERSIDADE DE CAXIAS DO SUL IGOR BARAZZETTI · 6.1 MAPA DO . SITE. E FLUXO DE ... conceitual sobre definição de testes de usabilidade. Utilizamos Unger e Chandler ... durante

12

O sexto capítulo, guiado por Unger e Chandler (2009), Nielsen e Loranger

(2007) e Donald Norman (2006), inicia a aplicação prática da UX desde seu

planejamento e prototipagem, utilizando mapas de fluxo e wireframes, até a fase de

testes e finalização por meio do design visual e desenvolvimento de seu código.

O sétimo capítulo mostra algumas aplicações práticas do conteúdo teórico

utilizadas em testes de campo com usuários reais.

A importância deste estudo justifica-se nos próximos parágrafos. Percebe-se

que, na contemporaneidade, o homem vive uma transformação significativa na sua

percepção de mundo, na forma como constrói suas relações e na maneira como

desenvolve o seu comportamento. A história nos mostra uma ligação íntima entre

esse fenômeno e o significativo avanço tecnológico, que se inicia no século XVIII,

durante a Revolução Industrial1, e dá origem ao desenvolvimento da tecnologia, que

permitiu a criação da internet e do ambiente virtual na qual é construído o principal

objeto de estudo deste trabalho.

A maneira como o ser humano interage com outros seres humanos, e os

reflexos que as evoluções tecnológicas e da internet trouxeram, resultam em

mudanças constantes nas formas de percepção, e trazem a necessidade de um

estudo aprofundado sobre a elaboração de páginas web. Inserindo a internet e as

páginas web no que chamamos de ambientes virtuais, faz-se necessária a

conceituação de virtual. Para Lévy (2000, p. 15):

A palavra virtual vem do latim mediaval virtualis, derivado por sua vez de virtus, força, potência. Na filosofia escolástica, é virtual o que existe em potência e não em ato. O virtual tende a atualizar-se, sem ter passado no entanto à concretização efetiva ou formal. A árvore está virtualmente presente na semente. Em termos rigorosamente filosóficos, o virtual não se opõem ao real, mas ao atual: virtualidade e atualidade são apenas duas maneiras de ser diferentes.

Com o surgimento desses ambientes virtuais, houve a necessidade de

desenvolver novos objetos de estudos específicos no design. Para construção de

ambientes virtuais, destaca-se dentre essas especificidades, o Design de

Experiência do Usuário. Essa abrangente área do design traz elementos

fundamentais para a relação do usuário com interfaces web. O tema está em grande

1 Segundo o site suapesquisa.com (2013), a Revolução Industrial teve início no século XVIII, na

Inglaterra, com a mecanização dos sistemas de produção. Enquanto na Idade Média o artesanato era a forma de produzir mais utilizada, na Idade Moderna tudo mudou. Esse período foi marcado pelo grande salto tecnológico nos transportes e máquinas. As máquinas a vapor, principalmente os gigantes teares, revolucionaram o modo de produzir.

Page 14: UNIVERSIDADE DE CAXIAS DO SUL IGOR BARAZZETTI · 6.1 MAPA DO . SITE. E FLUXO DE ... conceitual sobre definição de testes de usabilidade. Utilizamos Unger e Chandler ... durante

13

evidência no meio digital, e é um trabalho muito importante para as empresas que

trabalham ou têm seus serviços divulgados na internet, pois busca garantir que o

usuário se relacione de maneira satisfatória com as interfaces projetadas, obtendo

uma experiência rica, envolvente e afetiva ao utilizá-las. Segundo Paes Pedro (2011,

s. p.):

UX se aplica em tudo a nossa volta e é fácil notar, que as coisas mais presentes em nossas vidas, as coisas que mais adoramos tiveram no usuário sua chave para o sucesso. O design de UX pode ser uma embalagem, um jogo, um site, um hot site, uma torradeira. Qualquer coisa que possua algum nível de comunicação com um usuário.

O site UX.BLOG apresenta o conceito de UX citando as fiéis palavras de seu

real criador, Donald Norman:

Eu inventei o termo, porque eu pensei que interface humana e usabilidade eram muito restritos. Eu queria cobrir todos os aspectos da experiência da pessoa com o sistema, incluindo gráficos de desenho industrial, a interface, a interação física e o manual. Desde então, o termo se espalhou amplamente, tanto que ele está começando a perder o seu significado. UX.BLOG (2014, apud Donald Norman, década de 90)

Nesta monografia, serão estudadas, de forma aprofundada, suas

especificidades, conceituando cada um desses aspectos, com ênfase especial na

usabilidade, conceito que se insere constantemente no Design de UX. Para Nielsen

e Loranger (2007, p. xvi):

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 dele 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.

Ainda para o mesmo autor (2007, prefácio):

Há dez anos, a Web era algo diferente para as pessoas. Hoje, ela é uma rotina, é uma ferramenta. Se for de fácil acesso, elas a utilizarão, do contrário, não. Com dez vezes mais sites e provavelmente centenas de páginas na Web, os usuários estão menos tolerantes a sites complexos. Portanto, um projeto falho significa negócios perdidos. Nunca a usabilidade foi tão importante.

Page 15: UNIVERSIDADE DE CAXIAS DO SUL IGOR BARAZZETTI · 6.1 MAPA DO . SITE. E FLUXO DE ... conceitual sobre definição de testes de usabilidade. Utilizamos Unger e Chandler ... durante

14

Hoje, conceitos que eram pouco evidenciados até o início dos anos 80, como

usabilidade, interatividade, funcionalidade e navegabilidade, são fundamentais na

relação do usuário com as interfaces web. Isso justifica que se desenvolva um

estudo sobre o tema proposto, considerando que esse novo cenário desponta a

partir da sociedade centrada na tecnologia e na informação em rede, e nos traz,

também, um novo perfil de usuário que se insere e busca informações e realização

de atividades no ambiente virtual interativo, construído por meio das páginas web.

Para compreendermos como funciona o processo de leitura e decodificação

da informação do homem contemporâneo, é preciso estudar como ele se relaciona

com as interfaces projetadas nos ambientes onde se desenvolvem essas novas

interações. Assim, buscaremos práticas adequadas à execução de um projeto de

interface baseado em construir a melhor experiência possível para o usuário.

Page 16: UNIVERSIDADE DE CAXIAS DO SUL IGOR BARAZZETTI · 6.1 MAPA DO . SITE. E FLUXO DE ... conceitual sobre definição de testes de usabilidade. Utilizamos Unger e Chandler ... durante

15

2 MÉTODO

Considerando que a escolha adequada das ferramentas de trabalho é

fundamental para obter êxito em qualquer pesquisa, buscamos características

complementares em mais de um método de trabalho. O primeiro deles foi a pesquisa

bibliográfica. Segundo Duarte e Barros (2006, p. 51):

Pesquisa bibliográfica, num sentido amplo, é o planejamento global inicial de qualquer trabalho de pesquisa que vai desde a identificação, localização e obtenção da bibliografia pertinente sobre o assunto, até a apresentação de um texto sistematizado, onde é apresentada toda a literatura que o aluno examinou, de forma a evidenciar o entendimento do pensamento dos autores acrescido de suas próprias ideias e opiniões.

O mesmo autor acrescenta, ainda, que a pesquisa bibliográfica trata de um

conjunto de procedimentos que visa a identificar informações, selecionar

documentos referentes ao tema pesquisado e fazer anotações e fichamentos dos

mesmos, para que seja possível a sua utilização no trabalho acadêmico.

O Design de Experiência do Usuário é um assunto com grande carga teórica,

muita aplicação prática e é, também, um objeto de estudo que faz parte das ciências

humanas, portanto, não há fórmulas exatas que determinem um mesmo resultado

em 100% dos casos. Ao longo dos anos, o ser humano passou a entender e

interagir melhor com a tecnologia. Muita bibliografia resultante de constantes

estudos e testes, envolvendo pessoas e máquinas, foi surgindo e enriquecendo as

possibilidades de obtenção de melhores resultados, por meio da aplicação desses

conceitos. Levando isso em consideração, a pesquisa bibliográfica parece ser um

método extremamente adequado e importante para o desenvolvimento deste

projeto.

Ainda citando Duarte e Barros (2006, p. 52): ―para estabelecer as bases em

que vão avançar, alunos precisam conhecer o que já existe, revisando a literatura

existente sobre o assunto. Com isso, evitam despender esforços em problemas cuja

solução já tenha sido encontrada.‖ Essa revisão se inicia logo na formulação do

problema e se estende até a análise dos resultados.

Tendo em vista a definição do assunto, foram selecionadas algumas palavras-

chave para guiar a busca pela bibliografia mais adequada a cada uma delas.

Iniciamos com ciberespaço, facilmente definido por meio do conteúdo apresentado

Page 17: UNIVERSIDADE DE CAXIAS DO SUL IGOR BARAZZETTI · 6.1 MAPA DO . SITE. E FLUXO DE ... conceitual sobre definição de testes de usabilidade. Utilizamos Unger e Chandler ... durante

16

por Lévy (2000) e Lemos (2004). Definimos internet e falamos um pouco sobre sua

história a partir das obras de Castells (1999) e Dizard (2000).

Alguns conceitos foram inseridos no contexto do trabalho de forma muito

constante, tais como: interatividade, acessibilidade, navegabilidade, usabilidade,

funcionalidade, interface e comunicabilidade. Para esses termos, foram utilizados os

conteúdos produzidos por Nielsen e Loranger (2007), Krug (2008), Agner (2006) e

Donald Norman (2006).

A partir do momento em que iniciamos o estudo do tema principal, o Design

de Experiência do Usuário, foram acrescentados, à bibliografia já citada, alguns

novos nomes como Monteiro (2013), Pedro (2013), Garret (2011), Pereira (2014),

Rogers; Sharp e Preece (2005) e, principalmente, Unger e Chandler (2009). A obra

de Unger e Chandler (2009) foi de grande valia para esse projeto e colaborou muito

para a estruturação do roteiro. O segundo passo foi utilizar um método de análise

crítica/comparativa.

Selecionamos um site na categoria e-commerce e organizamos a interação

de diversos usuários com suas páginas. É importante ressaltar que, para participar

desse processo, foram escolhidos pelo menos três perfis de usuários diferentes,

somando um total de vinte participantes para os testes quantitativos e cinco usuários

para os testes qualitativos, como sugerem Unger e Chandler (2009) ao citar Nielsen.

O objetivo foi entender como uma mesma interface pode gerar comportamentos

diversos, dependendo do público que estiver interagindo com a mesma. Para Duarte

e Barros (2006, p. 68) ―uma boa pesquisa exige fontes que sejam capazes de ajudar

a responder sobre o tema proposto. Elas deverão ter envolvimento com o tema do

assunto, disponibilidade e disposição em falar‖.

Os testes para uma avaliação ergonômica, que incluíram lista de verificação,

guia de recomendação e critérios heurísticos, foram uma importante etapa do

trabalho de campo no projeto. Para Nascimento e Amaral (2010, p. 48):

A lista de verificação e o guia de recomendações são técnicas que permitem diagnosticar problemas gerais da interface por especialistas em usabilidade, por meio da análise da conformidade dos objetos de interação. Por meio de uma grade de análise ou lista de questões, os inspetores respondem sobre a ergonomia do projeto, gerando resultados que proporcionam vantagens em termos e rapidez de aprendizagem e facilidade de uso aos usuários.

Os mesmos autores citam como vantagens desse método a sistematização

da avaliação, que garante resultados mais estáveis, a facilidade na identificação de

Page 18: UNIVERSIDADE DE CAXIAS DO SUL IGOR BARAZZETTI · 6.1 MAPA DO . SITE. E FLUXO DE ... conceitual sobre definição de testes de usabilidade. Utilizamos Unger e Chandler ... durante

17

problemas de usabilidade e o aumento da eficácia de avaliação. Uma desvantagem

citada é que a interface pode sofrer ajustes após execução da avaliação, gerando

novos problemas de usabilidade.

Neste trabalho, concebemos as listas de verificação, para criar o questionário

quantitativo, conforme sugestões apresentadas por Nascimento e Amaral (2010),

levando em conta a divisão clássica da engenharia de usabilidade que contempla:

design da página, design do conteúdo, design do website e acessibilidade e

flexibilidade de uso para os usuários de websites.

Os questionários foram elaborados e aplicados a um grupo de usuários e,

após, coletadas as respostas para análise.

Concluídos os testes anteriores, o processo foi filmado para produzir a

primeira parte do material comparativo – o vídeo – para, em seguida, entrevistar os

usuários, levantando questões referentes à experiência que tiveram na utilização de

cada interface. A entrevista realizada teve como objetivo o levantamento de dados

qualitativos, e foram levadas em conta a diversidade e as particularidades das

informações fornecidas, pois não é possível chegar a conclusões precisas e

definitivas. O questionário para entrevistas qualitativas foi elaborado com base nos

critérios heurísticos de Nielsen, listados no capítulo seis.

Os usuários foram estimulados a falar em voz alta sobre suas percepções a

respeito da interface, evidenciando questões que lhes agradavam ou lhes

incomodavam durante a filmagem. Esse material foi, posteriormente, comparado

com as respostas dadas aos questionários das entrevistas gravadas em áudio, a fim

de analisar se suas respostas eram iguais às percepções que tivemos por meio da

análise dos vídeos e de seus comentários verbais durante a experiência filmada.

Duarte e Barros (2006, p. 63) fazem um levantamento interessante a respeito desse

tipo de entrevista:

Como nos estudos qualitativos em geral, o objetivo muitas vezes está mais relacionado à aprendizagem por meio da identificação da riqueza e diversidade, pela integração das informações e síntese das descobertas do que ao estabelecimento de conclusões precisas e definitivas. Por isso, a noção de hipótese, típica da pesquisa experimental e tradicional, tende a ser substituído pelo uso de pressupostos, um conjunto de conjeturas antecipadas que orienta o trabalho de campo. Estabelecidas limitações e condições de realização, a entrevista pode ser ferramenta bastante útil para lidar com problemas complexos ao permitir uma construção baseada em relatos da interpretação e experiências, assumindo-se que não será obtida uma visão objetiva do tema de pesquisa.

Page 19: UNIVERSIDADE DE CAXIAS DO SUL IGOR BARAZZETTI · 6.1 MAPA DO . SITE. E FLUXO DE ... conceitual sobre definição de testes de usabilidade. Utilizamos Unger e Chandler ... durante

18

Os mesmos ainda afirmam que ―nos estudos qualitativos são preferíveis

poucas fontes, mas de qualidade, a muitas, sem relevo‖ (2006, p. 63), retomando,

assim, a questão da definição de públicos para esta pesquisa. Os públicos foram:

profissionais de TI, jovens, com avançado conhecimento técnico;

jovens com menor conhecimento técnico, mas com bom domínio da

tecnologia;

adultos maduros, com menos familiaridade com a tecnologia, mas com

autonomia no uso da internet.

Os usuários citados participaram de todos os processos do método de análise

crítica/comparativa. Sabemos, por meio da literatura já citada, que existe grande

risco de o entrevistador influenciar as respostas do entrevistado, provocando

resultados tendenciosos e pouco precisos. Buscamos evitar isso ao máximo,

produzindo as gravações dos vídeos sem a presença do entrevistador e mantendo

seriedade, foco e transparência na entrevista feita com perguntas objetivas.

As entrevistas e gravações foram feitas individualmente, em ambiente onde

estavam disponíveis os recursos técnicos necessários para a realização das

experiências. A intenção era que o usuário se sentisse livre de distrações, para que

pudesse executar as tarefas de maneira mais adequada e precisa.

Após reunir todo o material necessário, foi feita a análise dos resultados.

Entendemos que era difícil analisar todo o conteúdo da coleta, devido a seu volume.

Por isso, os resultados foram escritos e sintetizados mesmo antes da obtenção de

todo o material. Para Duarte e Barros (2006, p. 78) ―analisar implica separar o todo

em partes e examinar a natureza, funções e relações de cada uma.‖ É o que foi feito

após a obtenção desse material.

Chandler (2009, p. 221) ressalta a importância da pesquisa com usuários

quando afirma que: ―a pesquisa pode oferecer inspiração para os projetistas e

reduzir parte do risco de trazer um novo produto ao mercado, porque você poderá

ouvir (e depois planejar) os tipos de reações que você pode ter com os usuários

potenciais.‖

Henry Ford disse que se ele perguntasse aos clientes dele o que eles

queriam, teriam dito que era um cavalo mais rápido. Relembrando essa memorável

Page 20: UNIVERSIDADE DE CAXIAS DO SUL IGOR BARAZZETTI · 6.1 MAPA DO . SITE. E FLUXO DE ... conceitual sobre definição de testes de usabilidade. Utilizamos Unger e Chandler ... durante

19

frase, de um dos empreendedores mais ilustres do início do século XX, Chandler

(2009, p. 222) evidencia que os participantes fornecerão respostas baseadas na sua

compreensão atual e o que buscaremos com esses testes será juntar reações e não

previsões do que eles desejam ou esperam do futuro. Por isso, é importante evitar

que os usuários façam escolhas diretas (como responder perguntas do tipo: Qual

conceito é melhor, A ou B?).

A partir da análise das experiências dos usuários, pudemos observar uma

série de aspectos do site que, se alterados, implementando as sugestões oferecidas,

resultariam no aperfeiçoamento do projeto, o que, nos parece, justifica plenamente o

uso das técnicas de UX.

Page 21: UNIVERSIDADE DE CAXIAS DO SUL IGOR BARAZZETTI · 6.1 MAPA DO . SITE. E FLUXO DE ... conceitual sobre definição de testes de usabilidade. Utilizamos Unger e Chandler ... durante

20

3 CIBERESPAÇO E INTERNET

O ser humano, no início de sua existência, expandiu-se fisicamente por toda a

superfície do planeta e, agora, começa a tecer uma grande rede digital sobre ele;

uma rede que conecta tudo a todos, dando origem ao novo conceito de ciberespaço,

como sugere Lévy (2000) na introdução de seu livro Cibercultura.

O autor nos oferece uma breve definição dos termos ciberespaço e

cibercultura, frequentemente usados em sua obra. (2000, p. 17):

O ciberespaço (que também chamarei de ―rede‖) é o novo meio de comunicação que surge da interconexão mundial de computadores. O termo especifica não apenas a infraestrutura material da comunicação digital, mas também o universo oceânico de informações que ela abriga, assim como os seres humanos que navegam e alimentam esse universo. Quanto ao neologismo ―cibercultura‖, especifica aqui o conjunto de técnicas (materiais e intelectuais), de práticas, de atitudes, de modelos de pensamento e de valores que se desenvolvem juntamente com o crescimento do ciberespaço.

Podemos entender, a partir dos conceitos propostos por esse autor, que o

ciberespaço é um espaço que existe no mundo da comunicação digital, originada

pela interconexão mundial de computadores e pela internet. Esse ambiente, no

entanto, não se limita apenas à estrutura física de computadores, mas a toda

informação que circula nesse espaço e aos seres humanos que geram essa base de

conhecimento, onde a presença física dos mesmos não se faz necessária e, ainda

assim, possibilita edificar uma rede de informação. É o espaço virtual para a

comunicação e compartilhamento de conhecimento, que é viabilizado pela

tecnologia, especialmente a internet.

Quando se fala em ciberespaço, a palavra ―virtual‖ é mencionada com

frequência, evidenciando a importância da busca por uma definição clara a respeito

da mesma. Para Lévy (2000, p. 47):

A palavra ―virtual‖ pode ser entendida em ao menos três sentidos: o primeiro, técnico, ligado a informática, um segundo corrente e um terceiro filosófico. O fascínio suscitado pela ―realidade virtual‖ decorre em boa parte da confusão entre esses três sentidos. Na acepção filosófica, é virtual aquilo que existe apenas em potência e não em ato, o campo de forças e de problemas que tende a resolver-se em uma atualização. O virtual é obviamente uma dimensão muito importante da realidade. Mas no uso corrente, a palavra virtual é muitas vezes empregada para significar a irrealidade ─ enquanto a ―realidade‖ pressupõe uma efetivação material, uma presença tangível. A expressão ―realidade virtual‖ soa então como um oximoro, um passe de mágica misterioso. Em geral, acredita-se que uma

Page 22: UNIVERSIDADE DE CAXIAS DO SUL IGOR BARAZZETTI · 6.1 MAPA DO . SITE. E FLUXO DE ... conceitual sobre definição de testes de usabilidade. Utilizamos Unger e Chandler ... durante

21

coisa deva ser ou real ou virtual, que ela não pode, portanto, possuir as duas qualidades ao mesmo tempo. Contudo, a rigor, em filosofia o virtual não se opõe ao real mas sim ao atual: virtualidade e atualidade são apenas dois modos diferentes da realidade. Se a produção da árvore está na essência do grão, então a virtualidade da árvore é bastante real (sem que seja, ainda, atual).

Após ler essa definição, temos uma interpretação mais clara das três

diferentes propostas para definição do virtual. Notamos, no entanto, que a confusão

na interpretação desse termo envolve, principalmente, o termo corrente e a acepção

filosófica. No uso corrente, o virtual é relacionado a algo que não é real pelo simples

fato de não possuir uma presença física. Porém, no aspecto filosófico, a

interpretação do virtual é mais profunda, e Lévy mostra que o virtual não está

separado da realidade e tampouco se opõe à mesma. O que existe em oposição ao

virtual é o atual. No exemplo prático de Lévy, entende-se que embora a planta possa

não ter crescido e estar presente na forma física que nossa percepção define como

―árvore‖, essa forma ainda existe, mas de uma maneira diferente, dentro da semente

até que essa forma sofra a atualização que a transformará em árvore. Outro tema

que é constantemente questionado, e que define bem esse conceito de realidade

proposta pela análise filosófica de Lévy é o aborto. Segundo o aspecto filosófico, um

óvulo fecundado representaria a existência do bebê, embora para adquirir o aspecto

humano ele precisasse sofrer uma ―atualização‖.

A Fita de Moebius é uma boa representação visual do ciberespaço. Ela

apresenta um circuito que não possui início nem fim, apenas uma face, dificultando a

identificação do dentro e do fora. Imagina-se que se uma formiga caminhasse pela

fita de Moebius, ela faria uma rota infinita, estando dentro e fora ao mesmo tempo,

representando o espaço virtual que, apesar de não possuir presença física, não se

opõe ao real. Um ambiente infinito, onde a inteligência coletiva constrói cidades de

conhecimento virtual, sem se preocupar com limitações de espaço físico.

Page 23: UNIVERSIDADE DE CAXIAS DO SUL IGOR BARAZZETTI · 6.1 MAPA DO . SITE. E FLUXO DE ... conceitual sobre definição de testes de usabilidade. Utilizamos Unger e Chandler ... durante

22

Figura 1 – Fita de Moebius

Fonte: <http://www.zimage.com/~ant/antfarm/ants/moebius-ants.jpg>

Esse ambiente é construído principalmente pelo agregado de conhecimento

da inteligência coletiva que, com transparência e livre de limitações e preconceitos,

se desenvolve nesse meio. Lévy (2000, p. 28) confirma e complementa essa

afirmação quando diz:

É aqui que intervém o papel principal da inteligência coletiva, que é um dos principais motores da cibercultura. De fato, o estabelecimento de uma sinergia entre competências, recursos e projetos, a constituição e a manutenção dinâmicas de memórias em comum, a ativação de modos de cooperação flexíveis e transversais, a distribuição coordenada dos centros de decisão, opõem-se à separação estanque entre as atividades, às compartimentalizações, à opacidade da organização social. Quanto mais os processos de inteligência coletiva se desenvolvem – o que pressupõe, obviamente, o questionamento de diversos poderes –, melhor é a apropriação, por indivíduos e por grupos, das alterações técnicas, e menores são os efeitos da exclusão ou de destruição humana resultantes da aceleração do movimento tecno-social. O ciberespaço, dispositivo de comunicação interativo e comunitário, apresenta-se justamente como um dos instrumentos privilegiados da inteligência coletiva.

Como já mencionado anteriormente, a internet é a ferramenta que viabiliza a

construção desse mundo.

Para dar continuidade, faz-se necessária uma breve introdução sobre o

surgimento desse marco tão importante da tecnologia chamado internet.

Dizard (2000) afirma que a internet é um sistema de redes de computadores

interconectados de proporções mundiais. Ela foi criada com objetivos militares

durante a guerra fria, e seria útil às forças armadas norte-americanas, para manter

as comunicações em caso de ataques inimigos que pudessem destruir os meios

convencionais de telecomunicações.

Page 24: UNIVERSIDADE DE CAXIAS DO SUL IGOR BARAZZETTI · 6.1 MAPA DO . SITE. E FLUXO DE ... conceitual sobre definição de testes de usabilidade. Utilizamos Unger e Chandler ... durante

23

Segundo Castells (2001), no início dos anos 80, o desenvolvimento e

utilização do TCP/IP2, como protocolo para a troca de informações na ARPANet

(Advanced Research Projects Agency Network), possibilitou a conexão entre redes

diferentes, aumentando bastante a sua abrangência. Em 1990, a ARPANet, ligando-

se a outras redes existentes, inclusive fora dos Estados Unidos, passou a

interconectar centros de pesquisa e universidades em todo o mundo, formando,

assim, a internet, utilizada principalmente como ferramenta de troca de informações

entre o meio acadêmico.

Segundo Monteiro (2001, p. 28), "Em 1995, devido ao grande aumento de

usuários no início da década de 1990, a internet foi transferida para a administração

de instituições não governamentais, que se encarregam, entre outras coisas, de

estabelecer padrões de infraestrutura, registrar domínios, etc."

O autor (2001, p. 28) também cita:

No Brasil, as primeiras iniciativas no sentido de disponibilizar a internet ao público em geral começaram em 1995, com a atuação do governo federal (através do Ministério da Comunicação e do Ministério de Ciência e Tecnologia) no sentido de implantar a infraestrutura necessária e definir parâmetros para a posterior operação de empresas privadas provedoras de acesso aos usuários. Desde então, a internet no Brasil experimentou um crescimento espantoso, notadamente entre os anos de 1996 e 1997, quando o número de usuários aumentou quase 1000%, passando de 170 mil (janeiro/1996) para 1,3 milhão (dezembro/1997). Em janeiro de 2000, eram estimados 4,5 milhões de ―internautas‖.

O site da UOL (2013) afirma que, em 2013, o número de internautas no Brasil

ultrapassou os 100 milhões.

O site da Revista Época (2013) registra que o primeiro website, ou página

web, foi desenvolvido no Centro Europeu de Pesquisa Nuclear (CERN), e foi

publicado no dia 6 de agosto de 1991. O físico Tim Berners-Lee escreveu uma

proposta mostrando como a informação poderia ser facilmente divulgada e

conectada por meio de hiperlinks. O projeto mostrava como conectar os

computadores pessoais dos físicos do CERN para trocar informações de pesquisas

científicas. Berners-Lee chamou esse projeto de WorldWideWeb, o nosso conhecido

www, presente no início de qualquer página web.

2 De uma forma simples, o TCP/IP é o principal protocolo de envio e recebimento de dados MS

internet. TCP significa Transmission Control Protocol (Protocolo de Controle de Transmissão) e o IP, Internet Protocol (Protocolo de Internet). Martins (2013)

Page 25: UNIVERSIDADE DE CAXIAS DO SUL IGOR BARAZZETTI · 6.1 MAPA DO . SITE. E FLUXO DE ... conceitual sobre definição de testes de usabilidade. Utilizamos Unger e Chandler ... durante

24

O primeiro endereço foi http://info.cern.ch/hypertext/WWW/TheProject.html, e

mantinha informações sobre o projeto WWW. Ele era um manual de informações, no

qual os visitantes podiam ler sobre hipertexto3, e aprender a criar sua própria página

web. Era uma página que não possuía elementos visuais, apenas texto e links4.

Ainda, segundo o site da Revista Época (2013), aos poucos, outros servidores

foram instalados e novos sites surgiram na Europa e nos Estados Unidos. Em 1994,

surgiu o primeiro navegador5 da Web para PCs e Macs, popularizando a rede. Hoje,

com mais de 80 milhões de websites e centenas de milhões de usuários, é quase

impossível imaginar a internet sem as interfaces gráficas e sem os links da rede

mundial de computadores.

A criação e distribuição de toda informação na internet somente seria possível

se existisse uma representação visual, algo em que as pessoas pudessem visualizar

e construir informação. Surgem, então, as primeiras interfaces web e, junto delas,

diversos conceitos e disciplinas destinadas a melhorar a experiência dos usuários

durante sua utilização.

3 O hipertexto é uma obra com várias entradas, onde o leitor/navegador escolhe seu percurso pelos

links. Lemos (2002, p. 130 apud Aquino) 4 Segundo Conti (2012, s. p.) Criar um link em um texto significa estabelecer uma ligação com outra

página, outro texto, que o leitor pode abrir clicando numa palavra, grupo de palavras ou em uma imagem. 5 Após Berners-Lee construir o primeiro navegador, muitos hackers passaram a tentar desenvolver

seus próprios navegadores a partir do trabalho dele. O primeiro a popularizar-se pela sua interface gráfica e capacidade de distribuir imagens pela internet foi o Mosaic, criado por Marc Andreessen e Eric Bina. Castells (2001)

Page 26: UNIVERSIDADE DE CAXIAS DO SUL IGOR BARAZZETTI · 6.1 MAPA DO . SITE. E FLUXO DE ... conceitual sobre definição de testes de usabilidade. Utilizamos Unger e Chandler ... durante

25

4 DESIGN DE UX

Design da experiência do usuário, ou, design de UX é um termo que apresenta

várias definições por se tratar de uma área muito ampla do design. Unger e Chandler

(2009, p. 3) definem o design da experiência do usuário da seguinte forma:

O design da experiência do usuário é a criação e a sincronização dos elementos que afetam a experiência dos usuários em uma empresa em particular, com a intenção de influenciar as suas percepções e seu comportamento. Esses elementos incluem as coisas que um usuário pode tocar (tais como produtos e pacotes tangíveis), ouvir (assinaturas comerciais e de áudio) e, até mesmo, sentir (o aroma do pão assado e fresco em uma loja de sanduíches). Isso inclui as coisas com que os usuários podem interagir de forma que vão além do físico, como interfaces digitais (sites na Web e aplicações em telefone celular) e, é claro, pessoas (representantes de serviço ao cliente, vendedores e amigos de família).

Unger e Chandler (2009) também afirmam que nunca se deve desconsiderar

o aspecto tangível na hora de projetar algo para o ambiente virtual. O ambiente onde

o usuário se encontra, assim como os periféricos que utiliza para a interação, fazem

parte da experiência que ele terá na utilização de um produto digital. Os autores

também ressaltam que a experiência precisa ser analisada como um todo, pois um

site bem projetado não garante uma experiência positiva para uma empresa ou

marca, visto que não pode garantir a entrega de uma embalagem de produto bem

desenhado, ou um atendimento atencioso de pós-vendas.

Percebemos que o escopo do design de UX é, sem dúvida, muito grande,

porém, focamos no projeto de uma experiência significativa aos usuários de projetos

digitais. Unger e Chandler (2009, p. 5) fazem a seguinte afirmação:

Para ser bem-sucedido, o design da experiência do usuário desses produtos deve levar em conta os objetivos de negócio do projeto, as necessidades dos usuários do produto e quaisquer limitações que afetarão a viabilidade das características do produto (como as limitações técnicas ou restrições no orçamento do projeto ou nos prazos).

Os autores (2009, p. 6) dizem que o grande desafio do projetista de UX é

manter o equilíbrio entre a lógica e a emoção. Para eles:

Para criar experiências verdadeiramente memoráveis e satisfatórias, um projetista de UX precisa entender os elementos que são importantes para criar uma conexão emocional com os usuários do produto. O equilíbrio exato pode alternar de acordo com o produto.

Page 27: UNIVERSIDADE DE CAXIAS DO SUL IGOR BARAZZETTI · 6.1 MAPA DO . SITE. E FLUXO DE ... conceitual sobre definição de testes de usabilidade. Utilizamos Unger e Chandler ... durante

26

Eles citam (2009) o exemplo de que uma propaganda de um brinquedo para

crianças terá um equilíbrio diferente de uma aplicação para um hospital; por isso, a

compreensão das necessidades do utilizador é de extrema importância. Para

entendê-las, faz-se necessária grande empatia, para imergir em seus mundos,

buscando compreender suas necessidades e motivações.

4.1 ELEMENTOS DA UX

Durante o processo de estruturação de um projeto de UX, inserem-se alguns

conceitos importantes, que precisam de clara compreensão. Conceituamos cada um

deles antes de partir aos mais práticos e iniciamos pela interface.

4.1.1 Interface

O conceito de interface pode ser muito amplo. Observando pelo sentido

técnico, como sugere Johnson (2001), interface poderiam ser as palavras impressas

em um livro, ou mesmo, as imagens em celuloide projetadas no cinema. Neste

trabalho, no entanto, estudamos esse conceito vinculando-o ―a um ofício específico

de criação de imagens, sons e palavras que podem ser manipulados em uma tela‖

(JOHNSON, 2001, p. 4).

Para Johnson (2001), o design de interface é uma fusão da arte e da

tecnologia, originada da evolução do século XX. Ele diz não existir artistas que

trabalhem no meio de comunicação da interface que não sejam, de uma maneira ou

de outra, também engenheiros. Segundo as palavras desse autor (2001, p. 11):

Os artesãos da cultura de interface não tem tempo a perder com essas divisões arbitrárias. Seu meio se reinventa a si mesmo depressa demais para admitir falsas oposições entre tipos criativos e programadores. Eles se tornaram outra coisa, uma espécie de nova fusão de artista e engenheiro ─ profissionais da interface, cyberpunks, web masters ─ incumbidos da missão épica de representar nossas máquinas digitais, de dar sentido a sua informação em sua forma bruta.

Apresentamos esses profissionais híbridos, responsáveis por criar uma

representação visual para as cidades virtuais, e um conceito superficial sobre

interfaces, porém, é necessário ir além para entender o que exatamente é uma

interface. Johnson (2001, p. 17) define da seguinte forma:

Page 28: UNIVERSIDADE DE CAXIAS DO SUL IGOR BARAZZETTI · 6.1 MAPA DO . SITE. E FLUXO DE ... conceitual sobre definição de testes de usabilidade. Utilizamos Unger e Chandler ... durante

27

Mas, afinal, que é exatamente uma interface? Em seu sentido mais simples, a palavra se refere a softwares que dão forma a interação entre usuário e computador. A interface atua como uma espécie de tradutor, mediando entre as duas partes, tornando uma sensível para a outra. Em outras palavras, a relação governada pela interface é uma relação semântica, caracterizada por significado e expressão, não por força física.

O autor menciona, também, que o computador trabalha com sinais e

símbolos, e faz suas representações por meio de pulsos elétricos de 0 ou 1 (ligado

ou desligado), enquanto os seres humanos pensam mediante palavras, conceitos,

imagens, associações. Dessa forma, parece improvável que a máquina se

comunique com um ser humano, a não ser que ela possua uma maneira de

representar-se para o usuário numa linguagem que ele possa compreender.

Para solucionar esse problema, surgiram as primeiras interfaces gráficas.

Johnson (2001) explica que a linguagem dos ―zeros e uns‖ do computador foi

transformada em representações visuais pela primeira vez em 1970, quando a Palo

Alto Research Center, da Xerox, desenvolveu a primeira interface gráfica do usuário

(GUI) que, posteriormente, foi popularizada pelo Macintosh da Apple. Hoje, é comum

associar a imagem de uma pasta, ou de uma lixeira à palavra interface. A

popularização dessas interfaces gráficas tornou fácil a utilização de computadores

por pessoas, antes alienadas pelas sintaxes complexas das linhas de comando,

causando uma grande revolução digital.

Atualmente, a grande maioria das pessoas, além do contato, utiliza alguma

interface gráfica digital. É necessário, assim, o estudo de um novo conceito – a

interatividade – a qual representa uma importante característica das interfaces

digitais.

4.1.2 Interatividade

Lemos e Palácios (2004) dizem que a interatividade é um termo que ganhou

expressão, na atualidade, com a disseminação das novas tecnologias. Para eles,

esse termo é usado de diferentes formas nos meios de comunicação, portanto, pode

remeter a variados significados. Na televisão, por exemplo, um programa interativo

seria aquele em que o telespectador pode, por meio de ligações telefônicas,

escolher entre uma das opções oferecidas pelo apresentador. No caso de um

programa de rádio, pode-se exemplificar uma situação em que esteja ocorrendo uma

Page 29: UNIVERSIDADE DE CAXIAS DO SUL IGOR BARAZZETTI · 6.1 MAPA DO . SITE. E FLUXO DE ... conceitual sobre definição de testes de usabilidade. Utilizamos Unger e Chandler ... durante

28

sondagem de opinião, da qual os ouvintes participam por meio de ligação telefônica.

Outra possibilidade de interação é um jogo de videogame, em que o jogador executa

comandos de forma a agir como se fosse um dos personagens do jogo.

O termo interatividade origina-se da palavra interação; Lemos e Palácios

(2004, p. 174) julgam importante diferenciar os dois termos, e definem interação da

seguinte forma:

Partindo da etimologia da palavra ―interação‖, como propõem Primo (1999) e Moraes (1999), conclui-se que se trata de uma ‗ação entre entes‘ (inter + ação = ação entre). Conforme Moraes, quando falamos em interação (...) há de se pressupor que está presente uma relação entre, no mínimo, dois agentes; uma ação mútua.

Segundo os mesmos autores, ainda em sintonia com Primo e Moraes, três

fatores devem estar presentes para que haja interatividade:

deve ser uma ação comum entre dois ou mais agentes;

os agentes envolvidos devem ter a mesma possibilidade de ação de modo

a influir sobre o desenvolvimento do produto, ou seja, a ação de um deve

servir como premissa para a do outro;

as ações devem ser imprevisíveis.

Se a situação não contempla um dos itens mencionados, não há

interatividade; porém, pode haver reatividade, situação que ocorre em momentos em

que a comunicação não está dividida de forma igualitária, tornando a ação limitada

em relação ao outro agente.

Com as observações do parágrafo anterior, torna-se confuso diferenciar

interatividade de reatividade. Para simplificar esse entendimento, Lemos e Palácios

(2004, p. 179) propõe a existência de duas formas de interação: a social e a técnica.

A social seria a interação homem-homem, e a técnica, uma ação dialógica entre

homem e máquina. Primo (2008, p. 48 apud RAFAELI, 1988, p. 119) afirma que:

A interatividade requer que os comunicadores se respondam. Uma interatividade plena acontece quando uma resposta em uma sequência depende das transações anteriores e do conteúdo intercambiado. Já uma situação ou um meio são considerados por Rafaeli como reativos ou quase interativos quando aquela dependência não acontece. Comunicação de dupla-via está presente tão logo as mensagens fluem bilateralmente. Ambientes reativos requerem, adicionalmente, que as últimas mensagens se refiram às (ou sejam coerentes com as) mensagens anteriores. Interatividade plena (capacidade de resposta) difere da reação na

Page 30: UNIVERSIDADE DE CAXIAS DO SUL IGOR BARAZZETTI · 6.1 MAPA DO . SITE. E FLUXO DE ... conceitual sobre definição de testes de usabilidade. Utilizamos Unger e Chandler ... durante

29

incorporação da referência ao conteúdo, à natureza, à forma ou apenas à presença de referência anterior.

Entendemos, com base nessa citação e nas palavras de Primo (2008, apud

RAFAELI, 1988), que nem toda comunicação é interativa, mesmo que possa conter

respostas coerentes, e que interatividade não é uma característica exclusiva do

meio. Podemos observar que parte das novas tecnologias não é interativa. Primo

(2008, p. 49 apud RAFAELI, 1988) diz: "interatividade é um feedback (mas não é

seu sinônimo) que se relaciona com as mensagens anteriores e com a maneira

como essas mensagens anteriores se relacionam com aquelas que as precederam."

O mesmo autor (2008, p. 57) também define a interação em mútua e reativa.

Para ele:

Antes que suas características sejam detalhadas, pode-se adiantar que: interação mútua é aquela caracterizada por relações interdependentes e processos de negociação, em que cada interagente participa da construção inventiva e cooperada do relacionamento, afetando-se mutuamente; já a interação reativa é limitada por relações determinísticas de estímulo e resposta.

Comumente, a interatividade é uma das principais qualidades de uma

interface digital. Entramos, agora, no objetivo principal – o estudo de interfaces que

apresentam grande grau de interatividade – os websites. Conforme abordado

anteriormente, as primeiras páginas web foram escritas na linguagem HTML e seu

único objetivo era o compartilhamento de informações. Com a popularização da

internet, milhares de páginas foram criadas e, com milhões de opções disponíveis na

rede, o usuário de internet passou a ser mais seletivo quando do acesso aos sites.

Neste momento surge um novo conceito a ser aprofundado: a usabilidade, que fará

toda a diferença na qualidade de uma página web.

4.1.3 Usabilidade

Nielsen e Loranger (2007, prefácio) iniciam sua obra com uma clara

justificativa da importância do estudo da usabilidade:

Há dez anos a Web era algo diferente para as pessoas. Hoje ela é uma rotina, é uma ferramenta. Se for de fácil acesso, elas a utilizarão, do contrário, não. Com dez vezes mais sites e provavelmente centenas de páginas na Web, os usuários estão menos tolerantes a sites complexos.

Page 31: UNIVERSIDADE DE CAXIAS DO SUL IGOR BARAZZETTI · 6.1 MAPA DO . SITE. E FLUXO DE ... conceitual sobre definição de testes de usabilidade. Utilizamos Unger e Chandler ... durante

30

Portanto um projeto falho significa negócios perdidos. Nunca a usabilidade foi tão importante.

Com milhares de páginas na internet, o usuário passa a ser mais seletivo

sobre os sites que acessa e preocupa-se mais com a facilidade de uso e a

velocidade que consegue atingir seus objetivos de navegação. É para isso que a

usabilidade trabalha. Nielsen e Loranger (2007, p. xvi) a definem da seguinte forma:

A usabilidade é um atributo de qualidade relacionado à facilidade do 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.

O livro de Nielsen e Loranger (2007, p. xix), lançado no ápice da bolha da

internet, foi um grande marco, pois exerceu forte influência no comportamento dos

profissionais da internet numa época em que as empresas se preocupavam apenas

em ter sites ―legais‖, prejudicando seus próprios negócios com isso. Nielsen e

Loranger (2007, p. xix, grifos do autor) dizem:

Depois que Projetando Websites foi publicado, muitos gerentes de Internet perceberam que sites arrasadores, na verdade, arrasavam seus negócios. Eles descobriram que a melhor maneira de fazer negócios na Web era criar sites que seus clientes conseguissem usar. A Web não é televisão. As pessoas não a utilizam para se distrair, e sim com um propósito específico em mente. Elas estão prontas para interagir e participar.

Como exemplificado, a internet tem essa característica de interação e

participação. Esse detalhe estava sendo esquecido pelas empresas, mas nos dias

atuais, apesar de encontrarmos muitos equívocos de usabilidade nas páginas web,

selecionamos bons exemplos em que vários dos conceitos propostos por esse autor

são aplicados. Nielsen e Loranger (2007, p. xix) afirmam, também, que a usabilidade

se tornou mensurável, e pela taxa de sucesso podemos obter dados importantes

sobre a qualidade de navegação dos usuários e, mediante essas informações,

aprimorar sua experiência.

Grande parte deste trabalho foi baseada em testes de usabilidade realizados

com usuários reais. Nielsen e Loranger (2007, p. 17) defendem essa prática. Ele

afirma que basear-se apenas nas diretrizes de testes já realizados, e em seu livro,

Page 32: UNIVERSIDADE DE CAXIAS DO SUL IGOR BARAZZETTI · 6.1 MAPA DO . SITE. E FLUXO DE ... conceitual sobre definição de testes de usabilidade. Utilizamos Unger e Chandler ... durante

31

não é suficiente, visto que o comportamento humano é variável. Em alguns casos,

apenas o profissional poderá identificar circunstâncias que são específicas para um

determinado projeto. Os autores (2007, p. 17) concluem afirmando: ―é

simultaneamente verdadeiro que você deve seguir a ampla maioria das diretrizes e

não deve seguir algumas outras‖.

Uma diretriz bastante popular, difundida por Nielsen e Loranger (2007), é

sobre o tempo que um website tem para capturar a atenção de um usuário. Ele

afirma que na primeira vez que um visitante acessa um site, o tempo que ele possui

para comunicar-se e capturar sua atenção é de menos de dois minutos. Se a página,

quando chamada, não for objetiva o bastante para justificar sua importância de

maneira clara, o utilizador rapidamente partirá para a próxima opção, acessando

outra página na internet.

Tendo sucesso na primeira captação, é provável que o usuário navegue pelo

site, e, se esse possuir boa usabilidade, as chances de que sua experiência seja

positiva e ele atinja seu objetivo são grandes. A partir desse momento, tudo se torna

mais fácil. Nilsen (2007, p. 22) afirma:

Como os usuários escolhem os sites com base nas experiências anteriores com eles, os sites com alta usabilidade tem melhor chance de serem selecionados. Além disso, sucesso chama sucesso: os usuários se aprimoram na utilização de sites que visitam habitualmente. Por exemplo, se você já comprou nove livros na amazon.com, será mais fácil comprar o décimo livro do que foi comprar o primeiro.

Medir a satisfação de um usuário é um tanto complicado. Normalmente, as

avaliações subjetivas não levam a um indicador confiável, pois a maioria das

pessoas costuma dar avaliações mais positivas do que a real experiência que

tiveram. Nielsen e Loranger (2007, p. 26) explicam porque isso ocorre quando

dizem:

Em geral, avaliações subjetivas de satisfação não são uma medida de usabilidade muito informativa porque os usuários tendem a atribuir avaliações generosas mesmo quando têm grandes dificuldades ao utilizar um site. Uma razão disso é o desejo humano geral de ser gentil e aceito. Outra razão é que os usuários frequentemente não sabem como foi seu desempenho ao testar um site. Se encontrarem informações para seus problemas, eles acreditam que o site foi útil – não percebem que esse site poderia conter informações muito mais relevantes que não foram prontamente disponibilizadas para eles.

Page 33: UNIVERSIDADE DE CAXIAS DO SUL IGOR BARAZZETTI · 6.1 MAPA DO . SITE. E FLUXO DE ... conceitual sobre definição de testes de usabilidade. Utilizamos Unger e Chandler ... durante

32

Perguntar a opinião dos usuários, portanto, não é uma boa diretriz. Por isso,

Nielsen e Loranger (2007, p. 26) sugerem que o usuário seja observado. Eles dizem:

Observar como os usuários se saíram nas tarefas de escopo Web informa como as pessoas abordam websites quando elas não têm nenhuma predisposição de utilizar um site específico. Isso é comum quando os usuários estão tentando algo novo, como pesquisar a compra de algo que eles ainda não compraram e essa é exatamente a situação em que um website precisa ser o mais competitivo e atraente possível.

O certo a fazer pode parecer óbvio: identificar e corrigir todos os erros de

usabilidade do site. Mas, a tarefa não é tão simples assim. Muitas vezes, o volume

de melhorias identificado é muito grande, e executar todas as correções pode exigir

mais tempo e dinheiro do que o planejado. Para isso, Nielsen e Loranger (2007, p.

124) sugerem que seja analisada a gravidade de cada problema. Nas suas próprias

palavras: ―Para cada problema de usabilidade no site, você precisa pesar a

gravidade do problema em relação aos esforços exigidos para corrigi-lo.‖ O autor

propõe alguns modelos para identificar a gravidade dos problemas, os quais serão

aprofundados no final do trabalho.

4.1.3.1 Arquitetura da informação

A arquitetura da informação também é fator determinante para a usabilidade.

A respeito disso, Nielsen e Loranger (2007, p. 171) afirmam:

Design caótico leva a becos sem saída e desperdício de esforços. Websites prematuramente colocados online e sem um esquema informacional efetivo impedem que usuários consigam as informações que eles buscam. Quando isso acontece, esses usuários podem desistir ou, pior ainda, ir a um outro site. Um site bem estruturado fornece aos usuários o que eles querem no momento certo.

Os autores (2007) ainda dizem que o maior elogio que um site pode receber é

quando as pessoas não fazem comentários a respeito da sua estrutura, pois

preocupar-se com isso é trabalho do designer e não do usuário. Para os autores

(2007), a importância do feedback dos clientes está na hora de projetar a estrutura

de um site. É muito comum que empresas estruturem seu site de acordo com seu

modelo organizacional interno, ou pior, de acordo com preferências pessoais de

gerentes e profissionais internos. Para Nielsen e Loranger (2007, p. 173), esse erro

pode custar muito caro. Eles dizem:

Page 34: UNIVERSIDADE DE CAXIAS DO SUL IGOR BARAZZETTI · 6.1 MAPA DO . SITE. E FLUXO DE ... conceitual sobre definição de testes de usabilidade. Utilizamos Unger e Chandler ... durante

33

Tentar projetar a estrutura do seu site sem o feedback dos seus clientes é um grande equívoco que pode lhe custar muito dinheiro. Independente do visual e grau de sofisticação do seu site, ele é inútil se não fizer sentido a seu público-alvo. Projete para a conveniência deles, não para a sua.

Vimos que a usabilidade é uma disciplina ampla e que seu principal objetivo é

facilitar o uso. No entanto, existe um conceito que deve ser trabalhado lado a lado

com a usabilidade. Estamos falando da acessibilidade.

4.1.4 Acessibilidade

A acessibilidade está diretamente relacionada com a usabilidade. Krug (2008)

diz que um site não pode ser considerado usável se não for acessível, ―a não ser

que você tome a decisão de que as pessoas com deficiência não fazem parte do seu

público‖ (p.169). O autor acredita que dar atenção às questões que envolvem a

acessibilidade em um projeto é a coisa certa a fazer, e melhora a vida das pessoas.

Para Krug (2008), os desenvolvedores e projetistas costumam ser resistentes

à ideia de implementar recursos para tornar um site acessível. Segundo ele, os

principais motivos para esse comportamento se devem ao fato de que a maioria das

pessoas que convive com esses projetistas é jovem e não possui deficiências, o que

os faz desconsiderar que uma grande parcela da população precisa de auxílio para

acessar um site, e a própria dificuldade de análise e implementação desses

recursos. Ele diz (2008, p.171, grifos do autor):

A medida que aprendemos sobre acessibilidade, dois medos tendem a surgir: Mais trabalho. Para os desenvolvedores em especial, a acessibilidade pode parecer apenas mais uma coisa complicada à qual adaptar a um cronograma impossível de projeto. No pior dos casos, ela é passada como uma ―iniciativa‖ vinda de cima, completa com relatórios, exames e reuniões de forças-tarefa que consomem tempo. Projeto comprometido. O que os projetistas mais temem é o que eu chamo de gatos amanteigados: lugares onde bons projetos para pessoas com deficiências e bons projetos para todas as outras pessoas estarão em oposição direta. Eles temem ser forçados a projetar sites que sejam menos atrativos – e menos úteis – para a maioria do seu público.

Krug (2008) complementa, dizendo que tornar um site acessível é muito mais

difícil do que deveria ser. Ele acredita que se a acessibilidade ganhasse mais

presença na web, sua implementação acabaria tornando-se mais fácil. O autor

oferece algumas dicas para tornar um projeto mais acessível, tais como: consertar

Page 35: UNIVERSIDADE DE CAXIAS DO SUL IGOR BARAZZETTI · 6.1 MAPA DO . SITE. E FLUXO DE ... conceitual sobre definição de testes de usabilidade. Utilizamos Unger e Chandler ... durante

34

os problemas de acessibilidade que confundem a todos; ler artigos e livros sobre

acessibilidade; estruturar corretamente websites por meio de cascading style sheets

(css)6; e, fazer alterações específicas no HTML, para evitar alguns recursos que,

normalmente, geram problemas de compatibilidade com navegadores.

Como observado, o estudo da usabilidade contempla uma infinidade de

questões de análises complexas, para aprimorar a qualidade de um website; e a

própria acessibilidade é um fator determinante para que um site possa ser

considerado usável. Entretanto, certificar-se de que um site é usável não garante o

sucesso pleno do projeto. Isso porque o design evoluiu ao ponto de a análise da

qualidade da experiência de navegação ir muito além do simples fato de o usuário

conseguir realizar as tarefas de forma rápida e eficaz.

A partir daqui, discorremos sobre uma disciplina que se relaciona diretamente

com os conceitos já revisados. Trata-se do design de interação.

4.1.5 Design de interação

No cotidiano, constantemente, é necessário utilizar produtos interativos.

Mesmo aqueles que não estão diretamente relacionados com o ambiente virtual,

como o telefone, a geladeira e o controle remoto da televisão, exigem de seus

usuários um comportamento interativo. Para aprimorar a experiência de utilização

desses e de outros produtos, e planejar as respostas a ações interativas, contamos

com a aplicação do design de interação como uma importante etapa da UX.

Para Yvonne Rogers; Helen Sharp e Jennifer Preece (2005, p. 28), uma

definição ampla e boa de design de interação é:

Design de produtos interativos que fornecem suporte às atividades cotidianas das pessoas, seja no lar ou no trabalho. Especificamente, significa criar experiências que melhorem e entendam a forma como as pessoas trabalham, se comunicam e interagem.

Os autores (2005) evidenciam a presença de múltiplas disciplinas que se

encontram dentro do design de interação. A importância de entender como usuários

6 Krug (2006) explica que antigamente os sites eram desenvolvidos em tabelas para que os

projetistas tivessem algum controle sobre a aparência. Isso fez com que as tabelas e outros comandos de HTML passassem a ser utilizados para objetivos diferentes do qual haviam sido projetados. Após os navegadores de adaptarem ao CSS, o problema foi resolvido. Hoje, o CSS oferece vantagens enormes na sua utilização como flexibilidade, consistência, controle de aparência e facilidade na formatação de textos.

Page 36: UNIVERSIDADE DE CAXIAS DO SUL IGOR BARAZZETTI · 6.1 MAPA DO . SITE. E FLUXO DE ... conceitual sobre definição de testes de usabilidade. Utilizamos Unger e Chandler ... durante

35

se comportam e reagem a estímulos interativos fez com que profissionais de áreas

distintas, como psicólogos e sociólogos, se tornassem necessários para o

desenvolvimento dos estudos que envolvem o design de interação.

Apesar de não se limitar apenas a interfaces digitais, o design de interação

passou a ser evidenciado ainda mais com o surgimento dos computadores e dos

estudos sobre IHC (interação homem-computador). Yvonne Rogers; Helen Sharp e

Jennifer Preece (2005, p. 29) citam:

Entendemos o design de interação como fundamental para todas as disciplinas, campos e abordagens que se preocupam com pesquisar e projetar sistemas baseados em computador para pessoas. O campo interdisciplinar mais conhecido é a interação homem-computador (IHC), que se preocupa com o design, a avaliação e a implementação de sistemas computacionais interativos para uso humano e com o estudo de fenômenos importantes que o rodeiam.

Figura 2 – Relação entre disciplinas acadêmicas, práticas de design e campos interdisciplinares que se preocupam com design de interação

Fonte: Design de Interação: Além da interação homem-computador, de Yvonne Rogers; Helen Sharp e Jennifer Preece (2005, p. 29)

Segundo os mesmos autores (2005), o grande desafio com o surgimento dos

primeiros computadores era torná-los utilizáveis para pessoas sem grandes

conhecimentos técnicos. Essa utilização deveria auxiliar a realização de tarefas que

exigissem a cognição humana. Engenheiros e psicólogos uniram-se para contemplar

Page 37: UNIVERSIDADE DE CAXIAS DO SUL IGOR BARAZZETTI · 6.1 MAPA DO . SITE. E FLUXO DE ... conceitual sobre definição de testes de usabilidade. Utilizamos Unger e Chandler ... durante

36

as melhores formas de propor soluções viáveis tecnicamente, mas que respeitassem

as capacidades humanas.

Surgiram, então, painéis visuais que apresentavam formas de interação por

meio de interfaces gráficas, comumente conhecidas pela abreviação GUI (Graphical

User Interface). Muitas pesquisas foram geradas, com o objetivo de definir os

melhores padrões para desenvolvimento dessas interfaces, e, a partir disso, foram

criadas referências, que são facilmente identificadas em diferentes interfaces nos

dias de hoje, tais como: janelas, paletas, abas, menus, ícones, etc.

Referente à aplicação prática do design de interação em projetos de

desenvolvimento de interfaces web, Pereira (2014) sugere a existência de quatro

camadas que determinam um processo mais comumente usado, embora possa

sofrer algum tipo de alteração de acordo com o projeto ou tamanho da equipe.

A primeira camada é o framework de navegação. Pereira (2014, s. p.) diz:

Sempre começamos um projeto pensando em como a experiência do usuário vai acontecer. Neste momento definimos como as pessoas vão navegar pelo site ou aplicativo. Essa etapa é um dos momentos mais importantes de um projeto, pois estamos trabalhando em como o produto final vai se comportar de forma geral. É hora de saber qual será a navegação global e secundária. Todos os itens criados devem ser questionados se fazem sentido na primeira camada de navegação. O framework será a base para o desenho de todas as telas restantes.

A segunda é a arquitetura de informação detalhada. Sobre essa camada,

Pereira (2014, s. p.) diz:

Depois do framework finalizado, mapeamos a arquitetura de informação final. É ideal que a estrutura seja a mais plana possível e o usuário tenha acesso as informações através de camadas. Os itens de primeiro nível precisam ser fáceis de entender, de acordo com a linguagem do público que utilizará o produto.

A terceira é o mapeamento de conteúdo. Para Pereira (2014, s. p.):

Além de focar na arquitetura global de todo o site, temos que fazer o mapeamento do conteúdo. Não é o momento de definir o layout, mas o conteúdo que vai em cada tela. Com este trabalho feito, conseguimos enxergar as funcionalidades finais que terão no projeto e assim deixamos claro para todos os envolvidos o que precisa ser feito em termos de produção e viabilidade tecnológica.

Page 38: UNIVERSIDADE DE CAXIAS DO SUL IGOR BARAZZETTI · 6.1 MAPA DO . SITE. E FLUXO DE ... conceitual sobre definição de testes de usabilidade. Utilizamos Unger e Chandler ... durante

37

A quarta, e última camada, são os comportamentos dos elementos de

navegação. Pereira (2014, s. p.) propõe alguns questionamentos:

O site será responsivo? O menu ficará fixo no topo ao rolar a página? Os links abrem no clique ou no mouse over? Essas perguntas vão surgir lá na frente se você não pensar em cada detalhe no momento ideal. E são esses detalhes que vão fazer o seu projeto chamar atenção dos usuários e tornar a experiência marcante. É importante documentar todas as soluções no momento de produção dos wireframes.

Neste trabalho, estudamos a execução dessas etapas. Após o design de

interação ter projetado de forma responsável os recursos interativos, grande parte do

planejamento do projeto está concluído. Sendo assim, resta apenas uma etapa para

que a interface adquira uma forma utilizável para o usuário: é nesse ponto que entra

o design visual.

4.1.6 Design visual

O design visual faz parte dos elementos que compõem a última camada de

um projeto de UX, chamada de design sensorial por Garret (2011). Segundo o autor,

o design sensorial é o primeiro aspecto de um produto que será percebido pelo

usuário. Para ele (2011), o design sensorial deve se preocupar em satisfazer os

principais sentidos utilizados pelo usuário na interação do produto, sentidos esses

que podem ser a visão, audição, tato, olfato e paladar.

Para Garret (2011), o paladar e o olfato são pouco considerados por

designers de UX, por estarem relacionados à comida ou a perfumes. O tato tem

grande importância em interfaces projetadas para aplicações móveis, como celulares

e tablets. Os materiais utilizados para desenvolver os aparelhos também são de

grande importância para a experiência nesses dispositivos. A audição é explorada

com ruídos e sinais sonoros nas mesmas aplicações móveis, assim como em

interfaces web e diferentes produtos. Já o aspecto visual, é evidenciado por Garret

(2011, p. 136, tradução nossa) como ―a área onde os designers de UX têm mais

sofisticação, pois o design visual tem um papel em praticamente todos os tipos de

produtos existentes‖. O autor também diz (2011, p. 136, tradução nossa):

Inicialmente, você pode pensar que o design visual é uma simples questão de estética. Todo mundo tem um gostos diferentes, e todo mundo tem uma

Page 39: UNIVERSIDADE DE CAXIAS DO SUL IGOR BARAZZETTI · 6.1 MAPA DO . SITE. E FLUXO DE ... conceitual sobre definição de testes de usabilidade. Utilizamos Unger e Chandler ... durante

38

ideia diferente do que constitui um projeto visualmente atraente, por isso, todos os argumentos, as decisões sobre o projeto se resumem a preferências pessoais, certo? Bem, todo mundo tem uma percepção diferente de estética, mas isso não significa que decisões de design têm que ser baseadas no que parece legal para todos envolvidos.

Garret (2011) diz que, ao invés de avaliarmos ideias de design visual apenas

pela estética, devemos focar a atenção para a eficácia desse design em relação a

tudo o que foi planejado nas etapas anteriores do projeto de UX. Ele sugere que

observemos se o design, por exemplo, faz boas distinções entre diferentes seções, e

se ele ajuda o usuário a entender as opções disponíveis. O autor garante, também,

que a principal forma de reforçar a identidade da marca é pelo design visual.

Segundo as palavras de Garret (2011, p.137, tradução nossa):

Comunicar uma identidade de marca, por exemplo, é um objetivo estratégico comum em um site. A identidade da marca aparece de diferentes maneiras - na linguagem que você usa ou no design de interação das funcionalidades do seu site - mas uma das principais ferramentas usadas para se comunicar uma identidade de marca é o design visual. Se a identidade que deseja transmitir é técnica e autoritária, o uso de fontes de quadrinhos e cores pastel brilhantes, provavelmente, não é a escolha certa. Não é apenas uma questão de estética, é uma questão de estratégia.

Garrett (2011) ainda sugere que uma boa maneira de avaliar o design visual é

perguntar-se, por exemplo, onde o olho bate na primeira vista, quais elementos

chamam mais atenção, e se esses elementos que estão atraindo um nível maior de

atenção realmente são importantes para tomadas de decisões relevantes, para que

o usuário atinja os objetivos planejados.

O autor diz que, geralmente, é possível encontrar padrões na forma como as

pessoas movimentam seus olhos, e que esses movimentos instintivos são resultado

de ações inconscientes. Ele ainda complementa esse pensamento quando afirma

(2011, p.139, tradução nossa):

O movimento dos olhos do usuário pela página não acontece por acidente. Ele é o resultado de um conjunto complexo de, profundamente enraizadas, respostas instintivas aos estímulos visuais que todos os seres humanos partilham. Felizmente, para nós designers, essas respostas não estão completamente fora de nosso controle – ao longo dos séculos, desenvolvemos uma variedade de técnicas visuais eficazes para atrair e dirigir a atenção.

Para Garret (2011, p.138, tradução nossa), ―a principal ferramenta que

utilizamos para chamar atenção do usuário é o contraste‖. Ele afirma que um design

Page 40: UNIVERSIDADE DE CAXIAS DO SUL IGOR BARAZZETTI · 6.1 MAPA DO . SITE. E FLUXO DE ... conceitual sobre definição de testes de usabilidade. Utilizamos Unger e Chandler ... durante

39

sem contraste se assemelha a uma massa cinzenta, que faz com que o usuário

percorra com os olhos o objeto projetado, sem destacar nada em particular; sugere

que exploremos os contrastes entre cores, para destacar e diferenciar elementos

importantes. Segundo suas palavras (2011, p.139, tradução nossa):

O contraste é vital para direcionar a atenção do usuário para aspectos essenciais da interface, contraste ajuda o usuário a entender as relações entre os elementos de navegação da página, e o contraste é o principal meio de comunicação de grupos conceituais no design de informação. Quando os elementos em um design são diferentes, os usuários prestam atenção. Eles não podem evitar isso. Você pode usar esse comportamento instintivo a seu favor, fazendo com que as partes que os usuários realmente precisam ver se destaquem do resto dos elementos.

Garret (2011, p. 140, tradução nossa) apresenta um exemplo prático:

Mensagens de erro em interfaces Web, muitas vezes são prejudicadas ao se misturar com o resto da página; contrastar essas mensagens, colocando o texto em uma cor diferente (como, por exemplo, vermelho) ou evidenciando com um gráfico destacado pode fazer toda a diferença.

Page 41: UNIVERSIDADE DE CAXIAS DO SUL IGOR BARAZZETTI · 6.1 MAPA DO . SITE. E FLUXO DE ... conceitual sobre definição de testes de usabilidade. Utilizamos Unger e Chandler ... durante

40

Podemos ver, como exemplo, o portal de notícias da Globo, o G1:

Figura 3 – Exemplo de contrastes no G1, o portal de notícias da Globo

Fonte: <http://g1.globo.com/>

Observando o exemplo do G1, notamos claramente o uso do contraste de

cores. O vermelho foi usado para destacar elementos importantes como o menu

principal e as manchetes das notícias. Também notamos o uso de cores

contrastantes na barra do topo para diferenciar as seções do site (notícias, esportes,

entretenimento e vídeos). O anúncio publicitário explora o mesmo conceito de

diferenciação por meio do contraste, utilizando um fundo preenchido pela cor azul, e

letreiro em amarelo.

O contraste de cores, no entanto, não é a única ferramenta importante para

um bom design visual. Garret (2011, p. 141) afirma que a ―uniformidade é importante

para assegurar que seu design comunica de forma efetiva, sem confundir ou

sobrecarregar seus usuários‖. Ele também diz, que manter a uniformidade no

Page 42: UNIVERSIDADE DE CAXIAS DO SUL IGOR BARAZZETTI · 6.1 MAPA DO . SITE. E FLUXO DE ... conceitual sobre definição de testes de usabilidade. Utilizamos Unger e Chandler ... durante

41

tamanho de elementos de design, pode ser algo muito proveitoso, principalmente em

interfaces digitais, visto que os mesmos elementos podem ser reutilizados em outras

páginas sem que seja necessário criá-los novamente.

Outra boa estratégia para manter a uniformidade é o uso de grids, como

ressalta Garret (2011). Os layouts baseados em grids utilizam um layout mestre que

pode ser utilizado para criar variações do design, esse layout encaixa elementos

dentro de uma grade, respeitando as linhas traçadas e garantindo a consistência na

distribuição de elementos. Podemos ver no exemplo a seguir:

Figura 4 – Exemplo de layout baseado em grid

Fonte: Padrões de Grids do site Quince. Disponível em <http://quince.infragistics.com/html/PatternView.aspx?name=Grid+Layout>Acesso em: 07.maio.2014

Page 43: UNIVERSIDADE DE CAXIAS DO SUL IGOR BARAZZETTI · 6.1 MAPA DO . SITE. E FLUXO DE ... conceitual sobre definição de testes de usabilidade. Utilizamos Unger e Chandler ... durante

42

Outra ferramenta fundamental para o design visual, segundo Garret (2011, p.

145, tradução nossa), são as paletas de cores e a tipografia. Ele diz:

A cor pode ser um dos mais efetivos caminhos para comunicar a identidade de uma marca. Algumas marcas são tão relacionadas a sua cor que é difícil pensar na empresa sem a sua cor vir automaticamente a nossa mente. — considere Coca-Cola, UPS, ou Kodak. Essas empresas empregaram cores específicas (vermelho, marrom, amarelo) consistentemente ao longo dos anos para criar um forte senso de suas identidades na mente do público.

Garret (2011, p. 147, tradução nossa) faz, também, uma afirmação sobre o

uso de cores, afirmando que:

A paleta de cores deve incorporar cores que se misturam permitindo uma ampla gama de usos. Na maioria dos casos, as cores mais brilhantes ou mais ousadas podem ser usadas para o primeiro plano do seu projeto - elementos para os quais você deseja chamar a atenção. Cores mais suaves são mais bem utilizadas para os elementos de fundo que não precisam saltar da página. Ter uma gama de cores para escolher nos fornece um conjunto de ferramentas para fazer escolhas de design eficazes.

Garret (2011, p. 147, tradução nossa) ressalta que ―assim como contraste e

uniformidade são importantes para outras áreas do design visual, eles

desempenham um papel vital na criação de paletas de cores também‖. Ele sugere

que não seja feita uma escolha de paleta onde as cores são muito parecidas umas

com as outras, pois isso dificultará a diferenciação e priorização de elementos para o

usuário. Ele sugere que se forem utilizados, por exemplo, tons variados de vermelho,

o designer deve certificar-se que eles são diferentes o suficiente para não confundir

o usuário.

Sobre a tipografia, Garret (2011) diz que, para algumas empresas, a tipografia

é tão importante que elas desenvolvem fontes exclusivas para garantir a

autenticidade de sua identidade visual, e cita, como exemplo, Apple e Volkswagen

como empresas que utilizam tipografia exclusiva para causar forte diferenciação.

Para ele (2011), textos em largos blocos devem priorizar a simplicidade, já

que nossos olhos ficam rapidamente cansados ao ler longos trechos de texto

escritos com fontes ornamentadas. Já, para títulos curtos, ou elementos de texto

grandes, sugere a utilização de fontes com mais personalidade, tendo cuidado para

não sobrecarregar a visão do usuário utilizando uma variedade muito grande de

fontes.

Page 44: UNIVERSIDADE DE CAXIAS DO SUL IGOR BARAZZETTI · 6.1 MAPA DO . SITE. E FLUXO DE ... conceitual sobre definição de testes de usabilidade. Utilizamos Unger e Chandler ... durante

43

5 INICIANDO UM PROJETO DE UX

Antes de iniciar um projeto de UX, é importante entender como tudo funciona,

bem como organizar a equipe que atuará no projeto. Chandler (2009, p. 10) afirma

que cada projeto tem objetivos específicos, porém todos os projetos possuem um

contexto maior que é o ecossistema do projeto. Ele inclui o ambiente e o tipo geral

do trabalho, e as pessoas com quem estamos interagindo. Ela afirma que a

compreensão desses fatores é essencial para facilitar a delegação de

responsabilidades e a comunicação de ideias para todos os envolvidos no projeto.

A autora diz, também, (2009) que ao iniciar um projeto, o projetista de UX

acaba tendo que exercer vários papéis. Nesse caso, é importante saber assumir os

papéis que terá condições de desempenhar da melhor forma. Normalmente, os três

principais papéis são: arquiteto da informação, designer de interação e pesquisador

do usuário.

O arquiteto da informação, segundo Chandler (2009, p.22), ―é responsável por

criar modelos para a estrutura da informação e utilizá-los para projetar uma

navegação amigável ao usuário e dividir o conteúdo em categorias‖; o designer de

interação (2009, p. 23) ―é responsável pela definição do comportamento de um site

ou de uma aplicação de acordo com as ações do usuário‖; e o pesquisador do

usuário (2009, p. 24) ―é responsável por fornecer ideias considerando as

necessidades dos usuários finais, baseadas nas informações que são geradas a

partir da (ou validadas com) pesquisa que a pessoa conduz com os usuários‖.

Outros papéis que podem ser exercidos ou delegados, segundo Chandler

(2009) são: estrategista da marca, analista de negócios, estrategista de conteúdo,

redator, designer visual e desenvolvedor de interface. Apesar de serem papéis

importantes, não nos aprofundaremos neles nesse momento.

5.1 USUÁRIOS E SUAS NECESSIDADES

Este capítulo busca aprofundar o entendimento e as necessidades do alvo

principal de qualquer projeto de UX: o usuário. Entender suas necessidades parte

não apenas de pesquisas diretas com o usuário final, mas de um entendimento

aprofundado de todos os fatores envolvidos no projeto e na correta definição de

seus objetivos.

Page 45: UNIVERSIDADE DE CAXIAS DO SUL IGOR BARAZZETTI · 6.1 MAPA DO . SITE. E FLUXO DE ... conceitual sobre definição de testes de usabilidade. Utilizamos Unger e Chandler ... durante

44

5.1.1 Definindo os objetivos do projeto

Chandler (2009 p. 56) acredita que uma clara definição dos objetivos é fator

de extrema importância para o sucesso do projeto. Ela afirma: ―um dos segredos de

um bom projeto é iniciar dentro da equipe com objetivos claros do projeto e uma

abordagem bem compreensível. De forma ideal, a liderança do projeto terá isso

definido por você‖. Ela também diz (2009, p. 57):

Os objetivos são lentes focalizadoras importantes que você usará durante todo o projeto. Eles devem partir da estratégia de negócio geral da empresa do cliente, por isso os objetivos do projeto devem estar alinhados com as iniciativas estratégicas dentro da empresa.

Chandler (2009 p. 56) recomenda que os objetivos sejam definidos com foco,

pois os muito amplos não são diretrizes válidas para projetos específicos. Quando

houver muitos objetivos, o ideal é organizá-los por ordem de prioridade, sempre

certificando-se que um objetivo não entre em conflito, ou mesmo, inviabilize o outro.

Conhecer os problemas antes de criar as soluções é imprescindível. Chandler

(2009 p. 67) diz:

Quando a equipe do projeto se reunir, provavelmente você terá ouvido ou aparecido com muitas ideias sobre quais necessidades devem ser cumpridas. Pode já existir listas de funções oferecidas por alguns membros de destaque da empresa (seus agentes de negócio), junto com suas opiniões sobre quais funções são mais importantes. Existem elementos das requisições de negócio para o projeto, e eles são um bom início. Para ter certeza se você tem uma solução completa ao final do projeto, você precisará gerar e esclarecer requisições a partir de vários pontos de vista.

A mesma autora ressalta a importância de compreender o estado atual de um

projeto antes de iniciá-lo. É importante entender os problemas atuais, caso o projeto

seja o redesign de um site que já existe, assim como é fundamental ter uma boa

compreensão da concorrência, se estiver criando um novo site ou aplicação. É

possível adquirir boa compreensão por meio de entrevistas com o agente, ou mesmo

via pesquisas feitas por conta própria. A análise heurística é uma boa opção para

obtenção dessa compreensão. Segundo Chandler (2009, p. 70) conta:

Uma análise heurística é uma técnica que você pode usar para avaliar a usabilidade de um projeto existente, baseado nas melhores práticas dentro

Page 46: UNIVERSIDADE DE CAXIAS DO SUL IGOR BARAZZETTI · 6.1 MAPA DO . SITE. E FLUXO DE ... conceitual sobre definição de testes de usabilidade. Utilizamos Unger e Chandler ... durante

45

do campo da experiência do usuário. Você pode conduzir tal análise no site atual no início de um projeto a ser criado ou analisar sites concorrentes a fim de compreender oportunidades para uma oferta de uma experiência do usuário com mais qualidade do que em outras empresas. O resultado é um documento descrevendo os pontos fortes e pontos fracos do site, incluindo as recomendações para melhorias.

Após a obtenção desse documento, é possível ter uma compreensão mais

aprofundada e, assim, listar ideias para contribuir com o novo projeto. As dez

heurísticas de Jackob Nielsen são boas diretrizes para execução dessa análise,

sempre considerando que cada projeto precisa ser analisado individualmente, pois

existirão casos específicos em que algumas recomendações heurísticas não

poderão ser seguidas.

Segundo Nielsen (1995, s. p., grifo nosso), as dez heurísticas são:

1) feedback: O sistema deve informar continuamente ao usuário sobre o que ele está fazendo.10 segundos é o limite para manter a atenção do usuário focalizada no diálogo. 2) falar a linguagem do usuário: A terminologia deve ser baseada na linguagem do usuário e não orientada ao sistema. As informações devem ser organizadas conforme o modelo mental do usuário. 3) saídas claramente demarcadas: O usuário controla o sistema, ele pode, a qualquer momento, abortar uma tarefa, ou desfazer uma operação e retornar ao estado anterior. 4) consistência: Um mesmo comando ou ação deve ter sempre o mesmo efeito. A mesma operação deve ser apresentada na mesma localização e deve ser formatada/apresentada da mesma maneira para facilitar o reconhecimento. 5) prevenir erros: Evitar situações de erro. Conhecer as situações que mais provocam erros e modificar a interface para que estes erros não ocorram. 6) minimizar a sobrecarga de memória do usuário: O sistema deve mostrar os elementos de diálogo e permitir que o usuário faça suas escolhas, sem a necessidade de lembrar um comando específico. 7) atalhos: Para usuários experientes executarem as operações mais rapidamente. Abreviações, teclas de função, duplo clique no mouse, função de volta em sistemas hipertexto. Atalhos também servem para recuperar informações que estão numa profundidade na árvore navegacional a partir da interface principal. 8) diálogos simples e naturais: Deve-se apresentar exatamente a informação que o usuário precisa no momento, nem mais nem menos. A sequencia da interação e o acesso aos objetos e operações devem ser compatíveis com o modo pelo qual o usuário realiza suas tarefas. 9) boas mensagens de erro: Linguagem clara e sem códigos. Devem ajudar o usuário a entender e resolver o problema. Não devem culpar ou intimidar o usuário. 10) ajuda e documentação: O ideal é que um software seja tão fácil de usar (intuitivo) que não necessite de ajuda ou documentação. Se for necessária a ajuda deve estar facilmente acessível on-line.

Page 47: UNIVERSIDADE DE CAXIAS DO SUL IGOR BARAZZETTI · 6.1 MAPA DO . SITE. E FLUXO DE ... conceitual sobre definição de testes de usabilidade. Utilizamos Unger e Chandler ... durante

46

Com os objetivos definidos com clareza, seguimos para a pesquisa de

usuário.

5.1.2 Pesquisa de usuário

Existem diversas técnicas de pesquisa com o usuário que podem ser

utilizadas durante todo o projeto (Chandler). Entre os passos básicos para conduzir

uma pesquisa de usuário estão: a definição dos grupos de usuários primários; o

planejamento do envolvimento do usuário; a condução da pesquisa; a validação das

definições do grupo de usuários; e a criação de um documento com as requisições

desses usuários.

A definição de grupos de usuários primários, segundo Chandler (2009, p. 86),

―envolve a criação de uma estrutura que descreve os principais tipos de usuários

para quem você está projetando‖. Ela sugere criar uma lista de atributos, com o

objetivo de reunir toda a documentação da empresa que ajudaria a direcionar para

seus usuários. Chandler (2009, p.87) cita a seguinte lista:

Documentos explicando as estratégias da empresa, como objetivos da empresa, informação competitiva, estratégias de marketing e planos de negócio;

Segmentações de mercado em relação aos clientes atuais e outros dados demográficos reunidos pelo departamento de marketing;

Pesquisa de usuário conduzida anteriormente;

Pesquisas, como pesquisas de satisfação do usuário e formulários de avaliação crítica;

Relatórios de atendimento ao cliente abordando questões que ocorrem com frequência.

O planejamento do envolvimento do usuário é a escolha de técnicas para

engajá-lo na pesquisa, respeitando os objetivos do projeto.

Chandler (2009, p. 85) também sugere que sejam levantadas, nessa

documentação, informações como objetivos primários, papéis, demografia,

experiência e nível educacional, e atributos organizacionais. Após concluídos esses

levantamentos, iniciamos a escolha de técnicas de pesquisa.

5.1.3 Escolha de técnicas

Definidos os grupos de usuários, faz-se necessário iniciar a escolha das

técnicas que serão utilizadas na pesquisa. Segundo Chandler (2009), algumas das

Page 48: UNIVERSIDADE DE CAXIAS DO SUL IGOR BARAZZETTI · 6.1 MAPA DO . SITE. E FLUXO DE ... conceitual sobre definição de testes de usabilidade. Utilizamos Unger e Chandler ... durante

47

técnicas mais comuns são: entrevista com usuários; investigação contextual;

pesquisas; grupos de foco; ordenação de cartões (card sorting); e testes de

usabilidade.

Para Chandler (2009, p. 92), as entrevistas com usuários são conversas

particulares com um dos participantes que pertence a um dos grupos de usuários

primário, sendo útil quando se deseja obter contexto, mas não se pode ir até o

usuário, ou o tipo de acesso ao mesmo é variado, podendo ser pessoalmente ou por

telefone. Nesse tipo de técnica, um dos desafios pode ser a obtenção de opiniões

diretas e a dificuldade de reunir informações quando a entrevista é conduzida

remotamente.

A investigação contextual, segundo (Chandler, 2009, p. 92), é "uma visita

local com os participantes para observar e aprender sobre como eles trabalham em

seu ambiente normal diário". Para a autora é útil quando se possui pouca informação

sobre o público-alvo ou quando os usuários trabalham em um único ambiente. A

maior dificuldade enfrentada nesse caso é o próprio acesso ao participante em seu

ambiente de trabalho, o que pode gerar desconforto, desconfiança e mesmo

resistência.

As pesquisas são, para Chandler (2009, p. 92), "uma série de perguntas que

consiste principalmente de respostas fechadas (com opções múltiplas), usadas para

identificar padrões dentro de um grande número de pessoas". É vantagem utilizar

esse tipo de técnica quando buscamos resultados quantitativos, e para obter

informações sobre preferências. O maior desafio, segundo Chandler (2009), é criar

um formulário com perguntas inteligentes para que o usuário não seja induzido a dar

respostas particulares.

Na concepção de Chandler (2009, p. 93), os Grupos de Foco são "uma

discussão em grupo em que um moderador guia os participantes através de

perguntas sobre um tópico específico. Foca nos sentimentos, atitudes e ideias dos

participantes sobre o tópico". É útil quando "a equipe acredita que as atitudes dos

usuários influenciarão fortemente o uso de sua solução". A autora (2009, p. 94)

entende que o maior desafio dessa técnica é a compreensão de "como direcionar as

perguntas para receber a informação correta".

A ordenação de cartões, também conhecida como card sorting, é uma técnica

que distribui cartões para os participantes, e solicita que eles os organizem da forma

que acharem mais adequada. Para Chandler (2009, p. 93), essa técnica é útil

Page 49: UNIVERSIDADE DE CAXIAS DO SUL IGOR BARAZZETTI · 6.1 MAPA DO . SITE. E FLUXO DE ... conceitual sobre definição de testes de usabilidade. Utilizamos Unger e Chandler ... durante

48

quando um site possui uma estrutura grande, com muitos itens, e exige uma

organização eficiente para que os usuários naveguem com usabilidade. Seu maior

desafio é "determinar quais tópicos seria melhor incluir".

Por fim, o teste de usabilidade é efetuado enquanto "os usuários tentam

realizar tarefas típicas em um site ou aplicação, enquanto um facilitador observa e,

em alguns casos, faz perguntas para entender o comportamento do usuário"

(Chandler, 2009, p. 93). Entender os usuários e obter informações pelas técnicas

selecionadas é uma etapa fundamental do design de UX, porém, para resultados

ainda mais satisfatórios, é importante que a equipe de UX não apenas leia esses

relatórios, mas aprenda a se colocar no lugar dos seus usuários. Para isso, existe

uma ferramenta muito eficaz: a criação de personas.

5.1.4 Personas

As informações obtidas após essas pesquisas contribuirão à formação de novos

grupos de usuários e ferramentas mais detalhadas, como personas, as quais

facilitarão a criação das requisições de usuário.

Para Unger (2009, p. 113), as personas são documentos que contribuem

para encontrar a melhor maneira de colocar a sua equipe – ou o seu cliente – no

lugar dos seus usuários.

As personas podem ser usadas para ajudar a equipe do seu projeto e o seu cliente a simpatizarem com os usuários deles. As personas podem proporcionar uma verificação interna de muitas partes do seu projeto – as requisições de negócio, o design visual ou a verificação da qualidade – oferecendo percepções a respeito de quem é seu público e quais são as expectativas deles e os seus comportamentos.

Unger (2009, p. 114) define personas como:

Documentos que descrevem típicos usuário-alvo. Elas podem ser úteis para a equipe do seu projeto, para os agentes e para os clientes. Com pesquisas e descrições apropriadas, as personas podem ilustrar um quadro muito claro sobre quem está usando um site ou aplicação e, potencialmente, até mesmo como estão usando. Os projetistas da experiência do usuário geralmente veem a criação de personas como um grande exercício de empatia.

Page 50: UNIVERSIDADE DE CAXIAS DO SUL IGOR BARAZZETTI · 6.1 MAPA DO . SITE. E FLUXO DE ... conceitual sobre definição de testes de usabilidade. Utilizamos Unger e Chandler ... durante

49

Para o mesmo autor, criar personas é um ato que ajuda a equipe a resolver

conflitos que costumam surgir durante a criação e desenvolvimento, retomando o

foco do projeto e seguindo adiante. ―O objetivo das personas é ajudar a sua equipe

e/ou seus clientes a tirarem parte da confusão que pode surgir quando você chegar

ao cruzamento da tomada de decisão.‖ (2009, p. 115).

Page 51: UNIVERSIDADE DE CAXIAS DO SUL IGOR BARAZZETTI · 6.1 MAPA DO . SITE. E FLUXO DE ... conceitual sobre definição de testes de usabilidade. Utilizamos Unger e Chandler ... durante

50

6 APLICAÇÃO DA UX: PLANEJAMENTO E PROTOTIPAGEM

Após toda a coleta de informações reunidas, o projeto pode sair do papel e

começar a ser implementado. Nessa etapa, o projetista costuma encontrar

dificuldades, como ideias que surgem após a definição das requisições, que

influenciarão os prazos e nas próprias requisições já definidas. Também é comum

ser obrigado a priorizar, ou, até mesmo, deixar de lado algumas requisições, em

função de prazos e orçamentos apertados. Nesses casos, é necessário reduzir a

lista de requisições. Aqui, o projetista de UX tem papel fundamental. Ungler e

Chandler (2009, p. 152) dizem:

Pode ser tentador considerar a priorização uma responsabilidade entre patrocinador do projeto, o gerente do projeto e o líder da equipe de desenvolvimento em vez de uma questão para um projetista de UX. Não há nada além da verdade. As discussões sobre priorização são o lugar onde as soluções bem-sucedidas são feitas ou quebradas. Os projetistas da experiência do usuário têm a responsabilidade de trazer suas habilidades à tona nessas conversas importantes.

Quando a equipe chega a um consenso e a lista de requisições é definida, é

hora de iniciar o design. Algumas técnicas podem auxiliar o início da criação prática,

como a elaboração de um mapa do site e fluxo de tarefas.

6.1 MAPA DO SITE E FLUXO DE TAREFAS

Sobre os mapas do site, Unger (2009, p. 166) diz:

Os mapas do site ajudam a identificar a estrutura dos sites na web e das aplicações. Eles podem mostrar hierarquias e conexões que permitem que o seu público obtenha uma compreensão de onde os usuários podem localizar o conteúdo. Os fluxos de tarefa levam os mapas do site um passo a frente identificando os vários cursos de ação que um usuário pode atravessar dentro de uma seção do site.

Page 52: UNIVERSIDADE DE CAXIAS DO SUL IGOR BARAZZETTI · 6.1 MAPA DO . SITE. E FLUXO DE ... conceitual sobre definição de testes de usabilidade. Utilizamos Unger e Chandler ... durante

51

Figura 5 – Exemplo de um mapa de site simples

Fonte: SME Toolkit. Disponível em <http://brasil.smetoolkit.org/brasil/pt_br/content/pt_br/4783/Como-estruturar-o-projeto-do-website-de-sua-empresa> Acesso em: 16.maio.2014

Sobre os fluxos de tarefa, Unger (2009, p. 166) acrescenta:

Os fluxos de tarefa também desenham as conexões para estados de erro, conteúdo ou visualizações de página baseados nos pontos de decisão através de todo o processo. Quando usados juntamente, os mapas do site e os fluxos de tarefa podem oferecer um cenário claro das estruturas de conteúdo ao seu público e como os usuários podem navegar através deles.

Page 53: UNIVERSIDADE DE CAXIAS DO SUL IGOR BARAZZETTI · 6.1 MAPA DO . SITE. E FLUXO DE ... conceitual sobre definição de testes de usabilidade. Utilizamos Unger e Chandler ... durante

52

Figura 6 – Exemplo de um fluxo de navegação

Fonte: Blog Milho Verde. Disponível em

<http://milhoverde.files.wordpress.com/2008/03/fluxo_navegacao_noticias_v5.png.> Acesso em: 10.maio.2014

6.2 WIREFRAMES

Outra ferramenta que serve como auxílio antes que o design visual comece

são os wireframes. Para Unger (2009), os wireframes são formas de identificar a

estrutura de um website ou aplicação, assim como seus comportamentos funcionais.

Eles servem como um protótipo visual que carrega os conceitos obtidos nas análises

anteriores. Unger (2009, p. 185) afirma:

Os wireframes são, geralmente, apresentados em escalas de cinza, privados de elementos gráficos ou conteúdo finalizado; em vez disso, eles usam conteúdo substituível para destacar locais representativos que podem ser usados como orientação no design visual.

De acordo com o autor (2009, p. 186), um wireframe resume-se a ―um

protótipo de baixa fidelidade de uma página na web ou tela de uma aplicação. Um

Page 54: UNIVERSIDADE DE CAXIAS DO SUL IGOR BARAZZETTI · 6.1 MAPA DO . SITE. E FLUXO DE ... conceitual sobre definição de testes de usabilidade. Utilizamos Unger e Chandler ... durante

53

wireframe é usado para identificar os elementos que serão exibidos na página ou na

tela.‖

Figura 7 – Exemplo de wireframes com notas de design de interação

Fonte: Site New Media Sources. Disponível em <http://newmediasources.ca/wp-content/uploads/2012/12/HomePage.png> Acesso em: 10.maio.2014

Page 55: UNIVERSIDADE DE CAXIAS DO SUL IGOR BARAZZETTI · 6.1 MAPA DO . SITE. E FLUXO DE ... conceitual sobre definição de testes de usabilidade. Utilizamos Unger e Chandler ... durante

54

Figura 8: Wireframe do site da CNN ao lado de seu design visual

Fonte: Site Wirify.com e CNN.com. Disponível em <http://www.wirify.com/wp/wp-content/uploads/2011/02/CNN-International-Original-vs-Wirify-wireframe1.jpg> Acesso em: 10.maio.2014

A partir da definição do wireframe, é possível criar o primeiro protótipo

funcional do projeto.

Page 56: UNIVERSIDADE DE CAXIAS DO SUL IGOR BARAZZETTI · 6.1 MAPA DO . SITE. E FLUXO DE ... conceitual sobre definição de testes de usabilidade. Utilizamos Unger e Chandler ... durante

55

6.3 PROTÓTIPOS INTERATIVOS

A prototipagem contribui para que o usuário possa fazer testes de interação

reais antes de iniciar o desenvolvimento oficial do projeto. Unger (2009, p.205) diz:

No contexto do design da experiência do usuário, a prototipagem é o ato de (e, em muitos casos, a arte de) criar e testar toda ou parte da funcionalidade de uma aplicação ou Website com usuários. Os protótipos podem ser feitos com ferramentas analógicas (como quadros brancos e papel) ou digitalmente com o PowerPoint, Acrobat, Visio, OmniGraffle, HTML ou outras ferramentas baseadas na tecnologia.

O autor (2009) faz questão de ressaltar que, por mais fiel que o protótipo seja

em recursos e funcionalidades, tudo o que é apresentado nele não passa de

prototipagem, e não deve ser considerado como resultado final. Após completar o

processo de prototipagem, será preciso transformá-lo em um objeto que possa ser

utilizado pelo usuário de forma completa por meio do design visual e

desenvolvimento do projeto.

6.4 TESTES DURANTE E APÓS IMPLEMENTAÇÃO

Tudo indica que chegamos ao fim de todo o processo; porém, como afirma

Unger (2009, p. 247), ―Um bom processo de design de experiência do usuário nunca

acaba‖. O projetista de UX deve manter-se envolvido e acompanhar todo o processo

de criação e desenvolvimento, a fim de assegurar-se de que a entrega final seja a

experiência do usuário projetada.

Após ter feito esse acompanhamento e obter o produto final, é hora de testar

o design com os usuários novamente. Segundo Unger, muitas vezes os testes com

usuários não são realizados nas etapas anteriores e, mesmo quando são, sempre

ficam brechas e pequenos problemas despercebidos, que precisam de solução após

o lançamento do produto final. O ideal é que os testes sejam feitos antes e depois do

lançamento oficial.

O autor adverte para que o projetista não se surpreenda se, mesmo depois de

todo esse trabalho minucioso, as pessoas não demonstrarem interesse pelo produto

lançado. Ele cita alguns fatores de grande importância na aceitação de um produto:

vantagem pessoal; suporte e opinião; e boca a boca gerado pelos grupos ativos de

Page 57: UNIVERSIDADE DE CAXIAS DO SUL IGOR BARAZZETTI · 6.1 MAPA DO . SITE. E FLUXO DE ... conceitual sobre definição de testes de usabilidade. Utilizamos Unger e Chandler ... durante

56

usuários. Por isso é importante que o site ou aplicação tenha um canal de

comunicação com o cliente para oferecer suporte e ouvir suas sugestões de

melhorias.

6.5 MANTENDO OS TESTES

Unger (2009) considera importante que, mesmo após todos os testes pós-

lançamento, continuem sendo coletadas informações de navegação e opiniões de

usuários para gerar uma lista de aprimoramentos e benefícios que podem ser

implementados ao website ou aplicação. Ele conclui sua obra citando (p. 255): ―Os

projetos não devem morrer. Eles devem ser o trampolim para novos projetos que

são voltados continuamente para o aprimoramento do design da experiência do

usuário.‖

Page 58: UNIVERSIDADE DE CAXIAS DO SUL IGOR BARAZZETTI · 6.1 MAPA DO . SITE. E FLUXO DE ... conceitual sobre definição de testes de usabilidade. Utilizamos Unger e Chandler ... durante

57

7 TESTES DE CAMPO

Por meio do conhecimento adquirido nas pesquisas desse projeto,

elaboramos algumas aplicações práticas guiadas pela metodologia exposta no

capítulo dois deste trabalho. Os relatos dessa prática de campo foram divididos em

três etapas.

7.1 PROCESSO APLICADO

Iniciamos a aplicação prática usando como referência um site da categoria e-

commerce, o aliexpress.com.br. O AliExpress é um website do grupo Alibaba, que

possibilita o comércio internacional de mercadorias de diferentes espécies. Eles são

oferecidos pelo site, por meio do cadastro de fornecedores em vários países. Na

página que fala sobre a empresa, encontramos a seguinte definição:

A missão do grupo Alibaba é tornar fácil fazer negócios em qualquer lugar. Atuamos em mercados online e de tecnologia móvel, bem como a computação em nuvem e outros serviços. Fornecemos tecnologia e serviços para permitir que os consumidores, comerciantes e outros participantes possam conduzir o comércio em nosso ecossistema.

Dentre tantas opções no ramo de e-commerce, o AliExpress foi selecionado

por ser uma plataforma que teve grande popularização no Brasil nos últimos anos;

ela preocupa-se em aprimorar a experiência do usuário, garantindo que tanto a

navegação no site quanto a compra sejam tarefas simples e prazerosas.

Page 59: UNIVERSIDADE DE CAXIAS DO SUL IGOR BARAZZETTI · 6.1 MAPA DO . SITE. E FLUXO DE ... conceitual sobre definição de testes de usabilidade. Utilizamos Unger e Chandler ... durante

58

Figura 9 – Página inicial do site AliExpress

Fonte: Site aliexpress.com. Disponível em <http:// http://pt.aliexpress.com/> Acesso em: 10.maio.2014

Page 60: UNIVERSIDADE DE CAXIAS DO SUL IGOR BARAZZETTI · 6.1 MAPA DO . SITE. E FLUXO DE ... conceitual sobre definição de testes de usabilidade. Utilizamos Unger e Chandler ... durante

59

Iniciamos a pesquisa quantitativa formulando um questionário de própria

autoria, porém, baseado em modelos apresentados por cinco autores: Knoll (2012);

Winkler e Pimenta (2002); Nascimento e Amaral (2010). Além disso, foram incluídas

questões baseadas nas heurísticas de Nielsen, já citadas no capítulo seis deste

trabalho. O grande desafio foi elaborar uma sequência de perguntas compactas que

permitisse, posteriormente, a verificação de equivalência com o guia de

recomendações proposto por Nascimento e Amaral (2010, p. 105). Criamos o

seguinte questionário:

NAVEGAÇÃO E ASPECTOS VISUAIS

PERGUNTAS SIM NÃO Parcialmente

Este site tem uma apresentação gráfica agradável e legível.

O visual deste site passa credibilidade e profissionalismo.

Gosto da forma como este site utiliza as cores.

Eu sempre sei em que página estou, de onde vim e como chegar onde quero chegar.

De um modo geral, considero rápido o acesso às informações do site.

Os recursos de navegação (menus, ícones, links e botões), estão todos claros e fáceis de achar.

Logo que entro no site já sei o que esta empresa faz.

Os textos são consistentes e legíveis.

As animações e efeitos visuais deste site são agradáveis.

Concordo que os erros não acontecem com frequência.

Quando ocorre um erro, as mensagens sobre o mesmo são claras e me ajudam a solucioná-lo.

É fácil a navegação neste site.

Page 61: UNIVERSIDADE DE CAXIAS DO SUL IGOR BARAZZETTI · 6.1 MAPA DO . SITE. E FLUXO DE ... conceitual sobre definição de testes de usabilidade. Utilizamos Unger e Chandler ... durante

60

ENCONTRANDO PRODUTOS

PERGUNTAS SIM NÃO Parcialmente

Existe a possibilidade de procurar produtos de diferentes maneiras.

A ferramenta de busca é fácil de utilizar e eficiente nos resultados que mostra.

Os produtos estão organizados em categorias de maneira clara e objetiva.

A descrição dos produtos é completa e bem detalhada.

Gosto da forma como são apresentadas as imagens dos produtos.

Encontrei facilmente os produtos que procurava.

Encontrei todos os produtos que procurava.

As opiniões dos outros usuários são importantes para a minha decisão de compra.

PROCESSO DE COMPRA

PERGUNTAS SIM NÃO Parcialmente

O cadastro no site é rápido e de fácil preenchimento.

O site oferece todas as formas de pagamento de que preciso.

Na página de compras, eu possuo todas as informações que preciso.

O processo, tanto de remover como de alterar a quantidade de produtos selecionados para aquisição, é muito fácil.

As regras sobre troca, devolução ou políticas de reembolso são claras e fáceis de encontrar.

As informações necessárias sobre a garantia do produto são facilmente obtidas.

Eu me senti seguro fazendo minhas compras.

Eu posso abandonar facilmente um processo de compra.

As informações sobre a entrega dos produtos e prazos são claras.

Todo o processo de fazer compras é simples.

Page 62: UNIVERSIDADE DE CAXIAS DO SUL IGOR BARAZZETTI · 6.1 MAPA DO . SITE. E FLUXO DE ... conceitual sobre definição de testes de usabilidade. Utilizamos Unger e Chandler ... durante

61

PÓS-VENDAS E SUPORTE AO CLIENTE

PERGUNTAS SIM NÃO Parcialmente

O site abre espaço para eu expor meus comentários, reclamações ou sugestões.

O cliente facilmente localiza o endereço, telefone ou mais informações sobre a empresa.

Posso acompanhar facilmente o status das minhas compras a qualquer momento.

O site oferece informações de rastreamento da encomenda.

O prazo de entrega dos produtos está de acordo com o que é proposto pelo site.

Sei que se houver algum problema, poderei resolver facilmente.

As políticas de devolução são claras.

O site apresenta um local com as perguntas mais frequentes.

Eu me sinto seguro neste site.

O formulário foi disponibilizado online por meio da ferramenta de criação do

Google Docs. Os usuários selecionados para o teste foram homens e mulheres na

faixa etária entre 18 e 60 anos; eles já conheciam e utilizaram o site AliExpress

antes. Como mencionado, Duarte e Barros (2006) enfatizam a importância de que os

participantes tenham envolvimento com o tema e sejam capazes de ajudar a

responder sobre o assunto; isso justifica o perfil selecionado.

Para a pesquisa qualitativa, buscamos objetivar as respostas para que fosse

possível a obtenção de dados consistentes. Sendo assim, as opções oferecidas

como resposta eram apenas três: Sim (para concordância), Não (para discordância)

e Parcialmente (para casos em que o participante concordava apenas parcialmente

com a afirmação).

A primeira tela do formulário orientava os usuários sobre o que viria pela

frente e como se portar durante a pesquisa, explicando quando deveriam usar cada

uma das três opções. O principal meio de estímulo para captação dos participantes

foi a publicação do link do formulário no Facebook.

Depois da execução e coleta de dados dessa pesquisa, utilizou-se a lista de

verificação e guia de recomendações para inspeção ergonômica de websites

recomendada por Nascimento e Amaral (2010). Apesar de a lista dos autores ter

Page 63: UNIVERSIDADE DE CAXIAS DO SUL IGOR BARAZZETTI · 6.1 MAPA DO . SITE. E FLUXO DE ... conceitual sobre definição de testes de usabilidade. Utilizamos Unger e Chandler ... durante

62

sido elaborada para uma biblioteca virtual, a maioria das questões encaixa

perfeitamente em qualquer projeto web. Por isso, optamos por utilizar a sua

reprodução fiel, também porque ela oferecia a opção N/A (não se aplica) para as

poucas questões que não se aplicavam ao nosso objeto de estudo.

Após esse processo, iniciamos a aplicação da principal ferramenta para

análise qualitativa. Selecionamos um grupo de cinco usuários de diferentes perfis,

que preencheram os requisitos para participação da análise filmada, acompanhada

de uma entrevista verbal gravada, aplicada pessoalmente. Os selecionados,

segundo critérios já descritos no capítulo dois, foram:

Usuário A

Idade 22 anos

Sexo Feminino

Profissão Fisioterapeuta

Local de trabalho Clínica de fisioterapia

Formação Acadêmica Superior incompleto

Frequência de compras feitas pela internet Baixa

Grau de facilidade com uso da internet e computadores

Alto

Utilizador do site AliExpress? Sim

Usuário B

Idade 59 anos

Sexo Masculino

Profissão Economista

Local de trabalho Escritório

Formação Acadêmica Superior completo

Frequência de compras feitas pela internet Moderada

Grau de facilidade com uso da internet e computadores

Moderado

Utilizador do site AliExpress? Sim

Page 64: UNIVERSIDADE DE CAXIAS DO SUL IGOR BARAZZETTI · 6.1 MAPA DO . SITE. E FLUXO DE ... conceitual sobre definição de testes de usabilidade. Utilizamos Unger e Chandler ... durante

63

Usuário C

Idade 23 anos

Sexo Feminino

Profissão Estudante

Local de trabalho Não possui

Formação Acadêmica Superior incompleto

Frequência de compras feitas pela internet Moderada

Grau de facilidade com uso da internet e computadores

Alto

Utilizador do site AliExpress? Sim

Usuário D

Idade 23 anos

Sexo Masculino

Profissão Desenvolvedor Web

Local de trabalho Escritório

Formação Acadêmica Superior incompleto

Frequência de compras feitas pela internet Alta

Grau de facilidade com uso da internet e computadores

Muito Alto

Utilizador do site AliExpress? Sim

Usuário E

Idade 17 anos

Sexo Masculino

Profissão Desenvolvedor Web

Local de trabalho Escritório

Formação Acadêmica Ensino Médio incompleto

Frequência de compras feitas pela internet Alta

Grau de facilidade com uso da internet e computadores

Muito Alto

Utilizador do site AliExpress? Sim

Page 65: UNIVERSIDADE DE CAXIAS DO SUL IGOR BARAZZETTI · 6.1 MAPA DO . SITE. E FLUXO DE ... conceitual sobre definição de testes de usabilidade. Utilizamos Unger e Chandler ... durante

64

Esses usuários foram expostos a um processo filmado, e orientados a

navegar no AliExpress, fazendo comentários verbais sempre que encontrassem

pontos positivos ou negativos durante a utilização do website. O período de teste

deveria durar em torno de 15 a 30 minutos, mas poderiam abandonar a tarefa no

momento em que perdessem o interesse pelo site.

Ao término de cada filmagem, foram feitas entrevistas gravadas em áudio.

Nesta, os usuários responderam a questões qualitativas elaboradas pelo autor,

baseadas nas heurísticas de Nilsen (apresentadas no capítulo 6), com o objetivo de

obter uma comparação entre o comportamento apresentado nos vídeos e as

respostas verbais. O questionário contemplou as seguintes questões:

1. Visibilidade de Status do Sistema

1.1 Qual a sua percepção sobre os aspectos visuais do site?

1.2 O que você pode dizer sobre a organização da informação e facilidade de localização no site?

2. Relacionamento entre a interface do sistema e o mundo real

2.1 Qual a sua opinião sobre a comunicação, textos, termos e demais conteúdos escritos usados pelo site?

3. Liberdade e controle do usuário

3.1 Qual a sua opinião sobre a possibilidade de cancelar uma compra ou desfazer alguma ação? Houve dificuldades?

4. Consistência

4.1 O que você acha da organização de elementos, uso de imagens e ícones no site?

4.2 Em algum momento, você se confundiu achando que alguma coisa representava algo que não era?

4.3 O que você acredita que possa confundir os usuários durante a navegação?

5. Prevenção de erros

5.1 Como você se sente quando deleta algo que não queria, ou conclui uma ação indesejada num sistema? Em algum momento durante sua navegação isso ocorreu?

Page 66: UNIVERSIDADE DE CAXIAS DO SUL IGOR BARAZZETTI · 6.1 MAPA DO . SITE. E FLUXO DE ... conceitual sobre definição de testes de usabilidade. Utilizamos Unger e Chandler ... durante

65

6. Reconhecimento ao invés de lembrança

6.1 O que você lembra de ter feito no site AliExpress? Se precisasse fazer novamente, lembraria dos passos?

6.2 Qual foi sua dificuldade ao usar os recursos do site como buscas, filtros, carrinho de compras, etc.? Fale um pouco sobre os pontos positivos e negativos.

7. Flexibilidade e eficiência de uso

7.1 Qual a importância de atalhos para você? Você os utilizou ou gostaria de ter utilizado durante a sua navegação? Por quê?

8. Estética e design minimalista

8.1 O que você acha do número de recursos e opções que o site oferece?

8.2 Como você gostaria que fosse o design e volume de informações na tela?

8.3 Em algum momento, você sentiu que o AliExpress lhe sobrecarregou de informação? Se sim, como eles poderiam melhorar isso?

9. Ajuda ao usuário para reconhecer, diagnosticar e sanar erros

9.1 O que você poderia dizer sobre a facilidade em resolver os problemas apresentados no site?

9.2 Como o site lhe ajudava na resolução desses problemas?

10. Ajuda e documentação

10.1 Para você, qual a importância de uma documentação detalhada sobre como usar o site e como resolver problemas?

10.2 Como você se comportaria se encontrasse algum problema ou dificuldade no site, e como buscaria solucionar esses problemas, fossem de navegação ou na própria compra do produto?

Com o material de cada entrevistado em mãos, assistimos aos vídeos,

listamos os comportamentos de navegação observados e os comentários verbais

feitos durante a filmagem.

A comparação desses materiais gerou os resultados da pesquisa de campo.

Page 67: UNIVERSIDADE DE CAXIAS DO SUL IGOR BARAZZETTI · 6.1 MAPA DO . SITE. E FLUXO DE ... conceitual sobre definição de testes de usabilidade. Utilizamos Unger e Chandler ... durante

66

7.2. ANÁLISE DE RESULTADOS

A sobreposição de técnicas de coleta e análise de material no campo buscou

formar uma ―dupla rede‖, que acabou por ―denunciar/apontar‖ comportamentos

ambíguos do usuário, bem como ratificar críticas realmente importantes. O

procedimento justifica-se na medida em que a teoria nos mostrava (e o campo

confirmou) que em algumas situações o usuário não é sincero em suas observações

e respostas, por motivos diversos (insegurança, medo de parecer desinformado,

desejo de agradar, desejo de aprovação, falta de consciência, por exemplo).

A seguir, apresentaremos os resultados obtidos, de forma esmiuçada, com as

técnicas de análise aplicadas.

7.2.1 Pesquisa quantitativa

A pesquisa quantitativa recebeu 37 respostas, quase o dobro do mínimo

recomendado por Unger e Chandler (2009). Os resultados estão apresentados

abaixo por questão individual.

Para as questões referentes à navegação e aspectos visuais, foram obtidos

os seguintes resultados:

Este site tem uma apresentação gráfica agradável e legível.

Page 68: UNIVERSIDADE DE CAXIAS DO SUL IGOR BARAZZETTI · 6.1 MAPA DO . SITE. E FLUXO DE ... conceitual sobre definição de testes de usabilidade. Utilizamos Unger e Chandler ... durante

67

O visual deste site passa credibilidade e profissionalismo.

Gosto da forma como este site utiliza as cores.

Eu sempre sei em que página estou, de onde vim e como chegar onde quero

chegar.

Page 69: UNIVERSIDADE DE CAXIAS DO SUL IGOR BARAZZETTI · 6.1 MAPA DO . SITE. E FLUXO DE ... conceitual sobre definição de testes de usabilidade. Utilizamos Unger e Chandler ... durante

68

De um modo geral, considero rápido o acesso às informações do site.

Os recursos de navegação (menus, ícones, links e botões) estão todos claros e

fáceis de achar.

Logo que entro no site já sei o que esta empresa faz.

Page 70: UNIVERSIDADE DE CAXIAS DO SUL IGOR BARAZZETTI · 6.1 MAPA DO . SITE. E FLUXO DE ... conceitual sobre definição de testes de usabilidade. Utilizamos Unger e Chandler ... durante

69

Os textos são consistentes e legíveis.

As animações e efeitos visuais deste site são agradáveis.

Concordo que os erros não acontecem com frequência.

Page 71: UNIVERSIDADE DE CAXIAS DO SUL IGOR BARAZZETTI · 6.1 MAPA DO . SITE. E FLUXO DE ... conceitual sobre definição de testes de usabilidade. Utilizamos Unger e Chandler ... durante

70

Quando ocorre um erro, as mensagens sobre o mesmo são claras e me ajudam

a solucioná-lo.

É fácil a navegação neste site.

Sobre os aspectos visuais e de navegação, a maioria dos participantes

demonstrou-se satisfeita. Dentre os diversos aspectos avaliados, percebemos

insatisfação em apenas dois itens referentes à legibilidade dos textos e às

animações do site. Nielsen (1995), afirma que a possibilidade de aumentar a fonte é

um recurso de navegação importante; notamos que o site do AliExpress não

disponibiliza esse recurso.

O segundo conjunto de perguntas dizia respeito à facilidade em encontrar os

produtos. Obtivemos os seguintes resultados:

Page 72: UNIVERSIDADE DE CAXIAS DO SUL IGOR BARAZZETTI · 6.1 MAPA DO . SITE. E FLUXO DE ... conceitual sobre definição de testes de usabilidade. Utilizamos Unger e Chandler ... durante

71

Existe a possibilidade de procurar produtos de diferentes maneiras.

A ferramenta de busca é fácil de utilizar e eficiente nos resultados que mostra.

Os produtos estão organizados em categorias de maneira clara e objetiva.

Page 73: UNIVERSIDADE DE CAXIAS DO SUL IGOR BARAZZETTI · 6.1 MAPA DO . SITE. E FLUXO DE ... conceitual sobre definição de testes de usabilidade. Utilizamos Unger e Chandler ... durante

72

A descrição dos produtos é completa e bem detalhada.

Gosto da forma como são apresentadas as imagens dos produtos.

Encontrei facilmente os produtos que procurava.

Page 74: UNIVERSIDADE DE CAXIAS DO SUL IGOR BARAZZETTI · 6.1 MAPA DO . SITE. E FLUXO DE ... conceitual sobre definição de testes de usabilidade. Utilizamos Unger e Chandler ... durante

73

As opiniões dos outros usuários são importantes para a minha decisão de

compra.

Nesse aspecto, também tivemos um alto índice de satisfação, sendo que

apenas uma das questões teve mais respostas negativas. Os usuários demostraram

insatisfação com o detalhamento das páginas de produtos, onde 41% responderam

que não acham a descrição de produtos completa e detalhada. Nielsen e Loranger

(2007) mencionam, constantemente, a importância da rapidez e objetividade em

oferecer aquilo que os usuários procuram. A falta de informações completas sobre

um produto pode facilmente levar o usuário a procurá-lo em outro lugar.

O terceiro aspecto analisado foi o processo de compra. Foram obtidos os

seguintes resultados:

O cadastro no site é rápido e de fácil preenchimento.

Page 75: UNIVERSIDADE DE CAXIAS DO SUL IGOR BARAZZETTI · 6.1 MAPA DO . SITE. E FLUXO DE ... conceitual sobre definição de testes de usabilidade. Utilizamos Unger e Chandler ... durante

74

O site oferece todas as formas de pagamento de que preciso.

Na página de compras, eu possuo todas as informações que preciso.

O processo, tanto de remover como de alterar a quantidade de produtos

selecionados para aquisição, é muito fácil.

Page 76: UNIVERSIDADE DE CAXIAS DO SUL IGOR BARAZZETTI · 6.1 MAPA DO . SITE. E FLUXO DE ... conceitual sobre definição de testes de usabilidade. Utilizamos Unger e Chandler ... durante

75

As regras sobre troca, devolução ou políticas de reembolso são claras e fáceis

de encontrar no site.

As informações necessárias sobre a garantia do produto são facilmente

obtidas.

Eu me senti seguro fazendo minhas compras.

Page 77: UNIVERSIDADE DE CAXIAS DO SUL IGOR BARAZZETTI · 6.1 MAPA DO . SITE. E FLUXO DE ... conceitual sobre definição de testes de usabilidade. Utilizamos Unger e Chandler ... durante

76

Eu posso abandonar facilmente um processo de compra.

As informações sobre a entrega dos produtos e prazos são claras.

Todo o processo de fazer compras é simples.

Com relação ao processo de compra, as respostas também foram positivas

na sua maioria. As perguntas referentes à usabilidade e à facilidade na hora da

compra tiveram alto índice de aprovação, porém, duas questões referentes à clareza

sobre as regras de troca, devolução, políticas de reembolso e garantia do produto

receberam a maioria de votos negativos.

Page 78: UNIVERSIDADE DE CAXIAS DO SUL IGOR BARAZZETTI · 6.1 MAPA DO . SITE. E FLUXO DE ... conceitual sobre definição de testes de usabilidade. Utilizamos Unger e Chandler ... durante

77

Esse tipo de insatisfação pode resultar em insegurança na hora da compra,

logo, deveriam ser tomadas providências para melhorar esses aspectos. Nielsen

(1995) ressalta a importância da disponibilização de uma documentação que auxilie

o usuário em caso de dúvidas. Isso não se aplica apenas para a utilização do

sistema em si, mas para o esclarecimento de questões de negócio também. O

usuário não pode ficar sem respostas para suas dúvidas.

Por fim, analisamos o pós-vendas e foram obtidos os seguintes resultados:

O site abre espaço para eu expor meus comentários, reclamações ou

sugestões.

Facilmente localizo o endereço, telefone ou mais informações sobre a

empresa.

Page 79: UNIVERSIDADE DE CAXIAS DO SUL IGOR BARAZZETTI · 6.1 MAPA DO . SITE. E FLUXO DE ... conceitual sobre definição de testes de usabilidade. Utilizamos Unger e Chandler ... durante

78

Posso acompanhar facilmente o status das minhas compras a qualquer

momento.

O prazo de entrega dos produtos está de acordo com o que é proposto pelo

site.

Sei que se houver algum problema, poderei resolver facilmente.

Page 80: UNIVERSIDADE DE CAXIAS DO SUL IGOR BARAZZETTI · 6.1 MAPA DO . SITE. E FLUXO DE ... conceitual sobre definição de testes de usabilidade. Utilizamos Unger e Chandler ... durante

79

As políticas de devolução são claras.

O site apresenta um local com as perguntas mais frequentes.

Eu me sinto seguro neste site.

As questões referentes ao pós-vendas foram as que tiveram maior índice de

insatisfação em relação aos outros aspectos questionados. Os participantes, mais

uma vez, ressaltaram pontos que indicam insegurança ao demonstrar insatisfação

nas questões sobre prazo de entrega do produto, clareza nas políticas de devolução

e a facilidade em localizar os dados de contato do AliExpress. Como estamos

falando, novamente, sobre segurança na compra e clareza nas regras de negócio, a

Page 81: UNIVERSIDADE DE CAXIAS DO SUL IGOR BARAZZETTI · 6.1 MAPA DO . SITE. E FLUXO DE ... conceitual sobre definição de testes de usabilidade. Utilizamos Unger e Chandler ... durante

80

mesma recomendação feita anteriormente a respeito do processo de compra se

aplica aqui.

A pesquisa quantitativa recebeu um total de 1.315 respostas, sendo que 773

(58,7%) foram positivas, 348 (26,4%) negativas e 194 (14,7%) ficaram entre os dois

extremos, optando pela opção de resposta parcial.

Sendo assim, concluímos que a maioria dos participantes demonstra-se

satisfeita com o site. Entre os pontos positivos, identificamos o processo de

navegação simplificada, a estética e a facilidade de compra. Quanto aos pontos

negativos, percebemos que muitos participantes deram respostas desfavoráveis

quando a questão era relativa ao pós-vendas, como a obtenção de informações para

resolução de problemas, devolução de produtos e obtenção de garantias. Apesar

dessas insatisfações, 72% dos participantes responderam que se sentem seguros

no site.

A lista de verificação e guia de recomendações para inspeção ergonômica

apresentou os seguintes resultados:

Page 82: UNIVERSIDADE DE CAXIAS DO SUL IGOR BARAZZETTI · 6.1 MAPA DO . SITE. E FLUXO DE ... conceitual sobre definição de testes de usabilidade. Utilizamos Unger e Chandler ... durante

81

Page 83: UNIVERSIDADE DE CAXIAS DO SUL IGOR BARAZZETTI · 6.1 MAPA DO . SITE. E FLUXO DE ... conceitual sobre definição de testes de usabilidade. Utilizamos Unger e Chandler ... durante

82

Page 84: UNIVERSIDADE DE CAXIAS DO SUL IGOR BARAZZETTI · 6.1 MAPA DO . SITE. E FLUXO DE ... conceitual sobre definição de testes de usabilidade. Utilizamos Unger e Chandler ... durante

83

Page 85: UNIVERSIDADE DE CAXIAS DO SUL IGOR BARAZZETTI · 6.1 MAPA DO . SITE. E FLUXO DE ... conceitual sobre definição de testes de usabilidade. Utilizamos Unger e Chandler ... durante

84

Page 86: UNIVERSIDADE DE CAXIAS DO SUL IGOR BARAZZETTI · 6.1 MAPA DO . SITE. E FLUXO DE ... conceitual sobre definição de testes de usabilidade. Utilizamos Unger e Chandler ... durante

85

Page 87: UNIVERSIDADE DE CAXIAS DO SUL IGOR BARAZZETTI · 6.1 MAPA DO . SITE. E FLUXO DE ... conceitual sobre definição de testes de usabilidade. Utilizamos Unger e Chandler ... durante

86

Page 88: UNIVERSIDADE DE CAXIAS DO SUL IGOR BARAZZETTI · 6.1 MAPA DO . SITE. E FLUXO DE ... conceitual sobre definição de testes de usabilidade. Utilizamos Unger e Chandler ... durante

87

Page 89: UNIVERSIDADE DE CAXIAS DO SUL IGOR BARAZZETTI · 6.1 MAPA DO . SITE. E FLUXO DE ... conceitual sobre definição de testes de usabilidade. Utilizamos Unger e Chandler ... durante

88

Page 90: UNIVERSIDADE DE CAXIAS DO SUL IGOR BARAZZETTI · 6.1 MAPA DO . SITE. E FLUXO DE ... conceitual sobre definição de testes de usabilidade. Utilizamos Unger e Chandler ... durante

89

Page 91: UNIVERSIDADE DE CAXIAS DO SUL IGOR BARAZZETTI · 6.1 MAPA DO . SITE. E FLUXO DE ... conceitual sobre definição de testes de usabilidade. Utilizamos Unger e Chandler ... durante

90

Page 92: UNIVERSIDADE DE CAXIAS DO SUL IGOR BARAZZETTI · 6.1 MAPA DO . SITE. E FLUXO DE ... conceitual sobre definição de testes de usabilidade. Utilizamos Unger e Chandler ... durante

91

Page 93: UNIVERSIDADE DE CAXIAS DO SUL IGOR BARAZZETTI · 6.1 MAPA DO . SITE. E FLUXO DE ... conceitual sobre definição de testes de usabilidade. Utilizamos Unger e Chandler ... durante

92

Page 94: UNIVERSIDADE DE CAXIAS DO SUL IGOR BARAZZETTI · 6.1 MAPA DO . SITE. E FLUXO DE ... conceitual sobre definição de testes de usabilidade. Utilizamos Unger e Chandler ... durante

93

Page 95: UNIVERSIDADE DE CAXIAS DO SUL IGOR BARAZZETTI · 6.1 MAPA DO . SITE. E FLUXO DE ... conceitual sobre definição de testes de usabilidade. Utilizamos Unger e Chandler ... durante

94

Page 96: UNIVERSIDADE DE CAXIAS DO SUL IGOR BARAZZETTI · 6.1 MAPA DO . SITE. E FLUXO DE ... conceitual sobre definição de testes de usabilidade. Utilizamos Unger e Chandler ... durante

95

Page 97: UNIVERSIDADE DE CAXIAS DO SUL IGOR BARAZZETTI · 6.1 MAPA DO . SITE. E FLUXO DE ... conceitual sobre definição de testes de usabilidade. Utilizamos Unger e Chandler ... durante

96

Analisando as respostas do questionário, verificamos que, em mais de 90%

dos casos, o site AliExpress apresenta soluções que estão de acordo com as

recomendações da lista de verificação.

7.2.2 Pesquisa qualitativa

A primeira usuária testada (A) executou a seguinte sequência de

comportamentos durante a navegação filmada:

iniciou a navegação procurando, no menu do site, por blusas e

camisetas, e executou a tarefa com rapidez;

usou a barra de rolagem, de forma intuitiva, na página de listagem de

produtos até selecionar um de seu interesse;

na página de detalhamento do produto, explorou as fotos, cores

disponíveis e utilizou o recurso de zoom; disse que gostou dessa

funcionalidade, mas pouco a utilizou, passando mais tempo

visualizando as imagens listadas na mesma página pela barra de

rolagem;

fez um comentário positivo sobre a possibilidade de ver a opinião de

outros compradores dentro da página do produto;

utilizou o recurso do navegador para voltar à página anterior;

comentou acerca de a página de listagem de produtos ser completa, e

elogiou os filtros de busca em forma de ícones, presente na lateral

esquerda;

fez nova busca utilizando o menu do site;

de forma rápida, rolou a página de listagem de produtos até o final.

Não encontrou algo de seu interesse e, mais uma vez, fez uma busca

usando o menu do site;

fez novo comentário sobre a facilidade de encontrar produtos e

acessou a categoria de sapatos;

selecionou um sapato que encontrou na listagem de produtos e

navegou de forma similar ao produto anterior na página de

detalhamento;

Page 98: UNIVERSIDADE DE CAXIAS DO SUL IGOR BARAZZETTI · 6.1 MAPA DO . SITE. E FLUXO DE ... conceitual sobre definição de testes de usabilidade. Utilizamos Unger e Chandler ... durante

97

usou, pela primeira vez, a busca por palavra-chave para procurar por

luvas. Apertou o botão “enter‖ do teclado para executar a busca;

rolou um pouco a página e voltou para observar os filtros. Observou-os

por algum tempo, mas não selecionou nenhum;

fez comentário negativo sobre os preços;

selecionou uma luva e visualizou, brevemente, a página dela;

aparentemente, não encontrou o que procurava e fechou o site,

finalizando a navegação.

Na entrevista em áudio, a usuária fez as seguintes observações:

disse que considera a página fácil de acessar, colorida, mas que é

poluída por ter muitas informações;

elogiou as cores, dizendo que são alegres e chamativas;

elogiou as animações, dizendo que são atrativas e que chamaram a

sua atenção;

afirmou que encontra o que precisa com facilidade, desde que esteja

em português;

disse que os produtos apresentam informação suficiente, que estão

bem explicados, e elogiou a possibilidade de ver comentários de outros

compradores;

alegou que não encontrou termos técnicos durante sua navegação no

AliExpress, mas que, às vezes, deparou com conteúdo em outras

línguas nesse mesmo site;

afirmou que, em navegações anteriores, nesse mesmo site, teve mais

dificuldades para cancelar uma compra do que para comprar; disse

que demorou um pouco, mas que conseguiu cancelar;

sugeriu que o site poderia adicionar a opção de cancelar compra,

afirmando que não encontrou essa opção;

falou que o site é bem claro, e elogiou as imagens;

relatou que percebeu a presença de ícones que representavam

informações sobre medidas de roupas;

comentou que não se lembrava de outros ícones, além desses;

Page 99: UNIVERSIDADE DE CAXIAS DO SUL IGOR BARAZZETTI · 6.1 MAPA DO . SITE. E FLUXO DE ... conceitual sobre definição de testes de usabilidade. Utilizamos Unger e Chandler ... durante

98

afirmou que os usuários podem se confundir, pois não fica claro que os

produtos são oferecidos por variados vendedores;

disse que fica frustrada quando tem dificuldades em reverter uma ação

indesejada num site ou sistema. Afirmou que isso jamais aconteceu

enquanto navegava no AliExpress;

lembrou, com detalhes, do que fez durante a navegação, e afirmou que

não teria dificuldades para executar as mesmas ações novamente;

disse que olhou uma luva touch, por achar interessante o recurso

inovador que esse produto oferecia;

afirmou que sempre consulta comentários de outros compradores

antes de executar uma compra;

ressaltou, como pontos positivos, a diversidade de categorias, a

facilidade de encontrar produtos e os filtros de busca;

listou, como pontos negativos, a busca por palavra-chave, dizendo que

não é específica e poderia ser melhor;

disse que não costuma utilizar atalhos de teclado e que não gosta

deles;

alegou que o site oferece um volume grande de recursos, elogiou o

menu e a facilidade de seu uso;

disse que considera a página inicial sobrecarregada de informação, e

gostaria que fosse mais limpa, e que apresentasse apenas as

promoções e novidades;

reforçou que apenas a página inicial é sobrecarregada;

afirmou que o AliExpress é eficaz na resolução de problemas;

afirmou que os produtos demoram para chegar, mas, na experiência

dela, todos foram recebidos;

afirmou dificuldade em pedir ressarcimento em produtos não recebidos;

afirmou que, caso houvesse dificuldades, buscaria ajuda para

resolução de problemas com outra pessoa de sua confiança;

não julgou importante uma documentação sobre como resolver

problemas, pois não a usa, mas que acha interessante;

Page 100: UNIVERSIDADE DE CAXIAS DO SUL IGOR BARAZZETTI · 6.1 MAPA DO . SITE. E FLUXO DE ... conceitual sobre definição de testes de usabilidade. Utilizamos Unger e Chandler ... durante

99

afirmou que, em caso de dificuldade, se desejasse muito um produto,

iria procurar auxílio com outras pessoas de sua confiança, mas, caso

não houvesse um interesse realmente grande, desistiria da compra.

Percebemos, com a análise comparativa, que a usuária (A) não apresentava

dificuldades de navegação. Ela demonstrava certo senso de urgência, executando

uma leitura de página célere, e ágil assimilação de conteúdo apresentado em forma

de imagem.

Na entrevista, ela enfatizou a importância dos filtros de busca, porém, durante

sua navegação não os utilizou, demonstrando preferir claramente a utilização do

menu de categorias a qualquer outra forma de busca apresentada pelo site.

No momento em que ela procurava por luvas, percebemos que ela passou um

tempo observando os filtros de busca, mas não os utilizou. Pressupomos, nesse

momento, que ela estava procurando um filtro por modelos femininos e, como não

encontrou, desistiu de utilizar o recurso.

Ela afirmou que não utilizou e não gosta de utilizar atalhos de teclado em

nenhum site, porém, na análise filmada, notamos que ela usa a tecla ―enter‖ para

executar a busca por palavra-chave, contradizendo a própria afirmação.

Em diferentes pontos da entrevista, a usuária ressaltou que considera a

página inicial do site sobrecarregada de informações; durante sua navegação,

pudemos notar que ela, de fato, não utilizou essa página, partindo rapidamente para

a busca por categorias no menu.

Relatou alguns problemas de linguagem. O site do AliExpress utiliza tradução

automática para outras línguas, o que pode causar alguns problemas e falta de

precisão na tradução.

Sugeriu que o site poderia adicionar a opção de cancelar compra, e afirma

que não encontrou essa opção, apesar de ela existir, o que mostra um problema de

visibilidade.

Ressaltou, também, que no site não está claro que os produtos são

oferecidos por diferentes vendedores, e que isso poderia confundir os usuários.

Ela afirmou que recebeu todos os produtos comprados no site, e reclamou

sobre dificuldade em pedir ressarcimentos por produtos não recebidos; disse que

buscaria ajuda com pessoas de confiança para resolução de problemas, o que

mostra certa insegurança e falta de confiança no atendimento do site.

Page 101: UNIVERSIDADE DE CAXIAS DO SUL IGOR BARAZZETTI · 6.1 MAPA DO . SITE. E FLUXO DE ... conceitual sobre definição de testes de usabilidade. Utilizamos Unger e Chandler ... durante

100

De maneira geral, concluímos que a navegação para essa usuária foi

satisfatória. Os itens que apresentaram falha na experiência dela foram:

filtros das buscas;

atendimento do site;

organização de conteúdo da página inicial;

informação sobre vendedores;

visibilidade do botão para cancelamento de compra;

tradução de linguagem.

O segundo usuário (B) apresentou o seguinte comportamento de navegação:

usou o menu de categorias e selecionou a página ―todas categorias‖;

reclamou do computador;

procurou por ferramentas para trabalhos artesanais, e reclamou quando foi

levado a uma página com acessórios para manicures;

voltou à página com todas as categorias e mudou seu interesse para

capas de iphone;

utilizou a rolagem do navegador, com facilidade, para visualizar as opções;

no fim da rolagem, demonstrou interesse por produto listado em ―produtos

relacionados‖, mas não clicou;

utilizou os filtros de busca na lateral esquerda;

reclamou por ter sido levado para um local que não desejava, e voltou

para a página inicial;

voltou a utilizar o menu de categorias para buscar por ferramentas, e

passou muito tempo lendo todas elas;

reclamou que só encontrava coisas para mulheres;

desistiu do menu depois de muito tempo e resolveu fazer uma busca por

palavra-chave;

perdeu novamente o interesse pelas ferramentas, e voltou a falar das

capas de celular;

buscou pela palavra Smart Phone. Escreveu errado, porém o sistema

entendeu a busca e listou aparelhos;

Page 102: UNIVERSIDADE DE CAXIAS DO SUL IGOR BARAZZETTI · 6.1 MAPA DO . SITE. E FLUXO DE ... conceitual sobre definição de testes de usabilidade. Utilizamos Unger e Chandler ... durante

101

percebeu rapidamente os filtros de busca e selecionou o seu modelo de

celular;

não ficou satisfeito com os resultados e modificou a busca por palavra-

chave por ―capa iphone 5c‖;

comemorou por ter encontrado a página que listava as capas de celular;

comentou que procurava por modelo específico com proteção frontal;

reclamou novamente que não encontrava modelos masculinos;

reclamou do preço de um modelo;

frustrou-se ao entrar na página de detalhamento de outro produto que não

interessava;

reclamou da falta de fotos para ver mais detalhes de um produto;

desistiu do produto e acessou outro;

reclamou novamente por ser um modelo feminino;

encontrou um novo modelo, mas reclamou do preço;

utilizou recurso de zoom para ver detalhes;

afirmou que não gostou, e reclamou por não estar achando o que queria;

continuou observando esse produto;

rolou a página até encontrar o modelo na cor desejada;

desistiu do produto, fechou a página e voltou para a listagem de produtos;

rolou a página até o fim, demonstrou desinteresse pelas opções e voltou

ao menu para procurar, novamente, por ferramentas;

acessou a categoria de ferramentas;

rolou a página de listagem de produtos rapidamente, desistiu da busca por

ferramentas, outra vez, e voltou para as capas de celular;

clicou no filtro eletrônicos;

olhou os produtos listados e voltou a afirmar que não era o que queria;

voltou para o menu de categorias e selecionou a mesma de antes;

rolou toda a página e comentou que não gosta de comprar no site;

voltou para as categorias;

procurou por camisas de times de futebol;

suspeitou da qualidade do produto pelo preço muito baixo;

observou por um tempo os filtros de busca na lateral e perdeu o interesse;

fechou o site e finalizou a seção.

Page 103: UNIVERSIDADE DE CAXIAS DO SUL IGOR BARAZZETTI · 6.1 MAPA DO . SITE. E FLUXO DE ... conceitual sobre definição de testes de usabilidade. Utilizamos Unger e Chandler ... durante

102

Na entrevista gravada em áudio, esse usuário fez as seguintes observações:

afirmou que gostou do visual e achou fácil utilizar o site;

afirmou que se localiza facilmente no site;

sugeriu que o site deveria mostrar mais fotos do produto em outros

ângulos;

disse que há diversos produtos que ele não entende;

disse que não encontrou termos técnicos no site que desconheça;

disse que nunca teve dificuldades para cancelar uma compra, mas que

antes de comprar costuma pensar bem para evitar esse tipo de situação;

disse que acha ruim ter de cancelar uma compra;

voltou a ressaltar que as imagens mostram poucos ângulos;

disse que não se confundiu em nenhum momento, achando que algo

representasse alguma coisa diferente do que esperava;

reclamou da quantidade grande de produtos, e disse que isso pode

dificultar o encontro do modelo específico que o usuário busca;

disse que perdeu tempo passando por um volume grande de produtos que

não interessavam;

disse que não se via numa situação onde ele pudesse executar alguma

ação irreversível, mas demonstrou aceitação caso acontecesse;

comentou que isso não aconteceu durante sua navegação;

lembrou de parte das ações que efetivou durante a navegação,

enfatizando mais os problemas em encontrar o produto específico que

procurava do que os detalhes da navegação;

afirmou que poderia facilmente fazer novamente tudo o que fez na sua

navegação;

afirmou que o site é bem claro;

afirmou que a categorização é bem estruturada;

ressaltou, como ponto negativo, que há poucas imagens dos produtos;

disse que sempre usa atalhos, mas não entendeu a pergunta. Após

informar que tratava-se de atalhos de teclado, ele afirmou que não

costuma utilizar;

considerou o site poluído, principalmente na página inicial;

Page 104: UNIVERSIDADE DE CAXIAS DO SUL IGOR BARAZZETTI · 6.1 MAPA DO . SITE. E FLUXO DE ... conceitual sobre definição de testes de usabilidade. Utilizamos Unger e Chandler ... durante

103

reclamou da categorização;

comentou que gostaria de encontrar tudo na mesma tela;

afirmou que não se sentiu sobrecarregado de informação e acrescentou

que faltou informação;

disse que o produto deveria ser melhor descrito;

afirmou que não teve problemas durante a navegação;

disse que nas primeiras vezes teve um pouco de dificuldade, mas que, aos

poucos, habituou-se ao site;

afirmou que já teve alguns pequenos problemas, mas conseguiu resolver;

disse que acha importante uma documentação detalhada de como

resolver problemas, e afirmou que a maioria das pessoas tem medo e

dúvidas na hora de efetuar uma compra;

afirmou que buscaria solucionar problemas por meio do chat ou suporte do

site.

O usuário (B) está próximo da terceira idade e, apesar de ter boa

familiarização com o uso da internet, apresentou menos facilidade e agilidade na

execução de tarefas que a usuária mais jovem analisada anteriormente.

Ele demonstrou entender a arquitetura da informação do site e o seu fluxo de

navegação, utilizando mais formas de pesquisa que os demais usuários analisados:

o menu, os filtros de busca, a página de listagem de todas categorias e a busca por

palavra-chave.

Demonstrou, no entanto, grande dificuldade em encontrar o que procurava,

despendendo muito tempo em ler as categorias antes de perceber que a busca por

palavra-chave seria a melhor opção, já que procurava por algo específico.

Na entrevista gravada, se contradisse algumas vezes, afirmando em um

momento que a categorização era bem estruturada e, em outros momentos,

reclamando da dificuldade em encontrar o que procurava pelas categorias.

Afirmou, também, não ter se confundido em nenhum momento durante a

navegação, porém, na análise percebeu-se claramente que ele clicava em algumas

categorias com uma expectativa e encontrava algo diferente do que procurava.

O usuário não percebeu a possibilidade de utilizar diversos filtros de busca

para especificar seu produto. Na busca por palavra-chave, utilizou um termo muito

Page 105: UNIVERSIDADE DE CAXIAS DO SUL IGOR BARAZZETTI · 6.1 MAPA DO . SITE. E FLUXO DE ... conceitual sobre definição de testes de usabilidade. Utilizamos Unger e Chandler ... durante

104

genérico, porém, percebeu o erro e fez nova busca com os termos específicos do

seu produto.

Passou a maior parte do tempo alternando entre dois interesses: ferramentas

de marcenaria e capas para o celular. Demonstrou maior dificuldade em encontrar

as ferramentas e perdeu o interesse na busca rapidamente, pois sempre que tentava

executá-la não conseguia resultados precisos.

Reclamou constantemente de receber muitos resultados destinados para o

público feminino, o que mostra um ponto que poderia ser melhorado nos filtros de

busca, já que não existe a segmentação de masculino e feminino para as capas de

celular, por exemplo.

Fez críticas ao grande volume de informação na página inicial, e à falta de

informação e fotos de diferentes ângulos nas páginas de detalhamento do produto.

Apesar de não ter conseguido concluir seu objetivo, o usuário não demonstrou

grande dificuldade em entender como o site funciona.

Concluímos que a experiência desse usuário foi negativa, visto que ele não

conseguiu atingir seu objetivo durante a navegação. A análise mostra que alguns

pontos poderiam ser trabalhados para que a experiência desse perfil de usuário

fosse otimizada. Encontramos falhas nos seguintes itens:

categorização;

filtros de buscas;

organização de conteúdo da página inicial;

detalhamento do produto;

definição e direcionamento de conteúdo por público-alvo.

O terceiro processo de testes foi feito com a usuária (C), que possui perfil

similar ao da primeira entrevistada. A sequência de comportamentos dessa usuária

foi:

iniciou a navegação com busca por palavra-chave;

fez busca por palavra em inglês, mesmo o site estando traduzido para

português;

reclamou que não entendia o que significavam os ícones dos diamantes;

Page 106: UNIVERSIDADE DE CAXIAS DO SUL IGOR BARAZZETTI · 6.1 MAPA DO . SITE. E FLUXO DE ... conceitual sobre definição de testes de usabilidade. Utilizamos Unger e Chandler ... durante

105

reclamou do preço;

desistiu de procurar por vestidos e fez nova busca pela palavra-chave

―cupcakes‖;

reclamou que alguns produtos são oferecidos para compra em lotes, e que

isso a confunde;

elogiou os filtros de busca e utilizou um deles para especificar a sua

busca;

rolou a página rapidamente até o fim e não se interessou por nada;

voltou a utilizar o campo de busca por palavra-chave; dessa vez buscou

por ―cookies‖;

selecionou dois dos produtos listados e abriu em novas abas do

navegador;

clicou em uma das abas e observou os detalhes do produto;

elogiou o preço;

rolou a página um pouco e não demonstrou interesse por informações

adicionais sobre o produto;

clicou na segunda aba para ver o outro produto;

resolveu fazer login no site;

na tela de login, usou atalhos do ―tab‖ e ―enter‖ para preencher os campos

e acessar a área;

deixou o login carregando em uma aba e acessou outra que ela havia

selecionado para um produto;

observou e rolou a página para ver detalhes;

fez comentário de aprovação a respeito das várias fotos do produto;

clicou em outra aba para ver outro produto;

rolou rapidamente, elogiou o produto e clicou em outra aba com um

produto diferente, que já estava observando anteriormente;

adicionou o produto em sua lista de desejos e comentou que o queria

muito;

voltou para o produto que estava visualizando anteriormente, clicando em

uma aba – uma forma para biscoitos em formato de urso;

fechou essa aba definitivamente;

Page 107: UNIVERSIDADE DE CAXIAS DO SUL IGOR BARAZZETTI · 6.1 MAPA DO . SITE. E FLUXO DE ... conceitual sobre definição de testes de usabilidade. Utilizamos Unger e Chandler ... durante

106

voltou para uma aba onde estava visualizando, anteriormente, um produto

para decoração de bolos;

adicionou esse produto em sua lista de desejos;

fechou a aba do produto e voltou à página de listagem de produtos;

comentou que estava cansada de navegar;

utilizou novamente a busca por palavra-chave para procurar por ―capas

iphone 5c‖.

reclamou novamente das ofertas de compra em lote;

questionou se não era possível comprar um item apenas;

perdeu o interesse, fechou a página e finalizou a navegação.

Na entrevista, essa usuária deu as seguintes respostas:

disse que, no geral, gosta do visual do site;

demonstrou consciência sobre os diferentes vendedores presentes no site;

disse que o considerava um pouco sobrecarregado de informações, mas

que ela não se perdia;

disse que gosta das cores;

ressaltou os pontos que considerava positivos na busca por palavra-

chave e nos filtros de busca;

afirmou que sempre sabe onde está durante a navegação;

disse que não foi exposta a termos técnicos, mas reclamou da tradução de

linguagem automática;

afirmou que não recebeu um dos produtos, e teve dificuldades para

cancelar a compra e receber suporte do vendedor;

afirmou que percebeu a presença de ícones, e que alguns deles a

confundiram;

disse que nada a confundiu, no sentido de parecer algo que não era,

durante a sua navegação;

ressaltou a dificuldade de assimilação causada por produtos que são

oferecidos para venda apenas em lotes;

Page 108: UNIVERSIDADE DE CAXIAS DO SUL IGOR BARAZZETTI · 6.1 MAPA DO . SITE. E FLUXO DE ... conceitual sobre definição de testes de usabilidade. Utilizamos Unger e Chandler ... durante

107

afirmou ficar triste quando conclui algo que não quer, ou quando fecha, por

descuido, uma página de produto que achou por acaso, mas que

despertou seu interesse;

afirmou que isso não aconteceu com ela no site AliExpress;

demonstrou consciência do que havia feito durante sua navegação;

afirmou que não teria dificuldades para fazer tudo novamente;

ressaltou, como pontos positivos, o preço e a facilidade de encontrar

produtos;

como ponto negativo, relatou a insegurança para aqueles que não

dominam o inglês, já que a comunicação com os vendedores é nessa

língua;

mencionou, também, que nem sempre os vendedores respondem, mesmo

tentando entrar em contato em inglês;

disse que considera a compra meio arriscada, devido à procedência dos

produtos – China;

disse que não se sente totalmente segura comprando no site;

disse que os atalhos no teclado facilitam a sua vida e, por isso, os utiliza;

comentou que não utilizou os atalhos durante a navegação;

afirmou, com entusiasmo, que considera grande o volume de recursos

oferecidos pelo site, e ressaltou as possibilidades de busca;

disse que gosta de um design organizado e pouco poluído;

afirmou que o AliExpress a sobrecarregou de informação em alguns

momentos;

sugeriu a utilização de menos ícones pelo site;

afirmou que, na procura por ―vestido‖, recebeu opções em demasia,

porém, após efetuada a primeira busca, o site facilitou oferecendo os

filtros;

afirmou ter tido um problema com relação a uma compra não recebida;

afirmou que o site não a ajudou a resolver esse problema;

comentou que não lê a documentação para resolução de problemas;

comentou que se o acesso à documentação fosse fácil, talvez a usasse;

afirmou que, caso enfrentasse algum problema no AliExpress, procuraria

por uma solução no Google, ou pediria auxílio a um terceiro.

Page 109: UNIVERSIDADE DE CAXIAS DO SUL IGOR BARAZZETTI · 6.1 MAPA DO . SITE. E FLUXO DE ... conceitual sobre definição de testes de usabilidade. Utilizamos Unger e Chandler ... durante

108

Assim como a usuária (A), essa participante demonstrou facilidade no uso da

internet, apresentando uma navegação rápida, tanto na execução de tarefas quanto

na assimilação de informações visuais apresentadas na tela, diferindo apenas na

forma como busca os produtos.

Ela utilizou a busca por palavras-chave e os filtros de busca para encontrar o

que procurava, demonstrando familiaridade com esse tipo de pesquisa, escolhendo

de forma precisa as palavras a serem procuradas. Demonstrou, também, ter

consciência de que buscas em inglês retornam resultados mais precisos, fazendo

duas vezes a busca nessa língua de forma automática.

Diferente da outra usuária, que possui perfil similar, apresentou grande

consciência dos recursos do navegador, abrindo diversos produtos em abas

diferentes e alternando entre elas durante sua navegação, inclusive para otimizar o

seu tempo quando a página de login da sua conta estava carregando.

Apesar de afirmar que não utilizou atalhos de teclado durante sua navegação,

verificamos que ela usou, de forma automática, tanto a tecla ―tab‖ quanto a tecla

―enter‖ na página de login da conta. Além disso, utilizou o ―enter‖ para efetuar buscas

por palavras-chave após digitá-las.

Não efetuou compra, mas colocou alguns itens na sua lista de desejos. Foi a

única usuária entrevistada a utilizar esse recurso.

Apresentou facilidade em navegar e encontrar o que procurava, porém,

reclamou do volume de informações na página inicial e, repetidas vezes, mencionou

dificuldades referentes a compras oferecidas em lotes, afirmando que isso poderia

confundir os usuários.

Não percebeu que existe um filtro na barra acima da listagem de produtos,

para listar apenas itens com a possibilidade de compra unitária, o que aponta um

problema de visibilidade para esse recurso.

Ressaltou, como ponto negativo, a falta de segurança, afirmando que já

efetuou uma compra e não a recebeu, e o site não a ajudou a resolver esse

problema. Afirmou que, caso enfrentasse problemas, recorreria à ajuda de terceiros,

ou buscaria por soluções no Google, o que demonstra falta de confiança no suporte

oferecido pelo próprio site. Resposta similar à da primeira usuária entrevistada.

Dessa análise, extraímos os seguintes pontos que merecem atenção e que,

se otimizados, melhorariam a experiência dessa usuária:

Page 110: UNIVERSIDADE DE CAXIAS DO SUL IGOR BARAZZETTI · 6.1 MAPA DO . SITE. E FLUXO DE ... conceitual sobre definição de testes de usabilidade. Utilizamos Unger e Chandler ... durante

109

visibilidade do filtro para compra unitária;

suporte do site;

segurança;

volume de informações na página inicial.

O quarto a ser analisado foi o usuário (D). O relato de sua experiência filmada

foi:

iniciou a navegação rolando rapidamente a página inicial;

subiu a rolagem e utilizou o campo de busca por palavra-chave para

buscar por ―Cristiano Ronaldo‖;

reclamou que a palavra star surgiu dentro do campo de pesquisa dele

automaticamente;

usou os filtros de busca da barra horizontal para estipular a faixa de preço

que estava disposto a pagar;

clicou no filtro para listar apenas produtos disponíveis para compra

unitária;

filtrou por produtos com entrega gratuita;

rolou e interessou-se por uma das camisas listadas, por vir com um

calção;

observou a página de detalhamento desse produto;

reclamou da foto do produto, afirmando que era feia e pequena;

elogiou a possibilidade de zoom, mas reclamou que, mesmo usando esse

recurso, a foto continuava pequena;

mencionou que o motivo de o zoom não ter ampliado satisfatoriamente,

era de natureza técnica;

selecionou o tamanho ―L‖ para seu produto;

rolou a página e visualizou os detalhes do produto;

comentou que poderiam estar melhor separados;

continuou rolando a página para ver mais detalhes do produto;

comentou que a distribuição de algumas imagens estava horrível e

reclamou do espaço vazio ao lado delas;

sugeriu melhorias técnicas;

Page 111: UNIVERSIDADE DE CAXIAS DO SUL IGOR BARAZZETTI · 6.1 MAPA DO . SITE. E FLUXO DE ... conceitual sobre definição de testes de usabilidade. Utilizamos Unger e Chandler ... durante

110

reclamou da diagramação do anúncio do produto, mas disse que sabia

que não era culpa do site, e sim do vendedor que o cadastrou;

adicionou o produto no seu carrinho de compras;

clicou em ―continuar comprando‖;

acessou o link de produtos mais vendidos;

interessou-se pela oferta de um mouse, mas comentou que voltaria

depois;

interessou-se por um pen drive e clicou nele;

leu o título do produto em voz alta e comentou ter achado interessante;

elogiou as imagens do produto;

observou um pouco e fechou a aba;

fez login na página com usuário e senha, utilizando a tecla ―tab‖ e “enter”,

na hora de preencher os campos;

acessou seu carrinho de compras e procedeu facilmente durante as

etapas para conclusão de compra;

selecionou a opção de pagamento por boleto e recebeu mensagem de

erro do site;

reclamou, dizendo não saber o que aconteceu;

comentou ter perdido o interesse pela compra;

voltou para a página inicial;

reclamou do volume de conteúdo;

fechou a página e finalizou a navegação.

Na entrevista gravada, obtivemos o seguinte resultado:

sobre os aspectos visuais, afirmou que não lhe agrada;

afirmou achar os produtos bagunçados;

reclamou da organização da capa do site;

afirmou que os botões do site são feios;

disse que de 0 a 10, daria nota 4 para o visual do site;

afirmou que o site segue um padrão que a maioria dos e-commerce

segue, portanto, achou fácil localizar-se nele;

Page 112: UNIVERSIDADE DE CAXIAS DO SUL IGOR BARAZZETTI · 6.1 MAPA DO . SITE. E FLUXO DE ... conceitual sobre definição de testes de usabilidade. Utilizamos Unger e Chandler ... durante

111

questionou se usuários leigos teriam a mesma facilidade que ele, pois

acha meio bagunçado;

afirmou que encontrou um termo técnico em um botão, cujo significado

não conseguiu identificar;

afirmou que já cancelou uma compra, nunca teve dificuldades e acha o

sistema do site muito bom;

descreveu o processo de compra, entrega, devolução, resolução de

problemas e ressarcimento por compras mal sucedidas;

afirmou já ter tido compras mal sucedidas, mas que o site resolveu seu

problema;

disse que não reparou nos ícones do site;

afirmou não ter se confundido em nenhum momento achando que algo

representava algo diferente do que era;

afirmou que os filtros de busca são confusos;

comentou sobre o filtro para não precisar comprar produtos em lote;

comentou que acredita que as compras em lote podem confundir outros

usuários;

afirmou que se sentiria triste, caso executasse alguma ação, por engano,

que não pudesse ser desfeita, mas que isso não ocorreu;

lembrou parcialmente com detalhes do que fez durante a navegação;

comentou que quase concluiu uma compra, mas não o fez por um erro

desconhecido no site;

disse não ter tido dificuldades na navegação por já estar acostumado com

ela, mas ressalta que acha que os filtros de busca não são claros;

afirmou que já teve problemas com compras em lotes por não ter

entendido que se tratava desse tipo de compra e não somente de um item;

ressaltou como ponto positivo a devolução do dinheiro e a segurança nas

compras;

comentou que o único motivo que o impediria de comprar algo de seu

interesse no AliExpress seria devido às taxas de importação;

afirmou que o único atalho que utiliza é o clique no botão de rolagem do

mouse para abrir as páginas em novas abas no navegador;

afirmou não usar outros atalhos;

Page 113: UNIVERSIDADE DE CAXIAS DO SUL IGOR BARAZZETTI · 6.1 MAPA DO . SITE. E FLUXO DE ... conceitual sobre definição de testes de usabilidade. Utilizamos Unger e Chandler ... durante

112

afirmou que acha boa a quantidade de recursos e volume de informação

do site;

reclamou do visual novamente;

afirmou achar importante tudo o que o site exibe em termos de

informação;

afirmou não olhar a capa por achar muito sobrecarregada de informação;

sugeriu categorizar melhor a capa e simplificá-la;

comentou que sentiu muita raiva ao tentar concluir uma compra e ser

levado para uma página de erro;

afirmou que não havia botão para voltar nessa página de erro, apenas

para voltar para a página inicial;

disse que não perdeu os produtos que estavam no carrinho, mas que a

situação de erro o desagradou;

afirmou que o site não ajudou a resolver seu problema;

disse que não lê documentação e que prefere resolver os problemas na

tentativa prática de utilização;

disse que se encontrasse dificuldade tentaria voltar para a página inicial ou

desistiria de comprar o produto;

afirmou nunca buscar ajuda de suporte do site, pois prefere resolver por

conta própria os problemas.

Diferente dos usuários analisados anteriormente, esse entrevistado possui

elevado conhecimento técnico, e isso fica evidenciado na análise de sua navegação,

pois apesar de estar navegando em produtos de interesse pessoal, não deixou de

fazer observações e recomendações de nível técnico durante sua experiência.

O usuário demonstrou agilidade na execução de tarefas no site e não teve

dificuldade durante a navegação. Reclamou em diversos pontos sobre os aspectos

visuais do site, e foi o único entrevistado a levantar esse ponto como negativo.

Houve contradição de sua parte: em alguns momentos, afirmava que o volume de

informações do site era exagerado, e, em outros, dizia que era bom e tudo o que o

site apresentava era necessário.

Relatou problemas referentes à diferenciação de compras em lotes e em

unidades, assim como a usuária (B), embora tenha localizado os filtros. Assim, fez

Page 114: UNIVERSIDADE DE CAXIAS DO SUL IGOR BARAZZETTI · 6.1 MAPA DO . SITE. E FLUXO DE ... conceitual sobre definição de testes de usabilidade. Utilizamos Unger e Chandler ... durante

113

ressalvas sobre a possibilidade desse item causar confusão para outros usuários,

reforçando o seu perfil técnico.

Também foi o primeiro e único dos usuários entrevistados a usar o filtro de

busca horizontal para encontrar produtos por faixa de preço e filtrar por compra

unitária, o que demonstra que ele estava ciente de que nos resultados são

apresentados produtos com valores válidos apenas para compras em lotes. Outra

ação exclusiva foi o acesso ao link de produtos mais vendidos, cujo item possui, em

nossa opinião, pouca visibilidade.

Concluímos, por meio da análise desse usuário, que o grande volume de

reclamações e sugestões partiu de críticas de âmbito técnico e não exatamente da

sua experiência de uso, visto que conseguiu navegar e executar seus objetivos no

site com extrema rapidez e facilidade. Teve um problema na conclusão de compra,

mas ele mesmo afirmou que soube resolvê-lo facilmente. Logo, podemos concluir

que a experiência desse usuário foi positiva em termos gerais.

Das sugestões propostas pelo mesmo, e da análise de seus comportamentos,

pudemos observar os seguintes itens que poderiam ser melhorados:

visibilidade do filtro para compra unitária;

visual do site;

imagens dos produtos;

filtros de busca;

página de solução de erros técnicos;

volume de informações na capa do site;

termos técnicos.

O quinto e último usuário analisado (E) tem perfil similar ao (D) e apresenta

grande conhecimento técnico. Sua análise de comportamento filmado apontou os

seguintes relatos:

iniciou dando uma rápida olhada nas categorias do menu;

fez uma busca pelos termos ―placa de vídeo‖ e usou a tecla “enter” para

confirmar a busca;

Page 115: UNIVERSIDADE DE CAXIAS DO SUL IGOR BARAZZETTI · 6.1 MAPA DO . SITE. E FLUXO DE ... conceitual sobre definição de testes de usabilidade. Utilizamos Unger e Chandler ... durante

114

rolou a página e passou um tempo observando um dos produtos listados

até clicar nele;

rolou a página de detalhamento, dando mais atenção aos dados técnicos

do que às imagens do produto;

passou o mouse na área de login, observou, clicou e foi levado para a

página de login;

preencheu os campos de login utilizando as teclas ―tab‖ e ―enter‖;

quando tentou efetuar login, o site acusou erro de senha;

reclamou que o site AliExpress não deixa utilizar números na senha,

apenas letras;

tentou mais algumas vezes, até acertar;

utilizou o menu lateral para acessar blusas femininas;

aparentemente, acessou por engano e modificou a busca para blusas

masculinas, seguindo o mesmo processo;

ao encontrar um produto de interesse, clicou direto no link feedback, que o

levou para as opiniões dos compradores sobre aquele produto;

comentou que acha importante sempre ver a opinião de outros

compradores antes de efetuar uma compra;

rolou para cima a página e observou as outras opções de cores;

usou o breadcrumb7 para voltar à página que listava roupas e acessórios;

usou um filtro de busca da lateral para listar apenas meias;

elogiou os filtros de busca da lateral;

usou o botão ―voltar‖ do navegador para retornar para a página de

listagem de roupas e acessórios;

usou filtro de busca para exibir calças, rolou a página até o fim e não se

interessou por nada;

usou botão ―voltar‖ do navegador para desfazer o filtro de calças e voltou

para a listagem de roupas e acessórios;

fez novo filtro no menu lateral por camisas;

7 Segundo o Google (2014), Breadcrumbs são auxiliares de navegação que aparecem geralmente no

topo da página, indicando o nível hierárquico do site em que se encontra o internauta, permitindo que este facilmente retorne às páginas navegadas anteriormente. Ex: Home > Produtos > Tênis > Adidas > Barricade V Ltd Men. Traduzida, a expressão significa caminho de migalhas de pão, em alusão à história infantil "João e Maria".

Page 116: UNIVERSIDADE DE CAXIAS DO SUL IGOR BARAZZETTI · 6.1 MAPA DO . SITE. E FLUXO DE ... conceitual sobre definição de testes de usabilidade. Utilizamos Unger e Chandler ... durante

115

rolou a página até encontrar um produto que despertou seu interesse e

clicou nele;

comentou positivamente sobre o fato de o site oferecer frete grátis para a

maioria dos produtos;

rolou rapidamente para ver os comentários de outros compradores;

fez um comentário desconfiado sobre as opiniões deixadas por outros

compradores, sugerindo que podem ser robôs, por publicarem

comentários muito parecidos;

rolou a página para cima para ver outras opções de cores do produto;

fez comentário positivo sobre o preço;

deixou o produto aberto em aba individual e voltou a olhar a aba anterior

onde havia a listagem de outros produtos;

rolou a página até o fim e não se interessou por nada;

voltou ao topo e passou o mouse sobre o menu de categorias;

clicou na categoria ―suéter‖;

rolou rapidamente até o fim da página e novamente até o topo;

passou o mouse na área de perfil do usuário e acessou o item ―meus

pedidos‖;

clicou em um dos produtos que ele já havia comprado e estava

aguardando o recebimento;

deu uma rápida olhada e voltou para a tela anterior;

passou o mouse sobre alguns ícones, observou as informações e clicou

no número do pedido, sendo levado para uma página de detalhamento

dessa compra;

visualizou o contador de tempo que indica qual o prazo que ele tem para

abrir uma disputa com o vendedor, em caso de problemas;

rolou mais um pouco e observou o status do correio;

clicou em ―atualizar‖e nada aconteceu;

continuou lendo detalhes sobre a proteção de sua compra;

usou o breadcrumb para acessar a sua lista de pedidos;

clicou em outro dos produtos já comprados que aguarda recebimento;

rolou um pouco a página e clicou em um dos produtos;

Page 117: UNIVERSIDADE DE CAXIAS DO SUL IGOR BARAZZETTI · 6.1 MAPA DO . SITE. E FLUXO DE ... conceitual sobre definição de testes de usabilidade. Utilizamos Unger e Chandler ... durante

116

observou um pouco a página e clicou em outra aba que levava de volta

para a tela de pedidos;

fechou algumas abas e clicou no logo do AliExpress para ser levado de

volta para a página inicial;

explorou a página inicial, viu um ícone de um computador e clicou nele;

rapidamente, abriu dois itens que interessavam em abas diferentes;

rolou a página brevemente e mudou de aba;

acessou um produto para reparos técnicos de computador;

rolou a página, leu informações e suspeitou do produto, dizendo que não

sabia que ele existia;

observou os comentários dos compradores, e, ao perceber que não havia

nenhuma opinião listada, fechou a aba;

voltou para a listagem de produtos;

perdeu o interesse e fechou o navegador.

Na entrevista gravada, o usuário deu as seguintes respostas:

afirmou que gosta do design visual e que, pela quantidade de itens

presentes no site, ele é bem organizado;

disse que se localiza facilmente no site e o acha intuitivo;

afirmou não ter encontrado termos técnicos que não entende, mas já

encontrou dificuldades em entender opiniões de outros usuários;

afirmou que alguns produtos oferecem informações técnicas demais e que

isso confunde;

disse que nunca teve de cancelar uma compra, e nem teve dificuldades

para executar compras;

disse que notou a presença de ícones, e considera que eles facilitam a

vida de alguns usuários com menos conhecimento técnico do que ele;

afirmou que sabe o que a maioria dos ícones significa;

afirmou que nunca se confundiu achando que alguma coisa representava

algo diferente do que parecia ser;

acredita que nada no AliExpress pode confundir os usuários;

afirmou que não ocorreram erros durante a sua navegação;

Page 118: UNIVERSIDADE DE CAXIAS DO SUL IGOR BARAZZETTI · 6.1 MAPA DO . SITE. E FLUXO DE ... conceitual sobre definição de testes de usabilidade. Utilizamos Unger e Chandler ... durante

117

lembrou, detalhadamente, as ações que executou durante a navegação e

afirmou que poderia repetir facilmente os mesmos passos, se necessário;

afirmou que o menu deveria ter menos itens;

sugeriu que o menu poderia ter menos subcategorias e mais categorias;

relatou volume muito grande de opções quando procurou por camisas;

afirmou não ter tido dificuldade com o menu, mas que poderia ser melhor

organizado;

listou como ponto positivo do site o pagamento por boleto e, como

negativo, a organização do menu;

afirmou que costuma usar bastantes teclados de atalho;

afirmou que utilizou as teclas de atalho durante sua navegação no

AliExpress e citou Page up, Page down, Home, End e Backspace;

disse que não sentiu falta de nenhum tipo de atalho;

afirmou que gostaria que o volume de informações na tela fosse

exatamente como é e que não mudaria nada;

afirmou que o AliExpress sobrecarregou-o de informação no menu;

afirmou gostar da página inicial;

relatou problemas de tradução em navegações anteriores;

afirmou achar muito importante um FAQ e uma documentação detalhada;

falou sobre as facilidades que uma documentação oferece para usuários

com dificuldade;

afirmou que procuraria soluções para problemas no Google, suporte do

site via chat, suporte por e-mail e documentação.

Notamos por meio da análise desse usuário, que seus comportamentos são

totalmente compatíveis com seu perfil técnico. Ele demonstrou extrema agilidade em

sua navegação, alternando entre diferentes áreas do site e utilizando atalhos e

recursos do navegador com frequência.

Ele também respondia a diversas perguntas pensando não apenas em si,

mas em outros usuários que poderiam vir a utilizar determinados recursos. Foi o

primeiro usuário analisado a acessar a área de pedidos das compras que já havia

feito em seções anteriores, e demonstrou plena consciência das possibilidades que

essa página oferece.

Page 119: UNIVERSIDADE DE CAXIAS DO SUL IGOR BARAZZETTI · 6.1 MAPA DO . SITE. E FLUXO DE ... conceitual sobre definição de testes de usabilidade. Utilizamos Unger e Chandler ... durante

118

Procurou, em boa parte do tempo, por produtos de computação, geralmente

lendo as informações técnicas e dando pouca importância para as fotos, diferente

dos usuários com perfil casual, que demonstravam valorizar bem mais as fotos.

Ressaltou a importância de atalhos no teclado e citou alguns exemplos deles

pouco usados pela maioria das pessoas. Mas, assim como os outros entrevistados,

não notou que usou as teclas ―tab‖ e ―enter‖ no preenchimento de campos.

Outro ponto que o difere dos usuários analisados anteriormente, foi a

confiança no suporte do site e na segurança em receber as compras. Foi também o

único usuário a afirmar total satisfação com o volume de informações presentes na

página inicial.

Teve pouquíssimas dificuldades, mas reclamou da organização e excesso de

informações no menu, da tradução automática do site e da forma como ele limita o

uso de caracteres na hora de criar uma senha.

De maneira geral, houve poucas contradições em relação a sua navegação e

à entrevista gravada. Concluímos que experiência no site demonstrou-se bastante

satisfatória para esse usuário.

Pudemos perceber alguns pontos que poderiam ser melhorados nos

seguintes itens:

categorização no menu;

tradução de linguagem;

limitação de caracteres na senha.

Ao finalizar as cinco análises individuais, pudemos coletar a seguinte lista de

pontos a serem aperfeiçoados, conforme a percepção e comportamentos de cada

usuário, e de acordo com as recomendações levantadas pelos autores estudados:

Page 120: UNIVERSIDADE DE CAXIAS DO SUL IGOR BARAZZETTI · 6.1 MAPA DO . SITE. E FLUXO DE ... conceitual sobre definição de testes de usabilidade. Utilizamos Unger e Chandler ... durante

119

Usuário A Usuário B

• atendimento do site;

• filtros das buscas;

• informação sobre vendedores;

• segurança da compra;

• organização de conteúdo da página

inicial;

• tradução de linguagem;

• visibilidade do botão para

cancelamento de compra.

• categorização no menu;

• definição e direcionamento de conteúdo

por público-alvo;

• detalhamento de informações do

produto;

• filtros de buscas;

• imagens do produto;

• volume de informações na página

inicial.

Usuário C Usuário D

• atendimento do site;

• visibilidade do filtro para compra

unitária;

• segurança da compra;

• volume de informações na página

inicial.

• visibilidade do filtro para compra

unitária;

• visual do site;

• imagem dos produtos;

• filtros de busca;

• página de solução de erros técnicos;

• volume de informações na página

inicial;

• termos técnicos;

• tradução de linguagem.

Usuário E

• categorização no menu;

• tradução de linguagem;

• limitação de caracteres na senha.

Por meio das informações coletadas e da análise conjunta dos usuários,

pudemos perceber que eles, mesmo com suas particularidades, tiveram

comportamentos de navegação e dificuldades similares em muitos casos.

Page 121: UNIVERSIDADE DE CAXIAS DO SUL IGOR BARAZZETTI · 6.1 MAPA DO . SITE. E FLUXO DE ... conceitual sobre definição de testes de usabilidade. Utilizamos Unger e Chandler ... durante

120

Um fato curioso da pesquisa foi que a maioria respondeu não gostar e nunca

utilizar atalhos do teclado na navegação, porém, a análise filmada mostrou que

todos eles usaram uma ou mais vezes esses atalhos, principalmente as teclas ―tab‖

e ―enter‖, que agilizam o preenchimento de campos e confirmação de buscas.

Esses recursos costumam ser utilizados por pessoas com algum tipo de

deficiência, com o intuito de facilitar a sua navegação. Como não tivemos

participantes que apresentassem essas dificuldades, comprovamos que os cuidados

com a acessibilidade de um site criam facilidades de navegação não apenas para

portadores de necessidades especiais, mas para o público em geral.

Com exceção do usuário com menos experiência de navegação, apesar de a

maioria ter reclamado de alguns detalhes referentes à organização de conteúdo, os

outros usuários conseguiram encontrar o que procuravam no site do AliExpress,

demonstrando facilidade e rápido entendimento do fluxo de navegação do mesmo.

Os pontos ressaltados como problemáticos foram a categorização de menu e

os filtros de busca. Quatro dos cinco usuários fizeram comentários negativos sobre o

volume de conteúdo exagerado na capa do site; o único que não fez reclamações a

esse respeito clicou num link exposto no corpo dessa página.

Todos os usuários demonstraram consciência sobre o fato de o site ser

apenas um intermediador para que os vendedores independentes utilizem o sistema

do AliExpress para fazer suas vendas, porém, houve diversas ressalvas a respeito

das vendas oferecidas em lotes. Três usuários afirmaram que já se confundiram com

isso, achando que os preços de alguns produtos vendidos em lotes eram unitários.

Dos entrevistados, apenas um de nível avançado notou e utilizou o filtro para

ofertas de apenas uma unidade. Uma das entrevistadas não percebeu a presença

do recurso e sugeriu que ele deveria existir, o que indica um problema de visibilidade

do filtro e falhas na própria comunicação do site a respeito de compras em lote.

Notamos, também, que as duas usuárias do sexo feminino afirmaram não se

sentir completamente seguras a respeito de suas compras. Diferente dos

entrevistados do sexo masculino, que afirmaram buscar soluções de problemas por

conta própria ou pelo suporte do site, elas afirmaram que buscariam ajuda de outra

pessoa de sua confiança e evitariam o atendimento do site, ou tentariam resolver o

problema por conta própria.

Os usuários se contradisseram em diversos momentos; hora elogiando

determinado recurso, hora criticando-o dentro do mesmo contexto. Também deram

Page 122: UNIVERSIDADE DE CAXIAS DO SUL IGOR BARAZZETTI · 6.1 MAPA DO . SITE. E FLUXO DE ... conceitual sobre definição de testes de usabilidade. Utilizamos Unger e Chandler ... durante

121

algumas respostas, na sua entrevista, que não correspondiam ao seu

comportamento na hora da filmagem, o que confirma o estudo teórico sobre esse

tipo de situação.

Concluímos, por meio dessa pesquisa, que o site AliExpress satisfaz e

propicia uma boa experiência aos seus usuários de maneira geral. O grande volume

de produtos e informações confunde um pouco, mas não inviabiliza a conclusão de

objetivos na maioria das vezes.

Apesar das ressalvas a respeito da segurança, todos os participantes

concordaram que o site é fácil de utilizar, costuma propiciar boa experiência, que já

compraram e voltariam a comprar no AliExpress.

O site não apresenta problema de nível crítico e atende às recomendações

heurísticas de Nielsen, listadas no capítulo seis deste trabalho.

Ainda assim, o Design de UX existe para garantir a melhor experiência

possível para o usuário, portanto, elaboramos uma lista de recomendações de

melhorias baseada nessa pesquisa e em nossa fundamentação teórica, além de

nossa vivência profissional:

a) categorização do menu e filtros de busca: usuários relataram volume

grande de informações e problemas na categorização. Uma boa solução

para esse problema seria aplicar testes com usuários por meio da técnica

de card sorting. Os resultados permitiriam encontrar os problemas na

estruturação dos menus e entender as expectativas de categorização dos

usuários para essa área. O mesmo poderia ser feito com os filtros,

oferecendo cartões em branco para que eles sugerissem filtros

indisponíveis que julgassem importantes;

b) volume de informação na página inicial: por meio de uma adaptação do

card sorting é possível aplicar a mesma técnica e obter bons resultados

sobre as percepções dos usuários para essa área do site. Os recursos da

capa seriam divididos em cartões e os usuários montariam a capa com os

recursos que julgassem mais importantes. Transformar a capa em uma

área customizável pelo usuário poderia ser uma boa solução e ajudaria a

captar mais cadastros. O uso do card sorting teria importância significativa

numa próxima etapa da pesquisa iniciada aqui;

Page 123: UNIVERSIDADE DE CAXIAS DO SUL IGOR BARAZZETTI · 6.1 MAPA DO . SITE. E FLUXO DE ... conceitual sobre definição de testes de usabilidade. Utilizamos Unger e Chandler ... durante

122

c) segurança das compras: o site oferece várias formas de proteção à

compra, mas talvez isso não esteja tão evidente. Chamadas e destaques

informando sobre essas possibilidades poderiam ser uma boa solução

para aumentar a consciência/segurança do usuário sobre esses recursos;

d) tradução de linguagem: o site do AliExpress oferece ferramentas de

tradução automática, o que acaba gerando traduções pouco precisas.

Traduções manuais e revisadas por especialistas poderiam propiciar uma

comunicação melhor com os compradores e facilitar a eficiência dos filtros;

e) informações sobre compra em lotes: vários usuários relataram confusão

nesse ponto. Recomendamos destacar o filtro ―uma peça apenas‖ e,

talvez, sugerir de forma destacada (por meio de frases de apoio), que o

usuário o utilize;

f) anúncios e imagens dos produtos: apesar de a maioria dos anunciantes

elaborar bons anúncios, houve algumas reclamações sobre a sua

estruturação e sobre as imagens dos produtos. Uma campanha ou

documentação detalhada para os lojistas, sobre como elaborar bons

anúncios e como utilizar as imagens, pode aumentar a conversão de

vendas, melhorar a experiência do usuário e qualificar visualmente o site;

g) acompanhar relatórios de desempenho, com frequência: como constatado

nessa pesquisa, os usuários mudam constantemente suas percepções. A

melhor maneira de obter melhoras é unir pesquisas realizadas com o

usuário, com uma análise rigorosa e frequente dos números apresentados

pelos relatórios de desempenho do site, e executar testes e mudanças

com frequência.

Page 124: UNIVERSIDADE DE CAXIAS DO SUL IGOR BARAZZETTI · 6.1 MAPA DO . SITE. E FLUXO DE ... conceitual sobre definição de testes de usabilidade. Utilizamos Unger e Chandler ... durante

123

8. CONSIDERAÇÕES FINAIS

Para chegarmos a uma conclusão sobre os resultados obtidos nessa

pesquisa, primeiramente, devemos nos lembrar do problema que a originou. O

trabalho partiu do problema: O Design de UX pode melhorar a relação do usuário

com uma interface de software ou website? A partir da pesquisa teórica, unida à

prática de campo, constatamos que a resposta para esse questionamento é positiva.

Tanto as constatações apresentadas pelos autores pesquisados, quanto

nossa lista de recomendações de melhorias comprovaram e possibilitaram o alcance

de nosso objetivo geral, que era avaliar a importância do Design de UX na

qualificação da relação do usuário com interfaces digitais.

Obtivemos igual êxito em nossos objetivos específicos, pois estudamos o

contexto em que se desenvolvem as interações com interfaces digitais ao trazer um

panorama geral do surgimento do mundo virtual e da cibercultura, por meio de

autores conceituados como Lévy, Lemos e Palácios.

Houve sucesso em conceituar, tensionando design, design de interação,

design de interfaces, design visual, usabilidade, arquitetura da informação e design

de UX ao elaborar o capítulo quatro, onde foram englobadas e esmiuçadas as

particularidades, relações e interdependências de todos elementos da UX.

Explicamos a importância da participação do usuário na construção e

melhoria de uma interface, de forma conceitual, para reforçar a comprovação da

teoria mediante testes de campo apresentados no capítulo oito, obtendo sucesso na

conclusão desse objetivo específico.

Validamos a hipótese – O Design de UX tem importância fundamental na

relação do usuário com interfaces digitais – por meio das afirmações obtidas durante

nosso estudo bibliográfico. Um exemplo é a citação de Unger e Chandler (2009, p.

6):

Para criar experiências verdadeiramente memoráveis e satisfatórias, um projetista de UX precisa entender os elementos que são importantes para criar uma conexão emocional com os usuários do produto.

Também validamos essa hipótese ao identificar problemas e propor

sugestões que melhorariam a relação do usuário com a interface do site AliExpress,

embora, para obtermos uma conclusão mais precisa para essa afirmação,

Page 125: UNIVERSIDADE DE CAXIAS DO SUL IGOR BARAZZETTI · 6.1 MAPA DO . SITE. E FLUXO DE ... conceitual sobre definição de testes de usabilidade. Utilizamos Unger e Chandler ... durante

124

precisaríamos executar as melhorias propostas e mensurar os resultados,

identificando, assim, o seu verdadeiro impacto, o que não foi possível dentro do

cronograma proposto para conclusão deste projeto.

A segunda hipótese levantada foi: o contexto em que se desenvolvem as

interações digitais traz novas formas de relação usuário/usuário e usuário/interfaces.

Essa hipótese foi validada graças ao panorama de evolução da tecnologia e

ambiente virtual que criamos no início dos primeiros capítulos. A construção desse

conteúdo apresentou a existência de uma transformação no comportamento social,

originada do surgimento das novas tecnologias e da internet.

Nossos testes de campo foram planejados para criar uma ―dupla-rede‖, onde

pudemos perceber as diferenças de comportamento dos usuários quando se

relacionavam com o entrevistador, bem como quando a interação acontecia

diretamente com as interfaces, e permitiu localizar, com precisão, momentos de

incoerência nas respostas. Isso reforçou a confirmação da hipótese.

Outra hipótese validada pela nossa pesquisa foi que o conhecimento sobre as

especificidades dos conceitos de design, design de UX, design de interfaces e

usabilidade são fundamentais na construção da relação do usuário com as

interfaces, bem como a participação ativa do usuário na sua construção e melhoria.

Todo o conteúdo teórico que construímos serviu para a definição de técnicas

a serem aplicadas nos testes de campo. Sem esse aprofundamento teórico, não

seria possível aplicar os testes práticos e, tampouco, coletar os resultados

apresentados no capítulo oito, que serviram como base para que pudéssemos criar

a lista de recomendações de melhorias para o site AliExpress.

O assunto abordado (O design de UX) possui uma abrangência muito grande

e uma pesada carga teórica. Reconhecemos que o método de pesquisa bibliográfica

foi escolhido com efetividade, cumprindo de forma satisfatória o seu papel, que foi

gerar uma base sólida de conhecimento que pudesse servir de subsídio para

aplicações práticas no projeto.

O método de análise crítica/comparativa foi igualmente bem sucedido, visto

que ele guiou toda a nossa experiência de campo, onde pudemos coletar valiosas

informações por meio de uma estratégia de ―dupla-rede‖. Além de levantar dados

quantitativos, cruzamos informações qualitativas obtidas por meio da análise do

comportamento de navegação dos usuários registrado em vídeo, com o conteúdo

das entrevistas gravadas em áudio.

Page 126: UNIVERSIDADE DE CAXIAS DO SUL IGOR BARAZZETTI · 6.1 MAPA DO . SITE. E FLUXO DE ... conceitual sobre definição de testes de usabilidade. Utilizamos Unger e Chandler ... durante

125

A ―dupla-rede‖ foi eficiente em captar dados mais precisos, pois a técnica

desnudava informações contraditórias quando da comparação entre a filmagem e a

entrevista pessoal. Temos diversos exemplos de casos de contradições ocorridas

durante as entrevistas.

A maioria dos entrevistados afirmou não gostar de atalhos no teclado e não

dar a menor importância para isso, porém, vários deles os utilizaram de forma

inconsciente durante a experiência filmada.

O usuário (D) fez diversas reclamações de natureza técnica a respeito de

pontos que percebemos que, evidentemente, não atrapalharam sua navegação

durante a experiência registrada em vídeo. Isso demonstra que algumas de suas

respostas foram baseadas em percepções técnicas de fatores que ele achava que

poderiam atrapalhar outros usuários e não na sua própria experiência.

O usuário (B) afirmou não ter dificuldades de navegação e disse que

conseguia localizar-se facilmente no site, porém, não foi isso que constatamos na

observação de sua navegação, sendo que ele não conseguiu atingir seu objetivo.

Esses são apenas alguns exemplos dentre outros que foram descritos no

capítulo sete. Graças à aplicação desse método, pudemos identificar essas

contradições e entender a sua origem. Percebemos que essas respostas

contraditórias não são intencionais, tendo diversos motivos diferentes, tais como:

insegurança, vaidade, vergonha, falta de consciência, desejo de aprovação, desejo

de agradar, entre tantos outros, de natureza emocional, como evidenciam Nielsen e

Loranger (2007).

Este trabalho teve importância fundamental, pois possibilitou uma grande

transformação na nossa percepção sobre o assunto, trazendo a consciência das

diversas possibilidades que o tema permite. O aprofundamento teórico nos permitiu

esmiuçar e entender, a fundo, conceitos de fundamental importância na UX, e isso

nos fez enxergar muito além do que já conhecíamos pela nossa prática do dia a dia,

que normalmente se demonstra muito mais simplista, privando-se dos benefícios de

um processo de UX e testes de usabilidade bem aplicados.

Nossos testes de campo comprovaram que, mesmo em websites bem

estruturados como o AliExpress, sempre existem brechas de usabilidade que afetam

negativamente a experiência do usuário. Essas falhas, por menores que sejam,

quando expostas a um público em uma escala global, como é o caso do objeto de

análise, podem resultar em perdas consideráveis nas vendas.

Page 127: UNIVERSIDADE DE CAXIAS DO SUL IGOR BARAZZETTI · 6.1 MAPA DO . SITE. E FLUXO DE ... conceitual sobre definição de testes de usabilidade. Utilizamos Unger e Chandler ... durante

126

Poucos profissionais entendem o valor do design de UX no desenvolvimento

de uma interface digital, e como sua aplicação pode trazer um feedback positivo de

seu público alvo, gerando aumento de vendas e melhor percepção da marca ou

produto trabalhado.

Esperamos que todo o conteúdo desenvolvido neste projeto transmita

conhecimento e sirva de apoio a profissionais e estudantes no desenvolvimento de

novos trabalhos voltados para o tema.

A exposição a uma nova forma de sistematizar o conhecimento também

trouxe grandes ganhos. O processo nos mostrou uma nova forma de organizar e

estruturar uma pesquisa; obtivemos conhecimento sobre diferentes métodos de

pesquisa e pudemos perceber a importância de seguir esses protocolos, não apenas

pela consistência que o material adquire, mas pela possibilidade de levar esse

conhecimento adiante e permitir que outros pesquisadores possam utilizá-lo para

seu aprofundamento e prática, assim como aplicar a novas situações o

método/protocolo aqui desenvolvido.

Essa pesquisa abriu, também, caminhos para o futuro, preparando-nos para

evoluir academicamente e desenvolver/ampliar novos projetos sem as dificuldades

de estruturação enfrentadas nessa primeira experiência.

Embora nossa ambição fosse levar os testes de campo a um nível além da

pesquisa, aplicando as possibilidades de melhorias que identificamos de forma a

comprovar o valor da informação obtida, isso não foi possível, devido ao extenso

trabalho de pesquisa e tempo reduzido.

Sendo assim, não aplicamos os testes de card sorting e não projetamos uma

interface própria como previsto, porém, deixamos essa possibilidade em aberto para

um projeto futuro, pois acreditamos que essa experiência será de grande valia se

aplicada em nosso ambiente de trabalho.

Page 128: UNIVERSIDADE DE CAXIAS DO SUL IGOR BARAZZETTI · 6.1 MAPA DO . SITE. E FLUXO DE ... conceitual sobre definição de testes de usabilidade. Utilizamos Unger e Chandler ... durante

127

REFERÊNCIAS

Bibliográficas: AGNER, Luiz. Ergodesign e arquitetura da informação: Trabalhando com o usuário. 2. ed. Rio de Janeiro: Quartet, 2009. CASTELLS, Manuel. A galáxia da internet: reflexões sobre a internet, os negócios e a sociedade. Tradução: Maria Luiza X. de A. Borges. Rio de Janeiro: Jorge Zahar, 2001. DIZARD JR., Wilson. A nova mídia: a comunicação de massa na era da informação. Tradução: Antonio Queiroga e Edmond Jorge. Rio de Janeiro: Jorge Zahar, 2000. DUARTE, Jorge; BARROS, Antonio. Métodos e técnicas de pesquisa em comunicação. 2. ed. São Paulo: Atlas, 2006. GARRETT, Jesse James. The elements of user experience. 2. ed. Berkeley, CA: New Riders, 2011. JOHNSON, Steven. Cultura da interface: Como o computador transforma nossa maneira de criar e comunicar. Tradução: Maria Luiza X. de A. Borges. Rio de Janeiro: Jorge Zahar, 2001. KRUG, Steve. Não me faça pensar: uma abordagem de bom senso à usabilidade na web. Tradução de Acauan Pereira Fernandes. Rio de Janeiro: Alta Books, 2008. LEMOS, André; PALÁCIOS, Marcos. Janelas do ciberespaço: comunicação e cibercultura. Porto Alegre: Sulina, 2004. LÉVY, Pierre. Cibercultura. Tradução de Carlos Irineu da Costa, 2. ed. São Paulo: Ed. 34, 2000. NASCIMENTO, José Antonio Machado; AMARAL, Sueli Angélica. Avaliação de usabilidade na internet. Brasília: Thesaurus, 2010. NIELSEN, Jackob; LORANGER, Hoa. Usabilidade na web: projetando websites com qualidade. Tradução de Edson Furmankiewicz & Carlos Schafranski, 3ª tiragem, São Paulo: Elsevier, 2007. NORMAN, Donald. O design do dia-a-dia. Rio de Janeiro: Rocco, 2006. PRIMO, Alex. Interação mediada por computador: comunicação, cibercultura, cognição. 2. ed. Porto Alegre: Sulina, 2008. ROGERS, Yvone; SHARP, Helen; PREECE Jennifer. Design de interação: além da interação homem computador. Porto Alegre: Bookman, 2005.

Page 129: UNIVERSIDADE DE CAXIAS DO SUL IGOR BARAZZETTI · 6.1 MAPA DO . SITE. E FLUXO DE ... conceitual sobre definição de testes de usabilidade. Utilizamos Unger e Chandler ... durante

128

UNGER, Russ; CHANDLER, Carolyn. O guia para projetar UX: a experiência do usuário (UX) para projetistas de conteúdo digital, aplicações e websites. Tradução de Elda Oliveira. Rio de Janeiro: Starlin Alta Con., 2009. Eletrônicas: AGNER, Luiz. Card sorting. Disponível em: <http://www.slideshare.net/agner/card-sorting-183803>. Acesso em: 2 nov. 2013. CONTI, Fátima. O que é um link. Disponível em: <http://www.ufpa.br/dicas/htm/htm-link.htm>. Acesso em: 18 set. 2013. GOOGLE. Definições da web. Disponível em: <https://www.google.com.br/search?q=o+que+%C3%A9+breadcrumb&rlz=1C1SNNT_enBR354BR365&oq=o+que+%C3%A9+breadcrumb&aqs=chrome..69i57j69i60j69i65j69i60l3.2577j0j7&sourceid=chrome&es_sm=0&ie=UTF-8>. Acesso em: 16 jun. 2014. KNOLL, Ricardo Costa. Desenvolvimento de heurísticas de usabilidade para tablets. Disponível em: <http://www.gqs.ufsc.br/wp-content/uploads/2013/02/TCC-RicardoKnoll_vf.pdf>. Acesso em: 20 fev. 2014. MARTINS, Elaine. O que é TCP/IP? Disponível em: <http://www.tecmundo.com.br/o-que-e/780-o-que-e-tcp-ip-.htm#ixzz2gKySCADM>. Acesso em: 28 set. 2013. MONTEIRO, Luís. A internet como meio de comunicação: possibilidades e limitações. Disponível em: <http://www.jack.eti.br/www/arquivos/documentos/trabalhos/fae/Trabalho_Redes_Adinarte_26032008.pdf>. Acesso em: 08 set. 2013. NIELSEN, Jackob. 10 usability heuristics for user interface design. 1995. Disponível em: <http://www.nngroup.com/articles/ten-usability-heuristics/>. Acesso em: 29 maio. 2014.

PEDRO, Fábio. UX design: O que é? Disponível em: <http://www.paespedro.com.br/blog/mercado/ux-design-o-que-e>. Acesso em: 20 set. 2013. PEDRO, Fábio. Sobre UX design (user experience design). Disponível em: <http://www.paespedro.com.br/blog/mercado/sobre-ux-user-experience>. Acesso em: 20 set. 2013. PEREIRA, Rogério. As 4 camadas práticas do design de interação. Disponível em: < http://arquiteturadeinformacao.com/design-de-interacao/as-4-camadas-praticas-do-designer-de-interacao/>. Acesso em: 19 fev. 2014. PRATES, Raquel; BARBOSA, Simone. Avaliação de interfaces de usuário – conceitos e métodos. Disponível em: <http://homepages.dcc.ufmg.br/~rprates/ge_vis/cap6_vfinal.pdf>. Acesso em:

Page 130: UNIVERSIDADE DE CAXIAS DO SUL IGOR BARAZZETTI · 6.1 MAPA DO . SITE. E FLUXO DE ... conceitual sobre definição de testes de usabilidade. Utilizamos Unger e Chandler ... durante

129

26 nov. 2013. REVISTA ÉPOCA. Primeiro site publicado na internet completa 20 anos. Disponível em: <http://revistaepoca.globo.com/Revista/Epoca/0,,EMI255533-15224,00.html>. Acesso em: 17 set. 2013. SUAPESQUISA. Revolução industrial. Disponível em: <http://www.suapesquisa.com/industrial/>. Acesso em: 28 set. 2013.

UOL. Número de internautas no Brasil ultrapassa 100 milhões, segundo Ibope. Disponível em: <http://tecnologia.uol.com.br/noticias/redacao/2013/07/10/numero-de-internautas-no-brasil-ultrapassa-100-milhoes-segundo-ibope.htm>. Acesso em: 17 set. 2013. UX.BLOG. UX design: por onde começar? Disponível em: <http://www.uxdesign.blog.br/user-experience/ux-design-por-onde-comecar/>. Acesso em: 17 jan. 2014. WINCKLER, Marco; PIMENTA, Marcelo Soares. Avaliação de usabilidade de sites web. Disponível em: <http://www.irit.fr/~Marco.Winckler/2002-winckler-pimenta-ERI-2002-cap3.pdf>. Acesso em: 20 fev. 2014.

Page 131: UNIVERSIDADE DE CAXIAS DO SUL IGOR BARAZZETTI · 6.1 MAPA DO . SITE. E FLUXO DE ... conceitual sobre definição de testes de usabilidade. Utilizamos Unger e Chandler ... durante

130

APÊNDICE

UNIVERSIDADE DE CAXIAS DO SUL

IGOR BARAZZETTI

A RELEVÂNCIA DO DESIGN DE UX NA QUALIFICAÇÃO DA RELAÇÃO DO USUÁRIO COM INTERFACES WEB

Caxias do Sul 2013

Page 132: UNIVERSIDADE DE CAXIAS DO SUL IGOR BARAZZETTI · 6.1 MAPA DO . SITE. E FLUXO DE ... conceitual sobre definição de testes de usabilidade. Utilizamos Unger e Chandler ... durante

131

UNIVERSIDADE DE CAXIAS DO SUL CENTRO DE CIÊNCIAS DA COMUNICAÇÃO

CURSO DE COMUNICAÇÃO SOCIAL HABILITAÇÃO EM PUBLICIDADE E PROPAGANDA

IGOR BARAZZETTI

A RELEVÂNCIA DO DESIGN DE UX NA QUALIFICAÇÃO DA RELAÇÃO DO USUÁRIO COM INTERFACES WEB

Projeto de Trabalho de Conclusão de Curso apresentado como requisito para aprovação na disciplina de Monografia I. Orientador(a): Branca Solio

Caxias do Sul 2013

Page 133: UNIVERSIDADE DE CAXIAS DO SUL IGOR BARAZZETTI · 6.1 MAPA DO . SITE. E FLUXO DE ... conceitual sobre definição de testes de usabilidade. Utilizamos Unger e Chandler ... durante

132

SUMÁRIO

1 INTRODUÇÃO..........................................................................................................4

1.1 Processo de descoberta (opcional) ............................................................

2 TEMA.......................................................................................................................5

2.1 Delimitação do tema......................................................................................5

3 JUSTIFICATIVA......................................................................................................

.6

4 QUESTÃO NORTEADORA.....................................................................................7

5 HIPÓTESES (quando

houver)...................................................................................8

6 OBJETIVOS. .........................................................................................................9

6.1 Objetivo geral..............................................................................................9

6.2 Objetivos específicos.................................................................................9

7 METODOLOGIA..................................................................................................10

8 REVISÃO BIBLIOGRÁFICA..................................................................................11

8.1 xxxxxxxxxxxxx

8.2 xxxxxxxxx

8.3 xxxxxxxxxxxxxxxxxx

8.4 xxxxxxxxxxxxxxxxxxxxx

9 ROTEIRO DOS CAPÍTULOS............................................................................

10 CRONOGRAMA................................................................................................

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

APÊNDICE (quando houver) ..........................................................

ANEXOS (quando houver) ..................................................................................

Page 134: UNIVERSIDADE DE CAXIAS DO SUL IGOR BARAZZETTI · 6.1 MAPA DO . SITE. E FLUXO DE ... conceitual sobre definição de testes de usabilidade. Utilizamos Unger e Chandler ... durante

133

1 INTRODUÇÃO

Esse trabalho tem como objetivo, estudar de forma aprofundada as

contribuições que o design da experiência do usuário pode trazer no

desenvolvimento de websites e aplicações projetadas para interfaces digitais.

Com a evolução e popularização da internet, mais pessoas foram aderindo ao

uso frequente de websites e interfaces digitais. Hoje, o cenário de usuários web

representa um volume de grandes proporções. Essas pessoas buscam por produtos

e por soluções para seus problemas cotidianos na rede.

Com base nesse cenário, a importância de uma experiência relevante nesse

ambiente fica evidente. Uma experiência positiva pode ser o fator determinada para

que uma pessoa decida comprar um produto ou confiar nos serviços oferecidos por

uma empresa ou marca.

Trabalharemos apresentando técnicas para projeção e análise de

experiências projetas nesses ambientes a fim de auxiliar empresas e marcas a

obterem mais sucesso com seus produtos ou serviços digitais.

1.1 Processo de descoberta

Iniciei minha carreira profissional em 2004 logo após o término do ensino

médio. Sempre tive interesse por disciplinas voltadas para ciências humanas,

principalmente no que diz respeito a design e comportamento humano.

Minhas primeiras experiências com design foram quando iniciei uma carreira

como designer de interfaces web. Desde então, continuei aprendendo e

acompanhando um mercado que se desenvolve em ritmo acelerado.

Novas segmentações do design foram aparecendo e tornando-se mais

importantes para a qualificação de projetos que envolvam interações entre humanos

e interfaces ou objetos abstratos. No meio web, onde desenvolvo atualmente a maior

parte de meu trabalho, comenta-se constantemente sobre a importância de uma das

Page 135: UNIVERSIDADE DE CAXIAS DO SUL IGOR BARAZZETTI · 6.1 MAPA DO . SITE. E FLUXO DE ... conceitual sobre definição de testes de usabilidade. Utilizamos Unger e Chandler ... durante

134

últimas especificidades, que surgiram durante os últimos anos na área do design: O

Design de User Experience (UX).

Sendo assim, estou disposto a aprofundar meus conhecimentos nesse

assunto, com o intuito de evidenciar a importância da correta aplicação dos

conceitos dessa nova disciplina no desenvolvimento de interfaces digitais.

Page 136: UNIVERSIDADE DE CAXIAS DO SUL IGOR BARAZZETTI · 6.1 MAPA DO . SITE. E FLUXO DE ... conceitual sobre definição de testes de usabilidade. Utilizamos Unger e Chandler ... durante

135

2 TEMA

Design de Experiência do Usuário (UX)

2.1 Delimitação do tema

A relevância do Design de UX na qualificação da relação do usuário com interfaces

digitais.

Page 137: UNIVERSIDADE DE CAXIAS DO SUL IGOR BARAZZETTI · 6.1 MAPA DO . SITE. E FLUXO DE ... conceitual sobre definição de testes de usabilidade. Utilizamos Unger e Chandler ... durante

136

3 JUSTIFICATIVA

Na contemporaneidade, o homem vive uma transformação significativa na sua

percepção de mundo, na forma como constrói suas relações e na maneira como

desenvolve o seu comportamento. A história nos mostra uma ligação íntima entre

esse fenômeno e o significativo avanço tecnológico, que se inicia no século XVIII,

durante a Revolução Industrial8, e dá origem ao desenvolvimento da tecnologia, que

permitiu a criação da internet e do ambiente virtual onde é construído o principal

objeto de estudo desse trabalho.

Para continuarmos, faz-se necessária uma breve introdução sobre o

surgimento deste marco tão importante da tecnologia, chamado internet.

Dizard afirma que a internet é um sistema de redes de computadores

interconectadas de proporções mundiais. Ela foi criada com objetivos militares,

durante a Guerra Fria e seria útil para as forças armadas norte-americanas para

manter as comunicações em caso de ataques inimigos que destruíssem os meios

convencionais de telecomunicações.

No início dos anos 80, o desenvolvimento e utilização do TCP/IP9 como

protocolo para a troca de informações na ARPAnet, possibilitou a conexão entre

redes diferentes, aumentando bastante a abrangência da mesma. Em 1990, a

ARPAnet, ligando-se a outras redes existentes, inclusive fora dos Estados Unidos,

passou a interconectar centros de pesquisa e universidades em todo o mundo

formando, assim, a internet, utilizada principalmente como uma ferramenta de troca

de informações entre o meio acadêmico.

8 Segundo o site suapesquisa.com, a Revolução Industrial teve início no século XVIII, na Inglaterra, com a

mecanização dos sistemas de produção. Enquanto na Idade Média o artesanato era a forma de produzir mais

utilizada, na Idade Moderna tudo mudou. Esse período foi marcado pelo grande salto tecnológico nos transportes

e máquinas. As máquinas a vapor, principalmente os gigantes teares, revolucionou o modo de produzir.

9 De uma forma simples, o TCP/IP é o principal protocolo de envio e recebimento de dados MS internet. TCP

significa Transmission Control Protocol (Protocolo de Controle de Transmissão) e o IP, Internet Protocol

(Protocolo de Internet).

Page 138: UNIVERSIDADE DE CAXIAS DO SUL IGOR BARAZZETTI · 6.1 MAPA DO . SITE. E FLUXO DE ... conceitual sobre definição de testes de usabilidade. Utilizamos Unger e Chandler ... durante

137

Segundo Monteiro (1998), "Em 1995, devido ao grande aumento de usuários

no início da década de 1990, a internet foi transferida para a administração de

instituições não governamentais, que se encarregam, entre outras coisas, de

estabelecer padrões de infraestrutura, registrar domínios, etc."

No Brasil, as primeiras iniciativas com o objetivo de disponibilizar a internet ao

público em geral começaram em 1995, com a atuação do governo federal (por meio

do Ministério da Comunicação e do Ministério de Ciência e Tecnologia) no sentido

de implantar a infraestrutura necessária e definir parâmetros para a posterior

operação de empresas privadas provedoras de acesso aos usuários. Desde então, a

internet no Brasil experimentou um crescimento espantoso, notadamente entre os

anos de 1996 e 1997, quando o número de usuários aumentou quase 1000%,

passando de 170 mil janeiro/1996) para 1,3 milhão (dezembro/1997).

O site da Revista Época (2013), registra que o primeiro website, ou página

web, foi desenvolvido no Centro Europeu de Pesquisa Nuclear (CERN), e foi

publicado no dia 6 de agosto de 1991. O físico Tim Berners-Lee escreveu uma

proposta mostrando como a informação poderia ser facilmente divulgada e

conectada por meio de hiperlinks. O projeto mostrava como conectar os

computadores pessoais dos físicos do CERN para trocar informações de pesquisas

científicas. Berners-Lee chamou esse projeto de WorldWideWeb, o nosso conhecido

www, presente no início de qualquer página web.

O primeiro endereço foi http://info.cern.ch/hypertext/WWW/TheProject.html, e

mantinha informações sobre o projeto WWW. Ele era um manual de informações,

onde os visitantes podiam ler sobre hipertexto10, e aprender a criar sua própria

página web. Era uma página que não possuía elementos visuais, apenas texto e

links11.

Aos poucos, outros servidores foram instalados, e novos sites surgiram na

Europa e Estados Unidos. Em 1994, surgiu o primeiro navegador da Web para PCs

10

O hipertexto é uma obra com várias entradas, onde o leitor/navegador escolhe seu percurso pelos links. Lemos

(2002, pag. 130 apud Aquino, online) 11

Segundo Conti (2012) Criar um link em um texto significa estabelecer uma ligação com outra página, outro

texto, que o leitor pode abrir clicando numa palavra, grupo de palavras ou em uma imagem.

Page 139: UNIVERSIDADE DE CAXIAS DO SUL IGOR BARAZZETTI · 6.1 MAPA DO . SITE. E FLUXO DE ... conceitual sobre definição de testes de usabilidade. Utilizamos Unger e Chandler ... durante

138

e Macs, popularizando a rede. Hoje, com mais de 80 milhões de websites e

centenas de milhões de usuários, é quase impossível imaginar a internet sem as

interfaces gráficas e os links da rede mundial de computadores.

A maneira como o ser humano interage com outros seres humanos, e os

reflexos que as evoluções tecnológicas e da internet trouxeram para esse grande

volume de pessoas, resulta em mudanças constantes nas formas de percepção, e

traz a necessidade de um estudo aprofundado sobre a elaboração de páginas web,

mais efetivas. Inserindo a internet e as páginas web dentro do que chamamos de

ambientes virtuais, faz-se necessária, a conceituação de virtual.

Para Lévi (1996, p. 15):

A palavra virtual vem do latim mediaval virtualis, derivado por sua vez de virtus, força, potência. Na filosofia escolástica, é virtual o que existe em potência e não em ato. O virtual tende a atualizar-se, sem ter passado no entanto à concretização efetiva ou formal. A árvore está virtualmente presente na semente. Em termos rigorosamente filosóficos, o virtual não se opõem ao real, mas ao atual: virtualidade e atualidade são apenas duas maneiras de ser diferentes.

O surgimento desses ambientes virtuais, fez com que surgisse uma

necessidade de desenvolver novos objetos de estudo específicos dentro do design.

Para construção de ambientes virtuais, destaca-se dentro dessas especificidades, o

Design de Experiência do Usuário. Essa abrangente área do design, trás elementos

fundamentais para a relação do usuário com interfaces web, dentro desses

ambientes, pois é uma importante área do Design que abrange todos os aspectos da

interação do usuário com a empresa, marca, seus serviços e produtos. É um

assunto que está em grande evidência no meio digital, e é um trabalho muito

importante para as empresas que trabalham ou tem seus serviços divulgados na

internet, pois garante que o usuário relacione-se de maneira satisfatória com as

interfaces projetadas, obtendo uma experiência rica, envolvente e afetiva ao utilizá-

las. Segundo Paes Pedro (2011):

UX se aplica em tudo à nossa volta e é fácil notar, que as coisas mais presentes em nossas vidas, as coisas que mais adoramos tiveram no usuário sua chave para o sucesso. O design de UX pode ser uma embalagem, um jogo, um site, um hot site, uma torradeira. Qualquer coisa que possua algum nível de comunição com um usuário.

Page 140: UNIVERSIDADE DE CAXIAS DO SUL IGOR BARAZZETTI · 6.1 MAPA DO . SITE. E FLUXO DE ... conceitual sobre definição de testes de usabilidade. Utilizamos Unger e Chandler ... durante

139

Para Merholz (2007), "Experiência do Usuário é qualquer aspecto da

interação de uma pessoa com um determinado sistema, incluindo a interface,

gráficos, design industrial, interação física, e manual."

Sendo o design de UX é uma área muito abrangente, estudaremos de forma

aprofundada suas especificidades, conceituando cada uma delas, mas dando ênfase

especial para a usabilidade, conceito que se insere constantemente dentro do

Design de UX. Para Nielsen (2006, p. xvi):

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 dele 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.

Ainda para o mesmo autor (2006, prefácio):

Há dez anos a Web era algo diferente para as pessoas. Hoje ela é uma rotina, é uma ferramenta. Se for de fácil acesso, elas a utilizarão, do contrário, não. Com dez vezes mais sites e provavelmente centenas de páginas na web, os usuários estão menos tolerantes a sites complexos. Portanto um projeto falho significa negócios perdidos. Nunca a usabilidade foi tão importante.

Hoje, conceitos que eram pouco evidenciados até o início dos anos 80, como

usabilidade, interatividade, funcionalidade e navegabilidade, são fundamentais na

relação do usuário com as interfaces web. Isso justifica que se desenvolva um

estudo sobre o tema proposto, considerando que esse novo cenário desponta a

partir da sociedade centrada na tecnologia e na informação em rede e nos traz

também um novo perfil de usuário que se insere e busca informações e realização

de atividades dentro do ambiente virtual interativo, construído através das páginas

web.

Se quisermos compreender como funciona o processo de leitura e

decodificação da informação do homem contemporâneo, precisamos estudar como

ele se relaciona com as interfaces projetadas nos ambientes onde se desenvolvem

essas novas interações. Encontraremos, assim, as melhores práticas para a

Page 141: UNIVERSIDADE DE CAXIAS DO SUL IGOR BARAZZETTI · 6.1 MAPA DO . SITE. E FLUXO DE ... conceitual sobre definição de testes de usabilidade. Utilizamos Unger e Chandler ... durante

140

execução de um projeto de interface baseado em construir a melhor experiência

possível para o usuário.

Page 142: UNIVERSIDADE DE CAXIAS DO SUL IGOR BARAZZETTI · 6.1 MAPA DO . SITE. E FLUXO DE ... conceitual sobre definição de testes de usabilidade. Utilizamos Unger e Chandler ... durante

141

4 QUESTÃO NORTEADORA

O Design de UX pode melhorar a relação do usuário com uma interface de software

ou website?

Page 143: UNIVERSIDADE DE CAXIAS DO SUL IGOR BARAZZETTI · 6.1 MAPA DO . SITE. E FLUXO DE ... conceitual sobre definição de testes de usabilidade. Utilizamos Unger e Chandler ... durante

142

5 HIPÓTESES

─ O design de UX tem importância fundamental na relação do usuário com

interfaces digitais

─ O contexto em que se desenvolvem as interações digitais trás novas formas de

relação usuário/usuário e usuário/interfaces

─ O conhecimento sobre as especificidades dos conceitos de design, design de UX,

design de interfaces e usabilidade são fundamentais na construção da relação do

usuário com as interfaces - É fundamental, a participação ativa do usuário, na

construção e melhoria de uma interface.

Page 144: UNIVERSIDADE DE CAXIAS DO SUL IGOR BARAZZETTI · 6.1 MAPA DO . SITE. E FLUXO DE ... conceitual sobre definição de testes de usabilidade. Utilizamos Unger e Chandler ... durante

143

6 OBJETIVOS

6.1 Objetivo geral

Avaliar a importância do Design de UX na qualificação da relação do usuário com

interfaces digitais.

6.2 Objetivos específicos

─ Estudar o contexto em que se desenvolvem as interações com interfaces digitais

─ Conceituar, tensionando, design, design de Interação, design de interfaces, design

visual, design emocional, usabilidade, arquitetura da informação e design de UX

─ Explicar a importância da participação do usuário na construção e melhoria de

uma interface

Page 145: UNIVERSIDADE DE CAXIAS DO SUL IGOR BARAZZETTI · 6.1 MAPA DO . SITE. E FLUXO DE ... conceitual sobre definição de testes de usabilidade. Utilizamos Unger e Chandler ... durante

144

7 METODOLOGIA

Considerando que a escolha adequada das ferramentas de trabalho é

fundamental para obter o êxito dessa pesquisa, buscaremos características

complementares em mais de um método de trabalho. O primeiro método a ser

utilizado, será a pesquisa bibliográfica. Segundo Duarte e Barros (2006, p.51):

Pesquisa bibliográfica, num sentido amplo, é o planejamento global inicial de qualquer trabalho de pesquisa que vai desde a identificação, localização e obtenção da bibliografia pertinente sobre o assunto, até a apresentação de um texto sistematizado, onde é apresentada toda a literatura que o aluno examinou, de forma a evidenciar o entendimento do pensamento dos autores acrescido de suas próprias ideias e opiniões.

O mesmo autor ainda acrescenta que a pesquisa bibliográfica trata de um

conjunto de procedimentos que visa a identificar informações, selecionar

documentos referentes ao tema pesquisado e fazer anotações e fichamentos dos

mesmos para que seja possível a sua utilização no trabalho acadêmico.

O Design de Experiência do Usuário é um assunto com grande carga teórica,

muita aplicação prática e é também um objeto de estudo que faz parte das ciências

humanas, portanto, não há formulas exatas que determinem um mesmo resultado

em 100% dos casos. Ao longo dos anos, o ser humano passou a entender e

interagir melhor com a tecnologia. Muita bibliografia resultante de constantes

estudos e testes envolvendo pessoas e máquinas foi surgindo e enriquecendo as

possibilidades de obtenção de melhores resultados, por meio da aplicação destes

conceitos. Levando isso em consideração, a pesquisa bibliográfica parece ser um

método extremamente adequado e importante para o desenvolvimento desse

projeto.

Ainda citando Duarte e Barros (2006, p. 52): ―para estabelecer as bases em

que vão avançar, alunos precisam conhecer o que já existe, revisando a literatura

existente sobre o assunto. Com isso, evitam despender esforços em problemas cuja

solução já tenha sido encontrada‖. Essa revisão se inicia logo na formulação do

problema e se estende até a análise dos resultados.

Page 146: UNIVERSIDADE DE CAXIAS DO SUL IGOR BARAZZETTI · 6.1 MAPA DO . SITE. E FLUXO DE ... conceitual sobre definição de testes de usabilidade. Utilizamos Unger e Chandler ... durante

145

Tendo em vista que o assunto já está bem definido, podemos coletar algumas

palavras-chave para guiar a busca pela bibliografia mais adequada a cada uma

delas. Iniciamos com cyberespaço que poderá ser facilmente definido por meio do

conteúdo apresentado por Levy (2000) e Lemos (2004). Definiremos internet e

falaremos um pouco sobre sua história a partir das obras de Adolpho (2010),

Castells (1999) e Dizard (2000).

Existem alguns conceitos que irão se inserir no contexto do trabalho de forma

muito constante. Estamos falando de: interatividade, acessibilidade, navegabilidade,

usabilidade, funcionalidade, interface e comunicabilidade. Para esses termos,

utilizaremos o conteúdo produzido por Nielsen (2007), Krug (2006), Memória (2006),

Agner (2006), Donald Norman (2006) e James Kalbach (2007).

A partir do momento em que entrarmos no tema principal, o Design de

Experiência do Usuário, acrescentaremos à bibliografia já citada, alguns novos

nomes, como Monteiro (2013), Pedro (2013), Porter e Brewer (2010) e,

principalmente, Unger e Chandler (2009). A obra eletrônica de Porter e Brewer

(2010) intitulada ―52 Semanas de UX12‖ será de grande valia para essa fase de

pesquisa, assim como a obra de Unger e Chandler (2009) que colaborou muito para

a estruturação do roteiro desse projeto.

O segundo passo será utilizar um método de análise crítica/comparativa. Essa

etapa será dividida em dois momentos: a análise de experiências já projetadas e a

criação de um protótipo funcional, sua análise e a implementação de melhorias de

acordo com os fundamentos de Design de Experiência do Usuário que serão

estudados e desenvolvidos na primeira fase da pesquisa bibliográfica.

Na primeira etapa desse processo, serão selecionadas até 3 websites

diferentes onde diferentes tipos de usuários irão interagir com essas páginas e tentar

executar seus objetivos nelas. É importante ressaltar que para participar desse

processo, serão escolhidos pelo menos 3 perfis de usuários diferentes, somando um

total de 20 participantes para os testes quantitativos e 5 usuários para os testes

12

Traduzido do original 52 weeks of UX. Acesso em http://52weeksofux.com/.

Page 147: UNIVERSIDADE DE CAXIAS DO SUL IGOR BARAZZETTI · 6.1 MAPA DO . SITE. E FLUXO DE ... conceitual sobre definição de testes de usabilidade. Utilizamos Unger e Chandler ... durante

146

qualitativos, como sugerem Unger e Chandler (2009, p. 229), ao citar Nielsen. O

objetivo será entender como uma mesma interface pode gerar comportamentos

diversos, dependendo do público que estiver interagindo com a mesma. Para Duarte

e Barros (2006, p.68) ―Uma boa pesquisa exige fontes que sejam capazes de ajudar

a responder sobre o tema proposto. Elas deverão ter envolvimento com o tema do

assunto, disponibilidade e disposição em falar‖.

Primeiramente, iremos utilizar o Card Sorting por ser considerada uma técnica

adequada para testes de usabilidade em interfaces web, segundo Agner (2007).

Para este mesmo autor, o Card Sorting é uma técnica para obtenção de dados sobre

o modelo mental dos usuários, no que diz respeito ao espaço de informação. É uma

abordagem centrada no usuário que o estimula a encontrar um nó de informação

durante a sua navegação. De forma resumida, poderíamos dizer que essa técnica

visa entender como o usuário agrupa informações e as categoriza dentro de um

domínio. É visando a obtenção desse tipo de informação, que durante o Card

Sorting, o usuário utiliza cartões para separar tipos específicos de informação.

Nascimento e Amaral (2010, p. 58), citam inúmeras vantagens da aplicação

dessa técnica:

Permitir avaliar a qualidade da organização da informação vigente e de

suas respectivas categorias.

Permitir verificar como usuários com ou sem experiência acessam um

determinado conteúdo.

Permitir verificar como usuário agrupam conteúdo, o que permite a

reformulação da organização da informação de forma mais adequada

ao que o modelo mental dos usuário sugere.

Perceber como os usuários nomeiam as informações do website.

Identificar os itens que são difíceis de serem organizados e que

possam pertencer a mais de uma categoria de conteúdo.

Identificar a terminologia mais adequada aos usuários.

O método é simples e fácil de ser aplicado.

O custo é mínimo.

Page 148: UNIVERSIDADE DE CAXIAS DO SUL IGOR BARAZZETTI · 6.1 MAPA DO . SITE. E FLUXO DE ... conceitual sobre definição de testes de usabilidade. Utilizamos Unger e Chandler ... durante

147

Sua aplicação é rápida.

Os autores também sugerem que essa técnica pode ser utilizada tanto na

definição da arquitetura de um website como na sua validação pós-implementação.

Para ambos os casos, a técnica pode ser aplicada de duas formas diferentes que

são classificadas como aberta ou fechada. Na aberta, o usuário sugere um modelo

mental em cartões e o organiza posteriormente. Na fechada, oferece-se uma

categorização já pré-definida e cartões já rotulados para que o usuário apenas

organize esses cartões da forma que acredita ser a mais conveniente. Utilizaremos

ambas as formas para uma coleta mais precisa de informações.

O Card Sorting odedece a seguinte sequência de ações (a qual buscaremos

seguir para obtenção dos dados):

Mapeamento do conteúdo.

Criação dos cartões para aplicação da técnica.

Teste de validação dos cartões e respectivas nomenclaturas.

Recrutamento e seleção dos usuários.

Treinamento dos usuários.

Aplicação da técnica.

Análise quantitativa e qualitativa: uso de um algoritmo de clustering13

para determinar as semelhanças e diferenças existentes entre os

agrupamentos de nomes criados pelos usuários e o uso de técnicas de

verbalização para a coleta de opiniões a cerca do ensaio.

Agner (2009, p. 134) diz que: ―Enquanto o teste de usabilidade é um método

de avaliação de produtos, o card sorting é um método de geração de estruturas.‖

Utilizaremos esse método em nossos testes para auxiliar na definição da estrutura

do protótipo de interface a ser projetado, e, também para que o usuário dê suas

sugestões de estrutura para os websites já projetados, buscando analisar se a

estrutura já projetada atende as expectativas dos usuários. Os mesmos executarão

o card sorting antes de terem contato com essas interfaces funcionais.

13

Clustering é uma técnica de Data Mining para fazer agrupamentos automáticos de dados segundo seu grau de

semelhança. O critério de semelhança faz parte da definição do problema e, dependendo, do algoritmo.

Page 149: UNIVERSIDADE DE CAXIAS DO SUL IGOR BARAZZETTI · 6.1 MAPA DO . SITE. E FLUXO DE ... conceitual sobre definição de testes de usabilidade. Utilizamos Unger e Chandler ... durante

148

De forma resumida, conforme recomendações de Agner (2009, p. 136), a

aplicação do processo todo consistirá em escrever as informações nos cartões,

misturá-los, entregá-los aos usuários e solicitar que o usuário faça o agrupamento e

organização desses cartões. Após isso, será feita a análise de dados; para isso,

identificaremos o esquema de organização dominante, ajustaremos a consistência

da nomenclatura, analisaremos categorias singulares e fazer uma analise do todo,

objetivando o refinamento da estruturação.

A segunda etapa dos testes, será uma avaliação ergonômica, que inclui lista

de verificação, guia de recomendação e critérios heurísticos. Para Nascimento e

Amaral (2010, p. 48):

A lista de verificação e o guia de recomendações são técnicas que permitem diagnosticar problemas gerais da interface por especialistas em usabilidade, por meio da análise da conformidade dos objetos de interação. Por meio de uma grade de análise ou lista de questões, os inspetores respondem sobre a ergonomia do projeto, gerando resultados que proporcionam vantagens em termos e rapidez de aprendizagem e facilidade de uso aos usuários.

Os mesmos autores citam como vantagens desse método a sistematização

da avaliação, que garante resultados mais estáveis, a facilidade na identificação de

problemas de usabilidade e o aumento da eficácia de avalização. Um desvantagem

citada, é que a interface pode sofrer ajustes após execução da avaliação, gerando

novos problemas de usabilidade.

Neste trabalho, iremos conceber as listas de verificação, conforme sugestões

apresentadas por Nascimento e Amaral (2010, p. 52), levando em conta a divisão

clássica da engenharia de usabilidade que contempla: design da página, design do

conteúdo, design do website e acessibilidade e flexibilidade de uso para os usuários

de websites.

Após elaborados os questionários, poderemos aplicá-los ao grupo de usuários

em questão, e coletar as respostas para análise que deverá ser feita também por

outros especialistas, de acordo com critérios heurísticos e avaliando de acordo com

graus de severidade.

Page 150: UNIVERSIDADE DE CAXIAS DO SUL IGOR BARAZZETTI · 6.1 MAPA DO . SITE. E FLUXO DE ... conceitual sobre definição de testes de usabilidade. Utilizamos Unger e Chandler ... durante

149

Ao fim dessa etapa, esperamos que a combinação de técnicas e métodos da

avaliação ergonômica traga um maior número de problemas detectados, em relação

a técnicas isoladas.

Concluíndo os testes anteriores, iremos filmar esse processo para produzir a

primeira parte do material comparativo, o vídeo, para em seguida, entrevistar os

usuários, levantando questões referentes à experiência que tiveram na utilização de

cada interface. A entrevista que faremos tem como objetivo, levantar dados

qualitativos, visto que nessa etapa, contarão a diversidade e as particularidades das

informações fornecidas pois não podemos, e nem iremos buscar, conclusões

precisas e definitivas.

Os usuários serão estimulados a falar em voz alta sobre suas percepções a

respeito da interface, questões que o agradam e que o incomodam durante a

filmagem. Esse material será, posteriormente, comparado com as respostas dadas

ao questionário que será elaborado para a entrevista, a fim de analisar se suas

respostas são iguais as percepções que tivemos através da análise dos vídeos e de

seus comentários verbais durante a experiência filmada. Duarte e Barros (2006, p.

63) fazem um levantamento interessante a respeito desse tipo de entrevista:

Como nos estudos qualitativos em geral, o objetivo muitas vezes está mais relacionado a aprendizagem por meio da identificação da riqueza e diversidade, pela integração das informações e síntese das descobertas do que ao estabelecimento de conclusões precisas e definitivas. Por isso, a noção de hipótese, típica da pesquisa experimental e tradicional, tende a ser substituída pelo uso de pressupostos, um conjunto de conjeturas antecipadas que orienta o trabalho de campo. Estabelecidas limitações e condições de realização, a entrevista pode ser ferramenta bastante útil para lidar com problemas complexos ao permitir uma construção baseada em relatos da interpretação e experiências, assumindo-se que não será obtida uma visão objetiva do tema de pesquisa.

Os mesmos ainda afirmam que ―nos estudos qualitativos, são preferíveis

poucas fontes, mas de qualidade, a muitas, sem relevo‖ retomando assim a questão

da definição de públicos para essa pesquisa. Esses públicos, portanto, serão:

Profissionais de TI, jovens, com avançado conhecimento técnico.

Page 151: UNIVERSIDADE DE CAXIAS DO SUL IGOR BARAZZETTI · 6.1 MAPA DO . SITE. E FLUXO DE ... conceitual sobre definição de testes de usabilidade. Utilizamos Unger e Chandler ... durante

150

Jovens com menor conhecimento técnico, mas com bom domínio da

tecnologia.

Adultos maduros, com menos familiaridade com a tecnologia que, mas

com autonomia no uso da internet.

Os usuários citados participarão de todos os processos do método de análise

crítica/comparativa. Sabemos, por meio da literatura já citada, que existe grande

risco do entrevistador influenciar as respostas do entrevistado, provocando

resultados tendenciosos e pouco precisos. Buscaremos evitar isso ao máximo,

produzindo as gravações dos vídeos sem a presença do entrevistador e mantendo

seriedade, foco e transparência na entrevista feita com perguntas objetivas.

As entrevistas e gravações serão feitas individualmente, em ambiente onde

estejam disponíveis os recursos técnicos necessários para a realização das

experiências. A intenção é que o usuários se sinta livre de distrações para que

possa executar as tarefas de maneira mais adequada e precisa.

Após reunir todo o material necessário, faremos a análise dos resultados.

Entendemos que pode ser difícil analisar todo o conteúdo da coleta devido a seu

volume, por isso, buscaremos escrever e sintetizar os resultados mesmo antes da

obtenção de todo o material. Para .Duarte e Barros (2006, p. 78) ―analisar implica

separar o todo em partes e examinar a natureza, funções e relações de cada uma.‖

É o que faremos após obtenção desse material.

Para a segunda parte dessa análise, utilizaremos o mesmo processo descrito

na anterior, a única diferença é que, dessa vez, os entrevistados serão expostos a

um protótipo de interface projetada pelo próprio autor. Essa interface deverá ser uma

página web ou um web app, com um objetivo simples e bem definido. Deverão ser

adicionados recursos complementares com o intuito de analisar a interação dos

usuários com itens que não estão diretamente relacionados com a conclusão do

objetivo principal. Da mesma forma, analisaremos através de vídeos e entrevistas as

ações, preferências e percepções desses participantes.

Page 152: UNIVERSIDADE DE CAXIAS DO SUL IGOR BARAZZETTI · 6.1 MAPA DO . SITE. E FLUXO DE ... conceitual sobre definição de testes de usabilidade. Utilizamos Unger e Chandler ... durante

151

Chandler (2009, p. 221), ressalta a importância da pesquisa com usuários

quando afirma que: ―a pesquisa pode oferecer inspiração para os projetistas e

reduzir parte do risco de trazer um novo produto ao mercado, porque você poderá

ouvir (e depois planejar) os tipos de reações que você pode ter com os usuários

potenciais.‖

Após concluída a etapa descrita nos parágrafos anteriores, poderemos fazer

um novo teste com os usuários, implantando as melhorias identificadas de duas

formas diferentes: 1) por meio das informações e sugestões oferecidas pelos

próprios usuários e 2) uma segunda versão com melhorias executadas a partir da

análise dos vídeos das interações, percebidas pelo autor. Nesse ponto os processos

de análise se repetem, visando obter resultados diferentes em cada etapa desse

processo.

Henry Ford disse uma vez, que se ele perguntasse aos clientes dele o que

eles queriam, teriam dito que era um cavalo mais rápido. Relembrando essa

memorável frase, de um dos empreendedores mais ilustres do início do século XX,

Chandler (2009, p. 222) evidencia que os participantes fornecerão respostas

baseadas na sua compreensão atual e o que buscaremos com esses testes, será

juntar reações e não previsões do que eles desejam ou esperam do futuro. Por isso,

é importante evitar que os usuários façam escolhas diretas ( como responder

perguntas do tipo: Qual conceito é melhor, A ou B?).

Ao fim de todo o processo, teremos um modelo mais adequado para a

obtenção de um resultado específico, conquistado a partir das análises das

experiências dos usuários, somadas a prática da implementação de melhorias

baseadas nelas e nas pesquisas bibliográficas, caracterizando assim, um projeto

aperfeiçoado a partir de técnicas de UX.

Page 153: UNIVERSIDADE DE CAXIAS DO SUL IGOR BARAZZETTI · 6.1 MAPA DO . SITE. E FLUXO DE ... conceitual sobre definição de testes de usabilidade. Utilizamos Unger e Chandler ... durante

152

8 REVISÃO BIBLIOGRÁFICA

CIBERESPAÇO

O Ser humano, no início de sua existência, expandiu-se fisicamente por toda

a superfície do planeta e, agora, começa a tecer uma grande rede digital sobre ele;

uma rede que conecta tudo a todos dando origem ao novo conceito de ciberespaço,

como sugere Levy (2000) na introdução de seu livro Cibercultura.

O autor nos oferece uma breve definição dos termos ciberespaço e

cibercultura, frequentemente usados em sua obra (2000, p. 17), o

O ciberespaço (que também chamarei de ―rede‖) é o novo meio de comunicação que surge da interconexão mundial de computadores. O termo especifica não apenas a infra estrutura material da comunicação digital, mas também o universo oceânico de informações que ela abriga, assim como os seres humanos que navegam e alimentam esse universo. Quanto ao neologismo ―cibercultura‖, especifica aqui o conjunto de técnicas (materiais e intelectuais), de práticas, de atitudes, de modelos de pensamento e de valores que se desenvolvem juntamente com o crescimento do ciberespaço.

Podemos entender, a partir dos conceitos propostos por esse autor, que o

ciberespaço é um espaço que existe no mundo da comunicação digital, originada

pela interconexão mundial de computadores e pela internet. Esse ambiente, no

entanto, não se limita apenas a sua estrutura física de computadores, mas a toda a

informação que circula nesse espaço e os seres humanos que geram toda essa

base de conhecimento, onde a presença física dos mesmos não se faz necessária, e

ainda assim, possibilita edificar essa rede de informação. É o espaço virtual para a

comunicação e compartilhamento de conhecimento, que é viabilizado pela

tecnologia, especialmente a internet.

Quando falamos em ciberspaço, a palavra ―virtual‖ é mencionada com

frequência, evidenciando a importância da busca por uma definição clara a respeito

da mesma. Para Levy (2000, p. 47):

A palavra ―virtual‖ pode ser entendida em ao menos três sentidos: o primeiro, técnico, ligado a informática, um segundo corrente e um terceiro filosófico. O fascínio suscitado pela ―realidade virtual‖ decorre em boa parte da confusão entre esses três sentidos. Na acepção filosófica, é virtual aquilo que existe apenas em potência e não em ato, o campo de forças e de problemas que tende a resolver-se em uma atualização. O virtual é

Page 154: UNIVERSIDADE DE CAXIAS DO SUL IGOR BARAZZETTI · 6.1 MAPA DO . SITE. E FLUXO DE ... conceitual sobre definição de testes de usabilidade. Utilizamos Unger e Chandler ... durante

153

obviamente uma dimensão muito importante da realidade. Mas no uso corrente, a palavra virtual é muitas vezes empregada para significar a irrealidade ─ enquanto a ―realidade‖ pressupõe uma efetivação material, uma presença tangível. A Expressão ―realidade virtual‖ soa então como um oxímoro, um passe de mágica misterioso. Em geral, acredita-se que uma coisa deva ser ou real ou virtual, que ela não pode, portanto, possuir as duas qualidades ao mesmo tempo. Contudo, a rigor, em filosofia o virtual não se opõe ao real mas sim ao atual: virtualidade e atualidade são apenas dois modos diferentes da realidade. Se a produção da árvore está na essência do grão, então a virtualidade da árvore é bastante real (sem que seja, ainda, atual).

Após ler essa definição, temos uma interpretação mais clara das três

diferentes propostas para definição do virtual. Nota-se, no entanto, que a confusão

na interpretação desse termo, envolve principalmente o termo corrente e a acepção

filosófica. No uso corrente, o virtual é relacionado a algo que não é real pelo simples

fato de não possuir uma presença física. Porém, no aspecto filosófico, a

interpretação do virtual é mais profunda e Levy mostra, que o virtual não está

separado da realidade e tão pouco se opõem a mesma, o que existe em oposição

ao virtual é o atual. No exemplo prático de Levy, entende-se que embora a planta

possa não ter crescido e estar presente na forma física que nossa percepção define

como ―árvore‖, essa forma ainda existe, mas de uma maneira diferente, dentro da

semente até que essa forma sofra a atualização que a transformará em árvore.

Outro tema que é constantemente questionado, e que define bem esse conceito de

realidade proposta pela análise filosófica de Levy, é o aborto. Segundo o aspecto

filosófico, um óvulo fecundado representaria a existência do bebe, embora para

adquirir o aspecto humano ele precisasse sofrer uma ―atualização‖.

A Fita de Moebius é uma boa representação visual do ciberespaço. Ela

apresenta um circuito que não possui início nem fim, é uma fita que possui apenas

uma face, dificultando a identificação do dentro e fora. Imagina-se que se uma

formiga caminhasse pela fita de Moebius, ela faria uma rota infinita, estando dentro e

fora ao mesmo tempo, representando o espaço virtual que apesar de não possuir

presença física, não se opõem ao real. Um ambiente infinito onde a inteligência

coletiva constrói cidades de conhecimento virtual sem se preocupar com limitações

de espaço físico.

Figura 1: Fita de Moebius

Page 155: UNIVERSIDADE DE CAXIAS DO SUL IGOR BARAZZETTI · 6.1 MAPA DO . SITE. E FLUXO DE ... conceitual sobre definição de testes de usabilidade. Utilizamos Unger e Chandler ... durante

154

Fonte: Escher (1998)

Esse ambiente é construído principalmente pelo agregado de conhecimento

da inteligência coletiva, que com transparência, e livre de limitações e preconceitos,

se desenvolve nesse meio. Levy (2000, p. 28) confirma, e, complementa essa

afirmação quando diz:

É aqui que intervém o papel principal da inteligência coletiva, que é um dos principais motores da cibercultura. De fato, o estabelecimento de uma sinergia entre competências, recursos e projetos, a constituição e a manutenção dinâmicas de memórias em comum, a ativação de modos de cooperação flexíveis e transversais, a distribuição coordenada dos centros de decisão, opõem-se à separação estanque entre as atividades, às compartimentalizações, à opacidade da organização social. Quanto mais os processos de inteligência coletiva se desenvolvem – o que pressupõe, obviamente, o questionamento de diversos poderes –, melhor é a apropriação, por indivíduos e por grupos, das alterações técnicas, e menores são os efeitos da exclusão ou de destruição humana resultantes da aceleração do movimento tecno-social. O ciberespaço, dispositivo de comunicação interativo e comunitário, apresenta-se justamente como um dos instrumentos privilegiados da inteligência coletiva.

Como já mencionado anteriormente, a internet é a ferramenta que viabiliza a

construção desse mundo. Como já introduzimos anteriormente a história da internet

e como essa ferramenta se desenvolveu, partiremos para o próximo conceito que faz

ligação com a mesma. A criação e distribuição de toda essa informação na internet,

só seria possível se existisse uma representação visual da mesma, algo palpável

para que as pessoas pudessem visualizar e construir informação. Surge então a

primeira interface web.

INTERFACE

Page 156: UNIVERSIDADE DE CAXIAS DO SUL IGOR BARAZZETTI · 6.1 MAPA DO . SITE. E FLUXO DE ... conceitual sobre definição de testes de usabilidade. Utilizamos Unger e Chandler ... durante

155

O conceito de interface pode ser muito amplo. Observando pelo sentido

técnico, como sugere Johnson (2001, p. 4), interface poderiam ser as palavras

impressas em um livro, ou mesmo, as imagens em celuloide projetadas no cinema.

Neste trabalho, no entanto, estudaremos este conceito, sempre referindo-nos ―a um

ofício específico de criação de imagens, sons e palavras que podem ser

manipulados em uma tela‖ (JOHNSON, 2001, p. 4).

Para Johnson (2001, p. 11), o design de interface é uma fusão da arte e da

tecnologia, originada da evolução do século XX. Ele diz que, não há artistas que

trabalhem no meio de comunicação da interface, que não sejam de uma maneira ou

de outra, também engenheiros. Segundo as palavras desse autor:

Os artesãos da cultura de interface não tem tempo a perder com essas divisões arbitrárias. Seu meio se reinventa a si mesmo depressa demais para admitir falsas oposições entre tipos criativos e programadores. Eles se tornaram uma outra coisa, uma espécie de nova fusão de artista e engenheiro ─ profissionais da interface, cyberpunks, web masters ─ incumbidos da missão épica de representar nossas máquinas digitais, de dar sentido a sua informação em sua forma bruta.

Apresentamos esses profissionais híbridos, responsáveis por criar uma

representação visual para as cidades virtuais, e um conceito superficial sobre

interfaces, porém, é necessário ir além para entendermos o que exatamente é uma

interface. Johnson (2001, p. 17) define da seguinte forma:

Mas, afinal, que é exatamente uma interface? Em seu sentido mais simples, a palavra se refere a softwares que dão forma a interação entre usuário e computador. A interface atua como uma espécie de tradutor, mediando entre as duas partes, tornando uma sensível para a outra. Em outras palavras, a relação governada pela interface é uma relação semântica, caracterizada por significado e expressão, não por força física.

Em seguida a essa citação, o autor menciona que o computador trabalha com

sinais e símbolos e faz suas representações através de pulsos elétricos de 0 ou 1

(ligado ou desligado) enquanto os seres humanos, pensam através de palavras,

conceitos, imagens, associações. Pensando dessa forma, parece improvável que a

máquina comunique-se com um ser humano, a não ser que, ela possua uma

maneira de representar-se para o usuário em uma linguagem que o mesmo possa

compreender.

Page 157: UNIVERSIDADE DE CAXIAS DO SUL IGOR BARAZZETTI · 6.1 MAPA DO . SITE. E FLUXO DE ... conceitual sobre definição de testes de usabilidade. Utilizamos Unger e Chandler ... durante

156

É para solucionar esse problema que surgem as primeiras interfaces gráficas.

Johnson (2001, p. 18) explica que a linguagem dos zeros e uns do computador é

transformada em representações visuais pela primeira vez em 1970, quando a Palo

Alto Research Center, da Xerox, desenvolve a primeira interface gráfica do usuário

(GUI), que posteriormente é popularizada pelo Macintosh da Apple. Hoje, é comum

associar a imagem de uma pasta, ou uma lixeira a palavra interface. A popularização

dessas interfaces gráficas tornou fácil a utilização de computadores por pessoas,

antes alienadas pelas sintaxes complexas das linhas de comando, causando uma

grande revolução digital.

Atualmente, a grande maioria das pessoas não apenas tem contato, como

utiliza frequentemente alguma interface gráfica digital. Faz-se necessário o estudo

de um novo conceito, que, representa uma importante característica das interfaces

digitais, a interatividade.

INTERATIVIDADE

Lemos e Palacios (2004, p. 173) dizem que a interatividade é um termo que

ganhou expressão na atualidade com a disseminação das novas tecnologias. Para

eles, esse termo é usado de diferentes formas nos meios de comunicação, portanto,

podem remeter a variados significados. Na televisão, por exemplo, um programa

interativo seria aquele em que o telespectador pode, por meio de ligações

telefônicas, escolher entre uma das opções oferecidas pelo apresentador. No caso

de um programa de rádio, pode-se exemplificar uma situação onde esteja ocorrendo

uma sondagem de opinião, da qual os ouvintes participam por meio de ligação

telefônica. Outra possibilidade de interação é um jogo de videogame, onde o jogador

executa comandos de forma a agir como se fosse um dos personagens do jogo.

O termo interatividade origina da palavra interação; Lemos e Palacios (2004,

p. 174) julgam importante diferenciar os dois termos e definem interação da seguinte

forma:

Partindo da etimologia da palavra ―interação‖, como propõem Primo (1999) e Moraes (1999), conclui-se que se trata de uma ‗ação entre entes‘ (inter + ação = ação entre). Conforme Moraes, quando falamos em interação (...) há

Page 158: UNIVERSIDADE DE CAXIAS DO SUL IGOR BARAZZETTI · 6.1 MAPA DO . SITE. E FLUXO DE ... conceitual sobre definição de testes de usabilidade. Utilizamos Unger e Chandler ... durante

157

de se pressupor que está presente uma relação entre , no mínimo, dois agentes; uma ação mútua.

Para os mesmos autores (2004, p. 176), existem três fatores que devem estar

presentes para que haja interatividade.

Deve ser uma ação comum entre dois ou mais agentes.

Os agentes envolvidos devem ter a mesma possibilidade de ação de

modo a influir sobre o desenvolvimento do produto, ou seja, a ação de

um, deve servir como premissa para a ação do outro.

As ações devem ser imprevisíveis.

Se a situação não contempla um dos itens mencionados, não há

interatividade, porém pode haver reatividade, situação que ocorre em momentos em

que a comunicação não está dividida de forma igualitária, tornando a ação limitada

em relação ao outro agente.

Com as observações do parágrafo anterior, torna-se confuso diferenciar

interatividade de reatividade. Para simplificar esse entendimento, Lemos (2004, p.

179), divide o conceito de interatividade, por meio de duas definições. Ele propõe a

existência de duas formas de interação, a social e a técnica. A social seria a

interação homem-homem, e a técnica, uma ação dialógica entre homem e máquina.

Primo (2008, p. 48 apud Rafaeli, 1988, p. 119) afirma que:

A interatividade requer que os comunicadores se respondam. Uma interatividade plena acontece quando uma resposta em uma sequência depende das transações anteriores e do conteúdo intercambiado. Já uma situação ou um meio são considerados por Rafaeli como reativos ou quase-interativos quando aquela dependência não acontece. Comunicação de dupla-via está presente tão logo as mensagens fluem bilateralmente. Ambientes reativos requerem, adicionalmente, que as últimas mensagens se refiram às (ou sejam coerentes com as) mensagens anteriores. Interatividade plena (capacidade de resposta) difere da reação na incorporação da referência ao conteúdo, à natureza, à forma ou apenas à presença de referência anterior.

Entende-se com base nessa citação e nas palavras de Primo (2008, p. 49

apud Rafaeli, 1988) que nem toda comunicação é interativa, mesmo que possa

conter respostas coerentes, e, interatividade não é uma característica exclusiva do

meio, sendo que, podemos observar que parte das novas tecnologias não é

Page 159: UNIVERSIDADE DE CAXIAS DO SUL IGOR BARAZZETTI · 6.1 MAPA DO . SITE. E FLUXO DE ... conceitual sobre definição de testes de usabilidade. Utilizamos Unger e Chandler ... durante

158

interativa. Primo (2008, p. 49 apud Rafaeli, 1988) diz: "interatividade é um feedback

(mas não é seu sinônimo) que se relaciona com as mensagens anteriores e com a

maneira como essas mensagens anteriores se relacionam com aquelas que as

precederam.".

Primo (2008, p. 57) também define através de seu ponto de vista a interação

mútua e reativa. Para ele:

Antes que suas características sejam detalhadas, pode-se adiantar que: interação mútua é aquela caracterizada por relações interdependentes e processos de negociação, em que cada interagente participa da construção inventiva e cooperada do relacionamento, afetando-se mutuamente; já a ainteração reativa é limitada por relações determinísticas de estímulo e resposta.

Entendemos o que significa dizer que algo é interativo ou reativo.

Comumente, a interatividade é uma das principais qualidades de uma interface

digital. Entraremos agora no nosso objetivo principal, o estudo de interfaces que

apresentam grande grau de interatividade, os websites. Como já abordamos

anteriormente, as primeiras páginas web foram escritas na linguagem HTML e seu

único objetivo era o compartilhamento de informações. Com a popularização da

internet, milhares de páginas começaram a ser criadas e com milhões de opções

disponíveis na rede, o usuário de internet passou a ser mais seletivo sobre os sites

que iria acessar. É nesse momento que surge um novo conceito a ser aprofundado;

ele faria toda a diferença na qualidade de uma página web, trata-se da usabilidade.

USABILIDADE

Nielsen (2000, prefácio) inicia sua obra com uma clara justificativa da

importância do estudo da usabilidade:

Há dez anos a web era algo diferente para as pessoas. Hoje ela é uma rotina, é uma ferramenta. Se for de fácil acesso, elas a utilizarão, do contrário, não. Com dez vezes mais sites e provavelmente centenas de páginas na web, os usuários estão menos tolerantes a sites complexos. Portanto um projeto falho significa negócios perdidos. Nunca a usabilidade foi tão importante.

Page 160: UNIVERSIDADE DE CAXIAS DO SUL IGOR BARAZZETTI · 6.1 MAPA DO . SITE. E FLUXO DE ... conceitual sobre definição de testes de usabilidade. Utilizamos Unger e Chandler ... durante

159

Com milhares de páginas na internet, o usuário passa a ser mais seletivo

sobre os sites que acessa e preocupa-se mais com a facilidade de uso e a

velocidade que ele consegue atingir seus objetivos de navegação. É para isso que a

usabilidade trabalha. Nielsen a define da seguinte forma:

A usabilidade é um atributo de qualidade relacionado à facilidade do 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.

O livro de Nielsen (2000, p. xix), lançado no ápice da bolha da internet, foi um

grande marco, pois exerceu forte influência no comportamento dos profissionais da

internet em uma época onde as empresas se preocupavam apenas em ter sites

―legais‖, prejudicando seus próprios negócios com isso. Nielsen (2000, p. xix) diz:

Depois que Projetando Websites foi publicado, muitos gerentes de internet perceberam que sites arrasadores, na verdade, arrasavam seus negócios. Eles descobriram que a melhor maneira de fazer negócios na web era criar sites que seus clientes conseguissem usar. A web não é televisão. As pessoas não a utilizam para se distrair, e sim com um propósito específico em mente. Elas estão prontas para interagir e participar.

Como exemplificado, a internet tem essa característica de interação e

participação. Esse detalhe estava sendo esquecido pelas empresas, mas nos dias

atuais, apesar de encontrarmos muitos equívocos de usabilidade nas páginas web,

podemos selecionar bons exemplos onde vários dos conceitos propostos por esse

autor são aplicados. Nielsen (2000, p. xix) afirma também, que a usabilidade se

tornou mensurável, e que através da taxa de sucesso podemos obter dados

importantes sobre a qualidade de navegação dos usuários e através dessas

informações, aprimorar sua experiência.

Grande parte deste trabalho será baseada em testes de usabilidade feitos

com usuários reais. Nielsen (2000, p. 17) defende a prática de testes com usuários

reais, ele afirma que basear-se apenas nas diretrizes de testes já realizados e de

seu livro não são suficientes. Ele diz que as diretrizes do seu livro são válidas para a

maioria dos casos, mas não para todos eles visto que o comportamento humano é

variável. Em alguns casos apenas o profissional poderá identificar circunstâncias

Page 161: UNIVERSIDADE DE CAXIAS DO SUL IGOR BARAZZETTI · 6.1 MAPA DO . SITE. E FLUXO DE ... conceitual sobre definição de testes de usabilidade. Utilizamos Unger e Chandler ... durante

160

que são específicas para um determinado projeto. Nielsen conclui afirmando: ―é

simultaneamente verdadeiro que você deve seguir a ampla maioria das diretrizes e

não deve seguir algumas outras.‖.

Uma diretriz bastante popular, difundida por Nielsen (2000, p. 21), é sobre o

tempo que um website tem para capturar a atenção de um usuário. Ele afirma que

na primeira vez que um visitante acessa um site, o tempo que ele possui para

comunicar-se e capturar sua atenção é de menos de dois minutos. Se a página,

quando chamada, não for objetiva o bastante para justificar sua importância de

maneira clara, o utilizador rapidamente partirá para a próxima opção, acessando

outra página na internet.

Tendo sucesso nessa primeira captação, é provável que o usuário navegue

pelo site e, se ele possuir boa usabilidade, as chances de que sua experiência seja

positiva e ele atinja seu objetivo é grande. A partir desse momento tudo se torna

mais fácil. Nilsen (2000, p. 22) afirma:

Como os usuários escolhem os sites com base nas experiências anteriores com eles, os sites com alta usabilidade tem melhor chance de serem selecionados. Além disso, sucesso chama sucesso: os usuários se aprimoram na utilização de sites que visitam habitualmente. Por exemplo, se você já comprou nove livros na amazon.com, será mais fácil comprar o décimo livro do que foi comprar o primeiro.

Medir a satisfação de um usuário não é uma tarefa tão simples. Normalmente,

fazer avaliações subjetivas não são um indicador confiável pois a maioria das

pessoas costuma dar avaliações mais positivas do que a real experiência que

tiveram. Nielsen (2000, p. 26) explica porque isso acontece quando diz:

Em geral, avaliações subjetivas de satisfação não são uma medida de usabilidade muito informativa porque os usuários tendem a atribuir avaliações generosas mesmo quando têm grandes dificuldades ao utilizar um site. Uma razão disso é o desejo humano geral de ser gentil e aceito. Outra razão é que os usuários frequentemente não sabem como foi seu desempenho ao testar um site. Se encontrarem informações para seus problemas, eles acreditam que o site foi útil – não percebem que esse site poderia conter informações muito mais relevantes que não foram prontamente disponibilizadas para eles.

Page 162: UNIVERSIDADE DE CAXIAS DO SUL IGOR BARAZZETTI · 6.1 MAPA DO . SITE. E FLUXO DE ... conceitual sobre definição de testes de usabilidade. Utilizamos Unger e Chandler ... durante

161

Perguntar a opinião dos usuários portanto, não é uma boa diretriz, por isso,

Nielsen (2000, p. 26) sugere que seja feito uma observação do usuário. Ele diz:

Observar como os usuários se saíram nas tarefas de escopo Web informa como as pessoas abordam websites quando elas não tem nenhuma predisposição de utilizar um site específico. Isso é comum quando os usuários estão tentando algo novo, como pesquisar a compra de algo que eles ainda não compraram e essa é exatamente a situação em que um website precisa ser o mais competitivo e atraente possível.

O certo a fazer pode parecer óbvio: identificar e corrigir todos os erros de

usabilidade do site, mas a tarefa não é tão simples assim. Muitas vezes, o volume de

melhorias identificado é muito grande e executar todas as correções pode exigir

mais tempo e dinheiro do que o planejado. Para isso Nielsen (2000, p. 124) sugere

que seja analisada a gravidade de cada problema. Nas suas próprias palavras:

―Para cada problema de usabilidade no site, você precisa pesar a gravidade do

problema em relação aos esforços exigidos para corrigi-lo.‖. O autor propõe alguns

modelos para identificar a gravidade dos problemas, que aprofundaremos no

trabalho final.

A arquitetura da informação também é fator determinante para a usabilidade.

A respeito disso, Nielsen (2000, p. 171) afirma:

Design caótico leva a becos sem saída e desperdício de esforços. websites prematuramente colocados online e sem um esquema informacional efetivo impedem que usuários consigam as informações que eles buscam. Quando isso acontece, esses usuários podem desistir ou, pior ainda, ir a um outro site. Um site bem estruturado fornece aos usuários o que eles querem no momento certo.

O autor (2000, p. 172) ainda diz que o maior elogio que um site pode receber

é quando as pessoas não fazem comentários a respeito da sua estrutura, pois

preocupar-se com isso é trabalho do designer e não do usuário. Ele também ressalta

(2000, p. 173) a importância do feedback dos clientes na hora de projetar a estrutura

de um site. É muito comum que empresas estruturem seu site de acordo com seu

modelo organizacional interno, ou pior, de acordo com preferências pessoais de

gerentes e profissionais internos. Para Nielsen, esse erro pode custar muito caro.

Ele diz:

Page 163: UNIVERSIDADE DE CAXIAS DO SUL IGOR BARAZZETTI · 6.1 MAPA DO . SITE. E FLUXO DE ... conceitual sobre definição de testes de usabilidade. Utilizamos Unger e Chandler ... durante

162

Tentar projetar a estrutura do seu site sem o feedback dos seus clientes é um grande equívoco que pode lhe custar muito dinheiro. Independente do visual e grau de sofisticação do seu site, ele é inútil se não fizer sentido a seu publico-alvo. Projete para a conveniência deles, não para a sua.

Vimos que a usabilidade é uma disciplina ampla e que seu principal objetivo é

facilitar o uso. No entanto existe um conceito que deve ser trabalhado lado a lado

com a usabilidade. Falamos da acessibilidade.

ACESSIBILIDADE

A acessibilidade está diretamente relacionada com a usabilidade. Krug (2006,

p. 169) diz que um site não pode ser considerado usável se não for acessível, a não

ser que você tome a decisão de que as pessoas com deficiência não fazem parte do

seu público. O autor acredita que dar atenção para as questões que envolvem a

acessibilidade em um projeto, é a coisa certa a fazer e melhora a vida das pessoas.

Para Krug (2006, p.170, 171) os desenvolvedores e projetistas costumam ser

resistentes a ideia de implementar recursos para tornar um site acessível. Ele cita

que os principais motivos para esse comportamento são que a maioria das pessoas

que convivem com esses projetistas é jovem e não possui deficiências, o que os faz

desconsiderar que uma grande parcela da população precisa de auxílio para

acessar um site e a própria dificuldade de análise e implementação desses recursos.

Ele diz (2006, p.171):

A medida que aprendemos sobre acessibilidade, dois medos tendem a surgir: Mais trabalho. Para os desenvolvedores em especial, a acessibilidade pode parecer apenas mais uma coisa complicada à qual adaptar a um cronograma impossível de projeto. No pior dos casos, ela é passada como uma ―inciativa‖ vinda de cima, completa com relatórios, exames e reuniões de forças-tarefa que consomem tempo. Projeto comprometido. O que os projetistas mais temem é o que eu chamo de gatos amanteigados: lugares onde bons projetos para pessoas com deficiências e bons projetos para todas as outras pessoas estarão em oposição direta. Eles temem ser forçados a projetar sites que sejam menos atrativos – e menos úteis – para a maioria do seu público.

Krug (2006, p. 173) complementa, dizendo que tornar um site acessível é

muito mais difícil do que deveria ser. Ele acredita que se a acessibilidade ganhasse

Page 164: UNIVERSIDADE DE CAXIAS DO SUL IGOR BARAZZETTI · 6.1 MAPA DO . SITE. E FLUXO DE ... conceitual sobre definição de testes de usabilidade. Utilizamos Unger e Chandler ... durante

163

mais presença na web, sua implementação acabaria tornando-se mais fácil. Ele

oferece algumas dicas para tornar um projeto mais acessível. Entre elas estão:

consertar os problemas de acessibilidade que confundem a todos, a leitura de

artigos e livros sobre acessibilidade, a estruturação correta de websites através de

cascading style sheets (css)14 e alterações específicas no HTML para evitar alguns

recursos que normalmente geram problemas de compatibilidade com navegadores.

Como observado, o estudo da usabilidade contempla uma infinidade de

questões de analise complexa para aprimorar a qualidade de um website e a própria

acessibilidade é um fator determinante para que um site possa ser considerado

usável. Entretanto, certificar-se que um site é usável não garante o sucesso pleno do

projeto. Isso porque o design evoluiu a um ponto onde a análise da qualidade da

experiência de navegação vai muito além do simples fato de conseguir realizar as

tarefas de forma rápida e eficaz. Falaremos agora de uma disciplina atual e muito

abrangente e tema principal desse projeto, o Design da Experiência do Usuário (UX).

DESIGN DE UX

Design da experiência do usuário, ou, design de UX é um termo que

apresenta várias definições por se tratar de uma área muito ampla do design. Unger

e Chandler (2009, p. 3) definem o design da experiência do usuário da seguinte

forma:

O design da experiência do usuário é a criação e a sincronização dos elementos que afetam a experiência dos usuários em uma empresa em particular, com a intenção de influenciar as suas percepções e seu comportamento. Esses elementos incluem as coisas que um usuário pode tocar (tais como produtos e pacotes tangíveis), ouvir (assinaturas comerciais e de áudio) e, até mesmo, sentir (o aroma do pão assado e fresco em uma loja de sanduíches). Isso inclui as coisas com que os usuários podem interagir de forma que vão além do físico, como interfaces digitais (sites na web e aplicações em telefone celular) e, é claro, pessoas (representantes de serviço ao cliente, vendedores e amigos de família).

14

Krug (2006, p. 177) explica que antigamente os sites eram desenvolvidos em tabelas para que os

projetistas tivessem algum controle sobre a aparência. Isso fez com que as tabelas e outros comandos de HTML passassem a ser utilizados para objetivos diferentes do qual haviam sido projetados. Após os navegadores de adaptarem ao CSS, o problema foi resolvido. Hoje, o CSS oferece vantagens enormes na sua utilização como flexibilidade, consistência, controle de aparência e facilidade na formatação de textos.

Page 165: UNIVERSIDADE DE CAXIAS DO SUL IGOR BARAZZETTI · 6.1 MAPA DO . SITE. E FLUXO DE ... conceitual sobre definição de testes de usabilidade. Utilizamos Unger e Chandler ... durante

164

Unger e Chandler (2009, p. 4) também afirmam que apesar do foco de sua

obra ser o meio digital, nunca devemos desconsiderar o aspecto tangível na hora de

projetar algo para o ambiente virtual. O ambiente onde o usuário se encontra, assim

como os periféricos que utiliza para a interação, fazem parte da experiência que ele

terá na utilização de um produto digital. Os autores também ressaltam que a

experiência precisa ser analisada como um todo, pois, um site bem projetado não

garante uma experiência positiva para uma empresa ou marca, visto que, não pode

garantir a entrega de uma embalagem de produto bem desenhado ou um

atendimento atencioso de pós vendas.

Percebemos que o escopo do design de UX é sem dúvida muito grande,

porém, focaremos em projetar uma experiência significativa para os usuários de

projetos digitais. Unger e Chandler (2009, p. 5) fazem a seguinte afirmação:

Para ser bem-sucedido, o design da experiência do usuário desses produtos deve levar em conta os objetivos de negócio do projeto, as necessidades dos usuários do produto e quaisquer limitações que afetarão a viabilidade das características do produto (como as limitações técnicas ou restrições no orçamento do projeto ou nos prazos).

Os autores (2009, p. 6) dizem que o grande desafio do projetista de UX é

manter o equilíbrio entre a lógica e a emoção. Para eles:

Para criar um experiências verdadeiramente memoráveis e satisfatórias, um projetista de UX precisa entender os elementos que são importantes para criar uma conexão emocional com os usuários do produto. O equilibrio exato pode alternar de acordo com o produto.

Eles citam (2009, p. 6) o exemplo de que uma propaganda de um brinquedo

para crianças terá um equilíbrio diferente de uma aplicação para um hospital, por

isso, a compreensão das necessidades do utilizador é de extrema importância. Para

entendê-las, faz-se necessário grande empatia, para imergir em seus mundos,

buscando compreender suas necessidades e motivações.

Chandler (2009, p. 10) afirma que cada projeto tem objetivos específicos,

porém todos os projetos possuem um contexto maior que é o ecossistema do

projeto. Ele inclui o ambiente onde se está trabalhando, o tipo geral do trabalho e as

pessoas com quem se está interagindo. Ela afirma que a compreensão desses

Page 166: UNIVERSIDADE DE CAXIAS DO SUL IGOR BARAZZETTI · 6.1 MAPA DO . SITE. E FLUXO DE ... conceitual sobre definição de testes de usabilidade. Utilizamos Unger e Chandler ... durante

165

fatores é essencial para facilitar a delegação de responsabilidades e a comunicação

de ideias para todos os envolvidos no projeto.

A autora também diz (2009, p. 21) que ao iniciar um projeto, o projetista de

UX acaba tendo que exercer vários papéis. Nesse caso, é importante saber assumir

os papéis onde será possível oferecer uma maior contribuição. Normalmente, os três

principais papéis são: arquiteto da informação, designer de interação e pesquisador

do usuário.

O arquiteto da informação, segundo Chandler (2009, p.22), ―é responsável por

criar modelos para a estrutura da informação e utilizá-los para projetar uma

navegação amigável ao usuário e dividir o conteúdo em categorias‖. O designer de

interação (2009, p. 23) ―é responsável pela definição do comportamento de um site

ou de uma aplicação de acordo com as ações do usuário‖. E, o pesquisador do

usuário (2009, p. 24) ―é responsável por fornecer ideias considerando as

necessidades dos usuários finais, baseadas nas informações que são geradas a

partir da (ou validadas com) a pesquisa que a pessoa conduz com os usuários‖.

Outros papéis que podem ser exercidos ou delegados, segundo Chandler

(2009, p.26), são: estrategista da marca, analista de negócios, estrategista de

conteúdo, redator, designer visual e desenvolvedor de interface. Apesar de serem

papéis importantes, não nos aprofundaremos neles nesse momento.

Chandler (2009 p. 56) acredita que uma clara definição dos objetivos é fator

de extrema importância para o sucesso do projeto. Ela afirma: ―um dos segredos de

um bom projeto é iniciar dentro da equipe com objetivos claros do projeto e uma

abordagem bem compreensível. De forma ideal, a liderança do projeto terá isso

definido por você‖. Ela também diz (2009, p. 57):

os objetivos são lentes focalizadoras importantes que você usará durante todo o projeto. Eles devem partir da estratégia de negócio geral da empresa do cliente, por isso os objetivos do projeto devem estar alinhados com as iniciativas estratégicas dentro da empresa.

Page 167: UNIVERSIDADE DE CAXIAS DO SUL IGOR BARAZZETTI · 6.1 MAPA DO . SITE. E FLUXO DE ... conceitual sobre definição de testes de usabilidade. Utilizamos Unger e Chandler ... durante

166

Chandler (2009 p. 56) recomenda que os objetivos sejam definidos com foco

pois objetivos muito amplos não são diretrizes válidas para projetos específicos.

Quando houverem muitos objetivos, o ideal é organizá-los por ordem de prioridade,

certificando-se sempre, que um objetivo não entre em conflito, ou mesmo, inviabilize

outro.

Conhecer os problemas antes de criar as soluções é imprescindível. Chandler

(2009 p. 67) diz:

Quando a equipe do projeto se reunir, provavelmente você terá ouvido ou aparecido com muitas ideias sobre quais necessidades devem ser cumpridas. Pode já existir listas de funções oferecidas por alguns membros de destaque da empresa (seus agentes de negócio), junto com suas opiniões sobre quais funções são mais importantes. Existem elementos das requisições de negócio para o projeto, e eles são um bom início. Para ter certeza se você tem uma solução completa ao final do projeto, você precisará gerar e esclarecer requisições a partir de vários pontos de vista.

Chandler (2009 p. 70) ressalta a importância de compreender o estado atual

de um projeto antes de iniciá-lo. É importante entender os problemas atuais, caso o

projeto seja o redesign de um site que já existe, assim como é fundamental ter uma

boa compreensão da concorrência, se estiver criando um novo site ou aplicação. É

possível adquirir boa compreensão por meio de entrevistas com o agente ou mesmo,

via pesquisas feitas por conta própria. A análise heurística é uma boa opção para

obtenção dessa compreensão. Chandler (2009 p. 70) diz:

Uma análise heurística é uma técnica que você pode usar para avaliar a usabilidade de um projeto existente, baseado nas melhores práticas dentro do campo da experiência do usuário. Você pode conduzir tal análise no site atual no início de um projeto a ser criado ou analisar sites concorrentes a fim de compreender oportunidades para uma oferta de uma experiência do usuário com mais qualidade do que em outras empresas. O resultado é um documento descrevendo os pontos fortes e pontos fracos do site, incluindo as recomendações para melhorias.

Após a obtenção desse documento, é possível ter uma compreensão mais

aprofundada, e assim, listar ideias para contribuir com o novo projeto. As 10

heurísticas de Jackob Nielsen são uma boa diretriz para execução dessa análise;

sempre considerando que cada projeto precisa ser analisado individualmente, pois,

Page 168: UNIVERSIDADE DE CAXIAS DO SUL IGOR BARAZZETTI · 6.1 MAPA DO . SITE. E FLUXO DE ... conceitual sobre definição de testes de usabilidade. Utilizamos Unger e Chandler ... durante

167

existirão casos específicos em que algumas recomendações heurísticas não

poderão ser seguidas.

Existem diversas técnicas de pesquisa com o usuário que podem ser

utilizadas durante todo o projeto (Chandler, 2009, p. 85). Entre os passos básicos

para conduzir uma pesquisa de usuário estão: A definição dos grupos de usuários

primários, o planejamento do envolvimento do usuário, a condução da pesquisa, a

validação das definições do grupo de usuários e a criação de um documento com as

requisições desses usuários. As informações obtidas após essas pesquisas,

contribuirão para a formação de novos grupos de usuários e ferramentas mais

detalhadas, como personas, que contribuirão para a criação das requisições de

usuário.

Para Unger (2009, p. 113) As personas são documentos que contribuem para

encontrar a melhor maneira de colocar a sua equipe – ou o seu cliente – no lugar

dos seus usuários. Para ele:

As personas podem ser usadas para ajudar a equipe do seu projeto e o seu cliente a simpatizarem com os usuários deles. As personas podem proporcionar uma verificação interna de muitas partes do seu projeto – as requisições de negócio, o design visual ou a verificação da qualidade -, oferecendo percepções a respeito de quem é seu público e quais são as expectativas deles e os seus comportamentos.

Unger (2009, p. 114) define o que são personas:

Personas são documentos que descrevem típicos usuário-alvo. Elas podem ser úteis para a equipe do seu projeto, para os agentes e para os clientes. Com pesquisas e descrições apropriadas, as personas podem ilustrar um quadro muito claro sobre quem está usando um site ou aplicação e, potencialmente, até mesmo como estão usando. Os projetistas da experiência do usuário geralmente veem a criação de personas como um grande exercício de empatia.

Para Unger (2009, p. 114), criar personas é um ato que ajuda a equipe a

resolver conflitos que costumam surgir durante a criação e desenvolvimento,

retomando o foco do projeto e seguindo adiante. ―O objetivo das personas é ajudar a

sua equipe e/ou seus clientes a tirarem parte da confusão que pode surgir quando

você chegar ao cruzamento da tomada de decisão‖, afirma Unger (2009, p. 114).

Page 169: UNIVERSIDADE DE CAXIAS DO SUL IGOR BARAZZETTI · 6.1 MAPA DO . SITE. E FLUXO DE ... conceitual sobre definição de testes de usabilidade. Utilizamos Unger e Chandler ... durante

168

Após toda a coleta de informações reunidas, o projeto pode sair do papel e

começar a ser implementado. Nesses momentos, o projetista costuma encontrar

dificuldades, como ideias que surgem após a definição das requisições, que

influenciarão em prazos e nas próprias requisições já definidas. Também é comum

ser obrigado a priorizar, ou até mesmo, deixar de lado algumas requisições em

função de prazos e orçamentos apertados. Nesses momentos, faz-se necessário

uma redução da lista de requisições. Nessa etapa, o projetista de ux tem papel

fundamental. Ungler e Chandler (2009, p. 152) dizem:

Pode ser tentador considerar a priorização uma responsabilidade entre patrocinador do projeto, o gerente do projeto e o líder da equipe de desenvolvimento em vez de uma questão para um projetista de UX. Não há nada além da verdade. As discussões sobre priorização são o lugar onde as soluções bem-sucedidas são feitas ou quebradas. Os projetistas da experiência do usuário têm a responsabilidade de trazer suas habilidades à tona nessas conversas importantes.

Quando a equipe chega a um consenso e a lista de requisições é definida, é

hora de preparar-se para iniciar o design. Algumas técnicas podem auxiliar o início

da criação prática, como a criação de um mapa do site e fluxo de tarefas. Unger

(2009, p. 166) diz:

Os mapas do site ajudam a identificar a estrutura dos sites na web e das aplicações. Eles podem mostrar hierarquias e conexões que permitem que o seu público obtenha uma compreensão de onde os usuários podem localizar o conteúdo. Os fluxos de tarefa levam os mapas do site um passo a frente identificando os vários cursos de ação que um usuário pode atravessar dentro de uma seção do site.

Sobre os fluxos de tarefa, Unger (2009, p. 166) ainda acrescenta:

Os fluxos de tarefa também desenham as conexões para estados de erro, conteúdo ou visualizações de página baseados nos pontos de decisão através de todo o processo. Quando usados juntamente, os mapas do site e os fluxos de tarefa podem oferecer um cenário claro das estruturas de conteúdo ao seu público e como os usuários podem navegar através deles.

Outra ferramenta que serve como auxílio antes que o design visual comece

são os wireframes. Para Unger (2009, p. 185), os wireframes são formas de

identificar a estrutura de um website ou aplicação, assim como seus

comportamentos funcionais. Eles servem como um protótipo visual que carregam os

conceitos obtidos nas análises anteriores. Unger (2009, p. 185) afirma que

Page 170: UNIVERSIDADE DE CAXIAS DO SUL IGOR BARAZZETTI · 6.1 MAPA DO . SITE. E FLUXO DE ... conceitual sobre definição de testes de usabilidade. Utilizamos Unger e Chandler ... durante

169

os wireframes são, geralmente, apresentados em escalas de cinza, privados de elementos gráficos ou conteúdo finalizado,; em vez disso, eles usam conteúdo substituível para destacar locais representativos que podem ser usados como orientação no design visual.

De acordo com Unger (2009, p. 186), um wireframe resume-se a ―um

protótipo de baixa fidelidade de uma página na web ou tela de uma aplicação. Um

wireframe é usado para identificar os elementos que serão exibidos na página ou na

tela.‖ A partir da definição do wireframe, torna-se possível criar o primeiro protótipo

funcional do projeto. A prototipagem contribui para que o usuário possa fazer testes

de interação reais antes de iniciar o desenvolvimento oficial do projeto. Unger (2009,

p.205) diz:

No contexto do design da experiência do usuário, a prototipagem é o ato de (e, em muitos casos, a arte de) criar e testar toda ou parte da funcionalidade de uma aplicação ou website com usuários. Os protótipos podem ser feitos com ferramentas analógicas (como quadros brancos e papel) ou digitalmente com o PowerPoint, Acrobat, Visio, OmniGraffle, HTML ou outras ferramentas baseadas na tecnologia.

Unger (2009, p. 205) faz questão de ressaltar que por mais fiel que seu

protótipo seja em questão de recursos e funcionalidades, tudo o que é apresentado

nele não passa de prototipagem, e não deve ser considerado como resultado final.

Após completar o processo de prototipagem, será preciso transformá-lo em um

objeto que possa ser utilizado pelo usuário de forma completa através do design

visual e desenvolvimento do projeto.

Tudo indica que chegamos ao fim de todo o processo, porém, como afirma

Unger (2009, p. 247) ―Um bom processo de design de experiência do usuário nunca

acaba‖. O projetista de UX deve manter-se envolvido e acompanhar todo o processo

de criação e desenvolvido, a fim de assegurar-se que a entrega final seja a

experiência do usuário projetada.

Após ter feito esse acompanhamento, e obter o produto final, é hora de testar

o design com os usuários novamente. Segundo Unger (2009, p. 251), muitas vezes

os testes com usuários não são realizados nas etapas anteriores, e mesmo quando

são, sempre ficam brechas e pequenos problemas que passaram despercebidos e

Page 171: UNIVERSIDADE DE CAXIAS DO SUL IGOR BARAZZETTI · 6.1 MAPA DO . SITE. E FLUXO DE ... conceitual sobre definição de testes de usabilidade. Utilizamos Unger e Chandler ... durante

170

precisam de solução após o lançamento do produto final. Esses testes podem ser

feito antes do lançamento oficial, e devem ser feitos mesmo após.

Unger (2009, p. 253) adverte para que o projetista não se surpreenda se

mesmo depois de todo esse trabalho minucioso as pessoas não demonstrem

interesse pelo produto lançado. Ele Cita alguns fatores que tem grande importância

na aceitação de um produto: vantagem pessoa, suporte e opinião e boca a boca

gerado pelos grupos ativos de usuários. O autor (2009, p. 253) sugere que o site ou

aplicação possua um canal de comunicação com o cliente para oferecer suporte e

ouvir suas sugestões de melhorias.

Unger (2009, p. 255) considera importante que mesmo após todos os testes

pós-lançamento, continuem sendo coletadas informações de navegação e opiniões

de usuários para gerar uma lista de aprimoramentos e benefícios que podem ser

implementados ao website ou aplicação. Ele conclui sua obra citando: ―Os projetos

não devem morrer. Eles devem ser o trampolim para novos projetos que são

voltados continuamente para o aprimoramento do design da experiência do usuário.‖

Page 172: UNIVERSIDADE DE CAXIAS DO SUL IGOR BARAZZETTI · 6.1 MAPA DO . SITE. E FLUXO DE ... conceitual sobre definição de testes de usabilidade. Utilizamos Unger e Chandler ... durante

171

9 ROTEIRO DOS CAPÍTULOS

(sumário provisório do TCC)

1. INTRODUÇÃO

2. CIBERESPAÇO E INTERNET

2.1. Ciberespaço

2.2. Internet

2.2.1. História

2.2.2. Conceitos

2.2.2.1. Interatividade

2.2.2.2. Acessibilidade

2.2.2.3. Navegabilidade

2.2.2.4. Usabilidade

2.2.2.5. Funcionalidade

2.2.2.6 Interface

3. DESIGN DE UX

3.1. O que é Design de UX?

3.2. Elementos da UX

3.2.1. Arquitetura da Informação

3.2.2. Usabilidade

3.2.3. Design de Interação

3.2.4. Design Visual

3.2.5. Interação Humano-computador

3.3. Anáise de Requisitos do Negócio

4. USUÁRIO

4.1. Pesquisa de usuário

4.2. Grupos de Foco

4.3. Testes de Usabilidade

4.4. Personas

4.4.1. Definição de Publico alvo

4.4.2. Personas

Page 173: UNIVERSIDADE DE CAXIAS DO SUL IGOR BARAZZETTI · 6.1 MAPA DO . SITE. E FLUXO DE ... conceitual sobre definição de testes de usabilidade. Utilizamos Unger e Chandler ... durante

172

4.4.3. Análise e documentação dos públicos

4. 5. SEO e UX

4. 5.1. Tecnologias

4. 5.2. Produção de Conteúdo

4.6. Planejamento

4.6.1. Mapa do site

4.6.2. Fluxo de Tarefas

4.6.3. Wireframes

4.7. Testes e Prototipagem

4.7.1. Prototipagem

4.7.1.1 No papel

4.7.1.2 Prototipo Digital

4.8. Testes com Usuários

4.8.1. Explorando o Design Visual

4.8.2. Testando Usabilidade

4.8.3. Aplicando melhorias e facilitando

4.8.4. Análise de resultados e sugestões de melhorias

4.9. Aplicando o Desenvolvimento

4.9.1. Mantendo os testes após lançamento

4.9.2. Concluindo (?) o projeto

5. APLICAÇÕES PRÁTICAS

5.1. Análise de testes feitos com usuários reais aplicando os métodos

5.2. Comparativos

6. CONCLUSÃO

Page 174: UNIVERSIDADE DE CAXIAS DO SUL IGOR BARAZZETTI · 6.1 MAPA DO . SITE. E FLUXO DE ... conceitual sobre definição de testes de usabilidade. Utilizamos Unger e Chandler ... durante

173

10 CRONOGRAMA

Mês Semana Tarefa Observação

Agosto 12 Orinetação

19 Introdução/Tema/

Objetivos

26 Hipoteses/Questão

Norteadora

Setembro 02 Justificativa

09 Justificativa

18 Metodologia

25 Metodologia

Outubro 02 Metodologia

09 Metodologia

16 Metodologia

23 Revisão

Bivliográfica

30 Revisão

Bibliográfica

Novembro 06 Ajustes, revisão

bibliográfica e

roteiro

13 Ajustes, revisão

bibliográfica e

roteiro

20 Considerações

Finais

27 Considerações

Finais

Dezembro

Page 175: UNIVERSIDADE DE CAXIAS DO SUL IGOR BARAZZETTI · 6.1 MAPA DO . SITE. E FLUXO DE ... conceitual sobre definição de testes de usabilidade. Utilizamos Unger e Chandler ... durante

174

REFERÊNCIAS BIBLIOGRÁFICAS

Eletrônicas: MONTEIRO, Luís. A INTERNET COMO MEIO DE COMUNICAÇÃO: POSSIBILIDADES E LIMITAÇÕES. Disponível em: <http://www.jack.eti.br/www/arquivos/documentos/trabalhos/fae/Trabalho_Redes_Adinarte_26032008.pdf> Acesso em: 08 Set 2013. REVISTA ÉPOCA. PRIMEIRO SITE PUBLICADO NA INTERNET COMPLETA 20 ANOS. Disponível em: <http://revistaepoca.globo.com/Revista/Epoca/0,,EMI255533-15224,00.html> Acesso em: 17/09/2013 CONTI, Fátima. O QUE É UM LINK. Disponível em: <http://www.ufpa.br/dicas/htm/htm-link.htm> Acesso em 18/09/2013 PEDRO, Fábio. UX DESIGN: O QUE É?. Disponível em: <http://www.paespedro.com.br/blog/mercado/ux-design-o-que-e> Acesso em: 20/09/2013 PEDRO, Fábio. UX SOBRE UX DESIGN (USER EXPERIENCE DESIGN). Disponível em: <http://www.paespedro.com.br/blog/mercado/sobre-ux-user-experience > Acesso em: 20/09/2013 SITE SUAPESQUISA. REVOLUÇÃO INDUSTRIAL. Disponível em: <

http://www.suapesquisa.com/industrial/ > Acesso em: 28/09/2013 (DIZARD, 2000, p. 24). Achar isso MARTINS, Elaine. O QUE É TCP/IP?. Disponível em: <

http://www.tecmundo.com.br/o-que-e/780-o-que-e-tcp-ip-.htm#ixzz2gKySCADM > Acesso em 28/09/2013 AGNER, Luiz. CARD SORTING. Disponível em: http://www.slideshare.net/agner/card-sorting-183803 Acesso em: 02/11/2013 AGNER, Luiz. CARD SORTING. Disponível em: http://www.slideshare.net/agner/card-sorting-183803 Acesso em: 02/11/2013 PRATES, Raquel, BARBOSA, Simone. AVALIAÇÃO DE INTERFACES DE USUÁRIO – CONCEITOS E MÉTODOS Disponível em: http://homepages.dcc.ufmg.br/~rprates/ge_vis/cap6_vfinal.pdf Acesso em: 26/11/2013

Page 176: UNIVERSIDADE DE CAXIAS DO SUL IGOR BARAZZETTI · 6.1 MAPA DO . SITE. E FLUXO DE ... conceitual sobre definição de testes de usabilidade. Utilizamos Unger e Chandler ... durante

175

Bibliográficas: NIELSEN, Jackob, LORANGER, Hoa. USABILIDADE NA WEB: PROJETANDO WEBSITES COM QUALIDADE. Tradução de Edson Furmankiewicz & Carlos Schafranski, São Paulo, Elsevier Editora Ltda., 3ª tiragem. 2007. LÉVY, Pierre. CIBERCULTURA. Tradução de Carlos Irineu da Costa, São Paulo, Ed. 34, 2ª ed.2000. UNGER, Russ, CHANDLER, Carolyn. O GUIA PARA PROJETAR UX: A EXPERIÊNCIA DO USUÁRIO (UX) PARA PROJETISTAS DE CONTEÚDO DIGITAL, APLICAÇÕES E WEBSITES. Tradução de Elda Oliveira. Rio de Janeiro, Starlin Alta Com. Com. Ltda., 2009. AGNER, Luiz. ERGODESIGN E ARQUITETURA DA INFORMAÇÃO > TRABALHANDO COM O USUÁRIO. Rio de Janeiro, Quartet Editora e Comunicação Ltda., 2ª ed. 2006. MEMÓRIA, Felipe. DESIGN PARA INTERNET: PROJETANDO A EXPERIÊNCIA PERFEITA. Rio de Janeiro, Elsevier Editora Ltda., 2006. KRUG, Steve. NÃO ME FAÇA PENSAR: UMA ABORDAGEM DE BOM SENSO À USABILIDADE NA WEB. Tradução de Acauan Pereira Fernandes. Rio de Janeiro, Starlin Alta Com. Com. Ltda., 2006. NORMAN, Donald. O DESIGN DO DIA-A-DIA. Tradução de (?). Rocco Editora Ltda., 2006. AUTOR, nome. DESIGN DE NAVEGAÇÃO. Tradução de (verificar). Cidade (verificar) Editora (verificar) data (verificar) DIZARD JR., Wilson. A NOVA MÍDIA A COMUNICAÇÃO DE MASSA NA ERA DA INFORMAÇÃO. Tradução: Antonio Queiroga e Edmond Jorge. Rio de Janeiro: Jorge Zahar Editores, 2000. 324 p. PRIMO, Alex. INTERAÇÃO MEDIADA POR COMPUTADOR: COMUNICAÇÃO, CIBERCULTURA, COGNIÇÃO. Porto Alegre, Sulina Editora Ltda., 2° edição, 2008. JOHNSON, Steven. CULTURA DA INTERFACE: COMO O COMPUTADOR TRANSFORMA NOSSA MANEIRA DE CRIAR E COMUNICAR. Tradução de Maria Luiza X. de A. Borges, Rio de Janeiro, Jorge Zahar Editor Ltda., 2001 LEMOS, André, PALACIOS, Marcos. JANELAS DO CIBERESPAÇO: COMUNICAÇÃO E CIBERCULTURA. Porto Alegre, Sulina Editora Ltda., 2001. DUARTE, Jorge, BARROS, Antonio. MÉTODOS E TÉCNICAS DE PESQUISA EM COMUNICAÇÃO. São Paulo, Editora Atlas S.A., 2° edição, 2009