TechEra - DiseÃ±o de Aplicaciones - Marzo 2015

Área: Tecnología Proceso: Diseño de Aplicaciones

Página: 1 de 40 Fecha: 02/03/2015

Diseña Bien las Aplicaciones y mejora la vida de tus

Usuarios

Por: Rubén Pillaca


Página: 2 de 40 Fecha: 02/03/2015

Diseñar, Desarrollar y Escribir Bien son las reglas básicas de construir buenas Aplicaciones.

Primero deben ser fáciles de usar, luego lo hacemos bonito.

Si tus usuarios no tienen problemas de uso, haz hecho un Gran Diseño.


Página: 3 de 40 Fecha: 02/03/2015

Contenido

Introducción ...................................................................................................... 5 Diseño de Aplicaciones en General ................................................................ 6

Diseño de una Aplicación ................................................................................ 7 Definir el Ciclo de Vida del Diseño ......................................................................................... 7

Conceptualización de la Idea ........................................................................................................... 7 Diseño de Interacción ..................................................................................................................... 7 Diseño Visual .................................................................................................................................. 7 Producción...................................................................................................................................... 8 Publicación ..................................................................................................................................... 8

Definir Estándares de Diseño Gráfico .................................................................................... 9 Definir logos e Imágenes ................................................................................................................. 9 Definir iconos .................................................................................................................................. 9 Definir Colores Corporativos ........................................................................................................... 9 Definir imágenes a Utilizar ............................................................................................................ 10 Definir textos Alusivos................................................................................................................... 11 Definir Formato de Letras ............................................................................................................. 11

Definir Prototipos de las Aplicaciones .................................................................................. 12 Diseño de Prototipos en Papel ...................................................................................................... 12 Diseño de prototipos en Herramientas .......................................................................................... 13

Estructura de una Aplicación ........................................................................ 14

Manejo correcto de la Redacción y Ortografía ............................................ 15 Escribir adecuadamente los Textos ..................................................................................... 15 Uso de los Signos de Puntuación ........................................................................................ 15 Poner Tildes a las Palabras ................................................................................................. 16 Usar las Abreviaciones Adecuadas ...................................................................................... 16 Uso de Siglas ...................................................................................................................... 17 Escribir con Mayúsculas y Minúsculas ................................................................................. 18 Definiciones acordes al Léxico del Negocio ......................................................................... 18

Uso de Imágenes en las Aplicaciones .......................................................... 19 Diseño del Menú ............................................................................................. 20

Diseñando un Menú ............................................................................................................ 20 Diseño del Menú Principal ................................................................................................... 21 Diseño del Menú de las Páginas .......................................................................................... 22 Diseño del Menú de Reporte ............................................................................................... 23

Diseño del Menú Reporte ............................................................................................................. 23 Opciones del Menú Reporte .......................................................................................................... 24

Diseño del Menú Popup ...................................................................................................... 25 Los Accesos rápidos............................................................................................................ 25

Diseño de Páginas de Inicio .......................................................................... 26 Diseño de la Página de Inicio............................................................................................... 26

Diseño de Formularios................................................................................... 27 Diseño de un Formulario...................................................................................................... 27 Diseño de los Controles ....................................................................................................... 27 Diseño de las Etiquetas ....................................................................................................... 28 Diseño de los Datos ............................................................................................................ 28

Diseño de Grillas ............................................................................................ 29 Diseño de una Grilla ............................................................................................................ 29 Diseño de los Controles ....................................................................................................... 29 Diseño de las Etiquetas ....................................................................................................... 29


Página: 4 de 40 Fecha: 02/03/2015

Diseño de los Datos ............................................................................................................ 30

Diseño de Pantallas de Búsqueda ................................................................ 31

Diseño de Reportes ........................................................................................ 32

Diseño de Mensajes de Respuesta ............................................................... 34

Diseño de las Ayudas .................................................................................... 35 Uso de Colores en las Aplicaciones ............................................................. 36

Diseño de Controles en una Aplicación ....................................................... 36 Diseñar una Aplicación con Controles .................................................................................. 36 Tipos de Controles .............................................................................................................. 36 Los Controles y los Colores ................................................................................................. 37

El fondo de color de los Controles ................................................................................................. 37 El color de las Letras ..................................................................................................................... 37

Diseño de Accesos Directos ......................................................................... 38 Accesos directos Estándares ............................................................................................... 38 Acceso directo a los Objetos................................................................................................ 39 Acceso directo a los Controles ............................................................................................. 40


Página: 5 de 40 Fecha: 02/03/2015

Introducción

Si estamos pensando en construir una aplicación, debemos pensar que una parte importante es el diseño, ya no solo basta con agregarle buenos diseños gráficos, hoy en día debemos diseñar aplicaciones fáciles de usar y fáciles de interpretar, para ello debemos realizar un buen diseño que vaya de la mano con la buena redacción y ortografía de nuestros aplicativos.

Debemos priorizar que sea fácil de usar, debe ser intuitivo y luego a eso le debemos agregar un buen diseño gráfico.

Hoy en día debemos considerar varios factores de manejar conceptos muy altos en cuanto al diseño gráfico, a la redacción y ortografía, nuestros ingenieros de software deben pensar que no solo el código de estar 100% validado, también debemos validar el diseño y todo lo referente a las interfaces que vamos a construir.

