E-Ouv Amapá

Contexto Geral

A Controladoria-Geral do Estado do Amapá (CGE) solicitou uma análise técnica e uma proposta de remodelação das interfaces e de algumas regras de negócio do Sistema de Ouvidoria (E-Ouv) dentro dos preceitos não apenas visuais, mas, de propor a todos que acessem tenham facilidade, interatividade e acessibilidade durante toda a sua trajetória usufruindo dos recursos desejados.

Objetivo

Tendo como base o modelo UX/UI (experiência do usuário / interface do usuário) em que a experiência do usuário se preocupa em como as pessoas se sentem sobre utilizar um produto ou serviço, a equipe de Experiência do Usuário do Prodap analisou as telas do atual sistema e do sistema de ouvidoria federal, chamado de Fala.BR. A partir da análise técnica destes sitemas, uma nova proposta de interface foi criada e apresentada para os responsáveis pela ferramenta na CGE.

Envolvidos

• Equipe de UX do PRODAP
• Servidores da CGE

Ferramentas

• Docs (docs.google.com)
  
  • Briefing
  • Documento de Apresentação do Resultado Final
• Design System PRODAP (https://prodap.ap.gov.br/ds/#/)
  
  • Protótipo
• Figma (www.figma.com)
  
  • Protótipo Visual

Para a resolução do problema encontrado foram utilizados os seguintes processos:

• Heurísticas de usabilidade na web de Nielsen: para dar embasamento em um bom projeto de interface aliada com uma ótima experiência de uso.
• Lei de Acesso à informação: Lei Nº 12.527, dispõe sobre o dever do Estado garantir o acesso à informação para a população.
• Wireframes utilizando o Design System: O Design System do Amapá reúne um grande número de normatizações e boas práticas para os projetos de Interface das ferramentas digitais do Estado. O Wireframe desenvolvido foi todo embasado dentro do que recomenda o Design System.
• Protótipo no Figma: A partir do wireframe, um protótipo foi feito na ferramenta Figma, tornando a prototipação mais aproximada de um produto final

Para a resolução do problema encontrado foram utilizados os seguintes processos:

1. Nova Tela Inicial

   Seguindo a ideia proposta pelo Fala.Br, a tela inicial foi remodelada, as operações do site foram organizadas em cards com cores diferentes, facilitando o acesso dos usuários.

   

   Tela Inicial da Ferramenta.

2. Opção de fale conosco

   De acordo com a heurística de ajuda e documentação, é importante disponibilizar itens de ajuda caso o usuário necessite. O ícone para o Fale Conosco em forma de telefone fica localizado junto com as redes sociais do Governo, é importante que ao passar com o Mouse por cima um indicador de “Fale Conosco” apareça na tela um Popover (texto explicativo), por exemplo.

   

   Ícone do Fale Conosco em forma de headset

3. Login Único

   Um importante objetivo da experiência do usuário é fazer com que o usuário se sinta familiarizado com a ferramenta que está sendo utilizada, pensando nisso, a forma de acesso ao E-ouv foi repensada para se ajustar ao Login Único do Governo do Estado do Amapá, bastando apenas um cadastro, pro cidadão ter acesso a vários serviços do Governo, inclusive o E-Ouv.

   

   Página do Login Único

4. Opção de Acessibilidade

   De acordo com a ISO 9241-11 a satisfação é o conforto e aceitabilidade do produto, e são medidos por meio de métodos subjetivos e/ou objetivos. Tornar o conteúdo adaptável irá gerar uma melhor acessibilidade no site. Uma barra superior ao cabeçalho do site será colocada, pois ela identifica como uma site do GEA e trás as opções de acessibilidade que devem estar disponíveis no site, como aumento de fontes, navegação de alto contraste e algumas teclas de atalho. Atualmente o Prodap utiliza uma solução de acessibilidade para os sites governamentais e está disponível no link da área de “Experiência do Usuário” ou outras soluções adquiridas ou homologadas pelo PRODAP.

   

   Opções de Acessibilidade do Site

5. Opção/botão/link de acesso ao portal da transparência e secretarias

   Disponibilizar meios de acesso aos demais portais de informação do governo gerando consistência e padronização de itens. Além do reconhecimento das informações. Como também mostrado na imagem anterior.
   Na imagem acima é possível identificar os links de acesso.

6. Padronização de campos e botões de formulários

   Do tamanho vertical dos campos às cores dos botões foram todos padronizados, para que o usuário encontre uma uniformidade e conforto visual ao preencher as informações que são pedidas em um formulário.

   

   Cadastro de Órgão - Exemplo de Formulário

7. Tabelas com campos de pesquisa

   As tabelas foram padronizadas e possuem um campo de pesquisa que é capaz de encontrar qualquer campo a medida que as letras forem sendo digitadas. Os ícones também foram modificados para se adequarem melhor às operações correspondentes. A mesma ideia de padronização de cores dos formulários foi aplicado nas tabelas do E-Ouv.

   

   Tabela com campos de pesquisa