universidade federal de pernambuco centro … · 2019. 10. 25. · universidade federal de...

UNIVERSIDADE FEDERAL DE PERNAMBUCO

CENTRO ACADÊMICO DO AGRESTE

ELBER FAGNER VIEIRA DA SILVA

DELIFE: APLICATIVO DE DELIVERY PERSONALIZADO DE ALIMENTOS DE PRONTA

ENTREGA PARA PESSOAS COM RESTRIÇÕES ALIMENTARES.

CARUARU

2017



NÚCLEO DE DESIGN E COMUNICAÇÃO


DELIFE: APLICATIVO DE DELIVERY PERSONALIZADO DE ALIMENTOS DE PRONTA

ENTREGA PARA PESSOAS COM RESTRIÇÕES ALIMENTARES.

TCC apresentado à Universidade Federal de

Pernambuco, Centro Acadêmico do Agreste,

como pré-requisito para obtenção do título de

bacharel no Curso de Design.

Orientador: Rodrigo Barbosa

Coorientador: Elton Rubens

CARUARU

2017

Catalogação na fonte:

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

S586d Silva, Elber Fagner Vieira da.

Delife: aplicativo de delivery personalizado de alimentos de pronta entrega para pessoas com restrições alimentares / Elber Fagner Vieira da Silva. – 2017.

155f.; il. : 30 cm. Orientador: Rodrigo Miranda Barbosa. Coorientador: Elton Rubens Vieira da Silva Monografia (Trabalho de Conclusão de Curso) – Universidade Federal de Pernambuco,

CAA, Design, 2017. Inclui Referências.

1. Interface de programas aplicativos (Software). 2. Smartphones. 3. Usabilidade. 4.

Dietas. I. Barbosa, Rodrigo Miranda (Orientador). II. Silva, Elton Rubens Vieira da (Coorientador). III. Título.

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



NÚCLEO DE DESIGN

PARECER DE COMISSÃO EXAMINADORA

DE DEFESA DE PROJETO DE

GRADUAÇÃO EM DESIGN


“DELIFE: APLICATIVO DE DELIVERY PERSONALIZADO DE ALIMENTOS DE PRONTA

ENTREGA PARA PESSOAS COM RESTRIÇÕES ALIMENTARES. ”

A comissão examinadora, composta pelos membros abaixo, sob a

presidência do primeiro, considera o aluno ELBER FAGNER VIEIRA DA SILVA

APROVADO

Caruaru, 13 de Dezembro de 2017.

Orientador: Prof. RODRIGO MIRANDA BARBOSA

Primeiro Avaliador: Prof. FÁBIO CAPARICA DE LUNA

Segundo Avaliador: Prof. MARCOS ROBERTO TENÓRIO DE SOUZA FILHO

À minha mãe, pai, irmãos, amigos, e a todos

que me apoiaram e não me deixaram desistir.

<3

AGRADECIMENTOS

Agradeço, principalmente, a minha mãe, que desde sempre vem trabalhando

duro para dar tudo que pode e o que não pode para os seus filhos. E que apesar de

ser do jeito que sou, continua me amando e me apoiando. Obrigado por tudo que

você fez e faz por mim, sei que não sou de demonstrar, mas lhe amo muito e tenho

muito orgulho de ser seu filho.

A meu pai, que apesar de ser um pouco mais distante, sempre demonstrou

que ama seus filhos, e que está sempre de braços abertos para nos receber.

A Cláudia, pessoa importantíssima, e que ouso dizer que se não fosse por ela

talvez não estivesse concluindo este TCC. Obrigado por tudo que você tem feito por

mim, e desculpe não poder retribuir nem 10% disso. Amo muito você.

Aos meus irmãos, Elton & Erton, que apesar de não interagirmos muito,

sempre estiveram presentes quando foi preciso, e se mostraram dispostos a ajudar

quando eu precisasse.

Ao meu padrasto, que mesmo sendo difícil as vezes, me apoiou e também

me incentivou a concluir este curso.

Ao meu orientador, Rodrigo Barbosa, que aceitou a bomba ter a mim como

orientando, e que mesmo em circunstâncias complicadas, continuou me guiando até

o final, mesmo com todos os problemas que encontrou ao me orientar.

Ao meus amigos, Johallyson, Pedro (Paca), Pedro (Zé pequeno), Thiago

(Thiagone), Antonino Saraó (Nino), Rodrigo, Eduardo (Du), Claudionor (Nôzão), e

entre muitos outros que, perdoem se esqueci, mas que sabem que fazem parte disso.

Meu muito obrigado a todos pelos momentos de alegria, tristeza, reflexões,

conversas bestas e tudo o mais. Love u guys.

"O mundo não é perfeito, mas ele está lá para

nós, fazendo o melhor que pode. Isso é o que o

torna tão maldito e belo."

Fullmetal Alchemist

RESUMO

Este trabalho tem como principal objetivo, atender as necessidades de um público

carente de opções de serviços de delivery de pratos que possam ser personalizados

de acordo com suas restrições alimentares por meio de um dispositivo móvel que

tenha acesso à internet. Essas pessoas enfrentam dificuldades ao procurar serviços

que ofereçam alimentos que não possuam ingredientes específicos, o que torna

frustrante a procura por eles. O aplicativo Delife foi idealizado para resolver este

problema, dando ao usuário um aplicativo onde ele possa montar da forma que quiser

sua refeição, utilizando apenas um smartphone para isso. Para o desenvolvimento

deste projeto de pesquisa, foram levados em consideração os estudos bibliográficos

sobre restrições alimentares, sejam elas por motivos de doença ou por escolha

pessoal, a avaliação com usuários, para entender os problemas do público-alvo da

pesquisa, e o estudo aprofundado sobre interface e usabilidade utilizando como base

principal para a concepção final do projeto a metodologia proposta por Garrett

(2011).

Palavras-chaves: interface, restrições alimentares, smartphone, usabilidade.

ABSTRACT

This work has as main objective, to meet the needs of an audience devoid options of

delivery services of dishes that can be customized according to their food restrictions

through a mobile device that has access to the internet. These people face

difficulties in seeking services that offer foods that do not have specific ingredients,

which makes the search for them frustrating. The Delife application has been

designed to solve this problem, giving the user an application where he can assemble

the way he wants his meal, using only a smartphone to do so. For the development

of this research project, we have taken into account bibliographic studies on dietary

restrictions, be they for reasons of illness or personal choice, evaluation with users,

to understand the problems of the target audience of the research, and the in-depth

study on interface and usability, using the methodology proposed by Garrett (2011)

as the main basis for the final design of the project.

Keywords: food restrictions, interface, smartphone, usability.

LISTA DE FIGURAS

Figura 1 : Gráfico do consumo mensal de alimentos e água. ................................................ 19

Figura 2: Principais fontes de emissão de gases no Brasil em 2014. ........................................ 20

Figura 3: 10 principais causas de morte no mundo em 2015. ................................................ 22

Figura 4: Gráfico da intolerância à lactose ..................................................................... 23

Figura 5: Tela Apple Macintosh. .................................................................................. 27

Figura 6: Metas de Usabilidade .................................................................................... 29

Figura 7: Diagrama UX Design ..................................................................................... 31

Figura 8: Tela do aplicativo Nubank .............................................................................. 38

Figura 9: Tela do aplicativo Youtube ............................................................................. 39

Figura 10: Tela do aplicativo iFood ............................................................................... 40

Figura 11: Telas dos aplicativos Whatsapp e Instagram....................................................... 41

Figura 12: Tela do aplicativo iFood. .............................................................................. 42

Figura 13: Tela do aplicativo Instagram ......................................................................... 43


Figura 15: Tela do aplicativo Nubank ............................................................................ 45

Figura 16: Tela do aplicativo Hashtag Açaí ..................................................................... 46


Figura 18: Os elementos da experiência do usuário, de Garret ............................................. 50

Figura 19: Gráfico de idade do questionário com usuários ................................................... 55

Figura 20: Gráfico de uso de aplicativo de comida do questionário com usuários ....................... 55

Figura 21: Gráfico de tempo na internet do questionário com os usuários ............................... 56

Figura 22: Gráfico comparativo entrevista ...................................................................... 60

Figura 23: Persona 1 ................................................................................................. 61

Figura 24: Persona 2 ................................................................................................. 62

Figura 25: Modelo do questionário para teste de usabilidade de similares ............................... 66

Figura 26: Tela do iFood ............................................................................................ 66


Figura 28: Tela do Hashtag Açaí .................................................................................. 69



Figura 31: Tela do aplicativo Dieta e Saúde .................................................................... 72

Figura 32: Tela do aplicativo Dieta e Saúde .................................................................... 72

Figura 33: Tela do aplicativo Tecnonutri ........................................................................ 73



Figura 36: Comparativo das caracteristicas dos aplicativos Dieta e Saúde e Tecnonutri ............... 76


Figura 38: Rótulo Coca-Cola ....................................................................................... 81

Figura 39: Cardápio Hamburgueria Insano's ..................................................................... 82

Figura 40: Modelos de Diagramas ................................................................................. 85

Figura 41: Fluxuograma Delife .................................................................................... 86

Figura 42: Wireframes antigos do projeto ....................................................................... 91

Figura 43: Wireframe do Delife (login) .......................................................................... 92

Figura 44: Wireframe do Delife (inicio) .......................................................................... 94

Figura 45: Wireframe do Delife (pratos prontos) .............................................................. 95

Figura 46: Wireframe do Delife (monte seu prato) ............................................................ 95

Figura 47: Wireframe do Delife (carrinho) ...................................................................... 96

Figura 48: Wireframe do Delife (pagamento) ................................................................... 97

Figura 49: Wireframe do Delife (pedidos) ....................................................................... 98

Figura 50: Wireframe do Delife (perfil) .......................................................................... 99

Figura 51: Wireframe do Delife (configurações) .............................................................. 100

Figura 52: Cores do Delife ......................................................................................... 105

Figura 53: Tipografia Trebuchet MS ............................................................................. 106

Figura 54: Ícones do Delife ........................................................................................ 106

Figura 55: Interface Delife ........................................................................................ 108









Figura 64: Número de participantes x problemas encontrados ............................................. 116

Figura 65: Teste de satisfação do usuário ...................................................................... 117

Figura 66: Teste de usabilidade .................................................................................. 118

Figura 67: Passo a passo tarefa 1 ................................................................................ 120

Figura 68: Teste de satisfação de Unger........................................................................ 121


Figura 70: Erros da interface cometidos pelo usuário ........................................................ 124





Figura 75: Erros cometidos pelo usuário ........................................................................ 129



Figura 78: Erros cometidos pelo usuário ........................................................................ 132


Figura 80: Melhorias da interface ................................................................................ 135




SUMÁRIO

1. INTRODUÇÃO .............................................................................. 14

2. FUNDAMENTAÇÃO TEÓRICA ............................................................. 18

2.1 VEGETARIANISMO, SAÚDE E RESTRIÇÃO ALIMENTAR ................................ 18

2.1.1 Intolerância e alergia ................................................................. 23

2.1.2 Delivery ................................................................................. 24

2.2 O DESIGN E A USABILIDADE ............................................................. 26

2.2.1 Interfaces gráficas ..................................................................... 26

2.2.2 Usabilidade, Design e experiência do usuário ..................................... 31

2.2.3 Cognição ................................................................................ 35

2.2.4 Ergonomia e usabilidade .............................................................. 37

3. PROJETO DE DESIGN ..................................................................... 50

3.1 ESTRATÉGIA ............................................................................... 51

3.1.1 Objetivo do produto ................................................................... 51

3.1.1 Necessidades do usuário .............................................................. 52

3.2 ESCOPO .................................................................................... 77

3.2.1 Especificações funcionais ............................................................. 77

3.2.2 Requisitos do conteúdo da interface ................................................ 78

3.3 ESTRUTURA................................................................................ 79

3.3.1 Design de interação ................................................................... 80

3.3.2 Arquitetura da informação ........................................................... 84

3.4 ESQUELETO ................................................................................ 87

3.4.1 Design da interface .................................................................... 88

3.4.2 Design de navegação .................................................................. 89

3.4.3 Design de informação ................................................................. 90

3.5 SUPERFÍCIE .............................................................................. 102

3.5.1 Sentidos e olhar ...................................................................... 102

3.5.2 Contraste e uniformidade .......................................................... 103

3.5.3 Cores e tipografia .................................................................... 103

3.5.5 Telas ................................................................................... 107

3.5.6 Teste de usabilidade ................................................................ 116

4. CONSIDERAÇÕES FINAIS ................................................................ 139

REFERÊNCIAS ................................................................................ 142

ANEXO A – RESULTADO QUESTIONÁRIO ONLINE ...................................... 146

ANEXO B – ENTREVISTAS APROFUNDADAS ............................................. 149

14

1. INTRODUÇÃO

Em um estudo realizado em 2016, o vegetarianismo e a procura por uma dieta

mais saudável estão crescendo, a busca por uma vida mais saudável é o fator

principal para este levantamento (NATHAN, 2016). O autor, apresenta em uma

publicação do site Boa Vontade (2017), que o brasileiro tem mudado o seu cardápio,

adicionando mais verduras, legumes e frutas ao prato e optando por uma alimentação

saudável, de acordo com uma pesquisa encomendada pela Associação das Empresas

de Refeição e Alimentação Convênio para o Trabalhador (ASSERT).

Esta pesquisa foi realizada com proprietários de restaurantes, lanchonetes e

padarias em mais de 50 cidades do Brasil. Nela, é apontado que dos entrevistados,

53% notaram aumento na procura por frutas, 61% disseram ter percebido o aumento

no consumo de verduras e legumes e 65% observaram o consumo de sucos naturais.

A procura por produtos e serviços para quem busca um regime alimentar,

sem o consumo de carne ou derivados de animais, está em crescimento no Brasil. Na

última pesquisa publicada pelo Instituto IBOPE, em 2012, 8% da população se

declarou vegetariana, e em uma outra pesquisa, dessa vez realizada pelo

DATAFOLHA, em Janeiro de 2017, apontou que 63% dos brasileiros querem reduzir o

consumo de carne.

Mesmo com a popularização do vegetarianismo e também de aplicativos para

Delivery de comidas, é sentida a falta de opções onde o usuário possa escolher e

montar sua refeição de acordo com suas restrições alimentares, sejam elas ligadas à

escolha de seguir uma dieta sem o consumo de alimentos vindouros de animais, ou

pelo fato de existir algum tipo de reação alérgica gerada por proteínas presentes em

certos alimentos.

Ao utilizar o Be Veg Delivery, um dos poucos aplicativos de Delivery

vegetariano disponíveis para download, na cidade de Caruaru, em Pernambuco, o

aplicativo não localiza nenhuma opção que ofereça serviços vegetarianos, seja para

consumo imediato ou para produtos enlatados ou sob encomenda. O exemplo

utilizado foi o da cidade de Caruaru, que é no interior de Pernambuco, mas em outras

cidades próximas também não existem serviços disponíveis dentro do aplicativo.

15

No aplicativo iFood, um dos mais utilizados, com mais de quinhentas mil

avaliações na Play Store, e na App Store possui mais de vinte mil avaliações, ao

procurar a opção “vegetariano” no painel de Busca, aparecem apenas cinco itens

listados, sendo três deles temakis, um yakissoba e um hambúrguer, com média de

preço de R$ 16,00 mais o frete.

Os aplicativos de delivery presentes na cidade, não contém um nível de

personalização para os pratos servidos. No iFood, por exemplo, a grande maioria dos

pratos disponíveis já são pré-montados, onde a escolha de ingredientes é mínima, ou

as opções para tal escolha são pagas. E tais opções não contém nenhuma relevância

com informações nutricionais ou algum filtro onde o usuário possa selecionar opções

que deseja adicionar ou excluir.

Os serviços de delivery, que não possuam um aplicativo exclusivo para este

serviço, são ofertados por aplicativos secundários, geralmente redes sociais, como

Facebook e Whatsapp. Essas “quentinhas” só funcionam no horário de almoço. Isso

porquê o público alvo são as pessoas que trabalham no comércio e não têm a opção

de voltar para suas casas para almoçarem. Mas o problema é que essas “quentinhas”

são pré-montadas, onde os usuários não têm uma gama de escolhas muito ampla para

personalizar o seu prato.

Para a solução destes problemas foram definidos quais seriam os objetivos

gerais e específicos dentro da pesquisa.

Objetivo Geral

Desenvolver um aplicativo para delivery com montagem personalizada

de pratos com comidas vegetarianas e/ou para quem possui alguma

restrição alimentar de produtos derivados de animais, ou de algum

tipo de proteína (glúten), respeitando critérios de usabilidade e

navegação.

Objetivos Específicos

Pesquisar sobre usabilidade, user experience e navegabilidade em

estudos feitos por autores como Jakob Nielsen, Steve Krug, Cybis, etc.

16

Realizar estudo de aplicativos similares para delivery de alimentos.

Seguindo as heurísticas de Nielsen (2007) e os estudos de Cognição de

Preece et al. (2005).

Desenvolver interface que apresente uma boa experiência aos

usuários, utilizando com metodologia, Garrett (2011).

Realizar testes com usuários, através de um estudo anterior das

análises propostas por Nielsen (2007), Cybis et al. (2007) e

complementada por Unger (2009), para a validação desse tipo de

teste.

Direcionando essa ideia para o segmento de restrição alimentar, onde esse

tipo de produto ainda é deficiente dentro da cidade, veio a solução para esse déficit

através do projeto Delife. O Delife trata-se de um aplicativo onde só seriam

realizados pedidos para delivery de alimentos de consumo imediato, onde esses

alimentos poderão ser escolhidos de acordo com a dieta ou restrição alimentar do

usuário, facilitando assim o acesso desses usuários a pratos dos quais eles possam

desfrutar. As entregas serão realizadas por motoristas dentro da cidade onde este

serviço estaria disponível.

Esse projeto de pesquisa é importante, pois junta dois grandes mercados, os

de smartphones e o de alimentos saudáveis. E ao desenvolver um protótipo usável,

com base na metodologia e nos conteúdos bibliográficos sobre o assunto, mostrou o

funcionamento, de forma prática, da metodologia proposta por Garrett (2011),

seguindo todos os passos propostos por ela.

Para o processo de desenvolvimento do objetivo geral desta pesquisa utilizou

de estudo bibliográfico dentro da área abordada, através de livros, artigos, sites,

vídeos e demais mídias. Sendo esse o primeiro passo para a realização da pesquisa

do projeto: o levantamento de dados científicos e metodologia que ajudem o projeto

alcançar os seus objetivos. Aqui foram estudados fatores que podem levar a restrição

de alimentos de origem animal, podendo ser por questões éticas ou de saúde. Em

seguida é feito um levantamento da história, características e princípios do design

voltado para a usabilidade em interfaces digitais.

No segundo passo da pesquisa, entra a parte metodológica, que foi baseada

nos estudos propostos por Garrett (2011). Ele propõe o método da pesquisa dividida

17

em cinco planos: estratégia, escopo, estrutura, esqueleto e superfície. Através

destes planos o desenvolvedor conseguirá atender da melhor forma o objetivo de sua

interface de forma que atenda tanto ao usuário, quanto ao problema da pesquisa.

Nesse passo da metodologia, foram coletados dados para o levantamento

geral do perfil dos usuários, tais dados foram adquiridos através da realização de

uma pesquisa por meio de questionário quantitativos e qualitativos, feitos online.

Com as respostas obtidas foi traçado uma ideia de como se comportam os usuários

de smartphones e, consequentemente, de aplicativos dentro da cidade de Caruaru,

Pernambuco. Aqui também foram avaliados produtos similares para levantar dados

sobre aplicativos que já estejam atuando na região pesquisada, utilizando desses

dados para um melhor aprofundamento nas diretrizes para o desenvolvimento da

pesquisa.

Na terceira fase, foi aplicado o conhecimento teórico obtido junto às

análises das necessidades do usuário e das avaliações de similares, para

desenvolvimento do projeto de pesquisa, o aplicativo para delivery direcionado para

usuários que possuam algum tipo de restrição alimentar, e que desejam poder

utilizar aplicativos que permitam liberdade e opções de escolha de alimentos mais

saudáveis e dos quais possam consumir sem oferecer riscos à saúde.

Nesta fase foram elaborados o conteúdo que seria necessário para cumprir o

objetivo do projeto, em seguida realizado um fluxuograma de todas telas que o

aplicativo iria possuir. Após definidos esses pontos foi selecionado o periférico que

iria servir como base para o protótipo do aplicativo. Depois foram construídos os

wireframes do aplicativo, para que fosse adicionado todo o design visual em cima

deste modelo.

Após finalizado o protótipo do aplicativo, seguindo toda a metodologia

proposta por Garrett (2011) e utilizando de todos os estudos relacionados à

usabilidade, cognição, ux design, etc. foi feito o teste com os usuários, afim de

coletar os dados da interação entre eles e a interface projetada, para que possíveis

erros pudessem ser resolvidos.

18

2. FUNDAMENTAÇÃO TEÓRICA

2.1 VEGETARIANISMO, SAÚDE E RESTRIÇÃO ALIMENTAR

O aplicativo terá como objetivo principal a liberdade do usuário personalizar

os ingredientes de sua refeição com base em suas restrições alimentares, seja por

doença, alergia, escolhas pessoais, etc. Para isso é necessário saber quais fatores e

estudos apontam o quão importante é este projeto.

O site O GLOBO em uma matéria publicada em Janeiro de 2017 mostra um

levantamento realizado pela ONU com base em dados obtidos pela Organização

Mundial de Saúde (OMS). Tal pesquisa afirma que mais da metade da população

