Estándar de Diseño Gráfico [Directrices para la construcción de aplicaciones WEB]

Transcripción

1 Estándar de Diseño Gráfico [Directrices para la construcción de aplicaciones WEB]

2 CONTROL DEL DOCUMENTO TÍTULO Documento de Directrices de Diseño para Aplicaciones Web VERSIÓN FECHA Marzo 10 del 2009 ÁREA RESPONSABLE PLATAFORMA AFECTADAS Servicios Comerciales Plataforma Web ARCHIVO DesignGuidelinesWebApplication_v1_0.doc REGISTRO DE CAMBIOS DEL DOCUMENTO FECHA VER. AUTOR DETALLE DEL CAMBIO 10 de Marzo de Mauricio Torres Gutiérrez Ana Lucia Molina Creación del documento 21 de Abril de Mauricio Torres Gutiérrez Modificación al documento para temas de filtro y refinación de algunos temas. 2

3 Tabla de Contenidos Tabla de Contenidos... 3 Introducción... 4 Retícula de trabajo Plantilla de trabajo Encabezado Barra de bienvenida Menú de Navegación Área Funcional Formularios Pestañas de Información (Tabs) Grillas de Datos Grillas de Datos con Filtros Grillas de Datos dentro de Pestañas Información Detallada (Formatos,Impresiones,Reportes) Mensajes de Usuario Navegadores Versiones Soportadas Restricciones y recomendaciones Manejo del Scroll

4 Introducción Un estándar de diseño administrado para aplicaciones Web y de Escritorio, permite a los programadores mejorar el modelo de programación para hacerlo compatible con una amplia gama de funcionalidades. Los estándares de diseño tienen como finalidad fomentar la coherencia y la previsibilidad al habilitar la integración entre aplicaciones. Estos estándares deberán ser utilizados a la hora de construir las interfaces de las aplicaciones. El diseño incoherente influye de un modo desfavorable en la productividad de los programadores. Las aplicaciones que no se ajustan a estos estándares de diseño funcionarán, aunque no lo harán cumpliendo el estándar de la compañía. Con estos estándares se pretende ayudar a los desarrolladores de aplicaciones a comprender las ventajas y las desventajas entre las distintas soluciones. Puede que haya situaciones en las que un buen diseño requiera saltarse estos estándares de diseño. Estos casos no son lo habitual y es importante que una decisión de este tipo esté adecuadamente justificada. En este documento se proporcionan una guía para la implementación del diseño de las aplicaciones. 4

5 Tamaños de Tipografía 5

6 Puntos Pixeles Ems Porcentaje 7pt 9px 0.55em 55% 7.5pt 10px 0.625em 62.5% 8pt 11px 0.7em 70% 9pt 12px 0.75em 75% 10pt 13px 0.8em 80% 10.5pt 14px 0.875em 87.5% 11pt 15px 0.95em 95% 12pt 16px 1em 100% 13pt 17px 1.05em 105% 13.5pt 18px 1.125em 112.5% 14pt 19px 1.2em 120% 14.5pt 20px 1.25em 125% 15pt 21px 1.3em 130% 16pt 22px 1.4em 140% 17pt 23px 1.45em 145% 18pt 24px 1.5em 150% 20pt 26px 1.6em 160% 22pt 29px 1.8em 180% 24pt 32px 2em 200% 26pt 35px 2.2em 220% 27pt 36px 2.25em 225% 28pt 37px 2.3em 230% 29pt 38px 2.35em 235% 30pt 40px 2.45em 245% 32pt 42px 2.55em 255% 34pt 45px 2.75em 275% 36pt 48px 3em 300% 6

7 Paleta de Colores 7

8 8

9 Retícula de Trabajo 9

10 Retícula de trabajo Las aplicaciones se deben desarrollar para resoluciones de pantalla de 1024 x 768, pero el área de trabajo para la parte grafica debe ser de 960 x 768: Retícula divida en 12 columnas, de 80px de ancho cada una. 10

11 Plantilla de Trabajo 11

12 Plantilla de trabajo En la siguiente gráfica se muestra la plantilla principal de trabajo que deberán seguir todas las aplicaciones internas y externas de la compañía. La plantilla está dividida en varias secciones: Encabezado y Barra de Bienvenida Menú de Navegación Área de funcionalidad A continuación se detallara cada uno de los elementos y directrices que se deben seguir a la hora de construir una aplicación. 12

