PDF - VERSÃO DE IMPRESSÃO

Lição 17 - Conceitos de Design e Experiência do Usuário

objetivo

Olá, estudante, tudo bem?

Agora que você já entendeu a necessidade de criar aplicativos acessíveis para todo o seu público, vamos aprender sobre os conceitos de design e experiência do usuário! Sendo assim, nosso foco será na criação de interfaces mais intuitivas e eficientes. Para isso, apresentaremos métodos de pesquisa voltados para a compreensão das necessidades e expectativas do usuário, como entrevistas, construção de personas e mapeamento de jornadas. Além disso, abordaremos a aplicação prática da teoria do design centrado no usuário, permitindo que você, enquanto profissional, desenvolva projetos alinhados às melhores práticas do setor.

Vamos juntos nessa nova jornada em rumo ao conhecimento?

problematização

No desenvolvimento de aplicativos, um dos maiores desafios enfrentados pelas equipes de design e programação é garantir que a interface e a navegação sejam intuitivas e eficientes para os usuários. Aplicativos que não consideram a experiência do usuário podem apresentar menus desorganizados, botões pouco visíveis, dificuldades de acessibilidade e interações pouco responsivas, levando ao desengajamento e à rejeição por parte dos usuários.

Isso tudo é resultado de projetos que são criados sem uma compreensão profunda das reais necessidades do público-alvo, resultando em interfaces confusas, fluxos complexos e experiências frustrantes. Nesse contexto, os conceitos de design e experiência do usuário surgem para solucionar esse problema, permitindo que os desenvolvedores adotem uma abordagem centrada no usuário desde as etapas iniciais do projeto.

Métodos, como entrevistas, construção de personas e análise de jornadas, possibilitam um entendimento mais profundo do comportamento e das expectativas dos usuários, garantindo que as decisões de design sejam embasadas em dados reais. Ao aplicar essas técnicas, os aplicativos se tornam mais acessíveis, funcionais e agradáveis de utilizar, reduzindo barreiras e melhorando a retenção dos usuários.

Vamos entender melhor como isso acontece na prática?

case

Para que você compreenda melhor como os conceitos de design e experiência do usuário funcionam na prática, conheça a empresa fictícia TechFlow. Especializada no desenvolvimento de aplicativos para serviços financeiros, a empresa enfrentava um grande desafio: seu aplicativo de internet banking apresentava uma alta taxa de abandono por parte dos usuários.

Em uma análise, foi identificado que as reclamações mais frequentes apontavam problemas, como navegação confusa, botões mal posicionados e funções essenciais escondidas em menus de difícil acesso. Diante desse cenário, a empresa adotou uma abordagem centrada no design e na experiência do usuário. O primeiro passo foi a realização de pesquisas qualitativas e quantitativas com usuários reais, para identificar os principais pontos de frustração. Com base nesses dados, foram criadas personas representando os diferentes perfis de clientes e jornadas do usuário foram mapeadas para entender como cada grupo interagia com o aplicativo.

Com essas informações, uma nova versão do aplicativo foi desenvolvida. As melhorias incluíram botões maiores e mais visíveis, um fluxo de navegação mais simples e um sistema de sugestões inteligentes para facilitar transações frequentes. Após o lançamento da atualização, a empresa observou um aumento significativo na satisfação dos clientes, uma redução nos chamados ao suporte e maior retenção de usuários.

Dessa forma, embora o exemplo seja hipotético, ele demonstra na prática como a aplicação de conceitos de design e experiência do usuário pode transformar problemas em soluções eficazes e gerar resultados positivos.

Agora, compreendendo melhor a importância do assunto para o seu dia a dia profissional, vamos aprender mais sobre isso?

Conceitualização

O design e a experiência do usuário (UX/UI) desempenham papel fundamental no desenvolvimento de aplicativos, garantindo que sejam intuitivos, eficientes e acessíveis. Segundo Grilo (2019), a experiência do usuário busca englobar o conjunto de fatores que envolvem a interação do usuário com um produto, serviço ou ambiente. Já o design, ainda de acordo com o autor, está relacionado ao projeto da interface — como sua disposição em desktop ou mobile e o uso da tipografia, dos ícones e de outros elementos visuais — sendo, portanto, uma questão de programação visual.

