Contenidos. Modelo en Cascada. Ingeniería de Software. Usability Engineering. Proceso de Diseño de Interfaces

Transcripción

1 Contenidos Introducción a Human-Computer Interaction Análisis, Diseño y Construcción Prof. Dra. Silvia Schiaffino Prof. Mg. Alfredo Teyseyre ISISTAN sschia@exa.unicen.edu.ar teyseyre@exa.unicen.edu.ar Ingeniería de Software Usability Engineering Proceso de Diseño de Interfaces Análisis Diseño Construcción 2 Modelo en Cascada La ingeniería de software estudia el proceso de desarrollo del software o su ciclo de vida Requirements specification Architectural design Software Engineering Detailed design Show how activities are related to each other Lifecycle models are: management tools simplified versions of reality Coding and unit testing Integration and testing Many lifecycle models exist, for example: from software engineering: waterfall, spiral, JAD/RAD, Microsoft, agile from HCI: Star, usability engineering 4 Operation and maintenance

2 El ciclo de vida para Sistemas Interactivos La usabilidad involucra todas las etapas del ciclo de vida, no es una actividad aislada feedback! Spiral model (Barry Boehm) Important features: Risk analysis Requirements specification Prototyping Iterative framework so ideas can be checked and evaluated Architectural design No se puede asumir una secuencia de actividades como en el modelo en cascada Detailed design Explicitly encourages considering alternatives Coding and unit testing Integration and testing Operation and maintenance 5 A simple interaction design model Exemplifies a user-centered design approach Good for large and complex projects but not simple ones 6 The Star lifecycle model Suggested by Hartson and Hix (1989) Important features: Evaluation at the center of activities No particular ordering of activities; development may start in any one Derived from empirical studies of interface designers 7 8

3 ISO Usability Engineering 9 Usability Engineering Ciclo de vida Usability Engineering Proceso iterativo para mejorar la usabilidad de un sistema Conjunto de actividades que se desarrollan durante todo el ciclo de vida del producto, con especial énfasis en las etapas tempranas antes que la interfaz ha sido diseñada DESIGN IMPLEMENT Pre-diseño La usabilidad mide la calidad de la experiencia del usuario cuando interactúa con un producto o sistema Diseño USE & EVALUATE Análisis Competitivo 3. Definir los objetivos de usabilidad 4. Diseño paralelo 5. Diseño participativo 6. Diseño coordinado de la interfaz completa 7. Aplicar principios de diseño 8. Prototipación 9. Evaluación de usabilidad (Inspección y Testing) 10. Diseño iterativo Post-Diseño 1. Conocer al usuario 11. Recolectar información del uso del sistema 12

4 Ciclo de vida Usability Engineering Contexto Contexto: tipos de usos,aplicaciones El primer paso consiste en el estudio de los usuarios y el uso del producto 1. Conocer al usuario Observar a los usuarios en el ambiente de trabajo: Características individuales de los usuarios: Análisis de tareas: clasificar a los usuarios por experiencia, nivel educacional, edad, entrenamiento previo, etc. objetivos globales de los usuarios, enfoque actual, información necesaria, excepciones, etc. Restricciones técnicas - equipamiento, SO, memoria, disco.. Cliente toma decisión de compra (no necesariamente el mismo que el usuario) razón funcional de la tarea: porqué necesita realmente ser realizada? Impacto en el Diseño como cambiarán los usuarios al utilizar el sistema 13 El Usuario Costos y tiempos Evolución del usuario y la tarea: Análisis funcional: visitas al sitio de trabajo, observación no intrusiva, entrevistas Sistemas críticos(vida) Industrial, comercial, militar, científico Oficina, hogar, entretenimiento Cooperativo 14 Análisis de Tareas Physical attributes (age, gender, size, reach, visual angles, etc ) Physical work places (table height, sound levels, lighting, software version ) Hablar y observar a los usuarios (no los clientes) realizando sus tareas Listar cada una y todas las tareas Descomponer las tareas en pasos ABSTRAER en tareas estándar (monitorear, diagnosticar, predecir, controlar, recibir, decidir, calcular, etc.) Asignación de Funcionalidad Perceptual abilities Cognitive abilities Personality and social traits Cultural and international diversity (languages, dialog box flow, symbols ) Special populations, (dis)abilities (hearing, vision, heat sensitivity ) (memory span, reading level, musical training, math ) (likes, dislikes, preferences, patience ) Considerar el sistema completo Decidir quien o que es mas adecuado para realizar cada tarea o paso sistema recuerda id de login y el usuario el password Tener en cuenta hardware, software, capacidades humanas, cultura, protocolos de comunicación, privacidad, etc. Restricciones de Asignación: efectividad, Cognitivas; Costos; Obligatorias... No olvidar sus implicancias durante el diseño 15 16

5 Ciclo de vida Usability Engineering La prototipación es un aspecto importante del proceso y en consecuencia la existencia de productos de la competencia son a veces los mejores prototipos de nuestro propio producto. Ciclo de vida Usability Engineering Priorizar los aspectos de usabilidad en base al análisis de los usuarios y sus tareas. 3. Definir los objetivos de usabilidad 2. Análisis competitivo Decidir previamente las métricas de usabilidad a priorizar y su nivel deseado Ej. Errores por hora Análisis competitivo de sistemas similares Análisis heurístico de productos de la competencia Tomar inteligentemente ideas de otros sistemas forma de trabajo, problemas, ventajas, ideas, etc. Mínimo Inaceptable Objetivo 3 Actual no implica robar los diseños de las interfaces de los productos.. Se espera realizar un mejor trabajo como resultado del análisis de fortalezas y debilidades 2 Planeado Excede 1 0 Optimo Análisis de impacto financiero: estimar los ahorros previstos como consecuencia de satisfacer los objetivos de usabilidad.la usabilidad involucra distintos aspectos que pueden entrar en conflicto 17 Ciclo de vida Usability Engineering Generalmente es una buena idea comenzar el diseño con un proceso de diseño paralelo en el cual diferentes diseñadores realizan diseños preliminares 18 Ciclo de vida Usability Engineering En vez de adivinar lo que quieren los usuarios, usuarios, los diseñadores deberían tener acceso a un conjunto representativo de los usuarios 4. Diseño paralelo Explorar alternativas de diseño: los diseñadores deberían trabajar independientemente, luego comparan diseños Aunque previamente se conoció al usuario puede que todavía no se sepa lo suficiente para definir ciertos aspectos del diseño Tener acceso a un conjunto de usuarios representativos Discusión guiada de prototipos, dibujos en papel, diseños en pantalla, etc. con usuarios representativos Los usuarios no son diseñadores Sesiones de brainstorming con el equipo completo 5. Diseño participativo ingenieros diseñadores gráficos especialista en usabilidad algunos usuarios Representativos Variante: diseño paralelo diversificado No esperar que se les ocurran ideas desde cero Los usuarios pueden ser buenos evaluando diseños concretos que no les gustan o que en la practica no van a funcionar Es una forma económica de explorar alternativas 19 20

