61
UNIVERSIDADE FEDERAL DE PERNAMBUCO CENTRO ACADÊMICO DO AGRESTE NÚCLEO DE DESIGN E COMUNICAÇÃO CURSO DE DESIGN Avaliação de Design de Interação para Aplicativo Móvel Estudo de caso do aplicativo móvel Casa da Esfiha Delivery. JOÃO SÉRGIO REGIS MAGALHÃES Caruaru, 2017

Avaliação de Design de Interação para Aplicativo Móvel

  • Upload
    others

  • View
    3

  • Download
    0

Embed Size (px)

Citation preview

Page 1: Avaliação de Design de Interação para Aplicativo Móvel

UNIVERSIDADE FEDERAL DE PERNAMBUCO

CENTRO ACADÊMICO DO AGRESTE

NÚCLEO DE DESIGN E COMUNICAÇÃO

CURSO DE DESIGN

Avaliação de Design de Interação para Aplicativo Móvel

Estudo de caso do aplicativo móvel Casa da Esfiha Delivery.

JOÃO SÉRGIO REGIS MAGALHÃES

Caruaru, 2017

Page 2: Avaliação de Design de Interação para Aplicativo Móvel

JOÃO SÉRGIO REGIS MAGALHÃES

Avaliação de Design de Interação para Aplicativo Móvel

Estudo de caso do aplicativo móvel Casa da Esfiha Delivery.

Monografia apresentada, como

pré-requisito para a conclusão

do curso de Design, da

Universidade Federal de

Pernambuco, orientada pelo Prof.

M. Sc. Fábio Caparica.

Caruaru, 2017

Page 3: Avaliação de Design de Interação para Aplicativo Móvel

Catalogação na fonte:

Bibliotecária – Marcela Porfírio – CRB/4-1878

M188a Magalhães, João Sérgio Regis. Avaliação de design de interação para aplicativo móvel : estudo de caso do aplicativo

móvel Casa da Esfiha Delivery. / João Sérgio Regis Magalhães. – 2017. 60f. : 30 cm.

Orientador: Fábio Caparica de Luna. Monografia (Trabalho de Conclusão de Curso) – Universidade Federal de

Pernambuco, CAA, Design, 2017. Inclui Referências.

1. Interação homem-máquina. 2. Interface de programas aplicativos (Software).

3. Aplicativos móveis. 4. Desenho (Projetos). I. Luna, Fábio Caparica de (Orientador). II. Título.

740 CDD (23. ed.) UFPE (CAA 2017-146)

Page 4: Avaliação de Design de Interação para Aplicativo Móvel

UNIVERSIDADE FEDERAL DE PERNAMBUCO

CENTRO ACADÊMICO DO AGRESTE

NÚCLEO DE DESIGN E COMUNICAÇÃO

PARECE DE COMISSÃO EXAMINADORA

DE DEFESA DE PROJETO DE

GRADUAÇÃO EM DESIGN DE

João Sérgio Regis Magalhães

“Avaliação de Design de Interação para Aplicativo

Móvel: Estudo de caso do aplicativo móvel Casa da

Esfiha Delivery”

A comissão examinadora, composta pelos membros abaixo, sob a presidência do primeiro,

considera o aluno João Sérgio Regis Magalhães, APROVADO.

Caruaru, 18 de Julho de 2017

Fábio Caparica de Luna

Ricardo Augusto de Azevedo Marcelino

Renato José Araújo de Albuquerque

Page 5: Avaliação de Design de Interação para Aplicativo Móvel

AGRADECIMENTOS

Quero agradecer, primeiramente, a Deus pela conclusão dessa

monografia. Também gostaria de agradecer aos meus pais pelo suporte e

incentivo; e à Silvia Sena por todo o apoio, motivação e carinho dados durante

todo esse tempo juntos. Agradeço aos meus irmãos, amigos e colegas que me

deram força durante este período. Por fim, não posso deixar de agradecer ao

meu orientador, prof. Fábio Caparica, que me auxiliou durante este projeto e que

sua orientação foi fundamental para conclusão desse projeto e curso. Obrigado

a todos.

Page 6: Avaliação de Design de Interação para Aplicativo Móvel

RESUMO

Usabilidade, interação e satisfação no uso não são temas sobre os quais

usuários costumam refletir enquanto estão utilizando alguma interface, mas,

estes fatores, de forma inconsciente os marcam e determinam quais sentimentos

eles vão carregar dessa experiência de uso. Dessa forma, o presente estudo

propõe avaliar o aplicativo móvel de delivery da Casa da Esfiha e identificar os

principais problemas de usabilidade da interface. Para realizar esta avaliação,

primeiramente foi levantada uma fundamentação teórica, em seguida foram

aplicados vários princípios do design de interação e de usabilidade, para medir

o alinhamento da interface com os padrões teóricos. Após essa análise

preliminar, foi conduzido um questionário com os usuários, para ratificar que as

soluções propostas resolveriam os problemas identificados. Ao fim deste projeto

é apresentado um conjunto de sugestões que podem ser aplicadas para

melhorar a experiência de uso da interface.

Palavras-chave

Design de interação, usabilidade, interface, aplicativo.

Page 7: Avaliação de Design de Interação para Aplicativo Móvel

ABSTRACT

Usability, interaction, and user’s satisfaction are not themes that users

often ponder upon while using an interface, but unconsciously, these factors mark

them and determine what feelings they will carry from the user experience. Thus,

the present study proposes to evaluate Casa da Esfiha’s mobile delivery

application and identify the main usability problems in the interface. In order to

carry out this evaluation, a theoretical basis was first raised, then several

principles of interaction design and usability were applied to measure the

alignment of said interface to the theoretical standards. After this preliminary

analysis, a questionnaire was conducted white the users to confirm that the

proposed solutions would solve the problems identified. At the end of this project

it is presented a set of suggestions that can be applied in order to improve the

experience of using the interface.

Keywords:

Interaction design, usability, interface, application.

Page 8: Avaliação de Design de Interação para Aplicativo Móvel

LISTA DE FIGURAS

Figura 1 - Dados de downloads de aplicativos....................................... 10

Figura 2 Tela de cadastro do aplicativo ................................................. 12

Figura 3 Telas do aplicativo ................................................................... 13

Figura 4 Tela de finalização do pedido .................................................. 13

Figura 5 Relação de disciplinas, práticas de design e design de interação.

............................................................................................................... 15

Figura 6 – Fases, técnicas e objetivos da metodologia. ........................ 26

Figura 7 - Menu lateral, tela inicial e menu de bebidas .......................... 28

Figura 8 - Menu bebidas, meu carrinho e finalizar pedido ..................... 29

Figura 9 - Menu lateral, ícones do sistema ............................................ 29

Figura 10 - Ícones do sistema ................................................................ 30

Figura 11 - Página de produto ............................................................... 33

Figura 12 - Cadastro de endereço ......................................................... 34

Figura 13 - Cadastro de endereço, sinalização de erro fora do padrão . 35

Figura 14 - Feedback ao adicionar um item ao carrinho ........................ 36

Figura 15 - Chamada de ação ao final de cada página ......................... 37

Figura 16 - Entrada de texto na barra de pesquisa ................................ 38

Figura 17 - Editando pedido no carrinho ................................................ 39

Figura 18 - Estrutura das perguntas ...................................................... 41

Figura 19 – Experiência do usuário com smartphones .......................... 41

Figura 20 – Facilidade de navegação .................................................... 42

Figura 21 - Facilidade de localizar informações ..................................... 42

Figura 22 - Questionamento sobre as cores .......................................... 43

Figura 23 - Facilidade para adicionar itens ao pedido ........................... 43

Figura 24 - Facilidade em finalizar o pedido .......................................... 44