O design centrado no usuário coloca as necessidades, os comportamentos e as expectativas do público no centro do processo criativo, o que torna a interação com o aplicativo mais fluida e agradável. Enquanto a UX (User Experience) se concentra na jornada do usuário, avaliando aspectos, como usabilidade, acessibilidade e eficiência, a UI (User Interface) está voltada para o aspecto visual e interativo da aplicação, envolvendo elementos, como botões, ícones, cores e tipografia.

A combinação de uma interface bem projetada com uma experiência otimizada tem impacto direto na retenção e satisfação dos usuários, reduzindo frustrações e incentivando o engajamento contínuo com o aplicativo.

Métodos de pesquisa para compreensão do usuário

Para desenvolver aplicativos eficazes e alinhados às necessidades do público, é essencial utilizar métodos de pesquisa que permitam compreender o comportamento, as expectativas e os desafios enfrentados pelos usuários. As técnicas de pesquisa qualitativa, como entrevistas e observações, oferecem insights aprofundados sobre motivações, dificuldades e preferências. Já as abordagens quantitativas, como questionários e análise de métricas, fornecem dados mensuráveis que ajudam a identificar padrões de uso e pontos críticos de melhoria. Segundo Valente (2022), além dessas estratégias, também é possível realizar a leitura de documentos e formulários da organização contratante, promover workshops com os usuários, implementar protótipos e conduzir análises de cenários de uso.

A aplicação de entrevistas estruturadas ou semiestruturadas possibilita uma compreensão mais profunda das experiências individuais dos usuários, enquanto questionários bem elaborados permitem a coleta de informações em larga escala. Ao combinar diferentes metodologias, os desenvolvedores asseguram que as decisões de design sejam baseadas em dados concretos, resultando em interfaces mais intuitivas e experiências mais satisfatórias. Algumas técnicas úteis incluem:

Entrevistas em profundidade: permitem explorar percepções, expectativas e experiências dos usuários por meio de conversas individuais guiadas.
Questionários on-line: possibilitam a coleta de dados de um grande número de usuários de forma rápida e padronizada.
Observação direta: registra o comportamento dos usuários enquanto integram com o aplicativo, revelando dificuldades que podem não ser relatadas verbalmente.
Teste de usabilidade: consistem em tarefas reais realizadas pelos usuários para avaliar a eficiência e a facilidade de uso da interface.
Análise de métricas: usa dados de navegação e uso do aplicativo (como tempo médio de permanência ou taxa de cliques) para identificar padrões e pontos de abandono.

Quando aplicadas de forma complementar, essas técnicas oferecem uma base sólida para a criação de soluções verdadeiramente centradas no usuário, promovendo maior usabilidade, eficiência e engajamento.

Construção de personas

A construção de personas é uma etapa essencial no processo de design centrado no usuário, pois permite compreender, de forma mais precisa, o público-alvo e suas reais necessidades. Personas são perfis fictícios criados com base em dados reais obtidos por meio de pesquisas qualitativas e quantitativas, representando diferentes tipos de usuários que utilizarão o aplicativo. De acordo com Revella (2023), a persona é construída a partir de uma história que retrata o processo de decisão do cliente, proporcionando insights sobre suas expectativas e preocupações ao utilizar um sistema ou optar por um aplicativo concorrente.

O processo de criação de personas envolve a identificação de características, como idade, ocupação, hábitos de navegação, desafios, objetivos e expectativas em relação ao produto. Esses perfis ajudam a orientar as decisões de design e desenvolvimento, garantindo que tanto a interface quanto a experiência do usuário estejam alinhadas às demandas do público.

Ao utilizar personas, as equipes de desenvolvimento conseguem prever cenários de uso, priorizar funcionalidades relevantes e criar soluções mais intuitivas e eficazes. Na prática, uma persona pode ser construída a partir de um modelo simples que inclua: nome fictício, breve biografia, objetivos, necessidades, frustrações e comportamentos. Por exemplo: "Carla, 35 anos, professora, usuária frequente de aplicativos educacionais. Busca plataformas fáceis de navegar, com recursos acessíveis que possam ser utilizados em sala de aula”. Essa representação facilita a visualização de quem está do outro lado da tela, auxiliando a equipe a tomar decisões mais empáticas e alinhadas às expectativas do usuário final.

Mapeamento de jornadas do usuário