brasileira está com sobrepeso e a obesidade já atinge 20%. Essa obesidade é gerada

por aspectos como a urbanização e o crescimento econômico, que fazem com que

famílias acabem trocando os pratos tradicionais por alimentos ultra-processados.

Esta dieta pode ocasionar hipertensão, diabetes, dentre outras complicações de

saúde para o indivíduo que se encontra acima do índice de gordura corporal ideal.

Fatores como o aquecimento global, que é um dos assuntos mais tratados

dentro da Organização das Nações Unidas (ONU), é resultante, em boa parte, do

consumo direto ou indireto de carne. Segundo Nuwer (2016), em um artigo publicado

no site da BBC, a produção de alimentos é responsável por 25% a 30% das emissões

de gases de efeito estufa no mundo, onde a grande parte vem da pecuária. Conforme

o autor, Tim Benton fala que a maioria das pessoas não pensam em como a produção

dos alimentos influenciam no clima.

Nuwer (2016) cita que Marco Springmann, pesquisador da Universidade de

Oxford, criou um modelo computadorizado para simular o que aconteceria até 2050

caso todos os habitantes da Terra se tornassem vegetarianos. Os resultados

apontaram que todas as emissões ligadas à produção de alimentos cairiam 60%, e se

não fosse consumido nenhum produto que viesse de origem animal a queda seria de

70%. É um cenário utópico, mas que mostra o impacto que têm a produção de

alimentos, em especial os de origem animal, no planeta.

19

Figura 1 : Gráfico do consumo mensal de alimentos e água.

Fonte: https://exame.abril.com.br/ferramentas/simulador-de-consumo-de-agua-por-alimentos/ (2017)

No site da Exame existe uma página na qual é possível simular o consumo de

água na produção de alimentos do cotidiano brasileiro. Se for simulado o consumo

de apenas um quilo de carne bovina por semana, estarão sendo utilizados mais de

sessenta mil litros de água em um mês.

20

Figura 2: Principais fontes de emissão de gases no Brasil em 2014.

Fonte: http://epoca.globo.com/colunas-e-blogs/blog-do-planeta/noticia/2016/10/no-brasil-pecuaria-e-maior-responsavel-pelo-aquecimento-global.html (2017)

No gráfico apresentado na figura 2, feito pelo Sistema de Estimativa de

Emissões de Gases de Efeito Estufa, é mostrado as principais fontes de emissão de

gases no Brasil. Mansur (2016) aponta que a maior e principal fonte de emissões no

Brasil é o desmatamento, vindo do setor da agropecuária. E deste mesmo setor vem

a segunda maior causa de emissão: o metano, que é causado pela processo de

digestão do gado. Isso mostra que a indústria de alimentos animais está diretamente

ligado à saúde, seja por problemas diretos, como doenças geradas pelo consumo

direto ou pelos efeitos que o processo desses alimentos traz ao meio ambiente.

SILVA et al. (2013) dizem que o vegetarianismo é um regime alimentar que

é baseado, em seu maior grupo, no consumo de vegetais, frutas, etc. excluindo do

consumo alimentos que sejam provenientes de origem animal. Segundo Burgierman

(2016), os tipos de vegetarianismo são: Ovolactovegetarianos, Lactovegetarianos,

Semivegetarianos, Macrobióticos, Crudivorismo, Frugivorismo e Veganos.

21

1. Ovolactovegetarianos: esse é o grupo mais comum entre os que se

apresentam como vegetarianos. Os que pertencem a este grupo não

consomem nenhum tipo de carne, seja de frango, peixe, etc., mas eles

consomem laticínios e ovos.

2. Lactovegetarianos: esse tipo de vegetarianismo é predominante na Índia

por questões religiosas. Lá o ovo é proibido por ser considerado um

elemento que possui a “vibração da vida”. Nesse grupo além de não

comer carne também não são consumidos ovos e derivados;

3. Semivegetarianos: esse grupo está mais relacionado a saúde e ao não

consumo específico de carne vermelha. O consumo de carnes brancas,

como peixe e aves ainda é aceito;

4. Macrobióticos: dieta tradicional japonesa, varia de acordo com as

estações do ano, não é comum no Brasil, pois as estações do ano e cultura

são totalmente diferentes;

5. Veganos: esse grupo está totalmente ligado à filosofia e ética para

proteção e compaixão com os animais. Ele restringe o consumo de

qualquer produto que utilize animais, seja para consumo de alimentos ou

para produtos de empresas que realizem testes em animais. E buscam

boicotar e denunciar empresas que façam do sofrimento dos animais uma

forma de obter lucro.

Além de benefícios a saúde e proteção aos animais, o vegetarianismo

também traria bons resultados para o meio ambiente e é uma alternativa para quem

busca uma alimentação mais saudável e alternativa.

Com relação à saúde, quando tratamos de uma dieta baseada em restrição

de alimentos de origem animal, uma pesquisa publicada em 2016 por Mingyang Song,

um especialista em estudos nutricionais da Universidade de Harvard aponta que

produtos que contém origem animal trazem risco à saúde de quem os consome.

Segundo o autor, a ingestão de proteínas animais foi associada diretamente

às doenças cardiovasculares e outros problemas de saúde, enquanto que ao consumir

os mesmos nutrientes, sendo esses de origem vegetal, houve a redução de pressão

sanguínea e colesterol.

22

Figura 3: 10 principais causas de morte no mundo em 2015.

Fonte: http://www.who.int/mediacentre/factsheets/fs310/en/ (2017)

A maior causa de morte no mundo, segundo a Organização Mundial de Saúde,

em um estudo publicado em 2015, é por doenças cardiovasculares, a mais comum é

a aterosclerose, que é quando depósitos de gordura se acumulam nas artérias.

Conforme um artigo publicado pela advancecare.pt, essas doenças são, geralmente,

causadas pelo excesso de gordura no organismo, a obesidade. O que causa a

obesidade é o excesso de calorias ingeridas pelo organismo, os quais ele não é capaz

de queimar.

Segundo Sizer e Whitney (2003), ao aderir a uma dieta sem consumo de

alimentos de origem animal, e consumindo mais frutas e vegetais, faz com que

diminua bastante o risco de doenças, pois esses alimentos são ricos em fibras e

fitoquímicos, que são compostos da natureza química. Para Angelis (2005) a dieta

baseada na restrição de carne, traz uma melhora significativa no peso corporal,

pressão sanguínea e doenças cardiovasculares. Porém pode acarretar na falta de

alguns nutrientes presentes nesses alimentos, como: vitaminas B12 e D, ferro, cálcio,

etc.

23

2.1.1 Intolerância e alergia

Há também as pessoas que não consomem alguns produtos derivados de

animais por alguma doença ou alergia, o exemplo mais comum é o leite. Uma

reportagem do portal de notícias do G1, publicada em 2012, diz que a intolerância

ao leite acontece quando o organismo para de produzir uma enzima que quebra a

lactose.

Em 2016, as embalagens de comida e bebidas foram obrigadas a terem

informações de ingredientes que são comumente alérgicos à população. Essa

resolução foi proposta pela ANVISA (Agência Nacional de Vigilância Sanitária),

principalmente por causa de uma mobilização de pais e mães que queriam saber

identificar quais produtos poderiam comprar para seus filhos, baseado nas condições

alérgicas de cada um. Foram estipulados dezessete substâncias que deverão ser

informadas nos rótulos dos alimentos, como: crustáceus, ovos, leite de todos os

mamíferos, castanhas, etc. (LEAL, 2016).

Figura 4: Gráfico da intolerância à lactose

24

Fonte: http://g1.globo.com/bemestar/noticia/2012/02/intolerancia-lactose-atinge-ate-70-dos-adultos-brasileiros.html (2017)

Com relação ao glúten, presente em alguns alimentos do nosso dia-a-dia, não

ocorre uma intolerância, pois ele não é um açúcar, e sim uma proteína, o que ocorre

é uma alergia do corpo à essa proteína. O glúten é uma combinação de duas

proteínas, que são encontradas dentro dos grãos da cevada, trigo e do centeio.

Conhecida como doença celíaca, a alergia ao glúten pode trazer sintomas variáveis

a quem a possui, desde diarreia até perda de peso e desnutrição. Por vezes essa

doença é confundida, devido aos sintomas parecidos, com a intolerância a lactose,

por isso é necessário a realização de um exame específico para a detecção da doença

celíaca (GLUTEN, 2017).

2.1.2 Delivery

O consumo de alimentos por meio de delivery vem crescendo muito, entre

2013 e 2015 o iFood aumentou de 100 000 pedidos para 1,1 milhão, no Brasil, segundo

25

a Veja (2015). No Facebook os posts e divulgação de serviços relacionados à delivery

de refeições estão presentes em massa, geralmente postados nos diversos grupos

presentes nas cidades.

Na cidade de Caruaru, ao procurar um aplicativo que seja específico para o

delivery de comidas saudáveis ou dos quais sejam possíveis personalizar o pedido,

não é encontrada nenhuma opção. Os que existem são apenas uma extensão dos

próprios restaurantes existentes no aplicativo iFood. Os serviços disponíveis são

geralmente distribuídos em pontos centrais da cidade, onde são servidas marmitas

que o consumidor apenas compra diretamente no local. Sem a opção de poder pedir

uma refeição mais acessível, para entrega. Os locais que permitem a entrega da

refeição não possuem um aplicativo próprio, são utilizadas redes sociais como

Facebook e Whatsapp para os pedidos, e são com pratos feitos, onde o consumidor

poderá variar, basicamente, no tipo de carne que quer consumir, ou na refeição que

é ofertada em um determinado dia da semana.

O projeto dessa pesquisa visa destacar-se neste segmento dentro do cenário

apresentado, através de um aplicativo para smartphone que oferte a opção de

entrega dos serviços, a comodidade de realizar o pedido de onde estiver, e

principalmente a total personalização dos ingredientes que o usuário deseja

consumir, tendo em vista suas restrições alimentares, sejam elas por causa de

doenças, alergias, gostos pessoais, etc.

26

2.2 O DESIGN E A USABILIDADE

2.2.1 Interfaces gráficas

A interface gráfica veio progredindo com o avanço da tecnologia e a

popularização dos computadores. É de extrema importância, para o presente

projeto, entender o como e o porquê ela surgiu, para entender quais os benefícios

que o estudo das interfaces gráficas podem trazer de positivo para este projeto de

pesquisa.

O uso das tecnologias está em constante evolução, Preece, Rogers e Sharp

(2005) apontam que nos anos 70 e 80, os engenheiros desenvolviam hardwares para

eles mesmos usarem. Não existia a necessidade da população, considerada leiga,

saber utilizar os computadores da época, pois era exclusivamente para usos

específicos dos engenheiros, e possuíam uma linguagem pura, onde o objetivo não

era o uso casual, como atualmente é bastante utilizado.

Neves (2006) aponta que em 1980 foi que se consolidou um campo de estudo

direcionado ao design de interface e interação humano-computador, isso duas

décadas depois do primeiro programa a utilizar uma interface gráfica, o Sketchpad,

que foi apresentado em 1963 no MIT, por Ivan Sutherland. Andrade (2007) relata que

com essa evolução da interação entre homem e máquina, não era mais necessário

ser um especialista para utilizar dessa tecnologia.

A interface é o modo de comunicação entre um objeto, máquina e o usuário,

podendo ser esse objeto tanto algo físico quanto virtual (ROYO, 2008 apud MENDES,

2009). Ou seja, a interface está presente no cotidiano, e ela é extremamente

necessária para que as pessoas possam ter uma melhor interação com a máquina,

ajudando a realizar seus trabalhos, que hoje em dia, estão diretamente relacionados

com tecnologia.

Em 1984 foi lançado o Apple Macintosh, seguindo essa premissa de que era

possível existir uma interação mais fácil entre máquina e homem, em relação ao uso

dos computadores. Royo (2008 apud MENDES, 2009) relata que a partir daí a ideia de

que o usuário precisaria se adaptar ao computador estava sendo extinta. A ideia era

de deixar o uso dos computadores mais fácil, a partir de comandos mais simples e

objetivos.

27

O sistema do Macintosh obedece a uma sequência, onde a interação do

usuário com a interface fará com que haja uma comunicação entre eles, de uma

forma mais simples e fácil, isso seguindo uma lógica de programação pensada para

que os painéis de interface exibidos sejam intuitivos para o usuário (CYBIS; BETIOL;

FAUST, 2007).

Figura 5: Tela Apple Macintosh.

Fonte: https://www.timetoast.com/timelines/evolucion-de-la-tecnologia-b1f89b63-f40b-4179-886e-21a7d33cea78 (2017)

Andrade (2007), fala que a metáfora do desktop, desenvolvida pela Apple

por Alan Kay, utiliza de objetos familiares nos escritórios das empresas, tais como

pastas, disquetes, lixeiras, etc. para que pudesse representar dentro das interfaces

um objetivo semelhante ao que esses objetos fazem fora do mundo virtual, assim

trazendo facilidade do usuário em entender do que se trataria cada ícone ou imagem

representada dentro da interface. Mas, segundo Preece, Rogers e Sharp (2005), o

designer deveria ter cuidado para não pegar um conceito do mundo físico e jogá-lo

diretamente no formato digital, sem pensar que isso poderá ser utilizado de uma

outra forma e em um outro contexto, fazendo com que o usuário haja de forma

estranha ao interagir com a interface.

Então, devido a essa expansão que os computadores tomaram, ampliando o

uso para diversas pessoas, com diferentes idades, culturas, necessidades. Andrade

(2007) diz que a usabilidade veio justamente para permitir que os usuários,

independentes de suas características, interajam de uma forma natural e

28

automática, fazendo com que eles entrem dentro daquela realidade, mesmo que

virtual, e que tornem esse espaço virtual uma extensão do seu mundo físico.

Gamez (1998) relata que a qualidade ergonômica de usabilidade se dará

através da satisfação do usuário ao utilizar o programa. Porém é necessário lembrar

que diversas pessoas irão utilizar uma mesma interface, e pode ser que ela não seja

agradável à todas, por isso a necessidade de escolher o público alvo que a interface

deseja atender, e se a não aceitação de alguns é aceitável dentro do que se quer ter

como resultado.

Cybis et al (2007, apud MENDES, 2009) comenta que um programador não

teria muita facilidade para desenvolver interfaces, pois o mesmo tem um

conhecimento diferente dos leigos que irão utilizar aquela interface. Ou seja, o que

o programador pensaria ser simples, na realidade estaria muito distante da

compreensão de alguém que não possui o conhecimento necessário para realizar uma

tarefa considerada simples para um programador. Esse é o modelo mental do usuário,

Preece, Rogers e Sharp (2005) dizem que cada usuário tem um conhecimento sobre

um determinado assunto, podendo esse ser mais profundo ou raso, dependendo do

quanto o usuário está disposto à interagir ou aprender. Que é justamente o que

ocorre na relação de um programador desenvolver uma interface para um usuário

que não seja programador ou que não tenha muito conhecimento na área.

São duas realidades diferentes, onde uma tem total noção de como é o

processo por trás do que acontece com uma interface, e a outra apenas quer que ao

tentar fazer alguma ação, essa ação seja feita da forma que ele pensou que seria a

correta, apenas com o conhecimento básico do para que serve a interface que ele

está utilizando. Nielsen (2007) que este é um dos maiores equívocos que uma

empresa poderia fazer ao realizar um projeto desses, onde eles trazem um

conhecimento que já possuem dos produtos, marcas, serviços, etc. que eles estejam

oferecendo, e o colocam de acordo com seus próprios gráficos organizacionais. Isso

faz com que a interface tenha uma boa usabilidade apenas para os autores, mas não

para os usuários finais.

“A usabilidade é a qualidade que caracteriza o uso dos programas e

aplicações.” (CYBIS, et al, 2007. p. 15). Segundo eles, ela depende do acordo entre

a qualidade de sua interface e as características do usuário ao buscarem uma

determinada situação de uso. A usabilidade pode ser influenciada também pelo

29

ambiente ou tarefa designada. O autor cita computadores rápidos ou lentos, pode-

se comparar com smartphones também, que influenciam na usabilidade. Então eles

afirmam que a usabilidade é a junção entre interface, usuário, tarefa e ambiente.

É importante ter uma equipe especializada no desenvolvimento da interface,

pois é necessário um estudo sociotécnico, para que as interfaces interagem com

pessoas de diversas culturas e hábitos, sendo assim necessário tentar achar uma

melhor forma de atender à necessidade de todos. Segundo Preece, Rogers e Sharp

(2005) era claro que para o desenvolvimento de uma interface, diversas disciplinas

precisariam estar em jogo, o profissional que iria realizar o design de interface

precisaria estar ciente dos conceitos de psicologia e sociologia para melhor

desenvolver uma interface para web. Mendes (2009) ainda relata que muitas

interfaces não apresentam características emotivas ou estéticas, pois geralmente é

analisada a rapidez com que o usuário consegue exercer o que foi proposto dentro

daquela interface. Mas isso não torna a interface dura, mas, a harmonia entre a

estética e o uso, se colocado da maneira correta, pode dar mais prazer ao usuário

em utilizar aquela interface.

Figura 6: Metas de Usabilidade

30

Fonte: Preece, Rogers e Sharp (2005)

Com esse cenário, a Interação Humano-Computador (IHC) vai ficando cada

vez mais indispensável para um projeto que visa o uso da tecnologia pelos usuários.

Sendo necessário assim um estudo que abranja o máximo possível de recursos

necessários para levar uma experiência de uso que não traga dificuldades ou

empecilhos, e que atenda à maior quantidade de pessoas, não esquecendo de

limitações existentes.

Preece, Rogers e Sharp (2005) falam que o processo de projetar uma

interface possui, dentre outras, quatro atividades básicas. Que são: 1) identificar

necessidades e estabelecer requisitos; 2) Desenvolver designs alternativos que

preencham esses requisitos; 3) Construir versões interativas dos designs, de maneira

que possam ser comunicados e analisados; 4) Avaliar o que está sendo construído

durante o processo. Logo, achar um problema que precisa ser resolvido, desenvolver

a melhor forma de resolver esse problema, e depois realizar um feedback para saber

se o problema está sendo resolvido de forma esperada. Lembrando sempre de

realizar essas atividades com a ajuda e presença do usuário alvo da interface.

31

Além dessas quatro atividades básicas, eles ainda citam mais três

características: 1) o usuário deve estar envolvido no projeto; 2) A usabilidade

específica e os métodos dos usuários devem ser analisadas; 3) A interação em todas

as quatro atividades é inevitável. O enfoque no usuário é de extrema importância,

pois é através dele que irão ser obtidos os resultados da pesquisa.

Em resumo, Preece, Rogers e Sharp (2005), falam que o design de interface

visa a criação de produtos interativos ao usuário, que facilitem o uso, e que tomem

em consideração diversos fatores que levam o usuário a utilizar o produto, como:

onde, quando, porquê, etc. Ou seja, é necessário levar em conta o perfil de todos

os usuários que irão utilizar daquela interface, para que não haja rejeição.

2.2.2 Usabilidade, Design e experiência do usuário

UX design vem da abreviação do termo em inglês para (User eXperience

Design). É a relação entre a experiência do usuário com o design, no caso desse

projeto, com as interfaces. Uma interface intuitiva e fácil é primordial para a boa

utilização de um sistema digital, o UX design auxilia nessa construção. E segundo

Teixeira (2014), no âmbito atual, onde vivemos rodeados de novos aplicativos e sites

surgindo a todo momento, o diferencial vai estar na usabilidade e design da interface

que esses aplicativos vão apresentar.

Figura 7: Diagrama UX Design

32

Fonte: TEIXEIRA (2014)

A figura 7 mostra que UX design abrange uma gama grande de fatores, para

que ele possa ser bem aplicado dentro da interface. É possível perceber a

necessidade de trabalho conjunto entre programadores e designers, desde os

primeiros esboços do projeto.

A usabilidade na web possui cinco elementos essenciais, que são descritos

por Nielsen (2007), são eles: facilidade de aprender; eficiência; memorização; erros;

satisfação.

(i) Facilidade de aprender a utilizar uma interface é de extrema

importância, pois quanto mais difícil for, mais fácil será de o usuário

abandonar o uso.

(ii) Eficiência é a rapidez que o usuário consegue realizar os objetivos

propostos dentro da interface, quanto mais rápido, mais eficiente

será.

(iii) A memorização está ligada à facilidade de aprender, pois é quando o

usuário retorna àquela interface depois de um tempo, e consegue

identificar o que queria a partir da lembrança que teve da última vez

que esteve lá.

33

(iv) Erros, quais erros o usuário comete ao tentar realizar uma tarefa, e

definir se são erros aceitáveis ou não, se será necessário refazer a

interface para que tais erros sejam melhores corrigidos.

(v) A satisfação é o quão agradável o uso da interface se torna para o

usuário, se ele tem prazer em utilizar aquele sistema, sem ter vontade

de sair depois de pouco tempo. (NIELSEN, 2007 apud AVALOS;

GONZALES, 2009).

As quatro atividades propostas por Preece, Rogers e Sharp (2005) citadas na

seção anterior, precisam resultar nesses cinco aspectos citados por Nielsen, ou seja,

após identificar a necessidade e desenvolver designs interativos para a interface

proposta, deve-se verificar se há a facilidade no uso, eficiência, memorização rápida

e fácil dos elementos dentro da interface, e se os erros, caso existam, são aceitáveis

ou se precisam de um ajuste para que flua melhor a usabilidade.

Preece, Rogers e Sharp (2005) ainda adicionam mais dois elementos à

usabilidade na web: segurança e utilidade. A interface deve oferecer a segurança

necessária ao usuário, para que ele não acabe realizando alguma operação danosa

