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.