c12 diseno webs diu

Diseño de Interfaces de Usuarios

Diaz Muñante Jorge 1

Diseño de Webs


Ciclo 2013-2

Profesor:

Diaz Muñante 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 año 2012

Servicios de internet

�Página Web:

– Documento multimedios que se accede a través del Web. Puede contener textos, imágenes, sonidos, animaciones e hiperenlaces.

�Hiperenlaces:

– Enlaces entre documentos.

Pág. 1 Pág. 2 Página 1: FuentePágina 2: DestinoEnlace: Puede ser entretextos, imágenes, videos...

Acceso al Web

�Sitio Web (Web Site):

– Conjunto de páginas relacionadas en contenido y pertenecientes a un mismo creador. El creador puede ser un individuo, una organización, etc.

�Servidor de Web (Web Server):

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

Servidor de Web Cliente

Página Web

Diseño de Sitios Web

�Diseño Lógico 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.



Diseño de Sitios Web

�Diseño de las Páginas del Sitio:

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

La pagina Web representa...

�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-Desktop Wizard basado en el Web

¿cuál 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



Caja de dialogo en un Web Diferencias entre Web y GUI

�El diseñador tiene que entregar el control total Diversidad de dispositivos

Internet

WebServer

Diferencias entre Web y GUI

� Parte del todo

�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, 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 BajaRAM Baja BajaFamiliaridad Excelente BuenaFacil de aprenderExcelente ClaroFacil de uso Buena PobreSeguridad Excelente Pobre

�Diseñadores 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

Diseño de Web Historietas

� Secuencia interactiva, nivel de detalle de las paginas



Esquemas

� Estructura de la pagina con respecto a la informacion y navegacion � Alta fidelidad, representacion precisa de una pagina

Mock-ups

Ejm. Diseño de pag. Web

�Guia de “Yale Web Style”

Proyecto de Web Site

�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

� 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



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?



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 navegación

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

http://gs.statcounter.com/

Carece de soporte de navegacion

FTP

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.

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

Mejor eliminar el enlace ¡¡¡



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.



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 his toria de los medios de comunicación (más del 100% en un lapso de 5 años)

�Proyecciones de usuarios(millones):

2003 – 622.92004 – 709.02005 – 821.02006 – 1072.02007 – 1399.02008 – 1527.02009 – 1701.22010 - 1802.0 2011 – 1920.32012 - 2267.2Fuente – 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 tra ducido en el blog de Daniel TorresBurriel

� Problemas de legibilidadProblemas 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ándarHay 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.

� FlashHay 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 webHay 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 deficientesLas 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.

� Incompatibilidades entre navegadoresMientras 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ómodosSe 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 d el sitio webUno de los signos de credibilidad uy 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 fijoCon 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ágenesEste 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



Maquetacion incorrecta Luego … pagina de RPP

Luego … Y ahora …

+ o - Maquetacion correcta



Diseño de web 2007

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

Ranking de Sites - Universidades

�http://www.webometrics.info/top200_latinamerica_es.asp

c12 diseno webs diu

Documents

servidor de web web

websitio web web site

webla web

web diferencias

servicios de internetpgina

upsdiseo de web hist

webdiseo de interfaces

usuariosdiaz muante