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.