Como estragar o final melhora o UX
Contar histórias é sobre o desconhecido se tornar conhecido. Mas os designers não são contadores de histórias e os destinos que eles criam devem sempre estar claros para o usuário. Ao inserir pequenos spoilers em nossos designs de interface do usuário e estragar a surpresa, criamos experiências de usuário muito melhores.
Tem sido freqüentemente afirmado por fãs da sabedoria pop que existem apenas dois lotes distintos em toda a cultura ocidental: uma pessoa faz uma viagem e um estranho chega à cidade.
Um breve movimento em sua estante refuta a regra - a menos que você permita viagens metafóricas, nas quais tudo se encaixa - mas a frequência com que a idéia é repetida e o sentido que parece fazer, fala muito sobre a centralidade do desconhecido no ocidente idéias de narrativa.
Em ambas as parcelas, uma pessoa é apresentada a algo novo e inesperado, a única variação é o ponto de vista do qual a narrativa fala; Em ambos os casos, o arco da história é o desconhecido se tornando o conhecido . Quando Clint Eastwood entra em uma cidade destruída em Idaho, no século 19, nossa curiosidade sobre sua identidade é o que impulsiona nosso engajamento. Quando lemos a trilogia O Senhor dos Anéis de Tolkien , nunca duvidamos que Frodo eventualmente chegará a Mt Doom, o interesse está no que acontece ao longo do caminho.
A chave para contar histórias é que existe um desconhecido e que o desconhecido se tornará conhecido.
Designers não são contadores de histórias
Numerosos designers se referiram a si mesmos como contadores de histórias, mas isso é simplesmente uma forma kitsch de se referir à comunicação. Para contar uma história, temos que fomentar o desconhecido em preparação para uma grande revelação, e o maior obstáculo a essa abordagem é que as experiências na web - e eu diria que a maioria dos encontros com design - são não-lineares e abertas.
O design é, de fato, muito mais próximo da poesia. A poesia normalmente existe em pequenos pedaços, e em quais temas são explorados que estão abertos à interpretação.
Longe de construir uma história, o trabalho de um designer é esclarecer da maneira mais intrusiva possível.
Usando Spoilers em Microinteractions
Qual é o elemento mais envolvente em Jaws ? Brody está discutindo com o prefeito? É Quint contando a história do Indianapolis? É o caso de Hooper com Ellen Brody (sim, realmente, leia o livro!)? Não. É a música. Assim que o tubarão começa a tocar violoncelo, sabemos que está chegando, sua chegada é literalmente anunciada. [Por acaso, Jaws é um exemplo interessante de um filme no qual tanto um estranho (o tubarão) chega à cidade, e depois um homem sai em uma jornada (para o mar).]
Podemos criar engajamento no design continuamente lançando spoilers, insinuando o que está por vir, com nossa própria música de violoncelo. Para fazer isso, usamos microinterações - componentes simples da interface do usuário, com um acionador e feedback. A parte de feedback da microinteração é o local para inserir seu spoiler.
Ele funciona visualizando dados que, em uma experiência linear, seriam introduzidos em um estágio posterior. A chave é trazer dados para frente.
Miniaturas
Vamos começar com algo familiar: o exemplo clássico de levar a informação adiante é a miniatura. Uma miniatura é uma prévia de um elemento maior, um guia visual do que esperar do outro lado de um link.
Jacky Winter é uma agência de talentos para artistas, ilustradores e animadores. Com uma gama diversificada de talentos, a melhor maneira de navegar no trabalho é com miniaturas tradicionais.
As miniaturas não precisam ser tradicionais. Alexandre Nacache é um diretor de arte e designer interativo cujo site usa previews de elementos do projeto, em vez de reproduções de um projeto em miniatura.
Bao é um restaurante taiwanês com três localizações em Londres. Suas ilustrações de localização funcionam como miniaturas, sugerindo não apenas uma aparência para o restaurante, mas uma possível experiência.
Um dia fora é um estúdio de design baseado em Glasgow. As miniaturas em seu site formam um importante componente da direção de arte e estabelecem a estética de sua própria marca.
Os 5 minutos de leitura
No passado, a única maneira de saber por quanto tempo ler um artigo como esse seria verificar a hora, ler o artigo e verificar a hora novamente.
Com base em sua aceitação, um dos elementos de interface do usuário mais bem-sucedidos dos últimos anos é o pequeno indicador útil que nos informa quanto tempo um artigo demorará para ser lido. Popularizada por sites como o Medium, não há rastreamento ocular envolvido, ou a velocidade de leitura é calculada, a estimativa de "5 minutos lidos" é baseada na contagem de palavras - 125 palavras são Espera-se que seja lido em 30 segundos ou por aí. Mas até mesmo esses dados grosseiramente generalizados são suficientes para permitir que os usuários tomem decisões informadas sobre seu compromisso com um site, artigo ou produto.
O monótono de Rádio australiano de design é quebrado apenas pelo vermelho contrastante usado para estados de foco. O único elemento que emprega o vermelho sem interação? O indicador de reprodução que apresenta a posição e o comprimento total.
Sequóia é uma empresa de capital de risco com sede na Califórnia. Perfis de empresas de tecnologia ocupam sua landing page. Cada perfil apresenta uma posição numerada e o cronômetro animado do controle deslizante chama a atenção para exatamente onde você está no processo.
Vimeo apresenta alguns dos melhores vídeos da web. Eles poderiam ter exibido qualquer informação que desejassem - produtor, assunto, título - ao passar por cima de suas miniaturas. Eles escolheram a duração.
Cinelli é a marca de bicicleta mais legal da Itália. Seu slider de produto apresenta os botões 'next' e 'previous' numerados. Setas por si só seriam suficientes para transmitir significado, mas os designers trouxeram dados para a frente com uma simples adição aos botões.
Dados de qualificação
Uma das maneiras mais simples de aprimorar uma interface é qualificar dados com um contexto significativo. A chave para isso não é fornecer muita informação, apenas um resumo simples que pode ser lido de relance.
Ajudar, escoteiro é um serviço ao cliente SaaS. Seu painel exibe métricas-chave como o total de conversas, o que seria sem sentido sem a adição de uma seta e uma porcentagem indicando se isso é uma melhoria ou um retrocesso.
A reserva de um bilhete de Lyon para Bordeaux é simplificada quando Linha de trem exibe uma barra abaixo do tempo de viagem, para fornecer uma indicação visual da duração e do número de alterações.
Mapas e resseguro
Quando antecipamos viagens, especialmente uma jornada ao desconhecido, muitas vezes desmistificamos a experiência com um mapa. No mundo real, um mapa é muito parecido com uma miniatura de um destino. No design da interface do usuário, os mapas que usamos esclarecem a arquitetura da informação.
Os rótulos são uma das áreas mais complexas da arquitetura da informação, pois tendem ao jargão, geralmente um jargão exclusivo da empresa. A adição de microcódigo livre de jargão visualiza o destino dos usuários e os ajuda a encontrar o caminho para as informações corretas.
Treliça é um SaaS de gerenciamento de desempenho, mas seus produtos são muito centrados na empresa. Eles resolvem esse problema sinalizando o recurso principal de cada produto em seu menu.
Thriva ajuda a rastrear sua saúde com exames de sangue que você pode fazer em casa. Eles têm três níveis de produto que são claramente explicados em seu menu.
As transações financeiras são tecnicamente complexas. Manta oferece uma variedade de produtos de API para desenvolvedores. O menu deles não explica apenas o recurso principal de cada produto, mas também prevê duas soluções possíveis com base nas combinações de produtos.
A chave para o design eficaz da interface do usuário é Spoilers
Contar histórias é a antítese do design eficaz, porque as histórias, por sua natureza, satisfazem os elementos desconhecidos em uma experiência. O design, ao contrário, procura eliminar o desconhecido esclarecendo.
Quando trazemos dados para a frente em um design, normalmente o fazemos de maneira simples. Uma única peça de dados bem selecionados pode esclarecer todo um processo. As microinterações são a maneira ideal de inserir esses "spoilers", que capacitam os usuários a criar sua própria experiência, sempre sabendo exatamente onde estão dentro do contexto mais amplo.
Ao revelar mais do que uma história linear, nós envolvemos os usuários com muito mais eficiência e projetamos experiências robustas e agradáveis de usar.