13 Encabezado y Barra de Bienvenida 13

14 El cabezote de las aplicaciones está dividido en 2 secciones: encabezado y la barra de bienvenida. Encabezado Formato 960 pixeles x 80 pixeles Lineamientos 1. El encabezado presenta en su fondo el degradado horizontal de los colores # y el #00AFB7. Está además bordeado por debajo con un línea blanca punteada de 1px. Clase de Hoja de Estilo (CSS) para la barra superior: /*Estilo para background del cabezote y barra de bienvenida*/ #bgheader{ background-image:url(media/png/bgheader.png); background-repeat:norepeat; width:960px; height:80px } 2. El Identificador gráfico de la marca tiene 50px de altura, se ubicará respecto a su texto centrado verticalmente en el encabezado y ubicado 40px a la derecha del borde izquierdo de la imagen. 3. Las opciones globales de la aplicación se encuentran en la zona superior derecha. La característica principal de estas opciones es que no hacen parte de una funcionalidad de la aplicación, estas opciones no poseerán ni iconos ni imágenes adicionales al texto. La tipografía del menú es Arial, Verdana, Helvetica, Sans-serif de 10px y de color blanco. Se ubicara 4px por debajo del borde superior de la imagen y 14px a la izquierda del borde de la derecha de la imagen. Clase de Hoja de Estilo (CSS) para las opciones globales: /*Estilo links para barra de opciones globales*/ #boxglobalbar{ vertical-align:middle; width:960px; height:60px }.aglobalbar:hover{ vertical-align:middle; border: 0px solid #fff; text-decoration: underline; color: #FFF; cursor:hand; font-family: Arial, Verdana, Helvetica, Sans-serif; font-size: 10px; fontvariant:normal; }.aglobalbar { vertical-align:middle; border: 0px solid #fff; text-decoration: none; color: #FFF; cursor:hand; font-family: Arial, Verdana, Helvetica, Sans-serif; font-size: 10px; fontvariant:normal; } 14

15 4. El nombre de la aplicación. Para la creación del nombre de la aplicación se busca darle mayor importancia a la funcionalidad de la misma que al nombre tal y como se conoce a nivel interno. Por tanto, prima en tamaño el nombre literal de acuerdo a su función y el nombre compuesto de la aplicación, estará dentro de paréntesis en un tamaño más pequeño para facilitarle el trabajo a nuestro público interno que ya tiene tan posicionado este nombre. Ejemplo de nombres: Barra de bienvenida Formato 960 pixeles x 25 pixeles Lineamientos 1. La barra de bienvenida es la segunda sección del cabezote, presenta en su fondo el degradado horizontal de los colores #00AFB7 al #004898, inverso al encabezado. Clase de Hoja de Estilo (CSS) para la barra de bienvenida: /*Estilo de la barra de bienvenida*/ #bgwelcomebar{ background-image:url(../../media/png/bgwelcomebar.png);backgroundrepeat:no-repeat; width:960px; height:25px } 2. Mensaje de bienvenida del cliente, se encuentra ubicado en la parte izquierda de esta sección. La tipografía del mensaje es Arial, Verdana, Helvetica, Sans-serif de 10px y de color blanco. Se debe mostrar la información de bienvenida y la ultima fecha de ingreso a la aplicación de la siguiente manera: 15

