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.

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.

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