Sistemas de Navegação em Smartphones: Universidade Federal Do Paraná Departamento de Design

Universidade Federal do Paraná
Departamento de Design
Sistemas de navegação em smartphones

um guia teórico-prático de design
Stephania Padovani
Paula Rodrigues Napo
Curitiba, 2016
Padovani, S. & Napo, P. R. | Sistemas de navegação em smartphones: um guia teórico-prático de design | 2016
Orientação ao professor
Sinta-se, completamente à vontade para utilizar este guia como material
didático em sua disciplina ou como material de apoio para seus
orientandos de TCC, PIBIC etc, desde que fazendo a devida citação.
Este guia foi resultado de um projeto de pesquisa apoiado com
recursos de órgãos de fomento públicos, com a participação de
professores e alunos de uma instituição pública, portanto, consideramos
que ele deve estar disponível gratuitamente para quem necessitar /
desejar consultar e/ou aplicar as informações nele contidas.
Assim, fique também à vontade para disponibilizá-lo em pdf para

seus alunos, enviar por e-mail, pendurar no drive...
Gostaríamos também de receber suas críticas e sugestões para que
possamos aprimorar continuamente o guia.
Para citar o guia:
PADOVANI, Stephania.; NAPO, Paula Rodrigues. Sistemas de navegação

em smartphones: um guia téorico-prático de design. Material didático-
instrucional de apoio à disciplina de Interação Humano-Computador.
Departamento de Design, Setor de Artes, Comunicação e Design,
Universidade Federal do Paraná. Curitiba, 2016.
2
Da origem e dos objetivos deste guia

Este guia é um dos produtos do projeto de pesquisa desenvolvido junto
ao Departamento de Design da Universidade Federal do Paraná e
intitulado Navegação em smartphones: uma abordagem centrada no
usuário.
O projeto foi desenvolvido no período de 2013-2015 e contou com
o apoio financeiro do CNPq (Conselho Nacional de Desenvolvimento
Científico e Tecnológico) na forma de bolsas de Iniciação Científica e de
Produtividade em Pesquisa.
No decorrer do projeto, realizamos um estudo analítico de sistemas

de navegação em smartphones e ensaios de interação com 80
participantes. Os resultados nos subsidiaram a redigir o guia que você
tem em mãos, ou seja, todas as afirmações que aparecem nas páginas
seguintes têm como base a pesquisa analítica ou empírica conduzida por
nós ou consultada na literatura técnico-científica.
Este guia tem como objetivo auxiliá-lo na tomada de decisões

durante a fase de definição das características do sistema de navegação
do projeto de interface para smartphone que você tem em mãos, seja
ele uma aplicação nativa, um aplicativo para web ou híbrido.
Para cada parte do projeto, explicamos quais elementos precisam
ser definidos e trazemos recomendações para que você decida como
configurá-lo. Sim, quem decide é você. Nosso objetivo é apresentar
opções e não fornecer padrões ou modelos prontos para serem
incorporados à interface.
Este guia foi revisado por vários colegas da academia, buscando que
se tornasse, progressivamente, mais claro e fácil de entender e aplicar.
Mesmo assim, sempre surgem dúvidas e questionamentos sobre o
conteúdo e/ou sua forma de apresentação. Ficaríamos muito satisfeitos
em receber suas dúvidas, comentários, críticas e sugestões,
presencialmente no Departamento de Design da UFPR ou através do e-
mail s_padovani2@yahoo.co.uk.
Boa leitura e bom trabalho,
Stephania Padovani
Paula Rodrigues Napo
3
Conteúdo
0 | Antes de começar... 4
1 | Da arquitetura à navegação global 5

1.1 | Navegação entre-nós 5
1.2 | Guidelines para a navegação entre-nós 9
1.3 | Navegação intra-nós 11
1.4 | Guidelines para a navegação intra-nós 15
2 | Detalhando os elementos da navegação 20

2.1 | Áreas sensíveis 22
2.2 | Indicadores de localização 34
2.3 | Feedback 38
Referências 40
Apêndice | Recursos adicionais

A | Princípios de design
B | Modelo descritivo
C | Checklist de avaliação
D | Roteiro para avaliação com usuários
4
0 | Antes de começar...
A primeira coisa de que precisamos é ter certeza de que você sabe o que
é um sistema de navegação. O termo é coloquialmente utilizado se
referindo a sistemas GPS (Geographic Positioning System) e de
orientação digital, como, por exemplo, o que você deve ter em seu
carro. Mas não é a isso que estamos nos referindo. Portanto, iniciamos
nosso trabalho com um pequeno esclarecimento terminológico.
De forma simplificada, podemos afirmar que sistema de navegação
é um conjunto de elementos que o usuário utiliza para se deslocar de
um ponto a outro, dentro de um sistema digital. Fazem parte desse
sistema, por exemplo, as áreas sensíveis (e.g., links textuais, botões), os
indicadores de localização (e.g., títulos, breadcrumbs), as ferramentas
suplementares (e.g., mapas, índices, busca) e as ferramentas de retorno
Meister, D. (1999). The
(e.g., botão voltar ou home). E por que dizemos que esses elementos
history of human factors juntos formam um sistema? Meister (1999) define sistema como uma
and ergonomics. London:
entidade composta de sub entidades que trabalham em conjunto (e
Lawrence Erlbaum.
interagem) para atingir uma meta que isoladamente não conseguiriam
produzir. Em resumo, queremos dizer que os elementos precisam ser
pensados em conjunto, um complementando o outro, de forma a ajudar
a movimentação e a orientação do usuário.
Agora que já estamos de acordo sobre o que é um sistema de
navegação, devemos assegurar que você já tem o material necessário
para iniciar o projeto. Você vai precisar de:
inventário de conteúdo, com todas as informações, funções e
ferramentas que precisam constar no sistema;
arquitetura da informação (figura 01), contendo todos os nós de
informação e suas respectivas ligações.
Figura 01 | exemplo simplificado de arquitetura da informação
5
1 | Da arquitetura à navegação global

De posse da arquitetura da informação, iniciamos a definição da
navegação global, ou seja, de como os usuários poderão se deslocar
entre os nós de informação (navegação entre-nós) ou acessar conteúdo
adicional dentro de cada nó de informação (navegação intra-nós).
É importante que ao iniciar a definição de navegação global, você

esteja seguro sobre sua arquitetura da informação. Preferencialmente,
Cardello, J. (2014) Low que você a tenha desenvolvido utilizando métodos de design
Findability and
Discoverability: Four Testing
participativo e tenha avaliado a arquitetura junto aos usuários finais.
Methods to Identify the Caso você não tenha avaliado sua arquitetura, execute alguns testes
Causes. Disponível em:
antes de começar a definir a navegação global. Os métodos mais
http://www.nngroup.com/art
icles/navigation-ia-tests/ utilizados para avaliação de arquitetura da informação são o card sorting
Acesso em: 01.01.2015. e/ou o tree testing (Cardello, 2014).
1.1 | Navegação entre-nós

Padovani, S.; Puppi, M.; O primeiro passo na definição da navegação global compreende a
Schlemmer, A. (2014).
Proposta de modelo definição da navegação entre-nós. Navegar entre-nós significa deslocar-
descritivo para se de um nó a outro dentro da estrutura de informações do sistema. As
caracterização de sistemas
de navegação em
categorias da navegação entre-nós, conforme Padovani et al. (2014), são
smartphones. In: Anais do as seguintes:
o
6 CIDI. São Paulo: Editora
Blucher, 2014. lateral (entre nós de mesmo nível);
descendente (de nós superiores para nós inferiores);
referência cruzada (entre nós sem relação direta na estrutura);
retronavegação cronológica (voltar na ordem inversa em que os

itens foram visitados – usualmente é a função do botão voltar);
retronavegação hierárquica (voltar subindo os níveis
hierárquicos na estrutura – usualmente é a função do botão up
ou da tecla clear em celulares mais antigos);
ferramenta suplementar (e.g., mapa, busca, histórico).
Na figura 02, ilustramos algumas dessas categorias.
6
mapa navegação descendente
ferramenta
suplementar
avanço ou recuo linear
navegação
lateral retronavegação
referência cruzada
Figura 02 | ilustração de categorias da navegação entre-nós
Primeiramente, definimos a navegação descendente, ou seja, as

relações entre nós superiores e nós inferiores, que permitirão que os
usuários se movimentem verticalmente, aprofundando-se na estrutura
do sistema. Essas relações provavelmente já aparecem em sua
arquitetura da informação, mas é necessário reforçá-las.
Em seguida, podemos trabalhar a navegação lateral, ou seja, em

quais situações os usuários poderão se mover de uma categoria de
informações para outra, horizontalmente. As relações laterais são
importantes porque tornam a navegação mais ágil, ao permitir
movimentação entre-categorias sem que o usuário precise retornar à
página inicial.
Após a definição da navegação descendente e da navegação lateral,
podemos (se desejável) estabelecer referências cruzadas. Referências
cruzadas são ligações que estabelecemos entre nós sem ligação direta
na arquitetura da informação. Nós em diferentes ramificações de nossa
árvore ou rede, mas que têm informações em comum. Por exemplo, ao
analisar o currículo de um pesquisador, posso querer acessar o site da
conferência onde ele publicou seus trabalhos mais recentes. Referências
cruzadas também tornam a navegação mais econômica.
Até aqui, estivemos lidando com a navegação para frente, ou seja,
buscando informações novas. Mas os usuários também podem querer
retornar a partes já visitadas. Para tal, precisamos definir a
retronavegação de nosso sistema. A retronavegação pode ser
cronológica, ou seja, o usuário volta tela a tela na mesma ordem em que
as visitou, ou hierárquica, quando o usuário sobe de volta na estrutura
7
(veja a figura 03, para diferenciação entre os dois tipos). É importante

também disponibilizar volta diretamente à página inicial, para que o
usuário não tenha que retornar passo-a-passo de longas jornadas.
retorno direto
à página inicial
retronavegação
cronológica
retronavegação
hierárquica
Figura 03 | exemplos de possibilidades de retronavegação
Por fim, dependendo da complexidade do sistema que você está

desenvolvendo, é importante disponibilizar uma ferramenta de
navegação suplementar (alternativa à navegação nó-a-nó), para facilitar
a busca e movimentação no sistema. Alguns exemplos são: mapas,
históricos, índices, ferramentas de busca.
Acompanhe-nos agora em um exemplo de definição de navegação entre-

nós. Imagine que estamos projetando um site de m-commerce. Já temos
nossa arquitetura definida, a qual é composta das seguintes categorias
principais: telefonia (celulares e smartphones), informática (desktops,
notebooks e tablets) e eletroeletrônicos.
Para a navegação descendente, definimos que é possível o usuário sair
da página inicial (home) e acessar as telas iniciais das três seções: telefonia,
informática e eletro-eletrônicos, navegando verticalmente. Dentro de cada
uma dessas seções, também é possível navegar verticalmente para acessar
listas de produtos e detalhes de um produto específico. Por fim, o usuário
navega verticalmente para ter acesso ao pagamento e endereçamento do
produto. Esta parte não foi detalhada aqui porque sua arquitetura já veio pré-
definida pelo sistema de pagamento e entrega contratado.
Quanto à navegação lateral, estabelecemos que é possível o usuário

alternar entre as telas iniciais das seções. Também é possível acessar
lateralmente as listas de produtos de determinado grupo (e.g., sair da lista de
celulares e ir para lista de smartphones).
Suponhamos que o usuário tenha comprado recentemente uma câmera
digital. Ele gostaria de verificar a compatibilidade entre o smartphone que vai
adquirir e a câmera que já possui. Para isso ele utilizará uma referência
cruzada entre a tela de detalhamento do smartphone e a tela de lista de
câmeras, para localizar a sua.
8
A retronavegação inclui o mecanismo voltar página a página na ordem

visitada (retronavegação cronológica), mas também voltar ao topo da
categoria ou direto à home (retronavegação hierárquica), para possibilitar
escolher outros produtos de outras seções.
Por fim, consideramos importante disponibilizar como ferramentas

suplementares um histórico de compras e uma busca, para auxiliar o usuário
em localizar as últimas compras realizadas e agilizar a navegação na busca
pelos produtos de sua preferência.
Figura 04 | exemplo de navegação entre-nós em um m-commerce hipotético
9
1.2 | Guidelines para a navegação entre-nós

