Diseño de software III

Tercera y última entrada, esta es la despedida del blog de Diseño de Interfaces Humanas (DIH), así que trataremos también el último tema del curso: Componentes de las interfaces.

Existen cuatro tipos de componentes que iremos enumerando y exponiendo los elementos que constan en nuestro diseño:

1 - Ventanas de aplicaciones: barra de scroll en la ventana de selección de dibujo, barra de estado en la ventana de carga, zoom y mover en la ventana para dibujar y para colorear.

Barra de scroll a la derecha

2 - Cuadros de diálogo: pregunta al usuario cómo realizar una acción. Diálogo de abrir y guardar imágenes. Salta al darle al botón inferior.

Botón de abrir en la ventana principal

3 - Menús: muestran un conjunto de comandos al usuario, como la barra de colores en la ventana para colorear.

Menú de colores en la ventana para colorear

4 - Controles: son gráficos que muestran propiedades y operaciones de los objetos. A la hora de seleccionar un dibujo prediseñado usamos un cuadro de lista. En la pantalla de carga también hacemos uso del indicador de progreso.

Con esto concluimos esta entrada y el blog. Espero que haya sido tan ameno para quien lee como lo ha sido para mi hacerlo. Me despido sin demora hasta otra ocasión. Saludos.

Diseño de software II

En esta segunda entrada del diseño de nuestro software comprobaremos lo que hemos venido criticando en las dos prácticas anteriores.

La idea de nuestro programa es sencilla: que funcione y sea tan simple que hasta un niño pueda abrirlo por primera vez y lo maneje con soltura desde ese primer momento. Para ello el programa debe responder en todo momento, pudiendo haber interacción sin pausas. Mediante un código común, favoreciendo la comunicación. Haciendo que su simpleza cree una fácil percepción y comprensión.

El programa tiene botones grandes e intuitivos, de esa manera la hacemos accesible a cualquiera, cómoda y segura.

El usuario no necesita hacer ningún esfuerzo especial, generando una respuesta rápida a sus expectativas, que desde un principio se ven satisfechas con un diseño tan simple. Es restrictivo en el sentido de tener solo dos posibilidades: dibujar o colorear, pero para esto fue diseñado y es a lo que nos ceñimos. Es un programa convencional, con distintas ventanas con los típicos botones de retroceso, lápiz para dibujar, colores para pintar y goma para borrar, usando así elementos analogías con la realidad. Cuando pulsas cualquier botón siempre ocurre algo instantáneamente, favoreciendo la causalidad.

El usuario juega un papel activo. Nos aprovechamos completamente de las metáforas visuales (lápiz, goma, colores), organizacionales (pocos botones y estructurados de forma intuitiva) y funcionales (apoyándonos de la vida cotidiana, como en los colores organizados en linea).

En la imagen de carga nos aprovechamos de una barra de carga para favorecer la realimentación. A la hora de elegir un color, estamos constantemente ayudándonos de la manipulación directa, viéndose cada color elegido, como seleccionado. Mediante las similitudes con la realidad vemos la completa coherencia del diseño.

En el caso de nuestro programa, al ser para niños pequeños, debemos captar su atención mediante el colorido, siendo esta la integridad estética. La reversibilidad viene representada en el botón de retroceso que hay en todas las ventanas que lo necesitan. Cualquier niño con ciertas discapacidades pueden usar nuestro programa sin problema, haciéndolo accesible a un mayor número de personas.

Diseño de software I

En esta entrada comenzaremos a diseñar un nuevo software que consistirá en un “Programa de Dibujo para dispositivos móviles táctiles, para niños menores de 5 años”. Para (intentar) hacer un buen diseño seguiremos los pasos estudiados. En primer lugar debemos diseñar un prototipo, que es hasta donde llegaremos en esta última práctica. Esto consta de tres pasos:

Determinación de necesidades: debemos preguntarnos qué busca el usuario final de nuestro programa en el mismo, para ello haremos el prototipo de interfaz de usuario esencial. Esto es un modelo de baja fidelidad que recoge ideas de la interfaz.

