SlideShare una empresa de Scribd logo
1 de 13
VIAJESCARLOTA
1
M
D A N A R E Y E S
VA L E R I E G O N Z A L E Z
A LVA R O O R T E G A
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
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.
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%
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
VIAJESCARLOTA
6
M
• PARTE B
• FOOTER
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
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.
VIAJESCARLOTA
9
M
EJEMPLO 3
C o m o e s t a 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 .
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.
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.
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,.
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 %

Más contenido relacionado

Similar a Estructura web

Porfolio natalia lopez
Porfolio natalia lopez Porfolio natalia lopez
Porfolio natalia lopez Na losi
 
Mamá, de mayor quiero ser tipógrafo (Granada)
Mamá, de mayor quiero ser tipógrafo (Granada)Mamá, de mayor quiero ser tipógrafo (Granada)
Mamá, de mayor quiero ser tipógrafo (Granada)Pedro Arilla
 
Manual facebook completo
Manual facebook completoManual facebook completo
Manual facebook completoJhonatan J95
 
Usabilidad y Convertibilidad 2
Usabilidad y Convertibilidad 2Usabilidad y Convertibilidad 2
Usabilidad y Convertibilidad 2Iñaki Lakarra
 
Manual facebook
Manual facebook Manual facebook
Manual facebook MajoChvez1
 
Manual de Identidad Corporativa - Xavier Ponce
Manual de Identidad Corporativa - Xavier PonceManual de Identidad Corporativa - Xavier Ponce
Manual de Identidad Corporativa - Xavier PonceBryant Ldu
 
Campaña rockin bembos
Campaña rockin bembosCampaña rockin bembos
Campaña rockin bembosJimmy Ramos
 
5 pasos para crear un buen producto
5 pasos para crear un buen producto5 pasos para crear un buen producto
5 pasos para crear un buen productocarrasmolo
 
Análisis de paginas web
Análisis de paginas webAnálisis de paginas web
Análisis de paginas webmelizy
 
Seminario sobre Usabilidad en Zaragoza Activa
Seminario sobre Usabilidad en Zaragoza ActivaSeminario sobre Usabilidad en Zaragoza Activa
Seminario sobre Usabilidad en Zaragoza ActivaSocieTIC Business Online
 
Análisis visual web
Análisis visual webAnálisis visual web
Análisis visual webluisafer92
 

Similar a Estructura web (20)

Porfolio natalia lopez
Porfolio natalia lopez Porfolio natalia lopez
Porfolio natalia lopez
 
Mamá, de mayor quiero ser tipógrafo (Granada)
Mamá, de mayor quiero ser tipógrafo (Granada)Mamá, de mayor quiero ser tipógrafo (Granada)
Mamá, de mayor quiero ser tipógrafo (Granada)
 
Manual facebook completo
Manual facebook completoManual facebook completo
Manual facebook completo
 
Usabilidad y Convertibilidad 2
Usabilidad y Convertibilidad 2Usabilidad y Convertibilidad 2
Usabilidad y Convertibilidad 2
 
Ejercicio Webby Awards
Ejercicio Webby AwardsEjercicio Webby Awards
Ejercicio Webby Awards
 
Anatomia de las paginas web
Anatomia de las paginas webAnatomia de las paginas web
Anatomia de las paginas web
 
Los 5 sentidos en la Publicidad
Los 5 sentidos en la PublicidadLos 5 sentidos en la Publicidad
Los 5 sentidos en la Publicidad
 
Análisis de-una-página-web
Análisis de-una-página-webAnálisis de-una-página-web
Análisis de-una-página-web
 
Paginas web 2
Paginas web 2Paginas web 2
Paginas web 2
 
Manual facebook
Manual facebook Manual facebook
Manual facebook
 
Manual de Identidad Corporativa - Xavier Ponce
Manual de Identidad Corporativa - Xavier PonceManual de Identidad Corporativa - Xavier Ponce
Manual de Identidad Corporativa - Xavier Ponce
 
Webby awards
Webby awards Webby awards
Webby awards
 
Campaña rockin bembos
Campaña rockin bembosCampaña rockin bembos
Campaña rockin bembos
 
5 pasos para crear un buen producto
5 pasos para crear un buen producto5 pasos para crear un buen producto
5 pasos para crear un buen producto
 
Copia de expo
Copia de expoCopia de expo
Copia de expo
 
Análisis de paginas web
Análisis de paginas webAnálisis de paginas web
Análisis de paginas web
 
Manual de identidad visual
Manual de identidad visualManual de identidad visual
Manual de identidad visual
 
Seminario sobre Usabilidad en Zaragoza Activa
Seminario sobre Usabilidad en Zaragoza ActivaSeminario sobre Usabilidad en Zaragoza Activa
Seminario sobre Usabilidad en Zaragoza Activa
 
Dcto1
Dcto1Dcto1
Dcto1
 
Análisis visual web
Análisis visual webAnálisis visual web
Análisis visual web
 

Último

TEMA 13 ESPAÑA EN DEMOCRACIA:DISTINTOS GOBIERNOS
TEMA 13 ESPAÑA EN DEMOCRACIA:DISTINTOS GOBIERNOSTEMA 13 ESPAÑA EN DEMOCRACIA:DISTINTOS GOBIERNOS
TEMA 13 ESPAÑA EN DEMOCRACIA:DISTINTOS GOBIERNOSjlorentemartos
 
PLAN DE REFUERZO ESCOLAR primaria (1).docx
PLAN DE REFUERZO ESCOLAR primaria (1).docxPLAN DE REFUERZO ESCOLAR primaria (1).docx
PLAN DE REFUERZO ESCOLAR primaria (1).docxlupitavic
 
Neurociencias para Educadores NE24 Ccesa007.pdf
Neurociencias para Educadores  NE24  Ccesa007.pdfNeurociencias para Educadores  NE24  Ccesa007.pdf
Neurociencias para Educadores NE24 Ccesa007.pdfDemetrio Ccesa Rayme
 
Cuaderno de trabajo Matemática 3 tercer grado.pdf
Cuaderno de trabajo Matemática 3 tercer grado.pdfCuaderno de trabajo Matemática 3 tercer grado.pdf
Cuaderno de trabajo Matemática 3 tercer grado.pdfNancyLoaa
 
FORTI-MAYO 2024.pdf.CIENCIA,EDUCACION,CULTURA
FORTI-MAYO 2024.pdf.CIENCIA,EDUCACION,CULTURAFORTI-MAYO 2024.pdf.CIENCIA,EDUCACION,CULTURA
FORTI-MAYO 2024.pdf.CIENCIA,EDUCACION,CULTURAEl Fortí
 
Planificacion Anual 4to Grado Educacion Primaria 2024 Ccesa007.pdf
Planificacion Anual 4to Grado Educacion Primaria   2024   Ccesa007.pdfPlanificacion Anual 4to Grado Educacion Primaria   2024   Ccesa007.pdf
Planificacion Anual 4to Grado Educacion Primaria 2024 Ccesa007.pdfDemetrio Ccesa Rayme
 
Plan Refuerzo Escolar 2024 para estudiantes con necesidades de Aprendizaje en...
Plan Refuerzo Escolar 2024 para estudiantes con necesidades de Aprendizaje en...Plan Refuerzo Escolar 2024 para estudiantes con necesidades de Aprendizaje en...
Plan Refuerzo Escolar 2024 para estudiantes con necesidades de Aprendizaje en...Carlos Muñoz
 
plan de capacitacion docente AIP 2024 clllll.pdf
plan de capacitacion docente  AIP 2024          clllll.pdfplan de capacitacion docente  AIP 2024          clllll.pdf
plan de capacitacion docente AIP 2024 clllll.pdfenelcielosiempre
 
2024 - Expo Visibles - Visibilidad Lesbica.pdf
2024 - Expo Visibles - Visibilidad Lesbica.pdf2024 - Expo Visibles - Visibilidad Lesbica.pdf
2024 - Expo Visibles - Visibilidad Lesbica.pdfBaker Publishing Company
 
Lecciones 05 Esc. Sabática. Fe contra todo pronóstico.
Lecciones 05 Esc. Sabática. Fe contra todo pronóstico.Lecciones 05 Esc. Sabática. Fe contra todo pronóstico.
Lecciones 05 Esc. Sabática. Fe contra todo pronóstico.Alejandrino Halire Ccahuana
 
LABERINTOS DE DISCIPLINAS DEL PENTATLÓN OLÍMPICO MODERNO. Por JAVIER SOLIS NO...
LABERINTOS DE DISCIPLINAS DEL PENTATLÓN OLÍMPICO MODERNO. Por JAVIER SOLIS NO...LABERINTOS DE DISCIPLINAS DEL PENTATLÓN OLÍMPICO MODERNO. Por JAVIER SOLIS NO...
LABERINTOS DE DISCIPLINAS DEL PENTATLÓN OLÍMPICO MODERNO. Por JAVIER SOLIS NO...JAVIER SOLIS NOYOLA
 
origen y desarrollo del ensayo literario
origen y desarrollo del ensayo literarioorigen y desarrollo del ensayo literario
origen y desarrollo del ensayo literarioELIASAURELIOCHAVEZCA1
 
CLASE - La visión y misión organizacionales.pdf
CLASE - La visión y misión organizacionales.pdfCLASE - La visión y misión organizacionales.pdf
CLASE - La visión y misión organizacionales.pdfJonathanCovena1
 
Qué es la Inteligencia artificial generativa
Qué es la Inteligencia artificial generativaQué es la Inteligencia artificial generativa
Qué es la Inteligencia artificial generativaDecaunlz
 
Planificacion Anual 2do Grado Educacion Primaria 2024 Ccesa007.pdf
Planificacion Anual 2do Grado Educacion Primaria   2024   Ccesa007.pdfPlanificacion Anual 2do Grado Educacion Primaria   2024   Ccesa007.pdf
Planificacion Anual 2do Grado Educacion Primaria 2024 Ccesa007.pdfDemetrio Ccesa Rayme
 
GUIA DE CIRCUNFERENCIA Y ELIPSE UNDÉCIMO 2024.pdf
GUIA DE CIRCUNFERENCIA Y ELIPSE UNDÉCIMO 2024.pdfGUIA DE CIRCUNFERENCIA Y ELIPSE UNDÉCIMO 2024.pdf
GUIA DE CIRCUNFERENCIA Y ELIPSE UNDÉCIMO 2024.pdfPaolaRopero2
 

Último (20)

Medición del Movimiento Online 2024.pptx
Medición del Movimiento Online 2024.pptxMedición del Movimiento Online 2024.pptx
Medición del Movimiento Online 2024.pptx
 
TEMA 13 ESPAÑA EN DEMOCRACIA:DISTINTOS GOBIERNOS
TEMA 13 ESPAÑA EN DEMOCRACIA:DISTINTOS GOBIERNOSTEMA 13 ESPAÑA EN DEMOCRACIA:DISTINTOS GOBIERNOS
TEMA 13 ESPAÑA EN DEMOCRACIA:DISTINTOS GOBIERNOS
 
PLAN DE REFUERZO ESCOLAR primaria (1).docx
PLAN DE REFUERZO ESCOLAR primaria (1).docxPLAN DE REFUERZO ESCOLAR primaria (1).docx
PLAN DE REFUERZO ESCOLAR primaria (1).docx
 
Neurociencias para Educadores NE24 Ccesa007.pdf
Neurociencias para Educadores  NE24  Ccesa007.pdfNeurociencias para Educadores  NE24  Ccesa007.pdf
Neurociencias para Educadores NE24 Ccesa007.pdf
 
Cuaderno de trabajo Matemática 3 tercer grado.pdf
Cuaderno de trabajo Matemática 3 tercer grado.pdfCuaderno de trabajo Matemática 3 tercer grado.pdf
Cuaderno de trabajo Matemática 3 tercer grado.pdf
 
Fe contra todo pronóstico. La fe es confianza.
Fe contra todo pronóstico. La fe es confianza.Fe contra todo pronóstico. La fe es confianza.
Fe contra todo pronóstico. La fe es confianza.
 
FORTI-MAYO 2024.pdf.CIENCIA,EDUCACION,CULTURA
FORTI-MAYO 2024.pdf.CIENCIA,EDUCACION,CULTURAFORTI-MAYO 2024.pdf.CIENCIA,EDUCACION,CULTURA
FORTI-MAYO 2024.pdf.CIENCIA,EDUCACION,CULTURA
 
