PAC 2 JAVIER COSÍO
DISEÑO DE INTERFACES MULTIMEDIA DISEÑO DE INTERACCIÓN MULTIPLATAFORMA
Javier Cosío González – Grado Multimedia – Diseño de Interfaces Multimedia
2
Diseño de Interfaces Multimedia [Javier Cosío González]
FASE 1 Diseño de árbol de contenidos para Smartphone.
Este es el diseño del árbol de contenidos para la versión en Smartphone de la página web de Las Casas Canarias. Cada color representa un nivel de navegación, más adelante, con el desarrollo de los wireframes se podrá comprobar el funcionamiento detallado desarrollado en este árbol de contenidos.
FASE 2: Dise単o de los wireframes para Smartphone
4
Diseño de Interfaces Multimedia [Javier Cosío González]
FASE 2: Diseño de los wireframes para Smartphone
5
Diseño de Interfaces Multimedia [Javier Cosío González]
FASE 2: Diseño de los wireframes para Smartphone
Los wireframes han sido creados en Adobe Illustrator. Para el desarrollo de estos he tomado como base la resolución de pantalla del Iphone. Los iconos para crear los wireframes han sido extraídos de la web: http://findicons.com
FASE 3 ¿Qué factores se han tenido en cuenta a la hora de aplicar cambios en el árbol de contenidos para smartphone y tablet vertical, respecto al suministrado inicialmente? El factor principal tenido en cuenta para aplicar los cambios a un contenido vertical de smartphones y tablets ha sido sintetizar todo el contenido en pasos más enfocados a una aplicación móvil donde su tamaño reducido no permite barajar ese gran número de opciones que facilita un PC de Sobremesa, un portátil… Para ello, hemos tenido muy en cuenta la estructura de navegación, compuesta por varios niveles de profundidad. Debido a esta profundidad en la navegación ha sido importante establecer una sólida estructura jerárquica combinada con una estructura lineal muy pautada en algunos casos, de este modo, hemos conseguido una mayor facilidad en la orientación del usuario por los diferentes niveles jerárquicos que posee la web incluyendo enlaces de retorno que agilicen la navegación. Además, como rasgo principal de la estructura lineal comprobamos que el contenido progresa de lo general a lo específico, algo natural para una web que desea alquilar y vender apartamentos, casas… Otro factor destacado para una web en versión smartphone es el etiquetado visual mediante iconos siempre acompañado de una etiqueta textual, de esta manera, conseguimos que el usuario conozca rápidamente la función de cada opción. Finalmente, podemos concluir que el diseño centrado en el usuario ha sido la idea principal para desarrollar nuestro árbol de contenidos... Las proporciones de un smartphone o una tablet en modo vertical son limitadas respecto a otros dispositivos, por lo tanto, la creación de un diseño con una serie de opciones pautadas que guíen al usuario para confirmar su reserva o su compra ha sido fundamental para llevar a cabo el proyecto. De este modo, hemos reducido el número de enlaces y opciones de navegación presentes por un diseño que nos muestra lo mismo pero de una manera más guiada y útil para nuestro smartphone.
La Web para móviles de Iberia muestra un formato semejante en su página index.
¿Qué aspectos se han tenido en cuenta (como por ejemplo: target, usabilidad, prestaciones propias del dispositivo, adaptación táctil teniendo en cuenta la metodología de interacción y resolución de pantalla, comportamiento de las interacciones asociadas a diferentes dispositivos) para crear los nuevos wireframes, tanto para smartphone como para tablet vertical. Hay que referirse a los puntos específicos de los materiales de la asignatura, e incluir la referencia. Si se han utilizado fuentes de información externas, cabe citar las mismas? Según en el modelado de usuario como se especifica en los apuntes, el target o la persona a la que va dirigida este diseño es de tipo focal, es decir, nos dirigimos a una persona adulta con conocimientos en tablets o smartphones acostumbrado a utilizar pantallas táctiles y que le guste viajar. Por otro lado, la adaptación del diseño a los requerimientos de las pantallas táctiles ha sido uno de los principales focos de atención, el desarrollo de enlaces con thumbnails y otros botones sensibles propios en las aplicaciones web para móviles han sido altamente adaptados al diseño de la web de casas canarias. Además, el comportamiento de la interacción no está únicamente basado para los sistemas operativos de Apple, ya que otros grandes S.O. como puede ser Android tienen acceso a esta web de carácter universal para la tecnología Smartphone. Cabe destacar también que en el diseño del árbol de contenidos y de los wireframes hemos hecho hincapié en la usabilidad para cumplir con las necesidades del target. Tomando como referencia el módulo de usabilidad hemos seguido una serie de principios heurísticos que hacen de este sitio web un lugar intuitivo y efectivo a su vez, indagando en aspectos estructurales, legibilidad de contenidos, iconos universales… ¿Cuáles son las características fundamentales de la arquitectura de la información propuesta, y qué aspectos cree el estudiante que son mejorables, o le presentan dudas? Teniendo en cuenta la arquitectura de la información, el diseño estructural de la web es su punto fuerte ya que se adapta a las características principales que debe poseer una aplicación web diseñada especialmente para smartphones. Además, el diseño de navegación visual como hemos mencionado antes está bien diseñado y se adapta a los dispositivos táctiles. Por otro lado, existen otros aspectos mejorables de la arquitectura de la información que se podían llevar a cabo mediante un estudio de la competencia o benchmarking que nos ayuden a generar nuevas ideas para el diseño responsivo de nuestra web. Otro aspecto de la arquitectura de la información que no he resaltado en el diseño de los wireframes es el sistema de búsqueda, este sistema permite navegar sin depender de las opciones de menú y a su vez resulta una herramienta factible en un momento de desorientación.
8
Diseño de Interfaces Multimedia [Javier Cosío González]
¿Cuál ha sido la experiencia en la realización de esta PAC: qué dificultades se han encontrado, y qué has aprendido realizándola? Personalmente, y siendo sincero, la experiencia en la realización de esta PAC no ha sido de las mejores en contraposición con la primera PAC. La ausencia de tiempo me ha llevado de cabeza, como se puede comprobar en la NO realización de los wireframes para Tablet vertical. Además, compaginar la asignatura de Arquitectura de la Información al mismo tiempo ha sido un pequeño inconveniente en el desarrollo de esta PAC, pero a partir de aquí tengo la sensación de que puede ser ventajosa realizarlas a la vez. Por otro lado, la dificultad mayor en la realización de la PAC es encontrar una idea general de como afrontar la creación del árbol de contenidos y el desarrollo de los wireframes basándose en Diseño Centrado en el Usuario. Finalmente, quiero destacar que a pesar de la falta de tiempo para finalizar la PAC, he preferido dedicar más tiempo al desarrollo de los wireframes para smartphone que a desarrollar al completo todas las fases entregando una práctica de menor calidad.