Diseño de Sistemas.

DISEÑO DE PANTALLAS

Lineamientos para el diseño de pantallas

2

Hay cuatro lineamientos básicos importantes:Mantener pantallas simplesMantener consistente la presentación

de la pantallaFacilitar al usuario el movimiento entre

pantallasCrear pantallas atractivas

Cómo mantener una pantalla simple

3

La pantalla debe mostrar solamente lo que es necesario para la acción particular que está siendo realizada

La pantalla debe ser estandarizada en tres partes-secciones:La parte superior de la pantalla tiene una

sección de encabezado, sirve para describir al usuario en que parte del software se encuentra

La sección media llamada cuerpo de la pantalla. Es usada para la captura de datos, y se organiza de izquierda a derecha y de arriba hacia abajo. En esta sección se resaltan los campos, se pueden usar recuadros, colores, separaciones para campos, etc.

La tercera sección de comentarios o instrucciones

Cómo mantener una pantalla simple

4

Uso de ventanas:Son aquellas que se sobreponen parcial

o totalmente a la pantalla que la llamaPor lo general son llamadas a través de

botones o teclas funcionalesSe las utiliza para ayudas de datos o

para continuar el ingreso de informaciónDemasiadas ventanas pueden llegar a

complicar-confundir al usuario en los ingresos

5

Al seleccionar este icono saldrá la pantalla de resultados

Cómo mantener pantallas consistentes

6

Si el ingreso por pantallas será a través de formularios, la pantallas deberán seguir el mismo orden.

Formatos deben ser iguales en todas las pantallas

Cómo facilitar el movimiento de una pantalla a otra

7

Se le debe hacer pensar al usuario que se mueve físicamente de una pantalla a otra. Hay tres formas en que se lo puede lograr:

DesplazamientoPetición de más detalleDiálogo en pantalla

8

Desplazamiento

9

Congelar columnas

10

Petición de más detalle, en la pantalla de Registro,

Se seleccionó el icono de buscar para la matricula del estudiante

Diseño de pantallas atractivas

11

Con pantallas atractivas el usuario puede llegar a ser más productivo

Las pantallas deben atraer a los usuarios y conservar su atención

Se debe evitar amontonamiento de camposSe recomienda que si la información no entra en una sola

pantalla, usar varias que sean fáciles de usarSi la pantalla es necesariamente compleja, el atractivo

es resaltado, separando las categorías de información con líneas.

Con la interfaz gráfica (GUI) es posible hacer pantallas muy atractivas. Mediante el uso de colores, cuadros, sombreados, gráficos. Se puede usar:Video inverso Uso de diferentes tipos de letrasUso de imágenes en el diseño de pantallasUso de diferentes tipos de colores

Uso de iconos en el diseño de pantallas

12

Los iconos son representaciones pictóricas que simbolizan las acciones de computadora.

Se los selecciona con el uso del ratónLos iconos deben representar a su

funciónNo se aconseja tener más de 20 iconos

en una aplicaciónSon de ayuda para usuarios sin

experiencia

Diseño de la interfaz gráfica de usuario

13

La interfaz gráfica de usuario aprovecha las características adicionales en el diseño de pantallas tales como cuadros de texto, casillas de verificación, botones de opción, cuadros de listas y cuadros de listas desplegables, deslizadores, mapas de imágenes entre otros

Uso de colores en el diseño de pantalla

14

Negro sobre amarillo Verde sobre blancoAzul sobre blancoBlanco sobre azulAmarillo sobre negro

Los campos importantes pueden llevar colores diferentes

15

16

17

18

19

Reporte por criterios (pestaña activa carrera)

20

21

22

23

24

25

Diseño de PantallasDiseño de entradas y salidas Página: 1/379

Sistema de Integración Laboral SILVersión 1.0

FENEDIF Autores: Andrés Beltrán Mónica Rojas

Nombre de la forma: index.php Fecha: 14/05/2009Descripción: Pantalla de inicio de sesión

Objeto Campo Contenido Formato

txt_login login Nombre de inicio de sesión de un usuario del sistema X(15)

txt_clave clave Clave de usuario del sistema X(15)

Observaciones: