Estructura y diseño de la interfaz de usuario

Estructura de la interfaz

Dado que la interfaz es el medio de comunicación entre el usuario y la aplicación o producto, debemos considerar cada uno de los elementos que compondrán nuestra interfaz, asegurando que cada uno de ellos permitan identificar al usuario la función que desempeñan de manera sencilla y acceder a la información de una forma eficiente. Si bien podemos encontrarnos muchos y diversos elementos dentro de una interfaz, todos ellos se suelen agrupar en cuatro grandes grupos, a saber:

• Elementos de identificación
• Elementos de navegación
• Elementos de contenido
• Elementos de interacción

Vamos a analizar cada uno de ellos, si bien en muchos productos nos podemos encontrar con que están fusionados unos con otros, o directamente alguno de los cuatro grupos no aparece, lo cual rápidamente nos debería hacer pensar en un error de diseño de la interfaz o en un producto muy determinado.

Identificación

Son aquellos que identifican nuestra aplicación o producto. En el caso de un sitio web, por ejemplo, serían el logotipo y el título. Estos elementos se suelen/deben encontrar en todas las pantallas del producto, salvo en aquellos casos en los que se requiera de interacción a pantalla completa, como un videojuego. En el caso de los sitios web, además es una buena costumbre añadir un enlace para que cuando se haga clic en cualquier elemento identificativo el usuario retorne a la página de inicio o home. En la presente página web, serían elementos identificativos la foto superior y el texto jairogarcíarincón debajo de ella. En algunos casos, se puede considerar como elemento identificativo el pie de página o footer, pues también provee información acerca del titular, copyright, desarrollador, versión, etc. del producto.

Navegación

Son elementos que también suelen estar en todas las pantallas de nuestro producto y que por lo general cumplen dos funciones:

• Indicar al usuario en qué pantalla del producto se encuentra, algo esencial en productos con muchas pantallas
• Permitir navegar/acceder a las distintas pantallas del producto, incluyendo volver al inicio

Dentro de este grupo encontraríamos los diferentes menús y las migas de pan o breadcrumbs, principalmente. Esta última acepción esta tomada, como no podría ser de otro modo, del cuento infantil Pulgarcito. Ambos los puedes observar en la presente página web debajo de los elementos identificativos: hay un menú superior de navegación entre secciones, unas migas de pan o breadcrumbs que indican dónde nos encontramos y además permiten volver a las secciones anteriores, y un menú para acceder a las entradas o capítulos de la presente clase.

Contenido

Como el propio nombre indica, son todos aquellos elementos en los que se encuentra la información más relevante del producto: el videojuego, la película, el texto de la clase (en esta página en concreto), la animación, etc. Estos elementos serán, por norma general, de los siguientes tipos: texto, imagen, audio, video y animación.

Interacción

Por último, los elementos de interacción son todos aquellos que permitan al usuario realizar acciones destinadas a interactuar con el producto. Los botones, enlaces, formularios, áreas de texto, casilla de verificación, opciones desplegables, personajes que se pueden mover mediante hardware, etc. serían ejemplos de elementos interactivos o de interacción. En el caso de la presente página web, el buscador de la home, los elementos de navegación, los botones de contacto y en general cualquier enlace serían elementos de interacción.

Diseño de la interfaz

¿Boceto, maqueta o mock-up?

Según la Wikipedia: Según estas definiciones, llamémoslo como queramos, pero lo cierto es que en todo producto multimedia, como en cualquier proyecto, vamos a necesitar realizar un boceto, maqueta o mock-up que represente gráficamente la estructura del producto y algunas de sus funcionalidades sin entrar en detalle. Poniendo como ejemplo la construcción de una casa, el arquitecto, después de consultar las necesidades con los clientes, realizará un plano inicial en el que, sin preocuparse demasiado por las dimensiones exactas, los materiales o el estado del terreno, se muestre la distribución de espacios de la casa: entrada, salón, cocina, baños, dormitorios, etc. Y para el caso de un producto multimedia, la idea será similar, debemos realizar una serie de bocetos o mock-ups en forma de bloques o áreas que permitan, de un vistazo, saber si se van a cumplir las expectativas planteadas inicialmente: previsualizar la estructura de todas las páginas/pantallas del producto, analizar la interactividad y funcionalidad (usabilidad), la experiencia de usuario, detectar posibles errores, etc. En general, y siempre que no sean necesarios otros requisitos, seguiremos una estructura similar a la planteada en la estructura de un documento HTML5, esto es:

• Encabezado con los elementos identificativos que se repite en cada pantalla o página
• Navegación con los menús y migas de pan si son necesarias en todas las páginas/pantallas
• Contenido del producto para esa pantalla, que puede incluir secciones laterales
• Pie institucional de cierre, que también se suele repetir en todas las páginas y suele incluir elementos identificativos, enlaces de copyright, avisos legales, versiones, autorías, etc.

Mapa de navegación

Cuando uno va a visitar una ciudad desconocida, por norma general realiza un trabajo anterior consistente en investigar los lugares de interés, las atracciones turísticas, los medios de transporte, etc. y cuando llega a la ciudad, o bien dispone de un mapa de la misma (en papel o en digital) para poder moverse por ella o consigue uno en el hotel, en un centro de información turística, etc. En resumen, por lo general uno no busca perderse intencionadamente cuando llega por primera vez a un sitio, y esto es algo perfectamente trasladable también al mundo de los productos multimedia interactivos. Seguro que en muchas ocasiones hemos desechado aplicaciones del móvil, juegos, páginas web, etc. porque nos ha resultado muy complicado manejarlos, navegar entre ventanas y acceder a la información, de la misma manera que ciertos mapas turísticos son imposibles de entender. Por todo ello, salvo en productos extremadamente sencillos con pocas pantallas, es imprescindible, antes de realizar un producto multimedia, realizar un mapa de navegación que especifique cómo está organizada la información del producto, para que al desarrollarlo no nos olvidemos nada. Además, durante y al finalizar el producto debemos realizar una revisión del mapa de navegación con los cambios que hayan ido surgiendo, de modo que quede documentado para futuras revisiones o ampliaciones. En el mundo web es bastante habitual colocar estos mapas de navegación, también llamados mapas web o sitemaps en un apartado del sitio web, de modo que el usuario pueda acceder a él si no encuentra lo que está buscando. Por ejemplo:

• Mapa web de la Comunidad de Madrid
• Mapa web de Apple

Además, estos sitemaps, entregados en el formato adecuado, ayudan a mejorar el posicionamiento del sitio web. De forma gráfica, se muestran a continuación algunos ejemplos de mapas de navegación para su análisis: En cuanto a la estructura de los mapas de navegación, en función de las necesidades del producto multimedia, la podemos encontrar de varios tipos que en muchas ocasiones se combinan: Lineal: el usuario navega de forma secuencial entre pantallas hacia adelante o hacia atrás, como en un libro. Jerárquica: el usuario navega a través de las ramas del árbol de estructura que se forma dada la lógica natural del contenido. Es la más utilizada en el mundo web. No lineal: el usuario navega de forma aleatoria y libre entre pantallas. Reticular: todas las pantallas están relacionadas entre si y hay que tener cuidado porque el usuario corre el riesgo de perderse. Compuesta: consiste en combinaciones de las anteriores. Por ejemplo es típico combinar la estructura lineal con la jerárquica para sitios web complejos.

Patrones de diseño