6 Ciclo de vida Usability Engineering Ciclo de vida Usability Engineering Se debe lograr la consistencia en todos los medios que conforman la interfaz del usuario Aplicar principios y consejos generales acerca de las características de usabilidad de las interfaces 6. Diseño coordinado de la interfaz completa Consistencia a lo largo de la interfaz total: documentación, ayuda en línea, tutoriales, videos, clases de entrenamiento, pantallas y diálogos Utilizar: 7. Aplicación de principios de diseño Pueden ser listas muy extensas (ej. Smith & Mosier, 944 guias) Diferentes niveles: generales (aplicable a todas las interfaces) categoría del producto (interfaz basada en ventanas o en voz) específicos del producto (desarrollos previos) estandares de interfaces: reglas específicas acerca de la presentación y comportamiento de la interfaz bibliotecas de widgets Principios: proveen indicaciones acerca de características de usabilidad de la interfaz. Estándar: especifica como la interfaz del usuario debe ser Promover consistencia en familias de productos 21 Ciclo de vida Usability Engineering Ejemplo: (Smith & Mosier) Ej. Los usuarios deben poder volver a un estado previo del sistema Ej. Debe estar siempre disponible un comando undo que se muestra como un icono en la parte superior derecha de la pantalla. 22 Ciclo de vida Usability Engineering Realizar una evaluación de usabilidad tan pronto como sea posible en el ciclo de diseño, construyendo y evaluando prototipos 1.3 DATA ENTRY: Text 1.3/1 Adequate Display Capacity Ensure that display capacity, i.e., number of lines and line length, is adequate to support efficient performance of text entry/editing tasks. 8. Prototipación Tipos de prototipos: Verticales: funcionalidad en profundidad, para unas pocas características seleccionadas Horizontales: características de interfaz completas, pero sin funcionalidad subyacente Escenario: sólo se muestran algunas características y funcionalidad a lo largo de un escenario predefinido de la interfaz Example: For text editing where the page format of subsequent printed output is critical, the user's terminal should be able to display full pages of text in final output form, which might require a display capacity of lines or more. Example: For general text editing where a user might need to make large changes in text, i.e., sometimes moving paragraphs and sections, a display capacity of at least 20 lines should be provided. Example: Where text editing will be limited to local changes, i.e., correcting typos and minor rewording, as few as seven lines of text might be displayed. Comment: A single line of displayed text should not be used for text editing. During text editing, a user will need to see some displayed context in order to locate and change various text entries. Displaying only a small portion of text will make a user spend more time moving forward and back in a displayed document to see other parts, will increase load on the user's memory, and will cause users to make more errors. Reference: Elkerton Williges Pittman Roach 1982 See also: 1.3/ La base de la prototipación es el ahorro de tiempo y dinero desarrollando algo que puede ser testeado con usuario reales. 24

7 Ciclo de vida Usability Engineering Determinar si se han satisfecho los objetivos de usabilidad Ciclo de vida Usability Engineering..En base a los problemas y posibles mejoras expuestos en la evaluación es posible producir una nueva versión de la interfaz. Inspección de usabilidad Test de usabilidad 10. Diseño iterativo Clasificar la importancia de los problemas de usabilidad descubiertos Arreglar los problemas y producir una nueva versión de la interfaz 9. Evaluación de usabilidad Inspección del diseño de la interfaz utilizando heurísticas (sin testeos con usuarios) Test empírico del diseño de la interfaz con usuarios reales... Los beneficios de utilizar algún método razonable de evaluación pueden ser mucho mayores que si se desarrolla con el método correcto pero sin evaluación. evaluación. Indicar las razones por las cuales se realizó un diseño Evaluar la nueva versión de la interfaz Los cambios introducidos para resolver ciertos problemas de usabilidad pueden fallar o incluso introducir nuevos problemas. Diseñar, testear, rediseñar, Ciclo de vida Usability Engineering El registro de las decisiones de diseño es central en el proceso de desarrollo iterativo y también para futuras versiones del producto 10. Diseño iterativo Ciclo de vida Usability Engineering Durante el uso real del sistema se pueden recolectar datos de usabilidad que resultan de gran importancia para nuevas versiones Registro 11. Recolectar información del uso del sistema Escrito Hipertexto 26 Estudios de campo específicos entrevistas, cuestionarios, observación Estudios de marketing Datos recolectados por el propio sistema (archivos log ) Analizar las quejas de los usuarios, pedidos de modificaciones, reportes de bugs, etc

8 System Centered Design Proceso de Diseño de Interfaces Diseño centrado en el usuario 30 What is a user-centered approach? User-centered approach is based on: El diseño centrado en el usuario es un enfoque para el desarrollo de sistemas interactivos que se focaliza en lograr sistemas usables y confiables para sus usuarios Diseño para los usuarios Involucra a los usuarios como parte integral del equipo de diseño Feedback de los usuarios Test iterativo de las ideas y prototipos Requiere que el equipo de diseño incluya especialistas en usabilidad No implica delegar la responsabilidad de la interfaz en los usuarios 31 Early focus on users and tasks: directly studying cognitive, behavioral, anthropomorphic & attitudinal characteristics Empirical measurement: users reactions and performance to scenarios, manuals, simulations & prototypes are observed, recorded and analysed Iterative design: when problems are found in user testing, fix them and carry out more tests 32

9 Principales Fases Four basic activities There are four basic activities in Interaction Design: Identifying needs and establishing requirements Developing alternative designs Building interactive versions of the designs Evaluating designs 33 Importance of involving users UCD es un proceso iterativo cuyo objetivo es el desarrollo de sistemas usables, usables, que promueve la participación de los potenciales usuarios durante el desarrollo Análisis Comprensión de los usuarios, tareas y objetos de la futura interfaz Requerimientos de la interfaz Diseño Definición de la forma de la interfaz Estructura (objetos y acciones) de la interfaz Construcción Creación y test de los prototipos Detección de problemas de usabilidad Documentación del prototipo, para su implementación por el equipo de desarrollo 34 Principales Fases UCD identifica problemas de usabilidad en etapas tempranas del desarrollo reduciendo así la necesidad de modificaciones costosas en las ultimas etapas. Expectation management Realistic expectations No surprises, no disappointments Timely training Communication Ownership Make the users active stakeholders More likely to forgive or accept problems Can make a big difference to acceptance and success of product 35 Análisis Comprensión de los usuarios, tareas y objetos de la futura interfaz Requerimientos de la interfaz Diseño 36

10 UCM Mobile Application Each project may use slightly different process... Proceso de Diseño de Interfaces Análisis The most important aspect of the design process is to provide the user with the real usage context. For mobile phones this means users need to be able to touch the buttons and see software that feels like it is actually working. 37 Análisis What are needs? Identifica las tareas, información, conceptos, y terminología utilizada por los usuarios Propósito: Documentar y verificar la información acerca de: Usuarios Forma de trabajo actual Forma de trabajo esperada con el nuevo sistema Perfiles de los usuarios Análisis de las tareas actuales Descripciones de las tareas futuras Especificaciones de usabilidad Escenarios de casos de uso Instead, look at existing tasks: what information do they require? who collaborates to achieve the task? why is the task achieved the way it is? Envisioned tasks: Equipo de Análisis Diseñador de interfaces Usuarios / especialistas en el dominio Personal técnico can be rooted in existing behaviour Users can t tell you what they need to help them achieve their goals their context Resultados: Users rarely know what is possible can be described as future scenarios 39 40

11 Como: Obtener, Organizar y Representar Entrevistas, observación, surveys/cuestionarios, documentación, inmersión Organizar datos Obtener datos acerca de los usuarios y las tareas desarrolladas Obtener Datos Metodos de Analasis Notas, tarjetas, brainstorming, computer tools Representar datos Listas, matrices Narrativas Jerarquías, Redes, Diagramas de Flujo 41 Etnografía Observar a la gente en su contexto cultural El comportamiento solo tiene sentido en el contexto Objetivo: Comprender el usuario Comprender objetivos y valores Comprender interacciones individuales o grupales dentro de una cultura Tratar de hacer explicito conocimiento tácito del dominio Para diseñadores: mejorar el sistema descubriendo problemas en la forma actual en que esta siendo usado Observación en persona Grabaciones Audio/video Entrevistas Observación -( thinking out loud) Evaluación Cooperativa Entrevistas Cuestionarios Focus groups Estudio de la Documentación Analizar productos de la competencia 42 Se debe observar cuidadosamente todo acerca de los usuarios y su ambiente Pensar como si se debiera describirlo a alguien que nunca vio la actividad Lo que dicen los usuarios es importante Elementos de interés para el evaluador Estructura y lenguaje utilizado en el trabajo Acciones individuales y grupales Aspectos culturales que afectan el trabajo Aspectos explícitos e implícitos del trabajo Herramientas: Etnografía - (learn by immersion/doing) La Observación es Clave Estudio Contextual en profundidad Estar inmerso en el ambiente en el cual uno quiere estudiar Algunos (No todos) Métodos de Análisis de usuarios y tareas Ejemplo: Ambiente de oficina 43 Prácticas del negocio, cuartos, artefactos, estándares de trabajo, relaciones entre trabajadores,... 44

12 Pasos Etnografía 1. Preparation Pasos Etnografía Understand organization policies and work culture Familiarize yourself with system and its history Set initial goals and prepare questions Gain access and permission to observe & interview 2. Field study 3 Analysis Establish rapport with users Observe/interview users in workplace and collect all different forms of data (lots of video is very common) Do it (the work) Follow any leads that emerge from visits Record the visits Compile collected data in numerical, textual and multimedia databases Quantify data and compile statistics Reduce and interpret data Refine goals and process used 4 Reporting Consider multiple audiences and goals Prepare a report and present findings Rose et al Write down each quote/observation on a slip of paper Cards are notes from interviews, focus groups, etc. Put up on board Coalesce items that have affinity Give names to different groups (colors too) Continue grouping subgroups A hierarchy will be formed Card sorting also useful for web site organization 47 Discovers things that are outside of job description or documentation Allows you to play role of end-user better Help to define requirements Uncovers true nature of user s job If they are saying similar things about an issue Can help designer gain a rich and true assessment of user needs 46 Why is Ethnography Useful? Affinity Diagram Can sit in when real users not available Open-ended and unbiased nature promotes discovery Empirical study and task analysis are more formal ethnography may yield more unexpected revelations 48

13 Types of Findings Drawbacks of Ethnographic Methods Can be both Qualitative Observe trends, habits, patterns, Quantitative How often was something done, what percent of the time did something occur, how many different Time required Scale 49 Observation - Thinking Out Loud Highly qualitative, may be difficult to present/use Acquired skill learn by doing Most use small numbers of participants just to keep somewhat manageable Type of results Can take weeks or months for large systems Identifying and extracting interesting things is challenging 50 Cooperative (Participative) Evaluation Sit with user doing activity of interest to you Sit with user doing activity of interest to you Encourage user to verbalize what they are thinking Talk with user as the do their activity Video or audio record (with permission) Not everyone is good at this Hard to keep it up for long time while also doing something; need breaks 51 Why are you doing that? How did you know the result was what you wanted? Are there other ways to achieve the same goal? How did you decide to do things this way? Relaxed version of thinking out loud Ask questions Observer and participant can ask each other questions 52

14 Interviews Semi-Structured Interviews Structured Just the facts Efficient Require training Predetermine data of interest - know why you are asking questions - don t waste time Plan for effective question types Unstructured A conversation Under what conditions do you perform task x? No training What do you do before you perform? What information do you need to? Whom do you need to communicate with to? What do you use to? What happens after you? What is the result or consequence of? What is the result or consequence of NOT? Semi-structured start with focused questions, move to open-ended discussion Good balance Often appropriate 53 Typical Open-Ended Questions Why do you perform task x? Inefficient How do you perform task x? Why do you do this (whatever the task is you are studying) How do you do this? Gets at task-subtask structure Then ask about each subtask Why do it this way rather than some other way? Attempts to get user to explain method so you can assess importance of the particular way of doing task What has to be done before you can do this? To understand sequencing requirements Please show me the results of doing this Do errors ever occur when doing this? If answer is yes, then learn why occur How do you discover the errors, and how do you correct them? Encourage digressions; ask for elaborations What else should I have asked you? (Adapted from Nielsen et al, CHI 86) 55 See Gordon & Gill, 1992; Graesser, Lang, & Elofson, Domain Expert Interviews- Study Documentation Domain Expert Interviews Expert describes how it should be done (not necessarily how it is done) Study Documentation Similar in some ways to the expert interview Often describe how things should be done rather than how they are done Try to understand why not done by the book 56

15 Questionnaires General criteria Make questions clear and specific Ask some closed questions with range of answers Other Typical Questions Do test run with one or two people Example: Seven-point Likert Scale 1. I felt that the computer agent s help was worthwhile I found the computer agent to be intrusive I found the computer agent's help to be distracting Strongly Strongly Disagree Agree List the pieces of information you need to have before making a decision about X, in order of importance Are there any other points you would like to make? (open-ended opinion question; good way to end) Same questions can be used in interview and in questionnaire; difference is in follow-up opportunity Strongly Strongly Disagree Agree 57 Use several different groups with different roles or perspectives And to separate the powerful from those who are not Careful about few people dominating discussion Use structured set of questions 58 Look at Competitive Products Group of individuals - 3 to 10 Strongly Strongly Disagree Agree Focus Groups List the four most important tasks that you perform (this is an open question) Strongly agree, agree, neutral, disagree, strongly disagree Could also use just words Rank the importance of each of these tasks (give a list of tasks) Sometimes also have a no opinion option, or other answer option Evaluation Questionnaire Please complete the following questionnaire by indicating how strongly you agree or disagree with the following statements. Your responses will be kept confidential and will be used only for improving the interface that you worked with in this experiment. Looking for both good and bad ideas Functionality UI style Do user task performance metrics to establish bounds on your system More specific at beginning, more open as progresses Allow digressions before coming back on track Relatively low cost, quick way to learn a lot Audio or video record, with permission 59 60

16 Which Methods to Use? Depends on Identifica las tareas, información, conceptos, y terminología utilizada por los usuarios Resources Current knowledge of tasks and users Context Proceso de análisis Can t use talking out loud if tasks involve two people working together Essential to use some methods Not likely you will use all methods 61 Identificar estado actual y alcance Se debe diseñar para los usuarios. Los programadores no son los usuarios Alcance: Tareas de alto nivel: Punto de partida para el trabajo de análisis Ej. Escribir cheques bancarios,efectuar balances de cuentas bancarias, registrar depósitos, Definir perfiles de los usuarios Alcance: actividades que permitirá efectuar la interfaz Identificar estado actual y alcance Definir los perfiles del usuario Obtener datos Documentar tareas actuales Documentar problemas y oportunidades Describir las tareas futuras Definir especificaciones de usabilidad Desarrollo de escenarios con casos de uso Testing Identificar restricciones de la interfaz Hardware y software disponible, características del proyecto, requerimientos particulares Ejs. Tipo de monitores disponibles, Plataformas, Estándares de diseño de la empresa Describir claramente las características de los usuarios Una clasificación experto / novato / frecuente / infrecuente no es suficiente Considerar Aplicación Check-Ease : Restricciones de Diseño de la Interfaz IBM PC 486 o superiores (clones). Progresivamente, se cambiarán por computadores portátiles Modems con velocidades de bps. Monitores EGA y VGA. Resolución mínima 640 x 480. Pantallas color y monocromáticas Seguir las guías de MS Windows Experiencia con los ambientes de software y hardware a utilizar Experiencia previa de los usuarios en la realización de las tareas Frecuencia de uso esperada Cultural factors - Uses of icons, colors, words, metaphors more later Attitude, morale, willingness to change, motivation, reading level, typing skill, education, frequency of use, training, color-blindness, handedness, gender, 64

