2014
Propuesta de arquitectura: www.revolutum.com ARQUITECTURA DE LA INFORMACIÓN – PAC3NÚRIA ESPINOZA
PROPUESTA DE ARQUITECTURA: WWW.REVOLUTUM.COM
Índice BLOQUE 1: PROPUESTA PARA NUEVO ÁRBOL DE CONTENIDOS .................................................. 2 BLOQUE 2: WIREFRAMES .............................................................................................................. 3 MÓVIL (320x480): ..................................................................................................................... 3 MÓVIL (FULL SCREEN) ............................................................................................................... 4 ESCRITORIO (1024x768) ............................................................................................................ 5 ESCRITORIO (FULL SCREEN) ....................................................................................................... 5 BLOQUE 3: OBJETIVOS .................................................................................................................. 6 ANEXOS ......................................................................................................................................... 7 MINDMAP ................................................................................................................................. 7 PRIMER BOCETO DE WIREFRAME ............................................................................................. 8 BIBLIOGRAFÍA ................................................................................................................................ 9
1
PROPUESTA DE ARQUITECTURA: WWW.REVOLUTUM.COM
BLOQUE 1: PROPUESTA PARA NUEVO ÁRBOL DE CONTENIDOS
Las líneas discontinuas indican dependencia y/o relación entre esas páginas. Revisable dependiendo de las tecnologías y presupuesto disponibles.
2
PROPUESTA DE ARQUITECTURA: WWW.REVOLUTUM.COM
BLOQUE 2: WIREFRAMES MÓVIL (320x480):
Al pulsar sobre el menú (las tres rayas horizontales) se despliega un menú lateral que desplaza la página a la derecha. El menú no llega a ocupar toda la pantalla para no confundir al usuario.
3
PROPUESTA DE ARQUITECTURA: WWW.REVOLUTUM.COM
Mร VIL (FULL SCREEN)
En la versiรณn mรณvil el catรกlogo gana visibilidad frente a otros elementos del รกrbol
4
PROPUESTA DE ARQUITECTURA: WWW.REVOLUTUM.COM
ESCRITORIO (1024x768)
ESCRITORIO (FULL SCREEN)
5
PROPUESTA DE ARQUITECTURA: WWW.REVOLUTUM.COM
BLOQUE 3: OBJETIVOS Tras el análisis realizado en la evaluación pasada, hemos realizado un rediseño del plan de relación online con nuestros clientes y potenciales clientes que se refleja en el diseño de nuestra página:
La ficha de usuario (iniciar sesión / crear nueva sesión) siempre visible: o Facilidad de uso de la página o Intentar que nuestros usuarios creen cuentas, hayan comprado o no. o Podremos generar con el tiempo una base de datos y conocer mejor a nuestros clientes (quizás a futuro haremos un enlace con un CRM si no lo realizamos ya). Carrito de la compra siempre visible, el usuario ha de percibir que comprar aquí es sencillo y rápido. Creación de una comunidad a través de la página web: la página ahora ofrece un valor añadido: o Comentarios, redes sociales (compartir), fotografías de usuarios… o Plan de fidelización: puntos por compras. Gracias a este valor añadido, podremos realizar una escucha activa de nuestros usuarios. La búsqueda se potencia, nuestro módulo de búsqueda es imprescindible. Lo situamos siempre visible para: o La inclusión de un asistente de búsqueda y del módulo de artículos relacionados permitirá que los usuarios se interesen por nuevos objetos aunque no fueran los que buscaban inicialmente. o El usuario percibirá que se le facilita el uso de la página si la búsqueda es rápida y ágil. Imagen gráfica: o Tras el estudio de una nueva imagen gráfica, los banners que se realicen seguirán una línea de estilo propia. o El usuario se sentirá atraído por las animaciones y coloridos de los slides y los banners con descuentos y destacados. o Percepción visual agradable y natural para el usuario. Los menús son extremadamente sencillos (palabras cortas, evitamos frases muy largas y dobles significados) para facilitar una navegación intuitiva y sin confusiones. o En su versión móvil, el menú no ocupará en ningún caso toda la pantalla para evitar que el usuario se sienta confuso y perdido. o En su versión móvil, el árbol se modificará ligeramente para enfocarse en el catálogo. Transparencia: nuestra tienda y la información sobre nosotros y la seguridad de los procesos de compra siempre estarán visibles en la página.
En resumen, gracias al nuevo diseño conseguiremos: branding poner a nuestro usuario como estrella de la página.
6
PROPUESTA DE ARQUITECTURA: WWW.REVOLUTUM.COM
ANEXOS MINDMAP
7
PROPUESTA DE ARQUITECTURA: WWW.REVOLUTUM.COM
PRIMER BOCETO DE WIREFRAME
Boceto descartado debido a que no reflejaba suficiente el componente social secundario de la pรกgina
8
PROPUESTA DE ARQUITECTURA: WWW.REVOLUTUM.COM
BIBLIOGRAFÍA
Morville & Rosenfeld (2012) “Arquitectura de la información per al World Wide Web” (Fundació per a la Universitat Oberta de Catalunya)
CB Creative Blog (2013) “The 8 biggest responsive web design problems (and how to avoid them)” < http://www.creativebloq.com/responsive-webdesign/problems-8122790 > [Fecha de consulta: 09/11/2014]
James Mellers (2012) “Responsive layouts, responsively wireframed: an experiment & call for new tooling” < http://www.thismanslife.co.uk/projects/lab/responsivewireframes/> [Fecha de consulta: 09/11/2014]
Joshua Johnson (2013) “Mobile first design: Why it’s great and why it sucks” < http://designshack.net/articles/css/mobilefirst/ > [Fecha de consulta: 16/11/2014]
Herramientas utilizadas para la creación de las propuestas: a. b. c. d.
Mindmap: http://mind42.com/ Árbol y wireframes (finales): https://cacoo.com/ Wireframes (inicial): https://gomockingbird.com/ Recorte de imágenes: CS6 Photoshop
9