Análisis de Software Web: Facebook

Para hacer un análisis de una pagina o herramienta web, utilizaremos la red social Facebook.

A lo largo de su historia, esta red social ha modificado en repetidas ocasiones su interfaz de usuario, recibiendo indefectiblemente con cada actulización una lluvia de criticas por parte de sus usuarios. Incluso  se han generado varias teorías que para explicar cambios, como por ejemplo que buscaba reducir el poder de los desarrolladores de aplicaciones externas, o que trataba de competir con Twitter como servicio de microblogging social. 

Nos centraremos para este análisis la versión actual de la interfaz de usuario.

El usuario tiene el control

En una interfaz web, el control por parte del usuario se vuelve un aspecto critico. Se debe buscarque el usuario sea un actor activo, no bombardeandolo con acciones no deseadas, pop-ups, publicidad, etc..

Facebook cuida mucho este aspecto. Como red social, uno de sus principales objetivos es que sus usuarios sean agentes activos, que participen y compartan información, por lo que cuidan que el usuario este contento y tenga el control sobre lo que hace: no se abren pop-ups, no se le redirecciona sin consentimiento (salvo errores),...

Metaforas

En si, toda la web es una metáfora a un "muro" o una hoja de papel donde se van apuntando noticias. Aparte de este detalle, se puede observar que la pagina usa de forma coherente aunque no intensa de las metáforas.

El interfaz es tan sobrio que prácticamente no precisa de metáforas organizativas, y usa metaforas visuales solo como apoyo a los distintos en laces de dirección.

Realimentación

 En las interfaces web, suele ser el navegador el encargado de ofrecer una realimentación al usuario, dado que, por norma general, las acciones en la interfaz son inmediatas y requieren poca realimentación, siendo los problemas en los servidores o retardos en la red los culpables de las pausas que pueden provocar dudas en el usuario.

Facebook, por su parte, ha incorporado ciertos elementos para reforzar la realimentación. Por ejemplo, en actualizaciones que requieren acceso a la base de datos, como actualizar las noticias de inicio, se muestra una acción de movimiento que indica al usuario que su acción esta siendo procesada.

Manipulación directa

Aquí se busca reducir el esfuerzo del usuario, permitiendo que las operaciones se hagan con mas rapidez y menores esfuerzos.

Aquí se observa como los diseñadores se han esforzado en crear una interfaz intuitiva y sencilla. Todas las acciones se pueden realizar mediante accesos cortos, claramente indicados y estructurados, de forma rapida y sencilla.

Coherencia

La coherencia en esta pagina esta muy bien cuidada. Como red social, esta orientada a incentivar al usuario a compartir información, y mostrar la información compartida por sus allegados. Se ahí que todos los ámbitos donde se implique este intercambio de información están marcadamente resaltados en esta versión del interfaz, relegando otras aplicaciones a zonas mucho menos visibles.

Integridad estética

La importancia de la integridad estética estriba en no descentrar al usuario de la información importante por cuestiones visuales (colores, tamaños, formas...) 

En el caso de Facebook, se observa se ha cuidado la integridad estética de la plataforma, ciñiendose a un esquema de color dominado por el blanco y azul, y aprovechandose de los principios de la percepción (principalmente de la pregnancia, la agrupación y la semejanza) para crear un interfaz bien estructurado pero ligero, que no sobrecargue ni desconcierte al usuario

Reversibilidad

La reversibilidad parte de la posibilidad de deshacer una acción. En Facebook, prácticamente todas las  acción puede deshacerse, y para aquellas que no, como por ejemplo la eliminación de un contenido, se solicita una confirmación por parte del usuario para mejorar la tolerancia al error y evitar acciones hechas por descuido.

Accesibilidad

La accesibilidad refiere a como se facilita el acceso a personas con capacidades reducidas. Aparte de ser una pagina con una interfaz bastante intuitiva y poco recargada, Facebook ofrece soporte a personas con capacidades reducidas, ofreciendo soporte a tecnologias de ayuda (lectores de pantalla, etc), versiones ligeras de la pagina sin javascript, soporte tecnico especializado...

Análisis de Software de Escritorio: Calibre

El software de escritorio a analizar es el Calibre, un software de gestión y conversión de libros electrónicos. Se trata de un software gratuito muy recomendado en multitud de foros dado a la cantidad de funcionalidades que presenta: conversión entre multitud de tipos de e-book, etiquetas, metadatos, caratulas...

Calibre versión 0.7.34

Pero pasemos a un análisis desde el punto de vista del Diseño de Interfaces:

El usuario tiene el control