Navegação simples e ágil são termos recorrentes na literatura de
interfaces móveis. Portanto, ao definir sua navegação entre-nós, busque
facilitar a movimentação do usuário.
Para a navegação descendente, caso haja informações importantes
e bastante acessadas em níveis mais profundos da arquitetura da
informação (mais de 3 cliques para acesso), permita que o usuário utilize
shortcuts. Por exemplo, se o usuário já é cliente de um m-commerce,
permita que ele vá diretamente ao pagamento, com suas informações já
preenchidas, faltando apenas a confirmação. Sim, para situações críticas
(e.g., segurança), exija sempre a confirmação do usuário. Isso está de
acordo com o princípio de controle, um dos mais aplicados ao design de
interfaces.
Permita, ainda, que o próprio usuário defina quais são seus
shortcuts, personalizando-os. Personalização, por sinal, é um dos
princípios que devem ser tidos em mente durante todo o projeto da
interface móvel. Usuários móveis estão sempre personalizando tanto os
aspectos funcionais quanto estéticos da interface de seu smartphone.
Os resultados de nossa pesquisa com usuários apontaram nessa direção.
Para a navegação lateral, crie sempre ligações entre categorias de
mesmo nível quando o usuário precisar se movimentar entre elas
durante sua tarefa. Isso torna a navegação mais ágil e evita quebra de
fluxo, pela necessidade de retorno à home para continuar a tarefa.
Por exemplo, se um aluno estiver consultando um texto sobre
determinado tema, mas quiser ir à sessão de atividades buscar uma
relacionada ao conteúdo recém-lido, ele pode “saltar” da categoria
livros online para a categoria atividades.
Para as referências cruzadas, à semelhança da navegação lateral,

disponibilize-as sempre que isso tornar a navegação mais ágil, mas evite
excessos, principalmente se isso significar excesso de palavras marcadas
como links em texto, por exemplo, o que prejudicaria a leitura.
Por exemplo, se ao acessar um aplicativo sobre futebol, ao verificar
que um jogador se tornou artilheiro, o usuário queira mais detalhes
sobre sua performance nos últimos jogos. Essa ligação cruzada
permitiria ao usuário sair diretamente de uma categoria sobre melhores
jogadores para uma categoria sobre resumos dos jogos do campeonato.
Para a retronavegação, permita sempre retorno (a partir de

qualquer tela) utilizando a função voltar. O botão voltar deve estar
10
acessível em todas as telas, preferencialmente em local fixo na barra de

navegação. Isso foi uma solicitação unânime dos participantes de nossa
pesquisa. Além do botão voltar, também é importante permitir retorno
direto à home, para evitar excesso de retornos página a página, quando
o usuário tiver percorrido um longo caminho.
Por fim, disponibilize ferramentas suplementares de navegação.
Permita, por exemplo, que o usuário busque informações e as acesse
diretamente a partir da tela de resultados. Forneça uma busca default,
para usuários que não querem configurar nada antes de iniciar a busca.
Forneça também opções avançadas de busca, ou refinamento de busca
para usuários que desejem entrar parâmetros mais específicos.
Por exemplo, imagine que seu usuário está buscando um imóvel
para compra. Ele pode iniciar sua busca por “apartamento de 3 quartos
no bairro x”. Com sorte, achará dentro da lista de resultados algo de
interesse. Mas, muito provavelmente, precisará ser mais específico em
sua busca, selecionando, por exemplo, vaga de garagem, vista, suítes,
serviços oferecidos pelo condomínio, faixa de preço, possibilidade de
parcelamento e financiamento, entre outros aspectos. Busca básica e
avançada apareceram entre os aspectos essenciais à orientação mais
citados pelos participantes de nossa pesquisa.
Além da ferramenta de busca, os participantes de nossa pesquisa
solicitaram um histórico de locais acessados. Esse histórico permitiria
que os usuários acessassem diretamente telas específicas para repetir
operações ou consultar informações já vistas. Aplicando mais uma vez o
princípio da personalização, pense em diversas opções de filtragem
como, por exemplo, período de acesso, web X offline, mais acessados no
topo... Pense também na possibilidade de excluir alguns acessos, para
que o histórico não se torne uma lista infinita, onde encontrar qualquer
item já acessado se tornaria mais difícil que buscá-lo novamente.
Históricos costumam ser utilizados com frequência em diferentes
gêneros de sites. Em m-commerces, por exemplo, existem históricos de
produtos visualizados e de pedidos concluídos (com filtragem de acordo
com status do pedido). Em sistemas de m-learning são comuns
históricos de atividades realizadas, comunicação com tutor, avisos
postados. Em sites de m-delivery, é comum também o histórico de
pedidos, para que o consumidor não precise selecionar novamente
todas as características do produto que deseja encomendar.
11
1.3 | Navegação intra-nós

Navegar intra-nós significa movimentar-se entre os conteúdos
disponíveis dentro de um mesmo nó de informação. As possibilidades da
navegação intra-nós, conforme Padovani et al. (2014), são as seguintes:
rolagem (e.g., com barra, deslize direto na tela);
avanço ou recuo linear (e.g., botões de páginas adicionais);
sobreposição (e.g., janela sobre tela principal em fade);

área expansível-retrátil (conteúdo expandido no mesmo local do
nó, com ajuste automático na diagramação);
movimentação panorâmica (e.g., em mapas).

Na figura 05, ilustramos algumas dessas categorias.
avanço ou recuo linear
rolagem + área expansível-

retrátil
sobreposição
movimentação
panorâmica
Figura 05 | exemplos de possibilidades de navegação intra-nós
Para a definição de nossa navegação intra-nós, podemos iniciar por

qualquer uma das categorias. Diferentemente da navegação entre-nós,
em que precisamos especificar todas as categorias, para a navegação
intra-nós podemos selecionar as possibilidades que desejamos aplicar.
Nielsen,J.; Budiu, R. Para começar, é importante definir qual será seu paradigma
Usabilidade móvel. Rio de
Janeiro: Elsevier, 2014.
principal de navegação intra-nós. Você vai priorizar o uso de rolagem?
Sobreposição parece ser mais interessante? Avanços ou recuos lineares?
Simplificar sua vida e dizer que vai usar todas as possibilidades não é
uma boa solução, pois podemos cair no que Nielsen & Budiu (2014)
intitulam problema EDN (excesso de navegação), ou seja, um número
12
grande de opções de navegação que acaba por confundir o usuário

durante seu processo de movimentação.
A primeira das possibilidades de navegação intra-nós apresentadas
acima se refere à rolagem. A rolagem deve ser utilizada quando
determinado conteúdo contínuo é mais longo do que se pode visualizar
por vez na tela. Por exemplo, um texto mais longo que o comprimento
da tela, um menu de lista cujos itens não cabem todos no comprimento
da tela.
Para evidenciar a existência de rolagem, existe a opção de adicionar
uma barra estreita na lateral da tela ou indicadores temporários (e.g.,
setas, pedaço da barra de rolagem) que aparecem quando se toca na
tela. Existe ainda a possibilidade de movimentar ligeiramente o
conteúdo da tela quando o usuário a toca, para sugerir que existe
rolagem. Por fim, também é possível suprimir os indicadores de rolagem
e permitir que se role toda a tela, com o gesto de arrastar o dedo, em
qualquer parte da tela, na direção desejada. Para que o usuário saiba
que existe rolagem, neste último caso, geralmente o item final aparece
parcialmente visível. Para qualquer uma das opções, a rolagem mais
utilizada é a vertical.
Figura 06 | exemplos de possibilidades de rolagem
Uma das alternativas à rolagem é o avanço ou recuo linear. Essa

opção é geralmente utilizada quando o conteúdo, apesar de mais longo
que o tamanho da tela, já possui sub-divisões, ou seja, não é um
conteúdo contínuo, e sim discreto. Neste caso, o conteúdo é mostrado
página a página e, com o gesto de arrastar o dedo, a próxima página é
exibida. Outro termo utilizado para se referir ao avanço ou recuo linear é
carrossel de páginas.
Para indicar a existência de avanço ou recuo linear, mostra-se
sempre um pedaço da próxima página e/ou da página anterior, nas
laterais da tela. Para indicar quantas páginas existem na sequência,
utilizam-se, geralmente, indicadores de página na parte inferior da tela.
13
Diferentemente da rolagem, a modalidade mais frequente de avanço ou

recuo linear ocorre na horizontal.
Figura 07 | exemplos de avanço ou recuo linear
Quando existe algum conteúdo complementar àquele em exibição

da tela atual, ou um conjunto de funções ou ferramentas cujo uso só é
permitido naquele contexto, utiliza-se opção de navegação intra-nós
intitulada sobreposição.
Como exemplo de conteúdo complementar, temos a situação em
que um consumidor está observando um produto em um m-commerce e
gostaria de saber seu preço final já com o frete. Uma janela temporária
se sobrepõe à tela, onde ele entrará seu cep e será realizado o cálculo.
De posse da resposta, o usuário pode fechar a janela e continuar
navegando de onde se encontrava.
Figura 08 | exemplo de sobreposição
Outra possibilidade de navegação intra-nós é a área expansível-

retrátil. Esta é utilizada quando se deseja ter informação adicional sobre
14
determinado conteúdo ou quando se deseja expandir uma categoria

(e.g., de menus), como alternativa à lista em cascata.
Como exemplo de área expansível-retrátil aplicada a informação
adicional, temos a situação de listas de compras em que cada item é
apresentado de forma sintética em uma pequena área, com uma foto,
título e preço. Para obter mais detalhes, o consumidor pode clicar sobre
o sinal de + e ampliar a área para incluir informações adicionais. Apenas
o item selecionado será expandido, permanecendo o restante da lista na
visualização compacta.
Como exemplo de expansão de uma categoria, temos a situação de
aplicativos de mensagens, que apresentam, a princípio, apenas uma
linha com cada contato com o qual se estabeleceu uma conversa. Ao
tocar sobre a linha, aparecem todas as mensagens trocadas. Outro
exemplo ocorre em categorias de menus. Alguns sites apresentam
apenas as categorias principais, como um menu global. Ao tocar no sinal
de +, a categoria é ampliada na vertical, revelando todas as opções do
menu abaixo do título da categoria, onde passa a aparecer então o sinal
de –, para indicar que existe a possibilidade de compactá-la novamente.
Figura 09 | exemplo de área expansível-retrátil
Por fim, a última possibilidade de navegação intra-nós listada no

início deste tópico se refere à movimentação panorâmica, ou
simplesmente, pam. Utiliza-se essa opção principalmente para conteúdo
gráfico contínuo e que seja maior do que a área disponível da tela. Pam
e zoom podem ser utilizados em combinação. O uso do pam permite ao
usuário movimentar a imagem em qualquer direção, não apenas na
vertical ou horizontal, como é o caso da rolagem ou carrossel.
Movimentação panorâmica é comumente utilizada para mapas e
aplicativos GPS.
15
1.4 | Guidelines para a navegação intra-nós

No item anterior, explicamos em que situações devemos implementar
que tipo de navegação intra-nó. Após a seleção da(s) modalidade(s),
precisamos atentar em algumas guidelines.
No caso da rolagem, levar em consideração os seguintes aspectos:
utilizar rolagem em apenas um eixo (vertical ou horizontal);
ancorar controles e barras de navegação, ou seja, eles não rolam

junto com o conteúdo;
permitir rolagem por deslize em toda a área da tela e não
apenas sobre a barra de rolagem;
deixar sempre o elemento final parcialmente visível, para indicar
que ainda há mais conteúdo por visualizar;
indicar na barra de rolagem a quantidade já rolada e ainda por
rolar, marcando a posição do usuário no conteúdo;
fornecer feedback visual (ou em outra modalidade) para mostrar
que a rolagem chegou ao final do conteúdo.
Figura 10 | Exemplo de tela com rolagem com elementos parcialmente visíveis

e indicação da quantidade já rolada
Para a aplicação do avanço ou recuo linear (ou carrossel de

páginas), deve-se atentar para os seguintes aspectos:
passar as páginas no eixo horizontal, como ao folhear um livro,
revista etc;
deixar sempre as páginas anterior e posterior parcialmente
visíveis, para indicar possibilidade de avançar ou retornar;
16
indicar quantidade de páginas e sinalizar página atual (e.g.,

indicadores de página abaixo do carrossel);
permitir acesso direto a qualquer página do carrossel (e.g., por
seleção de indicador de página ou digitação do número);
evitar animação na transição entre as páginas, para tornar o
carregamento mais rápido;
fornecer feedback indicando que carrossel chegou ao final.
Figura 11 | Exemplos de carrossel com acesso direto (ir para ...)
Para utilização da sobreposição, é importante considerar os

seguintes aspectos:
usar janela pop-up (sem shade) para informação adicional que
precisa ser consultada junto com componentes da tela de fundo;
usar janela contextual (com shade) para informação que pode
ser consultada sem necessidade de leitura concomitante de
informações da tela de fundo;
permitir ao usuário fechar a janela pop-up, mesmo sem ter
realizado qualquer ação dentro da mesma, ou seja, permitir que
ele desista de interagir com as opções disponíveis a qualquer
momento;
não sobrepor a tela de fundo por completo, ou o usuário achará
que trocou de tela e pode se desorientar;
ao escolher a parte da tela de fundo que a janela pop-up cobrirá,
procurar manter elementos mais importantes ainda aparentes;
abrir apenas uma janela de sobreposição por vez sobre a tela de

