Bloque 1 Interacción: "Pequeños trucos para diseñar y entender interfaces gráficas"

¿Cuántas veces hemos utilizado una aplicación donde no encontramos las herramientas que necesitábamos? ¿Cuántas veces nos hemos perdido dentro de una página web? Pues bien, en esta entrada de hoy daré unos pequeños trucos/consejos que creo que se deben tener en cuenta a la hora de diseñar una interfaz gráfica, para hacer de esta manera, la vida más fácil a nuestros queridísimos usuarios. Desgraciadamente, muchos desarrolladores de software (muy talentosos) creen que sus aplicaciones son perfectas en sus funciones (cosa que no niego), olvidándose de que existe, allá a lo lejos, un persona que no dispone de todos esos conocimientos y que sobretodo NO PIENSA NI ACTÚA DEL MISMO MODO que ellos. Si algún día os encontráis desarrollando algún tipo de interfaz (para una web, un juego, lo que sea), por el bien de los usuarios y por el éxito de vuestra aplicación, podéis tener en cuenta los siguientes puntos:

1.    Analizar y comprender las actividades que realizarán los usuarios: consejo totalmente básico: si conoces al usuario que utilizará tu aplicación ya tienes mucho ganado. Para ello es necesario realizar entrevistas, analizar sus necesidades, crear “mock-ups”, evaluarlos directamente con los usuarios, y vuelta a empezar. Este es un sencillo bucle que ayudará muchísimo en el desarrollo de vuestra interfaz, porque conoceréis de forma directa las necesidades e inquietudes de vuestros usuarios. Es importante realizar dichas pruebas y análisis con un amplio rango de usuarios (es decir, personas de diferente edad, con diferente nivel de conocimientos informáticos, etc.).

2.    Pensar como si los usuarios de nuestra aplicación tuviesen 5 años: sí, así es, no hay nada mejor que pensar que nuestros usuarios serán niños de párvulo, a los cuales hay que dárselo todo bien masticado. Al mismo tiempo, hay que dar la posibilidad a los usuarios más experimentados de evadir todas esas facilidades para evitar pérdidas de tiempo innecesarias. De esta manera se abarca todo el abanico de usuarios y se les da facilidades a todos ellos, haciendo nuestra aplicación mucho más llevadera. Un ejemplo de utilización de este sistema lo podéis encontrar cuando arrancamos una aplicación por primera vez y se despliega un pequeño tutorial de uso, o incluso un “wizard”, los cuales nos harán más cómoda esa primera experiencia.

3.    La Ley de Fitts: esta ley es una de las bases del diseño de interfaces de usuario y dice que el tiempo para hacer “click” en un objeto es una función donde intervienen la distancia y el tamaño del objetivo. Dicho con otras palabras, cuánto más grande sea un objeto, y más cercano esté del puntero, menos tiempo requerirá el usuario para utilizar dicho objeto. Así pues, es muy buena idea hacer más grandes y vistosos todos aquellos botones que sabemos que el usuario utilizará más a menudo. O podríamos aplicar otra idea (la dejo en el aire), si tenéis conocimientos de “machine-learning”, ¿por qué no hacer que nuestra aplicación “aprenda” del usuario y modifique el tamaño de sus botones automáticamente en función del uso de la persona?

4.    Evitar interrupciones: se debe intentar minimizar las distracciones del usuario, ya que, como muchos sabréis o habréis experimentado, las distracciones que generan algunas aplicaciones, al final, acaban influyendo en la velocidad en la que trabajamos, y sobre todo en la concentración que tenemos puesta en nuestro trabajo. Imaginad un procesador de texto que lanzase una ventana de advertencia cada vez que escribimos una palabra que no tiene en su diccionario. Sí, acabaríamos locos (o aprenderíamos a escribir bien a la primera).

5.    Consistencia: es importantísimo ser consistente y seguir siempre las mismas pautas o estándares para todas las aplicaciones de la misma plataforma. La interfaz debe utilizar objetos, botones o menús de manera análoga a otras aplicaciones. Imaginad que en lugar del típico menú: “Archivo”, “Editar”, “Ver”, “Herramientas”, “Ventana”, “Ayuda” que tienen el 99% de las aplicaciones, nos lo encontramos como “Opciones”, “Consejos”, “Visualización”, “Piedra”, “Papel”, “Tijeras”. Ahí no hay Cristo que encuentre algo. Siguiendo estos “estándares” hacemos mucho más sencilla la vida a los usuarios, porque gracias a su experiencia previa, sabe qué encontrará en dichos menús.

6.    Uso del lenguaje: recordad que estamos diseñando y creando interfaces de usuario para niños de 5 años. Olvidad eso de “Error durante la búsqueda en la posición de memoria 0x00001890” cuando nuestro buscador de palabras no ha encontrado su objetivo. Con un simple mensaje “Palabra no encontrada” basta para que el usuario sepa lo que ha ocurrido. El lenguaje es muy importante por distintos motivos: las frases tales como “Error”, “Error Crítico”, “Aviso Urgente”, etc. Simplemente asustan al usuario, haciéndolo sentir culpable de lo que ha ocurrido (sí, conozco casos), hecho que hará que el usuario acabe por utilizar poco nuestra aplicación por miedo a que ocurra alguna desgracia. Intentad utilizar un vocabulario correcto, con una sintaxis y una gramática clara. EVITAD a toda costa mensajes “generales”, intentad ser específicos en todos los mensajes que lancéis al usuario.