ou que ele não deseja fazer, ou repetir erros, que acabe atrapalhando o mesmo ao

realizar as tarefas demandadas por receio de falhas.

Um exemplo comum desse aspecto, é a utilização de caixas eletrônicos. Por

muitas vezes usuários, em sua maioria com pouco acesso à tecnologias mais atuais,

não conseguem exercer uma tarefa, como a de sacar dinheiro ou realizar um

depósito, pois a interface não é tão amigável, um exemplo disso foi quando uma

agência em Campo Grande entrou em greve, e muitos dos idosos que utilizam os

caixas internos, tentaram usar as máquinas, mas sem muito conhecimento, muitos

vieram a desistir e deixar a agência sem que concluísse sua tarefa (LIMA, 2015).

Assim, utilizar um caixa eletrônico se torna uma tarefa não intuitiva para alguém

que tenha dificuldade com o uso de aparelhos tecnológicos, podendo causar

constrangimento, e por vezes acabe desistindo ou pedindo por ajuda para que

consiga realizar a tarefa. Já a utilidade é o quão útil para ele aquela interface é,

pois se o usuário conseguiu encontrar de maneira rápida o que ele procurava naquele

site, aplicativo, caixa eletrônico, etc. ele com certeza irá voltar, caso sinta

necessidade de fazer outra tarefa, ou a mesma.

34

Krug (2008) explica que algo primordial para se projetar uma interface usável

é não fazer o usuário pensar. Ou seja, tudo tem que estar claro, e o mais objetivo

possível, para que o usuário não se perca nem faça perguntas desnecessárias a si

mesmo dentro do site. Tudo deve ficar o mais óbvio possível, para que não seja gasto

muito tempo pensando sobre onde deve clicar, ou o que acontece se clicar.

A regra dos dez minutos é um dos muitos jeitos de se testar a usabilidade de

uma interface. Como o nome sugere, em dez minutos o usuário deve tentar realizar

a tarefa designada a ele, fazendo com que seja percebida se a interação entre

usuário e interface estão bem desenhadas. Se ele não consegue, algo está errado.

Lembrando que essa regra não deve ser utilizada em todos os casos, existem

interfaces muito complexas para se aprender a utilizar em apenas dez minutos e

outras muito simples para se usar como base os mesmos dez minutos (RUBINSTEIN;

HERSH, 1984 apud PREECE; ROGERS; SHARP, 2005).

Segundo Avalos e Gonzáles (2009) a frustração é uma sensação que é

experimentada por muitos usuários na frente de um computador, e ela pode se dar

por vários motivos, sejam de hardware ou de inexperiência, mas o fato é que sempre

vai ter um usuário frustrado, e isso deve ser analisado. Como no caso dos caixas

eletrônicos, citado acima.

Krug (2008) afirma que o usuário ao utilizar um determinado site, aplicativo,

etc. em busca de algo que ele deseja, o mesmo tende a ignorar todos os outros

conteúdos presentes naquela interface. Ainda afirma que o usuário não irá interagir

com tudo o que está ali, apenas irá acessar o conteúdo em que tenha aquilo que ele

deseja, caso demore muito para encontrar, é possível que ele saia de onde esteja

antes mesmo de clicar em qualquer opção que possa leva-lo aonde queria, porque se

o usuário demorou para achar, o motivo é a interface não estar tão simples assim

para ele, fazendo com que o mesmo pensasse demais, e acabasse desistindo de seguir

em frente naquele local.

E esse acesso rápido, se deve muitas vezes à pressa que o usuário está, e

também saber que ele não vai precisar ler tudo para achar o que deseja, então não

enxerga motivos para perder o seu tempo procurando.

Esse aspecto de procurar exatamente o que está na mente do usuário é um

dos tipos específicos de cognição, a atenção.

35

2.2.3 Cognição

Segundo Preece, Rogers e Sharp (2005) cognição é aquilo que está

acontecendo na nossa mente quando estamos realizando alguma atividade. Ela

geralmente pode ser separada em dois tipos, afirma Norman (1993 apud PREECE,

ROGERS E SHARP, 2005). O primeiro é quando fazemos uma atividade que não requer

muito esforço mental, que é algo mais automático, como dirigir, jogar games casuais,

etc. A outra é algo que requer um pouco mais do pensar, ou seja, quando estamos

projetando algo, quando precisamos pensar no futuro, nas consequências, tomar

decisões.

Piaget (1971 apud Varela e Barbosa, 2007), fala que o conceito de cognição

se dá através da acomodação e da assimilação. Ou seja, a cognição se dá através da

experiência do usuário, experiências essas que farão com que o usuário desenvolva

ideia e soluções para problemas que surgiram, assim forçando o uso da mente

cognitiva.

Varela e Barbosa (2007), falam que para Vigótsky, a interação social entre os

humanos, é o fato chave para o aprendizado. Pois através da palavra é que o

conhecimento pode ser passado.

Preece, Rogers e Sharp (2005) ainda colocam que a cognição foi separada em

processos, que são: 1) atenção; 2) percepção e conhecimento; 3) memória; 4)

aprendizado; 5) leitura, fala e audição; 6) resolução de problemas, planejamento,

raciocínio e tomada de decisões. Esses processos podem estar em conjunto, ou

separadamente, dependendo da ação que o usuário está a fazer.

Atenção: “A atenção consiste no processo de selecionar coisas em que se

concentrar, num certo momento, dentre a variedade de possibilidades disponíveis.”

(PREECE; ROGERS; SHARP, 2005. P. 95). O usuário vai priorizar o que ele está

querendo, logo sua atenção estará voltada para seu desejo, ele vai tender a ignorar

aquilo que não estiver relacionado ao que ele está priorizando no momento. Caso a

mente do usuário esteja sem nenhuma prioridade, ele irá percorrer pelas opções

encontradas na interface procurando algo atrativo e de fácil compreensão que chame

a atenção, positivamente, dele.

Percepção e conhecimento: esse aspecto está ligado aos sentidos, através

deles podemos interpretar a informação e analisa-la como sendo boa ou ruim. (ROTH,

36

1986 apud PREECE; ROGERS; SHARP, 2005). Um exemplo de percepção na interface

são os ícones presentes em um software, o texto utilizado, áudio e vídeo, etc. Se

esses aspectos não forem de fácil compreensão, eles não passarão para o usuário o

que eles desejam, pelo contrário, deixarão o usuário confuso e frustrado.

Memória: a memória é um fator chave na criação de uma interface, através

dela o usuário irá se lembrar do que fez da última vez que acessou um site ou

programa. Mas para que a memória seja ativada, é necessário que a interface seja

simples, pois a memória humana é muito complexa, podendo ela vir a se lembrar de

algo irrelevante e esquecer uma coisa que era realmente importante. Preece, Rogers

e Sharp (2005) relatam um estudo do psicólogo Mark Lansdale, onde ele aponta dois

processos de memória que o usuário faz: memória direta e verificação baseada em

conhecimento. Segundo ele, primeiramente o usuário tenta se lembra diretamente

de algo que ele fez há um tempo, caso ele não consiga lembrar rapidamente e

precisamente, ele recorre a outra caminho, que é vasculhar todos os meios para que

ele possa se lembrar. É como se o usuário tivesse realizado uma busca de um site A

e um site B no dia anterior, e quando ele foi procurar novamente, ele só se lembrou

do site A, digitando-o diretamente na barra de endereço, mas o site B ele só tinha

uma lembrança de um nome, mas não sabia direito qual era, então ele acessou o

histórico para finalmente achar o site B, daí clicar nele. Como a memória é algo

limitado ao ser humano, ferramentas de busca e atalhos são criados para facilitar o

uso da interface pelo usuário, sem que ele fique sobrecarregado de informações.

Aprendizado:

“O aprendizado pode ser considerado no que concerne a (i) como utilizar uma aplicação baseada em computador ou (ii) utilizar uma aplicação baseada em computador para entender um dado tópico” (PREECE, ROGERS E SHARP ,2005. P. 105).

Muitos usuários ignoram os manuais de instrução, e preferem descobrir

sozinhos o que dá para ser feito naquela interface. Por isso foram criadas opções que

façam o usuário voltar a ação antes de errar, para que assim ele se sinta mais seguro

caso venha a cometer algum erro, pois é só apertar uma tecla e ele volta aonde

estava. Outra forma de fazer o usuário aprender a utilizar uma interface, era a

restrição de alguns itens considerados avançados, e somente desbloqueá-los quando

37

fosse percebido a evolução na utilização do software pelo usuário (CARROL, 1990

apud PREECE, ROGERS E SHARP, 2005).

Ler, falar e ouvir: aqui está um fator muito importante no projeto de uma

interface, pois a diferença entre esses três fatores é bem grande. Ao ler algo, o

usuário está se concentrando em algo dinâmico, que só para quando ele quer, e se

ele parar, quando ele voltar, tudo estará lá da mesma forma. O falar é diferente,

pois em um diálogo entre duas pessoas, muito dificilmente alguma delas irá conseguir

repetir exatamente o que foi dito a cinco minutos, por isso a fala é algo transitório,

que muda de acordo com o tempo. Já o ouvir, é uma atividade mais fácil do que ler

e falar. As crianças, geralmente, preferem aprender através de áudio e vídeo, do

que o mesmo conteúdo passado através de texto. E ainda é necessário ter consciência

das pessoas que portam necessidades especiais, e que precisam de ajuda, seja para

ler, falar ou escutar. Por isso têm que se ter em mente a aplicação de sistemas que

auxiliem o uso da interface para os deficientes. (PREECE, ROGERS E SHARP ,2005).

Resolução de problemas, planejamento, raciocínio e tomada de decisões:

aqui basicamente entra a cognição reflexiva, ou seja, aquela que requer

pensamentos lógicos e decisões. Nesse processo da cognição, será analisado o

problema, e tentará se achar a melhor forma de resolvê-lo, tendo em base

estratégias que façam com que nada dê errado, pensando sempre além do que está

presente, tendo em vista o que pode e não pode vir a acontecer. Como se fosse um

jogo de xadrez, onde cada movimento requer um pensamento futuro. (PREECE,

ROGERS E SHARP ,2005).

A cognição é um dos fatores principais para se aplicar usabilidade em uma

interface, pois é o pensamento cognitivo do usuário que definirá o que é importante

para ele e o que não é. Por isso, levando em conta a cognição no projeto de

interfaces, a probabilidade do usuário interagir mais fluidamente com essas

interfaces será maior.

2.2.4 Ergonomia e usabilidade

Usabilidade e ergonomia são elementos importantes para o desenvolvimento

de projetos. Desde os materiais e equipamentos para se levantar um edifício até os

38

softwares e hardwares que um usuário de computadores ou smartphones utiliza para

trabalhar, ou se divertir.

Maxwell (2005) fala que a criação da norma ISO 9242-11, em 1998, criou

diretrizes para o conceito da usabilidade na web, com o objetivo de fazer com que

o usuário consiga atingir o seu objetivo ao adentrar em uma interface na web.

A boa interação, entre homem e computador, é de extrema importância,

pois se isso for ignorado, o usuário pode vir a ficar confuso ao utilizar o ambiente

digital. Aqui serão abordados a usabilidade e a ergonomia utilizadas no ambiente

virtual, analisando o que deve se levar em conta para criar um projeto com boa

usabilidade dentro do mundo digital.

Diversos autores apresentam algumas diretrizes para ser criada uma

interface com uma boa usabilidade, essas dicas, claro, não são cem por cento

corretas, mas ajudam bastante a usabilidade se seguidas.

Jakob Nielsen e Rolf Molich realizaram um estudo onde eles mostraram dez

regras para se seguir ao criar uma interface, conhecida como As Dez Heurísticas de

Nielsen, que foi publicado no site Nielsen Norman Group, disponível em:

https://www.nngroup.com/articles/ten-usability-heuristics (2017). Essas foram as

principais, depois de analisar e refinar 249 problemas de usabilidade, que foram

apresentados em testes realizados com diversos usuários ao utilizar interfaces. Como

o nome sugere, são dez dicas do que se deve ser feito para tornar a experiência do

usuário com a interface melhor, mais fluente, para que assim o usuário possa sentir

prazer ao navegar dentro dele. Essas heurísticas, apesar de terem sido escritas em

1990, ainda são bem atuais e, com certeza, usáveis. São elas:

1. Visibilidade do status do sistema: a interface deve sempre mostrar ao

usuário o que está acontecendo, isso através de algum ícone, símbolo, ou mensagem,

para que o usuário saiba que a interface está funcionando. Na figura abaixo, do

aplicativo Nubank, é mostrado ao usuário as transações, pagamentos, data e valores

das compras que foram realizadas.

Figura 8: Tela do aplicativo Nubank

39

Fonte: Aplicativo do Nubank para iOS (2017).

2. Equivalência entre o sistema e o mundo real: deve-se utilizar aspectos

que já existem no mundo real, e que o usuário tenha familiaridade, palavras, ícones,

imagens, tudo deve remeter a algo existente, ou chegar o mais próximo disso. Abaixo

na figura 9, é mostrado a interface do aplicativo do Youtube, mostrando ícones que

se assemelham à objetos existentes no mundo real, como a lupa, câmera, relógio,

etc. E também é apresentado um modelo de distribuição por ordem alfabética,

comumente utilizado para organização de pastas e arquivos.

Figura 9: Tela do aplicativo Youtube

40

Fonte: Aplicativo Youtube para iOS (2017).

3. Controle do usuário e liberdade: é preciso controlar o usuário, mas

mantendo a liberdade do mesmo. Isso é, a interface precisa mostrar uma direção

correta que o usuário deseje seguir, e caso ele não queira seguir aquela direção, por

escolha própria, ou por erro, o sistema deve possibilitar uma resposta simples e

objetiva. Abaixo, na figura 10, o aplicativo iFood disponibiliza ao cliente acessar

algum restaurante que esteja fechado, para que ele possa ter acesso aos serviços e

valores do mesmo. Mas ao tentar realizar a compra de algum desses serviços, o iFood

mostra um aviso informando que aquele restaurante não está aberto, e que por isso

ele impede a compra no local, pelo aplicativo.

Figura 10: Tela do aplicativo iFood

41

Fonte: Aplicativo do iFood para iOS (2017).

4. Consistência e padrões: o usuário irá criar uma percepção automática

de onde vai estar alguma opção que ele esteja procurando em uma interface por ter

visto ela em outra interface. Por isso é necessário manter um padrão, na medida do

possível, para que o usuário mesmo ao utilizar uma interface diferente consiga

exercer as funções básicas. O exemplo utilizado abaixo foi do Whatsapp. Desde os

tempos do Messenger, a organização dos contatos é feita da forma de cima para

baixo, com a foto do contato usada do lado esquerdo do aplicativo (tendo como

exemplo as versões brasileiras dos programas). Os padrões são seguidos também na

disposição dos ícones no menu inferior, altamente utilizado em diversos outros

aplicativos conhecidos, como Instagram, Twitter, etc.

Figura 11: Telas dos aplicativos Whatsapp e Instagram

42

Fonte: Aplicativos Whatsapp e Instagram para iOS (2017).

5. Prevenção de erro: é uma explicação do que o usuário está fazendo

dentro da interface. Ela precisa ser bem estudada, para que ela não acabe

prejudicando, em vez de ajudar. Por isso ela deve ser colocada apenas em locais

corretos, onde estudos apontem que ocorrem erros por parte dos usuários, e daí

descobrir uma maneira de evita-los, ou alertá-los. Abaixo mais uma vez é citado o

aplicativo do iFood, nesta tela o aplicativo avisa ao usuário os restaurantes que se

encontram fechados no momento da consulta. Por meio de uma opacidade dos

restaurantes dentro da interface, e por uma mensagem com a frase “FECHADOS NO

MOMENTO”. Caso mesmo assim o usuário queira entrar no restaurante, ele irá

conseguir, mas ao tentar realizar alguma compra, será avisado que não é possível

concluir a tarefa.

Figura 12: Tela do aplicativo iFood.

43


6. Reconhecimento ao invés de lembrança: as instruções principais da

interface devem estar visíveis ao usuário, para que ele possa reconhecer de cara, e

não precisar entrar em outros menus para tentar se lembrar de qual ferramenta ele

tinha utilizado da última vez que usou determinado sistema. Na imagem abaixo, do

Instagram, o menu inferior continua visível ao usuário, acima da imagem é mostrado

ao usuário onde ele está e em qual página ele está. Colocando disponível para ele

também a opção de voltar.

Figura 13: Tela do aplicativo Instagram

44

Fonte: Aplicativo do Instagram para iOS (2017).

7. Flexibilidade e eficiência no uso: aqui entra como exemplo os

‘atalhos’. Que são um jeito mais fácil de lembrar e realizar uma determinada função

dentro de uma interface. Através deles fica mais fácil o manuseio da interface. Mas

deve-se dosar o uso desse recurso, porque muito disso e o usuário vai acabar não se

lembrando de todos, e o objetivo de utilizar isso acabará tendo o resultado contrário

do esperado. A imagem abaixo mostra a tela de pedidos do iFood, nela o usuário

consegue visualizar até um número x de pedidos que já foram feitos no aplicativo. E

para facilitar para o usuário, o iFood apresenta a opção de “PEDIR NOVAMENTE”.

Que serve para automatizar uma determinada ação dentro do aplicativo, para que o

usuário não precise percorrer todo o caminho novamente para realizar um pedido

que já foi feito antes.


45

Fonte: Aplicativo do iFood para iOS.

8. Estética e design minimalista: menos é mais, só precisa estar à mostra

o que realmente é necessário para o usuário, o resto pode estar dentro de uma

“caixa” com outras opções. No aplicativo Nubank (Figura 15), a tela apresenta

apenas o que é necessário para o usuário do aplicativo, dispondo para ele também

opções de ajuda, dados, mas de forma menos enfática que o objetivo principal,

mostrar o valor das faturas que estão ativas, do usuário.

Figura 15: Tela do aplicativo Nubank

46

Fonte: Aplicativo do Nubank para iOS.

9. Auxiliar usuário a reconhecer, diagnosticar e recuperar-se de erros:

como o nome sugere, caso o usuário tenha feito algo errado, apresentar, de uma

forma não hostil, ao usuário uma solução ou uma dica para que ele possa tentar

corrigir seu erro. No aplicativo Hashtag Açaí, quando o usuário tenta realizar uma

compra no momento em que a loja encontra-se fechada, ele se depara com a

mensagem avisando-o sobre isso, e também o oferece a alternativa de agendar o

pedido. Além de diagnosticar o erro, oferece uma alternativa muito bem

apresentada, para o usuário.

Figura 16: Tela do aplicativo Hashtag Açaí

47

Fonte: Aplicativo do Hashtag Açaí para iOS (2017).

10. Ajuda e documentação: por último, mas não menos importante, aqui

é onde é colocado um tipo de manual de uso da interface, onde as dúvidas gerais são

postas para o usuário entende-las. Deve ser de fácil compreensão e não muito longa,

porque, segundo Nielsen (2007), quase nenhum usuário gosta de manuais. Na tela de

cartão do iFood, é mostrado um campo de preenchimento para que o usuário digite

as informações do cartão a ser adicionado no aplicativo. A distribuição das

informações é semelhante à do próprio cartão físico, o que já ajuda na identificação

dos dados. Mas mesmo assim, o iFood utiliza de uma imagem pequena, mas que é

muito importante para o usuário. Que é a representação do código que fica no verso

do cartão. Como ao realizar uma compra física, esse código não é necessário, o

aplicativo antecipa o fato de o usuário poder nunca ter comprado virtualmente e

utilizado tal código para isso, e então usa da imagem para atingir o cognitivo do

usuário, guiando-o à concluir seu objetivo.


48


Cybis, Betiol e Faust (2007) citam um conjunto de oito critérios ergonômicos,

que foram desenvolvidos por dois pesquisadores franceses, Dominique Scapin e

Chrstian Bastien. Os pesquisadores franceses apresentam esses oito critérios como

forma de aumentar a sistematização das avaliações de usabilidade de uma interface.

Os critérios principais apresentados são os seguintes:

Condução: visa favorecer e facilitar os usuários novatos à interagirem melhor

com a interface, ela deve informar e conduzir o usuário dentro da interface de forma

intuitiva;

Carga de trabalho: diz respeito aos elementos da interface que reduzem

significativamente a carga cognitiva e perceptiva do usuário. Para que o mesmo não

seja distraído do objetivo principal da interface, por elementos que podem ser

subistituidos ou eliminados;

Controle explícito: neste contexto, o controle explícito é dar ao usuário uma

maior liberdade para comandar a interface, aplica-se particularmente em tarefas

que sejam longas e onde o processamento possa vir a ser demorado;

Adaptabilidade: é como a interface irá interagir ao tratar com um público-

alvo vasto e variado, pois a personalidade de cada pessoa é diferente, e deve ser

levado em conta como é que a interface irá atender todos esses diferentes tipos de

49

usuário. Para isso a interface deve propor maneiras diferentes e alternativas de

realizar uma determinada tarefa, para que ela se adeque ao pensamento de cada

usuário, mas que no final eles cheguem ao mesmo objetivo;

Gestão de erros: trata sobre todos os mecanismos necessários para evitar ou

reduzir todos os erros que sejam possíveis de surgir dentro da usabilidade da

interface;

Homogeneidade/Consistência: serve para que o usuário saiba que ainda está

dentro da interface, para que sejam reconhecidos os elementos propostos no

aplicativo, independentemente da página que o usuário se encontre;

Significado de códigos e denominações: aqui é onde deve-se adequar o

objeto à informação, de maneira que a recordação do usuário seja mais fácil. Como

por exemplo, identificar o sexo como sendo o M para Masculino, e o F para Feminino,

