Desmistificando o Design UX/UI Pt.1

Aurora acorda completamente sem oxigênio, o indicador de sinais vitais do capacete apita violentamente em seu ouvido e ela não consegue entender o que está acontecendo ou como chegou ali. Ela só sabe que sente frio, muito frio. Assim que sua visão clareia, ela pode ver que flutua no mais completo vazio galáctico, onde não importa para qual direção olhe, visualiza uma mistura mágica de tons de cores escuras. Por um momento, ela fica fascinada por nebulosas de todas as cores decoradas por milhões de estrelas que cintilam a anos-luz de distância.

Sua respiração começa a ficar cada vez mais pesada e ela começa a temer pela sua vida; o desespero chega e ela começa a mapear o próprio corpo até encontrar um botão em seu traje espacial bem na parte de baixo do pescoço. Ela começa a se perguntar se realmente deveria pressioná-lo, lembra dos incontáveis filmes de ficção científica que assistiu e percebe que perder o capacete seria o primeiro e último passo para fracassar como astronauta. O frio começa a permear todo o seu corpo e ela percebe que o sistema de temperatura do traje também falha criticamente. Sem outra solução, ela decide pressionar o botão e imediatamente uma tela holográfica interativa brilha em seu pulso; a interface do traje espacial havia sido iniciada e agora ela podia configurar os sistemas que estavam falhando.

Uma longa lista de alertas na tela enfatizava o quão ruim de astronauta ela era e como havia deixado tudo sair do controle, mas sentindo-se esperançosa, ela começou a rolar pelas opções até encontrar um botão que dizia "assistente do traje". Sem pensar duas vezes, ela iniciou o módulo.

— Olá, Aurora.

Mayday, mayday!

Que tipo de mente sã colocaria um botão para iniciar uma interface gráfica de pulso no pescoço de um traje?

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 do meu livro de ficção.

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 tão longe do dispositivo com o qual ele interage.

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

Esse bizarro problema 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á dispositivos 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) da indústria de design atual.

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 que é criado, manufaturado ou desenvolvido para ser oferecido a clientes para compra ou uso.
• Quem utiliza um produto?Um consumidor. Espere, não. Um usuário? Ambos?

Aí está o ponto. Se um produto é tangível, tem embalagem e pode ser comprado em um supermercado, como uma lata de Coca-Cola, então ele é feito para um consumidor.

Se um produto é intangível, como um e-book, software, jogo ou até uma skin do Miles Morales no Fortnite, então ele foi feito para um usuário.

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

Contudo, designers de UX/UI não precisam realmente se preocupar com consumidores, porque na verdade eles fazem produtos digitais para usuários.

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 digital (que muito bem poderia ser um iPhone).

Ficou claro?

Ótimo! Agora prepare-se:

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

“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 consigo entender."

“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 vozes e principalmente nossos antepassados literalmente lutando com robôs enganadores conhecidos como assistentes de voz.

Interação baseada em voz, interação baseada em toque, interação baseada em gestos, interação baseada em texto, interação de Realidade Aumentada (AR) e Realidade Virtual (VR), interfaces cérebro-computador, interação baseada em biometria, interação baseada em proximidade e Interação de Arremesso Contra a Parede por Estresse.

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 reconhecer comandos de voz, elas precisavam de uma tela para que pudéssemos tocar botões e fazê-las nos obedecer fielmente ao pedir uma pizza com queijo extra.

Na verdade, telas, mouses e teclados ainda são muito necessários se precisamos usar uma máquina para realizar tarefas complexas com softwares complexos, como estranhamente, usar um software para projetar outro software.

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

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

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

Seu cinto de segurança está afivelado?

Perfeito: o propulsor hiperespacial foi ativado!

Bem-vindo aos anos 1960, astronauta.

O período em que a publicidade passou por mudanças significativas e revoluções criativas em resposta a transformações sociais e culturais.

Ser um profissional de publicidade era o trabalho mais descolado que uma pessoa poderia ter nessa época.

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

Isso é crucial para investigarmos porque, nessa época, um computador sequer tinha uma tela e ocupava uma sala inteira. Era usado majoritariamente para processamento de dados e para auxiliar nos processos de compra e planejamento de mídia.

Havia outros dispositivos, mas eram majoritariamente máquinas de escrever e telefones.

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

Dentro de uma estrutura clássica, havia muitos departamentos diferentes dentro de uma agência:

1. Liderança Executiva (Gestão): No topo da hierarquia da agência estavam os executivos que forneciam direção estratégica, tomavam decisões importantes e supervisionavam as operações gerais da agência. Isso incluía posições como o CEO (Diretor Executivo), Presidente e outros cargos de gestão de alto nível.
2. Atendimento (Vendas): O departamento de atendimento lidava com os relacionamentos com clientes e servia como principal ponto de contato entre a agência e seus clientes. Os executivos de contas eram responsáveis por entender as necessidades dos clientes, gerenciar campanhas e coordenar o trabalho dos vários departamentos para garantir a satisfação do cliente.
3. Departamento de Criação (Design & Redação): O departamento de criação era composto por redatores, diretores de arte, designers gráficos e outros profissionais criativos. Eram responsáveis por desenvolver conceitos publicitários, criar designs visuais, escrever textos persuasivos e produzir os materiais publicitários em si.
4. Departamento de Mídia (Publicidade Paga): O departamento de mídia era responsável pelo planejamento e compra de mídia. Os planejadores de mídia pesquisavam o público-alvo, selecionavam canais de mídia apropriados (como TV, rádio, impresso), negociavam a veiculação de mídia e monitoravam o desempenho das campanhas.
5. Departamento de Pesquisa (Marketing): O departamento de pesquisa conduzia pesquisas de mercado, coletava insights do consumidor e fornecia dados para embasar as estratégias publicitárias. Isso incluía conduzir pesquisas, analisar tendências de mercado e estudar o comportamento do consumidor.
6. Departamento de Produção (Impressão & Audiovisual): O departamento de produção lidava com a produção física dos anúncios. Isso envolvia coordenar com fornecedores, gráficas, fotógrafos e outros fornecedores relacionados à produção para dar vida aos conceitos criativos.
7. Funções de Suporte (Secretariado & Administrativo): Finanças, recursos humanos e operações forneciam os serviços de suporte necessários para garantir o funcionamento fluido da agência.

Projetar produtos físicos, embalagens e anúncios era a principal função do departamento de criação, então, se por alguma razão maluca, telas, softwares e aplicativos já existissem naquela época, isso significa que projetar um produto digital seria um trabalho para o departamento de criação.

Portanto, essencialmente, os designers de UX/UI vêm do mesmo departamento que sempre deu vida criativamente a produtos e anúncios.

A razão pela qual tive que trazer isso à tona é que, antes de se reconhecer como um designer de UX/UI, você precisa entender que é inerentemente um profissional criativo, e esse título é muito maior em dimensão do que o que temos conversado.

Não consigo dizer com certeza quando foi a primeira vez que ouvi falar sobre UX Design. Mas ao checar alguns e-mails antigos, notei que lá em 2015 eu já tinha a audácia de colocar tal título na minha assinatura de e-mail.

Lembro que naquela época eu já havia navegado por muitos tipos diferentes de desafios publicitários, fazendo marcas, cardápios de restaurante, flyers, outdoors, uma quantidade absurda de posts para mídias sociais, adesivos, cartões de visita... talvez a única coisa que não consegui realizar foi a demanda mais inesperada que veio da fundadora de uma das agências onde trabalhei. Ela queria cobrir toda a lateral de um prédio de 30 andares com um banner massivo e gigantesco promovendo nosso maior cliente na época, uma empresa que vendia tinta de parede. Minha primeira pergunta foi: "Como eu poderia projetar um arquivo tão grande? Divido a arte em dezenas de peças diferentes?" Depois de fritar muitos neurônios tentando resolver aquele problema e depois de ter meu Photoshop e meu Illustrator travando de novo e de novo e de novo e de novo e de novo, ela desistiu daquela ideia e eu finalmente pude respirar de novo. (Leslie, se você algum dia ler isso, ainda te devo aquele banner ousado!)

Algum tempo depois, minha primeira demanda de website chegou à minha mesa, mas não existia tal coisa como Figma, Sketch ou Adobe XD, então o Photoshop era minha arma de escolha. Caos! Puro caos. O painel de camadas era impossível de ler, havia pelo menos dez tamanhos de fonte diferentes, a proporção e resolução da tela provavelmente estavam erradas e o arquivo tinha pelo menos 5GB de tamanho.

