Mediastation GUI

Bleen · 15-ago-2004, 14:09

Buenas gente, tanto tiempo sin iniciar un thread por aca... ^_^;;;

En fin, a algunos ya les comente, a otros no... toy laburando para www.lionstracs.com , haciendo la GUI (Graphical User Interface) para un chiche bastante bonito, llamado "Mediastation X-76". El aparatito en si consiste en un teclado musical, con una computadora dentro (un Athlon 2.4 segun recuerdo..). En fin, esta PC tiene un Linux cargado, y corre software hecho aca en la argentina, a medida. Dicho soft se encarga desde la seleccion de instrumentos hasta ecualización paramétrica (pasando por muchas otras cosas). Como saben, todo programa que vaya a usar un usuario necesita una interfaz... si es grafica, mejor :-)
Aqui es donde entro yo... tengo que hacer que lo que se vea en la pantalla de LCD touchscreen ubicada en el medio del aparato se vea bien.

Este es el aparato en cuestion, con la interfaz vieja en su pantalla:

Y este es un sample (mentiroso, ya que no es un screenshot funcionando sino photoshopeado) de la interfaz de la pantalla del llamado "player":

La idea de este thread es ir posteando pantallas y obtener algo del muy preciado feedback :-)

Tengo mas pantallas terminadas, pero tan en el laburo... ya las ire posteando. Los comentarios son bienvenidos :-)

martindisenio · 15-ago-2004, 14:59

Un pinguino musical! me parece genial!

tu pantalla esta buena, pero fijate si podes jerarquizar la lectura. Se ve como que todos los elementos tiene el mismo nivel.
Es asi?

La tipo, una helvetica capitular, se dice que es la mas rapida para leer, pero para mi no tiene onda.Igual puede ir.
Lo que sí,
fijate si el azul electrico resulta incomodo para la lectura, acordate que lo pueden tener que usar durante horas mientras componen o en un ambiente de poca luz.
Igual, estaria bueno que la gui sea customizable y que vos , como diseñador, le puedas dar distintos esquemas, por ejemplo, para distintas condiciones de uso.

Dazo · 15-ago-2004, 15:02

Uuuuuuuuuuuuuuuuu me hubieses avisado antes!! Yo tengo baaaanda de data sobre Ergonomia para diseño de interfaz, si bien es mas que nada para productos tangibles mas que grafica es mas o menos la misma onda... mas por como lo estas apuntando a nivel de graficas realistas. Pero esta todo impreso.
Lo que te puedo decir asi al tiron es que hay demasiada carga de texto... lo que hace de la interfaz mas dificil de acostumbrarse. El uso de simbologia en vez te texto agiliza mucho mas la interaccion. Tambien el hecho de agrupar los comandos acorde a funciones y relacion de forma clara. Por lo que veo esta todo bastante bien puesto en ese sentido pero todo esta muy junto, como apelotonada... donde ahi se ve claro que te juega en contra el tema de textos... dado que usas fuentes grandes para que se vean claros, entonces te queda todo muy proximo. Fijate en las interfaces de los viejos equipos de audio por ejemplo que tenian 230.000 botones y perillas... solian agruparse por funcion general y se envolvian con una liena de pintura, bajo un logo o un texto simple arial, y lo mas separado posible entre si.
Yo creo que si buscas la forma de eliminar mucho del texto por simbolos (principalmente el File, next, home, find, up dir, etc) te permitiria ahi tener una mayor separacion entre comandos... con botones mas grandes y claros, dejando mas limpia la interfaz. Lo mismo con los botones de triangulares de up/down... son necesarios? digo porque esta tambien la barra de up/down del lado derecho, podrias buscar la manera de eliminar una de las dos... mas alla de la barra te da la nocion de que hay mas cosas de lo que se ve en la pantalla.
Otra cosa son los ecualizadores. Es un diseño muy plano. Me refiero a que estan todos al mismo nivel, con igual separcion entre la franja azul y la de colores... y con la seguiente combinacion... lo que hace al vistazo rapido medio dificultoso separarlos... si queres mantener la proporcion lo que podes hacer es ponele cada ecualizador bajarlo 1mm del raz y juntar un poco mas las 2 lineas, para lograr una separacion visual optima. Claro que hay que tener cuidado que muy juntos no queden porque sino te jode a la hora de poner el dedo. Incluso veria la forma de ensanchar un poquito las lineas luminosas...
Por otro lado... por lo que veo (y lo que es logico) debes respetar a full la imagen del producto. Justamente ahi tenes la pista de mucho de lo que te digo. Fiajte como estan agrupados los comandos y la relacion que hay entre botones y textos/logos. Fijate incluso la agrupacion de las perilla de canales equalizadores (no se que son... arriba a la iz), estan claramente agrupados y separados. Fijate la distancia que hay entre uno y otro.

Eso es lo que se me ocurre viendola ahora asi al voleo... tirate mas imagenes a ver como va eso. Despues a la noche me fijo si encuentro algo de data digital sobre ergonomia de interfaz para pasarte.

Salutos

mandril · 15-ago-2004, 19:09

quiero ya eso!!! me estoy babeando...

con respecto a la interface, ya te dieron mucha data interesante mis predecesores... a ver las siguientes! pero una pregunta... de que tamaño es el lcd???

Bleen · 15-ago-2004, 20:43

Gracvias por los comentarios... la interfaz final tiene letra Arial y sino usamos una que es MUCHO mas clara que el LCD ese feo (el cliente habia pedido letra LCD pero al final lo convencimos que solo se sue para los numeros).
Ahora a defender las asquerosidades del diseño ese... (o a excusarlas):

