A Experiência do Usuário
em Projetos Plone:
O caso do Observatório
Brasil da Igualdade de Gênero




DAVI LIMA

Quem sou EU?

Experiência do usuário
Arquitetura de informação
Desenho de interfaces
Plone S2

O QUE JÁ FIZ?


2006 – Graduação em Publicidade pela USP
2007 – Primeiro site Plone: Faculdades Promove
2008 – Interlegis: Projetos LexML e Colab
2009 – Brasil.gov.br, Presidência da República
2010 – Simples Consultoria
2011 – Agência Alagoas de Notícias
2012 – Portal Interlegis.leg.br, Senado Federal
2013 – Observatório Brasil da Igualdade de Gênero, Presidência da República

Por que estamos aqui?

Apresentar metodologias e soluções adotadas

  • Descoberta e inicialização do projeto
  • Pesquisa com usuários
  • Planejamento de comunicação
  • Arquitetura de informação
  • Desenho de interfaces
  • Adoção de ferramentas
  • Ciclos de desenvolvimento
  • Otimização para ambientes de produção e Instalação

Agenda


Apresentação de metodologias

  • Pesquisa com usuários
  • Arquitetura de informação
  • Desenho de interfaces


Apresentação das decisões do projeto

  • Objetivos e requisitos
  • Estratégias de comunicação
  • Arquitetura técnica e ferramentas tecnológicas
  • Avaliação e lições aprendidas

Sobre o Projeto


Objetivos

Pessoas

Entregas

Objetivos do Observatório


  1. Contribuir para a promoção da igualdade de gênero e dos direitos das mulheres no Brasil
  2. Fortalecer e estimular a participação social
  3. Subsidiar a formulação, implementação e avaliação de políticas públicas
  4. Dar visibilidade às políticas públicas e ações que o Estado brasileiro realiza nos âmbitos nacional e internacional.

Objetivos do Projeto


  • Realinhar os conteúdos existentes de acordo com os atuais direcionamentos do Observatório;
  • Disponibilizar indicadores e dados com diferentes possibilidades de visualização e manipulação;
  • Facilitar o acesso à informação pelo usuário e a inserção de conteúdos ricos pelos editores;
  • Atualizar as estratégias de apresentação, divulgação e interação com os conteúdos do site;
  • Estabelecer padrões de projeto visando a integração dos conteúdos e funcionalidades do site com plataformas de participação e consulta públicas.

Pessoas


Arquitetura de Informação &  Desenvolvimento Frontend
Davi Lima

Linguagem Visual
Paula K.

Desenvolvimento Backend
Gustavo Lepri

Produção de Conteúdo
Filipe Hagen,  Mariana Mazzini,  Renata Preturlan

MAIS PESSOAS!


Infraestrutura
Ricardo Brito (PR)

Apoio de T.I.
Alexandre Lovatini (SPM/PR)

Equipes Parceiras
Observatório Participativo da Juventude, SNJ/PR
Secretaria de Assuntos Legislativos, Ministério da Justiça
Infraestrutura Nacional de Dados Abertos, MPOG
VisPublica, MPOG
European Environmental Agency, União Europeia

Entregas


  1. Plano de trabalho
  2. Arquitetura de informação
  3. Wireframes
  4. Identidade visual
  5. Codificação das interfaces
  6. Marketing online
  7. Manual do usuário
  8. Memória do projeto

Antes/depois

Facts & Figures


ANTES

Validação de acessibilidade: 6.3/10 (WCAG 2.0)
Validação de performance: XX/100 (FF YSLOW)

DEPOIS

Validação de acessibilidade: 9.7/10 (WCAG 2.0)
Validação de performance: 78/100 (FF YSLOW)

Check it out!


http://is.gd/observatorio_genero
 

Etapas do Projeto

Levantamento

Planejamento

Desenvolvimento

Deploy

Pesquisa com usuários


Entrevistas com stakeholders
Questionário com usuários
Priorização de conteúdos e funcionalidades
Avaliação de protótipo
Avaliação de identidade visual

entrevistas & questionários

Priorização de conteúdos
e funcionalidades


PRIORIZAÇÃO DE CONTEÚDOS
E FUNCIONALIDADES


Avaliação de protótipo


AVALIAÇÃO DE PROTÓTIPO


Avaliação de identidade visual

arquitetura de informação


Descrição de objetivos
Inventário de conteúdo
Análise de acesso
Mapeamento de necessidades
Definição de taxonomias
Estratégias de comunicação e interação
Tipos de conteúdo
Fluxos de navegação
Mapa do site

mapeamento de necessidades


MAPa do site


Desenho de interfaces


Sketches: principais páginas e conceitos
Wireframes: validação da hierarquia visual
Protótipo interativo: comportamentos
Banco de referências visuais
Linguagem visual: grid, tipografia, paleta, grafismos
Diagramação de conteúdos
Webwriting

LINGUAGEM VISUAL

GRID: 12 COLUNAS

LINGUAGEM VISUAL

WIREFRAMES


LINGUAGEM VISUAL

Protótipo interativo


<DEMO />


LINGUAGEM VISUAL

TIPOGRAFIA: ARSENAL

LINGUAGEM VISUAL

TIPOGRAFIA: OPEN SANS


LINGUAGEM VISUAL

PALETA DE CORES


DESENHO DE INTERFACES

Topo


APRESENTAÇÃO


Pesquisa


Acompanhamento


Participação


Rodapé


Ferramentas & tecnologias


  • Adequação a governo eletrônico por meio dos produtos brasil.gov.barra e brasil.gov.vcge
  • Avaliação de conteúdos com collective.wasthisuseful
  • Integração com redes sociais com collective.simplesocial e collective.twitter.action
  • Capas para página inicial e áreas temáticas com collective.cover
  • Visualizações interativas de dados com eea.daviz
  • Integração com redes sociais com collective.simplesocial e collective.twitter.action
  • Biblioteca com navegação multifacetada por meio do produto eea.facetednavigation
  • Desenvolvimento frontend facilitado por meio do Diazo

Codificação das Interfaces


Github

Trello

HTML5,
CSS3 e jQuery

Google Style Guides

Zurb Foundation

Modernizr

Validação W3C

Acessibilidade

Performance

Legibilidade

Marketing online
& Search engine optimization


Índices de monitoramento
Palavras-chave para páginas críticas
Web banners & Link building
Integração com redes sociais
Compartilhamento de visualizações
Widget para redistribuição de conteúdo

Manual de Utilização
& Memória do Projeto


  • Apresentação das estruturas de informação e de navegação, bem como elementos-chave do novo site;
  • Instruções de uso para cada funcionalidade;
  • Documentação de atividades, competências, papéis e fluxos de trabalho relacionados à manutenção do site .
  • Confecção de caso de negócio, em formato de contexto, problema, solução;
  • Trajetória do projeto, incluindo fatos importantes concebidos durante a elaboração e execução do projeto, bem como orientações para o futuro do site.

Obrigado!

davilima6@gmail.com @davilima6