17 Definir perfiles de los usuarios User Characteristics + Persona Aplicación: Control de Cheques para PCs Potenciales usuarios: adultos, actualmente utilizando PCs, MS Windows 95, y una cuenta bancaria Experiencia con el Hardware: 100% tiene una PC (o clon). No se comprarán equipos para esta aplicación. Experiencia con el software e interfaz: Más del 90% está utilizando una aplicación MS Windows95, tal como un procesador de texto o planilla de cálculo. Los usuarios no comprarán ni necesitarán aprender W95 para esta aplicación Menos del 50% ha utilizado anteriormente un modem Experiencia con aplicaciones similares: Menos del 15% está utilizando otra aplicación electrónica de control bancario Experiencia en las tareas: Todos tienen una cuenta bancaria Probablemente sólo el 40% efectúa controles de sus cuentas, los usuarios no son banqueros ni contadores Actualmente, menos del 10% efectúa un control electrónico del banco desde su casa Frecuencia de uso: desde muy baja (cada 2 meses) a baja (2 veces por mes) Requerimientos clave de la interfaz sugeridos por el perfil: Seguir el estilo de interfaz W95 La facilidad de aprendizaje será importante Construirla de acuerdo al modelo mental actual de los controles manuales Proveer un modelo intuitivo para los aspectos del modem No suponer una alta comprensión de los procedimientos de control de su cuenta bancaria 65 Description of user and what user wishes to do Be specific/detailed, even give names and picture Three personas for ATM usage follow Adapted from User Interface Design and Evaluation, The Open University Felix is 13 and gets pocket money each week. He spends it with his friends, so doesn t make regular deposits. He does receive gifts for his birthday, Christmas, etc. and saves that money for special purchases, such as a computer games console or trendy clothes. He has an ATM card allowing him to make withdrawals when needed for his purchases. Marvin is 68 years old, and his social security is deposited into his bank account at the start of each month. He goes to the bank every week, withdrawing enough cash for the week - for miscellaneous expenditure. Regular bills are paid by check. He stands in line for a live teller, as he prefers the social interaction to using an ATM, even though his new artificial hip makes standing in line uncomfortable. Characterizing Users 66 Definir perfiles de los usuarios From User Interface Design and Evaluation, The Open University 67 68

18 Definir perfiles de los usuarios Design Goals User Design goal Low motivation, discretionary use High motivation, due to interest Experience Task 69 Job & Task Implications Frequency of use High - Ease of use Low - Ease of learning & remembering Task implications High - Ease of use Low - Ease of learning System use Mandatory - Ease of use Discretionary - Ease of learning Job Characteristics Mission critical, Life and safety, High stress environment, High mental workload...? Environment Lighting levels / directions, Noise level,temperature,standing / sitting...? 71 Ease of learning Power, ease of use Design goal Computer low low high high low high high low Many syntactic and semantic prompts Efficient commands, concise syntax Semantic help facilities Lots of syntactic prompting 70 Obtener datos Obtener datos acerca de los usuarios y las tareas desarrolladas Entrevistas a los los usuarios en su lugar de trabajo Alternativa no muy costosa Peligros en la descripción de los usuarios: Simulación de la forma de trabajo con los usuarios ( role playing ) Muy simplificada Información no presente Demasiado nivel de detalle Diferentes interpretaciones Puede brindar información adicional No se trata exactamente de la situación real, por lo que puede tener los mismos inconvenientes de las entrevistas Estudios de campo Observación de usuarios reales en el lugar de trabajo Forma más completa y rápida de obtener los datos Permite observar el contexto de trabajo» Ambiente físico, stress, distracciones, ruido, iluminación Consideraciones: Definir claramente los propósitos de la observación Planificar claramente las posibles preguntas con los usuarios Posibilidad de utilizar videos No perturbar, distraer o incomodar a los usuarios en el estudio Solamente recoger datos. No pensar en la posible interfaz! 72

19 Análisis de Tareas Análisis de Tareas Considerar tres componentes claves al analizar como la gente trabaja Actividades Artefactos Relaciones No Solo orientados a sistemas Estudiar procesos relacionados y objetos del medio ambiente que la gente puede utilizar Ambiente oficina - documentos, pizarrones, Llamados telefónicos - guias, libros de notas, 73 Comprender la forma en la que los usuarios llevan a cabo sus tareas, y el modelo mental que tienen de las mismas Físicas Cognitivas Comunicación Condiciones en que las tareas son realizadas Resultados/salidas de las tareas Requerimientos para realizar la tarea Información Comunicación con otros Equipamiento 74 Documentar las tareas actuales Tareas & Subtareas Cuales son practicas, métodos, pasos, objetos, Aprender que hacen los usuarios, porque lo hacen, como lo hacen, cuando lo hacen, con que herramientas o gente lo hacen. El sistema UI puede cambiar las tareas, especialmente el como Comprender como pueden llevar a un conocimiento mas profundo y facilitar la comprensión Análisis de Tareas Focalizar esfuerzos en comportamientos observables Descripción de tareas manuales, automatizadas o combinadas Para cada tarea debe describirse: Debe Debería Puede Excluye 75 Nombre de la tarea Flujo de tareas (precedentes, siguientes, posibles interrupciones) Dependencias con otras tareas Frecuencia de la tarea Información con la que trabajan los usuarios en la tarea Documentos y herramientas necesarias para efectuar la tarea Elementos resultantes de la tarea Errores y problemas típicos en la tarea Terminología y conceptos Comentarios de los usuarios acerca de la forma en que llevan a cabo la tarea Características del ambiente de trabajo en el que se realiza la tarea 76

20 Documentar las tareas actuales Hierarchical Task Decomposition Descripción de las tareas desde la perspectiva del usuario. usuario. Goals what the user wants to achieve Tasks do these to achieve the goals Diagramas Descripción detallada de las tareas actuales Muestran principalmente el flujo dentro de la tarea, aunque restringe la cantidad de texto que puede incluirse 77 Create new document before entering text Multiple occurrences of tasks Subtasks lower-level tasks Fixed sequence,optional tasks, Waiting events, Cycles, Time-sharing, Discretionary The lowest-level subtasks get mapped onto one or several UI commands Sequential dependencies i.e., move done by a copy followed by a paste 78 Documentar las tareas actuales Task Model - Borrow Book Sequences added as annotations Can also show hierarchy as indented text Goal Tasks to complete goal Descripción de las tareas desde la perspectiva del usuario. usuario. Tablas Documenta todos los datos necesarios para crear la interfaz Frecuencia, Información necesaria, Información ingresada por el usuario, Comentarios Ej. Control de cheques Subtasks to carry out one task #Tarea Tarea 1.0 Controlar cheques 1.1 Encontrar cheque 1.2 Ingresar nuevo cheque Frecuencia Requisitos de datos en pantalla Requisitos de entrada Comentarios Alta # de cheque Fecha Propósito Cantidad Resumen de cuenta del banco Recorrer el resumen de cuenta El Feedback de datos ingresados # de Cheque Fecha Propósito Cantidad Cobrado? Baja ó Modera-da From Interaction Design, Preece Rogers and Sharp resumen está ordenado por número de cuenta, los usuarios pueden buscar por otros parámetros Todos los bancos usan el mismo formato: Fecha-NroCantidad? Los usuarios prefieren que los cheques estén ordenados numéricamente

21 Documentar las tareas actuales Descripción de las tareas desde la perspectiva del usuario. usuario. Bosquejos Task Model as an Outline Lists, outlines, matrices Muestra una vista de alto nivel del trabajo actual No proporcionan muchos detalles Útiles para resumir la forma de operación de la tarea Forma visual de representar el ambiente y la localización de los usuarios al realizar las tareas 81 Task Model as a Narrative Describe tasks in sentences Often expanded version of list or outline More effective for communicating general idea of task Not effective for details branching tasks parallel tasks GREAT as introduction to diagrams or outlines Using a lawnmower to cut grass Step 1. Examine lawn Use expanding/collapsing outline tool Add detail progressively Know in advance how much detail is enough Can add linked outlines for specific subtasks Good for sequential tasks Does not support parallel tasks well Does not support branching well Make sure grass is dry Look for objects laying in the grass Step 2. Inspect lawnmower Check components for tightness Check that grass bag handle is securely fastened to the grass bag support Make sure grass bag connector is securely fastened to bag adaptor Make sure that deck cover is in place Check for any loose parts (such as oil caps) Check to make sure blade is attached securely Check engine oil level Remove oil fill cap and dipstick Wipe dipstick Replace dipstick completely in lawnmower Remove dipstick Check that oil is past the level line on dipstick 82 Workflow Documents going from one person/organization to another Multiple participants in an activity Create Travel Request (Traveler) Ensure Funds Available (Accounting) Approval (Dean) Notification of Approval (Dean) Make Trip (Traveler) Complete Expense Report (Traveler) Approval (Accounting) No Funds Notification of Approval (Dean) Etc

22 Flow Charts Documentar problemas y oportunidades Flow Chart of Task Steps Descripción de los principales inconvenientes actuales en la realización de las tareas Complete, can become complex Sequential flow, branching, parallel tasks. Includes actions, decisions, logic, by all elements of the system Mature, well-known, good tools for doing it Tarea: Pago de Facturas - Problemas y Oportunidades Start Continue? Y Document Manual Operation N Input Display Si no se dispone de una calculadora, las sumas y restas deben hacerse mentalmente o manualmente El saldo actual podría no estar actualizado, hay que calcularlo previamente Proceso sujeto a errores: depende de cálculos correctos Es tedioso calcular y recalcular el saldo en cada paso La escritura manual no es buena, las personas pueden leer erróneamente el monto de un cheque Redundancia: se deben escribir los cheques, y luego repetir toda la información en el registro de cheques Sería deseable mantener un conocimiento de lo que se ha gastado en diferentes categorías (alimentación, medicina, etc.) End 85 Documentar problemas y oportunidades Asociar los problemas identificados con las descripciones de las tareas actuales Descripción de las tareas futuras Descripción en alto nivel de las tareas futuras de forma similar a la descripción de tareas actuales Diagramas o bosquejos Las tablas proporcionan un mayor nivel de detalle, no necesario en este paso Refinamiento provisto posteriormente por los Escenarios de casos de uso 88

23 Definir especificaciones de usabilidad Definir lo que se entiende por interfaz usable identificando los principales atributos de usabilidad del sistema Atributos de Usabilidad: Facilidad de aprendizaje, Eficiencia, Precisión en la tarea, Facilidad de uso Generalmente pueden ser obtenidas a partir de: Para cada atributo, identificar como será medido: Tiempo para completar una tarea Número de errores en una tarea Facilidad de uso promedio (obtenida por cuestionarios) Para cada medición, indicar los valores aceptables Características del sistema a desarrollar Problemas que intenta solucionar la interfaz a desarrollar Perfiles de los usuarios 20 minutos 2 errores 50% con nota 8 o mayor Pueden indicarse niveles mínimos, aceptables. Incluir otros elementos importantes Indicar la información que dispondrá cada usuario en la tarea Indicar documentación a proveer 89 Definir especificaciones de usabilidad Definir lo que se entiende por interfaz usable identificando los principales atributos de usabilidad del sistema Check Ease - Especificaciones de Usabilidad Facilidad de uso Luego de haber comenzado correctamente la ejecución de la aplicación Check-Ease, y registrado un cheque al menos 3 veces, el 75% de los usuarios adultos debieran poder efectuar esta tarea en 5 minutos o menos (con PCs 386) Facilidad de Aprendizaje 75% de los usuarios (adultos, con PCs 386, con experiencia en MS Windows, comprendiendo el idioma español) podrán configurar las características del modem de Check-Ease en 20 minutos o menos. 90% debiera poder hacerlo en 40 minutos o menos Facilidad de Aprendizaje Luego de un tutorial de 20 minutos, y utilizando sólo la ayuda y documentación online, el 90% de los usuarios (adultos, comprendiendo el idioma español, actualmente con una cuenta corriente bancaria, utilizando otras aplicaciones MS Windows) debieran poder pagar sus cuentas en menos de 30 minutos (primera vez) 91 Definir especificaciones de usabilidad Definir lo que se entiende por interfaz usable identificando los principales atributos de usabilidad del sistema Check Ease - Especificaciones de Usabilidad Facilidad de Aprendizaje Sin ningún tipo de entrenamiento, y utilizando solamente la ayuda y documentación online, el 90 % de los usuarios (adultos, comprendiendo el idioma español, actualmente con una cuenta corriente bancaria, actualmente usando otras aplicaciones MS Windows) debiera poder comenzar la ejecución de la aplicación Check-Ease, abrir una registro de control de cheques, y registrar un cheque en menos de 15 minutos (la primera vez) Facilidad de Aprendizaje Luego de haber completado un tutorial corto (20 minutos o menos), y utilizando la ayuda y documentación online, el 75 %de los usuarios (adultos con una cuenta corriente bancaria, efectúen o no manualmente el control de sus cheques, actualmente usando aplicaciones MS Windows, comprendiendo el idioma español) debiera poder efectuar correctamente un control de su cuenta bancaria. 90 Definir especificaciones de usabilidad Para cada atributo, identificar como será medido indicando los valores aceptables Comportamiento Medible Criterios Elementos clave Usuarios Pagar 10 facturas Menos de 30 minutos la primera vez, y 20 minutos las siguientes veces Disponibilidad de ayuda online y un tutorial de 20 minutos (y el tutorial es usado!) Dominio del español, utilizan aplicaciones MS Windows, con una cuenta corriente bancaria 92

24 Escenarios de casos de uso Usability Requirements Time to complete key tasks - min, max Time to become proficient - do given set of tasks in given time Subjective satisfaction Usability Attribute Current Worst Target Level Value Value Best Observed Value Value Proveen una vista detallada de como los usuarios interactuan con el sistema. incluyendo los pasos que este sigue para completar cada tarea Escenario de caso de uso: Pago de Facturas con cheques impresos 1. Ingreso de facturas (nombre del beneficiario y fecha de pago) en una planilla 2. Ver el nuevo saldo (saldo actual menos cada monto a pagar) 3. Decidir si existen suficientes fondos para pagar las facturas a. Si existen (80% de las veces), ir al paso 4 b. Si no existen (20%), marcar las facturas que no se pagarán (80%) o cambiar los montos de pago (20%), luego ir al paso 4 4. Indicar al sistema que pague las facturas 5. Colocar las opciones de impresión para los cheques 6. Colocar el papel de impresión de cheques en la impresora 7. Imprimir los cheques 8. Observar los cheques 9. Reimprimir los cheques si existe un problema (30% de las veces) 10. Observar el registro actualizado de la cuenta corriente bancaria (es observado 50% de las veces) 11. Generar reportes (50% de las veces). Nota: para mas detalles, ver escenario de generación de reportes. Initial Use: Time to edit a given document during first use of system Learnability: Time to edit a given document after one hour of use Time to create outline Subjective first impression Presentan desde la perspectiva de los usuarios lo que estos pueden hacer con el sistema Escenarios de casos de uso Escenarios de casos de uso Escenarios de casos de uso Description of important or frequent user interactions Used to evaluate / walkthrough various design alternatives Three elements Name User intention System responsibility Do NOT make assumptions about the UI design Los escenarios de casos de uso para diseño de interfaces deben focalizarse en las acciones del usuario Guías para el desarrollo de escenarios efectivos Escribirlos desde el punto de vista del usuario, no del sistema El escenario describe un conjunto de tareas del usuario Utilizar como fuente un listado de las tareas del usuario Incluir información acerca de la frecuencia de las tareas y subtareas Las tareas más frecuentes deben ser más fáciles de efectuar Indicar excepciones Indicar claramente las tareas críticas Escribirlos textualmente (en forma clara) Los diagramas pueden ser interpretados de distintas formas, por diferentes personas Los casos de uso convencionales (ej. Jacobson, UML) generalmente contienen una descripción las acciones realizadas por el software del sistema From User Interface Design and Evaluation, The Open University 95 96