O mapeamento da jornada do usuário é uma técnica essencial para compreender como os usuários interagem com um aplicativo, desde o primeiro contato até a realização de uma ação específica. Essa abordagem permite visualizar cada etapa da experiência, identificando desafios, pontos de frustração e oportunidades de melhoria. Ao mapear a jornada do usuário, é possível estruturar fluxos de navegação mais intuitivos e eficientes, contribuindo para uma experiência mais fluida, agradável e centrada nas necessidades do público.

Para esse processo, são utilizadas ferramentas, como diagramas de fluxo e storyboards, que ajudam a representar visualmente o percurso do usuário dentro do aplicativo. Com uma análise detalhada, as equipes de design e desenvolvimento conseguem aprimorar a usabilidade, reduzir barreiras de interação e tornar o sistema mais acessível e eficiente.

Na prática, o mapeamento da jornada do usuário envolve a construção de um mapa que descreve todos os pontos de contato entre o usuário e o aplicativo — desde a descoberta do App, o download e o cadastro até o uso contínuo das funcionalidades. Cada etapa é acompanhada de informações relevantes, como emoções, expectativas e possíveis obstáculos, o que permite identificar exatamente onde e como implementar melhorias para proporcionar uma experiência mais eficaz e significativa.

Boas práticas para interfaces intuitivas

Interfaces intuitivas são fundamentais para proporcionar uma experiência positiva ao usuário, tornando a interação com o aplicativo mais fluida, eficiente e agradável. Para isso, é indispensável seguir os princípios de design acessível, garantindo que todos os elementos da interface sejam compreensíveis, coerentes e fáceis de utilizar. O uso adequado de espaçamentos, cores e tipografia contribui para a legibilidade e a organização das informações, enquanto a hierarquia visual orienta o olhar do usuário, destacando os elementos mais importantes e facilitando a navegação.

Além disso, a aplicação dos padrões do Material Design assegura consistência visual e familiaridade, facilitando a adaptação do usuário ao ambiente digital. Ao adotar essas boas práticas, você conseguirá criar interfaces mais acessíveis, intuitivas e alinhadas às expectativas do público, promovendo maior engajamento e satisfação.

Na prática, é possível começar aplicando esses princípios em um projeto simples de interface com Jetpack Compose. Por exemplo, ao criar um botão de ação principal, recomenda-se o uso de cores contrastantes (como fundo azul e texto branco), espaçamento adequado entre os elementos e ícones que reforcem visualmente a ação. Além disso, pode-se aplicar o MaterialTheme para manter uma padronização estética em toda a interface.

Uma ação inicial eficaz seria construir uma tela básica com título, campos de entrada e botões, organizados com os componentes Column e Spacer. Essa estrutura garante que cada elemento tenha o espaço necessário para ser percebido e compreendido visualmente. Essas decisões, embora simples, quando alinhadas aos princípios do Material Design, têm impacto significativo na usabilidade e na experiência final do usuário.

Validação e testes com usuário

A validação e os testes com usuários são etapas essenciais para garantir que um aplicativo proporcione uma experiência realmente fluida, intuitiva e satisfatória. Os testes de usabilidade possibilitam a identificação de dificuldades na navegação, a avaliação da clareza dos elementos da interface e a compreensão do comportamento do usuário em situações reais de uso.

Métodos, como prototipagem, testes moderados ou não moderados e observação direta, permitem simular a experiência final antes do lançamento, possibilitando ajustes estratégicos no design com base em evidências concretas. Além disso, a coleta contínua de feedback dos usuários é essencial para promover melhorias constantes, garantindo que o aplicativo evolua conforme as necessidades e expectativas do público-alvo.

Compreender e aplicar os conceitos de design e experiência do usuário é fundamental para o desenvolvimento de aplicativos eficazes, inclusivos e centrados no usuário. Desde a pesquisa com usuários e construção de personas, passando pelo mapeamento de jornadas e adoção de boas práticas de interface, até a validação com usuários reais, cada etapa contribui de forma decisiva para tornar a interação mais eficiente e significativa.

Ao colocar o usuário no centro do processo, os desenvolvedores não apenas aumentam a usabilidade e eficácia do aplicativo, mas também promovem inclusão, engajamento e fidelização. Esse olhar cuidadoso e estratégico sobre a experiência do usuário transforma a tecnologia em uma ferramenta mais humana, relevante e útil no cotidiano das pessoas.

