GESTIÓN DE FORMACIÓN PROFESIONAL INTEGRAL

PROCEDIMIENTO DESARROLLO CURRICULAR

GUÍA DE APRENDIZAJE

1. IDENTIFICACIÓN DE LA GUÍA DE APRENDIZAJE

 Denominación del Programa de Formación: Tecnólogo en Análisis y Desarrollo de Sistemas de

Información.
 Código del Programa de Formación: 228106
 Nombre del Proyecto: Sistema integral web para gestión de procesos educativos del CEET.
 Código del Proyecto: 576887
 Fase del Proyecto: Análisis
 Actividad de Proyecto: Construir un prototipo usando, mokups, wireframes e implementarlo
usando diseño web que cumplan con la necesidades del cliente
 Competencia: 220501033 Diseñar el sistema de acuerdo con los requerimientos del cliente.
 Resultados de Aprendizaje Alcanzar: RA-10 220501033 03 Construir el prototipo del sistema de
información, a partir del análisis de las características funcionales del sistema en relación con
facilidad de manejo, funcionalidad y experiencia del usuario, apoyado en software aplicado según
protocolos de diseño.
 Duración de la Guía: 30 horas

2. PRESENTACIÓN

https://www.google.com/imgres?imgurl=https%3A%2F%2Fpreviews.123rf.com%2Fimages%2Faurielaki%2Faurielaki1508%2Faurielaki150800069%2F44413313-dise%25C3%25B1o-de-interfaz-gr%25C3%25A1fica-de-usuario-para-la-
usabilidad-y-experiencia-de-usuario-de-mejoramiento-interac.jpg&imgrefurl=https%3A%2F%2Fes.123rf.com%2Fphoto_44413313_dise%25C3%25B1o-de-interfaz-gr%25C3%25A1fica-de-usuario-para-la-usabilidad-y-experiencia-de-
usuario-de-mejoramiento-
interac.html&docid=syrOWGGS2bfEVM&tbnid=0wuxlQHMOh5YTM%3A&vet=10ahUKEwiM3bTSksHjAhUpo1kKHUkBCx8QMwhCKAAwAA..i&w=1300&h=1300&bih=608&biw=1366&q=INTERFAZ%20GR%C3%81FICA%20DE%20USUARIO
&ved=0ahUKEwiM3bTSksHjAhUpo1kKHUkBCx8QMwhCKAAwAA&iact=mrc&uact=8

Cuando nos encontramos en el diseño y desarrollo de un software es relevante el diseño de la interfaz de

usuario “GUI” que está formado por imágenes y objetos gráficos, que representan la información y acciones
que se encuentran en el entorno visual fácil de usar para que fluya la comunicación son el sistema operativo.

GFPI-F-019 V3
 SERVICIO NACIONAL DE APRENDIZAJE SENA
Procedimiento de Desarrollo Curricular
GUÍA DE APRENDIZAJE

En un elevado porcentaje las empresas tiene personal especializado para realizar la interfaz gráfica de
usuario sin embargo en otras los desarrolladores les toca asumir la responsabilidad de esta labor.

En el proceso de diseño de software es fundamental que la interfaz de usuario sea diseñada para que se
ajuste a las expectativas de los usuarios, puesto que genera la interacción entre el software con el usuario,
es muy importante entonces que esta interfaz cumpla con los requerimientos del sistema, sea amigable,
flexible, funcional y tener en cuenta los atributos de usabilidad.

A través del desarrollo de esta guía, el aprendiz reconocerá las características relevantes para construir una
interfaz gráfica de usuario y la importancia de la interacción de dos elementos primordiales, la interacción
del usuario y la presentación de la información.

3. FORMULACIÓN DE LAS ACTIVIDADES DE APRENDIZAJE

Durante esta actividad los aprendices deben estar prestos a la socialización de la introducción al tema
que brinda el instructor, seguidamente consultar en la web y en el material de apoyo de blackboard la
importancia de realizar un amigable interfaz gráfica de usuario que cumpla con la interacción entre el
usuario y el software.

