C12 diseno webs_diu_modo_de_compatibilidad
0 recomendaciones288 vistas
Este documento presenta una introducción al diseño de interfaces de usuarios para sitios web. Cubre temas como las diferencias entre interfaces de escritorio y web, diez pautas para el desarrollo de sitios web, y otras sugerencias para mejorar la usabilidad en la web. También describe conceptos clave como páginas web, servidores web, hiperenlaces, y métodos para el diseño lógico y visual de sitios, incluyendo historietas, esquemas y mockups.
C12 diseno webs_diu_modo_de_compatibilidad
- 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