¿Qué es una interfaz de usuario?

“The way that you accomplish tasks with a product – what you do and how it responds – that’s the interface” – Jef Raskin

El diseño de interfaces no sólo se trata de botones y menús; se trata de la interacción entre el usuario y la aplicación o dispositivo, y en algunos casos, se trata de la interacción entre múltiples usuarios a través de ese dispositivo. Esto significa que el diseño de la interfaz de usuario no es como se ve un producto (visualmente hablando), si no, como es que éste trabaja. No sólo es ordenar botones y seleccionar colores.

Al diseñar una interfaz, debes hacerte preguntas como: ¿Esta interfaz requiere botones? Si requiere, ¿Qué es lo que esos botones deben hacer? Que necesito ofrecerles a los usuarios para que ellos sepan cómo funciona mi aplicación y así­ puedan completar las tareas que ellos quieren hacer.

Trabajar en la interfaz de usuario dentro del ciclo de desarrollo de un proyecto es vital, porque, como apunta Jef Ranskin, “Por lo que el cliente se refiere, la interfaz es el producto”. El usuario ve e interactúa con la interfaz, no con la arquitectura de la aplicación.

Hacer esto correctamente tendrá un gran impacto en cómo los usuarios disfrutan usar tu aplicación y qué tan sencillo es usarlo.

Empieza por diseñar la interface antes que empezar a programar el motor que lo respalda, en vez de programar primero y después ponerle un “contenedor” encima de todo.

¿Qué hace una gran una interfaz de usuario?

Antes de que empecemos a contruir una interfaz de usuario para nuestro producto, es importante entender, primero que nada, que hace qué aspectos son importantes para obtener una buena interfaz de usuario; ¿Cuales son las cualidades que tenemos que lograr? Todas las grandes interfaces comparten 8 cualidades y/o caracterí­sticas:

1. Claridad: La interfaz evita la ambigí¼edad, haciendo todo claro a través del lenguaje, el flujo, la jerarquí­a y metáforas de elementos visuales. Las interfaces claras no necesitan manuales, asimismo, aseguran que los usuarios comentan menos errores mientras las usan.
2. Concisión: El verdadero problema de hacer una buena interfaz  es hacerla concisa y limpia al mismo tiempo, es decir, sin hacerla minimalista demás, ni sobre poblarla con elementos por todos lados.
3. Familiaridad: Algo te es familiar cuando recuerdas un encuentro previo que hayas tenido con él. Aun y cuando algunos usuarios usan una interfaz por primera vez, algunos elementos pueden serle familiares. Puedes usar metáforas de la vida real para comunicar significado; por ejemplo, las pestañas en forma de carpetas, son, a menudo usadas para la navegación en sitios web y aplicaciones. La gente las reconoce como elementos de navegación por que la metáfora de las carpetas les son familiares.
4. Capacidad de Respuesta: esto significa un par de cosas. Primero, la capacidad de respuesta significa velocidad: una buena interfaz no debe sentirse pesada. Segundo, la interfaz deberá proveer retroalimentación al usuario acerca de lo que está pasando y si la entrada del usuario está siendo procesada con éxito.
5. Consistencia: Mantener la interface consistente a lo largo de la aplicación es importante porque permite al usuario reconocer patrones de uso. Una vez que los usuarios aprendan como funcionan ciertas partes de la aplicación, podrán aplicar este conocimiento a nuevas áreas y funciones.
6. Estética: mientras que no necesitas hacer una atractiva interfaz para que haga lo que tiene que hacer, hacer que algo se vea bien hará que el tiempo en el que tus usuarios usen la aplicación sea más agradable y usuarios felices sólo puede ser una cosa buena.
7. Eficiencia: Tiempo es dinero, por eso, una buena interfaz de usuario debe hacer al usuario más productivo a través de atajos y buen diseño. Después de todo, este es uno de los principales beneficios de la tecnologí­a: permite al usuario realizar tareas con menos tiempo y esfuerzo haciendo el mayor del trabajo para nosotros.
8. Perdón: Todos cometemos errores, y como tu aplicación los maneja será una prueba fehaciente de su calidad. ¿Es fácil de deshacer acciones? ¿Es fácil para recuperar archivos eliminados? Una buena interface no deberí­a castigar a sus usuarios por sus errores, al contrario, deberí­a proveerle los medios para remediarlos.

