Deseja aprender um dos princípios que o Airbnb usa para encantar seus clientes – algo que se baseia em ciência e que você pode usar em seus projetos? Então continue a ler.

Recentemente, quando eu estava usando o Airbnb, seu design de montagem de fotos me fez apreciar o princípio de fragmentar o design de UX. Ele demonstra como usar o chunking para encantar os clientes: o Airbnb divide informações relevantes no site em pedaços pequenos e fáceis de digerir, tornando-o agradável para os usuários, para que possam encontrar facilmente as opções desejadas.

Chunking é um conceito que tem raízes na psicologia cognitiva. O termo foi introduzido em 1956 por George A. Miller, um luminar no campo. Em seu artigo, Miller afirmou que a memória humana é limitada a cerca de 7 (mais ou menos 2) informações e sugeriu quebrar ou organizar diferentes tipos de informações em pedaços para que as pessoas se lembrassem facilmente do que viram.

montagem de fotos, colagem de fotos, foto montagem, moldura para foto, montar fotos

A figura acima mostra como um designer colagem de fotos segue o princípio do chunking. Como o nome indica, chunking significa o agrupamento de informações em unidades familiares e gerenciáveis chamadas “chunks”. Os designers fazem isso para que o conteúdo ou as informações que eles agrupam possam ser facilmente processados e lembrados por qualquer pessoa que o encontre. Por exemplo, um número de telefone em partes (+ 1 a 234 a 567 a 8901) é mais fácil de lembrar (e digitalizar) do que uma longa sequência de dígitos não em partes (12345678901).

Dê uma olhada na imagem abaixo, onde uma lista telefônica antiga prova que seus designers têm o princípio de dividir corretamente. Um grande desafio de design da compilação de uma lista telefônica é que ela precisa listar muitos números em cada página. No entanto, como esses itens são fragmentados, os usuários podem encontrar números de contato rapidamente e lê-los facilmente.

Do ponto de vista do UX, quando os designers foto montagem dividem o conteúdo em pequenos pedaços distintos – em vez de afogar os olhos dos usuários em um mar indiferenciado de itens atômicos de informações -, sua saída tem várias vantagens, como:
Uma interface do usuário (UI) que é facilmente organizada, criando uma boa primeira impressão.

Um bom UX geral que deixa os usuários satisfeitos ao encontrar o que estavam procurando.

Na figura abaixo, a British Broadcasting Corporation (BBC), uma das mais antigas e amplamente reconhecida provedora de notícias (rádio, televisão e on-line), seguiu o princípio de dividir para apresentar suas notícias. A BBC dividiu cada notícia em diferentes partes ou seções, como tecnologia e esporte, e usou frases curtas em seus títulos, combinadas com quantidades generosas de espaço em branco. Como a BBC seguiu o princípio de chunking (ou seja, agrupando todos os elementos da interface do usuário em chunks individuais que são facilmente reconhecíveis e compreensíveis), os usuários podem facilmente:

– Encontre e leia uma categoria de notícias em que esteja interessado.
– Encontre e leia uma notícia na categoria de interesse.
Além disso, o uso da lei da fragmentação pela BBC permite que ela cumpra seu objetivo principal como um site de notícias – ou seja, fazer com que os usuários leiam as notícias. Por fim, como as informações são tão bem apresentadas, os usuários também acham esteticamente agradável – e, assim, desfrutam de um bom UX em geral.

montagem de fotos, colagem de fotos, foto montagem, moldura para foto, montar fotos

Na mesma linha, usei outro site para tentar reservar um quarto de hotel. No entanto, na Hotels.com, descobri que tive uma experiência ruim em geral, principalmente porque o layout de sua interface do usuário estava desorganizado e moldura para foto  não muito organizada. Por outro lado, achei a interface do usuário geral e todo o processo de fazer uma reserva pelo Airbnb um encanto, em parte graças à facilidade de procurar e reservar acomodações diferentes em seu site. O Airbnb fornece conteúdo bem fragmentado, o que cria uma maravilhosa primeira impressão de sua interface do usuário para o usuário. O Airbnb também não me sobrecarregou com toneladas de informações. Então, tornou todo o processo de reserva tão fácil para mim. Vamos discutir esses dois exemplos em detalhes agora.
Design ruim: Hotels.cocm
Como alguém que faz malabarismos e alterna várias tarefas diferentes, posso perder o foco com muita facilidade sempre que encontro muitas informações. Como usuário, não quero perder tempo tentando descobrir onde encontrar as coisas em um site. Tem que ser um tipo de fluxo simples “Clique aqui, termine sua tarefa e saia” para mim – essa é uma característica de uma experiência ininterrupta. A ciência concorda comigo aqui. Se você se lembrar da lei de Miller, a pessoa comum só pode manter 7 (mais ou menos 2) itens em sua memória de trabalho.

