El documento describe la anatomía de un sitio web de un museo. Se divide en diferentes secciones como el cabezote, portada, slider de diapositivas, remate y menú/hamburguesa. Explica brevemente las características y funciones de cada sección.
2. VIAJESCARLOTA
2
M
ANATOMÍA DE
LA WEB
C A B E Z O T E
Se puede observar que la franja amarilla
es el cabezote, en este se encuentra un
mensaje de bienvenida y el nombre del
museo. Es llamativo por su color y tamaño.
P O R TA D A
En la portada podemos ver cuáles son las
exhibiciones disponibles en el museo,
también se puede encontrar la opción de
comprar tickets para asistir,
EJEMPLO 1
3. VIAJESCARLOTA
3
M
S L I D E R / PA S E D E D I A P O S I T I VA S
En el pase de diapositivas hay vídeos y fotos de interés para las
personas que quieran ver más sobre el museo, hacen nuevas
actualizaciones sobre pinturas, escritores y demás. Tienen muchas
otras cosas por descubrir.
R E M AT E
En el remate encuentran las localizaciones del museo, los términos,
los números de contacto, información sobre el museo, la suscripción
y también los vínculos para acceder a sus redes sociales.
M E N U / H A M B U R G U E S A
Dentro de este hay diferentes opciones como: buscar información,
comprar tiquetes, buscar las actividades que se realizan en fechas
especificas del calendario y la búsqueda de la localización del museo
para poder llegar de una manera más fácil.
4. VIAJESCARLOTA
4
M
• Nos llamó la atención que esta página estaba nominada a mejor
sitio de en la categoría de instituciones culturales (parques,
zoológicos, etc) ya que tiene muchos colores que resaltan las
pinturas, se preocupan por la experiencia del usuario porque
quieren que las personas tengan facilidad de encontrar lo que
buscan desde la página. Además, la estructura es diferenciadora,
la forma de ubicar la barra o el panel de búsqueda y la
distribución del pase de diapositivas es distinto a las páginas que
usualmente utilizamos.
¿ C ó m o c o n s i d e r a e s l a
e x p e r i e n c i a d e l u s u a r i o ?
La experiencia del usuario no
cambia mucho desde un
computador a un celular, cambia la
ubicación de la hamburguesa para
facilitar las búsquedas, ya no se
encuentra al lado izquierdo de la
pantalla sino que está en la parte
inferior. La distribución cambia ya
que la estructura se muestra de
forma vertical.
• MOBILE
E s c r i b i r u n t e x t o d o n d e e x p l i q u e
q u é l e l l a m ó l a a t e n c i ó n d e c a d a
u n o d e l o s s i t e s e l e g i d o s .
P o r c e n t a j e d e : t e x t o s , i m á g e n e s y
v i d e o d e l a p á g i n a d e i n i c i o , p a r a
c a d a s i t e .
• Imagines: 90%
• Texto: 9%
• Videos: 1%
5. VIAJESCARLOTA
5
M
• PORTADA
1 . C ó m o e s t á p l a n t e a d a l a a n a t o m í a d e l s i t e ( c a p t u r a r p a n t a l l a s ) .
• MENU
EJEMPLO 2
7. VIAJESCARLOTA
7
M
• No hay diferencia relevante entre las 2 experiencias, solo que en la versión del celular todo se ve reducido pero de
resto nada cambia ni en el orden. La única diferencia es que los anuncios ya no aparece.
2 . C ó m o c o n s i d e r a e s l a e x p e r i e n c i a d e l u s u a r i o ( u s e r e x p e r i e n c e t a n t o
e n c o m p u t a d o r, c o m o e n m o b i l e ) .
• COMPUTADOR
• MOBILE
8. VIAJESCARLOTA
8
M
• Imagines: 85%
• Texto: 14%
• Videos: 1%
3 . P o r c e n t a j e d e : t e x t o s , i m á g e n e s y vi d e o d e l a p á g i n a d e i n i c i o , p a r a
c a d a s i t e .
4 . E s c r i b i r u n t e x t o d o n d e e x p l i q u e q u é l e l l a m ó l a a t e n c i ó n d e c a d a u n o
d e l o s s i t e s e l e g i d o s .
• Lo que más nos llamó la atención del sitio que escogí fue que es un sitio de
una revista muy conocida pero en su sitio web se utiliza muy poco texto,
también me gustaron mucho las imagines de que colocaron, ya que son
imagines muy coloridas y llamativas, llaman la atención del lector intentan
ser muy reactivos en las imagines y los títulos de las publicaciones.
10. VIAJESCARLOTA
10
M
• Podemos observar que esta pagina tiene su marca en la parte superior izquierda como todas las paginas del
mundo occidental. En esta parte se encuentra el logotipo y el eslogan. Si seguimos por el cabezote,
encontramos el menú de navegación.
• En la portada podemos encontrar el producto que se esta promocionando, en este caso la nueva Mercedez
clase A. Además, tiene una interfaz muy interactiva puesto que se realiza scroll hacia los lados y de esta
forma podemos encontrar los diferentes aspectos del auto como el diseño, tecnología, tablero, etc. A si
mismo cada aspecto tiene su interfaz propia a la cual nos remite dándole clic en ver mas.
• Aquí mismo podemos encontrar en la parte inferior derecha un llamado a la acción, este botón nos remite
directamente a un simulador de pago mensual para quien desee adquirir el vehículo.
11. VIAJESCARLOTA
11
M
• En la parte inferior podemos encontrar, al lado izquierdo, un botón de links que al hundirlo
nos muestra un menú de opciones nuevas que antes no aparecían, como por ejemplo el
buscador, las diferentes versiones del carro con sus precios, etc. Además ofrece algunas
campañas publicitarias que tiene Mercedez para que la persona las conozca. Se podría decir
que este botón es la parte B de la web. Dado que muestra otro tipo de información.
• Ahora bien, al lado derecho, podemos encontrar el botón de compartir dicho producto en
nuestras redes sociales como Facebook y Twitter, esto con el fin de que el usuario comparta
y divulgue esta información.
12. VIAJESCARLOTA
12
M
• Para la pagina web vista desde el celular, se puede
observar que el menú de navegación ya no esta presente
en la parte superior. Por el contrario se encuentra en la
parte inferior derecha en modo de botón de repliegue.
Asimismo, el botón de llamado a la acción se encuentra
ahora en la parte inferior izquierda junto al botón de links.
• En los demás aspectos, la pagina web del ordenador y del
celular es la misma en un sentido funcional.
• La experiencia del usuario se considera cómoda y muy
completa. El usuario puede navegar a su gusto y cuenta
con toda la información necesaria acerca del producto. Es
muy visual, por lo tanto Mercedez utiliza mucha imagen, y
además tiene muchas opciones de navegación,.
13. VIAJESCARLOTA
13
M
3. Porcentaje de: textos, imágenes y video de lapágina de inicio
De este site lo que mas llama la atención es que Mercedez vende el producto como un carro
con equipamiento de ultima tecnología y por eso trata que el site sea también una muestra del
nivel tecnológico que ellos manejan en sus productos. Es por esto que el site es muy llamativo
y no es la típica pagina web a la que estamos acostumbrados a entrar. De hecho la pagina
tiene el mismo control de voz con el que vienen equipados los Mercedez de ultima generacion.
Esto da muestra de que Mercedez quiere hacer vivir la experiencia desde su pagina web de
como son las características de sus productos.
• I m á g e n e s : 8 0 %
• Te x t o : 1 0 %
• V i d e o : 1 0 %