En estos tiempos ya no solo contamos con aplicaciones Escritorios y Web, hoy en día contamos con una variedad de interfaces móviles, hoy en día el diseño va de la mano contra qué sistema operativo vas a trabajar y contra qué dispositivos donde serán usados, nuestros desarrolladores de aplicaciones deben manejar las buenas prácticas para que el producto final sea 100% de calidad.

Todo el equipo que participa en el desarrollo de Aplicaciones debe manejar con concepto muy alto del Diseño de Aplicaciones que va más allá de bonitas pantallas, deben ser bien diseñadas, deben ser bien redactas y muy prácticas de usar.


Página: 6 de 40 Fecha: 02/03/2015

Diseño de Aplicaciones en General Para diseñar una Aplicación debemos considerar las siguientes acciones:

Diseño de una Aplicación Estructura de una Aplicación Manejo correcto de la Redacción y Ortografía Uso de Imágenes Uso de Controles Uso de Colores Diseño de Menú Diseño de Accesos Directos Diseño de Páginas de Inicio Diseño de Pantalla Principal Diseño de Formularios Diseño de Grillas Diseño de Pantallas de Búsqueda Diseño de Reportes Diseño de Mensajes de Respuesta Diseño de la Ayuda Diseño de Controles en una Aplicación Diseño de Validaciones


Página: 7 de 40 Fecha: 02/03/2015

Diseño de una Aplicación La creación de una aplicación incurre en muchos pasos y se basa en lo siguiente:

Definir el Ciclo de Vida del Diseño Definir Estándares de Diseño Gráfico Definir Prototipos de las Aplicaciones

Definir el Ciclo de Vida del Diseño Para diseñar una aplicación debemos considerar un ciclo completo de opciones que nos permitirán plasmar los requerimientos de nuestros usuarios, esto se debe realizar de manera interactiva a fin de poder conseguir los resultados necesarios de forma inmediata y hacer la entrega de lo requerida, esto son los pasos a seguir para el Ciclo de Vida del Diseño:

Conceptualización de la Idea Diseño de Interacción Diseño Visual Producción Publicación

Conceptualización de la Idea Los requerimientos de los usuarios, requieren ser plasmados en pantallas, en interfaces que les brinden la opción de poder interactuar con los datos, existen muchos métodos, muchas formas de realizar estas acciones, pero lo más importante que debemos hacer lo que nuestros usuarios requieren, siempre debemos pensar en los usuarios y no en nuestras ideas, solo podemos asesorar o aconsejar en ciertas formas y usos, pero siempre debemos anteponer lo que ellos requieren porque al final ellos son los que usaran los aplicativos. Diseño de Interacción Cuando pensamos en diseñar una aplicación, siempre debemos pensar en muchas interacciones, muchas fases y estas deben ser diseñadas con la idea de ingresar información para ser procesada y generar resultados, estas actividades deben ser graficadas y los usuarios no deben sentir esas tareas, estas deben ser muy prácticas. Diseño Visual El punto importante de todo diseño es plasmar el requerimiento en interfaces, el diseño visual es un trabajo que se de diseñar con la mejor información recaba, a fin de que los usuarios tengan plasmado lo que realmente requieren.


Página: 8 de 40 Fecha: 02/03/2015

Producción En esta fase es donde enlazamos lo que hemos diseñado con la parte de desarrollo del aplicativo, aquí tanto el diseño como el código se unen para poder hacer que se ejecuten los requerimientos de los usuarios. Publicación Diseñar una aplicación de forma aislada es muy diferente a cuando está aplicación va a hacer publicada, se van ver comportamientos un poco diferentes a cuando se diseñó e integró con el código, podemos tener un resultado diferente de la parte del diseño y para ello debemos considerar que debemos modificar ciertos objetos, controles y textos diseñados.


Página: 9 de 40 Fecha: 02/03/2015

Definir Estándares de Diseño Gráfico Debemos trabajar con un estándar de diseño gráfico, estos pueden ser creados o pueden ser solicitados a los que se les brindará el servicio de diseño, estos estándares de diseño deben contener lo siguiente:

Definir Logos e Imágenes Definir Iconos Definir Colores Corporativos Definir Textos alusivos Definir Tipos de Controles Definir Formatos de Letras

Definir logos e Imágenes Cada aplicación requiere que se trabaje con cierto tipo de Logos e Imágenes, estas deben ser normadas a fin de poder trabajar bajo un estándar y que cuando se diseñen todo tenga una armonía en cuanto a lo que se quiere mostrar con el aplicativo.

Definir iconos Las aplicaciones requiere una gran interacción con los usuarios y eso se hace a través de los controles y por lo tanto debemos diseñar los controles de una manera muy dinámica e ilustrativa, para ello vamos a requerir de manejar iconos muy representativos a cada funcionalidad, en muchos el usuario solo con ver el ícono sabe lo que reflejará. Definir Colores Corporativos Diseñar una aplicación se basa principalmente en lo que queremos reflejar, eso se demuestra en cuanto al fácil manejo del mismo, y los usuarios interactúan mucho tiempo con el aplicativo, por lo tanto requieren que el sistema refleje unos colores que no cansen la vista ni que generen distracción, debemos trabajar con colores bajos, también debemos seguir las siguientes indicaciones:

o Trabajar con colores bajos o Trabajar con colores alternos o Combinar colores con los controles o Combinar colores con los datos o Colores reflejando información


Página: 10 de 40 Fecha: 02/03/2015

Trabajar con colores bajos Diseñar una aplicación requiere hacerlo con colores que no sean muy encendidos, estos deben ser colores bajos en tonalidad, a fin de que no cansen la vista de los usuarios, podemos tomar colores tan simples como el blanco u otros alternos pero bajos en densidad, que no llamen mucho la atención, tener un color bajo en intensidad permitirá estar mucho tiempo sin interferencias ni malestar.

Trabajar con Colores Alternos Cuando diseñamos una aplicación debemos pensar en diferentes entornos y para ello debemos manejar diferentes momentos y ellos deben ser combinados con una serie de colores alternos, las imágenes representativas en un momento pueden ser blancas y en otras blancas o del color que identifique a la empresa, sino se cuenta con ello, se debe sugerir que se deben contemplar un paquete de colores alternos.

Combinar colores con los controles En el diseño de una aplicación debemos considerar el fondo de cada ventana, así como el color de cada control que manipulará los datos, es necesario que estos se estandarizan, debemos hacer las combinaciones adecuadas, por lo general se estila poner todo de un solo color a fin de no generar distorsión del entorno. Esto también se aplica en los datos que se manipulan, por lo general todos los datos se muestran en color negro y con fondo blanco, el manejo de filas a veces se realiza combinando el fondo de la filas de forma intercambiada. Colores reflejando información Cuando se diseña una aplicación se deben seguir las normas clásicas del manejo de colores de los datos, estos son los siguientes:

Color Negro: Se usa para mostrar datos estándares. Color Azul: Refleja los datos en positivo, ejemplo: cuentas a favor Color Rojo: Refleja los datos en negativo, ejemplo: deuda, saldo

negativo

Definir imágenes a Utilizar Cuando vamos a diseñar una aplicación debemos apoyar siempre en imágenes pre-creadas, esto nos ayudará con el diseño de cada pantalla y hasta podemos hacer plantillas y poderlas reutilizar, pero para ello debemos manejar una variedad de imágenes que sean un estándar para toda la aplicación, deben cumplir con el enfoque de la aplicación a desarrollar, deben ser muy ilustrativas, deben ser muy bien diseñadas y que no sean muy llamativas ni que generen distracción a los usuarios.


Página: 11 de 40 Fecha: 02/03/2015

Definir textos Alusivos Cuando se diseñan aplicaciones, siempre se manejan un paquete de mensajes que son estándares, estos son trabajados como imágenes y en gran medida como letras que son puestos en cada pantalla, como títulos, como subtítulos o como expresiones de cada pantalla. Definir Formato de Letras Siempre debemos trabajar con un estándar de tipos de letras, estos serán trabajados en el diseño de todas las pantallas de la aplicación, y tendrán un uso en particular como se indica a continuación:

o Texto de Títulos: Tipo de Letra: Arial Tamaño: 12 Color: Negro Negrita: Para resaltar el título

o Texto de Etiquetas: Tipo de Letra: Arial Tamaño: 10 Color: Negro Negrita: Si se quiere reflejar un datos importante

o Texto de Datos: Tipo de Letra: Arial Tamaño: 10 Color: Negro Negrita: Cuando se quiera resaltar algún dato


Página: 12 de 40 Fecha: 02/03/2015

Definir Prototipos de las Aplicaciones Siempre debemos diseñar prototipos de los aplicativos, debemos generar una variedad de estos modelos a fin de irlos perfeccionando y estos luego puedan generarse en productos terminados y que reflejan lo que realmente el usuario está esperando, podemos hacer lo siguiente:

o Diseño de Prototipos en Papel o Diseño de Prototipos en Herramientas

Diseño de Prototipos en Papel Cuando vamos a diseñar una aplicación, siempre es bueno brindar un bosquejo de lo que vamos a ir diseñando, estos se pueden mejorando, pero los modelos que vayamos dibujando deben ir mostrando lo que el usuario requiere. Podemos dibujar en papel o cualquier material fácil de realizar ciertos prototipos de forma rápida y que se puedan modificar de manera rápida a fin de que los requerimientos sean plasmados. Esto se muestra en la siguiente figura:

Figura.- Diseño de prototipos en papel.


Página: 13 de 40 Fecha: 02/03/2015

Diseño de prototipos en Herramientas Una vez que ya tenemos los primeros bosquejos de la aplicación que vamos a diseñar, ahora podremos utilizar una herramienta de diseño gráfico, puede ser una tan simple como una potente, lo más importante que debemos tener en cuenta es lo que queremos plasmar, aquí debemos tener en cuenta que el aplicativo será usado por los usuarios y no por el diseñador, por lo tanto debemos pensar de manera abierta y propensas a realizar cuanto cambio se requiera, en la siguiente figura se muestra un modelo de diseño hecho en una Herramienta de Diseño


Página: 14 de 40 Fecha: 02/03/2015

Estructura de una Aplicación Una aplicación permite interactuar con la información y nos muestra los resultados que vamos solicitando, es así como vamos manipulando los datos, ahora te indicamos la estructura general de toda aplicación:

Ventana de Inicio Ventana de Acceso al sistema (Login) Ventana Principal del Sistema Ventana de Mantenimiento Ventana de Procesos Ventana de Reportes Ventana de Configuración Ventana mapa del Sistema Ventana de Ayuda Ventanas complementarias


Página: 15 de 40 Fecha: 02/03/2015

Manejo correcto de la Redacción y Ortografía Diseñar una aplicación requiere un máximo esfuerzo en cuanto a la Redacción y la Ortografía, debemos poner énfasis cuando vamos diseñando y desarrollando nuestra aplicación, debemos ser muy cuidadosos con los textos que vamos manejando en la aplicación, aquí se brindan las siguientes recomendaciones:

Escribir adecuadamente los Textos Uso de los Signos de Puntuación Poner Tildes a las Palabras Usar las Abreviaciones Adecuadas Uso de Siglas Escribir con Mayúsculas y Minúsculas Definiciones acordes al Léxico del Negocio

Escribir adecuadamente los Textos Cuando diseñamos una aplicación, debemos considerar escribir bien los textos, cada frase mal redactada y mal escrita dejará un mensaje no acorde a lo que queremos plasmar, es aquí donde los creadores de aplicaciones deben ser muy meticulosos. Debemos pensar que nuestra aplicación será usada por nuestros usuarios, que nuestra aplicación será de propiedad de nuestros usuarios y ellos siempre aspiran a tener productos de calidad, y la redacción y ortografía son fuertes pilares de este punto. En esta fase no vamos a darte unas clases completas de Redacción y Ortografía, pero vamos a incidir en algunos puntos muy importantes cuando se diseña una Aplicación.

Uso de los Signos de Puntuación Los signos de puntación son parte importante cuando diseñamos una aplicación a continuación te mostramos algunas cosas que siempre debes hacer cuando diseñas una aplicación con respecto a los signos de puntuación:

o Los dos puntos: Estos siempre deben ir juntos a la palabra, por ningún motivo se debe separar, ni por alinearlos, ni para que se vea mejor.

o La coma: Se usa para poder separar frases, para dar una pausa, no la podemos usar a nuestro antojo o por estética.

o El punto: Lo debemos usar dar término a una frase o cuando escribimos varios ítems, no podemos usarlo ni dejarlo usar por simples gustos o temas de mejor vista.


Página: 16 de 40 Fecha: 02/03/2015

Poner Tildes a las Palabras Debemos ser muy exquisitos cuando escribimos frases y palabras en nuestra aplicación, debemos seguir las normas establecidas para poner las tildes a cada palabra, porque sin esto podremos incurrir en no plasmar un mensaje o un detalle de la información mostrada, a continuación mostramos algunas reglas básicas de poner tildes o no:

o Palabras Agudas: Se ponen tilde cuando se tiene la mayor fuerza voz en la última sílaba y cuando terminan en vocal o en ‘n’ o ‘s’. Ejemplo: Canción, menú.

o Palabras Graves o Llanas: Se ponen tilde cuando se tiene la mayor fuerza de voz en la penúltima sílaba y cuando terminan en todas las consonantes menos en ‘n’ o ‘s’ ni en vocales. Ejemplo: Árbol, azúcar.

o Palabras Esdrújulas: Se ponen tilde cuando se tiene la mayor fuerza de voz en la antepenúltima sílaba, se ponen a todas sin excepción. Ejemplo: Exámenes.

o Palabras Sobreesdrújulas: Se ponen tilde cuando se tiene la mayor fuerza de voz antes de la antepenúltima silaba, se ponen a todas sin excepción, Ejemplo: Rápidamente, fácilmente.

o Hiato Ortográfico: Esta es una regla, llevan tilde cuando se juntan dos vocales abiertas y cerradas y llevan la mayor fuerza de voz en la vocal cerrada (i,u), es ahí donde se pone tilde. Ejemplo: País, maíz, evalúas.

o Vocales: Las vocales no llevan tilde, la última actualización indica que incluso ni entre números la ‘o’ no lleva tilde.

Estas son algunas de las normas más usadas para poner tilde a las palabras, para un mejor resumen debemos leer las normas establecidas por la RAE, donde no solo nos brindan esas reglas, sino que nos actualiza de cómo va evolucionando ese trabajo.

Usar las Abreviaciones Adecuadas Cuando diseñamos nuestra aplicación por temas de espacio o por costumbre o por ciertas formas de escribir acostumbramos a abreviar palabras, pero debemos recordar que todas estas abreviaciones tienen una norma, y no podemos hacer abreviaciones acortando palabras por una simple forma de uso, debemos seguir las siguientes recomendaciones:

o Abreviaciones establecidas: Estas abreviaciones están establecidas, para ello debemos revisar la lista que existe para tener en claro cómo usarlas, por ejemplo: Gral.(general), doc.(documento), dpto.(departamento).

o Abreviaciones particulares: A veces se estila por reglas del usuario, aplicar ciertas abreviaciones, pero en general no debemos romper las reglas establecidas.


Página: 17 de 40 Fecha: 02/03/2015