Aquí partimos de la base de que debe ser el usuario el que tiene el control sobre las acciones que se realizan el el software, tomando un papel activo en su utilización, y no siendo un mero espectador.

En este software este principio se cumple con buen criterio. No se producen acciones que no sean activadas por el usuario, este tiene la capacidad de detener tareas que se automatizan (cuando se lanza la conversión en bloque de varios libros, por ejemplo).

Metaforas

Este software hace un correcto uso de metaforas tanto visuales como organizativas. Al tratarse de un gestor de libros, de manera lógica han buscado asimilarlo a una biblioteca y dirigir las metaforas en ese sentido. Aqui tenemos un claro ejemplo:

Donde podemos seleccionar un libro pasando por las caratulas, tal como si estuvieran en el anaquel de una estantería.

Realimentación

Se basa en la continua información al usuario de la ejecución de las actividades y la respuesta a sus acciones. En este software, la realimentación no presenta un problema en prácticamente ningún aspecto, pues la practica totalidad de las acciones tienen una respuesta inmediata que hace innecesaria la actualización del estado al usuario. El único punto crítico es el la automatización de tareas, como la ya mencionada conversión en bloques. Para estos casos, la interfaz gráfica se sirve de este apartado:

donde mediante el movimiento se informa al usuario que las tareas se están ejecutando en segundo plano, e indica de forma numérica cuantas tareas restan de ser ejecutadas. 

Manipulación directa

Aquí se busca reducir el esfuerzo del usuario, permitiendo que las operaciones se hagan con mas rapidez y menores esfuerzos.

Para esto, el software aporta multidud de accesos directos a las tareas, que están identificadas de una manera correcta, e incluso disponen de ventanas emergentes con información adicional. Además, pese a la gran cantidad de funcionalidades que presenta el programa, estas se encuentran muy bien estructuradas, haciendo fácil la búsqueda y acceso en la interfaz gráfica.

Coherencia

Aquí la aplicación se defiende correctamente. Al tratarse de una aplicación multiplataforma, obviaremos la coherencia con el sistema operativo, si bien muestra una estructura y un esquema que recuerda bastante a las aplicaciones Windows.

En la propia aplicación se mantiene la coherencia en todos sus apartados, de forma que la interfaz no dificulta la adaptación del usuario y facilita el aprendizaje.

Integridad estética

La integridad estética busca ayudar al usuario a comprender la información y focalizar la atención en lo importante, no descentrando al usuario. 

En esta aplicación se cumple con este concepto. Los iconos que dan acceso a acciones principales tienen un tamaño mayor, y en toda la aplicación se mantiene una integridad adecuada de colores, iconos, etc...

Reversibilidad

Todas las acciones de edición son reversibles, excepto las que por definición no se pueden deshacer, como el borrado de ficheros, a través de un icono de Cancelar visible en todo momento (aportando seguridad al usuario). Por otra parte, en los casos donde no se puede deshacer, como el borrado, se le solicita la confirmación al usuario, para evitar errores o acciones echas por despiste.

Accesibilidad

La accesibilidad refiere a como se facilita el acceso a personas con capacidades reducidas. Aquí, si bien las acciones principales están claramente diferenciadas en iconos de tamaño considerable, lo cual facilitaría la accesibilidad, muchas de las acciones precisan de una mayor precisión, al tratarse de introducción y edición de texto, donde no se aportan opciones de apoyo a la accesibilidad. 

Televisor

Aquí vamos a ver un vídeo de como arranca el televisor de mi cocina:

Como se puede ver, con el televisor en stand-by, el piloto azul esta encendido. Cuando pulsamos una tecla del mando este se apaga, y luego NADA durante 9 segundos hasta observar un cambio en la pantalla. ¿Se esta encendiendo, lo apague, se rompió...? Este es un claro problema de causalidad, en la frontera de evaluación.

Como solución, el piloto azul debería de parpadear en vez de apagarse durante la espera, informando así al usuario que un proceso (el encendido) esta ocurriendo.

Practica 2: Despertador

Este el control del despertador. Mediante los controles laterales, el usuario puede determinar la hora y minuto en que desea ser despertado, que se le presenta numéricamente, y dispone de un botón para confirmar la hora. El botón inferior es un botón de retorno al menú anterior.

Realidad disminuida

Recientemente hemos estado comentando en clase la utilidad de la realidad aumentada como apoyo a los interfaces humanos, debatiendo si realmente tiene una utilidad desde el punto de vista del usuario, o si simplemente es un alarde tecnológico sin mayor trascendencia.

Solo como curiosidad, un vídeo que vi hace no mucho, sin la mayor trascendencia de todo lo contrario: la realidad disminuida.

