SciELO - Scientific Electronic Library Online

 
vol.30 suppl.1Effects of power distance diversity within workgroups on work role performance and organizational citizenship behaviorProposal of a microgrid in the community of Santa Elena, Pérez Zeledón, based on Whites Lane Smart Micro Grid author indexsubject indexarticles search
Home Pagealphabetic serial listing  

Services on Demand

Journal

Article

Indicators

Related links

  • Have no similar articlesSimilars in SciELO

Share


Revista Tecnología en Marcha

On-line version ISSN 0379-3982Print version ISSN 0379-3982

Tecnología en Marcha vol.30  suppl.1 Cartago Oct./Dec. 2017

http://dx.doi.org/10.18845/tm.v30i5.3223 

Artículo

Interfaz y experiencia de usuario: parámetros importantes para un diseño efectivo

User experience and user interface: important parameters for an effective design

Keren Ramírez-Acosta1 

1Estudiante de Ingeniería en Diseño Industrial; Escuela de Ingeniería en Diseño Industrial, Tecnológico de Costa Rica, Cartago, Costa Rica; correo electrónico: kerenramirez@gmail.com

Resumen

Es común confundir los conceptos de interfaz de usuario y experiencia de usuario, cuando no se conoce bien acerca del tema. Y a pesar de que ambos conceptos deben estar conectados, muchos diseñadores tienden a concentrarse en una interfaz estéticamente agradable, lo que podría restarle importancia a la experiencia.

El objetivo de este artículo es explicar los parámetros que se deben tomar en cuenta antes y durante el proceso de diseño y desarrollo de una interfaz para una herramienta de software; además, explorar el indispensable papel de la experiencia y usabilidad para lograr una herramienta satisfactoria para el usuario.

Palabras clave: UX; UI; interfaz; usabilidad; diseño; interacción

Abstract

It is common to confuse the concepts of user interface and user experience when the topic is not well known. Although both concepts must be equally considered, the designers tend to focus on an aesthetically pleasant interface, which might downplay the experience.

The aim of this article is to explain the parameters to be taken into account before and during the design and development of an interface for a software tool. It will also explore the role of the user experience for success in obtaining a usable tool.

Keywords: UX; UI; interface; usability; design; interaction

Introducción

Es común que se confundan los conceptos de interfaz de usuario y experiencia de usuario (UI y UX, respectivamente, por sus siglas en inglés). Mientras que UI (user interface) se refiere a la interfaz visual de una herramienta de software,1 UX (user experience) se refiere específicamente a la experiencia del usuario mientras la utiliza. El diseño de una interfaz de usuario, más allá de resultar estéticamente agradable, debe tomar en cuenta parámetros a los que, en ocasiones, no se les da debida atención, lo cual puede perjudicar por completo la experiencia del usuario con la herramienta, ya que antes del agrado visual producido por la experiencia, los usuarios le dan más importancia a su nivel de frustración durante esta.

Vinculados directamente a esa experiencia, los diseñadores debemos tener como prioridad el obtener una herramienta de uso fácil y conveniencia para el usuario. Jakob Nielsen (2012)define el término usability como una característica propia de una herramienta de software, que lejos de ser una propiedad unidimensional, reúne múltiples componentes, los cuales cumplen con cinco condiciones relevantes:

Debe ser fácil de usar, para que el usuario el sistema de manera rápida e intuitiva (Aprendizaje). Además, debe ser eficiente, permitiendo al usuario mejorar su productividad cuando la utiliza (Eficiencia). Asimismo, es de gran importancia que su funcionamiento sea fácil de recordar así el usuario puede recordar sin ningún problema como funciona luego de un tiempo sin utilizarlo (Memorable). El sistema también debe favorecer una baja tasa de error, de manera que el usuario sea menos propenso a cometer errores y, si comete errores, pueda corregirlos fácilmente (Acierto). Y por último, el sistema debe ser agradable de utilizar, generándole satisfacción al usuario (Satisfacción).

Al final, al usuario no le va a interesar si la interfaz se ve bien, si se siente frustrado después de haber probado la herramienta en todas sus etapas. Es por esto que cada elemento debe presentarse o cambiar de manera lógica, siempre con el objeto de ayudar al usuario a completar las tareas para las que está utilizando el sistema.

Diseño centrado en el usuario

El concepto de diseño centrado en el usuario (user centered design) describe el proceso de diseño que se define con base en el usuario y sus necesidades. La importancia de este concepto es que los usuarios siempre están involucrados en el proceso y tienen un profundo impacto en él. Este término fue utilizado por primera vez en la investigación de Donald Norman en el laboratorio de la Universidad de San Diego, California (UCSD), en la década de los 80 (Abras, C.; Maloney-Krichmar, D. & Preece, J.).

