1. Diseño de Interfaces de Usuarios
Que le parece ?
Diseño de Interfaces Profesor:
de Usuarios
Diaz Muñante Jorge
Ciclo 2012-1
Diseño de Webs
Temas Servicios de internet
Página Web:
Diferencias entre UIs de escritorio y Web
– Documento multimedios que se accede a través del Web.
Diez pautas en el desarrollo de un Web Puede contener textos, imágenes, sonidos, animaciones e
hiperenlaces.
Otras sugerencias (usabilidad del Web)
Hiperenlaces:
La Web en el año 2012
– Enlaces entre documentos.
Pág. 1 Pág. 2 Página 1: Fuente
Página 2: Destino
Enlace: Puede ser entre
textos, imágenes, videos...
Acceso al Web Diseño de Sitios Web
Sitio Web (Web Site): Diseño Lógico del Sitio:
– Conjunto de páginas relacionadas en contenido y – Determinación de la información a publicar: Se estudia el
pertenecientes a un mismo creador. El creador puede ser objetivo del sitio y se escoge la metáfora subyacente. En
un individuo, una organización, etc. base a ésta, se establece la organización lógica de las
Servidor de Web (Web Server): páginas que conforman el sitio y la información que se
coloca en cada una de ellas.
– Es el dispositivo en el que se encuentran almacenadas las
páginas. Se encarga de administrar el acceso a ellas.
• Ejemplos de Metáforas: Libro, tienda, curriculum, etc.
Página Web
Servidor de Web Cliente
Diaz Muñante Jorge 1

2. Diseño de Interfaces de Usuarios
Diseño de Sitios Web La pagina Web representa...
Diseño de las Páginas del Sitio: 1) Conjunto de Información mostrada en una
– Determinación del aspecto visual y de la organización de la pantalla.
información dentro de cada página. 2) Unidad de navegación
– Las páginas dentro de un Web Site deben estar – que se consigue con dar un click en el link
debidamente relacionadas, de tal manera que puedan ser
alcanzadas (visitadas) por los usuarios externos del sitio. 3) Dirección de los datos en la red (URL)
– El diseño de todas las páginas del sitio debe ser 4) Almacenamiento de informacion
consistente: colores, iconografía, enlaces.
– 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
¿cuál es la diferencia?
Browsers Caja de dialogo de un Web
“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?
Diaz Muñante Jorge 2

3. Diseño de Interfaces de Usuarios
Caja de dialogo en un Web Diferencias entre Web y GUI
El diseñador tiene que entregar el control total
Diversidad de dispositivos
Web
Server
Internet
Diferencias entre Web y GUI Web vs Aplicaciones
Parte del todo
GUIs “Actuales
”
GUI, el usuario se concentra en una sola aplicación, Browsers
invierte largos periodos de tiempo en cada Velocidad Alta Baja
aplicación, le es familiar los beneficios y el diseño. RAM Baja Baja
Web, los usuarios se mueven con rapidez entre un Familiaridad Excelente Buena
sitio y otro. Siente el web como un todo. Los Facil de aprender Excelente Claro
usuarios no desean leer manuales o ayudas. Facil de uso Buena Pobre
Seguridad Excelente Pobre
Diseño de Web Historietas
Diseñadores crean representaciones de los Secuencia interactiva, nivel de detalle de las paginas
sitios en multiniveles de detalles
Sitios webs son refinados en forma iterativa a
nivel de detalle
– Mapa del sitio
– Historietas
– Esquemas
– Mock-ups
Diaz Muñante Jorge 3

4. Diseño de Interfaces de Usuarios
Esquemas Mock-ups
Estructura de la pagina con respecto a la informacion y navegacion Alta fidelidad, representacion precisa de una pagina
Ejm. Diseño de pag. Web Proyecto de Web Site
Guia de “Yale Web Style” Procesos
– Definición del site y planificacion
– Arquitectura de la informacion
– Diseño del Site
– Construcción 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 10. Tiempo largos en la descarga
Jakob “Heuristic Evaluation” Nielsen La regla de los 10 segundos.
– http://www.useit.com/alertbox – Tiempo promedio antes de que cualquier usuario pierda
interes.
15 segundos puede ser aceptable
Podrian ser controversial (no son una verdad No deje a su usuario esperando por tiempos largos
absoluta, pero si buenos criterios para atraer mas
visitantes a su site).
Diaz Muñante Jorge 4

5. Diseño de Interfaces de Usuarios
Uso de los graficos Imagenes
Realice descargas con tiempos predecibles
tiff = 240kb = 50 secs jpg = 19kb = 5 secs
– Corto es mejor
No realice su HP con baja velocidad
“Interlaced” es usualmente lo mejor
gif = 30kb = 8 secs
¿Que puede estar mal?
Diaz Muñante Jorge 5

