practica arquitectura de la informacion

Silvia Tormo Britapaja Grado Multimédia - UOC

PRÁCTICA Silvia Tormo Britapaja

Grado Multimédia - UOC

cc : by-nc-sa

AI

Propuesta de Arquitectura de un sitio web responsive

Árbol de contenidos y principales Wireframes


Í N D I C EÁrbol de Contenidos 4

Propuesta de Wireframe - Página Home - Desktop 5

Propuesta de Wireframe - Página SubHome - Desktop 78

Propuesta de Wireframe - Página Home - Mobile 6

9Propuesta de Wireframe - Página SubHome - Mobile

Propuesta de Wireframe - Página Producto - Desktop

1 0Propuesta de Wireframe - Página Producto - Mobile

1 1Propuesta de Wireframe - Página Resultados Búsqueda o listado/filtrado - Desktop

1 2Propuesta de Wireframe - Página Resultados Búsqueda o listado/filtrado - Mobile


Í N D I C EPropuesta de Wireframe - Página Proceso Compra - Desktop 1 3Propuesta de Wireframe - Página Proceso Compra - Mobile 1 4Objetivos 1 5Conclusión 1 6

1 7Fuentes Consultadas

4Silvia Tormo Britapaja Grado Multimédia - UOC

Árbol de contenidoshttp://www.adecorarmicasa.es/


Propuesta de Wireframehttp://www.adecorarmicasa.es/

Página Home -Versión Desktop

He reagrupado todos los elementos gráficos tipo banner en un

slideshow, bastante grande, pero de ese modo no distraemos al usuario con muchos banners

repartidos por toda la página, tal como comentamos en el estudio

heurístico

Añadimos seccion de destacados en la home, que nos permitirá

colocar los productos que queramos promocionar.

Tanto en mobiliario como en decoración

Añado las ultimas entradas del blog a la página principal, para que los buscadores utilicen ese contenido para dar relevancia a la página, y para que los usuarios tengan un “gancho” para permanecer más

tiempo en la página y que lleguen a páginas de producto de manera

indirecta.

En otra seccion delimitada con otro color, he añadido otros elementos del home a destacar, que no tienen nada

que ver con los productos, como el newsletter, la app mobil, o el catálogo



Página Home -Versión MobileHe reagrupado todos los elementos

gráficos tipo banner en un slideshow, bastante grande,

pero de ese modo no distraemos al usuario con muchos banners

repartidos por toda la página, tal como comentamos en el estudio

heurístico

Las secciones de destacados las convertimos en deslizables para

aprovechar las pantallas tactiles de los moviles

Las opciones de boletín, y catalogo se desplegarán unicamente si el

usuario da en ellas, aprovechando espacio para ganar altura.

Destaco la seccion del blog, con un color mas oscuro , no añado mas de una entrada, para no sobrecargar la

altura de la aplicacion

He creado un menú desplegable, con todas las categorías de la

tienda, aunque está en el menu principal del header, pero no

todo el mundo entiende aun esa simbologia, he pensado que no esta

de mas



Página Subhome - Versión Desktop

Creamos un menú vertical de filtro A continuación van las fotos de

la categoría unicamente, para que el usuario no se distraiga, ya que

ahora esta haciendo búsqueda por exploración

He añadido el texto explicativo de la categoría, tanto para los usuarios, como para los

navegadores.

He creado un sistema de navegación contextual, con el

objeto de que el usuario acceda a páginas de producto durante el

procesi de exploración



Página Subhome - Versión MobileAprovechamos de nuevo

las pantallas táctiles de los dispositivos móviles, para realizar sistemnas de navegación locales,

para cagada subcategoría de la categoria seleccionada

Todos los iconos graficos (banners de offertas, promociones,etc) los englobo en un slideshow al

principio para optimizar espacio.



Rehacemos el sistema de navegación global, solo dejamos

el menú horizontal, dándole la importancia que se merece la acción

de mirar un producto de la tienda, añadimos otro menú horizontal

(SNG) para los contenidos secundarios.

Por otro lado, hemos dado mucha más importancia al buscador,

agregándole la función para filtrar por categoría directamente, hemos

