Arquitectura de la Informacin

[PEC 3]

Ana Cartamil Bueno

Propuesta de arquitectura de un sitio web

responsivo:

rbol de contenidos y wireframe para

escritorio y mvil

Parte I. Creacin de un nuevo rbol de contenidos del sitio web ....................................... 2

Parte II. Definicin de un wireframe de una pgina de detalle ........................................... 6

Wireframe para escritorio ................................................................................................. 7

Wireframe para mvil ...................................................................................................... 11

Parte III. Listado de los objetivos ........................................................................................ 16

Referencias ........................................................................................................................... 17

Tras haber estudiado y evaluado previamente el sitio web http://www.tic.com.uy/, es el

momento de realizar una propuesta de arquitectura para el mismo.

En primer lugar, se crea un nuevo rbol de contenidos que sustituir al anterior. Consta

de cuatro niveles de profundidad, siendo el primero la pgina de inicio del sitio web, y

organiza los contenidos de forma ms efectiva que el anterior, de forma que los contenidos

se muestran correctamente agrupados y los mens son coherentes con estos. Esto permite

dar solucin a otros problemas observados anteriormente en el funcionamiento de la web

que impedan al usuario un uso fluido de las distintas pginas por las que navegaba.

Se han organizado los mens y las pginas que alojan de forma que permitan al usuario

encontrar fcilmente el producto que pueda estar buscando. Algunos mens de la web se

han modificado o suprimido (el blog, por ejemplo, ya que no funciona) y se han creado

nuevas opciones de navegacin a pie de pgina que permiten al usuario realizar

determinadas consultas acerca de la empresa. Adems, se han aadido opciones de cambio

de idioma y divisa para navegar por el site.

Siendo as, en las siguientes ilustraciones se muestran las distintas partes del nuevo rbol

de contenidos del sitio web.

Ilustracin 1. Leyenda del rbol de contenidos del sitio web.

Ilustracin 2. rbol de contenidos del sitio web (principal).

Ilustracin 3. rbol de contenidos del sitio web (bsqueda).

Ilustracin 4. rbol de contenidos del sitio web (mi cuenta).

Ilustracin 5. rbol de contenidos del sitio web (carrito).

Ilustracin 6. rbol de contenidos del sitio web (celulares).

Ilustracin 7. rbol de contenidos del sitio web (tablets).

Ilustracin 8. rbol de contenidos del sitio web (accesorios).

El wireframe diseado corresponde a la pgina en la que se muestra la ficha de un telfono

mvil, concretamente el Samsung Galaxy Trend Lite (GT-S7390). Para llevarlo a cabo se ha

tomado como base el nuevo rbol de contenidos y los datos existentes tanto en el propio

sitio web original como en pginas de otras compaas de telefona mvil (Phone House,

Telecor, T-Mobile, Superandroide, Samsung).

Algunos de los elementos clave del wireframe son los siguientes:

Icono tradicional de Home, representando la pgina de inicio de la web en los dispositivos mviles.

Icono que representa el men de la web en dispositivos mviles, de forma que sea intuitivo y se ahorre espacio.

Lupa que indica que el espacio anterior al que va unido es para realizar bsquedas en el sitio web.

Silueta de parte de una persona que simboliza al usuario, su cuenta dentro de la web.

Icono de un carrito de la compra que representa tal proceso. Dentro del crculo se mostrara un nmero al usuario: sus productos en el carrito.

Smbolo de opciones, como el conocido para los ajustes en los telfonos mviles. A travs de l se puede cambiar el idioma y/o la divisa.

Flechas. Permiten el desplazamiento/deslizamiento entre las imgenes del producto. En gris significa que no puede seguirse en ese sentido.

Crculos que indican el nmero de imgenes entre las que el usuario se puede desplazar. El relleno es negro cuando es el seleccionado.

Estrella que simboliza lo favorito. Permitira al usuario aadir el producto a su lista de favoritos.

Botn para compartir el contenido en redes sociales.

Smbolos + y -. Botones que permiten abrir/cerrar una seccin u otra al usuario en los dispositivos mviles.

Estrellas de calificacin. La llena suma calificacin mientras que la vaca supone que no se llega la calificacin correspondiente.

Tabla 1. Descripcin de algunos elementos clave del wireframe.

De esta forma, los distintos wireframes para escritorio y mvil de esta pgina son los que se

