1.
Usabilidad para el Web <ul><li>Leon Kadoch:. </li></ul><ul><li>www.leon-kadoch.com </li></ul>

2.
La Experiencia del Usuario <ul><li>Conjunto de factores y elementos que determinan una interacción satisfactoria del usuario con un entorno o dispositivo concretos. </li></ul><ul><li>En ella influyen desde el diseño gráfico, la éstetica, hasta la articulación de la interfaz, la funcionalidad definida por el diseño de interacción y la extrapolación de principios del mundo del marketing, la psicología etc </li></ul>

3.
Culminación Concepción http://www.jjg.net/ia/ Web como interfaz de software Web como sistema de hipertexto Autor: Jesse James Garrett Necesidades del usuario Objetivos del sitio Estrategia Especificaciones funcionales Requerimientos de contenido Alcance Diseño de la interacción Arquitectura de información Estructura Diseño de la interfaz Diseño de la navegación Diseño de la información Esqueleto Diseño visual Superficie

4.
La Arquitectura de Información <ul><li>La organización, etiquetado y los esquemas de navegación </li></ul><ul><li>El diseño estructural del espacio donde se ubica la informaciòn facilita el desarrollo de tareas de manera intuitiva y completa, directamente con el acceso al contenido del sitio web. </li></ul><ul><li>El arte y la ciencia de estructurar BIEN y clasificar BIEN los sitios web y sus intranets, ayudan a las personas a manejar la información fácilmente. </li></ul><ul><li>Una disciplina emergente en una comunidad de prácticas enfocadas en traer los principios del diseño y arquitectura del paraìso digital. </li></ul>

5.
Arquitectura de Información <ul><li>Wireframes </li></ul>

6.
Mapa de Sitio

7.
Usabilidad <ul><li>Se define coloquialmente como facilidad de uso, ya sea de una página web, una aplicación informática o cualquier otro sistema que interactue con un usuario . </li></ul><ul><li>– Eduardo Manchon http://www.alzado.org </li></ul><ul><li>&quot;La usabilidad se refiere a la capacidad de un software de ser comprendido, aprendido, usado y ser atractivo para el usuario, en condiciones específicas de uso“ </li></ul><ul><li>-ISO/IEC 9126e. </li></ul>

8.
El Término “Usabilidad” <ul><li>Proviene del inglés : Usability </li></ul><ul><li>Facilidad o Nivel de Uso </li></ul><ul><li>Grado en el que el diseño de un objeto facilita o dificulta su manejo </li></ul><ul><li>Desde hace mucho tiempo se maneja en base a criterios como facilidad de uso, amistoso con el usuario </li></ul>

9.
Algunas Conclusiones <ul><li>La usabilidad demuestra reducciones del ciclo de desarrollo de los productos de 33-50% (Bosert 1991). </li></ul><ul><li>63% de todos los proyectos de desarrollo de software sobrepasan su presupuesto , siendo las cuatro causas más importantes relacionadas con usabilidad. (Lederer y Prassad 1992). </li></ul><ul><li>El porcentaje de código que se dedica al desarrollo de la interfaz con los usuarios ha ido aumentando a lo largo de los años hasta un promedio 47-60% del conjunto de la aplicación . (MacIntyre et al. 1990). </li></ul><ul><li>La empresa Ricoh descubrió que el 95% de los usuarios encuestados nunca utilizaban las tres características claves diseñadas para hacer más atractivo el producto, bien por desconocer su existencia, no saber cómo utilizarlas o no entenderlas . (Nussbaum y Neff 1991). </li></ul>

10.
Aspectos de la Usabilidad <ul><li>Facilidad de Aprendizaje </li></ul><ul><li>Flexibilidad </li></ul><ul><li>Robustez </li></ul>

11.
¿Para quién diseñamos? <ul><li>¿Quiénes son los usuarios </li></ul><ul><li>¿Qué quieren o necesitan hacer los usuarios? </li></ul><ul><li>¿Cuál es la educación de los usuarios? </li></ul><ul><li>¿Qué debe hacer el usuario y qué debe hacer el sistema ? </li></ul>

