Departamento de Comunicación. 2003 Instituto Tecnológico y de Estudios Superiores de Monterrey, Campus Estado de México Instituto Tecnológico y de Estudios.

Presentación del tema: "Departamento de Comunicación. 2003 Instituto Tecnológico y de Estudios Superiores de Monterrey, Campus Estado de México Instituto Tecnológico y de Estudios."— Transcripción de la presentación:

1 Departamento de Comunicación. 2003 Instituto Tecnológico y de Estudios Superiores de Monterrey, Campus Estado de México Instituto Tecnológico y de Estudios Superiores de Monterrey, Campus Estado de México DISEÑO Y PRODUCCIÓN DIGITAL Sesión 13 Diseño para Medios Digitales Diseño de usabilidad. Diseño de interfase. Diseño de Producción y Evaluación Presenta: Lic. Fernando Gutiérrez C., MATI, MCE Departamento de Comunicación Instituto Tecnológico y de Estudios Superiores de Monterrey, Campus Estado de México

2 Departamento de Comunicación. 2003 Instituto Tecnológico y de Estudios Superiores de Monterrey, Campus Estado de México Instituto Tecnológico y de Estudios Superiores de Monterrey, Campus Estado de México Usabilidad ¿ Es realmente necesaria la usabilidad? La usabilidad es totalmente necesaria ya que lo que estamos presentando en el monitor del usuario, la interfaz es la cara de nuestro negocio, y esto en última instancia es comunicación, aunque sea a través de un ordenador. Por consiguiente, si en alguno de los canales emisor o receptor falla algo, la comunicación se verá afectada. El diseño centrado en el usuario, el diseñar con él y para él, es la clave del éxito de las empresas en la Red. La inversión realizada en el estudio de la usabilidad, por una empresa se justifica con creces ya que entre otras cosas conseguimos: (1) aumentar la calidad del desarrollo, (2) reducir los costes de producción, (3) reducir los costes de mantenimiento y apoyo al usuario y (4) reducir el esfuerzo en el uso de un site. Juan José Rodríguez Soler. Consultor de Usabilidad. AGM The Global Company.

3 Departamento de Comunicación. 2003 Instituto Tecnológico y de Estudios Superiores de Monterrey, Campus Estado de México Instituto Tecnológico y de Estudios Superiores de Monterrey, Campus Estado de México ¿Por qué se reducen los costos de producción? Fundamentalmente, porque nos adelantamos a cambios y/o modificaciones posteriores, ya sabemos lo que supone el costo de un rediseño y lo difícil que puede resultar obtener la benevolencia de nuestros usuarios con una segunda oportunidad. De igual forma, el conocer qué es lo que quieren y cómo lo quieren los usuarios, nos evita inversiones innecesarias en funcionalidades innecesarias y elementos de diseño innecesarios. ¿Por qué se reducen los costos de mantenimiento y apoyo al usuario? Cuando estudiamos la interacción de los usuarios en un site, de alguna manera, estamos estudiando la lógica de navegación de los mismos y este conocimiento nos ahorra incorporar estrategias complementarias de reeducación de los usuarios, apoyadas en sistemas de ayuda, como puede ser un mapa web, demos, o instrucciones previas a los procesos implicados. ¿Cómo reducimos el esfuerzo en el uso de un Website? Evidentemente, optimizando la relación entre el número de clicks y el número de errores cometidos, es decir haciendo eficientes las secuencias de navegación. Juan José Rodríguez Soler. Consultor de Usabilidad. AGM The Global Company.

4 Departamento de Comunicación. 2003 Instituto Tecnológico y de Estudios Superiores de Monterrey, Campus Estado de México Instituto Tecnológico y de Estudios Superiores de Monterrey, Campus Estado de México ¿Qué se puede hacer para acelerar y mejorar la usabilidad de nuestros websites? Hay que empezar por el contenido, por ejemplo, la CNN, hay un accidente de avión, y, ¿cómo saben que ésta será la historia de mayor interés para los usuarios?, por un lado, porque tienen un montón de experiencia en historias... Saben que los accidentes de avión son grandes noticias, también lo saben por tráfico, analizando las visitas, los periódicos saben hacer esto durante años, ¿qué poner en la primera segunda o tercera página y cómo dirigir la atención del usuario hacia las noticias que se desea destacar, la portada de un periódico tiene un diseño de la información efectivo, orientado por el editor, de manera que la jerarquía y el número de palabras utilizadas hacen que el contenido tire del usuario, desde la portada o la Home, hacia el sitio donde se encuentra la información relevante. Jareed Spool User Interface Engineering

5 Departamento de Comunicación. 2003 Instituto Tecnológico y de Estudios Superiores de Monterrey, Campus Estado de México Instituto Tecnológico y de Estudios Superiores de Monterrey, Campus Estado de México Ingeniería de Usabilidad Simplificada El test se realiza con seis participantes porque el objetivo es descubrir los principales problemas de usabilidad. Con seis participantes es posible descubrir un 85-90% de los problemas, un número significativo con un ahorro en tiempo y dinero importante. (Jacob Nielsen) Algunos principios: Anticipación, Autonomía, Color, Consistencia, Defaults, Eficiencia, Interfases explorables, Fitts´s Law, Human-interface objects, Reducción de latencia, Aprendizaje, Uso de metáforas, protección del trabajo de los usuarios, Readability, Track State, Visible Navigation. (Bruce Tognazzini) Metodología de Análisis Comparados de Usabilidad.