e não o algoritmo 1 para Masculino e o 2 para Feminino;

Compatibilidade: é o grau de similaridade entre os sistemas operacionais,

uma consistência onde, independente de qual acessório o usuário estiver utilizando

a interface, ele consiga exercer as mesmas tarefas de forma igual entre eles.

Ao entender um pouco de como foi surgindo a necessidade das interfaces e

a importância da usabilidade para elas, é estudado em seguida os métodos e

heurísticas propostos para o desenvolvimento do projeto de uma interface que

apresente uma interação entre usuário e máquina que seja prazerosa e intuitiva, e

que conclua com eficiência os objetivos gerais e específicos propostos no início desta

pesquisa.

50

3. PROJETO DE DESIGN

A base deste projeto é o modelo de Garrett (2011). Garrett começou a

trabalhar na internet em 1995 como escritor e desenvolvedor de interfaces. Em 2002

publicou o um livro com título de The Elements of User Experience, sem tradução

para o português. Esse livro se tornou bastante popular, e é com base na versão de

2011 deste livro, que é baseada toda a metodologia deste projeto.

O autor mostra uma metodologia que apresenta cinco planos de evolução,

que vai do aspecto mais abstrato de um projeto, até o seu resultado final e

“palpável”, considerando assim todas as possibilidades que o usuário possa vir a

executar dentro do projeto.

É utilizado também para embasar a pesquisa as heurísticas e orientações de

Nielsen (1995) e o estudo de cognição de Preece, Rogers e Sharp (2005).

Figura 18: Os elementos da experiência do usuário, de Garret

Fonte: https://www.caelum.com.br/apostila-ux-usabilidade-mobile-web/images/01_experiencia/diagrama_ux.png (2017)

O processo metodológico de Garrett (2011) se baseia em cinco etapas:

1. Estratégia: necessidade do usuário e objetivos do projeto;

2. Escopo: requisitos e especificações;

51

3. Estrutura: interação e arquitetura;

4. Esqueleto: design da interface, informação e navegação;

5. Superfície: design visual do projeto.

Com base neste modelo foi desenvolvido a presente pesquisa.

3.1 ESTRATÉGIA

Garrett (2011) aponta que a razão mais comum do fracasso das interfaces é

a não resposta de duas perguntas básicas para a criação de um software:

1. O que queremos do produto? (Objetivo)

2. O que os usuários querem do produto? (Necessidades)

A resposta destas duas perguntas é o que irá formar o plano estratégico

proposto pelo autor, o objetivo do produto e as necessidades do usuário.

3.1.1 Objetivo do produto

1. Objetivos do negócios

Nesse tópico, Garrett (2011) aponta que a preocupação aqui é manter um

equilíbrio dentro do objetivo do produto. Não amplificando demais, e nem

especificando demais.

O objetivo não pode ser amplo de uma forma que não seja apontado uma

forma de resolver tal objetivo, como o autor cita: o objetivo de uma empresa é

ganhar dinheiro. Ok, mas como ela vai conseguir fazer isso é o que é necessário saber

aqui. E o objetivo não pode ser especifico demais sem um contexto, como por

exemplo: uma ferramenta que sirva para que o usuário possa mandar uma mensagem

ao servidor sempre que quiser. Qual seria a importância dessa ferramenta? Como ela

vai ajudar no desenvolvimento de uma empresa, negócio?

É preciso desenvolver as condições para se chegar ao sucesso em algo, mas

é tão importante como saber qual é o caminho necessário para chegar a tal ponto.

(Garrett, 2011)

2. Identidade da marca

Para Garrett (2011), o conceito da marca se estende muito além do visual, é

um conjunto de associações conceituais e emocionais. Deve-se escolher se tal

52

associação vai ocorrer por acidente ou se será algo consciente e realizado para que

fosse percebido de tal forma. A identidade da marca ajuda a criar uma impressão

através da experiência do usuário com ela.

3. Métricas do sucesso

Os objetivos que são desejados, devem ser avaliados de forma a saber se eles

estão sendo alcançados ou não. Esses dados são as métricas do sucesso de um

software, nesse caso em específico, de um aplicativo. (Garrett, 2011)

Essas medidas de usabilidade podem ser avaliadas no tempo gasto dentro da

interface, no retorno dos usuários, etc. O tempo gasto dentro da interface pode ser

relativo de acordo com o objetivo do projeto. Caso o objetivo seja a exploração da

maioria de páginas possível, o ideal é prender a atenção do usuário o máximo de

tempo que puder. Já se o objetivo é algo que precise ser realizado em segundos,

quanto mais tempo o usuário passar no aplicativo, pior será a usabilidade do

mesmo(Garrett, 2011).

3.1.1 Necessidades do usuário

Ao realizar um projeto, deve-se ter em mente que ele não está sendo feito

para quem está projetando, e sim para os potenciais usuários dele. Segundo Garrett

(2011) para projetar uma interface que possua uma boa usabilidade, é preciso

entender quem são os usuários e o que eles estão necessitando dentro do projeto

proposto. É complicado identificar e analisar as necessidades dos usuários, porquê é

também preciso entender que cada pessoa tem seus próprios gostos. Mas ao

selecionar um determinado grupo de usuários, a chances de atender às suas

necessidades aumenta exponencialmente.

Ao definir quem são os usuários alvos, quem o projeto deve alcançar, é

necessário realizar pesquisas para definir com mais detalhes quem são os usuários e

entender com mais clareza o que eles precisam e esperam de um projeto voltado

para eles.

Segmentação do usuário

53

Para uma melhor definição dos possíveis usuários do sistema, Garrett (2011)

propõe a segmentação. Que é a separação em grupos pequenos de usuários que

apresentem as características em comum entre eles, e entre o projeto em questão.

Essas segmentações podem ser realizadas por diversos fatores: região, idade, sexo,

etc. Ao definir segmentos e realizar pesquisas, é possível que haja alterações ou

ajustes dentro das segmentações escolhidas. Garrett, mostra um exemplo de uma

segmentação por idade, onde um grupo com idade entre 24 a 34 anos possa achar

que as necessidades de um outro grupo entre 30 a 34 anos diferem, o que pode

ocasionar na segmentação entre esses dois grupos. E que também pode ocorrer o

contrário, onde uma determinada faixa etária possa se assemelhar e agregar ao seu

segmento um outro grupo com idades maiores, ou menores.

Mas, não é possível atender dois segmentos distintos com uma mesma

solução. “Nossas opções neste ponto são focar em um segmento de usuários para a

exclusão do outro, ou para fornecer duas maneiras separadas para os usuários se

aproximarem da mesma tarefa.” (Garrett, 2011. Pg. 45)

Pesquisa do usuário

Para entender e aprender o que o usuário necessita, é necessário coletar

informações. Esses dados são coletados através de pesquisas, entrevistas, testes de

usabilidade, etc. que são as formas mais adequadas para este objetivo (GARRETT,

2011).

Foi feito um levantamento com usuários que possuem smartphone e acesso

a internet através de um questionário de múltipla escolha. A pesquisa foi realizada

com pessoas que moram no agreste de Pernambuco, principalmente na cidade de

Caruaru. Afim de avaliar a porcentagem de usuários de aplicativos de delivery e

quantos deles seguem alguma dieta ou sentem falta de opções mais saudáveis

disponíveis em tais aplicativos. A duração da pesquisa e da coleta de dados durou

sete dias, de 11 a 17 de Outubro de 2017.

A pesquisa foi realizada através de um questionário feito em um arquivo de

planilha disponível nas ferramentas do Google, o link, com as perguntas foi enviado

pelo Whatsapp, aplicativo de mensagens instantâneas. A pesquisa realizada não teve

54

uma restrição de idade, pois foi uma análise quantitativa para gerar um

levantamento mais amplo da quantidade de usuários de aplicativos de delivery.

Essa pesquisa serviu para mostrar o quão a tecnologia e os aplicativos estão

presentes atualmente no dia-a-dia da população, e também para ter uma ideia do

quão popular é o uso de aplicativo de delivery, também avaliado dentre os usuários,

se eles possuem algum tipo de dieta ou sentem falta de opções mais saudáveis nos

aplicativos dispostos na região.

Todos os trinta e três questionários respondidos foram analisados, para que

pudesse ser feita de forma mais efetiva o fichamento das informações.

O questionário foi composto de dez perguntas:

1. Qual sua idade?

2. Quantas horas por dia você passa na internet?

3. Onde você passa a maior parte do tempo na internet?

4. Já utilizou algum aplicativo para pedir comida?

5. Caso sua resposta anterior seja sim: já se sentiu frustrado ao utilizar

algum aplicativo do tipo?

6. Quantas vezes na semana você costuma usar esse tipo de aplicativo?

7. Você segue alguma dieta alimentar?

8. Você sente a falta de opções de pratos mais saudáveis nesses aplicativos?

9. Você gostaria de um aplicativo que desse mais opções de escolha nos

alimentos?

10. Qual sua nota para os aplicativos de delivery de comida que você utiliza?

A média de idade dos usuários de smartphones foi avaliada para que seja

gerada uma interface que se adeque às suas limitações e necessidades. A quantidade

de horas que o usuário passa online, e qual o dispositivo mais utilizado para acessar

a internet, são importantes para definir qual o foco da interface a ser projetada, se

smartphone, desktop, tablet, etc.

É necessário ter os dados da porcentagem de quantos avaliados já utilizaram

de algum aplicativo para pedir comida. Isso serve para utilizar como memória do

usuário uma ferramenta para o desenvolvimento de uma interface que é similar ao

já utilizado pelo usuário.

55

E por fim, para os que já utilizaram algum serviço de delivery de alimento,

se eles sentem falta de produtos que possuam ingredientes mais saudáveis ou que se

adequem a sua dieta. A fim de coletar dados que apontem dados positivos e negativos

de aplicativos que sejam similares aos do projeto de pesquisa.

O objetivo do questionário foi levantar, principalmente, estatísticas da

quantidade de pessoas que utilizam como primeiro dispositivo, smartphone para

acessar a internet, que já fizeram algum pedido de comida por aplicativo e se

sentiram-se satisfeitos com as opções disponíveis em tal aplicativo.

Com o resultado do questionário, os dados mais relevantes:

Figura 19: Gráfico de idade do questionário com usuários

Fonte: Própria (2017).

Figura 20: Gráfico de uso de aplicativo de comida do questionário com usuários

56


Figura 21: Gráfico de tempo na internet do questionário com os usuários


57

Segundo o questionário, mais de 60% dos avaliados costumam passar mais

tempo online na internet através do seu smartphone. Mostrando que o existes espaço

de mercado para aplicativos, e só tende a crescer com a já popularização dos

celulares com acesso à internet. Também é possível ver na pesquisa que a maioria

das respostam apontam que os usuários já utilizaram de algum aplicativo para pedir

comida dentro de cidades no agreste de Pernambuco.

Pesquisa com público-alvo

Depois de realizada a pesquisa quantitativa mais ampla com usuários, foi

realizado uma entrevista com o público-alvo do projeto de pesquisa. Gill et al (2008

apud OLIVEIRA et al, 2012) apontam, que de modo geral, existem três tipos de

entrevistas que podem ser realizadas em uma pesquisa: entrevistas estruturadas,

não estruturadas e semiestruturadas.

As entrevistas estruturadas são as entrevistas onde tudo segue um roteiro, e

não há variação ou margem para inserir perguntas fora das predeterminadas. As não

estruturadas são realizadas com quase nenhuma organização, e pode começar com

uma pergunta simples e depois tomar um rumo imprevisível, geralmente é utilizada

quando não se sabe nada sobre o assunto pesquisado, mas é preciso ter um

aprofundamento sobre ele. E as semiestruturadas, que são as que possuem um

roteiro preparado, mas que permitem ao entrevistador a liberdade de adicionar

novas perguntas, de acordo com as respostas do usuário, fazendo com que o conteúdo

tenha mais qualidade e mais conteúdo.

Para este projeto, foi utilizada uma forma de entrevista utilizando o método

semiestruturado. A entrevista foi realizada através do aplicativo Whatsapp,

disponível para sistemas operacionais Android e iOS, de forma que o usuário pudesse

responder as questões de onde estivesse, podendo optar por digitar suas respostas

ou por envio de áudio. Estas entrevistas serviram para complementar a pesquisa

anterior, ela é importante, pois ajuda a traçar o perfil do público-alvo do projeto de

pesquisa, afim de definir quais os problemas e dores enfrentados por eles de acordo

com suas restrições.

58

Foram selecionados alguns requisitos para seleção dos entrevistados, eles

precisariam ter alguma restrição alimentar, podendo ser por alguma doença, alergia,

dieta, academia, vegetarianismo, ou por escolha. E também teriam que possuir ou

já ter possuído algum celular smartphone com acesso à internet.

As pesquisas semiestruturadas consistem de várias questões-chaves, que de

acordo com as respostas dos entrevistados, podem ir se ramificando para outras

perguntas, até chegar na próxima questão-chave da entrevista (GILL et al, 2008 apud

OLIVEIRA et al, 2012). Para a execução desta pesquisa, foram definidas quatro

perguntas-chave:

1. Você segue alguma dieta ou evita comer/beber certos tipos de alimentos?

Devido a doenças, alergias, academia ou por opção mesmo.

2. Como você escolhe o que comer no dia-a-dia? Costuma reparar nas

informações nutricionais dos alimentos?

3. Você encontra com facilidade restaurantes ou mercados que ofereçam

refeições que atendam suas restrições quando come fora de casa?

4. Já pediu ou costuma pedir comida por delivery?

Lembrando que essas perguntas podem sofrer alguma modificação, ou podem

ser inseridas novas questões diferentes para cada entrevistado, tudo dependendo das

respostas deles.

Para a pesquisa em questão, foram entrevistadas seis pessoas, com idades

entre 26 e 42 anos. Dessas seis pessoas, uma já foi vegetariana, e atualmente apenas

não consome carnes vermelhas. Outra é vegetariana e possui artrite reumatoide. Um

é professor de capoeira, e pratica bastante exercícios físicos. Uma possui alergia à

frutos do mar. E as outras pessoas evitam, por opção, alimentos industrializados,

carboidratos, açúcar, etc.

Entrevistado 1 – Homem, 33 anos, reside em Caruaru, PE. É professor de

Capoeira, evita comer produtos industrializados e frituras;

Entrevistado 2 – Mulher, 29 anos, reside em Caruaru, PE. Trabalha como

Caixa e possui alergia a frutos do mar;

Entrevistado 3 – Mulher, 42 anos, reside em Caruaru, PE. É psicóloga, e evita

alimentos industrializados, carboidratos e açúcar;

59

Entrevistado 4 – Mulher, 30 anos, reside em Caruaru, PE. É professora, já foi

vegetariana e atualmente ‘apenas’ não consome carnes vermelhas;

Entrevistado 5 – Mulher, 31 anos, reside em Caruaru, PE. Trabalha como

contadora em escritório, evita alimentos embutidos e convive com um familiar que

segue uma dieta vegana.

Entrevistado 6 – Mulher, 27 anos, reside em Olinda, PE mas já morou em

Caruaru. Autônoma, segue uma dieta vegetariana e tem artrite reumatoide.

Um dos pontos principais foi analisar mais a fundo os problemas enfrentados

por quem escolhe seguir uma dieta diferente. A Entrevistada 4, mostra a dificuldade

dentro da região para pessoas vegetarianas, ela diz que seguiu uma dieta vegetariana

durante um período de quase dois anos, e que sempre costumava fazer suas refeições

fora de casa, e era complicado achar opções vegetarianas, ela falou o seguinte: “Era

complicado achar almoço vegetariano, pois eu almoço muito fora de casa. Quando

achava almoço vegetariano, era sempre a mesma coisa, o que me enjoava.”. Depois

que voltou a comer carne branca, como peixe e frango, ela não tem sentido mais

tanta dificuldade como antes. A Entrevistada 3, quando perguntado se encontra com

facilidade locais que ofereçam os alimentos que come, ela respondeu: “Não! Não

mesmo! É horrível, encontrei um em Recife e o prazer de comer lá foi super legal”.

A Entrevistada 2, possui alergia à frutos do mar, e relata que ao comer fora

uma vez, em um dos pratos pedidos veio algum ingrediente dentro da comida que

provocou uma reação alérgica. Ela afirmou que no cardápio não continha nada

informando que poderia conter algum tipo de ingrediente que pudesse provocar

alguma reação para pessoas que possuam esse tipo de alergia.

Quando os entrevistados foram questionados se costumam reparar nas

informações nutricionais dos alimentos, apenas dois responderam que sim. A

Entrevistada 6, pelo fato de ser vegetariana e ter artrite, verifica sempre se há

traços de carne animal ou se o alimento em questão possui muito sódio. E a

Entrevistada 5, afirma que começou a reparar nessas informações nos últimos

tempos, quando questionado quais informações e ingredientes ela toma mais

cuidado, a sua resposta foi: “Alimentos que não contenham ovos e leite, pois moro

com uma vegana, e optamos por menos temperos industrializados, não consumimos

mais suco de polpa e sim só frutas”.

60

Dos entrevistados, todos já pediram alguma vez serviços de comida por

delivery, mas apenas dois deles o fizeram por meio de algum aplicativo específico

para isso, os outros utilizaram de ligação. E das vezes que realizaram pedidos por

delivery, apenas um deles encontrou a opção de montar o prato, os outros sempre

foram de opções já prontas, sem possibilidade de montar os ingredientes. Dois deles

afirmaram que já tiveram que retirar, dos pratos comprados, ingredientes que não

comem, ou por falta de opção de montar o prato, ou mesmo quando sendo pedido

para a retirada de um determinado alimento, ele vir do mesmo jeito no pedido.

Figura 22: Gráfico comparativo entrevista

Fonte: Própria 2017.

Com base nessa entrevista, foi constatada a dificuldade encontrada por essas

pessoas para encontrar um local que atendam suas restrições alimentares, e que ao

experimentarem alguns locais, ainda correm riscos de haver algo que possa lhes fazer

mal, dentro desses alimentos. Foi constatado também, que mesmo evitando alguns

alimentos que tenham algum ingrediente específico, apenas dois entrevistados

reparam nas informações nutricionais dos produtos e alimentos que costuma

comprar. Também foi percebido que os pedidos de delivery da região deixam a

desejar no quesito de personalização dos pratos, onde cinco dos entrevistados que

já pediram por delivery afirmaram que eram pratos prontos, e a maioria dos

61

entrevistados utilizaram de ligação para fazer pedidos, com apenas duas pessoas

utilizando algum aplicativo específico para o serviço.

Personas

De acordo com essa pesquisa base dos usuários, e tendo em vista qual seria

o público alvo do aplicativo, Garrett (2011) mostra a importância de criar personas

para o desenvolvimento de um projeto. Essas personas são criadas baseadas em

pesquisas feitas com usuários de aplicativos similares e com potencial público alvo

do aplicativo. As personas são uma forma de tornar mais real os usuários, em meio a

amplas estatísticas quem podem acabar desfocando de quem é o alvo do projeto.

A maior parte das informações das Personas são inventadas com base nas

pesquisas realizadas, para dar mais consistências ao usuário da pesquisa. Isso faz com

que os tornem mais vivos e sirvam de base para realmente adaptar a pesquisa para

os usuários alvo dela.

Figura 23: Persona 1

62


Figura 24: Persona 2

63


Com base nas pesquisas realizadas das necessidades do usuário, foram

criadas duas personas. Uma mulher de 25 anos e um homem de 29, os perfis são

diferentes em alguns pontos, semelhantes em outros, e chegam em um ponto de

usuário alvo da pesquisa. Pois a persona Julianna tem uma dieta centrada no

vegetarianismo, e a persona Carlos, possui doenças relacionadas ao consumo

excessivo de alimentos que prejudicaram sua saúde. Com isso ambos têm em comum

o consumo, ou a necessidade de consumir, produtos que não possuam derivados de

animais, ou que reduzam bastante esses derivados dentro de sua dieta.

Análise de similares

A análise de similares é uma análise, realizada antes do desenvolvimento de

um projeto, para identificação dos pontos fracos e fortes de um projeto ou produto

64

que é considerado do mesmo segmento, e que possa vir a ser um competidor para o

projeto desenvolvido. (CYBIS, BETIOL E FAUST, 2007).

Utilizando da ideia proposta por Nielsen (2007), para a análise de similares,

foram selecionados dois aplicativos que possuem uma estrutura próxima ou similar à

do projeto em questão, que foram o: iFood e Hashtag Açaí. Esse último é um

aplicativo exclusivo da cidade de Caruaru, desenvolvido especificamente para uma

empresa no segmento alimentício.

O iFood é uma rede de delivery de amplitude mundial, que apenas coloca o

cardápio de outras empresas dentro do seu aplicativo, para que essas sejam

escolhidas dentre outros milhares pelo usuário. As empresas que estão no aplicativo

decidem se colocam, ou não, opção para pedidos específicos para quem possua

restrição alimentar. Porém, não há uma forma fácil de saber quais são essas

empresas, não há um tópico específico dentro do aplicativo.

Já o Hashtag Açaí foi desenvolvido especificamente para uma empresa que

trabalha com um produto específico, logo ele foi criado visando totalmente um

público definido. Sendo assim algo mais específico e eficiente.

A pesquisa foi realizada através de análise de tarefas propostas para os

usuários e utilizando o modo de “pensar alto” e a regra dos dez minutos, onde o

usuário vai falando em voz alta o que está pensando ao realizar a tarefa. A regra dos

dez minutos citada por Preece, Rogers e Sharp (2005), foi um tempo muito alto, pois

as tarefas propostas foram realizadas em um tempo bem menor do que o de dez

