Como o conteúdo interativo deve ser organizado em uma tela sensível ao toque?

Um cliente de varejo se aproxima de uma tela sensível ao toque já sabendo qual produto deseja verificar. A próxima pessoa que tocar na mesma tela cinco minutos depois só quer um preço ou instruções para chegar ao provador. Uma terceira pessoa está lá porque está entediada esperando por alguém e acha que vai bisbilhotar. Se todos os três tiverem que clicar no mesmo menu de quatro níveis para chegar a algum lugar, a tela já falhou com dois deles antes de encontrarem o que procuravam - e honestamente, o terceiro provavelmente também se perde.

Já atendemos a mais de algumas ligações pós-instalação em que a primeira pergunta do cliente era alguma versão de "por que ninguém está usando isso?" E nove em cada dez vezes, o hardware está bom. A tela é brilhante o suficiente, a resposta ao toque é rápida o suficiente, a altura de montagem está correta. O problema é quase sempre o mesmo: o menu foi construído em torno de como alguém no escritório pensa sobre o catálogo de produtos, e não em torno de como uma pessoa parada em um lobby ou showroom realmente pensa.

Esse é realmente o principal problema do conteúdo interativo em telas sensíveis ao toque montadas na parede – não se a tela é grande o suficiente ou cara o suficiente, mas se o menu nela contido corresponde ao que as pessoas apareceram para fazer.

Comece com a tarefa, não com o menu

Aqui está um padrão que encontramos constantemente. Um cliente envia sua estrutura de produto para um novo quiosque interativo, e ela é organizada exatamente da mesma forma que está em seu sistema ERP interno - por prefixo SKU, por código de fornecedor, por qualquer departamento que possua qual linha de produtos internamente. Faz total sentido para quem o construiu. Não significa absolutamente nada para um estranho parado em um showroom com cinco minutos de sobra.

Os visitantes não pensam em códigos SKU. Eles pensam “Estou procurando um pequeno azul” ou “onde está aquilo que estava à venda” ou “tem banheiro neste andar”. Se o primeiro toque na tela não fala esse idioma, as pessoas desistem imediatamente ou começam a tocar aleatoriamente, o que - pelo que vale a pena - tende a parecer que a tela está quebrada, mesmo quando não está.

Portanto, antes que alguém crie uma única tela, vale a pena sentar e escrever, em linguagem simples, as duas ou três coisas que as pessoas realmente estão lá para fazer. Não é o que a empresa deseja comunicar. O que o visitante deseja realizar. A exibição de um showroom de produtos geralmente se resume a três tarefas reais: navegar por categoria, pesquisar por nome ou verificar as promoções atuais. Um diretório de lobby geralmente se resume a encontrar uma empresa, encontrar um departamento ou encontrar o número de um quarto que alguém já rabiscou em um post-it no bolso. Depois que essas tarefas forem realmente escritas e acordadas, todo o resto – especificações, formulários de contato, histórico da empresa, mensagem de boas-vindas do fundador – pode sair da primeira tela e parar de competir por atenção.

Isso é mais importante em uma exibição pública do que em um painel interno que sua própria equipe usa quarenta vezes por dia e acaba memorizando sem pensar nisso. Ninguém vai sinalizar para um funcionário perguntar como usar uma tela sensível ao toque aparafusada na parede do saguão. Se o primeiro toque não aproximar alguém de uma resposta, ele simplesmente se afasta e o cliente acaba perguntando por que ninguém está usando a tela caríssima pela qual acabou de pagar.

Uma tela, diferentes caminhos de usuário

O mesmo display físico frequentemente tem que servir mais de um tipo de visita, às vezes nos mesmos cinco minutos. Em vez de amontoar todos os caminhos possíveis em uma tela inicial lotada, que é o instinto que quase todo cliente tem na primeira vez que vê uma tela em branco, funciona muito melhor dar a cada caso de uso sua própria rota curta e previsível e permitir que as pessoas selecionem silenciosamente aquela que realmente se adapta a elas.

Expositores de varejo

