FruitGo (Report) by Marina Pinto

FruitGo Interfaces Multimodais, 2018 Grupo I Luiza Senra Pereira, UP201708930 Marina da Conceição Melo Pinto, UP201305611

Índice Conceito FruitGo

Aplicações Relacionadas

Myplate App

Waterlogged

Fruits Nutrition and Benefits

Nike Training Club

Recolha de dados

Personas

Síntese dos requisitos da aplicação

Cenários e Wireframes

Cenários de percurso (visão geral) Persona Primária

17 18

Cenário I - Utilizador recebe notificação, no Android, para comer fruta (maçã). 18 Cenário II - Utilizador pretende consultar informação sobre a fruta, tal como época, quantidade de calorias, nutrientes, benefícios para a saúde e dicas de higienização. 19 Cenário III - Utilizador pretende consultar relatório de consumo mensal de fruta 20 Cenário IV - Utilizador pretende colocar lembrete para comer maçã. Persona Secundária

21 22

Cenário V - Utilizador pretende elaborar lista de compras de frutas e localizar frutarias próximas. 22 Cenário VI - Utilizador pretende receber notificações relativa à fruta da época. 23 Cenário VII - Utilizador pretende saber frutas que previnem constipações

Cenário VIII - Utilizador pretende adicionar fruta personalizada à aplicação

Cenários de validação

Cenários de variantes de percurso-chave

Cenários de utilização necessárias

Cenários de casos limite

Testes de Utilização

Revisão dos Wireframes e layouts de alta-fidelidade

Anexos

Protótipo no Marvel Referências

34 35

Conceito FruitGo FruitGo é uma aplicação móvel direcionada a jovens-adultos, que ambiciona educar os utilizadores para o consumo diário de 3 a 5 peças de fruta natural e prática, isto é, fruta que não precisa de preparação prévia. As oportunidades para a criação desta aplicação surgem perante a observação de que devido a uma rotina agitada nem sempre os jovens-adultos se lembram de manter uma alimentação saudável, isto é, uma alimentação que engloba o consumo regular de frutas e água. Reparou-se que este público muitas vezes substitui os alimentos naturais por fast-food, por considerarem mais prático e fácil. No entanto, algumas peças de fruta também são de consumo fácil e prático, uma vez que podem ser consumidas de forma natural sem necessidade de preparação prévia. Segundo a Roda dos Alimentos, para uma alimentação saudável cada pessoa deve comer entre três a cinco peças de fruta fresca por dia, sendo aconselhável pelos nutricionistas, o consumo mínimo de três peças. [1] Deste modo, FruitGo pretende sensibilizar e educar os utilizadores para a importância do consumo diário de fruta.

Aplicações Relacionadas Myplate App

A aplicação M yPlate é uma forma fácil e simples de controlar as calorias dos alimentos ingeridos pelo utilizador, promovendo a prática de exercício físico e uma nutrição apropriada. Esta App está disponível para iPhone, iPad, e no A ppleWatch. [2]

Waterlogged

A aplicação W aterlogged, ajuda o utilizador a ingerir uma quantidade mínima de água por dia, essencial para o bom funcionamento do corpo humano, e fá-lo através de gráficos e avisos. [3]

Fruits Nutrition and Benefits

Fruits Nutrition and Benefits, é uma aplicação que contém a informação nutricional de diversas frutas bem como indica os seus benefícios para a saúde. Além disso apresenta algumas receitas e incentiva o consumo de frutas da época. [4]

Nike Training Club

Nike Training Club é uma aplicação inteligente que disponibiliza mais de 100 treinos e informação audiovisual com instruções de especialistas para cada actividade. Esta aplicação cria planos de treino personalizados com base nas atividades registadas na aplicação. Quanto mais atividades se registar, mais a aplicação consegue adequar os treinos às necessidades de cada utilizador. Além disso, esta aplicação permite também a partilha de treinos com amigos. [5] 4

