diseodigital_javierroyo

Upload: esteban-guerrero

Post on 05-Apr-2018

246 views

Category:

Documents


0 download

TRANSCRIPT

  • 8/2/2019 DiseoDigital_JavierRoyo

    1/26

    Captulo 5 del libro DDDiiissseeeooodddiiigggiiitttaaalllde Javier RoyoDiseo de usabilidad en la interfaz grfica de usuario

    Recapitulemos: el espacio donde el diseo formaliza el lenguaje para facilitar el ues la interfaz.

    Nuestra materia de trabajo, como hemos visto en el captulo anterior, es el lengu(seales, textos, hipertextos, imgenes, pictogramas, esquemas, etc.). A l le damforma para hacer que los artefactos (objetos, webs, mens de mviles o televisiodigitales, etc.) se puedusar, sean claros, orienten al usuario y comuniquen una identidad y una serie posibilidades de accin.

    La nter faz es, por definicin, el rea de comunicacin entre el hombre y la mquiLa interfaz se genera entre el ser humano y un artefacto virtual (caso de las herramiendel ciberespacio) o entre el hombre y un artefacto real, como cualquier objetomecanismo que nos encontramos en el espacio tridimensional que nos rodea.

    Durante ms de quinientos aos (fecha de la aparicin de la imprenta) diseadores (impresores y tipgrafos) nos hemos encargado de generar interfaces legibfcilmente manejables y, sobre todo, con una dimensin grfica o tridimensional qfacilitara la comunicacin entre el usuario y el mundo no visibles.

    El diseo industrial aplicado a la accin de abrir una puerta es un buen ejemplo

    diseo de interfaces. Para disear dicha accin tendremos en cuenta las dimensiones pomo o barra de apertura de la puerta, su ergonoma, su adaptabilidad a diferentes altude persona, su comunicabilidad de uso, su tacto, su color, su brillo, su capacidad para lo ms intuitiva posible, etc.

    Si nos referimos al diseo grfico aplicado a la sealizacin de un edificestudiaremos los flujos humanos a travs del espacio, la ubicacin de los directorios mimportantes, la colocacin de las diferentes seales de direccin, las seales informativlas seales de emergencia, el diseo grade todas ellas, su contraste, color, legibilidadtipografa, la identidad comn espacial, la luminosidad.

    En diseo grfico (y editorial) facilitaremos la lectura de los peridicos, librodems publicaciones organizando la informacin para que los diferentes lectores accedrpidamente a los contenidos que buscan, estableceremos niveles diferentes navegacin y de lectura aplicando tipografas y tamaos a los contenidos etc.

    En todos los casos generaremos interfaces para el usuario. De hecho, se podra de

  • 8/2/2019 DiseoDigital_JavierRoyo

    2/26

    que los diseadores digitales somos herederos del diseo editorial en tanto ste ha sidoencargado de organizar y presentar la informacin para la tecnologa impresa, siendo diseadores de interfaz los encargados de formalizar y presentar la informacin entecnologa digital.

    En este camino recorrido y con esta experiencia acumulada en los campos diseo, podemos afirmar que el diseo digital y el diseo de la interfaz grfica de usua(IGU en castellano, GUI [Graphical User Interface] en ingls) es una disciplina en s mismhija directa del diseo industrial (en lo que respecta a los saberes de ergonoma en ecampo), del diseo de sealizacin espacial (en las investigaciones de sistemas navegacin y pictogramadel diseo editorial (al ser el antecedente directo de la organizacin de la informacindel diseo de la informacin (diseo de diagramas e imgenes con un marcado carcinformacional y organizador).

    El diseo ha trabajado y trabaja siempre en la frontera que define la interfaz, ensuperficie que separa el artefacto del usuario. La labor principal de un diseo responsaes que los artefactos sean usables1 siendo el usuario siempre el centro de preocupaciones del diseo. Un diseo que no es funcional y no facilita la utilizacin objeto no es, ni ha sido nunca, un buen diseo. As, la usabilidad, o capacidad y facilidde uso de un artefacto, una aplicacin, un formulario o una web es una caracterstimplcita del mbito del diseo. Aunque es cierto que ha sido reformulada (en lo querefiere a los medios digitales) por otras disciplinas como la psicologa o el periodismo, sido siempre una tarea inherente a la labor de disear.

    Con esto no estoy dejando de lado todas las investigaciones y avances que desotros campos se estn llevando a cabo. Aunque conviene resaltar el hecho de que deslas ideas radicalmente funcionales de la Escuela de Ulm, el diseo se ha venido dedicana la usabilidad de artefactos, de las interfaces, evolucionando hasta una concepcin deusabilidad que parte de una mezcla equilibrada de funcionalidad y esttica.

    En diseo digital la usabilidad es una parte muy importante de nuestro trabajodiseador digital es un visualizador de sistemas de informacin invisibles. Pero es esencno caer en el fundamentalismo, y no dejar de lado el componente visual y esttico de interfaces que diseamos (una tendencia clara de algunos de los especialistas

    usabilidad en la actualidad).1

    A pesar de que el trmino usable no es del todo correcto en castellano y no est todava reconocido por la RAE (Real Academia Espaola), lo utilizaremos aqu

    referirnos a la usabilidad de los artefactos por ser un vocablo que resume perfectamente el sentido de la funcionalidad unido a la utilizacin de las herramientas, provenie

    usability ingls.

  • 8/2/2019 DiseoDigital_JavierRoyo

    3/26

    Una interfaz usable sin un criterio de diseo visual coherente con una identidaduna esttica agradable al usuario, jams ser un buen diseo de interfaz grfica. As coun diseo con un alto componente esttico con fallos evidentes de uso ser un fracasen el buen uso

    los ingredientes necesarios (usabilidad y esttica) estar el xito de un proyecto de diseAl igual que en la cocina, hay que saber establecer para cada plato su punto de sus sabores, sus colores, si lo serviremos fro o caliente, si se ha de comer rpido o sun plato para degustar. Hay que mezclar y cocinar los ingredientes con buen tino y grapara hacer un men (o una web) en unas condiciones ms que digeribles.

    Las discusiones acerca de la importancia de la funcin (usabilidad) o la importande la forma (esttica) tienen lugar en disciplinas en perodo de crecimiento conceptualciberespacio y los artefactos que lo generan (ordenadores, mviles, cajeros automticneveras que se conectan en red, televisin digital) estn en plena fase de transformac

    continua (una especie de adolescencia en el desarrollo tecnolgico). El diseo digtambin est en plena evolucin. Por este motivo existen grandes discusiones acerca deque est bien o mal hecho, de lo que funciona o funcionar, de si es mejor o no introdugrficos que ralenticen la visualizacin de la web, pero que la hagan menos ruda, eEn definitiva, discusiones que enfrentan a partidarios de la usabilidad dejando el disevisual de lado contra diseadores fervientemente enardecidos contra la misma.

    Pues ni tanto ni tan calvo: en el punto medio est la solucin. No hay que renegar los estudios de usabilidad que se vienen haciendo por parte de los llamados arquitectos la informacin, sino integrarlos en nuestra labor de diseo y en el da a da de lo q

    siempre ha sido el anlisis del funcionamiento (funcin) de los artefactos comunicativosEs decir, integrar conocimientos en nuestra disciplina, en lugar de enfrentarnoellos.En la evolucin del diseo digital el perfil del diseador digital sigue siendo difuso, tambpor no ser todava una disciplina consolidada. Cuando un medio est evolucionando,diseo tiende primero a aprender de los materiales y herramientas que ste le ofrecslo en un estadio posterior se plantea cuestiones conceptuales.

    As, el rol del diseador digital ha estado muy ligado al del informtico, generanhbridos de diseadores digitales con un perfil ms tcnico que conceptual. Este lado m

    tcnico del diseo digital ha estado muy promocionado por academias y publicaciones qhan relega

    2El problema de la interactividad en un mbito tan restringido como Internet (diferentes acotados anchos de banda, procesadores, plataformas, pantallas, teclados

    puede ser dejado en manos de fundamentalistas del "funcionalismo" ni de lricos del "onirismo" proyectual. Soler, Marcelo, Enredados en los hilos de la red,

    .

  • 8/2/2019 DiseoDigital_JavierRoyo

    4/26

    el diseo digital al control de programas especficos de generacin de webs y no tantouna teora del diseo digital. Diseo de pginas web con flash o Disee su pgina wcon dreamweaver han sido y son hoy en da reclamos de academias que forman tcnicen determinados programas de diseo digital. Aun as, hay muchos profesionales

    diseo digital que han sabido conjugar ese perfil tcnico con una formacin tericaconceptual propia.El perfil de diseador digital que proponemos en este libro no es un diseador c

    unos conocimientos fijos y monodisciplinares. Nosotros proponemos un diseador qpueda ubicarse dentro de una superficie triangular que va desde el rol de programapuro y desarrollador de softwareal de diseador visual, pasando por el de diseador usabilidad. De esta forma, abrimos esta disciplina a la posibilidad de ser un poco de tres cosas y dejar que cada uno se ubique en el punto donde se encuentre ms cmodo

    El diseador digital trabajar la mayor parte del tiempo en equipo (exceptuan

    algunos pequeos proyectos), junto a creadores de contenido, programadores y otprofesionales que harn diferentes aportaciones al proyecto de una web.Como integrante de un equipo heterogneo, el diseador digital debe conocer e

    otras disciplinas, las interioridades del diseo de la usabilidad y el diseo visual eninterfaz grfica de usuario.

    Pero adems, el diseador debera intentar mantener una mirada inocenteprimeriza hacia los artefactos tecnolgicos. La visin del usuario que se acerca por vprimera al ordenador nos puede ayudar mucho a reconocer problemas de uso.

    Fundamentos del diseo de usabilidad

    Tengo un amigo que no entiende muy bien el funcionamiento de los mviles. l cree qes un problema suyo con estos aparatos, pero realmente el problema est en la interfazlos telfonos. Las acciones que tenemos que realizar slo para encenderlos ya supontodo un aprendizaje complicado que incluye la memorizacin de una clave personal queprotege de posibles robos. Mi amigo ha olvidado varias veces la clave (l no tiene buememoria para los cdigos) y en una de estas ocasiones no la tena apuntada en papelito. El resultado fue catastrfico. Tuvo que dar de baja esa lnea y dar de alta o

    diferente, con otro nmero distinto.Pero l no es el nico al que se le ha olvidado una clave. Hay muchas personas qno tienen una buena memoria para este tipo de informaciones que, al fin y al cabo, sdatos inconexos que debemos memorizar para andar por la vida. Otros ejemplos sonclave de nuestro correo electrnico, de nuestra tarjeta de crdito o de la alarma de

  • 8/2/2019 DiseoDigital_JavierRoyo

    5/26

    oficina: estamos rodeados! El hecho de que no podamos recuperar nuestra clave del men el caso de olvidarla sin recurrir al papelito es un caso de mal diseo de uso deinterfaz del mvil.

    El uso de los artefactos que nos rodean (que se van multiplicando con el paso

    tiempo y la evolucin tecnolgica) dependen del diseo que apliquemos a las interfaceslos mismos, a los usuarios que los practiquen y al contexto en el que se encuentrenusuario y el artefacto.En este sentido, la Organizacin Internacional para la Estandarizacin (ISO) propone ddefiniciones de usabilidad:3

    La usabilidad se refiere a la capacidad de un software de ser comprendiaprendido, usado y ser atractivo para el usuario, en condiciones especficas uso.4

    Usabilidad es la efectividad, eficiencia y satisfaccin con la que un produpermite alcanzar objetivos especficos a usuarios especficos en un contexto uso especfico.5

    La suma de estas dos definiciones recoge la relacin de ptima comunicacin enel usuarioy el software(artefacto ciberespacial) en un contextodeterminado. La usabiliddepende de estos tres factores:

    El usuario, que reconocer, leer y manejar el artefacto en funcin de

    conocimientos y de la capacidad de uso del artefacto. El artefacto, que ser ledo y manejado por el usuario segn el diseo interfaz que el diseador le proporcione (desde el punto de vista funcionavisual). El contexto, que influir y en algunos casos determinar el uso del artefacmodificando su significado. Por ejemplo, un volante en el interior de un cocheuna interfaz (fsica) que se halla en un contexto (coche) que nos comunicdetermina que servir para conducir el coche y poder desplazarnos fsicamenteun lugar a otro.

    mismo volante en una mquina de videojuegos o como interfaz de la Playstat3

    Used Centred Design Standards, . En castellano:Manchn,Eduardo,Qu es usabilidad, http://www.

    info/que_es_ usabilidad. htm4

    ISO/IEC 9126,Usability: the capability of the software product to be understood, learned, used and attractive to the user, when used under specified conditions, 5

    ISO/IEC 9241,Usability: the extent to which a product can be used by specified users to achieve specified goals with effectiveness, efficiency and satisfaction in a spe

    context of use.,

  • 8/2/2019 DiseoDigital_JavierRoyo

    6/26

    (contexto) significa otra cosa: conduciremos en un sistema simulado para obtesensacin de velocidad o para divertirnos un rato. El contexto define en estos dcasos el uso de un artefacto (el coche) mediante una interfaz similar en amcasos (volante).

    Nosotros aadiremos otro actor ms entre el usuario y el artefacto: el diseadigital, al que hemos definido en sus tareas anteriormente (desde el diseador usabilidad al diseador visual). De este modo se establecen una serie de relaciones enel usuario, el artefacto y el diseador en un contexto determinado que harn posiblediseo de la interfaz grfica de usuario.

    El usuario, mediante sus acciones, va a demandar unas necesidades concretas uso a la tecnologa (artefacto). La tecnologa generar un espacio para la creacin herramientas, esto es, se crear un ciberespacio para posibilitar el trabajo del diseador

    diseador proyectar uinterfaz del sistema a fin de proporcionar al usuario nuevas posibilidades de accin y uexperiencia de usuario exitosa con respecto a los objetivos que se planteaba el usuario.

    Las posibilidades de accin y de uso que el diseo de la interfaz debera darusuario las resume Donaid Norman6 en cuatro puntos fundamentales para el conjuntodiseo de interfaces (ya sean grficos, industriales o espaciales):

    Facilitar la determinacin de qu actos son posibles en cada momento (utililimitaciones). Es decir, no disear para todas las acciones incluidas en el sistem

    sino limitar las acciones posibles a las que el usuario vaya a utilizar, de tal forque las posibilidades que queden sean las trascendentes para el usuario. Hacer que las cosas sean visibles, comprendiendo el modelo conceptual sistema, los diversos actos posibles y los resultados de esos actos. Facilitacomprensin del sistema al usuario y fomentar la sensacin de control mediala visualizacin, por medio de metforas, del sistema y de sus posibilidades. Hacer que resulte fcil evaluar el estado actual del sistema, diseanrespuestas del sistema al usuario cada vez que ste realiza una accin y seainformativas en los espacios de espera o de cierta dificultad de comprensin d

    situacin. Seguir las topografas naturales entre las intenciones y los actos necesarientre los actos y el efecto consiguiente, y entre la informacin que es visible y

    6Norman, Donaid, A. La psicologa de los objetos cotidianos.

  • 8/2/2019 DiseoDigital_JavierRoyo

    7/26

    estado del sistema. Conseguir que la interfaz sea comprendida de forma natupara conseguir que la accin del usuario se lleve a cabo de forma satisfactoria.

    Estas cuatro leyes del diseo de usabilidad sern las condiciones sobre las q

    fundamentaremos el diseo de la funcionalidad de cualquier interfaz grfica de usuapara los medios digitales (ciberespacio).Por ahora, vamos a analizar los tres actores que van a configurar la experiencia usuario: el usuario mismo, la tecnologa y el diseador digital.

    El usuario, ese gran desconocido

    El usuario es el centro de nuestras preocupaciones, un usuario que se conectadberespacio para realizar acciones como leer el peridico, realizar una transferen

    bancaria, comprar un disco, chatear, practicar un juego en red, participar en un foro discusin especializado, enviar o recibir correos electrnicos o pasear por un museo virtuTodas estas acciones que hemos enumerado se pueden dividir en dos grup

    diferentes: las acciones cotidianasy las acciones ociosas. Esta diferenciacin (que setambin en las tareas que realizamos en el espacio) va a determinar cmo disearemosinterfaz de cada una de ellas.

    En el mundo real, cuando realizamos una accin cotidiana (como efectuar utransferencia bancaria o consultar nuestro correo postal) lo que deseamos es invertimenor tiempo posible.7 nicamente nos interesa que la accin concreta que deseam

    realizar se haga de la forma ms sencilla y rpida posible, cumplir nuestro objetconcreto y poder emplear ms tarde nuestro tiempo en tareas relacionadas con el ocio.Sin embargo, si jugamos al ajedrez o paseamos por un museo, dispondremos

    todo el tiempo del mundo: eso es lo que anhelamos, tener ms tiempo para nuestro ociTambin existen tareas que pueden ser cotidianas u ociosas, dependiendo

    nuestro objetivo: por ejemplo, si vamos a comprar un libro concreto sin ms, deseamrealizar esa accin lo antes posible, la convertimos en una tarea cotidiana. Pero si lo qdeseamos es ir a comprar un libro y queremos pasearnos por las diferentes seccionconsultar las novedades, ver las ofertas, etc., entonces actuaremos empleando m

    tiempo, de forma ms ociosa.En el ciberespacio, en Internet, cuando diseamos una web ocurre exactamente

    7En el mundo cotidiano aspiramos a hacer rpidamente las cosas importantes de la vida, y no pasarnos el tiempo pensando mucho para tratar de abrir una lata de com

    marcar un nmero de telfono, Norman, Donaid, op. dt., pg. 157.

  • 8/2/2019 DiseoDigital_JavierRoyo

    8/26

    mismo: el usuario querr tener una experiencia ms cotidiana o ms ociosa en funcinla tarea que realice y de su objetivo. Habr sistemas que deberemos disear conformato de tarea o accin cotidiana, otras con el formato ocioso y, por ltimo, hbridos qpermitan realizar una u otra accin. En todo caso, analizaremos los posibles objetivos

    usuario para disponer de una estructura secuencial de acciones ms rpida y objetivams horizontal y vaga.A grandes rasgos, para las tareas cotidianas el usuario necesitar una estruct

    somera o estrecha para conseguir rpidamente su objetivo (sin utilizar demasiadrecursos mentales).8 Una estructura somera dispone de muchas posibilidades de accipero todas ellas son muy sencillas: un listado de enlaces a sitios web es un ejemplo de uestructura somera.

    Una estructura estrecha y profunda9 tiene una o dos posibilidades que vprofundizando (o pasando) de una en una accin sin ms posibilidades; casi se tratara

    una estructura secuencial con alguna opcin intermedia. Encontramos estructuestrechas y profundas en la pasarela de compra (accin de pago con tarjeta de crdito)una tienda en Internet, donde se nos va pidiendo, en una estructura secuencial de varpantallas, que vayamos insertando los datos de la tarjeta hasta efectuar la compra.

    Sin embargo, para las tareas ociosas empleamos estructuras anchas y profundacomo las que encontramos en los juegos del ordenador. Es un sistema de posibilidadesaccin amplio (ancho) con una gran profundidad espacial. Pensemos, por ejemplo, juegos como Tomb Raider, un juego de aventuras cuya protagonista, Lara Croft, se muepor un mundo de tesoros escondidos. 11El usuario podr hacer que Lara Croft salte,

    vueltas en el aire, se agache o dispare (estructura ancha de posibilidades), y podr buslos tesoros en un ciberespacio de aspecto tridimensional y amplio (estructura profunda)Hasta aqu las estructuras necesarias para hacer que el usuario realice las accion

    en funcin de un planteamiento econmico de tiempo y recursos mentales. Pero claro, todos los usuarios tienen las mismas experiencias de uso, la misma cantidad de tiempomanejo de determinadas herramientas en Internet.

    Respecto a la experiencia de los usuarios, algunos autores han realizado taxonomde los mismos en funcin de su experiencia. Felipe Romero12 establece una tipologausuarios en funcin de sus modelos mentales. Un modelo mental es el reconocimie

    8Norman, Donaid, op. cit., pg. 152.

    9Norman, Donaid, op. cit., pg. 153.

    10Norman, Donaid, op. cit., pg. 151

    11http://www. tombraider.com.

    12Romero, Felipe, User experience, modelos mentales y expectativas, cap.11,en Knapp Bjren, Alberto (comp.),La experiencia del usuario.

  • 8/2/2019 DiseoDigital_JavierRoyo

    9/26

    (escenario cognitivo) qun usuario hace de los elementos que aparecen representados en un entorno determina(en nuestro caso, el entorno de la interfaz grfica). Un modelo mental que utiliza cada vque vuelve a bucear en una interfaz determinada y por el cual se rige para orientarse

    navegar.El usuario activa un modelo mental obteniendo diferentes tipos de informacin:

    Informacin perceptiva, de los elementos visuales de la web. En nuestro cadel color, tipografa e identidad del sistema. Visualizamos en un primer momeel aire de web, su color de fondo, su contraste, los titulares y el logotipo, su identidad al y al cabo. Ello ya nos habla del tipo de sitio en el que estamos entrando. Informacin funcional, aplicando una posible tarea a cada uno de los elemen

    que aparecen en la web: hipertextos, iconos, botones, imgenes, textos, banneetc Informacin secuencia!, cuando la web que visitamos y su entorno establecen como una secuencia, el usuario lee y prev eventos en funcin desecuencia. Vemos cse mueve un determinado botn que se modifica cuando pasamos el cursor encima o cmo prevemos el movimiento de una secuencia de informacin textque pde derecha a izquierda de la pantalla.

    El modelo mental desempea varias funciones: ser un mecanismo de comprensdel medio, una gua para la ejecucin de acciones del usuario, una orientacin enatencinsobre las cosas que tienen ms inters para el usuario y una forma de almaceinformacin.

    Basndonos en este modelo mental de cada usuario podemos definir una lngradual que va desde el usuario inexperto(o novato) al usuario experto.

    En esta gradacin que va del usuario inexperto al usuario experto hay muchniveles de aprendizaje. El modelo mental se va afianzando desde un nivel cero de mod

    mental (inexperto) de las aplicaciones hasta un reconocimiento total de las semejanzadiferencias en webs cfunciones parecidas (modelo mental del usuario experto).

    En un primer momento, el usuario inexperto no cuenta con ningn modelo menSu reconocimiento del medio se lleva a cabo por comparacin con otros sistemas

  • 8/2/2019 DiseoDigital_JavierRoyo

    10/26

    funcionalidad o apariencia parecida (metforas) en el mundo real y por medio seguimiento continuo de sistemas textuales o de datos (guas de ayuda).

    El aprendizaje se hace sobre la marcha: el usuario aprende mientras navega. Pdescodificar y procesar la informacin que recibe, el usuario inexperto da prioridad

    anlisis de los elementos conocidos en el mundo exterior, a su conocimiento del munreal, y los aplica para comprender y empezar a elaborar su propio modelo mental.A medida que el usuario va pasando de ser un usuario inexperto a un usua

    experto, va aplicando sus conocimientos del medio (su modelo mental). A veces, el hecde intentar adaptar modelos que no estn del todo consolidados hace que cometa algunerrores que se irn subsanando con el paso del tiempo. El usuario va evolucionando hala fase en que el modelo mental se ha consolidado y ya dispone de la capacidad discernir elementos comunes en pginas dispares.

    ste es el momento en que el usuario experto utiliza su modelo mental como g

    primera en todos los procesos de lectura y aprendizaje de los sitios web: en el procesocomprensin del medio, en la ejecucin de sus acciones, la orientacin en las cosas qtienen ms inters y la informacin almacenada acerca de la fisonoma y las accioposibles de la web o el sistema visitado.

    Aunque aqu se ha supuesto que el usuario debe adaptarse al sistema basndosesu experiencia anterior, la realidad es que la tecnologa informtica todava se halla enproceso evolutivo muy primario, donde las interfaces en s son poco usables y plantemuchsimos problemas de fondo. Aun as, y sin ser nada conformistas con las soluciode dispositivos informticos que existen en la actualidad, intentaremos que el usuario

    sienta lo ms cmodo posible, que el navegante consiga realizar sus acciones cotidianasel ciberespacio de la forma ms rpida posible y con el menor esfuerzo mental. Eso slologra intentando que el usuario tenga que realizar el mnimo aprendizaje para entendesistema, lo que equivale a tener en cuenta, conocer y utilizar de la forma ms ptima modelos mentales.

    Otro aspecto importante es pensar que el usuario medio13 no existe. Todos somosalguna forma imperfectos. Como reconoce Norman, nuestras facultades empiezandeteriorarse relativamente temprano, entre los 20 y los 30 aos. Hacia los 45, los ojosno se ajustan lo suficiente para enfocar toda la gama de distancias, de forma que

    mayora de la gente necesita gafas para leer o bifocales, y esto influye en el uso, ejemplo, de los ordenadores y de la lectura en la pantalla. Pero no slo existen usuar

    13El usuario promedio no existe, nadie es un usuario promedio. En realidad una web ha de disearse para un usuario concreto sacado de la realidad porque los us

    reales tienen unos conocimientos, comportamientos, objetivos y necesidades concretos, y el usuario promedio obtenido de un estudio de mercado es demasiado vago pa

    til, Manchn, Eduardo,Disear para lo ms probable y no para todo lo posible, Alzado.org, .

  • 8/2/2019 DiseoDigital_JavierRoyo

    11/26

    con problemas de visin. Tambin existen usuarios con diferentes niveles de sensibilidauditiva, o personas que, como yo mismo, tienen un elevado grado de daltonismo. llegar a especificar los problemas motrices o cognitivos graves, como deficiencias visuade movimiento, auditivas o psquicas, hay una buena parte de la poblacin que tie

    problemas con alguno de los cinco sentidos. Y es necesario tener esto en cuenta cuanqueremos que, al disear nuestra web, llegue al mayor nmero de personas.El ltimo grupo de usuarios sera aquel que incluira a personas con problem

    graves en su sistema receptor o emisor: invidentes, sordos, discapacitados fsicosmentales, etc., para los cuales el diseo de webs contempla un nivel superior accesibilidad.

    La accesibilidad14 consiste en el acceso a la informacin sin limitacin alguna razn de deficiencia, discapacidad o minusvala. Son muchas las personas que acceden ainformacin de Internet desde contextos muy diferentes de los de una persona

    problemas psicomotores. Usuarios que pueden tener problemas de odo, visin, moviliddificultades de lectura o comprensin, que quiz no pueden utilizar el teclado o el ratque tienen una pantalla pequea, una conexin lenta, etc. La interfaz grfica debera ser accesible a todo aquel que optase por utilizarla, sin ms condicionantes. Los usuarvariarn siempre en sus edades, estilos de manejar la herramienta y en habilidades.

    La accesibilidad no es de inters nicamente para las personas discapacitadas, sque mejora el acceso a la web en general.

    La tendencia del diseo digital es la de integrar la tecnologa para todos los usuaren cualquier nivel de percepcin o situacin perceptiva, pero la tecnologa ava

    lentamente. Aun as, existen sitios en Internet que estn trabajando por una integraciaccesibilidad total de las personas en el ciberespacio.15

    La maraa tecnolgica

    Acerqumonos ahora al anlisis de la relacin entre tecnologay usuario. Cada uno nosotros est rodeado de decenas de artefactos, mquinas con las que convivimosutilizamos cotidianamente por medio de una interfaz. El radiodespertador, el microondlos fuegos de la cocina, el frigorfico, el aparato de msica, la impresora, la tostadora

    CD, el escner, nuestro reloj, el telfono fijo, el cajero automtico, el parqumetro,televisin, el aparato de vdeo, el aparato de DVD, el horno, la lavadora, la plancha,

    14Norman, Donaid, A.,La psicologa de los objetos cotidianos.

    15Algunas de las webs en castellano que estn trabajando en hacer del ciberespario un lugar ms accesible son:,

    ,, ,

  • 8/2/2019 DiseoDigital_JavierRoyo

    12/26

    licuadora, la cmara de fotos, la calculadora, la cmara de vdeo, el telfono mvil oordenador son slo una parte de los artefactos que hemos tenido que aprender a usar medio de interfaces diferentes.

    A esta ingente cantidad de mquinas habitantes del espacio real hay que aadir

    herramientas que encontramos en el ciberespacio, en el interior del ordenador:procesador de textos, el navegador de Internet, la hoja de clculo, el programa de corelectrnico, el buscador del ordenador, los programas especficos de cada profesietctera. Y dentro del navegador de Internet, cada uno de los tipos de webs que se naparecen, con acciones para realizar bien diferenciadas: el peridico, el foro, la bitc(web logen ingls), el buscador, los directorios, el diccionario, etctera.

    Y todo ello para un solo usuario. Un usuario que ha ido aprendiendo estos artefaccon mayor o menor xito.

    Como ya hemos visto en el captulo 2 sobre el paradigma del ciberespacio, ste

    cobrando ms y ms importancia, ya que cada vez lo habitamos ms, lo usamos mspara ello basta con revisar la cantidad innumerable de herramientas que estamgenerando en el mismo.Los ordenadores son los mximos contenedores de ciberespacio, aunque no los nicpinsese en los mviles, la televisin digital, los cajeros en red, etc. Aun as, a partir ahora dejaremos de lado estos otros artefactos generadores de ciberespacio (para cuales tambin es necesario un diseo de la usabilidad) para centrarnos en el diseointerfaces grficas de los ordenadores (de sus herramientas = de sus sitios web), mateque nos ocupa en este libro.

    Como tales, los ordenadores siguen siendo, a da de hoy, aparatos difciles de uen s mismos, feos e incmodos y con una arquitectura fsica de hace ms de treinta aDe hecho, desde la aparicin del ordenador Alto en 1973 hasta hoy, la interfaz fs{hardware)del ordenador sigue siendo un teclado heredero de las mquinas de escriun ratn y una pequea pantalla. El ordenador es fsicamente igual que hace treinta aComo seala Javier Caada,16 [...] cualquier funcin que se pueda imaginar hoy pInternet est limitada por el propio dispositivo: el ordenador personal, un invento de haveinte aos. Una mquina pensada y diseada para trabajar con textos y hojas clculo.

    Estamos viviendo, pues, la adolescencia de los ordenadores.

    17

    Una etapa en la qlos experimentos y el bricolaje del primer momento (de los ingenieros e informti

    16Caada, Javier, Diales y ratones: la madurez de la experiencia de usuario, cap. 4, en Knapp Bjren, Alberto (comp.), La experiencia del usuario

    17Los ordenadores actuales siguen estando mal diseados, al menos desde el punto de vista del usuario. Pero uno de los problemas estriba sencillamente en que la tecn

    sigue siendo muy primitiva como el coche en 1906 y no existe normalizacin, Norman, Donaid, A., La psicologa de los objetos cotidianos

  • 8/2/2019 DiseoDigital_JavierRoyo

    13/26

    abriendo las tripas del ordenador y probando para que la mquina funcione) ya ha pasaPero queda mucho camino por recorrer, y es responsabilidad social de los ingenierinformticos y diseadores el cambio a un nuevo paradigma. Un cambio con el que pase del estado actual de la relacin del usuario con la computadora a un estado

    relacin ms natural. Sistemas diseados para que no tengamos que convertirnos novatos cada vez que tenemos que ampliar un nuevo dispositivo perifrico en nuesordenador o usar una nueva herramienta en el ciberespacio.

    Una interfaz donde la curva de aprendizaje para comenzar a usar el artefacto no stan empinada.

    Donde las conexiones sean evidentes y no haya que estudiarlas: no deberamentretenernos en pensar cmo poner en marcha un equipo.

    Donde el ordenador no se cuelgue a menudo.Donde podamos establecer un relacin esttica con el objeto: los ordenadores

    hoy en da son aparatos feos.Donde nos sintamos cmodos, sin que parezca que estamos castigados frente apantalla, en posturas incmodas y antinaturales.

    Donde podamos transportar el trabajo o la informacin en un bolsillo.Donde podamos interactuar de verdad y solucionar problemas cotidianos.Donde podamos hacernos ms sencilla la vida realizando actividades sin tener q

    estar de forma presencial en un examen o en un banco.En definitiva: otra forma de entender el ciberespacio.

    Las posibilidades de accin del diseador

    Cada vez que nos enfrentamos a nuestro trabajo diario ansiamos que los ordenadosean diferentes. El hecho de estar atados a un hardwareespecfico nos limita en la forde plantear los proyectos. Tenemos que conformarnos con la pantalla plana del ordenade resoluc800 x 600 o con un ratn cuya representacin grfica en la interfaz es el puntero (uflecha que representa la extensin de nuestra mano en el ciberespacio).

    Podemos imaginar modelos de interactividad diferente entre el usuario y la mquicomo interfaces grficas tridimensionales y transitables (en el campo de la realidad virtse trabaja en ello) cuyo manejo no dependa de un dispositivo como el ratn, sino que senuestras propias manos o la voz las que manejen y den las rdenes. Pero dependemoslos ingenieros informticos, de la evolucin tecnolgica y de los costes de la tecnologa.

  • 8/2/2019 DiseoDigital_JavierRoyo

    14/26

    Podemos pensar una y otra vez la interfaz y proyectar mejoras, pero dependemostiempos de ejecucin dictados por oportunidades del mercado y por presupueslimitados. A su vez, este mercado intenta forzar diferencias en los productos e interfacpara ser distintos de los competidores directos. Al mercado no le basta con realizar

    buen diseo, necesita disponer de una identidad diferente y pronunciada.Todos estos condicionantes hacen que la evolucin del diseo de interfaces se vinfluida por la presin (una vez ms) de la velocidad. Es ella18 la que juega en contranosotros. El poder del mercado ejerce presin acelerando los siguientes procesos:

    Los tiempos de ejecucin y evaluacin de nuevos prototipos y soluciones pmejorar interfaces y posibilitar acciones ms efectivas del usuario sobre sistema determinado. Presupuestos limitados a conseguir una novedad antes que el competidor, q

    vencen tambin en una fecha determinada y obligan a los equipos de diseo amadurary comprobar las interfaces. Es algo comn que, por ejemplo, simultneamentla aparicin de un navegador de Internet ya se est trabajando en el siguiensin ver ces la respuesta de los usuarios, slo por una cuestin de novedad. La evolucin tecnolgica se desarrolla bajo las mismas presiones y parmetque el diseo, con lo cual su capacidad de innovacin y mejora tambin limitada, dejando al diseo hurfano de nuevos espacios para proyectar.

    Existe tambin un problema de intentar forzar diferencias que a veces son carcter superficial, y no de uso real de los artefactos. Las diferencias forzadgeneran una competitividad superficial (no real) de los productos. Por ejemploveces se cree que por ofrecer ms opciones en una interfaz, el usuario estms agradecido y usar nuestro sistema, nuestra web. Nada ms lejos derealidad: al usuario hay que darle las opciones que necesita, no todas posibles.

    ste es el escenario en el que como diseadores digitales vamos a desarro

    nuestros proyectos. Un espacio (el ciberespacio) en constante mutacin y evolucin. Y es el entorno que vamos a tomar como referencia para explicar cul es nuestro comet(en cuanto a diseo de usabilidad y diseo visual). Nuestro objetivo final es el de gene

    18Virilio, Pal,El cibermundo,la poltica de lo peor.

  • 8/2/2019 DiseoDigital_JavierRoyo

    15/26

    espacios de comunicacin (interfaces) usables y visualmente coherentes con una identiddeterminada. Un trabajo que desemboca en hacer que la experiencia del usuario ptima y que ste vuelva de nuevo a visitarnos, a utilizar la web que hemos diseado.

    La experiencia de usuario

    La finalidad de un diseo de interfaz (diseo de usabilidad + diseo visual) es obtener uexperiencia de usuario exitosa. La experiencia de usuario es el conjunto de sensacionvaloraciones y conclusiones que el usuario obtiene de la utilizacin de un artefacto. nuestro caso, del uso de la interfaz de un sitio web. Estas valoraciones no slo sproducto de su experiencia funcional, sino tambin de su experiencia esttica. Eexperiencia es el resultado de los objetivos del usuario, las variables culturales y el disede la interfaz.

    Los objetivos del usuario no sern los mismos si la tarea que ste quiere realizarcotidiana u ociosa, tal y como veamos con anterioridad, y dentro de estos dos tipos acciones influir mucho el modelo mental que haya generado con respecto al tipo de wque est visitando.

    Si el usuario tiene como objetivo participar en un foro de discusin publicando mensaje, buscar inmediatamente la opcin en la pantalla de publicar mensaje, uopcin que ya conoce por el uso de otros foros en Internet. El desarrollo de la accin sms sencillo o ms difcil en funcin de que el texto que seala la opcin de publimensaje est ubicado a la vista del usuario y que la secuencia de acciones para publica

    se corresponda ms o menos con su idea de publicar un mensaje. La experiencia qobtendr de estas acciones ser su experiencia de usuario.Las variables culturales del usuario dependern del conocimiento que ste tenga

    el uso de artefactos similares al sistema que le planteamos. El usuario recupconocimientos de su propia cabeza (conocimiento en la cabeza) y del mun(conocimiento en el mundo)19para interactuar con el sistema.

    El conocimiento que recuperamos de la cabeza (conocimiento en la cabeza) residenuestra memoria y recurrimos a ella para comparar lo conocido con lo que se npresenta. Por ejemplo, para examinar o reconocer la estructura visual de una w

    advirtiendo las regularidades o irregularidades con lo ya aprendido. Norman

    20

    establtres tipos de memoria diferentes, que utilizamos en funcin de la informacin q

    19Norman, Donaid, A.,La psicologa de los objetos cotidianos 20.1bid.,pg.9l.

    20

  • 8/2/2019 DiseoDigital_JavierRoyo

    16/26

    necesitamos recuperar:

    La memoria de cosas arbitrarias: esta memoria es la que recoge conocimientos y datos que no tienen una relacin semntica con otros. Datos

    relacionados entre que no forman parte de un sistema. Por ejemplo, las claves personales enordenador, la combinacin de teclas para forzar la salida de un prograinformtico o ufecha de cumpleaos. Esta memoria depende completamente de un aprendizforzado. Tenemos que aprender de memoria el dato y hacemos uso de l situacionescontextos que nada tienen que ver con el propio dato. Podemos dar de memoel nmero de nuestro carnet de identidad en una comisara o introducirlo en

    formulario en Internet, pero ninguno de estos dos contextos nos dan ningupista acerca de la secuencia de nmeros y letras de nuestro carnet. El uso esta memoria es la que hay que intentar evitar por encima de todo cuandiseamos un sistema web. No hay peor opcin que la de aadir ms cdigos acantidad que ya tenemos en nuestra cabeza. Aunque, obviamente, todava existe ningn mtodo ms eficaz que el uso de claves en Internet pdeterminados procesos de identificacin personal o de seguridad. A menutambin nos vemos en la obligacin de recurrir a nuestra memoria arbitraExisten decenas de artefactos que manejamos en el espacio real (quizs uno

    ellos es el telfono o algunos modelos de telfono) que requieren un alto nivelmemorizacin. El proceso de diseo en este caso ha obviado establecer uvisualizacin de las opciones de usuario, y hace que cientos, miles o millonespersonas pierdan mucho tiempo en comprender algo que (de haberse presentacon una visualizacin en condiciones) no debera resultar tedioso. La memoria de relaciones significativas: la memoria basada en relaciosignificativas es la que utiliza recursos de significado que ya se encuentran enmemoria para integrarlos en otros adquiridos recientemente y de esta forinterpretar con ms facilidad un sistema. sta es la mejor manera de recordar

    cosas, adaptando formas de hacer y conocimientos que ya tenemos a contextosituaciones nuevas. Por ejemplo, entramos en una web que dispone de umsica de fondo y en el extremo infederecho descubrimos un manejador que nos permite controlar el volumSupongamos que ste disponga slo de una lnea vertical y un rectngulo

  • 8/2/2019 DiseoDigital_JavierRoyo

    17/26

    color. Si ya conocemos este tipo de interfaz en el mundo real, y lo hemutilizado alguna vez, tendremos mucho adelantado y sabremos que:

    1) esa representacin en su conjunto significa que puedo modificar el volum

    de la msica que estoy escuchando,2) el rectngulo de color es (significa) la barra que hay que desplazar pmodificar el volumen y

    3) si desplazo el rectngulo de color hacia arriba, el volumen subir y sdesplazo hacia abajo, se reducir.

    Se ha utilizado con xito un grupo de significados aprendidos y lgicos (haarriba = volumen ms alto/ hacia abajo = volumen ms bajo) para usar artefacto en un contexto nuevo y desconocido.

    La memoria mediante explicacin: partiendo de la base de que el ser humanecesita asimilar las cosas por medio de la comprensin, sta ser posiblemeel tipo de memoria ms potente. Si comprendemos un sistema determina(gracias a nuestros modelos mentales), podemos aplicarlos no slo a otro simisino a otros modelos diferentes. Basta con que la memoria vaya intentanacoplar un modelo mental a un sistema, y esto ocurre cuando el contexto en qse halla el usuario es capaz de darle pistas para ser relacionado con otro anterEste tipo de memoria es la base de la consolidacin de los modelos mentalelos que nos referamos con anterioridad. Por ejemplo, vamos comprendiendo

    funcionamiento de un catlogo de libros en Internet, con la opcin de compcuando hemos visitado anteriormente otro diferente, pero en el segunencontramos elementos comunes con el primero. Por ejemplo, el icono del carde la compra (que nos indica la opcin de compra) o el apartado de buscmediante el nombre del autor, el ttulo del ao u otras opciones. Nuestro modmental para facilitar el uso del ciberespacio va creciendo gracias a este tipo memoria.

    Por otro lado, el conocimiento en el mundoes la memoria extemaque utilizam

    para movernos por l. Apuntamos cosas en papeles para no olvidarnos de ellas, leemseales de indicacin o informacin, disponemos de calendarios que nos sitan entiempo, activamos una alarma en el mvil que nos recuerda un evento al que hemos acudir. Todos ellos son ejemplos de la utilizacin de la memoria externa, del conocimieen el mundo que nos ayuda a realizar diferentes tareas. El mayor contenedor de memor

  • 8/2/2019 DiseoDigital_JavierRoyo

    18/26

    externas es el ciberespacio. En l estamos volcando muchsimos recordatorios y entambin diseamos sistemas de ayuda, sistemas de seales e iconos, hipertextos, eComo deca Marshall McLuhan, [...] todos los medios son prolongaciones de algufacultad humana, psquica o fsica. La rueda es una prolongacin del pie. El libro es u

    prolongacin del ojo. [...] La ropa, una prolongacin de la piel.21

    Y la memoria del diduro es una prolongacin de nuestra memoria, podramos concluir.En nuestros proyectos de diseo debemos mantener la posibilidad de que el usua

    pueda utilizar tanto el conocimiento en el mundo como el conocimiento en la cabeza, psiempre de forma que uno de ellos nunca impida utilizar el otro. Siempre dandooportunidad a usuarios ms expertos que utilizan ms la memoria, de no aburrirse tener que utilizar ayudas o recordatorios externos de forma obligatoria. Usando de forcorrecta y equilibrada los dos conocimientos del usuario obtendremos una meexperiencia de usuario.

    Para ello, podemos utilizar mensajes de ayuda opcionales. Cuando un usuario solicayuda es que el sistema no termina de estar bien diseado para l: no hemos sabido dlas suficientes pistas en la propia interfaz para que el usuario interacte con ella deforma ms natural posible.

    De todos modos, y dado que no existe un usuario tipo .que entre en nuessistema, podemos disear sistemas de ayuda que vayan orientados a personas novatasa su vez ese sistema puede permitir una navegacin cmoda a usuarios expertos, es dedar la opcin al usuario de utilizar tanto el conocimiento en la cabeza comoconocimiento en el mundo (ayudas).

    Utilizaremos guas de ayuda en el caso de que las tareas que debe realizar el usuasean o bien complejas o bien requieran una aclaracin. Los principios que hay que teen cuenta al disear guas de ayuda paralelas a nuestro sistema web se pueden resumircuatro:

    Ser claros y concisos en el lenguaje. No escribir sino lo estrictamente necesay pensar que lo que escribimos se lo estamos explicando a un nio de corta ed Mostrar una navegacin sencillay secuencial si la ayuda requiere ms de uparte.

    Dividir la ayuda en tantas partes como sean necesariaspara explicar los pade la forma ms sencilla posible: es importante no explicar ms de un conceen cada parte de la ayuda.

    21McLuhan, Marshall y Flore, Quentin,El medio es el masaje.

  • 8/2/2019 DiseoDigital_JavierRoyo

    19/26

    Acompaar los textos de esquemas o ilustraciones informativassiempre que necesario o ayude en gran medida a aclarar un concepto

    Factores para mejorar la usabilidad

    Los principios que regulan la usabilidad de la web los ha enumerado de forma brillaBruce Tognazzini.22 Son principios generales que muestran pautas de diseo de usabilidpara conseguir mejoras importantes en la interfaz de un sitio web, y que aumentandesarrollan las cuatro leyes enumeradas por Norman anteriormente. La mayora estos principios pueden ser autnomos respecto a la tecnologa que se use, pero algunde ellos tendrn que adaptarse a la evolucin tecnolgica y a las nuevas formas y utecnolgicos. Nosotros nos centraremos en expliestos principios y en aadir algunos otros:

    Fomentar la anticipacin. El sistema debe anticiparse a las necesidades usuario. No hay que esperar, siempre que sea posible. Hay que evitar queusuario pierda tiempo buscando opciones o pasos obvios. Para ello es importaconocer cules son las posibilidades del sitio web y cules las expectativasacciones del usuario. Dar autonoma al usuario. Autonoma no quiere decir autonoma total usuario. El ser humano necesita lmites para poder actuar. Algunas teoras deevolucin del ser humano dicen que existi un antes y un despus enconciencia del hombre cuando consigui discernir entre la horizontalidad y

    verticalidad (entre los lmites verticales y horizontales en el espacio). Aqu oculo mismo: slo podemos actuar si sentimos que nos encontramos en un entorque controlamos un espacio abarcable, no infinito. Necesitamos mecanismos qnos informen acerca del espacio que recorremos. Slo as conseguiremos uautonoma en el ciberespacio. Sensacin de estabilidad. Los ordenadores introducen una nueva complejidel espacio en el que tiene que moverse el usuario no es un espacio real, sun espacio que est asentado sobre diferentes metforas. El usuario necespuntos de referencia. Por ejemplo, para dar sensacin de estabilidad al usuario

    interfaz del Macintosh dispone de la metfora del escritorio que reproduce en ddimensiones el espacio donde los objetos estn emplazados. De esta manerada una sensacin de estabilidad. Es importante saber qu objetos son o no s

    22Tognazzini. Bruce,First Principies, Ask Tog.

  • 8/2/2019 DiseoDigital_JavierRoyo

    20/26

    susceptibles de ser seleccionados y con cules podemos realizar acciones. Al igque es importante conformar un espacio limitado, tambin lo es disear espacio de posibilidades y de accin limitados. Para ello se utilizan objetos qaparecen en la pantalla con sus caractersticas de color normales (las que s

    susceptibles de ser pulsadas para realizar una accin) y otras que aparecen entono ms tenue (que no estn disponibles en ese momento). Evitar los problemas con el color. Hay que ser especialmente cuidadosos con contrastes de color y la eleccin de los colores que aparecern en nuestro sweb. Ms de un 10 % de la poblacin tiene problemas para visualicorrectamente los colores. Este punto es bsico para conseguir una bueaccesibilidad al sistema. Consistencia. La consistencia se consigue cuando facilitamos que conocimientos adquiridos por el usuario en la utilizacin de determinad

    herramientas puedan ser transferidos a la utilizacin en otro programa sin ningproblema. Por ejemplo, si en el men Archivo de una aplicacin se encuentraaccin Guardar... es importante que aparezca de este modo en el resto aplicaciones. Es importante disear en funcin de las expectativas del usuacontando con el aprendizaje previo del mismo. Hacer que el lugar (estructuque ocupa cada uno de los tem del men sea lo ms natural (o familiar) pospara el usuario, que el significado de los iconos que utilizamos o la forma mostrar una secuencia de productos en un catlogo sea la ms natural. definitiva, aprovechar la experiencia del usuario para crear sistemas familiares.

    Elementos por defecto coherentes. Es necesario dar unas opciones defecto adecuadas, de tal forma que sean las ms corrientes. Tambin importante que se puedan sustituir de forma sencilla y clara, describienadems que son opciones comunes y que se pueden restablecer en un momedado.Aumentar la eficiencia del usuario. Uno de los objetivos ms importantes deusabilidad es que el usuario sea lo ms eficiente posible, centrndonos enproductividad de sus tareas, no en las del sitio web. Unificar acciones posibordenarlas en el sentido adecuado y lgico para el usuario o establecer

    nmero de pasos suficiente para que una tarea compleja sea sencilla son algude las cuestiones que se han de tener en cuenta para ganar en efectividDisear interfaces verdaderamente explorables. Sealizar de forma clara posibles acciones que puede desarrollar el usuario en nuestro sitio web para qsu recorrido sea lo ms rpido y cmodo posible. Establecer, siempre que

  • 8/2/2019 DiseoDigital_JavierRoyo

    21/26

    posible, lo que Norman23 denomina topografas naturales, esto es, formas disposicin de elementos coherentes similares a otros sistemas. El ejemplo qpropone este autor es el de la disposicin de los encendedores de la cocina ydisposicin de los mandos que controlan los mandos de la misma. Si exis

    cuatro encendedores, podemos establecer una topografa natural haciendo qlos mandos se correspondan (de la forma ms unvoca posible) con stos:mando derecho inferior se corresponde con el encendedor derecho-inferior;mando izquierdo-inferior se corresponde con el encendedor izquierdo-inferioras sucesivamente con los cuatro encendedores. Manipulacin directa. La manipulacin directa permite a los usuarios sentir control directo sobre los objetos representados en el ordenador. De acuerdo ceste principio, las acciones que realiza el usuario deben ser inmediatamevisibles sobre la pantalla.

    Mirar y apuntar. En el escritorio, los usuarios realizan acciones siempre deslas alternativas que se es ofrecen en la pantalla. Los usuarios interactan conpantalla seleccionando los objetos y realizando acciones con el cursor. escritorio del Macintosh funciona a partir de dos paradigmas fundamentales qse basan en dos suposiciones: el usuario puede ver siempre en la pantalla qulo que est haciendo y puede pulsar slo aquello que ve. Los paradigmas esbasados en la forma general de accin del usuario: nombre-y-verbo. Esto es, un lado, el usuario selecciona un objeto de su inters (el nombre) y entonelige las acciones que van a ser realizadas con el objeto (el verbo). Todas

    acciones que son posibles con el objeto seleccionado estn en los mens; cuando el usuario no est del todo seguro de las posibilidades que tiene, puerecurrir a repasar los mens y ver las posibilidades de accin con las que cuenPor ejemplo, el usuario selecciona un objeto, luego va al men y seleccioimprimir. Por otro lado, el usuario coge un objeto (el nombre) y lo coloca sootro objeto, realizando una accin (esto es, el verbo) que est asociada a amobjetos. Por ejemplo, coger un documento y soltarlo sobre la papelera signifque el usuario tiene la intencin de eliminar (verbo) dicho documento (nombre Feedback y dilogo. Cuando un usuario inicia una accin, indicada por

    signo visual o auditivo (o ambos), ste debe tener conocimiento, aunque sea manera superficial, de lo que est ocurriendo, as como del tiempo que falta paque la accin termine. El ejemplo de esto lo encontramos en los relojes y

    23Tognazzini, Bruce, First Principles, Ask Tog http://www.asktog.com/basics/firstprinciples.html

  • 8/2/2019 DiseoDigital_JavierRoyo

    22/26

    barras indicadoras de tiempo que se van rellenando de otro color en la interfazusuario del ordenador. Proporcionar reversibilidad. Precisamente sta es una de las caractersticas mimportantes del ciberespacio, su capacidad para retroceder en el tiempo de

    acciones, permitir equivocarnos y poder corregir nuestras acciones. El usuatiene que disponer siempre de la capacidad de retroceder. Esto es especialmeimportante en webs con formularios o trabajo con datos, pero es extensiblecualquier accin en la web. La ley de Ftts.24 El tiempo para alcanzar un objetivo con el ratn en la interdepende de la distancia y el tamao del objetivo. Si el objetivo se encuentrmenor distancia y es mayor, el tiempo para alcanzarlo es menor. Existe en la wde la ley de Fitts, un experimento con el que se puede demostrar empricameesto por medio de una pequea aplicacion. La direccin completa de e

    demostracin es: . Reducir los tiempos de espera. Una de las mayores incomodidades para usuarios de los sitios webs en la actualidad son los prolongados tiempos espera que tienen que soportar en algunos casos: por ejemplo, mientras la wcarga determinados datos o al cargar algunas animaciones pesadas kilobytes). La opcin, si no se puede evitar la espera, es proporcionar al usuavas alternativas de accin. Que, mientras est esperando, pueda realizar ottareas y no limitarse slo a esperar (multtarea). Por ejemplo, si un sitio web venta de discos est comprobando una bsqueda y tarda cierto tiempo, dar

    opcin al usuario de ver unos cuantos discos ms que le puedan interesar o ubiografa del autor. Reducir la curva de aprendizaje. Para los usuarios ms novatos es cinevitable que alguno de los caminos para realizar ciertas acciones en nuessitio web no le sean familiares y requieran un tiempo y esfuerzo men(conocimiento en la cabeza). Inclupuede que necesite de ayudas externas (conocimiento en el mundo) queorienten con ms precisin. El sitio web sin necesidad de aprendizaje no exispero podemos acercarnos a l si diseamos una interfaz donde los pasos q

    tiene que seguir el usuario sean claros y escalados. El objetivo es que puedan fcilmente utilizados desde el primer momento. Usar adecuadamente las metforas. Es importante elegir metforas que

    24La ley de Fifs se puede consultar en la web: .

  • 8/2/2019 DiseoDigital_JavierRoyo

    23/26

    forma instantnea ofrezcan al usuario una visualizacin del sistema, incluso dedetalles del mismo. Un buen diseo de metforas puede ayudar a que la curvaaprendizaje sea menor. Adems, las metforas generan modelos mentales qpueden ser aplicables posteriormente a otras metforas. Esto es especialme

    importante si pensamos que podemos utilizar el conocimiento de otras metfoque tiene el usuario para disear nuestra interfaz. La interfaz de usuario del MOS utiliza metforas para comunicar conceptos. Son metforas que se hallanel imaginario de los usuarios que ya han utilizado alguna vez un ordenador y qindican ideas familiares y concretas. Por ejemplo, las carpetas que los usuarutilizan habitualmente para guardar documentos que desempean la misfuncin en la interfaz del Mac OS. De este modo, el usuario tiene la sensacinestar realizando una accin que no le es desconocida, teniendo la opcin organizar su trabajo de una manera que ya controla. El escritorio es la prim

    metfora que aparece como concepto en la interfaz. Es la metfora a partir decual arrancan todas las aplicaciones y la que articula fsica y conceptualmetodas las dems. Todo el resto de metforas se hallan integradas en eprimera, como por ejemplo la metfora del men, las carpetas, los documentetc., que son arquetipos de objetos utilizados en el mundo fsico para trabajar. Proteger el trabajo de los usuarios. En sistemas contributivos (sistemas en cuales el usuario proporciona datos y contribuye al crecimiento informacionalla web), los usuarios pueden correr el riesgo de perder el trabajo que eshaciendo por culpa

    algn error. Hay que plantear los sistemas siempre en funcin de la posibilidadque existan errores. Disear para que se produzcan errores y que ecircunstancia no sea el desencadenante de una prdida fatal del trabajo realizapor el usuario (tiempo y esfuerzo). Que la interfaz sea legible. Disear para que el contraste visual entre los texo elementos interactivos y el fondo sea suficiente para permitir una buelegibilidad (y accin) del usuario. Tambin hay que cuidar de que el tamao detipografa sea el adecuado para que todas las personas (incluso aquellas cproblemas de visin) puedan acceder a la informacin.

    Realizar un seguimiento del usuario. Una buena forma de conocer ms de cecules son los objetivos del usuario y los caminos que recorre para llegar a elles la de recabar informacin (despus de disear la web y publicarla en Intern

    25AA.W., Macintosh Human Interface Guidelines.

  • 8/2/2019 DiseoDigital_JavierRoyo

    24/26

    acerca de los movimientos de los usuarios. Esta informacin ser muy valiosa ahora de replantear nuevos caminos para llegar a determinadas informaciones,aadir o suprimir opciones, etc. El hecho de conocer a la audiencia a la que dirigido el producto es una cuestin que implica diferentes tareas para realizar

    Identificar y entender qu tipo de personas utilizarn la aplicacin, la interfaz.Pensar en escenarios de la vida cotidiana de una persona tipo.Pensar en los diferentes espacios de trabajo, herramientas, viendo de qmanera las personas interactan con el espacio y los programas.Ver cmo son sus espacios de trabajo y cmo trabajan las personas a las quea ir dirigido.En definitiva: adaptar la web al usuario.

    Disear sitios reescalables. Los sitios web son espacios vivos, que crecen ymodifican constantemente. En el momento de plantear el diseo estructural deweb (y de la interfaz grfica de usuario) hay que tener muy presente emovimiento continuo planificar un cambio de escala posible, sin que vaya en perjuicio de la interaprendida ya por nuestro usuario. Animar a la participacin. Una buena forma de hacer un sitio ms usablegenerando posibilidades y sistemas de participacin; y modos de participacin usuario, para que se sienta integrado, escuchado y partcipe del sitio. Incluso

    sitios web aparentemente menos participativos, animar a la participacin es uforma de disear usabilidad. De hecho, el usuario aprende mejor a utilizar herramientas cuando se compromete activamente en las acciones que desarrollan con ellas. Disear sitios irregularmente regulares. Esto parece una contradiccin, perolo es. Proporcionar al usuario determinados guios en los contenidos o endiseo facilitar una experiencia de usuario ms satisfactoria. La experiencia uso no slo se ben cuestiones puramente funcionales. Supongamos que nos encontramos en

    contexto cotidiano (en el que realizamos una accin cotidiana) como, ejemplo, un foro donde queremos publicar una opinin. Este foro tiene uestructura formal y de significado regular, un diseo visual bastante sobrio.foro lo utilizamos frecuentemente para comunicarnos, publicar mensajesdiscutir sobre diferentes temas. Un buen da volvemos a entrar en el foro y

  • 8/2/2019 DiseoDigital_JavierRoyo

    25/26

    pequeo personaje (que aparece por defecto) nos da la bienvenida y nos gauna broma. Esta irregularidad cambia nuestra percepcin del sistema regular ybien no forma parte de los objetivos que nos condujeron a esta web, puemejorar considerablemente nuestra percepcin del sitio. Por supuesto, podram

    dar la opcin de que este personaje no volviera a aparecer, en el caso de que nresultara antiptico (el humor no es algo global ni se puede reducirformulismos: si no, no sera humor). Disear irregularidades controladas puemejorar de manera considerable nuestra percepcin de un sitio web en concreNo hay nada peor y menos usable que aburrirse con el diseo de un sitio web. Hacer visible la nter faz: WYSIWYG (What You See Is What You Get)(Aqueque t ves, es lo que puedes conseguir). Es importante no ocultar caracterstide cualquier aplicacin por usar comandos demasiado abstractos o que no esen un orden ya conocida por el usuario. ste tiene que ser capaz de encont

    aquello que necesita donde lo necesita. Por ejemplo, los mens presentan lisde coman dos o instrucciones que ya tienen una estructura determinada y queusuario ya est acostumbraa utilizar. En este apartado se enmarca tambin la necesidad de mostrar enpantalla las cosas como luego saldrn por la impresora. Este principio esprincipal responsable de que el usuario tenga sensacin de control sobresistema que utiliza. La visibilidad se puede obtener en diferentes niveles. Coconcepto general, todos aquellos elementos con los que el usuario deinteractuar no deben permanecer invisibles: el usuario siempre los tendr

    mano. En otro plano, todos los datos y estructuras invisibles que el usuario deconocer, debemos representarlos de forma que sean legibles de un solo golpe vista, que no interfieran negativamente en el aspecto visual general del sitioque representen de forma clara para el usuario la informacin que queremmostrar. Aqu rescatamos de nuevo la mxima de disear para lo ms probabno para todo lo posible para adaptarla al concepto de visualizacin: visuallo ms probable, no todo lo posible, y tener en cuenta que no todainformacin del sistema es requerida por el usuario. Por otro lado, es importajerarquizar la visualizacin: hay que permitir una visualizacin escalada: most

    en un lugar fcilmente accesible y resaltado las opciones que los usuarios utilizcon ms frecuencia y dejar deliberadamente en un segundo plano aquellas qslo utilizan usuarios concretos, o ms especializados, que buscarn eopciones deliberadamente (incluso perdiendo algo de tiempo). Esta discriminacvisual se ha de hacer siempre teniendo en cuenta probabilidades de uso. De e

  • 8/2/2019 DiseoDigital_JavierRoyo

    26/26

    modo mejoraremos la usabilidad de nuestra web. Por ejemplo, la web Dicionarios.com, que se encuentra en , nmuestra las opciones de bsqueda de diccionarios segn el uso ms frecueque le dan sus usuarios. En primer lugar aparece el diccionario de acepciones

    castellano, luego el de sinnimos y antnimos, tambin en castellano, ms abest el diccionario para traducir el ingls al castellano y viceversa, luego el qtraduce del francs al castellano y, por ltimo, el diccionario cataln-castellano

    Topografas y visualizacin

    Los modelos mentales del usuario (que hemos tratado con anterioridad) se van formanmediante procesos de aprendizaje y error. A su vez, los modelos mentales nos sirven ppredecir acciones. Por ejemplo, cuando visualizamos en un formulario un rectng

    blanco precedido por una palabra (por ejemplo, Nombre:), suponemos que ah debemescribir nuestro nombre. Hemos aprendido de los formularios en papel que esa accincoherente. Es ms, visualizamos la accin en nuestra cabeza antes de realizarla porquela conocemos. Se trata de una topografa bien diseada: la situacin del rectngulo blanco tras el nombre se corresponde con la situacin tradicional de los campos que hque rellenar en los formularios, y ello nos ayuda a comprenderlo. Adems, la secuenlgica de lectura de izquierda a derecha ayuda a la comprensin de la accin.

    La topografa esel arte de describir y representar detalladamente la superficie deterreno, pero aqu nos referiremos a ella como la capacidad de una superf

    (informacional) para comunicar sus posibilidades de accin. En el caso de la topograanterior, se podra decir que estamos ante una topografa natural,26 una topografa cultuaceptada. Los elementos interactivos en una interfaz grfica deben de estar en lugares qresulten evidentes para el usuario; la propia estructura de la web debe ser evidetambin para el usuario y, adems, debe ser visualizada por el mismo.

    Los diseadores hacemos visible la informacin. Tenemos la capacidad de havisible lo invisible.27 Esta definicin de la propia actividad del diseo de interfaces grfise hace ms evidente en un sistema en el que el usuario medio desconoce por completofuncionamiento interno (tanto el hardware como el software}. Por tanto, la informac

    referente a los artefactos tecnolgicos fsicos {hardware} resulta irrelevante parausuario. De hecho existe una correspondencia entre la evolucin tecnolgica y el descen

    26Norman, Donaid,A.,La psicologa de los objetos cotidianos.

    27Para profundizar en el campo de la visualizacin y del diseador como visualizador de fenmenos no visibles, consltese el excelente y clarificador libro La esquemt

    Joan Costa.