Wikipedia se encuentra actualmente en un rediseño muy necesario para mejorar la experiencia del usuario.

Cualquiera puede previsualizar este rediseño por creando una cuenta, iniciando sesión y luego hacer clic en el enlace "Try Beta" en la parte superior derecha de cualquier página.

La "Iniciativa de usabilidad de Wikipedia" se ha dividido en dos fases. La fase 1 fue la fase de prototipo y finalizó en el verano de 2009.

El equipo del proyecto se encuentra actualmente en la segunda fase, que es la fase de desarrollo y prueba.

El proyecto también se ha separado en cuatro lanzamientos ; a partir de la redacción de este artículo, el segundo lanzamiento (Babaco) se encuentra actualmente en desarrollo.

En este artículo, discutiremos los cambios de diseño de Wikipedia y las razones detrás de ellos.

La Iniciativa de Usabilidad de Wikipedia está programada para estar lista en la primavera de 2010. Se puede encontrar más información sobre el proyecto. aquí .

El rediseño se centra en la usabilidad . Aunque no se han realizado cambios drásticos, la apariencia general del sitio web es mucho más limpia y más moderna. La interfaz de edición renovada es una actualización importante de la que los editores de Wikipedia seguramente se entusiasmarán.

Al igual que muchas operaciones a pequeña escala, Wikipedia no cuenta con el presupuesto para probar sistemáticamente cómo los visitantes usan el sitio web. En cambio, depende de los comentarios de los usuarios para identificar y abordar problemas.

Limpiado

Nuestra primera impresión del rediseño beta es que parece bastante nítida y ordenada. El diseño sigue siendo fundamentalmente el mismo; este rediseño probablemente no causará la misma indignación que Facebook removido con su rediseño en marzo de 2009.

El cambio más obvio es que los diversos componentes en la página ya no están confinados a su propia caja. Las áreas de navegación y contenido principal no están cerradas, y se extienden hasta el borde de la ventana del navegador.

El otro cambio obvio es que Wikipedia ha retirado la imagen de fondo del libro abierto. Esto limpia el diseño significativamente y hace que el logotipo se vea mucho más nítido.

Diseño antiguo:


Nuevo diseño:

Leve cambio de colores

En general, el nuevo diseño parece más suave . Los enlaces de navegación en la barra lateral izquierda ahora son un poco más grandes y fáciles de leer. Los colores de los enlaces se han alterado ligeramente para hacerlos menos vibrantes.

El color del enlace anterior (izquierda) en comparación con el nuevo color del enlace (derecha):


El color del enlace visitado anteriormente (izquierda) en comparación con el nuevo (derecha):

Cambiar el color del enlace visitado de púrpura a azul oscuro es muy útil para que el sitio web se vea más moderno. También simplifica el esquema de color y hace que la apariencia sea más profesional.

Buscar reubicación en el bar

El único cambio que podría molestar a los visitantes regulares es la reubicación de la barra de búsqueda.

Ya no se encuentra en el medio de la sección de navegación. Se ha movido a la parte superior derecha de la página. Esta ubicación se ha convertido en estándar en muchos sitios web y es donde las personas miran primero cuando quieren realizar una búsqueda.

La nueva ubicación de la barra de búsqueda:

Pestañas reorganizadas

Las pestañas también se han reorganizado. Se les ha dado una nueva apariencia y ahora son más fáciles de detectar. Dividirlos en dos grupos hace que su estructura sea más lógica. La parte superior descolorida de las pestañas también abre la página.

Diseño antiguo:


Nuevo diseño:

Edición de página

La nueva interfaz de edición de página es maravillosa. La combinación de iconos textuales y gráficos y la agrupación de opciones de edición facilita mucho la edición.

Para averiguar qué hacía cada botón antes, el usuario tenía que pasar el puntero sobre el ícono no intuitivo y esperar a que aparezca la información sobre herramientas; ya no. Y el nuevo panel a la derecha del área de texto ayuda a los usuarios a navegar por la página.

Interfaz de edición antigua:


Nueva interfaz de edición:


Para activar las nuevas funciones, vaya a sus "Preferencias" y luego haga clic en la pestaña "Edición". En la parte inferior, encontrará algunas casillas de verificación con la etiqueta "Experimental".

Habilitando las características experimentales:


La última versión incluye nuevos cuadros de diálogo para insertar enlaces y tablas. Debido a que el área de texto puede estar un poco desordenada, estos cuadros de diálogo son útiles para ayudar a los usuarios a enfocarse en una tarea a la vez.

El cuadro de diálogo de la tabla podría tener más funciones (como permitirle editar el contenido de las celdas de la tabla), pero esta versión aún está en desarrollo, por lo que esperaré para ver si hay algo más antes de agregar funciones oficialmente a mi lista de deseos.

El cuadro de diálogo para insertar un enlace:

El cuadro de diálogo para insertar una tabla:

¿Qué falta?

Debido a que el proyecto todavía está en beta, ahora es el mejor momento para sugerir qué más se puede hacer para mejorar la interfaz de usuario de Wikipedia. Aquí están mis ideas:

  • Vista previa de AJAX BeautyTip en enlace estacionario
    Sería bueno si apareciera una información sobre herramientas, a través del BeautyTip jQuery plug-in, siempre que navegas sobre un enlace interno. La información sobre herramientas contendría el primer párrafo del artículo vinculado. El aumento en el ancho de banda de esta función puede ser demasiado grande, pero aún me gustaría verlo probado.
  • Coloración de sintaxis en el área de texto de edición
    Trabajar con código todo en el mismo color es muy difícil. El ojo humano tiene que escanear el texto linealmente para encontrar lo que quiere. Las sugerencias visuales serían de gran ayuda. Mientras estamos en ello, el área de texto también debe tener una barra de desplazamiento horizontal para que las cosas como las tablas se vean mejor en el código.
  • Opción para tener texto de cuerpo de ancho fijo
    Cuando leo un largo pasaje de texto, me gusta maximizar mi ventana para minimizar las distracciones. Tal como están las cosas, no puedo hacer esto porque las líneas de texto se vuelven más anchas que mi monitor de pantalla panorámica. Me encantaría poder arreglar el ancho de los párrafos a alrededor de 600 píxeles para facilitar la lectura.
  • Aumentar el peso visual del botón "Ir"
    El único cambio al que estoy en contra es hacer que el botón "Ir" tenga el mismo peso que el botón "Buscar". El diseño antiguo ponderaba el texto del botón "Ir" un poco más, lo que hace obvio que presionar la tecla "Entrar" era lo mismo que hacer clic en el botón "Ir". La diferencia en el peso era lo suficientemente pequeña como para que los usuarios pudieran ver la diferencia solo mirándola directamente. Esto debería ser devuelto.

¡Pruébalo!

El nuevo diseño se ve bastante bien, pero aún no está terminado. Estoy seguro de que el equipo de Wikipedia Usability Initiative agradecerá a todos los que prueben la versión beta y envíenos sus comentarios.

Wikipedia depende de sus usuarios para descubrir cómo mejorar el sitio web, y estoy seguro de que la comunidad de Webdesigner Depot puede presentar algunas ideas geniales.

Por último, considere donando a Wikipedia . Porque poder leer sobre viejos juegos de Nintendo sin los anuncios de Evony ensuciar la página es bastante agradable.


Escrito exclusivamente para WDD por Eli Penner .

¿Qué piensas del próximo diseño de Wikipedia? ¿Cómo mejorarías el diseño?