evidencias web

2013 | June v.1 – UVM - Module G4 Virtual Image

TU9 • Caso de estudio local – Sección Amarilla

© Nuova Accademia Srl | Confidential & Proprietary | NABA Affiliate Package Certificate in Graphic Design and Art

Direction

1


Video promocional 2013

2


Direction

• Anuncios en Directorios, S.A. de C.V. tiene sus orígenes en 1882, cuando se creó la Compañía Telefónica Mexicana, en sociedad con la Western Electric Telephone Company.

• Nueve años después, en noviembre de 1891, apareció la Lista No. 1 de suscriptores de la Compañía Telefónica Mexicana, a la que en 1897 se le agregó la primera sección clasificada de anunciantes, que pronto conformaría al primer directorio. • Dicho directorio fue el primero de la búsqueda referenciada en México y, además, es el antecedente de lo que hoy en día es Sección Amarilla.

•  En 1946, al inicio de la Revolución Industrial en México, se fusionó la Compañía Telefónica y Telegráfica Mexicana con Ericsson, para crear una nueva empresa: Teléfonos de México, S.A. (TELMEX), que comenzó operaciones el día 1 de enero de 1948.

•  La sección amarilla surge históricamente como un medio de comunicación que vincula al anunciante con el consumidor.

• Sección Amarilla, sus inicios TU9


Direction

3

• Con la creación de Telmex, Sección Amarilla se convirtió en una organización subsidiaria de esta nueva compañía y se constituyó como la empresa líder en directorios telefónicos encargada de su comercialización, edición, publicación y distribución, en todo el país.

• En 1991, Grupo Carso adquirió a Telmex, brindando un rumbo modernizador a Sección Amarilla que dio inicio con fuertes inversiones destinadas a la adquisición de software diseñado exclusivamente para la producción de directorios, así como a la capacitación del personal a cargo de su operación y mantenimiento.

•  A partir 1994 Sección Amarilla ha ido incorporando una infinidad de cambios, siempre pensando en el beneficio de los consumidores, como los índices y clasificaciones en el idioma inglés, una guía médica, la sección blanca de teléfonos residenciales, cupones de descuentos.

• Sección Amarilla en los años 90


Direction

4

• En 2008, Sección Amarilla formó parte de Grupo Telmex Internacional.

• Todos estos cambios se tradujeron en mejoras sustanciales en la estructura y los sistemas de trabajo de Sección Amarilla, que actualmente cuenta con la mejor tecnología de búsqueda en todos sus productos.

• Desde el 2010, Sección Amarilla forma parte del Grupo América Móvil Internacional

•  En sus inicios apenas era un libro de consulta, que con el paso del tiempo se convirtió en un medio de referencia que actualmente responde a las demandas de consumidores a través de distintas plataformas impresas, digitales y móviles.

• Sección Amarilla a partir del 2000


Direction

5



Direction

6

• La imagen gráfica de la Sección Amarilla se mantuvo por muchos años.

• La empresa fue representada por un libro abierto, haciendo referencia al directorio, en color amarillo, dando a entender de manera gráfica su producto.

• El uso de tipografía siempre fue condensada y Sanserif; su rasgo característico fue el mismo gráfico del libro aplicado en la letra “o” creando de esta manera el emblema básico de la empresa.

Imagen Gráfica hasta el año 2012

• En el año 2000, con el inicio del nuevo siglo, Sección Amarilla incursionó en el mundo digital, al lanzar su portal de internet: www.seccionamarilla.com, proporcionando a los usuarios una nueva opción de consulta y dirección de compras en la web.

• Los años 2005, 2007, 2010 y 2011 vieron nacer a los nuevos productos de Sección amarilla: 25800, Sección Amarilla Mobile, Menumanía y Decompras.com.

•  En el 2012, se incorporó un nuevo servicio de tracking lines para llamadas sin costo, Códigos QR, entre otras novedades.

•  Considerando el avance tecnológico, Sección Amarilla se ha preocupado en mantener vigente tanto su sitio web como sus aplicaciones móviles.

• Sección Amarilla y la tecnología


Direction

7