Planificacion Anual 4to Grado Educacion Primaria 2024 Ccesa007.pdf
Planificacion Anual 4to Grado Educacion Primaria   2024   Ccesa007.pdfPlanificacion Anual 4to Grado Educacion Primaria   2024   Ccesa007.pdf
Planificacion Anual 4to Grado Educacion Primaria 2024 Ccesa007.pdf
 
Plan Refuerzo Escolar 2024 para estudiantes con necesidades de Aprendizaje en...
Plan Refuerzo Escolar 2024 para estudiantes con necesidades de Aprendizaje en...Plan Refuerzo Escolar 2024 para estudiantes con necesidades de Aprendizaje en...
Plan Refuerzo Escolar 2024 para estudiantes con necesidades de Aprendizaje en...
 
plan de capacitacion docente AIP 2024 clllll.pdf
plan de capacitacion docente  AIP 2024          clllll.pdfplan de capacitacion docente  AIP 2024          clllll.pdf
plan de capacitacion docente AIP 2024 clllll.pdf
 
Unidad 3 | Metodología de la Investigación
Unidad 3 | Metodología de la InvestigaciónUnidad 3 | Metodología de la Investigación
Unidad 3 | Metodología de la Investigación
 
2024 - Expo Visibles - Visibilidad Lesbica.pdf
2024 - Expo Visibles - Visibilidad Lesbica.pdf2024 - Expo Visibles - Visibilidad Lesbica.pdf
2024 - Expo Visibles - Visibilidad Lesbica.pdf
 
Lecciones 05 Esc. Sabática. Fe contra todo pronóstico.
Lecciones 05 Esc. Sabática. Fe contra todo pronóstico.Lecciones 05 Esc. Sabática. Fe contra todo pronóstico.
Lecciones 05 Esc. Sabática. Fe contra todo pronóstico.
 
LABERINTOS DE DISCIPLINAS DEL PENTATLÓN OLÍMPICO MODERNO. Por JAVIER SOLIS NO...
LABERINTOS DE DISCIPLINAS DEL PENTATLÓN OLÍMPICO MODERNO. Por JAVIER SOLIS NO...LABERINTOS DE DISCIPLINAS DEL PENTATLÓN OLÍMPICO MODERNO. Por JAVIER SOLIS NO...
LABERINTOS DE DISCIPLINAS DEL PENTATLÓN OLÍMPICO MODERNO. Por JAVIER SOLIS NO...
 
origen y desarrollo del ensayo literario
origen y desarrollo del ensayo literarioorigen y desarrollo del ensayo literario
origen y desarrollo del ensayo literario
 
CLASE - La visión y misión organizacionales.pdf
CLASE - La visión y misión organizacionales.pdfCLASE - La visión y misión organizacionales.pdf
CLASE - La visión y misión organizacionales.pdf
 
Qué es la Inteligencia artificial generativa
Qué es la Inteligencia artificial generativaQué es la Inteligencia artificial generativa
Qué es la Inteligencia artificial generativa
 
Presentacion Metodología de Enseñanza Multigrado
Presentacion Metodología de Enseñanza MultigradoPresentacion Metodología de Enseñanza Multigrado
Presentacion Metodología de Enseñanza Multigrado
 
Planificacion Anual 2do Grado Educacion Primaria 2024 Ccesa007.pdf
Planificacion Anual 2do Grado Educacion Primaria   2024   Ccesa007.pdfPlanificacion Anual 2do Grado Educacion Primaria   2024   Ccesa007.pdf
Planificacion Anual 2do Grado Educacion Primaria 2024 Ccesa007.pdf
 
GUIA DE CIRCUNFERENCIA Y ELIPSE UNDÉCIMO 2024.pdf
GUIA DE CIRCUNFERENCIA Y ELIPSE UNDÉCIMO 2024.pdfGUIA DE CIRCUNFERENCIA Y ELIPSE UNDÉCIMO 2024.pdf
GUIA DE CIRCUNFERENCIA Y ELIPSE UNDÉCIMO 2024.pdf
 

Estructura web

  • 1. VIAJESCARLOTA 1 M D A N A R E Y E S VA L E R I E G O N Z A L E Z A LVA R O O R T E G A
  • 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.
  • 9. VIAJESCARLOTA 9 M EJEMPLO 3 C o m o e s t a 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 .
  • 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 %