Resumo
- A inteligência artificial (IA) está sendo cada vez mais adotada em vários setores, incluindo UX / UI, que tem o potencial de gerar uma ampla gama de opções de design de forma rápida e eficiente, ajudando a estimular a criatividade e informar as escolhas de design.
- Plataformas como a Midjourney oferecem ferramentas baseadas em IA para geração de imagens, incluindo designs de interface do usuário.
- Experiência prática com o Midjourney mostrou que ele pode gerar designs de interface do usuário visualmente atraentes, mas há limitações em termos de atenção aos detalhes, acessibilidade e funcionalidade, e uma completa falta de UX.
- Os projetos gerados por IA podem ser usados como ponto de partida para projetos rápidos ou usados como referências para projetos mais complexos, mas um toque humano ainda é necessário para uma melhor experiência do usuário.
- Saber como equilibrar o uso da IA com um processo adequado de UX / UI pode resultar em grandes projetos.
A inteligência artificial (IA) vem deixando sua marca em diversos setores, com aplicações que vão desde a geração de conteúdo até a criação de voz e vídeo. À medida que mais e mais indústrias adotam essa tecnologia de ponta, a maneira como pensamos sobre as possibilidades está evoluindo. No entanto, muitas questões surgem a partir dele, de preocupações éticas a medos de perda de emprego.
Nas últimas semanas e meses, a IA também entrou no mundo do UX/UI design, com muitos designers se perguntando se poderia ser uma ferramenta viável para gerar ideias de design e simplificar fluxos de trabalho, e outros criticando o uso da IA e suas preocupações que isso poderia causar para a nossa área.
Pelo lado positivo, um dos principais benefícios do uso da IA no design da interface do usuário é desbloquear uma infinidade de novas oportunidades como nunca antes, com sua capacidade de gerar uma ampla gama de opções de design de forma rápida e eficiente. Isso pode ser especialmente útil ao iniciar um novo projeto e tentar ter uma noção da direção que ele poderia tomar.
Ao alimentar conceitos e estilos de design em um sistema de IA, designers podem obter um conjunto diversificado de ideias e inspiração que podem estimular a criatividade e ajudar a informar suas próprias escolhas de design. Sites, landing pages, dashboards, aplicativos móveis - há muitas possibilidades a serem descobertas e geradas, e já estamos vendo muitas pessoas usando essas ferramentas para a interface do usuário.
Esta tecnologia está permitindo que designers explorem novos horizontes, gerem um número quase infinito de possibilidades e lhes deem a liberdade de criar como nunca antes. Com a IA, parece que o céu é o limite. Ou talvez não?
Nossa experiência prática gerando interfaces de usuário com IA
Uma plataforma que oferece ferramentas baseadas em IA é o Midjourney, um canal do Discord aberto ao público onde você só precisa digitar uma descrição ou comando e a IA gera diferentes versões para você.
Ele não é exclusivo para UI, pode ser usado para qualquer tipo de geração de imagem, como fotos ultrarrealistas, ilustrações, imagens de fantasia e até mesmo imagens como logotipos. Na verdade, a geração de interfaces ainda é uma pequena parte do que é gerado, principalmente porque só foi possível depois que sua nova versão 4 elevou a poderosa ferramenta a um nível totalmente novo.
Tivemos a oportunidade de usar o Midjourney e ficamos impressionados com a conveniência e flexibilidade que ele oferece. Depois de algumas tentativas tentando entender o que seria um bom comando para alcançar ótimos resultados, conseguimos gerar alguns UI designs impressionantes e visualmente atraentes gerados apenas digitando algumas palavras.
Testando com sites simples
Primeiro tentamos um portfólio simples online para fotógrafos e escolhemos um dos gerados para avançar:
Como pode ser visto, a ferramenta de IA pode gerar uma interface visualmente atraente, no entanto, não se concentra em detalhes. Botões, pequenos elementos e, especialmente, texto são deformados, tornando a interface inutilizável do jeito que está. Não espere que ele entregue uma interface pronta para uso, não pode e não será uma boa interface.
No entanto, os resultados são interessantes e úteis para iniciar o projeto, considerando que ele precisará de algum trabalho para ser uma interface funcional.
Em seguida, replicamos no Figma para entender qual seria o processo de usar sites gerados por IA para um projeto real - este é o primeiro estágio em que um ser humano precisa entrar no processo.
Nosso foco era criar uma interface semelhante, mas notamos que alguns elementos ainda não eram tão intuitivos, e é aqui, novamente, onde um ser humano deve intervir e entender o que é necessário para uma melhor experiência do usuário.
Criamos uma segunda versão, apenas brincando com alguns elementos, tornando o seletor de categoria mais intuitivo - não estava claro se era um seletor de categoria e quais eram as outras categorias.
Embora tivemos que fazer algumas mudanças, achamos que o Midjourney fez um ótimo trabalho com uma interface simples, como um portfólio. Em casos como este, ele poderia ser usado como um começo para projetos rápidos.
Porém, quão bom seria em diferentes projetos? Decidimos ir para algo um pouco mais complexo, pois estávamos certos de que não forneceria um design quase pronto para uso.
Um site um pouco mais complexo
Pedimos um site de escola de idiomas solicitando uma paleta de cores específica e geramos várias alternativas que foram muito interessantes. Os resultados foram muito agradáveis e incluíram as cores que pedimos.
No entanto, nenhum dos sites gerados poderia ser usado como base inicial, uma vez que o conteúdo não seria o que a ferramenta de IA gerou. Para este projeto específico seria muito diferente da imagem gerada e, como sabemos em UX / UI, o conteúdo é rei e a interface precisa se encaixar no conteúdo, e não o contrário. Este é o caso em que as imagens da interface geradas pela IA seriam usadas como (boas) inspirações ao criar um mood board, mas não como base para o primeiro rascunho.
Gerando um redesign de um site com muito conteúdo
Para testar outra possibilidade, usamos um site existente, www.culturainglesa.com.br, para ver a extensão das capacidades do Midjourney de duas maneiras: se a plataforma pode usar uma imagem como referência e produzir um bom resultado a partir dela; se ele pode replicar a página como mencionado, fazendo com que a interface se encaixasse no conteúdo.
Os resultados de várias tentativas com diferentes prompts podem ser vistos abaixo - impressionante de qualquer forma, ele pegou um pouco a essência e usou o preto e o vermelho da marca, no entanto, é claro que ainda falta uma visão mais humana, ajuste de conteúdo e conformidade com a marca também - ele usou um amarelo e verde que não fazia parte do site original, mas foram incluídos nas fotos.
Reunimos pontos de destaque das opções mais interessantes e projetamos uma versão rápida usando o conteúdo original e as cores corretas da marca:
No geral, achamos que isso nos ajudou a criar uma interface visualmente atraente, servindo como uma inspiração original durante o nosso processo de mood board, e economizando tempo. No entanto, demorou mais do que apenas replicar a interface, como fizemos com o portfólio do fotógrafo.
Em casos como esse, é válido usar imagens geradas por IA como referências para o trabalho do designer, em vez de uma ferramenta rápida para gerar interfaces finais.
Levando a IA aos seus limites - uma interface do usuário mais complexa para uma dashboard
Em um último teste, decidimos ver como ele lidaria com uma interface mais complexa para um produto digital, então pedimos para criar uma dashboard de uma fintech, incluindo informações como cartões de crédito, transações e botões de ação rápida. Obtivemos resultados visualmente impressionantes na primeira tentativa:
Os resultados foram muito próximos do que se esperava: uma bela dashboard que pode facilmente ir para um mood board de aplicativo de fintech.
No entanto, aqui é onde a UX está muito prejudicada
- Falta de acessibilidade em vários elementos: elementos que têm uma relação de contraste muito baixa que os torna difíceis de ver e ler os textos
- Perda de foco: em algumas partes tem muita informação acontecendo
- Não há fluxo de usuário para fazer uma avaliação adequada de como, onde e se os elementos podem ser apresentados.
Vemos novamente o quão importante é necessário um processo adequado de UX para dar vida a essas interfaces geradas por IA. Um designer pode entender o ponto problemático dos usuários e suas necessidades, a fim de planejar o projeto com personas, fluxos de usuários, mapas da jornada do cliente e outras ferramentas que guiarão o trabalho em direção a uma interface de usuário mais intuitiva.
Mais interfaces geradas por IA
Benefícios e limitações da IA para UX/UI Design
Como acontece com qualquer ferramenta de IA, ela não pode entender completamente ou replicar as nuances e complexidades do design centrado no ser humano. Os projetos gerados por essas ferramentas não estão necessariamente prontos para uso como estão e devem ser vistos como um ponto de partida e uma fonte de inspiração, em vez de um substituto para o trabalho e o julgamento humanos.
É importante lembrar que o UX/UI design tem tudo a ver com a criação de uma experiência perfeita e intuitiva para o usuário. Isso significa que o design deve ser adaptado às necessidades, motivações e comportamentos do público-alvo que interagirá com ele, o que um sistema de IA não pode compreender ou antecipar.
Cabe ao designer trazer um toque humano, empatia e compreensão para o processo de design, usando sua própria experiência e julgamento para tomar decisões de design informadas. Somente por meio de pesquisa, testes e feedback do usuário você pode coletar insights sobre o que funcionará melhor para eles.
A capacidade de qualquer ferramenta de IA de gerar resultados precisos também depende da sua capacidade de descrever o que você quer com as palavras certas. Tivemos que tentar vários comandos diferentes para começar a ter uma ideia de como escrever bons comandos. E mesmo assim, a cada nova ideia que surgiu, tivemos que fazer mais tentativas até ficarmos satisfeitos com os resultados.
Outra limitação é a impossibilidade de extrair elementos e imagens das imagens geradas por IA, pois não são separados, você recebe um arquivo de imagem PNG. Na maioria das vezes, mesmo com projetos simples como o portfólio do fotógrafo, designers precisam usar outros elementos ou até mesmo tentar gerá-los separadamente, por exemplo, uma imagem de fundo de banner.
Designers precisam aprender como e quando usar a IA
As ferramentas de IA devem ser vistas como um complemento ao processo de design, ajudando designers a explorar uma gama mais ampla de opções e possibilidades antes de aprimorar a direção do design. Não vai tirar nossos empregos (pelo menos por enquanto), mas abraçar essa nova tecnologia requer um senso crítico.
Para criar designs verdadeiramente eficazes e centrados no usuário, designers devem sempre estar sintonizados com as necessidades e comportamentos de seu público-alvo, usando uma combinação de pesquisa, testes e sua própria experiência para orientar as decisões de design.
Desde que estabeleçam um equilíbrio entre a conveniência e a eficiência de ferramentas de IA como o Midjourney e as perspectivas e insights exclusivos dos usuários humanos, designers podem criar designs verdadeiramente eficazes e centrados no usuário.
No geral, nossa experiência com o Midjourney foi positiva e achamos que pode ser uma ferramenta poderosa e um recurso valioso para ajudar designers com tarefas específicas, desde com cautela e não dependendo muito delas.
Também está claro que não está nem perto do fim de nossos empregos, uma vez que existem várias limitações que podem não ser resolvidas em breve - ou possivelmente nunca? Sabe-se lá.
obs.: o banner também foi criado pelo Midjourney 🙂
Já se perguntou como melhorar a experiência do usuário do seu produto digital? Como deixá-lo mais intuitivo e fácil de usar, convertendo mais e retendo mais usuários?
O design da experiência do usuário é uma disciplina cujo foco é a criação de uma experiência acessível e agradável para os usuários de produtos e serviços digitais. É um campo vasto com muitas nuances, mas muitas vezes é simplificado demais pelo público em geral na forma de conselhos como “Basta colocar um rostinho bonito no seu site!”
A melhor experiência do usuário não vem de um algoritmo que analisa dados e descobre a melhor forma de atender seus usuários. Em vez disso, resulta de um bom conhecimento dos usuários e da maneira como eles interagem com a tecnologia. É necessário entendê-los. Ao entender suas necessidades, hábitos e objetivos, você cria uma melhor experiência do usuário.
Dito isto, a experiência do usuário não é puramente sobre tecnologia, você precisa considerar a jornada do usuário. Isso significa saber qual é o ponto de partida do usuário e quais são seus objetivos.
Com a experiência do usuário, você também deve pensar em como os usuários se sentem ao usar seu aplicativo. Eles se sentem confortáveis e bem-vindos? Ou eles se sentem distraídos, frustrados ou irritados?
Aqui estão algumas dicas sobre como criar uma melhor a experiência do usuário.
Comece por entender as necessidades e demandas de seus usuários com uma pesquisa de UX
A melhor maneira de começar a melhorar o UX do seu produto é focar no usuário que o utiliza antes que qualquer design e implementação sejam feitos, seja para iniciar um novo produto digital ou para melhorar um já existente.
Se você não sabe o que seus usuários querem e precisam, o produto final provavelmente será inferior. Estude seu público-alvo para obter informações sobre o que eles desejam para poder desenvolver uma interface especificamente para esse público.
Isso pode ser alcançado realizando uma pesquisa de UX para coletar dados e particularidades sobre o que as pessoas querem e precisam do seu produto, como elas interagem com a interface e seu comportamento ao longo da jornada do usuário dentro do produto digital.
Uma pesquisa de UX pode envolver um questionário, grupos de foco, testes de usuários ou entrevistas para coletar informações sobre seus dados demográficos, comportamento e problemas que enfrentam. Os dados são priorizados de acordo com o que é mais incômodo para os usuários e usados para informar e auxiliar na tomada de decisão para os produtos e propor soluções adequadas.
Conduza uma Auditoria de UX
Enquanto isso, uma auditoria de UX é um processo de inspeção e avaliação do design de um produto existente. Basicamente, um mergulho mais profundo em seu produto digital. É uma análise sistemática da experiência do usuário com o objetivo de identificar áreas de melhoria e alinhar os designers com a estratégia certa.
Ela ajuda a entender como as pessoas usam seu produto e como elas se sentem sobre ele, descobrindo possíveis problemas e sugerindo possíveis soluções. Uma auditoria de UX é uma ótima maneira de dar uma segunda olhada no seu produto e ver o que pode ser melhorado em termos de UX.
Uma boa Auditoria de UX ajudará você a criar um produto que as pessoas adoram usar.
Mantenha a simplicidade, foque na funcionalidade
Ao projetar uma interface para um produto, é importante mantê-la simples. A ideia de simplicidade no design para um UX melhor não é apenas fazer menos, mas fazer o que é importante, ser objetivo e fornecer informações e orientações diretas em uma interface limpa que orientará os usuários a atingir seus objetivos.
Quanto mais simples for uma interface, mais fácil será para os usuários navegarem e menor será a probabilidade de rejeição. Por isso, é importante se concentrar no conteúdo e na funcionalidade, em vez de focar-se nos elementos meramente visuais. Eles também são importantes, uma interface visualmente atraente ajuda a criar confiança e expressar profissionalismo, mas são mais como um complemento.
É importante entender que simplicidade não é o mesmo que design minimalista. Com certeza ele pode ser usado se estiver de acordo com a aparência geral, mas também podemos alcançar a simplicidade criando uma atmosfera livre de acumulo de informação, tirando o que não agrega valor à interface. Aumentar o espaço em branco também é útil para a legibilidade e é mais rápido e fácil encontrar o que os usuários precisam.
Acessibilidade
Acessibilidade significa garantir que qualquer pessoa possa usar seu produto, independentemente de suas habilidades físicas ou cognitivas.
Com o aumento de pessoas com deficiência e o uso geral da internet, onde 67% da população mundial tem acesso à internet, a acessibilidade tornou-se uma expectativa padrão em produtos digitais.
Algumas mudanças simples podem fazer uma grande diferença para muitas pessoas. Ao fazer pequenos ajustes você pode criar uma experiência verdadeiramente acessível para todos. Legendas de imagens e textos alternativos, por exemplo, podem fazer com que os deficientes visuais entendam o que é mostrado na imagem pois o leitor de tela irá ler os textos inseridos como descrição do que a imagem representa.
Documentos existentes como o WCAG 2.0 (Web Content Accessibility Guidelines) do W3C (World Wide Web Consortium) ou a Seção 508 do ADA (Americans with Disabilities Act) fornecem recomendações sobre como criar sites e aplicativos acessíveis.
A falta de acessibilidade é até caso para ações judiciais. Nos EUA, as Diretrizes ADA mencionadas anteriormente são um requisito para a maioria das empresas. Não estar em conformidade com a ADA pode levar a ações judiciais. Milhares de processos estão sendo apresentados todos os anos e isso pode significar de 10 mil a milhões em perdas.
Mantenha a consistência do design ao longo da jornada
Quando projetar seu produto, é importante continuar com determinados padrões no fluxo do usuário. Elementos, cores, fontes, textos, ícones, interações e aparência geral devem ser homogêneos e se repetir em todo o produto. Isso cria uma experiência coesa para seus usuários e permite que eles naveguem pelo seu produto com facilidade.
A consistência do design proporciona uma sensação de familiaridade e conforto ao usuário e reduz as chances de se perderem. Evita ter que reaprender um padrão para conteúdo semelhante e ficar confuso, melhorando a usabilidade geral.
Fazemos isso definindo um sistema de design escalável logo no início do projeto, mantendo a consistência dos elementos mesmo que sejam modificados posteriormente. É mais fácil expandir o produto futuramente também.
A aplicação das práticas mais recomendadas para interfaces também ajuda os usuários a reconhecer padrões amplamente usados que já foram validados extensivamente. É uma maneira de começar com o pé direito, especialmente se você, por qualquer motivo, não puder fazer uma pesquisa de UX antes de projetar a interface.
Peça feedback ao usuário
Sem saber o que os usuários estão experimentando ao usar seu produto, não há como melhorá-lo. Se eles tiverem uma experiência ruim e não tiverem como te contar sobre isso, você pode perder o usuário e nem saber o porquê.
Existem várias maneiras de pedir feedback e tudo depende de como eles usam seu produto, mas o mais importante é pedir rapidamente. Tenha uma ferramenta de feedback dentro do produto ou pergunte quando o usuário está saindo ou depois de algum evento especifico, como por exemplo após finalizar uma jornada como uma compra na loja virtual. Só o fato de você estar pedindo feedback mostra que você se importa com a experiência do usuário.
O custo para adquirir um cliente é muito maior do que manter um. Porém, pedir feedback é gratuito e uma das maneiras mais fáceis de melhorar a experiência para manter os usuários satisfeitos.
Conclusão
UX design é um campo em crescimento que está em constante evolução. Há muitas maneiras de melhorar a UX para o seu produto digital, e provavelmente a maioia delas é preciso um time de especialistas para implementá-las.
A Pengreen Design é especialista em melhorar a usabilidade de produtos digitais e pode realizar uma Auditoria de UX para seu produto digital. Ajudamos as empresas de desenvolvimento de software a reduzir suas frustrações com taxas de conversão ruins e baixa satisfação dos clientes, entendendo o comportamento dos usuários e fornecendo o conteúdo certo que eles precisam e esperam. Nossa equipe de especialistas pode analisar seu produto digital e identificar possíveis problemas que podem estar afastando os clientes.
Por conta da pandemia, a Alemanha estava oferecendo o dobro de incentivos para compras de carros elétricos, e para aproveitar, um alemão queria trocar seu Ford Kuga por um Tesla Model 3 com piloto automático, o modelo de entrada da montadora de Elon Musk.
O senhor então prosseguiu com a compra, adicionou seu dados e cartão, e clicou em confirmar para fazer o pedido à Tesla. Porém nada aconteceu, o botão continuou da forma que estava, nenhuma mensagem foi mostrada, nada diferente que pudesse indicar que o pedido estava sendo processado ou até mesmo que já tinha sido feito ou negado. Por conta disso, ele clicou novamente, já que podia simplesmente não ter ido. E novamente, e assim por outras 27 vezes durante um período de duas horas - que pessoa persistente!
Após as várias tentativas, finalmente o site deu sinal de vida e processou o pedido - porém não apenas um, mas todas as 28 tentativas, totalizando 1,4 milhão de euros pelos 28 Teslas Modelo 3. Não apenas isso, mas caso o alemão pedisse pra cancelar os 27 pedidos extras, ele ainda sim teria que desembolsar 100 euros por cada cancelamento, totalizando 2700 euros a mais do que apenas os 100 euros de depósito esperados pelo pedido de apenas um carro.
Este é um claro erro em fornecer uma boa experiência do usuário e infringiu duas heurísticas de Nielson.
- A primeira é evitar que o usuário cometa erros. Ao clicar em um botão que envia informações para processamento, imediatamente deve-se desabilitá-lo para não ser clicado novamente.
- A segunda é sempre e rapidamente informar o status do sistema através de feedbacks claros. Após o botão ser clicado é necessário informar ao usuário que o site está processando as informações e pedir para que não feche a tela para evitar erros.
Há erros também no processamento que não afetam diretamente na UX porém, como visto, afeta indiretamente. A lentidão em processar o pedido e a falha ao permitir que fossem processados os outros 27 pedidos sem que nenhum retorno tivesse sido dado para o primeiro também foram determinantes para o erro humano.
Isso mostra que equipes de design e desenvolvimento devem trabalhar juntos para evitar situação como essa.
No final, o alemão ligou desesperado para a empresa e, entendendo o erro acontecido, a Tesla reembolsou os 2800 euros pelo depósito obrigatório e convidou o homem a fazer seu pedido novamente.
A questão é: ele vai comprar novamente depois dessa falha? A confiança é destruída e o cliente foi perdido?
Precisamos evitar que esse tipo de erro ocorra em primeiro lugar, em vez de corrigí-lo mais tarde. O custo será mais alto, com certeza, não apenas em desenvolvimento interno para arrumá-lo, mas a perda em faturamento e de consumidores, além de ter que reparar a reputação que foi afetada. Uma boa estratégia de UX e um design de produto bem conduzido podem evitar muitos problemas triviais como esse.
Veja mais exemplos de UI problemáticas
Quer saber se o seu site apresenta falhas de UX?
Problemas de UX são mais comuns do que podemos imaginar e alguns deles não vemos, a menos que aconteçam. Pengreen Design tem uma equipe de designers especialistas prontos para ajudá-lo. Estamos listados em Best Tech Websites Of 2020 (So Far).
Desbloqueie todo o potencial do seu produto digital com nossa Auditoria de UX! Uncover hidden design flaws that might be hindering your product's success, some of which you may not even be aware of.
First off, user experience design is not the same as or similar to marketing and vice versa. Actually, many times UX professionals even work against marketers and the last ones also go against the first ones sometimes. Personally, I already had a tough relationship with a marketer who wanted to sell at any cost and disregarded my UI/UX considerations, but this is part of the job and we need to understand both sides to accomplish a successful project.
Yes, they have points in common. To an extent, both have an ultimate goal of increasing conversions or keeping current users faithful to the service/product, both help the business and both need a deep analysis of human behavior to draw a good strategy. They do not exist without people's input. But they have many (and important) distinctions regarding the ways to achieve these mutual goals.
Users VS Metrics, Satisfaction VS Revenue - It's a tough balance. And they MUST work together in order not to jeopardize the other.
Let's first understand the concepts:
User Experience (UX)
Consists of researching the users' behavior and improving the experience they have by creating the best, most intuitive, easiest-to-use interface, where the flow is consistent and clear (and just an addendum, it does not apply only to web and mobile interfaces, this can be applied to the installation of a product, for example). The primary goal is to design with the user in mind, which eventually leads to the secondary goal (and kind of primary to who is paying the bill): to improve the conversions or keep users faithful to the service/product by providing a pleasant experience.
"User Experience encompasses all aspects of end-user interaction with the company, its services, and its products."
Don Norman and Jakob Nielsen
Marketing
It's the art of selling. The main goal is to increase conversions and consequentially, increase the revenue. To do that, marketers have to persuade people to buy the product or service, they use seducing ads, many times hiding important information and exaggerating the qualities.
"Marketing is a question of persuading, seducing and attempting to manipulate people into buying products and services."
Wally Olins
In summary, both must understand people's psychology, but marketing treats people as potential customers and it is not much concerned about their experience - more about selling -, and UX treats people as users and cares about their satisfaction. And that difference is problematic.
When the problems start and how they should help each other
UX endlessly states that a good user experience should not confuse or trick the user, it should give all the information to the user and always provide clear instructions and paths so the user can choose what he wants to do with a full understanding of the content and consequences without surprises or frustrations.
UX should never take advantage of the lack of or misleading information. These strategies are often in marketing to try to trick users with the ultimate goal of SELLING - nothing wrong with selling, we need it, but there is a thin line between white-hat selling and black-hat selling.
A marketing campaign with a heavy selling goal can jeopardize the user experience by applying dark patterns. Dark patterns are strategies that aim to persuade people into doing something they don't fully understand and may not even consciously want to do.
Examples of that can be: adding the user to a mailing list without consent (which is now illegal in many countries of the world, such as the whole of Europe, the USA, Brazil, etc.), seducing the user to buy a product without more information to a rightful and thoughtful decision, making customers to buy extended warranties or upselling products without proper or misleading information of them, etc.
Dark patterns can cause some controversial discussions. Sometimes it's hard to say if something is or isn't a dark pattern, and people can have different views - it's a thin line separating dark patterns and good patterns.
Regardless of marketing strategies, developing a project that does not take into account the user can bring more harm to the company image than conversion. If the user has a bad experience before or after becoming a customer or falls short of what is promised when trying to use the product or service, or if they have somehow been deceived or have not given consent for some kind of extra service, they can get frustrated and the efforts to attract and keep a user will be wasted and will not have a sustainable return.
Even worse, this can create a bad reputation that will be difficult to reverse. The loss of irresponsible marketing without taking into account the user experience can be immense and leave damages of difficult and expensive repair.
At the same time, UX professionals need to understand the company and its goals. They need to understand what intrinsic value the company wants to pass to the user, who is the target audience, and develop an interface that matches that without damaging the user experience.
UX without business values is like a meticulously designed ship without a compass. It might be sleek, efficient, and well-crafted, but without a clear direction tied to the business's values, it risks drifting aimlessly in the vast sea of possibilities. Just as a compass guides a ship to its destination, aligning UX strategy with business values ensures a purposeful and successful journey for the digital product in the dynamic market landscape.
For all that to happen, it's essential to have clear communication between both teams to express the objectives that both teams have and the planning of those goals. Thus, the UX professional can offer the most viable options according to the information given by the marketers to obtain the desired result, always, of course, respecting the basic concepts of UX.
Basically, they must complete each other. UX should help marketers to make users convert more without making UX mistakes. Marketers should help UX professionals to understand how (and where) to lead the user to the desired goal by communicating the values of the company's products and services.
Do you want a team that knows how to work with business goals?
We have worked for years with marketing agencies and teams and we know how to balance a good estratégia de UX to make any product succeed and avoid UX pitfalls. Pengreen Design is among the Top Web Design Agencies Of 2020 according to DesignRush.
1) "Recommended view" limiting how the user should view the interface.
Responsive Web design consists of designing and developing interfaces to respond to the user's device based on screen size, platform, and orientation.
Not on this website. It asks the user to rotate the device to a landscape orientation instead of presenting the website nicely in portrait orientation.
Not enough to limit the orientation, when the website is finally shown after rotating the smartphone, the user is presented with a bad interface, clearly not optimized for mobile.
Solution
Don't ever ask the user to adapt to your interface, your interface is the one that must adapt to the user's device.
Optimize it to EVERY possible device, orientation, and platform.
2) Primary and secondary button styles got wrong
When two or more buttons are close to each other with different priorities, we need to differentiate them. As a best practice, we can use two options:
- The primary button has the interface's primary color, which usually is a very striking or different color from the rest of the elements, and the secondary button has a less striking color, even gray in some cases.
The primary button has a background color whilst the secondary only has borders (which is debatable regarding ghost buttons, but this will be discussed in another post).
In this interface, they did the opposite for #2. The "finish" button, which should be the primary with the background only has borders. Whilst the "cancel" button which should be the secondary button has the background. The user can wrongly click on the "cancel" button without reading it properly thinking it's the "finish" button.
Solution
Follow best practices to show very clearly to the user which button is primary and which is secondary.
3) Content that's loaded after the interface is ready.
Sometimes we need to load content after the whole site is already there. But if that new content pushes everything down when being placed, you have a UX problem here.
Since the interface is already loaded, the user might be in the middle of an action, a click, a drag and drop. Having the content pushed down might cause unexpected behavior if the user clicks somewhere at the same moment that the new content appears.
The example below shows a shopping cart after adding a product. The e-commerce then loads related products on top of the cart after the content has already been loaded. If the user tries to change the quantity of the first product in the cart right at the moment that the related products are being loaded, it ends up clicking on one of them and going to the product page, frustrating the experience of buying that first product (Yeah, I did that many times, I always forget to wait for the related products, but this shouldn't be an issue the user needs to deal with).
Solution
Either load everything together or leave a space beforehand where the new content will be loaded to avoid pushing the content down.
4) Ask the user not to do something.
No, no, no. A big no-no. Never rely on the user's good behavior to avoid errors. The interface itself MUST avoid users' errors.
In this example, which is a WordPress plugin to backup and restore content, it asks the user not to click on the button until the restore is done, but leaves the button there! If the button is pressed, it can break the whole website. That's a very bad UX, it relies on the user not to break their own website! Even a wrong click can cause a mess. And if the person who is doing it is a layperson, they will have to hire a developer to fix the website.
Solution
Keep the warning not to close the browser, but remove or disable (and style them as such) the buttons that can cause error after a dangerous action begins and add an alert if the user closes the window/browser informing that some action is taking place and it's not recommended to close the browser.
P.S. Unfortunately, we can't totally block the user from closing the window/browser in cases such as this, as part of a security policy implemented by browsers, but we can at least warn users of the risks.
Update: updraft released a new version of this interface and now it's a lot more intuitive and it avoids such errors by removing the button off the screen.
5) Mislead user into paying more
Here in Brazil purchasing in installments is very common, with or without interest clearly shown to the user.
On the app below, it shows first the value of R$ 20 in 3 installments (3 x R$ 7.37 = R$ 22.11, so you're paying R$ 2.11 in interest). The user has then the option to change to 1x without interest. But if the user makes any other change like changing the credit card to pay or adding a promo code, it comes back to 3 x R$ 7.37. If this change is not noticed, the user ends up paying more than they wanted to pay.
When you click to pay, a popup will appear offering a prime service for R$ 9.99 a month, with the option already selected. Many users have complained on Google Play and Apple Store about the R$ 9.99 fee they didn't want due to their mistake of not realizing the option was already selected.
Solution
Don't try to fool your users, have the interface follow the natural and intuitive way, do not pre-select options that will increase the cost for users, and never try to earn more by hiding fees or changing something users already selected how they want.
Avoid bad sales practices, they will hurt your reputation badly and will cost way more than what you're earning with those bad practices.
Bonus: Confusing arrows
Well, UX is not only digital, it's everything that communicates with your customer.
This one I saw the other day when in a department store in town.
In the store fitting room, you're presented with three options: Women, Men, and Kids. But the arrows are all to the floor! A woman can be confused if she should go left or right there because even though the arrow is positioned at the right of the text ("provador feminino", "women fitting room" in Portuguese), it's not clear that's the right side, especially since the arrows are slightly turned to the left.
Worse, no one was using the fitting room, so the customer didn't even have a reference to follow a side since both were identical.
Solution
Don't try to create something "cool" to impress users ending up forgetting the UX. Get your arrows straight in the right direction.
Worried about bad UI patterns?
Pengreen Design has an experienced team that offers design solutions for businesses to avoid bad UI patterns. We are also featured as one of the Top Mobile App Development Companies e Top Cross Platform Mobile App Development Companies.
Let's talk about a Auditoria de UX and discover if your product has UX flaws
Não, designers não precisam necessariamente codificar. A menos que queiram se aprofundar nesta área, principalmente designers de interação, não é necessário que saibam codificar do zero uma interface. Mas é extremamente necessário entender o básico. Afinal, a interface é o elo entre a máquina e todo o funcionamento interno com o usuário leigo, portanto ela tem que falar ambas as línguas.
Os pontos principais que um designer precisa para pensar para melhorar seus trabalhos são:
Entender a estrutura: como meu design vai ser implementado? Em grid? Quantas colunas? Posso colocar um elemento num local específico?
Entender o responsivo (web) ou adaptativo (aplicativo móvel): Quais são os tamanhos de tela mais usados? Quais são as limitações de um smartphone? Como funciona os modos horizontais e verticais dos smartphones e tablets?
Work with technical possibilities and impossibilities: O que posso fazer? Não posso fazer? Isso é viável de ser implementado? Quais as consequências de implementar isso, vou atrapalhar a experiência do usuário para conseguir implementar o que eu projetei? Vou aumentar drasticamente o tempo de desenvolvimento?
Eficiência ao desenvolver:O que posso fazer de diferente que irá entregar a mesma experiência - ou até melhor - mas deixar o desenvolvimento mais eficiente?
Os benefícios são percebidos por todos os envolvidos:
- Desenvolvedores: Eles vão agradecer ter uma interface feita com o código em mente, pois isto agiliza seu trabalho, não precisam implementar soluções diferentes que possam a causar bugs e alongar o projeto. Além disso, há menos possibilidade de de recair a culpa neles por não desenvolver como foi projetado.
- Usuários finais: a experiência destas pessoas será muito próxima àquela pretendida pelos designers, pois as diferenças entre o projeto gráfico e a entrega após o desenvolvimento diminuem e muito.
- Contratante: mais agilidade para receber o projeto, melhor retorno por entregar a experiência pretendida, e menos stress, tudo isso gera custos menores para quem solicitou o serviço.
Bônus: é possível assim desenvolver uma interface menos remendada e mais ágil, o que facilita futuros trabalhos e ajustes.
Resumindo
Mais rápido, mais limpo e melhores resultados no desenvolvimento, e uma experiência mais agradável para o usuário final.
Aqui na Pengreen Design, todos os nossos designers desenvolvem ou sabem o básico de desenvolvimento para que as interfaces sejam as melhores possíveis.
Gostaria de contar com uma equipe com designers experientes que desenvolvem as interfaces com o código em mente para que você terceirize o trabalho de design tenha um projeto eficiente? Conte com a gente! Somos reconhecidos como uma das principais empresas de design de experiência do usuário pelo DesignRush, seu projeto estará em boas mãos.
EN-US
PT-BR