98
La web exportadora: diseño, usabilidad y experiencia de usuario como factores de éxito © hibu plc 2012 1 Oscar Barriga Gallarday Especialista de Marketing Digital

La web exportadora: diseño, usabilidad y experiencia de

  • Upload
    others

  • View
    5

  • Download
    1

Embed Size (px)

Citation preview

Page 1: La web exportadora: diseño, usabilidad y experiencia de

La web

exportadora: diseño,

usabilidad y experiencia de

usuario como factores de

éxito

© hibu plc 2012 1

Oscar Barriga Gallarday

Especialista de Marketing Digital

Page 2: La web exportadora: diseño, usabilidad y experiencia de

Objetivo

© hibu plc 2012 2

Conocer los principios del diseño

web y poder sustentar mejoras o

funcionalidades a una web de

exportadores.

Page 3: La web exportadora: diseño, usabilidad y experiencia de

¿Qué es un Dominio?

http://www.misitioweb.com.pe

DOMINIO

http://www.misitioweb.pe

http://www.misitioweb.com

http://www.misitioweb.biz

http://www.misitioweb.net

http://www.mi-sitio-web.info

Mismo nombre pero diferente extensión

Otro dominio

http://www.misitioweb.info

Page 4: La web exportadora: diseño, usabilidad y experiencia de

Dominios Internacionales

.com

.net

.biz

.org

.edu

.info Entre otros…

http://www.enom.com/

http://www.godaddy.com/

US$ 12 x AÑO

Page 5: La web exportadora: diseño, usabilidad y experiencia de

Dominios Nacionales

.pe

.com.pe

.net.pe

.info.pe

.edu.pe

.gob.pe Entre otros…

S/. 110 x AÑO

http://punto.pe/

Page 6: La web exportadora: diseño, usabilidad y experiencia de

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

Page 7: La web exportadora: diseño, usabilidad y experiencia de

¿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.

Page 8: La web exportadora: diseño, usabilidad y experiencia de

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

Page 9: La web exportadora: diseño, usabilidad y experiencia de

Tipos de Hosting

Tu Sitio Web Tu Sitio Web

Servidor Compartido Servidor Dedicado

Page 10: La web exportadora: diseño, usabilidad y experiencia de

http://www.godaddy.com/

US$ 72 x AÑO

Page 11: La web exportadora: diseño, usabilidad y experiencia de

http://www.exclusivehosting.net/

US$ 84 x AÑO

Page 12: La web exportadora: diseño, usabilidad y experiencia de

http://www.bluehost.com/

US$ 60 x AÑO

Page 13: La web exportadora: diseño, usabilidad y experiencia de

http://www.brinkster.com

US$ 156 x AÑO

Page 14: La web exportadora: diseño, usabilidad y experiencia de

¿Qué es un Sitio Web?

Páginas

Hosting

Page 15: La web exportadora: diseño, usabilidad y experiencia de

¿Qué es un Sitio Web?

Cambiar el Nro.

de mi Teléfono

Web Estática

Cambiar el Nro.

de mi Teléfono

Web Dinámica

Page 16: La web exportadora: diseño, usabilidad y experiencia de

HTML

HyperText Markup Language

Lenguaje de Marcado de Hipertexto

Page 17: La web exportadora: diseño, usabilidad y experiencia de

HTML

Etiquetas

Código para

programar páginas web

Entre

Corchetes

angulares <> Interpretado

por los

Navegadores

Page 18: La web exportadora: diseño, usabilidad y experiencia de

HTML

Page 19: La web exportadora: diseño, usabilidad y experiencia de

CSS

Cascading Style Sheets

Hojas de estilo en cascada

Page 20: La web exportadora: diseño, usabilidad y experiencia de

CSS

Le da vida al

HTML

Palabras

reservadas

Interpretado

por el

Navegador

Palabras definidas por

el usuario

Bloques de

Estilos

Page 21: La web exportadora: diseño, usabilidad y experiencia de

CSS

Un HTML sin

CSS

Page 22: La web exportadora: diseño, usabilidad y experiencia de

