Diseño de Interfaces: Elementos, Funciones y Estrategias

Elementos de la Interfaz

Una buena interfaz es aquella en la que los distintos elementos encajan perfectamente entre sí y producen un todo coherente. La conjunción de las distintas piezas debe favorecer siempre la continuidad y la consistencia, por ello han de ser sólidas.

La interfaz se ha visto cada vez más condicionada por el creciente despliegue de lo multimedia: diferentes medios son puestos en escena para comunicar un mensaje. Es importante tener en cuenta que la interfaz se divide en frames o partes diferenciadas, aunque a veces se hagan invisibles esas divisiones.

Todo se basa, como si de una película se tratase, en el montaje: se disponen los elementos de una determinada manera para construir un determinado discurso.

La composición de la imagen de la interfaz se basa en:

• Elementos verbales (equiparables a palabras).
• Elementos visuales (equiparables a figuras).

La interfaz funciona a tres niveles diferentes:

• Como elemento de comunicación.
• Como apoyo y guía durante la navegación.
• Como aspecto favorecedor de la interacción.

Componentes Principales

1. Fondo.
2. Imágenes.
3. Video.
4. Ventanas y paneles.
5. Texto.
6. Sonido.
7. Animación.
8. Botones.

Fondo

El fondo no suele tener un papel dominante en el diseño. Se recurre a un fondo sólido o decorativo. Una imagen muy llamativa no garantiza el buen resultado de la interfaz y, además, puede dificultar la obtención de un diseño integral.

Ventanas y Paneles

Cualquier región diferenciada de la pantalla puede ser una ventana o un panel. Normalmente, las ventanas se destinan a los medios, mientras que los paneles realizan el diseño, ofreciendo información o indicaciones.

Los marcos y límites pueden ser muy útiles para delimitar formalmente áreas o llevar a cabo una apuesta estética. Los textos, imágenes, vídeos o animaciones funcionan mejor cuando están integrados en relación con los demás elementos o ubicados en áreas vacías.

Las principales funciones de las ventanas y los paneles son:

• Delimitar una región para un fin concreto (apartes o destacados).
• Ayudar a integrar los medios cuando el entorno es complejo.
• Anclar los elementos de diseño a la estructura.

Imágenes

Lo que las hace acertadas es su capacidad para integrarse y apoyar el mensaje. Es imprescindible que exista una coherencia en la calidad de los materiales gráficos.

Las imágenes aisladas pueden dar lugar a otras compuestas que ofrezcan un diseño más complejo y apropiado, y un mensaje más certero. Las imágenes pueden llenar fácilmente la interfaz, pero es necesario que su inclusión esté justificada y no resulte caprichosa.

Los marcos y las sombras pueden ayudar a unificar el diseño, evitando que surjan efectos indeseados o que parezcan sobreimpresiones. Por todo ello, es importante tratar las imágenes desde el principio teniendo presente el uso que se les va a dar en la interfaz.

((((Education dance project carmen Berliner philharmoniker sir simon rattlee sasha walts))))

Texto

Es el elemento menos valorado pero se rige como uno de los más importantes. Además de ser en sí mismo contenido, permite apoyar otros elementos y reforzar el diseño.

Tiene que cumplir las siguientes tres características:

• Poseer una apariencia adecuada al mensaje que se quiere transmitir.
• Ser legible y cómodo de leer para sus distintos públicos.
• Funcionar eficientemente en la interfaz.

Funciones del Texto

Informativa: transmite indicaciones sobre algún elemento o parte de la pantalla (nominativo).

Descriptiva: mayor información con explicación.

Exhortativa: consiste en transmitir al usuario la necesidad de que realice una acción o no la realice.

Estética:

Muchas de estas funciones pueden darse al mismo tiempo.

Video

• Depende de su función, el vídeo tendrá una ubicación y una presencia concretas.
• Es fundamental determinar si el vídeo se reproduce en una ventana o a pantalla completa.
• El tamaño y la longitud del vídeo implicará decisiones de diseño (ubicación).
• Dentro de las diferentes estrategias para integrar el vídeo en la interfaz, destacan:

• Personalizar la forma de la ventana para que se funda con el fondo.
• Diseñar el fondo para que parezca una extensión de la parte visual del vídeo.
• Personalizar los controles de vídeo para que sean parte de la interfaz.

• En el caso de recurrir a marcos o relieves, es importante tener en cuenta de qué manera va existir una cohesión entre el vídeo, el fondo y los demás elementos.

Botones y Controles

• Son las partes tangibles de la interfaz, aquellas que permiten al usuario interactuar.
• Han de ser claros y coherentes sin llegar a convertirse en predecibles y aburridos.
• Transmiten a los usuarios la sensación de control sobre el contenido.
• Un control es cualquier parte de la pantalla (o de uno de sus elementos) que, aunque no tenga apariencia de botón, permite ser manipulada.
• Cuando haya de revelar su propósito, puede acompañarse de textos identificativos.
• Aunque puedan destacar, han de estar integrados y no ensombrecer a los demás elementos.
• No existe una ubicación predeterminada, pero es fundamental que favorezcan la facilidad de acceso y el reconocimiento de aquellas acciones que desencadenan.

Animación

• La animación puede ser un buen recurso para aportar información o mejorar la estética.
• Entre los tipos más frecuentes de animación se encuentran:
  • Elementos que se transforman.
  • Elementos que aparecen/desaparecen.
  • Transformaciones de pantallas.
• Poseen una enorme capacidad de síntesis y significación, lo que permite que una sola animación exprese ideas complejas o unifique conceptos mentales.
• Las principales funciones de la animación son:
  • Establecer una secuencia de varios contenidos.
  • Crear énfasis en un determinado punto de la interfaz para llamar la atención.
  • Facilitar la comprensión de procesos explicándoles de manera gráfica.
  • Atraer el interés ante el producto o alguna de sus secciones.
  • Proporcionar un puente visual que (re)dirija al usuario.
• Sin embargo, debido a la carga visual y el impacto propio de las animaciones, resulta necesario planificarlas adecuadamente para evitar que su presencia reste importancia al resto del contenido, distraiga la atención del usuario o resulte molesta.

Indicaciones

El usuario deja de ser un espectador pasivo, para interactuar con la interfaz en un intercambio de preguntas, respuestas y acciones; y la máquina pasa a desplegar las imágenes de acuerdo a los requerimientos del usuario.

La comunicación entre el usuario y la interfaz depende de la correspondencia entre la representación mental del usuario (condicionada por su conocimiento y su experiencia) y la imagen que le muestra el sistema (que ha de amoldarse al mundo conocido y accesible por el usuario).

Cuanto mayor es la compatibilidad entre la representación mental del usuario y la imagen de la interfaz, mayor será el entendimiento de la información y, por lo tanto, mayor será la usabilidad y el diseño emocional de la interfaz.

• Para generar la imagen de la interfaz es necesario tener muy claro qué ofrece el producto multimedia y qué cosas permite hacer, para de este modo organizar la información de la forma más eficiente y atractiva posible a los distintos usuarios que la van a acabar utilizando.
• Si el producto multimedia es difícil de utilizar, no importará si posee un diseño extraordinario y una infinitud de posibilidades de todo tipo, pues el usuario se frustrará y se sentirá incómodo cuando tenga que interactuar con ella, llegando incluso a desistir.

Relación de Contenido con la Interfaz (Principio de Eaton)

• La mayoría de la gente desarrolla una afinidad por un sitio Web (o una aplicación) porque quieren, necesitan o están relacionados con su contenido.
• En el diseño de éxito de este producto, el contenido se entrelaza indisolublemente con el aspecto de la interfaz.
• Aunque (los medios) pueden ser el elemento más atractivo para la mayoría de personas, la calidad de la superficie de una interfaz es lo primero que encuentran.
• Por consiguiente, en el sitio deberían verse ambas cosas, para asegurar que los usuarios se mueven de la superficie al contenido.
• Un diseñador de interfaz debe mantener las necesidades del usuario siempre en mente.

