Diseo de Interfaces de Usuarios

Diaz Muante Jorge 1

Diseo de Webs
Diseo de Interfaces
de Usuarios
Ciclo 2013-2
Profesor:
Diaz Muante Jorge
Que le parece ?
Temas
Diferencias entre UIs de escritorio y Web
Diez pautas en el desarrollo de un Web
Otras sugerencias (usabilidad del Web)
La Web en el ao 2012
Servicios de internet
Pgina Web:
Documento multimedios que se accede a travs del Web.
Puede contener textos, imgenes, sonidos, animaciones e
hiperenlaces.
Hiperenlaces:
Enlaces entre documentos.
Pg. 1
Pg. 2 Pgina 1: Fuente
Pgina 2: Destino
Enlace: Puede ser entre
textos, imgenes, videos...
Acceso al Web
Sitio Web (Web Site):
Conjunto de pginas relacionadas en contenido y
pertenecientes a un mismo creador. El creador puede ser
un individuo, una organizacin, etc.
Servidor de Web (Web Server):
Es el dispositivo en el que se encuentran almacenadas las
pginas. Se encarga de administrar el acceso a ellas.
Servidor de Web
Cliente
Pgina Web
Diseo de Sitios Web
Diseo Lgico del Sitio:
Determinacin de la informacin a publicar: Se estudia el
objetivo del sitio y se escoge la metfora subyacente. En
base a sta, se establece la organizacin lgica de las
pginas que conforman el sitio y la informacin que se
coloca en cada una de ellas.
Ejemplos de Metforas: Libro, tienda, curriculum, etc.
Diseo de Interfaces de Usuarios
Diaz Muante Jorge 2
Diseo de Sitios Web
Diseo de las Pginas del Sitio:
Determinacin del aspecto visual y de la organizacin de la
informacin dentro de cada pgina.
Las pginas dentro de un Web Site deben estar
debidamente relacionadas, de tal manera que puedan ser
alcanzadas (visitadas) por los usuarios externos del sitio.
El diseo de todas las pginas del sitio debe ser
consistente: colores, iconografa, enlaces.
La pagina Web representa...
1) Conjunto de Informacin mostrada en una
pantalla.
2) Unidad de navegacin
que se consigue con dar un click en el link
3) Direccin de los datos en la red (URL)
4) Almacenamiento de informacion
en el servidor y el autor la edita
Una pagina es una unidad atomica que unifica todos
estos conceptos
Wizard basado-Desktop Wizard basado en el Web
cul es la diferencia?
Browsers
Back (previo) Wizard de escritorio
Tipicamente anula cualquier cambio realizado en la ultima
etapa
Back en una pagina Web
si es el boton back del browser?
si es back del link de la pagina?
Caja de dialogo de un Web
Diseo de Interfaces de Usuarios
Diaz Muante Jorge 3
Caja de dialogo en un Web Diferencias entre Web y GUI
El diseador tiene que entregar el control total
Diversidad de dispositivos
Internet
Web
Server
Diferencias entre Web y GUI
Parte del todo
GUI, el usuario se concentra en una sola aplicacin,
invierte largos periodos de tiempo en cada
aplicacin, le es familiar los beneficios y el diseo.
Web, los usuarios se mueven con rapidez entre un
sitio y otro. Siente el web como un todo. Los
usuarios no desean leer manuales o ayudas.
Web vs Aplicaciones
GUIs Actuales
Browsers
Velocidad
Alta Baja
RAM
Baja Baja
Familiaridad
Excelente Buena
Facil de aprender
Excelente Claro
Facil de uso
Buena Pobre
Seguridad
Excelente Pobre
Diseadores crean representaciones de los
sitios en multiniveles de detalles
Sitios webs son refinados en forma iterativa a
nivel de detalle
Mapa del sitio
Historietas
Esquemas
Mock-ups
Diseo de Web
Historietas
Secuencia interactiva, nivel de detalle de las paginas
Diseo de Interfaces de Usuarios
Diaz Muante Jorge 4
Esquemas
Estructura de la pagina con respecto a la informacion y navegacion
Alta fidelidad, representacion precisa de una pagina
Mock-ups
Ejm. Diseo de pag. Web
Guia de Yale Web Style
Proyecto de Web Site
Procesos
Definicin del site y planificacion
Arquitectura de la informacion
Diseo del Site
Construccin del Site
Marketing del Site
Evaluacion, mantenimiento
Planificar el site como un todo
Al menos al nivel mas alto
Diez pautas en el desarrollo de un web
Jakob Heuristic Evaluation Nielsen
http://www.useit.com/alertbox
Podrian ser controversial (no son una verdad
absoluta, pero si buenos criterios para atraer mas
visitantes a su site).
10. Tiempo largos en la descarga
La regla de los 10 segundos.
Tiempo promedio antes de que cualquier usuario pierda
interes.
15 segundos puede ser aceptable
No deje a su usuario esperando por tiempos largos
Diseo de Interfaces de Usuarios
Diaz Muante Jorge 5
Uso de los graficos
Realice descargas con tiempos predecibles
Corto es mejor
No realice su HP con baja velocidad
Interlaced es usualmente lo mejor
Imagenes
tiff = 240kb = 50 secs jpg = 19kb = 5 secs
gif = 30kb = 8 secs
Que puede estar mal?
Diseo de Interfaces de Usuarios
Diaz Muante Jorge 6
9. Informacion desactualizada
Contratar un jardinero para el web
es necesario sacar las malas raices y replantar flores
Mucha gente generan contenido en lugar de dar un
mantenimiento
El mantenimiento es mas barato que manejar el
contenido
Relevante link a nueva pagina
Caso contrario removerla
8. Color en los links no estandar
Los links no accesados deben aparecer en azul, y
los ya accesados en purpura o rojo.
Lamentablemente es un estandar que esta en
contra de las investigaciones. El azul es el color que
todo ser humano ve menos.
7. Carecer de soporte de navegacin
Los usuarios no conocen acerca de su site
ellos siempre tendran dificultad para encontrar la
informacin
damos una sensacin rigida de la estructura
Estructura de comunicacin del site
Ofrezca un mapa del site
los usuarios deben conocer donde estan y hacia donde pueden ir
ofrezca una buena herramienta de busqueda
el mejor soporte de navegacin nunca podr reemplazarla
No disee para que se vea mejor con un navegador.
Procure que su pagina sea lo mas universal posible
Cmo estn los navegadores?
http://gs.statcounter.com/
Carece de soporte de navegacion
FTP
Que puede estar mal?
Diseo de Interfaces de Usuarios
Diaz Muante Jorge 7
6. Paginas con Scrolling largos
Solo el 10% de los usuarios hacen un scroll despues
de que aparece la pagina
Toda la informacin critica debe estar en la parte de
arriba de la pagina
Soltar una pagina puede demorar
Las personas al tomar interes se quedaran leyendola.
Prefiera paginas cortas
La capacidad de lectura en el web ha aumentado, pero aun
no deben ser muy largas.
Es mejor hacer un link a una continuacin.
Qu puede estar equivocado aqui?
5. Paginas innesarias y huerfanas
Todas las paginas deben tener una clara indicacin de
que Site pertenece
los usuarios pueden no ingresar por la pagina
principal
Cada pagina debe tener
un link a su pagina principal (home page)
una indicacin de donde ellos se encuentran dentro
de la estructura de la informacin
Una pagina bienvenida que obliga a dar un nuevo
click.
Los usuarios soportan slo la primera vez.
Mejor eliminar el enlace
Diseo de Interfaces de Usuarios
Diaz Muante Jorge 8
Paginas de bienvenida Qu puede estar equivocado aqui?
4. Complejos URLs
Los URLs internos no deben ser expuestos en la
pagina.
Debe ser corto y significar el contenido del site.
No usar caracteres especiales, tales como el ~
3. Constantes animaciones
No coloque elementos con movimientos
Distrae la atencion del usuarios
La opcion blink es inutil
2. Uso excesivo de la era tecnologica
No intente atraer a clientes usando esto.
Puede atraer a los nerds
El sistema puede colgarse
El usuario nunca regresara
Use tecnologia probada.
No solicite descargas adicionales.
Diseo de Interfaces de Usuarios
Diaz Muante Jorge 9
1. Uso de los Frames
Confunde al usuario
Rompe el modelo mental de la unidad de una pagina.
Las acciones del usuario pierde predicibilidad
Que informacion va aparecer cuando le das click..
Web en el 2012
Internet es el medio de mayor crecimiento en la historia de los medios de comunicacin (ms
del 100% en un lapso de 5 aos)
Proyecciones de usuarios(millones):
2003 622.9
2004 709.0
2005 821.0
2006 1072.0
2007 1399.0
2008 1527.0
2009 1701.2
2010 - 1802.0
2011 1920.3
2012 - 2267.2
Fuente Nielsen-Net Ratings/Emarketer
Problema actual
16% del total de la poblacin mundial esta en linea (Internet World Statistics,
2005);
21% de los usuarios encuentran informacion > 80% fuera de tiempo (Feldman,
2004)
busca - es el modo mas comn de encontrar informacion pero es el mas
natural ?
Diez errores mas frecuentes
Nielsen: Top Ten Web Design Mistakes of 2005 y traducido en el blog de Daniel TorresBurriel
Problemas de legibilidad
Problemas de legibilidad derivados del uso de tipografas no adecuadas, cuerpos
pequeos, falta evidente de contraste con el color de fondo.
Enlaces alejados de su formato estndar
Hay que hacer obvios los enlaces, hay que diferenciar los links visitados de los no
visitados, usar textos descriptivos del enlace que contienen, no abrir enlaces en
nuevas ventanas, etc.
Flash
Hay un uso de esta tecnologa que se debe encauzar hacia objetivos ms acordes
con las potencialidades de sta. sese para hacer lo que el html no puede hacer,
en lugar de para dar ms alegra a los sitios web
Contenido no escrito para la web
Hay contenido que se publica en la web de forma poco adecuada para el medio en
que se est. Los textos han de ser cortos, concisos, que se puedan identificar con
un golpe de vista, y vayan al grano.
Bsquedas deficientes
Las bsquedas son uno de los elementos fundamentales de un sitio web. Hacerlo
bien es complejo y es uno de los factores principales de una experiencia de usuario
positiva. Todos los aos se recalca este hecho.
Incompatibilidades entre navegadores
Mientras a principios de ao pareca que no era necesario invertir tiempo de los proyectos para
compatibilizar el cdigo y ste fuera multinavegador, el uso de navegadores diferentes a Internet
Explorer hoy da hace que se deba volver atrs y no se excluyan usuarios slo porque usen una
plataforma diferente.
Formularios incmodos
Se identifican muchos problemas relacionados con la complejidad y uso de los formularios.
stos se usan con mucha frecuencia en la web y muchos de ellos son excesivamente largos y
complejos de rellenar (usar) por parte de los usuarios.
Ausencia de vas de contacto con los responsables del sitio web
Uno de los signos de credibilidad uy por tanto de confianza que se puede dar al usuario es
mostrar una direccin (postal) fsica de contacto. Es fcil pensar que una empresa de la que no
se ofrece la direccin de su ubicacin difcilmente puede recibir pagos de sus clientes por una
falta de confianza de stos en aqulla.
Maquetacin con ancho fijo
Con las desventajas que esto acarrea, tanto si tenemos un monitor demasiado grande y no
podemos leer bien los textos si no aumentamos su tamao, como si nuestro monitor, o
resolucin, es demadiado pequeo, que nos encontramos con un desagradable scroll horizontal.
Ampliacin inadecuada de las imgenes
Este puesto en realidad estaba reservado para desaconsejar de nuevo el uso de pop-ups, pero
Nielsen lo deja en la costumbre que algunos tienen de mostrar la misma foto tanto cuando se
trata de un thumbnail como de la imagen ampliada.
Diez errores mas frecuentes
Nueva pagina web de la FISI Antes
Diseo de Interfaces de Usuarios
Diaz Muante Jorge 10
Maquetacion incorrecta Luego pagina de RPP
Luego Y ahora
+ o - Maquetacion correcta
Diseo de Interfaces de Usuarios
Diaz Muante Jorge 11
Diseo de web 2007
http://www.useit.com/alertbox/9605.html
Ranking de Sites - Universidades
http://www.webometrics.info/top200_latinamerica_es.asp