Practica 2: Menú de Calefacción

Este el el menú de control de la calefacción. Mediante el regulador desplazable, el usuario puede determinar la temperatura ambiente que desea, que se le presenta numéricamente junto al desplazable. El botón inferior es un botón de retorno al menú anterior.

Papelera de Reciclaje

El otro día vi esta papelera de reciclaje en el edificio de usos múltiples de la universidad.

Magnifica muestra de ecologismo, pero... ¿donde va cada cosa? Aceptemos que hay una convención para separar los residuos por colores, pero es una convención arbitraría y poca gente se la sabe. Y en esta papelera no hay ninguna indicación mas.

Este es un problema de expectativas, en la frontera de evaluación. !No se como usar correctamente una papelera! Esto se solucionaría añadiendo unas indicaciones, como en la siguiente imagen.

Practica 2: Menú de Iluminación

Este el el menú de control de la iluminación. El usuario puede elegir mediante los iconos si desea regular iluminación eléctrica o la iluminación natural, y mediante el regulador puede decidir si quiere mas o menos iluminación. El botón inferior es un botón de retorno al menú anterior.

Se puede comprobar como se mantiene la coherencia y la integridad estetica para no despistar al usuario, aportándole solo información relevante.

Puerta del maletero

Esta es la puerta del maletero de mi coche:

Todo normal. Vamos a abrirlo. ¿Donde esta el botón para abrirlo? Aqui:

Si bien es una cuestión echa ex-profeso por seguridad, se genera un problema de expectativas y de convenciones, ambas en la frontera de evaluación. El usuario nuevo no sabe como abrir la puerta, pues se espera que haya un tirador en algún sitio de esta (como en cualquier puerta).

La solución vendría de poner algún tipo de manecilla en la puerta, como en la común normalidad de los vehículos.

Mock-Ups

Antes que nada: ¿Que es un Mock-up?

Segun nos comenta la wikipedia, es un modelo a escala o tamaño real de un diseño o aparato, usado para enseñanza, prueba, evaluación de diseño... Básicamente, un modelo. 

Para el diseño de interfaces software, existen múltiples herramientas de mock-up, que nos permiten realizar diseños de prueba de las interfaces de usuario con las que hacer pruebas antes de implementarlas. Muchas de estas herramientas incluso estan especializadas para sistemas operativos específicos, lo cual nos permite mantener una mayor coherencia.

El siguiente enlace dirige a Lumzy, una herramienta de mock-up gratuito bastante potente:

http://lumzy.com/

Y en este otro enlace podemos descargar modelos de diseño para Android. Hace falta Photosop.
http://www.smashingmagazine.com/2009/08/18/android-gui-psd-vector-kit/

Decodificador TDT

Aquí tenemos el panel de conexiones de un típico decodificador TDT:

De izquierda a derecha podemos ver la entrada y salida de antena (hace un puenteo), 2 euroconectores, dos conectores RCA para audio, un conector VGA y otro SPDIF óptico. Completito. Y que podemos hacer si tenemos una televisión antigua, solo con entrada de antena? Pues tirar la tele. Esto es un problema de restricciones, en la frontera de evaluación. 

La solución a este sería que los decos tuvieran una salida de cable coaxial con la señal decodificada.

Practica 2: Interfaz de Inicio

Este es el diseño que se ha definido para la interfaz de inicio de la aplicación. Un esquema de colores simple y de gran contraste, e iconos sencillos que transmitan la información de forma clara e intuitiva.

Practica 2: Estructura

Después del análisis realizado en el modelo conceptual, y como paso previo al diseño de los interfaces de cada una de las funcionalidades, se ha desarrollado un diagrama esquemático de los módulos que componen el diseño, para hacer más fácilmente comprensible la estructura de la aplicación que se quiere desarrollar.

Fogones inestables

Estos son los fogones de mi cocina, típica cocina de gas:

Aqui muestro por separado uno de los soportes para los calderos/sartenes/etc:

Muy bonito, muy estético, y muy, muy peligroso. Presenta un grave problema en la fontera de ejecución, en la seguridad. Como se puede ver en la imagen superior, los soportes resultan pequeños comparados con la base de los utensilios que van a soportar. Esto se agrava más aún en el caso de sartenes, que tienen el centro de gravedad desplazado por causa del mango. Esto conlleva que, si sitúas una sartén en el centro, con el mango apuntando a uno de los lados donde no hay apoyo (en la ultima foto, hacia las 3, 6, 9 o 12 si fuera la aguja de un reloj), el más leve roce puede tirarla al suelo.