16 Bienvenido(a) Nombres Apellidos, su última visita fue el 11 de febrero de 2009 a las 12:30 p.m. Nota: El segmento de última visita del mensaje de bienvenida sólo se debe mostrar en los portales de transacciones como de y y en el visor de aplicaciones de la Intranet, el resto de aplicaciones solo mostrará: Bienvenido(a) Nombres Apellidos. Clase de Hoja de Estilo (CSS) para la barra de bienvenida:.letterwhite{ vertical-align:middle; color:#fff; font-family: Arial, Verdana, Helvetica, Sansserif; font-size: 10px; font-variant:normal; } 3. Opciones adicionales. Estas opciones son opcionales, se pueden utilizar como el primer nivel del menú izquierdo, dado que el menú izquierdo tenga muchos subniveles o para otra funcionalidad que les pueda servir. Al final el cabezote quedara de la siguiente manera: Para las aplicaciones transaccionales como son Servicios en línea (Suratep) y Servicios empresariales (Susalud) manejaran su propio encabezado y cualquier aplicación que sea invocada desde alguno de estos portales debe manejar el mismo cabezote cumpliendo los lineamientos anteriormente mencionados, a continuación se mostrará el cabezote para los sitios transaccionales. Servicios en Línea (Suratep.com) Servicios Empresariales (Susalud.com) 16

17 Menú de Navegación 17

18 Menú de Navegación Cuando las aplicaciones necesitan mostrar las funcionalidades de su aplicación, se debe utilizar un menú izquierdo que visualmente se deberá ver como se muestra en la siguiente grafica: Formato 160 pixeles a 240 pixeles de Ancho Lineamientos 1. Área del menú, cuyo fondo es de color #F5F5F5 el cual deberá tener como mínimo 1 nivel y como máximo 3 niveles. El ancho del menú deberá ser de 160px como mínimo y de 240px como máximo, esta última medida se utilizara cuando el menú exceda los 2 niveles, de lo contrario debe ser de 160px. Nota: - Si los nombres de las opciones de menú son muy largos el nombre deberá estar a doble línea conservando la alineación izquierda. 18

19 - La barra gris deberá tener la propiedad de ampliarse de forma vertical hasta el final de la hoja. 2. Las opciones de primer nivel por defecto aparecerán colapsadas con la siguiente imagen:, y cuando despliegue las opciones hijas la imagen cambiara por esta:. La tipografía de la opción es Arial, Verdana, Helvetica, Sans-serif de 11px y el color de la letra de las opciones principales es # (en Bold). Nota: Si el menú es de tres niveles las opciones de segundo nivel tendrán las mismas características de las opciones de primer nivel. 3. Las opciones de ultimo nivel, la tipografía es Arial, Verdana, Helvetica, Sans-serif de 11px y el color de la letra es por defecto #6A6E77, pero en el hover de la opción es de color #20469D y cuando se encuentre seleccionada es # Por último el menú izquierdo tendrá la funcionalidad de ocultarse u mostrarse en determinado momento para tener más espacio de trabajo, para algunas funcionalidades que lo necesitan, por defecto este siempre se mostrará. Esta funcionalidad es opcional el que lo requiera implementar en la aplicación. 19

20 Área funcional 20

21 Área Funcional A continuación se muestra donde estará ubicada el área funcional de las aplicaciones. Dentro del área funcional esta la barra de herramientas que se compone de dos elementos principales: la miga de pan y las opciones, la primera es la ruta de navegación en el menú izquierdo y la segunda son las opciones de la funcionalidad específicas de la aplicación como por ejemplo: guardar, imprimir, descargar, sincronizar, entre otras. Lineamientos 1. Miga de pan: es utilizada para saber cuál es la ruta que siguió para llegar a la opción, esto con el fin de orientar al usuario y al puesto de ayuda a la hora de un problema, esta adicionalmente estará separada por el carácter especial /. La tipografía es Arial, Verdana, Helvetica, Sans-serif de 11px y el color de la letra es por defecto #999999(bold). La miga de pan deberá manejara un espacio de 40%, si esta supera este tamaño se cortar y mostrar en un tooltip todo la cadena completa por ejemplo: 21

22 2. La barra de herramientas, las opciones deben estar alineadas en la parte derecha de la pantalla y separadas por doble espacio y una línea vertical: (Esta línea se logra con la primera tecla en la parte superior izquierda del teclado en sistema QWERTY). La tipografía es Arial, Verdana, Helvetica, Sans-serif de 11px y el color de la letra es por defecto #004898, adicionalmente manejara un ancho de espacio de 60%. El área funcional está compuesta por los siguientes elementos funcionales: Formularios Pestañas de Información Grillas de Datos Información Detallada Mensajes de Usuario 22

23 Formularios 23

24 Formularios El siguiente es un ejemplo de formulario de captura de datos: Los formularios deben cumplir con las siguientes características: La tipografía del título del formulario debe ser Arial, Verdana, Helvetica, Sans-serif de 12px y el color de la letra #FFFFFF y el fondo de color # Clase de Hoja de Estilo (CSS) para la barra de título: /*Estilo*/.title{ background-color:#004898; height:25px; color:#fff; font-family:arial, Helvatica, Verdana, Sans-serif; font-size:12px; font-weight: bold } Sección de descripción del formulario y/o aspectos que se deben tener en cuenta, seguido de una línea discontinua divisoria para los campos de color # Esta descripción no es obligatoria en todos los casos se debe analizar si hay información importante que el usuario deba saber y si no se mostrará esta sección. Clase de Hoja de Estilo (CSS) para mensaje de usuario:.letterblack{ vertical-align:middle; font-family:arial, Helvatica, Verdana, Sans-serif; color:#000; font-size: 11px }.linedotted{ border-top:dotted 1px #004898; } 24

25 A continuación se describen el estilo de los tipos particulares de campos y controles de uso común en las aplicaciones: Labels o Etiquetas Son los textos que describen o le dan el nombre a un campo en un formulario, el estilo del campo es:.label{ color: #004898; font-family:arial, Verdana, Helvetica, Sans-serif; font-size: 11px; } Requeridos Es el texto que describe si un campo es requerido u obligatorio en un formulario el estilo de este campo es:.required{ color: #E22836; font-family:arial, Verdana, Helvetica, Sans-serif; font-size: 11px; fontweight:bold } Texto El cuadro de texto permite al usuario ingresar información, el tamaño del control debe ser por lo menos del número de caracteres que permite el campo. Este campo de llevar siempre la propiedad MaxLength. Si es necesario el cuadro de texto debe ser multilínea y tener scroll vertical para permitir el ingreso del texto completo. El estilo de este campo es:.textbox{ border: solid 1px #CBD9E7; height: 14px; color:#000; font-family:arial, Verdana, Helvetica, Sans-serif; font-size: 11px; font-variant: normal } Fechas Para el ingreso de fechas de usarse el control calendario, no debe permitirse el ingreso o modificación de fechas directamente en un textbox, siempre debe utilizarse el control calendario para eliminar la probabilidad de error del usuario. En el nombre del campo debe mostrarse el formato de la fecha entre paréntesis para evitar confusión en la lectura del valor de las fechas. 25

26 Nota: - Está pendiente por definir los colores del calendario, junto con su icono. Listas Los campos desplegables de opciones a seleccionar, estas listas deben contar con una opción por defecto: Seleccionar la ciudad; también podría estar el botón para limpiar el valor seleccionado dejando activa la opción por defecto este botón no es obligatorio queda a criterio del analista ponerlo de acuerdo a la funcionalidad. El estilo de este campo es:. list{ background-color: #CBD9E7; height:19px; color:#000; font-family:arial; font-size:11px; font-variant: normal } Búsqueda (Look Up) Este control permite ingresar o modificar datos que pertenecen a un dominio conocido pero son seleccionados por medio de algún método de búsqueda para facilitar su ubicación. El control se compone de un cuadro de texto de solo lectura para presentar el valor seleccionado, de un icono a la derecha de éste que permite acceder a la pantalla de búsqueda (en una ventana emergente) y del icono que permite limpiar el valor seleccionado, este icono si es obligatorio en este tipo de campos ya que el campo esta deshabilitado. Nota: Pendiente por definir los colores los iconos de la lupa y el eliminar.. Cabe resaltar que los campos se pueden mostrar de diferentes formas de acurdo a la necesidad de la funcionalidad que se quiere mostrar como por ejemplo: Descripción y campo sobre la misma columna Descripción y campo en diferente columna 26

27 Pestañas de Información 27

28 Pestañas de Información (Tabs) Las pestañas de información son utilizadas para agrupar información relacionada con el mismo tema, por ejemplo: En una opción del menú llamada Mis Vinculaciones se habla de información relacionada con las vinculaciones en 3 estados principales (las que están vigentes, las que son no renovadas, y las que se han cancelado). Por tanto, la agrupación recomendada es: Vigentes - No Renovadas Canceladas. A continuación se detalla el diseño para la construcción de las pestañas de información: Pestaña por defecto: Pestaña en estado MouseOver: Pestaña Activa: Nota: Las imágenes que componen las pestañas deben ser sacadas de la biblioteca de soporte que se les entregará junto con otros recursos que le ayudarán al rediseño de las aplicaciones. 28

29 Grillas de Datos 29

30 Grillas de Datos Las grillas de datos son utilizadas para mostrar información como las lista de riesgos de una póliza, los clientes de un asesor, las pólizas vigentes por ramo, etc., un ejemplo de cómo deberían ser las grillas de las aplicaciones se muestra en la siguiente grafica. Lineamientos 1. Barra superior donde se encuentra ubicado el titulo del grilla y la paginación, el estilo de esta barra es:.gridbar{height:25px;background-color:#f5f5f5} 2. El titulo de la grilla. La tipografía es Arial, Helvatica, Verdana, Sans-serif de 11px y de color #004898(bold), este título no es obligatorio, se debe utilizar siempre y cuando se necesite. 3. La paginación de la grilla debe ser como se muestra en la grafica ubicado en la parte superior de la derecha de la grilla. La tipografía es Arial, Helvatica, Verdana, Sans-serif de 11px y de color #000000, algunas características que se deben tener en cuenta: Cuando no haya los suficientes registros para generar la paginación se mostrar las flechas deshabilitadas. Es opcional habilitar la posibilidad de navegar en páginas directamente habilitando un cuadro de texto en la página. 30

31 4. Cabezote de la grilla. La tipografía es Arial, Helvatica, Verdana, Sans-serif de 11px y de color #FFFFFF(bold), es opcional el auto ordenamiento y los autofiltros en las columnas. 5. Fila por defecto tiene una tipografía es Arial, Helvatica, Verdana, Sans-serif de 11px y de color # y su vez background-color:#ffffff. 6. Fila alterna tiene una tipografía es Arial, Helvatica, Verdana, Sans-serif de 11px y de color # y su vez background-color:#f4f4f4. A la hora de utilizar una grilla se debe tener en cuenta los siguientes lineamientos de diseño y algunas buenas prácticas de uso: Para mejorar el rendimiento en las aplicaciones No se deben traer todos los datos en pantalla, la grilla deberá tener paginación (máx. 20 y min. 10 registros por página). La grilla deberá mostrar los campos más relevantes, no todos los datos de la tabla. La grilla deberá utilizar AJAX para mejorar el tiempo de respuesta y evitar el refresco. 31

32 Grillas de Datos con Filtros Definitivamente existen situaciones donde se necesita traer datos pero a partir de un filtro en particular o a veces después de traer unos datos específicos necesito realizar algún filtro en particular, a continuación se describe el manejo de filtros. Lineamientos 1. Elemento de filtro que tiene como fondo un color #F5F5F5, borde de color # y un alto de 25px. 2. Titulo del filtro: Se puede poner cualquier descripción en el titulo del filtro. La tipografía es Arial, Helvatica, Verdana, Sans-serif de 11px y de color #004898(Bold). 3. Elemento para expandir y colapsar el filtro funciona de la siguiente manera: 32

33 El botón buscar siempre debe estar dentro del filtro. Después de buscar se debe colapsar automáticamente el filtro, siempre y cuando el filtro retorne datos. La organización de los campos del filtro queda a criterio de cada analista, pero cumpliendo con los estándares de campos de los formularios. 4. Barra superior donde se encuentra ubicado el titulo del grilla y la paginación, el estilo de esta barra cambia para darle contraste con el filtro y el estilo queda de la siguiente manera:.gridbar{height:25px;background-color:#000000} 33

34 Grillas de Datos dentro de Pestañas Cuando se tiene grillas de datos dentro de pestañas, la paginación debe quedar al mismo nivel como se muestra en la siguiente grafica: Dado que el que el número de pestañas sea mayor de 1 se debe poner dentro de la pestaña como se muestra en la siguiente grafica: A continuación se definen los formatos usados para los tipos de dato de uso común: Fechas: Fechas con Horas: Números: Monedas: Porcentajes: Formato aaaa/mm/dd y alineado a la izquierda. Formato aaaa/mm/dd HH:MM:SS tt y alineado a la izquierda. Enteros: ##.###, decimales: ##.###,##. Separación de miles con punto, separación de decimales con coma, por defecto se usarán dos cifras decimales en caso de que el dato no sea entero, alineación a la derecha. En el ingreso se debe permitir únicamente números y la coma (sólo cuando los datos deban tener decimales). Editados de acuerdo a las convenciones ($##.###,##), usan el formato definido para los números y el signo de pesos o dólares a la izquierda. ##,##%, usan el formato definido para los números y el signo de porcentaje a la derecha. 34

35 Números de negocio: Teléfonos: Amparos: Artículos: Nombres: Sin ramo y sin ceros a la izquierda. (#)-#######, con indicativo en paréntesis y alineados a la izquierda Usan el formato definido para los números, debe quedar alineados a la izquierda. Usan el formato definido para los números, debe quedar alineados a la izquierda. Primer Apellido - Segundo Apellido - Primer Nombre - Segundo Nombre. Deben presentarse en mayúscula sostenida y sin separaciones. 35

36 Información Detallada 36

37 Información Detallada (Formatos, Impresiones, Reportes) La forma de presentación de la información como cotizaciones, caratulas, hojas de estado, etc. Si esta información va ser entregada a algún cliente debe llevar el logo de suramericana, sino es así puede llevar el logo especifico de la compañía. A continuación se mostrara las imágenes para la información detallada 37

38 38

39 39

40 Mensajes de Usuario 40

41 Mensajes de Usuario Los mensajes como parte integral de las aplicaciones, deben cumplir la función de dar información a los usuarios en cualquier caso. La información que se muestre en los mensajes debe servir para ubicar al usuario en el procedimiento a seguir, por tanto debe ser un lenguaje fluido e identificado con los procesos que se realizan en la aplicación. Como parte de este estándar en todas las aplicaciones, los mensajes se clasifican en 4 grupos: Mensajes de Error: Son los mensajes que sean producto de errores causados por la aplicación. Especificaciones del recuadro: El fondo debe ser de color: #FABABD El borde de 1 pt de color: #8F0300 La letra en Arial 10 de color #

42 Mensajes de Advertencia: Son todos esos mensajes que se producen por validaciones no exitosas que se hayan realizado; por ejemplo, cuando una fecha debe ser mayor a otra. Especificaciones del recuadro: El fondo debe ser de color: #FFFFB2 El borde de 1 pt de color: #FFBD00 La letra en Arial 10 de color # Mensajes de Información: Son los mensajes de ayuda o información específica para el usuario. Ejemplo: un mensaje de finalización de un proceso exitosamente. Especificaciones del recuadro: 42

43 El fondo debe ser de color: #D4EFB2 El borde de 1 pt de color: #006B00 La letra en Arial 10 de color # Mensajes de Decisión: Son todos aquellos mensajes que se despliegan para que el usuario tome una decisión determinada o confirme una transacción que se va a realizar en el proceso. Nota: Estos botones deben ser sacados de la biblioteca de soporte que se les entregará junto con otros recursos que le ayudarán al rediseño de las aplicaciones. 43

44 Navegadores 44

45 Navegadores Esta sección describe las recomendaciones generales en cuanto al comportamiento y las restricciones impuestas sobre los navegadores utilizados para visualizar las aplicaciones web. Versiones Soportadas Las aplicaciones deben ser desarrolladas para la los siguientes navegadores: Microsoft Internet Explorer 6.x o superior, Mozilla FireFox 3.x o superior(free), Apple Safari 3.0 o superior(free). Para lo anterior se deberá usar estándares del mercado como HTML 5.0 y CSS 2.1 de la WWW3. Restricciones y recomendaciones Resolución de la pantalla: las aplicaciones deben soportar resoluciones de pantalla de 960x600 píxeles en adelante. Ocultar Barras de herramientas: para maximizar el uso del área de trabajo y reforzar el uso de la navegación propia de la aplicación, se recomienda ocultar las barras de herramientas del explorador en las aplicaciones para la Intranet y Internet. Probar navegación: por medio del teclado es posible utilizar la navegación del explorador (tecla backspace, F5, etc) lo cual puede llevar a que se presenten errores en las aplicaciones por el manejo del estado, debido a esto se recomienda que dependiendo de las necesidades de la aplicación se restrinja el uso de estos comandos del teclado o en caso contrario se incluya la verificación de la aplicación frente a estos eventos en los casos de prueba del sistema. Manejo del Scroll Siempre que sea posible debe diagramarse las páginas para evitar el uso de scroll (principalmente el scroll horizontal), con el fin de facilitarle al usuario la visualización de la información y la navegación entre los campos, dado que la presencia de scroll le resta usabilidad al software. Si debido a la cantidad de campos y de información a presentar definitivamente se hace necesario el uso del scroll, debe buscarse que sólo aparezca a nivel del área de contenido de la página y no dentro de las diferentes secciones en que puede estar dividida. Específicamente se usa el scroll vertical en el área de contenido para evitar que al navegar a través de los campos se pierda el encabezado de la página, incluyendo la barra de acciones que contiene los comandos que el usuario puede ejecutar; manteniendo esta barra siempre visible se le facilita al usuario la interacción con la aplicación. 45

46 Nota: Para obtener lo anterior, es recomendable el uso de elementos mencionados durante este documento como: tablas de tamaño fijo, paginación en las listas, truncamiento de datos de texto, entre otros. 46