Para la elaboración de interfaces de usuario utilizaremos patrones de diseño, esto es, una solución a un problema concreto que se puede utilizar en situaciones similares con pequeñas direcciones. Según la Wikipedia, la psicología de la Gestalt (también psicología de la forma o psicología de la configuración) es una corriente de la psicología moderna, surgida en Alemania a principios del siglo XX, cuyos exponentes más reconocidos fueron los teóricos Max Wertheimer, Wolfgang Köhler, Kurt Koffka y Kurt Lewin. El término Gestalt proviene del alemán, fue introducido por primera vez por Christian von Ehrenfels y puede traducirse, aquí, como "forma", "figura", "configuración", "estructura" o "creación". La mente configura, a través de ciertos principios descubiertos precisamente por esta corriente, los elementos que llegan a ella a través de los canales sensoriales (percepción) o de la memoria (pensamiento, inteligencia y resolución de problemas). En la experiencia que tiene el individuo en su interacción con el medio ambiente, esta configuración tiene un carácter primario sobre los elementos que la conforman, y la suma de estos últimos por sí solos no podría generar, por tanto, por sí sola a la comprensión del funcionamiento mental. Este planteamiento se ilustra con el axioma que dice: "El todo es mayor que la suma de las partes". El axioma pretende explicar que la organización básica de cuanto percibimos está en relación con una figura en la que nos concentramos, que a su vez es parte de un fondo más amplio, donde hay otras formas. En otras palabras, existe una percepción multiestable en la que todo lo percibido es mucho más que la información llegada a los sentidos. Ley de simplicidad, pregnancia o buena forma Uno de los principios fundamentales de la percepción para los gestaltistas es la llamada ley de la Prägnanz (traducido generalmente del alemán como pregnancia o, mejor aún, como principio de la buena forma), que afirma la tendencia de la experiencia perceptiva a adoptar las formas más simples posibles. Las partes de una figura que tiene "buena forma" o que indican una dirección o destino común forman con claridad unidades autónomas en el conjunto. Esta ley permite la fácil lectura de figuras que se interfieren formando aparentes confusiones, pero en donde prevalecen sus propiedades de "buena forma" o destino común, se ven como desglosadas del conjunto. Ejemplos de figuras pregantes serían el triángulo, el círculo y el cuadrado, como en la siguiente imagen donde vemos 3 círculos y un triángulo, cuando realmente son 3 círculos incompletos y ningún triángulo. Principio de semejanza Según el principio de la semejanza, la mente agrupa los elementos similares en una entidad. La semejanza depende de la forma, del tamaño, del color y de otros aspectos visuales de los elementos. Principio de proximidad El principio de la proximidad habla del agrupamiento parcial o secuencial de elementos que lleva a cabo la mente, con base en la distancia. Los objetos adjuntos tienden a ser vistos como una unidad. Los estímulos que están próximos tienden a percibirse como parte de la misma unidad. Principio de simetría Según el principio de la simetría, las imágenes simétricas son percibidas como iguales, como un solo elemento, en la distancia. Este principio tiene tal trascendencia que va más allá del campo de la percepción de las formas y constituye uno de los principios o fenómenos fundamentales de la naturaleza. La biología, la matemática, la química y la física, incluso la misma estética, se organizan siguiendo las leyes especulares, simples o múltiples, de la simetría. Principios de continuidad, de experiencia y de cierre Según el principio de la continuidad, los detalles que mantienen un patrón o dirección tienden a agruparse juntos, como parte de un modelo. Es decir, percibimos elementos continuos aunque estén interrumpidos entre sí. Tiene elementos de cierre porque las partículas independientes tratan de formar figuras, partiendo de la ley de cierre. También toma elementos de la ley de experiencia, pues se decide por aquellas formas que tienen figuras reconocibles o son más familiares para la persona que percibe (llamado perceptor). Este principio tiene como caracteres propios la manera de presentarnos las formas. Estas se nos muestran de manera incompleta, inconclusas, como abreviaturas o como esquemas de fácil interpretación. Principio de dirección común El principio de dirección común implica que los elementos que parecen construir un patrón o un flujo en la misma dirección se perciben como una figura. Por ejemplo, las bandadas de pájaros que vuelan como un todo, es decir, como si se tratara de un organismo único. Principio de relación figura-fondo El principio de la relación entre figura y fondo establece el hecho de que el cerebro no puede interpretar un objeto como figura o fondo al mismo tiempo. Según la experiencia previa y los intereses del observador, aparecerá en su mente un elemento como figura y el otro como el fondo de la figura o viceversa. Es la de mayor fuerza y trascendencia de las hasta aquí expuestas, porque puede considerarse que abarca todas las demás, ya que en todas late este principio organizativo de la percepción, y se ha observado que muchas formas sólo se constituyen como figuras definidas cuando quedan superpuestas o recortadas sobre un fondo más neutro.