Navegação móvel previsível sem design uniforme

A navegação móvel torna-se previsível quando a interface dá respostas coerentes a algumas perguntas básicas: onde estou, o que posso fazer aqui, aonde me levará este controlo e como posso voltar? Estas respostas podem manter-se estáveis mesmo quando a tipografia, a cor, as imagens, o movimento e a composição diferem substancialmente entre produtos.

A distinção útil é entre a estrutura de navegação e a expressão visual. A estrutura organiza destinos, ações e deslocações. A expressão confere a esses elementos um caráter particular. Quando uma equipa trata ambas como um só problema, a originalidade pode reduzir a clareza ou os padrões familiares podem uniformizar o design. Separá-las cria espaço para que uma aplicação tenha uma identidade distinta sem tornar difíceis de interpretar as suas deslocações básicas.

Trate a navegação como um contrato do produto

Um contrato de navegação é o conjunto de regras que rege a forma como as pessoas se deslocam numa aplicação. Não é um documento visível, mas a interface deve torná-lo legível. Um destino deve ter uma finalidade reconhecível, um controlo deve conduzir de forma coerente a algum lugar e o regresso não deve depender da memorização de uma exceção sem explicação.

O contrato pode ser revisto através de um pequeno conjunto de perguntas de design. Estas perguntas não prescrevem uma disposição específica. Estabelecem a informação que cada disposição precisa de comunicar.

• Cada controlo principal mantém a mesma função nos ecrãs relevantes?
• É possível identificar a localização atual sem reconstruir o percurso anterior?
• Um controlo de regresso conduz a um destino que a interface levou a pessoa a prever?
• As ações temporárias distinguem-se visualmente da deslocação para outra parte da aplicação?

A identidade visual pode então desenvolver-se dentro destas regras. Uma aplicação de leitura e uma aplicação de planeamento podem utilizar proporções, rótulos, transições e imagens diferentes, mantendo relações igualmente claras entre a localização atual, a ação disponível e o destino esperado.

Represente os percursos como estados ligados

Um estado é a combinação atual da localização, do conteúdo selecionado, da informação introduzida e do progresso da tarefa na aplicação. O design da navegação torna-se mais concreto quando as equipas representam estados em vez de desenharem ecrãs isolados. O mapa deve mostrar como uma pessoa pode entrar num estado, o que pode mudar nesse estado e que partes devem permanecer quando a pessoa se desloca para outro lugar.

Uma sequência de revisão útil avança da estrutura geral para as transições individuais. Uma transição é a passagem de um estado da interface para outro, incluindo qualquer alteração ao conteúdo, aos controlos ou ao progresso conservado.

1. Dê um nome a cada destino com base na sua finalidade no produto, em vez de usar a sua disposição visual.
2. Identifique todos os pontos de entrada suportados para esse destino.
3. Registe que estado deve permanecer quando a pessoa sai.
4. Defina o destino esperado de cada controlo de navegação visível.
5. Assinale qualquer transição cujo resultado dependa de uma regra do produto ainda por resolver.

Este mapa pode revelar decisões que ecrãs aperfeiçoados talvez ocultem. Se dois controlos chegarem ao mesmo destino, mas produzirem estados conservados diferentes, a equipa deve decidir se essa diferença é intencional e visível. Se for possível retomar uma tarefa interrompida, a equipa deve definir que passo reaparece e que contexto o acompanha.

Mantenha a estrutura estável e as superfícies expressivas

A previsibilidade não exige que todos os ecrãs usem a mesma composição. Exige relações estáveis entre os controlos e os respetivos resultados. Um controlo de destino persistente, ou seja, um controlo que permanece disponível nas áreas principais, pode mudar visualmente sem perder a sua função. Uma ação temporária pode ter destaque sem se assemelhar a uma rota para outra secção.