Ainda assim, havia algo especial na ideia de projetar botões e seções e fazer o mesmo tipo de arquitetura de informação que eu costumava fazer para materiais impressos, mas para um meio digital. Fiquei tão fascinado com esse desafio que UX/UI se tornou o tema da minha tese de graduação.

Era mais ou menos como web design, mas com um toque especial. Don Norman foi o verdadeiro autor que popularizou o termo através do livro "O Design do Dia a Dia" e havia pouquíssimos autores falando sobre isso; um deles era o brasileiro Fabricio Teixeira com seu blog UX Collective.

Muitas funções, métodos e práticas diferentes estavam sendo atribuídos aos UX Designers, mas era bem difícil cravar uma ideia sólida do que realmente era. Na verdade, costumo pensar que é difícil e confuso até os dias de hoje.

Exatamente porque essa disciplina possui uma natureza inerentemente multidisciplinar.

O objetivo fundacional de tal profissional foi mencionado acima; era o mesmo objetivo compartilhado por designers gráficos e profissionais de publicidade: arquitetar a informação, mas não necessariamente com o objetivo de vender algo, e sim primariamente com o objetivo de ajudar um humano a se comunicar com máquinas.

Don Norman me ensinou uma direção bastante clara: Eu precisava enfatizar a importância de considerar a experiência holística dos usuários ao projetar produtos.

Mas o que em nome dos aliens cósmicos uma boa experiência poderia ser?

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.

Muitos detalhes diferentes e às vezes até minúsculos podem fazer a diferença necessária para você realmente aproveitar sua experiência e dizer:

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

Em termos de conteúdo, é apenas uma questão de agregar valor enquanto mantemos você entretido pelo tema.

Mas quando se trata de projetar um site ou software, a complexidade aumenta em pelo menos 10 vezes.

Não será apenas sobre a informação; será sobre a usabilidade; acessibilidade; fluxo do usuário; layout; alinhamento; tipografia; ícones; imagens; visuais; botões; cores; estratégia de negócios; front-end; psicologia e fatores humanos, e então será sobre pesquisa e coleta de dados para que você talvez tenha que descartar 90% do trabalho com base no feedback dos usuários reais, que são dados e não intuição.

Finja por um segundo que você precisa projetar as telas de um aplicativo para uma ideia legal de um fundador legal. Ela vem como um briefing extremamente objetivo: "Quero um aplicativo que torne possível para o usuário acompanhar cada assinatura que ele paga

E agora, o que você faz?

Bom, você rascunha um logotipo provisório, pensa em uma persona de usuário, monta um fluxo de usuário com as telas necessárias, faz wireframes, projeta a interface, escreve o conteúdo e pensa em novas funções úteis que poderiam muito bem se tornar o verdadeiro valor por trás do produto, faz pesquisa de usuário com amigos, tira a foto que vai na tela de login e prototipa as telas com animações sutis.

Quantas funções você executou? A de um fundador ao pensar no modelo de negócios e propor novas features? A de um redator ao escrever todo o conteúdo? A de um fotógrafo ao tirar fotos? A de um designer de UX ao pesquisar e tentar tornar a experiência o mais fluida e intuitiva possível? A de um designer de UI ao fazer tudo parecer fresco e ousado?

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

Bem, você é um profissional criativo multidisciplinar e talvez não perceba o quão importante você é.

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

Porque no final do dia, nada pode verdadeiramente se interpor entre nós e a próxima vez que apertaremos o botão de exportar, ansiosos para mostrar progresso e experimentos.

Escuta, se você chegou até esse ponto, então você é um herói; sua atenção é tão afiada quanto a precisão de um franco-atirador. Mas os usuários não têm essa paciência hoje em dia; a capacidade de atenção das pessoas é tão granular e urgente quanto um grão de areia que desce pela ampulheta a cada milissegundo; se um erro aparece, se o usuário fica preso ou se a estética não é legal e única o suficiente, então você pode perder esse usuário para sempre e talvez nunca saiba o porquê.

Parece complexo, assustador e massivo. Mas não precisa ser, e pretendo provar isso! Ao longo desta série, vou te mostrar que UX/UI não é apenas uma profissão extremamente divertida e exigente, mas também é o lugar mais acessível para começar sua carreira como designer hoje.

Continue por perto, cosmonauta.

Na verdade, vou compartilhar com você qual é a habilidade secreta que apenas poucos designers de UX possuem.

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!