la no transparencia de las interficies
DESCRIPTION
Diseño de Interficies Mltimedia - PAC1TRANSCRIPT
PAC1LA NO TRANSPARÈNCIA
DE LES INTERFÍCIES
ANALÓGICO LAVAVAJILLAS 2 LAVADORA 4
DIGITAL SKYSCANNER 6 ADOBE PHOTOSHOP 8
CONCLUSIONES 10
JORDI CARBÓ PAC1
DISSENY D’INTERFÍCIES MULTIMÈDIA
2
LAVAVAJILLASDAEWOO DDW-M1211
Este aparato, que ha revolucionado mis sobremesas, se con-vierte, gracias a su interfaz, en un ejemplo de –relativa– invisibi-lidad gracias a su intuitivo y extremadamente sencillo manejo.
ARQUITECTURA DE LA INFORMACIÓN
El esquema de organización es muy simple y se
vertebra según tareas: un bloque para encendido/
apagado e información, y otro para el manejo de
programas. Las relaciones entre los elementos son
evidentes y están bien desarrolladas.
INTERFAZ Y USABILIDAD
La interfaz consiste en una serie de botones y pilotos.
Cada acción del usuario tiene un reflejo en el estado
de los pilotos, por lo que el control es en ese sentido
absoluto. Una pequeña pantalla, además, informa del
tiempo restante para la finalización del lavado.
El etiquetado combina los elementos textuales (POWER
y PROG.) con un sencillo lenguaje icónico, que incluye
símbolos estandarizados (símbolo de encendido y
apagado, de marcha/pausa o de temporizador) y un
sencillo (y tremendamente efectivo) lenguaje icónico para
describir los programas.
AJUSTE AL PERFIL DEL USUARIO
La interfaz se ajusta a cualquier tipo de usuario, es decir,
a cualquier persona que pueda tener este electrodoméstico
en su casa. De igual modo, no es necesaria una experiencia previa con
lavavajillas para entender el funcionamiento: la interfaz es autoexplicativa.
3
RECURSOS GRÁFICOS
Los recursos gráficos se limitan al lenguaje icónico
anteriormente reseñado, de líneas claras y altamente
esquemático. El uso de color está restringido al negro,
limitando posibles confusiones.
CONVENCIONES CULTURALES
El uso de convenciones culturales se da en el lenguaje
icónico, que hace referencia a objetos reconocibles de lo
que sería un menaje occidental (aunque me atrevería a
decir que es un lenguaje ya prácticamente universal).
RELACIÓN CON LAS CARACTERÍSTICAS PROPIAS DEL DISPOSITIVO
En este sentido, esta interfaz me parece perfecta. Se dan
de modo sencillo y claro todas las opciones que da de
sí un lavavajillas mediante un lenguaje que tiene referencia
directa con su uso: platos, copas, etc.
Sencillez extrema: botón con
piloto para media carga, pantalla
que indica el temporizador
o el tiempo restante para el
acabado del programa, botón
del temporizador, botón de
los programas (con ndicador
luminoso e iconos señalando
carga mixta, cacerolas, platos,
cristalería o aclarado) y botón de
marcha/pausa. Por otro lado, el
botón de encendido/apagado
y las señales luminosas para
indicar la presencia de agua o
que se requiere sal.
4
LAVADORABRU EL 1008 E
Seguimos en el segmento del electrodoméstico casero para centrarnos en un ejemplo de interfaz menos transparente: el de esta lavadoras, lastrada por un lenguaje icónico y una señali-zación poco intuitivos.
ARQUITECTURA DE LA INFORMACIÓN
El esquema continúa siendo simple y se se agrupa por
tareas: programa, centrifugado y un tercer bloque que
con el encendido y otras opciones.
INTERFAZ Y USABILIDAD
La interfaz varía en el sentido de que, además de botones,
la manipulación se efectúa mediante ruletas. Las opciones
son por tanto mútuamente excluyentes. Una serie de
botones ofrecen más opciones, que van acompañadas
de señales luminosas para saber cuál es el estado del
dispositivo. Hasta aquí, la usabilidad parece correcta.
Sin embargo, la señalización, que es exclusivamente
numérica e icónica, es extremadamente deficiente. Aunque
los progamas se agrupan por tejidos, los símbolos de los
tejidos son confusos (un árbol para algodón, una probeta
para sintético, etc.) Las temperaturas quedan claras por ir
acompañadas de su símbolo (40ª) y el programa quick 30
sabemos que se refiere al tiempo porque va acompañada
del dibujo de un reloj; sin embargo, en el programa ECO
40 no sabemos si 40 se refiere a temperatura, minutos o
a otra cosa. La numeración de la ruleta del centrifugado
es también confusa, para quien ignore que se refiere a
revoluciones por minuto del tambor. Tanto en la ruleta de
programas como en las opciones extra hay una serie de
iconos sencillamente inextricables.
5
RECURSOS GRÁFICOS
Los recursos gráfico, en cuanto al color y el tipo de
dibujo, son correctos, si bien como hemos indicado no
contribuyen en absoluto a la comprensión del manejo
del aparato.
CONVENCIONES CULTURALES Y AJUSTE AL PERFIL DEL USUARIO
Posiblemente esta iconografía corresponde a un
universo especializado del lavado, universo al que no
pertenecemos la gran mayoría de usuarios de lavadoras
domésticas. Es imposible hacer funcionar esta máquina
(más allá de un programa invariable) sin ayuda de un
manual.
RELACIÓN CON LAS CARACTERÍSTICAS PROPIAS DEL DISPOSITIVO
La interfaz se ajusta, aunque deficientemente, a las
características y funciones de una lavadora.
Interfaz bien estructurada por tareas. El último bloque es, sin embargo,
confuso. Los iconos deberían acompañas a los botones y no a
las señales luminosas. La señalización en general es confusa y la
iconografía es ilegible sin la ayuda de un manual.
6
SKYSCANNERAPLICACIÓN PARA iPAD
Esta aplicación para la búsqueda de vuelos es un excelente ejemplo de claridad, sencillez de uso y adaptación a las posibilidades táctiles que ofrece el iPad.
ARQUITECTURA DE LA INFORMACIÓN
El contenido se dispone en torno a tareas: podemos
explorar el mundo en busca de destinos o realizar una
búsqueda más o menos concreta. A partir de aquí, la
estructura conduce hacia lo concreto: país, ciudad,
horarios y precios.
INTERFAZ Y USABILIDAD
La interfaz digital del iPad permite que la interacción
sea predominantemente directa. Sin embargo, existen
una serie formularios y campos de entrada, auxiliados
siempre por menús desplegables. La navegación es
intuitiva y en todo momento es posible saber en qué
punto del proceso nos encontramos o retroceder a un
estadio anterior. El feedback es continuo de un modo
sutil y no invasivo.
La simbología es sencilla y recurre a iconos
estandarizados (búsqueda, configuración, etc.).
RECURSOS GRÁFICOS
La consistencia se ve garantizada por la imagen de marca, por el uso de
una gama cromática determinada y un estilo gráfico coherente.
Hay otros elementos gráficos que proporcionan una valiosa ayuda en la
usabilidad del producto: el mapa del mundo por el que se puede navegar
en busca de destino o los gráficos de barras, por los que se puede
7
navegar, que añaden información visual a lo que de otro
modo serie una lista de precios.
CONVENCIONES CULTURALES, AJUSTE AL PERFIL DEL USUARIO Y RELACIÓN CON LAS CARACTERÍSTICAS PROPIAS DEL DISPOSITIVO
La aplicación está dirigida a un público acostumbrado a la búsqueda por
internet y al uso de este tipo de dispositivos, por lo que se aprovecha de
las convenciones al uso.
Pese a esto, se prioriza en todo momento la sencillez y la intuición en el
manejo.
Es de destacar el grado de aprovechamiento de las posibilidades táctiles
del dispositivo: se prima el contacto directo (casi todo se toca, se
arrastra, etc.) sobre la interacción contextual, obteniendo como resultado
una interfaz muy transparente.
Nos encontramos ante una interfaz usable, coherente, sencilla y de un
gran atractivo visual. Las opciones son siempre claras y el modo de
manejarse entre ellas claro. El usuario, además, puede tocar, explorar,
deslizar, etc.
8
ADOBE PHOTOSHOPHERRAMIENTA DE RETOQUE FOTOGRÁFICO
Seguimos nuestra excursión por las interfaces con la del pro-grama Photoshop, todo un ejemplo de no transparencia. Quie-ro destacar con esta elección que la falta de transparencia no obedece únicamente a un deficiente diseño, sino que es una característica directamente relacionada con la complejidad del dispositivo.
ARQUITECTURA DE LA INFORMACIÓN
Las opciones se organizan en torno a tareas, temas, estados, etc...
INTERFAZ Y USABILIDAD
Para ello contamos con un vasto abanido de métodos de interacción:
menús desplegables (y en cascada), barras de herramientas, ventanas
flotantes tanto de estado como de acciones, ventanas contextuales, etc...
También contamos con campos de introducción alfanuméricos (mediante
teclado) y con interacciónes directas, selecciones, etc. (mediante ratón o
tableta).
Coexiste el etiquetado verbal con el icónico, e igualmente las
modificaciones pueden hacerse tanto de modo escrito como con el
desplazamiento de flechas, puntos de gráficas, etc... La variedad y
complejidad es extraordinaria.
Al usuario que se enfrente al programa por primera vez le espera una
curva de aprendizaje abrupta y prolongada: las opciones son muchas, es
difícil orientarse para quien desconozca la iconografía y la terminología, y
diferentes opciones pueden llevarnos a interfaces radicalmente distintas.
RECURSOS GRÁFICOS
Además de una amplísima iconografía, existen infinidad de recursos
gráficos para manejar las distintas herramientas: niveles, curvas,
máscaras.
9
CONVENCIONES CULTURALES, AJUSTE AL PERFIL DEL USUARIO Y RELACIÓN CON LAS CARACTERÍSTICAS PROPIAS DEL DISPOSITIVO
En primer lugar, querría destacar que determinada iconografía y
terminología provienen del laboratorio fotográfico analógico –cuestión
que analizaré en las conclusiones–.
Por otra parte, el perfil de usuario es difuso, ya que puede tratarse desde
un aficionado a la fotografía, un retocador profesional, un diseñador
gráfico, etc. Estos softwares tan completos optan por ofracer todo
tipo de herramientas para perfiles muy diversos, por lo que pierden
inevitablemente en usabilidad.
10
CONCLUSIONES
Cuando comencé esta práctica esperaba una mayor diferenciación entre los dispositivos analógicos y los digitales. Sin embargo, no es tanta la diferencia. Como resultado de esto y del estudio de los
diferentes casos, puedo concluir que de un modo muy básico una buena interfaz es aquella que:
• Informa de manera satisfactoria de qué está ocurriendo.
• Deja claro qué opciones hay en cada momento.
• Favorece el feedback hacia el usuario.
Cuanto más comprensible sea la información dada, más intuitivo sea el entendimiento del manejo y más sencillo sea éste, más transparente será una interfaz. De modo muy resumido, cuanto menos esfuerzo requiera por parte del usuario (“Don’t make me think”) mayor será la sensación de transparencia.
Elegí Photoshop porque su transparencia es muy opaca y la usabilidad es relativa. Quería con esto destacar que la transparencia es, sospecho que como regla, directamente proporcional a la complejidad y exhaustividad del dispositivo o software (también en analógico podríamos comparar una lavadora con una cabina de un avión). Esto no responde necesariamente a un mal diseño de la arquitectura y/o de la interfaz, aunque sí creo que hay un margen de mejora para los grandes softwares que han ido evolucionando durante los últimos veinte años.
Por otro lado, la carga histórica resta legibilidad también en determinados casos en los que el software emulaba en sus orígenes a un proceso analógico. El nuevo usuario de Photoshop, por poner un ejemplo, ¿conoce los icono y significados de subexponer o sobrexponer o entendería mejor oscurecer o aclarar?
BIBLIOGRAFÍA- “El ideológico retorno de las interfaces transparentes”, Scolari, Carlos A., Noviembre 2009. http://hipermediaciones.com/2009/11/23/el-ideologico-retorno-de-las-interfaces-transparentes/
- “Diseño de interfaces multimedia”, Monjo Palau, Tona, FUOC, Febrero 2011.
- “Arquitectura de la informació per al World Wide Web”, Morville, Peter y roSenfeld, Louis, UOC, Febrero 2010.
- “Iconografía inútil en las instrucciones de lavado de ropa”, Márquez correa, Joaquín, Mayo 2008. http://www.jmarquez.com/2008/05/23/iconografia-inutil-instrucciones-de-lavado-de-ropa/
- “10 Usability Lessons from Steve Krug’s Don’t Make Me Think”, HorrockS, Redd, Julio 2009. http://www.uxbooth.com/blog/10-usability-lessons-from-steve-krug%E2%80%99s-dont-make-me-think/ 1
00
% H
elv
éti
ca