Do ponto de vista do UX, todas as informações que estão sendo transmitidas devem ser organizadas em pequenos blocos para que os usuários as entendam facilmente. No entanto, a interface do usuário da Hotels.com não seguiu a lei de Miller e os diferentes elementos na interface do usuário não foram organizados como blocos. Na verdade, eles estavam mais confusos, o que dificultava encontrar o caminho de volta.

Por exemplo, veja a imagem abaixo. Quando tentei reservar um quarto em Dublin, filtrava as opções de acomodação com base na distância do centro de Dublin. Como você pode ver, isso me deu uma lista enorme de áreas diferentes em Dublin e arredores, que não são necessariamente marcos ou lugares famosos dos quais eu conheceria.

Ter essas listas é o oposto do que o princípio do chunking defende (lembre-se de que o chunking exige que as informações sejam apresentadas em pequenos blocos ou chunks). Essa lista não é apenas um exemplo de uma interface de usuário mal fragmentada, mas também é simplesmente confusa para mim. O motivo é que não tenho idéia de quão longe as áreas listadas existem do distrito comercial central da cidade. Eu precisaria de um mapa para me dizer.

Seria útil exibir diferentes pedaços de pontos de referência lado a lado com conteúdo mínimo, o que – como explicarei mais adiante – o Airbnb se sai muito bem. Devido à falta de divisão e à organização dos elementos da interface do usuário montar fotos (mais especificamente, o filtro de distância ao reservar a acomodação), descobri que minha experiência geral com a Hotels.com era confusa e cansativa.

Eu tive que parar e passar um tempo tentando entender as coisas. Na cultura atual de sobrecarga de informações, isso é algo que qualquer pessoa associada ao design precisa evitar.

Outro exemplo de fragilidade na interface do usuário da Hotels.com é como eles organizaram a pesquisa usando o recurso Exibir no mapa, que permite ao usuário ver todas as listagens de acomodações disponíveis em uma área específica.

Como marquei com uma seta vermelha na imagem acima, quem desenhou isso para a Hotels.com dificultou a localização desse recurso, pois está fora da minha linha de visão. Além disso, a caixa que diz “visualizar no mapa” é muito pequena e fica perto do canto superior esquerdo do site. Na minha experiência, essa é uma área geralmente não associada a um recurso de pesquisa de mapas.

A vantagem que os designers de UX têm quando aplicam a lei do chunking é que eles podem aproveitar a memória de trabalho de um usuário e envolver mais usuários com elementos da interface do usuário adequadamente divididos. Por exemplo, nesse caso, um designer de UX pode executar um estudo de usabilidade para identificar exatamente onde, no site da Hoteis.com, os usuários preferem ter o recurso de mapa. Depois, armados com os resultados, eles poderiam dividir os elementos da interface do usuário de acordo com a lei de Miller.

Por fim, a Hotels.com me deu muitas opções para filtrar no menu do lado esquerdo, mas isso é mais uma vez uma violação da lei de Miller. Se você olhar a imagem abaixo, preciso percorrer um longo caminho para ver todas as categorias de opções que eles oferecem para que eu possa identificar a acomodação que eu gostaria.

Existem mais de 10 dessas categorias, que são exibidas apenas como listas e não em nenhuma ordem específica que eu possa ver. Quando chego ao fim, sinto vontade de desistir de reservar minha estadia. Para otimizar seu UX, a Hotels.com deve seguir a lei de Miller e ter essas categorias de escolha no intervalo de 7 mais ou menos 2 (ou seja, 5 a 9), para que os elementos da interface do usuário sejam facilmente compreensíveis.

montagem de fotos, colagem de fotos, foto montagem, moldura para foto, montar fotos

A Hotels.com é um exemplo do que eu chamaria de design UX ruim. Por um lado, seu design é uma aparente violação da lei de Miller, na qual eu devo manter 7 (mais ou menos 2) itens em minha memória de trabalho, por isso achei o site confuso. Além disso, achei cada vez mais frustrante rolar por tanto tempo antes que eu pudesse descobrir quais opções precisava verificar para prosseguir com a minha reserva. Além disso, os designers do site não parecem ter aderido às boas práticas de chunking. A idéia por trás do chunking é que todas as partes da interface do usuário são espaçadas em intervalos regulares, para que todas elas sejam claramente legíveis. Isso significa que eles devem estar na linha de visão do usuário e apenas facilmente compreensíveis em geral. Com isso em mente, a Hoteis.com pode se beneficiar substancialmente de um estudo completo de avaliação de experiência do usuário.

Eu só queria poder perceber todas as informações como pedaços. Dessa forma, eu poderia entender mais facilmente. Como disse Steve Krug, um engenheiro de usabilidade, em seu influente livro Não me faça pensar (e as palavras que sinto me fazem refletir sobre minha interação com o site da Hotels.com):