Prototipo de interfaz de usuario esencial del programa Midibujo

Realización del prototipo: primero debemos realizar un sketch, que no es más que un borrador de los elementos principales de la interfaz.

Icono del programa

Pantalla de carga del programa

Ventana principal

Ventana para dibujar

Ventana de selección de dibujo

Ventana para colorear

Después del sketch abordaremos el prototipo de interfaz de usuario tradicional, o lo que es lo mismo, una interfaz que "funciona".

Evaluación del prototipo: llegados a esta parte podemos hacer algo tan simple como darle nuestro programa a uno o varios usuarios y que nos den sus impresiones. También podemos hacer un diagrama de flujo de interfaz de usuario o storyboard como el siguiente.

Storyboard de Midibujo

Y así concluimos el prototipo de nuestro programa "Midibujo". Los maquetados fueron realizados online en moqups.

Apps que desentonan

Desde la aparición de los smartphones la industria de las aplicaciones caseras y profesionales ha tenido un crecimiento exponencial. Muchas apps, sin embargo, tienen elementos incomprensibles. En esta entrada trataremos sobre Free App Magic.

Esta app nos deleita "cada día con 3 nuevas apps gratuitas", que lo de nuevas lo dirán ellos, porque se repiten más que el anuncio de los barquitos. La idea es simple, ponen 3 apps, que antes podían haber sido o no de pago, para que cualquiera se las descargue. Para ver lo simple que es veamos otras apps con la misma función.

La primera es appgratis, que como podemos ver en la imagen tiene un diseño limpio, simple, intuitivo y organizado. Si quieres la app picas en Descargar y listo. Además está completamente en español.

appgratis

App Free es otra app sencilla, que usa un método semejante al anterior, apps bien organizadas.

App Free

Hay una gran cantidad de apps de este tipo, como: Daily App Dream o APP-FREE. El problema llega al volver a Free App Magic que, tras una pantalla con la imagen de la app, nos encontramos con la siguiente interfaz.

Free App Magic

En un primer momento desconcierta. 3 globos, un sombrero de mago, una bomba y una hucha de cerdito. Vayamos por partes. El comienzo ya es malo, comunicación la justa, no entiendes nada, mala percepción y de la comprensión mejor ni hablamos.

Demos un salto para comprobar la comodidad, para ello vamos a estallar algún globo, me gusta el amarillo, bueno vale, me dice que tengo que estallar los otros primero, cada vez me desagrada más. Estallamos el globito azul y nos sale una app que ni me va ni me viene, a volver atrás a ver qué nos depara el globo rosa. Otra app que no me interesa, que por cierto, la conozco y siempre ha sido gratuita, con appgratis esto no me pasaba. Me cansé, fallo de comodidad en la frontera de ejecución y borrada instántanea, bueno no, que tengo que terminar primero la entrada.

Para mi sorpresa hay una actualización, descarguémosla, que ya se habrán dado cuenta del desastre que hicieron, mejor tarde que nun... ¡¿pero qué es esto?!.

Free App Magic actualizada

Antes que cunda el pánico, tranquilos, que es igual de mala que la anterior, solo que ya no hay globitos, ahora hay cohetes y una barra debajo, ¿Photos?, vamos a ver. Muy bien, como ya me gustaba tanto, ahora me encuentro con que es publicidad, fantástico, y de la que me gusta, que te engañan haciéndote creer que es algo y luego te topas con esto, ignorémoslo.

Al picar en un cohete sale una animación, más espera para lo que realmente quiero, mi app gratis. Expectación tiene un rato, y más en fallo de expectativas en la frontera de evaluación, lo simple en esta ocasión es mejor, y esta app no es simple. Viendo las similitudes entre esta y sus alternativas nos encontramos con el fallo de convención y analogía en la frontera de evaluación.

