PASOS PARA CONSTRUIR INTERFACES DE USUARIO Paso 1 : Conocer al usuario (C) [Proceso de requerimientos C] Paso 2 : Entender la función de negocios en cuestión.

Presentación del tema: "PASOS PARA CONSTRUIR INTERFACES DE USUARIO Paso 1 : Conocer al usuario (C) [Proceso de requerimientos C] Paso 2 : Entender la función de negocios en cuestión."— Transcripción de la presentación:

1 PASOS PARA CONSTRUIR INTERFACES DE USUARIO Paso 1 : Conocer al usuario (C) [Proceso de requerimientos C] Paso 2 : Entender la función de negocios en cuestión ( C) Paso 3 : Aplicar los principios del buen diseño de pantallas ( C, D) Paso 4 : Seleccionar el tipo adecuado de ventanas (C, D) Paso 5 : Desarrollar los menúes del sistema (C, D) Paso 6 : Seleccionar los controles adecuados basados en los dispositivos (C ) Paso 7 : Elegir los controles adecuados basados en las pantallas(C) Paso 8 : Organizar y distribuir la pantalla ( C, D) Paso 9 : Elegir los controles adecuados ( D ) Paso 10: Crear íconos significativos ( C, D ) Paso 11: Proporcionar mensajes, retroalimentación y guía afectivos (D) (C: Cliente, D: Desarrollador) _________________________ DS2 - María Eugenia Valencia