As equipas podem aplicar escolhas expressivas nas partes da interface que não alterem o contrato de navegação. O limite variará consoante o produto, mas a seguinte separação oferece um ponto de partida prático.

• Mantenha estáveis os nomes dos destinos, as funções dos controlos e os caminhos de regresso nos estados relacionados.
• Utilize tipografia, cor, forma e ilustração para estabelecer o tom sem alterar o significado.
• Permita que o movimento explique uma transição, em vez de disfarçar um destino inesperado.
• Reserve padrões de interação invulgares para os casos em que seja possível tornar visível a sua finalidade.

Ao adaptar uma aplicação a diferentes ambientes móveis, a equipa deve verificar as convenções, os controlos disponíveis e as condições de acessibilidade de cada ambiente de destino, em vez de presumir que um padrão pode ser transferido sem alterações. O modelo de destinos subjacente pode manter-se coerente enquanto a sua apresentação responde a essas condições de implementação verificadas.

Atribua um proprietário claro ao estado partilhado

A navegação torna-se mais difícil de compreender quando várias interfaces podem modificar o mesmo estado. O estado partilhado é informação utilizada por mais do que um ecrã, como um elemento selecionado, uma entrada em rascunho ou um filtro ativo. O design deve estabelecer que parte do produto é proprietária dessa informação, quando outro ecrã pode alterá-la e como a alteração se torna visível.

Imagine que uma seleção feita numa interface altera o conteúdo apresentado noutra. O produto precisa de uma regra que determine se o regresso restaura a vista anterior, apresenta a nova seleção ou pede confirmação antes de substituir trabalho inacabado. A escolha adequada depende da tarefa, mas uma regra implícita deixa a interface sem uma resposta definida. Um sistema de estado partilhado e controlado pode disponibilizar uma fonte de verdade, isto é, um registo definido que determina o que as interfaces apresentam.

Teste as regras nos limites do percurso

Um percurso principal claro não abrange todas as condições de navegação. A revisão também deve incluir tarefas interrompidas, destinos vazios, alterações falhadas e entradas a partir de fora da sequência esperada. Estes casos testam se o contrato de navegação continua a fornecer informação suficiente sobre a localização atual e o passo seguinte disponível.

A revisão pode utilizar cenários concretos sem pressupor um determinado sistema operativo ou o comportamento de uma plataforma externa. Qualquer ação ao nível do sistema, entrada por notificação ou gesto incluído no produto deve ser verificado no respetivo ambiente de implementação real.

1. Entre num destino sem passar pelo respetivo ecrã hierarquicamente superior habitual.
2. Saia de uma tarefa com vários passos e regresse depois de alterar outra parte da aplicação.
3. Tente navegar enquanto uma gravação, um carregamento ou outra alteração permanece por resolver.
4. Abra um destino cujo conteúdo esperado esteja indisponível ou vazio.
5. Repita o percurso com as configurações de acessibilidade e introdução suportadas.

Para cada cenário, registe a localização apresentada, o estado conservado, os controlos disponíveis e o destino de regresso esperado. Se estes elementos entrarem em conflito, a equipa pode tratar o conflito como uma regra do produto que precisa de esclarecimento, em vez de o considerar apenas um defeito visual. A resposta adequada pode ser um rótulo mais claro, uma hierarquia revista ou uma política de estado diferente.

Crie distinção com regras de navegação fiáveis

Um modelo prático de navegação começa pelos destinos, estados, transições e propriedade. Represente os percursos importantes, defina o que permanece estável, separe a deslocação das ações temporárias e verifique as condições limite em cada ambiente suportado. Em conjunto, estas decisões formam a camada fiável da interface.

Um design distinto pode então moldar essa camada através da composição, da linguagem, da cor, do movimento e das imagens. O objetivo não é reproduzir um modelo comum. É tornar as regras próprias do produto suficientemente visíveis para que o caráter visual não tenha de suportar todo o esforço de explicar aonde conduz cada controlo.