Lista com layout de retângulo arredondado:

mostra a informação separada em caixas com cantos arredondados que se distinguem do fundo. Este tipo de layout é útil para mostrar pequenos grupos de informação relativos a um tópico. Pode ser utilizada como tela de destino de uma lista margem a margem. Na figura 15 há um exemplo deste tipo de lista.

Figura 14: lista com layout de margem a margem

(APPLE, 2008c) Figura 15: lista com layout de retângulo arredondado (APPLE, 2008c)

- Ajustar a interface para os formulários nativos: em certas circunstâncias o Safari fornece aos usuários algumas conveniências nativas como um teclado, uma barra de navegação, um assistente de formulário ou menu pop-up. Este fato deve ser levado em conta quando se

projeta uma interface para o iPhone, pois não é necessário replicar estes componentes na aplicação ou página web.

- Teclado e assistente para formulário: quando o usuário toca num elemento de entrada de dados numa página web, o Safari automaticamente mostra o teclado e um assistente de formulário no lugar na barra de botões. No assistente de formulário há os controles que os usuários utilizam para se mover entre os controles e descartar o teclado. Quando o teclado e o assistente de formulário estão visíveis, a área disponível para visualização da página ou aplicação para internet se reduz (abaixo do campo de entrada de URL e acima do assistente de formulário, como pode ser visualizado abaixo na figura 16).

Figura 16: medidas da tela quando um teclado é mostrado

da orientação retrato (APPLE, 2008c) Figura 17: o Safari no iPhone mostra uma lista com rolagem quando uma seleção de controle num

menu pop-up é selecionada (APPLE, 2008c)

Na orientação paisagem, os valores são diferentes: a altura do teclado é de 162 pixels e a do assistente de formulário 32 pixels. O teclado mostra um botão de retorno no canto inferior direito. O rótulo deste botão pode mudar, de acordo com o tipo de controle de entrada de dados.

- Menu pop-up: quando os usuários tocam num controle de menu pop-up em uma página ou uma aplicação para iPhone, o Safari automaticamente mostra uma lista com estilo exclusivo como mostra a figura 17.

- Criação de controle de formulários customizados: o mecanismo WebKit que o Safari possui permite a criação de controles de formulário customizados. Utilizando-se CSS, pode-se customizar: caixas de seleção, campos de texto, elementos de seleção e outros controles específicos que são mostrados no iPhone. Deve-se projetar controles que sejam fáceis de usar,

atrativos e que mantenham consistência com as aplicações nativas do iPhone e que acentuem a mensagem apresentada aos usuários.

Uma interface agradável encoraja os usuários a retornarem a página web ou aplicação, por isso, conhecer a audiência ajuda o projeto de controles apropriados na interface com o usuário.

- Esteja consciente dos padrões de estilo de controles: o Safari fornece, automaticamente, estilo de controles para formulários com padrão iPhone (exemplos na figura 18). Apesar de parecerem com fundo branco, por padrão, as caixas, os botões e os elementos de seleção aparecem com fundo transparente. Esta característica pode ser mudada por CSS.

Figura 18: Estilos de controles padrão renderizados pelo Safari no iPhone (APPLE, 2008c)

- Forneça uma solução de navegação customizada: a navegação é uma necessidade tanto nas páginas quanto nas aplicações para iPhone. A combinação das formas com as quais o usuário interage com o iPhone e os tamanhos de tela do aparelho fazem com que uma navegação precisa seja essencial. De acordo com as melhores práticas de design e os princípios de simplicidade e foco deve-se evitar requisitar que o usuário navegue por muitas páginas para chegar ao que lhe interessa.

Deve-se tomar cuidado com o botão voltar no iPhone: quando o usuário toca nele, o Safari abre o último site visitado e não a última página visitada de um site. Pode-se resolver esta questão projetando um controle customizado que ajuda o usuário a navegar entre as páginas de um mesmo site.

Para se permitir uma navegação customizada deve-se (ver figura 19):

- em cada página (incluindo a primeira), colocar um título claro e sucinto em cada link para a página subseqüente;

- assegurar que o título de cada página subseqüente seja idêntico ao título usado no texto de link.;

- adicionar um controle customizado de navegação no canto superior esquerdo de cada página (com exceção da primeira) e rotulá-lo com o título da página visitada pelo usuário previamente.

Figura 19: controle customizado de navegação (APPLE, 2008c)

As aplicações embutidas utilizam este método de forma eficiente o que significa que os usuários já estão acostumados a este tipo de navegação.

- Preste atenção no texto: para a maioria das páginas de internet, o zoom automático que o Safari faz no iPhone (como resposta ao gesto do usuário) é suficiente para permitir que os usuários leiam o conteúdo com facilidade. De qualquer modo, recomenda-se seguir as melhores práticas de design para web, utilizando letras com formato, cor e tamanho que sejam fáceis de ler e, ainda, o texto em formato de coluna. As seguintes diretrizes devem ser utilizadas numa aplicação web para iPhone (para assegurar que o texto seja fácil de ler e ajudar o usuário a focar sua atenção no conteúdo):

- utilizar letras entre 17 a 22 pixels;

- utilizar negrito para ênfase, para delinear itens de uma lista ou para mostrar hierarquia ou um tipo de ordem;

- criar cada rótulo de forma sucinta, começar com letra maiúscula e não usar dois pontos;

- alinhar o texto à esquerda, especialmente num layout em forma de lista;

- evitar o estilo sublinhado para os links, pois o texto pode aparecer agrupado.

Estas recomendações ajudam a economizar espaço na página de internet ou aplicação para iPhone e deixam o texto mais legível (APPLE, 2008c).

Neste capítulo foi apresentado o conceito de interação móvel, os tipos de dispositivos, os elementos que fazem parte da inteface de um dispositivo móvel, além das características de seus usuários, o contexto de uso móvel e, por fim, as diretrizes (gerais, específicas de categoria e específicas de produto) para o design de interfaces de dispositivos móveis.

Uma vez estabelecidos os conceitos chave para o design de interface de dispositivos móveis, na seqüência são abordadas questões sobre como avaliar estas interfaces. Para isso, no próximo capítulo, são apresentadas as definições de ergonomia e de usabilidade, a diferença entre problema de ergonomia e problema de usabilidade e os métodos e as técnicas de avaliação que são utilizados nesta área do conhecimento.