A Wikipédia está passando por uma reformulação muito necessária para melhorar a experiência do usuário.

Qualquer um pode visualizar esse novo design criando uma conta, fazendo login e, em seguida, clique no link "Try Beta" no canto superior direito de qualquer página.

A “Iniciativa de Usabilidade da Wikipédia” foi dividida em duas fases. A fase 1 foi a fase de protótipo e terminou no verão de 2009.

A equipe do projeto está atualmente na segunda fase, que é a fase de desenvolvimento e teste.

O projeto também foi separado em quatro lançamentos ; a partir da redação deste artigo, o segundo lançamento (Babaco) está atualmente em desenvolvimento.

Neste artigo, discutiremos as mudanças no design da Wikipédia e as razões por trás delas.

A Iniciativa de Usabilidade da Wikipédia está programada para estar pronta na primavera de 2010. Mais informações sobre o projeto podem ser encontradas Aqui .

O redesenho é focado na usabilidade . Embora nenhuma mudança drástica tenha sido feita, a aparência geral do site é muito mais limpa e moderna. A renovada interface de edição é uma grande atualização com a qual os editores da Wikipédia certamente ficarão animados.

Como muitas operações de pequena escala, a Wikipedia não tem o orçamento para testar sistematicamente como os visitantes usam o site. Em vez disso, depende do feedback dos usuários para identificar e resolver problemas.

Limpo

Nossa primeira impressão do redesenho beta é que ele parece bastante nítido e organizado. O layout ainda é fundamentalmente o mesmo; este redesenho provavelmente não causará o mesmo ultraje que Facebook mexeu com seu redesign em março de 2009.

A mudança mais óbvia é que os vários componentes da página não estão mais confinados à sua própria caixa. As áreas de navegação e conteúdo principal não estão fechadas e se estendem até a borda da janela do navegador.

A outra mudança óbvia é que a Wikipedia retirou a imagem de fundo do livro aberto. Isso limpa o design de forma significativa e torna o logotipo muito mais nítido.

Projeto antigo:


Novo design:

Ligeira mudança nas cores

No geral, o novo design parece mais suave . Os links de navegação na barra lateral esquerda são agora um pouco maiores e mais fáceis de ler. As cores dos links foram alteradas ligeiramente para torná-las menos vibrantes.

A cor do link antigo (à esquerda) em comparação com a nova cor do link (à direita):


A cor do link visitado antigo (à esquerda) comparado com o novo (à direita):

Alterar a cor do link visitado de roxo para azul escuro ajuda muito a tornar o site mais moderno. Também simplifica o esquema de cores e torna a aparência mais profissional.

Barra de Pesquisa Relocalização

A única mudança que pode atrapalhar os visitantes regulares é a realocação da barra de pesquisa.

Não está mais aninhado no meio da seção de navegação. Foi movido para o canto superior direito da página. Essa veiculação se tornou padrão em muitos sites e é onde as pessoas olham primeiro quando desejam realizar uma pesquisa.

O novo local da barra de pesquisa:

Guias Reorganizadas

As guias também foram reorganizadas. Eles receberam um novo visual e agora são mais fáceis de identificar. Dividi-los em dois grupos torna sua estrutura mais lógica. A parte superior desbotada das abas também abre a página.

Projeto antigo:


Novo design:

Edição de Página

A nova interface de edição de páginas é maravilhosa. A mistura de ícones textuais e gráficos e o agrupamento de opções de edição tornam a edição muito mais fácil.

Para descobrir o que cada botão fazia antes, o usuário tinha que passar o mouse sobre o ícone não intuitivo e esperar que a dica aparecesse; não mais. E o novo painel à direita da área de texto ajuda os usuários a navegar na página.

Interface de edição antiga:


Nova interface de edição:


Para ativar os novos recursos, vá para suas “Preferências” e clique na guia “Edição”. Na parte inferior, você encontrará algumas caixas de seleção denominadas "Experimental".

Ativando os recursos experimentais:


A última versão inclui novas caixas de diálogo para inserir links e tabelas. Como a área de texto pode ficar um pouco confusa, essas caixas de diálogo são úteis para ajudar os usuários a se concentrarem em uma tarefa por vez.

A caixa de diálogo da tabela pode funcionar com mais funcionalidades (como permitir editar o conteúdo das células da tabela), mas esta versão ainda está em desenvolvimento, então esperarei para ver se mais vem antes de adicionar recursos oficialmente à minha lista de desejos.

A caixa de diálogo para inserir um link:

A caixa de diálogo para inserir uma tabela:

O que está a faltar?

Como o projeto ainda está em beta, agora é a melhor hora para sugerir o que mais pode ser feito para melhorar a interface do usuário da Wikipedia. Aqui estão minhas idéias:

  • Visualização do AJAX BeautyTip no hover de link
    Seria legal se uma dica de ferramenta aparecesse, via BeautyTip plug-in jQuery, sempre que você passou por cima de um link interno. A dica de ferramenta conteria o primeiro parágrafo do artigo vinculado. O aumento na largura de banda deste recurso pode ser muito grande, mas eu ainda gostaria de ver testado.
  • Coloração de sintaxe na área de texto de edição
    Trabalhar com código na mesma cor é muito difícil. O olho humano tem que escanear o texto linearmente para descobrir o que ele quer. Dicas visuais seriam uma grande ajuda. Enquanto estamos nisso, a área de texto também deve ter uma barra de rolagem horizontal para que coisas como tabelas pareçam mais agradáveis ​​no código.
  • Opção para ter texto do corpo de largura fixa
    Quando estou lendo uma longa passagem de texto, gosto de maximizar minha janela para minimizar as distrações. Como é, não posso fazer isso porque as linhas de texto ficam mais largas do que o meu monitor widescreen. Eu adoraria poder fixar a largura dos parágrafos em cerca de 600 pixels para facilitar a leitura.
  • Aumentar o peso visual do botão "Ir"
    A única mudança que eu estou contra é fazer o botão "Go" o mesmo peso que o botão "Search". O design antigo ponderava o texto do botão "Ir" um pouco mais pesado, tornando óbvio que pressionar a tecla "Enter" era o mesmo que clicar no botão "Ir". A diferença de peso era pequena o suficiente para que os usuários pudessem ver a diferença apenas olhando diretamente para ela. Isso deve ser trazido de volta.

Experimente!

O novo design parece muito bom, mas ainda não está terminado. Tenho certeza de que a equipe de Iniciativa de Usabilidade da Wikipédia apreciaria que todos experimentassem a versão beta e enviassem feedback.

A Wikipédia depende de seus usuários para descobrir como melhorar o site, e tenho certeza de que a comunidade Webdesigner Depot pode ter ótimas ideias.

Por fim, considere doando para a Wikipedia . Porque ser capaz de ler sobre antigos jogos da Nintendo sem Evony, os anúncios espalhados pela página são bastante agradáveis.


Escrito exclusivamente para WDD por Eli Penner .

O que você acha do novo design da Wikipédia? Como você melhoraria o design?