Semana 5.1: Interface con el cliente.

Presentación del tema: "Semana 5.1: Interface con el cliente."— Transcripción de la presentación:

1 Semana 5.1: Interface con el cliente

2 la Interfaz (el sitio) Es una representación virtual de la propuesta de valor (que será reconocida por el usuario) dada por una empresa; por consiguiente, debemos describir y ofrecer ejemplos para cada una de los elementos de diseño de la interfaz con el cliente. Este es un método gerencial, para tomar decisiones sobre un sitio web.

3 7 C Context, Site’s layout and design
Content, Text, pictures, sound and video that webpages contain Community, The ways sites enable user-to-user communication Customization, Site’s ability to self-tailor to different users or to allow users to personalize the site Communication, The ways sites enable site-to-user communication or two-way communication Connection, Degree site is linked to other sites Commerce, Site’s capabilities to enable commercial transactions 7 C

4 Context El contexto de un sitio web se enfoca en la estética (gráficos, colores y características) y percepción funcional (metas utilitarias como facilidad de navegación). “Se centra en el como” Comparar:

5 Dimensiones del Contexto
Función 1.1 División / sección 1.2 Vínculos, 1.3 Herramientas 1.4 Velocidad, 1.5 Confiabilidad 1.6 Plataforma 1.7 Acceso a los medios Estética 2.1 Colores 2.2 Temas visuales Animated radial list with picture Select the SmartArt graphic on the slide. On the Animations tab, in the Advanced Animation group, click Add Animation, and then under Entrance click Fade. (Intermediate) Also on the Animations tab, in the Timing group, do the following: In the Start list, select With Previous. To reproduce the SmartArt effects on this slide, do the following: In the Duration box, enter 1.00 seconds. On the Home tab, in the Slides group, click Layout, and then click Blank. Also on the Animations tab, in the Animation group, click Effect Options, and then click One by One. On the Insert tab, in the Illustrations group, click SmartArt. In the Choose a SmartArt Graphic dialog box, in the left pane, click Relationship. In the Relationship pane, click Radial List, and then click OK to insert the graphic into the slide. Also on the Animations tab, in the Advanced Animation group, click Animation Pane. In the Animation Pane, click the double arrow to expand the contents of the list. In the Animation Pane, select the first effect in the list (fade entrance effect). On the Animations tab, in the Animation group, click More, and then under Entrance click Grow & Turn. To enter text, select the graphic, and then click one of the arrows on the left border. In the Type your text here dialog box, in the top level bullets, enter the text for the three, smaller circle shapes in the graphic. In the second-level bullets, type the text for the bullets to the right of the three, smaller circle shapes. In the Animation Pane, select the second effect in the list (fade entrance effect). On the Animations tab, in the Animation group, click More, and then under Entrance click Wipe. On the slide, select the SmartArt, and then on the Design tab, in the Themes group, click Colors, and under Built-In, select Technic. Press and hold CTRL, and on the slide, select the large circle and all three small circles. In the Start list, select After Previous. In the Speed list, select 0.50 seconds. On the Home tab, in the Drawing group, click the arrow to the right of Shape Effects, point to Preset, and under Presets and select Preset 2 (first row, the second option from the left). Also on the Animations tab, in the Animation group, click Effect Options, and then click From Left. In the Animation Pane, select the third effect in the list (fade entrance effect). On the Animations tab, in the Animation group, click More, and then under Entrance click Zoom. On the slide, click on the picture icon in the center of the large circle. In the Insert Picture dialog box, select a picture, and then click Insert. (Notes: (1) If the picture in the large circle is distorted, tile the picture as a texture by selecting the large, picture-filled circle, and then on the Home tab, in the bottom right corner of the Drawing group, click the Format Shape dialog box launcher. In the Format Shape dialog box, click Fill in the left pane, and in the Fill pane check Tile picture as texture. (2) If necessary, change the tile position of the picture within the shape. To do this, in the Format Shape dialog box, in the Fill pane, under Tiling options, enter values into the Offset X and Offset Y boxes to reposition the focal point of the picture. To resize the picture, in the Format Shape dialog box, in the Fill pane, under Tiling options, enter values into the Scale X and Scale Y boxes.) In the Duration box, enter 1.00 second. In the Animation Pane, select the fourth effect in the list (fade entrance effect). On the Animations tab, in the Timing group, in the Start list, select With Previous. Press and hold CTRL, and in the Animation Pane, select the fifth and eighth effects in the list (fade entrance effects). On the Animations tab, in the Animation group, click More, and then under Entrance click Wipe. Also on the Animations tab, in the Timing group, in the Duration box, enter 0.50 seconds. Select the top, small circle in the SmartArt graphic. On the Home tab, in the bottom right corner of the Drawing group, click the Format Shape dialog box launcher. In the Format Shape dialog box, click Fill in the left pane, and in the Fill pane click Solid fill, and then in the Color list select Gray-25%, Background 2, Darker 75% (fifth row, the third option from the left). Press and hold CTRL, and in the Animation Pane, select the sixth and ninth effects in the list (fade entrance effects). On the Animations tab, in the Animation group, click More, and then under Entrance click Zoom. Also on the Animation tab, in the Timing group, do the following: Select the middle small circle in the SmartArt graphic. On the Home tab, in the bottom right corner of the Drawing group, click the Format Shape dialog box launcher. In the Format Shape dialog box, click Fill in the left pane, and in the Fill pane click Solid fill, and then in the Color list select Gold, Accent 2 (first row, the sixth option from the left). In the Duration list, select 0.50 seconds. Press and hold CTRL, and in the Animation Pane, select the seventh and tenth effects in the list (fade entrance effects). On the Animations tab, in the Timing group, in the Start list select After Previous. Select the bottom small circle in the SmartArt graphic. On the Home tab, in the bottom right corner of the Drawing group, click the Format Shape dialog box launcher. In the Format Shape dialog box, click Fill in the left pane, and in the Fill pane click Solid fill, and then in the Color list select Lavender, Accent 3 (first row, the seventh option from the left). To reproduce the background effects on this slide, do the following: Right-click the slide background area, and then click Format Background. In the Format Background dialog box, click Fill in the left pane, select Gradient fill in the Fill pane, and then do the following: In the Type list, select Radial. Click the button next to Direction, and then click From Center (third option from the left). Press and hold CTRL, and select all three lines connecting the large circle to the three smaller circles. On the Home tab, in the bottom right corner of the Drawing group, click the Format Shape dialog box launcher. In the Format Shape dialog box, do the following: Under Gradient stops, click Add gradient stop or Remove gradient stop until two stops appear in the slider. Also under Gradient stops, customize the gradient stops that you added as follows: Click Line Color in the left pane, and in the Line Color pane click Solid line. Select the first stop in the slider, and then do the following: Also in the Line Color pane, in the Color list select White, Background 1, Darker 25% (fourth row, first option from the left). In the Position box, enter 0%. Click the button next to Color, and then under Theme Colors select White, Background 1 (first row, first option from the left). Click Line Style in the left pane, and in the Line Style pane, in the Width box enter 2.5 pt. Also in the Line Style pane, in the Dash type list select Round Dot (second option from the top). Select the last stop on the slider, and then do the following: Press and hold CTRL, and select all three text boxes in the SmartArt graphic. On the Home tab, in the Font group, in the Font Size box enter 22 pt. In the Position box, enter 100%. Click the button next to Color, and then under Theme Colors select White, Background 1, Darker 35% (fifth row, first option from the left). To reproduce the animation effects on this slide, do the following:

6 El contexto (la pantalla)
Dimensiones en el contexto 1. Función, presentación provechosa en una sola página, coherente para pasar de un tema a otro. 1.1 División de la sección, es la organización equilibrada en sub-componentes (estructura temática) 1.2 Estructura de vínculos, para ligar secciones alternas (Categorías) 1.3 Herramientas de navegación, facilitan el desplazamiento del usuario en el sitio. Ej: solo con Chrome Google todos los navegadores todos los navegadores

7 El contexto (la pantalla)
Desempeño del sitio (f. tecnología) 1.4 Velocidad, tiempo de carga 1.5 Confiabilidad, “ tiempo de inactividad”, respuestas esperadas 1.6 Independencia de la plataforma, navegadores, hardware, versiones, etc. 1.7 Acceso a los medios, otros servicios futuros, XML, compatibilidad de periféricos. (PC, PDA, Celular, TV, etc) Ver Sony, Nintendo, etc.

8 El contexto (arte) 2. Estética, se crea a través de características visuales como colores, gráficos, fotografías, tipos de letras y otros. 2.1 Esquema de colores, que desea transmitir? 2.2 Temas visuales, ayuda a narrar la historia presentada en el sitio

9 Convergencia

10 Content Contenido. El contenido se define como toda temática digital en el sitio (texto, video, audio y gráficos), así como la forma en que se presenta y sus dominios, incluyendo ofertas de producto, servicio e información. “Se centra en el que hay” Comparar :

