130 likes | 255 Views
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)
E N D
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
CONOZCA A LOS USUARIOS - Nivel de conocimiento y experiencia • - Conocimientos de computación alto/moderado/[bajoexplicar cada término] - Experiencia en sistemas alta/moderada/[bajaproporcionar ejemplos y animaciones] • - Experiencia con aplicaciones alta/moderada/[bajaproporcionar 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] _________________________ DS2 - María Eugenia Valencia
CONOZCA A LOS USUARIOS (Cont.) • Carácterísticas físicas del usuario • Edad joven / media / madura • Género masculino / femenino • Destreza de mano izquierda / derecha / ambidiestro • Discapacidades ciego / 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 _________________________ DS2 - María Eugenia Valencia
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
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
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
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 Aceptar Aplicar Cancelar Ayuda _________________________ DS2 - María Eugenia Valencia
Clientes nuevos Nombre Dirección Primero Segundo Apellido Calle Ciudad Estado/municipio Sucursal Tipo de cuenta Privilegios Cheques Ahorro Mesa dinero Inversión Boletín Descuentos Prestamos rápidos Matirz Sur Norte Aceptar Aplicar Cancelar Ayuda APLICAR LOS PRINCIPIOS DEL BUEN DISEÑO DE PATALLAS “DESPUÉS” _________________________ DS2 - María Eugenia Valencia
Nombre Primero Segundo Apellido CÓMO SE APLICAN LOS PRINCIPIOS DEL BUEN DISEÑO DE PANTALLAS Clientes nuevos Prever inicio Asegura consistencia Dirección Calle Ciudad Estadomunicipio Agrupar elementos similares Marco para elementos similares Sucursal Usar títulos Tipo de cuenta Privilegios Matirz Sur Norte Inversión Matirz Sur Norte Boletín Descuentos Prestamos rápidos Agrupar elementos similares Simetría Balance Proporción Aceptar Aplicar Cancelar Ayuda _________________________ DS2 - María Eugenia Valencia
Características del automóvil 189 Característica Valor Características del automóvil 189 Característica Valor Marca Toyota Modelo Camry Identificación 893-8913-7813-789014 Ayuda Características del automóvil 189 Palabra Valor Esta pantalla Todas las pantallas USO DE VENTANAS 1. Propósito: Desplegar propiedades de una entidad -- Ventana de propiedades 2. Propósito: Obtener información adicional para realizar una tarea o comando específico -- Ventana de diálogo _________________________ DS2 - María Eugenia Valencia
Contoles ABC Características del automóvil 189 Característica Valor monitor disco teclado modem Archivo Edición Ver Formato Herr Ayuda USO DE VENTANAS (Cont.) 3. Propósito: Proporcionar información -- Ventana de mensajes Mensaje de advertencia ABC Características del automóvil 189 Advertencia. “edad” debe ser < 120 Aceptar 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
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
Clientes nuevos Nombre Pantalla Adelante atras Primero Apellido Ventanas en mosaico Privilegios Tipo de cuenta Cheques Ahorro Mdd Boletín Descuentos Cancelar Aplicar Cuadro de activación TÉRMINOS DE GUI COMUNES Icono Ventanas en cascada Caja de texto Botón de selección Botón _________________________ DS2 - María Eugenia Valencia