PDF de programación - Sitios web

2

Sitios

web

¿Cuándo una web es perfecta?

4 F’s

Funcionalidad
Fluidez
Feedback
Fidelización

Web
1.0

Web
2.0

Web
3.0

Personas

conectándose

a la Web

Personas

conectándose

a personas
RED SOCIAL

Aplicaciones web

conectándose

a aplicaciones web
(Inteligencia artificial)

2) Sitios Web

Perfil: Mercadeo / Negocio

¿A quién me dirijo? ¿Qué objetivos busco? ¿Qué le voy a ofrecer a mi público?

Estrategia

1

l
a
e
d

i


b
e
w

¿Cuáles son las tecnologías
más convenientes?
¿Me permite crecer?
¿Me permite gestionar?
¿Hosting / dominio?
¿SEO / estándares?
Tecnología
Perfil:
Ingeniero
Programador

3

¿Cómo luce mi web?
¿Transmite la personalidad
de marca que quiero?
¿Es fácil de usar?
Diseño
Perfil:
Diseñador
Publicista

2

2) Sitios Web

(1)

Estrategia

Brief

¿A quién me dirijo?
¿Qué necesidades tiene?
¿Qué está buscando?
¿Qué esperaría encontrar en mi web?
¿Qué nivel de dominio tecnológico tiene?

¿Qué objetivos tengo?

1

2

3

Atraer nuevos clientes

Fidelizar

Transacciones (dinero y/o información)

Aumenta la complejidad
y la necesidad de recursos
destinados

2) Sitios Web

(1)

Estrategia

¿Qué le voy a ofrecer a mi público
para alcanzar mis objetivos?
¿Qué información va a encontrar?
¿Qué acciones va a poder tomar?

Árbol de secciones:
Contenidos +
Funcionalidades
(servicios on-line)

$

Costos
Cronogramas

Estrategias basadas
en la relación comercial

Estrategias basadas
en el valor agregado

Información detallada
Perfiles de usuarios
Suscripciones
Descuentos on-line

2) Sitios Web

Personalización de la web
Información colindante
Feedback de usuarios
Ocio, entretenimiento
Blogging corporativo
Wiki corp. (prosumidores)

Estrategias basadas
en la viralidad

Recomendación
RSS
Interacción entre usuarios
Mashups
Social plugins
Social Media Optimization
SMO

Déle visibilidad a quienes
le hayan regalado vínculos

Recompense

los links
entrantes

Incremente

su

“linkeabilidad”

SMO

Haga su web

más sociable y, así,

más visible

Mayor número de páginas
Blogs

Facilite el

“bookmarking”

y el

“share”

Guardar en favoritos
Recomendar
Compartir en redes
“Taggear”
Marcadores sociales

Ayude a que
su contenido

viaje por

la red

Promueva
el uso de
“mashups”

Contenidos tomados
de otros lugares:
Videos Youtube, Vimeo
Audios,
Slideshares, ISSUE,
Google maps, etc...

Documentos PDF,
podcasts y videocasts,
juegos, multimedias,
animaciones,
infografías

2) Sitios Web

(1)

Estrategia

“Lo importante no es tener muchos visitantes...
es lograr el mayor número posible de

conversiones”

¿Qué es una Conversión? Un usuarios que tras visitar nuestro sitio web, realiza
una determinada acción (comprar, inscribirse, consultar, etc) se convierte en
una conversión.

¿Trasmitimos la personalidad de marca y la propuesta de valor?

¿Llevamos al usuario donde queremos?

¿Están pensados para apoyar o sugerir la conversión?

¿Escribimos para internet? ¿Nuestros textos son fríos y corporativos?

¿Invitamos a decidir con prontitud?

¿Posicionamiento claro?
¿Arquitectura de la persuasión?
¿Contenidos que convierten?
¿Textos seductores?
¿Sensación de urgencia?
¿Credibilidad y confianza?

r
a
s
i
v
e
r

a
r
a
P

2) Sitios Web

(2)

Diseño

Usabilidad

Facilidad de uso
de una herramienta
¿Cuánto trabajo
me cuesta interactuar?

2) Sitios Web

Estética Branding

¿es bonito, es feo?
Imagen de marca > ¿Adecuado?
Coherencia y Credibilidad

