| 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 concebido para representar o próprio nome da
|
| 31 | aplicação. O termo Nexo remete à ideia de conexão, relação e convergência entre
|
| 32 | diferentes elementos. Esse conceito dialoga diretamente com a proposta do
|
| 33 | projeto, fundamentada na metodologia de Avaliação Ecológica Momentânea (EMA).
|
| 34 | Embora seja cada vez mais comum monitorar aspectos isolados da rotina, como
|
| 35 | qualidade do sono, nível de atividade física ou uso de medicamentos, essas
|
| 36 | informações frequentemente permanecem fragmentadas, dificultando a compreensão
|
| 37 | das relações existentes entre elas.
|
| 38 |
|
| 39 | Nesse contexto, o nome Nexo representa a proposta central do sistema: integrar
|
| 40 | essas informações e auxiliar o usuário na construção de uma narrativa coerente
|
| 41 | sobre seu estado emocional. Em vez de tratar humor, emoções, estresse, energia,
|
| 42 | ansiedade, atividades, psicofármacos e consultas como registros independentes,
|
| 43 | o aplicativo busca evidenciar como esses fatores se relacionam ao longo do
|
| 44 | tempo, favorecendo a identificação de padrões e possíveis associações.
|
| 45 |
|
| 46 | Assim, tanto o nome quanto o logotipo procuram transmitir a ideia de
|
| 47 | convergência, de ``dar a liga'', representando o papel do sistema em conectar
|
| 48 | informações dispersas e transformá-las em conhecimento útil para o processo de
|
| 49 | autorreflexão.
|
| 50 |
|
| 51 | \begin{figure}[h]
|
| 52 | \centering
|
| 53 | \caption{Logotipo do sistema}
|
| 54 | \label{fig:logo}
|
| 55 | \includegraphics[width=0.9\linewidth]{logo.png}
|
| 56 | \source{O autor}
|
| 57 | \end{figure}
|
| 58 |
|
| 59 | Para convergir com a pesquisa de tonalidade, e abraçar uma estética
|
| 60 | ``acolhedora'', o logo tenta fugir de parecer algo mecânico ao usar uma técnica
|
| 61 | que simule pinceladas ao invés de linhas retas, simulando também diferenças ou
|
| 62 | falhas na pressão utilizada por ter pequenas variações e espaços em branco no
|
| 63 | logotipo.
|
| 64 |
|
| 65 | \subsection{Hierarquia visual}
|
| 66 |
|
| 67 | No contexto de interfaces digitais, a hierarquia visual corresponde à
|
| 68 | estruturação de elementos de uma tela ou página de forma a narrar e orientar o
|
| 69 | usuário com os elementos que são mais significativos e que demandam mais
|
| 70 | atenção.
|
| 71 |
|
| 72 | Por meio de repetições de padrões de agrupamento de informações, contraste,
|
| 73 | tamanhos, espaçamentos, busca-se reduzir o esforço necessário para encontrar
|
| 74 | elementos importantes e quais ações necessitam de maior visibilidade. Segundo
|
| 75 | \citet{Lidwell_2011} uma hierarquia visual bem definida, ajuda o usuário a
|
| 76 | interpretar rápidamente a interface, reduzindo a carga cognitiva e tornando a
|
| 77 | navegação mais intuitiva.
|
| 78 |
|
| 79 | Portanto, com esse foco em mente, produziu-se uma lista pequena de componentes
|
| 80 | com visual semelhante, reduzindo o contraste entre esses mesmo elementos, o que
|
| 81 | ajuda justamente a gerar uma sensação de consistência e previsibilidade entre
|
| 82 | telas e elementos gráficos.
|
| 83 |
|
| 84 | A estrutura da aplicação pode ser resumida em cinco componentes fundamentais:
|
| 85 | cartões (\textit{cards}), botões de ação, \textit{chips} para categorização de
|
| 86 | informações, campos de formulário e indicadores em escala (\textit{sliders}).
|
| 87 | Esses componentes aparecem de maneira recorrente em praticamente todas as telas
|
| 88 | do sistema, permitindo que o usuário reconheça rapidamente sua função sem
|
| 89 | necessidade de reaprendizado.
|
| 90 |
|
| 91 | Portanto, a organização de telas geralmente se dá nesses mesmos parâmetros, em
|
| 92 | que toda tela é dividida em seções, compostas de um cabeçalho, seguido dos
|
| 93 | respectivos elementos de interação. Posteriormente, a utilização de cartões,
|
| 94 | ajuda a reforçar esse foco visual, agrupando elementos que são interativos e/ou
|
| 95 | que necessitam interação e/ou atenção.
|
| 96 |
|
| 97 | \subsection{Paleta de Cores}
|
| 98 |
|
| 99 | Como discutido anteriormente, a definição da paleta de cores buscou equilibrar
|
| 100 | dois objetivos identificados durante a fase de pesquisa, transmitir uma
|
| 101 | identidade visual acolhedora, porém evitando excessos de cores e informações
|
| 102 | lúdicas. Portanto, para buscar esses pilares, optou-se por usar uma escolha de
|
| 103 | cores mais neutras e sóbrias, focando em tons de branco, cinza e preto, de
|
| 104 | forma a permitir que o conteúdo regstrado pelo usuário seja o maior foco de
|
| 105 | destaque.
|
| 106 |
|
| 107 | Contudo, para elementos que necessitam de uma maior atenção, ou elementos de
|
| 108 | interação, como botões de ações primárias, adotou-se uma escolha mais rádical,
|
| 109 | um tom de verde forte, que busca criar exatamente a sensação de destaque
|
| 110 | imediato. Além disso, o verde geralmente está associado como uma cor que
|
| 111 | transmite uma sensação de vitalidade, força, natureza, bem-estar e afins. Como
|
| 112 | mencionado anteriormente, limitou-se a utilização para indicadores, componentes
|
| 113 | de interação e elementos que representam progresso ou confirmação.
|
| 114 |
|
| 115 | Por fim, foi escolhido outras cores pasteis para ajudar a destacar elementos
|
| 116 | como sentimento e emoções, indicadores para cada tipo de registro gerado no
|
| 117 | sistema, de forma mínima e não intrusiva. A proposta aqui era recheiar um pouco
|
| 118 | mais a interface para adci
|
| 119 |
|
| 120 | \subsection{Tipografia}
|
| 121 |
|
| 122 | A tipografia escolhida é a Inter, criada por Rasmus Andersson, cujo é
|
| 123 | reconhecida justamente pela legibilidade e atenção para que seja bem
|
| 124 | renderizada no uso digital. A fonte hoje é usada por diversas plataformas, como
|
| 125 | o Figma.
|