minutos. Através dessas observações avaliador pode perceber algum tipo de

dificuldade na interação do usuário com a interface analisada.

Foram avaliados um total de seis usuários, sem restrição de idade ou sexo,

que possuam um smartphone e que tenham acesso à internet no dia-a-dia. Essa

pesquisa foi realizada de forma mais livre, pelo fato de o que estará sendo analisado

aqui será a interação do usuário com um aplicativo similar, seja por um que já seja

experiente, ou por um que seja leigo em aplicativos do mesmo segmento.

A pesquisa foi realizada nos dias 3 e 4 de Novembro de 2017, com

funcionários da empresa Companhia Digital, localizada na cidade de Caruaru,

Pernambuco. A avaliação foi realizada no intervalo de almoço dos funcionários.

Todos os usuários avaliados usaram o mesmo aparelho, um iPhone 5s, da Apple, para

que assim não houvesse nenhuma adversidade provinda da diferença de marca dos

65

aparelhos de smartphone. Foram selecionadas quatro heurísticas de Nielsen para

usar como parâmetro na avaliação da usabilidade dos aplicativos:

TEMPO PARA REALIZAÇÃO DA TAREFA;

NAVEGAÇÃO

FEEDBACK DO SISTEMA

METÁFORAS VISUAIS E MEMÓRIA DO USUÁRIO

Foram escolhidas essas quatro heurísticas para, de modo geral, analisar quais

os problemas que poderiam ser encontrados dentro da usabilidade destes aplicativos.

Como dito, este é um levantamento mais livre para uma avaliação de similares que

visa descobrir os defeitos mais notáveis, e quais as qualidades que tais aplicativos

podem proporcionar para inspirar a criação da interface deste projeto de pesquisa e

para que pudesse também ser mais amplo a quantidade de pessoas avaliando um

mesmo aplicativo.

Para realizar o teste de usabilidade, foram realizadas duas tarefas

consideradas básicas para os mesmos:

1. REALIZAR A COMPRA DE UM ITEM DE LIVRE ESCOLHA DO USUÁRIO, VOLTAR

PARA A TELA INICIAL E REALIZAR OUTRA COMPRA DIFERENTE;

2. REALIZAR A COMPRA DE UM PRODUTO ESPECIFICADO PELO AVALIADOR,

VOLTAR PARA A TELA INICIAL E REALIZAR OUTRA COMPRA PROPOSTA PELO

AVALIADOR;

Através dessas duas tarefas os usuários foram avaliados, o avaliador não

poderia interferir para ajudar o avaliado, mesmo que ele não conseguisse avançar

para conclusão da tarefa, o tempo de dez minutos para a conclusão da tarefa não

fora dito para os avaliados, para que eles não se sentissem pressionados ou induzidos

a cometer erros devido ao tempo.

Na figura abaixo, está o modelo que foi utilizado pelo avaliador ao realizar o

teste com os usuários. A cada passo em que o usuário avançava dentro da tarefa

proposta era anotado, caso necessário, detalhes e observações que fossem

considerados de importância de acordo com as heurísticas escolhidas para a

avaliação do aplicativo em questão. E então eram dadas as notas para cada heurística

66

avaliada, de acordo com as ações e comentários dos usuários ao interagirem com as

interfaces de ambos os aplicativos.

Figura 25: Modelo do questionário para teste de usabilidade de similares


IFOOD

1. TEMPO PARA REALIZAR TAREFA;

O iFood, apresentou uma boa avaliação no quesito de tempo para realização

das tarefas. Todos os analisados conseguiram realizar as tarefas no tempo estipulado,

sem grandes complicações.

E dois dos usuários sentiram confusão apenas em uma das telas analisadas,

que é no momento de adicionar o item escolhido, ao clicar em “adicionar”, a tela

volta para a página do restaurante escolhido, e abaixo aparece uma aba com um

carrinho mostrando que ali existe um item, que foi o que acabara de ser escolhido.

Figura 26: Tela do iFood

67

Fonte: Aplicativo iFood para iOS (2017).

Para esses dois avaliados essa tela se mostrou confusa durante alguns

segundos, pois eles não sabiam se já tinham realizado ou não a compra, até notarem

que existia a abar de carrinho abaixo. Em seguida tudo ocorreu normalmente,

selecionaram a forma de pagamento e assim finalizando o pedido simbolicamente,

pois não foi realmente feito o pedido.

2. NAVEGAÇÃO

Nenhum usuário apresentou dificuldade ao manusear o aplicativo. Na

primeira tarefa houve um pouco mais de lentidão, pois foi dado a eles a escolha livre

de algum serviço dentro do aplicativo. O que fez eles perderem um pouco mais de

tempo navegando dentro da interface e das opções nela dispostas.

3. FEEDBACK DO SISTEMA

A resposta do sistema também se mostrou boa, mas não em todo o momento.

Um dos usuários avaliados ficou tentando colocar complementos a mais do permitido,

e depois que percebeu que não estava sendo adicionado, pois a resposta da interface

a essa limitação foi de deixar o botão de “+” mais claro, mas o usuário não percebeu

e tentou adicionar outros itens. Faltou uma mensagem para prevenir esse erro, uma

68

das heurísticas de Nielsen (2006) mostra que deve ser mostrado ao usuário alguma

alternativa para que ele perceba o erro cometido, ou que o evite.



Shneiderman (2005) fala que toda ação do usuário necessita de um feedback

da interface, seja essa ação pequena ou grande. O usuário deve ter noção do que

está fazendo, e saber se aquilo é bom ou ruim para o que ele pretende dentro do seu

objetivo.

4. METÁFORAS VISUAIS E MEMÓRIA DO USUÁRIO

O iFood utiliza de metáforas visuais dentro do seu aplicativo. É possível

realizar uma tarefa designada dentro do aplicativo com facilidade. Utiliza ícones,

que remetem às diversas opções dentro do aplicativo, como ferramentas de busca,

perfil, configurações, etc.

Isso apoiado à memória do usuário, pois são utilizados ícones e diagramações

comuns de usuários de smartphones, para que eles se sintam em um ambiente

familiar ao utilizar a interface. Nielsen (2006) fala em uma de suas heurísticas sobre

Consistência e Padrões, que é o uso de uma interface padrão, na medida do possível,

para que o usuário consiga utilizar a interface mesmo sendo a primeira vez nela,

baseado na memória de utilização de outras interfaces.

69

HASHTAG AÇAÍ

1. TEMPO PARA REALIZAR TAREFA

Com relação ao iFood, o tempo para realizar a tarefa no Hashtag Açaí foi

maior, mas em nenhum dos avaliados o tempo excedeu os dez minutos propostos

dentro da pesquisa.

A interface de pedidos do aplicativos são diferentes, enquanto o do iFood ao

selecionar uma categoria, a próxima surgirá em uma nova tela, no Hashtag Açaí ao

selecionar seu produto, os itens disponíveis aparecem em uma tela só.

2. NAVEGAÇÃO

Figura 28: Tela do Hashtag Açaí

Fonte: Aplicativo Hashtag Açaí para iOS (2017).

Ao selecionar o produto no aplicativo, o usuário tem que ir deslizando a tela

para baixo para ir selecionando os itens que deseja adicionar. Isso diminuiu o tempo

para realizar a tarefa, pois se o usuário quisesse adicionar algum item diferente de

outra opção, precisaria apenas rolar a barra até acha-lo dentre os outros, ao invés

de ir voltando tela por tela, e consequentemente tendo que repetir todos os pedidos

dela.

70

Em muitas telas também não encontramos a opção de “voltar”, o que

acarreta em confusão do usuário, e que segundo Krug (2008) é um dos botões ao qual

os usuários estão mais apegados, mesmo havendo outra forma de ir para outra tela

ou voltar para a tela anterior. Nas telas de confirmação de pedido e na do carrinho,

a opção de excluir o item do carrinho está oculta, onde gerou confusão na hora de

excluir o item desejado. A opção só aparece quando o usuário pressiona o item no

carrinho, mas a interface não deixa nem um pouco intuitiva a existência dessa opção.



3. FEEDBACK DO SISTEMA

Cumpre o que é esperado de uma interface que quer orientar o usuário do

que ele está clicando. Mas há a falta de animações que deixem claro o “toque” do

usuário na interface, deixando muitas vezes a interface estática.

Com relação as restrições que o usuário tem dentro do aplicativo, a interface

mostrou-se eficiente. Na questão de itens que o usuário pode escolher para adicionar

ao seu pedido, ao extrapolar o estipulado, ele mostra uma mensagem avisando que

não é mais possível adicionar elementos.


71


4. METÁFORAS VISUAIS E MEMÓRIA DO USUÁRIO

As metáforas visuais dentro do Hashtag Açaí existem, mas não são muito

exploradas, são utilizados poucos ícones dentro da interface, a maioria fixo no menu

da parte inferior da tela.

Porém o aplicativo utiliza da memória do usuário para substituir a falta de

metáforas visuais, salvo alguns detalhes, como o já citado botão de voltar. Tal

ausência em algumas telas deixa o aplicativo com a padronização falha.

Com essa avaliação realizada através dos testes com usuário, foi visto que os

aplicativos analisados cumprem sua função dentro do esperado, mas apresentam

alguns detalhes negativos que podem ser ajustados para uma melhor usabilidade e

interação.

Aplicativos complementares

Para o projeto do aplicativo, também foram estudados alguns aplicativos de

dieta, para coletar informações de como são utilizados tais aplicativos para que o

usuário tenha um controle maior de sua alimentação.

72

As análises aqui realizadas foram apenas nas telas que servem para

complementar o objetivo do projeto desenvolvido, não sendo necessárias o estudo

de telas consideras dispensáveis. As avaliações mais detalhadas foram feitas nos

aplicativos similares, mostrado anteriormente nesta pesquisa.

Foram escolhidos 2 aplicativos gratuitos, com a maior taxa de download e

avaliações positivas dentro da AppStore: Dieta e Saúde e Tecnonutri.

1. Dieta e Saúde:

Figura 31: Tela do aplicativo Dieta e Saúde

Fonte: Aplicativo Dieta e Saúde para iOS (2017).

O Aplicativo do Dieta e Saúde usa um estilo de jogo com recompensas em

seu aplicativo para ajudar seus usuários a atingirem uma meta, que seria perder peso

ou ganhar massa, que é escolhida no começo do aplicativo.

Figura 32: Tela do aplicativo Dieta e Saúde

73

Fonte: Aplicativo Dieta e Saúde para iOS (2017).

Ele separa as refeições diárias por pontos, e no menu de diário são sugeridos

quantos ponto cada refeição de possuir. O usuário pode ir mudando os alimentos para

que gerem a mesma pontuação. Mas para uma seleção mais detalhada, o aplicativo

exigem a versão paga.

O que faz falta aqui é a descrição das calorias existentes em cada alimento,

ao separar por pontos o usuário pode sentir a dieta um pouco vaga, por falta de

informações suficientes da quantidade de ingredientes que ele está ingerindo.

2. Tecnonutri

Este aplicativo já é bem mais completo. Ele proporciona informações

nutricionais, quantidade recomendada por dia, mostra gráficos de como está a dieta.

Bem mais informacional e útil para a pesquisa realizada.

Figura 33: Tela do aplicativo Tecnonutri

74

Fonte: Aplicativo Tecnonutri para iOS (2017).

Esses aplicativos de dieta sempre requisitam informações como: peso,

altura, idade, etc. Para realizar uma dieta mais aprofundada. No projeto desta

pesquisa, o objetivo vai ser outro, as informações nutritivas de cada alimento e a

seleção de uma dieta irá de acordo com as restrições alimentares do usuário, e com

base em uma análise de algum nutricionista profissional.


75


Nas telas da figura acima, é visto um gráfico com as informações nutricionais

dos alimentos que foram selecionados. Na outra tela é possível montar as suas

refeições baseadas na sua dieta, há a informação da quantidade de calorias

recomendadas para cada refeição.


76


Aqui é mostrada a quantidade de calorias que cada refeição deverá ter para

que a dieta traçada pelo usuário seja cumprida com eficiência. Ao ir montando as

suas refeições, o sistema mostra ao usuário as informações nutricionais que cada

item irá possuir, ajudando o usuário a se manter dentro das restrições de sua dieta.

Com o estudo rápido desses dois aplicativos, foi montado um plano

estratégico de como implementar informações que ajudem o usuário com suas

restrições alimentares, utilizando de dados que informem ao usuário as calorias e

alimentos que estarão presentes na sua refeição.

Figura 36: Comparativo das caracteristicas dos aplicativos Dieta e Saúde e Tecnonutri

77

Fonte: Própria (2017)

3.2 ESCOPO

No plano de escopo proposto por Garrett (2011), é onde será definido as

especificações funcionais e requisitos de conteúdo da interface, aqui será analisado

tudo que é a interface precisará ter para atender todas expectativas do usuário.

3.2.1 Especificações funcionais

Nesse passo, dentro de escopo, é onde é necessário compreender o aplicativo

tanto como sistema de hipertexto quanto como uma interface. E definir quais as

especificações que deverão ter, para que ambos se completem. Garrett (2011) ainda

fala que precisamos ter uma noção clara do que os usuários querem, para que assim

possamos satisfazer todos os objetivos estratégicos vistos anteriormente.

Como aplicativo de delivery, e com foco em usuários que tenham alguma

restrição alimentar baseada em alimentos de origem animal, foram definidos as

especificações funcionais como as seguintes:

1. O aplicativo irá ajudar o usuário a montar o seu prato, podendo ser de

forma livre, ou de forma orientada seguindo uma dieta baseada na

quantidade de calorias de cada alimento.

2. Também por restrição de um determinado alimento, exemplo: carne,

leite, ovo, etc.

78

3. Escolher as guarnições que estiverem disponíveis no dia em que ele estará

realizando o pedido.

4. Será possível também a escolha de pratos já montados disponíveis no

aplicativo, contendo a quantidade de carboidratos que cada um possui.

5. Existirão pratos prontos que irão variar de acordo com o dia, assim como

as guarnições para a montagem dos pratos.

6. Não haverá telas que acarretem na demora da conclusão do objetivo do

usuário, já que se trata de um aplicativo de delivery, é necessário que o

processo para o pedido seja o mais rápido e sucinto possível.

7. Será utilizada uma interface limpa e que enfatize na tarefa que o usuário

deseja realizar. Em alguns momentos ocultando alguns itens que possam

vir a atrapalhar o usuário na utilização da interface.

8. A interface irá informar ao usuário alguma ação que o aplicativo não possa

fazer, ou que necessite de outra para ser feita.

9. O usuário poderá alterar suas informações a qualquer momento que

desejar. Dados como cartão de crédito, endereço, telefone.

Partindo da definição das especificações funcionais que a interface do

aplicativo deverá ter para atender seus usuários da melhor forma possível, Garrett

(2011) mostra o próximo passo como sendo a definição dos requisitos do conteúdo da

interface.

3.2.2 Requisitos do conteúdo da interface

GARRETT (2011) fala que na maioria das vezes que se fala em conteúdo, é

referindo-se à textos, mas aqui, vídeos, imagens podem tornar-se mais importante

que o texto em si, ou bem mais impactantes se acompanhados um do outro.

Ele cita o fato de que em relação aos objetivos estratégicos propostos,

qualquer requisito pode vir a parecer uma boa ideia. Mas isso vai depender de pessoas

que vão estar responsáveis por cria-las. Por quê uma interface com muitos recursos

pode tornar-se inviável tanto para quem está cuidando dela, quanto para os usuários,

podendo assim deixar buracos enormes dentro do aplicativo.

79

O projeto aqui proposto, vai utilizar imagens para poder atender às

necessidades do usuário. Garrett (2011) diz que o tamanho do conteúdo dos recursos

terá enormes influências na experiência do usuário. Sendo assim necessário

estipular, por exemplo, tamanhos de textos, dimensões das fotos, etc. Ele diz que

não precisam ser precisas, mas que tenham uma proximidade suficiente para se ter

noção de como vai sair o aplicativo.

Garrett (2011) ainda afirmar que para trabalhos que tenham muito conteúdo,

é necessário ter um inventário de conteúdo dentro do projeto, para que assim todos

que estarão fazendo parte dele, saibam o conteúdo que eles têm para trabalhar.

Foram definidos os seguintes pontos:

1. Deixar a interface com uma usabilidade melhor utilizando de imagens e

ícones que facilitem a identificação do conteúdo pelo usuário.

2. Imagens utilizadas terão um tamanho fixo, apenas para separar melhor

cada item dentro de uma lista de escolha dentro da interface.

3. Botão de voltar, que segundo Jakob (2005), é de extrema importância

para o usuário. O botão estará disponível na maioria das telas, salvo as

que fora identificada a não necessidade do mesmo.

4. Usuário poderá alterar suas informações, tais como: endereço, cartão de

crédito, etc.

5. Ferramenta de busca, também considerada importante em diversas

interfaces, não se encaixa na usabilidade do aplicativo proposto.

6. Padrão de cores, ícones e diagramação, mantendo intuitivo a usabilidade

dentro de todas as telas do aplicativo.

7. Informações nutricionais de cada prato/alimento escolhido, mostrando

ao usuário a quantia individual e total do pedido selecionado.

3.3 ESTRUTURA

Para Garrett (2011), o terceiro dos cinco passos de sua metodologia, a

estrutura, “é o ponto em que nossas preocupações se deslocam das questões mais

abstratas de estratégia e alcançam os fatores concretos que determinarão o que os

usuários finalmente experimentam. ” (Idem, 2011. P. 80). Ou seja, é onde tudo que

foi definido na estratégia e no escopo vão entrar na parte mais concreta do projeto,

80

onde veremos a interface começar a tomar forma, seguindo todos os estudos e

pesquisas realizados.

Segundo o autor, design de interação e arquitetura de informações soam

como algo muito técnico, mas ele afirma que não são áreas realmente sobre

tecnologia, mas sim entender como as pessoas, usuários, comportam-se e pensam. E

ao entender isso, a experiência para aqueles que utilizarão a interface tendem a ser

mais gratificantes e prazerosas.

3.3.1 Design de interação

Garrett (2011) diz que o design de interação se preocupa em descrever o

possível comportamento do usuário e ver como a interface se adequará e responderá

a esse comportamento. Ele faz uma analogia à dança, onde o ideal seria que o usuário

ao utilizar da interface, ela respondesse à “dança” e em seguida o usuário

continuasse com a dança e o sistema fosse respondendo. Fazendo com que usuário e

interface “dançassem conforme a música” e a usabilidade fosse totalmente intuitiva.

Mas se cada interface dançar de uma forma diferente, o usuário não será

obrigado a estar sempre se adaptando à essa dança, isso pode deixa-lo frustrado,

gerando assim uma péssima experiência.

Garrett (2011) cita sobre o modelo conceitual, que é similar ao conceito de

memória em cognição, que é falado por Preece, Rogers e Sharp (2005). Segundo

Garrett (2011), o sistema/interface trata um recurso dentro dele como algo que o

usuário consome, ou um lugar que ele visite, etc.

“Um modelo conceitual pode se referir apenas a um componente de um

sistema ou ao sistema como um todo”. (Idem, 2011. P. 84).

Para dar segmento ao projeto aqui proposto, foram analisados, com base na

pesquisa de usuários e personas, quais aspectos são mais importantes dentro do que

o projeto se propõe a resolver.

1. Os usuários alvo, possuem acesso à internet através de smartphones, e

pelo menos uma vez, já utilizaram algum aplicativo para pedir comida.

Logo eles possuem um modelo conceitual de como funciona um aplicativo

para delivery de comida.


81


2. Pessoas que estejam em uma dieta, sempre estão atentos aos

ingredientes, conteúdos e calorias que uma determinada comida possa

ter, para que assim ele possa adequar o prato à sua dieta. Logo essas

informações são de extrema importância.

Figura 38: Rótulo Coca-Cola

82

Fonte: http://perguntaserespostas.cocacolaportugal.pt/acucar-refrigerantes

3. Os usuários estão acostumados à cardápios físicos em restaurantes,

hamburguerias, etc. O modelo conceitual que eles possuem desse tipo de

menu também é muito importante para o desenvolvimento de uma

interface que servirá também com um menu para que ele possa escolher

a sua comida de acordo com seu gosto ou restrição.

Figura 39: Cardápio Hamburgueria Insano's

83


Os erros existem, e é preciso lidar com eles. Para Garrett, a melhor defesa

contra os erros é projetar uma interface em que eles sejam simplesmente

impossíveis. Como isso é algo que talvez seja impossível, a segunda melhor opção é

tornar os erros difíceis de acontecer.

Nesse caso, a interface deve ajudar o usuário a contornar o erro, mostrando

o que foi que aconteceu e ensinando o usuário, para que ele não volte a fazer o

mesmo. Garrett (2011) ainda diz que o sistema pode ser programado para resolver o

erro sozinho, mas isso pode gerar um problema, onde pode se tornar incômodo para

o usuário aquele tipo de “boa intenção”.

Para que esses erros sejam minimizados, é necessário ter noção e prever qual

passo o usuário pode realizar sem querer, e acarretar em um erro. O máximo possível

de erro que possa vir a acontecer deve ser ao máximo evitado, e caso aconteça, deve

ser fornecido uma alternativa rápida para que ele saia do problema.

84

3.3.2 Arquitetura da informação

Nos sites de conteúdo, a arquitetura de informações está preocupada com a criação de esquemas organizacionais e de navegação que permitem que os usuários se movam através do conteúdo do site de forma eficiente e eficaz. A arquitetura de informações na Web está intimamente relacionada ao campo de recuperação de informações: o design de sistemas que permitem aos usuários encontrar informações facilmente. Mas as arquiteturas do site são muitas vezes obrigadas a fazer mais do que apenas ajudar as pessoas a encontrar as coisas; em muitos casos, elas têm que educar, informar ou persuadir os usuários. (GARRETT, 2011. P. 89)