12.
El Usuario <ul><ul><li>Conversar </li></ul></ul><ul><ul><li>Observar </li></ul></ul><ul><ul><li>Preguntar </li></ul></ul><ul><ul><li>Investigar: </li></ul></ul><ul><ul><ul><li>Sus Características </li></ul></ul></ul><ul><ul><ul><li>Qué tareas efectuan </li></ul></ul></ul><ul><ul><ul><ul><li>Lo Actual vs. Lo Deseado o Ideal </li></ul></ul></ul></ul><ul><ul><ul><ul><li>Funciones Críticas vs No-Críticas </li></ul></ul></ul></ul><ul><ul><ul><li>Flujo de Desarrollo de Tareas (cómo lo hacen) </li></ul></ul></ul><ul><ul><ul><li>Ambiente en que la desarrollan </li></ul></ul></ul>

13.
Juego de Escenarios

14.
¿Qu é Investigar? <ul><li>Características </li></ul><ul><ul><li>Edad </li></ul></ul><ul><ul><li>Conocimientos de Informática </li></ul></ul><ul><ul><li>Dominio del conocimiento </li></ul></ul><ul><ul><li>Métodos de Acceso </li></ul></ul><ul><ul><li>Browsers (o navegadores) </li></ul></ul><ul><ul><li>Ambientes de Trabajo </li></ul></ul><ul><ul><li>Impedidos o Discapacitados </li></ul></ul><ul><li>Obtén la Información mediante </li></ul><ul><ul><li>Encuestas / Cuestionarios </li></ul></ul><ul><ul><li>Visitas al Ambiente de Trabajo </li></ul></ul>

15.
Audiencia

16.
Planificación / Tareas de los Usuarios <ul><li>¿Por qué los usuarios visitarán tu Web? </li></ul><ul><ul><li>¿Qué hay allí para ellos? </li></ul></ul><ul><ul><li>La mejor forma de saberlo es conversando ! </li></ul></ul><ul><ul><li>Crear Escenarios </li></ul></ul><ul><li>Ejemplo de Tareas de Usuarios: </li></ul><ul><ul><li>Encontrar información de un producto particular </li></ul></ul><ul><ul><li>Aprender sobre nuevos proyectos </li></ul></ul><ul><ul><li>Informarse de futuras presentaciones </li></ul></ul><ul><ul><li>Descargar documentos </li></ul></ul><ul><ul><li>Contactar empleados de una organización </li></ul></ul><ul><ul><li>Proveer comentarios o feedback </li></ul></ul>

17.
Estructura <ul><li>Una buena estructura debe permitir, aplicada a un grupo de páginas web, permite al lector ver todos los contenidos fácil y claramente. </li></ul><ul><li>Una mala estructura, produce la sensación de no encontrar información, estar perdida y terminará por ABANDONAR el sitio Web. </li></ul>

18.
¿Cómo se crea la estructura? <ul><li>Planificar </li></ul><ul><li>Esquematizar </li></ul><ul><li>Estudiar el Contenido </li></ul>

19.
Estructura Jerárquica <ul><li>Es la estructura del árbol… , en el que la raíz es la página inicial, esta página se puede también sustituir por la página de contenido, en la que se exponen las diferentes secciones que contendrá nuestro sitio. La selección de una sección nos conduce asimismo a una lista de subtemas que pueden o no dividirse. </li></ul><ul><li>Permite al visitante conocer en qué lugar de la estructura se encuentra, además de saber que, a medida que se adentra en la estructura obtiene información más específica y que la información más general se encuentra en los niveles superiores. </li></ul>

20.
Estructura Lineal <ul><li>Navegarla es como leer un libro, de manera que estando en una página, podemos ir a la siguiente página o a la anterior. </li></ul><ul><li>Útil cuando queremos al visitante siguiendo un patrón fijo de navegación evitando distracciones con enlaces a otras páginas. </li></ul><ul><li>Por otra parte podemos causar a lector la sensación de estar encerrado si el camino es muy largo o poco interesante. </li></ul><ul><li>Este tipo de estructura sería válido para tutoriales de aprendizaje o tours de visita guiada. </li></ul>