Diseñar una interfaz que incorpore todas las caracterí­sticas antes mencionadas es trabajoso, porque cuando trabajas en una a menudo afectas a otras. El mayor número de elementos que agregues, el mayor número de cosas que el usuario tendrá que procesar. Por supuesto, lo opuesto también es verdad: el no proveer suficiente ayuda y soporte puede hacer que ciertas funciones sean ambiguas. Crear algo que sea elegante, simple y al mismo tiempo consistente es el objetivo más difí­cil del diseñador de interfaces de usuario.

Traducido de un capitulo (con el mismo nombre que el titulo) del Libro de Smashing Magazine. El libro en su totalidad está muy bien escrito, es acerca del diseño Web y mejores practicas. Completamente recomendable.

Aprovechando para publicar esta buena lista de más de 45 wallpapers hecha por PelFusion.com les obsequio un wallpaper diseñado por mi, acepto criticas y felicitaciones, la verdad es que es la primer ilustración que hago de un vehí­culo, no se que tal me haya quedado. Las resoluciones disponibles son: 2560×1024 (si tienes dos monitores de 17″ queda perfecto), 1280×800 y 1024×728.

[Link PelFusion]

Start Slide Show with PicLens Lite

Cover creation from Peter Belanger on Vimeo.

Peter Belanger publicó este video time-lapse sobre la creación de una portada para la Revista MacWorld, desde el trabajo fotográfico, hasta el trabajo de diseño.

Aunque a decir verdad, me hubiera gustado que fuera un poco más lento, pero realmente el video es muy bueno.

Por cierto, en el artí­culo publicado por el autor, se describen algunos procesos y tecnicas llevadas a cabo para la realización de esta portada.

[Via Microsivervos]

Este video fue presentado hace algunos dí­as, ahora los autores presentan el “Making of” del video, el cual muestra el gran trabajo que realizaron estas personas.

[Via Alt1040]

La gente de Design inspiration ha publicado un articulo de 35 páginas Coreanas para inspirarse en el diseño web, si les interesa el diseño les recomiendo que se den una vuelta, ya que como diseñador es importante conocer las tendencias y estilos de otras culturas.

[Via WebAppers]

Start Slide Show with PicLens Lite

La BBC ha presentado un avance de un documental llamado South Pacific, el cual fue filmado con una cámara TyphoonHD4,  la cual cuesta US$100.000 y permite grabar con una resolución HD 20 veces más rápido que las cámaras convencionales.

Para lograr la filmación le hicieron algunas adaptaciones a la cámara, las cuales no fueron especí­ficadas, aunque se sabe que el experto en cámaras de alta velocidad, Rudi Diesel, diseñó una protección a prueba de agua. La foto de la cámara abajo de esta entrada.

(ví­a Engadget)

Start Slide Show with PicLens Lite

Además ponen a disposición una fotografí­a actual del lugar, así­ como la captura del Google Street View.

Ver mapa más grande
[Via Alt1040]

Vicente Sahuc ha realizado un gran trabajo ya que utilizando una Casio EX-F1 a 300 fps logró crear un video muy profesional. Para hacerlo utilizó patines y un estabilizador Steadicam Merlin.

Para lograr ese efecto polaroid en el video extrajo todos los fotogramas con Quicktime y los trabajó como imágenes independientes utilizando Photoshop para luego unirlos junto con la musica en Adobe Premiere.

[Via Alt1040]

Actualizado

Acabo de activar el diseño del sitio, veremos que tal se comporta, me faltan algunos detalles tal vez, así­ que cualquier detalle que vean les agradecerí­a me lo dijeran.

Gracias.

El Museo Nacional del Prado en Madrid es uno de los museos europeos más importantes por sus colecciones de cuadros de maestros de los siglos XVI al XIX, ahora gracias a la colaboración de Google, MadPixel y el Mudeso del Prado puedes visitarlo por medio de Google Earth y Google Maps.

Por el momento sólo cuentan con 14 obras de arte, entre las que destacan “La artemisa”, “las tres Garcí­as”, entre otras.

Las obras fueron capturadas en el formato Gigapixel, el cuál es de alta resolución (14.000 millones de pí­xeles), por eso es posible ver con todo detalle los trazos y pinceladas del autor.

Este trabajo se suma al proyecto de Halta Definizione, quiénes digitalizaron “La última Cena” de Leonardo Da Vinci, entre otros.

[ Ver en Google Maps ] [ Link Google Earth - Museo del Prado ]