muestran en figuras de las pginas siguientes.

Wireframe para escritorio

Ilustracin 9. Wireframe de la pgina para escritorio (muestra "especificaciones").

Ilustracin 10. Wireframe de la pgina para escritorio (muestra "productos similares" y las opciones de idioma y divisa).

Ilustracin 11. Wireframe de la pgina para escritorio (muestra"accesorios relacionados" y las opciones de compartir).

Ilustracin 12. Wireframe de la pgina para escritorio (muestra "opiniones")

Wireframe para mvil

Ilustracin 13. Wireframe de la pgina para mvil.

Ilustracin 14. Wireframe de la pgina para mvil (muestra "especificaciones" y opciones de idioma y divisa).

Ilustracin 15. Wireframe de la pgina para mvil (muestra "productos similares" y las opciones de compartir).

Ilustracin 16. Wireframe de la pgina para mvil (muestra "accesorios relacionados" y men).

Ilustracin 17. Wireframe de la pgina para mvil (muestra "opiniones").

Los objetivos que se pretenden conseguir con el nuevo rbol de contenidos y el wireframe

mostrados anteriormente son los siguientes:

Hacer de la web un sitio ms intuitivo, predecible, agradable, fcil de usar, y mucho

ms eficiente desde el punto de vista comercial.

Ofrecer al usuario la mayor cantidad de informacin posible empresa, polticas o

normativas, productos sin sobrecargarlo, de forma que cada informacin se

encuentre correctamente distribuida en la pgina y sea l quien decida cul

consultar.

Que el usuario mantenga siempre una referencia de navegacin clara y sepa dnde

se encuentra ubicado, de dnde viene y adnde puede ir. Esto se pretende lograr

haciendo que cada pgina del sitio tenga los mismos elementos comunes (cabecera

y pie), sin prevalecer ninguno de ellos sobre los dems, y breadcrumbs sencillos pero

claros.

Permitir que el usuario pueda filtrar los productos segn sus intereses particulares

y refinar sus bsquedas para que logre encontrar ms fcilmente lo que busca sin

necesidad de perder tiempo buscando pgina por pgina del total del catlogo de

productos.

Llegar mejor al usuario a travs de trminos ms cercanos, como el nombre

coloquial de los productos en lugar de su nombre tcnico. Un ejemplo de ello sera

escribir Samsung Galaxy Trend Lite en lugar de hacer uso nicamente de su

denominacin tcnica, GT-S7390).

Convertir en responsivo el sitio web, de forma que el usuario pueda emplearlo en

cualquier dispositivo aprovechando al mximo sus posibilidades.

Adrian (2014). Responsive Web Design: 50 Examples and Best Practices [artculo en lnea].

[Fecha de consulta: 12 de noviembre de 2014].

Carreras, Olga (2011). Wireframes [artculo en lnea]. [Fecha de consulta: 12 de noviembre

de 2014].

Duffield, Carl (2011). How to read a wireframe [artculo en lnea]. [Fecha de consulta: 12

de noviembre de 2014].

Duffield, Carl (2011). How to evaluate a wireframe [artculo en lnea]. [Fecha de consulta:

12 de noviembre de 2014].

Duffield, Carl (2011). How to design a wireframe [artculo en lnea]. [Fecha de consulta:

12 de noviembre de 2014].

Garrett, Jesse (2002). Un vocabulario visual para describir arquitectura de informacin y

diseo de interaccin [artculo en lnea]. [Fecha de consulta: 12 de noviembre de

2014].

gr_maggi (2013). Diez cosas que necesitas saber acerca del Diseo Responsivo (Parte I)

[artculo en lnea]. [Fecha de consulta: 12 de noviembre de 2014].

Howard, Clive (2009). 20 steps to better wireframing [artculo en lnea]. [Fecha de consulta:

12 de noviembre de 2014].

Office of Communications, Princeton University (2008). Guide to Creating Website.

Information Architecture and Content [documento en lnea]. [Fecha de consulta: 12

de noviembre de 2014].

Withrow, Jason (2004). Site Diagrams: Mapping an Information Space [artculo en lnea].

[Fecha de consulta: 12 de noviembre de 2014].

Wroblewski, Luke (2012). Responsive Navigation: Optimizing for Touch Across Devices

[artculo en lnea]. [Fecha de consulta: 12 de noviembre de 2014].