eletrotupi / tcc/ monografia/chapters/design.texmaster
7.9 KB | 156 lines Raw
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
\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{O autor}
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.