agregado a la navegación global elementos que estaban ubicados en el antiguo menú vertical, con la idea de utilizar el espacio del menú vertical para un filtro de resultados

(SNL) en algunas páginas

Englobamos en 3 pestañas las especificaciones, las valoraciones y las preguntas acerca del producto,

de este modo tanto en desktop como móvil con tocar la pestaña cambia la información mostrada

Agregamos más opciones en los sistemas de navegación

contextuales.

Eliminamos el pie de página eliminando todos los elementos

tipo enlaces que daban un aspecto poco funcional, y añadimos las

opciones básicas de la página web en el pie nuevo.

Eliminamos gráficos innecesarios que restan atención a la acción,

Agrupamos todos los elementos para comprar el articulo en un

recuadro , en este recuadro habrán todas las herramientas necesarias para que la persona añada lo que

desea al carro.

Página Ficha de producto - Versión Desktop



Para el diseño del wireframe, he tenido en cuenta las tendencias de diseño y usabilidad en APPS , las

cuales se aprovechan del scrolling de los dispositivos móviles, y da lugar a páginas con un scroll muy

largo, pero muy prácticas por que en dispositivos móviles van viéndose como páginas sueltas de un libro (

Parallax Scrolling )

El header en todo momento será fijo, pasando a ser un SNG, la cuadrícula de puntos es el menú principal

del sitio, la señalización está pensada para usuarios de teléfono móvil que tienen aceptados estos iconos

como standards en las app. También hemos añadido los iconos de usuario (para entrar en la cuenta),

el carrito(para el checkout), la flecha hacia atrás para retroceder en

cualquier momento y el iconod de información donde englobaremos

todos los temas de ayuda.

Todo el resto del wireframe sera contenido, con sistemas de navegación contextuales, y un sistema de

navegacion global como pie de página.

Hemos conservado la estética de la página de escritorio, para que la compra sea similar.

Página Ficha de producto - Versión Mobile



Página Resultados de búsqueda - Versión Desktop

Creamos un menú vertical de filtro de resultados, premitiendonos no tener que realizar más busquedas,

y simplemente afinar los resultados que hemos obtenido de búsquedas

mas genéricas.

Éste sistema de filtro de resultados solo estará en la pagina de

resultados de busqueda por lo que actuará como un sistema de

navegación local.

Al final de la página debajo de los resultados de búsqueda , hemos

añadido un sistema de navegación contextual, para que los usuarios

tengan la oportunidad de ver otras busquedas relacionadas, y

provocar que vuelvan a buscar más productos

Justo encima de los resultados de búsqueda hemos añadido un menu horizontal, en el que permitimos al usuario , clasificar los resultados

de busqueda por varias opciones, y tambíen permitimos al usuario que

especifique, cuantos elementos quiere ver por página.



Página Resultados de búsqueda - Versión Mobile

He añadido etiquetas para indicar los filtros que estan activos, y el icono X para indicar que si se

quieren quitar , hay que tocar dicha etiqueta.

En éste caso he utilizado una etiqueta gráfica, apoyándose en una de texto, para indicar al usuario que debe deslizar la pantalla para obtener mas

resultados de busqueda, para no llenar toda la ventana, dado que las pantallas moviles ofrecer menús de

éste tipo

Los filtros son ahora desplegables, ya que de otro modo ocuparian demasiado en altura, cuando el

usuario quiere un filtro especifico, se despliega el filtro, y aparecen las

opciones, un dropbox para Marca, un rango para el precio, seleccion

de colores, seleccionador de estrellas para la popularidad etc.

He añadido un sistema de navegación contextual, para enseñar más búsquedas de

otros usuarios, y asi poder hacer retargeting.



Página Carrito - Versión Desktop

He procurado que la lista del carrito sea lo mas sencilla posible para que

el usuario esté el menor tiempo posible en ésta página y recurra al

botón pagar

Al lado del carrito he añadido tooltips, para que el usuario esté

en todo momento más tranquilo al hacer su compra.

Son etiquetas de texto que ayudan al proceso de compro.

Agregamos un sistema de navegación contextual, a modo de “retargeting” ofreciendo un último

