Desmistificando o Design UX/UI Pt.1

O passado e o presente de uma disciplina de design do futuro.

12 min read

Design.2 - Desmistificando o Design UX/UI Pt.1

2.1Programa do Curso

2.2Introdução

Aurora desperta completamente sem oxigênio, com o indicador de sinais vitais do capacete piscando em vermelho-alaranjado.

Sua respiração se torna cada vez mais pesada e ela começa a temer pela própria vida.

Uma longa lista de alertas na tela enfatizava o quanto ela falhara como astronauta e o quão distante estava da Terra.

— Olá, Aurora.

Mayday, mayday!

Que mente sã colocaria o botão para acionar a interface gráfica do pulso atrás da panturrilha direita de um traje espacial?

Pois bem, eu coloquei.

Com o único propósito de exercer minha licença poética.

Felizmente para Aurora, era o botão correto.

Nada fazia mais sentido do que iniciar esta edição com esse trecho da minha história fictícia.

Porque designers de UX/UI sempre sabem exatamente onde um botão deve ficar.

Precisamente porque UX significa “User Experience” (Experiência do Usuário) e UI significa “User Interface” (Interface do Usuário).

Mas não há absolutamente nada de intuitivo em colocar um botão de emergência tão longe do campo de visão e das mãos.

Seria como colocar o botão “Start Engine” no banco de trás de um carro.

Esse bizarro dilema de experiência do usuário de uma astronauta dá início à nossa primeira edição sobre UX/UI.

Justamente porque ninguém está vestindo um traje espacial hoje em dia, mas há telas digitais por todos os lados.

E quanto mais telas existirem, de mais designers de UX/UI nós precisaremos.

Que soem as trombetas! Este é um chamado do dever.

Não, não estou falando do jogo de tiro.

Estou falando da área mais demandada (e talvez exigente) do mercado atual de design.

2.3Usuários vs ConsumidoresCidadãos de um mundo físico vivendo em uma realidade digital.

Compreender este tópico deixará tudo o que virá a seguir perfeitamente claro para você.

Portanto, faço a primeira pergunta:

  • O que é um produto?
    Um produto é um item tangível ou intangível criado, manufaturado ou refinado para atender a uma necessidade, desejo ou problema específico no mercado.
  • Quem utiliza um produto?Um consumidor. Espere, não. Um usuário? Ambos?

Aí está o ponto crucial: se um produto é tangível, tem embalagem física e pode ser comprado em uma prateleira de supermercado, quem o utiliza é um consumidor.

Se um produto é intangível — como um e-book, software, videogame ou uma skin do Miles Morales no Fortnite —, quem interage com ele é um usuário.

Portanto, se os produtos podem ser físicos ou digitais, os clientes também serão consumidores ou usuários.

Contudo, designers de UX/UI não precisam se preocupar tanto com consumidores tradicionais, porque nosso universo de atuação é o mundo das interfaces digitais.

Pense nisto:

Um iPhone é um produto físico e embalado feito para consumidores.

Um aplicativo de meditação é um produto digital feito para usuários de um dispositivo eletrônico (que por acaso é um iPhone).

Ficou claro?

Ótimo! Agora prepare-se:

Estou acionando os motores da nossa nave espacial de viagem no tempo.

2.4IHC (Interação Humano-Máquina) e GUI (Interface Gráfica do Usuário)E como os seres humanos começaram a se comunicar com computadores

Ilustração gerada no Midjourney

Artwork generated on Midjourney

“Ok, Google! Encontre para mim a melhor receita de brownie vegano.”

“Com certeza! Buscando pela melhor pasta de dente sabor brownie vegano...”

“Google, você está demitido.”

“Desculpe, não entendi.”

“Google, você foi promovido.”

“Obrigada, tenha um bom dia e não se esqueça de dar uma caminhada.”

Isso que você acabou de presenciar foi um exemplo de IHC (Interação Humano-Computador).

Sem telas, sem digitação, sem cliques.

Apenas voz — e os humanos se desdobrando para dialogar com robôs que às vezes se confundem.

Interação por voz, por toque, por gestos, por texto...

Hoje existem inúmeras maneiras distintas de interagir com as máquinas.

Mas nem sempre foi tão flexível assim.

Antes de as máquinas serem capazes de processar comandos de voz, elas precisavam de uma tela para que nós pudéssemos enxergar o que estavam processando.

Na verdade, telas, mouses e teclados ainda são indispensáveis se precisamos realizar tarefas de alta precisão.

Design.2 - Desmistificando o Design UX/UI Pt.1

Portanto, se há uma tela envolvida em uma interação, isso significa que precisamos de uma GUI (Interface Gráfica do Usuário) para fazer a ponte entre o humano (usuário) e o computador.

Mas avançamos rápido demais na história.

Precisamos recuar ainda mais no tempo para entender de onde tudo isso nasceu.

2.5Agências de PublicidadeE a origem dos designers de UX/UI.

Seu cinto de segurança está afivelado?

Perfeito: o propulsor hiperespacial foi ativado!

Fonte: Mad Men

Source

Bem-vindo aos anos 1960, astronauta.

O período em que a publicidade passou por transformações profundas e revoluções criativas que moldaram o comportamento do consumidor moderno.

Ser publicitário era a profissão mais glamorosa e cobiçada da época.

Mas o que era exatamente uma agência de publicidade na década de 60?

Investigar isso é vital porque, naquela época, o computador pessoal nem sequer existia nas mesas dos designers.

Havia máquinas de escrever, telefones e pranchetas.

O design gráfico já existia com força total — mas era feito inteiramente à mão.

Mad Men Temporada 5

Source