6. Diseño de Interfaces de Usuarios
9. Informacion desactualizada 8. Color en los links no estandar
Contratar un jardinero para el web Los links no accesados deben aparecer en azul, y
– “es necesario sacar las malas raices y replantar flores” los ya accesados en purpura o rojo.
Mucha gente generan contenido en lugar de dar un Lamentablemente es un estandar que esta en
mantenimiento contra de las investigaciones. El azul es el color que
todo ser humano ve menos.
El mantenimiento es mas barato que manejar el
contenido
– Relevante link a nueva pagina
– Caso contrario removerla
7. Carecer de soporte de navegación ¿Cómo están los navegadores?
Los usuarios no conocen acerca de su site
– ellos siempre tendran dificultad para encontrar la
información
– damos una sensación rigida de la estructura
Estructura de comunicación 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 navegación nunca podrá reemplazarla
No diseñe para que se vea mejor con un navegador.
– Procure que su pagina sea lo mas universal posible
http://gs.statcounter.com/
Carece de soporte de navegacion Que puede estar mal?
FTP
Diaz Muñante Jorge 6

7. Diseño de Interfaces de Usuarios
6. Paginas con Scrolling largos
Solo el 10% de los usuarios hacen un scroll despues
de que aparece la pagina
Toda la información 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 continuación.
¿Qué puede estar equivocado aqui?
5. Paginas innesarias y huerfanas Mejor eliminar el enlace ¡¡¡
Todas las paginas deben tener una clara indicación 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 indicación de donde ellos se encuentran dentro
de la estructura de la información
Una pagina bienvenida que obliga a dar un nuevo
click.
– Los usuarios soportan sólo la primera vez.
Diaz Muñante Jorge 7

8. Diseño de Interfaces de Usuarios
Paginas de bienvenida Qué puede estar equivocado aqui?
4. Complejos URLs 3. Constantes animaciones
Los URLs internos no deben ser expuestos en la No coloque elementos con movimientos
pagina. Distrae la atencion del usuarios
Debe ser corto y significar el contenido del site. La opcion “blink” es inutil
No usar caracteres especiales, tales como el “ ~”
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.
Diaz Muñante Jorge 8

9. Diseño de Interfaces de Usuarios
1. Uso de los Frames Web en el 2011
Confunde al usuario Internet es el medio de mayor crecimiento en la historia de los medios de comunicación (más
del 100% en un lapso de 5 años)
Proyecciones de usuarios(millones):
– Rompe el modelo mental de la unidad de una pagina.
2003 – 622.9
Las acciones del usuario pierde predicibilidad 2004 – 709.0
2005 – 821.0
2006 – 1072.0
– Que informacion va aparecer cuando le das click.. 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 población 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 común de encontrar informacion pero es el mas
natural ?
Diez errores mas frecuentes … 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 tipografías no adecuadas, cuerpos Incompatibilidades entre navegadores
Mientras a principios de año parecía que no era necesario invertir tiempo de los proyectos para
pequeños, falta evidente de contraste con el color de fondo. compatibilizar el código y éste fuera multinavegador, el uso de navegadores diferentes a Internet
Explorer hoy día hace que se deba volver atrás y no se excluyan usuarios sólo porque usen una
plataforma diferente.
Enlaces alejados de su formato estándar
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 Formularios incómodos
nuevas ventanas, etc. 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.
Flash
Hay un uso de esta tecnología que se debe encauzar hacia objetivos más acordes Ausencia de vías de contacto con los responsables del sitio web
con las potencialidades de ésta. Úsese para hacer lo que el html no puede hacer, Uno de los signos de credibilidad uy por tanto de confianza que se puede dar al usuario es
en lugar de para dar más alegría a los sitios web mostrar una dirección (postal) física de contacto. Es fácil pensar que una empresa de la que no
se ofrece la dirección de su ubicación difícilmente puede recibir pagos de sus clientes por una
falta de confianza de éstos en aquélla.
Contenido no escrito para la web
Hay contenido que se publica en la web de forma poco adecuada para el medio en Maquetación con ancho fijo
que se está. Los textos han de ser cortos, concisos, que se puedan identificar con Con las desventajas que esto acarrea, tanto si tenemos un monitor demasiado grande y no
un golpe de vista, y vayan al grano. podemos leer bien los textos si no aumentamos su tamaño, como si nuestro monitor, o
resolución, es demadiado pequeño, que nos encontramos con un desagradable scroll horizontal.
Búsquedas deficientes Ampliación inadecuada de las imágenes
Las búsquedas son uno de los elementos fundamentales de un sitio web. Hacerlo Este puesto en realidad estaba reservado para desaconsejar de nuevo el uso de pop-ups, pero
bien es complejo y es uno de los factores principales de una experiencia de usuario Nielsen lo deja en la costumbre que algunos tienen de mostrar la misma foto tanto cuando se
positiva. Todos los años se recalca este hecho. trata de un thumbnail como de la imagen ampliada.
Nueva pagina web de la FISI Antes
Diaz Muñante Jorge 9

10. Diseño de Interfaces de Usuarios
Maquetacion incorrecta Nueva pagina de RPP
+o- Maquetacion correcta
Diseño de web 2007 Ranking de Sites - Universidades
http://www.webometrics.info/top200_latinamerica_es.asp
http://www.useit.com/alertbox/9605.html
Diaz Muñante Jorge 10

11. Diseño de Interfaces de Usuarios
Diaz Muñante Jorge 11