14/08/2016

Diseño de interacción: ¿cómo se relaciona el usuario con la interfaz?

Diseño de interacción: ¿cómo se relaciona el usuario con la interfaz?

Existen muchas definiciones posibles para la palabra «diseño». Si quisiéramos alcanzar una definición que concilie las principales visiones al respecto, podríamos hablar del diseño como la especificación de un objeto para cumplir un objetivo particular. Esta definición genérica —alineada a la que propusieron Charles y Ray Eames, célebres diseñadores de muebles— es lo suficientemente amplia como para abarcar tanto objetos abstractos (un plan, un servicio, un proceso) como concretos (un sitio web, una revista, un mueble, un electrodoméstico). Además, esta definición no entra en conflicto con aquellas que consideran al diseño mayormente como un medio para resolver problemas (tal sería el «objetivo particular» en cuestión) o bien enfatizan en su necesidad de aportar belleza o atractivo estético a una idea. El diseñador y emprendedor José Luis Antúnez trata de condensar estas dos miradas al definir al diseño como «soluciones bellas».

Sin embargo, dentro del diseño existen disciplinas más acotadas, con sus propias definiciones y alcances. Por ejemplo, el diseño de interfaces digitales (web o software) se sirve en buena medida de los principios del diseño gráfico. Esto se debe a que comparten numerosos elementos en común —como tipografías, fotografías, dibujos y colores—, aunque los principios a aplicar en papel impreso no siempre sean los mismos que en una pantalla. Una de las mayores diferencias viene dada por el hecho de que, mientras el papel es inmutable, en las interfaces digitales existen imágenes móviles (videos o animaciones), transiciones y transformaciones. Con el desarrollo de la computación personal, estas características particulares han dado lugar a una disciplina separada: el diseño de interacción (IxD, interaction design), o la definición de la estructura y el comportamiento de sistemas interactivos. Tal es la definición aportada por la IxDA (Interaction Design Association), el más importante de los organismos que nuclean a los profesionales de esta actividad y organizador de numerosas conferencias internacionales al respecto (como Interaction South America, celebrada en 2014 y 2015 en Argentina).

Sin embargo, esta definición no es universal, y no resulta difícil confundirla con las de otros campos vinculados al mundo digital. Es posible establecer algunos límites:

  • La experiencia de usuario (UX) es lo que siente una persona al utilizar un producto. Es un término amplio y global, que incluye el diseño de productos tanto abstractos como concretos, con las subcategorías que correspondan. Pero no se limita al diseño visual, ya que puede incluir otras variables. Por ejemplo, en el caso de un sitio web, la experiencia de usuario también pasa por la velocidad de carga y la comunicación con el cliente, dos factores que escapan al diseño visual. Su principal preocupación es cómo se siente el producto.
  • El diseño visual o gráfico se aboca a las características visuales de un producto: líneas, espacios, colores, texturas, tipografías y formas. Para el caso del diseño de interfaces, no tiene en cuenta factores como la transición entre distintas pantallas. Su principal preocupación es cómo se ve el producto.
  • El diseño de interfaces (UI) se limita mayormente al aspecto estético y la usabilidad de interfaces para máquinas y software, como las que podemos encontrar en computadoras, electrodomésticos, dispositivos móviles y otros dispositivos electrónicos. Su principal preocupación es cómo se presenta el producto.
  • El diseño de interacción es un campo dentro del diseño de experiencia de usuario que se aboca a la relación entre el usuario y el producto. Generalmente se habla de productos digitales, aunque algunos también incluyen a los productos físicos. Su principal preocupación es cómo reacciona el producto ante la acción del usuario. Para el caso de una interfaz digital, el diseño de interacción puede tomar decisiones sobre:
    • Cómo debería deslizarse un menú.
    • Qué efectos de transición utilizar.
    • Cómo debería transformarse un botón (por ejemplo, tras presionar el botón de play, este cambia su ícono por uno de pause).
    • Qué cambios deberían producirse cuando el usuario se desplaza vertical u horizontalmente por la página (por ejemplo, el header se achica y simplifica o hay un efecto de paralaje).
    • Cómo indicar que los datos ingresados en un formulario son correctos o incorrectos.

Como puede suponerse, en la práctica las fronteras entre estas disciplinas son difusas, y no es raro que una misma persona desarrolle más de una al mismo tiempo. Sin embargo, es importante destacar que en el diseño web el diseño de interacción juega un rol cada vez más importante, ya que las interacciones capaces de ser incorporadas en una página web crecen en variedad y complejidad a medida que avanza la tecnología. Características de CSS3 como las transiciones y las animaciones, softwares como Adobe Animate y API como WebGL presentan nuevas posibilidades y desafíos para el diseño de interacción.

0

angularjs Aplicaciones en Facebook aplicaciones mobile behavioral targeting Botones Call-to-action breadcrumbs breadcrumbs web búsqueda de personal búsqueda facetada Call-to-action buttons Client-side cliente-destacado cms a medida coding comercio electrónico content marketing CSS3 PIE cuanto debe pesar un sitio data-driven web design Datos estructurados Defacement Denegación de servicio Desarrollar una aplicación web desventajas de PhoneGap diseñar newsletters diseño web diseño web argentina diseño web esqueuomórfico Diseño web responsive Diseño web responsivo diseño web santa fe diseño web Smart TV diseño web televisores DOM desde PHP enlaces rotos filtros de búsqueda flash flat web design formularios sitio web fragmentos enriquecidos función de autocompletar futuro de la realidad aumentada html HTML5 html5shiv inbound marketing Initializr interfaces Web para televisores javascript jobs jQuery Mobile Mapbox maquetado html/css maquetador web masonry layout menú de navegación menú desplegable Metodologías ágiles Modernizr MVC Navegación por teclado oferta laboral OpenStreetMap paginas de Facebook Paper js Paper js framework personas Phishing plan de QA Polyfills polymer portfolio-destacados portfolio-inicio programacion de CMS Programadores WordPress página de contacto página de error 404 que es Backbone.js Realidad aumentada Resultados instantáneos server-side skeuomorphic design sliders y usabilidad soporte Internet Explorer Storytelling Underscores usabilidad usabilidad buscadores user-centered design ux velocidad de carga web Vendor prefixes ventajas jQuery Mobile Ventanas integradas versiones antiguas de Internet Explorer WAI-ARIA web components web imprimible Web Semántica WordPress para ecommerce