Recolha de dados A fase de recolha de dados tendo em vista identificar potenciais utilizadores e definir pelo menos três personas, caracterizou-se por três momentos. Numa primeira abordagem, elaborou-se um questionário no Google Forms, para facilitar a agregação de dados, sendo que seguidamente se entrevistaram 4 pessoas e foi feito o registo das respostas no formulário criado. Posteriormente, realizaram-se algumas alterações às perguntas do questionário, e enviou-se o mesmo a jovens, jovens-adultos e adultos, residentes em Portugal, de forma virtual. Os inquiridos apresentam variados níveis de escolaridade e áreas de formação tais como nutrição, desporto, artes, medicina, advocacia, engenharia, etc. Além disso, procuramos saber, durante o questionário, se os inquiridos eram praticantes de algum regime alimentar específico (sem restrições, macrobiótica, vegano, ovolactovegetariano, crudívoro, paleodieta, frugívoro), sendo que alguns responderam, por exemplo, baixa glicemia/açúcar, um problema de saúde que pode condicionar o consumo de fruta. Assim, obtiveram-se 59 respostas, 62,7% do sexo feminino e 37,3% do sexo masculino, sendo que 78% dos inquiridos habitam na zona urbana e 22% habitam na zona rural. Os inquiridos apresentam diferentes idades e ocupações, como se pode observar nos gráficos apresentados a seguir.

Relativamente à tecnologia, observou-se que a maioria dos inquiridos utiliza smartphone, sendo que dos que usam, observa-se que a maioria usa sistema operativo Android, sendo que a segunda minoria utiliza sistema operativo iOS, e uma pequena percentagem usa o sistema operativo Windows Phone.

Relativamente ao consumo de fruta, observou-se que das 59 pessoas inquiridas, 22% não têm por hábito comer fruta.

Observou-se também que a maioria da amostra, 62,7%, consome fruta diariamente, sendo que 30,5% come fruta semanalmente, e os restantes 6,8% comem fruta muito raramente. Relativamente à quantidade de fruta que os inquiridos ingerem por dia, observa-se que 10,2% não comem fruta, 1,7% come uma peça de fruta por semana, 45,8% dos inquiridos consomem apenas uma peça de fruta por dia, 27,1% consomem apenas 2 peças de fruta por dia e os restantes 15,2% consomem mais de duas peças de fruta diariamente.

Questionou-se também a amostra sobre circunstâncias em que comiam fruta, sendo que se observou que 96,6% dos inquiridos come fruta parado e 27,1% come fruta em movimento.

Pediu-se também aos inquiridos para identificarem vantagens e desvantagens do consumo de fruta, no entanto, estes referiram apenas vantagens no consumo de fruta: “saudável”, “nutritivo”, “vitaminas”, “facilidade de transporte”, “preço”, “sistema digestivo” e “praticidade”. Aproveitaram-se as entrevistas e os questionários para recolher também informações sobre higienização e cuidados no transporte de frutas. A maioria dos inquiridos refere acondicionar as frutas em guardanapos, potes plásticos, sacos plásticos e lancheiras térmicas. Quando questionados sobre a higienização, referem lavar com água, usar sabão, clorin e vinagre. Após consumir a fruta, os inquiridos referem jogar no lixo, dar aos animais, reutilizar cascas para culinária, adubo e compostagem. Relativamente ao momento de compra de fruta, das pessoas inquiridas, 83.1% refere comprar fruta em grandes supermercados, 45.8% refere comprar em frutarias e 25% diz

comprar em lojas locais. No momento de compra, os inquiridos referem ser influenciados por fatores como a qualidade (82%), preço (72%) e origem, orgânico e acessibilidade (24%). Em relação ao consumo de frutas, os inquiridos referem como preferência e opção de consumo regular os seguintes frutos: lichia, banana, pêra, morango, uva, pitanga, goiaba, berry, framboesa, mirtilo, amora, maçã, pêssego, anona, ameixa, cereja, laranja, kiwi, tangerina e manga.

Personas Abaixo apresentamos as 6 personas resultantes das entrevistas e inquéritos realizados.

Síntese dos requisitos da aplicação Devido à curta duração do semestre, para o desenho da aplicação, opta-se apenas pelo desenvolvimento da parte Front Office da aplicação, pelo que alguns requisitos presentes nas personas tais como horário e comparação de preços das lojas não serão desenvolvidos no layout da aplicação. A persona Mário Doce foi útil para identificar algumas das necessidades da aplicação na parte B ack Office, no entanto, de modo a conseguir concluir o trabalho com sucesso, focar-nos-emos apenas no desenho de wireframes para a parte Front Office. Assim, as personas ajudaram-nos a identificar algumas necessidades que se traduzem nos seguintes requisitos técnicos, de informação e funcionais. Técnicos: -