Garrett (2011) fala sobre site, mas pode ser lido também como interface. A

arquitetura de informação é a estrutura do software, é onde será definido o

fluxuograma do projeto, para delinear até onde o usuário pode chegar ao interagir

com a interface de um software.

O autor propõe duas abordagens para o desenvolvimento da arquitetura de

informação:

1. ABORDAGEM DE CIMA PARA BAIXO

Nessa abordagem é criada a arquitetura a partir do plano estratégico:

objetivos do produto e necessidades do usuário. Onde seriam iniciadas com um

conteúdo mais amplo de funcionalidades que venham a atingir os objetivos traçados

no plano estratégico, subdividindo-as em seções lógicas. Ele diz que essa hierarquia

se assemelha a uma concha vazia onde conteúdo e funcionalidade serão colocados.

2. ABORDAGEM DE BAIXO PARA CIMA

Essa abordagem também irá conter suas divisões e subdivisões, mas nesse

caso ela será baseada no conteúdo e requisitos funcionais. Onde será construída uma

direção que chegue ao plano estratégico.

E com essas duas abordagens, Garrett apresenta quatro modelos que podem

ser seguidos para a hierarquia e estruturação do conteúdo: 1) Hierárquica; 2) Matriz;

3) Orgânica e 4) Sequencial.

“Os nós em uma estrutura de informação são organizados de acordo com os

princípios de organização” (GARRETT, 2011. P. 96). Os princípios de organização irão

dizer quais nós deverão se manter juntos, e quais deverão se manter separados,

definindo assim os diferentes níveis do software e as telas de sua interface.

85

Os níveis mais altos geralmente estão ligados aos objetivos e necessidades

do usuário, e nos níveis mais abaixo vão se complementando as informações que

terão influências complementares ao primeiro nível.

Garrett (2011) diz que se o sistema vir a apresentar vários níveis, que sejam

em sua maioria desnecessários, ou que possam ser melhorados ou anexados à outros

níveis, isso pode vir a acarretar na confusão da arquitetura do sistema. Onde o

usuário pode ter acesso à tantas telas e informações que não encontrará realmente

aquilo que ele deseja.

Segundo Garrett (2011) o diagrama é a principal ferramenta para documentar

a arquitetura da informação. Ele diz que o diagrama não precisa documentar todas

as imagens, fotos, vídeos, e o que mais vá ter dentro do software. É principal que

ele mostre os relacionamentos conceituais.

Figura 40: Modelos de Diagramas

86

Fonte: Garrett (2011).

Na figura acima, estão os dois modelos que Garrett mostra eu seu livro, um

mais simples, e outro que ele considera mais complexo, para softwares que venham

a precisar de tabelas, gráficos, etc. O que irá ser utilizado aqui, é o diagrama mais

simples proposto por ele, que para o projeto em questão, é suficiente para que seja

percebido toda a abrangência da estrutura da arquitetura do projeto.

Figura 41: Fluxuograma Delife

87


O fluxuograma do projeto proposto aqui, se encaixa em uma arquitetura de

abordagem de cima para baixo de forma hierárquica, onde será mostrado primeira

mente a necessidade do usuário baseado no plano estratégico, e subsequentemente

o plano de escopo do projeto.

3.4 ESQUELETO

No Esqueleto do projeto é onde a pesquisa irá definir como o produto

funcionará. No processo de estrutura é analisado tudo em grande escala, já no

esqueleto, começamos a analisar em uma menor escala, os componentes individuais

e como eles se relacionam.

Dentro da análise do esqueleto, será abordado o design da interface, aqui

serão vistos os botões, campos e outros componentes da interface, design de

88

navegação, onde o design de interface é adaptado ao espaço da informação, e o

design da informação, e daí o conjunto de todos irá gerar uma comunicação mais

efetiva entre interface e usuário. (GARRETT, 2011)

3.4.1 Design da interface

No design de interface, Garrett (2011) afirma que esse processo é sobre

selecionar corretamente os elementos que estarão na interface, baseados na tarefa

que o usuário estará realizando, organizando esses elementos de forma que seja fácil

de entender e usar.

As tarefas geralmente se estendem em várias telas, cada uma contendo um conjunto diferente de elementos de interface para o usuário enfrentar. Quais funções acabam em quais telas é uma questão de design de interação no plano da estrutura; Como essas funções são realizadas na tela é o domínio do design da interface. (GARRETT, 2011. P. 114)

O autor cita que a interface considerada bem-sucedida é aquela que deixa

claro para o usuário quais são os elementos e informações importantes, o que for

sem importância ou que não ajudem o usuário a realizar a tarefa, podem ser

ocultadas. Isso para que o usuário não precise lidar com aspectos dos quais não

ajudem a tornar sua experiência amigável e intuitiva.

As ferramentas e estruturas tecnológicas ainda limitam as interfaces

disponíveis. Garrett fala que isso pode ser ruim e bom. Ruim porque algumas

abordagens inovadoras podem se tornar impossíveis de se realizar por algumas

pessoas. E bom pelo fato de que limitando os usuários a um conjunto pequeno de

padrões, eles poderão ter maior facilidade ao utilizar uma variedade bem maior de

interfaces.

Ele fala que a maioria dos controles que encontramos ainda são os baseados

em computadores de mesa, como Mac OS e Windows. E os elementos de interface

padrão que esses sistemas oferecem são Checkbox, Botão de Opção, Caixa de Texto,

Listas em Dropdown, Listas em Caixa e Botão de ação.

Os usos desses padrões devem ser feitos baseados no objetivo da interface

para o usuário, Garrett diz como exemplo, que ao utilizar um menu com uma lista

em dropdown, pode poupar espaço na tela, mas em contrapartida irá ocultar itens

89

do usuário. Cabe ao designer e programador analisarem as melhores opções para que

tentem evitar ao máximo que o usuário pense muito em como realizar uma tarefa.

3.4.2 Design de navegação

Garrett (2011) aponta que a navegação de qualquer interface deve realizar

três objetivos:

1. Deve fornecer ao usuário meios de se locomover de um ponto ao outro

dentro da interface, vinculando as páginas umas com as outras, utilizando

de elementos de navegação que facilitem o entendimento do usuário de

como chegar em um ponto, e como voltar para outro.

2. Esses elementos no design de navegação devem apresentar ligações,

deixando claro para o usuário quais são mais importantes que outros, suas

diferenças e relevâncias. Para que assim o usuário possa perceber quais

são as opções que ele possui dentro da navegação na interface.

3. Ele deve comunicar ao usuário a relação entre a página na qual o usuário

se encontra, e o conteúdo presente nela. Deve-se responder a pergunta:

o que isso tem a ver com que estou olhando agora? Isso faz com que o

usuário saiba escolher a melhor opção para realizar a tarefa da qual

deseja.

É de estrema importância que todas as telas informem ao usuário onde ele

está e para onde pode ir. Algumas pessoas afirmam que os usuários criam um mapa

mental ao utilizar uma interface, memorizando o caminho e as telas por onde passou

para chegar no local onde ele está. E outras pessoas já dizem que a cada passo dado

pelo usuário, o anterior já se esvaíra da sua memória pouco depois de ter sido

passado. (GARRETT, 2011)

O autor diz que a melhor forma é assumir que o usuário não possui

conhecimento algum sobre a ligação de página para página. Com isso vários tipos de

sistemas de navegação surgiram através da prática:

1. Navegação global: é a navegação que mostra ao usuário um conjunto de

chaves de acesso, no qual ele pode mover de uma extremidade da

interface para outra. Assim, em qualquer lugar que o usuário queira ir,

ele poderá chegar lá.

90

2. Navegação local: fornece ao usuário acesso ao que está próximo do

conteúdo, como em uma família, ele terá acesso aos pais, irmãos e filhos

da tela a qual se encontra.

3. Navegação complementar: é basicamente o uso de hiperlinks dentro do

conteúdo. Que com base nos usuários alvos do sistema, possa ser

identificado a necessidade de colocar um link que venha a complementar

a informação principal da página em que ele se encontra.

4. Navegação de cortesia: é onde se encontrará, por exemplo, o contato da

empresa da interface que o usuário está utilizando, ou onde ele irá ter

informações do horário de funcionamento de compras e vendas dentro de

um aplicativo, etc.

Garrett também fala sobre mapa do site e índice, que seriam utilizados

quando o usuário se sente frustrado ao utilizar de uma interface e precise recorrer

à uma página em que ele possa encontrar, literalmente, um mapa da estrutura do

software em que ele se encontra, independente se for para desktop ou mobile.

3.4.3 Design de informação

Segundo Garrett (2011), o design de informação é a cola que mantém os

outros componentes do projeto juntos. É onde deverá ser decidido como apresentar

as informações dentro da interface, para que elas sejam compreendidas com maior

facilidade.

Ele comenta que o design de informação às vezes é visual, às vezes envolve

um agrupamento de informações. Mas isso tudo deve ter em vista qual a maneira em

que o usuário irá melhor entender as informações propostas dentro do projeto.

Utilizando desde o plano estratégico, onde é definido qual o objetivo e quais as

necessidades do usuário. “A interface não deve apenas reunir informações do

usuário, mas também comunicar informações para o usuário”. (GARRETT, 2011. P.

126).

Garrett (2011) fala sobre a importância do wayfinding, que traduzindo seria

algo próximo de “Encontrar Caminho”. Ele é baseado no mundo físico, em parques,

estacionamentos, shoppings dentre outros locais públicos, nesses locais as pessoas

tendem a se localizar por placas com cores específicas, mapas, etc. Os sistemas

91

devem fornecer acesso às diferentes áreas do projeto, mas deve fazer isso

comunicando com clareza de como ser feito, ao usuário.

Para um bom wayfinding, o sistema deve apresentar de forma rápida ao

usuário uma imagem mental de onde eles se encontram, para onde podem ir, e quais

são as melhores escolhas para que possam realizar a tarefa que eles estão

procurando. Para isso podem ser utilizados de ícones, fontes, cores, etc. Que

remetam à cognição do usuário dentro do sistema.

Wireframes

O wireframe é uma descrição de todos os componentes da página, e como

eles estão encaixados. Eles são um primeiro passo que é necessário para começar a

desenvolver formalmente o design visual da interface (GARRETT, 2011)

O valor dos wireframes é a forma como eles integram os três elementos do plano da estrutura: design da interface, através da disposição e seleção dos elementos da interface; design de navegação, através da identificação e definição de sistemas de navegação principais; e design de informações, através da colocação e priorização de componentes informativos. (GARRETT, 2011. P. 131)

Para o desenvolvimento destes wireframes, foi utilizado as dimensões de tela

de um iPhone 5s, que contém as dimensões de 640x1136px. Essa escolha foi baseada

no padrão que o sistema da Apple adequa à todos os seus smartphones, por isso o

mesmo aplicativo irá rodar sem problemas dentro de outras categorias de seus

dispositivos. Ao contrário dos smartphones que utilizam o sistema operacional

Android, onde cada empresa pode modifica-lo e alterar seus padrões de acordo com

suas ideias.

Foi desenvolvido um primeiro modelo dos wireframes (Figura 41) do

aplicativo, que foram sendo modificados até chegar no ideal para a implementação

dos elementos visuais e concluir o protótipo.

Figura 42: Wireframes antigos do projeto

92


Com base nessa estrutura de tamanho para desenvolvimento da interface, e

nas modificações feitas nos wireframes anteriores, foram gerados os seguintes

wireframes:

Figura 43: Wireframe do Delife (login)

93


O aplicativo possui uma tela de apresentação com a opção do usuário logar

utilizando sua conta no Facebook, ou entrar no aplicativo sem realizar qualquer login

ou cadastro. Nielsen (2007) fala que os usuários não gostam de se

registrarem/cadastrar em sites ou aplicativos. Segundo ele pode-se usar uma

alternativa onde o sistema possa ser acessado sem ser preciso realizar um cadastro

de início, mas que no momento que o usuário for realizar uma tarefa que sejam

necessários seus dados, como uma compra, ele precisaria colocar, de qualquer forma

todos os dados, mas o fato de ter sido requerido apenas no momento da compra,

torna menos intrusivo.

Outra forma apontada por Nielsen (2007) é deixar o cadastro o mais sucinto

possível, precisando apenas, inicialmente, dos dados principais para a criação da

conta, podendo ser adicionados outros dados posteriormente dentro do sistema.

94

Figura 44: Wireframe do Delife (inicio)


Ao realizar o login, o usuário irá para a tela inicial. Nessa tela aparecerão os

elementos padrões dos quais se manterão dentro de outras telas dentro do aplicativo.

Mantendo a consistência e padrão citados por Nielsen (2007) em suas heurísticas.

Mas a tela inicial é diferente das telas subsequentes a ela. Pois aqui foi

colocado como a abordagem de cima para baixo, mostrada por Garrett (2011). Onde

a arquitetura da interface vem diretamente do objetivo do projeto e das

necessidades dos usuários.

Como é percebido na figura 44, o aplicativo segue uma navegação global,

que segundo Garrett (2011) é onde o usuário está apto a acessar qualquer tela,

mesmo que estas sejam de ramificações diferentes umas das outras. O sistema é

hierárquico, indo do item mais importante para o usuário, levando-o às opções que

façam com que ele conclua sua tarefa principal.

Na figura 44 é mostrada como funciona a distribuição realizada na página

inicial, onde o usuário poderá escolher entre as opções de pratos prontos ou montar

o seu próprio prato. Nessa tela já aparecerão os elementos padrões que estarão

95

presente na maioria das telas do sistema, o menu principal do sistema. Onde é

encontrado os botões de Início, Pedidos, Carrinho, Perfil e Configurações.

Figura 45: Wireframe do Delife (pratos prontos)


Na tela principal, ao escolher como opção algum dos pratos prontos, essa

tela irá surgir. Esta tela é para que o usuário confirme as informações do pedido,

podendo também aumentar ou diminuir a quantidade do item desejado, a opção de

voltar está presente, que segundo Krug (2008) é essencial para o usuário se guiar e

poder voltar caso tenha entrado em uma tela da qual não desejasse.

Figura 46: Wireframe do Delife (monte seu prato)

96


Caso o usuário opte por montar o seu prato, na página inicial, ele será

direcionado para a página da figura 46. Nesta página ele poderá escolher os itens

que deseja de acordo com o seu gosto, e também baseado em informações

nutricionais, que estarão dispostos na interface.

O usuário poderá nesta tela acessar a aba de filtros, onde poderá escolher

entre diversos tipos de restrição, desde produtos que não tenham lactose a limitar a

busca apenas para produtos orgânicos.

Dentro dessas telas é utilizado um elemento padrão de interface, o Botão de

Opção ou Botão de Escolha. Que segundo Garrett (2011) é quando a interface dá ao

usuário a opção de selecionar uma alternativa dentre outra(s).

Para Nielsen (2007) a prevenção de erros é primordial para uma boa

usabilidade. Nessas telas, à medida que o usuário vai selecionando suas opções, as

opções que não podem mais ser selecionadas ficarão com uma transparência em

relação as escolhidas. Usando de um padrão visual para alertar ao usuário que aquele

item não está mais disponível para sua escolha.

Figura 47: Wireframe do Delife (carrinho)

97


Nessa tela é mostrado ao usuário a descrição dos itens que ele escolheu e a

opção de ele escolher a quantidade, editar ou excluir o item em questão. Também

é dada a opção do usuário continuar comprando, ao selecionar essa opção ele será

redirecionado à página inicial, anteriormente acessada, para que ele possa escolher

algum produto diferente para acrescentar à sua lista de compras.

Esta tela usa da heurística de prevenção de erros, proposta por Nielsen

(2007). Ao clicar na opção de excluir o item do carrinho, será perguntado em uma

tela sobreposta se ele realmente deseja realizar a tarefa.

Figura 48: Wireframe do Delife (pagamento)

98


Ao confirmar todos os itens que o usuário deseja comprar, ele será levado

para a tela de Pagamento. Aqui será solicitado ao usuário escolher uma forma de

pagamento, caso o usuário escolha cartão, ele terá que preencher com os dados do

seu cartão.

Será necessário ao usuário cadastrar o endereço no momento da compra, o

usuário poderá selecionar seu endereço digitando o CEP diretamente no aplicativo,

e caso não saiba, ele será encaminhado para a página dos Correios, onde poderá

procurar o CEP de sua rua.

Ao selecionar pagamento em dinheiro, caso o usuário opte por essa opção,

uma janela aparecerá solicitando saber se o mesmo irá precisar de troco para o seu

pedido, caso a resposta seja sim, uma outra tela irá aparecer solicitando que o

usuário digite para quanto em dinheiro ele vai precisar de troco.

É apresentado, novamente a lista de itens pertencentes ao pedido, para que

o usuário ainda possa visualizar e confirmar se todos os itens listados batem com o

que foi pedido e desejado pelo mesmo.

Figura 49: Wireframe do Delife (pedidos)

99


Ao finalizar o pedido, o usuário será direcionado para a tela inicial, onde será

visualizado no ícone do menu inferior uma notificação no botão de pedidos, é a forma

da interface alertar ao usuário que existe um item dentro daquela opção. Ao acessar

a tela de pedidos (figura 49) será informado ao usuário os detalhes e o andamento

do pedido, se já saiu para entrega, por exemplo. É possível também verificar nesta

tela os últimos pedidos que o usuário realizou dentro do aplicativo.

Figura 50: Wireframe do Delife (perfil)

100


A tela de perfil, que pode ser acessada pelo menu inferior do aplicativo, o

usuário poderá realizar seu login pelo Facebook, caso não o tenha feito. E através

desse login, ele poderá favoritar seus pratos e nomeá-los de acordo com seus gostos,

para que possa facilitar pedidos futuros baseados no que o usuário utiliza para

programar sua alimentação no dia-a-dia.

Figura 51: Wireframe do Delife (configurações)

101


Na tela de configurações, ele poderá cadastrar ou adicionar endereços e

cartões dentro do aplicativo, assim como ativar as notificações quando o aplicativo

estiver como segunda tela no smartphone.

Concluindo, o uso das heurística de Nielsen (2007) foram a base para a

montagem do esqueleto do projeto. Os wireframes foram propostos em uma forma

que atendesse às dez principais heurísticas de Nielsen. Utilizando de abordagem de

cima para baixo, uma navegação global, na maioria de suas telas, proporcionando ao

usuário ir de um ponto a outro do aplicativo independente de onde esteja, salvo

casos em que o foco da tela seja a conclusão da tarefa. Isso tudo tendo em vista o

ponto principal apontado no plano de estratégia definidos na metodologia de Garrett

(2011). Com essa parte do projeto concluída, agora o objetivo será dar forma e vida

para o esqueleto. Através do Plano de Superfície, onde entrará a parte visual do

sistema, ou seja, a “cara” da interface

102

3.5 SUPERFÍCIE

Segundo Garrett (2011) o plano de superfície é onde lidamos com o desenho

sensorial. É através do design de informação que irão ser organizados os elementos

visuais da página.

Nessa fase, os elementos visuais, como cor, texto, ícones, etc. serão

trabalhados a fim de tornar a interface algo interessante e intuitiva para o usuário.

Isso tudo tendo em vista os estudos de cognição, heurísticas e elementos padrões

que uma interface deve apresentar. Os wireframes apresentados no plano de

Esqueleto não foram expostos à testes com usuários. Os testes foram realizados

depois de implementados os elementos visuais propostos no plano de Superfície.

3.5.1 Sentidos e olhar

Segundo Garrett (2011), dos sentidos que o ser humano possui, o da visão é

o mais importante, pois o design visual é muito importante em todos os tipos de

produto.

O design visual não é apenas a avaliação estética de um projeto, mas sim

como eles funcionam dentro disso. Deve-se ter como objetivo perceber se o projeto

está atendendo, visualmente, o que o usuário está buscando. Se está mostrando com

clareza as opções disponíveis para o usuário, se ele está separando claramente os

elementos que deverão estar em destaque dos menos importantes, etc.

A identidade da marca é, principalmente, apresentada por um bom design

visual, Garrett (2011) mostra o exemplo de que se é desejado transmitir para o

usuário uma interface mais séria, técnica e autoritária, o uso de cores vibrantes e

chamativas, aliadas a fontes infantis ou de quadrinhos pode, provavelmente, não ser

a escolha ideal para o projeto.

Uma forma de avaliar o design visual é acompanhar para onde o nosso foco

visual está caminhando dentro da interface. O que está chamando atenção é

realmente o que deveria estar chamando atenção, ou o usuário é distraído por outros

elementos que não foram separados em níveis de hierarquia visual?

103

3.5.2 Contraste e uniformidade

O contraste é uma peça muito importante para um bom design visual. É com

ele que problemas como a quantidade de informações jogadas na interface de forma

confusa, podem ser solucionados. Mensagens de erro, por exemplo, geralmente são

colocadas com uma cor forte e chamativa, que se destaque do layout da interface,

o vermelho é muito utilizado nesse aspecto, pois além de ser uma cor chamativa,

utiliza da memória do usuário, para lembrar que a cor vermelha, em muitos casos,

significa alerta, ou atenção (GARRETT, 2011).

Segundo o autor, a uniformidade é essencial para garantir a comunicação

para os usuários. Já o layout baseado em grade é uma técnica que pode ser uma

faca de dois gumes para o projetista da interface. A ideia de trabalhar com uma

grade padronizada é muito boa, mas para interfaces voltadas para aplicativos

mobiles, isso pode ser um problema. Pois a variação de tamanhos de telas dos

