Ingeniería De Software II
Análisis, diseño, Implementación, Documentación y Pruebas.
Ing. Cristian Alejandro Escobar
Diseño Efectivo Entradas
“Los usuarios merecen una salida de calidad,
en buena medida, la calidad de la entrada del
sistema determina la calidad de su salida ”
Es vital que los formularios de entrada, pantallas
se diseñen teniendo en cuenta esta relación
crítica.
Lineamientos ❖ 1. Que los formularios sean fáciles de llenar.
para la ❖ 2. Que cumplan con el propósito para el que se
diseñaron.
creación de ❖ 3. Que su diseño contribuya a que se completen
con precisión.
Formularios ❖ 4. Que sean atractivos.
1. Hacer que los formularios sean fáciles de llenar
❖ Es tener un flujo apropiado para el formulario para reducir el
tiempo y esfuerzo que invierten los usuarios al llenarlo.
COMO LO LOGRAMOS?
❖ Agrupar la información en forma lógica, es decir dividir el
formulario en secciones:
✓ 1. Encabezado.
✓ 2. Identificación y acceso.
✓ 3. Instrucciones.
✓ 4. Cuerpo.
✓ 5. Firma y verificación.
✓ 6. Totales.
✓ 7. Comentarios.
2. Cumplir con el propósito previsto
❖ Los formularios se crean para servir a uno o más propósitos en los procesos de
registrar, procesar, almacenar y recuperar la información para las empresas.
❖ Es decir no crear formularios sin tener en cuenta lo que se quiere de el.
Por lo general, las tasas de errores asociadas con la
recolección de los datos disminuyen de manera
considerable cuando los formularios se diseñan de tal forma
que sea obvia la manera en que deben completarse con
3. Asegurar que precisión.
se llenen en
forma precisa
VS
4. Mantener los
formularios atractivos
❖ Aunque dotar a los formularios de atractivo se
deja al último, esto no significa que sea
menos importante: se hace de esta forma
debido a que para producir formularios
atractivos hay que aplicar las técnicas
descritas en las secciones anteriores.
Los formularios estéticos atraen a las personas y
éstas se sienten animadas para completarlos.
Que hacer para
cumplir con los
4 Lineamientos?
Mantener la pantalla Simple
Presentación de pantallas
consistente.
Facilitar el movimiento entre
pantallas
Crear pantallas atractivas y
agradables
Mantener la El primer paso para el buen diseño de pantallas es mantener
la pantalla simple. La pantalla debe mostrar sólo lo
pantalla necesario para la acción específica a realizar. Para el usuario
ocasional, el 50 por ciento del área de la pantalla debe
simple contener información útil.
Es el segundo paso para el buen diseño de pantallas. Si los
usuarios trabajan con formularios en papel, las pantallas
deben seguir lo que se muestra en papel. Podemos mantener
Mantener la la consistencia en las pantallas si ubicamos la información
en la misma área cada vez que se acceda a una nueva
pantalla pantalla. También, la información que debe estar junta por
consistente lógica también se debe agrupar en forma consistente,
Aunque la pantalla debería tener un movimiento natural de
una región a otra, la información no se debe traslapar de un
grupo a otro.
Ejemplos
Usar los mismos tipos de letras.
Posicionar los botones en el mismo
sitio para todos los Forms.
Usar los mismos icono para expresar
una acción.
Usar los mismos formatos de fecha
Es decir facilitar el proceso de pasar de una página/pantalla
a otra. Por ejemplo: La regla de los “tres clics” establece
que los usuarios deben ser capaces de llegar a las
páginas/pantalla que necesitan en tres clics de ratón o de
teclado como máximo.
Los formularios basados en Web facilitan el movimiento
Facilitar el mediante el uso de hipervínculos a otras páginas Web
relevantes.
movimiento
Otro método común de movimiento es hacer que los
usuarios se sientan como si estuvieran cambiando
físicamente a una nueva página. Esta ilusión de movimiento
físico entre pantallas se puede obtener al desplazarse
mediante flechas, ventanas desplegables sensibles al
contexto o un cuadro de diálogo en pantalla.
Sugerencias:
Uso de Tabs o pestañas para agrupar
en un solo Form. Información en
común.
Usar Tab-index correctos y
homogéneos.
Usar Link para ir de una ventana a
otra.
Usar ventanas de tipo modal, para
abrir otra ventana, sin dejar la anterior
Usar Asistentes del tipo paso a paso.
El cuarto paso es crear una pantalla atractiva para el usuario.
Si los usuarios encuentran que las pantallas son agradables,
Diseñar una es probable que sean más productivos, necesiten menos
supervisión y cometan menos errores. Las pantallas deben
pantalla atraer a los usuarios y mantener su atención.
atractiva y Para lograr este objetivo las pantalla deben tener una
apariencia ordenada. Nunca hay que atiborrar un formulario
agradable de información; Es mucho mejor usar varias ventanas o
hipervínculos que tratar de meter todo a la fuerza en una
sola página.
Ejemplo:
Un Formulario “atiborrado”
Sugerencias:
Uso de iconos atractivos
Uso de plantilla prefabricadas.
Usar imágenes atractivas.
Interface Grafica
para el Usuario
Que es? Para que Sirve?
Es el entorno visual de imágenes y objetos Su función principal es simplificar la
mediante el cual una máquina y un usuario comunicación entre la máquina y/o un sistema
interactúan con el usuario
Principales
componentes:
TextFields.
Buttons
Checkboxes
Radio Buttons
Text Areas
ComboBoxes
Listas
Mapa de imágenes
Spinner
Tablas o Grids
Cuadros de diálogos.
ETC…
UXI
La Interfaz de Experiencia de usuario es cómo se sienten cuando miran una
pantalla, un formulario o un sitio Web.
Tiene que ver mas con la experiencia de uso que con los componentes
visuales de la interfaz.
Un Ejemplo:
Otro Ejemplo:
• Diseño de interacción. • Diseño visual.
• Arquitectura de información. • Diseño gráfico.
• Escenarios. • Tipografía.
• Búsqueda de usuarios. • Colores del sistema.
• Wireframe (Esquema de página) y prototipos. • Layouts (Esquema de distribución de los elementos).
La persona que realiza la interfaz de usuario, es un diseñador crea elementos interactivos que estén acorde a la Interfaz del usuario.
Este tipo de diseñadores se encargan de :
• Diseño gráfico, Artes visuales. Tecnología, Desarrollo de Productos Digitales.
• Diseño de elementos.
• Diseño visual.
• Guías de estilo.
La persona encargada del UX, es conocida como UX Designer, como parte de su trabajo está el investigar lo que las personas
desean y necesitan para cumplir con sus metas y solucionar sus problemas.
Se encarga de valorar el sitio web, aplicación o sistema, en base a la usabilidad y facilidad de navegar a través de este
Preguntas?
Si no.
Entonces:
