Diseño Web para Empresas Exportadoras. Oscar Barriga Gallarday Especialista de Marketing Digital

Transcripción

1 Diseño Web para Empresas Exportadoras Oscar Barriga Gallarday Especialista de Marketing Digital 1

2 Objetivo Conocer los principios del diseño web y poder sustentar mejoras o funcionalidades a una web de exportadores. Un gran poder conlleva una gran responsabilidad - Tio Ben - 2

3 Agenda Conceptos Generales Dominio, Hosting, Sitio Web, HTML, CSS, Javascript, FLASH Enfocarnos en la Usabilidad Cómo estructurar una Web? Contenido Navegación Enlaces Jerarquía Visual Llamadas a la acción Conversión Web Qué no debe faltar en una web de Exportaciones? Cómo escoger un proveedor para tu web? 3

4 Agenda Conceptos Generales Dominio, Hosting, Sitio Web, HTML, CSS, Javascript, FLASH Enfocarnos en la Usabilidad Cómo estructurar una Web? Contenido Navegación Enlaces Jerarquía Visual Llamadas a la acción Conversión Web Qué no debe faltar en una web de Exportaciones? Cómo escoger un proveedor para tu web? 4

5 Qué es un Dominio? DOMINIO Mismo nombre pero diferente extensión Otro dominio 5

6 Y los subdominios? Nivel 0: Nivel 1:

7 Dominios Internacionales.com US$ 12 x AÑO Etc 7

8 Dominios Nacionales.pe S/. 110 x AÑO Etc 8

9 Un Ejemplo Si queremos comprar un dominio para nuestra empresa exportadora y queremos registrar la marca: empresaexportadora.com empresaexportadora.com.pe empresaexportadora.pe S/. 32 x AÑO S/. 110 x AÑO S/. 110 x AÑO S/. 252 x AÑO 9

10 Dueño del Dominio 1. Ingresa a 2. Ingresa el nombre completo de tu dominio 3. Clic en Who.is Search 4. Revisa la información de tu dominio, Propietario, NS Servers, Fecha de Vencimiento, etc. 10

11 11

12 DNS Domain Name Server Servidor de Nombre de Dominio 12

13 Sin DNS Debe conocer la dirección IP del sitio web. El Servidor miweb crea el sitio y le asigna este nombre sin DNS Genera Dirección IP Diseña Servidor miweb Web del Cliente 13

14 Con DNS El Servidor miweb crea el sitio y le asigna este nombre. con DNS Genera Dirección IP Servidor DNS Diseña = Servidor miweb Web del Cliente 14

15 Qué es un Hosting? A) Provee a los Sitios Webs un hogar donde vivir. B) Un espacio para tu sitio en el Internet. C) Una empresa que permite a los proveedores operar sus propios sitios webs sin necesidad de tener que implementar una computadora 24/7. D)Todas las anteriores. E) Ninguna de las anteriores. 15

16 Hosting DATA CENTER + Rendimiento de nuestros Sitios Webs - Menos costos de inversión - Alta disponibilidad - Servicio 24x7x365 - Escalabilidad - Disaster Recovery - Backups - Protección ante ataques 16

17 Tipos de Hosting Tu Sitio Web Tu Sitio Web Servidor Compartido Servidor Dedicado 17

18 Qué es un Sitio Web? Hosting Páginas 18

19 Qué es un Sitio Web? Cambiar el Nro. de mi Teléfono Cambiar el Nro. de mi Teléfono Web Estática Web Dinámica 19

20 HTML HyperText Markup Language Lenguaje de Marcado de Hipertexto 20

21 HTML Código para programar páginas web Interpretado por los Navegadores Etiquetas Entre Corchetes angulares <> 21

22 HTML 24

23 CSS Cascading Style Sheets Hojas de estilo en cascada 25

24 CSS Le da vida al HTML Palabras reservadas Interpretado por el Navegador Palabras definidas por el usuario Bloques de Estilos 26

25 CSS Un HTML sin CSS 27

26 CSS Un HTML con CSS 28

27 Java Script Lenguaje de Programación Del Lado del Cliente Interpretado por el Navegador

28 Java Script

29 Flash No desarrolle sitios web 100% en Flash 31

30 Flash 32

31 33

32 Flash 34

33 Flash 35

34 Flash 36

35 Agenda Conceptos Generales Dominio, Hosting, Sitio Web, HTML, CSS, Javascript, FLASH Enfocarnos en la Usabilidad Cómo estructurar una Web? Contenido Navegación Enlaces Jerarquía Visual Llamadas a la acción Conversión Web Qué no debe faltar en una web de Exportaciones? Cómo escoger un proveedor para tu web? 37

36 38

37 39

38 40

39 41

40 Qué es Usabilidad? Usabilidad se define coloquialmente como facilidad de uso, ya sea de una página web, una aplicación informática o cualquier otro sistema que interactúe con un usuario. 42

41 43

42 44

43 45

44 46

45 47

46 El ROI de la Usabilidad La Usabilidad puede medirse a partir de cinco variables: CUANTITATIVO Facilidad de aprendizaje Eficiencia de uso Recordación Baja tasa de errores CUALITATIVO Satisfacción 48