Look and Feel

Hemos de Tener en Cuenta

:

• El usuario visualiza primero una página como grandes masas de forma y color, con unos elementos en primer plano, contrastados con otros del fondo, después empieza a discriminar para identificar los más importantes, ya sea por su ubicación, por su tamaño o por su sistema de color.

POR ESTE MOTIVO:

• Es importante organizar los elementos en una jerarquía visual fuerte y consistente, donde resalten los principales elementos y los contenidos estén organizados de maner lógica y previsible.

Y PARA QUE ASÍ SEA:

• Las jerarquías visuales deben establecerse en diferentes niveles y ser codificadas utilizando cualquiera de las formas.

ESTRATEGIA A SEGUIR: ¿De qué modo se debe concebir cada espacio de la interfaz?

Pc:

• El espacio superior como la parte más importante debido a que la información se va desplegando de arriba hacia abajo y suele ser lo primero en atraer la atención del usuario. Por ello, es recomendable reservar esta sección para los elementos de exploración e identificador del sitio. los diferentes menús suelen encontrarse también en esta zona, en verticalidad.

• La parte inferior, en cambio, debe ser utilizada para facilitar la explorarion secundaria, o bien, para presentar contenido de menor relevancia. Sin embargo, puede usarse para botones que identifiquen las secciones, pero en ese caso deberán permanecer visibles o referenciadas.

• Los lados izquierdo y derecho también se utiliza frecuentemente para colocar elementos de navegación, aunque debe tenerse cuidado de no invadir el espacio disponible para el contenido. En el caso de que existan barras de desplazamiento horizontal, es preferible que estén siempre en el mismo lado, a no ser que vayan apoyando a los elementos presentes en cada una de las secciones de pantalla.

• Al igual que la parte superior denota mayor importancia de los elementos presentes en ella, el lado izquierdo se asocia a una mayor jerarquía y a elementos menos variables.

Dispositivos móviles:

• También en los dispositivos móviles el espacio superior es la parte más importante en lo que respecta a los elementos de identificación de la aplicación y también a algunos otros elementos de navegación. Sin embargo, dado que en estos soportes es más frecuente la navegación horizontal, los elementos de navegación suelen encontrarse en la parte inferior y en los laterales.

• El contenido se ubica en el centro de la pantalla, dando una mayor presencia a los de mayor relevancia en la sección áurea. Esta zona se concibe como área de trabajo o visionado, dejando las zonas periféricas y las ventanas a modo de pop-up para los textos que asisten la navegación.

• Los botones que identifican las secciones es imprescindible que permanezcan siempre visibles, normalmente en la parte inferior. Cuando lo hacen en un lateral, es opuesto suele utilizarse para menús desplegables o barras de desplazamiento horizontal.

• Las zonas superior, inferior, izquierda y derecha acogen los elementos más estáticos, mientras que el espacio central está en constante cambio, apoyado enormemente por la interactividad.

¿CÓMO DEBE SER LA INTERFAZ?

1. Sencilla. Los elementos están para apoyar, ayudar y guiar, no para confundir. Ha de evitarse la saturación y el empleo de elementos innecesario (que no accesorios).

2. Clara. La informacion debe ser facilmente localizable, por lo que ha de estar organizada de manera lógica, jerárquica o temática.

3. Predecible. Ha de aspirarse a que se cumpla la siguiente máxima: a acciones iguales, resultados iguales.

4. Flexible. El producto debe verse y entenderse claramente en los distintos sistemas, no presentando problemas que entorpezcan e incluso impidan su correcto uso.

5. Consistente. Ha de lograrse una semejanza entre las secciones o capítulos que conforman la aplicación.

6. Intuitiva. El usuario ha de sentirse cómodo y seguro, comprendiendo lo que la aplicación le permite hacer y sintiendo que la experiencia se amolda a sus necesidades y deseos.

7. Coherente. Tanto texto como gráficos, colores y demás elementos utilizados deben corresponder al contenido de la publicación.