descuento al usuario sobre una seleccion de objetos gancho



Página Carrito - Versión Mobile


Objetivoshttp://www.adecorarmicasa.es/

Se ha presentado un arbol de contenidos, apropiado para la nueva estructura propuesta, y con los niveles demandados por el enunciado.

En segundo lugar hemos creado los Wireframes de las versiones de escritorio, de la página principal, la subpágina principal ( la de categorías),

la del producto, y la del carrito. Éstas vendrían a ser las páginas mas relevantes de la página.

Otro de los objetivos de la propuesta del wireframe, es crear na version responsive, por lo tanto tendrá su propio diseño y arquitectura para la

versión mobile, es por esto que hemos creado Wireframe específicos para los dispositivos moviles.

Hemos simplificado la forma de contacto, que tenía demasiados niveles, y en lugar de distinguir entre particular,profesional,fabricante, en el

mismo nivel hemos agregado, pedidos, consultas,solicitar presupuesto,información general,información fabricantes

El objetivo general de ésta practica, es ampliar la PAC3, y generar los Wireframes, de las principales páginas de adecorarmicasa.es, poniendo en

practica las soluciones propuestas en la pac2, de los errores obtenidos en el estudio heurístico.


Conclusiónhttp://www.adecorarmicasa.es/

La página ha dejado de estar online, y algunas partes de la página no he podido mirar como eran, sobre todo el carrito, por lo que no he podido

hacer un analisis exacto de lo que tenian para poderlo mejorar, he creado el carrito más apropiado según mi criterio.

He podido comprobar, la dificultad para seguir un criterio en todas las páginas , sin que el conjunto total se vea homogeneo, ya que cada parte

de la web tiene que tener elementos concretos, y es muy dificil empastarlo todo y que encima quede responsive.

Con la realización de ésta PAC , he podido comprobar, mas si cabe, la importancia de el estudio heurístico previo que realizamos en la PAC2, en un

primer momento, cuando vi la página por primera vez, me pareció bien, y ha cambiado drásticamente mi punto de vista sobre la página.

El estudio de competencia, me ha venido muy bien a la hora de incorporar nuevos elementos en el Wireframe, y creo que sin éstos dos estudios

realizados en la PAC2, sería imposible poder presentar WIREFRAMES que mejoraran la página.

No obstante, me he dado cuenta lo peligroso que puede ser cambiar la navegación de un sitio, y que no se pierda la identidad de la página, ya

que ésta queda totalmente cambiada aunque sean pequeños cambios los que realicemos


Fuentes Consultadashttp://www.adecorarmicasa.es/

• http://speckyboy.com/2010/01/11/10-completely-free-wireframe-and-mockup-applications/

• http://iainstitute.org/tools/

• http://mockflow.com

• https://cacoo.com/

Materiales sobre herramientas

Materiales y fuentes sobre árboles de contenidos• http://boxesandarrows.com/site-diagrams-mapping-an-information-space/

• http://mosaic.uoc.edu/2013/04/24/nueva-arquitectura-de-la-informacion-de-un-sitio-web-real/

• http://mosaic.uoc.edu/2013/02/27/como-aplicar-la-arquitectura-de-la-informacion-para-mejorar-una-

web/

Materiales y fuentes sobre Wireframes• http://olgacarreras.blogspot.com.es/2007/02/wireframes.html

• http://37signals.com/papers/introtopatterns/

• http://www.boxesandarrows.com/view/the_devils_in_the_wireframes

• http://wireframes.linowski.ca/

• http://carsonified.com/blog/category/web-apps/wireframing/

Diseño movil• http://olgacarreras.blogspot.com.es/2012/12/claves-para-la-web-movil.html

• http://www.hongkiat.com/blog/designing-for-mobile-devices/

• http://www.webcredible.co.uk/user-friendly-resources/web-usability/mobile-guidelines.shtml

• http://mobile.smashingmagazine.com/2011/05/02/a-user-centered-approach-to-mobile-design/

• http://mobile.smashingmagazine.com/2010/11/03/how-to-build-a-mobile-website/

practica arquitectura de la informacion

Documents