fundo;
17
disponibilizar botão de fechar no canto da janela, ou permitir

que esta seja fechada com toque na tela de fundo.
Figura 12 | Exemplo de sobreposição com shade e botão de fechar
Em nossa pesquisa, os participantes relataram preferir a

sobreposição, ao invés da rolagem, argumentando que a tela de fundo
se mantém exatamente na posição em que estavam consultando
informação e, assim, se orientam melhor.
Para aplicação de áreas expansível-retráteis, deve-se atentar para
os aspectos a seguir:
expandir a área verticalmente;
manter o rótulo original como título da área expandida;
delimitar visualmente (e.g., box ou linha de contorno) a área
expandida;
indicar que a área pode ser comprimida novamente (e.g., sinal
de – );
evitar expansão que gere rolagem dentro do conteúdo.
18
Figura 13 | Exemplo de área expandida delimitada e com botões de + e –
Por fim, no caso de se optar pela movimentação panorâmica

(pam), os seguintes aspectos devem ser considerados:
mostrar transição, não “pular” de uma parte para outra;

não recarregar a página toda para mudar de posição, a
movimentação deve ser “ao vivo”;
se houver controles associados ao pam (e.g., tipo de

visualização, zoom), mostrar na tela;
para pams em grandes áreas, permitir que o usuário veja sua
localização no todo, com uma janela de visualização geral e
moldura delimitando a posição atual do usuário.
Figura 14 | Exemplos de ferramenta de pam
19
2 | Detalhando os elementos da navegação

Agora que já temos a navegação global definida, partimos para o
detalhamento dos elementos específicos do sistema de navegação. Isso
envolve detalhar as áreas sensíveis, os indicadores de localização e o
feedback. Antes, porém, vamos definir e dar exemplos de cada um
desses elementos.
Áreas sensíveis são aquelas que, ao serem acionadas gestualmente
pelo usuário, dão acesso à informação adicional na mesma tela
(navegação intra-nó) ou remetem o usuário a outra tela do sistema
(navegação entre-nós). São as áreas sensíveis que permitem ao usuário
se deslocar, navegar pelo espaço digital. Elas aparecem, por exemplo, na
forma de links textuais, botões em barras de navegação, ícones,
imagens, entre outros.
Figura 15 | exemplos de áreas sensíveis (links textuais em menu, ícones na

barra de navegação, logos no cabeçalho para retorno à home)
Indicadores de localização são elementos gráficos que fornecem ao

usuário informação sobre a sua posição no ambiente em relação a
outros locais que podem ser visitados. Exemplos de indicadores de
localização são: títulos nas telas, indicadores de página, breadcrumbs.
A informação fornecida pelos indicadores de localização deve
permitir ao usuário orientar-se em relação a: (a) onde ele está; (b) como
ele chegou ali; (c) para onde pode ir a partir dali; (d) como retornar a
pontos já visitados. Não é necessário que todos os indicadores de
localização forneçam informação sobre todos os aspectos (a), (b), (c),
(d), mas em conjunto devem assegurar os 4 pontos-chave da orientação.
20
Figura 16 | exemplos de indicadores de localização (títulos nas telas,

indicadores de página com marcação, breadcrumbs)
Feedback é um mecanismo que informa ao usuário sobre o estado

do sistema quando sua resposta a um input do usuário não for
imediatamente visualizável. Por exemplo, se a ativação de uma área
sensível direcionar o usuário para conteúdo multimídia que necessite ser
baixado, o sistema deve informar ao usuário quanto tempo isso vai levar
e manter o usuário informado sobre o progresso da operação. Essa
modalidade de feedback é intitulada feedback de andamento. Quando o
download estiver concluído, o sistema também necessita informar se a
ação foi concluída com sucesso ou se algum problema ocorreu. Essa
modalidade de feedback é intitulada feedback de conclusão.
Figura 17 | exemplos de feedback de andamento (animação rotativa, palavra

estática + barra de progresso animada, palavra + barra de progresso carregando
aos poucos)
21
2.1 | Áreas sensíveis – atributos e guidelines

As áreas sensíveis são elementos essenciais para a movimentação do
usuário dentro do sistema. É através delas que o usuário consegue saber
qual conteúdo pode acessar a partir do ponto em que se encontra e
acessar efetivamente este conteúdo. Áreas sensíveis mal localizadas
e/ou representadas fazem com que conteúdos importantes deixem de
ser visitados pelos usuários, ou geram idas e voltas indesejadas
enquanto o usuário navega.
Para configurar uma área sensível, é necessário definir um conjunto
de atributos: (a) disponibilidade; (b) forma de acionamento; (c)
representação; (d) agrupamento.
Disponibilidade refere-se ao quão presente e visível a área sensível
está em cada tela. Nesse sentido, pode-se optar pelas seguintes
possibilidades:
fixa (sempre presente e visível em todas as telas, geralmente é
parte da barra de navegação);
contextual (visível em algumas telas específicas, usualmente
parte de um menu temporário sobreposto de propriedades ou
ações para aquela tela) ou (visível em todas as telas mas
desabilitada quando o contexto não permite que seja ativada);
oculta (visível apenas quando o usuário toca na tela, geralmente
é parte de um menu oculto).
Mas como decidir sobre que tipo de disponibilidade utilizar? É
possível misturar diferentes tipos de disponibilidade no mesmo
aplicativo? Sim, depende da importância e da frequência de acesso da
área sensível.
Áreas sensíveis que representam ações que podem ser realizadas
em todas as telas, ou seja, são bastante frequentes, devem aparecer
fixas na barra de navegação ou no cabeçalho do aplicativo/site.
Áreas sensíveis que representam ações realizadas apenas em partes
específicas, e não em todas as telas, dever estar visíveis apenas naquela
parte e habilitadas apenas quando o contexto permitir que elas sejam
ativadas.
Deve-se evitar ao máximo o uso de áreas sensíveis ocultas, pois

estas acabam por não ser acessadas pelos usuários. Na pesquisa que
conduzimos, os menus ocultos foram mencionados pelos participantes
como o aspecto que mais prejudica a orientação e dificulta a navegação
em interfaces de smartphones. Ao invés de menus ocultos, sugerimos o
22
uso de um ícone de acesso a um menu complementar, com as funções

usadas com menor frequência. Observe os exemplos a seguir de
aplicativos com diferentes tipos de disponibilidades em áreas clicáveis.
Neste aplicativo de compra em

supermercado, por exemplo, existe uma
barra inferior com áreas sensíveis fixas
para os cinco setores do m-commerce:
home, favoritos, compras, cestinha e
checkout. A busca também se mantém
fixa, mas na parte superior da tela.
Já as áreas sensíveis específicas para cada
setor aparecem no centro da tela na
forma de menu lista apenas no setor em
que podem ser ativadas.
Figura 18 | exemplos de disponibilidade em áreas sensíveis (áreas fixas no

rodapé, menu contextual para parte específica do aplicativo)
Neste outro aplicativo de compra em

supermercado, por exemplo, a busca e o
carrinho se mantêm fixos no cabeçalho.
Áreas sensíveis específicas para o setor

atual aparecem na parte inferior da área
de conteúdo, na forma de botões
rotulados.
Para evitar o uso de menu oculto, há um
ícone fixo (no canto superior esquerdo)
de acesso a um menu complementar com
a lista de departamentos.
Figura 19 | exemplo de disponibilidade em áreas sensíveis (áreas fixas no

rodapé, menu contextual para parte específica do aplicativo)
Forma de acionamento refere-se ao gesto que o usuário deve

realizar para ativar a área sensível. No caso dos smartphones, as
principais possibilidades são as seguintes:
toque simples (tocar rapidamente a tela);
toque duplo (tocar rapidamente a tela por duas vezes seguidas);
arrasto (mover o dedo ao longo da tela sem perder contato);
23
deslize (passar o dedo sucessivamente sobre a tela, na direção

que se deseja rolar a tela);
pinça (tocar a tela com dois dedos e, mantendo contato com a
tela, separá-los ou o movimento inverso);
pressão contínua (tocar a tela e manter a pressão do dedo sobre
a mesma).
Saffer, D. (2009). Designing
gestural interfaces. Diferentemente da disponibilidade, que pode ser escolhida pelo
Sebastopol (CA): O´Reilly designer, para as formas de acionamento existem convenções, ou seja, o
Media.
usuário espera que determinados gestos desencadeiem determinadas
Villamor, C.; Willis, D.; ações e gerem determinados resultados. O quadro 01 foi montado com
Wroblewski, L. (2010).
Touch Gesture Reference
base em Saffer (2009) e Villamor et al. (2010) e sintetiza as principais
Guide. Disponível em: convenções envolvendo gestos para acionamento de áreas sensíveis.
http://www.lukew.com.
Acesso em: abril, 2015.
tipo de gesto ilustração Usos
selecionar objeto
toque único
ativar área sensível
toque duplo ativar área sensível
mover objeto
Arrasto
rolagem lenta
Deslize rolagem rápida
ampliar ou reduzir
Pinça
escala de objeto
abrir menu
pressão contínua
contextual
Quadro 01 | convenções de uso para gestos em smartphones (com base em
Android Developers:
http://developer.android. Saffer, 2009 e Villamor et al., 2010)
com/design/patterns/
gestures.html Caso você esteja desenvolvendo um aplicativo para um sistema
operacional específico, é importante consultar o guia para
iOS Developer Library:
https://developer.apple.
desenvolvedores e conferir as convenções de gestos para a plataforma
com/library/ios/documenta escolhida. O website para desenvolvedores da Android disponibiliza esse
tion/UserExperience/Conce
material gratuitamente, assim como o HIG (Human Interface
ptual/MobileHIG/Interactivi
tyInput.html Guidelines), publicação da Apple para o sistema iOS. Mais
recentemente, a Microsoft também disponibilizou documentação para
Microsoft – desenvolva
Windows apps: os desenvolvedores de aplicativos do Windows 8.1, onde também
https://msdn.microsoft.co podem ser encontradas as convenções de gestos para a plataforma.
m/pt-br/library/windows/
apps/xaml/hh465415.aspx
24
Representação da área sensível refere-se ao formato visual

escolhido para explicitar ao usuário que aquele elemento pode ser
ativado a partir do toque. No caso dos smartphones, as principais
possibilidades são as seguintes:
texto (em qualquer variação tipográfica);
botão (2d ou 3d);
imagem (e.g., fotográfica, ilustração, ícone);

representação esquemática (e.g., barra, seta);
híbrida (combinação das possibilidades anteriores).
Optar por uma das possibilidades de representação e detalhá-la é

papel do designer. Mesmo assim, é importante atentar para algumas
áreas sensíveis cuja forma de representação já se tornou convencional
no design de interfaces (e.g., rolagem, voltar, expandir conteúdo). Essas
convenções estão, em geral, associadas à forma de representação
esquemática.
Por exemplo, a área sensível que indica possibilidade de rolagem é

usualmente representada como uma barra estreita, posicionada à
direita da tela, que acompanha a movimentação gestual de deslize do
usuário e mostra quanto de conteúdo já foi visto e quanto ainda há por
vir. Diferentemente da barra de rolagem da interface de vários
softwares de computadores fixos, não é necessário o uso de setas nas
extremidades (vide figura 10).
A área sensível que indica a possibilidade de retorno (botão voltar)
é geralmente representada por algum elemento gráfico esquemático
que se assemelhe a uma seta, posicionado na barra de navegação à
esquerda da tela. No sistema iOS, ainda é possível adicionar um rótulo
dentro da seta, por exemplo, o título da tela para onde se deseja voltar,
para reforçar a função deste tipo de área sensível.
Figura 20 | exemplos de forma de representação para retorno
A área sensível que indica a possibilidade de expandir o conteúdo

dentro de um mesmo nó de informação (área expansível-retrátil) é
geralmente representada por um símbolo de + quando não expandida e
modifica-se para um símbolo de – quando já expandida (vide figura 13).
Outra opção é utilizar um triângulo com a ponta voltada para baixo que,
quando a área está expandida passa a apontar para cima, indicando que
é possível retornar à versão condensada.
25
Hoober, S.; Berkman, E. Além de atentar nas convenções, existe uma série de diretrizes na
(2012). Designing Mobile
Interfaces. Sebastopol (CA):
literatura sobre quando utilizar cada possibilidade de representação
O´Reilly Media. (e.g., Hoober & Berkman, 2012; Neil, 2012; Nielsen & Budiu, 2014).
Neil, T. (2012). Padrões de Áreas sensíveis em formato de texto, por exemplo, devem ser
Design para aplicativos
utilizadas para links embutidos ou para menus em forma de lista. Links
móveis. São Paulo: Novatec
Editora | Sebastopol (CA): embutidos são porções de texto (palavras ou expressões) que podem ser
O´Reilly Media. ativadas e levar a conteúdo relacionado em outros nós. Nesse caso,
devem ser representados por texto sublinhado ou em cor diferenciada
do restante do texto (azul tem sido a mais usual). Para menus em forma
de lista, áreas sensíveis em forma de texto também são indicadas, mas
sem o uso de sublinhado.
Figura 21 | links textuais embutidos (em azul no texto) e em menus em lista
Ao optar por áreas sensíveis textuais, deve-se atentar para a

rotulagem, adotando nomenclatura sucinta e que indique com precisão
o conteúdo ou função que serão acessados a partir da área sensível.
Já as áreas sensíveis em formato de botão devem ser utilizadas
para ativar ações, indicar status ou para selecionar atributos. O botão de
ação, quando aparecer em uma barra de aplicativo, deve vir rotulado
com o nome da ação a ser realizada e, preferencialmente, sem imagem
acompanhando. Para indicar status, recomenda-se o uso de botões do
tipo switch, que permitem ao usuário modificar o status e já visualizar o
resultado no próprio botão. Para selecionar atributos, indica-se o uso de
checkboxes, que permitem ao usuário selecionar mais de uma opção em
uma lista de atributos.
26
Figura 22 | exemplos de botões textuais na barra de navegação, checkboxes

para seleção múltipla e switches para mudança de status
Por fim, áreas sensíveis representadas por imagens são indicadas

principalmente para:
proporcionar uma visão geral das funções disponíveis (e.g.,
ícones dos aplicativos instalados no smartphone);
indicar situação para uma variável do sistema cujo status esteja

sempre em monitoramento (e.g., ícone de notificação);
representar ferramentas de uso frequente (e.g., ícone na barra
de ações);
representar ativação direta de um modo do sistema (e.g., botão
de switch);
mostrar, em miniatura, conjunto de objetos disponíveis em

determinado local (e.g., thumbnails em galerias de fotos);
diferenciar itens muito semelhantes em um agrupamento (e.g.,
fotos de contatos em apps de mensagens).
Imagens na forma de ícones são as mais frequentemente utilizadas

em interfaces móveis. Em nossa pesquisa, os ícones foram citados como
os elementos de interface que mais facilitaram a orientação e a
Gatsou, C.; Politis, A.; navegação dos usuários em smartphones. Os participantes
Zevgolis, D. (2012). The mencionaram que utilizam os ícones não só como elementos para
importance of mobile
interface icons on user navegar, mas também como pontos de referência visuais para saber em
interaction. International que ponto do sistema se encontram e para onde podem se dirigir a
Journal of Computer
Science and Applications, partir dali. A literatura especializada também corrobora a importância
Vol.9, No. 3, p. 92 – 107. dos ícones nas interfaces móveis. Gatsou et al. (2012), por exemplo,
27
destacaram uma série de vantagens no uso de ícones: facilidade de

reconhecimento; auxílio à memorização das funções disponíveis; maior
familiaridade para usuários novatos.
Para projetar ícones para interfaces de smartphones, deve

Ginsburg, S. (2011).
considerar os seguintes princípios (Ginsburg, 2011):
Designing the iPhone user
experience. New York:
percepção imediata (o usuário deve ser capaz de identificar
Addison Wesley. imediatamente que objeto está sendo representado no ícone,
antes mesmo de pensar sobre seu significado);
generalidade (o objeto representado deve ser um
representante da categoria de objetos e não de um modelo ou
marca específica, para que um maior número de pessoas possa
reconhecê-lo);
coesão (o conjunto de ícones deve guardar semelhança

semântica e gráfica, para que pareçam pertencer a um mesmo
sistema);
comunicabilidade (utilizar os elementos e a vista que mais

caracterizam o objeto representado).
princípio Exemplos
percepção
imediata
objeto representado difícil de câmera fotográfica: objeto
reconhecer facilmente reconhecível
generalidade
relógio não generalista: tipo relógio generalista (qualquer
específico - de pulso tipo): apenas face e ponteiros
coesão
objetos estáticos, representados na vista mais significativa,

bidimensional, em silhueta
comunicabilidade
vista mais significativa, com teclado em vista pouco
detalhamento suficiente para comum, pode ser confundido
reconhecer teclado de com outro tipo de teclado ou
computador dispositivo de controle
Quadro 02 | exemplos de aplicação dos princípios para projeto de ícones
Além dos princípios gerais de projeto de ícones, há diretrizes para

tipos específicos de ícones em interfaces de smartphones. Dentro de
28
uma interface de dispositivo de interação móvel, existem categorias

específicas de ícones: (a) ícones de abertura de aplicativo (launch icons);
(b) ícones da barra de ações; (c) ícones contextuais; (d) ícones de
notificação.
Ícones de abertura geralmente são posicionados em grupo (e.g.,
grid) na homepage ou na página de aplicativos disponíveis. Eles
representam visualmente os aplicativos e cada um deve ser marcante o
suficiente para se diferenciar quando posicionado junto aos outros
ícones de abertura. A tendência observada é que esse tipo de ícone
Page, T. (2014).
tenha uma leve tridimensionalidade (pequena profundidade), seja
Skeumorphism or flat
design: future directions in policromático e suas partes trabalhem com meios-tons e sombras, para
mobile device User gerar volume. Entretanto, a corrente mais recente do flat design
Interface (UI) design
education. International contradiz essa tendência. Page (2014) traz uma discussão interessante
Journal of Mobile Learning sobre esqueumorfismo e flat design.
and Organisation, 8(2), p.
130-142. Qualquer que seja a sua opção (esqueumorfismo ou flat design), é
importante que o ícone tenha contornos bem definidos, para que seja
claramente visível em qualquer fundo de tela, visto que usuários tendem
a personalizar o background. Esses aspectos representacionais servirão
para diferenciar os ícones de abertura dos ícones internos da barra de
navegação ou de menus contextuais, com visual mais simplificado.
Figura 23 | exemplos de ícones de abertura de aplicativos na tela inicial
Os ícones da barra de ações representam as ações mais frequentes

e mais importantes que os usuários podem realizar dentro de um
aplicativo. Eles devem utilizar a imagem de um objeto diretamente
relacionado à ação ou um metáfora simples que possa ser facilmente
identificada e compreendida pelo usuário. Diferentemente dos ícones de
abertura dos aplicativos, os ícones da barra de ações devem ser bastante
simplificados em termos visuais: bidimensionais (flat), monocromáticos
(preto ou branco), uso de silhueta (ao invés de outline), poucos
detalhes. Ao projetar esse tipo de ícone, considere que ele deve ser
29
apresentado em tamanho reduzido. Portanto, deve-se evitar excesso de

linhas, linhas finas e espaços em branco de tamanho reduzido.
Figura 24 | exemplos de ícones e alguns aplicados em barra de ações
Ícones contextuais são aqueles que aparecem dentro do aplicativo

em áreas específicas, ou seja, representam ações ou status específicos
para determinadas partes do aplicativo. Servem, por exemplo, para
marcar uma localização em um mapa (e.g., pin), para marcar uma
mensagem importante (e.g., estrela, flag), sinalizar possibilidade de
edição de uma informação (e.g, lápis). À semelhança dos ícones da barra
de ações, serão apresentados em tamanho reduzido e, portanto, devem
adotar características visuais simples: bidimensionais, monocromáticos
(ou com poucas cores) e com poucos detalhes.
Figura 25 | exemplos de ícones contextuais
Ícones de notificação são utilizados quando há aplicativos que

precisam informar ao usuário sobre alguma mudança de status. O ícone
de notificação pode se localizar dentro do próprio aplicativo ou aparecer
posicionado em uma barra ou área de display externa ao aplicativo, de
modo que o usuário não precisa ficar abrindo o aplicativo para conferir
se há algum dado novo no mesmo. Exemplos de ícones de notificação
são encontrados em aplicativos de mensagem, e-mail, clima.
Esse tipo de ícone deve guardar consistência gráfica com o ícone de

abertura do aplicativo (caso não seja usado o próprio ícone de abertura
para exibir as notificações), para que o usuário faça rapidamente a
associação entre notificação e aplicativo onde ocorreu a mudança de
status. A característica gráfica mais importante deste tipo de ícone é o
contraste entre o ícone em si e o elemento que se modifica para
notificar ao usuário alguma mudança de status.
30
Figura 26 | exemplo de notificação em área de display externa ao aplicativo
Figura 27 | exemplo de ícone de notificação em barra interna ao aplicativo
Por fim, agrupamento refere-se à relação da área sensível com

outras afins. Nesse sentido, a área sensível pode-se apresentar:
isoladamente (e.g., no meio de um texto, em um canto do
cabeçalho);
em algum tipo de menu ou barra (e.g., lista, grade);
em um conjunto de abas;
em uma galeria (e.g., galeria de imagens, carrossel de produtos);

em agrupamento passível de personalização (e.g., na tela de
abertura, em um grupo de atalhos definidos pelo usuário).
Mas como decidir que tipo de agrupamento utilizar? É possível

utilizar mais de um tipo de agrupamento no mesmo aplicativo?
Conforme veremos a seguir, para cada situação há um tipo de
agrupamento que é mais recomendado. Como as características
informacionais e de navegação variam ao longo do aplicativo,
certamente é possível utilizar mais de um tipo de agrupamento.
Por exemplo, o menu em grade (também chamado de springboard)

é mais indicado para a tela de abertura do aplicativo. Funciona como
uma página inicial com todas as opções disponíveis no aplicativo.
Recomenda-se no máximo 9 (7±2, limite da memória de curta-duração)
elementos para o menu em grade. Todos os elementos devem aparecer
de uma só vez na porção visível da tela, sem rolagem. Também é
importante considerar que os rótulos textuais acompanhando os ícones
ou imagens do springboard não podem ser muito extensos. Se este for o
caso, é melhor optar por um menu em lista.
Já o menu em lista é mais comumente utilizado nas telas interiores

do aplicativo. Funciona bem para áreas sensíveis que possuem rótulos
31
longos ou para aquelas que requerem sub-texto complementar.

Também é o mais indicado quando há muitos itens (mais de 9) para
agrupar, já que é possível utilizar rolagem em apenas um dos eixos. Para
listas longas de itens, recomenda-se separá-los em pequenos grupos,
(opção chamada de table view).
Figura 28 | exemplos de menu em grade e em lista (com agrupamento de áreas

sensíveis por categorias – tarefas e projetos)
Barras são recomendadas para agrupar aquelas ações que serão

realizadas muito frequentemente no aplicativo e em diversas partes do
mesmo. Recomenda-se o uso de no máximo duas barras, para evitar
obstruir o espaço já reduzido da área de conteúdo dos smartphones. A
situação mais comum é que a barra superior seja utilizada para botões
ligados à navegação e a barra inferior para ferramentas e ações.
Figura 29 | exemplos de barras de navegação na parte superior e barra de

ferramentas na parte inferior.
32
Abas são utilizadas para agrupar áreas sensíveis que carregarão

conteúdos em uma mesma tela, sobrepondo-os uns aos outros.
Recomenda-se o uso de quantidade pequena de abas (4 a 5 no máximo),
para evitar a rolagem horizontal. Caso haja necessidade de mais abas, o
último item deve aparecer parcialmente visível. O título (ou rótulo de
ícone) de cada aba também deve ser sucinto, face ao espaço reduzido.
Quanto ao posicionamento, o mais intuitivo é ter as abas na parte
superior, o que se assemelha às abas de catálogos do mundo real, de
onde provém a metáfora. Mas há restrições no posicionamento das abas
em alguns sistemas. Na dúvida, consulte o manual de desenvolvedor.
Figura 30 | exemplos de abas, com último item indicando continuidade
Por fim, o padrão galeria serve para agrupar áreas sensíveis

maiores ou mais complexas, como por exemplo, pequenas chamadas de
artigos jornalísticos, fotos, produtos com uma breve descrição textual. É
importante que o usuário possa filtrar elementos dentro da galeria e que
possa escolher sua forma de organização (e.g., por data, por relevância,
por frequência de consulta). A galeria, em geral, é mais longa do que
apenas a porção que aparece na tela, necessitando de rolagem e grade
ou movimentação por carrossel.
Figura 31 | exemplos de galerias (de notícias – com todos elementos do mesmo

tamanho) (de fotos – com elementos de tamanho diferenciado)
33
Para sintetizar todos os aspectos relativos a áreas sensíveis,

acompanhe-nos na análise das áreas sensíveis em uma tela.
O aplicativo possui duas barras de

navegação fixas. Na parte superior, está a
barra de navegação, com áreas sensíveis
na forma de botões. Na parte inferior,
está a barra de ferramentas, com áreas
sensíveis na forma de ícones rotulados.
Na área central, encontra-se o menu de
acesso às principais categorias do m-
banking, em formato de lista expansível
(por >). As áreas sensíveis da lista têm a
forma de texto + ícones e também
funcionam para notificação. Não há
menus ocultos. Todas as áreas sensíveis
são ativadas por toque único na tela.
Figura 32 | análise de áreas sensíveis em uma tela de m-banking
2.2 | Indicadores de localização – atributos e guidelines

Os indicadores de localização não participam diretamente do processo
de movimentação do usuário dentro do sistema, como é o caso das
áreas sensíveis. Mesmo assim, são extremamente importantes para a
navegação, pois auxiliam o usuário a se orientar enquanto se desloca.
Indicadores de localização mal projetados (e.g., ambíguos) e/ou mal
posicionados geram desorientação do usuário. Um usuário desorientado
pode-se tornar ineficiente em sua navegação, além de frustrado,
podendo vir, inclusive, a desistir de sua tarefa.
Para configurar um indicador de localização, é necessário definir os

seguintes atributos: (a) rotulagem; (b) marcação; (c) diferenciação.
Rotulagem refere-se à forma de nomear cada local do aplicativo. É
necessário rotular cada uma das telas com o nome do local em que o
usuário se encontra. O título deve ser sucinto e informar o objetivo geral
daquela parte do aplicativo. Recomenda-se que este título apareça na
própria barra de navegação, para evitar a necessidade de uma barra
adicional, apenas para inserir o título da tela.
Marcação refere-se à maneira de sinalizar em elementos da tela,
onde o usuário se encontra em relação às demais partes do aplicativo. A
marcação pode ocorrer, por exemplo, em aba, em item de barra, em
item de carrossel ou em indicador de página. Deve-se utilizar contraste
34
adequado entre o item marcado e os não marcados, para que a

marcação seja facilmente identificada pelo usuário.
Figura 33 | exemplos de marcação: favorito marcado em barra, apps marcado

em aba e pg 1 marcada em indicador de página.
Quando se optar pela navegação com abas, a aba em uso sempre

deve aparecer marcada. Existem algumas formas de se adicionar esta
marcação, sendo algumas mais discretas, outras mais enfáticas. Observe
algumas opções de marcação em abas no quadro abaixo.
Marcação em aba discreta, mas

com contraste suficiente: linha
grossa abaixo (de top selling).
Marcação em aba discreta, mas

com elementos que se reforçam:
outline da aba + negrito no rótulo.
Marcação em aba enfática, com 3

elementos: cor sobre ícone, linha
de contorno, background da aba.
Marcação em aba enfática, usando

vídeo reverso (negativo – positivo).
Quadro 03 | exemplos de marcação em abas.
Também é obrigatória a marcação do item selecionado, quando se

optar pela navegação por carrossel. Essa marcação pode ocorrer sobre o
próprio item do carrossel ou em indicador de páginas. O indicador de
página, neste caso, também serve para indicar a extensão do carrossel.
35
Outro aspecto importante do carrossel é indicar a existência de rolagem

horizontal, mostrando parcialmente os itens laterais ou utilizando setas.
Figura 34 | exemplos de marcação em carrosséis (carrossel único de

ferramentas | carrossel triplo de seleção de atributos).
Uma terceira forma de marcação é pelo uso de indicadores de

página. Os indicadores de página, apesar de simples, fornecem ao
usuário informações importantes: quantas páginas há por visitar, em
que página exatamente o usuário se encontra e quantas páginas já
foram visitadas. Os indicadores devem ser posicionados logo abaixo dos
elementos que se deseja marcar. Existem pequenas variações no design
desse tipo de marcação. Observe algumas opções no quadro abaixo.
Pontinhos 2D em cor chapada, com

marcação por cor diferente (neste
caso o branco).
Pontinhos 3D vazados em degradê,

agrupados em pequeno painel, com
marcação por preenchimento + cor.
Quadradinhos 2D em cor chapada,

com marcação por ícone + cor.
Quadro 04 | exemplos de indicadores de página.
Diferenciação refere-se à possibilidade de distinguir entre locais do

aplicativo a partir da utilização de atributos gráficos. A diferenciação
pode ocorrer, por exemplo, pela aplicação de backgrounds diversos, por
36
codificação cromática para cada uma das partes do aplicativo, ou ainda

pelo uso de imagens marcantes que possam atuar como pontos de
referência na orientação do usuário. A diferenciação serve para quebrar
o excesso de uniformidade; aplicativos excessivamente uniformes
exigem mais dos usuários para navegar e se localizar, pois precisam
prestar mais atenção a rótulos e títulos. A diferenciação foi citada pelos
participantes de nossa pesquisa como um dos aspectos que mais
facilitam sua orientação. Observe a seguir alguns exemplos de
diferenciação gráfica em aplicativos móveis.
Figura 35 | exemplos de diferenciação por background
Figura 36 | exemplos de diferenciação por cor na barra superior
37
2.3 | Feedback – atributos e guidelines

O feedback permite que o usuário veja o resultado de suas ações e
esteja sempre ciente do que está acontecendo com o sistema. Para
interfaces em smartphones, os tipos de feedback utilizados são:
feedback de recém-acionamento;
feedback de andamento;
feedback de conclusão / confirmação.
O feedback de recém-acionamento é aquele que permite ao

usuário verificar que realmente ativou determinada área sensível. O
sistema de ativação por toque (touch) removeu da interface móvel o
feedback tátil, presente em botões físicos do teclado ou do mouse, por
exemplo. Portanto, para saber que acionou um botão, área textual,
ícone etc, é preciso ter um feedback visual.
Para botões, por exemplo, ao serem ativados, ocorre uma animação
que sugere que o botão “afundou” levemente, por ter sido pressionado.
Para áreas sensíveis textuais, geralmente aparece uma moldura,
contornando a área ativada, ou ocorre mudança de cor. Ao tocar e
manter pressionado o fundo de determinada tela, caso exista menu
contextual oculto, aparece um símbolo semelhante a um cursor, para
informar que o menu contextual será carregado.
O feedback de andamento é aquele que informa ao usuário que
determinada ação está em curso. Não ocorre para todas as ações, mas
para aquelas situações em que uma ação do usuário não gera um
resultado imediato. Exemplos são: carregamento, instalação,
processamento de solicitação, transmissão de arquivo. Em geral, o
feedback de andamento se utiliza de animações, com rótulo textual
informando qual ação está sendo realizada. Algumas representações
também informam quanto tempo falta para concluir a ação.
Animação rotativa sem rótulo de

ação em andamento nem
previsão de conclusão.
Barra de progresso com rótulo de

ação em andamento e
porcentagem de conclusão.
Quadro 05 | exemplos de feedback de andamento.
38
Por fim, o feedback de conclusão ou confirmação é aquele que

informa ao usuário que determinada ação foi concluída ou que ocorreu
algum erro durante o processamento da ação do usuário pelo sistema.
Exemplos são: conclusão de download, conclusão de instalação,
confirmação de pagamento, confirmação de cadastro. Em geral, o
feedback de conclusão aparece em uma caixa sobreposta à tela.
Recomenda-se que esta caixa seja exibida e fechada automaticamente,
sem que o usuário tenha que interromper seu trabalho, apenas para
fechá-la.
Janela sobreposta à tela (sem

shade) com feedback de
conclusão textual e botão de
confirmação.
Janela sobreposta à tela (com

shade) com mensagem de erro
(feedback negativo) e botão de
fechar.
Quadro 06 | exemplos de feedback de conclusão.
39
Referências
Todas as referências citadas ao longo do texto já apareceram ao longo do

texto, na margem esquerda. Mas se você preferir consultá-las todas juntas,
incluímos também aqui uma lista em ordem alfabética.
Android Developers:
http://developer.android. com/design/patterns/ gestures.html
Cardello, J. (2014) Low Findability and Discoverability: Four Testing Methods to

Identify the Causes. Disponível em:
http://www.nngroup.com/articles/navigation-ia-tests/
Acesso em: 01.01.2015.
Gatsou, C.; Politis, A.; Zevgolis, D. (2012). The importance of mobile interface
icons on user interaction. International Journal of Computer Science and
Applications, Vol.9, No. 3, p. 92 – 107.
Ginsburg, S. (2011). Designing the iPhone user experience. New York: Addison
Wesley.
Hoober, S.; Berkman, E. (2012). Designing Mobile Interfaces. Sebastopol (CA):

O´Reilly Media.
iOS Developer Library: https://developer.apple.

com/library/ios/documentation/UserExperience/Conceptual/MobileHIG/Inter
activityInput.html
Meister, D. (1999). The history of human factors and ergonomics. London:

Lawrence Erlbaum.
Microsoft – desenvolva Windows apps: https://msdn.microsoft.com/pt-

br/library/windows/ apps/xaml/hh465415.aspx
Neil, T. (2012). Padrões de Design para aplicativos móveis. São Paulo: Novatec
Editora | Sebastopol (CA): O´Reilly Media.
Nielsen,J.; Budiu, R. Usabilidade móvel. Rio de Janeiro: Elsevier, 2014.
Padovani, S.; Puppi, M.; Schlemmer, A. (2014). Proposta de modelo descritivo

para caracterização de sistemas de navegação em smartphones. In: Anais do 6o
CIDI. São Paulo: Editora Blucher, 2014.
Page, T. (2014). Skeumorphism or flat design: future directions in mobile

device User Interface (UI) design education. International Journal of Mobile
Learning and Organisation, 8(2), p. 130-142.
40
Saffer, D. (2009). Designing gestural interfaces. Sebastopol (CA): O´Reilly

Media.
Villamor, C.; Willis, D.; Wroblewski, L. (2010). Touch Gesture Reference Guide.
Disponível em: http://www.lukew.com. Acesso em: abril, 2015.
41
Apêndice | Recursos adicionais

Além das explicações e exemplos que você viu até agora, pode ser que você precise de coisas
mais pontuais para lhe ajudar durante o processo de design. Esta é a ideia desse apêndice de
recursos adicionais. Aqui você vai encontrar:
A | Princípios de Design
Coleção de princípios para o projeto de interfaces em smartphones, compilados a partir da
literatura. Servem para lhe ajudar na hora de tomar decisões de projeto e também para justificar
suas decisões junto ao cliente.
Conjunto de parâmetros e atributos organizados em categorias. O modelo serve para ajudá-lo a
descrever os elementos de seu aplicativo, enquanto estiver desenvolvendo-o ou para caracterizar
outros aplicativos, durante sua análise de similares.
Conjunto de perguntas organizadas em categorias. O checklist serve tanto para realizar uma
primeira avaliação do seu aplicativo, conferindo se há algum ajuste a realizar, antes de testá-lo
com o público alvo.
D | Roteiros para avaliação com usuários

Passo a passo sobre como envolver representantes do seu público alvo na avaliação de protótipos
do seu aplicativo. Foco em protótipos de baixa fidelidade, utilizando diferentes versões de paper
prototyping.
42
A | Princípios de design
atenção dividida Utilizar o smartphone, em geral, não
é a principal tarefa do usuário.
Projete interfaces que minimizem a
necessidade de atenção: prioridade
para o reconhecimento, uso de
imagens e diferenciação.
interação eye-free Nem sempre o usuário consegue

olhar diretamente para a tela do
smartphone enquanto interage.
Utilize feedback tátil e sonoro (e não
apenas visual). Mantenha distância
entre áreas sensíveis para evitar
acionamentos equivocados.
interrupção Muitas vezes o usuário é solicitado

enquanto interage com o
smartphone. Permita que tarefas
sejam interrompidas, pausadas,
salvas (mesmo que incompletas) para
retomada posterior.
Contexto
vários ambientes Os ambientes de interação variam.
Projete pensando em diferentes
modos (áudio, silencioso) e situações
físicas (luz, ruído, vibração).
operação one-hand Na maioria das vezes, o usuário não

tem as duas mãos disponíveis para
interagir com o smartphone. Evite
movimentos gestuais complexos ou
que necessitem de acionamento
sequencial em partes opostas da tela.
movimentação Interagir em movimento diminui a

precisão do usuário. Evite a
necessidade de movimentos gestuais
muito precisos ou em alvos muito
pequenos. Exija confirmação para
ações de conseqüência grave, pois o
usuário pode ter acionado algo sem
querer enquanto se move.
43
entrada de dados Digitar na tela do smartphone, sem

feedback tátil, é uma tarefa
desagradável e ineficiente para a
maioria dos usuários. Priorize a
seleção em detrimento da digitação.
manipulação direta Usuários esperam poder realizar

ações por toque em interfaces touch.
Priorize o uso de gestos para realizar
ações, ao invés de intermediá-los por
comandos.
concisão e rapidez Usuários esperam que o tempo de

interação em mobilidade seja mais
breve que em interfaces desktop. Use
termos sucintos, diálogos com
poucos passos e destaque os
comandos mais usados, para que
sejam encontrados rapidamente.
Diálogo
condução Auxilie usuários novatos a realizar
ações básicas. Disponibilize opções
default para que estes usuários não
precisem configurar nada. Inclua
tours mostrando como navegar,
tutoriais mostrando como fazer.
controle Sempre permita que o usuário

cancele ou volte atrás (undo), quando
tiver realizado alguma ação.
feedback Mostre sempre ao usuário o

resultado de suas ações (e.g., rebaixe
o botão para mostrar que foi
acionado). Informe ao usuário o
andamento de ações que não tenham
resultado imediato (e.g., animação +
barra de progresso para monitorar
download de arquivo).
44
flexibilidade Interfaces móveis são utilizadas por

uma grande variedade de usuários,
com diferentes hábitos e
preferências. Permita que a mesma
tarefa seja realizada por diferentes
caminhos e utilizando diferentes
estilos de interação.
atalhos Agilidade é uma das maiores

exigências dos usuários em
mobilidade. Permita que os usuários
criem atalhos para as ações que
realizam com mais frequência.
estética Além da personalização funcional,

permita que os usuários dêem um
toque pessoal à estética da interface,
modificando background, cores,
imagens etc.
Persona
orientação Mudar de posição é algo corriqueiro
lização na interação em mobilidade. Permita
que os usuários optem pela
orientação retrato ou paisagem para
qualquer conteúdo ou função em
aplicativo. Permita também que
modifiquem a orientação sempre que
desejarem.
lembrança Salve as configurações e preferências

dos usuários para seus aplicativos
usados em rede. Permita que
acessem-nos do seu jeito,
independente do dispositivo em que
façam o acesso.
adaptatividade Conheça a maneira como seu usuário

interage e suas preferências (perfil de
interação). Quando ele se logar, filtre,
reposicione, sugira opções, com base
nesse perfil de interação.
45
unidade Os elementos gráficos utilizados no

aplicativo devem parecer pertencer a
um mesmo sistema. Mantenha
unidade na paleta de cores, tipografia
e estilo das imagens.
consistência Elementos de aparência semelhante

devem funcionar de maneira
semelhante. Esse princípio se aplica à
diagramação, áreas sensíveis,
ferramentas, indicadores de
localização.
agradabilidade Além de funcionar, espera-se que o

aplicativo tenha uma aparência
agradável. Isso deixa o usuário mais
predisposto a interagir.
miniaturização Uma interface móvel não é uma

interface de desktop, com o mesmo
paradigma e todos os seus elementos
Design em tamanho reduzido.
metáforas Utilize metáforas para facilitar o

aprendizado de ações e ferramentas
da interface. Assim o usuário pode
trazer seu aprendizado do mundo
real para dentro do digital.
onde estou? Informe sempre a localização do

usuário, seja por meio de um título,
marcação ou indicador de página.
Diferenciar graficamente partes do
aplicativo também ajuda a orientação
gestão de erro Quando ocorrer algum erro, forneça

mensagens de erro informativas e
gentis. Explique também como o
usuário pode corrigir a situação. Se
possível, faça com que o próprio
sistema de recupere
automaticamente do erro.
46
Prezado utilizador:
Este modelo pode ser aplicado em duas situações:
(1) durante uma análise de similares (para descrever as características dos apps concorrentes aquele
que você está desenvolvendo);
(2) durante o desenvolvimento de um app, preenchendo progressivamente as partes, conforme você
discute e define as características do app com sua equipe de projeto.
Para preencher o modelo, você deverá, em algumas situações, preencher células da tabela com texto
redigido por você mesmo e em outras marcar uma (ou mais) alternativa(s).
Gostaríamos de reiterar que esse modelo não se destina à avaliação de aplicativos, mas sim à descrição das
características do mesmo. Para avaliar seu app, aplique um checklist e/ ou realize testes com usuários.
Parte 1 | Identificação e objetivos
Nome do aplicativo
( ) app de entretenimento / jogo

( ) app social / de comunicação
( ) app de produtividade (e.g., editor de texto, calculadora)
Tipo de aplicativo ( ) app de educação
(setor ao qual se ( ) app de notícias
direcionam as principais ( ) app de compras / negócios
atividades desenvolvidas
pelo usuário do app)
( ) app de esportes
( ) app de gestão (e.g., de tempo, de projetos)
( ) app de turismo
( ) outro:
Principais
concorrentes
(lista de apps similares
de destaque / melhor
colocação no mercado)
Necessidade de ( ) app nativo (funciona integralmente offline)

acesso à internet ( ) web app (só funciona com smartphone conectado à internet)
( ) app híbrido (partes funcionam offline, outras necessitam internet)
Objetivo do
aplicativo
(principal propósito de
uso do aplicativo, ou
seja, em síntese, para
que serve o aplicativo?)
47
Parte 2 | Relação com o usuário
( ) usuário interage sem login

Necessidade de
( ) usuário precisa fazer login cada vez que acessa o app
login
( ) login é automático após primeiro acesso
Personalização ( ) não é possível personalizar qualquer aspecto do app

( ) personalização de conteúdo
(possibilidades que o
( ) personalização de estrutura
usuário tem de
modificar o app para ( ) personalização de funções / ferramentas
estar mais de acordo ( ) personalização gráfica / sonora / tátil
com sua preferência) ( ) outra:
( ) não existe adaptatividade no app
( ) existe adaptatividade
momento em que a adaptatividade ocorre:
Adaptatividade ( ) pré-interação (antes do usuário interagir com o app)
( ) durante interação (enquanto o usuário interage o app vai se
(possibilidades que o adaptando progressivamente)
app tem de se modificar
buscando se adequar ( ) pós-interação (quando retorna ao app, ele se adaptou com
melhor ao perfil ou à base em interações anteriores)
forma de interagir e
navegar do usuário) forma como a adaptatividade ocorre:
( ) exclusão (elementos são retirados do app)
( ) ocultação (elementos se tornam ocultos no app)
( ) ordenação (muda-se a ordem de apresentação dos itens)
( ) sugestão (sugerem-se opções para o usuário)
( ) representação (muda-se a forma de representação dos itens)
( ) o app não possui mecanismos de gestão de erro
( ) o app possui mecanismos de gestão de erro

antes do erro ocorrer, na forma de:
Gestão de erros ( ) advertência
(mecanismos que o app ( ) confirmação para ações inseguras
possui para prevenir,
informar sobre erros quando o erro ocorre, na forma de:
ocorridos e corrigi-los) ( ) mensagem de ocorrência
( ) alarme (e.g., sonoro)
após o erro ter ocorrido, na forma de:
( ) permissão para que o usuário corrija o erro
( ) correção do erro pelo próprio sistema
48
Parte 2 | Relação com o usuário (continuação)
Avaliação do app
pelo usuário
( ) não existe forma de avaliar o app
(formas que o usuário ( ) envio de e-mail
tem de expressar sua
opinião sobre a ( ) ferramenta de avaliação (e.g., ou atribuição de nota)
qualidade do app ou de ( ) outra forma de avaliação:
sua experiência ao
utilizar o app)
( ) não existem mecanismos de ajuda no app

Ajuda ( ) atendimento online
( ) manual digital (offline ou online)
(mecanismos que o app ( ) faq (perguntas frequentes)
disponibiliza ao usuário
para entender como ( ) tutorial
utilizar o app ou tirar ( ) visita guiada
dúvidas durante a ( ) ajuda contextual (ao pressionar itens, aparece descrição sobre o
interação)
que é possível fazer)
( ) outro mecanismo de ajuda:
Parte 3 | Escopo
Conteúdo
(lista das principais
informações incluídas no
aplicativo)
ferramentas para auxiliar navegação:

( ) busca
( ) histórico
( ) mapa
( ) marcador
( ) outra(s):
ferramentas para comunicação:

Ferramentas ( ) envio de mensagens
(ferramentas que o app ( ) compartilhamento de informação
disponibiliza ao usuário ( ) outra(s):
para realizar as
principais atividades)
ferramentas para alteração de conteúdo:
( ) editor de texto
( ) upload de arquivo(s)
( ) outra(s):
( ) outra(s) ferramenta(s) que não se enquadra(m) nas categorias

anteriores:
49
Parte 4 | Arquitetura da informação
( ) linear (telas em sequência)

...
Tipo de estrutura
...
( ) hierárquica (telas em níveis hierárquicos)
(maneira como os nós de
...
...
informação / telas estão
interligados na estrutura
do aplicativo)
( ) rede (telas interligadas sem ponto de início)
( ) híbrida (estrutura que combina características dos tipos anteriores)
Dimensionamento
Quantidade de telas do aplicativo: _______
da estrutura
(mensuração do Largura da estrutura: _____________
tamanho da estrutura,
profundidade
(quantidade de divisões – medida horizontal)
considerando
quantidade de telas e
como estão organizadas Profundidade da estrutura: __________
horizontal - largura e (quantidade de cliques para chegar à tela mais
verticalmente - profunda da estrutura – medida vertical) largura
profundidade)
( ) descendente (de tela em nível superior para

tela em nível imediatamente inferior) (Ld)
Ligações entre as ( ) lateral (entre telas de mesmo nível) (Ll)
telas ( ) referência cruzada (entre telas sem relação Ld At
(ligações entre as telas, direta na estrutura do sistema) (Rc)
que permitem ao Ll
( ) atalho (acesso direto a telas em níveis não Rc Ld
usuário se deslocar
imediatamente inferiores) (At) Ll
dentro do aplicativo)
( ) retorno a telas já visitadas
( ) retorno a tela inicial do aplicativo
( ) outra:
50
Parte 5 | Design da interação

( ) literal (articula informações e funcionalidades, sem recorrer a
Modelo conceitual analogias do mundo real)
( ) metafórico (articula informações e funcionalidades, recorrendo a
(estrutura conceitual
geral para apresentar as analogias do mundo real | e.g., metáfora de desktop)
funcionalidades do
aplicativo) Se modelo conceitual metafórico, informe a metáfora utilizada:
( ) entrada de texto em campos / formulários

Estilo de diálogo
( ) menus (em lista, grade, abas...)
predominante
( ) manipulação direta (ação direta sobre o objeto, sem comandos na
(maneira mais usual de forma de ícones ou menus)
interação do usuário ( ) linguagem natural (e.g., comandos de voz)
com o aplicativo)
( ) outro:
Objetos de ( ) barras de ferramentas (também chamada barra de ações)

interação ( ) listas de seleção
( ) botões de seleção
(elementos da interface
que permitem ao ( ) botões de múltiplos estados
usuário interagir com o ( ) campos de entrada de dados
aplicativo) ( ) outro(s):
Nível de ( ) baixa interatividade: usuário interage apenas com os objetos

interatividade existentes, sem poder modificá-los
( ) média interatividade: usuário pode modificar objetos existentes
(o quanto o aplicativo
permite que o usuário ( ) alta interatividade: usuário pode adicionar objetos e compartilhar
interaja, seja pró-ativo) objetos com outros usuários
Parte 6 | Navegação
Navegação interna
às telas ( ) rolagem (horizontal ou vertical)
( ) avanço / recuo linear (por , )
(mecanismos que
permitem ao usuário
( ) sobreposição (com janelas pop up, por exemplo)
acessar mais conteúdo ( ) área expansível-retrátil (geralmente usam os símbolos de + e - )
dentro de cada tela do ( ) outro:
aplicativo)
disponibilidade:
Elementos sensíveis
( ) global (elementos sensíveis disponíveis em todas as telas)
(elementos que, ao ( ) local (elementos sensíveis disponíveis em telas específicas)
serem tocados pelo
usuário, dão acesso a
informação adicional, visualização:
enviam o usuário a outra ( ) sempre visível (aparente)
tela ou iniciam algum ( ) temporariamente visível (e.g., em pop-up, gaveta deslizante)
processo dentro do ( ) oculta (visível apenas se ativado ícone de acesso a menu oculto)
aplicativo)
51
Parte 6 | Navegação (continuação)

representação:
( ) texto
( ) botão
( ) imagem (ícone, ilustração, foto...)
Elementos sensíveis
( ) representação esquemática (seta, linha, faixa...)
(continuação)
( ) híbrida (combinação de anteriores)
(elementos que, ao ( ) outra:
serem tocados pelo
usuário, dão acesso a
informação adicional, agrupamento dos elementos sensíveis:
enviam o usuário a outra ( ) elementos isolados (não agrupados)
tela ou iniciam algum ( ) agrupados em menus (lista, grade, abas)
processo dentro do ( ) agrupados em barras
aplicativo)
( ) agrupados em caixas de diálogo
( ) agrupados em galeria / carrossel
( ) outro:
rotulagem:
( ) título da seção + sub-título (tela)
( ) título da tela
marcação:
Indicadores de
localização ( ) em menu ou aba
( ) em galeria ou carrossel
(elementos que auxiliam ( ) em indicador de páginas
o usuário a saber em
que local do aplicativo
( ) em breadcrumb
ele está a cada momento
de sua navegação) diferenciação:
( ) por background (fundo da tela)
( ) por codificação cromática
( ) por landmark imagético (imagem que serve de ponto de
referência para localização)
tipo (sobre o que o feedback informa):
( ) recém-acionamento (de um elemento sensível)
( ) operação em andamento (e.g., download)
( ) operação concluída (e.g., instalação)
Feedback
(retorno / notificação representação (maneira como o feedback é representado):
que o aplicativo dá ao ( ) mudança na representação do elemento sensível
usuário sobre ações ( ) animação
executadas)
( ) caixa de mensagem
( ) aviso sonoro
( ) aviso tátil
( ) outra:
52
Parte 7 | Diagramação
unidade:
( ) mesma malha para todas as telas
( ) variação de malha por nível hierárquico
Malha de
diagramação quantidade de áreas funcionais (áreas para posicionar elementos de
função semelhante) em cada malha de diagramação:
(estrutura bidimensional
criada para organizar
espacialmente os áreas funcionais:
elementos nas telas do ( ) cabeçalho (e.g., título, horário, sinal)
aplicativo) ( ) busca
( ) ferramentas
( ) área de conteúdo
( ) navegação
( ) outra(s):
quantidade de níveis hierárquicos por tela:
níveis hierárquicos:
n1: __________________________________
Hierarquia n2: __________________________________
informacional n3: __________________________________
n4: __________________________________
(sistema de organização ... continue se necessário
das informações,
conforme seu grau de
importância, ou forma(s) utilizada(s) para explicitar hierarquia:
priorização de leitura, ( ) posicionamento espacial
para o usuário do ( ) variação tipográfica
aplicativo) ( ) variação cromática
( ) uso de imagens
( ) uso de elementos esquemáticos
( ) outro:
necessidade de manter identidade de sistema(s) existentes em outras

plataformas:
Identidade visual ( ) app com identidade própria, sem precisar utilizar identidade
(ou sensorial) de versão para desktop ou tablet
( ) app com identidade atrelada à versão desktop ou tablet
(conjunto de
características que
fazem com que as partes elementos usados para identidade visual (ou sensorial)
do aplicativo pareçam ( ) tipografia
pertencer a um mesmo ( ) cor
sistema e o aplicativo
( ) imagens
seja, como um todo,
diferenciável de outros ( ) background
aplicativos) ( ) elementos esquemáticos
( ) música ou outro tipo de som
( ) vinheta / animação
( ) outro:
53
Parte 8 | Atributos midiáticos
quantidade de fontes utilizadas:
tamanhos de fonte utilizados:
uso de serifa
( ) sem serifa
( ) com serifa
Tipografia uso de variantes

( ) normal
(conjunto de variáveis /
( ) itálico
características relativas à
aplicação / composição ( ) negrito
dos elementos textuais
do aplicativo) maiúsculas e minúsculas
( ) caixa alta
( ) caixa alta e baixa
alinhamento
( ) à esquerda
( ) à direita
( ) centralizado
( ) justificado
tipos de imagem:
( ) fotografia
( ) ilustração
( ) ícone
Imagens ( ) outro:
função das imagens:
aplicação / composição ( ) decorativa (adornar, tornar atraente)
dos elementos ( ) descritiva (apresentar os elementos ou partes)
imagéticos do aplicativo) ( ) navegacional (dar acesso a outras partes do app)
( ) relacional (mostrar relações)
( ) transformacional (mostrar mudança em objeto(s) ao
longo do tempo)
( ) outra:
54
Parte 8 | Atributos midiáticos (continuação)
tipos de elemento esquemático:

( ) linha
( ) faixa
Elementos ( ) caixa
esquemáticos ( ) seta
( ) outro(s):
aplicação / composição função dos elementos esquemáticos:
dos elementos ( ) decorativa
esquemáticos do ( ) diferenciadora
aplicativo) ( ) separadora
( ) conectora
( ) agrupadora
( ) outra:
cores utilizadas:
Cor função da cor
(conjunto de ( ) decorativa
características relativas à ( ) diferenciadora
aplicação de cores no
( ) organizadora
aplicativo)
( ) enfatizadora
( ) outra:
Multimídia
( ) animação
(elementos não textuais, ( ) vídeo
imagéticos estáticos ou
esquemáticos e que ( ) música
também são utilizados ( ) som
para compor a ( ) outro:
linguagem do aplicativo)
55
Utilize o checklist para avaliar similares ou para conferir seu aplicativo em desenvolvimento, antes
da avaliação com o público alvo.
Quando for aplicar o checklist, lembre-se de selecionar apenas as perguntas que são
pertinentes para o aplicativo que está desenvolvendo. Além disso, você pode atribuir pesos
diferentes para as questões, dependendo das prioridades do aplicativo. Para cada questão, você
deve marcar uma das três opções:
S (sim): a recomendação foi cumprida em todo o aplicativo
N (não): a recomendação foi infringida em todo o aplicativo
P (parcialmente): apenas em algumas partes do aplicativo a recomendação foi cumprida
Parte 1 | Avaliação global do aplicativo

