Como a revolução da tela sensível ao toque está impactando o UX
A introdução do Windows 8 sofreu uma grande reformulação da interface do usuário do Windows, de acordo com a interface do Windows Phone, para ser mais intuitivo para pessoas que usam telas sensíveis ao toque, e a Apple adaptou o OSX com o tempo, otimizando recursos cada vez mais compartilhados através de seus sistemas operacionais móveis e desktop. Embora ainda tenhamos de ver um Mac com tela sensível ao toque, é óbvio que a revolução da tela sensível ao toque está pairando sobre nós, com os usuários gastando mais e mais tempo em seus dispositivos móveis do que os PCs domésticos.
Com isso em mente e uma proporção cada vez maior de navegação ocorrendo em smartphones e tablets, os sites devem decidir como se adaptarão às pessoas que acessam seu conteúdo sem mouse e teclado. Embora a resposta padrão para isso tenha sido, muitas vezes, "apenas criar uma interface móvel separada", uma solução que funcionou bem no passado em dispositivos móveis menores, como telefones, há muito pouco espaço para o grupo intermediário ocupado por telefones maiores e exibe tablet.
Este artigo dará uma olhada em vários sites que reduziram designs de site não convencionais e padrão para se tornarem mais amigáveis ao toque.
Sites focados versus sites responsivos
Muitos sites criaram sites ou aplicativos subsidiários especificamente para usuários de tela sensível ao toque, para permitir que eles se concentrem em um tipo de usuário por vez. Um problema é que, como os sites são separados, eles contam com o redirecionamento de URL, o que pode levar a problemas como o envio errado de links para o site errado ou a um redirecionamento inadequado devido à necessidade de redirecionamento para páginas formatadas para usuários móveis.
O maior problema com sites separados para usuários móveis, no entanto, é que muitas vezes a versão móvel não possui recursos ou informações que um usuário de desktop recebe; recursos e interfaces geralmente simplificados, botões ampliados e opções reduzidas. Isso pode ser resolvido usando um design 'responsivo'. Um site responsivo foi projetado para ser facilmente visualizado em ambas as plataformas sem perder qualidade em nenhum deles. Isso também tem o benefício de que apenas um site precisa ser projetado, em vez de dois, no entanto, isso geralmente resulta em comprometimentos para ambas as plataformas.
Diferenças básicas de design
Existem diferenças óbvias entre uma tela sensível ao toque e uma área de trabalho na qual você precisa pensar ao criar seu site. Em uma tela sensível ao toque, você desliza a página para baixo, no entanto, em uma área de trabalho, você move a roda de rolagem para baixo. A Apple tentou corrigir isso consolidando suas tecnologias de interface de toque em trackpads em seus Macs de laptop e desktop, no entanto, os usuários de PC ou mesmo os usuários de Mac usando controles deslizantes ou rolagens convencionais para navegar pelas páginas da web estão em desvantagem.
Os botões devem ser muito maiores em dispositivos móveis, já que tocar não é tão preciso quanto clicar com um mouse, não há nada mais irritante do que tentar clicar em um link para a próxima página e acidentalmente ser enviado de volta a uma página ou a um anúncio. A falta de um cursor também significa que você não pode ter estados de foco para explicar onde um link vai, o que uma palavra significa ou até mesmo o que é clicável.
Há também uma diferença entre a precisão nas entradas móveis, uma vez que as telas sensíveis ao toque podem ter entradas resistivas ou capacitivas, que têm sensibilidades variadas e, subsequentemente, a precisão pode ser perdida em telas sensíveis ao toque resistivas. Além disso, os projetos devem incorporar duas resoluções extremamente diferentes para dispositivos móveis que tenham duas orientações.
Orientação da tela e proporção
Com várias resoluções além dos tamanhos normais de monitor, você não pode mais pensar apenas em termos de resoluções de tela padronizadas e movimento vertical. As rápidas mudanças no mercado de tecnologia produziram tamanhos de tela que diferem do modelo e do fabricante e, com todos os rumores sobre os chamados relógios inteligentes, podemos começar a ver telas que não estão mais restritas a quatro bordas. Os ecrãs para dispositivos móveis aumentam a complexidade devido ao facto de poderem ser visualizados em modo de retrato e paisagem através de rotação.
A resposta são layouts líquidos que se ajustam automaticamente a qualquer resolução e podem ser adaptados para visualização em retrato e paisagem. Alguns sites usam um layout líquido que altera drasticamente a aparência do site, a fim de otimizar a facilidade de controle e usar todo o potencial da tela com base em sua orientação.
Embora os mouses sejam especificamente projetados com rolagem vertical para facilitar a rolagem vertical, muitos usuários estão migrando para touchpads e telas sensíveis ao toque, e como a Apple adotou a forma mais inovadora de rolagem de toque, que é semelhante a arrastar uma página em vez de rolar, a ideia mais criativa rolagem horizontal pode não estar fora de questão. A maioria dos aplicativos usa a rolagem horizontal como uma ferramenta e, de longe, o maior sucesso na rolagem horizontal é o Kindle, então por que não implementá-lo na interface do usuário da Web? Muitos sites de página única têm um eixo exclusivamente horizontal, no entanto, eles geralmente precisam usar botões para instigar a rolagem, pois os usuários podem não entender o formato não padrão.
Rolagem horizontal pode ser semelhante a rolagem vertical em termos de design, no entanto, o uso de ambos pode abrir a possibilidade de rolagem de eixo duplo, que pode não funcionar no navegador. Muitos usuários gostam de estar ancorados em um eixo, obviamente este é geralmente o eixo x, que é estático, portanto, se os usuários se perderem na página, eles podem simplesmente rolar para cima e voltar à navegação principal. Em sites de dois eixos isso pode não ser tão simples, e assim a navegação pode precisar ser pegajosa, usando uma barra de estilo HUD.
Então, qual interface de usuário seu site deveria estar usando?
Obviamente, nem todas as IUs são adequadas para todos os tipos de websites, então faça a si mesmo algumas perguntas básicas: Quem é seu público-alvo? O que você está tentando 'vender'? Que impressão você quer dar? As pessoas mais jovens são mais propensas a usar telas de toque do que um grupo demográfico mais antigo que provavelmente usará uma área de trabalho, mas ainda podem precisar de botões maiores e uma interface de usuário mais clara. Não há sentido em criar a interface de usuário mais inovadora que se possa imaginar, se ninguém puder entender como usá-la. Lembre-se sempre de criar uma interface de usuário que o usuário possa ver e saber usar instantaneamente.
Menu radial
Um menu radial, também conhecido como menu de pizza, é um menu de contexto circular que usa o contexto multidirecional em vez de altura ou largura como a ferramenta de seleção.
Essa é uma ótima forma de design intuitivo que impede que os usuários se percam em dezenas de submenus. Outra vantagem é que um usuário com tela sensível ao toque tem melhor controle sobre as listas suspensas normais, pois o controle direcional é mais preciso do que o toque. O uso de menus radiais em formulários e sites pode melhorar drasticamente a experiência dos usuários de tela sensível ao toque no site, e se estende a thumbsticks como aqueles usados em consoles de jogos, em alguns lugares são usados menus radiais, pois permite que os jogos sejam facilmente portados para o PC. Como os usuários de desktops também não perdem, uma vez que os menus radiais podem simplificar as listas longas em categorias simples, aumentando a facilidade de uso ou a produtividade em um site.
Os menus radiais são uma ótima maneira de mostrar informações sensíveis ao contexto, um exemplo disso é clicar em uma foto de um prato em um site de alimentos e ter a opção de retweetar, o link da receita, lista de ingredientes ou salvar a imagem. No entanto, você deve ter cuidado para que seu menu permaneça acessível e simples, caso contrário, você poderá facilmente sobrecarregar o usuário, especialmente ao combinar símbolos e palavras no mesmo menu radial. Os menus radiais são muito mais fáceis de usar quando estáticos do que dinâmicos, pois isso pode dificultar a seleção de objetos, como em sites como Phong , neste caso, especialmente quando se usa um mouse como rastreamento de cursor, torna-o especialmente não intuitivo.
Skeuomorphism
O design skeuomorphic imita a aparência e a funcionalidade de um objeto cotidiano para criar uma interface intuitiva, algo que recentemente saiu de moda, especialmente desde que Scott Forstall se demitiu da Apple e o design plano de Sir Jony Ive assumiu o iOS e provavelmente o OS X futuro. O skeuomorfismo tinha sido uma grande parte do impulso da Apple em direção ao design mais intuitivo, recentemente com o Contacts on Mac sendo projetado como um catálogo de endereços real, ou o Newsstand e o iBooks no iOS sendo estantes reais. Esse design é um dos que mais obviamente beneficia os usuários de interface de toque, já que não interagimos com o mundo ao nosso redor com um cursor.
A familiaridade aumenta a intuitividade ao usar qualquer interface de usuário, sendo este o ponto do skeuomorphism, para trazer uma dimensão extra de familiaridade unindo forças com objetos reais para que o usuário saiba instantaneamente como interagir com ele. Um design skeuomorphic bem-sucedido significa que apenas olhando para a página da web você saberá para que o assunto é / a página é usada, tornando as dicas de mouseover e os links realçados obsoletos.
Interface de discagem
Esta é uma combinação dos dois acima, onde toda a interface do usuário forma uma simples discagem; o design lembra um menu radial, mas em vez de girar no centro, selecionando a partir daí, o dial gira para um único ponto de seleção. Isso é muito eficaz em casos como a música em que os mostradores costumam ser usados para mixar uma faixa e controlar o volume. No caso do rótulo líquido SHSK'H eles usam um tipo de interface de discagem modificado para selecionar qual faixa você deseja reproduzir.
O movimento minimalista
Minimalismo é onde um site é despojado de seus elementos essenciais. Isso é ótimo para usuários móveis, pois diminui o tempo de carregamento e o uso de dados, além de permitir que o usuário acesse todas as informações necessárias em uma interface clara e mais fácil de usar para resoluções menores. O minimalismo atual foi além dos locais de despojamento para o essencial, e formou um novo estilo conhecido como design plano. Isso depende da crença de que a intuição não é mais necessária no design, já que as interfaces e seu uso se tornaram uma parte tão importante da vida que o design pode ir além de dizer aos usuários o que fazer, uma IU pode finalmente ser uma ferramenta, um mentor. O design plano há muito tempo se caracteriza pelo uso de cores de blocos arrojados, mas com a introdução do iOS7, os gradientes assumiram seu lugar no mundo do design plano sem bordas, extraindo a elegância do estilo berrante.
Por fim, terminarei este artigo com um site que faz as coisas de maneira um pouco diferente. Thibaud é um desenvolvedor de criativos que criou um construtor de sites de portfólio conhecido como Pikibox. O site é extremamente amigável ao toque, mas sem dificultar a sua acessibilidade aos usuários de desktop, em dispositivos touchscreen menores, no entanto, o usuário é enviado para um redirecionamento focado com uma interface móvel.
O design simples funciona maravilhosamente em mostrar todo o seu portfólio de uma maneira profissional, mantendo um visual novo e divertido que é extremamente intuitivo. Naturalmente, uma grande parte do projeto está nas mãos do usuário, sendo capaz de alterar a localização da navegação e ajustar como ela é usada espacialmente, o que alguns diriam que não constitui exatamente uma escolha de design. A versão desktop vem em quatro estilos, e eu convido você a brincar com eles e tirar suas próprias conclusões sobre se isso é simplesmente indeciso ou altamente criativo.
Quais compromissos você fez como resultado das telas sensíveis ao toque? O estado de foco é uma coisa do passado? Deixe-nos saber nos comentários.
Imagem em destaque / miniatura, imagem de toque via Shutterstock.