• Desde el año 2000 en el que se presentó el sitio web www.seccionamarilla.com, se han lanzado una serie de plataformas de actualización que resuelven problemáticas presentadas por la arquitectura digital de la versión anterior.

• A la fecha se han presentado alrededor de 13 diseños distintos de la plataforma, en los cuales no están incluidos los diseños para meses especiales como Septiembre o Diciembre.

•  En el 2000 se lanza oficialmente el sitio web en una plataforma confusa para el usuario y carente de arquitectura digital.

•  Durante el 2005 y 2006, se presentaron dos páginas distintas por año respondiendo a algunos defectos en la interacción.

•  En el 2007 fue la primera vez que se presento una organización gráfica correspondiente a la imagen corporativa de la empresa

•  En el 2008 se presenta el primer logotipo para la página dándole un carácter especifico al sitio.

• Desarrollo Web


Direction

8


TU9 • Análisis del sitio web año 2000


Direction

9

Primera interfaz de página de internet / Home - 2000


Direction

10



Direction

11

El menú principal no muestra ningún acceso a

información de los anunciantes, por lo que

no funciona como directorio digital

La información se presenta sin una

estructura clara, es lineal y sin links de regreso por lo que es cansada y poco funcional la búsqueda de

datos específicos.

A través del color amarillo se trató de mantener una

relación directa con el medio impreso.



Direction

12

El menú principal es funcional al no

desplazarse con el movimiento general de la

página, permitiendo regresar al inicio

presionando el botón “home”

La lista de datos se extiende por varias

páginas y se presenta como tabla.

No existen botones de control, ni barras de

desplazamiento.

Primera interfaz de página de internet / Sección: Productos - 2000


Direction

13

El menú comercial de la sección se repite dos veces, lo que causa

confusión en la navegación.

La lista de datos se extiende por varias

páginas sin organización de datos e imagenes.

No existen botones para avance y retroceso de la

sección ni a la página anterior.


TU9 • Análisis del sitio web año 2001 - 2004


Direction

14

Página de internet / Home - 2001


Direction

15



Direction

16

El menú principal es confuso por el uso de gráficos abstractos sin

texto

Se utiliza el color azul en la arquitectura de la

página para dar mayor contraste y resaltar la

importancia de la marca.

Adiciona ficha de contacto por

registro

La página se vuelve funcional como directorio

digital al incorporar un motor de búsqueda



Direction

17

Aunque la arquitectura se diagrama en tres bloques, la página no se adapta al

tamaño de pantalla

Se le da una imagen corporativa distinta al logo comercial de la

marca

Se presentan más opciones y submenús dentro de la barra

principal de navegación, como zonas de contexto

Presentan anuncios publicitarios por primera

vez en el sitio.



Direction

18

Se presenta una barra para banners publicitarios

Los datos se presentan a modo de lista de servicios

El menú no es funcional al desaparecer con el

desplazamiento de la página durante la

navegación

Submenú con opciones adicionales de navegación

Página de internet / Sección: Productos- 2001


Direction

19

Se agrega la paginación para darle la opción al visitante de regresar y facilitar la navegación.


TU9 • Análisis del sitio web año 2005 versión 1


Direction

20

Página de internet / Home - 2005 v1 © Nuova Accademia Srl | Confidential

& Proprietary | NABA Affiliate Package Certificate in Graphic Design and Art

Direction

21



Direction

22

El menú principal es confuso por el uso de gráficos abstractos y fotográficos sin texto

Se manejan cuatro menús principales lo que llega a

confundir al visitante

El motor de búsqueda se contextualiza para facilitar la ubicación



Direction

23

La página no se adapta al tamaño de pantalla, pero ya se presenta en una sola

pieza sin necesidad de utilizar scroll page


marca

Se agrega un nuevo banner publicitario

superior

Presentan anuncios publicitarios estilo banner

Página de internet / Sección: Productos – 2005 v1


Direction

24

Texto informativo general sobre la sección

La página tiene submenús para elegir la opción más

conveniente para el usuario

El menú principal presenta quiebre de

información accesando a algunas de las secciones

del sitio

Información se jerarquiza a manera de tabla comparativa a tres

columnas para facilitar la comprensión del usuario



Direction

25

Instrucciones adicionales a las listas de búsqueda

presentadas, como múltiples opciones de

contacto


TU9 • Análisis del sitio web año 2005 versión 2


Direction

26



Direction

27



Direction

28

La página no se adapta al tamaño de pantalla,


marca

Al menú principal se agregan más motores de

búsqueda



Direction

29

La página tiene inconsistencia en la imagen, ya que se

actualizó el “home page”, pero el diseño de las

siguientes secciones sigue siendo el mismo. Se

resuelven problemas de quiebre de información en

los menús


TU9 • Análisis del sitio web año 2006 - 2007


Direction

30

Página de internet / Home – 2006 v2


Direction

31



Direction

32

Banners rectangulares publicitarios

La página se adapta al tamaño de pantalla

centrando el diseño al ser cargado, se presenta en

una sola pieza sin necesidad de utilizar scroll

page

Uso de tres menús con botones textuales

La arquitectura esta estructurada por zonas

delimitadas por plecas de color



Direction

33

Se utilizan menús desplegando listas para

limpiar el diseño y hacerlo menos confuso para el

visitante

Se le da una imagen corporativa distinta, en este caso se “viste” al

logo dependiendo el mes

Al menú principal de búsqueda se le agregan

las opciones para búsqueda por país

considerando que la empresa se volvió

internacional



Direction

34

La sección se transforma dramáticamente, se presenta un menú principal a base de

fotografías dinámicas las cuales al pasar el cursor

por encima desaparecen y despliegan opciones de navegación por área.

En la estructura de la búsqueda de información se utiliza una matriz con

texto e imágenes

Página de internet / Sección: Servicios- 2006 v2


Direction

35

Menús desplegables a forma de listados,

eficientando la navegación Uso de espacios tensionados que evitan la

despropoción




Direction

36

Página de internet / Home – 2008


Direction

37



Direction

38

La imágen corporativa se renueva utilizando

tipografía san serif y manteniendo el ícono del

libro en un círculo

La página se adapta al tamaño de pantalla centrando el diseño,

regresa el uso de scroll para presentar más

información en “home”

Uso de dos menús con botones textuales



Direction

39

Algunas secciones de la página, incluyendo el buscador en “home”

presentan inconsistencias dependiendo del

navegador, por lo que el diseño se quiebra y la

información no se presenta de manera adecuada y funcional

El diseño visual de la interfaz tiene un orden

de tres zonas: Menú principal, herramientas de búsqueda y zona de

contacto



Direction

40

Al abrir la página en otro navegador se regularizan los textos del buscador

Página de internet / Sección: Estados – 2008 © Nuova Accademia Srl | Confidential


Direction

41

Uso de fotografías de grán tamaño para llamar la

atención del visitante y dar a entender facilmente

en que sección se encuentran

El menú principal de la sección se presenta a

manera de listado pero agregando íconos, lo que

complica la lectura considerando que el texto

queda por encima del gráfico y dificulta la

lectura




Direction

42



Direction

43



Direction

44

Regresa el acceso a otros países dentro del menú

base, los botones son las banderas y se aplican en

la barra principal

Se agregan pestañas a los menús principales para mejorar la experiencia

del usuario



Direction

45

Las redes sociales cobran importancia como medio

de apoyo al sitio y se agregan los botones para

su acceso rápido

Se agrega el botón de comentarios, como enlace permanente de contacto que no se desplaza en la

navegación

Se incluye un menú de

servicios y descargables

Página de internet / Sección: Ayuda – 2010


Direction

46

Debido a que se ampliaron las opciones de búsqueda

y la cantidad de información en el sitio, se

agrega la sección de “Ayuda” enfocada

principalmente a la navegación en las distintas versiones disponibles del

sitio, presentan instrucciones claras y la

información se presenta a manera de listado

Página de internet / Sección: Nuevos Productos– 2010


Direction

47

En esta sección se cambia el formato general con el

propósito de llamar la atención del visitante y que conozca los nuevos productos que se están

manejando

Se lanzan al mercado las aplicaciones para Iphone,

Blackberry y Nokia.



Direction

48

El único cambio que se presenta en el 2011 es el