21.
Estructura Lineal con Jerarquía <ul><li>Este tipo de estructura es una mezcla de la dos anteriores, los temas y subtemas están organizados de una forma jerárquica, pero uno puede leer todo el contenido de una forma lineal si se desea. </li></ul><ul><li>Esto permite tener el contenido organizado jerárquicamente y simultáneamente poder acceder a toda la información de una manera lineal como si estuviésemos leyendo un libro. Esta guía sigue básicamente este tipo de estructura. </li></ul>

22.
Estructura de Red <ul><li>La estructura de red es una organización en la que aparentemente no hay ningún orden establecido, las páginas pueden apuntarse unas a otras sin ningún orden aparente. </li></ul><ul><li>Este tipo de organización es la más libre, pero también es la más peligrosa ya que si no se informa al lector de en dónde se encuentra, puede perderse o puede no encontrar lo que anda buscando o no llegar a ver lo que le queremos mostrar. Por eso es muy recomendable asociar la estructura de las páginas con alguna estructura conocida, como por ejemplo la de una ciudad. </li></ul>

23.
Navegación <ul><li>Duplicar navegación (si es necesario) </li></ul><ul><li>Enlace para el Inicio de la página </li></ul><ul><li>No detenga la navegacion </li></ul><ul><li>Estructura Clara </li></ul><ul><li>Mapa del Sitio o Índice de Contenidos </li></ul><ul><li>Si utiliza navegación gráfica, añadir textos para soporte del usuario </li></ul>

24.
Tamaño de las Páginas <ul><li>Las personas no les gusta el Scroll Down </li></ul><ul><li>Útilice páginas de 1 pantalla y media </li></ul><ul><li>Páginas largas para documentos grandes </li></ul>

25.
En Cada Página <ul><li>Firmar Documentos </li></ul><ul><li>Contacto con el Autor </li></ul><ul><li>Utilizar fechas en los documentos </li></ul><ul><li>Cuidado con los formatos de fecha </li></ul>

26.
Enlaces o Links <ul><li>Escribir como si no existieran enlaces de texto </li></ul><ul><ul><li> Harold Maduro ha desarrollado un nuevo lenguaje de programación . </li></ul></ul><ul><ul><li>El nuevo lenguaje de programación de Harold Maduro está aquí . </li></ul></ul><ul><li>Usar palabras significativas en los enlaces </li></ul><ul><li>Longitud adecuada de los enlaces </li></ul><ul><li>El usuario debe conocer la información a la que va acceder antes de salir. </li></ul><ul><li>Los enlaces modifican el énfasis de las frases </li></ul>

27.
Enlaces o Links <ul><li>Enfatizar los textos diferentes: </li></ul><ul><ul><li>Libros sobre Economía. </li></ul></ul><ul><ul><li>Libros sobre Medicina. </li></ul></ul><ul><ul><li>Libros sobre Historia. </li></ul></ul><ul><ul><li>Libros sobre Educación. </li></ul></ul><ul><ul><li>Libros sobre: </li></ul></ul><ul><ul><ul><li>Economía. </li></ul></ul></ul><ul><ul><ul><li>Medicina. </li></ul></ul></ul><ul><ul><ul><li>Historia. </li></ul></ul></ul><ul><ul><ul><li>Educación. </li></ul></ul></ul>

28.
Enlaces o Links <ul><li>No cambia el color de los enlaces </li></ul><ul><li>No deje enlaces rotos o sin contenido </li></ul>Compatibilidad entre Browsers <ul><li>Estándares Web </li></ul><ul><ul><li>Html </li></ul></ul><ul><ul><li>Css </li></ul></ul><ul><li>Probar entre Browsers (IE, Firefox, Opera, Safari, etc.) </li></ul><ul><li>Resolución de Pantallas (Estilos Liquido y Fluido) </li></ul>

29.
Consejos Prácticos <ul><li>Sin faltas ortográficas </li></ul><ul><li>Páginas en Contexto </li></ul><ul><ul><li>¿Qué? ¿Quién? ¿Cómo? ¿Cuándo? </li></ul></ul><ul><li>Responda a sus lectores, aunque sea sólo por cortesía </li></ul>

