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

Analisis Pagina Web www.Grooveshark.com

Grooveshark.com es un sitio web que ofrece música de forma gratuita e ilimitada a cambio de visionar ads visuales en el lateral derecho de la pagina web. Para disfrutar de los servicios de la página se debe tener el Adobe Flash Player, pues no se necesita registro para acceder a emisoras de radio y musica aunque si nos registramos tenemos ventajas como almacenar listas de reproduccion y subir nuestra musica, escuchar playlists de amigos etc.. Como caracteristica interesante nos permite hacernos miembros sin tener que crear una cuenta nueva y usar nuestro usuario y pass de google o facebook.
La web no está perfectamente traducida y existen algunos trozos que tienen Ingles (lengua materna de la web). La musica se reproduce perfectamente y la calidad es muy buena.

• La web tiene una muy buena interacción ya que todo objeto tiene respuesta, especialmente destacable es la adaptación de la web para dispositivos tactiles, ya que muchos de sus objetos admiten arrastrar y soltar.

• Pero digamos tiene una mediocre comunicación porque aunque dice que tipo de respuesta ofrece el objeto, la misma esta descrita en ingles aunque se haya detectado que el idioma por defecto es el español y se muestren mensajes algunos en ingles y otros en español, asi mismo la ayuda esta tambien en Ingles.

• La percepción que se obtiene de la web es visual, ya que toda la información para interactuar por ella no produce sonido. El único sonido es la de la música que se ha seleccionado, que es el objetivo de la web.

• Debido a la falta de comunicacion para aquellos que no sepan ingles puede darse el caso de que la comprensión no sea plena y no se haga un uso de todas las funcionalidades disponibles, aun asi el interfaz es fiel a los tipicos reproductores multimedia, por lo que no debería ser un problema.

• El usuario tiene el control de la música que se reproduce, de la creación de listas y la interactuación por mensaje con otros usuarios, asi como compartir sus listas con otros miembros de redes sociales o amigos, se ofrece una interesante caracteristica que es usar como login tu cuenta de facebook o gmail caracteristica que se esta haciendo bastante popular y que evita tener cientos de cuentas una para cada pagina web de servicios a la que te suscribes.

• Existe una realimentación en el reproductor de música, como cualquier otro reproductor, enseñando el tiempo que lleva la canción reproducida.

• Con respeto a la música que se escucha al momento se tiene una manipulación directa, con realimentación constante, ademas se puede realizar otro tipo de operaciones sin que se interrumpa la reproduccion de la musica, como por ejemplo subir tus propias canciones, gestionar tus listas de reproduccion, etc...

• Debido a la falta de comunicación producida por la falta de traduccion completa de la web (habiendo partes en español y otras en ingles) no existe mucha coherencia en ella.

• Si existe una integridad estética adecuada ya que tiene un estilo de composicion muy equivalente a un reproductor multimedia.

• Si existe una reversividad por si cometes un error y presionas una nueva canción, ya que se van almacenando tus selecciones de manera automatica como si estuvieras creando una lista de reproduccion.

• Está disponible en 27 idiomas y cumple con los protocolos de accesibilidad de páginas web. Dispone de una amplia variedad de estilos musicales y artistas que va en incremento.

• Frontera de evaluación:
  
  
  • Existen fallos de expectativa. Se muestra un anuncio y luego un pequeño mensaje, ‘stop ads’ (en inglés siendo yo español), y al lado una ‘X’. Da la impresión de que basta presionar la ‘X’ para eliminarlos pero nos envia a una pagina para hacernos usuarios de pago(Aunque hay otra forma de evitar los ads que comentare al final de mi analisis).
  
  
  • No muestra ningún problema de resticción.
  
  
  • Respeta la convención de símbolos del reproductor.
  
  
  • No muestra ningún problema de analogías. A favor destacar la gran funcionalidad de la web
  
  
  • No muestra ningún problema de causalidad.
• Frontera de ejecución:
  
  
  • Comodidad: Tiene ciertos problemas, pero bien en general.
    
    
    • Efectividad
      
      
      • Es bastante sencillo volver donde se estaba antes, no teniendo que hacer un esfuerzo para ello.
      
      
      • La manipulación depende del navegador.
      
      
      • Sí es preciso, ya que se puede elegir el segundo exacto donde escuchar una canción.
  • Flexibilidad
    
    
  • Su buena reversibilidad, nos aporta una buena tolerancia al error humano, permitiendo modificar con facilidad errores en la creacion de listas de reproduccion por ejemplo.
  
  
  • El usuario tiene el control completo del reproductor, permitiendo saltar a canciones de manera inmediata o a partes de la misma.

• Accesibilidad: Mencionado antes.

• Seguridad: En ningún momento puede provocar lesiones mentales ni de vista.

Como Evitar los ads sin ser miembro de pago, es muy sencillo, y no hay que hacer nada ilegal, tan solo se debe utilizar el navegador firefox y un plugin muy recomendable llamado "noscript" este plugin te permite de manera sencilla bloquear todo el contenido JavaScript de una pagina y activarlo selectivamente, lo unico que habría que hacer es permitir unicamente el JavaScript que se utiliza para la representación del interfaz multimedia y ya esta.

Analisis de Objetos Cotidianos y su posible mal Diseño

Farola en Medio de la Acera

Quien no se ha dado un morrazo con una farola? Sobre todo cuando te pasa al lado una chica guapa ;) Bueno pues esto esta muy mal que lo sepan los que ponen las farolas, aqui hay un ejemplo de lo que comento.

Un Objeto con un Buen Diseño

Averiguan para que sirve?

Claro que si es un Borrador para una pizarra, esta muy bien la idea de que se puedan almacenar los rotuladores dentro, asi no se pierden y estan siempre a mano.

Dificil saber para que sirve segun la perspectiva

Este es un Objeto con un Diseño diferente y eso mismo hace que sea atractivo pero tambien dificil de reconocer su utilidad hasta que se mira bien. Han averiguado para que sirve?


¿Porque las neveras tienen los botones arriba del todo?

Este a mi parecer es un mal diseño porque no tiene en cuenta que todo el mundo no puede llegar facilmente a esos botones, claro que siempre se puede cojer una escalera :P