Wikipédia Concept Design
Eu, como estudante/workaholic de interfaces digitais (e mutante X-men nas horas vagas), adoro um desafio, pense como eu amo o seguinte cenário:
Eu, uma mesa, um briefing, vários dados/pesquisas, uma caneta e uns bloquinhos.
Adoro montar fluxos, definir interações e organizar coisas desorganizadas! Por isso mesmo, o desafio abaixo foi um prato cheio. Vamos lá!
Desafio
Sendo um site mundial tão relevante e complexo, fui desafiada no curso Master Interface Design do Aela.io, à elaborar um estudo de redesign da Wikipédia. Como a Wikipédia é enorme, tracei os seguintes objetivos:
- Fazer o redesign focado no usuário geral (e não nos contribuidores);
- Não fazer uma reformulação abrupta para que o usuário não sinta o contraste tão grande;
- Melhorar a hierarquia e organização da informação, navegação e tornar o site visualmente mais atrativo.
Foco de Design
Arquitetura da informação/Design de Interação/Visual Design
Processos
Os processos seguidos neste estudo foram:
- Análise da Wikipédia
- Criação de Personas
- Jornada do usuário
- Pesquisa de features e referências visuais
- Sitemap
- Sketches
- Wireframes
- Protótipo
- Interface final
Desafios e Restrições
Um desafio deste projeto foi não possuir acesso a pesquisas de usuários reais e internas do Wikipédia. Com essa restrição, passei pelos caminhos possíveis. Falei com alguns usuários reais da Wikipedia que tive acesso e simulei a jornada do usuário de acordo com as dificuldades coletadas.
Análise da Wikipédia
Após a análise, os principais problemas identificados na Wikipédia foram:
- Menu confuso;
- Informação que poderia ser secundária na home, estando em destaque;
- Texto, em geral, cansativo e não atrativo;
- Portais com navegação cansativa e sem padronização.
Personas
Identifiquei 3 personas principais:
- O usuário que é redirecionado pelo Google.
- O usuário que vai diretamente à Wikipedia para procurar algo.
- O público mais jovem, que vai especificamente para o trabalho na escola ou faculdade.
Jornada do usuário
As principais percepções de melhorias vindas da jornada do usuário foram:
- Destacar Wikinews (isso pode ajudar trazer o usuário diariamente ao site para acompanhar as notícias);
- Hierarquizar e padronizar melhor o site como um todo;
- Adicionar recurso de salvar artigos no perfil do usuário;
- Deixar a navegação pelos portais mais intuitiva e organizada;
- Definir melhor a estrutura dos artigos, para que a leitura seja fluida e agradável.
Sitemap
Desenvolvi o sitemap com a missão de deixar a navegação mais fluida e organizada. Depois que o sitemap é concluído, é mais fácil começar a desenhar e pensar nas telas.
4 áreas macro foram separadas: header principal, header secundário, sidebar e footer.
Sketches
Interface Final
O menu foi dividido em duas partes:
Header
Tem as funções mais secundárias para o usuário, link para outros projetos, mudança de idioma, além do perfil, que está localizado na parte da tela em que o usuário já está acostumado.
Sidebar
Possui as funções mais utilizadas para navegação pelo site (portais e configuração).
Como a tela inicial da wikipédia possui muita informação, os tópicos foram colocados em boxes, deixando mais organizados e mantendo, quando possível, textos que são links em azul, lembrando a Wikipédia como é hoje.
Perfil
O perfil do usuário possui três principais funcionalidades: favoritar, salvar em uma pasta específica ou grifar parágrafos de artigos. Dentro do perfil, o usuário pode: editar a nota, arrastar para cima e para baixo, transferir de favoritos para salvos e descartar o artigo.
Portais
Hoje, a estrutura dos portais do Wikipédia são complexas, sem consistência e difícil de navegar. Nesta proposta, foi inserida uma caixa de navegação. Dessa forma, o usuário pode escolher qual filtro pesquisar e navegar pela linha do tempo, mapa ou sessões relacionadas ao portal.
Artigos
Na página de artigos, o sumário é fixo no scroll, na parte superior da tela.
O usuário tem três alternativas de localização através do sumário:
- Se localizar, pela atualização do sumário através do scroll, em qual tópico ele está no momento;
- Ir para o próximo tópico clicando nas setas;
- Abrir o sumário e vê-lo completo.
Amanda Damasceno, faz parte da comunidade Aela, como aluna do bootcamp Master Interface Design. Nossos alunos, são estimulados a compartilharem conhecimentos e aprendizados através de textos aqui no Medium.
Quer acompanhar os próximos artigos da Amanda e da comunidade Aela? Lembre-se de nos seguir aqui no Medium e assine nossa newsletter para receber novidades por email.
