Ja

vie

r C

osí

o G

on

zále

z

20

13

Dis

eñ

o d

e I

nte

rfa

ce

s M

ultim

ed

ia

Técnicas y fundamentos para el diseño de interfaces

multimedia en dispositivos móviles basados en el diseño

responsivo y en reestructuraciones totales de versiones en

escritorio,

Universitat Oberta Catalunya

Javier Cosío González

Interfaces Página 1

DISEÑO DE INTERFACES

MULTIMEDIA

Transparencia en las Interfaces Las interfaces al igual que la comunicación y los lenguajes no pueden ser

totalmente transparentes convirtiéndose en “invisibles”, ya que se trata de

dispositivos artificiales. Sin embargo, cuando están bien diseñados obtienen

una alta transparencia y son parcialmente invisibles.

La llegada del iPhone en 2007, ha abierto nuevamente la brecha en términos

de transparencia, los dispositivos táctiles poseen una transparencia muy alta…

Para catalogar el nivel de transparencia de una interfaz conviene analizar una

serie de aspectos:

Arquitectura de la Información

Considerar si la información del dispositivo está bien estructurada y el usuario

encuentra lo que busca ágilmente favoreciendo la transparencia.

Comportamiento de los elementos de Interacción

Basar la transparencia en cómo se desenvuelven los elementos que actúan

como interfaz, no es lo mismo navegar con el dedo sobre una pantalla táctil

que utilizar un periférico como pueda ser un ratón.

Target

El diseño y funcionamiento de la interfaz tienen en cuenta al público objetivo.

Recursos Gráficos

Existe un uso de etiquetas icónicas estandarizadas posicionadas donde el

usuario más precisa, además de un buen uso de los colores.

Convenciones Culturales

Se adapta a las convenciones culturales del lugar donde es explotado.

Usabilidad

Hace referencia a la facilidad con que un usuario puede utilizar una

herramienta fabricada por otras personas con un determinado fin.

Limitaciones

La interfaz tiene en cuenta las limitaciones del dispositivo.

Humberto Eco define las interfaces como un conflicto entre dos sujetos, y eso

no es para nada transparente.

Interfaces Página 2

Diseño Responsivo El diseño responsivo es una de esas limitaciones existentes en el medio impreso

que la web sabe aprovechar, diseñar con flexibilidad y controlando el flujo y

reflujo de las cosas son las bases de esta disciplina. Responsive Design

El diseño responsivo está altamente caracterizado por las decisiones creativas,

y se define por una notoria transitoriedad marcada por las ventanas de ancho

inconsistente, las resoluciones de pantalla, las preferencias de los usuarios y la

compatibilidad en las fuentes.

Una definición básica sobre diseño responsivo explica que son una serie de

técnicas de diseño y programación que permiten a una interfaz adaptar su

tamaño y su forma a diversas resoluciones de pantalla de manera automática.

Por otro lado, claro es sabido que el diseño responsivo facilitará que una web

para móviles se ajuste a los diferentes tamaños que habitan en el mercado

móvil. Sin embargo, ¿Qué sucede cuando tenemos que adaptar nuestra web

de escritorio a la versión móvil? ¿Es suficiente con aplicar el diseño responsivo?

¿El target de la versión de escritorio usa la web con la misma finalidad que el

target de la versión móvil?

En este caso, quizás haya que plantearse elaborar un website radicalmente

diferente para la versión móvil y la de escritorio. A pesar de ello, el responsive

design será necesario aunque ambas versiones difieran.

VEAMOS LA WEB DE IBERIA:

Interfaces Página 3

Website Móvil vs Responsive Design Esta cuestión es sumamente importante debido al crecimiento desmesurado

del móvil como dispositivo para navegar. Según las estadísticas, el 30% del

tráfico web en España proviene de redes móviles, y en constante evolución.

1. Experiencia de Usuario.

Mucho más eficaz si trabajamos con una versión que se ajuste al target

de manera más específica. Por lo tanto, la versión móvil toma ventaja.

2. Mantenimiento y actualizaciones

El mantenimiento es más asequible para la web de diseño responsivo,

ya que su base es uno de los puntos fuertes de esta técnica.

3. Coste desarrollo web

El coste del desarrollo web es inferior para una versión móvil, aunque es

discutible este asunto ya que influye la complejidad del proyecto.

Sin duda alguna, decantarse sobre una u otra es sumamente difícil, debido a

que ambas tienen sus propios puntos fuertes y débiles. Por este motivo, la mejor

opción es examinar el proyecto con detenimiento y saber cuál se adapta

mejor a nuestras necesidades.

Diseñando para iPhone y iPad A la hora de realizar un diseño para cualquiera de estas versiones lo primero

que hay que tener en cuenta son una serie de aspectos:

Resoluciones de pantalla:

iPhone (320x480)

iPad (768x1024)

Ventana de información:

Barra de estado (hora, batería…) 4%

Barra de navegación (títulos, botones…) 8%

Area de contenido (contenido…) 80%

Barra de modos (activar modos...) 8%

Estilos de fuentes:

Trebuchet MS, Verdana, Arial, Georgia, Palatino, Times New Roman…

GOOGLE: Google recomienda el responsive web design. Sin embargo, el Responsive

Design no es posible de aplicar en todos los casos y muchas veces no es

conveniente. Google es consciente de ello y como alternativa recomienda

barajar otras opciones.

Interfaces Página 4

Usabilidad (Versión Móvil) La usabilidad en móviles viene marcada por la expresión “menos es más”, ya

que sobra cualquier contenido que pueda ser prescindible, se busca algo

rápido y ligero, acorde a la experiencia de usuario.

Consejos para desarrollar el architecture map y los wireframes

Diversidad de Pantallas (%)

Hay que tener en cuenta que diseñamos para pantallas de varios tamaños.

Sintetizar

Como hemos mencionado anteriormente, toda la información que puede

tener una web de escritorio debe aparecer sintetizada en la versión móvil,

debemos reducir una gran cantidad de contenido desechando la información

redundante.

Una posible solución, es desarrollar el árbol de contenidos con una estructura

de navegación de carácter jerárquico, que vaya de lo general a lo particular,

esto se consigue aplicando varios niveles de profundidad en la navegación

con enlaces de retorno que permitan al usuario construir un mapa mental de

donde se encuentra.

Layout

El layout debe estar pensado para móviles, las limitaciones en cuanto a

columnas son extensas, a lo sumo es conveniente usar 3 columnas siendo

frecuentes el uso de 1 o 2 columnas. Quizás sea favorable tener varios layouts

para los diferentes tamaños de pantalla.

Imágenes

Las imágenes son uno de esos puntos que llevan dando guerra desde hace

muchos años atrás y en las web para móviles no es menos. Las imágenes que

quedan tan bien en el ordenador normalmente tienen un tamaño excesivo

para móviles, debido a las limitaciones de ancho de banda. Lo ideal es

profundizar en este tema y elegir una de las soluciones que mejor se adapte a

nuestro proyecto.

Táctil

Cuando desarrollamos los wireframes deberemos tener en cuenta que las web

para móviles trabajan con el dedo y no con el ratón, esto es muy importante

debido a las diferencias latentes entre ambos.

El dedo cuando hacemos un TAP ocupa entre 40 y 80 píxeles de ancho, valor

que hay que tener en cuenta a la hora de diseñar los botones y sus

correspondientes espacios, al igual sucede con los eventos de zoom y los

deslizamientos, únicamente disponibles en dispositivos táctiles.

TAP: CLIC REALIZADO CON EL DEDO SOBRE UNA PANTALLA TÁCTIL

Interfaces Página 5

Test de Usuarios El test de usuarios es una prueba de usabilidad que se basa en la observación

y análisis de como un grupo de usuarios reales utiliza el sitio web.

¿En qué momento se lleva a cabo el test de usuarios?

El test de usuarios debe ser realizado tras la evaluación heurística, no es viable

realizar un test a los usuarios sin antes haber realizado un análisis exhaustivo de

la web de manera interna.

¿Por qué son realmente útiles?

Los usuarios van a ser los jueces finales de nuestro trabajo y pueden aclarar las

confrontaciones que aparezcan en el equipo de desarrollo además de

detectar otros posibles errores.

¿Cómo se ha de realizar el test?

Esto depende del presupuesto disponible, se puede contratar personal externo

especializado o bien realizar un test de guerrilla más economizado llevado a

cabo por el propio personal de la empresa.

¿Cuántos participantes realizarán el test?

El número de participantes debe ser superior o igual a 5, ya que realizarlo con

un número menor de participantes puede ser contraproducente. Es exigible

también que el perfil de los usuarios se ajuste al target en su mayoría.

¿Cómo hay que planificar la prueba?

Se debe elaborar un guion que identifique los pasos necesarios para poder

afrontar el test de forma correcta, es decir, las preguntas deben estar

formuladas de antemano.

Desarrollo del Test

Una vez elaborada la planificación se procede a la realización del test:

Establecer un entorno confortable con el usuario.

Realizar una serie de preguntas para extraer información del usuario.

Observar cómo interactúa el usuario.

Evaluar el tiempo que tardan los usuarios en comprender la web.

Elaborar Informe

Todo lo que se haya observado y anotado durante la prueba, debe ser

resumido y sintetizado en un informe final. El informe debería incluir qué

problemas de usabilidad tiene el sitio web y algunas indicaciones o

sugerencias para solucionarlos.

Interfaces Página 6

Estructuras de navegación Son estructuras que ordenan y agrupan los contenidos de una página web

bajo unas categorías que forman una clasificación.

Sistemas básicos

Sistemas integrados

Sistemas constantes

Sistemas locales

Sistemas contextuales

Sistemas complementarios

Mapa del sitio (web map).

Índices

Guías

Sistemas NO básicos

Sistemas de personalización (se auto-diseñan…)

Sistemas de customización (customizado por el usuario)

Sistemas de navegación visual (utilizan recursos icónicos)

Sistemas de navegación social (lo más popular, lo más

comprado…)

Interfaces Página 7