25 Escenarios de casos de uso Escenarios de casos de uso Los escenarios de los diseñadores de la interfaz y del sistema deben ser coordinados. Los escenarios de los diseñadores de la interfaz y del sistema deben ser coordinados. Un mismo escenario puede usarse como base para el caso de uso de la interfaz y el caso de uso del sistema Cooperación entre ambos grupos de trabajo Ambos escenarios deben corresponderse entre sí Pueden diseñarse ambos escenarios al mismo tiempo (o primeramente el escenario de la interfaz) 97 Escenario de Interfaz: Pago de Facturas con cheques impresos Escenario del Sistema: Pago de Facturas con cheques impresos 1. Ingreso de facturas (nombre del beneficiario y fecha de pago) en una planilla 1. El sistema muestra los datos de cada factura: beneficiario, fecha de pago, y cantidad; el sistema muestra el saldo actual en la cuenta corriente bancaria 2. Ver el nuevo saldo (saldo actual menos cada monto a pagar) 2. El sistema recalcula el saldo, al ingresarse cada factura (si es que va a pagarse) 3. Decidir si existen suficientes fondos para pagar las facturas a. Si existen (80% de las veces), ir al paso 4 b. Si no existen (20%), marcar las facturas que no se pagarán (80%) o cambiar los montos de pago (20%), luego ir al paso 4 3. Si el usuario modifica el monto a pagar, mostrar el nuevo monto. Si el usuario elige no pagar una factura, marcarla como no seleccionada. 4. Indicar al sistema que pague las facturas 4. El sistema ingresa las facturas como una entrada en el registro de la cuenta, y recalcula el nuevo saldo Escenarios de casos de uso Test Los escenarios de los diseñadores de la interfaz y del sistema deben ser coordinados. Escenario de Interfaz: Pago de Facturas con cheques impresos Escenario del Sistema: Pago de Facturas con cheques impresos 5. Indicar las opciones de impresión para los cheques 5. Mostrar las opciones para la impresión de cheques 6. Colocar el papel de impresión de cheques en la impresora 6. Nada 7. Imprimir los cheques 7. El sistema imprime los cheques 8. Observar los cheques 8. Nada 9. Reimprimir los cheques si existe un problema (30% de las veces) 9. Alertar al usuario acerca del estado de la impresión. Permitir al usuario indicar cuales cheques deben ser reimpresos 10. Observar el registro actualizado de la cuenta corriente bancaria (es observado 50% de las veces) 10. Mostrar el registro de la cuenta bancaria actualizada 11. Generar reportes (50% de las veces). Nota: para mas detalles, ver escenario de generación de reportes. 11. Ver escenario de generación de reportes. Es importante la verificación de las actividades llevadas a cabo en el análisis Actividades: Verificar los perfiles obtenidos de los usuarios Verificar la descripción de las tareas con los usuarios Verificar las especificaciones de usabilidad Verificar los escenarios de casos de uso con los usuarios y también con los desarrolladores. 100

26 Diseño Proceso de Diseño de Interfaces Creación de una solución para los conceptos adquiridos en el análisis definiendo modelos de interfaces, metáforas, organización y apariencia general, y documentación Propósito: Diseño Construcción de un modelo conceptual de la interfaz Diseño de alto nivel (organización y apariencia) Bosquejos de pantallas con: Tareas principales, frecuentes, críticas Principales objetos del usuario Metáforas claras y usables Materialización de la forma en la que los usuarios harán su trabajo (de acuerdo a los escenarios de casos de uso) Detalles suficientes para discutir la interfaz con otras personas no involucradas en el proceso de diseño Diseño 102 Proceso de Diseño Proceso de ingeniería + Proceso artístico Resultados: Tabla Objetos-Atributos-Acciones Tabla Objetos-Metáforas-Representaciones Bosquejos de objetos y metáforas Tabla de acciones Bosquejos del diseño de alto nivel Plan de apoyo a la interfaz (entrenamiento, documentación) Equipo de Diseño 3 a 6 personas, multidisciplinario Posible composición: Diseñadores de interfaces Usuarios Personal Técnico Diseñador Gráfico Especialista en entrenamiento, soporte y documentación 103 Modelo conceptual Plan o proyecto acerca de cómo verá el usuario a la interfaz Modelo de la interfaz, no del software Provee un modelo mental acerca de cómo trabaja el sistema Identifica los objetos, acciones y metáforas que deberán ser representados en la interfaz Este modelo es luego traducido en objetos de interfaz concretos (ventanas, controles, etc.) Ej. Objetos del usuario» Formulario, Documento, Párrafos, Calculadora, Registro de cheques Ej. Objetos de interfaz» Ventana, Menú, Caja de texto, Control, Icono, Cursor 104

27 Where do alternatives come from? Humans stick to what they know works But considering alternatives is important to break out of the box Designers are trained to consider alternatives, software people generally are not Proceso de Diseño El principal objetivo de esta etapa es identificar objetos del usuario, acciones y metaforas que ayuden al usuario a comprender la interfaz How do you generate alternatives? Flair and creativity : research and synthesis Seek inspiration: look at similar products or look at very different products 105 Selección objetos del usuario Identificar cuales son los principales objetos o elementos que el usuario tendrá que manipular o tratar en la interfaz El diseño debe estar basado en estos objetos principales Identificar objetos en el análisis Identificar los objetos utilizados por los usuarios en los distintos documentos producidos en el análisis Escenarios de casos de uso Principal fuente de obtención de los objetos Generalmente sustantivos Deben considerarse solamente aquellos objetos que los usuarios necesitan ver o efectuar acciones en la interfaz Pueden existir otros objetos importantes para los desarrolladores del software, pero no para los diseñadores de la interfaz Pueden existir relaciones objeto - sub-objeto Ej. registro de cuenta bancaria / entrada en el registro de cuenta bancaria Elegir los principales objetos del usuario Seleccionar las metáforas y representaciones Bosquejar los objetos y metáforas Crear un diseño de alto nivel Test Describir el plan de apoyo a la interfaz 106 Selección objetos del usuario Identificar cuales son los principales objetos o elementos que el usuario tendrá que manipular o tratar en la interfaz Escenario de caso de uso: Pago de Facturas con cheques impresos 1. Ingreso de facturas (nombre del beneficiario y fecha de pago) en una planilla 2. Ver el nuevo saldo (saldo actual menos cada monto a pagar) 3. Decidir si existen suficientes fondos para pagar las facturas a. Si existen (80% de las veces), ir al paso 4 b. Si no existen (20%), marcar las facturas que no se pagarán (80%) o cambiar los montos de pago (20%), luego ir al paso 4 4. Indicar al sistema que pague las facturas 5. Colocar las opciones de impresión para los cheques 6. Colocar el papel de impresión de cheques en la impresora 7. Imprimir los cheques 8. Observar los cheques 9. Reimprimir los cheques si existe un problema (30% de las veces) 10. Observar el registro actualizado de la cuenta corriente bancaria (es observado 50% de las veces) 11. Generar reportes (50% de las veces). Nota: para mas detalles, ver escenario de generación de reportes.... Las interfaces sin objetos del usuario claros y obvios son difíciles de diseñar, aprender y usar