saiba aplicar

Compreender e aplicar os conceitos de design e experiência do usuário é essencial para você, futuro técnico em Desenvolvimento de Sistemas, que busca criar soluções eficazes, intuitivas e centradas nas pessoas. Ao empregar métodos de pesquisa, como entrevistas, construção de personas e mapeamento de jornadas, o profissional passa a tomar decisões de design fundamentadas em dados reais e no comportamento do usuário.

Essa abordagem resulta em interfaces mais acessíveis, eficientes e agradáveis de usar, tornando os aplicativos desenvolvidos não apenas funcionais, mas também capazes de proporcionar experiências positivas e engajadoras — um fator decisivo para a retenção e a satisfação do usuário final.

Com esse conhecimento, o técnico amplia significativamente sua capacidade de desenvolver produtos digitais alinhados às expectativas do mercado e às necessidades reais da sociedade.

Agora é a sua vez! Vamos transformar um componente simples em uma experiência completa de UI (Interface do Usuário) e UX (Experiência do Usuário) utilizando o Jetpack Compose. Começaremos com um exemplo básico: um campo de texto e um botão de envio de mensagem. A partir desse ponto, aplicaremos melhorias progressivas baseadas nos princípios de design, usabilidade e experiência do usuário. Veja, na Figura 1 a seguir, o componente em sua versão mais simples:

Figura 1 - Formulário Simples em Jetpack Compose
Fonte: o autor.

#PraCegoVer: a figura apresenta 11 linhas. Na primeira linha, está escrito “@Composable”; na segunda, “fun SimpleForm() {”; na terceira, “var text by remember { mutableStateOf("") }”; na quinta, “Column {”; na sexta, “TextField(value = text, onValueChange = { text = it })”; na sétima, “Button(onClick = { /* Enviar mensagem */ }) {”; na oitava, “Text("Enviar")”; na nona, “}”; na décima, “}”; e, na décima primeira linha, está escrito “}”. Fim da descrição.

Embora funcional, esse componente inicial não contempla aspectos importantes, como acessibilidade, feedback visual, hierarquia, espaçamento e identidade visual. Por isso, nessa etapa, vamos aplicar melhorias focadas na hierarquia visual e no uso adequado de espaçamentos para tornar a interface mais clara e intuitiva ao usuário. Confira, na Figura 2, como o código foi ajustado com essas melhorias:

Figura 2 - Formulário com hierarquia visual e espaçamentos em Jetpack Compose
Fonte: o autor.

#PraCegoVer: a figura apresenta 28 linhas. Na primeira linha, está escrito “@Composable”; na segunda, “fun ImproveForm() {”; na terceira, “var text by remember { mutableStateOf("") }”; na quinta, “Column(”; na sexta, “modifier = Modifier.fillMaxWidth().padding(16.dp)”; na sétima, “verticalArrangement = Arrangement.spacedBy(12.dp)”; na oitava, “) {”; na nona, “Text(”; na décima, “text = ‘Digite sua mensagem’”; na décima primeira, “style = MaterialTheme.typography.titleMedium”; na décima segunda, “)”; na décima quarta, “TextField(”; na décima quinta, “value = text”; na décima sexta, “onValueChange = { text = it }”; na décima sétima, “label = { Text("Mensagem") }”; na décima oitava, “modifier = Modifier.fillMaxWidth()”; na décima nona, “)”; na vigésima primeira, “Button(”; na vigésima segunda, “onClick = { /* Enviar mensagem */ }”; na vigésima terceira, “modifier = Modifier.align(Alignment.End)”; na vigésima quarta, “) {”; na vigésima quinta, “Text(“Enviar”)”; na vigésima sexta, “}”; na vigésima sétima, “}”; e, na vigésima oitava linha, está escrito “}”. Fim da descrição.

Agora, depois que aplicamos padding, alinhamento, espaçamento e hierarquia de informação, a jornada do usuário já apresenta melhorias. Agora, vamos aperfeiçoá-la ainda mais com recursos de acessibilidade e feedback visual, conforme o código apresentado na Figura 3 a seguir:

Figura 3 - Formulário acessível em Jetpack Compose
Fonte: o autor.