Como  solución, el cambio ilustrado en el siguiente esquema:

incrementando así la superficie de apoyo.

Ejemplo de buen diseño: Taladradora de papel

En este post se quiere mostrar un ejemplo de como un buen diseño soluciona de manera simple y elegante un problema existente. En la siguiente imagen se muestra el típico diseño de una taladradora de papel que ha podido verse en cualquier escritorio desde hace muchos años.

Este diseño siempre ha sufrido de un grave fallo en la frontera de ejecución. La capacidad efectividad (uno de los conceptos dentro de la comodidad) se haya muy mermada, dado el hecho de que no es posible ver el punto exacto donde se taladra el agujero. Existen distintos modelos con guías y otro tipo de ayudas, pero que solo sirven para tratar de situar el papel siempre en la misma posición.

Esto no es útil si lo que se desea es realizar un agujero en un punto concreto. Pero como solución , este diseño:

Como se puede ver, la parte superior del cuerpo de la taladradora es transparente, e indica el punto de corte mediante un circulo rojo para que resulte mas simple su uso. De esta forma simple y sencilla se elimina el problema existente, pues el usuario puede comprobar donde exactamente se va a traspasar el papel.

Visto en Gizmodo

Practica 2: Modelo conceptual

Para realizar el modelo conceptual de este diseño, en primer lugar se realizará un desglose de las tareas que realizara nuestro software. A continuación compararemos estas tareas con las actividades que el usuario realiza normalmente en su vida cotidiana, y de ahí extraeremos las metáforas más adecuadas con que simbolizar esa tarea en el diseño.

• Inicio

Mediante iconos, el usuario podrá acceder a las distintas funcionalidades, así como apagar la aplicación.

• Iluminacion

Esta parte se dividirá en dos, Control de persianas automaticas y Control de iluminación

En el control de las persianas usara como metáfora la subida y bajada de estas. Se utilizara un botón deslizante para simular la subida o bajada de persianas, y se remarcara el efecto mediante un icono variable o un cambio de la iluminación de la pantalla, para reforzar así la realimentación.

Se añadirán ademas dos relojes, para permitir la automatización de la apertura y cierre por las mañanas y las tardes.

En el control de las Iluminacion usara como metáfora la los potenciometros que regulan la intensidad de las bombillas. Se utilizara un botón deslizante para simular la subida o bajada de intensidad de la luz, y se remarcara el efecto mediante un icono variable o un cambio de la iluminación  de la pantalla, para reforzar así la realimentación.

• Calefacción

Al igual que con las persianas, se utilizara un botón deslizante para simular la subida o bajada de la temperatura, reforzando la realimentacion mediante una información gráfica precisa de la temperatura seleccionada. 

• Programar despertador

Se utilizará como metáfora un reloj-despertador de mesa, para que su programación aproveche el conocimiento propio del usuario.

• Gestión de Multimedia

Cuando el usuario quiere utilizar herramientas multimedia, la actividad que realiza es encender el aparato deseado y controlarlo a través de un mando a distancia. En el software utilizaremos este conocimiento, utilizando una interfaz que  las características mas comunes de un mando a distancia.

• Telefono

El usuario podrá utilizar las comunicaciones de la casa para realizar llamadas de teléfono o videollamadas vía IP. Se utilizara como metáfora un teclado de móvil virtual

• Simulación de presencia

Al tratarse de simulación de presencia durante estancias prolongadas, el sistema tendrá predefinido las actuaciones a realizar, y el usuario solo precisará definir, mediante dos calendarios, la fecha de inicio y fin de la simulación.

Práctica 2: Diseño de Interfaz para Domótica

Con la mejora del nivel de vida experimentado en los ultimos años, unido al gran avance de las tecnologias dentro del hogar, cada vez es mas frecuente la instalación de sistemas cada vez más complejos de domótica. El objetivo de esta práctica sera el de desarollar un interfaz sencillo e intuitivo para el control de la domótica de una casa.

Dentro del concepto de la domotica del hogar (queda excluido la gestión de la domótica en edificios, oficinas y naves industriales) se centrara en tres grandes ambitos: la seguridad, el comfort y las comunicaciones. De este modo, dispondra de aplicativos para las siguientes funcionalidades:

• Control y automatización de la iluminación, calefacción y sistemas electricos.
• Control y automatización de las persianas y puertas.
• Gestion de multimedia (a traves de un Media Center).
• Gestion de alarmas y videoporteros.
• Simulación de presencia y acceso a camaras de vigilancia.
• Gestión de las comunicaciones (telefono, fax e internet). 

