it-swarm-pt.tech

Projetando para o iPad

Gostaria de tornar meu site acessível a pessoas que possuem os dispositivos iPad ou outros iOS .

Que considerações eu preciso levar em consideração ao projetar uma interface de usuário compatível com o iPad ou iOS em geral?

15
George Stocker

Confira pensamentos de Jakon Nielsen sobre o assunto . O vídeo vinculado na parte inferior tem apenas 3 minutos e é interessante, se não diretamente útil.

Pensamentos gerais (não há fatos para comprovar isso além da experiência pessoal):

  • Se você precisar voltar a um design para outra plataforma, retorne aos designs de PC, NÃO aos modelos de iPod. Se você conseguir um iPad (em breve), tente navegar no Amazon.com padrão no iPad. Ele retorna à interface do usuário padrão do iPod Touch/iPhone, que possui botões de preenchimento horizontal com texto à direita e é basicamente inutilizável.
  • É mais fácil ver coisas pequenas do que clicar nelas. Na minha própria experiência, a maioria dos textos legíveis não é clicável, e muitas vezes preciso ampliar os links (por exemplo, na Wikipedia).
  • Teste seus desenhos em retrato e paisagem!
  • Mover as mãos requer um pouco mais de energia física (e é menos preciso) do que mover o mouse.
  • Usar várias guias é mais difícil do que com o PC (embora provavelmente mais fácil do que com o iPhone). Os links que afastam o usuário do site provavelmente farão exatamente isso; não espere que eles voltem tão cedo.
  • Torneiras acidentais são mais comuns que cliques acidentais.
  • Digitar (mesmo para pesquisa) é mais difícil do que com um teclado.
  • Os vídeos incorporados do YouTube funcionam.
  • Lembre-se da base de usuários que compra iPads e projeta para eles.
  • Atualização: Existem outros navegadores da web. 95% dos usuários provavelmente usam o Mobile Safari, mas pode valer a pena testar em alguns outros. Por exemplo, acabei de descobrir que os sites do Stack Exchange não funcionam (não é possível postar perguntas) em Atomic Web Browser .

Boa sorte!

14
Robert Fraser

Isso se aplica mais à sua pergunta geral da interface do usuário:

Pense "toque, não clique". Como você (ou seus clientes em potencial) usaria o aplicativo com seus mãos? Há uma diferença fundamental entre apontar para algo com o mouse e apontar para algo com a mão. Talvez faça os controles mais importantes do lado para que as pessoas possam alcançá-los facilmente? Experimente diferentes estruturas de arame e peça às pessoas para avaliarem a facilidade de uso. O teste do usuário no início do processo pode ajudar bastante a refinar seu design.

8
Scott M.

Eu escrevi um blog sobre as coisas a serem observadas ao projetar sites otimizados/prontos para o iPad. Você pode achar útil.

3
Jin

O iPad foi projetado para navegar na web. A tela grande permite visualizar toda a largura da página da web. Portanto, o design da página deve ficar bem em um iPad.

Para o iPhone, iPod Touch, você pode considerar criar um design diferente, criando uma interface do usuário semelhante aos aplicativos nativos do iPhone. Existem ferramentas que você pode usar para tornar isso possível, mas será muito trabalhoso. Confira Sencha Touch , que também pode ser usado para iPads.

Se você não quiser usar algo como o Sencha Touch, outra coisa a considerar é que a interação do usuário é bem diferente com esses dispositivos. Eles são baseados em toque e não em mouse. Um exemplo é que os efeitos de foco não funcionam com um dispositivo baseado em toque. Além disso, os cliques do mouse são diferentes da inação de toque que o navegador no iOS captura. Isso significa que você pode melhorar a interação do usuário, personalizando o JavaScript usado para iOS para torná-lo mais nativo e intuitivo.

A Apple também criou um Human Interface Guide para seus aplicativos nativos no iOS. Seria uma boa ideia analisar isso, pois é isso que os usuários esperam dos aplicativos nativos. Ter páginas da web em conformidade com isso ajudará a entender seu site.

3
googletorp

Não se esqueça do tamanho da tela e dos diferentes layouts possíveis: Layout CSS do iPad com modos de orientação paisagem/retrato

2
Kostya

Gostaria de acrescentar mais duas questões, especialmente em relação à adaptação de um site ou aplicativo existente, em vez de criar um novo - eles podem parecer triviais, mas ainda assim:

  • Verifique se o site ou o aplicativo não responde às ações do mouse sobre o mouse (como dicas de ferramentas)
  • Lembre-se de que não há clique direito (menos comum na Web, mas às vezes encontrado em aplicativos da Web)
1
Dan Barak

Os elementos precisam ser maiores do que em um aplicativo de desktop, porque o dedo é menos preciso que o mouse.

Tendo usado alguns aplicativos gráficos recentemente, vi que pode ser muito difícil colocar objetos com precisão com os dedos, porque eles obscurecem o objeto que você está movendo. Uma maneira de corrigir isso, como parece Apple fez, é começar a mover-se apenas depois de mover o dedo um pouco, para que ele não fique mais em cima do objeto que você move).

A seleção múltipla é muito problemática no momento. Não gosto da abordagem Apple de tocar em um objeto com um dedo e tocar em vários objetos com o outro para criar uma seleção múltipla. Ela se desfaz quando você precisa de mais de 4-5 objetos. A seleção de arrastar pode funcionar melhor: por exemplo, guia uma ferramenta de seleção primeiro e depois arraste a seleção de vários objetos.

1
Erik Engheim