Ejercicio unidad 1.10
Realizar un primer análisis de las webs de Zara y de Massimo Dutti y tratar de identificar los principales elementos arquitectónicos que éstas presentan.
Tras ese análisis, tendréis que familiarizaros con una de las dos las herramientas de prototipado (wireframes y blueprints) MockFlow o Gliffy. Podréis encontrar un tutorial de esas dos herramientas entre los documentos de la unidad didáctica.
Una vez familiarizados con la herramienta, existen dos opciones distintas de evaluación:
● Opción A. Utilizando esa herramienta, proponed de forma argumentada cómo podría ser el wireframe de la página web principal de una empresa fabricante de ropa que quiera abrir una nueva línea de negocio a través de las ventas por internet.
● Opción B. Aquellos alumnos que quieran hacer un ejercicio más completo pueden utilizar esta herramienta de prototipado y proponer de forma argumentada, además, un blueprint que incluya los diferentes tipos de contenidos que cuelgan de esa página principal.
Web de Zara
La Web de Zara se caracteriza por una interfaz muy sencilla, en la que las imágenes son las grandes protagonistas. Así, en la página principal, que es la que podemos ver arriba, destaca una gran foto que ocupa toda la pantalla. Desde esta página podemos acceder a todas las demás, a través del menú que tenemos a la izquierda, el cual se irá desplegando a medida que vayamos pinchando en una sección o en otra.
Este menú permanece siempre visible a lo largo de toda la navegación, por lo que siempre nos será muy fácil movernos por las diferentes secciones.
Lo que también permanece estático, siempre visible en el mismo lugar, son los enlaces que aparecen en la parte superior derecha, que corresponden a “Idiomas”, “Identifícate”, “Cesta de la compra” y “Contacto”.
La estructura de la página, en lo que se refiere a las prendas y compras, dejando de lado, por tanto, la información corporativa y de contacto, así como los enlaces a las páginas externas, vendría a ser en líneas generales así:
La página principal nos lleva a la página de cada sección y éstas enlazan con diferentes páginas, dependiendo del tipo de producto que estemos buscando (abrigos, chaquetas, pantalones…), mostrándonos un catálogo de los diferentes artículos.
El diseño siempre es el mismo, la página principal y las páginas principales de cada sección son prácticamente iguales, mientras que las de los distintos productos se identifican por contener numerosas imágenes de los artículos, pudiendo el usuario configurar la página a su gusto, viendo las prendas de dos en dos o de seis en seis:
Además, la página de cada artículo individualizado tiene un enlace para añadir el producto a la cesta de la compra, la cual siempre podremos visualizar pinchando en el link, que como he dicho anteriormente, se encuentra en la parte superior derecha del sitio Web.
Si finalmente decidimos comprar el producto, la “cesta de la compra” nos llevará a un formulario en el que tras añadir nuestros datos, contactará incluso con la página de nuestro banco. Una vez realizada la compra, se generará una factura que podremos descargar en formato PDF.
Tras este primer análisis de la Web de Zara podemos decir que cuenta con una interfaz muy intuitiva, una usabilidad muy alta y por tanto no ofrece ninguna complicación en su navegación ni en su uso, ofreciendo además la posibilidad de visualizarla en varios idiomas.
Aunque en mi análisis me he centrado en las páginas de los productos que ofrece, puesto que he considerado que es el eje principal en torno al que gira toda la Web, hay que decir que también incluye información corporativa, así como sobre las compras y los pagos, la posibilidad de contactar con la empresa, e incluso de echar el cv.
Web de Massimo Dutti
La web de Massimo Dutti es bastante parecida a la de Zara (cabe recordar que pertenecen a la misma empresa: Inditex), aunque un poquito más dinámica y completa. En la página principal encontramos a la izquierda, un menú con enlaces a todas las secciones del sitio Web: Limited Edition, The Equestrian, Women, Men, Boys&Girls, Tarjeta regalo, Campaign, Lookbook, Videos, Experience y Newsletter. En la parte superior derecha, tenemos
distintas opciones como cambiar de país y de idioma, la posibilidad de realizar una búsqueda, ayuda, mi cuenta y acceder a la cesta.
Más abajo, sobre la imagen, en letras grandes y visibles, hay un enlace a una página en la que se puede ver el catálogo completo de la nueva temporada, y en la parte inferior derecha, se encuentran los enlaces a las redes sociales (Twitter, Facebook, Youtube, Pinterest e Instagram), así como a Noticias, Dutti Word, Empresa, Contacta, Tienda y Preguntas frecuentes.
La arquitectura de la Web es similar a la de Zara, partimos de una página principal con un menú que enlaza con las páginas principales de cada sección, y de allí según el tipo de prenda que se quiera visualizar (abrigos, chaquetas,…), nos lleva a otras páginas que nos muestra el catálogo, con imágenes de cada producto y con la posibilidad de enviar cada prenda a la cesta de la compra, así como la elección de la talla y el color.
Además, también tenemos la opción de registrarnos, recibir ayuda, contactar con la empresa, información corporativa, etc. Igualmente, como he dicho anteriormente, cuenta con enlaces externos que nos llevan a las distintas páginas que la marca tiene en las redes sociales.
En resumen, esta Web, al igual que la de Zara, es muy fácil de manejar, la navegación está hecha de tal forma que el usuario se puede mover muy fácilmente de una sección a otra, así como regresar a la página de incio o ver los productos que hay en la cesta de la compra, teniendo siempre la perspectiva de donde se encuentra. Por tanto, posee una usabilidad muy alta.
Ejercicio 2: Opción B
Para hacer este ejercicio, he utilizado la herramienta MockFlow. El resultado ha sido el siguiente:
Como se puede ver, es un wireframe de baja fidelidad, en el que muestro los aspectos arquitectónicos básicos de mi página Web, sin incluir elementos gráficos ni contenido real, sólo representando los elementos de navegación global, local y contextual de la página.
La estructura sería la siguiente: la página principal enlaza con todas las páginas del sitio (enlaces internos) que pueden ser de dos clases, por una parte las páginas relativas a los catálogos de los productos (a las que se accede pinchando en el menú de la izquierda o en las imágenes pequeñitas de la parte de abajo, tituladas “prendas de vestir”, “calzado” y “complementos”) y por otro lado, las páginas que nos llevan a la información corporativa, información sobre funcionamiento de la página, etc. Además, esta página también cuenta con enlaces a redes sociales y al blog (enlaces externos). De la misma manera, hay dos páginas muy seguras, que son el registro de usuarios y la cesta de la compra, con la posterior conexión bancaria.
Pero esta arquitectura se observa mejor en el blueprint de la Web:
