| 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{Elaborado pelo autor (2026)}
|
| 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 | \begin{figure}[h]
|
| 108 | \centering
|
| 109 | \caption{Paleta de cores}
|
| 110 | \label{fig:palette}
|
| 111 | \includegraphics[width=10cm, height=8cm, keepaspectratio]{pallete-small.png}
|
| 112 | \source{Elaborado pelo autor (2026)}
|
| 113 | \end{figure}
|
| 114 |
|
| 115 | % Hack
|
| 116 | \newpage
|
| 117 |
|
| 118 | Contudo, para elementos que necessitam de uma maior atenção, ou elementos de
|
| 119 | interação, como botões de ações primárias, adotou-se uma escolha mais rádical,
|
| 120 | um tom de verde forte, que busca criar exatamente a sensação de destaque
|
| 121 | imediato. Além disso, o verde geralmente está associado como uma cor que
|
| 122 | transmite uma sensação de vitalidade, força, natureza, bem-estar e afins. Como
|
| 123 | mencionado anteriormente, limitou-se a utilização para indicadores, componentes
|
| 124 | de interação e elementos que representam progresso ou confirmação.
|
| 125 |
|
| 126 | Por fim, foi escolhido outras cores pasteis para ajudar a destacar elementos
|
| 127 | como sentimento e emoções, indicadores para cada tipo de registro gerado no
|
| 128 | sistema, de forma mínima e não intrusiva.
|
| 129 |
|
| 130 | \subsection{Tipografia}
|
| 131 |
|
| 132 | A tipografia constitui um dos principais elementos responsáveis pela
|
| 133 | legibilidade em interfaces digitais. Segundo o Material Design
|
| 134 | \cite{Google_2021}, a escolha adequada da fonte influencia diretamente a
|
| 135 | velocidade de leitura, a organização da informação e a percepção geral de
|
| 136 | qualidade da interface. Em aplicações móveis, onde o espaço disponível é
|
| 137 | reduzido, a clareza tipográfica torna-se ainda mais importante.
|
| 138 |
|
| 139 | Considerando esses aspectos, optou-se pela utilização da fonte Inter,
|
| 140 | desenvolvida por Rasmus Andersson especificamente para ambientes digitais. A
|
| 141 | família tipográfica foi projetada para manter elevada legibilidade em
|
| 142 | diferentes tamanhos de tela, apresentando boa diferenciação entre caracteres e
|
| 143 | excelente renderização em sistemas operacionais modernos \cite{Andersson_2016}.
|
| 144 |
|
| 145 | A hierarquia tipográfica do sistema foi construída a partir de poucas variações
|
| 146 | de tamanho e peso da fonte. Títulos utilizam maior peso tipográfico para
|
| 147 | estabelecer prioridade visual, enquanto textos informativos e descrições
|
| 148 | empregam pesos mais leves, mantendo consistência em toda a aplicação. Essa
|
| 149 | padronização reduz a quantidade de estímulos visuais simultâneos e facilita a
|
| 150 | identificação das informações mais relevantes em cada tela.
|
| 151 |
|
| 152 | Além da legibilidade, a escolha da Inter também contribui para reforçar a
|
| 153 | identidade moderna e funcional proposta pelo aplicativo. Por ser amplamente
|
| 154 | utilizada em plataformas digitais e ferramentas de interface, como o Figma, a
|
| 155 | fonte transmite familiaridade ao usuário e mantém consistência com os padrões
|
| 156 | contemporâneos de design de interfaces.
|
| 157 |
|
| 158 | \subsection{Wireframes}
|
| 159 |
|
| 160 | \textit{Wireframes} são representações simplificadas de uma interface, focadas
|
| 161 | na estrutura e na disposição dos elementos, sem se preocupar ainda com
|
| 162 | componentes visuais definitivos, cores ou tipografia. Essa camada de abstração
|
| 163 | permite válidar rapidamente o que cada tela precisa conter e como o usuário
|
| 164 | navegaria entre elas, antes de investir tempo no design em alta fidelidade, no
|
| 165 | qual esses elementos visuais são então aplicados. Quando elementos
|
| 166 | clicáveis/interativos são adicionados aos \textit{wireframes}, eles também
|
| 167 | podem se tornar protótipos, usados para modelar e avaliar o fluxo de navegação
|
| 168 | entre as telas.
|
| 169 |
|
| 170 | No desenvolvimento do aplicativo, essa prática foi usada para mapear as telas
|
| 171 | existentes e definir quais elementos cada uma apresentaria, como exemplifica a
|
| 172 | tela inicial na Figura \ref{fig:wireframe-initial}:
|
| 173 |
|
| 174 | \begin{figure}[h]
|
| 175 | \centering
|
| 176 | \caption{\textit{Wireframe} da tela inicial}
|
| 177 | \label{fig:wireframe-initial}
|
| 178 | \includegraphics[width=10cm, height=8cm, keepaspectratio]{wireframe-initial.png}
|
| 179 | \source{Elaborado pelo autor (2026)}
|
| 180 | \end{figure}
|
| 181 |
|
| 182 | Alguns elementos podem ser notados nessa tela, como a presença de
|
| 183 | \textit{cards} e emojis, utilizados para criar destaque visual. A escolha de
|
| 184 | emojis foi inspirada pelo aplicativo analisado no
|
| 185 | Capítulo~\ref{chapter:methodologies}, DailyBeans que utiliza ícones para cada
|
| 186 | tipo de emoção. Portanto, a escolha de emojis se dá como uma saída rápida e
|
| 187 | fácil, visto que não demanda conhecimentos de íconografia.
|
| 188 |
|
| 189 | Um segundo \textit{wireframe}, apresentado na Figura
|
| 190 | \ref{fig:wireframe-insights}, mostra uma proposta inicial para a tela de
|
| 191 | Indicadores. Nessa versão inicial, o usuário selecionava, por meio de um menu
|
| 192 | suspenso, (``Flutuação de:''), qual indicador desejava visualizar, sendo os
|
| 193 | dados apresentados em um gráfico de linha que representava a flutuação dos
|
| 194 | níveis informados de um humor (``Energia'', ``Ansiedade'' e/ou ``Estresse''),
|
| 195 | além de seções para gatilhos frequentes e um indicador de estabilidade de
|
| 196 | humor.
|
| 197 |
|
| 198 | \begin{figure}[h]
|
| 199 | \centering
|
| 200 | \caption{\textit{Wireframe} da tela de indicadores}
|
| 201 | \label{fig:wireframe-insights}
|
| 202 | \includegraphics[width=10cm, height=8cm, keepaspectratio]{wireframe-insights.png}
|
| 203 | \source{Elaborado pelo autor (2026)}
|
| 204 | \end{figure}
|
| 205 |
|
| 206 | Essa abordagem, contudo, foi descartada na versão final do aplicativo: o
|
| 207 | gráfico com seletor de tipo de indicador foi removido, e a tela foi repaginada
|
| 208 | para simplificar usando três tipos de indicadores automaticamente cálculados
|
| 209 | pelo sistema, conforme detalhado no Capítulo~\ref{sec:insights}.
|