Presentación Sesión 1 Ingeniería del Software.pptx
Taller construcción de Prototipos Uno uML
1. Bienvenidos
Tecnólogo en Análisis y Desarrollo de Software
FICHA 2848337
Instructores: Edinson Martínez
Fecha: 25 de Abril 2024
Hora: 7:00 pm
2. Agenda
• Saludo
• Orientación Evidencias
• Nociones de reglas de usabilidad y accesibilidad en
aplicaciones independientes, web.
• Taller sobre construcción del prototipo del software de
acuerdo al análisis de las características funcionales y de
calidad.
• Dudas e inquietudes
3. Fase Planeación
Evidencia de conocimiento:
GA5-220501095-AA1-EV02 -
Nociones de reglas de
usabilidad y accesibilidad en
aplicaciones independientes,
web
EVIDENCIAS A TRABAJAR
4. Leer detenidamente los conceptos y características definidas en el
componente formativo “Diseño y construcción de frontend”.
● Se deben conocer las reglas de usabilidad y accesibilidad.
● Describir cada una de las reglas.
● Diferenciar entre una aplicación independiente y una aplicación web.
● Describir las características de cada tipo de aplicación.
Entregar un documento de Word que resalte los elementos
considerados anteriormente, entrega con portada y normas APA.
Actividad
Orientación Evidencia : Nociones de reglas de usabilidad y
accesibilidad en aplicaciones independientes, web
5. 1. ¿Qué es accesibilidad?
2. ¿Qué es usabilidad?
3. Usabilidad y Accesibilidad
4. Accesibilidad usable:
Evaluando la accesibilidad
y la usabilidad
6. ¿Hablamos de lo mismo cuando nos referimos a
usabilidad y accesibilidad?
¿Si nuestra aplicación
es usable también será
accesible?
¿Puede una aplicación
ser accesible y usable a
la vez?
7. ¿Qué es accesibilidad?
El World Wide Web Consortium (W3C)
define la accesibilidad como un atributo
que "permite que las personas con
discapacidad puedan percibir,
comprender, navegar e interactuar con la
web." Esta foto de Autor desconocido está bajo licencia CC BY-NC
8. “El poder de la Web está en su
universalidad.
El acceso para cualquier
persona, independientemente
de las discapacidades, es un
aspecto esencial.”
Tim Berners-Lee, Director del
W3C e inventor de la World Wide
Web
Esta foto de Autor desconocido está bajo licencia CC BY-SA
9. ¿Por qué la accesibilidad nos beneficia a TOD@s?
Porque no solo existen las situaciones de "discapacidad permanente", también
existen las "discapacidades temporales" y "limitaciones situacionales".
11. W3C - Pautas de Accesibilidad del
Contenido Web (WCAG)
12. Preguntas - Punto de partida
Traducción de: https://twitter.com/cariefisher/status/1130825247320489987
¿Hay algo en nuestro sitio web o
aplicación que una persona con
discapacidad no pueda percibir?
¿Funciona esto con diferentes tipos
de dispositivos de tecnología de
asistencia?
¿Nuestro sitio web solo es
compatible con los navegadores o
sistemas operativos más recientes?
¿Nuestro sitio web está
desarrollado con las mejores
prácticas?
¿Funciona tanto en orientación
horizontal como vertical?
¿Pueden los usuarios controlar los
elementos interactivos de nuestro
sitio web / aplicación?
¿Nuestro sitio web funciona bien
con el solo uso del teclado?
¿Funciona para dispositivos
móviles y táctiles?
¿Está todo el contenido claramente
escrito?
¿Todas las interacciones son
fáciles de entender?
¿Tiene sentido el orden de la
página?
13. “Atributo de calidad que mide lo fáciles que son de usar las interfaces
Web.
Jakob Nielsen
Usabilidad es la eficacia, eficiencia y satisfacción con la que un
producto permite alcanzar objetivos específicos a usuarios específicos
en un contexto de uso específico.
ISO/IEC 9241
La capacidad de un software de ser comprendido, aprendido, usado y
ser atractivo para el usuario en condiciones específicas de uso.
ISO/IEC 9126
“
“
Definición de Usabilidad
20. Cuando una aplicación web tarda más de 20 segundos en cargarse el 80%
de sus visitantes abandona la página antes de verla.
1) Rapidez en la visualización del
contenido
22. 3) Apariencia
limpia y sencilla
• Una aplicación de
apariencia limpia y
sencilla permitirá a
los usuarios
navegar con
facilidad y encontrar
siempre lo que
busquen.
23. No hagas de tu aplicación un laberinto, la información debe ser
fácil de encontrar.
4) Regla de los 3 clics
24. 5) Interfaz de usuario intuitiva
La interfaz de usuario no debe de suponer un problema, tiene que requerir
un mínimo proceso de aprendizaje y resultar amigable.
25. 6) Legibilidad y percepcion de colores
Cuidar que los textos tengan un contraste adecuado con el fondo y que el
tamaño de la fuente sea correcto para permitir la lectura con comodidad.
ESTO ES LEGIBLE
ESTO NO ES LEGIBLE
ESTO ES LEGIBLE
ESTO NO ES LEGIBLE
26. Fórmula - Aplicaciones accesibles y usables
Análisis de
Accesibilidad
Evaluación
de Usabilidad
Pruebas con
Usuarios
Lograremos aplicaciones que cumplan con los estándares de calidad, eficiencia y
satisfacción, y además que sean perceptibles, operables, comprensibles y robustas
con las tecnologías de asistencia utilizadas por personas en situación de discapacidad.
27. Fase Planeación
Evidencia de conocimiento:
GA5-220501095-AA1-EV01 –
Taller sobre construcción del
prototipo del software de
acuerdo al análisis de las
características funcionales y de
calidad
EVIDENCIAS A TRABAJAR
28. Evidencia de conocimiento: GA5-220501095-AA1-EV01 –
Taller sobre construcción del prototipo del software de acuerdo al análisis de las
características funcionales y de calidad
Con base en los requerimientos funcionales del sistema y de calidad, en esta actividad se
proponen aspectos clave que se deben tener en cuenta para la construcción de
prototipos, también el aprendiz deberá utilizar algunas herramientas para apoyarse en la
elaboración del esquema de la funcionalidad. Adicionalmente, se introduce el tema de
calidad para lo cual deberá realizar una investigación corta respondiendo algunos
lineamientos establecidos en esta actividad.
Orientación Evidencia 1: Taller sobre construcción del prototipo
del software de acuerdo al análisis de las características funcionales y de calidad
29. Sección 1 - Taller Teniendo en cuenta las siguientes funcionalidades, elaborar el
diagrama de la funcionalidad, establecer colores y componentes a utilizar:
• Se desea elaborar una pantalla que permita validar la autenticidad de un
usuario.
• Se desea elaborar una pantalla que permita ingresar nombres, apellidos, cédula,
fecha de nacimiento de un usuario.
• Se desea dibujar una pantalla en donde se informe de posibles errores a un
usuario.
• Proponer la paleta de colores de los componentes anteriores utilizando como
máximo la combinación de tres colores: https://www.useit.es/blog/6-paletas-
de-colores-para-diseno-web
Orientación Evidencia 1: Taller sobre construcción del prototipo
del software de acuerdo al análisis de las características funcionales y de calidad
30. Sección 2 – Taller
Elabore una investigación corta usando los materiales disponibles en la biblioteca o
internet respecto a los fundamentos de calidad de software seleccionando, al
menos, tres fuentes que le permitan resolver los siguientes
conceptos:
• Definición de calidad de software.
• ¿Cuál es el concepto de usabilidad en software?
• ¿Cuáles son los estándares de calidad de software?
• ¿Qué tecnologías existen para implementar calidad?
Orientación Evidencia 1: Taller sobre construcción del prototipo
del software de acuerdo al análisis de las características funcionales y de calidad
31. UX o experiencia de usuario (User experience )
• La experiencia que obtiene el usuario cuando interactúa con un
producto en condiciones particulares.
• «el conjunto de ideas, sensaciones y valoraciones del usuario
resultado de la interacción con un producto; es resultado de los
objetivos del usuario, las variables culturales y el diseño del interfaz».
32. Se trata de una disciplina que se enfoca en entender y mejorar la calidad de la
experiencia que tiene el usuario al utilizar un producto o servicio, incluyendo
aspectos como la facilidad de uso, la accesibilidad, la satisfacción, la eficiencia,
entre otros.
La experiencia de usuario se considera cada vez más importante en el
desarrollo de productos y servicios, ya que una buena experiencia puede
aumentar la satisfacción del usuario y la fidelidad a la marca, mientras que una
mala experiencia puede generar frustración y pérdida de clientes.
UX o experiencia de usuario (User experience )
33. Fases de desarrollo de un sitio web o aplicación
• En el desarrollo de productos y/o aplicaciones, ya sean para la web , como otro
tipo de aplicaciones informáticas, hay una serie de fases que conviene seguir,
aunque muchos profesionales, en función del tipo de proyecto pueden obviar
alguna o pueden hacer más o menos hincapié en alguna fase. De forma general
los pasos a seguir serán:
• Realización de un sketch
• Creación de un wireframe
• Un mockup
• y finalmente realizar un prototipo
34.
35. Tipologías
Sketch: Dibujo a mano alzada con los elementos e ideas
básicas del diseño. Conceptos.
Wireframe: Ajuste de las composición básica del diseño
(reticula con formas básicas y espaciado). Layout.
Mockup: Incluye detalles relacionados con la apariencia
del producto final (color, tipografía, y elementos visuales
de diseño) aplicando guías de estilos.
———
Prototipado: Cualquier representación del producto para
pruebas. Puede tener diferentes formas de acabado
(papel/funcional…) [UXPinMockup]
36. ¿Qué es un Sketch?
• Pensemos en el Sketch como un primer boceto que realizamos para un proyecto
digital que queremos crear. Son nuestros primeros trazos sobre una hoja de
papel.
• Actualmente pasamos buena parte de nuestro tiempo frente a un monitor, sin
embargo en medio de esta era digital, los mejores aliados de un diseñador de
páginas web o aplicaciones son herramientas mucho más sencillas y comunes,
nos referimos al lápiz y papel, una parte del proceso creativo que otros
diseñadores «no digitales» han estado utilizando desde siempre, dibujar.
• La clave para los buenos bocetos es simplemente dejarse llevar, jugar con
elementos del diseño como la forma en que los menús podrían aparecer, o cómo
hacer que aparezca una característica para una parte en particular del contenido.
Si hablamos con distintos diseñadores, la mayoría de ellos te dirán que una parte
enorme de su flujo de trabajo es esbozar en primer lugar cualquier idea que
puedan tener. Este proceso no tiene un trabajo conceptual muy extenso, prima la
creatividad, la experiencia y el deseo del diseñador.
37. ¿Qué es un Sketch?
• El Sketch tiene que reflejar las ideas generales sobre el proyecto, debe de
responder entre otras cuestiones a :
• Donde pondremos los elementos más característicos como logos, etc.
• Dónde estará la zona de navegación
• Dónde se cargan los sistemas de ayuda para usuarios
• Se agregarán servicios de redes sociales
• Qué áreas de contenidos y que servicio queremos presentar en el proyecto
39. Wireframe
Diseño de alambre (en escala grises). Centrarse en espacios y organización
(layout low-fidelity). Aproximación para:
• Contenido: qué se quiere mostrar
• Cómo organizar la información: agrupación, espacios y distribución
• Identificar los elementos visuales más destacados
Posee los tamaños exactos del diseño, pero no se aplica apariencia final.
Estilo a lápiz y papel (como boceto), plantillas, o con herramientas (diseño
gráfico, de prototipado, presentación)
[UXPinWire]
Seminario: Prototipado. Diseño de Interfaces de Usuario. Universidad de Granada http://utopolis.ugr.es/diu
40. Algunos consejos a la hora de crear un Wireframe
• Es importante tener en cuenta que los wireframes son guías de los principales elementos de navegación y
contenido de su página o aplicación y que el objetivo no es representar el diseño visual, por tanto;
• No utilizar colores. Se recomienda usar distintos tonos de grises si queremos hacer distinciones entre distintos
elementos.
• No utilizar imágenes ni iconografía. Las imágenes distraen de la tarea para la que sirve un wireframe, por
ejemplo, para indicar dónde se va a colocar una imagen y su tamaño, se suele poner una caja con una cruz
que lo cruce con el tamaño y la posición donde queremos situar la imagen
• Utilizar sólo una tipografía genérica, aunque se puede jugar con distintos tamaños para indicar diversas
cabeceras y los cambios en la jerarquía de la información de los textos de la página.
• Aunque wireframes difieren de unos a otros, los siguientes elementos suelen ser habituales cuando estamos
creando un wireframe para una página web.
• Logo
• Campo de búsqueda
• Cabeceras, incluyendo título de la página como el H1 y H2, subtítulos…
• Los sistemas de navegación, incluyendo navegación global y navegación local
• Contenido del cuerpo
• Botones de compartir
• Información de contacto
• Pie de página
41. Diagrama de Bloques. Nivel básico de información
de la estructura de alambre (uso de espacios y
organización general).
Caja gris. En grises para definir espacios.
Texto completado con “lorem ipsum” para
ajustar tamaños.
Hi-Fi Media. Incluye los elementos de contenido
(texto e imágenes)
Hi-Fi interacción. Incluye navegación entre
bocetos
[UXPinWire]
42. Herramientas para crear wireframes
• Gliffi Programa de dibujo online que tiene una utilidad para hacer wireframes,
tiene una ventaja y es que permite el trabajo colaborativo online y además
hace posible también realizar esquemas para crear los mapas web
• Cacoo es una herramienta de dibujo en línea fácil de usar que te permite
crear una variedad de diagramas, como mapas de sitio, wireframes y gráficos
de la red.
• Mockingbird También es un software basado en web para crear, y compartir
wireframes un sitio web o una aplicación. Este software está más especifico
para la creación de wireframes y permite el uso de rejillas de 960px
• Lumzy También basado en edición web, tiene la posibilidad de cargar
librerías, además permite crear acciones para botones y algunos otros
elementos.
• Framebox Se trata también de una herramienta web muy sencilla
• RWD Wireframes Interesante herramienta que permite hacer wireframes
sencillos pudiendo trabajar con ellos para crear web responsive
43. ¿Qué es un MockUp?
• El Mockup o maqueta en castellano es una representación
más avanzada del diseño gráfico y comunicativo (desde una
visión de navegación y AI) de un proyecto.
• Hay dos escuelas de pensamiento que se diferencian en
como conciben la forma de crear un MockUp, aquellos que
creen que la maqueta debe representar el producto final
exactamente (alta fidelidad), y aquellos que ven la fase de
maqueta como más transitorio y no debe tomar demasiado
tiempo (media fidelidad).
44. ¿Qué es un MockUp?
• Podríamos decir que generalmente es, una composición gráfica
completa que ha utilizado el wireframe como plantilla
introduciendo todos los elementos gráficos y visuales,
convirtiéndose así en un modelo a escala de un producto que se
utiliza para demostrar y probar un diseño.
• El mockup es un medio de representación de la apariencia del
producto, y muestra los fundamentos de su funcionalidad. Los
MockUp incluyen los detalles visuales, tales como colores,
tipografía, etc., y son generalmente estáticas.
• Al observar un mockup, se debe tener una buena idea de cómo se
verá el producto final y una idea aproximada de cómo podría
funcionar (incluso si las funciones aún no se han desarrollado).
45. ¿Qué es un MockUp?
• Es importante distinguir un Mockup de un prototipo. Un
prototipo está destinado a funcionar, aunque sea
parcialmente, mientras que los Mockup no funcionan.
• Se componen de las imágenes en pantallas estáticas, sólo
«parecen» la interfaz de usuario real.
46. Herramientas para realizar MockUps
• Algunas webs donde podemos encontrar este tipo de recursos son:
• Freebiesbug– excelente recurso de elementos de interfaz de usuario y kits gratuitos para Photoshop e Ilustrador
• com +de 60 MockUps gratuitos
• La web com tiene una serie de interesantes recursos y consejos para esta herramienta.
• En Uxpin.com podemos encontrar Kit de interfaz de usuarioy iOS 8 Kit de interfaz de usuario (funciona para
Photoshop y Sketch).
• Línea 25– podemos encontrar una lista de los 35 sitios que ofrecen plantillas, patrones y kits de interfaz de
usuario para Photoshop
• com Aunque es un recurso para la creación de wireframes, merece la pena tenerlo en cuenta si vamos a usar
una herramienta de este tipo
• com de la misma forma que el recurso anterior, en este caso nos proporcionan plantillas para descargar que nos
permiten crear rejillas para diseños 960×12 en Photoshop, ilustrador, etc.
• I ♥ wireframes Página con multitud de recursos para wireframe y MockUps
• Otras herramientas
• https://placeit.net Web que te permite incluir la imagen de tu mockup en distintas pantallas,
móviles, tablets, etc., interesante para presentaciones
47. Prototipos
• Mientras que los wireframes son un «esbozo» , los
MockUps muestran la «sensación», la textura del diseño, es
el prototipo el que da vida a la «experiencia» detrás «de la
experiencia del usuario».
48. ¿Qué es un prototipo?
• Un prototipo es un modelo (representación, demostración o
simulación) fácilmente ampliable y modificable de un sistema
planificado, probablemente incluyendo su interfaz y su
funcionalidad de entradas y salidas.
• El prototipo es una representación de alto detalle de un proyecto
digital. En ella se puede identificar y operar:
• Sistemas de navegación
• Paleta de colores aplicada
• Iconografía
• Experiencia de usuario
• Servicios de ayuda, búsqueda, interacción.
• Otros elementos del proyecto
49. • Los prototipos son navegables, por lo que sirven para testear
elementos de interacción como estados «encima» de
botones, validación de formularios, iconos, o cualquier
elemento con el que el usuario interactúe. A través de la
creación de prototipos, identificamos y solucionamos
problemas UX como pueden ser la transición desde la página
principal a los resultados de búsqueda sin recargar al usuario
con demasiada información. Nos sirve como modelo del
comportamiento del sistema que puede ser usado para
entenderlo completamente o ciertos aspectos de él y así
clarificar los requerimientos.
50. Herramientas para la creación de prototipos.
• Existen múltiples formas de crear un prototipo, como comentábamos anteriormente, dependerá mucho del tipo
de aplicación que estemos realizando, podemos desde crear una aplicación prácticamente funcional, usando
HTML, CSS, etc. si por ejemplo estamos creando una web, o también podemos usar alguna de las aplicaciones
que existen en el mercado para realizar un prototipo.
• A continuación podéis ver una lista de alguna de las aplicaciones más usadas
• Justinmind: Herramienta profesional para realizar un prototipo de sitios web, aplicaciones de software y
aplicaciones móviles. Puede trabajar con Windows o con Mac.
• Axure RP: Es una herramienta de realización de prototipos profesional que permite crear wireframes para hacer
el pre-diseño de una página web así como MockUps. Disponible tanto para plataforma Windows como Mac.
Puedes dibujar tanto wireframes estáticos como interactivos que simulan una experiencia de navegación del
usuario real..
• Balsamiq: Con ella puedes hacer prototipos interactivos de webs. Puedes usar esta herramienta como un
servicio web o bien descargarla en tu equipo.
• Protoshare Está basado en web, y tiene soporte para twitter bootstrap, además permite hacer simulaciones
sobre distinto dispositivos
• Jumpchart: es una aplicación de planificación de webs basadas en el navegador la cual posibilita esbozar el
contenido de la página web. Es posible crear wireframes tanto estático como interactivos que simulan la
navegación entre las páginas web de la maqueta.
• FlairBuilder: herramienta web que te permite hacer bocetos de tus webs y de tus Apps para iPhone. No tiene
posibilidad de colaborar con otras personas ni tampoco es posible exportar características.
• iPlotz: Esta herramienta permite hacer maquetas navegables de sitios web y de aplicaciones. Lo puedes
descargar en tu ordenador (Windows/ Mac) o bien puedes usar el servicio vía web.
51. Herramientas para la creación de
prototipos.
• MockFlow: Herramienta web muy sencilla de utilizar para diseñar sitios web y aplicaciones de software.
• Mockingbird: Se trata de un servicio web gratuito con el que se pueden hacen prototipos de páginas web.
• Si trabajas con el entorno de programación Eclipse, puedes usar también WireframeSketcher, que se
integra dentro del entorno a la perfección.
• Quartz composer Herramienta de diseño que incluye Apple en su paquete de aplicaciones para
desarrolladores.
• Origami Es una herramienta gratuita similar a Quartz creada por el equipo de Facebook, que usa Quartz
Composer.
• io te permite crear fácilmente prototipos totalmente interactivos muy fiables que se ven y funcionan
exactamente igual que la aplicación, no requiere saber programar
• Framerjstiene la ventaja de que te deja pasar del Photoshop a Framer. Coge las capas, las exporta y te
permite hacer interacciones usando javascript.
• FLINTO Es como POP pero te permite hacer más cosas, y animaciones más complejas, tanto paraiOS como
Android.
• Pixate Es más potente que FLINTO. Te permite animar independientemente cada parte de la interfaz.
También tiene plantillas para diferentes dispositivos a las que les puedes variar el tamaño.
52. Herramientas de creación de prototipos
Herramientas de prototipado:
• Pencil Project. Open Source GUI prototyping tool
http://pencil.evolus.vn
• Justinmind (Web & Mobile). http://www.justinmind.com
• Bocetos y wireframing (online) https://wireframe.com
https://wireframestogo.com/
• iPhone Mockup (online) http://iphonemockup.lkmc.ch
9
• Axure RP Pro (Win/Mac)
• Balsamiq mockup (Mac)
http://www.axure.com/
http://www.balsamiq.com/products/mockups
• UXPin https://www.uxpin.com
• MockFlow (Online) http://mockflow.com/
•Moqups (online- HTML5) https://moqups.com
•MS Visio (Win) http://office.microsoft.com/es-es/visio
• MS Expression:SketchFlow (Win) http://www.microsoft.com/expression/
[UXPinMockup]