Aplicação compatível com o sistema operacional Android;

Uso de cores contrastantes no layout para permitir leitura por utilizadores daltónicos.

Informação: -

Informação nutricional e valores calóricos sobre as frutas.

Dicas de higienização, preparo e armazenamento das frutas.

Informação sobre frutas que aceleram o metabolismo;

Informação sobre frutas que auxiliam na digestão;

Informação sobre frutas que auxiliam no tratamento de gripes e outras doenças;

Frutas de consumo prático a incluir na aplicação: l ichia, banana, pêra, morango, uva, framboesa, mirtilo, maçã, pêssego, ameixa, cereja, laranja, kiwi e tangerina.

Funcionais: -

Agendamento de lembretes diários de consumo de fruta consoante a necessidade do utilizador (máximo de 5 por dia);

Pesquisa por pontos de venda de fruta (supermercados, frutaria e afins);

Notificação sobre frutas da época;

Relatórios diários, semanais, mensais e anuais sobre consumo de fruta;

Gamificação: meta diária de consumo de frutas (quanto já comeu e quanto falta);

Lista de compras, com a possibilidade de adicionar e salvar frutas.

Utilizador pode adicionar uma fruta personalizada, se a fruta de consumo pretendido não estiver disponível na aplicação.

Cenários e Wireframes Cenários de percurso (visão geral)

Persona Primária Cenário I - Utilizador recebe notificação, no Android, para comer fruta (maçã). 1. Utilizador recebe uma notificação no Android: a. Confirmar que comeu a fruta; i. Aparece uma mensagem a dizer “Boa! Continua assim!”. ii. A notificação desaparece. b. Assinalar que não comeu a fruta; i. Aparece uma mensagem a dizer “Oh, compensas na próxima!”. ii. A notificação desaparece. c. Editar a fruta consumida; i. Aparece a lista de frutas; ii. Selecionar a fruta consumida; iii. Salvar a alteração; d. Adiar a notificação 10 min.

Cenário II - Utilizador pretende consultar informação sobre a fruta, tal como época, quantidade de calorias, nutrientes, benefícios para a saúde e dicas de higienização. 1. Utilizador encontra-se na tela inicial da lista de frutas. a. Selecionar uma fruta; b. Ver informação de calorias, nutrientes [6], benefícios para a saúde [7] e dicas de higienização relativa à fruta.

Cenário III - Utilizador pretende consultar relatório de consumo mensal de fruta 1. Utilizador encontra-se na tela inicial da lista de frutas. a. Clicar na infografia de fruta consumida; b. Clicar em relatório de fruta mensal; c. Ver relatório de fruta mensal.

Cenário IV - Utilizador pretende colocar lembrete para comer maçã. 1. Utilizador encontra-se na tela inicial da lista de frutas. a. Clicar no ícone do alarme no menu de navegação. b. Clicar no botão “+” no menu do alarme para adicionar um novo alarme; c. Na tela das informações do alarme: i. Selecionar a hora para consumo; 1. Salvar hora para consumo; ii. Escolher dias de repetição; iii. Selecionar a fruta; iv. Clicar em salvar.

Persona Secundária Cenário V - Utilizador pretende elaborar lista de compras de frutas e localizar frutarias próximas. 1. Utilizador encontra-se na tela inicial da lista de frutas. a. Clicar no ícone da lista de compras no menu de navegação; b. Clicar no botão de adicionar item; i. Selecionar a fruta; ii. Selecionar a quantidade da fruta; iii. Clicar em “Salvar”. c. Clicar no item “Encontre uma frutaria no Google Maps”; i. Abrir o Google Maps para localizar frutarias próximas;

Cenário VI - Utilizador pretende receber notificações relativa à fruta da época. 1. Utilizador encontra-se na tela inicial da lista de frutas. a. Clicar no ícone “configurações” no menu de navegação; b. Ativar notificação de fruta da época;