Para um showroom de varejo, o caminho que tende a funcionar começa com uma categoria de produto, passa para um modelo específico, depois para as especificações e só depois oferece uma etapa separada para uma consulta ou solicitação de contato. A parte que as pessoas erram geralmente não é o número de categorias na tela inicial. É misturar navegação e investigação muito cedo. Se alguém precisar preencher um formulário de contato apenas para ver uma folha de especificações, ele será rejeitado quase imediatamente. Se o botão para enviar uma consulta for idêntico ao botão para ver mais detalhes do produto, o resultado tende a ser uma pilha de leads acidentais que não levam a lugar nenhum e uma equipe de vendas irritada por acompanhar pessoas que nunca quiseram ser contatadas. Manter essas duas intenções, olhar e perguntar, estruturalmente separadas resolve os dois problemas ao mesmo tempo e faz uma diferença desproporcionalmente grande no desempenho de um monitor quando estiver em campo.

Diretórios de edifícios e visitantes

Os diretórios tendem a seguir um formato bastante previsível, geralmente passando do prédio para um andar, depois para um departamento e depois para um local específico, a menos que uma caixa de pesquisa permita que alguém pule direto para a última etapa. Especificamente para diretórios, argumentaríamos que um campo de pesquisa simples na tela inicial, onde alguém digita um nome e obtém um resultado, supera quase sempre até mesmo uma árvore de categorias lindamente organizada. A maioria dos visitantes já sabe exatamente quem ou o que procura. Eles não precisam aprender o organograma do edifício apenas para encontrá-los. Dê às pessoas uma caixa de pesquisa primeiro e deixe o diretório navegável existir como um backup para o grupo menor que realmente ainda não sabe para onde está indo.

Telas de educação e treinamento

As exibições nas salas de aula e de treinamento tendem a seguir algo mais próximo de um curso escolhido primeiro, depois de uma lição dentro dele, depois de uma mídia como um vídeo ou diagrama e, finalmente, de um exercício interativo vinculado a essa lição. Aqui a prioridade realmente muda em comparação ao varejo ou a um diretório. Não se trata realmente de velocidade. Um professor não está competindo com um estranho através de um menu. Eles estão tentando manter uma sala cheia de alunos envolvidos sem perder o ritmo no meio da aula. Isso muda a aparência de um bom design: pontos de toque maiores, menos surpresas e nada que exija uma segunda olhada confusa na tela para confirmar o que acabou de acontecer, porque essa segunda olhada é uma sala cheia de crianças de 12 anos perdendo toda a atenção que lhes restava.

Três tipos de exibição, três profundidades de menu diferentes, três conjuntos de prioridades completamente diferentes, embora todos os três se enquadrem tecnicamente no mesmo rótulo amplo de uma tela sensível ao toque com um menu. Tratá-los da mesma forma simplesmente porque rodam em hardware semelhante é um dos erros mais comuns que vemos, e é fácil de evitar quando você realmente separa os casos de uso em sua cabeça antes de começar a projetar qualquer coisa.

Uma maneira rápida de manter essas diferenças corretas antes de uma revisão de projeto:

Essa tabela não pretende ser um livro de regras. É mais uma verificação de integridade - se o menu de um projeto não corresponder aproximadamente à sua linha, geralmente vale a pena dar uma segunda olhada antes de o layout ser finalizado.

Quando os layouts de tela dividida realmente ajudam

A tela dividida é solicitada com muito mais frequência do que realmente é bem usada. E entendemos por que – no papel, mais painéis parecem ter mais valor: mais conteúdo visível ao mesmo tempo, mais retorno no orçamento de hardware, mais motivos para justificar o tamanho da tela para quem está assinando o projeto.

É genuinamente útil em um conjunto restrito de situações, como um vídeo de demonstração de produto executado em uma metade da tela enquanto as especificações estáticas ficam na outra, ou um mapa de construção emparelhado com uma lista de rolagem dos eventos do dia. Em ambos os casos, os dois painéis desempenham funções distintas e nenhum deles necessita da atenção total do visitante exactamente no mesmo momento.

Ele para de funcionar no momento em que alguém tenta espremer a navegação do produto, um vídeo em loop, um código QR e um feed de promoções ao vivo em quatro painéis ao mesmo tempo, o que, para que conste, fomos solicitados a fazer mais de uma vez, geralmente por alguém tentando genuinamente obter mais valor da tela, em vez de menos. Nesse ponto, nada no layout tem espaço suficiente para ser lido de uma distância normal, e a configuração de tela dividida acaba produzindo o oposto do que deveria. As pessoas olham para ele, não conseguem analisá-lo rápido o suficiente e seguem em frente sem absorver nada disso.