Las actividades se realizan de forma presencial en la formación con la orientación del instructor y de
manera autónoma con la revisión del material de apoyo, referencias bibliográficas y con la elaboración
de actividades.

 Ambiente Requerido
El ambiente de aprendizaje debe estar conformado por:
22 Equipos con los requerimientos mínimos:
 Sistema operativo: Windows
 Disco Duro: 400 GB
 Ram: 2GB como mínimo
 Procesador: Intel Core 2Duo de 2,66 Mhz
 Mesas y sillas
1 Servidor de aplicaciones
Conexión a Internet permanente
 Materiales
Computadores de escritorio y portátiles con acceso a internet, software de aplicación para realizar
informes y visualizar material digital.
 SERVICIO NACIONAL DE APRENDIZAJE SENA
Procedimiento de Desarrollo Curricular
GUÍA DE APRENDIZAJE

3.1 Actividades de reflexión inicial

La interfaz gráfica de usuario sugiere un límite compartido entre dos entidades disímiles, que facilita el
traspaso de información de una a otra. Por ejemplo, en el caso de la relación usuario/computadora, la
interfaz consiste generalmente en una pantalla, un teclado y un mouse. La interfaz gráfica de usuario resulta
el vínculo entre un humano y un dispositivo o sistema, que le permite interactuar con él, recurriendo a
referencias visuales a fin de facilitar el uso.

Una interfaz efectiva será aquella que facilite al máximo posible el uso de la aplicación al usuario, reduciendo
el tiempo requerido de lo que se conoce como curva de aprendizaje y maximizando la productividad. De
este objetivo surgen los conceptos de Experiencia de Usuario y Usabilidad. En este campo quedan fuera de
alcance los juicios de valor acerca de la belleza estética.
En parejas de trabajo deben consultar en la web la historia y evolución de la interfaz gráfica de:

 Windows
 Mac
 Android
 Ios

Responda,
1. ¿Cuáles son los avances que consideró más significativos en cada uno y porque?
2. ¿Cuál interfaz le pareció más sencilla de usar?.
3. ¿Cuál fue la gama de colores usada más significativa?

3.2 Actividades de contextualización e identificación de conocimientos necesarios para el aprendizaje.

En parejas de trabajo los aprendices deben investigar para realizar un mapa conceptual que responda a los
siguientes interrogantes:

1. ¿Qué es una interfaz gráfica de usuario?

2. ¿Cuáles son los tipos de interfaz de usuario?

Seguidamente el instructor realiza una contextualización a los aprendices acerca de los interrogantes
propuestos, los objetivos de posicionar un producto o servicio que determine el éxito en una empresa se
multiplicaron y la interfaz gráfica se afirma como una de ellas, a partir de su rol de vínculo de interacción
con el usuario.

3.3 Actividades de Apropiación del conocimiento

El encargado de la construcción de la interfaz gráfica debe considerar un análisis funcional que contempla
interpretar la experiencia del usuario que interactuará con la interfaz con el fin de lograr una experiencia
 SERVICIO NACIONAL DE APRENDIZAJE SENA
Procedimiento de Desarrollo Curricular
GUÍA DE APRENDIZAJE

de usuario satisfactoria, que sea usable por el individuo medio dentro del target al que se apunta y los
requerimientos del sistema. Algunos principios a tener en cuenta en el diseño es incluir mecanismos para
permitir a los usuarios recuperarse de los errores, proporcionar retroalimentación significativa y
características de ayuda entre otros.

https://www.movilzona.es/2018/10/25/imagenes-interfaz-samsung-experience-10-android-9-pie-en-el-galaxy-s9/