6 Departamento de Comunicación. 2003 Instituto Tecnológico y de Estudios Superiores de Monterrey, Campus Estado de México Instituto Tecnológico y de Estudios Superiores de Monterrey, Campus Estado de México Diseño de Interfaz INTERFAZ: La serie de procedimientos que seguirá el usuario, durante todo el tiempo que se relacione con el programa, detallando lo que verá y escuchará en cada momento, y las acciones que realizará, así como las respuestas que el sistema le dará.

7 Departamento de Comunicación. 2003 Instituto Tecnológico y de Estudios Superiores de Monterrey, Campus Estado de México Instituto Tecnológico y de Estudios Superiores de Monterrey, Campus Estado de México Diseño de Interfaz INTERFAZ: La serie de procedimientos que seguirá el usuario, durante todo el tiempo que se relacione con el programa, detallando lo que verá y escuchará en cada momento, y las acciones que realizará, así como las respuestas que el sistema le dará. Los gráficos por computadora son muy utilizados principalmente para la interacción usuario-computadora. La interacción gráfica nos provee una comunicación ilustrada facilitando la interacción. El usuario controla el contenido, la estructura, la apariencia de los objetos y las imágenes desplegadas por medio de los dispositivos de entrada tales como teclado, mouse, y pantallas sensitivas al contacto (touch screen).

8 Departamento de Comunicación. 2003 Instituto Tecnológico y de Estudios Superiores de Monterrey, Campus Estado de México Instituto Tecnológico y de Estudios Superiores de Monterrey, Campus Estado de México Diseño de Interfaz Los tres estilos más comunes de interfaces gráficas hombre- computadora son: WYSIWYG (What you see is what you get), Manipulación directa e Interfases de usuario basados en iconos. Las interfaces básicas de usuario son aquellas que incluyen cosas como menús, ventanas, teclado, ratón, los beeps y algunos otros sonidos que la computadora hace, en general, todos aquellos canales por los cuales se permite la comunicación entre el hombre y la computadora. En una interfaz WYSIWYG la representación gráfica con la cual los usuarios interactúan en la pantalla es esencialmente la misma imágen creada por la aplicación. Muchas de la aplicaciones gráficas tienen algún componente WYSIWYG.

9 Departamento de Comunicación. 2003 Instituto Tecnológico y de Estudios Superiores de Monterrey, Campus Estado de México Instituto Tecnológico y de Estudios Superiores de Monterrey, Campus Estado de México Diseño de Interfaz En una interfaz que no utilice WYSIWYG se utilizan códigos de control para decir que una palabra será bold, itálica o cambiará su tamaño. El párrafo siguiente muestra como los códigos de control se ven en el editor: Aquí se muestra las palabras bold, italic, tamaño. Las interfaces WYSIWYG tienen algunas desventajas. Elementos como la resolución, la intensidad del color y algunas otras características no son iguales en una pantalla y en un dispositivo de impresión, por lo que es muy difícil crear una copia exacta de la pantalla en nuestro papel. Otro problema mayor, es que algunas aplicaciones no pueden ser implementadas con puro WYSIWYG. Consideremos los Procesadores de textos, las interfaces más comunes de este tipo.

10 Departamento de Comunicación. 2003 Instituto Tecnológico y de Estudios Superiores de Monterrey, Campus Estado de México Instituto Tecnológico y de Estudios Superiores de Monterrey, Campus Estado de México Diseño de Interfaz Diferencia entre WYSIWYG (What you see is what you get) y WYSIAYG (What you see is all you get). El proceso de Diseño Existen 11 pasos en el proceso de diseño centrado en las tareas: 1.- Entender quién usará el sistema para hacer qué. 2.- Elegir tareas representativas para el diseño. 3.- Plagiar o copiar. 4.- Bosquejar un diseño. 5.- Pensar acerca del diseño. 6.- Crear un prototipo. 7.- Evaluarla con los usuarios. 8.- Repetir. 9.- Construirla. 10.- Rastrearla. 11.- Cambiarla.

11 Departamento de Comunicación. 2003 Instituto Tecnológico y de Estudios Superiores de Monterrey, Campus Estado de México Instituto Tecnológico y de Estudios Superiores de Monterrey, Campus Estado de México El Proceso de Diseño 1.-Entender quién usará el sistema para hacer qué. Este paso es llamado análisis de usuarios y tareas. La necesidad de análisis de tareas debe ser obvio debido a que si se construye un gran sistema que no hace lo que nosotros necesitamos, muy probablemente será un fracaso. Pero, más aún que un simple haz lo que se necesita, un sistema exitoso debe de integrarse fácilmente al mundo en donde se encuentra el usuario y a su trabajo. Es muy importante conocer a fondo a los usuarios, ya que ellos responderán a muchas preguntas que probablemente se tendrán: -- ¿Qué nombres usar en cada elemento del menú? --¿Qué deben de incluir los paquetes de entrenamiento y ayuda? --¿Qué características debe de proveer el sistema?