estilo gráfico de las banderas haciendolas más

dinámicas pero dificultando un poco su

comprensión


TU9 • Rediseño de marca, sitio web y apps


Direction

49

• En el año 2000, Sección Amarilla llegó a internet a través de su portal: www.seccionamarilla.com, que se convirtió en la nueva forma de conectar a los consumidores con miles de negocios de manera inmediata.

• En el 2012, el portal tuvo una actualización de imagen en la que se integraron diferentes herramientas de apoyo para generar resultados de búsqueda más específicos que respondieran en un 100% a las necesidades de los usuarios.

•  El objetivo de Sección Amarilla es promover el crecimiento de sus clientes y la satisfacción de sus consumidores; sustentándose en la calidad tecnológica, seguridad y confiabilidad de todos sus productos.

• Rediseño general


Direction

50

• Seccionamarilla.com • Es el directorio digital, en el se pueden encontrar todos los productos y servicios ofrecidos dentro de la versión impresa con posibilidades adicionales como llamadas directas desde internet entre otros. • Marketing Results • Es un producto de seccionamarilla.com que permite una mayor visibilidad, tráfico y optimización de los negocios en México, a través de los principales buscadores de internet. • Súper página • Es una página web cuya estructura le permite obtener una mejor indexación en los resultados orgánicos locales en los principales buscadores, generándole relevancia y visibilidad a los anunciantes.

•  Debido a su crecimiento y respuesta inmediata a millones de usuarios, el día de hoy seccionamarilla.com es considerado como el líder en directorios en línea en México

• Productos digitales


Direction

51

• MaxiClic • Es un producto que muestra los anuncios en los resultados patrocinados de Google, cuando el usuario busca términos relacionados con el negocio de los clientes. • Papel Web • Da un tratamiento inteligente a todos los materiales impresos y los convierte en un catálogo digital que se publica en seccionamarilla.com y puede ser consultado por todos los usuarios del sitio. • Conecta Clic • Esta herramienta permite a los usuarios realizar llamadas sin costo a todos los negocios que deseen, directamente desde el portal de seccionamarilla.com.

• Productos digitales


Direction

52

Sección Amarilla Mobile Desde el 2007, Sección Amarilla ha trabajado para que su aplicación esté disponible en los sistemas operativos más importantes e innovadores Menumanía Creado en el año 2010, Menumania es el portal vertical de restaurantes de Sección Amarilla Decompras.com En 2011, Sección Amarilla adquirió la operación del portal de comercio electrónico



Direction

53

• “Sí funciona, y funciona muy bien” y “Mucho. Más. Rápido.” han sido dos de los slogans que Sección Amarilla ha usado a lo largo de su historia. Su mensaje siempre fue muy claro: Sección Amarilla siempre funciona para encontrar cualquier producto y/o servicio. • Durante más de 15 años, el Slogan “Sí funciona, y funciona muy bien” fue la frase con la que en México se identificaba a Sección Amarilla En el año 2010 dicho slogan fue cambiado a: “Aquí lo encuentras”, haciendo referencia a que en todos los productos de Sección Amarilla los usuarios podrían encontrar la respuesta ante cualquier necesidad.

Nuevo Slogan y publicidad

• El nuevo ícono es un puntero, y está gráficamente asociado con la geolocalización, movilidad, tecnología, búsqueda local y actualidad. Toda esta nueva imagen de Sección Amarilla se ve reflejada en su publicidad y presencia de marca en diferentes medios de comunicación.

• Posicionándose con una nueva imagen acorde con las nuevas tendencias tecnológicas

• Nueva imagen gráfica


Direction

54

Logotipo 2013


Direction

55

Icono respresentado el puntero de

geolocalización

Nuevo slogan

La tipografía condensada que se utiliza es la misma

del logotipo anterior, dándole continuidad a la

marca


Spot publicitario 2013

56


Direction


TU9 • Rediseño web, web móvil y app


Direction

57

Página de internet / Home - 2013 © Nuova Accademia Srl | Confidential


Direction

58



Direction

59

Se utiliza la presentación de videos para mostrar la

nueva campaña publicitaria