Al tratarse de la gestión de una casa, debe tenerse en cuenta que el usuario puede ser adultos con o sin conocimientos de informatica, ancianos e incluso de forma accidental niños de corta edad. Dado esto, debera buscarse el mantener un equilibrio elevado nivel de facilidad e intuitividad en el manejo que permita ser usado practicamente con cualquiera, junto con un control de uso que evite que un manejo descuidado o inconsciente (despiste, niños..) pueda comprometer la seguridad del hogar.

Este interfaz se desarrollara utilizando como plataforma un hardware tipo tablet tactil con conectividad wifi. Se utilizara como modelo de plataforma el recientemente salido al mercado Samsung Galaxy Tab. Ya varias empresas han mostrado la potencialidad de este hardware para sus sistemas de gestion de domotica, como por ejemplo Sling.

Controles del pasajero en una guagua

Recientemente, viajando en una guagua, observe que tenia el siguiente cuadro de controles para el aire acondicionado y la luz del pasajero:

 

En el se pueden ver los botones de control de las luces de lectura, un boton indeterminado entre estos, el altavoz en la parte inferior y una salida, presumiblemente del aire acondicionado, en la parte superior.

En primer lugar, se puede entrever una fallo de accesibilidad: estos controles se encuentran situados por encima de los asientos, bajo el hueco del equipaje, a una altura que obliga a elevar los brazos a cierta altura por encima de la cabeza. Esto conlleva que niños o personas con problemas de movilidad no puedan manipularlos con comodidad y seguridad.

Por otro lado, al analizarlo se pueden observar otros  varios fallos de diseño dentro de la frontera de evaluación: 

• Expectativas: al manipularlo, un usuario supone que con estos mandos puede controlar el encendido tanto de las luces, los altavoces y del aire acondicionado, pero este último no puede ser regulado individualmente. El altavoz tampoco puede ser desactivado y lo que parece el boton central simplemente no es un botón (probablemente sea un botón en otros modelos con más funcionalidades).
• Restricciones: Como se puede ver en la siguiente imagen, las salidas del aire acondicionado se encuentran situadas a lo largo del lateral de la pasarela, y otra pequeña salida sobre los controles (el circulo más pequeño). Rapidamente se puede deducir que el aire acondicionado no puede ser controlado por el usuario, pues las salidas están siempre abiertas y su funcionamiento es controlado  por el conductor para toda la guagua. 

 

•  Causalidad: si bien a causa del flash en las fotos se pueden diferenciar las bombillas tras la lamina de plastico traslucida, normalmente son indiferenciables. Esto hace, que si la luces estan desactivadas desde los controles del conductor, al pulsar el boton el usuario no tenga por seguro  si el boton realmente sirve para las luces, si lo ha accionado correctamente o no, si el boton realmente sirve para las luces, si estan estropeadas...
 

Como solución a los problemas de evaluación se propondría el uso de un panel de mandos como el mostrado en la siguiente imagen.

 

En este, el pasajero puede controlar el flujo del aire acondicionado, los botones estan claramente diferenciados del resto del panel, y la iluminación queda visible a simple vista, por lo que un malfuncionamiento de esta resulta mucho más obvio. Una solución que además resolviera el problema de accesibilidad estribaria en un diseño similar al anterior, pero donde los botones de control estuvieran en un lugar más accesible, como por ejemplo el respaldo del asiento anterior o en el reposabrazo, al estilo de los aviones.

 

Cazo de cocina

Como se puede ver en la siguiente imagen, en este cazo su asa es de metal descubierto.

Esto es un fallo de diseño de seguridad, dentro de la frontera de ejecucion. Si bien se trata de un metal distinto al del cuerpo, con una menor conductividad al calor, sigue resultando peligroso, sobre todo frente a largos tiempos de cocción, pudiendo provocar quemaduras.

La solución a este fallo seria el recubrir el mango con una superficie no conductora del calor, como por ejemplo la baquelita, como se ve en el siguiente ejemplo.

Logitech Trackman Wheel

En este post hablaremos sobre el Trackman Weel, un trackball diseñado por la firma Logitech.

La idea principal en todo trackball es eliminar el movimiento de la muñeca típico de los ratones normales, mejorando su ergonomía y evitando problemas físicos como el Sindrome del tunel carpiano. Por contra, padece un grave problema de accesibilidad. Como se observa en la imagen, el diseño esta claramente definido para usuarios diestros, siendo imposible su uso utilizandola mano izquierda.

La solución a este problema estribaría en la producción de un modelo idéntico, pero que fuera una imagen especular del original, de tal manera que tanto diestros como zurdos pudieran elegir el modelo que les resultara mas conveniente.