Cenário VII - Utilizador pretende saber frutas que previnem constipações 1. Utilizador encontra-se na tela inicial da lista de frutas. a. Clicar no ícone de pesquisa no menu de navegação; i. Digitar o termo "constipação" no campo de pesquisa; ii. Clicar numa das frutas que aparecem nos resultados; iii. Ver informação relativa à fruta selecionada;

Cenário VIII - Utilizador pretende adicionar fruta personalizada à aplicação 1. Utilizador está na tela inicial da lista de frutas, mas não encontra a fruta pretendida na aplicação FruitGo. a. Clicar no "+" para adicionar fruta personalizada; b. Pop-up a informar o utilizador de que a fruta personalizada não irá ser contabilizada nos relatórios de consumo semanal, mensal e anual. i. Clicar em "ok"; c. Na tela de personalização da fruta: i. Inserir o nome da fruta; ii. Selecionar a cor da fruta; iii. Clicar em "salvar".

Cenários de validação Nos cenários de validação, analisaram-se os percursos-chave da aplicação assim como as suas variantes, tendo sido colocadas as seguintes questões aos cenários de percurso: - Como é que o utilizador pode adicionar frutas à lista de compras? - Como é que o utilizador pode adicionar um alarme? - Como é que o utilizador pode saber qual a fruta que ajuda a prevenir constipações? - Como é que o utilizador sabe quais são os objetivos e funcionalidades de FruitGo? - Como é que o utilizador pode sincronizar a sua lista de frutas com outra aplicação de compra de frutas já existente no seu dispositivo? - Como é que o utilizador interage com a aplicação FruitGo se não lhe for possível aceder à internet? Abaixo apresenta-se o processo que o utilizador percorrerá para responder às questões.

Cenários de variantes de percurso-chave 1. Para além do percurso-chave de adicionar item à lista de compras (ver cenário V) através do menu de navegação, o utilizador consegue fazê-lo através da tela da informação nutricional da fruta: a. Clicar no ícone de adicionar fruta à lista de compras; b. Selecionar a quantidade de fruta; c. Clicar em "Salvar".

2. Para além do percurso-chave de criar alarme (ver cenário IV) através do menu de navegação, o utilizador consegue fazê-lo através da tela da informação nutricional da fruta: a. Clicar no ícone de adicionar alarme para consumo de fruta; b. Na tela das informações do alarme: i. Selecionar a hora para consumo; 1. Salvar hora para consumo; ii. Escolher dias de repetição; iii. Clicar em salvar.

3. Para além do percurso-chave de procurar a fruta que ajuda a prevenir constipações. (cenário VII) através do menu de navegação, o utilizador consegue fazê-lo através da tela inicial da lista de frutas: a. Selecionar uma fruta; b. Ler informação relativa à fruta selecionada.

Cenários de utilização necessárias 1. Utilizador interage com a aplicação FruitGo pela primeira vez; a. Ler informação presente no slideshow relativa aos objetivos e funcionalidades da aplicação, incentivando o utilizador a comer mais fruta.

2. Utilizador pretende sincronizar a sua lista de compras com outra aplicação de compras já existente no seu smartphone android. a. Clicar no menu configurações; b. Ativar “conectar com ListasApp”.

Cenários de casos limite

1. Utilizador encontra-se sem possibilidade de aceder à internet; a. Todas as funcionalidades da aplicação FruitGo estão disponíveis offline, excepto a possibilidade de encontrar uma frutaria no google maps.

