Quando preciso me envolver com os frontenders, uma pergunta sempre vem a tona:
“Como tornar o design dessa tela mais funcional, mais agradável?”
Hoje me surpreendo e fico feliz que essa seja uma preocupação da nossa equipe porque no meu inicio de carreira, “design” sempre foi algo negligenciado por mim e pelos meus colegas.
A justificativa para nossa incapacidade de criar designs funcionais era que todos os usuários são estúpidos!
Sim! Claro! Qual outra razão pode explicar um usuário não entender a ordem exata de botões que ele precisa clicar? Eu pensei nesse fluxograma com todo rigor técnico necessário. Eu estudei e estruturei UMLs e Fluxogramas sobre a funcionalidade. Com certeza ela é à prova de estúpidos. Se o usuário não consegue utilizar é porque ele é burro demais!
Para provar meu ponto, veja a discussão no reddit a respeito da tirinha acima.
Os opositores do movimento da usabilidade afirmam que este se concentra em usuários estúpidos e que a maioria dos usuários pode facilmente ultrapassar a complexidade. Na realidade, mesmo os utilizadores inteligentes preferem perseguir os seus próprios objectivos à navegação em desenhos idiossincráticos. À medida que a utilização da Web cresce, o preço de ignorar a usabilidade só tende a aumentar.
Jakob Nielsen em 3 de fevereiro de 2001. leia na integra
Caso você ainda pense assim, eu te faço um convite. Se desarme, procure onde você guardou a empatia, tire a poeira dela e vem comigo. Esse artigo terá muitos exemplos práticos de bons e maus designs.
Para começar quero iniciar com um clássico exemplo. O desenvolvedor que planejou design usando apenas suas vivências e vieses.
Temos uma funcionalidade onde o usuário pode incluir um video do youtube como parte do material educacional. Nosso desenvolvedor preparou corretamente um campo onde o usuário poderia colar a URL do vídeo e o sistema cuida do resto, prepara uma apresentação bonita, formata o iframe e conecta com a API do Youtube, tudo maravilhoso. Até chegar nas mãos da QA. 🤦🏻
Não é impressionante que o desenvolvedor simplesmente esqueceu que o usuario poderia digitar ao invés de colar? 🤣
Este é um exemplo de “pensar com cabeça de desenvolvedor”. Aqui, mesmo que o design tenha sido o melhor que o dev pensou, o usuário comum foi completamente ignorado, resultando num design ruim.
Vamos para além da “telinha bonita”
O design não se trata apenas da aparência, mas também da funcionalidade, usabilidade, acessibilidade e experiência do usuário. Um bom design pode ajudar a melhorar a experiência do usuário, tornando o produto mais fácil de usar, mais intuitivo e mais agradável.
Um design bem planejado pode aumentar a eficiência, a satisfação do usuário e a confiança do consumidor no produto.
Por outro lado, um design mal concebido pode levar a uma experiência do usuário frustrante e resultar em baixa satisfação do cliente. Isso pode prejudicar a reputação da marca e reduzir a fidelidade do cliente.
Para introduzir este ponto, te convido a entender As Portas de Norman.
As portas de Norman, também conhecidas como portas lógicas de Norman ou portas cognitivas de Norman, são uma teoria desenvolvida pelo psicólogo e cientista cognitivo Donald Norman em seu livro “The Design of Everyday Things” (O Design do Dia a Dia, em português).
Basicamente, Norman explica que as portas de Norman são:
- Uma porta onde o design lhe diz para fazer o oposto do que realmente é suposto fazer.
- Uma porta que dá dicas erradas e precisa de uma placa para explicar seu funcionamento.
A teoria sugere que as pessoas possuem diferentes níveis de habilidade ao lidar com diferentes tipos de portas, como portas que precisam ser empurradas ou puxadas. Norman argumenta que as portas devem ser projetadas de maneira a permitir que os usuários saibam intuitivamente como usá-las sem precisar de instruções explícitas.
Você pode ver um TED talk na integra em que o Norman fala a respeito do seu livro aqui
Se tem placa, tem história!
Em um restaurante que costumo almoçar, reparei que acima de todo porta bandejas existe o seguinte aviso.
Um aviso muito bom, ilustrativo, indicando qual a maneira correta de se usar o porta bandejas. Lembro aqui que estamos falando de um simples porta bandejas ok?
Segundo o que Norman diz, se você precisa de um aviso para explicar o funcionamento de algo, isso significa que seu design foi mal feito!
Se tem placa tem história ou por trás de todo aviso, tem uma história é mais uma dessas regras malucas da internet onde se uma história é presumivelmente verdadeira, tem uma placa comprovando o fato.
Eu consigo imaginar que a razão desse aviso seja porque diversas pessoas desavisadas derrubaram suas bandejas por colocá-las na maldita possição errada!
Um segundo conceito que trago para essa história é que, pessoas não leem! 😬
Imagino que mesmo depois de colocarem as placas, as pessoas continuaram derrubando suas bandejas!
POR…
VÁRIAS…
VEZES…
Como eu sei disso? Depois de algum tempo, os porta bandejas foram “adaptados” para corrigir o problema. 👇🏻
Reparem aqui que a “culpa” não é dos usuário do porta bandejas. Nem tão pouco do restaurante que nem imaginava essa falha de design, mas do designer dessa monstruosidade.
Daí você poderia argumentar que “esses porta bandejas, são padrões, eles são assim mesmo, não existe uma boa razão para alterar o design” etc. Porém eu discordo!
Temos a responsabilidade como criadores de soluções a pensar em designs melhores! Designs funcionais, em que eu posso evitar o constrangimento de uma pessoa em se sentir estupida por derrubar as bandejas.
Desde então, fiquei obcecado pelos porta bandejas, toda vez que visitava um novo restaurante, eu reparava em como eram os porta bandejas.
Eis que então num belo dia, em um restaurante aleatório, me deparo com essa maravilha!
Nesse restaurante, o designer “estreitou” o espaço interno do porta bandejas 😯!!!
Uma alteração simples porém efetiva. Repare que só existe uma orientação possivel para colocar as bandeijas. Temos aqui uma dica clara, quase inconciente de “como usar”. Nesse porta bandeja, se você tentar depositar sua bandeja na posição errada, recebe um sutil feedback assim: “HEY, isso não encaixa desse jeito”, e te da a oportunidade de depositar a bandeja da maneira correta. Genial!
Exemplos de falhas de designs
Uma falha de design pode afetar negativamente a experiência do usuário e tornar as tarefas diárias mais difíceis e frustrantes. Se um produto não é intuitivo e fácil de usar, pode levar mais tempo e esforço para realizar tarefas simples, o que pode aumentar o estresse e a frustração do usuário.
Armadilhas ao inovar sem dar ouvidos aos seus usuários
Nós como desenvolvedores de soluções, somos alimentados pela novidade. Por fazer o diferente. Criar uma solução disruptiva. Romper com os padrões de mercado. TRabalhar com tecnologias novas, saindo do forno!
Nesse tópico eu trago um alerta, tenha cuidado ao “inovar demais”, inovação é um processo importante porém não podemos ignorar completamente o fator humano dessa equação.
Um produto que “inova demais”, sem levar em consideração seus usuários ou público alvo, podem ter dificuldades em obter sucesso no mercado. Isso porque a inovação excessiva pode resultar em produtos que são muito complexos ou difíceis de usar, ou que simplesmente não atendem às necessidades e desejos dos usuários.
Um produto bem-sucedido geralmente é aquele que resolve um problema ou necessidade dos usuários de maneira eficaz e eficiente, oferecendo uma experiência positiva e agradável de uso. Quando um produto inova demais, pode acabar perdendo de vista esses objetivos e, em vez disso, se concentrar apenas em ser diferente e original.
É importante lembrar que a inovação é uma parte importante do design de produtos, mas deve ser equilibrada com as necessidades e expectativas dos usuários. Ao projetar produtos inovadores, os designers devem levar em consideração o público-alvo e suas necessidades, e testar o produto com usuários reais para avaliar sua usabilidade e experiência de uso. Isso pode ajudar a garantir que o produto seja inovador, mas também útil e atraente para o público-alvo.
Uma empresa exemplo no quesito “inovação” é a Tesla. A Tesla é uma empresa referência em inovação por diversos motivos
Carros elétricos
A Tesla é conhecida por ser uma das primeiras empresas a produzir carros elétricos em larga escala e com alta autonomia de bateria. Essa inovação tem sido cada vez mais importante, já que a preocupação com o meio ambiente e a sustentabilidade tem crescido nos últimos anos.
Automação e condução autônoma
A Tesla tem investido em tecnologias de condução autônoma e automação de seus veículos, o que pode tornar o transporte mais seguro e eficiente.
A empresa tem sido pioneira em muitas áreas e tem demonstrado um compromisso com a sustentabilidade e a tecnologia limpa, o que tem atraído um grande número de fãs e seguidores em todo o mundo.
Em seguida eu convido você a ver esse vídeo sobre o que os caminhoneiros tem a dizer sobre o seu novo produto. O caminhão elétrico da Tesla. 👇🏻
Beleza vs Funcionalidade
Já há alguns anos, eu acompanho na internet um músico suéco chamado Martin Molin. Martin ficou conhecido no YouTube após publicar um vídeo em 2016 mostrando sua incrível invenção, a Marble Machine, tocando uma música original chamada “Marble Machine”. O vídeo se tornou viral rapidamente e chamou a atenção de milhões de pessoas em todo o mundo. A máquina musical de Martin é uma espécie de instrumento mecânico, composto por um grande número de peças móveis, como engrenagens, eixos, roldanas e outros elementos, que são controlados manualmente por Martin enquanto ele toca a melodia em um teclado. O vídeo mostrava a máquina em ação, enquanto Martin tocava a música, com as pequenas bolas de gude sendo movidas pela máquina e produzindo sons enquanto passavam por diferentes partes do instrumento. O vídeo foi muito elogiado pela criatividade, originalidade e habilidade do Martin, e rapidamente se tornou um sucesso no YouTube, ganhando milhões de visualizações em poucos dias.
Desde então, ele tem se dedicado a criar uma versão da “marble machine” que poderia participar de uma turnê mundial. E tem aprendido com todo o processo.
No vídeo abaixo ele explica que desistiu de só tentar construir e que agora tentará montar um bom design, antes de fazer uma nova tentativa, e se ele não for capaz de criar um bom design, ele desiste para sempre dessa ideia!
Muitas vezes, vestimos o complexo de Deus e ficamos maravilhados com nossas criações. Belas porém completamente inúteis!
Adoramos o código que faz ✨to many magic✨ e interfaces lindas que usuários não conseguem entender.
Como esse “espremedor de suco” aqui 👇🏻
Conclusão
Em resumo, você precisa se importar com design porque uma interface bem projetada é fundamental para o sucesso do produto, e porque um entendimento básico de design pode melhorar a eficiência e a colaboração com outros membros da equipe.
Seja o primeiro a comentar