Como hemos visto hasta ahora, esta app peca de poca integridad estética debido al colorido sin sentido y una gran falta de coherencia (globos, cohetes, bombas).

Diseños inadecuados

Internet es una red de redes enorme, que va siendo tejida por todos los que quieran ser parte de ella. Esto genera una infinita variedad de páginas web. El hecho de que cualquiera pueda ser parte de la misma crea una serie de inconvenientes, en concreto nos referiremos al diseño. Cualquiera sin ninguna noción en diseño web puede crear una página sencillamente conociendo el sistema.

Además de las personas sin pleno conocimiento sobre diseño web hay otras que aún teniéndolo fallan en lo mismo. Un ejemplo de ello es la página web oficial de la Universidad de Las Palmas de Gran Canaria (ULPGC).

Una vez dentro de la página nos encontramos con lo siguiente:

La primera vez que accedemos a esta página resulta chocante el entorno incómodo, poco intuitivo y con mala percepción que crea errores de comprensión. Al ser nuestra primera vez aquí nos damos cuenta que es un lío, lo cual es un enorme fallo en metáfora visual, y mala organización, que nos muestra en el mayor espacio una serie de noticias que jamás nadie se molesta en mirar, restándole importancia a lo que el alumno realmente busca.

Nuestra primera interacción con la web es comúnmente antes de matricularnos, para, por ejemplo, informarnos acerca de nuestra futura carrera. Probemos a buscar información sobre el Grado en  Ingeniería Informática. Picamos en Estudios, en la barra vertical izquierda, y luego en Grados. Una vez aquí, entramos en Presenciales. Si tenemos suerte y la página no se ha colgado hasta el momento, procedemos a buscar el Grado en Ingeniería Informática, y nos aparecerá algo como la imagen.

Si nos fijamos en la barra de desplazamiento a la derecha de la imagen, vemos que nos muestra que hay una larga lista de elementos por debajo. No nos dejemos engañar, está todo en blanco, es otro error de la página, uno de los errores sin importancia.

Siguiendo nuestra búsqueda de información sobres nuestro futuro, nos encontramos con una gran cantidad de enlaces. En concreto nos interesa saber cuántos años son y qué asignaturas se imparten, el resto en un primer momento suele importarnos poco. Para ello picamos en "Plan de estudios" y nos saldrá un molesto elemento rojo PILOT, o lo que es lo mismo: rojo claro que despista y molesta, y por si fuera difícilmente apreciable, es parpadeante, poco acertado. Adiós a la integridad estética.

A pesar de todo hay que decir que es un acierto, porque favorece la realimentación, no nos deja colgados pensando que no está haciendo nada, paciencia, que está cargando.

Al fin llegamos a donde queríamos, tenemos todas nuestras futuras asignaturas ordenadas por cursos, tras el susto de leer por encima los nombres queremos profundizar en algunas, picamos en cualquiera de ellas y la investigamos, ahora volvemos a atrás para mirar otra, pero ¿qué pasó?, no te preocupes, es otro fallo de la página, aunque esta vez no es tan leve como el de la barra lateral. Nos volvió a llevar a la siguiente pantalla.

¿Y ahora qué?, te preguntarás. No desesperes, tan solo tienes que volver a hacer el proceso de antes mientras maldices a alguien por no conocer el concepto de reversibilidad. Esto tenía una fácil solución llamada: abrir enlace en una nueva pestaña.

Si una vez de vuelta a la lista de enlaces del Grado de la segunda imagen, picas en algún otro enlace como "justificación", "objetivos" u otros tantos, te darás cuenta que te redirije a otra web. La web oficial de la Escuela de Ingeniería Informática (EII), y mejor ignoremos otro de los errores, que sin importar el enlace que pinches, te manda a la página principal de EII (que otro solucione tu problema).

La página web de la ULPGC puede parecer liosa en un primer momento, hasta que descubres el cuadro de búsqueda, a partir de ese momento olvidarás el resto de la página e irás al grano, que hay ocasiones en las que no es bueno andar con rodeos.

