Universidade Federal de Santa Catarina Simone Hoffmann
DECOS - INTERFACE FUNCIONAL PARA APLICATIVO DE DESCRIÇÃO DE COMPONENTES DE PRODUTOS COSMÉTICOS
Projeto de Conclusão de Curso em Design da Universidade Federal de Santa Catarina para a obtenção do Grau de Bacharel em Design. Orientadora: Profª. Drª. Luciane Fadel
Florianópolis 2019
Hoffmann, Simone
DECOS - Interface Funcional para Aplicativo de Descrição de Componentes de Produtos Cosméticos / Simone Hoffmann ; orientador, Luciane Fadel, 2019.
72 p.
Trabalho de Conclusão de Curso (graduação) -Universidade Federal de Santa Catarina, Centro de
Comunicação e Expressão, Graduação em Design, Florianópolis, 2019.
Inclui referências.
1. Design. 2. Design de Interface. 3. Design Digital. 4. Produtos Cosméticos. I. Fadel, Luciane. II.
Universidade Federal de Santa Catarina. Graduação em Design. III. Título.
DECOS - INTERFACE FUNCIONAL PARA APLICATIVO DE DESCRIÇÃO DE COMPONENTES DE PRODUTOS COSMÉTICOS
Este Projeto de Conclusão de Curso (PCC) foi julgado adequado para obtenção do Título de Bacharel em Design e aprovado em sua forma final pelo Curso de Design
da Universidade Federal de Santa Catarina.
Florianópolis, 27 de Junho de 2019.
Profª. Marília Matos Gonçalves, Dra. Coordenadora do Curso de Design UFSC
Banca Examinadora:
Profª. Luciane Maria Fadel, Drª., Universidade Federal de Santa Catarina
Profª. Berenice dos Santos Gonçalves, Drª., Universidade Federal de Santa Catarina Profª. Marília Matos Gonçalves, Drª., Universidade Federal de Santa Catarina
Profª. Luciane Maria Fadel, Dr.ª Orientadora
Universidade Federal de Santa Catarina _____________________________
de produtos de sua composição. Muitas vezes, essa dificuldade é decorrente da escolha tipográfica do texto. Assim, este projeto de conclusão de curso objetiva criar um protótipo funcional de um aplicativo que apresenta as informações sobre a composição química de produtos cosméticos, fornecendo informações a respeito de seus ingredientes. Para tanto foi utilizado a metodologia de Garret. O problema portanto, foi tratado em duas frentes: determinação de necessidades e determinação de conteúdo, desenvolvidos a partir de pesquisa com o usuário. Os resultados do projeto incluem as interfaces do aplicativo, um protótipo de alta fidelidade e o guia de estilos.
list of products of their composition. Often, this difficulty arises from the typographic choice of the text. Thus, this course completion project aims to create a functional prototype of an application that presents information about the chemical composition of cosmetic products, providing information regarding its ingredients. For that, Garrett's methodology was used. The problem therefore was dealt with on two fronts: determination of needs and determination of content, developed from research with the user. Project results include application interfaces, a hi-fi prototype, and the style guide.
Figura 2 - Arquitetura da informação ……….…………..25
Figura 3 - Mapa mental do aplicativo ……….……….26
Figura 4 - Design da navegação ……….……….26
Figura 5 - Wireframes e design da navegação ……….……….28
Figura 6 - Esquema do funcionamento do deslizar na navegação ………….……...29
Figura 7 - Aplicativo de “Smart City”, Appcity ……….……...30
Figura 8 - Design minimalista do aplicativo Slowly ……….…..30
Figura 9 - Uso de cores nos aplicativos da Google ……….…….31
Figura 10 - Painel visual de aplicativos ……….………...32
Figura 11 - Exemplo de aplicação do teste do protótipo ………....……...34
Figura 12 - Alternativas de construção do logotipo ……….…..35
Figuras 13, 14, 15, 16 - Sequência de telas exibidas ao abrir o aplicativo .…….….36
Figuras 17, 18, 19 - Telas de direcionamento para login ou cadastro …...……...….36
Figuras 20, 21, 22 - Telas de login, cadastro e feedback de cadastro ……….……..37
Figuras 23, 24, 25 - Tutorial ……….…..38
Figuras 26, 27, 28 - Sequência de animação informando os ícones representativos de risco, alergênicos e danos ao meio ambiente ………..….39
Figuras 29, 30, 31 - Sequência de animação que indica o nível de perigo ……..….39
Figuras 32, 33, 34 - Sequência de animação que mostra o menu ……….….40
Figuras 35, 36, 37 - Tela principal de pesquisa, produtos e ingredientes ……….….41
Figuras 38, 39, 40 - Cor do menu de acordo com a seção ………...41
Figuras 41, 42, 43 - Telas da seção do perfil do usuário: Perfil, produtos e ingredientes salvos, filtros ………...42
Figuras 44, 45 - Telas da seção do perfil do usuário: Comentários redigidos pelo usuário e solicitações de adição de produto ……….……….42
Figuras 52, 53, 54 - Telas de descrição, rodapé e detalhes do ingrediente …..…....45
Figuras 55, 56 - Telas de solicitação de adição de produto cosmético ………….….46
Figuras 57, 58 - Telas de perguntas frequentes (FAQ) ……….…46
Figuras 59, 60, 61 - Feedback de ação para o usuário ……….…...…47
Figuras 62, 63, 64 - Filtro de ordenação, dois exemplos de confirmação de realização de ações destrutivas ………..………...48
Figura 65 - Micro animação em um botão de loading ……….………..49
Figura 66 - Micro interação de feedback de ação concluída com sucesso ………...49
Figura 67 - Micro interação exibida ao salvar um ingrediente ou produto …..…...50
Figura 68 - Paleta de cores do aplicativo DECOS ………….………...50
Figura 69 - Estilos de texto do aplicativo DECOS ………...….…51
Figura 70 - Botões do aplicativo DECOS ………..……….…………....…52
Figura 71 - Campos de input do aplicativo DECOS ………..……….…...53
Abstract ……….. 4 Lista de Figuras ……….... 5 Sumário ………... 7 1. INTRODUÇÃO ………... 9 1.1. OBJETIVO GERAL ……….. 9 1.2. OBJETIVOS ESPECÍFICOS ………... 10 1.3. JUSTIFICATIVA ………. 10 1.4. DELIMITAÇÃO DO PROJETO ………. 11 2. METODOLOGIA DE PROJETO ………... 11 2.1. ANÁLISE E SÍNTESE ………... 12 2.1.1. Análise de Similares ………. 12
2.1.1.1. Website EWG's Skin Deep ………. 13
2.1.1.2. Aplicativo EWG's Healthy Living ……….. 13
2.1.1.3. Aplicativo Beat the Microbead ……….. 14
2.1.1.4. Aplicativo ToxFox ………. 14 2.1.1.5. Aplicativo Ingred ……….. 14 2.1.1.6. Aplicativo Desrotulando ………. 15 2.1.2. Tabela de Conteúdos ……….. 16 2.1.3. Tabela de Funcionalidades ………. 16 2.2. NECESSIDADES DO USUÁRIO ………. 17 2.2.1. Jornada do Usuário ……….. 17 2.2.2. Histórias de Usuário ………. 18 2.3. QUESTIONÁRIO ………. 19 2.3.1. Resultados da Pesquisa ……….. 20 2.4. PERSONA ………... 20
3.1. TABELA DE REQUISITOS ………... 22
3.2. ARQUITETURA DA INFORMAÇÃO ………... 25
3.3. DESIGN DA NAVEGAÇÃO ……….. 26
3.4. WIREFRAMES ………... 27
3.5. ESTUDO DE DESIGN DA INTERFACE ………. 29
3.6. NAMING ……….. 33 3.7. PROTOTIPAÇÃO E TESTES ……….. 33 3.8. DESIGN VISUAL ……… 35 3.9 MICRO INTERAÇÕES ………... 49 3.10. GUIA DE ESTILOS ……….. 50 4. CONSIDERAÇÕES FINAIS ……….. 54 5. APÊNDICE ………... 55 5.1. APÊNDICE 1 - QUESTIONÁRIO ………. 55
5.2. APÊNDICE 2 - RESULTADOS DO QUESTIONÁRIO ……….. 58
5.3. APÊNDICE 3 - SIMILAR “EWG’S HEALTHY LIVING” ………. 63
5.4. APÊNDICE 4 - SIMILAR “BEAT THE MICROBEAD” ………... 64
5.5. APÊNDICE 5 - SIMILAR “TOXFOX” ………... 66
5.6. APÊNDICE 6 - SIMILAR “INGRED” ………. 67
5.7. APÊNDICE 7 - SIMILAR “DESROTULANDO” ……….. 68
5.8. APÊNDICE 8 - PROTÓTIPO NAVEGÁVEL DO APLICATIVO DECOS ….... 70
5.9. APÊNDICE 9 - VÍDEO DE SIMULAÇÃO DE USO ………... 70
1. INTRODUÇÃO
Com a crescente preocupação das pessoas com a qualidade do que consomem (GANDRA, 2015), muitos voltam essa preocupação principalmente à alimentação. Porém, muitos também já perceberam que não é só a alimentação que afeta a nossa saúde, e sim tudo que manuseamos e utilizamos no dia-a-dia. Essas pessoas, portanto, estendem a sua preocupação a cosméticos.
A oferta de produtos de beleza cresce a cada ano, seguindo uma diversificação constante de produtos (ABIHPEC, 2019) que se apresentam com características variadas seja na embalagem, na segmentação de público ou mesmo na sua composição. Paralelamente cresce também a preocupação com os efeitos desses produtos para a saúde e o bem estar geral, formando um público que precisa controlar seu consumo - como no caso de pessoas que adotam um consumo sustentável ou lidam com alergias. Essa atitude requer conhecer melhor os produtos consumidos e, portanto, estar ciente de sua composição química.
Porém, esse tipo de informação carece de legibilidade na maioria das embalagens. Mesmo tendo em mãos a lista de ingredientes de um produto, dificilmente sabe-se lidar com ela, seja pela escrita com letras muito pequenas ou em virtude dos nomes indecifráveis.
Tendo em vista essa problemática, ponderou-se: como facilitar a identificação da composição de cosméticos para que as pessoas possam tomar uma decisão em relação ao seu uso?
1.1. OBJETIVO GERAL
Para resolver esse problema, essa pesquisa apresenta a interface de um aplicativo que permite consultar informações a respeito da composição química dos produtos e seus ingredientes. O design dessas informações é centrado no humano e, deste modo, procura deixar confortável a complexidade dos nomes desses produtos químicos.
Desenvolver uma interface funcional para um aplicativo de descrição de componentes de produtos cosméticos.
1.2. OBJETIVOS ESPECÍFICOS
Definir os requisitos de funcionalidades e de conteúdo a partir de pesquisa com o público alvo e análise de similares;
Proporcionar o fornecimento da informação de forma facilitada ao usuário; Desenvolver o guia de estilos e a interface com base nos requisitos
estabelecidos a partir da análise de similares e da pesquisa com o público alvo. 1.3. JUSTIFICATIVA
A partir do interesse de ter uma vida com menos interferência de agentes químicos nocivos no organismo das pessoas, aproveitou-se a oportunidade de criar um facilitador à população que possui esse estilo de vida. Ademais, o sentimento de injustiça experienciado também pela autora perante a indústria de cosméticos, que proporciona aos seus consumidores uma gama de possibilidades de compra, tornando esse procedimento confuso e muitas vezes frustrado, motivou o desenvolvimento de uma ferramenta com informações acessíveis.
Em meio à correria do dia-a-dia, a falta de tempo para pesquisar ou se preparar para comprar produtos pode resultar em aquisições reveladas como insatisfatórias. Deste modo, devido à constante presença de aparelhos celulares na vida das pessoas, um aplicativo torna as informações acessíveis de forma rápida e precisa, prontificado a fornecer conteúdo quando o usuário precisar dele.
De modo a abranger tanto o público que já está inserido no meio quanto ao leigo, as informações sobre ingredientes são organizadas em níveis de complexidade. Assim, somente se o usuário tiver interesse ele poderá se aprofundar em maiores detalhes a respeito.
1.4. DELIMITAÇÃO DO PROJETO
Devido ao projeto almejar criar uma fonte de informação acessível ao usuário, de modo que possa auxiliá-lo na sua decisão de compra, o aplicativo possui como principal meta apresentar a composição de cosméticos de forma que as pessoas possam optar ou não pelo seu uso. Para atender tal objetivo, contará com lista de componentes dos cosméticos e um banco de dados com descrições dos ingredientes. Porém, A criação desse banco de dados não faz parte do escopo deste trabalho, tampouco a implementação do aplicativo.
A partir de busca pelo nome do ingrediente, o usuário teria à sua disposição uma lista de ingredientes com nomenclaturas similares. Ao acessar um ingrediente, seria exibida uma descrição das funcionalidades e se o ingrediente é potencialmente nocivo à saúde. Ao buscar pelo nome de um cosmético, seria apresentada a sua lista de ingredientes na íntegra, de modo a facilitar a leitura dos componentes. Se desejar, o usuário também poderia acessar a descrição da funcionalidade de cada ingrediente.
No escopo proposto, será abordado o design da interface, essa funcional a partir de um protótipo de alta fidelidade, e o guia de estilos, de modo a auxiliar uma futura implementação.
2. METODOLOGIA DE PROJETO
Um grande volume de informações é pertinente tanto a cosméticos quanto ingredientes, estas quais podem ter variados graus de especificidade. Devido ao usuário necessitar de acesso fácil e imediato a essas informações, optou-se pelo desenvolvimento de uma interface funcional para um aplicativo. Para tanto foi aplicado a metodologia de Garret exemplificada no seu livro “Os Elementos da Experiência do Usuário”.
Figura 1 - Os Elementos da Experiência do Usuário.
Fonte: Garret, 2011.
O problema portanto foi tratado em duas frentes: determinação de necessidades e determinação de conteúdo. Para tal, optou-se por uma análise de similares e uma abordagem qualitativa por meio de um questionário online com o público alvo.
2.1. ANÁLISE E SÍNTESE 2.1.1. Análise de Similares
Segundo Garret (2011), no escopo de estratégia devemos definir o objetivo do produto e quais são as necessidades do usuário em relação a ele. Portanto, foram selecionados cinco aplicativos e um site para terem seus conteúdos analisados, com a finalidade de descobrir o que se oferece atualmente ao usuário.
2.1.1.1. Website EWG's Skin Deep
O site EWG se propõe a promover conhecimento sobre os alimentos que consumimos e produtos que utilizamos no nosso dia-a-dia, tendo como missão empoderar pessoas para que elas vivam estilos de vida mais saudáveis em um meio ambiente mais saudável . No site do EWG encontra-se uma seção mais específica,1 2
voltada a cosméticos, denominada EWG’s Skin Deep , que se constitui de um banco de dados que oferece soluções práticas para proteger as pessoas e suas famílias da exposição diária à químicos . 3
2.1.1.2. Aplicativo EWG's Healthy Living
O aplicativo EWG’s Healthy Living é formado por uma combinação de dois recursos do EWG:Skin Deep e um banco de dados de Food Scores . Deste modo, o 4 app traz uma análise de componentes na fórmula de cosméticos e de alimentos ( ver apêndice 3).
Pesquisas são feitas através do scan do código de barras, digitação do nome no campo de busca ou ao buscar por categoria. Não permite fazer buscas por nome de componente, apenas por produtos que constam na base de dados do app. A base de dados aparenta ser composta apenas por listas de produtos que não são nocivos à saúde.
1 Disponível em: <https://www.ewg.org/about-us>. Acesso em: 15 ago. 2018. 2Disponível em: <https://www.ewg.org/skindeep/>. Acesso em: 15 ago. 2018.
3 Disponível em: <https://www.ewg.org/skindeep/site/about.php>. Acesso em: 15 ago. 2018. 4 Disponível em: <https://play.google.com/store/apps/details?id=com.skindeep.mobile>.
2.1.1.3. Aplicativo Beat the Microbead
O Beat the Microbead é um aplicativo para verificar se o cosmético possui microplásticos na composição, pois eles são prejudiciais ao meio ambiente . 5
Dentre as funcionalidades do aplicativo, ele permite fazer busca por nome do produto, marca ou consultar uma lista de produtos separados por tipo (esfoliante, limpeza facial, ducha e dentrífico). Além disso, mostra apenas se o produto possui microplásticos na composição e quais são esses microplásticos (ver apêndice 4). 2.1.1.4. Aplicativo ToxFox
O aplicativo Toxfox foi desenvolvido para que o consumidor possa verificar se os produtos de consumo diário possuem poluentes6 (ver apêndice 5). Ele possui um
banco de dados de alimentos e cosméticos, informando se eles possuem ou não algum ingrediente nocivo na fórmula e exibe os ingredientes nocivos, se eles existirem. Permite fazer busca pelo nome do produto, nome do componente ou scan do código de barras. Informa também os produtos e componentes recentemente acessados e códigos de barra pesquisados pelo usuário.
2.1.1.5. Aplicativo Ingred
O App Ingred permite verificar, através de uma foto do rótulo, quais ingredientes de cosméticos ou de alimentos podem ser prejudiciais à saúde 7 (ver
apêndice 6). A identificação é feita a partir dos nomes dos ingredientes, portanto se a foto não for de qualidade suficiente, alguns ingredientes podem não ser identificados pelo aplicativo. Ele disponibiliza uma lista apenas dos ingredientes que podem ser prejudiciais, com possibilidade de correção caso algum nome seja
5 Disponível em:
<https://play.google.com/store/apps/details?id=org.plasticsoupfoundation.microbeads>. Acesso em: 15 ago. 2018.
6 Disponível em: <https://play.google.com/store/apps/details?id=de.bund.toxfox>. Acesso
em: 8 abr. 2019.
7 Disponível em:
<https://play.google.com/store/apps/details?id=com.zorrosoft.android.ingred>. Acesso em: 8 abr. 2019.
identificado de forma incorreta, com as respectivas descrições do motivo de serem prejudiciais.
2.1.1.6. Aplicativo Desrotulando
Explica a lista de ingredientes e as informações nutricionais do rótulo de alimentos, conferindo ao alimento uma nota de 0 a 100 de acordo com os objetivos alimentares estabelecidos pelo usuário 8(ver apêndice 7).
O banco de dados é construído por meio de envio de fotos do produto (frente e trás da embalagem, lista de ingredientes, tabela nutricional) para serem cadastrados. Usuários premium possuem prioridade na lista de espera.
Funcionalidades:
- Busca alimentos com um ingrediente específico e por nome.
- Os filtros de busca são por categoria de alimento e por ordenação (mais recentes, melhor nota, pior nota, menos calorias, mais proteínas, menos carboidratos, menos gorduras vegetais, menos gorduras totais, menos gorduras saturadas, mais fibras alimentares, menos sódio, menor processamento).
- Permite favoritar alimentos.
O banco de dados é organizado com uma categorização dos produtos, dividida em: bebidas, biscoitos e snacks, carnes, congelados, conservas e enlatados, doces e sobremesas, embutidos, farinhas e farofas, grãos e cereais, laticínios, manteigas e margarinas, massas, molhos e condimentos, pastas e patês, pães e bolos, queijos. A versão premium oferece funcionalidades adicionais, como definir perfil do usuário (perda de peso, alimentação infantil, hipertensão, dentre outros), selecionar ingredientes que possui alergia ou intolerância e restringir ingredientes (como açúcar adicionado, gordura trans, dentre outros).
8 Disponível em: <https://play.google.com/store/apps/details?id=com.desrotulando.app>.
Após a análise desses similares, desenvolveu-se um resumo sobre os conteúdos apresentados e as funcionalidades disponibilizadas. Os conteúdos e funcionalidades averiguados nos aplicativos analisados foram dispostos em forma de tabela, de modo a comparar essas informações.
2.1.2. Tabela de Conteúdos EWG’S Skin Deep EWG's Healthy Living Beat the
Microbead ToxFox Ingred Desrotulando
Lista de componentes X X X Descrição da serventia do composto X X X X Aviso sobre possíveis riscos à saúde X X X X Nível de perigo X X X
Fontes dos dados X X X
2.1.3. Tabela de Funcionalidades EWG’S Skin Deep EWG's Healthy Living Beat the
Microbead ToxFox Ingred Desrotulando
Busca por nome do
produto X X X X X
Busca por nome de
componente X X X
Busca por código
de barras X X X X Identifica componentes por meio de foto do rótulo X
Posteriormente, a comparação de conteúdos e funcionalidades dos similares será utilizada como suporte na construção do questionário.
2.2. NECESSIDADES DO USUÁRIO 2.2.1. Jornada do Usuário
O campo de pesquisa do usuário é dedicado a coletar dados necessários para entender o que os usuários precisam (Garret, 2011, MT). Para ajudar a entender essas necessidades do usuário, criou-se a jornada do usuário: uma simulação da experiência de um usuário em uma situação a qual o aplicativo poderia suprir suas necessidades. Neste caso, simula uma experiência de escolha de compra de um cosmético. Em uma loja física, foi simulada a compra de um perfume para a avó da autora, que possui alergias diversas.
Queria presentear a minha avó com um perfume, porém ela possui alergias, geralmente causadas por perfumes, e estou com dificuldades de encontrar algum
que eu tenha certeza que não vai causar reação alérgica.
Fui até uma loja da Boticário no shopping e expliquei a minha situação para uma das funcionárias, que me sugeriu como opção comprar água de colônia, que seria algo para um pós banho. Segundo ela, por causa dos perfumes conterem álcool, talvez fosse esse o causador das alergias. Perguntei se existia algo mais que poderia causar alergias, e ela disse que a água de colônia seria menos abrasiva pela menor quantidade de álcool. Não consigo compreender a maior parte dos nomes que escrevem na lista de ingredientes dos perfumes, mas sei que os ingredientes que constam no começo da lista são os que o produto possui em maior quantidade.
A atendente me informou que água de colônia possui também um odor mais suave do que os perfumes. Perguntei-lhe se por esse motivo ele seria menos agressivo, e ela repetiu ser em virtude de menor quantidade de álcool no produto.
Ao pedir a recomendação de algum produto, acabei pegando uma das embalagens do mostruário, que a atendente me informou que seria um pós banho. Porém, ao virar para ler os ingredientes, mesmo não conhecendo a maioria dos
nomes, já me deparei com ‘alcohol’ estando em primeiro na lista, e mencionei para a atendente da loja. Ela me disse que teria sim álcool, mas que ele seria em menor quantidade pois boa parte da água colônia seria feita de água e outros ingredientes. Porém, ao observar o rótulo, encontrei o álcool como o primeiro na lista de ingredientes. Questionei a respeito, e a partir de então ela passou a demonstrar um pouco de incerteza sobre os conhecimentos que ela tinha sobre os perfumes e colônias, dizendo novamente que achava as águas de colônia menos abrasivas.
Mas isso não ia resolver o meu problema, fiquei com receio, mesmo a atendente me informando que eles iriam se responsabilizar no caso de ela precisar trocar o produto devido a alergias. Mesmo que a minha avó acabasse por gostar do perfume ou água de colônia, se provocasse alguma alergia eu não saberia o que causou exatamente, e ela não poderia continuar usando. Depois de olhar mais alguns perfumes e águas de colônia, em meio a tantos produtos, acabei desistindo da compra pois eu não tinha as informações que eu precisava.
Frente à dificuldade de identificar o que poderia ser o causador das alergias, pode-se concluir que os vendedores não possuem muitas informações sobre os produtos que vendem e podem acabar fornecendo informações pouco precisas devido à falta de conhecimento mais profundo.
2.2.2. Histórias de Usuário
As histórias de usuário são frases de situações vividas pelo usuário, desenvolvidas a partir de pontos observados na jornada do usuário e vivenciados pela autora, também parte do público alvo do aplicativo. Elas auxiliam a identificar quais são os conteúdos e funcionalidades essenciais no aplicativo para suprir as necessidades do usuário.
Me preocupo com a saúde do meu cabelo, então preciso de produtos eficazes no que prometem.
Meu orçamento é apertado, então preciso pesquisar muito para encontrar algo que atenda as minhas necessidades.
Muitos cosméticos me dão alergia e procurar por alternativas na internet me consome muito tempo.
Quero poder fazer uma lista de produtos que parecem interessantes.
Queria saber o que são e o que fazem esses ingredientes . Alguns podem ser
nocivos para mim. 2.3. QUESTIONÁRIO
Para chegar ao fundo das necessidades do usuário, precisa-se definir quem são os usuários (Garret, 2011, MT). Portanto, juntamente com a jornada do usuário, utilizou-se de um questionário com o objetivo de descobrir mais informações sobre quem é o público alvo e o que ele precisa ( ver apêndice 1). Este foi desenvolvido utilizando as informações obtidas a partir dos similares e da jornada do usuário.
Dentre os objetivos do questionário, busca-se constatar quais as informações a respeito de cosméticos que o usuário prioriza obter, qual a faixa etária que mais se interessa pelo assunto e se o usuário consegue obter as informações que deseja ao ler o rótulo de cosméticos. Uma vez coletadas as respostas, os resultados do questionário, juntamente com os objetivos do projeto, foram utilizados para se estabelecer os requisitos de conteúdo do aplicativo.
O teste piloto foi aplicado com duas pessoas selecionadas via online. Ambas receberam as mesmas instruções, de completar o questionário e retornar um
feedback informando em caso de inconsistências, informações ambíguas ou de
difícil entendimento e sugestões. Após o teste piloto, verificou-se a necessidade de se adicionar o grau de completude de cada escolaridade (cursando, completo) e uma breve descrição sobre o que são os produtos verdes.
2.3.1. Resultados da Pesquisa
O questionário, respondido por 38 pessoas com maioria sendo mulheres possuindo idade entre 18 e 30 anos, aponta que a maioria dos respondentes busca maior clareza nos rótulos (ver apêndice 2). Esta maior clareza se refere tanto a questões de legibilidade e leiturabilidade quanto em questões de entendimento do que o cosmético proporciona. Deste modo, optou-se por uma abordagem expositiva em que o usuário poderá buscar pelo cosmético numa base de dados concisa e direta, que explica rapidamente a fórmula do produto. Ademais, se o usuário tiver interesse, pode consultar informações mais precisas a respeito das funcionalidades de cada ingrediente.
A partir das informações obtidas da jornada do usuário e da pesquisa, desenvolveu-se uma persona para o aplicativo: um personagem fictício construído para representar as necessidades de uma gama de usuários reais (Garret, 2011). 2.4. PERSONA
Agatha Lopes
Gosta Não Gosta
Cozinhar doces Escrever Jogos de terror Just Dance Chocolate gourmet Livros clássicos Brócolis Pizza doce Cultura do álcool Futebol
Filmes de roteiro fraco
Agatha tem 25 anos, é morena com 1,60 de altura e tem cabelos castanhos longos. É formada em Relações Internacionais, porém está desempregada e por isso mora com seus pais na zona central do RJ. Faz cursos online para se manter
atualizada e depende de seus pais financeiramente, recebendo mesada para pagar suas despesas.
Gosta de usar roupas confortáveis, geralmente vestidos, pois o RJ costuma ter um clima muito quente. Adora ler, escrever, cozinhar e jogar em suas horas vagas. Escreve artigos relacionados à sua formação para concursos que encontra na internet. Gosta muito de comer e de preparar comidas diferentes, sempre mantendo junto algum exercício físico para ficar em forma.
Agatha não consegue lidar com injustiças, sendo consigo ou com alguém próximo. Se esforça ao máximo no que puder ajudar a pessoa, muitas vezes além do que esperariam de outrem. Ela acredita que a falta de informação deixa as pessoas muito debilitadas, principalmente em relação aos seus direitos como cidadão. Prestativa, com certeza irá lhe ajudar se você for em busca de auxílio. Costuma ser calma e paciente, não gosta de agir na impulsividade e jogar tudo pra fora quando está irritada ou chateada.
Devido ao excesso de cloro utilizado para tratar a água do estado, Agatha sofre com coceira, alergias e ressecamento da pele.
Busca se informar sobre os cosméticos que compra, principalmente para pele e cabelo, pois se preocupa com os danos que podem ser causados ao seu organismo e meio ambiente por estes produtos. Além disso, precisa de sabonetes e cremes que realmente sejam eficazes para amenizar o ressecamento da sua pele. Não tem apego à marcas, está mais preocupada com eficácia e preço. Uma de suas maiores dificuldades ao comprar cosméticos é a própria leitura dos ingredientes, dificultada pelo tamanho da fonte e pelos nomes complicados.
Fica frustrada pela compulsão com coisas "pouco naturais", tanto no sentido estético quanto de formulação. Devido ao orçamento apertado, se for necessário prefere deixar de ir no cinema ou de comprar sorvete pra comprar um bom sabonete, pois se preocupa com a saúde do seu corpo.
“Não me importo em gastar um pouco mais, desde que dentro do meu orçamento, se for algo que vai fazer bem pra minha saúde”.
Não se averiguou necessária a construção de uma segunda persona pois as principais preocupações e necessidades do público alvo (como ter conhecimento a respeito da eficiência do cosmético e se ele pode causar riscos à saúde) são abrangidas pela persona atual.
2.4.1. Cenário
O creme que eu estava utilizando após meus banhos está acabando e o resultado dele não é dos melhores. No fim das contas, nenhum dos que já usei realmente eram. Resolvi aproveitar para testar as amostras de lojas que vendem cremes no shopping que tem aqui perto da minha casa, mas mesmo os mais caros ainda não parecem ser tão efetivos. Alguns inclusive acabam me causando alergia ali na loja mesmo, na hora de testar o produto.
Em uma de minhas buscas por reviews de loções hidratantes, um blog que acompanho mencionou um aplicativo que diz se o cosmético realmente cumpre o que consta no rótulo e se ele pode causar alguma alergia. Procurei saber mais a respeito de como esse app funciona pois acredito que ele pode me ajudar muito a comprar cremes e loções mais baratas e mais eficazes. Além disso, vai ser muito bom para que eu encontre produtos mais naturais, como os feitos com extratos de plantas e sementes.
3. DESENVOLVIMENTO
Estratégia se torna escopo quando você traduz as necessidades do usuário e os objetivos do produto em requisitos específicos de conteúdo e funcionalidades que o produto oferecerá aos usuários (Garret, 2011). Assim sendo, o cruzamento dessas necessidades do usuário e dos objetivos do produto gerou a tabela de requisitos. 3.1. TABELA DE REQUISITOS
O questionário, juntamente com os objetivos do aplicativo e a análise de similares, auxiliou no desenvolvimento de uma tabela contendo os requisitos de conteúdo e de funcionalidade do aplicativo.
Os níveis de prioridade foram estabelecidos de acordo com a prioridade de exibição do conteúdo/funcionalidade ao usuário. Objetivos de prioridade baixa não necessariamente estão dentro do escopo do desenvolvimento do aplicativo, remanescendo como sugestão para desenvolvimento futuro.
Objetivo usuário Requisitos
conteúdo Funcionalidade Fonte Prioridade
Procurar produto lista de produtos
busca por produto; busca por categoria; busca por código de barras objetivos do aplicativo histórias de usuário similares questionário alta Procurar
ingredientes lista de ingredientes busca por ingrediente
objetivos do aplicativo similares questionário alta Conhecer um ingrediente função dos ingredientes; grau de nocividade; se é alérgeno; se é persistente/ bioacumulativo; se pode causar danos ao meio ambiente objetivos do aplicativo similares questionário alta Saber se o produto possui ingredientes nocivos lista de ingredientes nocivos; descrição dos ingredientes
ofertar o ler mais sobre o ingrediente objetivos do aplicativo similares questionário alta Averiguar a eficácia dos produtos descrição de função de cada ingrediente; opinião do usuário adicionar opinião sobre o cosmético objetivos do aplicativo questionário média Saber se o produto pode causar alergia adicionar alerta de ingrediente alérgeno similares questionário histórias de usuário média
Salvar produtos lista de produtos
salvos salvar produto
similares histórias de usuário
Ler e escrever recomendações ou opiniões adicionar nota e comentário sobre o produto questionário média Saber se o produto pode causar danos ao meio ambiente
adicionar alerta de ingredientes danosos ao meio ambiente
questionário baixa
Procurar marca lista de marcas busca por marca questionário baixa
Inserir produto no banco de dados lista de produtos solicitados a serem adicionados solicitar cadastro de produto cosmético; adicionar info de produto similares baixa
O objetivo do aplicativo se molda a partir da problemática de facilitar a identificação da composição de cosméticos para o consumidor. Portanto, para suprir as necessidades do usuário, definiu-se como conteúdo do aplicativo:
- a lista de ingredientes do cosmético, para auxiliar na leiturabilidade e legibilidade dos nomes;
- descrição dos ingredientes, para que o usuário tenha conhecimento acessível sobre as reais funcionalidades do cosmético;
- aviso de possíveis riscos à saúde, sinalizando a existência de componentes que podem ser prejudiciais (alergênicos, bioacumulativos/persistentes ou que podem causar danos ao meio ambiente);
- nível de perigo, levando em consideração a existência de componentes prejudiciais e a quantidade desses componentes existente no produto;
- área de comentários, para que os usuários possam expor suas opiniões e experiências a respeito dos produtos.
Para facilitar o acesso do usuário às informações o aplicativo conta com as funcionalidades de busca por nome do produto - auxiliando o usuário no momento da decisão de compra - e busca por ingrediente - para o usuário que busca mais informações a respeito de um componente específico. Devido a marca ser exibida
atrelada ao nome do produto, a busca pela mesma foi incorporada a busca por produto.
3.2. ARQUITETURA DA INFORMAÇÃO
De modo a estruturar o conteúdo do aplicativo, estabeleceu-se a arquitetura da informação (ver figura 2). A arquitetura de informações lida com a forma de a transmissão de informações para um usuário (Garret, 2011, MT). Os conteúdos do aplicativo foram divididos em:
- produtos, onde se disponibiliza os cosméticos cadastrados; - ingredientes, composto pelo banco de dados de ingredientes;
- perfil do usuário, constando as informações do cadastro e preferências. Figura 2 - Arquitetura da informação.
Fonte: a autora.
Após o desenvolvimento da arquitetura da informação, buscou-se o desenvolvimento de um mapa mental para facilitar a organização dos conteúdos e funcionalidades (ver figura 3). Além dos conteúdos, definiu-se a distribuição das funcionalidades essenciais, como a solicitação do cadastro de produtos, ferramenta de busca e filtros de busca.
Figura 3 - Mapa mental do aplicativo.
Fonte: a autora.
3.3. DESIGN DA NAVEGAÇÃO
O design de interação diz respeito às opções que envolvem executar e completar tarefas (Garret, 2011). A fim de facilitar o acesso do usuário à informação, todas as seções principais de conteúdo do aplicativo (ingredientes, produtos e perfil do usuário) podem ser acessadas a partir da tela inicial (ver figura. 4).
Figura 4 - Design da navegação.
Verifica-se que a navegação pelo aplicativo se organiza de modo que, no primeiro contato, o usuário se cadastre e faça o login, tendo acesso à tela inicial do aplicativo. Na tela inicial, encontra-se a funcionalidade de busca (abrangendo tanto produtos quanto ingredientes), as categorias de produtos (onde se disponibilizaria todos os produtos cadastrados no aplicativo) e o menu (onde o usuário teria acesso ao seu perfil e configurações do aplicativo).
3.4. WIREFRAMES
Avançando rumo ao design de superfície, os wireframes foram desenvolvidos considerando os elementos do plano de esqueleto: colocação de botões, fotos e blocos de texto. Em virtude da sua construção manual, possibilitou ajustes e posterior construção do design da navegação (ver figura 6). Ademais, percebeu-se necessidade de mudar algumas características previstas anteriormente, como a separação da listagem de produtos e de ingredientes, o que gerou alterações no fluxo de navegação e informação.
Na construção dos wireframes, se priorizou o desenvolvimento das telas principais do aplicativo, as quais possuem funcionalidades e conteúdo de maior importância de acordo com os requisitos do projeto. Conforme observada necessidade, desenvolveu-se posteriormente telas adicionais, como as de feedback e pop-ups.
Figura 5 - Wireframes e design da navegação.
Fonte: a autora.
A navegação pelas seções adjacente se faz a partir de swap (ver figura 6) ou por meio de toque no título da seção. As animações foram previstas de modo a possuírem easing, assim, a transição tem um momento mais acelerado ao início e
mais lento no final. O easing faz com que os elementos se movimentem como se influenciados por forças naturais, como o atrito (GOOGLE, 2019, M.T.).
Figura 6: Esquema do funcionamento do deslizar na navegação.
Fonte: a autora
A partir do desenvolvimento das telas para testes, o aplicativo passou a contar com telas para: área de login, constituída de cadastro e login; início, composto por três telas (categorias, produtos e ingredientes) com o campo de busca presente no topo; perfil do usuário, onde o usuário pode gerenciar suas preferências do aplicativo e do seu cadastro.
Realizou-se dois testes com usuários do público alvo, de modo a validar a distribuição de conteúdo. Os testes foram realizados em ambiente externo, utilizando-se dos wireframes ainda em papel com o auxílio da autora para simular a navegação. A distribuição de conteúdo se mostrou adequada, sendo observados necessários apenas alguns ajustes na navegação. Entretanto, para evitar páginas com conteúdos extensos, observou-se também necessidade de adição de telas, estas para comportar os demais conteúdos previstos na tabela de requisitos (salvar produtos, ler e escrever comentários, inserir novo produto).
3.5. ESTUDO DE DESIGN DA INTERFACE
Em questão de design da interface, buscou-se as tendências atualmente observadas no mercado. Relativo a esta tendência, alguns pontos de destaque em questão de design são os cantos arredondados, formas simples, matizes vibrantes, ilustrações e micro-interações.
Algumas dessas tendências de design podem ser observadas em aplicativos como o App City (ver figura 7) e Slowly (ver figura 8).
Figura 7 - Aplicativo de “Smart City”, Appcity.
Fonte: Cuberto . 9
Figura 8 - Design minimalista do aplicativo Slowly.
Fonte: Slowly . 10
9 Disponível em: <https://cuberto.com/projects/appcity/>. Acesso em 20 out. 2018. 10 Disponível em: <https://www.getslowly.com/en/>. Acesso em 20 out. 2018.
O aplicativo busca uma interface amigável, portanto optou-se pelo uso de formas arredondadas na interface. As formas com cantos arredondados aproximam a interface do humano, pois são mais orgânicas como as formas encontradas na natureza. Devido ao aplicativo ser voltado majoritariamente a um público mais jovem, deliberou-se pelo uso de matizes saturadas tanto para representar o usuário quanto seguir a tendência de matiz. A fim de facilitar a navegação, optou-se pelo predomínio de uma matiz em cada área, identificando assim a seção na qual o usuário se encontra. O uso de cor para fins de identificação pode ser observado, por exemplo, em serviços oferecidos pelo google (ver figura 9).
Figura 9: Uso de cores nos aplicativos da Google. Na sequência: Gmail, Google Play Music e Docs Google.
Fonte: Google . 11
Para um melhor entendimento e percepção do design almejado na construção da interface, utilizou-se de um painel visual de aplicativos (ver figura 10).
11 Disponível em: <https://play.google.com/store/apps/details?id=com.google.android.gm>
<https://play.google.com/store/apps/details?id=com.google.android.music>
<https://play.google.com/store/apps/details?id=com.google.android.apps.docs.editors.docs>. Acesso em 21 out. 2018.
Figura 10 - Painel visual de aplicativos
3.6. NAMING
Como ponto de partida, utilizou-se de conceitos como descrever, decodificar e descomplicar, estes embasados na proposta do aplicativo. Então, analisou-se como tais conceitos poderiam se unir ao conteúdo principal do aplicativo: cosméticos.
Inicialmente, manipulou-se as sílabas e palavras, voltando-se ao entorno de
make em razão de que a palavra cosmético, no inconsciente coletivo, estar associada a produtos de maquiagem. Entretanto, estas alternativas foram descartadas pois não representavam por completo os objetivos do aplicativo, pois ele não é voltado somente a produtos de maquiagem.
Prosseguindo com rascunhos de ideias e palavras, tendo como ponto de partida o prefixo “de-” (oriundo dos conceitos iniciais), algumas das alternativas encontradas foram “Desmake”, “Decos”, “Cosde”, “Desoc”, Desco”. Considerando questões de pronúncia e legibilidade, optou-se pela nomenclatura DECOS, com a grafia em letras maiúsculas. Esta foi selecionada por utilizar do prefixo “de-” e ser também uma união das duas primeiras sílabas de “decodificador” e de “cosméticos”, ambas representando funcionalidades oferecidas pelo aplicativo. Ademais, DECOS, além de simples e breve, é de fácil pronúncia e possui uma boa sonoridade, tornando-se fácil de ser recordado.
Em virtude de o objetivo deste projeto não se voltar à naming, os estudos voltados a este campo foram breves. Os testes de adequação da nomenclatura foram executados juntamente aos testes de prototipação à seguir.
3.7. PROTOTIPAÇÃO E TESTES
Para finalidade de construção da prototipação, utilizou-se dosoftware Figma. A partir do protótipo, já navegável, exibido em um celular, aplicou-se um teste de usabilidade com três pessoas que contemplam o público alvo do aplicativo. As telas utilizadas nos testes se encontravam em fase final de desenvolvimento, apresentando ao usuário as funcionalidades e design de interface com fidelidade prevista para o protótipo em sua forma finalizada. Durante a realização do teste,
solicitou-se a execução de algumas tarefas, estas estabelecidas de modo a averiguar as questões de usabilidade do aplicativo e o design de interação.
As tarefas solicitadas aos usuários foram as de encontrar o protetor solar Nívea Protect & Hidrata FPS 50 e ler o detalhamento das funções dos ingredientes; ler os comentários a respeito deste protetor solar e escrever um comentário; encontrar o ingrediente octocrylene e salvá-lo para leitura posterior; simular edição do nome de exibição e da foto do perfil.
Figura 11 - Exemplo de aplicação do teste do protótipo
Fonte: a autora e GraphicBurger 12
Durante o primeiro teste do protótipo, observou-se a necessidade de incluir um breve tutorial ao efetuar login no aplicativo, este explicando a respeito dos indicativos de nível de perigo. Também percebeu-se a necessidade de ajustes em fluxos específicos de navegação do protótipo pois o usuário optou pelo uso da barra de pesquisa nas tarefas de localização do produto e do ingrediente. Ademais, o usuário se mostrou confuso em relação à utilidade da seção de categorias. Ao verificar a tabela de requisitos, percebeu-se que a pesquisa não possuía no aplicativo uma relevância compatível com a prioridade. Deste modo, ponderou-se apropriada a interligação dos produtos com as categorias, disponibilizando as categorias como filtros de busca, assim proporcionando maior precisão nas
pesquisas realizadas. Em vista disso, a seção de categorias deu lugar à pesquisa, realocada das demais seções. Os ajustes no design de interação foram efetuados antes da realização do teste seguinte.
No segundo teste, o usuário demonstrou facilidade em realizar as tarefas propostas e indicou que as cores ajudaram a situar a sua localização dentro do aplicativo. Observou-se que houve tentativa de edição da foto do usuário a partir da imagem de usuário exibida na seção do perfil. Ajustou-se o protótipo de modo a permitir edição da foto exibida tanto no perfil quanto no menu.
Apesar da confusão inicial por ser uma simulação da navegação, no terceiro teste realizado o usuário demonstrou facilidade em realizar as tarefas. Constatou-se que o tutorial adicionado anteriormente cumpriu com o seu objetivo. Não foram observadas mudanças adicionais necessárias em questão de usabilidade e design da interação.
Nos testes realizados, o nome DECOS apresentou alto grau de aprovação por parte dos usuários, principalmente devido a simplicidade e quantidade de sílabas. 3.8. DESIGN VISUAL
Para o desenvolvimento das telas finais da interface, bem como do protótipo de alta fidelidade, utilizou-se do software Figma. Foram desenvolvidas aproximadamente 60 telas do aplicativo, incluindo pop-ups de feedback e de filtros.
A identidade do logotipo segue o conceito de desconstrução. Por meio de uma tipografia com letras incompletas, o usuário precisa “decodificar” o que está escrito a partir da linha imaginária que o cérebro completa nas partes faltantes. Dentre as alternativas desenvolvidas, algumas podem ser observadas na Figura 12, sendo a terceira alternativa definida como a versão final.
Figura 12 - Alternativas de construção do logotipo
Quando o usuário abre o aplicativo, é exibida uma sequência de telas coloridas com o logotipo DECOS ao centro (figuras 13, 14, 15 e 16). A animação de 4 segundos é substituída pela tela inicial do aplicativo (ver figura 35) ou para as telas de direcionamento ao login e cadastro, em caso de não estar logado em uma conta (ver figura 17).
Figuras 13, 14, 15 e 16 - Sequência de telas exibidas ao abrir o aplicativo.
Fonte: a autora.
Figuras 17, 18 e 19 - Telas de direcionamento para login ou cadastro.
As três telas de direcionamento (figuras 17, 18 e 19) fazem uma transição contínua, em looping, até o usuário tomar alguma ação ( swipe para transição manual ou selecionar algum dos botões). As ilustrações foram desenvolvidas pela autora, utilizando de traços mais livres e um estilo mais descontraído.
Quando selecionada a opção de cadastro, é exibida uma interface solicitando apenas duas informações (ver figura 21), pois o cadastro possui objetivo principal de manter as preferências e produtos salvos pelo usuário. Após o usuário se cadastrar com sucesso (ver figura 22), ele é redirecionado para a tela de login do aplicativo (ver figura 21). Tanto login quanto cadastro podem ser feitos pelo usuário a partir de uma rede social.
Figuras 20, 21 e 22 - Telas de login, cadastro e feedback de cadastro.
Fonte: a autora.
Um breve tutorial é exibido após o primeiro login do usuário (ver figuras 23, 24 e 25). Este proporciona algumas informações a respeito dos principais símbolos utilizados no aplicativo, ícones que orientam o usuário em relação ao nível de perigo
(ver figura 23), possíveis alergênicos (ver figura 24) e danos ao meio ambiente (ver figura 25).
Figuras 23, 24 e 25 - Tutorial.
Fonte: a autora.
Em caráter mais específico, a “informação de nível de perigo” leva em conta a quantidade de ingredientes potencialmente nocivos na composição do produto (ver figura 26); os “possíveis alergênicos” indica a existência de componentes que podem ocasionar reações alérgicas (ver figura 27); e “danos ao meio ambiente” sinaliza a existência de ingredientes que podem se acumular no meio ambiente e causar um impacto negativo (ver figura 28). Tais ícones podem aparecer em três gradações de nocividade: verde para baixo risco, amarelo para risco intermediário e vermelho para alto risco (ver figuras 29, 30 e 31).
Figuras 26, 27 e 28 - Sequência de animação informando os ícones representativos de risco, alergênicos e danos ao meio ambiente.
Fonte: a autora.
Figuras 29, 30 e 31 - Sequência de animação que indica o nível de perigo.
Figuras 32, 33 e 34 - Sequência de animação que mostra o menu.
Fonte: a autora.
As interfaces exibem breves animações de modo a facilitar o entendimento e tornar a interface mais amigável e atrativa ao usuário.
A primeira interface interna do aplicativo a ser exibida para o usuário é a de pesquisa (ver figura 35). A partir dela, o swipe horizontal proporciona acesso às telas de produtos (ver figura 36) e de ingredientes (ver figura 37). Por meio do acesso ao menu (ver figuras 38, 39 e 40) no canto superior direito, o usuário tem acesso às demais interfaces do aplicativo. O menu do aplicativo possui cor que corresponde à seção em que o usuário se encontra.
Figuras 35, 36 e 37 - Tela principal de pesquisa, produtos e ingredientes.
Fonte: a autora.
Figuras 38, 39 e 40 - Cor do menu de acordo com a seção.
Fonte: a autora.
A partir do menu, o usuário tem acesso às suas informações de usuário: nome e informações referentes ao cadastro (ver figura 41), produtos e ingredientes
salvos (ver figura 42), filtros de alertas do aplicativo (ver figura 43), comentários redigidos pelo usuário (ver figura 44) e situação de suas solicitações de adição de produtos (ver figura 45).
Figuras 41, 42 e 43 - Telas da seção do perfil do usuário: Perfil, produtos e ingredientes salvos, filtros.
Fonte: a autora.
Figuras 44 e 45 - Telas da seção do perfil do usuário: Comentários redigidos pelo usuário e solicitações de adição de produto.
Ao acessar um produto no aplicativo, o usuário possui à disposição informações como fotos do produto, nível de perigo, avisos sobre ingredientes alergênicos, lista de ingredientes e detalhes a respeito de cada ingrediente (ver figuras 46 e 47).
Figuras 46, 47 e 48 - Telas de descrição, detalhes e comentários de um produto cosmético.
Fonte: a autora.
No rodapé da página são disponibilizados botões para acesso aos comentários e para escrever comentários, bem como informações de data de adição do produto no aplicativo, quantidade de usuários que acessou, compartilhou ou salvou o produto(ver figura 49).
Em caso de divergência de informações do produto ou atualização da fórmula, o usuário pode solicitar que estas informações sejam alteradas a partir do menu de “mais informações”, acessível a partir do ícone localizado ao lado esquerdo do nome do produto (ver figura 50).
A partir da página do produto, o usuário também tem acesso à função de salvar o produto, recebendo um feedback do aplicativo a respeito do status da ação
(ver figura 51). O aviso, informando que o produto foi salvo ou removido, aparece na parte inferior da tela durante alguns segundos e desaparece automaticamente.
Figuras 49, 50 e 51 - Rodapé, janela de mais informações e feedback de produto salvo.
Fonte: a autora.
Ao selecionar um ingrediente na lista de um produto ou a partir do menu principal de ingredientes (ver figura 37), o usuário tem acesso à página de informações mais detalhadas a respeito deste ingrediente (ver figura 52). Nesta página, o usuário encontra uma descrição sobre as principais utilidades do ingrediente nos produtos cosméticos em que ele se encontra, nível de perigo e detalhamento a respeito do ingrediente possuir tal nível de perigo.
Bem como nas páginas de produtos, o rodapé das páginas dos ingredientes informa a quantidade de acessos, compartilhamentos, quantos usuários salvaram o ingrediente, data de adição do mesmo no aplicativo e permite escrever um comentário e visualização de comentários (ver figura 53).
Ademais, caso o usuário se interesse em ler informações mais minuciosas, o aplicativo oferece links externos para artigos e pesquisas a respeito do ingrediente (ver figura 54).
Figuras 52, 53 e 54 - Telas de descrição, rodapé e detalhes do ingrediente.
Fonte: a autora.
Devido à constante atualização e inserção de novos produtos cosméticos no
mercado brasileiro, o aplicativo DECOS disponibiliza ao usuário a funcionalidade de solicitar a adição de um produto na base de dados (ver figuras 55 e 56). A partir do preenchimento e envio das informações, elas serão avaliadas por alguém da equipe que administra o aplicativo e posteriormente aprovar ou recusar a adição do produto.
Figuras 55 e 56 - Telas de solicitação de adição de produto cosmético.
Fonte: a autora.
Em virtude da existência de termos de vocabulário específico, criou-se uma breve seção de perguntas frequentes, onde o usuário pode consultar termos que não são usuais no cotidiano porém utilizados no aplicativo (ver figuras 57 e 58).
Figuras 57 e 58 - Telas de perguntas frequentes (FAQ).
Em decorrência de o usuário executar uma ação de envio de solicitações para o aplicativo, é exibido um feedback para informar a situação (ver figuras 59, 60 e 61): envio realizado com sucesso, problema no envio (originário a partir do usuário, como falha de conexão) e erro (originário do aplicativo, como bugs).
Figuras 59, 60 e 61 - Feedback de ação para o usuário.
Fonte: a autora.
Em algumas seções do aplicativo DECOS onde se disponibiliza uma grande variedade de itens (como nas seções de produtos, ingredientes e itens salvos pelo usuário), encontram-se disponíveis filtros de ordenação (ver figura 62). Sendo possível selecionar mais de um simultaneamente, os filtros totais consistem em: recentes, antigos, ordem alfabética crescente, ordem alfabética decrescente, populares, mais nocivos, menos nocivos, maquiagem, produtos para cabelo, protetor solar, perfumaria, cuidados com a pele, desodorante e produtos de higiene.
Os filtros de tipos de produtos, anteriormente alocados em uma seção denominada categorias, foram incorporados de modo a facilitar a busca do usuário. Estas modificações foram efetuadas pois um mesmo produto pode constar em mais
de uma categoria e devido à modificação melhorar a experiência de uso. As categorias de produto foram definidas a partir de pesquisa em sites nacionais de vendas de produtos cosméticos.
Figuras 62, 63 e 64 - Filtro de ordenação, dois exemplos de confirmação de realização de ações destrutivas.
Fonte: a autora.
Na realização de ações destrutivas, como as de excluir informações ou deixar uma página sem salvar as alterações efetuadas, é exibido ao usuário um pop-up de confirmação da ação, promovendo prevenção de erro (ver figuras 63 e 64).
Devido à realização do teste da interface e do protótipo já em fase final de desenvolvimento, não se averiguou necessária a execução de novos testes com o usuário. Em razão deste desenvolvimento quase completo, o feedback recebido voltou-se principalmente a ajustes finos, não observada necessidade de modificações cruciais na estrutura da interface/ navegação do aplicativo.
3.9 MICRO INTERAÇÕES
Uma das grandes tendências de design da atualidade são as micro
interações, as quais ajudam a tornar memorável a experiência do usuário, além de oferecer um feedback imediato, fornecer instruções e ser também uma recompensa visual.
No aplicativo DECOS, as micro interações possuem finalidade principalmente de fornecer feedback ao usuário e tornar a receptividade de uma interface mais amigável e humana.
Figura 65 - Micro animação em um botão de loading
Fonte: a autora.
Figura 66 - Micro interação de feedback de ação concluída com sucesso
Figura 67 - Micro interação exibida ao salvar um ingrediente ou produto
Fonte: a autora.
3.10. GUIA DE ESTILOS
Embora o guia de estilos tenha sido elaborado em paralelo com o estudo do desenvolvimento da interface, ele é apresentado antes do layout das telas finais pois sua construção leva em conta a explicação das escolhas feitas.
A partir das tendências em design de matiz, foram selecionados seis tons principais a serem utilizados na interface do aplicativo, estas cada uma representando uma seção específica (ver figura 68): pesquisa, produtos, ingredientes, adicionar produto, FAQ e perfil do usuário. O escolha por alta saturação reflete uma tendência atual dos aplicativos, utilizando de cores complementares para manter o equilíbrio, como o rosa/verde e amarelo/roxo. A variação com 50% de opacidade foi utilizada para sinalizar o status de desabilitado em botões e demais funcionalidades.
Figura 68 - Paleta de cores do aplicativo DECOS.
A paleta de tons secundários se refere aos níveis de perigo, exibidos juntamente aos ingredientes e produtos, e variações de cinzas para as caixas, linhas divisórias e background.
De modo a priorizar a legibilidade e leiturabilidade, optou-se pelo uso de duas tipografias: Merriweather e Montserrat (ver figura 69). A tipografia open source sem serifa Montserrat é adequada para textos longos , e devido à grande variedade de 13 pesos foi utilizada nas principais partes textuais do aplicativo, como botões, listas de ingredientes, itens de menu e legendas. Por efeito da variedade de pesos, proporciona textos com tipos leves e agradáveis de ler. Alguns estilos possuem maior peso quando aplicados em background escuro, de modo a não comprometer a legibilidade do conteúdo.
Figura 69 - Estilos de texto do aplicativo DECOS.
Fonte: a autora.
13 “The family was redrawn by Jacques Le Bailly at Baron von Fonthausen over the summer,
and the full set of weights were adjusted to make the Regular lighter and better for use in longer texts.” Disponível em: <https://fonts.google.com/specimen/Montserrat>. Acesso em: 19 abr. 2019.
Desenvolvida para ser agradável de se ler nas telas , Merriweather foi o tipo14 selecionado para os títulos das seções, nomes de produtos e de ingredientes. Ela é uma tipografia open source com serifa comumente combinada com a Montserrat, e por possuir uma altura X grande, ganha destaque em meio aos demais conteúdos.
A partir da paleta de cores principais desenvolveu-se os botões. Foram criadas duas variações de botões: com apenas um ícone, para utilização em janelas de envio de conteúdo e janelas de confirmação; e com texto e ícone, para acesso de páginas secundárias do aplicativo como a seção de comentários e solicitação de adição de produto (ver figura 70).
Criou-se também uma versão default dos botões (para ações principais como os de confirmação) e uma versão outline (para botões secundários, como os de cancelar).
Figura 70 - Botões do aplicativo DECOS.
Fonte: a autora.
Seguindo o padrão do estilo de design do aplicativo, os campos de input possuem cantos arredondados e variações de estado de modo a fornecer feedback da situação para o usuário (ver figura 71).
14 “Merriweather was designed to be a text face that is pleasant to read on screens. It
features a very large x height, slightly condensed letterforms, a mild diagonal stress, sturdy serifs and open forms.”. Disponível em: <https://fonts.google.com/specimen/Merriweather>. Acesso em: 19 abr. 2019.
Figura 71 - Campos de input do aplicativo DECOS.
Fonte: a autora.
Dos ícones utilizados no aplicativo, a maioria tem origem do projeto open
source Font Awesome15 (ver figura 72). Como o aplicativo DECOS possuía necessidade de ícones com construção simples e de uso comum, chegou-se à conclusão de que não seria necessário o desenvolvimento de uma biblioteca de ícones autoral devido à grande variedade de ícones disponíveis para uso gratuito.
Figura 72 - Ícones utilizados no aplicativo DECOS.
Fonte: Font Awesome14.
4. CONSIDERAÇÕES FINAIS
Denominado Decos, o aplicativo decodificador de cosméticos se baseia em um banco de dados de ingredientes, associados com o nível de perigo que eles representam e informações provindas de artigos científicos. O aplicativo também conta com um banco de produtos cosméticos acompanhados por lista de ingredientes, descrição dos ingredientes, nível de perigo do cosmético (a partir da existência ou não de ingredientes potencialmente prejudiciais) e seção de comentários. O usuário pode requisitar a adição de novos produtos, favoritar os já existentes e solicitar atualização de um produto já existente no aplicativo. Os testes revelaram que uma funcionalidade de leitura do código de barras dos produtos seria interessante para o usuário, bem como possibilidade de pesquisa por marca, funcionalidades que ficam como sugestão de trabalhos futuros em razão da necessidade de limitação do projeto.
O design das informações sobre nível de perigo facilita a percepção desta característica para cada produto e ingrediente. Entretanto, acredita-se que o aplicativo poderia ser aprimorado de modo a tornar mais ricas e claras as informações oferecidas ao usuário. Percebeu-se ainda que algumas informações necessitam de maior empenho e aprofundamento por parte do usuário para gerar esclarecimento.
As informações são organizadas para serem acessadas em níveis de complexidade, assim, somente se o usuário tiver interesse ele pode se aprofundar em detalhes a respeito dos ingredientes. Questões de como os produtos que utilizamos no nosso dia-a-dia podem afetar nossa saúde geram espaço para conversações e discussões, coletividade que poderia ser mais explorada no aplicativo em caso de maiores estudos.
Com as informações sempre em mãos, o aplicativo facilita a compra do usuário, pois, além de economizar tempo, o ajuda a escolher um produto que melhor atende suas necessidades.
5. APÊNDICE
5.1. APÊNDICE 1 - QUESTIONÁRIO
1. Você compra produtos cosméticos? (ex: desodorante, perfume, maquiagem, creme dental, shampoo, condicionador)
Sim Não
2. Qual a sua idade?
18 ou menos 18 a 25 25 a 30 30 a 40 40 ou mais
3. Qual a sua escolaridade?
Ensino Fundamental (completo) Ensino Fundamental (cursando) Ensino Médio (completo)
Ensino Médio (cursando) Ensino Superior (completo) Ensino Superior (cursando)
Pós graduação (completo) Pós graduação (cursando)
4. Qual o seu gênero?
Masculino Feminino
Nao quero declarar
5. Você já leu a lista de ingredientes de algum cosmético?
Sim Não
Nao lembro
6. Se sim, porquê você leu a lista de ingredientes? (múltipla escolha)
comprovar a eficácia do produto
averiguar as informações da frente da embalagem procurar um ingrediente benéfico específico
procurar um ingrediente indesejado específico outro - especificar
7. Ao ler lista de ingredientes de algum cosmético, conseguiu obter a informação que procurava?
Sim Não
Não se aplica
8. Quais critérios de escolha você considera na compra de cosméticos? (Múltipla escolha) lista de ingredientes marca preço embalagem benefícios do rótulo recomendação de amigos recomendação de familiares anúncios do produto
produtos não testados em animais se é vegano
produtos “verdes”16
16 “The terms “green” or “sustainable” often refer to products, services or practices that allow for
economic development while conserving for future generations. We prefer to describe a green product as one that has less of an environmental impact or is less detrimental to human health than the traditional product equivalent.” Disponível em:
9. Conhece algum ingrediente que é comum em cosméticos e que pode ser prejudicial à saúde? Se sim, favor especificar o cosmético e o ingrediente.
Sim - qual Não
10. Quais informações deveriam ser mais claras nos cosméticos? (múltipla escolha)
Lista de ingredientes
Descrição sobre cada ingrediente Função de cada ingrediente
Existência ou não de ingrediente potencialmente perigoso Existência ou não de ingrediente potencialmente alérgeno
Existência ou não de ingrediente que pode causar danos ao meio ambiente Se possui ingredientes persistentes / bioacumulativos
Fontes de dados
Nota da autora: a partir das repostas das demais questões, supõe-se que houve confusão por parte de alguns respondentes. Apenas 5 informaram que não haviam lido a lista de ingredientes, portanto presume-se que deveria haver 5 respostas em ‘não se aplica’ e 9 respostas em ‘não’.
aluminios
Parabenos e sulfatos
Não à saúde diretamente, mas ao meio ambiente. Esqueci o nome, mas são aquelas bolinhas de plástico azuis que têm em esfoliantes. E também nos produtos de cabelo não uso nada com sulfato, petrolato, parafina e silicone, pois esses agridem o fio e o couro cabeludo
Parabenos..que podem ser alergénicos Parabenos
BHT
Parabenos, silicatos, lauril (ingrediente que faz espuma,ruim para o ambiente), conservantes, branqueadores, sequestradores (quando são usados esses termos) -
ingredientes com números nos nome que claramente não são naturais (geralmente conservante sintético)
Parabenos, petróleo Chumbo - batom