Opções
Recomendação S N P Peso
Disponibilidade de opções default, para que

usuários novatos não precisem configurar nada
Diálogos com poucos passos e com destaque para

opções mais frequentes ou mais recomendadas
Utilização de terminologia familiar ao público alvo

delimitado para o aplicativo
Comandos e ferramentas auto-explicativos em

relação a sua função
Disponibilidade de ajuda offline e/ou online
Meio de avaliação do aplicativo pelo usuário
Prioridade para seleção ao invés de digitação
Prioridade para manipulação direta, ao invés de

intermediação por comandos
Livre escolha / modificação de orientação (retrato

ou paisagem) para qualquer ação
Possibilidade de interromper, pausar ou salvar

tarefas, para retomar posteriormente
42
Parte 1 | Avaliação global do aplicativo (continuação)

Opções
Possibilidade de iniciar uma nova tarefa, com

outra já em andamento
Possibilidade de cancelar ou voltar atrás (undo),

quando realizar ação indesejada
Possibilidade de criação de atalhos para ações

mais frequentes ou mais importantes
Possibilidade para modificação do tipo de menu

principal (lista ou grade)
Possibilidade de filtrar e escolher forma de

exibição de itens em galerias
Adaptação para funcionamento em diferentes

modos (e.g., áudio, silencioso)
Adaptação da interface de acordo com o perfil de

