8 de abril de 2011

Erros a evitar na interface com o usuário de aplicações web para smartphones e tablets

Está cada vez mais complicado projetar e implementar sistemas para a Web. Já era problemático por causa da infinidade de versões de navegadores, cada um com sua visão particular de como representar os padrões definidos por HTML e CSS. Agora, a popularização de smartphones e tablets vem acrescentar ainda mais variáveis à equação pois esses aparelhos estão chegando ao mercado com uma imensa variedade de resoluções de tela - além, claro, de muitos fabricantes terem suas próprias versões de navegadores exclusívas para dispositivos móveis.

Outro fator introduzido por esses dispositivos é a forma de interagir com o usuário. Eles normalmente são touch screen, o que significa que não há um ponteiro de mouse para nortear a navegação - ela é feita através de toques com os dedos e o usuário é livre pra tocar onde bem entender. Isso certamente traz novas preocupações aos desenvolvedores.

Mesmo assim, desenvolver com HTML e CSS ainda é a melhor opção se você quer que seu sistema possa ser utilizado em uma gama mais ampla de dispositivos. A alternativa seria criar aplicações exclusivas para um determinado aparelho mas aí seu sistema ficará restrito a ele já que cada fabricante tem um SDK próprio.

Segue abaixo a tradução de parte de uma matéria publicada no site Infoworld.com sobre os erros mais comuns cometidos por quem desenvolve para Web focando esse cenário caótico de dispositivos. A matéria original completa em inglês pode ser acessada neste link.

Erro de interface Web 1: Uso de efeitos em elementos sob o cursor do mouse
Em algum momento, desenvolvedores web se apaixonaram pela ideia de destacar áreas da página ou só exibir uma conteúdo quando o usuário passar com o cursor do mouse sobre um componente específico. O problema para smartphones e tablets deveria ser óbvio: quando não há um cursor de mouse, não há forma de se passá-lo sobre as tais áreas.

Isso não significa que você deva evitar o uso desses efeitos. Mas, para cada efeito de destaque ou de exibição de conteúdo associado à posição do cursor do mouse, deveria haver um outro evento acionado pelo toque e que fizesse essencialmente a mesma coisa para aqueles usuários que dispõe de telas sensíveis ao toque. Usuários de smartphones não deveriam ser penalizados com uma nova carga da página para cada nível de navegação só por que você projetou seus menus para funcionarem exclusivamente com um mouse.

Erro de interface Web 2: Usar widgets e controles customizados
Projetistas adoram dar uma aparência exclusiva aos seus botões e outros widgets. Mas, padrões de interface gráfica diferem de uma plataforma para outra, e, quando controles não são prontamente identificáveis e acessíveis em cada dispositivo, a usabilidade fica sofrível.

Barras de rolagem customizadas são um exemplo particularmente notável. Ocasionalmente, os projetistas sobrepõem os controles padrões usando JavaScript, substituindo-os por outros widgets mais elegantes, leves e visualmente mais atraentes. O problema para usuários de tablets é duplo: não só widgets minúsculos são mais difíceis de se alcançar com o dedo como também usuários de tablets não usam as barras para produzir uma rolagem; eles simplesmente arrastam o dedo pela tela. Forçá-los a usar seu controle customizado só deixa sua interface capenga.

De modo similar, não dê como certa a presença de qualquer dispositivo de entrada. Caixas de diálogo, por exemplo, deveriam ter sempre algum controle visualmente identificável para fechá-las. Smartphones e tablets até podem tecnicamente possuir um teclado mas raramente vêm com uma tecla Escape.

Erro de interface Web 3: Ter muitas áreas com rolagem
Visualizar websites em telas pequenas frequentemente significa ter que fazer alguma rolagem para vê-la por inteiro. Como mencionado antes, entretanto, lembre-se que usuários de tablets fazem a rolagem arrastando o dedo pela tela. e não através de um componente visual em particular. Quando você divide a página em múltiplos painéis, cada um podendo ser rolado de forma independente, sua interface gráfica pode rapidamente se tornar um campo minado. Uma parte do conteúdo pode rolar num arrastar de dedo e outra parte rolar em sequência, dependendo de onde o dedo do usuário tocou primeiro na tela. Melhor manter o layout o mais simples possível ou, no mínimo, ter certeza de que há margens de um bom tamanho para garantir que o usuário possa escolher com segurança qual painel deve ser rolado ou, ainda, se quer rolar a página toda.