1) El cliente pidio especificamente ESE layout, y NO OTRO. ME refiero que los espaciados los dio el cliente, no yo. El diseño se hizo como "skineo" de una pantalla ya hecha, a la cual no se le podian efectuar demasiados cambios funcionales y estructurales.
2) El tamaño real de la pantalla, creo que es de 12 pulgadas, con resolucion 800x600. Es touchscreen. Estas dos cosas condicionaron mucho el layout.
3) El texto en lugar de iconos no es el factor por el cual los rotulos de file, etc sean tan grandes... eso corresponde al lugar fisico donde se encuentran los botones EXTERNOS que son los cuales activan esas funciones. Fijense en la foto del aparato, tiene botones a los costados y abajo de la pantalla (onda un Banelco), los cuales activan esas opciones. El cliente dio como requerimiento que se usen lo mas posible estos botones EXTERNOS, en lugar de poder tocar las opciones dentro de la pantalla. Ende se decidio darle el look de los rotulos del aparato fisico a los botones, solamente para que el usuario sepa lo que hacen.
El tamaño de los campos de texto es el minimo indispensable para una comoda lectura en el LCD incorporado. Mas chico era incomodo y el lugar que se ganaba verticalmente en el display no era aprovechable (noten que falta lugar horizontalmente mas que verticalmente, debido a la gran cantidad de sliders que se debian poner.
4) La pantalla cambia su look segun se toque un MIDI o un wave, ende debia estar dividida en 2 por la mitad. La asignacion de los botones fisicos y su posicion "real" hizo imposible plantear esta pantalla con una division horizontal en lugar de vertical.

Coincido con vos, Dazo... esta todo apelotonado y recomprimido, pero lamentablemente ESO es lo que pidio el cliente, y esta pantalla, con un par de cambios, ya esta aprobada... por lo menos para la primer version del aparato. :-(
Entiendo lo que decis de los equipos de audio, pero esta es una pantalla chica, en un lugar jodido de leer (ya que no se puede regular en el eje X en la realidad). Mas chicas, las cosas no se leen bien :-(
En cuanto a la separacion de los sliders, no termino de entender a lo que te referis, pero tene en cuenta que esto va programdo y para eso lo tengo que cortar en photochop en miquinientos pedacitos que no se pueden overlapear asi nomas... ^_^;
Entiendo lo que decis, en el aparato fisico son 4+4 sliders... pero no hay lugar para hacer eso mismo en la interfaz

Gracias por los comentarios de todos, mañana o pasado posteo screens de otras partes de la interfaz, y tal vez la version "real" de esta.

Salu2

Dazo · 16-ago-2004, 14:08

Ah! no sabia que el cliente les puso tantas limitaciones... un bajon. No les dio pie mejorar practicamente nada.
Ahora cai con lo de los botones exteriores... no me habia percatado, yo pensaba que venia de boton la cosa... Aunque para mi entender es medio al pedo tener los textos de los botones exteriores en la pantalla, en la Banelco es logico por el diseño y la tecnologia. Pero bue' si es orden de arriba...
Yo no tengo ni idea de programacion, lo que dije fue solo en base a diseño sin tener en cuenta lo otro aunque lo de los ecualizadores es solo una lavada de cara a la grafica sin moverlos de su lugar (si no entendi mal ese era el problema de cambiar cosas no?).

Salutos

martindisenio · 16-ago-2004, 15:33

ah! tenia que salir la argentinidad por algun lado!

Si el cliente sabe que tipografia es la mejor, que layout, que elementos y donde van,
pos, el chavon debe ser un diseñador grosso sin tiempo para hacerlo él mismo, no?

Las pautas son buenas, y ayudan, pero que te bajen linea asi me parece que el tipo no la tiene muy clara.

Perdon por el exabrupto off-topic

Con respecto a los botones de texto vs icono, me inclino por los primeros, porque en definitiva se lee mas rapido y no deja duda de la funcion.
A proposito de eso, voy a revisar los backup a ver si te encuentro un documento del MIT acerca de "el mito de los botonitos con iconos"

Dazo · 17-ago-2004, 04:06

jajajaja el icono mal usado obviamente no camina.
El problema con la simbologia es cuando se inventan simbolos o suplantan... lo que proboca algo de caos.
Los productos de alta tecnologia suelen usar mas letras que simbolos, no por una cuestion funcional... sino por cierto fetichismo de complejidad. Las maquinas/herramienta por ejemplo es a la inversa... no solo por el hecho de que la sepa usar un analfabeto sino por fetichismo tambien.
Por suerte eso de a poco cambia. El problema como dije antes es cuando se usa mal la simbologia... que es mas facil pifiarla ahi que escribiendo. Pero tambien el abuso de la simbologia es una cagada... todo depende del producto

Arturo · 19-ago-2004, 12:15

a mi me gusta bastante
no me molesta ni la jerarquia ni nada
lo unico que me molesta es el nivel de contraste que tenes, blancos puros y negros puros y como si fuera poco ese azul tan oscuro y tan tan saturado que casi te da la sensacion de que vibra.
Es el tipo de interfaz que te hace pomada la vista, yo si fuera vos arreglaria eso.

sino a mi me gusta

Bleen · 19-ago-2004, 22:47

Ah, otra cosa... :-) con respecto a los colores, el LCD del Mediastation no se ve como un monitor "comun" de PC... los colores salen distintos, asi como los contrastes ^_^;

Seh, jodido de mostrar asi nomas este laburo :-S

^_^ sepan disculpar las bestialidades