aparelhos é gigantesca, e isso pode gerar um aplicativo que estará seguindo um

padrão que pode não estar sendo mais utilizado. “A anarquia de trabalhar sem

padrões de design é ruim, mas a camisa de força de tentar trabalhar dentro de

padrões de design inadequados para suas necessidades pode ser pior.” (GARRETT,

2011. Pg. 142).

3.5.3 Cores e tipografia

Para Garrett (2011) a cor é uma das formas mais eficazes de comunicar a

identidade visual de uma marca. Marcas como Coca-Cola, têm como o vermelho a

sua cor registrada, onde por vezes a empresa utiliza apenas a cor para apresentar

seus produtos, e consegue.

Uma paleta de cores baseadas no objetivo da interface e das necessidades

dos usuários, devem ser exploradas de forma ampla dentro de um projeto. Pois a

variação de cores utilizadas de forma harmônica pode dar ao usuário uma experiência

única e prazerosa dentro de uma interface.

Na maioria dos casos, cores brilhantes ou mais ousadas podem ser usadas para o primeiro plano de seus elementos de design para os quais você deseja chamar a atenção. As cores mais silenciosas são

104

mais utilizadas para elementos de fundo que não precisam saltar da página. Ter uma variedade de cores para escolher nos fornece um kit de ferramentas para fazer escolhas de design mais eficazes. (GARRETT, 2011. P. 145).

O uso correto da tipografia também é indispensável para interface. Garrett

(2011) aponta que para textos longos o simples é o melhor, textos ornamentados

geram cansaço visual para os usuários.

Nielsen (2007) aponta quatro diretrizes fundamentais para o texto (no seu

estudo ele utilizar a recomendação para páginas de website com dimensões de

1024x768px, geralmente utilizadas para monitores):

Utilizar um tamanho de fonte comum, que possua um tamanho legível.

Evitar backgrounds com poluição visual

Utilizar texto preto sobre fundo branco, ou cores que tenham

contrastes visuais e que não gerem incomodo ao usuário

Manter o mínimo de textos gráficos, letras maiúsculas e textos em

movimento

O autor cita ainda algumas fontes recomendadas para a utilização em

interfaces: Arial, Verdana e Trebuchet são as sem serifa mais recomendadas, e a

Georgia é, dentre as com serifa, a melhor para ser utilizada em interfaces para

leitura online.

A boa utilização em conjunto de uma paleta de cores e um conjunto de

tipografia adequados, irão gerar uma interface com uma boa legibilidade, atraente

e simpática, para que o usuário não se sinta incomodado ao utilizar a interface

projetada. Como a utilização da cor verde para representar algo que remata a saúde

e bem-estar, se aliado à uma cor mais vida, mas que não contraste de forma negativa

com o verde, como o laranja, gera uma harmonia onde as duas cores se encaixam e

aliadas à um texto com uma grafia legível e com uma cor que tenha uma boa

legibilidade com as cores escolhidas, propõem ao usuário uma interface que não gere

cansaço em sua visão.

Na pesquisa aqui realizada, foram desenvolvidos elementos visuais para

complementar e dar vida a superfície do aplicativo, seguindo como base os

wireframes desenvolvidos no escopo de esqueleto.

105

Com esses wireframes definidos, os elementos foram desenvolvidos de

acordo com o objetivo e as necessidades do usuário, estudadas no plano de

estratégia. Elementos como: paleta de cores, ícones e tipografia foram escolhidos

para dar vida e forma ao aplicativo em questão.

Cor

A paleta de cores proposta para o aplicativo foi baseado no verde como cor

central. O verde está ligado à natureza, e traz sensações afetivas como: paz, bem-

estar e saúde (FREITAS, 2007). Que está direcionado totalmente para o objetivo do

aplicativo desenvolvido e de seus usuários. Para os itens que precisam de destaque

foi escolhido o laranja, pois ele harmoniza com o verde, e também por ser uma cor

quente remete à comida, que é o foco do aplicativo.

A cor escolhida para o background foi o branco, para dar um bom contraste

com o verde e laranja escolhidos, e a cor complementar dentro do aplicativo foi o

vermelho, usado para alertas e avisos que necessitam de um destaque maior para a

percepção do usuário.

Figura 52: Cores do Delife


Tipografia

A tipografia escolhida para o aplicativo foi a Trebuchet MS, utilizando as suas

variações Bold, Regular e Itálico quando necessário. A escolha desta tipografia foi

pelo fato de ela ser uma das melhores fontes para legibilidade em mídias digitais,

segundo Nielsen (2007), ela é uma fonte moderna, simples e que encaixa

106

perfeitamente no layout e cores escolhidos para o desenvolvimento do design visual

do aplicativo.

Figura 53: Tipografia Trebuchet MS


Ícones

Os ícones foram escolhidos de forma que mantivessem um padrão dentro da

interface, para que seja percebido a familiaridade entre eles, fazendo com que o

usuário não se sinta confuso ao navegar entre as telas e poder deparar-se com algum

ícone diferente do padrão. O ícone de Configuração, é o único que parece não

pertencer a família dos outros ícones, pelo fato dele não apresentar preenchimento.

Mas a utilização do ícone com preenchimento não apresentou uma interface

agradável e que deixasse claro o que é o ícone. Por isso foi mantido este ícone,

mesmo que ele se diferencie um pouco dos demais.

Figura 54: Ícones do Delife


107

3.5.5 Telas

Ao definir os elementos visuais que serão implementados junto ao esqueleto

do projeto, foram criadas as telas do aplicativo. Abaixo são apresentadas as telas e

as ações que o usuário poderá realizar para alcançar o objetivo principal do

aplicativo, atendendo a todos os requisitos estudados na metodologia.

108

1. Login

Figura 55: Interface Delife


A tela de apresentação do aplicativo, nela será possível que o usuário entre

no aplicativo utilizando sua conta do Facebook, ou que entre sem precisar realizar

nenhum tipo de cadastro.

2. Tela principal

109



Na tela principal são mostrados os elementos principais que estarão

presentes na maioria das telas seguintes. Aqui é onde o usuário irá escolher as opções

de pratos disponíveis no aplicativo, ou optar por montar seu próprio prato. Também

poderá exercer uma navegação global, podendo ir desta tela para as demais do

aplicativo.

As cores têm um fator importante na composição dos elementos da interface,

o laranja utilizado nesta tela serve para dar um destaque e separar a opção de

montar o prato dos pratos já pré-montados. As informações nutricionais estão

dispostas em cores diferentes entre si, e entre as outras cores da interface, de forma

que elas se separem das outras informações, mas que o usuário consiga perceber que

ela faz parte de um dos itens mostrados na tela.

3. Pratos Prontos


110


A Figura 57 é uma tela sobreposta à tela principal, que aparece quando o

usuário escolhe um dos pratos prontos disponíveis no menu da tela inicial. Aqui ele

poderá conferir os itens do prato, aumentar ou diminuir seu pedido, e adicionar ao

carrinho.

4. Monte seu prato


111


Na tela de montar o prato (Figura 58), o usuário poderá escolher os itens que

deseja adicionar ao seu prato, e a cada item selecionado, as informações nutricionais

e o valor vão alterando de acordo com os itens escolhidos.

Nesta tela é possível acessar também o menu de filtro, onde será possível

filtrar os itens do menu de acordo com a opção que o usuário escolha. Quando

escolhida uma opção dentro deste filtro e confirmado, o menu irá desaparecer e os

itens no menu de montagem do prato estarão de acordo com o filtro escolhido. No

ícone do filtro irá surgir uma notificação com um numeral de acordo com a

quantidade de filtros escolhidos, e ao lado um ícone que remete à quais filtros estão

selecionados.

5. Carrinho


112


Ao entrar na tela de carrinho, será mostrado ao usuário o item escolhido, a

opção de aumentar a quantidade dele, editar ou excluir o item. Também será

possível adicionar mais itens ao carrinho ou realizar o pedido.

6. Pagamento


113


114

Nesta tela o usuário poderá escolher a forma de pagamento que deseja,

cartão ou em dinheiro. Aqui será solicitado ao usuário dados para realizar o pedido.

Caso escolha a forma de pagamento online por cartão de crédito, ele será

redirecionado para a página onde incluirá as informações do cartão e também será

solicitado o endereço para entrega, onde poderá buscar diretamente pelo CEP, ou

caso não saiba o CEP, será direcionado para a página dos Correios (Figura 60).

7. Pedidos



Ao concluir a forma de pagamento, o usuário volta para a tela inicial, e a

notificação que se encontrava no menu de Carrinho, agora se encontra em Pedidos,

informado que há um pedido em produção. Ao acessar essa tela é mostrado ao

usuário os itens escolhidos, o valor do pedido, e nessa tela o usuário será informado

como está o andamento do pedido, se foi confirmado, se está sendo preparado e se

já saiu para entrega.

8. Perfil e Configurações


115


Na tela de Perfil, o usuário poderá administrar seus pratos favoritos, para

que possam ter acesso à um prato que já contenham os itens desejados, sem que

precise montar tudo novamente.


116


Na tela de configurações (Figura 63), o usuário poderá alterar seus dados

pessoais, e ativar ou desativar as notificações quando o aplicativo estiver em segundo

plano.

3.5.6 Teste de usabilidade

Os testes de usabilidade servem para avaliar o quão bem está sendo a

interação entre a interface e o usuário. O real objetivo é o de captar todas os

problemas apresentados na interface, analisar o grau de impacto que estre problema

têm na usabilidade do sistema, e corrigi-los. Os testes devem envolver usuários reais

e que representem o público alvo do projeto em questão (CYBIS et al. 2007).

Nielsen (2000), em um artigo publicado em seu site, aponta que testes muito

elaborados de usabilidade são um desperdício de tempo, e que testes pequenos com

uma análise com cinco usuários, 80% dos problemas da interface serão identificados,

para que possam vir a ser resolvidos.

Figura 64: Número de participantes x problemas encontrados

117

Fonte: http://blog.testr.com.br/2017/06/quantos-participantes-chamar-para-um-teste-de-usabilidade/ (2017)

O gráfico acima mostra a curva que cada usuário vai proporcionando ao ser

avaliado. No primeiro o salto é enorme, pois de uma análise onde se tem zero, ela

pula para quase um terço do que há para saber dentro da usabilidade.

No segundo, será notado os mesmos passos, mas cada pessoa é diferente,

logo existirão detalhes que o segundo usuário fez que o anterior não fez. E daí será

adicionado mais alguns detalhes para a análise.

No terceiro, o usuário irá provavelmente realizar passos semelhantes ou até

iguais aos dos usuários anteriores, mas ainda assim irá gerar dados novos. Com isso,

ao adicionar mais e mais usuários, o que será visto é a mesma coisa repetitivamente,

onde só acarretará em uma perda de tempo.

Segundo Unger (2009), quando o usuário concluiu, ou não, a tarefa, é

necessário saber como ele se sentiu sobre ela. Ele propôs questões para definir se os

usuários se sentiram frustrados ou felizes ao utilizar a interface. Essas questões

devem ser realizadas sem a restrição de tempo, pois são informações que serão

coletadas de acordo com a experiência do usuário com a interface avaliada.

Figura 65: Teste de satisfação do usuário

118

Fonte: Unger (2009)

Nas questões propostas por Unger (2009), o usuário poderá discordar

totalmente, discordar, concordar totalmente, concordar ou nem discordar nem

concordar das afirmações informadas para cada tarefa que ele realizou dentro da

interface. As afirmações que são:

1. A tarefa levou mais tempo do que o esperado.

2. A tarefa foi fácil de completar.

3. Me senti frustrado(a) ao tentar completar essa tarefa.

Para esta pesquisa foram avaliados seis usuários. A pesquisa foi realizada

com pessoas que apresentassem características que foram definidas para o público

alvo do aplicativo. Que possuam algum tipo de restrição alimentar, seja por doença,

dieta ou motivos pessoais. A pesquisa foi realizada em diversos locais, shoppings,

locais de trabalho, etc. Sendo três dos entrevistados em uma praça de alimentação

do shopping, dois em uma empresa comercial no centro da cidade, e outro na sua

própria casa, entre os dias 28 e 30 de novembro de 2017. Os testes foram gravados

para documentação e análise detalhada da interação entre usuário e sistema.

Figura 66: Teste de usabilidade

119


Para a realização do teste, foi criado um cenário para dar mais imersão do

usuário ao objetivo do aplicativo. O cenário é uma breve contextualização, que é

passada de forma simples e objetiva para que o usuário entenda claramente. Em

seguida o usuário irá realizar as tarefas definidas pelo avaliador. Estas tarefas foram

criadas de forma que fossem de forma sequencial, ou seja, a tarefa seguinte seria

ligada a anterior, sem que fosse preciso voltar ao começo para a realização de uma

nova tarefa.

O teste foi realizado em um iPhone 5s da empresa Apple, através de um

protótipo criado no software Adobe XD, e rodado no smartphone pelo aplicativo de

mesmo nome. O Adobe XD é um software para criação de interfaces, que possui

diversas ferramentas que proporcionam um ótimo leque para a criação de um

protótipo. Apesar disso, o software não conta com algumas ferramentas para

120

implementação, como botão de escolha e campos para o usuário colocar texto. Para

solucionar esse problema, dentro do protótipo, foram criadas telas que preencham

automaticamente os campos propostos, quando o usuário selecionasse uma opção

que fosse necessário a digitação.

2.5.6.1 Tarefas

Contextualização: Você trabalha no comércio e não tem tempo para almoçar

ou preparar seu almoço para levar para o trabalho. Para conseguir almoçar você está

procurando um aplicativo onde você possa escolher os ingredientes que deseja

comer, pois você possui intolerância a lactose e não come produtos de origem

animal.

Tarefa 1: Entre no aplicativo, selecione um dos pratos prontos e adicione ao

carrinho;

Figura 67: Passo a passo tarefa 1


Passo-a-passo da Tarefa 1 (Figura 67): (1) O usuário irá escolher se irá entrar

com sua conta do Facebook ou entrar sem realizar login. (2) O usuário irá escolher

dentre um dos pratos prontos e clicar neles. (3) Ao clicar em um dos pratos prontos,

o usuário irá clicar em Adicionar ao Carrinho. (4) Tela final da tarefa 1.

121

Resultado: Cinco dos seis avaliados não tiveram problemas em realizar esta

tarefa. Um deles demorou um pouco a mais analisando a tela inicial para então

decidir o prato que queria escolher. Aqui também serviu para analisar se os usuários

costumam utilizar o Facebook para realizar o login, ou se deixam para cadastrar

depois. Dos avaliados, dois dos usuários optaram por não entrar pelo Facebook, o que

mostra que a maioria deles costumam entrar nos aplicativos utilizando suas contas

na rede social.

Em seguida ao teste de usabilidade foi aplicado o teste de satisfação de

Unger (2009) com o usuário:

Figura 68: Teste de satisfação de Unger

122


Tarefa 2: Agora monte um prato que não contenha produtos de origem

animal, e em seguida adicione-o ao carrinho;


123


Passo-a-passo da tarefa 2 (Figura 69): (5) Usuário irá clicar em adicionar

mais itens. (6) Em seguida irá selecionar a opção de montar seu prato. (7) Depois

irá selecionar a opção de filtrar alimentos. (8) Em seguida selecionar a opção que

filtra opções que tenham algum ingrediente de origem animal. (9) Irá concluir a

seleção do filtro. (10) Neste passo vai selecionar os itens filtrados. (11) Por fim,

adicionará o pedido ao carrinho.

Resultado: Nesta tarefa, foram identificados alguns problemas. Como esta

tarefa é uma sequência da tarefa anterior, o usuário se encontra na tela de Carrinho,

e deveria montar o seu prato e adicionar ao carrinho junto ao outro pedido. Mas um

dos usuários seguiu um caminho diferente, pois ao ler o botão de adicionar mais

124

itens, achou que ele estaria adicionando itens ao pedido realizado anteriormente, e

não que iria realizar um novo pedido. Isso fez com que o usuário ficasse perdido

dentro do aplicativo. Outros dois usuários utilizaram o botão de voltar para adicionar

outro prato, e não a opção de adicionar mais itens, que deveria ser a mais fácil para

realizar esta tarefa.

Ao voltar para a página inicial, três dos seis usuários demoraram para

encontrar a opção de montar o seu prato, alguns requisitando ajuda para completar

a tarefa.

Aos que selecionaram a opção de montar o seu prato, o objetivo seria fazer

com que o usuário utilizasse o menu de filtros para selecionar itens que não

possuíssem estes produtos de origem animal. Mas nenhum dos usuários utilizou o

menu de filtros, todos eles foram procurando nas opções descritas nos itens as que

não continham em seus ingredientes produtos de origem animal, e aí sim adicionaram

ao carrinho.

Figura 70: Erros da interface cometidos pelo usuário

125




126



Tarefa 3: Apague um dos itens do carrinho e realize seu pedido;


127


Passo-a-passo da tarefa 3 (Figura 72): (13) O usuário deverá selecionar um

dos itens do carrinho e clicar em excluir. (14) Irá confirmar se deseja ou não excluir

o item em questão. (16) Após excluído, deverá realizar o pedido do item que sobrou

no carrinho clicando em fazer pedido. (17) Aqui o usuário irá escolher a forma de

pagamento e endereço para finalizar o pedido. (20) O usuário será direcionado à

página inicial após ter concluído o pedido.

Resultado: Todos os usuários conseguiram realizar sem dificuldades esta

tarefa, na tela de pagamentos todos entenderam como funciona e realizaram os

procedimentos sem nenhuma dificuldade.

128





Tarefa 4: Verifique se o seu pedido saiu para entrega;


129


Passo-a-passo da tarefa 4 (Figura 74): (21) O usuário irá clicar no ícone de

pedidos no menu inferior do aplicativo. (22) Depois vai verificar se o status do pedido

dele está como saída para entrega.

Resultado: Essa tarefa foi realizada sem dificuldades pela maioria dos

usuários, apenas um deles que demorou a perceber a mensagem de que o pedido

saiu para entrega, e clicou no pedido.

Figura 75: Erros cometidos pelo usuário

130





131


Tarefa 5: Vá no perfil, selecione um dos pratos que você já tem salvo como

favoritos, e peça-os novamente.


132


Passo-a-passo da tarefa 5 (Figura 77): (23) Dando sequência à tarefa anterior,

aqui o usuário irá clicar no ícone de perfil, localizado no menu inferior do aplicativo.

(24) Depois irá selecionar a opção de pedir novamente. (25) Em seguida realizará o

processo de escolha de pagamento, e caso deseje, adicionar um outro endereço para

a entrega. (26) Deverá finalizar o pedido clicando no botão de finalizar pedido.

Resultado: Nesta tarefa alguns dos avaliados não conseguiram identificar

rapidamente o botão de pedir novamente. Um deles apontou que achou que ao

clicar na descrição do prato ele iria ser direcionado para a tela de carrinhos, para

poder finalizar o pedido, e outro usuário esboçou o clique no pedido, rapidamente

em seguida selecionou a opção de pedir novamente.

Figura 78: Erros cometidos pelo usuário

133





134


135

2.5.6.2 Melhorias

Com base nos resultados obtidos dos testes de usabilidade do protótipo do

aplicativo Delife, foram analisados que todos os usuários conseguiram realizar todas

as tarefas até o final, mesmo que alguns tenham percorrido um caminho diferente,

conseguiram ‘comprar’ seus pratos no protótipo do aplicativo.

Os maiores problemas encontrados foram na página inicial e na tela de

montar o prato, onde foi possível observar a maior quantidade de problemas dentro

da interface, que fizeram com que o usuário cometesse alguns erros. Como a demora

para visualizar a opção de montar um prato na Tarefa 2, ou o fato de nenhum dos

usuários avaliados ter selecionado os filtros para ajudar a filtrar os alimentos que

não possuíssem os ingredientes propostos também na Tarefa 2.

Esse e outros erros menores, mas também importantes, foram analisados e a

seguir estão as propostas para a melhoria da interface de acordo com essas análises:

Figura 80: Melhorias da interface


136

1. Foi dado um pouco mais de destaque na opção de montar prato na

página inicial, de forma que o usuário ao estar presente nesta tela consiga diferenciar

a opção de personalizar seu prato dos pratos prontos (Figura 80).



2. Na tela do Carrinho (Figura 81), o botão de “Adicionar mais itens” foi

substituído pelo botão de “Continuar comprando”. Para facilitar a concepção do real

objetivo deste botão para o aplicativo, sem gerar confusão sobre o dubio significado

da frase.


137


3. A tela de montar o prato foi a que gerou o maior grau de dificuldade na

interação do usuário com a interface. Como nenhum dos usuários se atentou ao ícone

de filtro, acima da tela, ele foi realocado para o alinhamento à esquerda, e ao lado,

foram colocados os filtros disponíveis em um menu onde o usuário poderá deslizar,

ou caso opte, clicar no ícone de filtros para abrir o menu (Figura 82).

Desta forma a interface pretende deixar à mostra as opções que existem

dentro do filtrar, pois ao ocultá-las dentro do menu de filtro, nenhum dos usuários

sequer notou o ícone. Apesar de que, depois de realizadas as tarefas, a maioria dos

usuários afirmaram que conheciam o ícone em questão, mas que não se atentaram a

utiliza-lo para realizar a tarefa proposta.

Outra alteração feita, foi a substituição dos Radio Buttons, os botões de

opção, por botões que se assemelhem mais aos de múltipla escolha, para que isso

não acabe por gerar duvidas ao usuário de que ele só pode selecionar uma opção. E

também foi adicionado um leve tom de verde nos itens selecionados, para ajudar

