Dando sequência ao estudo de caso da CEEE, parto agora para um outro elemento do menu lateral da Agência Virtual. Se você não sabe do que eu estou falando aqui, volte no post anterior desta série:
> Estudo de UX Design: Agência Virtual da CEEE (Parte 1)
Neste post vou exemplificar algumas questões envolvendo a escrita de um texto descritivo e labels que compõem um dos elementos da página inicial. Vamos destrinchar a página de protocolos de serviços.
Consultar Solicitação Serviços
Este elemento é uma função bastante secundária dentro do escopo de opções do usuário. Apesar disso, a ideia aqui é fornecer controle dos processos, pois cada ação tomada dentro da plataforma gera um protocolo que pode ser verificado nesta parte. A estrutura é, novamente, bastante simples:
Descrição dos elementos:
- Título [Consultar Solicitação Serviços]
- Texto imperativo-descritivo [Digite o número de sua Unidade Consumidora ou o número de sua Solicitação de Serviço.]
- Label 1 [Seu código:]
- Campo input 1
- Label 2 [Protocolo:]
- Campo input 2
- Campo input 3
- Botão [Pesquisar]
- Botão [Limpar]
- Divisor
A estrutura do corpo desta página, aparentemente semelhante às anteriores, na verdade possui diferenças interessantes de observar. Vou apontar aqui alguns pontos de atenção que identifico:
- O título, apesar de compreensível, possui um erro de sintaxe gramatical. A frase “Consultar Solicitação Serviços” pode funcionar tranquilamente para nomear um diretório (ex.: /consultar-solicitacao-servicos), porém a ausência da preposição “de” pode causar estranhamento e perda de sentido.
- Por causa dessa possível perda de sentido, uma leitura dinâmica do elemento no menu poderia fazer o usuário enxergar mais de uma opção possível neste caso: (1) Consultar Solicitação e (2) Serviços;
- O texto imperativo-descritivo possui alguns problemas que parecem muito tolos, mas podem dar margem à incompreensão. Apesar de não existir erros de sintaxe como no título, o texto não se conecta exatamente com as labels abaixo. Explico melhor:
Dois dados podem ser inseridos nos campos de input:
- Número de sua Unidade Consumidora; ou,
- Número da sua Solicitação de Serviço.
Vejamos como estão nomeadas as labels abaixo:
- Seu código
- Protocolo
Apesar de existir uma associação óbvia para o usuário da CEEE, qual dado casa com qual? Será mesmo que o usuário vai interpretar o pronome possessivo do texto (“sua” Unidade Consumidora) com o pronome na label (“Seu” código)?
É claro que, depois de algumas tentativas, o usuário vai deduzir que “Número de sua Unidade Consumidora” é, na verdade, “Seu código” e que “Número da sua Solicitação de Serviço” é “Protocolo”.
Mas a que custo fazemos isso? Pode parecer um detalhe insignificante na escrita, porém não se pode presumir que todos os usuários irão raciocinar da mesma forma. Aqui, eu penso que uma breve correção no texto imperativo-descritivo encurtaria bastante o tempo nesta página e contribuiria para uma experiência mais eficaz. Listo duas opções de correção (em negrito):
- Digite o número de sua Unidade Consumidora (código presente na sua fatura) ou o número de sua Solicitação de Serviço (protocolo)
- Digite o código de sua Unidade Consumidora ou o protocolo de sua Solicitação de Serviço;
Mais observações nesta página
- O texto imperativo-descritivo não segue o mesmo padrão estético dos textos das outras páginas. Inclusive, o uso de uma borda em volta, neste site, está atribuído a mensagens de Atenção, o que não é o caso;
- O campo de input 2 não é editável. Não há problemas nisso, porém o campo poderia estar em outra cor que sinalizasse a incapacidade de edição, como um cinza-chumbo.
- Os dois botões (Pesquisar e Limpar) estão muito próximos um do outro. Bastaria inserir/alterar o valor da margem do objeto. Veja abaixo como ficaria a alteração do código CSS para “margin: 5px”:
Conclusão
Assumir que o usuário do site vai deduzir exatamente os caminhos que desenhamos faz parte da construção da experiência, porém considero importante ficar atento a possíveis ambivalências. No caso de uma empresa de energia elétrica, o público-alvo é bastante amplo, portanto, o usuário do site será também muito diversificado.
Esta é a segunda parte de uma série de análises que estou fazendo em torno do site da CEEE. Minha ideia aqui é estudar este site como um case de redesign, explicando minhas decisões e atravessando processos de UX Design.
> Estudo de UX Forms: Agência Virtual CEEE (parte 3)
Se você gostou deste conteúdo, considere assinar (aqui ao lado) minha NEWSLETTER para receber por e-mail as postagens deste Blog. É de graça!
E fique a vontade para me seguir nas redes sociais:
__
Foto de destaque por Fré Sonneveld em Unsplash
