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