interação do usuário (para apps que exigem login)
Possibilidade de realizar qualquer acionamento

com apenas uma das mãos
Descrição clara e objetiva do motivo de

interrupções (quando realizadas pelo sistema)
Apresentação de mensagens de erro informativas

e que expliquem forma de correção / recuperação
Confirmação exigida para ações de conseqüência

grave ou que levem a erros
Alvos dimensionados e distanciados para evitar

acionamentos inadvertidos
Unidade na aplicação de elementos e atributos

gráficos em todo o aplicativo
Consistência na diagramação (malha e

posicionamento das áreas funcionais)
Uso de metáforas que visam facilitar a

transferência de aprendizado do mundo real
Uso de frases e parágrafos curtos em textos

informativos e instruções de uso
43
Parte 2 | Avaliação específica de subsistemas

S1 – Arquitetura da informação Opções
Estrutura hierárquica com referências cruzadas
Largura (a partir da home) de no máximo 9

categorias
Profundidade de no máximo 5 cliques (níveis)
Mecanismo de acesso direto a telas de níveis

inferiores na arquitetura
Informações diretamente relacionadas aparecem

em uma mesma tela (e não em telas separadas)
Categorias de informação (na arquitetura)

mutuamente excludentes
Links embutidos utilizados com moderação
S2 – Navegação entre-nós Opções
Existência de ligações laterais (entre categorias de

mesmo nível hierárquico)
Permissão de retronavegação cronológica a partir

de qualquer tela (e.g., botão voltar)
Permissão de retronavegação hierárquica (e.g.,

breadcrumbs)
Permissão de retorno à tela inicial do aplicativo

(home) a partir de qualquer tela
Disponibilidade de ferramenta de busca básica e

com filtros
Disponibilidade de histórico de locais acessados

com retorno direto a qualquer local
44
S3 – Navegação intra-nós Opções
Rolagem em um eixo (vertical ou horizontal)
Controles ancorados (não rolam com o conteúdo)
Permissão de rolagem por deslize em toda a área

da tela (e não apenas sobre a barra)
Apresentação de elemento final parcialmente

visível (para sugerir que há rolagem)
Marcação de posição atual na barra de rolagem
Apresentação da quantidade total de itens para

rolagem em carrossel
Acesso direto a qualquer item do carrossel, sem

necessidade de rolagem
Uso de pop-up sem shade quando informações

(janela e tela) precisam ser vistas em paralelo
Não ocultação da tela inteira por janela pop-up
Abertura de apenas uma janela pop-up por vez
Disponibilidade de botão de fechar em pop-ups
Textos curtos com possibilidade de expandir

conteúdo na mesma tela (área expandida)
Indicação visual de que área expandida pode ser

comprimida novamente
Movimentação panorâmica sem necessidade de

carregamento a cada seleção do usuário
Apresentação de transição do usuário de uma

parte para outra em movimentação panorâmica
S4 – Áreas sensíveis Opções
Áreas sensíveis textuais nomeadas de forma

sucinta e explícita sobre seu conteúdo/função
Representação das áreas sensíveis explícita em

relação à possibilidade de ativação (affordance)
45
S4 – Áreas sensíveis (continuação) Opções
Representação de áreas sensíveis de função

semelhante por padrão gráfico semelhante
Coesão semântica e gráfica entre ícones do

aplicativo
Áreas sensíveis de uso frequente em todas as telas

aparecem fixas nas barras do aplicativo
Utilização de no máximo duas barras (uma

superior e uma inferior)
Separação de áreas sensíveis de navegação e de

ação/ferramentas em barras diferentes
Apresentação de áreas sensíveis contextuais

desabilitadas (quando não puderem ser ativadas)
ao invés de removê-las da barra
Utilização de no máximo 5 abas de navegação
Não utilização de menus ocultos
Formas de acionamento por toque compatíveis

com as convenções do sistema operacional
Áreas sensíveis que indicam retorno representadas

por setas ou similares
Áreas sensíveis que indicam expansão de

conteúdo representadas por + , – , ∆ ou similares
Áreas sensíveis embutidas em texto representadas

por texto sublinhado
Áreas sensíveis textuais em listas representadas

sem sublinhado
Áreas sensíveis que ativam ações, informam status

ou selecionam atributos representadas por botões
Uso de no máximo 2 botões em caixas de diálogo

que requerem confirmação (e.g., aceitar, cancelar)
Comandos na barra de ação do aplicativo

representados por ícones
Notificações de mudança de status realizadas no

próprio ícone do aplicativo
46
S5 – Indicadores de localização Opções
Título de identificação sucinto e auto-explicativo

em todas as telas do aplicativo
Posicionamento do título de identificação na

própria barra de navegação do aplicativo
Sinalização das abas em uso, através de marcação

gráfica (e.g., cor, negrito, contorno)
Sinalização de item selecionado em carrossel,

através de marcação gráfica
Visualização de caminho percorrido e sinalização

de posição atual em breadcrumbs
Posicionamento de indicadores de página logo

abaixo dos itens que se deseja marcar
Diferenciação cromática ou gráfica para distinguir

partes diferentes do aplicativo
Utilização de imagens como pontos de referência

em telas importantes
Utilização de backgrounds diferenciados para

distinguir partes do aplicativo
S6 – Feedback Opções
Apresentação imediata ao usuário do resultado de

todas suas ações
Informação do andamento de ações que não

tenham resultado imediato (e.g., download)
Feedback de recém-ativação para áreas sensíveis
Feedback de andamento com rótulo da ação em

progresso e previsão de conclusão
Feedback de conclusão (e.g., caixa de mensagem)

para ações que não tenham resultado imediato
Não necessidade de fechamento pelo usuário para

caixas de mensagem de feedback de conclusão
47
S7 – Diagramação Opções
Utilização de malha de diagramação para a

organização dos elementos na página
Quantidade máxima de nove (7 ± 2) grupos de

informação por página
Barras de navegação/ferramentas claramente

separadas da área central de conteúdo
Utilização de atributos gráficos para explicitar

hierarquia dentro de cada tela
Utilização de atributos gráficos para manter

identidade visual dentro / entre telas do aplicativo
S8 – Atributos midiáticos Opções
Consistência semântica entre tipo de fonte (e.g.,

fantasia, técnica) e gênero/ público do aplicativo
Uso de no máximo duas fontes (famílias

tipográficas) no aplicativo
Consistência nos atributos tipográficos utilizados

(tamanho, fonte, alinhamento)
Alinhamento à esquerda para textos
Uso de variantes tipográficas para destacar e