30.
Tipografía <ul><li>Utilizar estilos con moderación </li></ul>El texto pierde fuerza si todas las palabras están resaltadas. El texto pierde fuerza si todas las palabras están resaltadas . Tamaños de las Letras en diferentes plataformas

31.
Tipografía <ul><li>No todos poseen los mismos “fonts” </li></ul>

32.
Tipografía <ul><li>Serif : son aquellas tipografías cuyas letras se apoyan como con una especie de pie </li></ul><ul><li>Sans Serif: carecen de este detalle. </li></ul>

33.
Gráficos en el Web <ul><li>Incluir “ALT” tag en el HTML para las imágenes. </li></ul><ul><li>Indicar el tamaño de las imágenes que se van a descargar </li></ul><ul><li>Evite el uso de backgrounds o imágenes de fondo , y si decide utilizar alguna, que tenga poca información visual </li></ul><ul><li>Limite el uso de Gráficos Decorativos </li></ul><ul><li>Limite el tamaño de las imágenes </li></ul><ul><li>Utilice atributos height y width en html </li></ul><ul><li>Utilice la misma imagen tantas veces sea posible (aceleración de carga) </li></ul>

34.
Formatos Gráficos <ul><li>Número de colores: 2, 4 , 8, 16, 32, 128 ó 256 de una paleta de 24 bits. </li></ul><ul><li>Compresión basada en el algoritmo de compresión LZW. </li></ul><ul><li>Formato de compresión sin pérdida. </li></ul><ul><li>Características añadidas en la versión 89a: </li></ul><ul><li>Carga progresiva. </li></ul><ul><li>Máscara de trasparencia de 1 bit. </li></ul><ul><li>Animación simple. </li></ul>GIF JPG <ul><li>Número de colores: 24 bits color o 8 bits B/N </li></ul><ul><li>Muy alto grado de compresión. </li></ul><ul><li>Formato de compresión con pérdida. </li></ul><ul><li>No permite trasparencia, ni canal alfa. </li></ul><ul><li>No permite animación. </li></ul><ul><ul><li>Color indexado hasta 256 colores y TrueColor hasta 48 bits por pixel. </li></ul></ul><ul><ul><li>Mayor compresión que el formato GIF (+10%) </li></ul></ul><ul><ul><li>Compresión sin pérdida. </li></ul></ul><ul><ul><li>Visualización progresiva en dos dimensiones. </li></ul></ul><ul><ul><li>Canal alfa. (Transparencia variable) </li></ul></ul><ul><ul><li>Detección de errores. </li></ul></ul><ul><ul><li>No permite animación.. </li></ul></ul>PNG

35.
Consejos sobre BANNERS <ul><li>Utilizar palabras que VENDAN </li></ul><ul><li>Si el usuario ha visto el banner 3 veces y no accesa, no lo hará nunca. </li></ul><ul><li>Utilice preguntas en el banner (interacción) </li></ul><ul><li>Animar un banner aumenta visibilidad 15% </li></ul>

36.
¡Esto no es todo !

37.
Referencias <ul><li>Information Architecture Institute </li></ul><ul><ul><li>www.iainstitute.org </li></ul></ul><ul><li>Jakob Nielsen </li></ul><ul><ul><li>www.useit.com </li></ul></ul><ul><li>Alzado.Org </li></ul><ul><ul><li>www.alzado.org </li></ul></ul><ul><li>Infotectura </li></ul><ul><ul><li>www.infotectura.com </li></ul></ul><ul><li>Usability First </li></ul><ul><ul><li>www.usabilityfirst.com </li></ul></ul><ul><li>Usable Web </li></ul><ul><ul><li>www.usableweb.com </li></ul></ul>

38.
Encuentre los Errores de Usabilidad

45.
<ul><li>León Kadoch H:. </li></ul><ul><li>WWW.LEON-KADOCH.COM </li></ul><ul><li>[email_address] </li></ul><ul><li>Tel. – (507) 6573-5938 </li></ul>