#PraCegoVer: a figura apresenta 40 linhas. Na linha 1, está escrito “@Composable’; na linha 2, “fun AccessibleForm() {”; na linha 3, “var text by remember { mutableStateOf("") }”; na linha 4, “var showMessage by remember { mutableStateOf(false) }”; na linha 6, “Column(”; na linha 7, “modifier = Modifier.fillMaxWidth().padding(16.dp)”; na linha 8, “verticalArrangement = Arrangement.spacedBy(12.dp)”; na linha 9, “) {”; na linha 10, “Text(”; na linha 11, ‘text = ‘Digite sua mensagem’”; na linha 12, “style = MaterialTheme.typography.titleMedium”; na linha 13, “)”; na linha 15, “TextField(”; na linha 16, “value = text”; na linha 17, “onValueChange = {”; na linha 18, “text = it”; na linha 19, “showMessage = false”; na linha 20, “}”; na linha 21, “label = { Text("Mensagem") }”; na linha 22, “modifier = Modifier.fillMaxWidth().semantics { contentDescription = "Campo para digitar mensagem" }”; na linha 23, “)”; na linha 25, “Button(”; na linha 26, “onClick = { showMessage = true }”; na linha 27, “modifier = Modifier.align(Alignment.End).semantics { contentDescription = "Botão para enviar mensagem" }”; na linha 28, “) {”; na linha 29, “Text(“Enviar”)”; na linha 30, “}”; na linha 32, “if (showMessage) {”; na linha 33, “Text(”; na linha 34, “text = ‘Mensagem enviada com sucesso!’”; na linha 35, “color = Color.Green”; na linha 36, “style = MaterialTheme.typography.bodyMedium”; na linha 37, “)”; na linha 38, “}”; na linha 39, “}”; e, na linha 40, está escrito “}”. Fim da descrição.

Nessa última alteração, incluímos: uma descrição acessível para leitores de tela, feedback visual pós-acção e organização mais clara do fluxo. Agora, resta apenas aplicar uma identidade visual com os princípios do Material Design. Para isso, podemos usar o MaterialTheme com esquemas personalizados e cores acessíveis, garantindo consistência visual com a interface da Activity. Confira, na Figura 4, como essa aplicação foi implementada:

Figura 4 - Formulário com esquemas e cores acessíveis em Jetpack Compose
Fonte: o autor.

#PraCegoVer: a figura apresenta 18 linhas. Na linha 1, está escrito “class MainActivity : ComponentActivity() {”; na linha 2, “override fun onCreate(savedInstanceState: Bundle?) {”; na linha 3, “super.onCreate(savedInstanceState)”; na linha 4, “enableEdgeToEdge()”; na linha 5, “setContent {”; na linha 6, “MaterialTheme {”; na linha 7, “colorScheme = lightColorScheme(”; na linha 8, “primary = Color(0xFF6200EE)”; na linha 9, “onPrimary = Color.White’; na linha 10, “surface = Color.White”; na linha 11, “onSurface = Color.Black”; na linha 12, “)”; na linha 13, “) {”; na linha 14, “AcessibleForm()”; na linha 15, “}”; na linha 16, “}”; na linha 17, “}”; e, na linha 18, está escrito “}”. Fim da descrição.

Após todas as melhorias, transformamos um componente inicial, simples e sem foco no usuário, em uma solução visualmente agradável, acessível, eficiente e com excelente usabilidade. Esse cuidado com os detalhes é o que diferencia um aplicativo apenas funcional de uma experiência digital realmente positiva e envolvente. O mais interessante é que essa abordagem prática pode ser aplicada a qualquer parte da interface. O segredo está em sempre refletir: “Como o usuário vai se sentir e interagir com isso?”.

Agora é a sua vez! Que tal desafiar seus colegas e professores a aprimorar ainda mais essa interface? E aqui vai uma provocação: você se perguntou “Para onde está sendo enviada a mensagem?”. Pois bem, exiba a mensagem na tela também!

Bom trabalho!

REFERÊNCIAS

GRILO, A. Experiência do usuário em interfaces digitais. Natal: Sedis-UFRN, 2019

REVELLA, A. Buyer personas: como obter insights sobre as expectativas de seus clientes, alinhar suas estratégias de marketing e conseguir mais negócios. Belo Horizonte: Audiência, 2023

VALENTE, M. Engenharia de software moderna. Belo Horizonte: Independente, 2022.

Page updated

Google Sites

Report abuse