Davi Lima
Information architect and front-end developer, making websites with Plone since 2007.
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?
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
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
- Contribuir para a promoção da igualdade de gênero e dos direitos das mulheres no Brasil
- Fortalecer e estimular a participação social
- Subsidiar a formulação, implementação e avaliação de políticas públicas
- 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
- Plano de trabalho
- Arquitetura de informação
- Wireframes
- Identidade visual
- Codificação das interfaces
- Marketing online
- Manual do usuário
- 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!
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
Experiência do Usuário em Projetos Plone - O caso do Observatório Brasil da Igualdade de Gênero
By Davi Lima