Se presenta un diseño novedoso manejando la escala de grises y como

color de impacto el amarillo considerando la imagen de la empresa

La publicidad forma parte del diseño al ser

integrada a la retícula base

Para aumentar el atractivo visual, se incuyen fotografías

dentro de la retícula de menus



Direction

60

Recomendaciones de búsqueda

Nuevo logotipo

Menú por ubicación y canales con los productos

adicionales

Composición del espacio en una

matriz tensionada en tres bloques con

mayor interactividad



Direction

61

El diseño es responsivo, se adapta a cualquier monitor o dispositivo

móvil

La arquitectura web está reticulada y diseñada

para tener facilidad en una matriz de intercambio de

información por sección

Links a las redes sociales de la empresa

Página de internet / Barra de navegación- 2013 © Nuova Accademia Srl | Confidential


Direction

62

La barra de búsqueda es visible y de fácil acceso

Se utilizan los colores corporativos para

reafirmar la identidad gráfica

Ubicación del usuario, esto ayuda a personalizar

y perfeccionar su búsqueda y los resultados

de negocios.

Página de internet / Menús laterales - 2013 © Nuova Accademia Srl | Confidential


Direction

63

Se utiliza el color gris para no sobrecargar el

diseño y al mismo tiempo presentar el submenú

Los títulos se presentan en color amarillo

manteniendo la imagen corporativa y causando mayor impacto en el

visitante

Se utiliza el color negro para resaltar el menú

principal

Los títulos se presentan en bold type para mostrar

la división de secciones dentro del mismo menú

Página de internet / Menús laterales - 2013 © Nuova Accademia Srl | Confidential


Direction

64

Ubicación actual, se puede cambiar por parte

del usuario

Sección dónde se muestran las

clasificaciones más visitadas

Variedad de canales que dirigen a temas de interés

en la localidad como espacios turísticos y de

esparcimieto

Acceso a los demás productos digitales de la

empresa

Página de internet / Manú al pié de página - 2013 © Nuova Accademia Srl | Confidential


Direction

65

Páginas asociadas a la misma compañia

Información legal de la compañía

Repetición del menú lateral derecho

Página de internet / Página de búsqueda - 2013


Direction

66

Listado de negocios con las información básica

Paginación para mantener ubicado al visitante y

darle la opción de regresar a la página de su elección

Retícula interior a dos columnas

Estilo híbrido de mostrar resultados de la búsqueda

Ubicación dentro del sitio

Página de internet / Anuncio – 2013


Direction

67

Ubicación dentro del sitio

Mapa de ubicación interactivo, se pueden

trazar rutas y hacer acercamientos

Redes sociales del anunciante

Menú interno del anuncio

Información del anunciante

Estilo híbrido de mostrar la información

Página de internet / Menumanía – 2013


Direction

68

Mantiene la misma arquitectura web que el

sitio principal

Página de internet / Menumanía – 2013


Direction

69

Barra de búsqueda del micrositio

Estilo tipo listado de mostrar la información

Página de internet / Web Móvil v.iPad Home– 2013


Direction

70

Diseño responsivo para vista en dispositivos

móviles

App iPad / Menú principal- 2013 © Nuova Accademia Srl | Confidential


Direction

72

Botón para menú de búsqueda

La arquitectura de la app está reticulada y diseñada

para tener facilidad en intercambio de

información por sección

Se mantiene la misma imagen y concepto que en

el sitio web

Página de internet / Manú principal de navegación- 2013 © Nuova Accademia Srl | Confidential


Direction

74

Opciones de visita, mantienen la arquitectura

de la aplicación

Se utilizan botones con gráficos abstractos y texto para no crear

confusión en el usuario

Baja el nivel de opacidad para resaltar el menú

activo

Página de internet / Botón información - 2013 © Nuova Accademia Srl | Confidential


Direction

75

Información sobre como buscar dentro de la app

Se baja la opacidad para no distraer al usuario

Botón de información

Página de internet / Resultados de la búsqueda - 2013 © Nuova Accademia Srl | Confidential


Direction

76

Mapa de ubicación interactivo en el que se

muestran todos los resultados de la lista.

Redes sociales del anunciante

