Diseño de Interfaces

¿Que les parece ?

Diseño de Interfaces Profesor:

Ciclo 2012-2 Diaz Muñante Jorge

Diseño de Webs

Servicios de internet Acceso al Web

Página Web:
Sitio Web (Web Site):

– Documento multimedios que se accede a través del Web. – Conjunto de páginas relacionadas en contenido y
Puede contener textos, imágenes, sonidos, animaciones e pertenecientes a un mismo creador. El creador puede ser
hiperenlaces. un individuo, una organización, etc.

Hiperenlaces:
Servidor de Web (Web Server):

– Es el dispositivo en el que se encuentran almacenadas las
– Enlaces entre documentos.
páginas. Se encarga de administrar el acceso a ellas.

Pág. 1 Pág. 2 Página 1: Fuente

Página 2: Destino Página Web
Enlace: Puede ser entre
textos, imágenes, videos... Cliente
Servidor de Web

Diseño de Sitios Web Diseño de Sitios Web

Diseño Lógico del Sitio:
Diseño de las Páginas del Sitio:

– Determinación de la información a publicar: Se estudia el
objetivo del sitio y se escoge la metáfora subyacente. En
base a ésta, se establece la organización lógica de las
páginas que conforman el sitio y la información que se
coloca en cada una de ellas.
• Ejemplos de Metáforas: Libro, tienda, curriculum, etc.
– Determinación del aspecto visual y de la organización de la
información dentro de cada página.
– Las páginas dentro de un Web Site deben estar
debidamente relacionadas, de tal manera que puedan ser
alcanzadas (visitadas) por los usuarios externos del sitio.
– El diseño de todas las páginas del sitio debe ser
consistente: colores, iconografía, enlaces.

Diaz Muñante Jorge 1

Diseño de Interfaces

La pagina Web representa... Wizard basado-Desktop

1) Conjunto de Información mostrada en una

pantalla.

2) Unidad de navegación
– que se consigue con dar un click en el link

3) Dirección 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 en el Web 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?

¿cuál es la diferencia?

Caja de dialogo de un Web Caja de dialogo en un Web

Diaz Muñante Jorge 2

Diseño de Interfaces

Diferencias entre Web y GUI Diferencias entre Web y GUI

El diseñador tiene que entregar el control total
Parte del todo
Diversidad de dispositivos
GUI, el usuario se concentra en una sola aplicación,
invierte largos periodos de tiempo en cada
aplicación, le es familiar los beneficios y el diseño.

Web

Web, los usuarios se mueven con rapidez entre un
Server sitio y otro. Siente el web como un todo. Los
Internet usuarios no desean leer manuales o ayudas.

Web vs Aplicaciones Diseño de Web

Diseñadores crean representaciones de los sitios en

GUIs “Actuales”
multiniveles de detalles
Browsers
Velocidad Alta Baja
Sitios webs son refinados en forma iterativa a nivel
RAM Baja Baja de detalle
Familiaridad Excelente Buena – Mapa del sitio
Facil de aprender Excelente Claro – Historietas
Facil de uso Buena Pobre – Esquemas
Seguridad Excelente Pobre – Mock-ups

Historietas Esquemas

Secuencia interactiva, nivel de detalle de las paginas
Estructura de la pagina con respecto a la informacion y navegacion

Diaz Muñante Jorge 3

Diseño de Interfaces

Mock-ups Ejm. Diseño de pag. Web

Alta fidelidad, representacion precisa de una pagina

Guia de “Yale Web Style”

Proyecto de Web Site Diez pautas en el desarrollo de un web

Procesos
Jakob “Heuristic Evaluation” Nielsen

– Definición del site y planificacion – http://www.useit.com/alertbox
– Arquitectura de la informacion
– Diseño del Site
– Construcción del Site
Podrian ser controversial (no son una verdad
– Marketing del Site absoluta, pero si buenos criterios para atraer mas
– Evaluacion, mantenimiento visitantes a su site).

Planificar el site como un todo
– Al menos al nivel mas alto

10. Tiempo largos en la descarga Uso de los graficos

Realice descargas con tiempos predecibles

La regla de los 10 segundos. – Corto es mejor
– Tiempo promedio antes de que cualquier usuario pierda
No realice su HP con baja velocidad
interes.

“Interlaced” es usualmente lo mejor

15 segundos puede ser aceptable

No deje a su usuario esperando por tiempos largos

Diaz Muñante Jorge 4

Diseño de Interfaces

Imagenes

tiff = 240kb = 50 secs jpg = 19kb = 5 secs

gif = 30kb = 8 secs

¿Que puede estar mal?

Ejemplos 1/2 Ejemplo 2/2

Diaz Muñante Jorge 5

Diseño de Interfaces

La pagina actual 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 7. Carecer de soporte de navegación

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.

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

¿Cómo están los navegadores? Carece de soporte de navegacion

FTP

http://gs.statcounter.com/

Diaz Muñante Jorge 6

Diseño de Interfaces

Que puede estar mal? 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.

Scroll muy largo Evitar scroll largos

¿Qué puede estar equivocado aqui? 5. Paginas innesarias y huerfanas

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

Diseño de Interfaces

Paginas de bienvenida

Mejor eliminar el enlace ¡¡¡ 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 “ ~”

Diaz Muñante Jorge 8

Diseño de Interfaces
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.
Error 404 - Page not found
Numero de Web sites
Noviembre 2006 – 101’435,253 websites
Diaz Muñante Jorge
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 comunicación (más
del 100% en un lapso de 5 años)
 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 _ 2301.5
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 …
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
pequeños, falta evidente de contraste con el color de fondo.

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
nuevas ventanas, etc.

Flash
Hay un uso de esta tecnología que se debe encauzar hacia objetivos más acordes
con las potencialidades de ésta. Úsese para hacer lo que el html no puede hacer,
en lugar de para dar más alegría 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.

Búsquedas deficientes
Las búsquedas 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 años se recalca este hecho.
9
Diseño de Interfaces

Diez errores mas frecuentes

Maquetacion incorrecta

Incompatibilidades entre navegadores

Mientras a principios de año parecía que no era necesario invertir tiempo de los proyectos para
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.

Formularios incómodos
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 vías de contacto con los responsables del sitio web

Uno de los signos de credibilidad y por tanto de confianza que se puede dar al usuario es
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.

Maquetación 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 tamaño, como si nuestro monitor, o
resolución, es demadiado pequeño, que nos encontramos con un desagradable scroll horizontal.

Ampliación inadecuada de las imágenes

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.

+o-

Maquetacion correcta Diseño de web 2007

http://www.useit.com/alertbox/9605.html

Diaz Muñante Jorge 10

Diseño de Interfaces

Microsoft. Consejos practicos

http://www.microsoft.com/spain/empresas/guias/usa
bilidad/consejos_practicos.mspx

Diaz Muñante Jorge 11