O objetivo desta série de artigos é fazer uma análise dos layouts e das interações do site da principal empresa de energia elétrica do Rio Grande do Sul. Trata-se aqui de um estudo de UX Design das páginas que fornecem serviços essenciais aos clientes da companhia.
A ideia aqui é identificar e apontar possíveis mudanças na página. Mostrar de que forma poderia ser melhor organizados os elementos que compõem a experiência de usuário.
Contexto
A CEEE (Companhia Estadual de Energia Elétrica) foi uma empresa estatal de geração, transmissão e distribuição do setor elétrico fundada em 1943. Ao longo de décadas, partes dela foram sendo privatizadas em determinadas regiões do estado. Há menos de um ano, o braço de distribuição da CEEE foi privatizado pelo Estado e arrematado pelo grupo Equatorial pela bagatela de R$ 100.000,00.
Minha análise vai se concentrar nas páginas responsáveis pelos serviços essenciais: atualização de cadastros de Unidades Consumidoras, emissão de segunda via de boletos, denúncia de furtos etc. Estas atividades ocorrem hoje exclusivamente através de um portal virtual da companhia: a Agência Virtual.
Apesar de bastante funcional, na minha opinião, o espaço possui um design visual bastante antigo e de pouca intuição. Sendo assim, o meu objetivo aqui é observar os elementos das páginas e pensar em alternativas.
E apenas um aviso: esta análise não é uma crítica a qualidade do serviço prestado por uma empresa pública. O objetivo aqui é outro: analisar e propor alternativas de design que possam melhorar este serviço. Estou aqui para estudar um site e propor soluções.
Início
Ao acessar o site oficial da CEEE encontramos a seguinte página:
Para fins de desambiguação, tanto no portal da CEEE quanto no da Equatorial, há diversos links que destinam o cliente para executar os serviços básicos que mencionei anteriormente. Todos eles caem, em algum momento, na mesma plataforma: a Agência Virtual, objeto desta análise. Portanto, vamos a Agência.
Agência Virtual
Nesta página inicial, chamada também de Agência Eletrônica, podemos perceber um certo arcaísmo no layout, típico de uma empresa que não atualiza o design a um bom tempo. Veja abaixo o print da página e, a seguir, algumas observações sobre a página:
- O elemento do cabeçalho (header), a parte em azul com cantos arredondados, está em formato de Imagem (.png), o que prejudica o escaneamento por meio de leitores de tela para pessoas deficientes visuais. Trata-se de um erro básico de acessibilidade, pois o texto que lemos no lado direito (Agência Virtual) não poderá ser interpretado como texto. Uma solução imediata seria aplicar um atributo “alt” no código HTML. Outro caminho seria redesenhar esta seção, aplicando de um lado a imagem do logotipo e do outro um elemento textual básico.
- Apesar de minimalista, a página não fornece uma ação óbvia e direta. Há uma saudação de “boas vindas” no corpo (body), mas o usuário precisa necessariamente recorrer ao menu lateral esquerdo para executar alguma ação. Uma sugestão seria direcionar o usuário diretamente ao campo de login para fornecer uma ação mais centralizada e intuitiva. As demais opções ficariam ocultas num menu, ou dispostas de maneira secundária.
- Na parte inferior da página, a recomendação de navegadores se torna um tanto obsoleta. Neste caso, não há qualquer necessidade da existência destes elementos. Ainda se fosse para indicar algum procedimento específico para diferentes browsers ou o download de um plug-in necessário para que o site seja executado, mas os links não levam a lugar algum.
Menu lateral
No lado esquerdo da página podemos ver uma lista com as opções possíveis nesta primeira etapa pré-login. A distribuição não possui uma hierarquia lógica, apesar de poucos itens, não está muito claro por onde o usuário deve começar. Ao longo desta série vamos detalhar cada um destes pontos.
Cliente
Este elemento presente no menu lateral é o que encaminha o usuário a autenticar a sua entrada na plataforma de serviços da empresa. Ou seja, trata-se do acesso principal ao site e, por isso, considero que mereceria mais destaque.
Na minha opinião, tenho dúvidas se o usuário entende que este seja o principal caminho para acessar os serviços. A simples substituição da palavra “Cliente” por “Entrar” ou “Acessar Serviços”, talvez, poderia facilitar o acesso.
É interessante notar que, mesmo que se possa ter sugestões mais modernas para o design desta página, ela ainda é bastante eficiente: uma estrutura simples, funcional e disposta dos requisitos básicos de uma clássica página de “Login”. Veja abaixo:
- Título [Serviços ao Cliente]
- Texto imperativo-descritivo [Digite o número do seu documento (CPF ou CNPJ)].
- Texto condicional sobre como devem ser digitados os dados [Os números devem ser digitados sem separação];
- Label de identificação [Documento (CPF ou CNPJ):];
- Campo de preenchimento (input);
- Ícone de ajuda com função hover (passar mouse por cima), usado para reforçar a explicação dada anteriormente. [Digite o número do seu CPF em caso de pessoa física ou o número do CNPJ em caso de pessoa jurídica. Digite sem separações.]. Veja abaixo:
- Botão [Entrar] para prosseguir a ação;
Como veremos mais para frente nesta série, não posso deixar de comentar que este site se encaixa perfeitamente no clichê “old but gold” (“velho mas bom”).
Note que a página ainda não pediu a senha ao usuário, o que só acontecerá num segundo momento, assim que o “Documento” for autenticado. Este estilo de approach, ou seja, esta forma de receber o usuário na plataforma é amplamente usada hoje em páginas de acesso a redes sociais e e-mails. A título de exemplo, a página de login do Gmail:
Na primeira etapa, é solicitado apenas a identificação do usuário, no caso do Gmail, o e-mail ou telefone:
Na segunda etapa, após inserir a identificação, é pedido a senha:
Um redesign desta página, portanto, não deverá ser muito complicado, visto que os elementos estão dispostos de forma minimalista, o que facilita também os próximos passos do usuário, que veremos a seguir.
Caminhos possíveis
Neste ponto do site há duas situações possíveis para autenticação dos dados inseridos no campo input (“Documento”) que levam a páginas diferentes. Não pretendo aqui explicar muito sobre jornada de usuário, mas vale destacar a importância das bifurcações que surgirão de certas ações:
Situação 1:
O usuário insere um dado que corresponde a um registro já cadastrado na empresa, logo, a página é atualizada para a etapa seguinte, a senha:
Seguindo a mesma tendência da etapa anterior de identificação, nesta situação a organização dos elementos fica a seguinte:
- Título [Digite sua senha]
- Texto imperativo-descritivo [Por favor, preencha sua senha de acesso].
- Label que sinalizo o tipo de dado a ser inserido [Senha:]
- Campo de preenchimento (input);
- Botão [Entrar] para prosseguir a ação;
- Texto secundário como alternativa de ausência de preenchimento (input) [Esqueceu sua senha?]
- Link para resolver o problema da ausência do dado. [Clique aqui]
Nesta página comento apenas que poderia existir um elemento para que o usuário pudesse visualizar a senha que está digitando. Poderia ser uma caixa de seleção com a label “Mostrar senha” ou um ícone que simboliza a ação (veja abaixo):
Caso o usuário digite corretamente a senha no campo input, a plataforma será acessada e partiremos para a próxima fase. No entanto, se a senha digitada não for a correta, a página informará um erro (em azul):
O usuário poderá repetir o procedimento na mesma página ou pegar outro caminho: a possibilidade de recuperar a senha por e-mail, o famoso “Esqueci a senha”.
Descrição dos elementos:
- Título [Envio de senha por email]
- Texto [Sua senha será enviada para o endereço de e-mail ___]
- Botão [Enviar] para prosseguir a ação;
Ao clicar no botão “Enviar”, a página é atualizada com a confirmação de envio por e-mail:
Então, o site da CEEE envia uma nova senha provisória para o e-mail cadastrado. Sendo assim, ao tentar acessar novamente a página inicial da Agência Virtual, o usuário será encaminhado ao caminho que chamo aqui de “Primeiro Acesso”:
Descrição dos elementos:
- Título [Este é o primeiro login, por favor troque sua senha.]
- Label 1 [Senha Atual:];
- Campo input 1;
- Label 2 [Nova Senha:];
- Campo input 2;
- Label 3 [Confirme a nova senha:];
- Campo input 3;
- Label 4 [Novo lembrete de senha:];
- Campo input 4;
- Botão [Enviar] para prosseguir a ação;
- Texto secundário como alternativa de ausência de preenchimento (input) [Esqueceu sua senha?]
- Link para resolver o problema da ausência do dado. [Clique aqui]
Ainda nesta situação, temos a possibilidade de o usuário esquecer de preencher algum dos campos input ou digitar os dados de maneira incorreta. Sendo assim, num exemplo de não preencher o campo “Novo lembrete de senha”, a página retorna da seguinte maneira:
Caso não haja qualquer erro, o site retornará com a mensagem de senha atualizada:
Situação 2:
O usuário insere um dado que não corresponde a um registro já cadastrado na empresa. Então, a mensagem é a seguinte:
Situação 3:
O usuário escreve um dado que não possui nenhuma Unidade Consumidora associada e recebe como resposta a mensagem seguinte:
Esta é uma mensagem que poderia conter um link para instruir o usuário a realizar um cadastro. Apesar de não ser difícil de deduzir, o site não nos fornece a orientação de que um novo cadastro se dá através da Troca de Titularidade, elemento que compõe o Menu lateral e que veremos mais à frente.
Uma sugestão seria conduzir o usuário obrigatoriamente a criar um cadastro na plataforma, antes mesmo de perguntar quais as intenções dele no site.
Sitemap
Para que se possa visualizar melhor os caminhos percorridos até aqui, desenhei um sitemap desta primeira etapa de análise do site.
Conclusão
Nesta primeira etapa de análise dos elementos foi possível identificar pontos que mereceriam um redesign como no login e suas opções de acesso à plataforma. Da mesma forma, entende-se que, apesar de antigo, a página já apresenta minimalismo, o que facilita algumas modificações de layout.
Esta é a primeira 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 Writing: Agência Virtual CEEE (Parte 2)
> 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 Ralph (Ravi) Kayden em Unsplash.