28 Selección objetos del usuario Tablas Objetos-Acciones Identificar los atributos de los objetos y las acciones del usuario en los objetos Identificar atributos de los objetos Las acciones deben estar expresadas en la terminología utilizada por los usuarios (obtenida en el análisis) Acciones del usuario Saldo actual Valor Ver Ajustar Cheque Numero Cuenta Monto Fecha Beneficiario Ver Editar Imprimir Copiar Enviar / Transferir Planilla de Facturas Fecha de creación Crear Guardar Ver Recorrer Imprimir Factura Nombre beneficiario Monto total Monto a pagar Ingresar datos Cambio de monto Borrar Pagar Construir una tabla Objetos-Acciones Objeto / Sub-objeto Atributos Acciones del usuario Registro de Cuenta Bancaria Nombre Banco Numero Cuenta Saldo actual Entradas en el registro Ver Recorrer Agregar entrada Imprimir Ordenar Entrada en Registro de Cuenta Bancaria Tipo (depósito, extracción,...) Monto Fecha Efectivizado? Notas Ver Editar Copiar & Pegar Imprimir Anular Buscar Mover 109 Metáforas La aplicación de metáforas no siempre es beneficiosa Algunas conceptos u operaciones no tienen una representación real en la metáfora ej. no existe una operación undo en un escritorio real En estos casos, la metáfora puede producir confusiones Idea is to organize information in a way to allow people to use it in the way they user information on their desktops Allow windows to overlap make the screen act as if there were objects on it Apple took it farther Quick Time Player Xerox Star Bitmapped screens made it possible Not meant to be a real desktop Reproducción electrónica de objetos del mundo real ej. Metáfora de escritorio. Started at Xerox PARC Modelo del mundo ( model world ) Algunas metáforas actuales: 110 The Desktop Metaphor Términos, imágenes y conceptos fundamentales que son fácilmente reconocidos, comprendidos y recordados Atributos Información de los objetos que los usuarios necesitan ver cuando efectúan sus tareas acciones del usuario en los objetos Objeto / Sub-objeto Waste basket, etc Microsoft took it to extremes Microsoft Bob a recognized failure (todos los sonidos se ven iguales en el preview)

29 Macintosh Desktop 113 Microsoft Bob s Livingroom Almost not a metaphor anymore! Microsoft Bob s Desktop Metaphor 114 Beyond the Desktop Robertson, George et al. "The Task Gallery: A 3D Window Manager." In Proceedings of CHI

30 Beyond the Desktop Jun Rekimoto, Multiple-Computer User Interfaces: "Beyond the Desktop" Direct Manipulation Environments, ACM CHI2000 Video Proceedings, Identify the mis-matched metaphors (from the Interface Hall of Shame) The classic (from the mac desktop) To eject a disk you drag it to the trashcan VCR buttons to control a printer?? 117 Seleccionar Metáforas y Representaciones Seleccionar representaciones visuales y conceptuales de objetos del usuario y sus acciones asociadas Seleccionar Metáforas y Representaciones Luego de seleccionar la metáfora, deben analizarse ideas para la representación de los objetos en la interfaz Si 2 objetos poseen diferente significado para los usuarios, debieran tener representaciones diferentes La representación en el software de esos 2 objetos podría ser la misma Reportes y Memos podrían ser objetos diferentes para los usuarios El sistema podría tratar internamente a ambos como archivos de texto Metáforas 118 Construir una tabla Objetos-Metáforas-Representaciones Útiles para los conceptos que no son conocidos por los usuarios Descripción de un modelo nuevo, en términos de un modelo conocido Asociación entre un elemento conocido y otro desconocido 119 Objeto / Subobjeto Metáforas Planilla de Facturas Planilla Representaciones 120

31 Bosquejar los objetos y metáforas Construir bosquejos de las potenciales representaciones de los objetos Crear un diseño de alto nivel El diseñador ya tiene un panorama de los objetos, metáforas, etc Ahora debe plasmar estas ideas Estas representaciones pueden ser ajustadas Tratar de reproducir un escenario de caso de uso, aplicando los objetos acciones, metáforas y representaciones Pueden determinar modificaciones a las decisiones tomadas 121 Crear un diseño de alto nivel Si los requerimientos del proyecto no sugieren un estilo particular, debe elegirse uno para el proyecto Guías publicadas por los proveedores de GUIs Selección y adopción de un estilo Ej. iconos Pueden utilizarse guías de estilo: ej. Open Look: agrupamiento de menúes en el mismo menú Utilizar un espacio en blanco entre grupos grandes de controles en menúes o en grupos pequeños cuando el espacio en pantalla no es un problema Ej. estilos: Macintosh, Windows, OSF Motif Los estilos suelen dejar muchos aspectos detallados del diseño a los diseñadores Open Software Foundation OSF, Open Look, MS Windows,Apple Describen el look&feel de la interfaz 122 Guías de estilo Selección y adopción de un estilo Identificar las principales ventanas Identificar las home bases y ventanas de comienzo Identificar como los usuarios acceden a las ventanas principales Asignar las acciones del usuario a las ventanas principales Crear maquetas del diseño (prototipos en papel) Revisar el diseño Características De la empresa Del tipo de aplicación Del proyecto particular son específicas de la GUI y para los widgets provistos numero alto de guías pueden no cubrir algunos principios de diseño fundamentales Ejemplo: Las aplicaciones Windows suelen colocar la función Find en el menú Edit En el Notepad, la combinación Alt+E+F no funciona

32 Crear un diseño de alto nivel Identificar las ventanas principales, principales, que generalmente, generalmente, representan a los principales objetos de las tareas del usuario o a la metáfora elegida Crear un diseño de alto nivel Identificar home bases (ventanas (ventanas)) utilizadas repetidamente por los usuarios, durante la realización de una determinada tarea Identificar ventanas principales Pueden producir la apertura de otras ventanas durante la interacción (ventanas secundarias) Suelen proveer 1 o más home bases La ventana asociada a un objeto puede contener las acciones relacionadas con dicho objeto Las acciones generalmente pueden ser efectuadas en cualquier orden Identificar home bases Proveen información significativa (contexto) al usuario Ej. Donde está el usuario, Que debe hacerse luego No son ventanas vacías, con una barra de menús Pueden existir varias (ej. una por cada tarea principal) La falta de buenas home bases suelen producir desorientaciones en los usuarios Demasiadas ventanas, información no presente en la pantalla,... Identificar ventanas de comienzo ( launching ) 125 Crear un diseño de alto nivel Identificar como acceden los usuarios a las ventanas principales Ventanas abiertas al abrirse el sistema? Principales objetos representados como iconos en un escritorio? 126 Crear un diseño de alto nivel Asignar acciones del usuario a las ventanas principales Comandos a ser asignados las ventanas Tipos Ej. representados como opciones de menús drop-down Acciones asociadas al objeto representado en la ventana Acciones típicas de los sistemas (undo, redo,...) Interfaz acción-objeto Punto de partida para una aplicación con pequeñas aplicaciones dentro de ella Cada aplicación individual necesitará una home base Ej. Abrir un editor, y luego cargar un archivo Interfaz objeto-acción Ej. Abrir directamente un archivo Más naturales para el usuario Listar acciones de ventanas y home bases La acción ver no necesita incluirse Acción Botones Toolbar Producir un reporte Abrir planilla de facturas Guardar la planilla de facturas Ingresar una nueva factura Cambiar monto a pagar Borrar una factura Menu Otro Control

33 Crear un diseño de alto nivel Crear un diseño de alto nivel Asignar acciones a menús, botones, toolbars,... Considerar: Los prototipos de baja fidelidad, limitados en funcionalidad e interacción, se construyen para delinear conceptos y diseñar alternativas Frecuencia de uso Estándares del estilo de la interfaz Soporte de teclado Crear maquetas del diseño Acción Botones Toolbar Menu Producir un reporte Abrir planilla de facturas Guardar la planilla de facturas Otro Control Documentar todas las decisiones de diseño Prototipo para intercambiar ideas Mostrar: Selección y edición en la lista Cambiar monto a pagar Selección y edición en la lista 129 Crear un diseño de alto nivel Ventana del registro de cheques La forma en que los usuarios desarrollaran las tareas comunes con la nueva interfaz Como la interfaz mostrará los objetos y acciones a los usuarios El look & feel del estilo seleccionado para la interfaz Diseños alternativos Borrar una factura 131 Ventana de comienzo de Check-Ease Objetivos: Ingresar una nueva factura Prototipos en papel o Prototipos de baja fidelidad ( lo-fi ) Selección y edición en la lista 130 Crear un diseño de alto nivel Ventana del registro de cheques 132

