Propuesta de arquitectura de un sitio web

responsivo:
rbol de contenidos y principales
wireframes

Arquitectura de la Informacin

[PRCTICA]
Ana Cartamil Bueno

Parte I. rbol de contenidos del sitio web ............................................................................ 2

Parte II. Definicin de los wireframes principales ................................................................ 6
Wireframe del Home ......................................................................................................... 7
Wireframe del Subhome (pgina de la seccin de mviles) ........................................... 10
Wireframe de detalle (ficha de un mvil) ....................................................................... 17
Wireframe de resultado de bsqueda y filtrado ............................................................. 26
Wireframe del proceso de compra .................................................................................. 33
Parte III. Listado de objetivos .............................................................................................. 35
Parte IV. Opinin personal sobre la experiencia ................................................................ 36
Referencias ........................................................................................................................... 37

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

Los wireframes diseados corresponden a las pginas de inicio del site, al subhome (pgina
de la seccin Celulares), a una pgina de la ficha de un telfono mvil, a una pgina en
la que se muestran resultados de bsqueda filtrados y a la pgina del proceso de compra.
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 de los wireframes 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 cada pgina son los que
se muestran en las figuras siguientes.

Wireframe del Home

Ilustracin 9. Wireframe del home para escritorio (muestra opciones de idioma y divisa).

Ilustracin 10. Wireframe del home para mvil.

Ilustracin 11. Wireframe del home para mvil (muestra el men desplegado).

Wireframe del Subhome (pgina de la seccin de mviles)

Ilustracin 12. Wireframe del subhome para escritorio (muestra el desplegable del filtro "marca").

Ilustracin 13. Wireframe del subhome para escritorio (muestra el desplegable del filtro "sistema").

Ilustracin 14. Wireframe del subhome para escritorio (muestra el desplegable del filtro "precio").

Ilustracin 15. Wireframe del subhome para escritorio (muestra el desplegable del filtro "funcionalidades").

Ilustracin 16. Wireframe del subhome para mvil (muestra el desplegable del filtro "marca").

Ilustracin 17. Wireframe del subhome para mvil (muestra el desplegable del filtro "OS").

Ilustracin 18. Wireframe del subhome para mvil (muestra el desplegable del filtro "precio").

Wireframe de detalle (ficha de un mvil)

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

Ilustracin 20. Wireframe de la pgina para escritorio (muestra "productos similares").

Ilustracin 21. Wireframe de la pgina para escritorio (muestra "accesorios relacionados").

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

Ilustracin 23. Wireframe de la pgina para mvil.

Ilustracin 24. Wireframe de la pgina para mvil (muestra "especificaciones").

Ilustracin 25. Wireframe de la pgina para mvil (muestra "productos similares").

Ilustracin 26. Wireframe de la pgina para mvil (muestra "accesorios relacionados").

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

Wireframe de resultado de bsqueda y filtrado

Ilustracin 28. Wireframe de resultado de bsqueda y filtrado para escritorio.

Ilustracin 29. Wireframe de resultado de bsqueda y filtrado para escritorio (filtro de "sistema").

Ilustracin 30. Wireframe de resultado de bsqueda y filtrado para escritorio (filtros de "sistema" y "precio").

Ilustracin 31. Consecucin del wireframe de resultado de bsqueda y filtrado para escritorio.

Ilustracin 32. Wireframe de resultado de bsqueda y filtrado para mvil.

Ilustracin 33. Wireframe de resultado de bsqueda y filtrado para mvil (filtro de "OS").

Ilustracin 34. Wireframe de resultado de bsqueda y filtrado para mvil (filtro de "OS" y "precio").

Wireframe del proceso de compra

Ilustracin 35. Wireframe del proceso de compra para escritorio.

Ilustracin 36. Wireframe del proceso de compra para mvil.

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, o combinar ambos para mayor claridad.

Suprimir productos duplicados (mismos productos en colores diferentes).

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

cualquier dispositivo aprovechando al mximo sus posibilidades.

La experiencia ha sido altamente interesante. Siempre he criticado determinados sitios web

por no ajustarse a lo que necesitan los usuarios pero nunca me haba planteado cmo era
realmente el trabajo que haba detrs ni mucho menos la cantidad de personas que es
necesario que trabajen en ello para que uno slo no trabaje ms all de sus posibilidades
de habilidad y tiempo. Todo el trabajo llevado a cabo acerca de este sitio web me ha
supuesto un tiempo de anlisis, planificacin y ejecucin inmenso, aunque, por suerte, slo
ha sido una pequea parte de lo que realmente hace un arquitecto de la informacin. Esta
experiencia ha hecho que ahora me fije mucho ms en los sitios web, exprimiendo mi
capacidad de observacin y analizando los sitios desde otro punto de vista.
Pienso que el sitio web analizado podra mejorar sustancialmente si se aplicaran mis
propuestas, aunque tambin estoy segura de que existen muchas ms posibilidades de
mejora similares o totalmente diferente a las que he aplicado, ya que todo depende de la
empresa y los clientes y, en este caso, desconocemos sus intereses exactos a pesar de poder
suponerlos.
Al comienzo de la asignatura no saba en qu consista la arquitectura de la informacin a
pesar de que siempre la haya tenido delante y la haya usado de una forma u otra. Los
conceptos tericos parecan algo complejos al principio, pero avanzando y visualizndolos
en la prctica resulta mucho ms fcil comprenderlo todo.

Adrian (2014). Responsive Web Design: 50 Examples and Best Practices [artculo en lnea].
[Fecha de consulta: 12 de noviembre de 2014].
<http://designmodo.com/responsive-design-examples>
Carreras, Olga (2011). Wireframes [artculo en lnea]. [Fecha de consulta: 12 de noviembre
de 2014].
<http://olgacarreras.blogspot.com.es/2007/02/wireframes.html>
Duffield, Carl (2011). How to read a wireframe [artculo en lnea]. [Fecha de consulta: 12
de noviembre de 2014].
<http://blog.fuzzymath.com/2011/07/12/how-to-read-a-wireframe>
Duffield, Carl (2011). How to evaluate a wireframe [artculo en lnea]. [Fecha de consulta:
12 de noviembre de 2014].
<http://blog.fuzzymath.com/2011/07/19/how-to-evaluate-a-wireframe>
Duffield, Carl (2011). How to design a wireframe [artculo en lnea]. [Fecha de consulta:
12 de noviembre de 2014].
<http://blog.fuzzymath.com/2011/07/26/how-to-design-a-wireframe>
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].
<http://www.jjg.net/ia/visvocab/spanish.html>
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].
<http://activ.com.mx/diez-cosas-que-necesitas-saber-acerca-del-diseno-responsivoparte-i>
Howard, Clive (2009). 20 steps to better wireframing [artculo en lnea]. [Fecha de consulta:
12 de noviembre de 2014].
<http://blog.teamtreehouse.com/20-steps-to-better-wireframing>
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].
<http://www.princeton.edu/communications/services/docs/IAguide2.pdf>
Withrow, Jason (2004). Site Diagrams: Mapping an Information Space [artculo en lnea].
[Fecha de consulta: 12 de noviembre de 2014].
<http://boxesandarrows.com/site-diagrams-mapping-an-information-space>
Wroblewski, Luke (2012). Responsive Navigation: Optimizing for Touch Across Devices
[artculo en lnea]. [Fecha de consulta: 12 de noviembre de 2014].
<http://www.lukew.com/ff/entry.asp?1649>