Interfaces, usabilidade e acessibilidade

Para comprar um bilhete, a pessoa precisa de encontrar o evento, escolher uma sessão e confirmar o pedido. A arquitetura de informação organiza esse percurso e os nomes usados em cada etapa. O desenho da interface torna preço, campos, ações e erros reconhecíveis, incluindo para quem usa teclado ou leitor de ecrã.

Arquitetura de informação

A arquitetura de informação organiza e representa conteúdo e define como se encontra e percorre. Para a loja chegam quatro níveis:

1. Início: eventos em destaque e pesquisa por data.
2. Evento: descrição e lista de sessões futuras com lugares livres.
3. Sessão: data, preço, lugares e botão de comprar.
4. Compra: formulário, confirmação e histórico.

Cada nível responde a uma pergunta do comprador: o que há, quando posso ir, quanto custa e está comprado. Outras tarefas, como editar o perfil, exigem outras áreas; o caso de uso de comprar bilhete atravessa os níveis 2 a 4 pelas áreas Evento, Sessão e Compra, por isso acrescenta passos apenas quando servem uma necessidade, como confirmar dados de faturação.

A página de compra refeita

A primeira versão típica mete tudo numa parede de campos: nome, email, cartão, morada de faturação e três botões parecidos. A versão refeita segue três regras.

Primeiro, hierarquia clara: um título com a sessão e a data, depois o resumo do pedido com preço total destacado, e só depois o formulário, para o comprador confirmar o que está a comprar antes de dar dados.

Segundo, um rótulo por campo, ligado ao campo:

<label for="email">Email para envio dos bilhetes</label>
<input id="email" name="email" type="email" required autocomplete="email" />

O for ligado ao id faz o leitor de ecrã anunciar o rótulo ao entrar no campo, e o type="email" com required permite verificações preliminares no navegador. As regras do servidor continuam necessárias e podem ser mais estritas. O rótulo visível também ajuda quem precisa de recordar o significado do campo, porque um placeholder desaparece ao escrever.

Terceiro, foco visível e ordem lógica: a tecla Tab percorre os elementos interativos na ordem de leitura e o elemento focado mostra um contorno claro. Compra um bilhete usando apenas o teclado, pois uma armadilha de foco impede concluir a tarefa por teclado; verifica também nomes e estados com leitor de ecrã.

Elemento	Problema inicial	Revisão
Pedido	Campos sem contexto da compra.	Sessão, data, quantidade e preço total antes do formulário.
Campo	Significado só no placeholder.	Rótulo persistente ligado ao campo.
Erro	Mensagem no topo, longe do campo.	Mensagem junto ao campo e valores preservados.
Ação	Botões semelhantes sem consequência clara.	Confirmação com nome e resultado explícitos.

Verificação de contraste e teclado

Antes de declarar a página pronta, verifica:

• O texto normal cumpre o contraste exigido com o fundo.
• Todas as ações funcionam por teclado: Tab para percorrer controlos, Enter para links e Enter ou Espaço para botões. Os diálogos devem permitir sair e devolver o foco ao controlo de abertura.
• Cada erro de validação aparece junto ao campo, em texto, não só com cor vermelha. Cor sozinha não chega para quem não a distingue.
• As imagens que informam têm texto alternativo; as decorativas têm alternativo vazio para o leitor de ecrã as saltar.

O critério do WCAG para texto normal pede um rácio de contraste de pelo menos 4,5 para 1. Mede com estes dois casos sobre fundo branco:

• Preço em cinzento claro #9CA3AF: rácio 2,54 para 1. Não cumpre o mínimo para texto normal.
• O mesmo preço em #595959: rácio 7,00 para 1. Passa com margem.

Neste fundo branco, escurecer o texto aumenta o contraste. Texto grande e componentes de interface têm critérios específicos, explicados mais abaixo.

Teste de usabilidade

Quatro sistemas da arquitetura de informação

A arquitetura de informação organiza conteúdo para que seja encontrado e compreendido. Não é apenas escolher páginas, nem copiar as tabelas da base de dados para o menu. Tem quatro componentes:

Sistema	Pergunta	Exemplo na loja
Organização	Como se agrupam e ordenam os conteúdos?	Eventos por data, categoria ou cidade.
Rótulos	Como se representam os grupos e ações?	«Os meus bilhetes» em vez de «Entidades associativas».
Navegação	Como se passa entre conteúdos com contexto?	Menu global, menu local e links para sessões relacionadas.
Pesquisa	Como se encontra conteúdo sem percorrer tudo?	Texto pesquisado, resultados, filtros e facetas.

Um esquema exato, como uma ordem alfabética ou cronológica, tem critérios definidos. Um esquema ambíguo, como categorias por assunto ou por público, depende de interpretação. Um evento pode pertencer a «música» e «família»; decide se as categorias se podem sobrepor. Não inventes exclusividade quando o domínio não a tem.

Rótulos usam o vocabulário de quem procura. Entrevistas, registos de pesquisa e card sorting ajudam a encontrar termos e grupos. Uma linguagem consistente nos títulos, menus e resultados reduz a necessidade de aprender sinónimos internos.

Navegação global, local e contextual

A global dá acesso às áreas principais em todo o sistema. A local explora a secção atual. A contextual liga assuntos relacionados dentro do conteúdo, como passar de uma sessão para o evento. Um breadcrumb pode mostrar posição na hierarquia ou caminho seguido, mas essas coisas diferem quando há vários percursos para o mesmo conteúdo.

Um sitemap mostra a estrutura e as ligações principais. Um wireframe mostra disposição e função dos elementos numa página. Um protótipo permite testar interações entre estados. Não confundas um mapa completo com um protótipo funcional, nem cores finais com uma decisão de organização.

Personalização adapta conteúdo com base num modelo da pessoa; customização dá controlo explícito, como escolher filtros guardados. Navegação social usa sinais de outras pessoas, como votos ou tags. As escolhas devem respeitar permissões e explicar por que um conteúdo aparece.

Wireflow liga estados de uma interface

Um wireflow combina pequenos wireframes com setas que mostram interações, podendo representar estados diferentes da mesma página; um sitemap mostra a hierarquia, um wireframe mostra a disposição, e o wireflow mostra o que acontece quando a pessoa usa um controlo.

O desenho identifica o controlo que desencadeia a mudança e o resultado visível: o erro não é apenas um nó «falha», pois mostra a mensagem, o valor preservado e uma saída para escolher outra sessão. É um exemplo próprio, simplificado, para seguir a tarefa.

Princípios de apresentação

A proximidade agrupa elementos relacionados, como rótulo, campo e erro. O alinhamento cria linhas de leitura previsíveis. A repetição mantém as mesmas convenções entre páginas. O contraste distingue hierarquias e estados; o equilíbrio distribui o peso visual. Na compra, aproxima o preço total da quantidade e mantém o botão de confirmação no mesmo lugar nos estados normal e de erro.

Um padrão enganador conduz a uma escolha contrária ao interesse da pessoa. Acrescentar um seguro já selecionado ou ocultar o preço total favorece uma venda, mas prejudica uma decisão informada. Confirma que ações e consequências são claras.

Um framework CSS oferece estilos, grelhas ou componentes reutilizáveis. Não prova que o formulário está acessível: a escolha do HTML, dos rótulos e dos estados continua a ser da aplicação.

Processo: investigar, estruturar e testar

Considera utilizadores, conteúdo e contexto. Faz inventário de conteúdo, identifica tarefas e restrições, propõe grupos e rótulos, desenha percursos e testa-os. Card sorting observa como as pessoas agrupam itens; tree testing testa se encontram um destino numa estrutura textual, sem a ajuda do desenho visual. Respondem a perguntas diferentes.

Na loja, pede «encontra um bilhete que compraste na semana passada». Se a pessoa procura em «Sessões» e não em «Conta», o problema pode estar na organização ou nos rótulos, não no contraste do botão. Avalia sucesso da tarefa, erros e tempo com condições definidas; uma opinião de que a página é bonita não mede encontrabilidade.

Pesquisa e resultados

Uma interface de pesquisa inclui formulação da consulta, escolha do âmbito, resultados e refinamento. Uma faceta, como cidade, reduz o conjunto por uma propriedade. Mostra o estado dos filtros e uma forma de os remover. Um resultado vazio deve distinguir ausência de correspondências de uma falha técnica.

A ordenação por relevância e a recuperação do conjunto de documentos são partes diferentes. Mede precisão e recall quando existem juízos de relevância, como explicado em pesquisa em texto. O conteúdo privado não pode aparecer num resultado só porque está indexado.

Acessibilidade que se pode verificar

Um leitor de ecrã é software que apresenta conteúdo e estrutura por voz sintetizada ou por uma linha braille. A pessoa pode navegar por títulos, links, tabelas e controlos, sem seguir apenas a leitura linear. Difere de reconhecimento de fala, que transforma voz em comandos ou texto, e de ampliação do ecrã. O HTML semântico fornece relações que a aparência visual, por si só, não comunica.

Um título ou parágrafo não entra normalmente na sequência Tab. O teclado percorre elementos focáveis, como links, campos e botões, numa ordem que deve acompanhar a leitura. Usa elementos HTML nativos com nomes acessíveis, foco visível e mensagens de erro ligadas ao campo. Um placeholder não substitui um rótulo.

Texto grande no critério de contraste inclui 18 pontos regulares, cerca de 24 pixels, ou 14 pontos a negrito, cerca de 18,7 pixels. Controlos e estados têm critérios próprios de contraste, com exceções específicas. Não reduzimos todas as regras WCAG a um único rácio.

Para relacionar barreiras de utilização com critérios de acessibilidade, pergunta «que barreira concreta remove cada critério?»: observa um exemplo de cada vez e confirma onde esta página já aplica a mesma regra.

Abrir no YouTube

Sitemap da Loja de Bilhetes

O sitemap abaixo mostra quatro áreas e as ligações principais: Início, Evento, Sessão e Compra. Cada área responde a uma pergunta: o que há, quando posso ir, quanto custa, está comprado. O caso de uso de comprar atravessa Evento, Sessão e Compra sem desvios.

Lê o mapa antes do formulário: confirma que cada área responde à pergunta do comprador e que o caso de uso atravessa Evento, Sessão e Compra sem desvios. Só depois desenha o wireframe de cada página e o wireflow das transições, incluindo o estado de erro que conserva a quantidade e oferece outra sessão. O mapa, o esboço e o fluxo respondem a perguntas diferentes, por isso nenhum deles substitui os outros.