| 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{Identidade visual}
|
| 29 |
|
| 30 | Identidade visual, neste trabalho, designa o conjunto de decisões gráficas que
|
| 31 | conferem ao aplicativo uma aparência reconhecível e consistente: o nome e o
|
| 32 | logotipo, a hierarquia visual, a paleta de cores e a tipografia. Esses
|
| 33 | elementos constituem a primeira camada de comunicação entre o sistema e o
|
| 34 | usuário e materializam as preferências identificadas na etapa de pesquisa ---
|
| 35 | em especial a opção por uma linguagem sóbria e acolhedora. Como apontam os
|
| 36 | princípios universais de design, a consistência e o reconhecimento desses
|
| 37 | elementos reduzem a carga de interpretação e tornam a interface mais previsível
|
| 38 | \cite{Lidwell_2011}. As subseções seguintes percorrem cada uma dessas decisões.
|
| 39 |
|
| 40 | \subsection{Nome e Logotipo}
|
| 41 |
|
| 42 | O termo Nexo remete à ideia de conexão, relação e convergência entre
|
| 43 | diferentes elementos. Esse conceito dialoga diretamente com a proposta do
|
| 44 | projeto, fundamentada na metodologia de Avaliação Ecológica Momentânea (EMA).
|
| 45 | Embora seja cada vez mais comum monitorar aspectos isolados da rotina, como
|
| 46 | qualidade do sono, nível de atividade física ou uso de medicamentos, essas
|
| 47 | informações frequentemente permanecem fragmentadas, dificultando a compreensão
|
| 48 | das relações existentes entre elas.
|
| 49 |
|
| 50 | Nesse contexto, o nome Nexo representa a proposta central do sistema: integrar
|
| 51 | essas informações e auxiliar o usuário na construção de uma narrativa coerente
|
| 52 | sobre seu estado emocional. Em vez de tratar humor, emoções, estresse, energia,
|
| 53 | ansiedade, atividades, psicofármacos e consultas como registros independentes,
|
| 54 | o aplicativo busca evidenciar como esses fatores se relacionam ao longo do
|
| 55 | tempo, favorecendo a identificação de padrões e possíveis associações.
|
| 56 |
|
| 57 | \begin{figure}[H]
|
| 58 | \centering
|
| 59 | \caption{Logotipo do sistema}
|
| 60 | \label{fig:logo}
|
| 61 | \includegraphics[width=0.4\linewidth]{logo.png}
|
| 62 | \source{Elaborado pelo autor (2026)}
|
| 63 | \end{figure}
|
| 64 |
|
| 65 | Assim, tanto o nome quanto o logotipo procuram transmitir a ideia de
|
| 66 | convergência, de ``dar a liga'', representando o papel do sistema em conectar
|
| 67 | informações dispersas e transformá-las em conhecimento útil para o processo de
|
| 68 | autorreflexão.
|
| 69 |
|
| 70 | Para convergir com a pesquisa de tonalidade, e abraçar uma estética
|
| 71 | ``acolhedora'', o logo tenta fugir de parecer algo mecânico ao usar uma técnica
|
| 72 | que simule pinceladas ao invés de linhas retas, simulando também diferenças ou
|
| 73 | falhas na pressão utilizada por ter pequenas variações e espaços em branco no
|
| 74 | logotipo.
|
| 75 |
|
| 76 | \subsection{Hierarquia visual}
|
| 77 |
|
| 78 | No contexto de interfaces digitais, a hierarquia visual corresponde à
|
| 79 | estruturação de elementos de uma tela ou página de forma a narrar e orientar o
|
| 80 | usuário com os elementos que são mais significativos e que demandam mais
|
| 81 | atenção.
|
| 82 |
|
| 83 | Por meio de repetições de padrões de agrupamento de informações, contraste,
|
| 84 | tamanhos, espaçamentos, busca-se reduzir o esforço necessário para encontrar
|
| 85 | elementos importantes e quais ações necessitam de maior visibilidade. Segundo
|
| 86 | \citet{Lidwell_2011} uma hierarquia visual bem definida, ajuda o usuário a
|
| 87 | interpretar rápidamente a interface, reduzindo a carga cognitiva e tornando a
|
| 88 | navegação mais intuitiva.
|
| 89 |
|
| 90 | Portanto, com esse foco em mente, produziu-se uma lista pequena de componentes
|
| 91 | com visual semelhante, reduzindo o contraste entre esses mesmo elementos, o que
|
| 92 | ajuda justamente a gerar uma sensação de consistência e previsibilidade entre
|
| 93 | telas e elementos gráficos.
|
| 94 |
|
| 95 | A estrutura da aplicação pode ser resumida em cinco componentes fundamentais:
|
| 96 | cartões (\textit{cards}), botões de ação, \textit{chips} para categorização de
|
| 97 | informações, campos de formulário e indicadores em escala (\textit{sliders}).
|
| 98 | Esses componentes aparecem de maneira recorrente em praticamente todas as telas
|
| 99 | do sistema, permitindo que o usuário reconheça rapidamente sua função sem
|
| 100 | necessidade de reaprendizado.
|
| 101 |
|
| 102 | Portanto, a organização de telas geralmente se dá nesses mesmos parâmetros, em
|
| 103 | que toda tela é dividida em seções, compostas de um cabeçalho, seguido dos
|
| 104 | respectivos elementos de interação. Posteriormente, a utilização de cartões,
|
| 105 | ajuda a reforçar esse foco visual, agrupando elementos que são interativos e/ou
|
| 106 | que necessitam interação e/ou atenção.
|
| 107 |
|
| 108 | \subsection{Paleta de Cores}
|
| 109 |
|
| 110 | Como discutido anteriormente, a definição da paleta de cores buscou equilibrar
|
| 111 | dois objetivos identificados durante a fase de pesquisa, transmitir uma
|
| 112 | identidade visual acolhedora, porém evitando excessos de cores e informações
|
| 113 | lúdicas. Portanto, para buscar esses pilares, optou-se por usar uma escolha de
|
| 114 | cores mais neutras e sóbrias, focando em tons de branco, cinza e preto, de
|
| 115 | forma a permitir que o conteúdo regstrado pelo usuário seja o maior foco de
|
| 116 | destaque.
|
| 117 |
|
| 118 | \begin{figure}[h]
|
| 119 | \centering
|
| 120 | \caption{Paleta de cores}
|
| 121 | \label{fig:palette}
|
| 122 | \includegraphics[width=10cm, height=8cm, keepaspectratio]{pallete-small.png}
|
| 123 | \source{Elaborado pelo autor (2026)}
|
| 124 | \end{figure}
|
| 125 |
|
| 126 | % Hack
|
| 127 | \newpage
|
| 128 |
|
| 129 | Contudo, para elementos que necessitam de uma maior atenção, ou elementos de
|
| 130 | interação, como botões de ações primárias, adotou-se uma escolha mais rádical,
|
| 131 | um tom de verde forte, que busca criar exatamente a sensação de destaque
|
| 132 | imediato. Além disso, o verde geralmente está associado como uma cor que
|
| 133 | transmite uma sensação de vitalidade, força, natureza, bem-estar e afins. Como
|
| 134 | mencionado anteriormente, limitou-se a utilização para indicadores, componentes
|
| 135 | de interação e elementos que representam progresso ou confirmação.
|
| 136 |
|
| 137 | Por fim, foi escolhido outras cores pasteis para ajudar a destacar elementos
|
| 138 | como sentimento e emoções, indicadores para cada tipo de registro gerado no
|
| 139 | sistema, de forma mínima e não intrusiva.
|
| 140 |
|
| 141 | \subsection{Tipografia}
|
| 142 |
|
| 143 | A tipografia constitui um dos principais elementos responsáveis pela
|
| 144 | legibilidade em interfaces digitais. Segundo o Material Design
|
| 145 | \cite{Google_2021}, a escolha adequada da fonte influencia diretamente a
|
| 146 | velocidade de leitura, a organização da informação e a percepção geral de
|
| 147 | qualidade da interface. Em aplicações móveis, onde o espaço disponível é
|
| 148 | reduzido, a clareza tipográfica torna-se ainda mais importante.
|
| 149 |
|
| 150 | \begin{figure}[h]
|
| 151 | \centering
|
| 152 | \caption{Referência da fonte Inter}
|
| 153 | \label{fig:ref-inter}
|
| 154 | \includegraphics[width=10cm, height=8cm, keepaspectratio]{ref-inter.png}
|
| 155 | \source{Site da página da fonte Inter (2026)}
|
| 156 | \end{figure}
|
| 157 |
|
| 158 | Considerando esses aspectos, optou-se pela utilização da fonte Inter,
|
| 159 | desenvolvida por Rasmus Andersson especificamente para ambientes digitais. A
|
| 160 | família tipográfica foi projetada para manter elevada legibilidade em
|
| 161 | diferentes tamanhos de tela, apresentando boa diferenciação entre caracteres e
|
| 162 | excelente renderização em sistemas operacionais modernos \cite{Andersson_2016}.
|
| 163 |
|
| 164 | A hierarquia tipográfica do sistema foi construída a partir de poucas variações
|
| 165 | de tamanho e peso da fonte. Títulos utilizam maior peso tipográfico para
|
| 166 | estabelecer prioridade visual, enquanto textos informativos e descrições
|
| 167 | empregam pesos mais leves, mantendo consistência em toda a aplicação. Essa
|
| 168 | padronização reduz a quantidade de estímulos visuais simultâneos e facilita a
|
| 169 | identificação das informações mais relevantes em cada tela.
|
| 170 |
|
| 171 | Além da legibilidade, a escolha da Inter também contribui para reforçar a
|
| 172 | identidade moderna e funcional proposta pelo aplicativo. Por ser amplamente
|
| 173 | utilizada em plataformas digitais e ferramentas de interface, como o Figma, a
|
| 174 | fonte transmite familiaridade ao usuário e mantém consistência com os padrões
|
| 175 | contemporâneos de design de interfaces.
|
| 176 |
|
| 177 | \section{Estrutura}
|
| 178 |
|
| 179 | Por estrutura entende-se a organização das telas e da navegação do aplicativo:
|
| 180 | o que cada tela contém, em que ordem os elementos se apresentam e como o
|
| 181 | usuário se desloca entre elas. No Nexo, essa organização repousa sobre dois
|
| 182 | alicerces: uma navegação por abas que divide o sistema em cinco áreas ---
|
| 183 | Histórico, Jornada, Novo, Ações de Cuidado e Configurações --- e a composição
|
| 184 | das telas por cartões reutilizáveis, descritos na seção anterior. Esta seção
|
| 185 | apresenta como essa estrutura foi planejada e mapeada antes da aplicação da
|
| 186 | identidade visual definitiva.
|
| 187 |
|
| 188 | \subsection{Organização da navegação}
|
| 189 |
|
| 190 | A navegação do Nexo é organizada em cinco áreas, acessíveis por uma barra de
|
| 191 | abas inferior: ``Histórico'', ``Jornada'', ``Novo'', ``Ações de Cuidado'' e
|
| 192 | ``Configurações''. A divisão separa as superfícies de consulta --- Histórico e
|
| 193 | Jornada, que apresentam registros e indicadores já consolidados --- do ponto de
|
| 194 | entrada rápido para o registro de humor, a aba Novo. As ações de cuidado, por
|
| 195 | reunirem modalidades distintas (medicamentos, consultas e atividades), são
|
| 196 | agrupadas em um único hub, evitando que cada tipo ocupe uma entrada própria na
|
| 197 | navegação.
|
| 198 |
|
| 199 | \subsection{Consolidação de registros no Histórico}
|
| 200 |
|
| 201 | Uma decisão estrutural relevante foi consolidar os registros em uma única linha
|
| 202 | do tempo. Em vez de listas separadas para humor, sono, gatilhos e ações de
|
| 203 | cuidado, a tela de Histórico combina os quatro tipos em uma sequência
|
| 204 | cronológica única, agrupada por dia, por meio de um componente de mapeamento
|
| 205 | que normaliza cada recurso em um formato comum, descrito no Capítulo
|
| 206 | \ref{sec:history-analysis}. A motivação decorre da própria metodologia EMA:
|
| 207 | aproximar visualmente eventos relacionados --- como um gatilho registrado
|
| 208 | minutos antes de um humor --- permite reconstruir uma narrativa do dia em vez
|
| 209 | de fragmentar o contexto em telas distintas.
|
| 210 |
|
| 211 | \subsection{Wireframes}
|
| 212 |
|
| 213 | \textit{Wireframes} são representações simplificadas de uma interface, focadas
|
| 214 | na estrutura e na disposição dos elementos, sem se preocupar ainda com
|
| 215 | componentes visuais definitivos, cores ou tipografia. Essa camada de abstração
|
| 216 | permite válidar rapidamente o que cada tela precisa conter e como o usuário
|
| 217 | navegaria entre elas, antes de investir tempo no design em alta fidelidade, no
|
| 218 | qual esses elementos visuais são então aplicados. Quando elementos
|
| 219 | clicáveis/interativos são adicionados aos \textit{wireframes}, eles também
|
| 220 | podem se tornar protótipos, usados para modelar e avaliar o fluxo de navegação
|
| 221 | entre as telas.
|
| 222 |
|
| 223 | No desenvolvimento do aplicativo, essa prática foi usada para mapear as telas
|
| 224 | existentes e definir quais elementos cada uma apresentaria, como exemplifica a
|
| 225 | tela inicial na Figura \ref{fig:wireframe-initial}:
|
| 226 |
|
| 227 | \begin{figure}[h]
|
| 228 | \centering
|
| 229 | \caption{\textit{Wireframe} da tela inicial}
|
| 230 | \label{fig:wireframe-initial}
|
| 231 | \includegraphics[width=10cm, height=8cm, keepaspectratio]{wireframe-initial.png}
|
| 232 | \source{Elaborado pelo autor (2026)}
|
| 233 | \end{figure}
|
| 234 |
|
| 235 | Alguns elementos podem ser notados nessa tela, como a presença de
|
| 236 | \textit{cards} e emojis, utilizados para criar destaque visual. A escolha de
|
| 237 | emojis foi inspirada pelo aplicativo analisado no
|
| 238 | Capítulo~\ref{chapter:methodologies}, DailyBeans que utiliza ícones para cada
|
| 239 | tipo de emoção. Portanto, a escolha de emojis se dá como uma saída rápida e
|
| 240 | fácil, visto que não demanda conhecimentos de íconografia.
|
| 241 |
|
| 242 | Um segundo \textit{wireframe}, apresentado na Figura
|
| 243 | \ref{fig:wireframe-insights}, mostra uma proposta inicial para a tela de
|
| 244 | Indicadores. Nessa versão inicial, o usuário selecionava, por meio de um menu
|
| 245 | suspenso, (``Flutuação de:''), qual indicador desejava visualizar, sendo os
|
| 246 | dados apresentados em um gráfico de linha que representava a flutuação dos
|
| 247 | níveis informados de um humor (``Energia'', ``Ansiedade'' e/ou ``Estresse''),
|
| 248 | além de seções para gatilhos frequentes e um indicador de estabilidade de
|
| 249 | humor.
|
| 250 |
|
| 251 | \begin{figure}[H]
|
| 252 | \centering
|
| 253 | \caption{\textit{Wireframe} da tela de indicadores}
|
| 254 | \label{fig:wireframe-insights}
|
| 255 | \includegraphics[width=10cm, height=8cm, keepaspectratio]{wireframe-insights.png}
|
| 256 | \source{Elaborado pelo autor (2026)}
|
| 257 | \end{figure}
|
| 258 |
|
| 259 | Essa abordagem, contudo, foi descartada na versão final do aplicativo: o
|
| 260 | gráfico com seletor de tipo de indicador foi removido, e a tela foi repaginada
|
| 261 | para simplificar usando três tipos de indicadores automaticamente cálculados
|
| 262 | pelo sistema, conforme detalhado no Capítulo~\ref{sec:insights}.
|