11 Contenido - Dimensiones
Mezcla de ofertas, Productos Servicios,etc 1 Mezcla de atracción Cognitivo - emocional 2 Mezcla de Multimedia Audio texto, video 3 Tipo de contenido Volatilidad 4 1. Mezcla de ofertas, puede incluir productos, información o servicios, solos o combinados. 2. Mezcla de atracción, son los mensajes de promoción y comunicación que proyecta la compañía. Vinculada a la propuesta de valor. Atractivo cognoscitivo, aspectos funcionales de la oferta, precio, confiabilidad, disponibilidad, extensión de ofertas, personalización. Atractivo emocional, resonancia emocional, con la marca, como humor, novedad, calidez o anécdotas. 3. Mezcla de Multimedia, audio, texto, video, gráficos 4. Tipo de contenido, volatilidad del contenido

12 Arquetipos de contenido
Dominio de oferta Supertienda El mejor Especialidad Dominio de información Dominio del mercado Dominio de oferta Supertienda, amplitud y profundidad de productos. El mejor de la categoría, exclusivo en producto servicio, ofrece descripciones y recomendaciones Tienda de especialidad, enfoca en calidad excepcional. Dominio de información, se enfocan en información, con herramientas que explotan el área de interés del usuario. Pueden ser generadoras de contenidos. Dominio del mercado, B2B proveedores y compradores en una web para transar.

13 Arquetipos de contenido y tipos de oferta
Producto Físico Información Servicio Supertienda Walmart.com CEOexpress.com IBM.com El mejor de su categoría Petsmart.com DowJones.com Schwab.com Especializado Frontgate.com Hoovers.com kisstechnologies.co.uk Dominante de información Census.gov IFilm.com convergys.com Dominante del mercado PlasticsNet.com Verticalnet.com Monster,com

14 Community Comunidad. La comunidad se define como la interacción entre los usuarios del sitio; es decir son las formas en que el sitio permite la comunicación de usuario a usuario, o uno muchos. Cuenta con la participación individual que hace que vuelva el participante Ej:

15 Elementos de la comunidad
Cohesión Eficacia Ayuda, Relaciones Lenguaje Autorregulación Cohesión, sentido de comunidad del grupo y sentido individual de formar parte del grupo. Eficacia, efecto del grupo en la vida de los miembros Ayuda, capacidad percibida para pedir y recibir ayuda. Relaciones, probabilidad de interaccion individual y formación de una amistad. Lenguaje, frecuencia de un lenguaje especializado Autorregulación, capacidad del grupo de supervisarse a si mismo.

16 Tipos de Comunidades Solo amigos, gente que quiere conocer gente
Entusiastas, gente que comparte un interés Amigos en necesidad, grupos de apoyo Jugadores, gente que juega junta Comerciantes, gente que comercia posesiones de otra persona. Solo amigos, gente que quiere conocer gente Entusiastas, gente que comparte un interés Amigos en necesidad, grupos de apoyo Jugadores, gente que juega junta Comerciantes, gente que comercia posesiones de otra persona.

17 Nivel de participación
Asisten, solo ven Pasivos Participan en lo que otros crean Activos Crean temas y planean actividades Motivadores Sirven de intermedarios Moderadores Pasivos, no se comprometen, solo asisten Activos, participan en actividades que otros crean Motivadores, crean temas y planean actividades de interés para su comunidad Moderadores, los que sirven de intermedarios entre los miembros

18 Beneficios de los miembros
Satisfacción a sus necesidades Inclusión Influencia mutua Experiencias emocionales compartidas, Satisfacción a sus necesidades Inclusión Influencia mutua Experiencias emocionales compartidas, ocasiones memorables.

19 Arquetipos de comunidad
Según área de interés Según nivel de interactividad Bazar Santuario Tipos de Comunidad Parque temático Teatro Según área de interés Bazar, se permite vagar por sitios de interés, pero sin medios para interactuar significativamente. Tiene mucho que recorrer y explorar. Los usuarios no tiene un interés común. Ej secondlife Parque temático, se enfoca en áreas de interés que están organizadas por categorías y subcategorías. Albergan varias comunidades. greenpeace.org Club, se enfoca solo en un área de interés, con grandes volúmenes de información Ej Según nivel de interactividad Santuario, parece club, pero con una mínima interacción, lo participantes ponen gran cantidad de contenido. Ej Wiki Teatro, trata de que los miembros participen Ej spike.com Café, hay un solo interés y con alta participación de los miembros como conversaciones. Crean el 95% del contenido. Ej facebook Club Café

20 Conversión - Customization
Es la capacidad de un sitio para adaptarse a cada usuario o para que cada usuario lo adopte. El usuario inicia la “personalización” y la organización da inicio a la “adaptación”.