Uma regra prática decente à qual sempre voltamos em projetos reais: se uma seção da tela não precisa genuinamente de seu próprio momento de atenção separado de tudo o mais nela, provavelmente não merece seu próprio painel.

Onde os planos de conteúdo geralmente dão errado

Alguns padrões surgem com frequência suficiente para que valha a pena nomeá-los diretamente, porque são evitáveis ​​e continuam acontecendo de qualquer maneira.

· Sobrecarregar a tela de abertura para justificar o orçamento. Alguém gastou dinheiro de verdade em hardware, e uma tela inicial de aparência esparsa pode parecer um potencial desperdiçado. Na prática, três escolhas óbvias e bem espaçadas superam doze botões com letras miúdas embaixo de cada uma delas quase sempre. Uma tela ocupada não parece tão valiosa – parece um dever de casa.

· Projetar em um laptop e nunca testar no painel real. Algo que parece bom à distância do braço em um monitor de quinze polegadas pode ficar apertado ou difícil de tocar quando esticado em uma tela de cinquenta e cinco polegadas montada na parede. Vimos equipes descobrirem isso no local, na frente do cliente, que é o pior momento possível para descobrir isso.

· Deixar os ícones flutuarem entre as páginas. Uma seta para trás que significa uma coisa na página do produto e algo ligeiramente diferente na página do diretório parece uma pequena inconsistência. Não é. Ele ensina as pessoas a desconfiar da interface e, uma vez que essa confiança acaba, elas começam a mexer aleatoriamente tentando encontrar o caminho de volta – que é exatamente o problema de “parece quebrado” anterior.

Nenhum desses três são problemas de hardware e nenhum deles é caro para consertar se for detectado antes do dia da instalação. Eles são fáceis de perder quando um projeto está avançando rapidamente e todos estão focados nas partes que são mais difíceis de alterar posteriormente, como tamanho da tela ou posição de montagem.

O que aparece na primeira tela e o que não aparece

Nem tudo pertence à tela de abertura, e nem tudo o que aparece pertence lá com igual peso visual.

Botões de categoria, uma função de pesquisa e quaisquer duas ou três ações usadas com mais frequência merecem o posicionamento maior e mais óbvio na página, o tipo de posicionamento que você gostaria que alguém notasse, mesmo que apenas olhasse para a tela por dois segundos enquanto passava por ela. Detalhes do produto, filtros e opções secundárias podem acomodar confortavelmente um toque mais fundo sem realmente custar tempo significativo a ninguém, uma vez que um único toque extra raramente perde alguém que já estava genuinamente interessado em primeiro lugar. Especificações, texto legal, instruções de instalação e qualquer coisa de nicho suficiente para importar apenas para uma pequena fração de visitantes podem esperar até que alguém procure ativamente por isso, porque quase ninguém quer ficar em um saguão lendo um parágrafo de letras miúdas na parede.

O erro que vale a pena assinalar novamente aqui é não deixar nada de fora. É o instinto oposto, o medo de deixar algo de fora, que tende a produzir os piores layouts que vemos. Uma tela que tenta responder a todas as perguntas possíveis no momento em que alguém toca nela acaba não respondendo muito bem a nenhuma dessas perguntas. A confiança sobre o que cortar acaba sendo tão importante quanto a preocupação com o que manter.

Alvos de toque precisam de espaço para respirar

Um layout que parece perfeitamente adequado durante uma revisão de design no laptop de alguém nem sempre sobrevive ao contato com um dedo humano real em um painel montado na parede. Botões dimensionados confortavelmente para um cursor de mouse geralmente são muito pequenos ou muito próximos uns dos outros, quando você pede a alguém para tocar neles com a ponta do dedo, especialmente em um varejo movimentado ou em um saguão onde as pessoas estão em ângulos estranhos, às vezes segurando um café, às vezes com uma criança puxando sua manga.