com que o usuário identifique quais itens escolheu de forma mais evidente na

interface.


138


4. Na tela do Perfil, a alteração foi sutil, mas irá diminuir o erro do usuário

ao tentar pedir novamente um de seus pedidos salvos no favorito. A mudança nesta

tela foi a alteração de cor dos textos das informações do pedido. O colorido que

havia na tela avaliada, foi substituído por um cinza claro. O foco desta mudança foi

deixar mais em evidência os elementos que são realmente “clicáveis” para o usuário.

Para que assim ele não fique confuso devido à grande quantidade de cores na tela,

e acabe se confundindo na hora de selecionar o botão correto para realizar a tarefa.

Também foram ampliados os botões de editar e excluir os itens favoritos, pois eles

estavam muito pequenos, principalmente para smartphones com telas menores.

139

4. CONSIDERAÇÕES FINAIS

Todo mundo precisa de alimentação para sobreviver, mas algumas pessoas

possuem algumas restrições sobre o que podem ou querem comer. As opções que são

expostas em sua grande maioria no cotidiano são sempre regadas a alimentos com

um alto teor de calorias e produtos industrializados. Isso é empurrado para os

consumidores, através de televisão, rádio, redes sociais, etc. sem, muitas vezes, se

importarem se eles podem ou não comer tal alimento.

Para pessoas que seguem uma dieta vegetariana, que possuam algum tipo de

doença ou alergia, ou que apenas estão buscando evitar alimentos que tragam riscos

à saúde, a oferta de alimentos variados e saudáveis que atendam suas restrições é

muito escassa. Vemos muitas pessoas se esforçando para seguir uma dieta livre de

alimentos industrializados ou de origem animal, atrás de opções mais saudáveis e

variadas.

Mesmo com os recentes escândalos envolvendo empresas gigantes da área de

alimentos industrializados, em 2017, a cultura do consumo destes alimentos de

origem animal continua grande, levando a população à obesidade e problemas de

saúde.

O presente estudo, visou atender as necessidades de um público que têm

sentido a falta destes serviços de alimentação mais saudável e com variedades para

todos àqueles que precisam de um cuidado maior na hora de escolher o que comer

quando está procurando algum alimento pronto para consumo. Para que fosse sentida

essa necessidade, a pesquisa com usuários mostrou-se de extrema importância para

traçar um perfil destas pessoas, identificando quais são seus maiores problemas e

necessidades, para que o aplicativo desenvolvido neste projeto buscasse atender

com eficiência estes problemas.

O aplicativo Delive viria para apresentar para essas pessoas um serviço onde

elas iriam pode escolher livremente os alimentos que desejam consumir, escolhendo

entre as mais diversas opções, e podendo escolher quais alimentos deseja excluir de

acordo com suas restrições.

Depois de traçado os problemas e necessidades que os usuários possuem, foi

criado um protótipo para simulação do aplicativo em funcionamento, com o objetivo

de fazer com que o usuário alvo sentisse, de maneira eficiente e prazerosa, que seus

140

problemas estavam sendo atendidos. Este protótipo foi realizado seguindo a

metodologia proposta por Garrett (2011), e tendo como estudo diretrizes de

usabilidade de autores como Nielsen (2007), Krug (2008) e de estudos da cognição

voltada para interface por Preece, Rogers e Sharp (2005), dentre outros autores.

Com o estudo da bibliografia destes autores, foi entendida a ideia e o

funcionamento que uma interface proporciona para quem a utiliza, tendo em vista

tanto aspectos apenas estéticos, como também alguns psicológicos, tudo isso irá

influenciar em como o usuário irá interagir.

Com isso foram realizados testes com usuários, utilizando o protótipo em um

smartphone, afim de perceber os problemas que a interface viesse a apresentar,

através da análise da interação do usuário com o sistema, e a partir de perguntas de

satisfação propostas por Unger (2009).

Dentro destes testes com os usuários, foi encontrado a parte mais difícil do

projeto, a interação com o público alvo. Em um das entrevistas a ideia era realizar

um grupo focal para que fosse discutido as dificuldades encontradas entre os usuários

dentro de suas restrições. Mas o tempo disponível e necessário para junta-los para a

realização do grupo focal foi muito escasso, e acabou não acontecendo. Levando a

ser realizada uma entrevista por meio de aplicativo de mensagens, o que acarretou

em levantamentos muito bons, mas que poderiam ter sido melhores se tivesse

existido a interação dos usuários e do entrevistador face a face.

Os resultados desses testes, provaram a importância que eles têm para o

projeto e desenvolvimento de uma interface. Através deles foram detectados

problemas que, para quem o projetou, passaram despercebidos ou até mesmo

ignorados por terem sido considerados óbvios de se compreender. Mas ao ser posto

em prática com o usuário em questão, foi percebido que muitas dos elementos que

pareciam ter um entendimento fácil, tornaram-se difíceis no olhar do usuário.

Fazendo com que fosse necessário o desenvolvimento de melhorias que

solucionassem esses problemas.

A realização deste trabalho de pesquisa, serviu para me mostrar como é

diversificado e complexo o mercado quando se trabalha com um produto que vai

atingir um público geral e ou específico, pois o estudo apenas técnico não adiantará

se não for complementado com o estudo de campo, com a pesquisa com os usuários,

buscando conhecer todas as suas dores e necessidades para que possam ser aplicadas

141

da maneira certa dentro do projeto, onde esses usuários, que é para quem o projeto

está sendo desenvolvido, se sintam bem em utilizar aquele artefato.

Foi muito gratificante ver o desenvolvimento desde as ideias de qual

projeto/aplicativo seria desenvolvido, até os rabiscos, escopos e ao protótipo final,

onde ver ele “funcionando” e os usuários deixando seu feedback, mostra que aquele

projeto que você optou fazer, funciona, e pode vir a realmente sair do papel e se

tornar algo comercializável.

Com base na justificativa de gerar informações para a área de design gráfico,

especificadamente para a de interfaces, a presente pesquisa também mostrou um

pouco de como existe dificuldade para pessoas que desejam seguir uma dieta fora

dos padrões impostos pela sociedade, e como essas pessoas conseguem suprir essas

necessidades.

O Delife visa expandir-se para outras regiões que sintam a falta de produtos

saudáveis mais variados, adequando-se à outras empresas que também trabalhem

com a montagem dos pratos tendo em vista as limitações que seus consumidores

possuem, podendo até mesmo adaptar este aplicativo para restaurantes que já

possuam algum tipo de software para isso, mas que desejam expandir seu público,

levando em conta quem também segue alguma restrição alimentar, dando a

oportunidade de o cliente escolher qual das opções ele desejar.

142

REFERÊNCIAS

ANDRADE, Antonio Luis Lordelo. Usabilidade de interfaces web Avaliação heurística

no jornalismo on-line, Rio de Janeiro: e-papers, 2007.

ANGELIS, Rebeca Carlota. A importância dos alimentos vegetais na proteção da

saúde: fisiologia protetora e preventiva de enfermidades degenerativas. 2ª

edição. São Paulo: Atheneu, 2005.

BURGIERMAN, Denis Russo. Deveríamos parar de comer carne?. Nov. 2016.

Disponível em < https://super.abril.com.br/ciencia/deveriamos-parar-de-comer-

carne/ > Acesso em 04 de Dezembro de 2017.

CYBIS, Walter; HOLTZ, Adriana; FAUST, Richard. Ergonomia e Usabilidade. 2015.

496p.

DIAS, Cláudia. Usabilidade na Web. Alta Books, 2007 - 296 páginas

EXAME, Revista. Simulador de consumo de água por alimentos. Set. 2016.

Disponível em < https://exame.abril.com.br/ferramentas/simulador-de-consumo-

de-agua-por-alimentos/ > Acesso em 01 de Dezembro de 2017.

GAMEZ, Luciano. TICESE - Técnica de inspeção de conformidade ergonômica de

software educacional. Dissertação de Mestrado submetida à Universidade do

Minho. Portugal. 1998.

GARRETT, Jesse James. The Elements of User Experience, User-Centered Design

for the Web and Beyond. 2nd Edition, - 191 pages, 2010

GLÚTEN, Blog. Afinal, o que é glúten? Fev. 2016. Disponível em <

http://www.glutenconteminformacao.com.br/o-que-e-gluten/ > Acesso em 04 de

Dezembro de 2017.

143

KRUG, Steve. Não me faça pensar. 2. ed. Rio de Janeiro: Altabooks, 2006.

LEAL, Aline. Rótulo deverão indicar presença de alergênicos a partir de hoje. Jul.

2016. Disponível em < http://agenciabrasil.ebc.com.br/geral/noticia/2016-

07/rotulos-deverao-indicar-presenca-de-alergenicos-partir-de-hoje > Acesso em 04

de Dezembro de 2017.

MANSUR, Alexandre. No Brasil, a pecuária é a maior responsável pelo aquecimento

global. Out. 2016. Disponível em < http://epoca.globo.com/colunas-e-blogs/blog-

do-planeta/noticia/2016/10/no-brasil-pecuaria-e-maior-responsavel-pelo-

aquecimento-global.html > Acesso em 02 de Dezembro de 2017.

MAXWELL, Joseph A. (2005) Qualitative Research Design: An Interactive Approach.

2nd Edition, Sage, Thousand Oaks.

MENDES, R. M. Avaliação da interface de desenvolvimento de materiais

educacionais digitais no ambiente de HyperCAL online. Dissertação submetida ao

Programa de pós-Graduação em Design da UFRGS, 2009.

NATHAN, Rodrigues. Brasileiros mudam hábitos e busca alimentação saudável.

Nov. 2016. Disponível em < http://www.boavontade.com/pt/saude/brasileiro-

muda-habitos-e-busca-alimentacao-saudavel > Acesso em 04 de Dezembro de 2017.

NIELSEN, Jakob. Usabilidade na Web. Ed. Elsevier Brasil, 2007 - 406 páginas

NIELSEN, Jakob. Projetando Websites. Ed. Gulf Professional Publishing, 2000 - 416

páginas

NIELSEN NORMAN GROUP, Blog. 10 Usability Heuristics for User Interface Design.

Jan. 1995. Disponível em < https://www.nngroup.com/articles/ten-usability-

heuristics/ > Acesso em 04 de Dezembro de 2017.

144

NORMAN, Donald A. Design Emocional: por que adoramos (ou detestamos) os

objetos do dia-a-dia. Rio de Janeiro: Rocco, 2008.

NUWER, Rachel. What would happen if the world suddenly went vegetarian?. Set.

2016. Disponível em < http://www.bbc.com/future/story/20160926-what-would-

happen-if-the-world-suddenly-went-vegetarian > Acesso em 15 de Novembro de

2017.

O GLOBO, Revista. Sobrepeso e obesidade em alta no Brasil, diz ONU. Jan. 2017.

Disponível em < https://oglobo.globo.com/sociedade/saude/sobrepeso-obesidade-

em-alta-no-brasil-diz-onu-20819122 > Acesso em 04 de Dezembro de 2017.

OLIVEIRA, Verônica; MARTINS, Maria; VASCONCELOS, Ana Cecília. Entrevistas em

profundidade na pesquisa em administração: pistas teóricas e metodológicas.

SIMPOI, 2012. Disponível em: <

http://www.simpoi.fgvsp.br/arquivo/2012/artigos/E2012_T00259_PCN02976.pdf >

Acesso em 04 de Dezembro de 2017.

ROGERS, Yvonne; SHARP, Helen; PREECE, Jennifer. Design de interação: além da

interação humano-computador. 3. ed. Porto Alegre: Bookman, 2013. 585 p.

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

SILVA, et al. Vegetarianismo vegano: razões éticas e saudáveis. P. 1-7. Unit, 2003.

Disponível em <

https://midia.unit.br/enfope/2013/GT10/VEGETARIANISMO_VEGANO.pdf > Acesso

em 04 de Dezembro de 2017.

SIZER, Frances Sienkiewicz; WHITNEY, Eleanor Noss. Nutrição: conceitos e

controvérsias. Tradução de Nelson Gomes de Oliveira et.al. 8. ed. Barueri-SP:

Manole, 2003.

145

TEIXEIRA, Fabrício. Introdução e boas práticas em UX DESIGN. Ed. Casa do código –

311 páginas

UNGER, Russ; CHANDLER, Carolyn. O Guia para projetar UX. Rio de Janeiro: Alta

Books Editora, 2009.

VARELA, Aida; BARBOSA, Marilene Lobo Abreu. TRAJETÓRIAS COGNITIVAS

SUBJACENTES AO PROCESSO DE BUSCA E USO DA INFORMAÇÃO: FUNDAMENTOS E

TRANSVERSALIDADES. Encontros Bibli: Revista eletrônica de biblioteconomia e

ciência da informação, v. 17, 2012.

VEJA, Revista. O aquecido mercado de apps de delivery. Fev. 2017. Disponível em

< https://veja.abril.com.br/blog/a-origem-dos-bytes/o-aquecido-mercado-de-

apps-de-delivery/ > Acesso em 02 de Dezembro de 2017.

146

ANEXO A – RESULTADO QUESTIONÁRIO ONLINE

149

ANEXO B – ENTREVISTAS APROFUNDADAS

Alguns trechos das entrevistas foram retirados por não conterem conteúdo

relevante para a pesquisa, mantendo apenas as respostas que agregassem valor ao

projeto.

ENTREVISTADO 1:

LOCUTOR: Você segue alguma dieta ou evita comer/beber certos tipos de alimentos?


ENTREVISTADO: Sim

L: Quais os alimentos que você evita comer, e por quê?

E: Frituras, por que não presta e doenças cardíacas.

L: Já teve alguma doença ou complicação por causa de alimentação errada?

E: Não, só excesso de barriga.

L: Quando você vai escolher o que comer, no supermercado, restaurantes, etc. Você

costuma olhas as informações nutricionais dos produtos?

E: Não, mas reconheço que é importante.

L: Quando vocÊ vai comer fora de casa, você encontra com facilidade locais que

ofereçam alimentos que se adequem ao que você come?

E: Não, só tem a feira do Salgado (Bairro da Cidade de Caruaru, PE). O resto é

conversa.

L: Já pediu ou costuma pedir comida por entrega/delivery? Por telefone, whatsapp,

etc?

E: Sim, apenas pizza. Por telefone.

L: Como você conheceu o local que costuma pedir pizza? Panfleto, Facebook,

conhecidos?

E: Panfleto.

L: Onde você pede, existem opções de pizza mais saudáveis no cardápio?

E: Não.

150

ENTREVISTADO 2:



ENTREVISTADO: Evito comer crustáceos, por alergia.

L: Já aconteceu algum caso de você ingerir este tipo de comida? Depois de saber que

tinha alergia.

E: Sim.

L: Esse fato ocorreu na sua casa ou fora?

E: Fora.

L: Você lembra como ocorreu? Não tinha informações sobre o que tinha na comida?

Ou você não percebeu?

E: Foi em um dos pratos pedidos, não tinha descrito no cardápio que poderia vir com

determinados ingrediente.



E: Não.

L: Como você realiza a escolha dos alimentos? Pela marca, aparência, preço?

E: Por marca e preço.

L: Já pediu ou costuma pedir comida por delivery?

E: Costumo pedir.

L: Você pede mais por onde? telefone, whatsapp, aplicativos?

E: Aplicativo.

L: Nesse aplicativo que você utiliza, é mostrado quais pratos possuem ingredientes

que possam lhe causa mal? No seu caso, crustáceos.

E: Em alguns, sim.

L: Quando você pede por esses aplicativos, as opções dos pratos são prontos, ou você

pode escolher o que quer montar?

E: São prontos.

151

ENTREVISTADO 3:



ENTREVISTADO: Não sigo dieta. Evito comer e beber por opção, não por academia.

L: Quais alimentos que você está evitando comer?

E: [Audio] Olha, o que eu estou evitando comer é tomar refrigerantes, comidas

industrializadas, açúcar, carboidratos e gorduras. Esses são os alimentos que eu

evito.

L: Qual o motivo para evitar esses alimentos?

E: Porque sei que não fazem bem a minha saúde.



E: [Audio] Pra ser sincera, não. Só olho a validade.

L: Quando você opta por comer fora de casa, você encontra com facilidade locais

que ofereçam alimentos que se adequem ao que você come?

E: Não! Não mesmo! É horrível, encontrei um em Recife e o prazer de comer lá foi

super legal.

L: O que você não gostou nos daqui? Falta de variedade? A comida em si? Outros

fatores?

E: Variedades até que tem, o que falta é variedades saudáveis. E um cuidado também

com a higiene.

L: Já pediu comida por delivery?

E: Sim.

L: Por onde costuma pedir? Telefone, whatsapp?

E: Pedi junto com os meninos (filhos) pelo telefone. Whatsapp ainda não.

L: Como vocês escolheram o local para pedir a comida? Já conheciam?

E: Fomos informados em uma pizzaria. Mas não existe divulgação.

L: Eram pratos prontos? Ou vocês podiam escolher o que queria para cada um?

E: Prontos.

152

ENTREVISTADO 4:



ENTREVISTADO: Sim, evito comer carne vermelha. O motivo é que não gosto mesmo.

E também acho o abate muito violento. Mas não sou vegana nem vegetariana. Só não

curto carne vermelha.

L: Já passou por algum problema na hora de almoçar fora de casa por causa dessa

opção?

E: Eu sentia dificuldade de encontrar opção para almoçar quando passei um tempo

seguindo uma dieta vegetariana. Passei mais ou menos 2 anos nessa dieta. Era

complicado achar almoço vegetariano, pois eu almoço muito fora de casa. Quando

achava almoço vegetariano, era sempre a mesma coisa, o que me enjoava. Mas desde

que voltei a consumir carne branca, não tenho sentido dificuldade. Como minha

única "restrição" tem sido carne vermelha, não acho difícil encontrar almoço com

peixe ou frango. Mas minha pequena experiência como vegetariana me mostrou como

é difícil seguir essa dieta quando você mesma não cozinha.

L: Quando você vai comprar alimentos para casa, ou ao almoçar fora. Você costuma

reparar nas informações nutricionais de cada alimento?

E: Não.


E: Sim. Bastante!

L: Qual método mais utiliza? Telefone, aplicativo?

E: Aplicativo. Mas antes do aplicativo, usava mais o telefone.

L: Como você descobre/descobriu os locais para pedir por delivery? Panfletos, Redes

sociais, amigos?

E: Através dos amigos e redes sociais.

L: Os pratos que você costuma pedir por delivey, já são pré-montados, ou é oferecida

à opção de montar de acordo com seus gostos?

E: Os que mais gosto de pedir são os que eu posso montar.

153

ENTREVISTADO 5:



ENTREVISTADA: Não sigo dieta, mas estou evitado açúcar e embutidos em excesso.

L: Já passou por algum problema na hora de almoçar fora de casa por causa dessa

opção de evitar esses alimentos?

E: Como o almoço todos os dias no trabalho, não bebo o suco disponibilizado, pois

contem muito açúcar, também não tomo o café.

L: Há variedade nos pratos disponíveis no seu trabalho?

E: Não muita, e o preparo não é muito saudável, por conta dos excessos de produtos

industrializados

L: Conhece alguém do seu trabalho que prefere pedir comida fora do que comer por

lá?

E: Quase todos, a gente só não pede por que a comida disponibilizada é em troca do

ticket alimentação.



E: Nos últimos tempos comecei a reparar nessas informações

L: Quais informações você tem mais preocupação em ter cuidado?

E: Alimentos que não contenham ovos e leite, pois moro com uma vegana, e optamos

por menos temperos industrializados, não consumimos mais suco de polpa e sim só

frutas.

L: Quando você opta por comer fora de casa, você encontra com facilidade locais

que ofereçam alimentos que se adequem ao que você come?

E: Não, acredito q fora, a maioria dos alimentos são os mais industrializados

possíveis.


E: Peço com pouca frequência.

L: Quando pede, costuma pedir por onde? Telefone, Whatsapp, outro?

E: Telefone.

L: Das vezes que pediu, os pratos já eram prontos, ou você tinha a opção de escolher

o que queria?

154

E: Pratos já prontos.

L: Já aconteceu de vir algo que você não come, e você precisou retirar do prato?

E: Sim, dificilmente como macarrão e as vezes quando vem retiro.

155

ENTREVISTADO 6:



ENTREVISTADA: Sigo sim. Sou vegetariana e tenho artrite reumatoide.

L: Já passou por algum problema ou constrangimento na hora de almoçar fora de

casa por causa dessas restrições?

E: Acho que constrangimento não. Às vezes, quando as pessoas não sabem que sou

vegetariana fazem almoço com carne em tudo e eu fico sem almoçar. Mas geralmente

isso acontece só quando as pessoas não me conhecem.



E: Sempre. Por ser vegetariana eu sempre vejo se tem carne e a quantidade de sódio

pela artrite.

L: Você consegue encontrar uma boa variedade de alimentos disponíveis de acordo

com suas restrições?

E: Comida crua para fazer, sim. Comida pronta, quase nunca!


E: Sim.

L: Quando pede, costuma pedir por onde? Telefone, Whatsapp, outro?

E: Por telefone ou Whats. Mas não tenho aplicativo de delivery, não.

L: Das vezes que pediu, os pratos já eram prontos, ou você tinha a opção de escolher

o que queria?

E: Já era pronto, já. Geralmente tem a opção vegetariana ou eu peço pra excluir a

carne.

L: Já aconteceu alguma vez de vir algo que você não come, e você ter que retirar do

prato?

E: Já. Pizza sempre acontece isso.

L: Mas aconteceu mesmo você pedindo que retirassem?

E: Sim!

universidade federal de pernambuco centro … · 2019. 10. 25. · universidade federal de...

Documents