CSS

Un HTML con

CSS

Page 23: La web exportadora: diseño, usabilidad y experiencia de

Flash

No desarrolle

sitios web 100%

en Flash

Page 24: La web exportadora: diseño, usabilidad y experiencia de

Flash

Page 25: La web exportadora: diseño, usabilidad y experiencia de

http://www.miperuproducts.com/

Page 26: La web exportadora: diseño, usabilidad y experiencia de

Flash

Page 27: La web exportadora: diseño, usabilidad y experiencia de

Flash

Page 28: La web exportadora: diseño, usabilidad y experiencia de

Usabilidad

© hibu plc 2012 28

Page 29: La web exportadora: diseño, usabilidad y experiencia de
Page 30: La web exportadora: diseño, usabilidad y experiencia de
Page 31: La web exportadora: diseño, usabilidad y experiencia de
Page 32: La web exportadora: diseño, usabilidad y experiencia de
Page 33: La web exportadora: diseño, usabilidad y experiencia de

¿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.”

Page 34: La web exportadora: diseño, usabilidad y experiencia de
Page 35: La web exportadora: diseño, usabilidad y experiencia de
Page 36: La web exportadora: diseño, usabilidad y experiencia de

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

Page 37: La web exportadora: diseño, usabilidad y experiencia de

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.

Page 38: La web exportadora: diseño, usabilidad y experiencia de

Recomendaciones

sobre Usabilidad

© hibu plc 2012 38

Page 39: La web exportadora: diseño, usabilidad y experiencia de

Tipos de Sitios Web

© hibu plc 2012 39

Sitio Informativo Tienda Virtual (e-Commerce)

Page 40: La web exportadora: diseño, usabilidad y experiencia de

1. Utiliza Breadcrumbs o Migas de Pan

Page 41: La web exportadora: diseño, usabilidad y experiencia de

1. Utiliza Breadcrumbs o Migas de Pan

Page 42: La web exportadora: diseño, usabilidad y experiencia de

2. Datos del Contacto bien visibles

Page 43: La web exportadora: diseño, usabilidad y experiencia de

3. Utiliza fotos naturales, con caras

Page 44: La web exportadora: diseño, usabilidad y experiencia de

3. Utiliza fotos naturales, con caras

Page 45: La web exportadora: diseño, usabilidad y experiencia de

4. Buscador visible

Page 46: La web exportadora: diseño, usabilidad y experiencia de

5. Productos recomendados y/o

relacionados

Page 47: La web exportadora: diseño, usabilidad y experiencia de

6. Cuidar los botones

Page 48: La web exportadora: diseño, usabilidad y experiencia de

7. Mostrar Logotipos de Seguridad

Page 49: La web exportadora: diseño, usabilidad y experiencia de

8. Una buena ficha de Producto

Page 50: La web exportadora: diseño, usabilidad y experiencia de

9. Preguntas y Respuestas

Page 51: La web exportadora: diseño, usabilidad y experiencia de

10. Botones Sociales

Page 52: La web exportadora: diseño, usabilidad y experiencia de

11. Testimonios exitosos de

clientes

Page 53: La web exportadora: diseño, usabilidad y experiencia de

12. Alternativas a la Compra

(Prospectos)

Page 54: La web exportadora: diseño, usabilidad y experiencia de

13. No solo piensen en Internet Explorer

Page 55: La web exportadora: diseño, usabilidad y experiencia de

14. NO SOLO DISEÑEN PARA WEB http://brickartist.com/

Page 56: La web exportadora: diseño, usabilidad y experiencia de

15. NO LE PONGAS MUSICA DE

FONDO

Page 57: La web exportadora: diseño, usabilidad y experiencia de

No es diseño pero…

• Enlaces entrantes a tu sitio web

• Optimización del contenido de tu página

• Optimización de los meta tags

• XML sitemap

• Redirecciones 301

• No te olvides del Google Analytics

Page 58: La web exportadora: diseño, usabilidad y experiencia de

¿Cómo estructurar

nuestros sitios?

© hibu plc 2012 58