Resultados a manera de listado

Banner publicitario

Página de internet / Resultados de la búsqueda - 2013 © Nuova Accademia Srl | Confidential


Direction

77

La interactividad táctil del mapa permite

acercarse, alejarse y trazar rutas de tránsito


TU10 • Ejercicio en clase: una nueva interfaz digital para el caso local


Direction

78

• Para el ejercicio en clase los estudiantes tienen dos opciones:

1. Proyectar algo nuevo (proyecto desde cero sobre un tema elegido)

2.  Rediseñar de una interfaz digital existente

• Se trata de un ejercicio de diseño web.

Ejercicio en clase del caso de estudio local

79


Direction

• Proyectando desde cero

1.  Dar al alumno el resumen más fácil y entendible posible, especificando claramente los objetivos finales (mínimo 1 objetivo de diseño, 1 objetivo de información, 1 meta retroalimentación)

2.  Que realizen ejercicios con la tecnología y el software que conocen. No necesitamos expertos en HTML, CSS, Javascript o demás ... sólo tenemos que comprobar si tienen la idea de un entorno digital y cómo organizar el proyecto.


80


Direction

• Rediseñar un proyecto (reconstrucción de un sitio web existente)

1.  Especificar las nuevas metas del rediseño: dejarlos analizar los problemas de este curso, confrontar lo más teóricos con los más prácticos. Ayudarles a formular un resumen correcto.

2.  Déjelos ejercitarse con la tecnología y el software que conocen. No necesitamos expertos en HTML, CSS, Javascript o demás...

3. Si el maestro o el personal docente tienen algo de conocimiento en tecnologías de diseño web, trate de involucrar al estudiante más hábil como líder de proyecto para formar un grupo de diseño web real y tratar de construir un nuevo sitio web real (publicarlo online si es posible).


81


Direction


TU11 • Revisión y recapitulación


Direction

82

•  Coordinación y revisión de proyectos, puesta a punto, verificación del diseño.

•  Producción con las técnicas finales específicadas y determinadas:

•  Personas que conocen el lenguaje web (html, CSS y Javascript)

•  Personas que no conocen (ellos presentarán en la computadora el diseño de página realizado con el software preferido)

Revisión y recapitulación

83


Direction


TU12 • Presentación final/Evaluación


Direction

84

– Material solicitados: •  Un proyecto/reporte breve e ilustrado •  Tablas impresas con composición gráfica,

interfase, diseño, etc

•  Material opcionales (solamente para expertos):

•  HTML Real + CSS + Páginas de JavaScript

•  Criterios de evaluación:

•  Activos del proyecto, arquitectura de contenidos, sistema de navegación, usabilidad, diseño gráfico y creatividad.

Presentación Final/Evaluación

85


Direction

Interac)on Design: Beyond Human-‐Computer Interac)on Publisher: John Wiley & Sons Inc; 3 edizione (2011) Authors: Yvonne Rogers (Autore), Helen Sharp (Autore), Jennifer Preece (Autore) Designing Web Usability: The Prac)ce of Simplicity di Jakob Nielsen (1999) Publisher: New Riders Pub (1999) Author: Jakob Nielsen Digital Color: Acquisi)on, Percep)on, Coding and Rendering Publisher: Wiley Authors: Chris)ne Fernandez-‐maloigne, Frederique Robert-‐Inacio, Ludovic Macaire Ordering Disorder: Grid Principles for Interac)on Design Publisher: New Riders Pub; 1 edizione (2010) Author: Khoi Vinh

Designing Interac)ons Publisher: Mit Pr (2006) Author: Bill Moggridge Designing Media Publisher: Mit Pr; Har/Dvdr edizione (2010) Author: Bill Moggridge Simple and Usable Web, Mobile, and Interac)on Design Publisher: New Rid ers Press 2010 Author: Giles Colborne Web Naviga)on Publisher: Stapress (2012) Author: Ferdinand Maria Quincy

Bibliografía

86


Direction

evidencias web

Documents

seccin blanca

esseccin amarilla

primera seccin clasificada

seccin amarillaha ido

compaa telefnica mexicana

nueva compaa

telfonos de mxico

creacin de telmex