Diseño de la navegación en la interacción persona-computadora

Interacción Persona Ordenador (IPO)

Diseño de la navegación

Universidad Francisco de Vitoria UFV Madrid Grado en Ingeniería Informática Escuela Politécnica Superior

Índice

• Introducción
• Estructura local
• Estructura global
• Visión más amplia
• Diseño visual
• Acción y control del usuario
• Apariencia
• Fuentes

Universidad Francisco de Vitoria UFV Madrid 2

Introducción

Niveles de diseño

• Elección de widgets: o Menús, botones, etc.
• Diseño de pantallas.
• Diseño de la navegación por la aplicación.
• Entorno: o Otras aplicaciones, sistemas operativos, etc.

Ejemplos de uso

• En una web: o Elementos y etiquetas HTML. o Diseño de la página. ○ Estructura del sitio web. o La web, navegador, enlaces externos ...
• Dispositivo físico (ej .: una lavadora): o Controles, palancas, diales, botones, pantalla, etc. o Diseño físico: dónde colocamos cada cosa. o Modos de uso del dispositivo: menús, submenús.
• El mundo real.

Universidad Francisco de Vitoria UFV Madrid 3

Universidad Francisco de Vitoria UFV Madrid

Estructura local

Grado en Ingeniería Informática Escuela Politécnica Superior

Estructura local: 4 reglas de oro

Se trata de definir aspectos del diseño mirando una pantalla concreta. Es vital dar retroalimentación al usuario para que sepa:

1. Dónde está.
2. Lo que puede hacer.
3. Adónde va, o qué pasará.
4. Dónde ha estado, o qué ha hecho. o ¿Nos quedamos tranquilos si al hacer una transferencia bancaria no nos sale un mensaje indicando que todo ha ido bien?

Página de inicio

Universidad Francisco de Vitoria UFV Madrid

Subcategoría Enlaces activos a los niveles superiores My Courses ₼ This course C > My courses > 1920-INF-3636-A > Topic 2 > Análisis de Usabilidad (Primera aproximación) Página actual

Universidad Francisco de Vitoria UFV Madrid

Categoría superior 5

Universidad Francisco de Vitoria UFV Madrid

Estructura global

Grado en Ingeniería Informática Escuela Politécnica Superior

Estructura global: diagramas jerárquicos

Diagramas jerárquicos: muestra las partes de la aplicación separadas por funcionalidades.

Sistema Ayuda Gestión Mensajes Alta de usuario Borrar usuario

Universidad Francisco de Vitoria UFV Madrid 7

Navegar por una jerarquía

Navegar por una jerarquía:

• Anchura del menú: Nº de elementos elegibles en un determinado nivel.
• Profundidad: Nº de niveles.
• Mejor menús más anchos que profundos. o Para eliminar niveles de profundidad, se pueden usar separadores dentro del mismo nivel.

No os dejéis asustar por la ley de Miller: 7 ± 2.

• Se refiere a la Memoria a Corto Plazo, no al número de elementos de un menú (no hay que memorizarlos).
• Caso óptimo: ○ Muchos elementos en cada pantalla. ○ Pero ordenados de forma estructurada.

Universidad Francisco de Vitoria UFV Madrid 8

Estructura global: diagramas de flujo

Diagramas de flujo: muestran los distintos caminos a través del sistema.

• Qué conduce a qué.
• Qué sucede cuándo.
• Muestra ramificaciones.

Su enfoque son las tareas, no la jerarquía

Pantalla principal Gestión de usuario Confirmar operación Alta de usuario Borrar usuario

Universidad Francisco de Vitoria UFV Madrid 9

Universidad Francisco de Vitoria UFV Madrid

Visión más amplia

Grado en Ingeniería Informática Escuela Politécnica Superior

Consideraciones de la aplicación

Tenga en cuenta que:

• La aplicación no está aislada, sino que hay otras en su entorno.
• Cuestiones de estilo.
• Estándares de plataforma, consistencia entre aplicaciones (ej .: posición menús).
• Cuestiones funcionales: o Cortar y pegar, abrir fichero, etc.
• Cuestiones de navegación: · Aplicaciones empotradas o embebidas. o Enlaces a otras aplicaciones. ○ La web.

