Proposta d’arquitectura d’un lloc web responsiu: Arbre de continguts i wireframe per a escriptori i mòbil Arquitectura de la Informació Pere Amengual Gomila PAC 3 - Abril 2014 www.artehabitat.com Índex Arbre de continguts ............................................................................................................................................................................................................................................. 3 Wireframe d’una pàgina de detall ................................................................................................................................................................................................................... 5 Objectius de la proposta .................................................................................................................................................................................................................................... 7 - Annex: documents originals 2 www.artehabitat.com Arbre de continguts Leyenda Home 1.0 página pila de páginas (funcionalmente idénticas) utilidades páginas con atributos comunes enlace externo Ayuda Buscar 1.15 1.16 Entrar/ Registro Carrito de compra 1.17 1.18 categorias de productos Dormitorio matrimonio Salón Sofás y sillones Auxiliar 1.1 1.2 1.3 Subcategorias y filtro Subcategorias y filtro Subcategorias y filtro Subcategorias y filtro 2.1 - 2.n 2.1 - 2.n 2.1 - 2.n 2.1 - 2.n 1.4 Dormitorio juvenil Descanso Decoración Oficina Exterior Baños Cocinas Novedades Más valorados 1.6 1.7 1.8 1.9 1.10 1.11 1.12 1.13 Subcategorias y filtro Subcategorias y filtro Subcategorias y filtro Subcategorias y filtro Subcategorias y filtro Subcategorias y filtro Subcategorias y filtro Subcategorias y filtro Subcategorias y filtro 2.1 - 2.n 2.1 - 2.n 2.1 - 2.n 2.1 - 2.n 2.1 - 2.n 2.1 - 2.n 2.1 - 2.n 2.1 - 2.n 2.1 - 2.n 1.5 Ficha producto 3.1 - 3.n Filtro productos 1.14 información de envío 1.25 preguntas s/ productos 4.1 3 www.artehabitat.com Leyenda página pila de páginas (funcionalmente idénticas) Home 1.0 páginas con atributos comunes enlace externo redes sociales Lista correo 1.15 Facebook 1.16 conózcanos ¿necesita ayuda? información legal sobre nosotros cupones descuento datos fiscales 1.20 1.24 nuestros servicios información de envío 1.21 Twitter contacto 1.17 1.22 Google+ nuestras tiendas 1.18 1.23 1.28 condiciones de venta 1.25 1.29 ¿dónde está mi pedido? aviso legal 1.26 mapa del sitio 1.27 1.30 política de cookies 1.31 Instagram 1.19 ficha tienda 2.1 - 2.n 4 www.artehabitat.com Wireframe d’una pàgina de detall Teléfono de atención al cliente 999 99 99 99 Ayuda Buscar Entrar/Registro Carrito de compra Oficina Baños LOGO Salón Sofás y sillones Arte Hábitat Auxiliar Dormitorio matrimonio Dormitorio juvenil Descanso Decoración Exterior Cocinas breadcrumb Sillón Boris EUR 525 Els wireframes es poden accedir a la adreça web següent: http://graumultimedia.com/treballs/ai/pac3/index.html cantidad iconos disponibilidad Añadir al carro Sillón elegante y ligero gracias a su base giratoria. Dotado de reposapies y asiento reclinable para adaptarlo a la postura deseada, además de una base giratoria realizada completamente en acero inoxidable. Especificaciones Foto del producto ampliada Armazón: madera de pino. Patas: metálicas. Asiento: 35 kg. respaldo: espuma de poliuretano. Suspensión asiento: muelle. Brazo: 10 cm. Opciones color estampado iconos valoración Foto Producto 1 Foto Producto 2 Foto Producto 3 Foto Producto 4 Foto Producto 5 Foto Producto 6 acabados Valore este producto información de envío ¿tiene alguna pregunta? Quizás también le interese... Alternativa 1 Sillón Boris Sillón Boris Sillón elegante y ligero gracias a su base giratoria Sillón elegante y ligero gracias a su base giratoria Alternativa 2 EUR 525 Lista de correo introduzca su email dar de alta Redes sociales Red 1 Red 2 Red 3 Red 4 EUR 525 Sillón Boris Alternativa 3 Sillón elegante y ligero gracias a su base giratoria EUR 525 Conózcanos ¿Necesita ayuda? Información legal sobre nosotros cupones de descuento datos fiscales nuestros servicios información de envío condiciones de venta contacto ¿dónde está mi pedido? aviso legal nuestras tiendas mapa del sitio política de cookies ir al sitio para móviles 5 www.artehabitat.com Logo artehabitat Logo artehabitat Menú Carro Carro EUR 525 Carro comprar Sillón Boris EUR 525 Sillón Boris foto producto Especificaciones + Opciones + Valore este producto red 1 red 2 breadcrumb comprar Sillón Boris comprar foto producto Descripción Sillón elegante y ligero gracias a su base giratoria. Dotado de reposapies y asiento reclinable para adaptarlo a la postura deseada, además de una base giratoria realizada completamente en acero inoxidable. EUR 525 iconos valoración foto producto Descripción + EUR 525 iconos valoración foto producto Descripción Carro buscar breadcrumb comprar iconos valoración iconos valoración Menú buscar breadcrumb breadcrumb Logo artehabitat Menú buscar buscar Sillón Boris Logo artehabitat Menú + Especificaciones Especificaciones + Armazón: madera de pino. Patas: metálicas. Asiento: 35 kg. respaldo: espuma de poliuretano. Suspensión asiento: muelle. Brazo: 10 cm. Opciones + Opciones Descripción + Especificaciones + Opciones color estampado acabados botó amb estrelles red 3 + red 4 Valore este producto botó amb estrelles Valore este producto botó amb estrelles Valore este producto botó amb estrelles Quizás también le interese... red 1 alternativa 1 alternativa 2 + red 2 ¿dónde está mi pedido? ir a la versión de escritorio red 4 Quizás también le interese... alternativa 1 contacto red 3 alternativa 2 ¿dónde está mi pedido? ir a la versión de escritorio red 2 red 3 red 4 Quizás también le interese... + aviso legal contacto red 1 aviso legal alternativa 1 contacto alternativa 2 ¿dónde está mi pedido? ir a la versión de escritorio red 1 red 2 red 3 red 4 Quizás también le interese... + aviso legal alternativa 1 contacto alternativa 2 ¿dónde está mi pedido? + aviso legal ir a la versión de escritorio 6 www.artehabitat.com Objectius de la proposta El criteri més important que s’ha tingut en compte a l’hora d’el·laborar 5) Gairebé totes les pàgines es poden accedir des de la plana principal. els documents a entregar ha estat el de facilitar al màxim la venda, La correcta separació entre navegació principal i les secundàries ho eliminant aquells contingut poc integrats (blog, notícies) i facilitant la permet realitzar sense confondre a l’usuari amb excessives opcions. navegació d’un producte cap a un altre, mitjançat les següents accions: 6) En el segon nivell de navegació, sota les categories de productes, 1) Eliminar una pàgina d’inici “de benvinguda” improductiva de cara a la capacitat de proporcionar informació rellevant a l’usuari fent que la per preu, marca, etc... tenda sigui el punt de partida de tot el lloc 7) En la proposta de navegació per dispositius mòbils, s’han amagat els 2) Eliminar un excés de pàgines i contingut corporatiu en posició prominent. 3) El menú principal s’ha confeccionat amb les categories de productes tenint en compte que l’usuari que visita una tenda de mobles possiblement ja tengui en ment la categoria (o categories) de moble que està cercant. Aquesta navegació és persistent durant tot el lloc web i sempre roman en la mateixa posició i rellevància, el que facilita la orientació dins el lloc. 8) En la proposta de navegació per dispositius mòbils, el contingut de la plana principal és accessible amb un sol botó anomenat “menú”, que xar de mostrar-la. 9) Les opcions de valoració de producte es realitzen amb un sol clic sobre unes estrelles que canvien el seu color. No és necessària la na- 4) La navegació secundària reconeguda amb els nom de “utilidades” vegació a una pàgina de nivell inferior queda sempre accessible en una posició superior; en canvi, altres na10) Es pot realitzar sempre el canvi entre la versió per a mòbils i la de vegacions secundàries com “redes sociales”, “conózcanos”, “¿necesita escriptori. ayuda?” i “información legal” queden en posició inferior, separades del contingut principal 7 www.artehabitat.com Bibliografia i fonts consultades - 8 Leyenda Home 1.0 página pila de páginas (funcionalmente idénticas) utilidades páginas con atributos comunes enlace externo Ayuda Buscar 1.15 1.16 Entrar/ Registro Carrito de compra 1.17 1.18 categorias de productos Dormitorio matrimonio Salón Sofás y sillones Auxiliar 1.1 1.2 1.3 Subcategorias y filtro Subcategorias y filtro Subcategorias y filtro Subcategorias y filtro 2.1 - 2.n 2.1 - 2.n 2.1 - 2.n 2.1 - 2.n 1.4 Dormitorio juvenil Descanso Decoración Oficina Exterior Baños Cocinas Novedades Más valorados 1.6 1.7 1.8 1.9 1.10 1.11 1.12 1.13 Subcategorias y filtro Subcategorias y filtro Subcategorias y filtro Subcategorias y filtro Subcategorias y filtro Subcategorias y filtro Subcategorias y filtro Subcategorias y filtro Subcategorias y filtro 2.1 - 2.n 2.1 - 2.n 2.1 - 2.n 2.1 - 2.n 2.1 - 2.n 2.1 - 2.n 2.1 - 2.n 2.1 - 2.n 2.1 - 2.n 1.5 Ficha producto 3.1 - 3.n Filtro productos 1.14 información de envío 1.25 preguntas s/ productos 4.1 Leyenda página pila de páginas (funcionalmente idénticas) Home 1.0 páginas con atributos comunes enlace externo redes sociales Lista correo 1.15 Facebook 1.16 conózcanos ¿necesita ayuda? información legal sobre nosotros cupones descuento datos fiscales 1.20 1.24 nuestros servicios información de envío 1.21 Twitter contacto 1.17 1.22 Google+ nuestras tiendas 1.18 1.23 Instagram 1.19 ficha tienda 2.1 - 2.n 1.28 condiciones de venta 1.25 1.29 ¿dónde está mi pedido? aviso legal 1.26 mapa del sitio 1.27 1.30 política de cookies 1.31 Teléfono de atención al cliente 999 99 99 99 Ayuda Buscar Entrar/Registro Carrito de compra Oficina Baños LOGO Salón Sofás y sillones Arte Hábitat Auxiliar Dormitorio matrimonio Dormitorio juvenil Descanso Decoración Exterior Cocinas breadcrumb Sillón Boris EUR 525 cantidad iconos disponibilidad Añadir al carro Sillón elegante y ligero gracias a su base giratoria. Dotado de reposapies y asiento reclinable para adaptarlo a la postura deseada, además de una base giratoria realizada completamente en acero inoxidable. Especificaciones Foto del producto ampliada Armazón: madera de pino. Patas: metálicas. Asiento: 35 kg. respaldo: espuma de poliuretano. Suspensión asiento: muelle. Brazo: 10 cm. Opciones color estampado iconos valoración Foto Producto 1 Foto Producto 2 Foto Producto 3 Foto Producto 4 Foto Producto 5 Foto Producto 6 acabados Valore este producto información de envío ¿tiene alguna pregunta? Quizás también le interese... Alternativa 1 Sillón Boris Sillón Boris Sillón Boris Sillón elegante y ligero gracias a su base giratoria Sillón elegante y ligero gracias a su base giratoria Sillón elegante y ligero gracias a su base giratoria Alternativa 2 EUR 525 Lista de correo introduzca su email dar de alta Redes sociales Red 1 Red 2 Red 3 Red 4 EUR 525 Alternativa 3 EUR 525 Conózcanos ¿Necesita ayuda? Información legal sobre nosotros cupones de descuento datos fiscales nuestros servicios información de envío condiciones de venta contacto ¿dónde está mi pedido? aviso legal nuestras tiendas mapa del sitio política de cookies ir al sitio para móviles Logo artehabitat Menú Carro buscar breadcrumb Sillón Boris EUR 525 comprar iconos valoración foto producto Descripción + Especificaciones + Opciones + Valore este producto red 1 red 2 botó amb estrelles red 3 red 4 Quizás también le interese... alternativa 1 contacto alternativa 2 ¿dónde está mi pedido? ir a la versión de escritorio + aviso legal Logo artehabitat Menú Carro buscar breadcrumb Sillón Boris EUR 525 comprar iconos valoración foto producto Descripción Sillón elegante y ligero gracias a su base giratoria. Dotado de reposapies y asiento reclinable para adaptarlo a la postura deseada, además de una base giratoria realizada completamente en acero inoxidable. Especificaciones + Opciones + Valore este producto red 1 red 2 botó amb estrelles red 3 red 4 Quizás también le interese... alternativa 1 contacto alternativa 2 ¿dónde está mi pedido? ir a la versión de escritorio + aviso legal Logo artehabitat Menú Carro buscar breadcrumb Sillón Boris EUR 525 comprar iconos valoración foto producto Descripción + Especificaciones Armazón: madera de pino. Patas: metálicas. Asiento: 35 kg. respaldo: espuma de poliuretano. Suspensión asiento: muelle. Brazo: 10 cm. Opciones + Valore este producto red 1 red 2 botó amb estrelles red 3 red 4 Quizás también le interese... alternativa 1 contacto alternativa 2 ¿dónde está mi pedido? ir a la versión de escritorio + aviso legal Logo artehabitat Menú Carro buscar breadcrumb Sillón Boris EUR 525 comprar iconos valoración foto producto Descripción + Especificaciones + Opciones color estampado Valore este producto red 1 red 2 acabados botó amb estrelles red 3 red 4 Quizás también le interese... alternativa 1 contacto alternativa 2 ¿dónde está mi pedido? ir a la versión de escritorio + aviso legal