Na estrutura clássica, uma agência era dividida em departamentos bem definidos:

  1. Liderança Executiva (Gestão): No topo da hierarquia estavam os executivos responsáveis pela visão estratégica, finanças e rumos do negócio.
  2. Atendimento (Vendas e Relacionamento): O time de contas cuidava do relacionamento com os clientes, prospecção e alinhamento dos briefings.
  3. Departamento de Criação (Design & Redação): Composto por duplas criativas de redatores e diretores de arte que concebiam as ideias, slogans e layouts visuais.
  4. Departamento de Mídia (Planejamento e Veiculação): Responsável por planejar e comprar espaços publicitários em jornais, revistas, rádio e televisão.
  5. Departamento de Pesquisa (Marketing e Consumo): Conduzia pesquisas de mercado e grupos focais para entender o perfil e hábitos do consumidor.
  6. Produção (Gráfica e Audiovisual): Cuidava da execução técnica dos anúncios impressos e da produção de filmes e spots para rádio e TV.
  7. Funções de Suporte (Administrativo e Financeiro): Garantiam a retaguarda operacional, faturamento e recursos humanos da empresa.

Criar produtos físicos, embalagens e anúncios impressos era a função primária do departamento de criação.

Portanto, os designers de UX/UI vêm essencialmente da mesma linhagem de profissionais que sempre moldou produtos, identidades e experiências humanas.

A razão pela qual trouxe isso à tona é que, antes de se rotular como designer digital, você precisa se reconhecer como herdeiro dessa rica tradição criativa.

2.6Um Campo Multidisciplinar Ganha VidaMas de uma maneira bastante confusa.

Não sei dizer com exatidão quando ouvi o termo UX Design pela primeira vez.

Lembro-me de que, na época, eu já havia experimentado diversas ramificações do design, do impresso ao digital.

Algum tempo depois, chegou à minha mesa o primeiro pedido formal para criar um site completo, mas não havia diretrizes claras nem bibliotecas de componentes prontas.

Ainda assim, havia algo verdadeiramente fascinante na ideia de projetar botões, fluxos e interações que pessoas reais usariam.

Era parecido com web design, mas com um toque especial: Don Norman foi o verdadeiro pioneiro a colocar um nome formal nessa disciplina.

Diversas atribuições, métodos e práticas foram sendo incorporadas ao UX Design ao longo dos anos.

Exatamente porque essa disciplina possui uma natureza inerentemente multidisciplinar.

O objetivo fundacional desse profissional é arquitetar a informação, mas não necessariamente com o intuito imediato de vender algo, e sim de tornar uma tarefa humana simples e agradável.

Don Norman nos ensinou uma direção muito clara: enfatizar a importância de considerar as necessidades, capacidades e limitações do usuário ao projetar produtos.

Mas afinal de contas, o que seria uma “boa experiência”?

Como usuário de um dispositivo digital, ler este artigo é uma experiência para você.

Mas se eu escolher as palavras erradas,

talvez você vá embora.

Se o tamanho da fonte não for confortável para a leitura,

você vai embora.

Se este artigo for longo, tedioso e cansativo de consumir,

você também vai embora.

Inúmeros detalhes sutis, às vezes quase imperceptíveis, fazem a diferença decisiva entre o abandono e o encantamento:

“Nossa, isso foi muito interessante. Voltarei mais tarde para ler mais.”

Em termos de texto, trata-se de agregar valor enquanto mantemos a leitura envolvente e agradável.

Mas quando se trata de projetar um site, aplicativo ou software complexo, a equação ganha proporções gigantescas:

Não se trata apenas da mensagem: trata-se de usabilidade, acessibilidade, hierarquia visual, tempo de resposta, fluidez dos fluxos e clareza das ações.

Imagine por um instante que você precisa desenhar as telas de um aplicativo a partir de uma ideia trazida por um fundador: “Quero um aplicativo que permita ao usuário gerenciar e acompanhar todas as suas assinaturas mensais em um só lugar.”

E agora, o que você faz?

Você rascunha um logotipo conceitual, define a persona do usuário, mapeia os fluxos de navegação, escolhe a paleta de cores, desenha cada tela e testa a usabilidade.

Quantas funções você exerceu nessa jornada? A de fundador ao pensar no modelo de negócio, a de pesquisador ao entender a dor do usuário, a de arquiteto de informação e a de designer de interface!

O que você é? Um exército de um homem só?

Pois você é um profissional criativo multidisciplinar, mesmo que ainda não tenha se dado conta.

Você sabe disso, e eu também sei.

Porque no final do dia, nada pode se interpor entre a nossa criatividade e a próxima grande ideia.

Se você chegou até aqui na leitura, você é um herói: sua capacidade de foco e atenção é tão afiada quanto a sua curiosidade.

Tudo isso parece complexo e intimidante à primeira vista. Mas não precisa ser, e pretendo desmistificar cada etapa ao longo deste curso.

Continue por perto, cosmonauta.

Compartilharei com você a habilidade secreta que apenas os designers de elite dominam com maestria:

Um imenso repertório de referências, repertório cultural e inspirações de alto nível.

Você ainda está pensando no aplicativo de controle financeiro que o fundador pediu?

Pois bem: o Bobby faz exatamente isso de forma divertida, elegante e minimalista.

Um caso exemplar e inspirador de UX/UI.

Câmbio e desligo!

Sobre esta edição

Explore UX/UI through Aurora’s fictional predicament and a journey across users, consumers, human-machine interaction, and the disciplines behind interface design.

  • Design
  • UX/UI design
  • Human-computer interaction
  • User experience
  • Interface design
Publicado em
Editorial
Design · Design.2
Idioma
Português · Read in English