Uso de Siglas Nuestras aplicaciones para la definición de ciertos datos usan muchas siglas, estas siglas se refieren a ciertos tipos de datos, ciertos nombres de instituciones o términos, pero estas deben seguir ciertas recomendaciones cuando diseñamos nuestras aplicaciones: - Siglas Establecidas: Aquí se debe revisar la lista de Siglas que son establecidas. - Siglas en Mayúsculas: Todas las siglas deben ir en mayúsculas, porque son las

iniciales de nombres o palabras y por lo tanto deben escribirse en mayúsculas, continuación brindamos unos ejemplos:

o Se debe escribir así:

RUC ONU DNI

o No debemos Escribir: Ruc o ruc Onu u onu Dni o dni


Página: 18 de 40 Fecha: 02/03/2015

Escribir con Mayúsculas y Minúsculas Diseñar una aplicación también se enfoca en cómo escribimos una palabra o frases, no debemos abusar de las libertades que podamos tener, debemos ver que las palabras tengan una marcialidad adecuada y que encajen en los controles y los datos reflejados tengan el espacio requerido, no podemos abusar de escribir las palabras todo en mayúsculas, a continuación indicamos algunas recomendaciones: - NO DEBEMOS ESCRIBIR TODO EN MAYUSCULAS: No debemos escribir las palabras

en mayúsculas, si bien no hay prohibiciones, no son muy estéticas y lo que queremos es realizar un buen diseño y que las palabras se noten bien, con sus tildes adecuadas y que tenga un espacio adecuado, que no se vean apretadas o más grandes que los datos de los controles.

- Debemos escribir las palabras con Mayúsculas y Minúsculas: Toda palabra sea nombre o descripción de algo tiene que ser bien diseñado y eso se basa en su buena escritura y la mejor forma es hacerlo con Mayúsculas y minúsculas según sea el caso.

Definiciones acordes al Léxico del Negocio Siempre que diseñamos una aplicación, a veces nuestros usuarios nos brindan una serie de términos que se incorporarán en nuestra aplicación a diseñar, pero estos a su vez deben respetar las normas establecidas a continuación brindamos algunas recomendaciones: - Frases Comunes: Dependiendo el rubro de nuestros usuarios, nos enviarán una serie

de frases, estas deben ser cotejadas con las normas establecidas y escribirlas como deben ser.

- Abreviaciones: Por comodidad o por ciertas costumbres nuestros usuarios usan una variedad de abreviaciones que no cumplen las normas, en este caso debemos llegar a un acuerdo a fin de no diseñar aplicaciones con estas deficiencias y en lo posible tratar de adecuarlas a las normas establecidas.

- Siglas: También es común que algunos usuarios manejan ciertas siglas propias del negocio y en este punto también debemos llegar a un buen acuerdo, tenemos que recordar que el buen diseño también depende de esto, todo debe ser basado en las reglas establecidas.


Página: 19 de 40 Fecha: 02/03/2015

Uso de Imágenes en las Aplicaciones En el diseño de las Aplicaciones, debemos usar imágenes según el tipo de necesidad, estos también varían por lo que queremos mostrar:

Imágenes de Fondo Imágenes Ilustrativas Imágenes de Iconos Tipos de imágenes

- PNG - JPG - BMP - GIF


Página: 20 de 40 Fecha: 02/03/2015

Diseño del Menú Las aplicaciones siempre cuentan con un Menú y esto se ve reflejado en forma de texto o en forma gráfica, pero debemos siempre seguir los lineamientos del mercado y estos son los siguientes:

Diseñando un Menú Diseño del Menú Principal Diseño del Menú de las Páginas Diseño del Menú de Reporte Diseño del Menú Popup Los Accesos rápidos

Diseñando un Menú El diseño de un Menú debe ser bien práctico, debemos basarnos por un estándar común de diseño de un Menú, sus opciones, sus accesos y la distribución de acceder, todo eso debe manejar un estándar, si bien es cierto que vamos a mostrar las opciones de la aplicación de nuestros usuarios, debemos estos ceñirlos a las recomendaciones del mercados, y esto se muestra en la gráfica.

Figura.- Diseño de un Menú.


Página: 21 de 40 Fecha: 02/03/2015

Diseño del Menú Principal Todo sistema consta de un Menú principal, es aquel que va a permitir manipular todo el sistema, y para ello debemos de conocer que va a realizar el sistema, pero todo sistema siempre tiene una estructura básica para poder diseñar las opciones del Menú, que son las siguientes:

Archivo Editar Ver Mantenimientos Procesos Configuración Reportes Ventanas Ayuda

Figura.- Menú de la Aplicación Principal. Las opciones principales del Sistema tienen sub opciones que permiten operar las ventanas que han sido abiertas, por lo general tienen una siguiente estructura:

Archivo o Nuevo o Abrir o Editar o Grabar o Grabar Como.. o Imprimir o Configurar Impresora o Salir

Editar o Ver o Copiar o Pegar o Cortar

Ver o Editar

Mantenimientos o (Aquí se ponen todos los Mantenimientos del Sistema, Ejemplo: Area)

Procesos o (Aquí se ponen todos los Procesos del Sistema, Ejemplo: Facturación)

Configuración o Configuración del Sistema

Reportes o (Aquí se indica los reportes categorizados)


Página: 22 de 40 Fecha: 02/03/2015

Ventana

o Ventana Vertical o Ventana Horizontal

Ayuda o Ayuda o Acerca de…

