| 1 | \chapter{Design}
|
| 2 |
|
| 3 | % TODO: Find citations
|
| 4 |
|
| 5 | As decisões de design do sistema foram fundamentadas tanto na análise dos
|
| 6 | aplicativos similares quanto nos resultados do questionário aplicado durante a
|
| 7 | etapa de pesquisa. Esses elementos permitiram identificar padrões recorrentes
|
| 8 | de interface e compreender as preferências do público-alvo, orientando a
|
| 9 | definição da identidade visual, da linguagem adotada e da organização dos
|
| 10 | elementos da interface.
|
| 11 |
|
| 12 | A análise dos aplicativos similares revelou uma linguagem visual comum entre as
|
| 13 | soluções existentes, caracterizada por interfaces lúdicas, linguagem informal
|
| 14 | e, em alguns casos, uso intenso de cores. Paralelamente, os resultados do
|
| 15 | questionário indicaram que 37,5\% dos participantes preferem uma comunicação
|
| 16 | acolhedora e empática, enquanto 25\% demonstraram preferência por uma linguagem
|
| 17 | neutra e objetiva.
|
| 18 |
|
| 19 | O design, no contexto de desenvolvimento de software é um elemento fundamental,
|
| 20 | considerando que influencia diretamente a experiência do usuário, na percepção
|
| 21 | e assimilação das informações.
|
| 22 |
|
| 23 | Diferentemente da maioria dos aplicativos analisados, optou-se por uma
|
| 24 | identidade visual menos lúdica e mais sóbria, reduzindo o uso de ilustrações e
|
| 25 | cores saturadas em favor de uma linguagem mais discreta e orientada ao
|
| 26 | conteúdo.
|
| 27 |
|
| 28 | \section{Logotipo e identidade visual}
|
| 29 |
|
| 30 | O logotipo do sistema foi planejado para representar o próprio nome do sistema.
|
| 31 | Nexo, que representa a conexão, convergência de vários elementos. Esse nome
|
| 32 | conversa com a ideia do projeto em trabalhar o EMA, visto que o objeto que o
|
| 33 | aplicativo trabalha para além de registrar o humor do usuário, mas sim
|
| 34 | construir uma narrativa diária do estado emocional, conectando informações
|
| 35 | contextuais como qualidade do sono, estresse, energia, ansiedade, sentimentos,
|
| 36 | emoções, atividades, psicofármacos, consultas, etc.
|
| 37 |
|
| 38 | Portanto, o nome representa exatamente esse propósito, é o que ``dá liga'' a
|
| 39 | várias coisas esparsas, dando sentido, racionalizando esses elementos.
|
| 40 |
|
| 41 | \begin{figure}[h]
|
| 42 | \centering
|
| 43 | \caption{Logotipo do sistema}
|
| 44 | \label{fig:logo}
|
| 45 | \includegraphics[width=0.9\linewidth]{logo.png}
|
| 46 | \source{O autor}
|
| 47 | \end{figure}
|
| 48 |
|
| 49 | Para convergir com a pesquisa de tonalidade, e abraçar uma estética
|
| 50 | ``acolhedora'', o logo tenta fugir de parecer algo mecânico ao usar uma técnica
|
| 51 | que simule pinceladas ao invés de linhas retas, simulando também diferenças ou
|
| 52 | falhas na pressão utilizada por ter pequenas variações e espaços em branco no
|
| 53 | logotipo.
|
| 54 |
|
| 55 | \subsection{Hierarquia visual}
|
| 56 |
|
| 57 |
|
| 58 | No contexto de interfaces digitais, a hierarquia visual corresponde à
|
| 59 | estruturação de elementos de uma tela ou página de forma a narrar e orientar o
|
| 60 | usuário com os elementos que são mais significativos e que demandam mais
|
| 61 | atenção.
|
| 62 |
|
| 63 | Por meio de repetições de padrões de agrupamento de informações, contraste,
|
| 64 | tamanhos, espaçamentos, busca-se reduzir o esforço necessário para encontrar
|
| 65 | elementos importantes e quais ações necessitam de maior visibilidade. Segundo
|
| 66 | (?) uma hierarquia visual bem definida, ajda o usuário a interpretar
|
| 67 | rápidamente a interface, reduzindo a carga cognitiva e tornando a navegação
|
| 68 | mais intuitiva.
|
| 69 |
|
| 70 | Portanto, com esse foco em mente, produziu-se uma lista pequena de componentes
|
| 71 | com visual semelhante, reduzindo o contraste entre esses mesmo elementos, o que
|
| 72 | ajuda justamente a gerar uma sensação de consistência e previsibilidade entre
|
| 73 | telas e elementos gráficos.
|
| 74 |
|
| 75 | A estrutura da aplicação pode ser resumida em cinco componentes fundamentais:
|
| 76 | cartões (\textit{cards}), botões de ação, \textit{chips} para categorização de
|
| 77 | informações, campos de formulário e indicadores em escala (\textit{sliders}).
|
| 78 | Esses componentes aparecem de maneira recorrente em praticamente todas as telas
|
| 79 | do sistema, permitindo que o usuário reconheça rapidamente sua função sem
|
| 80 | necessidade de reaprendizado.
|
| 81 |
|
| 82 | Portanto, a organização de telas geralmente se dá nesses mesmos parâmetros, em
|
| 83 | que toda tela é dividida em seções, compostas de um cabeçalho, seguido dos
|
| 84 | respectivos elementos de interação. Posteriormente, a utilização de cartões,
|
| 85 | ajuda a reforçar esse foco visual, agrupando elementos que são interativos e/ou
|
| 86 | que necessitam interação e/ou atenção.
|
| 87 |
|
| 88 | \subsection{Paleta de Cores}
|
| 89 |
|
| 90 | Como discutido anteriormente, a definição da paleta de cores buscou equilibrar
|
| 91 | dois objetivos identificados durante a fase de pesquisa, transmitir uma
|
| 92 | identidade visual acolhedora, porém evitando excessos de cores e informações
|
| 93 | lúdicas. Portanto, para buscar esses pilares, optou-se por usar uma escolha de
|
| 94 | cores mais neutras e sóbrias, focando em tons de branco, cinza e preto, de
|
| 95 | forma a permitir que o conteúdo regstrado pelo usuário seja o maior foco de
|
| 96 | destaque.
|
| 97 |
|
| 98 | Contudo, para elementos que necessitam de uma maior atenção, ou elementos de
|
| 99 | interação, como botões de ações primárias, adotou-se uma escolha mais rádical,
|
| 100 | um tom de verde forte, que busca criar exatamente a sensação de destaque
|
| 101 | imediato. Além disso, o verde geralmente está associado como uma cor que
|
| 102 | transmite uma sensação de vitalidade, força, natureza, bem-estar e afins. Como
|
| 103 | mencionado anteriormente, limitou-se a utilização para indicadores, componentes
|
| 104 | de interação e elementos que representam progresso ou confirmação.
|
| 105 |
|
| 106 | Por fim, foi escolhido outras cores pasteis para ajudar a destacar elementos
|
| 107 | como sentimento e emoções, indicadores para cada tipo de registro gerado no
|
| 108 | sistema, de forma mínima e não intrusiva. A proposta aqui era recheiar um pouco
|
| 109 | mais a interface para adci
|
| 110 |
|
| 111 | \subsection{Tipografia}
|
| 112 |
|
| 113 | A tipografia escolhida é a Inter, criada por Rasmus Andersson, cujo é
|
| 114 | reconhecida justamente pela legibilidade e atenção para que seja bem
|
| 115 | renderizada no uso digital. A fonte hoje é usada por diversas plataformas, como
|
| 116 | o Figma.
|