Como os usuários navegam em um mundo Touch Screen

A maneira que os visitantes do site interagir com suas páginas e navegar seus links é dramaticamente diferente em um iPhone ou iPad do que um computador desktop ou laptop. Os visitantes do site usando um iPhone ou iPad estão usando seus dedos - e não um mouse, teclado ou caneta. Isso significa que as ligações devem ser fáceis de identificar e grande o suficiente para que os usuários não clicar acidentalmente em muitos de uma vez com a ponta dos dedos.

Também tenha em mente que efeitos de sobreposição não funcionam da mesma forma em um iPhone ou iPad como fazem em um navegador de desktop. efeitos de sobreposição e efeitos de foco semelhantes, que causam algo aconteça como um usuário rola o cursor sobre uma imagem ou outro elemento em uma página da web, são automaticamente convertidos em "ON clique em" eventos em um iPhone ou iPad.

Nesta figura, você vê uma técnica de desenho comum na web - uma fileira de imagens em miniatura que estão ligadas a versões maiores. No seu computador, você iria rolar o cursor sobre cada imagem para visualizar a Versão maior em um iPad esses eventos de sobreposição seria convertido para links, desencadeada pelo toque de um dedo.

image0.jpg

Projetar seus links para o trabalho na tela de toque, e certifique-se de testar se efeitos de sobreposição e menus drop-down pode ser ativada com o toque de um dedo, bem como um mouse.

Para facilitar a navegação para o iPhone e iPad visitantes, você precisa

  • Faça ligações fáceis de clicar em: links separados com espaço suficiente entre eles para torná-lo mais fácil de tocar-lhes usando apenas um dedo. (A título de orientação, a Apple recomenda que as ligações ser definido para ocupar pelo menos 44 pixels por 44 pixels de espaço.)

    Esta recomendação é a mesma tanto para o iPhone e iPad porque é com base no tamanho de um dedo, não na resolução do dispositivo ou o tamanho da tela. (Apesar de alguns dedos são mais gordas do que outros, 44 pixels é uma boa orientação.)

  • Faça ligações fácil de ver: links Estilo de modo que eles são fáceis de distinguir de outros textos e elementos em uma página. Lembre-se que os visitantes podem ser distraído ou com pressa e pode estar em condições de pouca luz ou, pior, a luz brilhante quando usando um desses dispositivos altamente portáteis. Distinguir links usando texto e imagens que contrastam com o fundo.

  • Organizar links: Grupo links para elementos relacionados juntos, e se você tem um menu sub-navegação em um site, organizar os links em suas próprias seções, facilmente reconhecidos.

  • Na tela menor do iPhone, menus de navegação lugar na parte inferior da tela, não no topo: links de navegação podem ocupar muito espaço em uma tela móvel.

    Ao invés de desordem no topo de seu projeto com links, incluir um único botão de menu na parte superior de cada página, como mostrado neste projeto, e criar um link que salta para a parte inferior da página, onde você pode incluir mais links sem enterrando o conteúdo.

    image1.jpg

O design mostrado nesta figura foi criado para Microsoft pelo talentoso designer Sia Ea, que trabalha em Ansible Mobile.

menu