Diseño del Menú de las Páginas Para nuestros sistemas debemos crear un Menú que permita manipular la información de la ventana que vamos a operar, estas opciones pueden ir referenciadas al ingreso y actualización de datos, debemos considerar lo siguiente:

- El uso de la Opción: Este Menú debe contemplar las operaciones que realizará la ventana a utilizar, por ejemplo: Un mantenimiento debe contener opciones de altas bajas y cambios.

- Seguir las normas de diseño: Por lo general todo diseño de Menú maneja un estándar, desde la opción nueva hasta la opción salir de la ventana.


Página: 23 de 40 Fecha: 02/03/2015

Diseño del Menú de Reporte Cada aplicación siempre va a requerir mostrar reportes y estos deben ir acompañados de Menús acordes a esa manipulación de datos, debemos manejar una forma estándar de poderlos diseñar y podemos seguir lo siguiente:

Diseño del Menú Reporte Opciones del Menú Reporte Diseño del Menú Reporte Debemos diseñar un Menú Reporte fácil de usar, nuestros usuarios deben poder usar en muchos casos sin la necesidad de instruirlos, para llegar a este nivel debemos ser bien prácticos y debemos seguir las siguientes recomendaciones: - Diseño bajo un estándar - Menú Reporte intuitivo - Uso de Iconos Representativos

Figura.- Diseño de un Menú Reporte.


Página: 24 de 40 Fecha: 02/03/2015

Opciones del Menú Reporte Un Menú para un reporte tiene un diseño estándar, pero siempre es bueno recordarlo y a continuación te brindamos las opciones que debe contener el Menú:

- Guardar - Exportar - Imprimir - Regla - Zoom - Copiar - Inicio, Siguiente, Anterior y Fin de Página

Figura.- Opciones del Menú Reporte


Página: 25 de 40 Fecha: 02/03/2015

Diseño del Menú Popup Para manipular las aplicaciones aparte de los accesos directos debemos crear Menú Popup, aquellos que sean fáciles de acceder haciendo click derecha en una ventana, estas opciones tendrán una serie de directivas que permitirán realizar una actividad, para el diseño de estos objetos debemos tomar en cuenta lo siguiente:

Figura.- Menú Popup.

Los Accesos rápidos Todo Menú para que sea fácil de operar debe contar con sus accesos rápidos, podemos acceder a las opciones del sistema a través del mouse, pero una forma práctica es con una combinación de teclas y poder operar el sistema, a continuación te indicamos como realizar este diseño:

Figura.- Accesos rápidos.


Página: 26 de 40 Fecha: 02/03/2015

Diseño de Páginas de Inicio Toda aplicación siempre contiene una página de inicio, una página donde se le solicita los datos básicos al usuario para que pueda ingresar al sistema, para el diseño del mismo se recomienda hacer lo siguiente:

Diseño de la Página de Inicio Controles de la Página de Inicio Mensajes de las Páginas de Inicio Validaciones de las Páginas de Inicio

Diseño de la Página de Inicio

Figura.- Diseño de Página de Inicio.


Página: 27 de 40 Fecha: 02/03/2015

Diseño de Formularios Las aplicaciones siempre requieren del ingreso de datos y eso se realiza en los formularios, es aquí donde debemos seguir ciertas recomendaciones a fin de que nuestros formularios sean fáciles de usar:

Diseño de un Formulario Diseño de los Controles Diseño de las Etiquetas Diseño de los Datos

Diseño de un Formulario Un Formulario es el control más usado en toda Aplicación, este objeto debe ser diseñado de la mejor manera, debemos seguir todas las normas vertidas y basarnos en un estándar, aquí se trabajaran con controles, etiquetas para poder manipular los datos.

Diseño de los Controles

Para diseñar un formulario debemos de usar los controles clásicos, estos son las etiquetas y los campos de ingreso de datos, así como controles adicionales como con imágenes para manipular los datos, debemos tener en cuenta algunas recomendaciones: Alinear Controles: o Etiquetas: Se alinean a la derecha o Campos de Texto: Se alinean a la izquierda o Campos Fecha: Se centran los datos o Campos Numéricos: Se alinean a la derecha

Figura.- Diseño de Formulario.


Página: 28 de 40 Fecha: 02/03/2015

Diseño de las Etiquetas

Las etiquetas reflejan la información que vamos a manipular y estas requieren que sean bien diseñadas, se deben respetar las normas de redacción y ortografía, debemos aplicar las mejores prácticas, y ahora te brindamos algunas recomendaciones: o Se debe poner el texto en Mayúsculas y Minúsculas o Las Siglas van en Mayúsculas o Se deben usar las abreviaciones estándares o Se pueden usar términos conocidos en el mercado

Figura.- Diseño de las Etiquetas.

Diseño de los Datos

En el diseño de nuestra aplicación debemos incidir que los datos que se muestran y manipulan deben manejar un estándar de visualización, y esto ayudará a que nuestro diseño sea equitativo, el orden y la distribución debe ser adecuado y con esto lograremos una aplicación de mucha calidad, a continuación les brindamos unas recomendaciones: o Etiquetas: Se alinean a la derecha o Campos de texto: Se alinean a la izquierda o Campos fecha: Se centran los datos o Campos numéricos: Se alinean a la derecha o Centrar datos: Se centra todo tipo de datos string que mantenga el mismo tamaño, por