Duas coisas são mais importantes aqui do que tendem a receber crédito durante a fase de design. O primeiro é o espaçamento consistente em torno de qualquer coisa que possa ser tocada, já que botões apertados causam toques acidentais, e toques acidentais causam um tipo de frustração que aumenta rapidamente em uma tela pública com a qual ninguém é pago para ter paciência. A segunda é o significado consistente para símbolos repetidos em todas as telas da interface. Se uma seta para trás enviar alguém para a tela inicial em uma página e para a categoria anterior em outra, essa inconsistência não será registrada como um pequeno bug que vale a pena ignorar. É registrado que toda a interface não é confiável e as pessoas generalizam essa impressão rapidamente.

Também vale a pena lembrar que muitas vezes mais de uma pessoa está olhando para a tela ao mesmo tempo, mesmo quando apenas uma delas a toca – um colega atrás de alguém verificando um diretório, um segundo comprador olhando por cima do ombro, um pai observando um filho trabalhando em uma vitrine educacional a alguns metros de distância. O layout também precisa permanecer legível para a segunda pessoa não envolvida, o que na prática geralmente significa apenas um tipo um pouco maior e uma separação visual mais forte do que uma interface de usuário único jamais precisaria.

Mudanças no tamanho da tela O que o conteúdo pode fazer

O planejamento de conteúdo funciona melhor quando acontece antes de o tamanho da tela ser definido, e não depois, quando o pedido de hardware já foi feito e alguém está silenciosamente tentando fazer com que o conteúdo se ajuste ao que quer que tenha aparecido no caminhão. Um painel de quarenta e três polegadas e um painel de sessenta e cinco polegadas não são simplesmente a mesma interface ampliada como uma configuração de fotocopiadora. Eles realmente suportam diferentes quantidades de detalhes antes que um layout comece a parecer lotado ou estranhamente vazio.

A FVASEE constrói telas sensíveis ao toque montadas na parede nos tamanhos de 42 e 43 polegadas, 49 e 50 polegadas, 55 polegadas e 65 polegadas, com configurações de Android e Windows disponíveis, dependendo do que o projeto precisa para ser executado. Painéis menores tendem a ganhar seu sustento com uma interface focada e de caminho único, construída em torno de uma linha de produtos, um diretório ou uma tarefa clara, sem mais nada competindo por espaço. Painéis maiores têm espaço físico para suportar a visualização em grupo ou um conjunto mais amplo de categorias sem que tudo pareça empacotado, embora esse espaço extra seja fácil de desperdiçar se o plano de conteúdo nunca foi projetado para realmente precisar dele.

A medida prática, e à qual sempre voltamos em projetos reais, é carregar as páginas de conteúdo reais no tamanho real do painel antes que qualquer coisa seja finalizada em qualquer um dos lados. Um texto que pode ser lido bem em uma maquete no laptop de alguém pode ficar desconfortavelmente pequeno quando montado na altura dos olhos em uma tela de 43 polegadas em um saguão. Um layout projetado com uma tela de 65 polegadas em mente pode parecer estranhamente esparso quando comprimido em um painel de 49 polegadas. Testar páginas reais em hardware real durante o estágio de amostra detecta a maioria desses problemas enquanto eles ainda são baratos para consertar, o que é melhor do que detectá-los depois que os painéis já estão montados na parede do prédio de outra pessoa.

Passando do primeiro rascunho para uma interface de trabalho

Nada disso resulta em um layout universal e correto que se aplica a todos os lugares, e honestamente ficaríamos um pouco desconfiados se alguém afirmasse que existe um. Um showroom, um diretório de lobby de hotel e uma exibição de sala de aula acabarão com diferentes profundidades de menu, diferentes quantidades de texto na tela e diferentes razões para usar, ou ignorar deliberadamente, um layout de tela dividida. O que eles têm em comum não é um modelo compartilhado. É um ponto de partida compartilhado: descobrir o que a pessoa que está na frente da tela realmente fez e construir a estrutura do menu em torno dessa realidade, em vez de em torno de como o conteúdo já está organizado em algum lugar de uma planilha no escritório.

A própria tela fornece espaço, brilho e resposta ao toque. Se alguém realmente o usa bem após a instalação, depende do que está nele e se esse conteúdo atende as pessoas onde elas já estão, e não onde o organograma ou o banco de dados do produto silenciosamente supunham que elas estariam.