34 Crear un diseño de alto nivel Crear un diseño de alto nivel: Test Ventana del registro de cheques Revisar el diseño de alto nivel Testear el diseños con los escenarios de casos de uso Revisar las maquetas ante cualquier aspecto que surja Organizar reuniones con el resto del equipo Simular las tareas de los usuarios con los prototipos en papel Tratar de identificar: Problemas del diseño conceptual: objetos no reconocidos fácilmente, tareas o nombres confusos Problemas del diseño de alto nivel: organización confusa de las ventanas Obtener feedback de los participantes, No modificar el diseño en ese mismo momento Tomar nota de los comentarios y sugerencias Efectuar un test de usabilidad del prototipo en papel No construir prototipos de alta fidelidad ( en máquina ) Consume bastante tiempo Las pantallas aparecen demasiado terminadas A los diseñadores no les gusta cambiar sus diseños en máquina La discusión no se centra en el modelo conceptual de la interfaz 133 Describir el plan de apoyo a la interfaz El plan de apoyo define la mejor combinación de documentación y entrenamientos para una interfaz y sus usuarios 134 Describir el plan de apoyo a la interfaz Identificar los conocimientos y deficiencias de los usuarios para definir el apoyo necesario Listar conocimientos y experiencia Conocimiento/Experiencia que deben tener los usuarios para usar efectivamente el sistema se espera que tendrán los usuarios al usar el sistema por primera vez La interfaz no consiste solamente de las ventanas La comprensión de un prototipo no implica que los usuarios no requieran entrenamiento El apoyo a la interfaz puede tomar muchas formas: Cursos Manuales de referencia Entrenamiento en el lugar de trabajo Ayuda online Tutoriales en máquina Soporte Técnico Manual online Libros Permite determinar las deficiencias que tendrán los usuarios Fuentes de esta información: Perfiles de los usuarios Proveer los prototipos en papel a especialistas en documentación y entrenamiento Observar a los usuarios en el momento de testear los prototipos en papel Arrancar MS Windows Uso del mouse y teclado Uso de controles gráficos Instalación de Check-Ease Instalación y configuración del modem Navegación de sistemas hipertextuales Creación de un registro Efectuar una entrada en el registro Realizar reportes (etc) 135 Conexión/Desconexión con el banco Uso de teclas rápidas Manifestada por el usuario? 136

35 Describir el plan de apoyo a la interfaz Asignar las deficiencias de los usuarios a distintas alternativas de apoyo Se requiere entrenamiento (ej. Getting Started ) cuando el conocimiento es un prerequisito para el uso del sistema Las asistencias a las tareas (ej. ayuda online) proveen ayuda memoria durante el uso del sistema La documentación puede proveer descripciones globales del sistema y facilitar las acciones infrecuentes El soporte online puede ser actualizado y distribuido automáticamente El soporte offline puede ser estudiado, y utilizado ante caidas del sistema Una información podría ser provista en más de una forma Deficiencia Getting Started Ayuda Online User Guide Instalación Check-Ease Efectuar reportes 137 La mayoría de los usuarios no leen los manuales Prefieren utilizar su tiempo continuando con su tarea Generalmente, utilizados cuando los usuarios necesitan una ayuda inmediata (en pánico ) Indica la necesidad para la documentación en línea y herramientas de búsqueda Sistemas simples: Instrucciones mínimas Mayoría de los sistemas: Ricos en características Muchos usuarios desean convertirse en usuarios expertos, no usuarios casuales Los usuarios no frecuentes necesitan recordar (etc) Uso de la documentación Las ayudas no son un reemplazo para un mal diseño Conexión con el banco Instalación del modem Crear un registro Provisión de ayudas 138 Algunos tipos de ayuda Tutoriales y/o manuales getting started Guías cortas que los usuarios pueden leer cuando comienzan el uso de los SI Estimula la exploración y el conocimiento general del sistema Intenta proveer el material conceptual y la sintaxis esencial del SI Tours en línea, ejercicios y demostraciones Demuestra los principios más básicos a través de varios ejemplos de trabajo La ayuda en línea puede ser específica al contexto actual Los manuales en papel generalmente no están disponibles en el lugar correcto Muchas veces utilizados como referencia rápida Sintaxis de acciones, posibilidades,

36 Algunos tipos de ayuda Algunos tipos de ayuda Manuales de referencia Mayormente utilizados para búsquedas detalladas (por expertos) Reminders Organizados por tema Hipertexto en línea Search / find Tabla de contenidos Indices Indices cruzados Ayuda sensible al contexto Significado sintáctico/semántico de las teclas Textos sobre los iconos indicando su significado o propósito El sistema provee ayuda acerca de lo que el usuario está realizando 141 Macintosh ballon help 142 Construcción Creación de una versión mas detallada y realista de la interfaz Proceso de Diseño de Interfaces Construcción Propósitos: Crear un prototipo de mayor fidelidad Refinar el diseño y testearlo con usuarios Documentar el diseño final completo, para el equipo de desarrollo Resultados Prototipo hi-fi Descripción del diseño de la interfaz Proceso: 1. Desarrollar el prototipo de alta fidelidad ( hi-fi ) 2. Testear y revisar el prototipo con los usuarios 3. Documentar el diseño final de la interfaz (completo) 144

37 Desarrollar un prototipo hi-fi Desarrollar un prototipo hi-fi Artefactos que simulan o animan algunas, pero no todas, las caracteristicas del producto final El prototipo no necesita efectuar procesamiento de datos, pero debe permitir a los usuarios navegar e interactuar con la interfaz Objetivo: Obtener un diseño detallado de las ventanas, cajas de dialogo y controles que serán utilizados en el testing Creación del prototipo Punto de partida: prototipos lo-fi desarrollados en el diseño Completar el diseño de la interfaz Decidir la localización exacta de cada control Decidir los rótulos exactos que se utilizarán Aplicar guías y estandards de la empresa Utilizar criterios de diseño visual Modificar el contenido de las ventanas, de acuerdo a la cantidad de información presente en cada una 145 Test En un test de usabilidad final, el prototipo debe ser muy robusto, tener todas las capacidades de navegación y al menos simular algunos datos. No es necesario prototipar todas las pantallas y cajas de diálogo de la interfaz. Considerar: Tareas con alta frecuencia Partes de la interfaz con menor certeza acerca de la usabilidad Soluciones alternativas de diseño Porciones del diseño similares en el diseño global 146 Test: Simplicidad La interfaz debe ser simple y presentar solo la información necesaria Verificar la interfaz para detectar problemas de usabilidad Test de usabilidad Revisiones del diseño del prototipo Comparaciones con guías de factores humanos Revisiones de colegas Revisión de un experto en diseño de interfaces Revisiones de usuarios Organizaciones complejas de la interfaz Ventanas no claras o dificiles de acceder Mensajes no claros o poco amistosos Pasos innecesarios en la realización de una tarea Layouts confusos Falta de feedback No seguimiento de los estandares de interfaz... Principio KISS ( Keep It Simple, Stupid ) Presentar exactamente la información necesaria ( Less is More ) Menos para aprender, para equivocarse, para distraerse,... Eliminar u ocultar la información irrelevante o innecesaria La información debiera aparecer en un orden natural No utilizar muchas ventanas Lenguaje conciso Buscar 147 Compite con la información importante en la presentación La información relacionada debe estar agrupada gráficamente No utilizar navegaciones o administración compleja entre ventanas 148