Universidad Francisco de Vitoria UFV Madrid 11

Universidad Francisco de Vitoria UFV Madrid

Diseño visual

Grado en Ingeniería Informática Escuela Politécnica Superior

Diseño de pantallas y apariencia: principios básicos

• Preguntar ○ Qué hace el usuario
• Pensar o Qué información, comparaciones, orden
• Diseñar o Se elige la forma según la funcionalidad

Herramientas de diseño visual

• Agrupar elementos relacionados
• Ordenar de manera natural
• Decorar
• Alinear los elementos
• Usar el espacio en blanco

Universidad Francisco de Vitoria UFV Madrid 13

Diseño visual: análisis del espacio

Diseño de pantallas y apariencia: organice el espacio

• Identidad y bienvenida al sitio
• Navegación
• Contenido de interés . Publicidad y contenido patrocinado
• Autopromoción
• Relleno
• Espacio sin utilizar
• Controles del sistema operativo y del navegador

Jakob Nielsen & Marie Tahir

Universidad Francisco de Vitoria UFV Madrid 14

Análisis del espacio UFV

Actualidad UFV El campus Contacto Buzón de Sugerencias & Accesos ¿: Soy ... Q f in Universidad Francisco de Vitoria UFV Madrid La universidad Estudiar en UFV Investigación Internacional Proceso de admisión O llámanos 91 351 03 03 Solicita información Descubre las nuevas titulaciones UFV · GESTIÓN DE LA CIBERSEGURIDAD · INGENIERÍA MATEMÁTICA · INGENIERÍA EN SISTEMAS INDUSTRIALES . BUSINESS ANALYTICS · FILOSOFÍA, POLÍTICA Y ECONOMÍA 2. Navegación Utilizamos cookies propias y de terceros para mejorar nuestros servicios y mostrar a los usuarios publicidad relacionada con sus preferencias mediante el análisis de sus hábitos de navegación. Si se continúa navegando, consideramos que se acepta su uso. Es posible cambiar la configuración u obtener más información aquí. Leer más. Ok 3. Autopromoción Contenido útil 4. 5. Espacio en blanco o no utilizado «Nuestros alumnos cuentan con las instalaciones más pioneras de Europa» noviembre 2019 la de Puertas Abiertas sábado 23 de noviembre ¡Ven a conocer nuestro campus el próximo sábado 23 de noviembre! 23 23/11/2019 #UFVmadrid noviembre Congreso Internacional de Enfermería noviembre Congreso Internacional de Enfermería 2019 III Congreso Internacional de Investigación, Formación & Desarrollo Enfermero «Caminando hacia nuevos horizontes». 15 TOUR VIRTUAL VIVIRÁS LA EXPERIENCIA UFV MÁS QUE UN GRADO 5/11/2019 #UFVmadrid Bienvenido al Campus de la Universidad Francisco de Vitoria, donde encontrarás unas instalaciones únicas en Europa en una Facultad de Comunicación, tendrás a tu disposición el Centro de Simulación Clínica Avanzada, pionero en España con más de 2000m2. Además, tenemos Colegio Mayor, Centro deportivo, campos de futbol, rugby, volleyball, tenis y pádel. http://www.ufv.es (20/10/2019) Universidad Francisco de Vitoria UFV Madrid 15

Admisiones y becas 1. Identidad GASIKUNUMIA + AVE

Diseño visual: agrupación y estructura

Lógicamente juntos = físicamente juntos

Detalles de facturación: Detalles de entrega: Nombre Nombre Dirección: ... Dirección: ... Tarjeta de crédito Hora de entrega Otros detalles: elemento cantidad unidad coste size 10 screws (boxes) 7 3.71 25.97 . . . . . .. . . .

Universidad Francisco de Vitoria UFV Madrid 16

Diseño visual: orden de elementos y grupos

Al momento de definir una interfaz, tener en cuenta:

• Pensar cuál es el orden natural. . Debe coincidir con el orden de aparición en pantalla.
• Uso de cajas, espacio, etc.
• Orden de tabulación.
• Síndrome de la receta: o Echa leche y harina y añade la fruta después de batir bien.

Universidad Francisco de Vitoria UFV Madrid 17

Diseño visual: decoración

• Usar cajas para agrupar elementos relacionados.
• Usar fuentes para énfasis, cabeceras, etc.
• ¡ Pero no demasiadas!

ABCDEF GHIJKLM NOPQRSTUVWXYZ

Universidad Francisco de Vitoria UFV Madrid 18

Diseño visual: alinear el texto

Idiomas que se leen de izquierda a derecha = Alinear a la izquierda

• Usar fuentes para énfasis, cabeceras, etc.
• ¡ Pero no demasiadas!
• Alineación de nombres Willy Wonka and the Chocolate Factory Winston Churchill - A Biography Wizard of Oz Xena - Warrior Princess Aburrido pero se lee bien

Bien por motivos estéticos pero se lee peor Willy Wonka and the Chocolate Factory Winston Churchill - A Biography Wizard of Oz Xena - Warrior Princess Alan Dix Janet Finlay Gregory Abowd Russell Beale Dix , Alan Finlay, Janet Abowd, Gregory Beale, Russell ✔ Alan Dix Janet Finlay Gregory Abowd Russell Beale

Universidad Francisco de Vitoria UFV Madrid 19

Diseño visual: alinear números

¿Puedes identificar el número más alto? 532.56 179.3 Visualmente parece: número largo = número grande 627.865 1.005763 256.317 382.583 15

Añadir comas (puntos) decimales o alinear a la derecha 2502.56 73.948 432.935 1035 2.0175 3.142 652.87 497.6256 56.34

Universidad Francisco de Vitoria UFV Madrid 20

Diseño visual: múltiples columnas

Es difícil no perderse si hay grandes espacios en blanco dentro de una tabla.

sherbert 75 toffee 120 chocolate 35 fruit gums 27 coconut dreams 85 sherbert 75 toffee 120 chocolate 35 fruit gums 27 coconut dreams 85 sherbert 75 toffee 120 chocolate 35 fruit gums 27 coconut dreams 85 sherbert 75 toffee 120 chocolate 35 fruit gums 27 coconut dreams85

Universidad Francisco de Vitoria UFV Madrid 21

Diseño visual: espacios en blanco

FedEx Carrefour yoga australia Usa network

Universidad Francisco de Vitoria UFV Madrid 22

Espacio para estructurar

Espacio para estructurar Espacio para separar

Universidad Francisco de Vitoria UFV Madrid 23

Espacio para destacar

Espacio para destacar 7

Universidad Francisco de Vitoria UFV Madrid 24

Dispositivo físico

Agrupar elementos con funciones similares.

1. Descongelado
2. Tipo de comida
3. Tiempo de cocción

Am 0℃ Arita Retvoet 1 2 Tone AfG 10 3

Universidad Francisco de Vitoria UFV Madrid 25

Dispositivo físico: orden de elementos

Orden de los elementos según una secuencia:

1. Tipo de calor
2. Temperatura
3. Tiempo de cocción
4. Botón de inicio

A 0℃ 8 8 Werde Defront O Auta Retvoet Bovel 1 Manuel Control X Tine /'G 2 10 3 10 4

Universidad Francisco de Vitoria UFV Madrid 26

Dispositivo físico: decoración y alineación

Decoración:

1. Diferentes colores para diferentes funciones
2. Líneas y formas geométricas

Alineación:

1. Texto centrado en botones

Espacios en blanco:

1. Huecos para el agrupamiento

8 8 Werde Defrost O Auta Reveet Manuel Control X M Tine FIG 10 1 10

Universidad Francisco de Vitoria UFV Madrid 27

Universidad Francisco de Vitoria UFV Madrid

Acción y control de usuario

Grado en Ingeniería Informática Escuela Politécnica Superior