Sie sind auf Seite 1von 6

Árbol de contenidos,

wireframe y objetivos

PAC 3

Rubén Mejias Alonso

CC BY - NC - SA 2.0
Índice

1. Árbol de contenidos 3
1.1 Principal 3
1.2 Sistemas de navegación 3

2. Wireframe 4
2.1 Wireframe menús desplegables 5

3. Objetivos 5

4. Bibliografía 6
4.1 Recursos web 6
4.2 Imágenes 6

Arquietectura de la información - PAC 3 Página 2


Rubén Mejias Alonso
1. Árbol de contenidos

1.1 Principal

1.2 Sistemas de navegación

Arquietectura de la información - PAC 3 Página 3


Rubén Mejias Alonso
2. Wireframe Función de búsqueda
por precio y nombre Resúmen de la compra
Eslogan y logotipo
reubicados. El logo
vuelve a inicio. Selector de idioma

Navegación global. Breadcumbs


Siempre visible
y con menús
desplegables

Cuadro de registro
{ { Cuadro de

{
compra y redes
sociales

Fotografía
principal
del producto.
Navegación local Se incluyen las
Menús desplegables opcines de
zoom in
y zoom out, así
como una función

{
para seleccionar
que fotografía
queremos ver

Navegación local
Menús desplegables

Navegación local

{
Navegación contextual.
Cambia en función del
historial de compra del
cliente

Pie de página

{
Arquietectura de la información - PAC 3 Página 4
Rubén Mejias Alonso
{
2.1 Wireframe menús desplegables

Ejemplo de menú
desplegable en el
sistema de navegación
local. Los enlaces que
visitamos quedan
marcados.

3. Objetivos

Gracias al análisis y estudio realizado en la anterior Pac sobre el sitio web www.revolutum.com hemos podido comprobar las graves carencias que mostraba la web,
tanto en las estructuras de organización como en los sistemas de navegación, etiquetaje y diseño.

Para solucionar dichas carencias y proporcionar nuevas ideas para la web, nos hemos basado en el estudio de Benchmarking y las sugerencias recibidas por parte
de la consultora. Han sido creados un nuevo árbol de navegación y un wireframe. El nuevo árbol de contenido permitirá al usuario el acceso a todas las partes de la
página facilitándole su experiencia de navegación, ya que la web no disponía de ningún tipo de sistema de navegación complementario.

Las propuestas para mejorar la arquitectura de la web son las siguientes. Las estructuras de organización jerárquicas como la navegación global o hipertextual han
sido modificadas. Se han reestructurado las categorías y los contenidos de los sistemas de navegación global y navegación local haciéndolos más claros e intuitivos.
La navegación local se muestra separada por bloques para facilitar la búsqueda de contenidos mientras que la global muestra las cinco principales categorías, en
ambos sistemas utilizaremos menús desplegables para mostrar las diferentes subcategorías.

Como podemos ver en las nuevas fichas de producto que se muestran en el wireframe, el modelo de base de datos también ha sufrido cambios, tanto a nivel de
contenido como de diseño. Ahora las descripciones y características están claramente diferenciadas, se ha añadido una sección donde los usuarios pueden compar-
tir su experiencia y valorar el producto adquirido. Hay que añadir que sería necesario contactar con los responsables de la página para enriquecer el contenido que
se muestra en dichos apartados, ya que las características de los productos son insuficientes y se tiende a mezclarlas con las descripciones.

Por otro lado, se ha creado una pequeña sección que aglutina los procesos de compra. Ahora es posible seleccionar la cantidad y añadirla al carrito al mismo
tiempo que se muestra el precio final con los gastos de envío. También se han incluido las funciones sociales de Facebook y Twitter por si el usuario quiere dar su
voto en las redes. Finalmente se ha incluido un sistema de navegación contextual al final de la ficha con imágenes de productos que le puedan interesar al usuario y
conseguir un mayor dinamismo en su experiencia de navegación.

Finalmente hemos movido del final al principio el cuadro donde los usuarios se registran o dan de alta, para que sea visible al acceder a la página sin la necesidad
de utilizar el desplazamiento horizontal para encontrarlo. Por otro lado, hemos optimizado el espacio tanto en la cabecera como en el pie de página. En la cabece-
ra se ha reubicado el eslogan y el logotipo con la intención de que sean más visibles y claros, hemos integrado la función de búsqueda, añadido un resumen de lo
que contiene nuestro carrito y tres nuevas funciones para poder seleccionar el idioma en el que visualizaremos la web. Hemos reestructurado todo el pie de pági-
na añadiendo cuatro categorías, haciendo especial hincapié en las razones legales y las políticas de la empresa, ya que en la web original apenas existe este tipo de
información

Arquietectura de la información - PAC 3 Página 5


Rubén Mejias Alonso
4. Bibliografía
Morville, Peter i Rosenfeld, Louis (2012). Arquitectura de la información per a la World Wide Web.
Barcelona. © Fundació per a la Universitat Oberta de Catalunya.

Gil Rodríguez, E. Patricia, de Lera Tatjer, Eva y Monjo Palau, Antònia. Usuaris y sistemes
interactius. © Fundació per a la Universitat Oberta de Catalunya.

4.1 Recursos web


Wikipedia. Arquitectura de la información [en línea]. 27 de octubre de 2014. Disponible en internet en:
http://es.wikipedia.org/wiki/Arquitectura_de_la_informacion

Olga Carreras. Wireframes [en línea] 14 de Noviembre de 2014. Disponible en internet en :


http://olgacarreras.blogspot.com.es/2007/02/wireframes.html

Boxesandarrows. [en linea] 12 de Noviembre de 2014. Disponible en internet en :


http://boxesandarrows.com/site-diagrams-mapping-an-information-space/

Vocabulari visual. [en línea] 12 de Noviembre de 2014. Disponible en internet en :


http://www.jjg.net/ia/visvocab/spanish.html

20 steps to better wireframing [en línea] 12 de Noviembre de 2014. Disponible en internet en :


http://blog.teamtreehouse.com/20-steps-to-better-wireframing

How to read a wireframe [en línea] 12 de Noviembre de 2014. Disponible en internet en :


http://blog.fuzzymath.com/2011/07/12/how-to-read-a-wireframe

4.2 Imágenes
Portada. arbol. Nisa Arce (2009). Con licencia Attribution-NonCommercial-ShareAlike 2.0 Generic
(CC BY-NC-SA 2.0). Extraida de flickr el 17 de Octubre de 2014
https://www.flickr.com/photos/nisarce/3212674331/in/photolist-mAJvsV-9T9p26-bFrWbH-2VGoYy-7fczVu-
94ZmfV-3bhsRT-7rEQvy-WWJoK-cT8cPW-cT87XC-dadSCi-7FG43S-9s5QMs-kuqur-5TTN9K-5TTSb6-
2YsU5Z-5eip4Z-bCa4eK-emfoAx-7TdiCc-oiJ81A-7G6b9Q-97snq7-97pfyz-Fber6-bgqFAx-eN9zLM-5BVxk4-
56xuvy-9B4hqY-5BVqta-5BVmST-o9uWHm-dMJ9Vv-dMPHks-7RDaue-2ro8G9-4CKVaJ-5BZLUA-4-
o4gUM-4HwQQw-5knBTz-mQaKta-dsrzgd-7Exf1m-4mgG8o-fjdMLW-ErN3N

El resto de imágenes son propias.

Arquietectura de la información - PAC 3 Página 6


Rubén Mejias Alonso