Practica 3 - Diseño de una Interfaz - Fase 4

Fase 4

Elementos que van a componer la aplicacion son:

• Gestion de Capas

Como se puede apreciar los nombres de las capas han sido escritos a mano, ademas a la derecha de las capas seleccionadas se muestra un icono que si se pulsa y arrastra hace que la capa se mueva pudiendo ponerla encima o debajo de la capa que deseemos.

• Paleta de Colores y Menu Herramientas

 

Con esto tenemos las tipicas herramientas de cualquier programa de dibujo (Photoshop, Corel, etc..) permitiendo una  utilización correcta de las metaforas visuales.

•  Herramienta Grosor Pincel

 Esta herramienta permitira fijar el pincel a un grosor determinado inicial que siempre podrá ser incrementado de manera automatica segun presion sobre el lienzo. La forma de seleccion es bastante intuitiva realizando un gesto circular sobre el icono de la herramienta en un sentido un otro segun queramos mas o menos grosor.

Ejemplo de pantalla Inicial

Ejemplo de pantalla de Trabajo

Practica 3 - Diseño de una Interfaz - Fase 3

Fase 3

El objetivo final a conseguir con esta aplicación sera obtener un entorno minimalista que aproveche y permita un uso de la pantalla del dispositivo usado en su totalidad para el desarrollo de los trabajos de diseño.
Se pondra enfasis tambien en un diseño intuitivo con metaforas visuales comunes a cualquier herramienta similar.

• Durante la carga inicial del programa se mostrara un lienzo en blanco y las ventanas de herramientas capas y paleta los cuales desapareceran una vez el usuario pulse en cualquier zona del lienzo.

•   Si queremos que vuelva a aparecer dichas herramientas podemos mantener pulsado el dedo o lapiz en la pantalla.

•   Para gestionar el grosor de escritura nos aprovecharemos de las caracteristicas que ofrece fisicas que ofrece un tablet y permitiendo que se adapte por tanto a la presion que ejerce el usuario sobre la pantalla, de manera analoga ofreceremos un metodo alternativo para fijar el grosor a un tamaño determinado usaremos un elemento circular que mostrara una previsualización del ancho y que se modifica haciendo girar el dedo en un sentido u otro (de las agujas del reloj) segun queramos aumentar o disminuir el ancho. Esto nos evita ocupar una gran superficie de la pantalla para mostrar los distintos anchos seleccionables, permitiendo en todo momento que podamos ver la zona de trabajo casi al completo.

• Para la gestion de capas podremos asignarles nombres escritos con el dedo o lapiz de igual forma que si estuvieramos trabajando sobre el lienzo dando una uniformidad y coherencia sobre el trabajo general sobre el interfaz, ademas se podran mover las capas para superponerlas entre ellas simplemente pulsando sobre ellas y arrastrandolas.

Practica 3 - Diseño de una Interfaz - Fase 2

Fase 2

Corel Draw

Aqui tenemos una tipica ventana de Corel Draw uno de los programas de dibujo vectorial y retoque fotografico mas utilizados

Podemos apreciar que tiene los elementos tipicos de este tipo de aplicaciones (Barra de Herramientas, Paleta de Colores, Capas, etc..) cabe destacar la inapropiada e ineficiente utilización del entorno tablet que supondria realizar una aplicación exctamente igual en interfaz a este.

Como podemos observar hay demasiados elementos que permanecen en la ventana de trabajo que son innecesarios una vez elegido con cuales de ellos quieres trabajar sobre el dibujo, ademas esto mismo hace que se reduzca muchisimo la ventana efectiva de trabajo.

Este sera un aspecto a mejorar en mi diseño final.


Adobe Photoshop

Ahora vemos una ventana de otro programa lider en dibujo y retoque fotografico y directo competidor de corel como es el Adobe Photoshop.

En esta ventana de trabajo de Photoshop podemos apreciar los mismos elementos tipicos de estas aplicaciones y que tiene en comun con Corel como son (Barras de Herramientas, Paleta de Colores, Capas, etc..) vemos tambien por ejemplo herramientas para seleccionar el grosor del pincel que si bien son necesarias se podrian representar de otra forma adaptandolas a un entorno tablet mas tactil.