2 CONOZCA A LOS USUARIOS - Nivel de conocimiento y experiencia _________________________ DS2 - María Eugenia Valencia - Conocimientos de computación alto/moderado/[bajo explicar cada término] - Experiencia en sistemas alta/moderada/[baja proporcionar ejemplos y animaciones] - Experiencia con aplicaciones alta/moderada/[baja proporcionar ejemplos similares y animaciones] - Educación grado/licenciatura/[educación media usar términos de preparatoria] - Nivel de lectura > 12 años de escolaridad / 5-12[< 5 usar un lenguaje muy sencillo - Aptitudes de mecanografía 135 ppm / 55 ppm / [10 ppm proporcionar cuadros de textos menores; dar ejemplos; resaltar el llenado de formas]

3 CONOZCA A LOS USUARIOS (Cont.) _________________________ DS2 - María Eugenia Valencia Carácterísticas físicas del usuario -Edadjoven / media / madura -Género masculino / femenino -Destreza de manoizquierda / derecha / ambidiestro -Discapacidadesciego / defecto de visión / sordo / sicomotora Características de las tareas y trabajos del usuario -Tipo de uso de esta aplicación discrecional/[obligatorio hacer una aplica- ción de uso divertido] -Frecuencia de uso continuo / frecuente / ocasional / [una vez en la vida proporcionar todos los procedi- mientos y ayuda en cada pantalla] -Importancia de la tarea alta / moderada / [baja hacer algo diverti- do

4 CONOZCA A LOS USUARIOS (Cont.) Características de las tareas y trabajos del usuario - Repetitividad de la tarea baja / moderada / [alta automatizar el mayor número de pasos posible; variedad en presentación de datos; oportunidades para aprender] - Capacidad prevista ninguna / autoaprendizaje con manuales / extensa [proporcionar oportunidades aprendi- zaje en línea] - Categoría del trabajo ejecutivo /gerencial / profesional / secretarial/ de apoyo, etc. [uso de lenguaje, ejemplos y descripciones familiares para el personal típico] _________________________ DS2 - María Eugenia Valencia

5 CONOZCA A LOS USUARIOS (Cont.) Características sicológicas del usuario - Actitud probable hacia el trabajo positiva / neutra / negativa - Motivación probable alta / moderada / [baja hacer algo muy atractivo] - Estilo cognitivo verbal contra [espacial resaltar imágenes geométricas analítico contra [intuitivo resaltar símbolos más que texto] concreta contra [abstracta explotar generalizaciones] _________________________ DS2 - María Eugenia Valencia

6 PRINCIPIOS DEL BUEN DISEÑO DE PANTALLAS Asegurar la consistencia entre las pantallas de las aplicaciones designadas y entre las pantallas dentro de cada una - Convenciones, procedimientos, ver y sentir (look-and-feel), localización Preveer dónde es común que el usuario empiece - Con frecuencia, esquina superior izquierda; colocar ahí el primer elemento Hacer la navegación lo más sencilla posible - Alinear elementos parecidos - Agrupar elementos parecidos - Considerar bordes alrededor de elementos parecidos Aplicar la jerarquía para hacer énfasis en el orden de importancia Aplicar los principios de un visual atractivo - Balance, simetría, regularidad, que sea predecible - Sencillez, unidad, proporción, economía Proporcionar títulos _________________________ DS2 - María Eugenia Valencia

7 APLICAR LOS PRINCIPIOS DEL BUEN DISEÑO DE PANTALLAS: antes Tipo cheques ahorros mesa dinero inversión Sucursal Of. Matriz Suc.Sur Suc Norte Privilegios boletín descuentos préstamo rápido Primer nombre Segundo nombre Apellido Calle Ciudad Estado / municipio AceptarAplicar CancelarAyuda _________________________ DS2 - María Eugenia Valencia

8 APLICAR LOS PRINCIPIOS DEL BUEN DISEÑO DE PATALLAS DESPUÉS _________________________ DS2 - María Eugenia Valencia AceptarAplicar CancelarAyuda Primero Segundo Apellido Nombre Calle Ciudad Estado/municipio Dirección Matirz Sur Norte Sucursal Cheques Ahorro Mesa dinero Inversión Tipo de cuenta Boletín Descuentos Prestamos rápidos Privilegios Clientes nuevos

9 CÓMO SE APLICAN LOS PRINCIPIOS DEL BUEN DISEÑO DE PANTALLAS _________________________ DS2 - María Eugenia Valencia AceptarAplicar CancelarAyuda Primero Segundo Apellido Nombre Calle Ciudad Estadomunicipio Dirección Matirz Sur Norte Sucursal Matirz Sur Norte Inversión Tipo de cuenta Boletín Descuentos Prestamos rápidos Privilegios Clientes nuevos Prever inicio Asegura consistencia Usar títulos Agrupar elementos similares Simetría Balance Agrupar elementos similares Marco para elementos similares Proporción

10 USO DE VENTANAS _________________________ DS2 - María Eugenia Valencia 1. Propósito: Desplegar propiedades de una entidad -- Ventana de propiedades Características del automóvil 189 Característica Valor MarcaToyota ModeloCamry Identificación 893-8913-7813-789014 Características del automóvil 189 Característica Valor 2. Propósito: Obtener información adicional para realizar una tarea o comando específico -- Ventana de diálogo Características del automóvil 189 Palabra Valor Esta pantalla Todas las pantallas Ayuda

11 USO DE VENTANAS (Cont.) 3. Propósito: Proporcionar información -- Ventana de mensajes Características del automóvil 189 Advertencia. edad debe ser < 120 Mensaje de advertencia ABC Aceptar Características del automóvil 189 Característica Valor monitor disco teclado modem Contoles ABC Archivo Edición Ver Formato Herr Ayuda 4. Propósito: Presentar un conjunto de controles -- Ventana de opciones 5. Propósito: ampliar información -- Ventana desplegable Esta es una ventana desplegable, diseñada para amplificar _________________________ DS2 - María Eugenia Valencia

12 DESARROLLO DE MENÚES DEL SISTEMA Proporcionar un menú principal constante ( el número de opciones debe ser entre cinco y nueve ) Desplegar todas las alternativas relevantes (y solo éstas) Amoldar la estructura del menú con la estructura de la tareas de la aplicación Minimizar el número de niveles de menú _________________________ DS2 - María Eugenia Valencia

13 TÉRMINOS DE GUI COMUNES Ventanas en mosaico Botón de selección Botón Caja de texto Icono AplicarCancelar Primero Apellido Nombre Pantalla Cheques Ahorro Mdd Tipo de cuenta Boletín Descuentos Privilegios Clientes nuevos Adelante atras Cuadro de activación Ventanas en cascada _________________________ DS2 - María Eugenia Valencia