7.    Uso de metáforas: y es que no hay nada mejor que utilizar metáforas del mundo “real”, dentro del mundo “virtual”. Aprovecharse de la experiencia del usuario hará que se sienta más familiarizado con nuestra interfaz. Imaginad un DJ que lleva 20 años pinchando en discotecas. Finalmente se decide pasar a un modelo digital ya que le sale mucho más barato que comprarse una nueva mesa, y todo lo que ello conlleva. Pues bien, este DJ decide a utilizar nuestro software, el mejor del mercado en cuanto a calidad de sonido y efectos. Y ¿qué se encuentra? Pues que todas las variables de sonido (volumen, bass, etc.) tiene que modificarlas con el teclado. El pobre DJ acabará suicidándose y a nosotros nos maldecirá por tal aberración en su lecho de muerte. Si hubiésemos creado simples “sliders” (circulares, o lineales) le hubiésemos hecho la vida más fácil (y larga) a nuestro DJ.

8.    Uso del color: Importantísimo e interesantísimo tema. El color juega un papel determinante en el desarrollo de una interfaz de usuario, tanto que posiblemente en un futuro le dedicaré una entrada exclusivamente a este tema. Haciendo un pequeño resumen, el color en sí ya posee significado: rojo lo relacionamos con error, prohibición; verde, con lo correcto, lo permitido; amarillo con las advertencias, alertas y así con un buen puñado de ellos. Al mismo tiempo, tiene significados culturales diferentes: por ejemplo el negro en occidente se considera color de luto, mientras que ese significado en oriente lo posee el color blanco. Por lo tanto, a la hora de escoger colores para vuestras interfaces, es bueno tener en cuenta lo que se quiere transmitir y a quién se le va a transmitir (culturalmente hablando). Otro problema que arrastra este apartado es el de las enfermedades visuales relacionadas con el color (como el daltonismo), por lo que es otro factor a tener en cuenta que requiere soluciones alternativas que ya veremos en futuras entradas.

9.    Mínima sorpresa: este factor está relacionado con el punto de consistencia. Hay que ser consistente con lo que se hace y lo que se quiere hacer. Me refiero a que si creamos un “video player” y creamos un botón de “Play”, cuando el usuario haga “click” en ese botón, lo esperado, lo probable y lo que TIENE que pasar es que el video se reproduzca. Realizando cosas inesperadas, lo único que conseguimos es intimidar a nuestro usuario y que utilice nuestro software con miedo.

10.  Recuperabilidad: este punto tiene que ver con nuestro queridísimo “Control+Z” (o deshacer). Es bueno (buenísimo) otorgar herramientas que le permitan al usuario volver hacia atrás y poder rectificar lo que había hecho previamente.

Y bueno estos han sido los primeros diez puntos que siempre ayudan a desarrollar mejores interfaces de usuario. No son ni mandamientos divinos, ni leyes establecidas por nadie. Como ya sabéis, cada aplicación es un mundo, cada proceso de desarrollo es un universo, por lo que cada uno establece las leyes que necesita. Con este post simplemente quería refrescar que, a pesar de que la interfaz de usuario es posiblemente solo un 10% del desarrollo total de un proyecto, ésta puede determinar el éxito o el fracaso del mismo (recordad a nuestro amigo DJ). En un futuro ya ampliaremos esta lista de puntos.

Con estas líneas me despido hasta la próxima entrada, que posiblemente sea sobre Android (no es seguro).

¡Un abrazo!

PS: para los interesados en la ley de Fitts, aquí os la dejo por si queréis hacer algún tipo de investigación por vuestra cuenta:

T = a + b log₂ (D / W + 1 )

T: es el tiempo medio necesario para completar el movimiento.

a: representa el tiempo de inicio / parada en segundos para un dispositivo determinado

b: mide la velocidad inherente del dispositivo

D: es la distancia desde el punto inicial hasta el centro del objetivo.

W: es el ancho del objetivo medido sobre el eje del movimiento. También puede entenderse W como la tolerancia de error permitida en la posición final, dado que el punto final del movimiento debe quedar a +/- W/2 del centro del objetivo.

Referencias:

http://es.wikipedia.org/wiki/Ley_de_Fitts

http://mundogeek.net/traducciones/interfaces-usuario-usables/gui.html

http://www.monografias.com/trabajos10/diusuar/diusuar.shtml

http://www.webtaller.com/maletin/articulos/proceso_de_diseno_del_interfaz_de_usuario.php

http://www.useit.com/papers/heuristic/heuristic_list.html

http://www.usask.ca/education/coursework/skaalid/theory/interface.htm

http://www.alzado.org/articulo.php?id_art=12