Arbre de continguts i wireframe per a escriptori i mòbil

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