Diseño De Interfaz: Usabilidad E Innovación Visual Como Factores Claves Para El Exito Futuro - Diseño De Interfaz Y Navegación

Diseño De Interfaz: Usabilidad E Innovación Visual Como Factores Claves Para El Exito Futuro - Diseño De Interfaz Y Navegación

Un número cada vez mayor de sitios web están desarrollando nuevos tipos de diseño de interfaz de usuario, aprovechando los crecientes niveles de sofisticación de los usuarios de Internet y conexiones más veloces. Esas nuevas interfaces a menudo le permiten a los usuarios ver y manipular grandes cantidades de datos.

La interfaz Thinkmap Visual Thesaurus, una de las primeras y más innovadoras interfaz de usuario online

Este artículo echará una mirada a algunas de las más interesantes ideas de diseño de interfaz de usuario que hemos encontrado recientemente:

• Filtrado basado en deslizador


• Menús ojo de pez


• Mapas de árboles


• Arrastrar y soltar

Este artículo no intente promocionar ninguno de esos diseño de interfaz de usuario, sino más bien ofrecerlos con el propósito de interés e inspiración.

A pesar de que todavía tenemos que realizar sobre ellos pruebas a gran escala, consideramos que los mismos tienen el potencial (si se usan en las circunstancias apropiadas) para ofrecer interesantes posibilidades de apoyo a las tareas de los usuarios.

Filtrado basado en deslizador

El diseño de la interfaz usuario de Diamond Search de Amazon utiliza deslizadores (sliders) del tipo arrastrar-y-soltar, para permitir a los usuarios expandir y reducir un amplio rango de criterios de filtrado. La página entonces se actualiza automáticamente para mostrar cuánto resultados satisfacen los criterios seleccionados por el usuario.

Esto puede ser utilizado para crear una interfaz intuitiva e informativa, facilitando a los usuarios la búsqueda a través de grandes conjuntos de datos:

Búsqueda de diamantes de Amazon mostrando 13593 diamantes disponibles para todas las formas, precios, quilates, cortes, colores y opacidades. Para cada uno de su criterios se pueden usar los sliders para definir un rango, por lo tanto filtrando los resultados de búsqueda.

El número de resultados se exhibe en el lado derecho de la página. Esto significa que los usuarios sólo necesitan enviar su consulta cuando están satisfechos con un número de resultados de búsqueda suficientemente pequeño.

Los usuarios pueden refinar su criterios de búsqueda utilizando los sliders, reduciendo de esta manera los resultados a exhibir:

Búsqueda de diamantes en Amazon mostrando 278 diamantes disponibles en un rango de precio de $18,000-$87,000

Cuando los usuarios están satisfechos con el criterio de búsqueda, simplemente seleccionan el botón de 'Ver resultados'. Lo bueno de este diseño es que los usuarios sabrán si no habrá resultados de búsqueda, sin tener que efectuar realmente dicha búsqueda.

Menús ojo de pez
Menús ojo de pezPueden ser muy útiles para ayudar a los usuarios a navegar y seleccionar ítems de una larga lista ordenada. Esos menús cambian dinámicamente el tamaño de los ítems para proporcionar un área ampliada alrededor del cursor. Esto permite presentar todo el menú en una sola pantalla sin requerir botones, barras de deslizamiento o jerarquías.

Menú ojo de pez mostrando una lista alfabética de los países del mundo. El foco ampliado está en el Reino Unido.

Los menús ojo de pez pueden ser potencialmente una fantástica manera de que los usuarios naveguen fácilmente a través de listas extensas.

Mapas de árboles

Los mapas de árboles muestran columnas de datos como grupos de cuadrados que pueden ser ordenados, cambiar su tamaño y aplicarles diferentes colores para revelar gráficamente los patrones de datos subyacentes. Este diseño de interfaz usuario puede ser utilizado para presentar complicadas relaciones de datos (tal como relaciones jerárquicas).

Se puede encontrar un ejemplo en el sitio web Smartmoney, donde una herramienta le permite al visitante ver información sobre centenares de acciones con un solo golpe de vista. En el ejemplo debajo, las acciones están agrupadas de acuerdo al sector y son representadas en rectángulos de diferentes tamaños de acuerdo a su capitalización de mercado. Los colores se utilizan para indicar movimientos de precios significativos, tanto positivos (verde) como negativos (rojo).

Más detalles sobre una compañía están disponibles deslizando el puntero del ratón sobre su rectángulo (por ejemplo, General Electric en el ejemplo debajo).

Mapa de árbol representando diferentes sectores para las acciones.

Arrastrar y soltar

Este tipo de diseño de interfaz de usuario hace uso de la familiaridad del usuario con el desplazamiento de elementos (los usuario pueda haber experimentado esto con aplicaciones Microsoft Windows, por ejemplo). La tienda online de Panic Room le permite a los usuarios hacer clic en un 'símbolo de suma' para agregar un ítem a su carrito o también arrastrar-y-soltar el ítem dentro de el.

Hacer esto es relativamente simple. simplemente hacer clic en el producto de que arrastrar dentro de la canasta:

Instantánea de Panicroom, mostrando tres remeras y una gran área de envío en la parte inferior de la pantalla. El carro de compras muestra la indicación, 'arrastre cualquier ítem aquí para agregarlo a su carrito'.

Manteniendo apretado el botón del ratón, arrastre el ítem a través de la pantalla y suéltelo dentro del canasto:

Instantánea de Panicroom, mostrando una remera que es arrastrada a través de la pantalla hacia el área del carro.

Instantánea de Panicroom, mostrando ahora la remera ubicada exitosamente en el área del carro .

Finalmente , libere el botón del ratón para soltar el ítem dentro de la canasta:

Conclusión

El diseño innovador de la interfaz del usuario es clave para desarrollar interacción online del usuario nuevas y mejoradas.

El problema al diseñar una interfaz del usuario totalmente singular, sin embargo, es que los usuarios quizá no sean capaces de aprender rápida y fácilmente como interactuar con esta.

Si usted desarrolla un diseño de interfaz totalmente innovador, asegúrese de llevar a cabo un test de usabilidad antes de su lanzamiento. De esta manera puede verificar si los usuarios son capaces de entender que necesitan hacer y que es lo que usted necesita hacer para lograr una interfaz más intuitiva.

Haga un esfuerzo para visitar el sitio que mencioné, ¡ya que las interfaces están hechas para interactuar con ellas!

Artículo original escrito por Tim Fidgeon y titulado "Innovative user interface design" publicado por primera vez el 31 de julio de 2006 en Webcredible

Sobre el autor
Tim Fidgeon es un profesional experto en usabilidad web que trabaja para Webcredible, una consultora líder de la industria de la usabilidad y accesibilidad web .
Tim Fidgeon es autor, orador y consultor sobre usabilidad y estrategia. Ha estado trabajando con la Internet y la usabilidad desde finales de los 90 y tiene un Masters degree en Human-Computer Interaction del University College London. Cuando no está dictando el curso de entrenamiento de usabilidad web de Webcredible puede ser encontrado conduciendo pruebas de usabilidad. Tim ha estado involucrado en varios proyectos ganadores de premios y, al igual que Robin Good, es un apasionado por convertir a la Internet un mejor lugar para todos y un trampolín para hacer del mundo un lugar mejor.