Figura 25 - Facilidade para cadastrar novo endereço de entrega .......... 44

Figura 26 - Facilidade de compreensão dos ícones dos sitema ............ 45

Figura 27 – Nível de satisfação ............................................................. 45

Figura 28 - Comparativo entre o padrão de cores da marca e do aplicativo

............................................................................................................... 48

Figura 29 - Comparativo entre layout antigo e novo .............................. 49

Page 9: Avaliação de Design de Interação para Aplicativo Móvel

Figura 30 - Comparativo entre menu de bebidas ................................... 50

Figura 31 - Nova página inicial .............................................................. 51

Figura 32 - Menu de configurações ....................................................... 52

Figura 33 - Comparativo entre página de seleção de entrega antiga e nova

............................................................................................................... 53

Figura 34 - Conjunto de páginas com as recomendações propostas .... 54

LISTA DE QUADROS

Quadro 1– Técnicas de coleta de dados ............................................... 24

Page 10: Avaliação de Design de Interação para Aplicativo Móvel

Sumário

1. Introdução ........................................................................................ 10

1.1 Objetivos ................................................................................... 11

1.1.1 Objetivo Geral ..................................................................................................... 11

1.1.2 Objetivos específicos .................................................................................................. 11

1.2 Estudo de Caso ......................................................................... 12

1.3 Metodologia de Pesquisa .......................................................... 14

2. Design de Interação ......................................................................... 14

3. Avaliação de Interface ..................................................................... 17

3.1 Heurísticas de Usabilidade ........................................................... 17

3.2 Regras de Ouro ............................................................................ 19

3.3 Técnicas de avaliação de interface .............................................. 20

4. Metodologia ...................................................................................... 26

4.1 Levantamento dos Requisitos ...................................................... 26

4.2 Análise da Interface ...................................................................... 27

4.2.2 Heurísticas de Usabilidade .................................................................................. 27

4.2.3 Regras de Ouro .................................................................................................... 36

4.2.4 Questionário com usuários ................................................................................. 40

5. Apresentação e discussão dos resultados ................................... 46

5.1 Recomendações .......................................................................... 48

6. Considerações finais ....................................................................... 55

Referências .......................................................................................... 56

APÊNDICE A ......................................................................................... 57

Page 11: Avaliação de Design de Interação para Aplicativo Móvel

10

1. Introdução

O lançamento do iPhone em 2007, primeiro smartphone da Apple, foi algo

que redefiniu a forma como nós interagimos com um aparelho móvel. O seu

maior diferencial era a ausência de teclado, todas as ações eram feitas na sua

tela touchscreen.

Em 2008 foi lançada a App Store, loja de aplicativos do iPhone, onde é

possível adquirir vários tipos de aplicações. No mesmo ano o Google lançou seu

próprio sistema para smartphones conhecido como Android e sua loja de

aplicativos, a Android Market, que se tornou Google Play em 2012.

Alguns dos fatores responsáveis para a grande popularidade dos

smartphones é o seu alto nível de customização e a grande variedade de

aplicativos desenvolvidos para atender diversos tipos de necessidades. Segundo

o site do Tecmundo (Figura 1) no primeiro trimestre de 2016 o Brasil apareceu

em terceiro lugar em número de downloads combinados entre as plataformas do

Google e da Apple.

Figura 1 - Dados de downloads de aplicativos

Fonte: https://www.tecmundo.com.br/android/104155-brasil-terceiro-pais-baixa-apps-android-

ios.htm (2016)

Page 12: Avaliação de Design de Interação para Aplicativo Móvel

11

Analisando essas informações podemos constatar o sucesso indiscutível

dos smartphones e de seus aplicativos, que acabam atraindo cada vez mais

usuários, como também empresas dispostas em investir nessa plataforma e

conquistar novos públicos.

Com todo esse crescimento expressivo, também podemos imaginar que

nem todos os aplicativos desenvolvidos atendem aos princípios de usabilidade

sugeridos por Nielsen (1995).

Para Norman (2010) as inovações tecnológicas devem facilitar as nossas

vidas e não tornar a experiência de uso algo estressante ou frustrante. Para isso

é fundamental que os designers coloquem o fator humano como algo central na

configuração de seus projetos, é preciso entender as necessidades, forma de

pensar e de agir do usuário, para assim desenvolver uma solução adequada.

Deste modo, este projeto de graduação propõe uma análise com o

objetivo de identificar, junto aos usuários, problemas de design relacionados a

usabilidade encontrados no aplicativo da Casa da Esfiha Delivery, como também

sugerir as devidas melhorias que devem ser feitas para corrigir os mesmos.

1.1 Objetivos 1.1.1 Objetivo Geral

Avaliar o aplicativo móvel da Casa da Esfiha Delivery de acordo com os

fundamentos do design de interação.

1.1.2 Objetivos específicos

a) Identificar os principais problemas de usabilidade, através de análise

heurística, focus-group e questionários;

b) Apresentar recomendações que podem resolver os problemas de

usabilidade encontrados.

Page 13: Avaliação de Design de Interação para Aplicativo Móvel

12

1.2 Estudo de Caso

A Casa da Esfiha é uma lanchonete bem popular na cidade de Caruaru,

Pernambuco. Está no mercado há mais de 10 anos e ao final de 2015 resolveu

adotar um aplicativo móvel para Android, com o nome de “Casa da Esfiha

Delivery”.

O aplicativo veio como solução para sanar um dos problemas que o

empreendimento enfrentava, a baixa eficiência do delivery pela falta de estrutura

para atender aos pedidos por telefone. A proposta do aplicativo é que o usuário

realize o seu pedido de forma rápida, prática e segura pelo smartphone.

Figura 2 Tela de cadastro do aplicativo.

Fonte: Autor

Page 14: Avaliação de Design de Interação para Aplicativo Móvel

13

Figura 3 Telas do aplicativo

Fonte: Autor

Pelo aplicativo é possível consultar o cardápio, preços, cadastrar

endereços para entrega, fazer e visualizar o status do pedido.

Figura 4 Tela de finalização do pedido.

Fonte: Autor

Page 15: Avaliação de Design de Interação para Aplicativo Móvel

14

1.3 Metodologia de Pesquisa

Este projeto consiste em uma pesquisa aplicada, de caráter exploratório,

que desenvolverá conhecimento prático que poderá ser utilizado para

aperfeiçoar o objeto de estudo.

Dessa forma, os resultados serão apresentados em forma de dados

qualitativos e quantitativos, a partir da coleta de informações de fontes primárias

e secundárias, incluindo revisão bibliográfica, além de entrevistas, questionários

e estudo de caso.

A pesquisa consistirá, em primeiro lugar, da revisão bibliográfica, para

gerar embasamento teórico para que sejam aplicadas as técnicas de pesquisa

de campo. A aplicação dos instrumentos de pesquisa de campo poderá ser feita

pessoalmente ou através de meios de contato digitais. Como ferramentas

materiais, foram utilizados: 1. Questionário para levantamento de dados; 2.

Smartphone, para testes do aplicativo; 3. Notebook, para registro dos

questionários realizados e tabulação dos dados.

Os dados qualitativos e quantitativos serão apresentados juntamente a

uma análise direcionada e embasada teoricamente, com o propósito de cumprir

com os objetivos aqui propostos.

2. Design de Interação

Com a popularização dos computadores, smartphones e internet, vários

termos acabaram se tornando mais comuns no nosso vocabulário: interface,

experiência do usuário, design, interação, usabilidade e outros. E tudo isso está

ligado de alguma forma ao “design de interação”.

Mas afinal o que é “design de interação”? Do que se trata e para que

serve? De forma simples podemos dizer que o design de interação é área do