Layout y Composición
Color y contrastes
Tipografías
Grafismos / Imágenes / Fotos
Audios / Videos / Animaciones

INFOGRAFÍAS

The psichology of color

¿y si ellos fueran
tipografía?

(2)

Diseño

2) Sitios Web

The fundamental
elements of design

O
E
D
V

I

http://vimeo.com/32944253

Usabilidad: ¿Qué es fácil de usar?

¿Cómo usamos la web?
1

No leemos la web; la hojeamos

Normalmente tenemos prisa.
Sabemos que no hay que leerlo todo (periódicos y revistas).

2

No tomamos decisiones perfectas;
nos quedamos con la primera razonable

Normalmente tenemos prisa.
Las consecuencias de un error cometino no son importantes (botón atrás)
Sopesar distintas opciones no garantiza nada..
Adivinar es más divertido.

3

No averiguamos el funcionamiento
de las cosas; nos las arreglamos

No nos importa, en tanto podamos usarlas.
Si damos con algo que funciona, seguimos con ello.

(2)

Diseño

2) Sitios Web

(2)

Diseño 10 claves para mejorar la usabilidad

1

2

3

4

5

6

7

8

9

10

Consistencia
Jerarquías visuales claras
División de la página en zonas claramente definidas
Contextualizar la navegación (”usted está aquí”)
Acción / Reacción
Botones claros y entendibles
Economía de acciones y tiempo
Soluciones a los deseos del usuario
Disminuya al máximo el “ruido”
Omita palabras innecesarias (el arte de no escribir para la web)

Importante
No hay reglas
absolutas.

Ciñámonos
a los objetivos
de nuestro sitio.

2) Sitios Web

(2)

Diseño

Libro recomendado
No me hagas pensar
Steve Krug

INFOGRAFÍA ¿Qué hace que la gente abandone un sitio web?

2) Sitios Web

Diseño Al diseñar la Home...

(2)

1

Identidad y Misión

¿De quién es este sitio? ¿Qué es este sitio? ¿Qué tienen para mi? ¿Qué puedo hacer?
¿Por qué debo permanecer aquí y no en otra parte?
> Identidad > Beneficios > Tagline

2

Jerarquía de contenidos

Visión conjunta de lo que ofrece el sitio: Contenido y características
¿Cómo está todo organizado?
> Sistemas de navegación, menús

3

Destacados

¿Búsqueda?
¿Sugerencias?
¿Promociones?

¿Contenido temporal?
¿Transacciones?
¿Accesos directos?

¿Registro?
¿Plugins sociales?

4

“¿Por dónde empiezo?”

2) Sitios Web

(3)

Tecnología

Contenido estático

Bases de datos

MySQL

SQL server

Oracle

HTML (5)

CSS
XML
Flash

eCommerce

PHP

ASP.net

js

¿Qué tecnología
nos conviene?

Contenido dinámico

CMS
Joomla
Drupal

Wordpress

2) Sitios Web

Flash
jQuery

Mootools

Ajax

Interacción

Mashups

(3)

Tecnología

¿Seguimos las recomendaciones del W3C?
¿Estamos optimizados para los motores de búsqueda (SEO)?
¿Somos legibles en dispositivos móviles?
¿Hemos sido probados en los diferentes navegadores?



s
o
g
a
P
e
d

s
a
l
e
r
a
s
a
P

Su Banco

2

4

Su Sitio

1

Su Cliente

3

Pasarela

Banco de su cliente

Banco de la pasarela

Convenios con todos los bancos
Certificados de seguridad
Tarjetas crédito y débito

5

En Colombia
http://www.pagosonline.com/
http://www.placetopay.com/
http://lineapagos.com/
http://www.pagosvirtuales.com/

2) Sitios Web

(3)

Tecnología

Publicación
Dominio
Hosting ¿Cuentas de correo?

www.minombre.com

¿O un
reseller
Colombia?

en

Evaluar precio, soporte
velocidad de conexión y

“uptime”

GoDaddy

https://www.godaddy.com/

Host Gator

http://www.hostgator.com/

Host Monster

http://www.hostmonster.com/

2) Sitios Web

“Un sitio web

nunca

está terminado”

6

Evaluación

y Mejoras

5

Publicación

1

Objetivos

Proceso

Mejoramiento

Continuo

4

Implementación

2) Sitios Web

2

Estrategia

3

Diseño