En el proceso del diseño de la interfaz de usuario, es importante analizar y comprender las necesidades de
usuario, realizar en papel el diseño del prototipo en papel, evaluarlo con los usuarios finales, realizar el
diseño dinámico del prototipo, evaluarlo, ejecutarlo e implementar la interfaz de usuario definitiva, en todo
el proceso anterior siempre debe estar involucrado el usuario.

En parejas de trabajo investigar y responder de acuerdo a las instrucciones del instructor:

1. ¿Cuáles son los principios de diseño de las interfaces de usuario?

2. ¿Cuáles son las fases para el diseño de interfaz de usuario, describa e ilustre cada una?
3. ¿Qué son mockups?
4. Ilustre con un ejemplo los tipos de interfaz de usuario
5. ¿Mencione 5 herramientas de software para el diseño de interfaces e investigue sin son libre o
propietario?
6. ¿Mencione las diferencias entre cada uno de los siguientes conceptos sketch, mokup, wireframe
y prototipo?
7. ¿Por qué es importante el diseño de la interfaz del usuario?
 SERVICIO NACIONAL DE APRENDIZAJE SENA
Procedimiento de Desarrollo Curricular
GUÍA DE APRENDIZAJE

8. ¿Por qué considera importante que las interfaces se ajusten a las habilidades, expectativas y
experiencias de los usuarios del sistema de información?

3.4 Actividades de transferencia del conocimiento BALSAMIQ caso de estudio y proyecto mockups
de interfz gráfica de usuario de proyecto. Taller prototipo para Caso de estudio.

En la parte empresarial hay ideas que sólo entran

por los ojos, de ahí la necesidad de crear mockups
espectaculares que calen en el cliente y brinden los
requerimientos del sistema antes de su puesta en
marcha. Antiguamente bastaba con una pequeña
maqueta o con unos esbozos en papel, pero las
herramientas actuales permiten crear animaciones,
vídeos o mockups interactivos en un periodo de
tiempo relativamente corto y con ayuda de recursos
gráficos prediseñados.
Balsamiq, es una aplicación/servicio que facilita y
agiliza la creación de bocetos, cuenta con una
aplicación nativa para OS X (también Windows y
Linux) y una versión web, su finalidad no es otra que
ayudar al desarrollo de aplicaciones con una
herramienta que facilita la creación de esquemas,
tan rápido como dibujar con lápiz en una hoja, con
la ventaja que las herramientas digitales ofrecen.

https://www.applesfera.com/aplicaciones-os-x-1/balsamiq-mockup-una-muy-buen-herramienta-para-esbozar-tus-futuras-apps

La anterior es una de las múltiples herramientas de software que encontramos para construir mockups,
como actividad en parejas de acuerdo a las indicaciones del instructor desarrollar los mockups propuestos
para el caso de estudio y en los equipos de trabajo del proyecto formativo, de acuerdo a los casos uso
planteados realizar los mockups pertinentes.

4. ACTIVIDADES DE EVALUACIÓN
 SERVICIO NACIONAL DE APRENDIZAJE SENA
Procedimiento de Desarrollo Curricular
GUÍA DE APRENDIZAJE

Evidencias de Aprendizaje Criterios de Evaluación Técnicas e Instrumentos de

Evaluación

Evidencias de Conocimiento : Identifica las principales características

para la interfaz gráfica de usuario.
Mapa mental interfaz gráfica Lista chequeo
de usuario.
Cuestionario en línea

Evidencias de Desempeño: Participa activamente con las Observación directa

Desarrollo de Talleres y
actividades en la formación.
Sustentación de prototipos
elaborados.
Valoración actitudinal frente al
proceso.
actividades propuestas en los talleres.
Entrega las actividades con
pertinencia, vigencia, autenticidad y Lista de chequeo
calidad.
Reconoce los diferentes ítems a usar
con la herramienta.

Evidencias de Producto: Cuestionario

Desarrollo de los mockups de
interfaz gráfica de usuario del
proyecto formativo.
Taller prototipo para Caso de
estudio.
Elabora los mockups aplicando los Lista de chequeo
principios de diseño de las interfaces
de usuario, utilizando de manera
correcta los recursos de la
herramienta.