design responsável por criar o equilíbrio entre o uso e a função de um sistema.

Como afirma Norman (2010), quando interagimos com uma máquina, na

verdade estamos iniciando um diálogo através de uma interface e o resultado

dessa interação pode ser a frustração ou satisfação de acordo com o retorno que

recebemos.

Alguns dos questionamentos levantados por Preece (2005) são: qual

quantidade de artefatos interativos que nós utilizamos durante o dia? Quantos

Page 16: Avaliação de Design de Interação para Aplicativo Móvel

15

deles são fáceis e agradáveis de usar? Após refletir sobre esse questionamento,

podemos perceber que problemas de usabilidade são comuns e bem recorrentes

durante o nosso dia e que muitas vezes não nos damos conta de como um bom

design é importante.

Ainda de acordo com Preece (2005), uma preocupação central do design

de interação é desenvolver produtos interativos que sejam fáceis de aprender,

eficazes no uso e que proporcionem uma experiência agradável ao usuário.

“Winograd (1997) descreve o design de interação como “projeto de espaços para

comunicação e interação humana”” (apud PREECE, 2005, p.28).

Figura 5 Relação de disciplinas, práticas de design e design de interação.

Fonte: Adaptado de Preece (2005, p.29).

De acordo com a figura acima, podemos perceber a quantidade de áreas

que interagem de forma direta ou indireta com o design de interação. Até este

ponto entendemos o conceito do design de interação e com quais áreas do

conhecimento ele tem relação. Mas como o design de interação realmente

funciona? Quais são as áreas que estão envolvidas? Como é o seu processo de

design?

Page 17: Avaliação de Design de Interação para Aplicativo Móvel

16

Essencialmente, o processo de design de interação envolve

quatro atividades básicas:

• Identificar necessidades e estabelecer requisitos.

• Desenvolver designs alternativos que preencham esses

requisitos.

• Construir versões interativas dos designs, de maneira que

possam ser comunicados e analisados.

• Avaliar o que está sendo construído durante o processo.

(PREECE, 2005, p. 29).

Estas etapas devem ser complementares umas às outras e que sejam

sempre repetidas. O processo de avaliação merece uma atenção especial e deve

ser feito sempre que possível, para isso existem várias técnicas que podemos

utilizar: observação, questionário, entrevistas e testes de usabilidade.

Um dos conceitos que está internamente ligado ao design de interação é

o conceito da usabilidade. “A norma ISSO 9241-11, define usabilidade como: a

efetividade, a eficiência e a satisfação com que os usuários específicos atingem

objetivos específicos em ambientes particulares”. (PORTAL E EDUCAÇÃO,

2013). Podemos concluir que para um bom design é fundamental que o mesmo

possua uma boa usabilidade, e para determinar isso Preece (2005) sugere

algumas metas de usabilidade:

• Ser eficaz no uso. (Eficácia)

• Ser eficiente no uso. (Eficácia)

• Ser segura no uso. (Segurança)

• Ser de boa utilidade. (Utilidade)

• Ser de fácil aprender. (Learnability)

• Ser fácil de lembrar. (Mentorability)

Page 18: Avaliação de Design de Interação para Aplicativo Móvel

17

De forma complementar aos conceitos apresentados acima, podemos

analisar a forma como Nielsen (1993), dividiu a usabilidade em 5 critérios

básicos, que serão listados abaixo:

• Intuitividade – O sistema deve apresentar uma interface simples

de ser utilizada, para que até mesmo um usuário sem experiência

o utilize de maneira satisfatória.

• Eficiência – O sistema deve ser eficiente e altamente produtivo.

• Memorização – O sistema deve conter telas simples e fáceis de

memorizar, para que até mesmo usuários casuais se sintam

familiarizados durante a navegação.

• Erro – A quantidade de erros apresentadas deve ser o mínimo

possível, além disso eles devem apresentar soluções simples.

• Satisfação – O sistema deve agradar ao usuário, sejam eles

iniciantes ou avançados.

3. Avaliação de Interface

Hoje ainda é muito comum que aplicativos móveis falhem em apresentar

informações básicas para os usuários. Isso muitas vezes acontece porque seus

desenvolvedores não consideraram alguns tipos de usuários, não seguiram

critérios ou não realizaram testes com os seus usuários. Dependendo da

complexidade da interface se torna impossível que o seu projetista imagine todas

as possibilidades de uso, quais são as principais necessidades dos usuários e

quais os principais problemas durante o uso da interface.

3.1 Heurísticas de Usabilidade

Para evitar que problemas simples se tornem tão recorrentes, Nielsen

(1995), um dos nomes mais importantes para as áreas de IHC e usabilidade,

propõe 10 Heurísticas de Usabilidade, que serão listadas abaixo:

Page 19: Avaliação de Design de Interação para Aplicativo Móvel

18

• Visibilidade de qual estado estamos no sistema – O

sistema deve informar em tempo real o que está acontecendo.

Ex.: Em um player de música, ele deve exibir informações sobre

qual música está tocando, a próxima música e qual a playlist ou

álbum está sendo tocado.

• Correspondência entre o sistema e o mundo real –

Utilizar formas, cores e sons que tenham alguma

correspondência com o mundo real para reforçar a

comunicação. Ex.: Utilizar uma lupa para função de busca.

• Liberdade de controle fácil para o usuário – O sistema

deve permitir que o usuário tenha liberdade para executar ou

cancelar ações dentro da plataforma de forma simples. Ex.:

Utilizar o botão voltar para cancelar ou fechar alguma tarefa.

• Consistência e Padrões – É importante que a interface

seja coerente com relação a sua apresentação gráfica. Manter

um mesmo padrão de cores, formas, tipos e sons.

• Prevenção de erros – Evitar situações de erro. Corrigir o

sistema para que erros já conhecidos não voltem a ocorrer.

• Reconhecimento em vez de memorização – O sistema

deve exibir para o usuário o caminho que ele percorreu até

chegar a página atual. Ex.: Fóruns online que exibem quais

categorias o usuário clicou até chegar na postagem atual.

• Flexibilidade e eficiência de uso – A experiência de uso

deve ser agradável para usuários leigos e avançados. Ex.: No

iPad é possível minimizar um aplicativo utilizando o botão de

retorno ou para um usuário mais experiente, a mesma função

pode ser realizada com um gesto de fechamento (utilizando

todos os dedos da mão) na tela.

• Estética e design minimalista – A interface deve ser clean e

direta, o excesso de informações pode gerar mais dúvida do que

ajudar o usuário.

• Ajude os usuários a reconhecerem e se recuperarem de

erros – As mensagens de erro devem ser claras e indicar de

forma prática o que causou o erro. Ex.: No momento de um

cadastro o aplicativo informa em vermelho que algum dos

caracteres digitados não é permitido.

Page 20: Avaliação de Design de Interação para Aplicativo Móvel

19

• Ajuda e documentação – Muitos usuários tendem a ignorar os

avisos de ajuda do sistema, por isso é recomendado que a

informação de ajuda fique próxima ao campo que o usuário

realizará a ação. Ex.: Em cadastros é muito comum que os sites

ou aplicativos coloquem um ícone de interrogação, contendo

mais informações sobre aquele campo que deve ser preenchido.

Seguindo as heurísticas listadas acima é possível identificar e resolver os

problemas mais básicos, relacionados à interface de qualquer tipo de interface.

3.2 Regras de Ouro

De acordo com Cybis (2007, p. 24)

“Outro autor conhecido na área, Ben Shneiderman, propõe oito

“regras de ouro” para o projeto e avaliação de interfaces em seu

livro clássico Designing the user interface (SHNEIDERMAN &

PLAISANT, 2004):

• Perseguir a consistência;

• Fornecer atalhos;

• Fornecer feedback informativo;

• Marcar o final de diálogos;

• Fornecer prevenção e manipulação simples de erros;

• Permitir o cancelamento de ações;

• Fornecer controle e iniciativa do usuário;

• Reduzir a carga de memória de trabalho.

De forma mais detalha podemos entender essas regras como:

• Perseguir a consistência – O sistema deve seguir

sequências lógicas e consistentes para tarefas similares;

Padronização de cores, formas, tipografias.

Page 21: Avaliação de Design de Interação para Aplicativo Móvel

20

• Fornecer atalhos – Perceber as diferenças entre os

diversos tipos de usuários e fornecer formas mais eficientes de

realizar ações para os usuários mais experientes.

• Fornecer feedback informativo – A cada ação do

usuário, o sistema deve gerar um feedback. Para várias ações

ou sem muita importância esse feedback pode ser mais simples.

• Marcar o final de diálogos – Como uma conversa, os

diálogos devem ser estruturados com um começo, meio e fim. O

feedback da conclusão de um conjunto de ações gera sensação

de satisfação para o usuário.

• Fornecer prevenção e Manipulação simples de erros –

É importante que o sistema evite que o usuário cometa erros e

caso eles ocorram, o sistema deve informar de maneira simples

e direta como corrigir.

• Permitir cancelamento de ações – Sempre que possível,

as ações realizadas devem ser reversíveis. Isso permite que o

usuário explore o sistema com mais tranquilidade, sabendo que

qualquer ação poderá ser desfeita, caso ele queira.

• Fornecer controle e iniciativa do usuário – Usuários

experientes gostam de ter a sensação que estão no controle.

• Reduzir a carga de memória do trabalho – Reduzir o

número de informação que o usuário terá que memorizar de uma

tela para a outra deixa a navegação mais satisfatória para o

usuário.

3.3 Técnicas de avaliação de interface

Uma das etapas mais recorrentes no processo de design de interface é o

processo de avaliação, que em complemento as regras citadas anteriormente,

nos fornece informações mais aprofundadas sobre os requisitos, necessidades

e frustrações que o usuário pode apresentar durante a interação com o produto.

Seja qual for a situação e o objetivo do projeto, as necessidades,

os requisitos, as aspirações e as expectativas do usuário têm

que ser discutidas, aperfeiçoadas, esclarecidas e seu escopo

redefinido. Isso exige um entendimento de, entre outras coisas,

Page 22: Avaliação de Design de Interação para Aplicativo Móvel

21

usuários e suas capacidades, suas atividades e metas atuais, as

condições sob as quais o produto será utilizado e as restrições

em seu desempenho. (PREECE, 2005, p.221)

Para Preece (2005), entender os requisitos e necessidades do usuário

são fatores essenciais para um design de interface bem-sucedido. Os requisitos

citados aqui, são um conjunto de funções que o sistema executa para atender

as necessidades dos usuários. Identificar as necessidades do usuário não é uma

tarefa tão simples.

Mesmo no caso de existir um conjunto de requisitos iniciais, será

exigido que a coleta de dados expanda, esclareça e confirme

esses requisitos iniciais. Ela necessita abarcar um vasto

espectro de questões, visto que os tipos diferentes de requisitos

que precisamos estabelecer são bastante variados, como vimos

anteriormente. (PREECE, 2005, p.230)

Podemos utilizar diversas técnicas para realizar a coleta de dados, cada

uma delas foca em um aspecto determinado e nos ajudam a ter um entendimento

dos requisitos. Abaixo estão listadas as técnicas descritas por (PREECE, 2005,

p. 231 a 234):

Questionários - A maioria de nós está familiarizada com

questionários. Trata-se de uma série de questões

projetadas a fim de obter informações específicas das

pessoas. Tais questões podem exigir diferentes tipos de

respostas: algumas requerem apenas um SIM/NÃO, outras

nos pedem para escolher entre um conjunto de respostas

preestabelecidas e outras solicitam um comentário ou uma

resposta mais longa. Algumas vezes, os questionários são

enviados em formato eletrônico e chegam via e-mail, ou

são postos em um website, e algumas vezes nos são

dados em papel. Na maioria dos casos, o questionário é

Page 23: Avaliação de Design de Interação para Aplicativo Móvel

22

administrado à distância, isto é, ninguém está lá para

ajudá-lo a responder às perguntas ou para explicar o que

significam.

Entrevistas – Implicam fazer várias perguntas a alguém.

Em geral se dão face a face, ainda que não

necessariamente. As empresas gastam grandes quantias

de dinheiro entrevistando seus clientes por telefone,

tentando descobrir do que gostam e do que não gostam

com relação aos serviços da empresa. Se entrevistados em

seu próprio ambiente de trabalho ou casa, os indivíduos

podem consideram mais fácil falar sobre suas atividades,

mostrando ao entrevistador o que fazem e que sistemas ou

outros artefatos utilizam. O contexto pode também leva-los

a entender certas coisas (por exemplo: um problema que

tiveram para descarregar uma mensagem) de que não

lembrariam caso a entrevista tivesse sido conduzida em

outro local. As entrevistas podem ser amplamente

classificadas como estruturadas, não-estruturadas ou

semi-estruturadas, dependendo de quão rigorosamente o

entrevistador se atém a um conjunto programado de

perguntas.

Grupos de estudo específicos (focus group) e

workshops – As entrevistas tendem a ser individuais e

mostram apenas a perspectiva de uma pessoa. Como

alternativa ou corroboração, pode ser muito revelador

reunir um grupo de stakeholders para discutir questões de

requisitos. Essas sessões podem ser estruturadas com

tópicos estabelecidos para discussão, ou podem mesmo

não ser estruturadas. Neste último caso, um facilitador que

possa guiar a discussão e fornecer o foco ou o

redirecionamento quando apropriado faz-se necessário.

Em alguns métodos de desenvolvimento, as oficinas

tornaram-se muito formalizadas. No que diz respeito à

atividade de identificação de requisitos, os grupos de

Page 24: Avaliação de Design de Interação para Aplicativo Móvel

23

estudo específicos (focus group) e os workshops são úteis

para oferecer uma visão consensual e/ou ressaltar áreas

de conflito e discordância.

Observação natural – Pode ser muito difícil para os seres

humanos explicar o que fazem ou mesmo descrever

precisamente como realizam uma tarefa. É muito pouco

provável que um designer obtenha uma história completa

e verdadeira acerca dos stakeholders utilizando qualquer

uma das técnicas que descrevemos aqui. Os cenários e

outros apoios utilizados nas entrevistas e workshops irão

ajudar a preparar as pessoas para serem mais precisas em

suas descrições; a observação, porém, fornece uma visão

mais rica: implica passar algum tempo com o stakeholders

enquanto realizam suas tarefas diárias, observando o

trabalho como ele realmente acontece, em seu ambiente

natural. Um membro da equipe de design segue de perto

um deles (“como que uma sombra”), tomando notas,

fazendo perguntas (mas não muitas) e observando o que

está sendo feito no contexto natural da atividade. Essa é

uma maneira muito valiosa de se obter “insights” que

podem complementar outras investigações.

Estudo da documentação – Procedimentos e regras são

frequentemente escritos em manuais e constituem-se em

boas fontes de dados sobre os passos envolvidos em uma

atividade e as regulamentações que governam

determinada tarefa. Tal documentação, no entanto, não

deveria ser utilizada como única fonte, pois as práticas

diárias poderiam aumentar o número de fontes, já que

podem ter sido pensadas por pessoas concentradas em

fazer os procedimentos funcionarem em um ambiente

prático. Dispor de uma abordagem para desenvolvimento

centrada no usuário implica estarmos interessados nas

práticas diárias, e não em algo idealizado. Uma outra

documentação que pode ser estudada inclui diários ou logs

Page 25: Avaliação de Design de Interação para Aplicativo Móvel

24

de trabalho escritos por stakeholders durante o curso de

sua atividade. Na atividade de identificação de requisitos,

estudar a documentação é útil para entender a legislação

e obter algumas informações acerca do background do

trabalho. Tal procedimento também não compromete o

tempo do stakeholder, o que constitui um fator limitante em

outras técnicas.

Quadro 1 – Técnicas de coleta de dados

Fonte: Adaptado de Preece (2005, p.235).

Após determinar e entender os requisitos da interface, devemos seguir para a

próxima etapa da avaliação e nos aprofundar na forma como os usuários interagem com

o sistema. Segundo Preece (2005) durante esta etapa, devemos observar, ouvir e

Page 26: Avaliação de Design de Interação para Aplicativo Móvel

25

questionar os usuários, para entendermos o seu contexto, o que fazem e quão bem a

tecnologia os atendem.

As técnicas descritas por Preece (2005) podem ser dividas em:

Observação Direta – Essa técnica pode ser aplicada de diferentes

formas, os usuários podem ser observados em seu ambiente de trabalho,

casa ou em um ambiente controlado. Combinada com a técnica de

observação pode ser realizado um teste de usabilidade em campo ou em

ambiente controlado, sendo gravado ou com algum tipo de dispositivo

que capture a tela, para que seja feita uma análise mais detalhada das

tomadas de decisão do usuário durante a realização do teste. O avaliador

pode estar presente ou não.

Observação Indireta – Em casos que a observação direta não é

possível, deve-se recorrer a observação indireta. Algumas das vantagens

desse tipo de avaliação é o seu custo e a possibilidade que vários

usuários participem ao mesmo tempo, já que os logs de interação ficam

salvos para a análise.

Entrevistas – As entrevistas podem ser divididas em estruturadas, semi-

estruturadas, não-estruturadas e entrevista em grupo. Embora se

apresentem de diferentes formas, todas as formas de entrevistas

possuem um objetivo em comum, o de adquirir dados diretamente com o

usuário. Podemos utilizar as entrevistas em conjunto com as outras

técnicas. Devemos tentar o máximo de objetividade, com perguntas

curtas e claras, para evitar confusão ou que as respostas sejam

influenciadas de alguma forma.

Questionários – Os questionários são uma técnica bem estabelecida de

coleta de dados. Os questionários podem conter perguntas abertas,

fechadas ou de múltipla escolha. Os questionários podem ajudar na

coleta de dados demográficos e a traçar uma persona dos usuários. É

importante que o questionário tenha coerência e as escalas estejam de

acordo com a pergunta. O questionário deve conter informações claras

acerca de como deve ser respondido.

Page 27: Avaliação de Design de Interação para Aplicativo Móvel

26

4. Metodologia

Iniciaremos aqui a definição e discussão da metodologia que direcionou

esta pesquisa e guiou a forma como o objeto de estudo foi avaliado.

A base desta metodologia será uma adaptação, baseada nas atividades

apresentadas por Preece (2005) sobre o processo de design de interação.

Figura 6 – Fases, técnicas e objetivos da metodologia.

Fonte: Autor

4.1 Levantamento dos Requisitos

Para fazer o levantamento dos requisitos do aplicativo, foi promovido um

focus group com 6 profissionais das áreas de design, publicidade e tecnologia

da informação.

Foi realizado um pequeno debate, que durou cerca de 15 minutos, onde

os participantes foram convidados a expor suas expectativas sobre o aplicativo,

quais funções ele deveria realizar e o que poderia ser implementado para

melhorar a experiência de uso dos usuários.

Page 28: Avaliação de Design de Interação para Aplicativo Móvel

27

O grupo apresentou uma lista com as funções que eles consideraram mais

importantes, ao final do processo as funções mais recorrentes foram agrupadas.

Os principais requisitos presentes no aplicativo são:

• Função pedido;

• Consulta de cardápio e preços;

• Consulta do status do pedido.

As principais funções sugeridas foram:

• Página de contato;

• Consulta de horários de funcionamento;

• Chat para dúvidas. 4.2 Análise da Interface

Durante esta etapa foram feitas avaliações utilizando as “10 Heurísticas

de Usabilidade” desenvolvidas por Nielsen (1995) e as “8 Regras de Ouro”

propostas por Shneiderman e Plaisant (2004).

4.2.2 Heurísticas de Usabilidade

Ao analisar uma interface é preciso avaliar quão adaptada ela está ao

usuário. Podemos verificar isto através de uma Análise Heurística.

Uma heurística resume um dos problemas de usabilidade que uma

interface pode apresentar, prevendo situações em que a interface se torna difícil

ou complicada de utilizar. As “10 Heurísticas de Usabilidade” desenvolvidas por

Jakob Nielsen, tem o objetivo de representar os principais problemas que uma

interface genérica pode apresentar, por isso vamos fazer um “checklist” e listar

os problemas encontrados.

Page 29: Avaliação de Design de Interação para Aplicativo Móvel

28

4.2.2.1 Visibilidade em qual estado do sistema estamos

Como podemos perceber abaixo, quando estamos no menu lateral e na

página inicial a interface não apresenta com clareza em qual página atualmente.

Figura 7 - Menu lateral, tela inicial e menu de bebidas

Fonte: Autor

Após prosseguir para qualquer um dos menus da tela inicial, a interface

indica em qual dos menus nós estamos, com descrições claras de cada menu.

Page 30: Avaliação de Design de Interação para Aplicativo Móvel

29

Figura 8 - Menu bebidas, meu carrinho e finalizar pedido

Fonte: Autor

4.2.2.2 Correspondência entra o sistema e o mundo real

Figura 9 - Menu lateral, ícones do sistema

Fonte: Autor

Na tela acima podemos perceber um par de setas em movimento dando

a ideia de movimento circular, apesar de não ter nenhuma ligação com alguma

representação real, esse ícone está muito ligado com situação de carregamento

ou atualizar página. Ao lado vemos um carrinho de compras que está

Page 31: Avaliação de Design de Interação para Aplicativo Móvel

30

representando o menu de mesmo nome, conseguimos perceber uma boa

relação entre o ícone, sua representação real e a função que ele exerce dentro

da plataforma.

Abaixo dos itens anteriormente descritos, podemos observar mais 3

ícones. O primeiro deles é o carrinho de transporte, que está muito associado

aos carrinhos utilizados por transportadoras de encomendas, podemos

compreender uma boa relação entre ícone e função aqui. O próximo ícone é um

tipo de placa que vemos comumente em ruas, estradas e rotas, dentro do

aplicativo ele representa o menu de gerenciamento de endereços, sendo uma

representação adequada. Por último temos o ícone de “lista”, representando o

menu de pedidos já realizados, sua aplicação está de acordo e consegue

carregar bem o significado pretendido.

Figura 10 - Ícones do sistema

Fonte: Autor

O ícone de carrinho, já descrito anteriormente, representa de forma clara

o atalho para o cancelamento do pedido, em boa parte das interfaces o “X” é

empregado com a função de fechamento, cancelamento, encerramento e afins.

O lápis ou caneta, geralmente está ligado ao recurso de edição das

plataformas, mesmo não tendo uma relação direta com a função que realizam,

muitos usuários são familiares ao emprego deste ícone.

A utilização dos ícones de adição e subtração consegue explicar de forma

clara e objetiva como o usuário deve proceder para adicionar ou remover itens

do seu pedido, um ponto negativo que pode ser levantado, é o fato da não

Page 32: Avaliação de Design de Interação para Aplicativo Móvel

31

utilização de cores para reforçar ainda mais a ideia dos ícones, verde para adição

e vermelho para subtração.

De forma geral os ícones são coerentes e bem aplicados ao sistema,

apenas alguns deles exigem certa familiaridade, o que pode complicar a

experiência de uso para alguns usuários menos experientes, mas não é nada

que provoque de forma muito grave o uso.

4.2.2.3 Liberdade de controle fácil para o usuário

O sistema oferece formas simples e rápidas para adicionar ou remover

itens de um pedido. Até o momento da finalização é muito simples editar ou

cancelar o pedido a partir de qualquer tela.

Foi identificado uma complicação desnecessária no momento da escolha

do endereço caso o usuário necessite escolher um endereço diferente do que foi

cadastrado previamente, pois não existe nenhuma forma rápida de editar ou

adicionar um novo endereço, sendo necessário retornar ao menu de “meus

endereços” e cadastrar o novo endereço.

4.2.2.4 Consistência e padrões

O aplicativo possui um padrão consistente na repetição de cores, fontes,

formas e ícones. As únicas situações onde o padrão é quebrado, são quando

utilizamos o botão para atualizar a página ou alguma das páginas do menu lateral

está carregando. Nesses momentos é possível ver ícones e caixas de diálogo

que são padrões do sistema Android e destoam do resto da interface.

4.2.2.5 Reconhecimento em vez de memorização

Não existe nenhuma informação que auxilie o usuário a identificar os

caminhos percorridos através dos menus, talvez isso aconteça pelo fato do

aplicativo não apresentar uma navegação tão complexa ou um grande esquema

de páginas e subpáginas. Por outro lado, o botão do carrinho de compras sempre

está visível e de fácil acesso para que o usuário possa consultar o seu pedido

sempre que desejar.

Page 33: Avaliação de Design de Interação para Aplicativo Móvel

32

4.2.2.6 Prevenções de erros

Por ser uma plataforma bastante fechada, grande parte das ações

realizadas pelo usuário são baseadas na seleção de itens, navegação pelos

menus e confirmações. Não identificamos nenhuma possibilidade de erro

durante as ações citadas anteriormente, apenas nas etapas em que é necessário

que o usuário faça uma entrada de texto, como por exemplo na hora de cadastrar

um novo endereço.

4.2.2.7 Flexibilidade e eficiência de uso

Para o usuário iniciante podemos classificar os atalhos disponíveis como

satisfatórios, de forma que conseguem atender as necessidades básicas de

consultar e cancelar o pedido.

Um dos principais problemas encontrados afeta principalmente os

usuários mais experientes e frequentes, que utilizam o aplicativo em vários

ambientes como por exemplo na casa dos amigos e tem a necessidade de estar

constantemente cadastrando novos endereços, poderia ser criado um botão

para cadastro de endereço no momento da finalização do pedido, para facilitar o

acesso e diminuir os passos necessários caso o usuário tenha esquecido de

cadastrar o novo endereço pelo menu lateral na página inicial.

4.2.2.8 Estética e design minimalista

Aqui podemos destacar uma série de problemas relacionados ao design

do aplicativo como:

• Cores fortes e vibrantes em todas as páginas;

• Excesso de elementos;

• Diagramação deficiente e elementos mal dimensionados;

• Ausência de imagens ilustrativas.

Page 34: Avaliação de Design de Interação para Aplicativo Móvel

33

Figura 11 - Página de produto

Fonte: Autor

Page 35: Avaliação de Design de Interação para Aplicativo Móvel

34

4.2.2.9 Ajude os usuários a reconhecerem, diagnosticarem e

recuperarem-se de erros

Durante o cadastro de endereço podemos perceber que o sistema sinaliza

e informa de maneira clara o erro que está acontecendo.

Figura 12 - Cadastro de endereço

Fonte: Autor

Page 36: Avaliação de Design de Interação para Aplicativo Móvel

35

Um detalhe observado durante essa heurística foi a falta de padrão entre

as apresentações de erro dentro da mesma página, como podemos notar abaixo.

Figura 13 - Cadastro de endereço, sinalização de erro fora do padrão

Fonte: Autor

No menu de pesquisa dentro dos menus do cardápio também podem ser

observadas notificações de erro que informam a ausência do item pesquisado

naquele menu. Em caso de erro de digitação ou de um termo em outra língua

como no caso da própria esfiha que aparece na grafia estrangeira, o usuário

receberá a mesma notificação de que o item procurado não está disponível.

4.2.2.10 Ajuda e documentação

Não foi encontrada nenhuma função de ajuda ou algum outro tipo de

função que seja compatível com está heurística, tornando esse item impossível

de ser avaliado.

Page 37: Avaliação de Design de Interação para Aplicativo Móvel

36

4.2.3 Regras de Ouro

As “Regras de Ouro” criadas por Ben Shneiderman são um conjunto de

princípios que são semelhantes em alguns aspectos as heurísticas aplicadas

anteriormente. Nesta etapa vamos focar nas regras que abordam os pontos que

não foram avaliados anteriormente ou que dão um destaque maior para algum

ponto específico.

4.2.3.1 Fornecer atalhos

De forma geral não existem atalhos na interface, não existem gestos ou

botões que facilitem a navegação entre páginas, e em alguns casos é necessário

refazer todos os passos para chegar a um determinado menu.

4.2.3.2 Fornecer feedback informativo

Sempre que um item é adicionado ao pedido, uma caixa de diálogo surge

para sinalizar ao usuário que a ação foi realizada com sucesso.

Figura 14 - Feedback ao adicionar um item ao carrinho

Fonte: Autor

Page 38: Avaliação de Design de Interação para Aplicativo Móvel

37

4.2.3.3 Marcar o final de diálogos

É fundamental que o sistema apresente com clareza o final de cada etapa.

Sinalizar a conclusão de um processo ou etapa gera uma sensação de satisfação

no usuário com a conclusão da tarefa.

Figura 15 - Chamada de ação ao final de cada página

Fonte: Autor

O aplicativo apresenta enunciados claros para o botão de finalização de

cada etapa durante o processo de cadastro, pedido e compra.

4.2.3.4 Permitir o cancelamento de ações

Dar a sensação ao usuário de que ele tem controle total de suas ações é

algo bastante positivo, pois dá confiança para que o usuário explore a interface

e não tenha medo de realizar ações por não saber como revertê-las. O aplicativo

oferece várias formas de cancelar as ações do usuário, por exemplo quando se

utiliza a seta de retorno ou o retorno do próprio smartphone o aplicativo

desconsidera todas as ações e entradas de texto realizadas no menu anterior.

Page 39: Avaliação de Design de Interação para Aplicativo Móvel

38

Figura 16 - Entrada de texto na barra de pesquisa

Fonte: Autor

Acima podemos cancelar a entrada de texto simplesmente clicando no “x”

localizado próximo ao texto.

Page 40: Avaliação de Design de Interação para Aplicativo Móvel

39

Figura 17 - Editando pedido no carrinho

Fonte: Autor

No carrinho também é muito simples remover itens adicionados

acidentalmente, alterar a quantidade ou cancelar completamente o pedido.

Page 41: Avaliação de Design de Interação para Aplicativo Móvel

40

4.2.4 Questionário com usuários

Nessa etapa foram realizados questionários com os usuários, com o

objetivo de averiguar quais problemas os usuários se queixam com relação ao

uso do aplicativo.

Antes de iniciar o questionário, foi solicitado que os usuários realizassem

um conjunto de tarefas, para que os mesmos tivessem certeza sobre quais

respostas seriam mais adequadas para cada uma das perguntas de acordo com

a sua experiência de uso. As tarefas solicitadas foram as seguintes:

• Observar e navegar livremente pela interface;

• Adicionar um ou mais itens ao seu pedido;

• Navegar pelas etapas de finalização do pedido;

• Alterar o endereço da entrega;

• Remover ou cancelar o pedido.

Após realizar as tarefas listadas acima os usuários responderam um

questionário com 13 questões, com perguntas sobre o seu nível de familiaridade

e experiência com smartphones, afirmações sobre a interface, qual seu nível de

satisfação no uso e sugestões de melhorias para o aplicativo. O questionário

contém 12 perguntas de múltipla escolha com enunciados curtos e objetivos,

para facilitar o entendimento e resposta. Ao final do questionário existia uma

pergunta aberta, caso o usuário desejasse, poderia sugerir algo que em sua

opinião poderia contribuir para experiência de uso.

Foram coletadas respostas de 18 usuários, apesar de ser um número

reduzido, segundo Nielsen (1993), quanto mais testes com usuários nós

fazemos, maior é a chance de continuarmos a encontrar os mesmos problemas

de usabilidade.

Page 42: Avaliação de Design de Interação para Aplicativo Móvel

41

Figura 18 - Estrutura das perguntas

Fonte: Autor

4.2.4.1 Resultados dos questionários

Nesta etapa vamos explorar e apresentar os dados que oferecem maior

relevância para o nosso objetivo, os resultados completos desse questionário

podem ser vistos no apêndice A.

Figura 19 – Experiência do usuário com smartphones

Fonte: Autor

Entender o nível de experiência que os usuários têm com a plataforma,

nos ajuda a compreender se os problemas de usabilidade encontrados estão

ligados a falta de experiência dos usuários e a falta de recursos de ajuda dentro

da plataforma. Podemos perceber que quase 90% dos usuários não se

consideram iniciantes.

Page 43: Avaliação de Design de Interação para Aplicativo Móvel

42

Figura 20 – Facilidade de navegação

Fonte: Autor

Uma parte bastante expressiva considera que a navegação do aplicativo

é satisfatória e fácil de compreender. Esse número está associado com a

simplicidade da estrutura de navegação, que pode ser considerada praticamente

linear.

Figura 21 - Facilidade de localizar informações

Fonte: Autor

Provavelmente influenciado pela sua estrutura e navegação simples, mais

de 55% dos usuários consideram que o acesso as informações é fácil.

Page 44: Avaliação de Design de Interação para Aplicativo Móvel

43

Figura 22 - Questionamento sobre as cores

Fonte: Autor

Neste tópico tivemos respostas bem diversificadas, mas, a grande maioria

dos usuários se mostrou insatisfeita com a paleta de cores escolhidas. Uma das

possibilidades que pode ter contribuído para isso é a larga utilização de cores

fortes e saturadas, o que pode gerar um pouco de desconforto para os usuários.

Figura 23 - Facilidade para adicionar itens ao pedido

Fonte: Autor

Neste quesito o aplicativo consegue atender aos usuários de maneira

eficiente.

Page 45: Avaliação de Design de Interação para Aplicativo Móvel

44

Figura 24 - Facilidade em finalizar o pedido

Fonte: Autor

Nesta questão vemos um alto nível de aprovação, isso acontece pelo

conjunto de fatores que foram avaliados positivamente nos tópicos anteriores,

como a navegação simplificada e a facilidade para adicionar itens ao pedido.

Figura 25 - Facilidade para cadastrar novo endereço de entrega

Fonte: Autor

Mais de 80% relataram dificuldade para cadastrar um novo endereço a

partir da tela de finalização do pedido, essa dificuldade excessiva também foi

apontada nas avaliações anteriores e validada agora com o questionário

realizado com usuários.

Page 46: Avaliação de Design de Interação para Aplicativo Móvel

45

Figura 26 - Facilidade de compreensão dos ícones dos sitema

Fonte: Autor

Uma grande parcela dos usuários não teve dificuldades para

compreender e relacionar os ícones com as funções realizadas.

Figura 27 – Nível de satisfação

Fonte: Autor

A maioria dos usuários classificou sua experiência de uso entre boa e

regular, o que nos leva a crer que não existem erros tão graves que

impossibilitem o uso, mas, também mostra que existem diversos pontos que

podem ser melhorados.

A pergunta final do questionário é “Como a sua experiência de uso poderia

ser melhorada no aplicativo?”, por se tratar de uma pergunta ampla, as respostas

Page 47: Avaliação de Design de Interação para Aplicativo Móvel

46

foram interpretadas, agrupadas e selecionadas de acordo com a recorrência de

tópicos abordados. Os temas mais recorrentes das sugestões foram:

• Melhorar apresentação e organização dos menus;

• Melhorar a paleta de cores;

• Facilitar o cadastro de endereços na finalização do pedido;

• Melhorar aparência do aplicativo;

• Utilizar fotos ilustrativas;

• Adicionar informações de contato;

• Implementar/melhorar a navegação através de atalhos.

5. Apresentação e discussão dos resultados

Após a aplicação das técnicas de avaliação e coleta de dados,

desenvolvemos uma lista com os principais problemas de usabilidade

encontrados. Também apresentaremos uma proposta solução para cada um dos

problemas apontados.

Problema 01:

Ausência de página inicial – Foi identificada uma deficiência com relação

a estruturação da navegação. Isso acontece pois não existe uma página inicial

para centralizar o fluxo de navegação e direcionar para os principais menus do

sistema.

Proposta de solução 01:

Criar uma página inicial e centralizar os menus de acesso para as demais

páginas, facilitando o acesso e tornando mais clara a lógica de navegação.

Problema 02:

Problemas de consistência e padronização – De acordo com a avaliação

baseada nas heurísticas e os questionários com usuários, identificamos que a

consistência e padronização de cores, menus e botões não consegue

proporcionar uma experiência satisfatória aos usuários.

Page 48: Avaliação de Design de Interação para Aplicativo Móvel

47

Proposta de solução 02:

Aplicar uma nova paleta de cores, utilizando os padrões da marca, mas

de uma maneira mais suave. Utilizar botões e caixas de diálogos padronizados,

para reforçar a consistência entre os menus.

Problema 03:

Problemas com a estética – Como identificado em uma das heurísticas e

apontado por alguns usuários, percebemos uma necessidade da aplicação de

um design minimalista e com elementos melhor dimensionados.

Proposta de solução 03:

Reduzir o peso dos elementos, aplicar padrões mais suaves e organizar

de forma mais eficiente os elementos visuais na tela.

Problema 04:

Ausência de atalhos – Como identificado na avaliação das heurísticas e

também apontado por usuários, encontramos uma deficiência no número de

atalhos encontrados.

Proposta de solução 04:

Criar um atalho para inserção de novos endereços de entrega na tela de

pedido e diminuir o número de etapas necessárias para acessar o conteúdo do

menu lateral.

Problema 05:

Não existem fotos para auxiliar na identificação de menus e produtos.

Alguns usuários relataram a necessidade da utilização de imagens em alguns

menus e páginas.

Proposta de solução 05:

Aplicar miniaturas com imagens, com o objetivo de facilitar o

reconhecimento de menus e páginas.

Problema 06:

Não existe uma página com as informações para contato. Alguns usuários

sentiram necessidade de um menu desse tipo.

Page 49: Avaliação de Design de Interação para Aplicativo Móvel

48

Proposta de solução 06:

Criação de um menu de fácil acesso, contendo as principais opções de

contato.

5.1 Recomendações

Após listar e determinar quais os principais problemas a serem

solucionados, a seguir, vamos apresentar layouts que atendam e representem

as propostas de solução sugeridas.

Começaremos examinando o padrão de cores para encontrar uma forma

mais eficiente e que não fuja das cores institucionais.

Figura 28 - Comparativo entre o padrão de cores da marca e do aplicativo

Fonte: Autor

Page 50: Avaliação de Design de Interação para Aplicativo Móvel

49

Comparando as cores utilizadas na marca e no aplicativo podemos

perceber uma variação entre o contraste e saturação das mesmas. Também

podemos notar uma ausência da utilização do preto. A solução proposta sugere

que o padrão da marca seja mantido, mas com uma composição mais suave.

Figura 29 - Comparativo entre layout antigo e novo

Fonte: Autor

O novo padrão de cores utiliza um vermelho menos vibrante, para tornar

a navegação mais agradável. Os botões de quantidade foram alterados,

subtração em vermelho e adição em verde, para reforçar a simbologia. As formas

preenchidas foram reduzidas e algumas foram substituídas por linhas e

contornos. A cor do botão “adicionar ao pedido” foi substituída pelo verde, para

reforçar a ideia de adição. A marca da Casa da Esfiha foi trocada por uma foto

do item da página, para evitar a repetição do mesmo padrão nas telas de

produto. O branco se tornou a cor predominante, para melhorar a legibilidade e

possibilitar uma boa leitura mesmo em telas com menos brilho.

Page 51: Avaliação de Design de Interação para Aplicativo Móvel

50

Figura 30 - Comparativo entre menu de bebidas

Fonte: Autor

A alteração do padrão de cores do menu de lista proporcionou uma

melhoria considerável da legibilidade e uma adequação no tamanho de cada

uma das células permite que um número maior de itens seja exibido na tela ao

mesmo tempo. Alguns termos também foram alterados, para manter a

consistência dos termos e siglas utilizados para comunicação. Os ícones

também sofreram pequenas alterações, para ficarem mais simples e legíveis.

Page 52: Avaliação de Design de Interação para Aplicativo Móvel

51

Figura 31 - Nova página inicial

Fonte: Autor

Como foi identificado na análise heurística e nos questionários com

usuários, uma das grandes deficiências do aplicativo era uma página inicial que

centralizasse toda navegação. A nova página inicial agrupou todas as opções

que antes ficavam no menu lateral, sendo assim, facilitando o acesso aos

mesmos. Foi adicionado o menu de contato, como sugerido pelos usuários.

O menu lateral foi modificado e agora apresenta o menu de configurações,

que antes não existia. A implementação desse menu é bastante importante pois

proporciona um poder mais de customização para o usuário.

Page 53: Avaliação de Design de Interação para Aplicativo Móvel

52

Figura 32 - Menu de configurações

Fonte: Autor

Page 54: Avaliação de Design de Interação para Aplicativo Móvel

53

Figura 33 - Comparativo entre página de seleção de entrega antiga e nova

Fonte: Autor

Solução apresentada para um dos problemas de usabilidade mais graves

encontrados no aplicativo, que era a ausência de um botão de atalho para

adicionar um novo endereço ao pedido.

Page 55: Avaliação de Design de Interação para Aplicativo Móvel

54

Figura 34 - Conjunto de páginas com as recomendações propostas

Fonte: Autor

Page 56: Avaliação de Design de Interação para Aplicativo Móvel

55

6. Considerações finais

O presente estudo avaliou o aplicativo móvel da Casa da Esfiha com o

objetivo de identificar e propor recomendações para os problemas de

usabilidade.

O processo foi dividido em quatro etapas principais: levantamento dos

requisitos, análise da interface, avaliação com usuários e apresentação das

recomendações de usabilidade. Durante o levantamento dos requisitos foram

determinadas quais as principais funções que o aplicativo deveria realizar e quais

as expectativas dos usuários. Para fazer um levantamento inicial dos problemas

de usabilidade, foi realizada uma avaliação que utilizou como parâmetro as

“heurísticas de usabilidade” e as “regras de ouro da usabilidade”. Após o

levantamento desses dados foi elaborado e aplicado um questionário com

usuários, que teve como objetivo verificar se os problemas de usabilidade

apontados anteriormente realmente estavam afetando os usuários. Ao comparar

os problemas identificados durante o processo de avaliação, foi possível

determinar os principais problemas e a partir disso, desenvolver as

recomendações e layouts apresentados no capítulo anterior.

Ao final desse estudo, foi possível perceber como é necessário estar

sempre avaliando e implementando melhorias nas interfaces já publicadas. Por

isso acredito que seja fundamental que as melhorias aqui propostas, no futuro,

sejam avaliadas para confirmar se sua implantação realmente acarretou em um

resultado positivo para os usuários. Acreditamos que a realização de um trabalho

como esse, além de gerar contribuir para o desenvolvimento acadêmico, pode

contribuir para a formação de uma profissional mais capacitado e responsável,

que utilizará a teoria e os demais conhecimentos adquiridos durante este

trabalho para desenvolver soluções práticas fundamentadas no design de

interação.

Page 57: Avaliação de Design de Interação para Aplicativo Móvel

56

Referências

CYBIS, W. D. A., BETIOL, A. H. E FAUST, R. Ergonomia e usabilidade: conhecimentos, métodos e aplicações. São Paulo (SP): Novatec, 2010.

FAGNI, E. Princípios de Usabilidade de Hansen. <https://uxdesign.blog.br/princ%C3%ADpios-de-usabilidade-de-hansen- 30823210005f>, acessado em 14/04/2017

FAGNI, E. As oito regras de ouro do design de interfaces. <https://uxdesign.blog.br/as-oito-regras-de-ouro-do-design-de-interfaces- 836fb166d36b>, acessado em 15/04/2017

GARRETT, J.J. 2003. The elements of user experience: user-centered design for the web. Indianapolis, New Riders.

GRIFFITHS, Stephen. Os princípios de UX para aplicativos em dispositivos móveis: Melhorando a experiência do usuário e otimizando conversões. Abril, 2015. < https://www.thinkwithgoogle.com/intl/pt-br/marketing-resources/ux-e- design/mobile-app-ux-principles/>, acessado em 25/04/2017

NAPOL, Igor. Brasil é o terceiro país que mais baixa apps no Android e no Ios. Abril, 2016. <https://www.tecmundo.com.br/android/104155-brasil-terceiro-pais- baixa-apps-android-ios.htm>, acessado em 10/04/2017

NIELSEN J., LORANGER H. Usabilidade na Web: projetando websites com qualidade. Tradução Edson Furmankiewicz & Carlos Schafranski, Docware Traduções Técnicas. Rio de Janeiro: Elsevier, 2007.

NIELSEN, Jakob. 10 Usability Heuristics for User Interface Design. https://www.nngroup.com/articles/ten-usability-heuristics/, acessado em 10/04/2017

NIELSEN, Jakob. Why You Only Need to Test with 5 Users. <https://www.nngroup.com/articles/why-you-only-need-to-test-with-5-users/>, acessado em 20/04/2017

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

NORMAN, Donald A. O Design do Futuro. Rio de Janeiro: Rocco, 2010.

Portal Educação, O conceito de Usabilidade. <https://www.portaleducacao.com.br/conteudo/artigos/educacao/o-conceito-de- usabilidade/52918>, acessado em 12/04/2017

PREECE, Jennifer. Design de interação: além da interação homem-computador / Jennifer Preece, Yvonne Rogers e Helen Sharp; trad. Viviane Possamai. Porto Alegre: Bookman, 2005.

Page 58: Avaliação de Design de Interação para Aplicativo Móvel

57

APÊNDICE A

Resultado completo do questionário

Page 59: Avaliação de Design de Interação para Aplicativo Móvel

58

Page 60: Avaliação de Design de Interação para Aplicativo Móvel

59

Page 61: Avaliação de Design de Interação para Aplicativo Móvel

60