21 Dimensiones Conversión
Adaptación Cuando la empresa inicia esta actividad Personalización cuando lo hace el usuario.

22 Dimensiones de la conversión Personalización.
Registros de entrada, para conocer al usuario Cookies, se usan para conocer el conportamiento del usuario. Cta de correo personalizada, servicio de Configuración de contenido y disposición, de pantalla, de fuentes, según sus intereses. Almacenamiento, disco duro virtual, , url, etc. Agentes, alarmas, avisos varios. Personalización, el sitio se configura según el usuario con sus preferencias, selecciona contenidos, contexto, herramientas. Registros de entrada, para conocer al usuario Cookies, se usan para conocer el conportamiento del usuario. Cta de correo personalizada, servicio de Configuración de contenido y disposición, de pantalla, de fuentes, según sus intereses. Almacenamiento, disco duro virtual, , url, etc. Agentes, alarmas, avisos varios.

23 Dimensiones de la conversión Adaptación
Adaptaciones con base en el comportamiento del usuario, precios, publicidad, etc. Adaptaciones con base en el comportamiento de otros usuarios con preferencias similares, filtración colectiva

24 Communication usuario a sitio Bilateral, interactiva
Comunicación. La comunicación es el dialogo entre el sitio y sus usuarios. A su vez, adopta tres formas: comunicación de sitio a usuario usuario a sitio Bilateral, interactiva

25 Dimensiones de la Comunicación
Transmisión organización -> usuario. Interactiva en dos sentidos. Transmisión, dar información en un sentido, de la organización al usuario. Correos masivos, Preguntas frecuentes Boletines por correo electrónico Recordatorios de actualización de contenido Transmisión de espectáculos Interactiva, en dos sentidos Diálogo de comercio electrónico Servicio a clientes Aportación del usuario, calificación, retroalimentación Híbrida, se juntan las anteriores, los usuarios pasan a otros los contenidos transmitidos (Mkt viral) Híbrida se juntan las anteriores.

26 Arquetipos de comunicación
Se clasifican según los tipos de comunicación de sitio a usuario y de usuario a sitio. Uno a muchos, usuario no responde Uno a muchos, usuario responde Uno a muchos, interacción en vivo Uno a uno, usuario no responde, personalizado Uno a uno, usuario responde, zShops de Uno a uno, interacción en vivo, liveperson.com

27 Connection Conexión. La conexión se define como el alcance de los vínculos formales (por lo general mediante links o iconos gráficos) entre el sitio y otros sitios. Ej: rss

28 Dimensiones de la conexión
Vínculos con otros sitios, que del sitio original llevan a un tercero. Nytimes.com a libro en bn.com Fondo del sitio principal, abre lugar a un tercero. Contenido subcontratado Porcentaje de contenido con origen en el sitio principal Trayectoria de conexión, lleva al usuario fuera del sitio “camino de salida”. También puede se “de entrada” cuando no necesita salir para traer datos de otros sitios.

29 Arquetipos de Sitio Sitio de destino, proporcionan contenido generado casi todo por el sitio. Se les considera confiables. Limita acceso a otros sitios. Sitio de cubo, da contenido propio y de terceros (expertos) Sitio de portal, proporcionan contenido generado casi todo por otros. Ej Yahoo.com Programas de afiliados, dirige a los usuarios a sitios web afiliados vía vínculos integrados a íconos, no se sale del sitio. Ej OnHealth Contenido subcontratado, contenido de mucha calidad de sitios contratados. Real presenta CNN, BBC y se enfoca a desarrollar software. Meta software, son aplicaciones de software de utilería y herramientas.

30 Arquetipos de Sitio Arquetipos De Sitio Programas de afiliados
Sitio de destino Arquetipos De Sitio Sitio de cubo Contenido subcontratado Sitio de portal Meta software Sitio de destino, proporcionan contenido generado casi todo por el sitio. Se les considera confiables. Limita acceso a otros sitios. Sitio de cubo, da contenido propio y de terceros (expertos) Sitio de portal, proporcionan contenido generado casi todo por otros. Ej Yahoo.com Programas de afiliados, dirige a los usuarios a sitios web afiliados vía vínculos integrados a íconos, no se sale del sitio. Ej OnHealth Contenido subcontratado, contenido de mucha calidad de sitios contratados. Real presenta CNN, BBC y se enfoca a desarrollar software. Meta software, son aplicaciones de software de utilería y herramientas.

31 Commerce Comercio. El comercio se define como la venta de bienes, productos o servicios en el sitio (la característica habitual que usan las compañías es el “carrito de compras”). Ver