47 Beneficios de la Usabilidad Reducción de los costes de aprendizaje. Disminución de los costes de asistencia y ayuda al usuario. Optimización de los costes de diseño, rediseño y mantenimiento de los sitios. Aumento de la tasa de conversión de visitantes a clientes del sitio web. Mejora la imágen y el prestigio del sitio web. Mejora la calidad de vida de los usuarios del sitio, ya que reduce su estrés, incrementa la satisfacción y la productividad. 49

48 Los 10 Errores más comunes en Usabilidad 52

49 1. Splash Screens 53

50 2. Link o no Link 54

51 3. Ruido Visual 55

52 4. Pobre Navegación 56

53 5. Imágenes Parpadeantes 57

54 6. No más de una navegación 58

55 7. Mal etiquetado de Links 59

56 8. Buscadores deficientes 60

57 9. Texto difícil de leer 61

58 10. El botón de atrás no funciona 62

59 Recomendaciones sobre Usabilidad 63

60 1. Utiliza Breadcrumbs o Migas de Pan 64

61 1. Utiliza Breadcrumbs o Migas de Pan 65

62 2. Datos del Contacto bien visibles 66

63 3. Utiliza fotos naturales, con caras 67

64 3. Utiliza fotos naturales, con caras 68

65 4. Buscador visible 69

66 5. Productos recomendados y/o relacionados 70

67 6. Cuidar los botones 71

68 7. Mostrar Logotipos de Seguridad 72

69 8. Una buena ficha de Producto 73

70 9. Preguntas y Respuestas 74

71 10. Botones Sociales 75

72 11. Testimonios exitosos de clientes 76

73 12. Alternativas a la Compra (Prospectos) 77

74 13. NO SOLO PIENSEN EN INTERNET EXPLORER 78

75 14. NO SOLO DISEÑEN PARA WEB 79

76 15. NO LE PONGAS MUSICA DE FONDO 80

77 Agenda Conceptos Generales Dominio, Hosting, Sitio Web, HTML, CSS, Javascript, FLASH Enfocarnos en la Usabilidad Cómo estructurar una Web? Contenido Navegación Enlaces Jerarquía Visual Llamadas a la acción Conversión Web Qué no debe faltar en una web de Exportaciones? Cómo escoger un proveedor para tu web? 82

78 Contenido La Arquitectura de la Información Arte y ciencia de organizar la información para ayudar a la gente a encontrar la información que quiere. 83

79 84

80 85

81 86

82 87

83 88

84 Cómo organizo la información? Cómo estructuro la información? 89

85 Navegación Jerárquica 90

86 Navegación Global 91

87 Navegación Local 92

88 Navegación Lineal ó Secuencial 93

89 Jerarquía Visual 94

90 Jerarquía Visual 95

91 Jerarquía Visual Promueve la claridad de los contenidos para su adecuada comprensión e interacción. Ayuda a un usuario a identificar qué es lo más importante de una página. 96

92 Llamadas a la Acción Comprar No necesitas tarjeta de crédito 97

93 Llamadas a la Acción Animar al visitante a realizar alguna acción concreta. Características: Tamaño Ubicación Colores Opciones Presión: Ofertas y Precios 98

94 Llamadas a la Acción 99

95 Llamadas a la Acción 100

96 Conversión Web Una conversión se produce cuando un visitante completa una acción que tú quieres que haga. 101

97 Conversión Web 102

98 Agenda Conceptos Generales Dominio, Hosting, Sitio Web, HTML, CSS, Javascript, FLASH Enfocarnos en la Usabilidad Cómo estructurar una Web? Contenido Navegación Enlaces Jerarquía Visual Llamadas a la acción Conversión Web Qué no debe faltar en una web de Exportaciones? Cómo escoger un proveedor para tu web? 103

99 Qué NO debe faltar en una web de Exportaciones? 104

100 Buscador 105

101 Ficha del Producto + Descarga 106

102 Productos Relacionados 107

103 Información de Contacto 108

104 Chat en Línea 109

105 Certificación y Seguridad 110

106 Social Media 111

107 Preguntas y Respuestas 112

108 Clientes internacionales 113

109 Testimonios 114

110 Lugares de Exportación 115

111 Información Proceso de Envío 116

112 Información Proceso de Pago 117

113 Enlaces a Promperú, ADEX, Mincetur 118

114 Idiomas 119

115 Agenda Conceptos Generales Dominio, Hosting, Sitio Web, HTML, CSS, Javascript, FLASH Enfocarnos en la Usabilidad Cómo estructurar una Web? Contenido Navegación Enlaces Jerarquía Visual Llamadas a la acción Conversión Web Qué no debe faltar en una web de Exportaciones? Cómo escoger un proveedor para tu web? 120

116 Cómo escoger un buen proveedor para el diseño de tu web? Trayectoria, años de experiencia Trabajos realizados Cartas de Recomendaciones de otros clientes Tiempo del Proyecto (2 meses) Garantía y Servicio Post-Venta Tiene página Web? 121

117 Cómo escoger un buen proveedor para el diseño de tu web? Autogestión (Administrador de la Web) Derechos de Propiedad, Dominio, Hosting y Web Penalidades Evalúa varias alternativas Copia de Respaldo de tu Web Nunca pagues el 100% desde el inicio 122

118 Qué deben considerar en un Presupuesto Dominio(s) Hosting Diseño Web Mantenimiento Mensual Fotografías Logo Video Traducción 123

119 Gracias Oscar Barriga Gallarday Especialista de Marketing Digital Yell Perú - PaginasAmarillas.pe obarriga 124

120 Para Insipiración