ejemplo: RUC, DNI o códigos que manejen el mismo tamaño.


Página: 29 de 40 Fecha: 02/03/2015

Diseño de Grillas Una aplicación siempre cuenta con tipo de listados y acceso de datos, y para estos muy útiles las grillas, pero debemos considerarlos diseñar de una manera adecuada para poder maximizar su uso:

Diseño de una Grilla Diseño de los Controles Diseño de las Etiquetas Diseño de los Datos

Diseño de una Grilla Una Grilla es un control que nos permite manipular los datos, se pueden usar como detalles, como búsquedas y hasta en reportes, permite ordenarlos, permiten filtrarlos, manejan una serie de opciones estándares.

Diseño de los Controles

Las grillas tienen por lo general controles base que son las etiquetas y los campos de datos, estos reflejan la información a manipular, también en varios controles se agregan controles para agrupar información o para mostrar algún tipo de suma, promedios o algunas variantes.

Figura.- Diseño de los Controles.

Diseño de las Etiquetas

Todas las etiquetas de los controles deben ser centrados, y se deben describir adecuadamente, si se requiere espacio se deben utilizar las abreviaciones adecuadas, para un mejor estándar se debe usar el mismo tipo y tamaño de letra.

Figura.- Diseño de etiquetas de los controles.


Página: 30 de 40 Fecha: 02/03/2015

Diseño de los Datos

Diseñar los datos en los controles grilla se basan en unas reglas muy simples y estas las indicamos a continuación:

o Datos string a la derecha: Son aquellos que describen y tienen una variedad de datos.

o Datos string centrados: Se centran aquellos tipos de datos que tengan la misma cantidad de caracteres, ejemplo: RUC, DNI y cualquier código.

o Datos numéricos: Se alinean a la derecha. o Datos fecha: Se centran porque tienen la misma cantidad de caracteres

Figura.- Ordenar bien losa datos en los controles.


Página: 31 de 40 Fecha: 02/03/2015

Diseño de Pantallas de Búsqueda Para poder acceder fácilmente a cualquier dato es necesario contar con objetos que nos permitan esta tarea, a veces solo basta buscarlo en un listado, pero cuando los datos son muy extensos se requiere que utilicen objetos de búsqueda y para el diseño de esos objetos debemos seguir lo siguiente:

Diseño del objeto de Búsqueda Diseño de los Controles Diseño de las Etiquetas Diseño de los Datos

Figura.- Objeto de Búsqueda.


Página: 32 de 40 Fecha: 02/03/2015

Diseño de Reportes La información ingresada es reflejada de diferentes formas, pero lo más común es mostrarlo a través de los reportes, estos cumplen diferentes funcionalidades, muestran listados, indicadores, resúmenes, debemos seguir las siguientes recomendaciones:

Diseño de un Reporte Diseño de los Filtros Tipo de Reportes Diseño de los controles en los Reportes Diseño de los textos en los Reportes Uso de imágenes en los Reportes

Figura.- Filtro para el Reporte.


Página: 33 de 40 Fecha: 02/03/2015

Figura.- El Reporte de Datos.


Página: 34 de 40 Fecha: 02/03/2015

Diseño de Mensajes de Respuesta Cada aplicación debe manejar los mensajes correctos, cuando se interactúa con la aplicación, esto conlleva a que podemos enviar mensajes de pregunta, mensajes de confirmación o mensajes derivados de algunas validaciones o errores, y esto se resumen en hacer lo siguiente:

Diseñando los Objetos de Mensajes Diseño de los Controles Diseño de las Etiquetas Diseño de los Datos

Figura.- Mensaje de Actualización.

Figura.- Mensaje de Error.


Página: 35 de 40 Fecha: 02/03/2015

Diseño de las Ayudas Toda aplicación cuenta con ayudas que brindan información a los usuarios, es de vital importancia que la información sea redactada adecuadamente y siguiendo un orden no se deben redundar en ambigüedades, se puede realizar lo siguiente:

Diseño de los resúmenes Diseño de los detalles de información Agregar imágenes Ejemplos de soluciones Conclusiones


Página: 36 de 40 Fecha: 02/03/2015

Uso de Colores en las Aplicaciones Para diseñar una aplicación, se deben usar colores estándares, y se deben tener en consideración lo siguiente:

Uso de los colores en las Aplicaciones Uso de colores en la Pantalla Principal Uso de colores en los Formularios Uso de colores para los Textos Uso de colores para los Controles Uso de colores en los Reportes

Diseño de Controles en una Aplicación Una aplicación siempre consta de una diversidad de controles que nos permiten manipular la aplicación y los datos y estos se pueden categorizar de varias formas, ahora te indicaremos de una manera práctica como los debes manejar:

Diseñar una Aplicación con Controles Tipos de Controles Los Controles y los Colores

Diseñar una Aplicación con Controles Una aplicación siempre cuenta con controles, estos nos van a permitir poder manipular los datos que se trabajarán en ella, y es necesario poder seguir un estándar adecuado de diseño, por lo general se manejan controles típicos como botones, textbox y etiquetas, estos controles deben ser agrupados y alineados de la manera correcta.