En mi aplicación las herramientas no permaneceran en la pantalla, solo apareceran durante un tiempo limitado para luego dejar toda la pantalla como zona util de trabajo,  pudiendo volver a hacer aparecer en la pantalla las herramientas manteniendo presionado el dedo o lapiz unos segundos sobre la pantalla.

Practica 3 - Diseño de una Interfaz - Fase 1

Fase 1

Descripción General

    La aplicación que voy a desarrollar consistirá en un software de retoque fotografico para dispositivos tablet, es decir, que no tengan de manera predeterminada teclado y consten unicamente de pantalla tactil.

Con este programa podremos dibujar o retocar imagenes existentes gracias al uso de un dedo o de un lapiz especial para su uso en dispositivos tablet.

El usuario tendra el control gracias al uso de capas y las tipicas operaciones deshacer y rehacer.

La interfaz de la aplicación será simple e intuitiva con el fin de que pueda ser usada fácilmente por cualquier tipo de usuario y utilizará las metaforas visuales comunes en este tipo de aplicaciones, ademas estara especialmente adaptada para su uso en dispositivos tablet aprovechando las caracteristicas tactiles.

Todo esto permitira mantener una integridad estetica en el diseño del interfaz que lo hara mucho mas amigable.

Motivaciones

Con la gran difusion de tablets actualmente me parece interesante abordar el proceso de adaptación y diseño del interfaz de un progama que aproveche sus caracteristicas, adaptando los tipicos programas de dibujo y retoque fotografico a estos dispositivos.

Practica 2 - Rediseño de una Interfaz

Como muestra de un mal diseño de Interfaz he elegido un antivirus open source llamado Clamwin




Ventana Principal

Voy a enumerar los distintos fallos de diseño y luego presentare un interfaz en el que se han corregido.

Fallo de Coherencia

En la ventana principal a parte de ofrecernos muy poca o ninguna información, se presenta un fallo de coherencia en la aplicacion pues no presenta una apariencia tipica de un Antivirus.

Fallo de Expectativas

Durante la frontera de evaluación un usuario inexperto no sabrá como seleccionar las distintas formas de análisis (sistema completo, una carpeta, un archivo...)





Fallo de Causalidad



No se nos indica en ningun momento en la pantalla si el antivirus se encuentra actualizado.

Fallo Metaforas Visuales

Los iconos de la barra de tareas no se corresponden con ningun icono utilizado en otros antivirus y no queda claro para que sirven.



Rediseño del Interfaz
Para solucionar todos estos problemas del interfaz he optado por un interfaz renovado que se ajusta a la siguiente imagen

En este nuevo diseño he añadido los siguientes aspectos que solucionan los errores anteriormente mencionados

Un Boton Scan Now a la izquierda del interfaz (Ademas incluye la fecha y hora de el ultimo Escaneo)
Un Desplegable Scan Options que permita selecionar de manera rapida y sencilla escaneos preconfigurados
Un Boton Update Now a la izquierda del interfaz que permita actualizar el antivirus (Ademas indica la fecha y hora de la ultima actualización)

Un icono AntiVirus que nos indica si el antivirus esta activo o no.

Un icono a la derecha del icono de la aplicacion  (tick verde) que nos indica si el sistema esta correctamente protegido.

Practica 1 - Tarea 6 - Manipulación Directa y Coherencia.

Manipulacion Directa

Un ejemplo de esto puede ser la pagina de Opel
http://www.opel.es/tools/comparar-los-modelos-de-opel/configurador-opel.html

En ella se puede apreciar toda la gama de vehiculos de Opel pudiendo el usuario realizar una configuracion personalizada en la cual se va mostrando cada  aspecto elegido asi como su precio final.

Coherencia

Aqui podemos presentar dos sistemas operativos que tienen aplicaciones y metaforas visuales semejantes
Son los sistemas operativos ZorinOS y Windows 7

Practica 1 - Tarea 5 - Perdida de Control y Ejemplo de Metaforas

Reinicios de Windows

Es bastante grave un comportamiento que viene activado por defecto en windows que consiste en lo siguiente.
Cada vez que se realiza una actualización importante, el sistema operativo intenta reiniciar a los 5 minutos y muestra al usuario una ventana por si quiere cancelar el proceso.

Hay que tener en cuenta que el usuario puede tener aplicaciones abiertas y puede haberse ausentado del PC pudiendose producir una perdida de datos por causas ajenas al Usuario no teniendo control sobre este proceso.

Por ello seria interesante que siempre quedasen en espera de aplicación las actualizaciones importantes para el momento en el que el usuario realmente solicita un apagado del PC

No permitiendose en ningun caso un comportamiento como el aqui citado que puede producir perdidas de datos.

Ejemplo de metáfora

Aqui voy a presentar las metaforas que se aprecian en dos programas de diseño 3D como son el Blender y Modo (Luxology)

• Blender

 

• Modo

• métafora visual, porque ambos usan una serie de iconos que resultan familiares para la mayoría de usuarios al ser usados no sólo en este tipo de aplicaciones sino también en otras aplicaciones de diseño 3D principalmente. Por ejemplo: los iconos de objetos (cubo, cilindro, esfera, etc..)

• metáfora organizacional, ya que los diferentes menús están organizados de manera similar y siguen un esquema típico.

• metáfora funcional, porque la funcionalidad de muchas opciones, no sólo se repite en programas 3D, sino que además están presentes en otro tipo de aplicaciones lo cual resulta familar para un usuario (por ej: abrir archivo, guardar archivo, importar, exportar, etc..).

Practica 1 - Tarea 4 Fallo Frontera de Evaluacion

Expectativas

Aqui voy a presentar un objeto que presenta una clara deficiencia en la frontera de evaluación concretamente en el apartado de expectativas ya que no se intuye facilmente para que sirve dicho objeto, habra que observarlo detenidamente desde distintas perspectivas para poder hacerse una idea.

Viendo esta perspectiva del objeto dificilmente sabremos para que sirve. ¿averigua ud para que sirve?

 Ahora mostrare otra perspectiva que quizas aclare algo mas la utilidad

Sigue sin estar claro? Una ultima imagen para intentar clarificar

 

Bueno no les torturo mas, si despues de esta imagen sigue sin estar claro queda demostrado que el fallo existe.

El objeto es un afilador. Su diseño es muy bonito y atractivo pero la poca similitud con un afilador tradicional produce este fallo en la frontera de evaluación

Practica 1 - Tarea 3 - Fallo en la Frontera de Ejecucion

Como ejemplo voy a poner un lector MultiTarjetas que tengo en casa, es el SVEON SCT014

Este lector posee un mal diseño en los zocalos de inserción de tarjetas ya que permite una incorrecta inserción de las tarjetas que hace imposible su lectura, en concreto para las tarjetas SD y MicroSD.

Esto podia haberse solucionado diseñando un zocalo que permita una única forma de inserción o serigrafiando un dibujo que muestre la correcta orientación de la tarjeta.

Practica 1 - Tarea 2 - Ejemplo de interacción, comunicación, percepción, comprensión

Como ejemplo cotidiano voy a mostrar el uso de un PC

1.- Interaccion
La interaccion con el PC inicialmente se restringe a pulsar el boton de encendido de la pantalla y de la Torre

2.- Comunicación
La respuesta obtenida es que se encienden los leds de ambos dispositivos y empiezan a aparecer distintos mensajes informativos en pantalla.

3.- Percepción
A parte de los mensajes que se pueden ver por pantalla tambien constatamos que se esta efectuando el arranque porque podemos escuchar el ruido de los ventiladores del PC asi como un Beep en el momento de carga de la Bios indicandonos que se ha realizado un chequeo correcto.


4.- Comprensión
La finalidad de esto es poder arrancar el sistema operativo y proceder al uso del sistema informatico.

Practica 1 - Tarea 1 - Fallo Diseño Web ULPGC

En la ULPGC se ha dotado de manera inteligente a todos los usuarios con un identificador unico para todos los servicios que se ofrecen, sin embargo en la pagina web se ha de realizar la autenticación del usuario repetidas veces en funcion de que servicio es el que queremos acceder algo totalmente innecesario y que le resta utilidad y sentido al uso del identificador único.
Aqui les muestro varios ejemplos
Primero nos autenticamos en la pagina principal

http://www.ulpgc.es

Una vez autenticados deberiamos poder acceder a todos los servicios sin mayor problema pero si queremos consultar el correo veremos esta pagina y tendremos que introducir nuevamente usuario y contraseña.

https://correo.ulpgc.es/horde/imp/

Pero aqui no acaba la cosa, si queremos acceder a la biblioteca tambien tenemos que introducir nuestro usuario y contraseña mostrandose la siguiente pagina.

https://opac.ulpgc.es