Durante la realización, la página web me ha dejado colgado en dos ocasiones, desconozco los motivos, pero es bastante común, sobre todo en época de exámenes, cuando entras a descargarte los exámenes resueltos para prepararte, y ves que no puedes hacer nada y piensas: esto es cosa de Murphy.

Realimentación, manipulación y coherencia

Cuando navegamos por internet muchas veces no nos damos cuenta de lo que realmente ocurre cuando realizamos una acción. Hacer un simple click en un enlace desemboca en una serie de órdenes y rutinas que sin saber bien cómo, nos lleva a donde esperábamos.

En ocasiones tenemos que esperar mientras se lleva a cabo la acción, para estos casos están, por ejemplo, las llamadas barras de carga, o imágenes en movimiento, que nos muestran que debemos seguir esperando, que todo va bien. Ésta es la llamada realimentación. Un ejemplo lo vemos en los reproductores de video online, mientras esperamos que se reproduzca el video.

En las 3 imágenes siguientes podemos ver método de realimentación elegido para los reproductores de VK, MagnoVideo y AllMyVideos, respectivamente.

El proceso de realimentación tiene una pequeña evolución, ésta es cuando se realimenta una vez tras otra. Es la llamada manipulación directa. Para entenderlo podemos ir, por ejemplo, a TuBillete.com y buscar un hotel. Podemos cambiar el hotel por otro que elijamos, y al hacerlo, la misma página nos actualiza el precio al instante, usando la manipulación directa.

Por último veremos que cuando programas que tienen un fin común suelen usar elementos similares. Los navegadores son un claro ejemplo. En la actualidad es raro que un navegador no tenga un sistema por pestañas. A esto se le llama coherencia entre distintos sistemas.

Pestañas en Chrome

Metáforas

Los reproductores, ya sean de video o audio, tienen distintos elementos comunes. Entre ellos están los botones de play, pause, control del volumen, avanzar o parar. Estos elementos son familiares para la mayoría de la gente, autoexplicativos e informan con claridad al usuario, por ello son llamados metáforas. Dentro de las metáforas son del subtipo visual, dado que son elementos gráficos.

Control del iTunes

Navegando por internet podemos encontrar distintas páginas que podemos comparar por sus similitudes en la estructura o el orden. Éstas se aprovechan de las metáforas organizacionales. Podemos ver que las páginas de Motorpasión y Gizmodo están distribuídas, al igual que este blog, a través del tiempo, donde se van introduciendo nuevas entradas.

Gracias al avance tecnológico podemos llevarnos un ordenador a cualquier lado junto al móvil. Me estoy refiriendo a los smartphones. Han llegado a un punto en el que puedes hablar no solo con la persona a la que llamas, sino con el mismo aparato. En concreto me refiero a Siri y al sistema que tiene para poder comunicarte con él. Hay una opción con la que puedes, levantando el móvil y hablando con él como si de una llamara se tratase, hablar con Siri de una forma natural. Esto lo han hecho para conseguir una mayor facilidad de uso, gracias a la costumbre que tenemos de descolgar el teléfono y hablar. A esto se le llama uso de metáfora funcional.

Siri en un iPhone 4S

Descontrol publicitario

El control es parte esencial en nuestra vida diaria, sin él no podríamos comer, correr o teclear (control sobre nuestro cuerpo). A pesar de su importancia, en ocasiones no se nos permite tenerlo, en ocasiones en las que sin duda nos gustaría tener el control.

Un caso particular es la publicidad. En una gran cantidad de páginas web podemos encontrar ejemplos claros. Voy a exponer en concreto un anuncio publicitario, y lo llamo publicitario porque, hasta donde llegan mis conocimientos sobre el tema, no existen anuncios "tocape*". Es el caso del anuncio del juego "Seafight". Si sabes de lo que te hablo, ahora mismo en tu cabeza están sonando cañones de barcos. Es una publicidad horrible en la que en ocasiones el usuario tiene opción a quitar el sonido, pero en otras no, y a éstas me refiero en la entrada.