Tipos de Controles Las aplicaciones manejan una variedad de controles, estos tienen una funcionalidad en particular, estas son para invocar acciones, para mostrar datos, para indicar acciones y otras son simplemente decorativas, a continuación les brindamos un grupo de estos tipos de controles que se usan cuando se diseñan aplicaciones: Invocar acciones:

o CommandButtons o PictureButtons o PictureHyperLinks o StaticHyperLinks o Tabs o User Objects

Mostrar o aceptar datos: o ListBoxes o PictureListBoxes o DropDownListBoxes o DropDownPictureListBoxes o StaticText o ListViews o TreeViews o RichTextEdit o Graphs

Indicar las opciones:


Página: 37 de 40 Fecha: 02/03/2015

o RadioButtons o CheckBoxes o TrackBars

Decorativas: o Line o Rectangle o RoundRectangle o Oval

Los Controles y los Colores Cuando diseñamos una aplicación debemos tener seguir las normas específicas de diseño, debemos diseñar los controles con las recomendaciones brindadas a fin de tener un buen producto, a continuación brindamos las siguientes recomendaciones:

o El fondo de color de los Controles o El color de las Letras

El fondo de color de los Controles Cada ventana de la aplicación contiene una variedad de controles, y estos deben ser diseñados de la mejor manera, para que la aplicación no sea tan agresiva en cuanto a los colores que maneja, el color de los fondos de los controles deben seguir las siguientes recomendaciones: - Colores no muy intensos: Cuando diseñamos los controles debemos agregarles

fondos de colores no muy intensos, estos deben ser colores que permitan manejar una marcialidad de baja intensidad.

- Colores institucionales: Debemos trabajar con los colores institucionales, estos fondos deben ser manejados de la manera, si son muy fuertes como el rojo, debemos cambiarlos por otros colores alternos, pero no variando tremendamente.

El color de las Letras Cuando diseñamos nuestros controles deben considerar agregarles un color adecuado a las letras, el buen diseño se basa en poder manejar los colores de la mejor manera y que estos guarden una armonía, a continuación brindamos unas recomendaciones:

- Color de las Letras: Debemos agregarles un color firme y que sea fácil de leer y estos pueden ser los siguientes: o Negro: Este tipo de color es común usarlo, porque permite una fácil lectura. o Azul: Se usa para reflejar datos positivos, pero no debemos abusar de ello. o Gris: Este tipo de color es común usarlo, pero no se recomienda porque es

difícil de leer, y en estos tiempos debemos manejar colores fáciles de leer.

- Colores Alternos de las Letras: En una aplicación siempre vamos a manejar una variedad de interfaces, así como brindar cierto tipo de información y esto puede ser reflejado en el tipo de letra que vamos manejando y para esto se usan los colores alternos, te brindamos unas recomendaciones: o Fondo de los Controles: Si el fondo de los controles es fuerte como el azul,

debemos considerar manejar el tipo de color blanco para las letras y así en ese orden, pero siempre considerando no hacer muy encendido ni difícil de leer las letras.

Como norma general se recomienda usar un mismo color de las letras, para que estas guarden una armonía general y nuestra aplicación no genere efectos opuestos a la vista.


Página: 38 de 40 Fecha: 02/03/2015

Diseño de Accesos Directos Una Aplicación debe ser diseñada para ser fácil de manipular y eso se puede realizar diseñando adecuadamente los objetos y los controles del mismo, pero también debemos seguir las siguientes recomendaciones:

Accesos directos Estándares Acceso directo a los Objetos Acceso directo a los Controles

Accesos directos Estándares Todas las aplicaciones del mercado cuenta con accesos directos estándares, uno ya está acostumbrado a esos teclados y por ende debemos guiarnos por esas normas ya establecidas, se debe tener cuidado con los accesos directos en Español e Inglés, te indicaremos, a continuación los accesos directo en Español: Ctrl + N = Nuevo Ctrl + G = Grabar Ctrl + A = Abrir Ctrl + I = Imprimir Ctrl + S = Salir Shift + F1 = Ayuda

Figura.- Configuración de Accesos Directos.


Página: 39 de 40 Fecha: 02/03/2015

Acceso directo a los Objetos Para facilitar los trabajos a los usuarios podremos agregarles unas opciones que le permitan poder configurar sus accesos directo, esto con la finalidad de hacer más fácil su trabajo, esta opción debe permitir escanear el aplicativo y permitirle agregarle los acceso directos convenientes como se muestra en la imagen:

Figura.- Configuración de Acceso Director.


Página: 40 de 40 Fecha: 02/03/2015

Acceso directo a los Controles Cuando se diseñan las aplicaciones, uno le brinda al usuario muchas facilidades de uso de las aplicaciones, los más comunes son aquellos cuando se inicia la aplicación, que la referencia a Acepta es igual al Enter y el Salir se relación a la tecla Esc, pero a su vez debemos diseñar todas nuestras ventanas con los acceso directos correspondientes y a estos se les conoce como Acelerator Keys, a los cuales se puede acceder con la combinaciones de las teclas Alt + C por ejemplo.

Figura.- Acelerator Keys en la letra A y C. Para definir estos accesos directos, debemos realizar una lista de controles a trabajar, por regla siempre se estila hacerlo con la primera letra y cuando se tiene igual de inicio se usa la segunda letra.

Documents

TechEra - DiseÃ±o de Aplicaciones - Marzo 2015