Arquitectura de la Informacin

[PRCTICA]

Ana Cartamil Bueno

Propuesta de arquitectura de un sitio web

responsivo:

rbol de contenidos y principales

wireframes

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.

http://www.tic.com.uy/

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:

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

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.

-

al usuario en los dispositivos mviles.

Estrellas de

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.

http://www.phonehouse.es/https://www.telecor.es/pub?00000117LTWPhttp://es.t-mobile.com/http://www.superandroide.es/es/http://www.samsung.com/es/consumer/mobile-phone/smartphones/galaxy/GT-S7390RWAPHE

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

I lustracin 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.