Erro de interface Web 4: Ter um layout de texto inflexível.
Inúmeros projetistas já me explicaram o layout de seus websites em termos precisos das medidas em pixels e regras de tipografia suiças. Se isto nunca foi boa prática para a web - onde usuários podem ajustar a janela do navegador e até mesmo trocar o tamanho das fontes à vontade -, é especialmente uma péssima ideia se você quer que seu site seja visualizado em smartphones.

O navegador Android, por exemplo, tem por padrão um modo em que tentará adequar o comprimento de uma coluna de texto para que caiba no comprimento de tela do aparelho, independente de quaisquer especificações CSS existentes na página web. Se você não levar isso em conta e esperar que todos os elementos visuais se alinhem exatamente do mesmo jeito que num navegador no desktop, você acabará deixando os usuários de smartphones com grandes áreas contendo apenas espaços em branco, o que efetivamente poderá esconder alguns controles e tornar a interface obscura.

Erro de interface Web 5: Fazer assunções sobre o formato da tela.
Um web designer se vangloriou para mim de que ele gosta de estar na vanguarda da tecnologia, sendo esta a razão para que ele projetasse sites que ficam com a melhor aparência nos mais modernos monitores widescreen de LCD. Mas, mesmo que você desconsidere as pessoas que usam monitores mais antigos, você não pode estar na vanguarda da tecnologia se ignorar usuários de dispositivos móveis.

Muitos smartphones podem automaticamente intercambiar entre os modos porta-retrato (vertical) e paisagem (horizontal), dependendo de como o usuário está segurando o aparelho. Além disso, alguns usuários odeiam a função de intercambiar e a desabilitam - caso no qual é melhor você esperar que eles tenham escolhido o mesmo modo para o qual seu site foi desenhado. Fazer assunções sobre o formato de uma página funciona bem no mundo da impressão, mas é uma péssima ideia na web, onde você não sabe o tamanho do papel.

Erro de interface Web 6: Carregar muitas imagens de antemão
Que dó dos pobres usuários de smartphone: não só o acesso deles à internet não é tão rápido quanto a conectividade terrestre como cada vez mais operadoras de celular estão limitando o uso de dados e também impondo taxas extras para o acesso excedente. Smartphones também têm limitação na capacidade de memória. Enquanto faz sentido usar JavaScript para carregar antecipadamente uma sequência de imagens para um slideshow em navegadores no desktop, isso é um tanto quanto grosseiro para com usuários de dispositivos móveis - mais ainda se as imagens são projetadas para aparecer somente quando o usuário passa o ponteiro do mouse sobre um determinado componente - o que, é claro, usuários de tablets não poderão fazer de qualquer maneira.

Erro de interface Web 7: Usar Flash
Odeio dizer isto, mas Flash ainda não tem lugar em dispositivos móveis. Notadamente, o iOS dos aparelhos da Apple não suporta conteúdo em Flash, mas mesmo os aparelhos Android que realmentes suportam Flash oferecem um desempenho apenas medíocre. Pior, aplicações Flash apresentam os problemas de interface expostos anteriormente com mais frequência do que os sites HTML puros. Sinto muito, fãs da Adobe: com o advento do HTML 5, os dias do Flash na web estão contados.


Um comentário :

José Ricardo disse...

Post realmente interessante e assino em baixo oq vc disse, ADOBE vai ter de pensar em HTML 5 pra entrar no mercado ou inovar novamente.
Força ae e sucesso.

Postar um comentário

OBS: Os comentários enviados a este Blog são submetidos a moderação. Por isso, eles serão publicados somente após aprovação.

Observação: somente um membro deste blog pode postar um comentário.