GLOSARIO DE TERMINOS

Interfaz de usuario: La interfaz de usuario es el medio con que el usuario puede comunicarse con una
máquina, un equipo o una computadora, y comprende todos los puntos de contacto entre el
usuario y el equipo. Normalmente suelen ser fáciles de entender y fáciles de accionar.
 SERVICIO NACIONAL DE APRENDIZAJE SENA
Procedimiento de Desarrollo Curricular
GUÍA DE APRENDIZAJE

GUI: La interfaz gráfica de usuario, conocida también como GUI (del inglés graphical user interface) es
un programa informático que actúa deinterfaz de usuario, utilizando un conjunto de imágenes y objetos
gráficos para representar la información y acciones disponibles en lainterfaz. Su principal uso, consiste
en proporcionar un entorno visualsencillo para permitir la comunicación con el sistema operativo de una
máquina o computador.

Prototipos: Un prototipo en software es un modelo del comportamiento del sistema que puede ser
usado para entenderlo completamente o ciertos aspectos de él y así clarificar los requerimientos... Un
prototipo es una representación de un sistema, aunque no es un sistemacompleto, posee las
características del sistema final o parte de ellas.

Usabilidad: se refiere a la facilidad con que las personas pueden utilizar una herramienta particular o
cualquier otro objeto fabricado por humanos con el fin de alcanzar un objetivo concreto. La usabilidad
también puede referirse al estudio de los principios que hay tras laeficacia percibida de un objeto.

Menús: Es una serie de opciones que el usuario puede elegir para realizar determinada tarea.

Formularios: Un formulario es un documento, diseñado con el propósito de que el usuario introduzca

datos estructurados en las zonas del documento destinadas a ese propósito para ser almacenadas y
procesadas posteriormente.

6. REFERENTES BILBIOGRAFICOS

Senn, James A.. Análisis y diseño de sistemas de información, McGraw-Hill Interamericana, 1992. ProQuest
Ebook Central, https://ebookcentral-proquest-
com.bdigital.sena.edu.co/lib/senavirtualsp/detail.action?docID=3194990.

Kendall, Kenneth y Julie. Análisis y Diseño de Sistemas. Pearson Educación. 6ª edición. México 2005.

Gómez, L. S. (s.f.). Diseño de Interfaces de usuario principios, prototipos y heurísticas para Evaluación.
Recuperado el 21 de Abril del 2017, de http://sebastiangomez.sytes.net/papers/DIU.pdf

• Kendall, K. E., & Kendall, J. E. (2005). Análisis y Diseño de Sistemas (Sexta ed.). México: Pearson Educación.

• Mercovich, E. (s.f.). Diseño Iterativo de Interfaces. Recuperado el 21 de Abril del

2017, de GAIASUR: http://www.gaiasur.com.ar/infoteca/siggraph99/disenoiterativo-y-prototipado-

rapido.html

• Sommerville, I. (2005). Ingeniería del Software (Septima ed.). Madrid:Pearson Educación.

 SERVICIO NACIONAL DE APRENDIZAJE SENA
Procedimiento de Desarrollo Curricular
GUÍA DE APRENDIZAJE

• LAUDON, Kenneth C. y LAUDON, Jane P., Sistemas de Información Gerencial, trad. por Vidal Romero
Elizondo, 12ª Edición, (México, 2011).

7. CONTROL DEL DOCUMENTO

Nombre Cargo Dependencia Fecha

Autor (es) Paola Tatiana Tovar Instructora Teleinformática Julio 2019

Rugeles
Instructora Teleinformática Julio 2019
Yaqueline Chavarro

8. CONTROL DE CAMBIOS (diligenciar únicamente si realiza ajustes a la guía)

Nombre Cargo Dependencia Fecha Razón del Cambio

Autor (es)