Componentes de la Interfaz de Usuario: una Guía crítica

Ejemplo de diseño de componentes de la interfaz de usuario

Imagen: UI Components de un proyecto (Adtriboo, 2014)

Los componentes de la interfaz de usuario son conjuntos de elementos que forman un elemento más complejo, a la vez que único, y en ocasiones indivisible, cuya usabilidad suele ser autoexplicativa por la propia composición, estructural y visual del mismo.

Me gustaría decir que la cita está sacada de la Wikipedia o es de alguna figura mundial del diseño de interfaz. Lamentablemente para los más puristas es una definición que he creado para introducir el tema, intentado buscar las palabras más exactas, con mayor o menor acierto. ¿Por qué lo hago? Porque necesito crear una guía sobre el tema. Una guía que profundice sobre ello y tenga un espíritu crítico.

La necesidad.

En este tiempo como profesor en el Máster de Diseño Web y Creatividad de la Escuela de Negocios de la Cámara de Comercio de Sevilla, he podido aprender mucho sobre las necesidades formativas de todo aquel que, sin una formación previa, quiere adentrarse en el campo del diseño de producto digital. Muchas de las cosas que he aprendido han surgido de anécdotas de clase como la siguiente.

Introducía a los alumnos en el Diseño de la Experiencia de Usuario y les pregunté si sabían decirme qué es un componente acordeón en la interfaz de usuario de un producto digital. No obtuve respuesta. Pregunté inmediatamente lo mismo sobre un componente de pestañas. Sobre un slider. Sobre alguno más. Nada, silencio. A las caras de desconcierto sólo le faltaban un matojo rodante dando tumbos al fondo de la clase.

Las dudas de los alumnos se despejaron al mostrar en el proyector los componentes. Todos reconocieron la mayoría de componentes, pero esto me hizo pensar. A veces estamos tan metidos en nuestra dinámica de trabajo, tan viciados con nuetro lenguaje técnico, que olvidamos que para alguien que se inicia en el Diseño de Interfaz, ciertos términos no dejan de ser marcianos, aunque el aspecto visual les resulte familiar. Esto tiene las implicaciones siguientes:

Para realizar un ejercicio de diseño de interacción o de diseño de interfaz de un producto digital (sitio web corporativo, ecommerce, aplicación web, aplicación móvil, etc) es imprescindible que conozcamos los componentes de una interfaz de usuario de un producto digital. Por lo menos lo más comunes.

El objetivo.

Conocer los componentes más comunes con los que podemos trabajar, llegar a ellos, saber de su existencia es algo relativamente sencillo con ayuda del profesor y/o una simple búsqueda en Google. El punto importante es asumir la función de cada uno de estos componentes, pues de ello dependerá que nuestras decisiones en un ejercicio de diseño de interacción sean más acertadas o no. También es importante comprender que, a día de hoy, existen ciertos consensos visuales respecto a la mayoría de estos componentes. Asumir esto nos convertirá en diseñadores visuales más eficientes y resolutivos.

Qué demonios quiero decir con guía “crítica”.

Llegados a este punto, el problema de formación no se soluciona simplemente con listar los diferentes componentes que una interfaz de usuario de un producto digital puede contener a lo largo de los diferentes flujos y pantallas. Hay que dar un paso más y aportar un listado con anotaciones críticas. Esta anotaciones deben perseguir los siguientes objetivos:

  • Anotaciones objetivas, al margen de tendencias y modas de diseño.
  • Anotaciones honestas, sin que estén condicionadas por mis propias preferencias como diseñador.
  • Anotaciones abiertas, al diálogo y a la revisión por parte de la comunidad de diseño.

Es decir, los alumnos para aprender mejor no necesitan un listado de componentes que pueden usar. Los alumnos necesitan una Guía crítica de Componentes de Interfaz de Usuario.

A quién va dirigida la guía.

Principalmente a mis alumnos, ellos me han motivado a hacer esto y me gustaría ofrecerles este recurso. Por lo tanto, si estás empezando en el diseño de producto digital —lo que tradicionalmente llamábamos diseño web, pero a día de hoy ese término se te quedará corto—, esta guía será ideal para ti. No obstante, si eres un profesional experimentado quizás también te resulte interesante. Sobra decir que los comentarios estarán abiertos para cualquier tipo de valoración que estaré encantado de recibir. Todos somos aprendices en menor o mayor medida.

Capítulos de la guía:

Iré actualizando este artículo para añadir los enlaces a los capítulos conforme los vaya publicando. Estos son los capítulos previstos (a priori) para esta guía:

Entre tanto, los comentarios están abiertos para vuestras opiniones, dudas y sugerencias.

Curso de Diseño de Productos Digitales en OpenWebinars

Curso de Diseño de Productos Digitales de OpenWebinars

He colaborado con el equipo de OpenWebinars, una plataforma de formación online que cuenta con el resplado de de Andalucía Open Future, una iniciativa de Telefónica y la Junta de Andalucía, creando el curso de Diseño de Productos Digitales.

Acerca de OpenWebinars

OpenWebinars nace como startup andaluza y se consolida como proyecto empresarial  desde El Cubo, un centro crowdworking situado en las instalaciones de Andalucia Open Future, inicitiva de la Junta de Andalucía y Telefónica.

Su modelo es similar al de una plataforma MOOC —acrónimo en inglés que describe a las plataformas de Massive Online Open Courses—. En OpenWebinars podréis encontrar una lista de, hasta la fecha, unos cuarenta cursos.

La mayoría de los cursos están orientandos a perfiles de diferentes niveles con interés en mejorar sus habilidades en ciertas metodologías y lenguajes de programación. También ofrecen servicios formativos para empresas.

El curso Diseño de Productos Digitales

Enmarcado en un catálogo de Cursos IT, la mayoría sobre lenguajes de programación, me ha tocado hacer la excepción con un curso sobre metodologías de trabajo de diseño.

Grabación del curso de Diseño de Productos Digitales de OpenWebinars
Grabación del curso de Diseño de Productos Digitales de OpenWebinars

El curso que imparto cuenta con un total de cuatro bloques, sin contar la presentación del propio curso, donde tratamos los siguientes puntos:

  • Presentación del curso
  • Introducción al Diseño de Producto Digital
  • Introducción a la Experiencia de Usuario
  • Diseño de la Experiencia de Usuario
  • Introducción al Diseño de Interfaz

Cada bloque está dividido a su vez en apartados con el objetivo de tratar punto por punto cada uno de los campos que debemos tener en cuenta y que afectan a nuestro trabajo como Diseñadores de Producto Digital.

Respecto a los bloques, se plantean dos grandes grupos diferenciados en este curso. En el primer grupo de bloques tratamos los aspectos teóricos de la tarea:

  • Introducción al Diseño de Producto Digital
  • Introducción a la Experiencia de Usuario: Arquitectura de la información, Accesibilidad y Usabilidad.

En el segundo grupo de bloques pasaremos a practicar con el software:

  • Diseño de la Experiencia de Usuario: Axure
  • Introducción al Diseño de Interfaz: Photoshop y Sketch

Este curso está pensado para un perfil principiante. Es un curso ideal para aquellos desarrolladores interesados en profundizar en el flujo de trabajo necesario para poder elaborar sus propios conceptos. Aunque no seas desarrollador, también es un curso perfecto para aquellos que quieren aterrizar sobre el apasionante mundo del Diseño de Productos Digitales.

Adicionalmente os recomiendo los cursos “Desarrollo web front-end profesional” de Sergio Rus y “Curso HTML5, CSS3 y Javascript” de Vicente Herrera, también disponibles en OpenWebinars, los cuales os permitirán tener una global de lo que supone el diseño y desarrollo de productos digitales.

Actualización: Podéis ver aquí el video de la introducción al curso

 

12 Futuristas interfaces de usuario

Despues de algunos artículos mediocres en comparación a lo que nos tenían acostumbrados, Smashing Magazine vuelve con un petardazo de post donde nos hace un repaso de futuras interfaces de usuario que acaban de salir a la luz ó se están desarrollando, pensando o simplemente imaginando. Y ahora el comentario friki: ¿Acabaremos como Marty McFly tragados por un tiburón holográfico?

Todas ellas bien comentadas en 10 Futuristic User Interfaces (¿soy el único que ha contado 12?) de Smasing Magazine.