Con base en este concepto, antes de iniciar el proceso, es primordial preguntarse ¿quién va a utilizar esta herramienta?, ¿para qué la va a utilizar?, ¿en qué ambiente espera utilizarla? Porque no es lo mismo una herramienta para usar con fines laborales por un gerente de empresa que una para usar en compras por internet por un músico, que lo hace en un ambiente más relajado.

Quizás una idea para una aplicación sea impresionante, justo lo que muchos usuarios necesitan; pero si en el proceso de desarrollo no se toma al usuario y sus necesidades como pilar, se puede arruinar la experiencia por completo y con esto, arruinar una brillante idea.

Además de ser el punto de partida para una nueva experiencia, las necesidades de los usuarios pueden también servir de base para un look & feel2 estéticamente agradable por medio de tipografía, colores y elementos gráficos, de manera que el usuario sea guiado en cada tarea, la experiencia mejore y a su vez, la interfaz logre capturar su atención, logrando ese balance esencial para el éxito de una herramienta. Pensar en el usuario y sus necesidades, va a permitir determinar las acciones, funciones y elementos necesarios dentro del diseño.

Evitar confusiones, utilizar lo necesario

Robert Hoekman Jr. en su libro Designing the Obvious (2012) explica que cuando un sistema evoluciona según las demandas de cada usuario se empiezan a adicionar funciones que luego son utilizadas solo por un 10% de los usuarios un 10% del tiempo, y estas van a interrumpir el otro 90% de las funciones, que son utilizadas por gran parte de los usuarios. Entre más funciones, es más probable que el usuario deba lidiar con mayor frustración, ya que eso implica que hay más que aprender.

Es por esto que Hoekman alienta a desarrolladores y diseñadores a eliminar funciones nice-tohave (agradables de tener) durante el plazo de los 60 segundos, es decir que, a partir de la lista de funciones consideradas, se eliminen en 60 segundos aquellas que no sean importantes en ese momento. Al trabajar con poco tiempo, la lista se reducirá a las que realmente sean significativas para que el usuario complete cada tarea.

Como diseñadores, siempre debemos tener en cuenta que menos es más. Debemos contribuir a que el usuario logre su objetivo al utilizar la herramienta, sin tener que decidir entre muchas opcionesde manera eficiente, que cada proceso sea consistente con los demás;que cada acción del sistema sea evidente para él. Steve Krug (2006) resume esto en una frase que él llama la primera ley de la usabilidad: “¡No me hagas pensar!”.

Nuestro trabajo es prever las preguntas que un usuario puede hacerse mientras utiliza una herramienta, para evitar precisamente que se las haga. Cada acción debe estar a dos clics de distancia, sin dejar lugar a dudas, al fin y al cabo, como dice Kurg, como usuarios odiamos que nos hagan pensar. ¿Cómo se logra esto? Empezando por una adecuada organización de la información, utilizando luego solamente las funciones necesarias y, finalmente, procurando la redacción adecuada y la selección de palabras claras, que no ocasionen confusión.

Porque hay que ser sinceros. ¿Cuándo fue la última vez que usted, como usuario, realmente leyó toda la información de un sitio web? Como usuarios no leemos hojeamos la información. Por esto es importante limitarse a la mínima cantidad de esta, la que lleve a las funciones precisas que el usuario busca. Mientras que un diseñador o desarrollador puede incluir toda la información que un usuario podría necesitar (de nuevo regresamos a la idea de que, en este caso, gran parte de la información es útil solamente para el 10% de los usuarios, un 10% del tiempo), el 90% de estos va a echar un vistazo a todo y si no encuentra lo que busca de manera rápida, simplemente va a frustrarse e, inclusive, a desistir de utilizar la herramienta.

Es por esto que los textos, dentro de una herramienta, juegan un papel importante. Y es que por medio de estos se puede ayudar al usuario a guiarse. No solo la selección de palabras apropiadas es indispensable para no confundir, también lo es la utilización de tipografía de diferentes tamaños o grosores para jerarquizar la información. Si algo es completamente irrefutable es que la jerarquía visual y la unidad en los elementos de un diseño son fundamentales para que el usuario comprenda de manera clara la información que se le presenta.

Acciones fáciles de determinar

Cuando se diseña una interfaz, las acciones mediante las que el usuario va a navegar por el sistema deben ser claras. No se puede pretender que el usuario adivine dónde debe dar clic o que deba buscar un botón para continuar un proceso. Estas y todas las acciones dentro de una herramienta deben ser obvias.. Un botón debe parecer un botón, debe verse como un objeto al que se le puede dar clic. De igual manera, cada uno de los elementos presentes debe dar a entender por sí mismo la acción que ejecuta.

Detalles que sorprendan

Una vez que se tiene todo lo esencial para un diseño, se puede pensar en pequeños detalles, que no perjudiquen la interfaz, pero que sí amplíen la experiencia. Tal y como lo explica Toby Sterret (2014), atender a ellos y agregar características que los usuarios descubran con el uso de la herramienta, les brindará una “alegría inesperada”. Estos pueden ir desde un buen eslogan (Krug, S., 2006) hasta una notificación o servicio no común y realmente detallado (Sterret, T., 2014).

Ligado al diseño centrado en el usuario, el hecho de prestar atención a ese tipo de elementos permite que el mismo usuario experimente cierta “magia” cuando descubre estas características detalles fueron cuidadosamente pensados por y para él.

Conclusiones

La interfaz de usuario, si bien juega un papel importante en un proyecto, no produce efectos relevantes si no se maneja en conjunto con la experiencia de usuario. Y una buena experiencia no se puede asegurar si no se piensa en el usuario y sus necesidades, en primer lugar. La frustración que este puede sentir si debe pensar mucho cuando utiliza una herramienta o la confusión al preguntarse cómo utilizarla pueden dar como resultado que el usuario desista por completo de hacerlo.

Utilizar solo las funciones necesarias y procurar que el diseño sea intuitivo, se explique por sí mismo, y que sus elementos concurran de manera lógica, para ayudar al usuario en la realización de sus tareas es lo que hace una herramienta exitosa. Y una vez que todo lo necesario haya sido tomado en cuenta, es importante pensar en los detalles que puedan darle un valor agregado a la herramienta, y a la experiencia como tal.

Agradecimientos

Este artículo fue escrito durante un intercambio en la Hochschule für Gestaltung Schwäbisch Gmünd, en Alemania, donde se trabajó en la Escuela de Diseño de Interacción, en proyectos de Interfaz de Usuario, Experiencia de Usuario y Usabilidad, como preparación para el desarrollo del proyecto de graduación en el Tecnológico de Costa Rica. La autora expresa su agradecimiento al Programa de Movilidad Estudiantil, con el cual se cubrió parte fundamental de los gastos de viaje, y a la Rectoría del Tecnológico de Costa Rica, que gestiona todo el programa. Asimismo, le agradece a la Escuela de Diseño Industrial del Tecnológico de Costa Rica y a la Hochschule für Gestaltung Schwäbisch Gmünd por la oportunidad de realizar el intercambio; al profesor Ph.D. Franklin Hernández Castro, por la guía dentro del tema desarrollado; a las estudiantes Lizeth Vega Vindas (UCR), por su colaboración en la redacción de este documento, y Daniela Osorio (Arts University Bournemout), por su ayuda en la redacción de los textos en inglés

Referencias

Abras, C.; Maloney-Krichmar, D. & Preece, J. (2004). User-Centered Design. Manuscrito no publicado. [ Links ]

Garrett, J. (2011). The elements of user experience: User-centered design for the web and beyond (2nd ed.) California: New Riders. [ Links ]

Graef, J. (2015). Application Design I: Class lecture. Schwäbisch Gmünd: Hochschule für Gestaltung. [ Links ]

Gronbach, F. (2015). Interface Design II: Class lecture. Schwäbisch Gmünd: Hochschule für Gestaltung . [ Links ]

Hernández Castro, F. (2014). Metodología de análisis y diseño de usabilidad. Recuperado de http://skizata.com/Links ]

Hoekman Jr., R. (2010). Designing the obvious: A common sense approach to Web & Mobile Application Design (2nd ed.) California: Pearson Education. [ Links ]

Klein, N. (2015). Slicing tomatoes with a really sharp knife. Recuperado de https://medium.com/@nikolasklein/slicingtomatoes-with-a-really-sharp-knife-5440c179560bLinks ]

Krug, S. (2006). Don’t make me think: A common sense approach to web usability (2nd ed.). California: New Riders. [ Links ]

Nielsen, J. (1993). Usability Engineering. Massachusetts: Academic Press Limited. [ Links ]

Nielsen, J. (1995). 10 Heuristics for User Interface Design. Recuperado de http://www.nngroup.com/articles/ten-usability-heuristics/Links ]

Sterrett, T. (2014). Designing delightful details for a UI revolution at push. Conference. Recuperado de https://vimeo.com/110115799Links ]

Tidwell, J. (2010). Designing interfaces: Patterns for effective interaction design (2nd ed.). California: O’Reilly Media, Inc. [ Links ]

1De igual manera a como lo específica Ph. D Franklin Hernández-Castro en su texto Metodología de análisis y diseño de usabilidad (2014), en inglés se utiliza el término herramienta de software (o sistema) para referirse a favor indicar aquí la palabra que encierre todos los elementos a los que hace referencia, desde páginas web hasta una herramienta de uso local.

2El término look & feel significa textualmente “aspecto y sensación” y se utiliza con referencia a la interfaz gráfica de usuario. Comprende los aspectos de diseño, como colores, formas y tipografías (look o aspecto), así como el comportamiento de estos y otros elementos como los botones y el menú (feel o sensación).

Creative Commons License Este es un artículo publicado en acceso abierto bajo una licencia Creative Commons