1,16-597.pdf

Interacción Persona-Ordenador Grado en Ingeniería Informática 3er Curso. 1er Cuatrimestre 6.0 créditos E.C.T.S 2.5 créditos teóricos 3.0 créditos prácticos 0.5 créditos tutorías colectivas Interacción Persona-Ordenador Presentación Lección 8: Tema 5.1 Lección 16: Tema 8.2 Lección 1: Tema 1 Lección 9: Tema 5.2 Lección 17: Tema 9.1 Lección 2: Tema 2.1 Lección 10: Tema 6.1 Lección 18: Tema 9.2 Lección 3: Tema 2.2 Lección 11: Tema 6.2 Lección 19: Tema 9.3 Lección 4: Tema 2.3 Lección 12: Tema 6.3 Lección 20: Tema 10.1 Lección 5: Tema 3 Lección 13: Tema 7.1 Lección 21: Tema 10.2 Lección 6: Tema 4.1 Lección 14: Tema 7.2 Lección 7: Tema 4.2 Lección 15: Tema 8.1 Interacción Persona-Ordenador Manuel García Vega (Google it!!) Despacho: A3-126 Correo-e: [email protected] http://blogs.ujaen.es/mgarcia Tutorías https://uvirtual.ujaen.es/pub/es/informacionacademica/tutor ias/p/57981 Grupos 1 y 2 de prácticas (ERASMUS) Jueves 10:30 y 12:30 Laboratorio 5 Todo en PLATEA (ya debes de estar inscrito) Interacción Persona-Ordenador Salud María Jiménez Zafra (Google it!!) Despacho: A3-219 Correo-e: [email protected] https://www.ujaen.es/departamentos/dinformati ca/contactos/jimenez-zafra-salud-maria Tutorías https://uvirtual.ujaen.es/pub/es/informacionacademica/ tutorias/p/84374 Grupos 3 y 4 de prácticas (Viernes 10:30 y 12:30) Competencias y Resultados Visita el catálogo de guías docentes de la UJA https://uvirtual.ujaen.es/pub/es/infor macionacademica/catalogoguiasdocen tes/p/2021-22/4/133A/13312021/es/20 21-22-13312021_es.html Programa Teórico I. Introducción a la IPO II. El factor humano III. Metáforas IV. Ingeniería de la interfaz V. Internacionalización VI. El diseño gráﬁco VII. Estilos y paradigmas VIII. Accesibilidad IX. Evaluación X. Estándares y guías de estilo Programa Práctico Prácticas en laboratorio 1. Introducción 2. Diseño de la aplicación 3. Diseño de metáforas 4. Diseño de la interfaz 5. Internacionalización Desarrollo de la asignatura Teoría Vídeo en casa Material en casa Explicación de lecciones Trabajos, ejercicios y debates sobre el contenido Resumen de trabajos en PLATEA Prácticas Los guiones se encuentran en PLATEA Búsqueda de información + generación de informes + programación + software especializado Exposición de resultados Desarrollo de la asignatura Seminarios virtuales y Ejercicios en clase Resolución de problemas individuales Entrega en PLATEA Noticias, avisos, notas, tutorías, etc. en la web del profesor y en PLATEA Evaluación - Qué Teoría (hay que sacar mínimo 5) Examen ﬁnal Práctica Resolución de trabajos prácticos por sesión Exposiciones Defensa ﬁnal Notas válidas hasta noviembre Seminarios virtuales y ejercicios en clase Resolución de problemas Notas válidas hasta noviembre Asistencia y participación Participación activa en clase Participación en los trabajos Notas válidas hasta noviembre Evaluación - Cómo Examen teórico ﬁnal (50% y hay que sacar 5 o más) Prácticas en laboratorios (35%) Seminarios virtuales y ejercicios en clase (10%) Asistencia y participación (5%) Sistema de tiques 50 tiques = 100% (pero si consigues más… tendrás puntos extra) Sesión completa de prácticas, 1 tique Sales a la pizarra o contestas una pregunta y destacas, 1 tique Vienes a tutorías con una duda, 1 tique y 1 caramelo 😋 Vienes a tutorías a saludar, 1 caramelo En las clases de teoría se repartirán tiques en días aleatorios a los que lleguen antes que el profesor Cada tique tiene un QR que te lleva a una página donde, añadiendo el DNI (75123456Z), se inserta el tique en la base de datos Evaluación - Cómo Las notas obtenidas durante el curso SON DEFINITIVAS, excepto la del examen de teoría, y son válidas hasta la convocatoria extraordinaria 1 del curso que viene incluida. Si no entregas y expones al menos 3 prácticas (la evaluación ﬁnal es una de ellas) serán caliﬁcadas como “no cursadas” (nos vemos el año que viene 😭). No, en la extraordinaria no hay examen de prácticas, al igual que no hay forma de mejorar la asistencia, los test de comienzo o los seminarios. Tómate en serio las prácticas, trabajos y asistencia desde el principio porque cada nota no podrás modiﬁcarla y son importantísimas en la nota ﬁnal de la asignatura. Grupos de prácticas Apúntate a tu grupo en PLATEA Hoy 11 de septiembre a las 16:30. Bibliografía La interacción persona ordenador. Edición: 2002. Autor: I. Abascal, I. Aedo, J.J. Cañas, M. Gea, A.N. Gil, J. Lorés, A.B. Martínez, M. Ortega, P. Valero, M. Velez. Editorial: null. https://aipo.es/educacion/material-editado-por-aipo/ The Ultimate Guide to Prototyping. 2015 UXPin. Designing the user interface: strategies for eﬀective human-computer interaction. Edición: 4th ed. preview. Autor: Shneiderman, Ben. Editorial: Reading: Addison-Wesley, cop. 2004 (C. Biblioteca) Human-computer interaction. Edición: 3rd ed. Autor: -. Editorial: Harlow, England [etc.]: Pearson Prentice Hall, 2004 Interacción persona-ordenador TEMA I- Introducción a la IPO Objetivos Entender y describir qué es la interacción persona-ordenador Conocer la importancia de la disciplina Aprender los conceptos básicos Conocer los objetivos de la IPO Entender qué quiere decir que un sistema es usable Aprender a analizar si un sistema es usable Saber que hay muchas disciplinas que contribuyen a la IPO y valorar su aportación Contenidos Interacción persona-ordenador Interfaces de usuario Disciplinas relacionadas con la IPO Usabilidad Definición Disciplina relacionada con el diseño, implementación y evaluación de sistemas informáticos interactivos para uso de seres humanos y con el estudio de los fenómenos más importantes con los que están relacionados Usuario es la persona que interactúa con un sistema informático Se llama interacción a cualquier intercambio de información que suceda entre la persona y el ordenador (Baecker and Buxton, 1987) Objetivos de la IPO Desarrollar o mejorar la seguridad, utilidad, efectividad, eﬁciencia y usabilidad de sistemas que incluyan ordenadores Para hacer sistemas usables es preciso Comprender los factores (psicológicos, ergonómicos, organizativos y sociales) que determinan cómo la gente trabaja y hace uso de los ordenadores Desarrollar herramientas y técnicas para ayudar a los diseñadores de sistemas interactivos Conseguir una interacción eﬁciente, efectiva y segura Los usuarios no han de cambiar radicalmente su manera de ser, sino que los sistemas han de ser diseñados para satisfacer los requisitos del usuario ¿Por qué estudiar la IPO? Multimedia Gráﬁcos 3D Entrada por voz … Actualmente más del 70% del esfuerzo de desarrollo de las aplicaciones interactivas está dedicado a la interfaz (Gartner Group) Contenidos Interacción persona-ordenador Interfaces de usuario Disciplinas relacionadas con la IPO Usabilidad Interfaces de usuario Interfaz: superﬁcie de contacto entre dos entidades En la IPO, las entidades son la persona y el ordenador En la vida cotidiana tenemos muchos ejemplos de interfaces ¿Cuáles son las interfaces? ¿Cuáles son las interfaces? visibilidad + comprensión intuitiva Definición de interfaz Son las partes del sistema con las que el usuario entra en contacto física y cognitivamente Interacción física (teclado, ratón, pantalla...) Interacción cognitiva (lo que se presenta al usuario debe ser comprensible para él) Contenidos Interacción persona-ordenador (sesión 1) Interfaces de usuario Disciplinas relacionadas con la IPO Usabilidad Disciplinas relacionadas Programación Psicología Ingeniería del software IPO Diseño Inteligencia artificial Sociología Ergonomía Disciplinas relacionadas Comprende el comportamiento humano y Programación Psicología los procesos mentales que comporta Ofrece teorías sobre la forma en que las personas procesan Ingeniería la información del software IPO Ofrece metodologías y Diseño herramientas para evaluar el grado de satisfacción Inteligencia de las personas artificial Sociología Ergonomía Organiza los controles en la pantalla (el usuario lo ve todo casi sin Disciplinas relacionadasmoverse) Lo más importante situada a la “altura de los ojos” Maximizar la Colocación espaciada de los Programación seguridad, Psicología controles eﬁciencia y Prevención de los reﬂejos ﬁabilidad, Entorno físico de la interacción simpliﬁca las Aspectos de salud: Ingeniería posición física, tareas y temperatura, tiempo del software de permanencia aumenta el IPO ante el ordenador, radiación de las Diseño bienestar y pantallas satisfacción Inteligencia Uso del color (los diferentes colores artificial deben ser distinguibles) Sociología Ergonomía Disciplinas relacionadas Programación Psicología Estudia las costumbres y las Ingeniería tradiciones de losdel pueblos software IPO Comprender mejor a tus clientes y Diseño trabajadores ayuda a diseñar productos que reﬂejen mejor las Inteligencia tendencias culturales emergentes artificial Sociología Ergonomía Disciplinas relacionadas Programación Psicología Es la actividad encaminada a conseguir la producción en serie de Ingeniería objetos útiles y visualmente del software agradables IPO Diseño Es muy importante para conseguir programas usables Inteligencia artificial Sociología Ergonomía Contenidos Interacción persona-ordenador Interfaces de usuario Disciplinas relacionadas con la IPO Usabilidad Usabilidad Para que un sistema interactivo cumpla sus objetivos tiene que ser usable y accesible para la mayor parte de la población humana La usabilidad es la medida en la que un producto puede ser usado por determinados usuarios para conseguir unos objetivos especíﬁcos con efectividad, eﬁciencia y satisfacción en un contexto de uso dado Ejemplo de problemas Etiquetas que Colocación de parecen botones controles Controles difíciles de recordar Etiquetas ambiguas ¿Por qué nos hemos de preocupar? ¿Por qué las cosas son difíciles de utilizar? El problema radica en orientar el desarrollo del producto a la tecnología en lugar de al usuario, la persona para la cual está hecho el dispositivo (Donald Norman, The invisible computer) Donald Norman. The design of everyday things www.baddesigns.com Software usable Software usable: fácil de aprender y fácil de utilizar Fácil de aprender: permite realizar las tareas rápidamente y sin errores Fácil de utilizar: el usuario usa la herramienta de una manera más natural Una aplicación usable es la que permite al usuario centrarse en su tarea, no en la aplicación Usabilidad: Principios generales Facilidad de aprendizaje Flexibilidad Consistencia Robustez Recuperabilidad Tiempo de respuesta Adecuación de las tareas Disminución de la carga cognitiva 1. Facilidad de aprendizaje El tiempo requerido desde el desconocimiento de una aplicación hasta su uso productivo debe ser mínimo Debe proporcionarse ayuda a usuarios intermedios para que alcancen un nivel de conocimiento y uso del sistema máximos Para que un sistema sea fácil de aprender debe ser: 1.1 Sintetizable Cuando una operación produce un cambio en el sistema, el usuario debe poder captarlo 1.2 Familiar Debe existir una correlación entre los conocimientos que posee el usuario (interacción con el mundo real y con otros sistemas) y los conocimientos requeridos para la interacción en un sistema nuevo 2. Flexibilidad Flexibilidad: multiplicidad de maneras en que el usuario y el sistema pueden intercambiar información Parámetros que miden la ﬂexibilidad: Control del usuario: El usuario es quien conduce la interacción Migración de tareas: Posibilidad de transferir el control de las tareas entre el usuario y el sistema (ej: corrector ortográﬁco) Capacidad de sustitución: Permitir que valores equivalentes puedan ser sustituidos unos por otros (ej: margen de una carta) Adaptabilidad: Adecuación automática de la interfaz al usuario (ej: detección de la repetición de secuencias de tareas) 2. Flexibilidad: Control del usuario Cómo dar control al usuario: Permitir deshacer Dar a los usuarios control para empezar y terminar las operaciones siempre que sea posible Cuando un proceso no se pueda interrumpir, advertir al usuario y visualizar mensajes apropiados durante el proceso Permitir suspender una acción y comenzar otra para atender un trabajo inesperado Proporcionar atajos de teclado para las tareas frecuentes 3. Consistencia Es un concepto clave en la usabilidad Un sistema es consistente si todos los mecanismos que se utilizan son siempre usados de la misma manera, siempre que se utilicen y sea cual sea el momento en que se haga Consejos para diseñar sistemas consistentes: Seguir guías de estilo siempre que sea posible Diseñar con un ‘look & feel’ común No hacer modiﬁcaciones si no es necesario hacerlas Añadir nuevas funcionalidades al conjunto preexistente en vez de cambiar las ya conocidas 4. Robustez El sistema debe permitir al usuario conseguir sus objetivos sin problemas 5. Recuperabilidad El sistema debe permitir al usuario corregir una acción una vez que ésta ha sido reconocida como errónea 6. Tiempo de respuesta Tiempo de respuesta: tiempo que necesita el sistema para expresar los cambios de estado al usuario Los tiempos de respuesta deben ser soportables para el usuario 7. Adecuación de las tareas El sistema debe permitir todas las tareas que el usuario quiere hacer y en la forma en que las quiere hacer 8. Disminución de carga cognitiva Debe favorecerse en los usuarios el reconocimiento mediante el recuerdo Los usuarios no deben tener que recordar abreviaturas y códigos complicados Dolphin Plus, herramienta para configuración de sensores de nivel y de flujo industriales Conclusiones La IPO es una disciplina bien asentada La interfaz como concepto amplio y en la que hay que tener en cuenta todo el entorno La usabilidad como objetivo fundamental La interdisciplinariedad de la IPO Importancia del diseño centrado en el usuario Interacción persona-ordenador TEMA II - El factor humano Objetivos Conocer los tipos de percepciones más relevantes desde el punto de vista interactivo que tiene la persona Conocer cómo se realiza el proceso de comprensión y los modelos de memoria Comprender que el modelo de memoria condiciona el diseño de la interfaz Ver la importancia que tiene la limitación de la memoria de trabajo Conocer qué es un modelo mental Contenidos El modelo mental Modelo de procesamiento Los sentidos El modelo de memoria El modelo mental La información de la memoria no está almacenada de forma caótica, sino que está organizada en estructuras semánticas que facilitan su adquisición y su recuperación posterior Entre todas las estructuras propuestas, las más relevantes para la IPO son los modelos mentales El modelo mental Un modelo mental es el modelo que las personas tienen de ellos mismos, de los otros, del entorno y de las cosas con las que interaccionan (Donald Norman) Los modelos mentales se forman a través de la experiencia, el entrenamiento y el aprendizaje Google: “Manzana” Son rojas casi todas!!!!!!!!!!!!! El modelo mental Características de los modelos mentales: Son a menudo parciales: la persona no tiene un conocimiento completo del funcionamiento del sistema (Un ventilador) Son inestables y están sujetos a cambios Pueden ser inconsistentes ya que la persona puede no haber analizado las consecuencias lógicas de sus creencias (los padres viven en la edad media) Son a menudo acientíﬁcos y pueden estar basados en la superstición más que en la evidencia, o en una incorrecta interpretación de ésta (Vacunarse es de tontos. Un buen par de tortas y se queda nuevo) Conceptualizar los conocimientos del usuario en forma de modelos mentales puede ser muy útil para ayudar a construir un modelo apropiado de la interacción El modelo mental Dado un modelo mental de un sistema, los errores se producen cuando la operación del sistema diﬁere del modelo mental Ejemplo: botón junto a un ascensor que enciende una luz Solución: colocar etiqueta junto al botón Es muy importante disponer de un modelo mental correcto. El diseño de la interfaz debe ayudar a ello Por ejemplo, respetando las convenciones Contenidos El modelo mental Modelo de procesamiento Los sentidos El modelo de memoria Modelo de procesamiento Para estudiar el papel del ser humano en el diseño de sistemas interactivos se recurre a la Psicología Cognitiva: (Disciplina cientíﬁca que se encarga del estudio del sistema de procesamiento de información humano) Los psicólogos cognitivos teorizan sobre: Cómo se percibe el mundo que nos rodea, Cómo se almacena y recupera la información, etc. Cuánto de difícil o fácil es aprender o realizar cosas Modelo de procesamiento Ordenador Dispositivos Dispositivos Salida Entrada Sensores Efectores Memoria recordatorio rendimiento sensorial (MS) atención Memoria de Trabajo elaboración recuperación Memoria de Largo Plazo Canales de entrada-salida Ordenador Dispositivos Dispositivos Salida Entrada Sensores Efectores Memoria recordatorio rendimiento sensorial (MS) atención Memoria de Trabajo elaboración recuperación Memoria de Largo Plazo Canales de entrada-salida Percepción a través Acciones a través de los sentidos de los actuadores Vista (efectores) Oído Extremidades Tacto Dedos Gusto Ojos Olfato Cabeza Sistema vocal Contenidos El modelo mental Modelo de procesamiento Los sentidos El modelo de memoria Los sentidos Los sentidos constituyen los canales de comunicación con el exterior (sensores) Los sentidos con mayor incidencia son la vista y el oído, y en menor grado el tacto y el olfato Percepción visual La visión es la principal fuente de información Proceso de la visión: Recepción física del estímulo El ojo humano contiene una lente y una retina con conos (color: sensibles al rojo 64%, al verde 32% o al azul 2%) y bastones (formas, visión nocturna) Interpretación del estímulo Podemos distinguir unos 7 millones de colores Componentes: Color Brillo Tamaño y profundidad Ángulo visual Percepción visual: Color El ojo es sensible a un rango de longitudes de onda Menos sensible a longitudes más cortas (azules) Más sensible a longitudes más largas (amarillos y anaranjados) Debido a la distribución física de los fotorreceptores azules, podemos ver los azules mejor en la periferia que en el frente Consecuencias: Las líneas azules delgadas (como el texto) tienden a verse borrosas Los objetos azules pequeños tienden a desaparecer cuando tratamos de enfocarlos Los colores que diﬁeren sólo por la cantidad de azul no producen bordes claros Objetos del mismo color pueden parecer marcadamente diferentes en color dependiendo del color del fondo Percepción visual: Color El texto en azul tiende a verse borroso El texto en azul tiende a verse borroso El texto en azul tiende a verse borroso Percepción visual: Color Hay otros problemas relacionados con el color: Debe evitarse la combinación de colores oponentes en una pantalla: rojo-verde, amarillo-azul Los conos sensibles al rojo se inhiben con el verde Ejemplo: letras azules sobre fondo amarillo. Pueden dejarse de ver las letras, palabras en rojo sobre fondos azules puede parecer que ‘vibran’, etc. En un lugar de la mancha En un lugar de la mancha En un lugar de la mancha En un lugar de la mancha En un lugar de la mancha En un lugar de la mancha Percepción visual: Color Más adelante lo justiﬁcaremos, pero mientras llegamos... Recomendaciones generales (además de las dichas): Usar altos contrastes de color entre la letra y el fondo Limitar el número de colores (5±2) Usar azul claro sólo para las áreas de fondo Usar el blanco para la información periférica Recomendaciones para las pantallas: La luminosidad disminuye en el orden blanco, amarillo, cian, verde, magenta, rojo y azul Usar blanco, cian o verde sobre fondos oscuros Para vídeo inverso usar negro, rojo, azul o magenta Evitar colores muy saturados Percepción visual: Color No se debe abusar del color como medio de codificación porque los problemas de visión del color son muy comunes El 8% de los hombres y el 1% de las mujeres tienen algún problema de visión del color Tipo Descripción Monocromático Solo tiene un tipo de cono Dicromático protanopa Le faltan los conos del rojo Dicromático deuteranopa Le faltan los conos del verde Dicromático tritanopa Le faltan los conos del azul Tricromático anómalo Los tienen todos pero funcionan mal Tricromático Visión perfecta Percepción visual: Brillo El ojo reacciona a la cantidad de luz emitida por un objeto (luminancia): La agudeza visual mejora con la luminancia, pero cuando es muy elevada se incrementa el parpadeo Debe ser inversamente proporcional a la duración del estímulo Debe tenerse en cuenta que el usuario trabaja en un ambiente luminoso que inﬂuye en cómo se ve la información presentada en la interfaz Ejemplos: alinear las pantallas en relación correcta con las fuentes de luz, nunca colocar una pantalla contra una pared o un espejo, usar vídeo inverso para minimizar los destellos, etc. Percepción visual: Profundidad Importante en entornos 3D para dar realismo En la imagen 2D que percibe la retina deben existir claves que informen de la profundidad de la escena Claves para la percepción de la profundidad: Claves dadas por la propia imagen: Gradiente de textura (densidad) Superposición Tamaño relativo Altura relativa Tamaño familiar Perspectiva lineal Claves dadas por la estructura del sistema visual: Disparidad binocular (diferencia entre la visión de cada ojo) Paralaje de movimiento (desde el coche, lo cercano cambia de posición muy deprisa, pero lo lejano se mueve muy despacio) Percepción visual: Ángulo visual La percepción de la distancia está relacionada con el ángulo visual del objeto Si el ángulo visual es mayor, el objeto está más cerca Una persona con visión normal puede percibir una línea si tiene un ángulo visual mínimo de 0,5 segundos de arco Los espacios entre líneas se detectan a partir de 30” a 1’ de arco visual Percepción visual: Ángulo visual El ángulo visual está afectado por el tamaño y la distancia del objeto Objetos del mismo tamaño a diferentes distancias tienen ángulos diferentes Objetos de diferentes tamaños y distancias pueden tener el mismo ángulo Percepción y atención Al trabajar sobre una interfaz el usuario recibe con frecuencia más información de la que puede procesar al mismo tiempo Ejemplo: página de inicio de un portal de Internet La atención funciona como un ﬁltro que permite restringir la información que va a ser analizada en cada momento Hay una estrecha relación entre percepción y atención Pregunta clave: ¿qué determina la atención del usuario? El ambiente: estímulos llamativos, imagen con colores brillantes (ojo con la ceguera al banner) El propio usuario: las personas no rastrean la totalidad de la imagen sino que se centran en las áreas de alto contenido informativo. Analizando estas zonas se hacen una idea de lo que tienen enfrente Percepción y conocimiento Conocimiento a través de imágenes: el uso de iconos Los iconos permiten un acceso directo y más rápido que la palabra a la información semántica del objeto representado Recomendaciones: Mínima diferencia entre el objeto real y el objeto representado Presentar en la misma posición en todas las pantallas Fácilmente distinguibles del resto de iconos Evitar que tengan varias interpretaciones Percepción y conocimiento Conocimiento de la función de los objetos: las aﬀordances (capacidades) El diseñador de una interfaz desea que los usuarios conozcan la función de los distintos objetos de la misma Ejemplo negativo: incluir un hipervínculo a través de una imagen Aﬀordances: funciones de un objeto que se perciben directamente a partir de su imagen Ejemplo: ‘ser presionado’ Requisitos para conseguirlas: Forma funcional Visibilidad Acción coherente Percepción del texto Leemos alrededor de 250 palabras por minuto en buenas condiciones; la velocidad a la que leemos el texto es una medida de su legibilidad Los mejores tipos de letras están entre 9 y 12 puntos La longitud de las líneas debe estar entre 6 y 13 cm Los sentidos: El oído Sonido: cambio de presión del aire (vibración) Características: Frecuencia, Amplitud, Intensidad, Timbre El oído humano puede distinguir sonidos entre 20 Hz y 15 KHz Identiﬁcación de posición: diferencia del sonido percibido por ambos oídos (tiempo, intensidad) En IPO, se usa en las interfaces auditivas y multimodales que combinan el sonido y la imagen para transmitir información Ejemplo: menús auditivos usados por las compañías telefónicas Los sentidos: El tacto (háptica) ¿Por qué preocuparnos por el tacto en IPO? Es un canal sensitivo muy importante en el diseño de sistemas de Realidad Virtual Resulta muy útil para personas con discapacidades visuales o auditivas Proporciona una realimentación en tareas como pulsar un botón o una tecla, o arrastrar un objeto por la pantalla Los sentidos: El tacto El tacto no está localizado, recibimos los estímulos a través de la piel Las áreas más sensibles son los dedos Tenemos tres tipos de receptores sensoriales: Termorreceptores (calor) Nocirreceptores (intensidad) Mecanorreceptores (presión) Los sentidos: El tacto Otros aspectos de la percepción háptica son El sentido cenestésico o conciencia de la posición del cuerpo y las extremidades El sentido vestibular, que proporciona información acerca de la orientación, el movimiento y la aceleración Normalmente no somos conscientes de ellos, salvo cuando nuestros receptores sensoriales reciben estímulos inadecuados Son muy importantes en el diseño de sistemas de Realidad Virtual Si no se tienen en cuenta nos encontramos con problemas de mareos, náusea y desorientación espacial Los sentidos: El olfato Ha comenzado a ser explorado en IPO por las posibilidades que ofrecen los olores para crear mundos virtuales parecidos a los reales Además es importante porque el sentido del olfato está conectado con el sistema encargado de procesar las emociones (‘interfaces emocionales’) Aún existen grandes diﬁcultades para su uso en el diseño de interfaces: Existe una gran variación individual en la sensibilidad al olor, La sensibilidad se pierde con el tiempo de exposición, etc. Contenidos El modelo mental Modelo de procesamiento Los sentidos El modelo de memoria Memoria sensorial Memoria de trabajo Memoria a largo plazo El modelo de memoria La mayor parte de nuestra actividad diaria se basa en la memoria: Almacenar información Repetir acciones Utilizar lenguajes, etc. Nos interesa conocer cómo trabaja la memoria para modelar las interacciones Existen varios tipos de memoria Modelo de procesamiento Ordenador Dispositivos Dispositivos Salida Entrada Sensores Efectores Memoria recordatorio rendimiento sensorial (MS) atención Memoria de Trabajo elaboración recuperación Memoria de Largo Plazo Memoria sensorial Ordenador Dispositivos Dispositivos Salida Entrada Sensores Efectores Memoria recordatorio rendimiento sensorial (MS) atención Memoria de Trabajo elaboración recuperación Memoria de Largo Plazo Memoria sensorial La información llega a nuestros sentidos de una forma continua y muy rápida Los procesos encargados de analizarla en la memoria de trabajo necesitan tiempo para realizar su función y puede ocurrir que la pierdan antes de almacenarla Por esta razón, los canales sensoriales tienen asociadas memorias donde la información se almacena por cortos períodos de tiempo (milésimas de segundo) La función de estas memorias es retener la información para que pueda ser transferida a la memoria de trabajo antes de que desaparezca Memoria sensorial Actúa como buﬀer de los estímulos recibidos a través de los sentidos Existen tantas memorias sensoriales como sentidos tenemos, y se actualizan constantemente Las que mejor conocemos actualmente son: Memoria Icónica, ligada al canal visual (9 elem. / 250 ms) Memoria Ecoica, ligada al canal auditivo Este almacenamiento nos permite predecir la procedencia del sonido (se percibe por cada oído con un cierto desfase), o un fogonazo en la oscuridad (persistencia de la imagen tras haber cesado el estímulo) Memoria sensorial icónica Demostración Podemos mover el dedo enfrente del ojo y comprobaremos que se puede ver más de uno a la vez. Esto indica la persistencia de la imagen después de que el estímulo ha desaparecido Memoria sensorial: La atención La atención es el proceso de concentración mental sobre un conjunto de estímulos (o pensamientos) Podemos prestar atención selectivamente (eligiendo el tipo de información), ya que poseemos una capacidad limitada de retención sobre la información sensorial Si no atendemos selectivamente podríamos ser desbordados por la magnitud de información Ej. Escuchar una conversación u otra en una ﬁesta La información recibida por los estímulos sensoriales se puede pasar a otra memoria más duradera o ser sobreescrita y perdida. Memoria de trabajo (STM) Ordenador Dispositivos Dispositivos Salida Entrada Sensores Efectores Memoria recordatorio rendimiento sensorial (MS) atención Memoria de Trabajo elaboración recuperación Memoria de Largo Plazo ¿Cuántos hay? ¿Cuántos hay? ¿Cuántos números individuales puedes recordar? 72410358291064351290 ¿Cuántos números individuales puedes recordar? 72 41 03 58 29 10 64 35 12 90 Memoria de trabajo Conjunto de símbolos activos en un momento determinado a los que estamos prestando atención, y que por tanto podemos manipular mediante control voluntario Los símbolos con los que se está trabajando se mantienen en ella mientras que los estemos usando y prestando atención Ejemplos: Recordar un número a marcar Realizar una operación aritmética Memoria de trabajo Características: Acceso rápido, 70 mseg Rápida decaída (se mantiene unos 200 ms) Baja capacidad Capacidad variable según la persona Puede mejorarse mediante entrenamiento Memoria de trabajo La cantidad máxima de elementos o de unidades de información que podemos recordar es de 7±2 Estos elementos pueden ser asociaciones de elementos, lo cual aumenta la capacidad La capacidad limitada de la memoria provoca el deseo de buscar asociaciones. Cuando se forma con éxito una asociación se crea una ‘huella’ Si la huella no se forma correctamente la asociación falla y se pierde el acceso a la información (tener la palabra en la punta de la lengua) Memoria de trabajo Los experimentos demuestran que: Se recuerdan mejor las primeras y las últimas palabras de una lista (primacía y recencia) Es más fácil recordar elementos con signiﬁcado o relación común casa, pesa, cosa, tabla, oveja, laca, pasa, agua, búho cama, mesa, silla, tabla, percha, palo, vara, viga, leño Es más difícil recordar elementos similares pincel, bolígrafo, lápiz libro, balón, lápiz Memoria de trabajo Las interferencias afectan a la memoria y pueden provocar errores en las tareas ¿En qué estaba yo pensando? Ejemplos: Máquina expendedora: se obtiene el ticket y se olvida la vuelta Cajero: se toma el dinero y se olvida la tarjeta Causa: se realiza la huella antes de tiempo (predomina la asociación sobre la acción principal) Solución: devolver antes la vuelta/tarjeta Memoria de trabajo La información sensorial condiciona las asociaciones que efectuamos: Poca información disponible Demasiada información simultánea Mucha gente hablando a mi alrededor Conclusión: cuando el usuario no sabe qué debe hacer y falta información de ayuda, su rendimiento disminuirá y será incapaz de realizar acciones que parecían obvias al diseñador Memoria de trabajo La limitación de la memoria de trabajo afecta a la ejecución de varias tareas simultáneas, un aspecto crucial en IPO Experimento: se demanda una tarea principal y otra secundaria y se ve si ésta afecta a la primera Resultados: El rendimiento empeora cuando ambas tareas requieren la participación de un mismo almacén secundario Ej.: repetir una serie de palabras y recordar una lista de dígitos El rendimiento se mantiene cuando las tareas se llevan a cabo en dos almacenes distintos: Ej.: repetir una serie de palabras y recordar una secuencia de movimientos Memoria de trabajo Experimento de Salamé y Baddeley: el recuerdo de palabras que acaban de ser presentadas se ve afectado por la presentación simultánea de un texto hablado al que no se le presta atención Si es un ruido en lugar de un texto hablado no afecta Aplicación al diseño de páginas web: Si se pone una música de fondo, el habla de la canción provoca interferencias con los procesos en los que sea necesario trabajar con información verbal (p.ej. una búsqueda) aunque no se le preste atención conscientemente Memoria a Largo Plazo (MLP) Ordenador Dispositivos Dispositivos Salida Entrada Sensores Efectores Memoria recordatorio rendimiento sensorial (MS) atención Memoria de Trabajo elaboración recuperación Memoria de Largo Plazo Memoria a largo plazo La memoria a largo plazo almacena todo nuestro conocimiento Las principales características son: Gran capacidad (casi ilimitada) Acceso más lento (0,1 s) Las pérdidas ocurren más lentamente Memoria a largo plazo Memoria procedimental Reglas de actuación y estrategias para realizar tareas concretas, en la forma condición-acción Memoria declarativa Memoria episódica Representa nuestra memoria de eventos y experiencias de forma seriada que tienen lugar en nuestra vida Ayer me crucé con un extraño, me pidió fuego y me atracó Memoria semántica Registra estructuras de hechos, conceptos y MEMORIA A LARGO PLAZO habilidades que obtenemos de nuestras experiencias PROCEDIMENTAL DECLARATIVA No debes ﬁarte de los extraños) SEMÁNTICA EPISÓDICA Memoria a largo plazo Proceso de captura y almacenamiento La información de la memoria de trabajo se transﬁere a la MLP a través de un proceso de memorización consistente en refrescar la información La memorización puede mejorarse mediante ciertas técnicas Memoria a largo plazo Técnicas de memorización Hipótesis de tiempo total: la cantidad aprendida es directamente proporcional al tiempo dedicado Hipótesis de tiempo distribuido: el aprendizaje es más efectivo si se distribuye en el tiempo Información con signiﬁcado: la información estructurada es más fácil de recordar que la no estructurada Sentencias: las frases son más fáciles de recordar, y aún más si son concretas antes que abstractas Memoria a largo plazo Proceso de olvido Teoría de decaimiento: la información que reside en la MLP eventualmente se puede perder Pérdida por inferencia: si adquirimos nueva información, puede causar la pérdida de la antigua (ej. nuevo número de teléfono) Los factores emocionales afectan Recordamos las cosas positivas y hechos importantes (ej. periódico) No está claro si realmente olvidamos o bien nos resulta difícil recordar Memoria a largo plazo Proceso de recuperación de la información Recuerdo: la información es reproducida por la memoria Reconocimiento: la presentación de la información suministra pistas acerca de ella. Es un proceso menos complejo Conclusiones La persona percibe información a través de los sentidos Vista, oído, tacto... Guarda, manipula y utiliza información Reacciona a la información recibida Una comprensión de las capacidades y limitaciones de las personas nos ayudará en el diseño de sistemas interactivos Interacción persona-ordenador TEMA III - Metáforas Objetivos Aprender qué es una metáfora Conocer qué son las metáforas verbales, visuales y globales Conocer la metáfora del escritorio y su historia Ver el uso de las metáforas en las interfaces actuales Discutir los problemas y las ventajas de su uso Aprender cómo diseñar y aplicar las metáforas con efectividad Contenido Metáforas Metáforas verbales Metáforas visuales Metáfora del escritorio Metodología de creación Diseño de metáforas Ejemplos de metáforas Metáforas Utilizamos metáforas para comunicar conceptos abstractos de una forma familiar y accesible Las metáforas tienen un papel dominante en el diseño de las interfaces actuales La metáfora del escritorio, introducida por el ordenador Macintosh, son de uso generalizado actualmente y han supuesto un cambio en la usabilidad de los ordenadores El uso de metáforas ayuda a los desarrolladores a construir programas que puedan ser usados por comunidades de usuarios más diversas Contenido Metáforas Metáforas verbales Metáforas visuales Metáfora del escritorio Metodología de creación Diseño de metáforas Ejemplos de metáforas Metáforas verbales Metáfora: Figura retórica que consiste en usar una palabra o frase en un sentido distinto del que tiene pero manteniendo con éste una relación de analogía o semejanza Ejemplo: “cabellos de oro” por “cabellos rubios” Las metáforas son una parte integrante del lenguaje y aparecen en las conversaciones cotidianas Tiempo (abstracto) → ahorrar, gastar, desaprovechar (dinero) Ideas (abstracto) → defender, atacar, retirar (conceptos bélicos) Navegar, explorar, visitar, inmersión, web, red, mapa, página, home, ancla, bookmark, etc. Metáforas verbales: Ejemplo Cuando nos encontramos con una nueva herramienta tecnológica tendemos a compararla con alguna cosa conocida Metáforas verbales: Ejemplo Los conocimientos sobre los elementos y relaciones en un dominio familiar se traspasan a los elementos y relaciones en otro no familiar retorno teclas barra esp. Ventajas y limitaciones Ventajas: basándonos en el conocimiento previo podemos desarrollar más rápidamente el conocimiento del nuevo dominio Presionar una tecla signiﬁca ver un carácter visualizado en la pantalla Limitaciones: existen diferencias La tecla de retorno mueve el carro físicamente mientras que en el ordenador mueve el puntero al comienzo de la siguiente línea No obstante, una vez asimiladas estas diferencias el usuario construye un nuevo modelo mental Conclusión: las metáforas verbales pueden ser muy útiles para ayudar a los usuarios a iniciarse en el uso de un nuevo sistema Contenido Metáforas Metáforas verbales Metáforas visuales Metáfora del escritorio Metodología de creación Diseño de metáforas Ejemplos de metáforas Metáforas visuales Metáfora visual: Es una imagen que nos permite representar alguna cosa de tal manera que el usuario puede reconocer lo que representa y por extensión comprender su propósito La metáfora puede variar desde pequeñas imágenes hasta pantallas completas Metáforas visuales: Ejemplos Los conocimientos sobre los elementos de un dominio familiar se traspasan a los elementos de otro no familiar Metáforas visuales: Ejemplos Metáforas visuales: Intuición Las personas entendemos las metáforas por intuición Intuición: cognición inmediata. Conocimiento de una cosa obtenida sin utilizar inferencia o razonamiento Comprendemos su signiﬁcado porque las conectamos mentalmente con otros procesos que previamente hemos aprendido Metáforas visuales: Intuición Las metáforas se basan en asociaciones percibidas de manera similar por el diseñador y el usuario Si el usuario no tiene la misma base cultural que el desarrollador es fácil que la metáfora falle Metáforas visuales: Metáfora global La metáfora global es una metáfora que nos da el marco para las otras metáforas del sistema La metáfora del escritorio se puede considerar como una metáfora global Es importante que todas las metáforas se integren adecuadamente en la metáfora global Metáfora global: Ejemplos Explorando el sistema solar Metáfora global: Ejemplos Cuarto de juegos Metáfora global: Ejemplos Agenda electrónica Contenido Metáforas Metáforas verbales Metáforas visuales Metáfora del escritorio Metodología de creación Diseño de metáforas Ejemplos de metáforas Metáfora del escritorio Fue la primera metáfora global Está muy extendida Reproduce una oﬁcina con todos sus objetos ¿Cómo funciona? Las carpetas son contenedores de documentos en el mundo real y en el virtual Se puede abrir una carpeta para coger o dejar alguna cosa Se pueden poner carpetas dentro de carpetas Se pueden mover las carpetas por todo el escritorio Algunas propiedades físicas están ausentes Las carpetas no pesan, no hacen ruido cuando se abren Por otra parte tienen propiedades “mágicas” Se puede poner el mismo documento en dos carpetas a la vez Se puede reproducir un conjunto de carpetas y sus documentos automáticamente Se pueden ordenar las carpetas por orden alfabético, etc. Metáfora del escritorio: Metáforas compuestas La metáfora del escritorio se ha combinado con otras metáforas para permitir que los usuarios puedan realizar un conjunto de tareas más amplio Ejemplos: La barra de desplazamiento como metáfora del rollo, que es un papiro que se desplaza para leer Menús y ventanas Cortar y pegar, basadas en el diseño de páginas de una imprenta El ordenador invisible El objetivo ﬁnal de las metáforas es hacer el ordenador invisible para el usuario La metáfora puede llegar a ser transparente al usuario y no requerir de él ningún esfuerzo cognitivo Contenido Metáforas Metáforas verbales Metáforas visuales Metáfora del escritorio Metodología de creación Diseño de metáforas Ejemplos de metáforas Metodología de creación Las metáforas visuales son cruciales en el diseño de un sistema interactivo Han de diseñarse de acuerdo con una metodología Fases del diseño de metáforas: Identificación Generación Evaluación Deﬁnición Definición problemas del de la de la funcional funcional usuario metáfora metáfora Diseño de la metáfora Definición funcional Lo primero es entender cómo funciona aquello que se va a modelar con la metáfora Qué puede hacer el sistema (análisis de requisitos) Qué puede hacer el usuario (análisis de tareas) Identificación de problemas usuario Analizar las diﬁcultades del usuario Ver cómo utilizan funcionalidades similares y qué problemas tienen Explicar lo que queremos hacer y ver si lo entienden, enseñándoles el prototipo y viendo cómo lo utilizan Generación de la metáfora Examen detallado de la manera tradicional de realizar las tareas Analizar oﬁcinas, fábricas, escuelas, etc. y observar los problemas que tienen los usuarios y las herramientas que utilizan para resolverlos Una vez identiﬁcados los problemas y las herramientas que se utilizan, ver cuáles de ellas envuelven algunas de las características que los usuarios encuentran difíciles de comprender Estas son buenas candidatas para metáforas (harán fácil lo que el usuario encuentra difícil) Evaluación de la metáfora Una vez generadas varias metáforas, se evalúan para escoger la más adecuada a la funcionalidad Puntos para evaluar la utilidad de la metáfora: Volumen de la estructura que proporciona “Un cientíﬁco mira por un microscopio una cadena de ADN a la que le falta un nucleótido y con unas pinzas intenta arreglarlo” Aplicabilidad de la estructura. Falsas expectativas Representabilidad. ¿Fácil de representar?. La metáfora ideal tiene representación visual, auditiva y palabras asociadas Adaptabilidad a la audiencia: los usuarios deben entenderla Extensibilidad Metodología de creación: Otra versión Identiﬁcar el tipo de comparación Debemos encontrar una relación entre la información familiar y la nueva No todas valen: ﬁnal de proceso → funeral Grado de ajuste Estudiar el grado de coincidencia y las diferencias que existen Ejemplos de errores Asociaciones inadecuadas Se utiliza la metáfora del reproductor de vídeo para controlar una impresora ¿¿¿??? Ejemplos de errores Extensión de la metáfora con funciones no intuitivas Al arrastrar el icono del disquete a la papelera se expulsa el disquete ¿¿¿??? Contenido Metáforas Metáforas verbales Metáforas visuales Metáfora del escritorio Metodología de creación Diseño de metáforas Ejemplos de metáforas Diseño de metáforas Las metáforas pueden conseguir su efectividad a través de asociaciones: Podemos asociar clases y atributos a objetos familiares Podemos asociar procesos y algoritmos a verbos de acción Tipos de metáforas: De objetos: libro, álbum, agenda, escritorio, biblioteca De actividades: visita, exploración, viaje De lugares: casa, plaza, museo, ciudad, isla Objetos familiares Escritorio Dibujos, ﬁcheros, carpetas, papeles, clips, notas de papel Fotografía Álbumes, fotos, portafotos Juegos Reglas del juego, piezas del juego, tablero de juego Contenedores Estanterías, cajas, compartimentos Ciudades Hitos, perﬁles, casas Ejercicio Objetivo: Diseño de un conjunto de metáforas para la gestión de una biblioteca de imágenes digitales Pasos: Escoger los objetos que están implicados Asociar un elemento visual a cada objeto Escoger los verbos asociados a las acciones que se pueden ejecutar Construir un elemento visual para cada acción Ejercicio – paso 1 Escoger los objetos que están implicados: Estantería Álbum Hoja Foto Ejercicio – paso 2 Asociar un elemento visual a cada objeto Estantería Álbum Hoja Foto Ejercicio – paso 3 Escoger los verbos asociados a las acciones que se pueden ejecutar Crear estantería, álbum, hoja, foto Añadir estantería, álbum, hoja, foto Borrar estantería, álbum, hoja, foto Seleccionar álbum, hoja, foto Mover álbum, hoja, foto Ejercicio – paso 4 Construir un elemento visual para cada acción Crear/Añadir Borrar Seleccionar Mover Contenido Metáforas Metáforas verbales Metáforas visuales Metáfora del escritorio Metodología de creación Diseño de metáforas Ejemplos de metáforas Ejemplos de metáforas: Papelera La papelera es una herramienta habitual en la mayoría de las culturas avanzadas Sirve para poner todos los papeles u otros elementos que no sirven para después tirarlos a la basura El símbolo de reciclaje es cada vez más habitual La papelera permite reciclar los objetos depositados en ella Ejemplos de metáforas: Tijeras Las tijeras nos dan la funcionalidad de cortar papel, tela, etc. La metáfora nos aporta la idea de poder cortar un trozo de documento, una parte de un dibujo, etc. Su enlace con el portapapeles tiene que ser aprendido Ejemplos de metáforas: Pintar El bote de pintura es un objeto muy común y de fácil comprensión Con el bote de pintura que se vacía queremos hacer comprender al usuario que lo que se hace es llenar de un color el interior de un determinado objeto Ejemplos de metáforas: Portapapeles Esta metáfora pretende cubrir un componente del sistema operativo que nos permite pasar información entre aplicaciones diferentes Su uso es fácil de intuir, pero es una metáfora pobre: no se puede recoger más de una cosa, no se sabe de dónde vienen los documentos y carece de historial Hay aspectos que no cubre la metáfora y han de ser aprendidos Ejemplos de metáforas: Correo El correo es un elemento habitual en nuestra cultura. Nos permite enviar información escrita en papel a un destinatario normalmente lejano Esta metáfora se utiliza para el correo electrónico Ejemplos de metáforas: Webs www.healthy.net Ejemplos de metáforas: Webs www.ncsa.uiuc.edu/Cyberia/Expo Ejemplos de metáforas: Webs Conclusiones Las metáforas constituyen un elemento fundamental de las interfaces actuales Hemos expuesto una visión general de su historia y algunos ejemplos actuales Hemos aprendido algunas ideas sobre cómo diseñar metáforas Interacción persona-ordenador TEMA IV - Ingeniería de la interfaz Objetivos Conocer el proceso de diseño de sistemas interactivos Apreciar la importancia de realizar un diseño centrado en el usuario Presentar notaciones y métodos para el análisis de la interfaz de usuario Contenido Introducción Análisis de tareas Sketchs, mockups, wireframes y prototipos Introducción Los sistemas interactivos se caracterizan por la importancia del diálogo con el usuario La interfaz es por tanto una parte fundamental en el proceso de desarrollo y debe tenerse en cuenta desde el principio Además, la interfaz determina en gran medida la percepción e impresión que el usuario posee de una aplicación El usuario no está interesado en la estructura interna de una aplicación, sino en cómo usarla Introducción Una vez hecha la especiﬁcación, propuesto un diseño y desarrollado el código, es muy difícil cambiar las características de la interacción y presentación de la información, salvo pequeños detalles De esta forma, se obtienen interfaces muy dependientes del diseño de los datos y las funciones, sin tener en cuenta al usuario que va a utilizar esos datos y esas funciones Introducción Conclusión: no se puede realizar la especiﬁcación, diseñar las funciones y estructuras de datos y escribir el código y una vez casi terminado el proceso de desarrollo de la aplicación plantearse el diseño de la interfaz de usuario Por tanto, debemos empezar con una idea clara de cómo queremos la interfaz y cómo serán las interacciones con el usuario para después desarrollar las especiﬁcaciones funcionales que sirvan de guía al diseño posterior Introducción En el desarrollo de sistemas interactivos se pueden aplicar técnicas de Ingeniería del Software, pero modiﬁcando algunos aspectos de los métodos de diseño clásico para adaptarlos a estos sistemas Aspectos a considerar: Captura de requisitos de interacción Análisis de tareas Diseñador Realización de prototipos Evaluación Interfaz de Usuario Usuario Ordenador Contenido Introducción Análisis de tareas Sketchs, mockups, wireframes y prototipos Análisis de tareas Una de las premisas de cualquier aproximación con la que abordemos el diseño es la de conocer al usuario y por tanto cómo realiza las tareas Esta información se recoge en la fase de análisis de las tareas con una notación que permita su formalización y estudio Tarea: Unidad signiﬁcativa de trabajo en la actividad de una persona (sobre una aplicación) Beneﬁcios del análisis de tareas: Proporciona un diseño de la aplicación consistente con el modelo conceptual del usuario Facilita el análisis y la evaluación de usabilidad. Se puede predecir el rendimiento humano e identiﬁcar problemas de uso Análisis de tareas El análisis de tareas consiste en el estudio de: Información que necesita el usuario para realizar la tarea (qué hacer) Terminología y símbolos del dominio del problema (elementos) Descripción de cómo esas tareas se realizan actualmente (cómo) Es el proceso de analizar la manera en que las personas realizan sus trabajos Lo que hacen Sobre qué cosas actúan Qué necesitan saber Análisis de tareas: Ejemplo Análisis de tareas de grabación telemática de televisión: ¿Qué quiere realizar el usuario? ¿Qué información se necesita? ¿Qué acciones debe llevar a cabo? Análisis de tareas: Ejemplo Objetivos del usuario: Ver un programa concreto Grabar la telenovela de todas las tardes Grabar una película esta noche y no estoy en casa Análisis de tareas: Ejemplo Información requerida: Lista de programas Tiempo de inicio, duración, canal Día de la semana para la grabación Análisis de tareas: Ejemplo Acciones necesarias: Lista de programas (identiﬁcar el programa que se quiere grabar) Comprobar que no se ha llegado al límite de programas Iniciar el proceso de grabación (seleccionando ajustes adecuados) Análisis de tareas: Métodos Descomposición de tareas Ver el modo en el cual una tarea se puede descomponer en otras más simples Análisis basado en conocimiento Identiﬁcar el conocimiento del usuario para llevar a cabo dicha tarea y cómo está organizado este conocimiento Análisis de relaciones entre entidades Aproximación orientada a objetos que enfatiza los actores y objetos, las relaciones entre los mismos y las acciones que pueden realizar Análisis de tareas: Análisis jerárquico Análisis jerárquico Análisis de tareas: GOMS Familia de técnicas propuesta por Card, Moran, y Newell (1983) para modelar y describir las prestaciones de las tareas desde el punto de vista humano GOMS es un acrónimo que signiﬁca Objetivos (Goals), Operadores (Operators), Métodos (Methods) y Reglas de selección (Selection rules) Análisis de tareas: GOMS Objetivos Objetivos del usuario, describen lo que pretende conseguir Operadores Acciones básicas que se deben llevar a cabo para utilizar el sistema Métodos Existen diferentes alternativas para conseguir un objetivo P.E. una ventana se puede cerrar mediante una combinación de teclas (Alt-F4) o con el ratón (Archivo-cerrar) Reglas de selección Elección entre posibles alternativas para alcanzar un objetivo Análisis de tareas: GOMS Ejemplo: Cerrar ventana GOAL: CERRAR-VENTANA [select GOAL: USAR-MÉTODO-RATÓN MOVER-RATÓN-A-MENÚ-VENTANA ABRIR-MENÚ CLICK-SOBRE-OPCIÓN-CERRAR GOAL: USAR-MÉTODO-TECLADO PULSAR-TECLAS-ALT-F4 GOAL: USAR-MÉTODO-CERRAR-APLICACIÓN PULSAR CONTROL-ALT-DEL SELECCIONAR CERRAR-APLICACIÓN] Rule 1: IF (USUARIO-EXPERTO) USAR-MÉTODO-TECLADO ELSE USAR-MÉTODO-RATÓN Rule 2: USAR-MÉTODO-CERRAR-APLICACIÓN si se queda bloqueado el sistema Análisis de tareas Implementación Una vez modeladas las tareas debe obtenerse una implementación correcta de las mismas Para ello hay que tener en cuenta varios factores: Tipos de interacción Posicionamiento, valor, texto, selección, arrastre Principios, guías de estilo, estándares Gestión de entradas del usuario Petición, muestreo, evento Diseño de la presentación Gestión de errores Contenido Introducción Análisis de tareas Sketchs, mockups, wireframes y prototipos Prototipos Son documentos, diseños o sistemas que simulan o tienen implementadas partes del sistema ﬁnal Son herramientas muy útiles para hacer participar al usuario en el diseño y poder evaluarlo ya en las primeras fases del desarrollo En el desarrollo de aplicaciones se deﬁnen ciertas fases que conviene seguir, aunque se puede obviar alguna Realización de un sketch Creación de un wireframe Creación de un mockup Realizar un prototipo Prototipos Un Sketch nos permite crear una idea inicial de forma muy rápida, realizar una tormenta de ideas Con los wireframes, al centrarnos sólo en la estructuración, somos capaces de crear una estructura sólida sin distraernos por el momento con las imágenes de un MockUp o con la funcionalidad de un prototipo Mientras Sketch, wireframes y MockUps se inclinan más hacia la creatividad y son más abstractos, los prototipos requieren llevar las ideas a la vida y son necesarios para hacer pruebas de usabilidad y experiencias de usuario. Realización de un sketch Un sketch es un primer boceto que realizamos para el diseño de una interfaz. Son nuestros primeros trazos sobre una hoja de papel. Déjate llevar, ponte a dibujar la interfaz, cómo serán los menús, dónde pongo botones, cómo aparecerán los distintos elementos... El Sketch tiene que reﬂejar las ideas generales: Dónde pondremos los elementos más característicos, como logos, etc. Dónde estará la zona de navegación Dónde se cargan los sistemas de ayuda para usuarios Se agregarán servicios de redes sociales Qué áreas de contenidos y qué servicios queremos presentar en la interfaz Realización de un sketch Cómo se hace? Con lápiz y papel juega con ideas y bocetos. El objetivo es conseguir ideas de trabajo y explorar cualquier propuesta que se nos ocurra. Lo mejor es experimentar sin miedo a cometer errores o descartar ideas. Cuanto más tiempo pasemos jugando con las ideas y viendo cómo mejorarlas nos hará comprender si una idea es buena o no Documenta lo que has hecho con anotaciones al margen Estas anotaciones nos pueden servir para otras interfaces. Creación de un wireframe Es un boceto de “alambre” Se centra especíﬁcamente en La asignación de espacio Priorización del contenido Las funcionalidades disponibles Los comportamientos deseados Carecen de estilo tipográﬁco, color o aplicaciones gráﬁcas, su principal objetivo es la funcionalidad, comportamiento y jerarquía de contenidos En otras palabras, se centra en “qué hace la pantalla, no cómo se ve” El wireframe conecta la estructura conceptual, o arquitectura de la información, con el diseño visual de la web o aplicación Creación de un wireframe Creación de un wireframe Los wireframes sirven para múltiples propósitos: Priorizar los contenidos determinando la cantidad de espacio que se va asignar a un elemento dado y dónde estará Conectar la arquitectura de la información del sitio para su diseño visual, mostrando las conexiones entre las páginas Clariﬁcar los espacios y formas para la visualización de la información en la interfaz Determinar la funcionalidad de la interfaz, el número de estas funciones en cada pantalla Consejos para crear un wireframe No usar colores (tonos de grises) ni imágenes Usar un solo tipo de letra ( aunque se pueden usar diferentes tamaños) Los siguientes elementos suelen ser habituales cuando estamos creando un wireframe de una web Logo Campo de búsqueda Cabeceras, incluyendo título de la página como el H1 y H2, subtítulos… Los sistemas de navegación, incluyendo navegación global y navegación local Contenido del cuerpo Botones de compartir Información de contacto Pie de página Wireframe y rejillas Nos ayudan a ordenar los elementos gráﬁcos, el texto y las imágenes Para visualización en un monitor se usan tamaños de 960 puntos (divisible entre 1, 2, 3, 4, 5, 6 y 12) pudiendo subdividir cómodamente en columnas Wireframe y cajas Creación de un wireframe Una vez creado el armazón, hay que crear la jerarquía de la información usando la tipografía Utilizando diferentes tamaños de fuente, negritas y subrayados diferenciaremos los diferentes niveles de información. Wireframe y web responsive No podemos permitir que los programadores se metan en el diseño ¿Cómo debe ajustarse el diseño para los dispositivos de menor tamaño? ¿Cuál va a ser la jerarquía de los elementos de la página? ¿Cuáles son más importantes en función de su objetivo? ¿Cuál es la jerarquía de los contenidos? ¿Cómo funciona la navegación en pantallas más pequeñas? ¿Cómo se maneja el menú con un dispositivo de 320 × 480 táctil ? Se crean wireframes para todos los posibles dispositivos Empezar por los ”anchos estrechos” es decir, el más pequeño primero (Móvil → Tableta → Escritorio) Wireframe: Herramientas Gliﬃ (https://www.gliﬀy.com/uses/wireframe-software) Programa de dibujo online que permite el trabajo colaborativo online y la realización de esquemas para crear los mapas web Cacoo (https://cacoo.com/) Herramienta de dibujo online fácil de usar para crear diagramas, mapas de sitio, wireframes y gráﬁcos de la red. Mockingbird (https://gomockingbird.com/) Software online para crear, y compartir wireframes. Permite el uso de rejillas de 960px UXpin (https://www.uxpin.com/) Muy completa, permite importar scketches y continuar con mockups Framebox (http://framebox.org/) Muy, muy, muy sencilla RWD Wireframes (https://github.com/howlowck/rwdwire) Herramienta online que permite crear wireframes sencillos y trabajar con ellos para crear web responsive Mockups (Maquetas) Es una representación más avanzada del diseño gráﬁco y comunicativo de un proyecto Alta ﬁdelidad: es casi el producto ﬁnal Media ﬁdelidad: transitorio, sin perder demasiado tiempo Es una composición gráﬁca completa: Usando el wireframe como plantilla Introduciendo todos los elementos gráﬁcos y visuales Convirtiéndose en un modelo a escala de un producto que se utiliza para demostrar y probar un diseño Mockups (Maquetas) El mockup es un medio de representación de la apariencia del producto Muestra los fundamentos de su funcionalidad Los MockUp incluyen los detalles visuales, tales como colores, tipografía, etc. Son generalmente estáticos. Al observar un mockup, se debe tener una buena idea de cómo se verá el producto ﬁnal y una idea aproximada de cómo podría funcionar (incluso si las funciones aún no se han desarrollado) Se deﬁnen: textos e imágenes (que no tienen por qué ser deﬁnitivos), CSS, paleta de colores, iconos, dimensiones y espacios Mockups: puntos fuertes Puede ser utilizado para la implementación del diseño: prueban el diseño antes de que escribamos una sola línea de código Es más preciso para los desarrolladores Es una herramienta ﬂexible: los cambios se hacen más fácilmente Es más fácil de presentar a los no diseñadores: sobre todo los mockups de alta ﬁdelidad Ayuda a crear el libro de estilo Puede servir como parte de nuestra propuesta de presupuesto El cliente debería de ﬁrmar un acuerdo por el cual se compromete a no usar todo o en parte nuestro concepto o diseño sin pagar por ello Mockups: puntos débiles Demasiados efectos y detalles Eliminar los detalles que no agreguen valor al diseño o que diﬁculten código (deﬁnir en el CSS un borde redondeado con un gradiente de color o una transparencia…) No usar rejillas y no alinear correctamente los elementos Si estás realizando una web, no realizar una maqueta para web responsive No usar un esquema de color: el esquema de colores de un sitio web o aplicación tiene un gran impacto en el aspecto general de la aplicación y por tanto tendrá también un gran impacto en el usuario Mockups Herramientas para deﬁnir los colores: Adobe (https://color.adobe.com/es/create) Paletton (http://paletton.com) Colour Lovers (https://www.colourlovers.com/) Pictaculous (https://anacorbera.com/pictaculous-crea-paletas-colores-partir- una-imagen/) Color Spire (https://www.colorspire.com/) Color hunt (https://colorhunt.co/) Instant Color Schemes (http://www.gpeters.com/color/color-schemes.php) Color Explorer (http://www.colorexplorer.com/default.aspx) Color Rotat (http://mobile.colorotate.org/) Color Jack (http://colrd.com/sphere/) Mockups Herramientas para mockups: Inkscape o Adobe illustrator Photoshop o Fireworks Recursos para estas herramientas Plantillas Toolkits Botones prefabricados Patrones de diseño Fuentes... Mockups: recursos Freebiesbug Elementos de interfaz de usuario y kits gratuitos para Photoshop e Illustrator http://freebiesbug.com/ Designrﬁx Más de 60 MockUps gratuitos http://designrﬁx.com/freebies/psd-mockup-templates Uxpin.com Kit de interfaz de usuario http://www.uxpin.com/ui-kit.html iOS 8 Kit de interfaz de usuario http://www.uxpin.com/ios8-ui-kit.html Línea 25 Lista sitios con plantillas, patrones y kits de UI http://line25.com/articles/top-places-to-ﬁnd-free-phot oshop-ui-kits-online Mockups: recursos Speckyboy Wireframes gratuitos para crear mockups http://speckyboy.com/2014/03/31/20-free-web-mobile -wireframe-templates/ Robbie Manson Plantillas + rejillas 960×12 http://robbiemanson.com/resources/960px-grid-templ ates/ I ♥ wireframes Página con multitud de recursos para wireframe y MockUps https://wireframes.tumblr.com/ https://placeit.net Web que te permite, entre otras cosas, incluir la imagen de tu mockup en distintas pantallas, móviles, tablets, etc., interesante para presentaciones Prototipos Es un modelo fácilmente ampliable y modiﬁcable de un sistema planiﬁcado, probablemente incluyendo su interfaz y su funcionalidad de entradas y salidas Es una representación de alto detalle de un proyecto digital. En ella se puede identiﬁcar y operar: Sistemas de navegación Paleta de colores aplicada Iconografía Experiencia de usuario (UX) Servicios de ayuda, búsqueda, interacción. Otros elementos del proyecto Prototipos Los prototipos son navegables Testean la interacción: botones, validación de formularios, iconos… Identiﬁcamos y solucionamos problemas UX Transición desde la página principal a los resultados de búsqueda Carga de información al usuario Nos sirve como modelo del comportamiento del sistema que puede ser usado para entenderlo completamente o ciertos aspectos de él y así clariﬁcar los requerimientos. Puede obviarse en algunos proyectos (un blog o una web sencilla), pero resulta de gran utilidad en otros, como apps, videojuegos, grandes webs... Prototipos: creación No hay una formula general, pero podemos tener en cuenta: Cada sección de una app tiene un objetivo y este debe quedar claro al ver el prototipo. Dependiendo del tipo de prototipo (web o app) el prototipo debe ser más o menos completo En una web sencilla se pueden hacer solo las páginas más importantes, siendo distintas En otro tipo de aplicaciones es posible que debamos desarrollarlo completamente En su creación deben intervenir el equipo de diseño, el cliente y los equipos de desarrollo Diseñar a tamaño real (imágenes y contenidos) e incluir la estructura de navegación Prototipos: herramientas Justinmind Herramienta profesional para prototipos de webs y apps. Windows y Mac. http://www.justinmind.com/ Axure RP Herramienta profesional para Prototipos, wireframes y MockUps. Windows y Mac. http://www.axure.com/ Balsamiq Prototipos web interactivos http://balsamiq.com/products/mockups/ Prototipos: herramientas Protoshare Diseño de webs y apps interactivas con simulaciones sobre distinto dispositivos http://www.protoshare.com/ Jumpchart Planiﬁcación de webs + wireframes interactivos + simulación de navegación https://www.jumpchart.com/ FlairBuilder Herramienta web para hacer bocetos de webs y Apps para iPhone http://www.ﬂairbuilder.com/ Prototipos: herramientas iPlotz Maquetas navegables de webs y apps http://iplotz.com/ MockFlow Herramienta web sencilla para webs y apps http://www.mockﬂow.com/ Mockingbird Servicio web gratuito para prototipos webs http://gomockingbird.com/ Prototipos: herramientas Quartz composer Herramienta de diseño que incluye Apple en su paquete de aplicaciones para desarrolladores Origami Es una herramienta gratuita similar a Quartz https://facebook.github.io/origami/ Framerjs Importa de Photoshop y permite hacer interacciones usando javascript http://framerjs.com/ Conclusiones El diseño de la interfaz es parte fundamental del proceso de desarrollo del software y debe ser considerado desde el principio El usuario debe tomar parte en el diseño y no ser mero espectador Existen metodologías y notaciones para el diseño que deben ser utilizadas La evaluación del diseño tiene una gran importancia Interacción persona-ordenador TEMA V - Internacionalización Objetivos Valorar la importancia de la internacionalización de las interfaces Reconocer los problemas derivados de la traducción a otros lenguajes Conocer los diferentes alfabetos y esquemas de codiﬁcación existentes Saber los aspectos a tener en cuenta en la internacionalización Conocer metodologías y tecnologías para internacionalizar y localizar interfaces Contenidos Introducción Internacionalización y localización Elementos de la interfaz Escrituras Esquemas de codiﬁcación Zonas de internacionalización Modelo de internacionalización y localización Guía técnica Introducción Software internacionalizado: producto que está preparado para ser utilizado fuera de la región o país donde fue creado Objetivo: hacer llegar el producto a mercados internacionales Problema: ajustar la interfaz a los diferentes destinos Caso extremo: sitios web Introducción Ejemplo de problema: culturas con lenguajes que se escriben de derecha a izquierda Contenidos Introducción Internacionalización y localización Elementos de la interfaz Escrituras Esquemas de codiﬁcación Zonas de internacionalización Modelo de internacionalización y localización Guía técnica Internacionalización (i18n) Es el proceso de diseñar una aplicación de tal manera que pueda adaptarse a diferentes lenguajes y regiones sin necesidad de cambiar el código Un programa internacionalizado no tiene elementos dependientes de la lengua o del contexto cultural de un país o región en el propio código Los elementos textuales, como los mensajes o las etiquetas de los componentes, no están en el código, están fuera y se toman dinámicamente Localización (L10n) Es el proceso de adaptar software a una región especíﬁca o lenguaje añadiéndole componentes especíﬁcos y traduciendo texto Convenciones locales, cultura y lenguaje de una región particular Conjunto de letras que se utilizan para escribir en una lengua (escritura) Ventajas El mismo ejecutable funciona en todo el mundo El mercado es mayor No hace falta hacer un desarrollo internacional del producto una vez acabada la primera versión Se utilizan los recursos más eﬁcientemente Añadir soporte internacional a un programa acabado puede hacerlo menos estable que si se hace como una parte del proceso de desarrollo El mantenimiento del código y la inclusión de nuevas localizaciones es menos costoso Elementos a considerar Texto Colores Iconos Gráﬁcos Clips de audio Números de Ayuda en línea teléfono Formato de Direcciones monedas, fechas y Títulos honoríﬁcos números Calendarios Medidas Contenidos Introducción Internacionalización y localización Elementos de la interfaz Escrituras Esquemas de codiﬁcación Zonas de internacionalización Modelo de internacionalización y localización Guía técnica Elementos de la interfaz Cultura Iconos Colores Calendarios, formatos y separadores de fecha y hora Formatos de números y monedas Ordenación Unidades de medida Expliquemos Elementos de la interfaz Cultura La cultura de una región o país puede hacer percibir un mismo objeto de maneras diferentes en puntos geográﬁcos diferentes Ejemplos Tan pronto como sea posible quiere decir “inmediatamente” en Estados Unidos y “puede ser este mes” en la cultura latinoamericana La mano izquierda es ofensiva en algunas culturas Elementos de la interfaz Cultura Hay que cuidar cómo se dibujan hombres y mujeres juntos y cómo van vestidos Algunos símbolos como la esvástica, hoz y martillo, sol naciente, cruces y estrellas representan ideas políticas y religiosas En un país fundamentalista pueden entenderse como ofensivas cosas que en Occidente no tienen ningún signiﬁcado Mover la cabeza, decir adiós con la mano, mujeres en bikini, bebidas alcohólicas Elementos de la interfaz Iconos Muchos iconos presentan una dependencia más o menos importante de una determinada lengua y cultura Ejemplos: Buzón de correo Corrector ortográﬁco Veriﬁcación (tick) Elementos de la interfaz Colores Tienen asociados signiﬁcados a través de la tradición en la mayor parte de las culturas Occidental Negro: color asociado con el luto y los funerales Blanco: asociado con el matrimonio y el nacimiento Oriental Blanco: asociado con el luto Rojo: asociado con el matrimonio Cada cultura tiene sus estándares, por lo que es difícil generalizar Ejemplo: semáforo Rojo (parar), ámbar (precaución) y verde (adelante), pero ni aún estos los podemos asumir de una manera generalizada Elementos de la interfaz Calendarios, fecha y hora Hay otros tipos de calendario aparte del Gregoriano Budista, islámico, chino, hebreo, etc. En el calendario gregoriano hay distintos formatos: dd/mm/aaaa - 11 de enero de 2005 mm/dd/aaaa - january 11th, 2005 - (Angloparlantes) Elementos de la interfaz Números y monedas Para cada país hace falta tener en cuenta el símbolo de la moneda y el formato numérico USA $ 1,234.56 Reino Unido £ 1,234.56 Euro 1.234,56 € Elementos de la interfaz Ordenación Las ordenaciones son importantes en el proceso de internacionalización y son un tema complejo En un principio las ordenaciones de caracteres son de la A a la Z, mayúsculas primero y después las minúsculas, y los números se ordenan de 0 a 9 Este tipo de regla no siempre es aceptable, porque hay reglas más complicadas cuando hay que considerar un segundo carácter al mismo tiempo Ejemplo de la ‘ch’ y la ‘ll’ en Castellano, ya superado Elementos de la interfaz Unidades de medida La mayor parte del mundo utiliza el sistema métrico excepto Estados Unidos Utiliza la milla (1.609 m), la pulgada (2,54 cm), etc. Contenidos Introducción Internacionalización y localización Elementos de la interfaz Escrituras Esquemas de codiﬁcación Zonas de internacionalización Modelo de internacionalización y localización Guía técnica Escritura Las escrituras se pueden clasiﬁcar en ideogramas y escrituras fonéticas Un ideograma tiene un signiﬁcado especial y no tiene relación con su pronunciación Las letras de una escritura fonética representan determinados sonidos, como por ejemplo M Los tres sistemas de escritura más importantes son: Occidental Oriente medio Extremo Oriente Escrituras occidentales Las escrituras occidentales son: latín, griego y cirílico Características comunes a las tres escrituras: Fonéticas Se leen de izquierda a derecha en una línea horizontal Utilizan letras mayúsculas y minúsculas diferentes Utilizan numeración arábiga: 0, 1, 2, 3, 4, 5, 6, 7, 8y9 Escrituras occidentales Escritura latina La más usada (casi toda Europa, parte de Asia, casi toda África, América y Oceanía) Proviene del latín, con letras añadidas ( J, W) Algunas lenguas usan más letras y marcas diacríticas: acento grave (à), agudo (á), circunﬂejo (â), virgulilla (ã), diéresis (ä), círculo (å) y barra (Ø). En castellano, á, é, í, ó, ú, ü, ñ, ¿, ¡ Escritura griega Escritura cirílica Usada en los países eslavos (ruso, búlgaro, serbio...) y de Asia central (turcomano, kurdo, uzbeko, kazajo, tayiko...) Extremo Oriente Están basadas en los caracteres ideográﬁcos chinos Su antigüedad se remonta a 4.000 años y se utilizan de esta forma desde hace más de 2.000 años Actualmente se usan unos cuantos miles de caracteres Conjunto estándar: 20.000 caracteres Conjunto extendido: 50.000 caracteres Mínimo para conversar: 3.000 caracteres Contenidos Introducción Internacionalización y localización Elementos de la interfaz Escrituras Esquemas de codiﬁcación Zonas de internacionalización Modelo de internacionalización y localización Guía técnica Esquemas de codificación Cada tipo de escritura ha de ser representada en sistemas informáticos Esta representación se concreta en un esquema de codiﬁcación Estos esquemas se codiﬁcan a través de mapas de caracteres Los mapas de caracteres permiten la representación de escrituras en el ordenador e incluyen caracteres que no están en el alfabeto como los signos de puntuación Esquemas de codificación Tipos de esquemas ASCII Mapa de caracteres de un octeto (SBCS) Mapa de caracteres de doble octeto (DBCS) Unicode Esquemas de codificación ASCII El mapa de caracteres ASCII está basado en el alfabeto latino y consta de 128 caracteres Los caracteres en el rango de 0 a 31 y el carácter 127 son especiales, típicamente de control Cada carácter es un índice en el mapa de caracteres El código ASCII de 128 fue creado para el inglés Nuevos idiomas se queda corto ASCII Mapa de un sólo octeto (SBCS) Son mapas de caracteres de hasta 256 caracteres (256=28) Son una extensión del código ASCII, al que se han añadido 128 caracteres, del 128 al 255 (mapa de caracteres extendido) ISO 8859-2 Latín Europa del este 8859-5 Cirílico Europa del este 8859-1 Latín Europa del oeste 8859-7 Griego 8859-3 Turco 8859-8 Hebreo 8859-6 Árabe Mapa de un sólo octeto ASCII ISO 8859-1 (Latin-1) Mapa de un sólo octeto ASCII ISO 8879 ASCII Mapa de doble octeto (DBCS) Las escrituras del extremo oriente utilizan caracteres ideográﬁcos Necesitan un mapa de doble octeto Notación de 16 bits: 65.536 caracteres El código DBCS contiene caracteres de 1 y 2 octetos Los de un sólo octeto se corresponden con el código ASCII En el doble octeto de algunos caracteres se deﬁnen como octetos de comienzo y el segundo como octeto de código Esquemas de codificación Problemas Duplicidad en la codiﬁcación de caracteres Múltiples códigos de caracteres inconsistentes debido al conﬂicto entre estándares nacionales y de la industria El código ASCII de 7 bits o el de 8 bits están limitados a 128 y 256 posiciones de código y son inadecuados en un entorno global Internet ha añadido un punto más a la demanda de un conjunto de caracteres único en el mundo Esquemas de codificación Unicode Consensuado, participan Apple, Borland, Digital, Hewlett-Packard, IBM, Lotus, Metaphor, Microsoft, Next, Novell, Research Libraries Group, Sun, WordPerfect, Xerox Es un esquema de codiﬁcación uniforme y de tamaño ﬁjo para todo tipo de caracteres de las escrituras más importantes del mundo, así como símbolos técnicos Trata los caracteres alfabéticos, ideográﬁcos y los símbolos de la misma manera, de forma que se pueden mezclar Esquemas de codificación Unicode Es compatible con el código ASCII Utiliza una codiﬁcación de 16 bits No necesita secuencias de ESCAPE Esquemas de codificación Unicode En resumen, Unicode es: Universal (capacidad amplia) Uniforme (anchura ﬁja) No ambiguo Unicode proporciona códigos para más de 39.000 caracteres de las lenguas más importantes (quedan cerca de 18.000 sin usar y 6.400 reservados para uso privado de las aplicaciones) Esquemas de codificación Unicode Disposición de símbolos y letras Contenidos Introducción Internacionalización y localización Elementos de la interfaz Escrituras Esquemas de codiﬁcación Zonas de internacionalización Modelo de internacionalización y localización Guía técnica Zonas de internacionalización (Tailandia) Contenidos Introducción Internacionalización y localización Elementos de la interfaz Escrituras Esquemas de codiﬁcación Zonas de internacionalización Modelo de internacionalización y localización Guía técnica Modelo de localización Esquema de un producto localizado: Recursos Código de la = Producto + localizados aplicación localizado Modelo de localización Esquema de un producto localizado: Recursos Código de la = Producto + localizados aplicación localizado Contiene datos pero no código Contiene cadenas de caracteres y gráﬁcos utilizados en la interfaz Contiene elementos especíﬁcos de la localización realizada Modelo de localización Esquema de un producto localizado: Recursos Código de la = Producto + localizados aplicación localizado Contiene el código de la aplicación que se ejecuta en todos los países e idiomas Modelo de localización Claves para el diseño de un producto localizado: Extraer todos los datos, textos y elementos gráﬁcos y colocarlos en un ﬁchero de datos separado Organizar y documentar los ﬁcheros Crear un proceso para construir el producto localizado Contenidos Introducción Internacionalización y localización Elementos de la interfaz Escrituras Esquemas de codiﬁcación Zonas de internacionalización Modelo de internacionalización y localización Guía técnica Guía técnica Veamos algunos problemas técnicos generales en la planiﬁcación de la localización Guía técnica Puntos a revisar Elementos especíﬁcos de la localización Convenciones en el procesamiento de texto: ordenación, clasiﬁcación de caracteres, pronunciación, guionado, funciones de gestión de cadenas e intercambio de ﬁcheros (importación y exportación de ﬁcheros) Gestión de las entradas soporte para drivers de teclado y otros métodos de entrada Gestión de las salidas Guía técnica Traducción del texto Todas las lenguas tienen gramática y sintaxis diferentes El texto traducido cambia de tamaño, hay que prever que pueda crecer Ejemplos: Mover se traduce como verschieben en alemán (5 contra 11) Guía técnica A qué afecta Mensajes Gramática y sintaxis Diseño de menús Prompts Barras de estado Cajas de diálogo Iconos Guía técnica Organización de diálogos La organización de controles y elementos en una ventana ha de considerar la expansión de las etiquetas de texto En hebreo y árabe la información se escribe de derecha a izquierda (hace falta invertir la presentación) Algunos idiomas incluyen marcas diacríticas que requieren espacio adicional Regla: permitir un 30% de expansión Guía técnica Organización de diálogos Ejemplo: Escáner Mustek Guía técnica Organización de diálogos Ejemplo: Controles de reproducción primero anterior siguiente último Izquierda a derecha último siguiente anterior primero Derecha a izquierda Guía técnica Barra de estado No se ha de llenar la barra de estado con texto La versión inglesa sólo ha de ocupar el 50% de la barra de estado Guía técnica Menús Evitar menús muy densos Límite 80 caracteres Las teclas aceleradoras coinciden con el primer carácter de una palabra. Esto puede dar problemas al traducir. Habrá que permitir que la tecla aceleradora sea otra distinta de la inicial Guía técnica Elementos culturales Dirección postal Guía técnica Elementos culturales Dirección postal - solución Dirección flexible Guía técnica Elementos culturales Objetos cotidianos ¿Qué objeto elegiremos si el perro nos pide una pelota? Guía técnica Desarrollo Documentar todos los recursos que tienen que ser localizados (y los que no) Es útil hacer dos localizaciones en paralelo para poder evaluar la internacionalización Es importante disponer de herramientas y utilidades para hacer la localización Guía técnica Ejemplo: lenguaje Java Soporta Unicode: Tiene un tipo char de 16 bits (en C++ depende de la plataforma) Posee una notación para deﬁnir un carácter Unicode constante: ‘\uxxxx’ Posee objetos predeﬁnidos Class java.util.Locale extends Object. Un objeto Locale representa un identiﬁcador de una región Conclusiones El mercado informático es global y para competir es preciso hacer programas para clientes de todo el mundo La internacionalización es una necesidad, no una opción Es preciso tenerla en cuenta desde el principio del diseño siguiendo una metodología adecuada Ejemplo de Microsoft Wikipedia Interacción persona-ordenador TEMA VI - El diseño gráﬁco Objetivos Valorar la importancia del diseño en la interfaz Conocer los principios, métodos y herramientas del diseño Contenido Objetivos de un buen diseño de la interfaz Elementos morfológicos de la imagen Uso del color Técnicas de diseño gráﬁco Iconos Ejemplos Objetivos del diseño Crear una interfaz transparente No obstruye el acceso El usuario tiene una buena experiencia interaccionando con el sistema La interfaz casi no es detectada Objetivos del diseño ¿Cómo conseguirlos? Considerar cada aspecto con un sentido del conjunto Conjuntar el diseño funcional y el visual Los controles deben tener un aspecto acorde a su función y funcionar de acuerdo con su aspecto Cuando el diseño visual aclara sus funciones, la interfaz resulta intuitiva Contenido Objetivos de un buen diseño de la interfaz Elementos morfológicos de la imagen Uso del color Técnicas de diseño gráﬁco Iconos Ejemplos Elementos de la imagen Para representar algo utilizamos unos elementos que constituyen un alfabeto gráﬁco. Estos elementos son: El punto La línea La forma La luz El color El tiempo El tamaño El formato La composición Elementos de la imagen: El punto El elemento más simple Posee una gran fuerza atractiva como marca Su situación puede establecer los ejes básicos de la estructura Varios puntos juntos se perciben agrupados creando formas Una secuencia de puntos puede imprimir ritmo a la imagen, creando una dirección de movimiento Ayuda a dirigir la visión del observador Elementos de la imagen: La línea Organizan el espacio Determinan ejes que delimitan zonas de atracción Pueden crear texturas, profundidad y movimiento Su dirección y grosor les da una expresividad Elementos de la imagen: La forma Deﬁne una superﬁcie con unas dimensiones dadas Formas básicas Cuadrado, triángulo y círculo Función: deﬁnir y organizar el espacio Pueden simular tridimensionalidad cuando se representan en perspectiva Elementos de la imagen: La luz Contribuye a la composición de la escena Puede sugerir profundidad y tridimensionalidad Puede modelar formas, superﬁcies y volúmenes Una característica importante es la tonalidad, que incide en la captación de las formas: Un tono claro parece más claro cerca de un tono oscuro y viceversa Un tono claro se expande rodeado de uno oscuro Un tono oscuro se comprime rodeado de uno claro Elementos de la imagen: El color Características: Tonalidad o matiz: longitud de onda Saturación o intensidad: cantidad de color: Mucha saturación = vividez Poca saturación = blanco y negro Luminosidad o claridad: cantidad de luz que reﬂeja Sistemas de color: Aditivo: combina radiaciones de distinta longitud de onda Utilizado en las pantallas electrónicas Sustractivo: combina pigmentos cian, magenta y amarillo Utilizado en el papel Elementos de la imagen: El color Papel del color en la imagen: Contribuye a la recreación del espacio Ayuda a simular la profundidad (sombreado) Sugiere distancia (difuminación progresiva del tono) Ayuda a dinamizar la composición a través de la interacción de los colores Los colores claros son excéntricos y los oscuros concéntricos Los colores saturados producen un fuerte impacto y se relacionan con sensaciones dinámicas y alegres. Los colores no saturados transmiten sensaciones débiles y más sutiles El color transmite “sentimientos” Hay colores cálidos y fríos, ligeros y pesados, tristes y alegres La percepción del color es subjetiva y depende de factores culturales Elementos de la imagen El color Formas de relación dinámica entre los colores: Armonía: crea una composición con variaciones cromáticas suaves y graduales relacionando colores aﬁnes Contraste: yuxtapone colores diferentes entre sí, fundamentalmente colores complementarios: Rojo-verde, amarillo-violeta, azul-naranja La composición llama fuertemente la atención Si es muy acentuado puede reducir la legibilidad al producirse vibración Es necesario conocer las relaciones cromáticas para combinar correctamente los colores Elementos de la imagen: El tiempo Se puede simular el paso del tiempo en imágenes ﬁjas, organizando adecuadamente el espacio: Usando diferentes intensidades lumínicas, contrastes cromáticos, de textura, de escala... Jerarquizando los elementos representados, ordenándolos según una cierta secuencia Elementos de la imagen: El tamaño El tamaño establece un peso visual y una jerarquización en cuanto al espacio ocupado por el elemento Ayuda a crear sensación de profundidad mediante la perspectiva Elementos de la imagen El formato Es la proporción del cuadro donde se muestra la imagen Debe favorecer la adaptación al campo visual humano, buscando una armonía entre las dimensiones Inﬂuye decisivamente en la composición general y le da un signiﬁcado Los formatos horizontales son más estáticos Los formatos verticales y circulares son más dinámicos Elementos de la imagen: La composición Es la forma de ordenar y organizar los elementos morfológicos de la imagen en el espacio estructural que ofrece el formato Principios: unidad y claridad Se puede crear diversidad y contraste para añadir dinamismo, aunque complica la composición Hay que delimitar claramente el centro de interés, el que atraerá la mirada del espectador, y que depende de la composición Elementos de la imagen La composición Algunas reglas de composición: La zona inferior suele ser más estática y sólida y la superior más dinámica y llamativa La zona izquierda es más estable y permite colocar pesos mayores sin desequilibrar A mayor tamaño, mayor peso compositivo Contenido Objetivos de un buen diseño de la interfaz Elementos morfológicos de la imagen Uso del color Técnicas de diseño gráﬁco Iconos Ejemplos Uso del color: Motivación Es un componente principal de las GUI (Graphical User Interface) El color tiene un gran impacto en la presentación de información Si

Document Details

Tags

Related

Full Transcript

Upgrade to continue