Portal de Notícias

Contexto Geral

A Secretaria de Estado de Comunicação (SECOM) solicitou uma análise técnica e uma proposta de remodelação do atual Portal de Notícias 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 a proposta de interface do novo Portal de Notícias do Estado do Amapá, utilizando critérios técnicos para analisar diversos itens do portal proposto pela SECOM, objetivando melhorar a interação do público com a interface (estrutura visual e de conteúdo) do site.

Envolvidos

• Equipe de UX do PRODAP

Ferramentas

• Docs (docs.google.com)
  
  • Briefing
  • Documento de Apresentação do Resultado Final
• Design System PRODAP (https://prodap.ap.gov.br/ds/#/)
  
  • Protótipo
• Photoshop (www.photoshop.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.
• Protótipo no Photoshop: A partir do levantamento feito na análise da proposta e do atual portal, um protótipo foi feito na ferramenta de edição de imagens Photoshop, tornando a prototipação mais aproximada de um produto final.

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

1. Barra de Pesquisa

   Com base na flexibilidade e eficiência uma interface tem que atender tantos os usuários inexperientes quanto os experientes. Dessa forma, uma barra de pesquisa possibilita a procura por informações sem que o usuário precise memorizar onde os itens se encontram. O campo de pesquisa na proposta está localizado bem no centro do cabeçalho do site.

   

   Cabeçalho do Portal.

   

   Cabeçalho Mobile do Portal.

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. Menu Dropdown

   É necessário disponibilizar liberdade e controle do usuário, sugerindo uma ação e não induzi-lo a um caminho fixo. Sendo assim, através do menu dropdown será possível estabelecer uma lista de ações que o usuário poderá fazer, além da liberdade de navegação entre os itens, tornando possível acessar o conteúdo inteiro do site com poucos cliques.

   O menu dropdown irá juntar as subáreas de cada área principal do menu principal do site de acordo com sua respectiva cor. Para evitar a redundância e ganhar mais espaço no site, a palavra “desenvolvimento” foi retirada do início de cada item do menu. Ao acessar o site por um smartphone, o menu será colapsado na barra do topo e poderá ser acessado através do ícone de três barras na horizontal, para acessar os submenus basta clicar no item de menu desejado que eles aparecerão utilizando um efeito de sanfona (accordeon).

   

   Menu dropdown do site

   

   Menu dropdown mobile

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.

6. Carrossel de Notícias e Coluna da Direita

   O carrossel de notícias irá mostrar as últimas notícias em destaques, o tamanho do carrossel foi diminuído para otimizar a navegação e os efeitos de transparência e cantos arredondados foram retirados para consumirem menos recursos de memória e de dados.

   Na coluna da direita, devido a uma prioridade de importância o quadro de “Pautas e Eventos” trocou de lugar com as informações meteorológicas para receber parte da atenção que o carrossel terá. As informações meteorológicas ficam em forma de cards e com setas para que seja possível trocar de município e assim se informar sobre o tempo em diferentes locais do estado.

   Admitindo que estas informações serão disponibilizadas via API disponível, cabe uma verificação no impacto de performance geral no site para saber se este produz alguma um consumo de dados significativo na exibição da informação, principalmente quando o acesso tiver origem em dispositivos móveis

   

   Carrossel de destaques e ferramentas da coluna direita

7. Notícias e Vídeos

   Segundo Rosenfeld em seu livro “Information Architecture for the World Wide Web” (1998), em um site em que o conteúdo é o mais importante, o usuário deve ter clareza em identificar em que parte do site está, por isso é necessário a criação de rótulos nas áreas do site, por isso na coluna de notícias e vídeos foram colocados títulos para essa identificação.

   Outra pequena modificação foi substituir “Ver todas as notícias”, que se repetia em uma área mais abaixo, por “Ver todos os Destaques” assim é criado uma relação direta com o site.

   Na coluna da direita, as postagens em redes sociais dão lugar a um player de vídeo, visto que a intenção do site é que o usuário permaneça no site e redes sociais podem acabar causando uma distração e que o conteúdo ali postado já estaria presente no site da Agência de Notícias. As redes sociais foram para a barra do topo.

   

   Notícias e Vídeos

8. Destaques

   Com o espaço adquirido devido às alterações no site, as notícias passam a ocupar 3 colunas na página principal, permitindo destaque maior ao foco principal do novo portal.

   

   Notícias em Destaques distribuídas por 3 colunas

Com essas alterações, houve uma razoável diminuição do espaço vertical ocupado pelo site, permitindo que o usuário possa percorrer todo o conteúdo da tela principal mais rapidamente, o que torna menos cansativa essa tarefa.