La solución es sencilla, como siempre cuando la conoces, se llama AdBlock, y es una extensión que está disponible en los navegadores más usados. Esta aplicación elimina cualquier publicidad molesta de las páginas que visites, por algo es la extensión más descargada.

Configuradores

En prácticamente todas las webs de coches tenemos una opción de configuración. Es un elemento con el que muchos pasamos ratos a la semana mientras descansamos entre horas de estudio. Para el ejercicio que me concierne, me voy a centrar en uno de ellos, por su sencillez, porque es el que más uso y porque hasta ahora nunca me ha dado fallo alguno.

El configurador de turismos de Mercedes-Benz nos da completa libertad desde el primer momento. El primer paso en nuestra interacción con el sistema es elegir un modelo, y tras marcarlo nos envía a la elección del motor para ese modelo, creando así una comunicación con el usuario.

Configuración de un CLS 63 AMG

Llegados a este punto percibimos una serie de pestañas para la elección de pinturas y llantas, tapicerías y molduras, equipamiento. Rápidamente comprendemos que una vez elegido el motor, debemos pasar a la siguiente pestaña hasta llegar a la última, en la que vemos un listado con todo el equipamiento deseado.

Este es un buen ejemplo de interfaz bien diseñada.

El reloj que fue atropellado

Pongámonos en situación: un reloj de pared que alguien extravió, un turismo que circula por la carretera, es 5 de enero, mañana vienen los reyes y no sabes qué regalarle a tu hijo. Las malas ideas inundan tu cabeza, "¿y si le compro la nueva PS3 slim 2?... bueno mejor no, que esa tapa deslizante es un fallo de comodidad en la frontera de ejecución". Por la falta de atención en la conducción, el peligro por no tener un sistema bien equipado de visión nocturna o incluso un deslumbramiento en la salida de un túnel por no llevar unas estupendas gafas fotocromáticas, te hacen pasar el coche por encima de "algo". Te detienes a un lado de la calzada y ves que un reloj se metió en tu rueda, tal como la imagen siguiente.

Reloj rueda

Ya está, se acabaron tus problemas, sacas el gato y cambias tu nueva "ruedoj", colocas la de repuesto y tenemos regalo para mañana.

Algo así debió pasarle a alguien para fabricar en serie este objeto. El diseño es desagradable cuando lo tienes delante, complejo e incómodo, me explico, la interacción con este reloj es compleja como en cualquier otro, una rueda diminuta que tienes que clavarte en el dedo para poder cambiar la hora. La comunicación no se queda ni mucho menos atrás, en la misma imagen se puede ver que apenas se aprecian las agujas, lo que también provoca una enorme falta de percepción. Lo único que comprendemos cuando tenemos uno en casa, que es tiene la misma función que el cuadro de la primera comunión: molestar.

Una rápida solución es cambiar las agujas por unas con colores que destaquen, o directamente cambiar el diseño completo por uno como el de la siguiente fotografía.

Reloj convencional

Día y noche

Una vez nos sacamos el carné somos las personas con una de las mayores sonrisas que puede haber, inconscientes porque no sabemos aún el lío en el que nos metimos, gastos de impuestos, compra del vehículo, seguro, taller, repuestos, revisiones y un largo etcétera.

Un problema algo menor que estos, son los túneles durante los días soleados en los que lucimos nuestras fantásticas gafas de sol como las de la imagen. Tenemos prohibido llevarlas puestas dentro de los túneles por la falta de visión, pero sin ellas al salir del mismo acabaremos deslumbrados. Claramente estamos ante un fallo de restricción en la frontera de evaluación.

Rayban Wayfarer

Aunque este caso parezca imposible de solucionar, se puede, y de al menos dos maneras diferentes, la primera y más económica (para poder gastarlo luego en la subida de combustible) es la que mostramos en la siguiente imagen.

Gafas abatibles

