Interfaces, usabilidade e acessibilidade
Arquitetura de informação, navegação e formulários acessíveis, com a página de compra refeita.
Arquitetura de informação
Organiza conteúdo e percursos pelas tarefas da pessoa, não pelas tabelas da base de dados.
| Sistema | Decisão |
|---|---|
| Organização | Agrupar e ordenar por data, categoria, cidade ou outra regra. |
| Rótulos | Usar termos reconhecíveis, como “Os meus bilhetes”. |
| Navegação | Ligar áreas e conservar contexto. |
| Pesquisa | Consulta, resultados, âmbito, filtros e facetas. |
Esquemas exatos usam critérios definidos, como cronologia; esquemas ambíguos, como assunto, exigem interpretação e podem sobrepor grupos. Navegação global cobre áreas principais, local cobre a secção e contextual liga conteúdo relacionado. Breadcrumb de hierarquia e caminho seguido podem diferir.
Personalização infere adaptações de um modelo da pessoa; customização permite escolha explícita, como guardar o filtro Porto.
Estrutura e estados
- Sitemap: destinos e ligações principais.
- Wireframe: disposição e função dos elementos de uma página.
- Wireflow: esboços de estados ligados pelas ações que os mudam.
- Protótipo: permite experimentar interações.
Um erro precisa de mensagem, entrada preservada e próximo passo. Na compra, mostra sessão, data, quantidade e total antes do formulário; aproxima campo, rótulo e erro. Proximidade, alinhamento, repetição, contraste e equilíbrio organizam a leitura. Seguro pré-selecionado ou preço oculto são padrões enganadores.
Formulários e teclado
<label for="email">Email para envio dos bilhetes</label>
<input id="email" name="email" type="email" required autocomplete="email" />Rótulo persistente ligado por for e id identifica o campo. Placeholder não o substitui. Validação do navegador é preliminar; o servidor volta a verificar.
- Usa HTML nativo, nomes acessíveis, foco visível e ordem Tab coerente com a leitura.
- Links ativam por Enter; botões por Enter ou Espaço. Diálogos permitem sair e devolvem foco ao controlo de abertura.
- Erros usam texto ligado ao campo, sem depender apenas de cor.
- Imagens informativas têm alternativa descritiva; decorativas usam alternativa vazia.
Leitor de ecrã apresenta estrutura por voz ou braille e permite navegar por títulos. Um div grande não ganha semântica de título. Títulos comuns não entram em Tab e continuam acessíveis por navegação estrutural; leitor de ecrã não é reconhecimento de fala.
Contraste e testes
Texto normal exige pelo menos 4,5:1. Texto grande usa o limiar de 18 pt regulares ou 14 pt a negrito, com critério próprio; controlos e estados também têm critérios específicos. Sobre branco, #9CA3AF dá 2,54:1 e falha para texto normal; #595959 dá cerca de 7:1.
Card sorting observa agrupamentos; tree testing avalia encontrar destinos numa árvore textual. Testa tarefas reais sem explicar o percurso, registando sucesso, erros e tempo. “Bonito” não mede encontrabilidade. Pesquisa vazia distingue ausência de resultados de falha técnica e nunca revela conteúdo privado.