thesis: expand structural and empty sections on the design chapter
Pedro Lucas Porcellis porcellis@eletrotupi.com · 9 days ago
6c571a3ed690948ef2705dc730c097b3a0c09ada Browse filesParents
7cc1826Changed files
1
Additions
+40
Deletions
-4
monografia/chapters/design.tex
1 1
\chapter{Design}
2 2
3 3
% TODO: Find citations
4 4
5 5
As decisões de design do sistema foram fundamentadas tanto na análise dos
25 25
cores saturadas em favor de uma linguagem mais discreta e orientada ao
26 26
conteúdo.
27 27
28 28
\section{Identidade visual}
29 29
30 -
% TODO: Flesh a intro here
31 -
\lipsum[1-2]
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.
32 39
33 40
\subsection{Nome e Logotipo}
34 41
35 42
O termo Nexo remete à ideia de conexão, relação e convergência entre
36 43
diferentes elementos. Esse conceito dialoga diretamente com a proposta do
167 174
fonte transmite familiaridade ao usuário e mantém consistência com os padrões
168 175
contemporâneos de design de interfaces.
169 176
170 177
\section{Estrutura}
171 178
172 -
% TODO: Flesh a intro here as well
173 -
\lipsum[1-2]
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.
174 210
175 211
\subsection{Wireframes}
176 212
177 213
\textit{Wireframes} são representações simplificadas de uma interface, focadas
178 214
na estrutura e na disposição dos elementos, sem se preocupar ainda com
222 258
223 259
Essa abordagem, contudo, foi descartada na versão final do aplicativo: o
224 260
gráfico com seletor de tipo de indicador foi removido, e a tela foi repaginada
225 261
para simplificar usando três tipos de indicadores automaticamente cálculados
226 262
pelo sistema, conforme detalhado no Capítulo~\ref{sec:insights}.