“O fato de as pessoas que construíram o site não se importarem o suficiente para tornar as coisas óbvias – e fáceis – pode corroer nossa confiança no site e na organização por trás dele”.

Outro exemplo ruim de design: recibos
Eu tenho o hábito obsessivo de guardar meus recibos até o final do mês, para poder acompanhar para onde meu dinheiro está indo. Para mim, é uma parte normal do gerenciamento de dinheiro que, infelizmente, pode exigir bastante trabalho de tempos em tempos. Isso é devido ao layout de muitos desses recibos. De fato, essas coisas geralmente se apresentam como exemplos clássicos de falta de fragmentação.

Muitas vezes, simplesmente não consigo entender o que exatamente está lá! Embora eu sempre tenha meu juízo sobre mim quando faço compras, no final do mês, quando se trata de verificar todos os meus recibos, eu sempre digo “Agora, o que foi isso de novo?”! 😊
Para colocar isso em contexto, paguei recentemente excesso de bagagem em um aeroporto. O recibo desta transação aparece abaixo:

Fig 7. Falta de chunking que leva a um recibo mal projetado.
Pelo recibo, não consigo descobrir duas coisas, o que é uma preocupação para mim. Então, fico me perguntando:
– Pelo que exatamente eu paguei?
– O que significam os diferentes números?
Do ponto de vista de chunking,
Não há estrutura para o recebimento.
Apresenta uma enorme quantidade de informações que considero enigmáticas.

Não é fácil de usar. Afinal, um recibo deve ser facilmente legível para a pessoa que efetuou o pagamento, para que possa ver de relance o que pagou. ‘No entanto, um ponto mais importante é que, em algumas transações (por exemplo, em supermercados), os clientes podem ser sobrecarregados ocasionalmente, e ter um recebimento claramente compreensível lhes dá a garantia que desejam. Na maioria das vezes, esse recibo acabaria no lixo!

No total, esses pontos podem facilmente resultar em outro problema: confusão, levando a uma perda de confiança. Para ilustrar como o design faz a diferença, vejamos dois cenários. Se você considerar como compra mantimentos no supermercado local em um dia típico, se for como eu, verá cada item aparecer na tela à medida que for digitalizado. E o recibo provavelmente será claramente discriminado e preciso.

montagem de fotos, colagem de fotos, foto montagem, moldura para foto, montar fotos
Agora, imagine-se em uma situação mais apressada e longe de casa: você está em um país estrangeiro; você teve que comprar algo às pressas e o recibo sai parecido com o que eu mostrei acima. Talvez você não tenha pensado mais nisso na época porque precisou pegar seu avião.

Mais tarde, quando você tiver tempo, começa a se perguntar: “Isso estava certo?” ou “Eles me sobrecarregaram?”. A barreira do idioma provavelmente não ajuda, mas o ponto mais importante do aspecto do design é o visual. Quando o texto é misturado e você precisa trabalhar para decodificar o que tudo isso significa, os designers responsáveis ​​falharam em uma tarefa fundamental.

Para melhorar o design geral do recibo, o projetista deve seguir o princípio do chunking. Com pedaços ou seções organizadas no recibo, como nome do produto e ID do cartão, ele terá estrutura e se tornará mais centrado no ser humano.

Seria como se ….
Deixe-me usar uma analogia para mostrar o quão ruim um design “sem falhas” pode ficar. Imagine que você acabou de se sentar em um restaurante novinho em folha e está vendo seu cardápio. Um garçom está pairando sobre sua mesa, perguntando se você tem alguma dúvida. Como se vê, você sabe, mas não tem nada a ver com os pratos. Você quer saber quem criou o menu deles. Por quê? Porque, para sua completa surpresa, todas as entradas, entradas (ou pratos principais), sobremesas e bebidas não são divididos nas seções agradáveis ​​e arrumadas que você esperaria de um menu normal. Em vez disso, eles estão todos reunidos em uma lista – você precisa percorrer uma longa porção de texto. De fato, esse menu é tão difícil de entender que você quase se levanta e sai. Somente sua fome constante e agravante o mantém motivado a superar sua confusão e escolher algo antes de morrer de fome. Agora, se você realmente tivesse que passar por uma experiência como essa, voltaria ao restaurante? Mesmo se você finalmente saboreasse uma refeição bem preparada lá, poderia honestamente recomendar um restaurante com um menu que confundisse tanto seus clientes?
O que podemos aprender com isso?
Um denominador comum que vejo nos exemplos de recibo e da Hotels.com é que seus layouts não possuem as partes necessárias para que eu possa encontrar facilmente as informações desejadas. Há muita coisa para eu digerir todos esses dados desordenados confortavelmente. Nos dois casos, posso detectar uma violação da lei de Miller de manter os pedaços em 7 ± 2 (ou seja, 5 a 9) itens.
Por fim, quem criou o site da Hotels.com e quem criou esse formato de recibo não parecia ter os melhores interesses de todos os usuários. Por exemplo, se eu tiver que reservar algo com pressa e no telefone, quero ver que os designers consideraram meu contexto. Quanto mais um usuário demora para descobrir o que fazer em um site ou exatamente o que é um recibo, maior a chance de ficar confuso ou frustrado. Em termos técnicos, um design que faz com que eles se sintam assim não é centrado no usuário.
Enter Good design: o caso do Airbnb
O Airbnb é um exemplo inspirador de como você pode criar uma ótima experiência do usuário colocando informações relevantes em blocos ou partes. O Airbnb usou esse princípio com um efeito poderoso e aborda todas as deficiências anteriores no design que apontei na Hotels.com. Por exemplo, procurei ficar em Bruges, na Bélgica, usando o site do Airbnb, e era assim:

Fig 8. Airbnb demonstrando chunking agrupando todos os filtros de uma maneira simples.
O Airbnb, na minha opinião, segue o exemplo da divisão agrupando informações em elementos facilmente palatáveis. Por exemplo, quando procuro “Bruges” junto com as datas, os resultados mostram 7 opções de filtragem – como você pode ver na figura anotada acima. Observe como a ênfase está em um design simples e limpo, fácil de entender e que não me faça pensar. Isso não é apenas esteticamente agradável, mas o design também não o sobrecarrega, graças ao fato de que quem o projetou observou a lei dos pedaços e manteve os pedaços dos 7 ou 2 itens mais importantes de Miller. Portanto, seguir a lei de Miller, além de boas práticas de divisão, é um UX incrível!
Se eu clicar na última opção (mais filtros), um novo menu será exibido com 9 filtros adicionais, cada um com subcategorias em pedaços. Como mostra a imagem abaixo, existe um filtro “Quartos e camas” com as subcategorias “Camas”, “Quartos” e “Banheiros”, onde posso escolher meu número preferido de cada um. O ponto aqui é que achei todas essas informações no Airbnb muito mais facilmente visíveis do que as que encontrei na Hotels.com, simplesmente porque o Airbnb segue a lei do chunking e seus designers provam que aderiram à lei de Miller quando estavam projetando o UI.

Fig 9. Bom exemplo de chunking para criar opções de filtro fáceis de ler e bem organizadas.
Embora o número total de opções de filtragem disponíveis na pesquisa do Airbnb exceda o número mágico 7 (mais ou menos 2) que discuti anteriormente, o design ainda está bem organizado. Ou seja, o Airbnb usa categorias e subcategorias nesta interface do usuário para agrupar informações, facilitando a navegação e a localização dos filtros de que os usuários precisam sem que se percam ou se percam. Claramente, o Airbnb investiu no design thinking e prestou muita atenção em seguir as boas práticas de chunking. Claramente, o resultado disso é um site amigável que eu gostei de encontrar porque era muito fácil de usar.

Se pensarmos bem, a maioria dos produtos e serviços que vemos ao nosso redor são projetados para uso de uma maneira ou de outra. Portanto, eles não devem ser fáceis de usar e tornar nossa vida fácil também?
Lições aprendidas e melhores práticas:
Divida as informações relevantes em pequenos pedaços e torne-as palatáveis ​​para os usuários, para que eles possam encontrar facilmente as opções desejadas.
Siga a lei de Miller e mantenha os pedaços com 7 (mais ou menos 2) itens para:
* Apresente o conteúdo de forma mais memorável e eficaz.
* Decida quanto mostrar aos usuários ao mesmo tempo (e o que cortar).
Invista no design thinking (ou seja, sente-se com seus usuários, identifique seus pontos negativos, desafie seus preconceitos e sempre pense nas linhas de “Como posso facilitar as coisas para o usuário?”).
Sempre teste seus projetos – depois de ter um protótipo pronto, pergunte aos usuários se essa seria uma experiência que eles desfrutariam.
Na próxima vez que você desaprovar um exemplo de mau design, pare para pensar. Determine por que o design falhou, encontre exemplos de designs que fizeram as coisas certas e faça uma anotação mental das lições que você aprendeu.
Deseja saber mais?
Você está interessado em explorar a interseção entre UX e UI Design? Os cursos on-line sobre Padrões de design de interface do usuário para um software bem-sucedido e Design Thinking: o Guia para iniciantes pode ensinar as habilidades necessárias. Se você fizer um curso, receberá um certificado reconhecido pelo setor para avançar em sua carreira. Por outro lado, se você quiser aprimorar os conceitos básicos de UX e Usabilidade, experimente o curso on-line sobre Experiência do Usuário (ou outro tópico de design). Boa sorte na sua jornada de aprendizado!

Fonte