enfatizar itens importantes em texto
Uso de caixa alta e baixa para parágrafos de texto

ou frases
Uso de tamanho mínimo de 9pt para textos

terciários (complementares ao texto principal)
Uso de tamanho mínimo de 11pt para textos e

rótulos principais
Uso de elementos esquemáticos (e.g., linhas,

faixas, caixas, setas) para separar, conter, conectar
elementos na mesma tela
Uso da cor para diferenciar, organizar ou enfatizar

itens importantes
48
S8 – Atributos midiáticos (continuação) Opções
Uso de cores diferenciadas para distinguir áreas

sensíveis de outros elementos não ativáveis
Utilização de imagens simplificadas no background

e que não prejudiquem legibilidade dos elementos
em primeiro plano
Utilização de enquadramento que facilite o

reconhecimento das imagens em primeiro plano
Utilização de contraste (entre cores ou entre tons

de cinza) para imagens em primeiro plano
Utilização de contraste entre área de conteúdo

central e barras do aplicativo
Relação clara / direta entre imagens e textos a que

se referem
49
D | Roteiros para avaliação com usuários

Antes de iniciar sua avaliação com usuários, precisamos saber em que nível de fidelidade está o
protótipo do seu aplicativo. Nível de fidelidade significa dizer o quanto este aplicativo se
assemelha a sua versão final.
Dizemos que um protótipo é de baixa fidelidade quando ainda não apresenta os atributos
midiáticos de forma completa (e.g., tipografia, imagens, animações, sons). Em contraste, dizemos
que um protótipo é de alta fidelidade, quando seu conteúdo já está diagramado e representado
graficamente (mais atributos multimídia, se existirem) exatamente como sua versão final a ser
inserida no mercado, mesmo que ainda não tenha sido iniciada a etapa de programação.
Cybis, W.; Betiol, A. Neste guia, apresentamos sugestões de roteiros de avaliação com usuários para a situação de
H.; Faust, R. Testes baixa fidelidade, em face da dificuldade em encontrar esse tipo de informação na literatura de ihc
de usabilidade
móvel. In Ergonomia móvel. Para protótipos de alta fidelidade, recomendamos a realização de testes de usabilidade
e usabilidade: formais em laboratório ou em campo, conforme descritos em Cybis et al. 2010.
conhecimentos,
métodos e Na situação de baixa fidelidade, seu protótipo se apresenta como um conjunto de
aplicações. São
Paulo: Novatec wireframes com as áreas funcionais delimitadas e rotuladas. Existe a possibilidade de prototipar à
Editora, 2010. mão, ou utilizando um software de desenho vetorial (figura 36). Sugerimos que para a avaliação
p. 275-283.
com usuários, seus primeiros drafts à mão não sejam utilizados, mas sim telas já passadas a limpo,
para evitar problemas envolvendo, por exemplo, o não entendimento de sua caligrafia.
Mensagens 13:01
Criar
Conversas
Enviados
Rascunho
Outras
Opções Voltar
Figura 37 | exemplos de telas de aplicativo de mensagem em baixa fidelidade (draft feito à mão e versão
passada a limpo para teste)
Para realizar uma avaliação com usuários nesse estágio de desenvolvimento do projeto,
sugerimos a técnica de paper prototyping (prototipagem em papel). Para sua aplicação, você
precisa preparar todas as telas de seu aplicativo em papel, ainda em preto e branco, com as áreas
funcionais delimitadas e rotuladas, respeitando o mesmo nível de fidelidade em todas as telas
produzidas. De posse do conjunto de telas, existem três opções:
apresentar as telas recortadas em papel para o usuário interagir (paper prototyping

tradicional); ou
50
apresentar as telas coladas em papel, para o usuário interagir e realizar interferências

sobre as telas e/ou anotar seus comentários ao redor de cada tela (paper prototyping
com crítica concomitante – vide figura 37);
Bolchini, D.; Ramirez, D. escanear as telas para apresentá-las no próprio smartphone, como uma galeria de
F. P.; Faiola, A. “Paper in imagens (esta última opção foi proposta por Bolchini et al. (2009) e se intitula paper in
screen” prototyping: an
agile technique to screen prototyping – vide figura 38).
anticipate the mobile
experience. Interactions,
july-august, 2009, p. 29-
34.
Figura 38 | exemplo de tela colada em papel com comentários realizados por um usuário (paper
prototyping com crítica concomitante)
Figura 39 | exemplo de paper in screen prototyping (fonte: Bolchini et al. 2009)
Caso você tenha optado pelo paper prototyping tradicional, você ainda terá duas opções:
testar apenas as telas em papel soltas; ou
testar as telas em uma moldura rígida com o formato do smartphone (essa moldura
precisa ter uma abertura para inserção das telas em papel – vide figura 39).
51
Figura 40 | exemplo de moldura para inserção de telas em papel

(produzida por chipsa.ru)
O roteiro para aplicação do paper prototyping tradicional é o seguinte:
[1] entregue ao usuário uma lista de tarefas que ele deve realizar utilizando seu protótipo;
[2] entregue ao usuário (ou insira na moldura-smartphone) a tela de abertura do aplicativo e
solicite que ele toque no elemento da tela que ele considera que o levará a atingir sua
meta;
[3] entregue ao usuário agora a próxima tela (que corresponde à seleção que ele realizou na
tela anterior) e solicite que toque novamente em algum elemento da tela;
[4] prossiga desta forma até que o usuário tenha concluído todas as tarefas.
Além de observar a realização da tarefa, você pode solicitar ao usuário que pense alto (think
aloud) enquanto realiza a tarefa, para compreender suas estratégias de seleção, dificuldades,
preferências etc. Para complementar o pensar alto, você também pode preparar um protocolo de
perguntas e ir questionando o usuário durante a interação.
Mas caso você não queira interromper a realização da tarefa, você pode realizar uma
avaliação consecutiva, ou seja, apresentar todas as telas ao usuário, após a finalização da tarefa e
pedir que ele comente sobre suas estratégias de seleção, dificuldades, preferências etc. Seu
protocolo de perguntas também pode ser utilizado neste estágio.
Existe ainda a possibilidade de realizar um card-sorting de montagem de telas. Entregue ao

usuário telas em branco e elementos de interface (na forma de papeizinhos recortados) e peça
que o usuário monte as telas que correspondem às tarefas que acabou de realizar da forma como
achar mais conveniente, refletindo sua preferência. Neste estágio, pode-se, ainda solicitar ao
usuário que aponte todos os elementos que ele gostaria de poder personalizar na interface.
Caso você tenha optado pelo paper prototyping com crítica concomitante, o roteiro de
realização é o seguinte:
[1] entregue ao usuário uma lista de tarefas que ele deve realizar utilizando seu protótipo;
52
[2] entregue ao usuário a tela de abertura do aplicativo (colada sobre a folha de comentários)
e solicite que ele toque no elemento da tela que ele considera que o levará a atingir sua
meta;
[3] solicite agora que o usuário critique a tela com a qual acabou de interagir, realizar
interferências sobre a mesma e anotações na folha ao redor;
[4] entregue ao usuário agora a próxima tela (que corresponde à seleção que ele realizou na
tela anterior) e solicite que toque novamente em algum elemento da tela;
[5] solicite novamente as críticas;
[6] prossiga desta forma até que o usuário tenha concluído todas as tarefas.
Para esta versão do paper prototyping, não é necessário solicitar uma avaliação das telas
pelo usuário após a conclusão das tarefas, mas ainda assim é interessante mostrar ao usuário o
conjunto de telas com suas anotações e perguntar se ele gostaria de acrescentar alguma anotação
ou realizar mais algum comentário.
Caso você tenha optado pelo paper in screen prototyping, você precisará preparar
sequências de telas que correspondem a um passo-a-passo para cada tarefa que o usuário deve
realizar durante o teste. Isso deve ser feito porque o usuário acessará as telas do protótipo no
smartphone como uma sequência de imagens não interativas, passando de uma para outra por
botão de avanço (next) ou deslize. Salve essas sequências de telas no smartphone e utilize o
seguinte roteiro:
[1] solicite ao usuário que visualize a primeira tela da primeira tarefa (sequência de telas) no
smartphone;
[2] informe ao usuário qual a próxima tela a que deve se dirigir (e.g., agora vá para a página
de detalhamento do produto) e peça que ele toque no elemento da tela que o levará a tal
destino;
[3] solicite que o usuário passe para a próxima tela (botão next ou deslize);
[4] informe ao usuário a próxima tela a que deve se dirigir (e.g., agora vá para o carrinho de
compras) e peça que ele toque no elemento da tela que o levará a tal destino;
[5] solicite que o usuário passe para a próxima tela (botão next ou deslize);
[6] proceda desta forma até finalizar as tarefas.
Para obter a opinião do usuário sobre as tarefas e as telas com as quais interagiu, você pode
utilizar os mesmos procedimentos do paper prototyping tradicional: pensar alto, avaliação
consecutiva, protocolo de perguntas ou card sorting de montagem de telas.
53

Sistemas de Navegação em Smartphones: Universidade Federal Do Paraná Departamento de Design

Enviado por

Dados do documento

Descrição original:

Título original

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Sistemas de Navegação em Smartphones: Universidade Federal Do Paraná Departamento de Design

Enviado por

Direitos autorais:

Formatos disponíveis

Universidade Federal do Paraná

Sistemas de navegação em smartphones

Assim, fique também à vontade para disponibilizá-lo em pdf para

Para citar o guia:

PADOVANI, Stephania.; NAPO, Paula Rodrigues. Sistemas de navegação

Da origem e dos objetivos deste guia

No decorrer do projeto, realizamos um estudo analítico de sistemas

Este guia tem como objetivo auxiliá-lo na tomada de decisões

1 | Da arquitetura à navegação global 5

2 | Detalhando os elementos da navegação 20

Apêndice | Recursos adicionais

Figura 01 | exemplo simplificado de arquitetura da informação

1 | Da arquitetura à navegação global

É importante que ao iniciar a definição de navegação global, você

1.1 | Navegação entre-nós

retronavegação cronológica (voltar na ordem inversa em que os

Na figura 02, ilustramos algumas dessas categorias.

mapa navegação descendente

Figura 02 | ilustração de categorias da navegação entre-nós

Primeiramente, definimos a navegação descendente, ou seja, as

Em seguida, podemos trabalhar a navegação lateral, ou seja, em

(veja a figura 03, para diferenciação entre os dois tipos). É importante

Figura 03 | exemplos de possibilidades de retronavegação

Por fim, dependendo da complexidade do sistema que você está

Acompanhe-nos agora em um exemplo de definição de navegação entre-

Quanto à navegação lateral, estabelecemos que é possível o usuário

A retronavegação inclui o mecanismo voltar página a página na ordem

Por fim, consideramos importante disponibilizar como ferramentas

Figura 04 | exemplo de navegação entre-nós em um m-commerce hipotético

1.2 | Guidelines para a navegação entre-nós

Para as referências cruzadas, à semelhança da navegação lateral,

Para a retronavegação, permita sempre retorno (a partir de

acessível em todas as telas, preferencialmente em local fixo na barra de

1.3 | Navegação intra-nós

sobreposição (e.g., janela sobre tela principal em fade);

movimentação panorâmica (e.g., em mapas).

avanço ou recuo linear

rolagem + área expansível-

Figura 05 | exemplos de possibilidades de navegação intra-nós

Para a definição de nossa navegação intra-nós, podemos iniciar por

grande de opções de navegação que acaba por confundir o usuário

Figura 06 | exemplos de possibilidades de rolagem

Uma das alternativas à rolagem é o avanço ou recuo linear. Essa

Diferentemente da rolagem, a modalidade mais frequente de avanço ou

Figura 07 | exemplos de avanço ou recuo linear

Quando existe algum conteúdo complementar àquele em exibição

Figura 08 | exemplo de sobreposição

Outra possibilidade de navegação intra-nós é a área expansível-

determinado conteúdo ou quando se deseja expandir uma categoria

Figura 09 | exemplo de área expansível-retrátil

Por fim, a última possibilidade de navegação intra-nós listada no

1.4 | Guidelines para a navegação intra-nós

ancorar controles e barras de navegação, ou seja, eles não rolam

Figura 10 | Exemplo de tela com rolagem com elementos parcialmente visíveis

Para a aplicação do avanço ou recuo linear (ou carrossel de

indicar quantidade de páginas e sinalizar página atual (e.g.,

fornecer feedback indicando que carrossel chegou ao final.

Figura 11 | Exemplos de carrossel com acesso direto (ir para ...)

Para utilização da sobreposição, é importante considerar os

abrir apenas uma janela de sobreposição por vez sobre a tela de

disponibilizar botão de fechar no canto da janela, ou permitir

Figura 12 | Exemplo de sobreposição com shade e botão de fechar