1 / 13

PASOS PARA CONSTRUIR INTERFACES DE USUARIO

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)

ulric-baker
Download Presentation

PASOS PARA CONSTRUIR INTERFACES DE USUARIO

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript


  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 • - 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] _________________________ DS2 - María Eugenia Valencia

  3. 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

  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 Aceptar Aplicar Cancelar Ayuda _________________________ DS2 - María Eugenia Valencia

  8. 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

  9. 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

  10. 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

  11. 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

  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. 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

More Related