Testes de Utilização Foram realizados dois testes de utilização com o objetivo de avaliar cinco cenários de percurso-chave: “ver informação de uma fruta”, “adicionar fruta personalizada”, “criar alarme para consumo da fruta”, “adicionar fruta à lista de compras” e “consultar relatório de consumo mensal de fruta”. Ao testar o cenário de percurso-chave “ver informação de uma fruta”, observou-se que o utilizador 1 não teve dificuldades ao executar a tarefa determinada. Já o utilizador 2, ao percorrer as telas, teve tendência a fazer o movimento “arrastar na horizontal” (swipe) para navegar entre as telas da informação inicial da aplicação. Durante o teste do cenário de percurso-chave “adicionar fruta personalizada”, observou-se que o utilizador 1 ficou um pouco confuso, demorando a chegar até à página inicial das frutas, onde encontrou, finalmente, o botão de adicionar fruta personalizada. Seguidamente este utilizador percorreu as etapas de adicionar fruta personalizada de forma intuitiva, concluindo assim o objetivo da sua tarefa. Ao testar o mesmo cenário com o utilizador 2, observou-se que este encontrou rapidamente e intuitivamente o botão de adicionar a fruta personalizada na tela inicial. Seguidamente este utilizador percorreu também de forma intuitiva as etapas de adicionar fruta personalizada, demonstrando porém alguma dificuldade ao selecionar a cor da fruta. No momento de testar o cenário de percurso-chave “criar alarme para consumo de fruta”, observou-se que tanto o utilizador 1 como o 2 facilmente se dirigiram ao ícone do alarme no menu superior e, na tela do alarme, percorreram as etapas de adicionar alarme, de forma intuitiva. Durante o teste do cenário de percurso-chave “adicionar fruta à lista de compras”, observou-se que ambos os utilizadores 1 e 2 percorreram as etapas de forma intuitiva. Por fim, o teste do cenário de percurso-chave “consultar relatório de consumo mensal de fruta”, foi alvo de muita dificuldade. O utilizador 1 percorreu diferentes telas da aplicação até chegar à tela inicial das frutas, clicando de seguida na caixa da meta diária e, selecionando, posteriormente o relatório mensal. Já o utilizador 2, também procurou essa informação na tela de pesquisa, de alarme, até que, na tela inicial, transmitindo um sentimento de

“exclusão de possibilidades”, clicou na caixa correspondente à meta diária, chegando assim ao relatório mensal. Deste modo, a realização destes testes de utilizador, embora com protótipos de baixa fidelidade, permitiram identificar aspectos importantes a ser melhorados na prototipagem final da aplicação, tais como: -

Destacar de forma mais clara o ranking das frutas (com um título indicativo);

Permitir swipe e incluir botões “recuar” e “avançar” nas telas informativas iniciais;

Destacar o botão de adicionar fruta personalizada.

Adicionar a possibilidade de eliminar item da lista de compras.

Revisão dos Wireframes e layouts de alta-fidelidade Tendo por base os aspetos identificados pelo público-alvo nos testes de utilizador procurou-se tornar o protótipo mais consistente a nível visual e de interação, melhorando a sua interface gráfica e usabilidade. A nível tipográfico optou-se por combinar o carácter redondo da fonte Comfortaa, com a universalidade da Source Sans Pro. Nas telas informativas iniciais colocaram-se os botões “recuar” e ”avançar” assim como a ação “deslizar para a esquerda” para facilitar a interação do utilizador. Na tela inicial, as diferentes frutas foram categorizadas de acordo com 5 cores pré-definidas: amarelo, laranja, vermelho, verde e roxo, e organizadas automaticamente por ordem alfabética. Optou-se pela sua representação através de ícone, texto e cor correspondente. Perante o protótipo utilizado nos testes de utilizador, acrescentou-se a possibilidade de o utilizador favoritar a fruta que mais consome ou que mais gosta, e visualizá-la em primeiro lugar na lista, caso habilite a funcionalidade “ver primeiro frutas favoritas” na tela de configurações. Para aceder à informação da fruta, o utilizador clica sobre o ícone da fruta desejada sendo direcionado para a página que contém uma descrição sobre as vitaminas e nutrientes da fruta, seus benefícios para a saúde e dicas de higienização, sendo também destacados o 31

