Practica Arquitectura de la informacion

Propuesta de Arquitectura de
un sitio web responsive
Árbol de contenidos y
principales Wireframes

AI
PRÁCTICA

Silvia Tormo Britapaja
Grado Multimédia - UOC


cc by-nc-sa
Grado Multimédia: - UOC

ÍNDICE

Propuesta de Wireframe - Página Producto - Mobile

4
5
6
7
8
9
10

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

11

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

12

Árbol de Contenidos
Propuesta de Wireframe - Página Home - Desktop
Propuesta de Wireframe - Página Home - Mobile
Propuesta de Wireframe - Página SubHome - Desktop
Propuesta de Wireframe - Página SubHome - Mobile
Propuesta de Wireframe - Página Producto - Desktop



ÍNDICE
Propuesta de Wireframe - Página Proceso Compra - Desktop
Propuesta de Wireframe - Página Proceso Compra - Mobile
Objetivos
Conclusión
Fuentes Consultadas


13
14
15
16
17


Árbol de contenidos
http://www.adecorarmicasa.es/


4


Propuesta de Wireframe
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ñ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.

Añadimos seccion de destacados
en la home, que nos permitirá
colocar los productos que queramos
promocionar.
Tanto en mobiliario como en
decoración

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


5


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

Página Home -Versión Mobile

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

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


6


Página Subhome - Versión Desktop
He añadido el texto explicativo
de la categoría, tanto para
los usuarios, como para los
navegadores.

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 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


7


Página Subhome - Versión Mobile
Aprovechamos 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.

8


Página Ficha de producto - Versión Desktop
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.

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.

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.


9


Página Ficha de producto - Versión Mobile
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.


10


Página Resultados de búsqueda - Versión Desktop
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.

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


11


Página Resultados de búsqueda - Versión Mobile
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 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


He añadido un sistema de
navegación contextual, para
enseñar más búsquedas de
otros usuarios, y asi poder hacer
retargeting.

12


Página Carrito - Versión Desktop
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.

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

Agregamos un sistema de
navegación contextual, a modo de
“retargeting” ofreciendo un último
descuento al usuario sobre una
seleccion de objetos gancho


13


Página Carrito - Versión Mobile


14


Objetivos
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.

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


15


Conclusión
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


16


Fuentes Consultadas

Materiales sobre herramientas
•
•
•
•

http://speckyboy.com/2010/01/11/10-completely-free-wireframe-and-mockup-applications/
http://iainstitute.org/tools/
http://mockflow.com
https://cacoo.com/

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-unaweb/

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/


17


Practica Arquitectura de la informacion

Recomendados

Recomendados

Más contenido relacionado

Destacado

Destacado (18)

Similar a Practica Arquitectura de la informacion

Similar a Practica Arquitectura de la informacion (20)

Practica Arquitectura de la informacion