Puede que el rosa no nos siente bien a todos, así que también tenemos una solución para ellos. En la siguiente imagen mostramos unas gafas con lentes fotocromáticas, que al entrar en contacto con el sol se oscurecen casi mágicamente.

Gafas fotocromáticas

¿Boca o teléfono?

La evolución nos ha llevado por caminos inimaginables en un principio. Gran parte se la debemos a la tecnología, en la que el teléfono fue uno de los pioneros. De teléfonos vamos a hablar en esta entrada, en concreto del que tenemos en la imagen, porque sí, es un teléfono. La fama de los Rolling Stone llega a lugares insospechados y la forma de usar su sello de identidad no iba a ser menos.

Estamos ante un teléfono que nos muestra un claro ejemplo de fallo de expectativas, analogías y convenciones en la frontera de evaluación. Al verlo podemos pensar que es cualquier cosa excepto un teléfono.

Teléfono de los Rolling Stone

Este fallo de expectativas podríamos evitarlo al usar un modelo convencional, y cuál es más convencional que el archiconocido DOMO de Telefónica que se muestra en la imagen.

Teléfono DOMO

Relojes para informáticos

Algo tan común como mirar la hora puede suponer un sufrido dolor de cabeza, y no me estoy refiriendo a un niño de 5 años al que le acaban de enseñar cómo se descifra el aparatito que lleva en la muñeca con forma de superheroe.

A lo largo de nuestra vida podemos encontrar distintos tipos de relojes: de pared, de mesa de noche, de muñeca, de cuco. Rara será la vez que veamos a alguien con un reloj como el de la imagen. Estamos ante un reloj binario, no apto para cualquier persona, diría incluso que fue específicamente diseñado para todos esos informáticos que se muestran orgullosos de serlo y quieren demostrarlo cuando están detrás del ordenador y cuando van a comprar el pan. Nos encontramos caramente ante un Fallo de convención en la frontera de evaluación. Hay un fallo en la comunicación con el usuario, o al menos la gran mayoría de ellos, generando una falta de comprensión.

Reloj binario

Solucionar esto es tan simple como mirar tu propia muñeca, ir a la cocina, al salón o cualquier lugar donde encuentres un reloj (el de la imagen no vale). Por si no tienes uno cerca ya adjunto uno.

Reloj analógico

Zurdos y pupitres

Los zurdos están aproximadamente entre el 8 y el 13% de la población mundial. Ésta inferioridad numérica les puede llevar en ocasiones una serie de problemas. Uno de ellos, bastante problemático es a  la hora de estudiar en un centro. Los pupitres, en concreto los que vienen solidarios al asiento crean incomodidad y malas posturas a los zurdos, ya que no vienen adecuados para ellos. En la imagen adjunta podemos ver una alumna con este problema. Es claramente un fallo de accesibilidad en la frontera de ejecución.

Alumna zurda

Una solución la vemos a continuación. En la imagen vemos un pupitre del mismo tipo adecuado para zurdos. Esta solución ya está bastante extendida, incluso podemos encontrarlas en las instalaciones de la universidad.

Pupitre para zurdos

BMW Night Vision

En la imagen siguiente podemos ver el sistema de visión nocturna de BMW. Es un elemento opcional que consta de una cámara de visión nocturna en el parachoques frontal, conectada al sistema multimedia del vehículo. El problema lo encontramos al utilizarlo, ya que no solo debemos dejar de mirar la calzada, sino que también tenemos que girar la cabeza hacia un lado perdiendo de vista por completo la vía y los posibles obstáculos que no entren en el rango de la cámara. Es un claro ejemplo de fallo de seguridad y comodidad en la frontera de ejecución.

BMW Night Vision

Una solución a estos problemas lo encontramos en el sistema de Mercedes-Benz Night View Assist. Al ser activado, sustituye el velocímetro digital convencional por una pantalla que muestra los elementos de la vía, y bajo esta imagen un velocímetro lineal.

Mercedes-Benz Night View Assist