valor calórico e quantidade de água. Nesta tela existe uma variante de percurso que permite ao utilizador adicionar rapidamente a fruta selecionada à lista de compras e/ou criar um alarme para consumo da fruta. Na tela inicial o utilizador pode ainda visualizar o estado da sua meta diária, sendo que as frutas coloridas correspondem às frutas já consumidas e as fruta não coloridas correspondem às frutas programadas que ainda não foram consumidas. Nesta tela, foram acrescentados os ícones das frutas e a descrição “Ranking das Frutas” para corrigir a dificuldade que os utilizadores sentiram durante os testes de utilização. Ao clicar na seta, o utilizador acede à tela dos relatórios semanal, mensal e anual. Na tela do alarme, o utilizador pode adicionar um novo alarme, editar ou ativar/desativar um alarme já existente. Para facilitar a usabilidade da aplicação, optou-se por, face ao protótipo inicial, substituir o relógio analógico por um digital, eliminando-se assim a necessidade de uma segunda tela. Além disso, retirou-se a opção de seleção de AM/PM, bem como o checkbox de repetição, e acrescentaram-se os dias de repetição na tela da lista de alarmes. Procurou-se uniformizar as funcionalidades de seleção de fruta na tela do alarme e da lista de compras, colocando-se, a nível visual, a fruta selecionada colorida e as outras frutas mais claras, com opacidade 50%. Na tela de lista de compras, padronizou-se o tipo de seletor de quantidade para ficar igual à funcionalidade de seleção de hora do relógio e adicionou-se a possibilidade de eliminar um item da lista de compras. Nas telas inicial, lista de compras, lista de alarmes, optou-se por colocar, respetivamente, face aos wireframes iniciais, um botão flutuante de adicionar fruta personalizada, adicionar ítem à lista de compras e adicionar alarme. Na tela de configurações, o utilizador tem a opção de ativar/desativar as seguintes funcionalidades: “notificação de fruta da época”, “adiar alarme (10min)”, “conectar à app de lista de compras” e “ver primeiro frutas favoritas”. Na tela de pesquisa, é possível pesquisar dentro da aplicação e no Google Maps. Dessa forma o utilizador consegue rapidamente encontrar uma fruta que corresponde às suas necessidades de pesquisa (ex: gripe) ou uma frutaria próxima. Deste modo, concluímos que todas as etapas de desenvolvimento deste projeto foram fundamentais para o amadurecimento, melhoria, implementação e refinamento da ideia

inicial. Os testes com os utilizadores e os diferentes contributos dados tanto por professores, como colegas e amigos contribuíram muito para o sucesso do projeto. Como expectativas futuras e auto-crítica, consideram-se como aspetos a melhorar a possibilidade de o utilizador adicionar ícones diferentes para cada fruta personalizada, bem como adicionar frutas já existentes e registadas num banco de dados da aplicação, para o relatório de consumo de fruta ser mais completo e realista. Como aspetos positivos, destacamos a navegação fácil e intuitiva da aplicação, a padronização dos seletores e botões, que garantem a usabilidade da aplicação. Para além disto, a paleta cromática foi testada com a ferramenta ColorOracle e ajustou-se a mesma por forma a garantir contraste e consequente leitura da informação por utilizadores daltónicos.

Anexos Protótipo no Marvel -

A partir da notificação para consumo de fruta https://marvelapp.com/6cgh53g/screen/43010590

A partir da abertura da aplicação https://marvelapp.com/6cgh53g/screen/42768341

Referências [1] Direçao Geral de Saúde, Alimentação Inteligente: Roda dos Alimentos, disponível em: http://www.alimentacaointeligente.dgs.pt/roda_dos_alimentos.html (consultado em 15 de fevereiro de 2018) [2] Apple Store, M yPlate Calorie Counter, disponível em: https://itunes.apple.com/us/app/myplate-calorie-counter/id502317923?mt=8 (consultado em 15 de fevereiro de 2018) [3] Google Play, Waterlogged, disponível em: https://play.google.com/store/apps/details?id=com.daylogger.waterlogged&hl=en (consultado em 15 de fevereiro de 2018) [4] Google Play, Fruits Nutrition and Benefits, disponível em: https://play.google.com/store/apps/details?id=com.rwebhouse.fruits_nutrition_benefits (consultado em 15 de fevereiro de 2018) [5] Nike, Aplicação Nike Training Club, disponível em: https://www.nike.com/pt/pt_pt/c/nike-plus/training-app (consultado em 15 de fevereiro de 2018) [6] Plataforma de Informação Alimentar em Portugal. Disponível em: http://portfir.insa.pt/foodcomp/food?729 (consultado em 6 de abril de 2018) [7] Vitaminas: para que servem e quais as principais fontes. Disponível em: https://web.archive.org/web/20170422111432/http://papabem.pt/sites/papabem.pt/files/23-P apaBem_Vitaminas_Gravidez_5_anos_0.pdf

FruitGo (Report)

Articles inside

Personas

Waterlogged

Recolha de dados

Conceito FruitGo