2013
Diseño de Interfaces Multimedia
Javier Cosío González
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
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 1
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 2
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 3
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 4
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 5
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 6
Interfaces
Página 7