Page 59: La web exportadora: diseño, usabilidad y experiencia de

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.

Page 60: La web exportadora: diseño, usabilidad y experiencia de
Page 61: La web exportadora: diseño, usabilidad y experiencia de
Page 62: La web exportadora: diseño, usabilidad y experiencia de
Page 63: La web exportadora: diseño, usabilidad y experiencia de
Page 64: La web exportadora: diseño, usabilidad y experiencia de
Page 65: La web exportadora: diseño, usabilidad y experiencia de

¿Cómo organizo la información?

¿Cómo estructuro la información?

Page 66: La web exportadora: diseño, usabilidad y experiencia de

Navegación

Jerárquica

Page 67: La web exportadora: diseño, usabilidad y experiencia de

Navegación

Global

Page 68: La web exportadora: diseño, usabilidad y experiencia de

Local

Navegación

Page 69: La web exportadora: diseño, usabilidad y experiencia de

Navegación

Lineal ó Secuencial

◄ ►

Page 70: La web exportadora: diseño, usabilidad y experiencia de

Jerarquía Visual

Page 71: La web exportadora: diseño, usabilidad y experiencia de

Jerarquía Visual

Page 72: La web exportadora: diseño, usabilidad y experiencia de

• 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.

Jerarquía Visual

Page 73: La web exportadora: diseño, usabilidad y experiencia de

Llamadas a la Acción

Comprar No necesitas tarjeta de crédito

Page 74: La web exportadora: diseño, usabilidad y experiencia de

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

Page 76: La web exportadora: diseño, usabilidad y experiencia de

Llamadas a la Acción

Page 77: La web exportadora: diseño, usabilidad y experiencia de

Conversión Web

Una conversión se produce cuando un visitante completa una acción que tú

quieres que haga.

Page 78: La web exportadora: diseño, usabilidad y experiencia de

Conversión Web

Page 79: La web exportadora: diseño, usabilidad y experiencia de

¿Qué no debe faltar

en una Web de

Exportaciones?

© hibu plc 2012 79

Page 80: La web exportadora: diseño, usabilidad y experiencia de

Buscador

Page 81: La web exportadora: diseño, usabilidad y experiencia de

Ficha del Producto + Descarga

Page 82: La web exportadora: diseño, usabilidad y experiencia de

Productos Relacionados

Page 83: La web exportadora: diseño, usabilidad y experiencia de

Información de Contacto

Page 84: La web exportadora: diseño, usabilidad y experiencia de

Chat en Línea

Page 85: La web exportadora: diseño, usabilidad y experiencia de

Certificación y Seguridad

Page 86: La web exportadora: diseño, usabilidad y experiencia de

Social Media

Page 87: La web exportadora: diseño, usabilidad y experiencia de

Preguntas y Respuestas

Page 88: La web exportadora: diseño, usabilidad y experiencia de

Clientes internacionales

Page 89: La web exportadora: diseño, usabilidad y experiencia de

Testimonios

Page 90: La web exportadora: diseño, usabilidad y experiencia de

Lugares de Exportación

Page 91: La web exportadora: diseño, usabilidad y experiencia de

Información Proceso de Envío

Page 92: La web exportadora: diseño, usabilidad y experiencia de

Información Proceso de Pago

Page 93: La web exportadora: diseño, usabilidad y experiencia de

Enlaces a Promperú, ADEX, Mincetur

Page 94: La web exportadora: diseño, usabilidad y experiencia de

Idiomas

Page 95: La web exportadora: diseño, usabilidad y experiencia de

¿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?

Page 96: La web exportadora: diseño, usabilidad y experiencia de

¿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

Page 97: La web exportadora: diseño, usabilidad y experiencia de

Qué deben considerar en un

Presupuesto

• Dominio(s)

• Hosting

• Diseño Web

• Mantenimiento Mensual

• Fotografías

• Logo

• Video

• Traducción

Page 98: La web exportadora: diseño, usabilidad y experiencia de

¡Muchas Gracias!

© hibu plc 2012 98

Oscar Barriga G.

[email protected]