12 Departamento de Comunicación. 2003 Instituto Tecnológico y de Estudios Superiores de Monterrey, Campus Estado de México Instituto Tecnológico y de Estudios Superiores de Monterrey, Campus Estado de México El Proceso de Diseño 2.-Elegir tareas representativas para el diseño. En este paso, el diseñador deberá identificar varias tareas representativas que el sistema llevará a cabo. Los usuarios son los encargados de describir estas tareas a los diseñadores. Las tareas inicialmente podrán ser descritas por los usuarios con unas cuantas palabras, pero posteriormente deberán de ser detalladas para resolver preguntas del diseñador o analizar una interfaz propuesta. 3.-Plagiar o copiar. Esto no significa plagiar en el sentido legal, pero puede encontrar y analizar interfaces existentes con las cuales los usuarios han trabajado y después tomar y construir ideas para posteriormente utilizarlas en su interfaz. Esto es práctica y legalmente posible. Este tipo de copia puede ser efectiva para un nivel alto de paradigma de interacción y para un bajo nivel de decisiones de control y desplegado.

13 Departamento de Comunicación. 2003 Instituto Tecnológico y de Estudios Superiores de Monterrey, Campus Estado de México Instituto Tecnológico y de Estudios Superiores de Monterrey, Campus Estado de México El Proceso de Diseño 4.-Bosquejar un diseño. La descripción del bosquejo del diseño debe de ser puesto en papel, el cuál fuerza a que se piense acerca de las cosas. Pero todavía no debe de ser programado en la computadora, por que el esfuerzo de la programación, aunque sea un simple prototipo, compromete al diseñador a tomar demasiado temprano muchas decisiones. 5.-Pensar acerca del diseño. Ninguna línea de aviación diseñaría y construiría un nuevo jet sin hacer primero un análisis de ingeniería que prediga un rendimiento y seguridad del avión. El costo de construcción y el riesgo de fracasar es demasiado alto. Similarmente los costos para construir una interfaz de usuario completa y evaluarla sin los suficientes usuarios que revelen todos los problemas es realmente inaceptable.

14 Departamento de Comunicación. 2003 Instituto Tecnológico y de Estudios Superiores de Monterrey, Campus Estado de México Instituto Tecnológico y de Estudios Superiores de Monterrey, Campus Estado de México El Proceso de Diseño 6.-Crear un prototipo. En este paso se construirá algo más concreto que un boceto en unas hojas de papel, algo que pueda ser mostrado a los usuarios y actuar con una descripción más detallada para un trabajo más amplio. No es necesario implantar el diseño completo en este paso. El esfuerzo inicial debe de ser concentrado en las partes de la interfaz necesarias para representar tareas principales. 7.-Evaluar con usuarios. Existen muchos problemas que solamente aparecerán cuando el diseño se está probando con los usuarios. La evaluación debe de ser hecha con la gente cuyo conocimiento y expectativas se acerquen más a los usuarios reales. Los usuarios deben de ser cuestionados en la técnica de pensamiento en voz alta la cual consisten en que el usuario vaya narrando todo lo que está pensando al momento de realizar una tarea.

15 Departamento de Comunicación. 2003 Instituto Tecnológico y de Estudios Superiores de Monterrey, Campus Estado de México Instituto Tecnológico y de Estudios Superiores de Monterrey, Campus Estado de México El Proceso de Diseño 8.-Repetir. La evaluación con los usuarios siempre muestra algunos problemas con el diseño. El propósito de la evaluación no es comprobar la interfaz si no mejorarla. El diseñador debe de ver los resultados, equilibrar los costos de corrección comparado con la severidad de cada problema, entonces revisar la interfaz y evaluarla otra vez. Varios problemas pueden igualmente requerir una reexaminación de tareas y usuarios. 9.-Construir el diseño. Este es el momento de tomar su prototipo y cambiarlo, es decir construir la interfaz. Trate de anticipar cambios menores o secundarios con sencillos cambios de variables.

16 Departamento de Comunicación. 2003 Instituto Tecnológico y de Estudios Superiores de Monterrey, Campus Estado de México Instituto Tecnológico y de Estudios Superiores de Monterrey, Campus Estado de México El Proceso de Diseño 10.-Monitorear el diseño. Un principio fundamental en el que se ha hecho énfasis, es que los diseñadores de la interfaz no deben de estar aislados o separados del resto del grupo de desarrollo del sistema. Si este principio es para mantener el sistema, entonces el diseñador debe de tener un contacto con los usuarios después de que el producto ha sido lanzado a la calle. 11.-Cambiar el diseño. Hoy en día en el negocio de las computadoras hay pocos si no es que ningún producto de software que pueda mantener sus ventas sin tener que hacer actualizaciones regulares. No importa que tan bien el producto ha sido diseñado inicialmente para ajustarse a las tareas y los usuarios, ya que muy probablemente será inadecuado en algunos años ya que las tareas y los usuarios cambian.