Diseño de Protocolo de

Emergencias Médicas Pediátricas.

Equipo de trabajo:
Armando Borjas
Kayleigh Pacheco
Mayra Materán
Paola Buitrago
Mérida, septiembre 2019.
Diseño de Protocolo para la
Equipo de trabajo:
Atención de Emergencias Armando Borjas
Kayleigh Pacheco

Médicas Pediátricas. Mayra Materán

Paola Buitrago

Mérida, septiembre 2019.

 Nuevas Tecnologías:
El diseño de la experiencia del usuario.

Contenidos Procedimentales:
Manuales, interacción entre usuarios y contenidos, gráfica
comunicacional.

Educación didáctica:
Diseño de materiales didácticos.

Líneas de Diseño y Cultura:

Investigación Las comunicaciones en función de la sociedad.
 ¿Qué es? ¿Cómo es? ¿Para qué?
Un proyecto que Información Lograr que el que
busca elevar el sintetizada y usuario tenga acceso
nivel de bien organizada, a la información de
forma rápida y
comunicación dinámica, con
eficaz. Y que
del material explicaciones gracias a los
existente, ilustradas para conocimientos
Ejercicio 1: hacia uno su comprensión adquiridos, esté
Diseño Conceptual funcional y rápida y efectiva. preparado al
del Proyecto dinámico. momento de una
emergencia
médica.
  La información obtenida es a través de una tesis en la
cual se plantea el diseño de un protocolo de
emergencias médicas pediátrica. Obteniendo en la
investigación que solo existen protocolos de
emergencias médicas que contiene texto sin elementos
gráficos para su procedimiento.

 Por otro lado, encontramos varias app que explican los

pasos para algunas emergencias médicas,
comprendiendo con esto, que este tipo de información
Antecedentes se están llevando a cabo a través de los medios de
comunicación más tecnológicos.
Antecedentes
  Necesidades
Objetivas
Información gratuita, ligera
y de fácil acceso en formato
digital. Actualizable de ser
necesario con información
precisa y clara que permita
ejecutar rápidamente
Análisis
procesos que en ella se
Funcional describen.
 Necesidades
Subjetivas
Información clara, precisa y
detallada. Diseño
minimalista y dinámico,
fácil de usar considerando el
diseño de interfaz.
Explicaciones ilustradas,
diseño de información y
diseño instruccional.
 Ciclo de vida del producto
Concepción y Diseño: Software de diseño del producto: Adobe Illustrator.
Formato de salida del producto: Aplicación.

Prototipo: Producto de fabricación unitaria y reproducción múltiple.

Traslado al cliente: Sin costo adicional, el producto es de fácil acceso y

descarga gratuita ya que su soporte es digital.

Utilización:Producto listo para descargar en el smartphone deseado, que

permite interactuar con el usuario llevándolo rápidamente a la información
Análisis que le interesa encontrar. La App será de uso offline para asegurar su uso en
caso de necesitarla. Esta app la tendrá la clínica y la universidad de la tesis.
Funcional
Deposición final: Una vez ya no se considere necesario el producto basta con
eliminarlo del equipo donde se encuentra descargado.
 Texto en formato PDF que cumple la
función de transmitir una serie de
procedimientos a aplicar a la hora de una
emergencia médica.
Análisis Componentes de la función principal:
Funcional: • Investigación previa y recolección de información.
Solución • Análisis de antecedentes.
Existente • Aplicación de encuestas.
• Redacción de la información.
 Función Transmitir información sobre procedimientos a realizar en caso de
Principal presentarse alguna emergencia médica de las descritas en la app.

Función del Función de las Función del Función del Función del
Índice imágenes texto color y fuente conjunto
- Identificar la - Generar interés y - Transmitir - Trabajar en - Transmitir la
ubicación de cada riqueza visual en el información técnica conjunto con la información de
emergencia. producto. indispensable. diagramación para forma concreta,
- Presentar el - Disminuir la - Describir procesos la correcta dinámica, rápida y
contenido. cantidad de texto. de forma concreta. distribución de la eficaz.
- Mostrar al usuario - Transmitir de - Distinguir títulos, información. - Que el producto
la estructura del manera más rápida palabras claves, y Establecer sea ligero.
contenido. los procedimientos. texto general. jerarquías y niveles - Fácil de entender y
- Permitir llegar de - Ubicar al lector - Acompañar y de gravedad de la manejar por el
manera directa a rápidamente en la complementar el emergencia. usuario.
cada emergencia. información de sentido de las - Agilizar la lectura. - Que se adapte a
interés. imágenes. distintos equipos.
 SUSTITUCIÓN
- Información extensa.
- De lectura compleja.
- Estructura desordenada.
- Sin ilustraciones.
- Acceso complejo.

Análisis - Información concreta.

Recursos - Diagramación coherente y diseño de la información,
Actividad pensando en la interacción de usuario.
- Ilustraciones descriptivas.
Resultado - Fácil acceso y transmisión.
Propuesta de Valor
Diseño de Interacción digital para una
comprensión mas rápida de la información

Llevar la información a plataformas

digitales prácticas.
“Creación de app”.

Innovar en la creación de contenido médico,

obteniendo un producto sintetizado, simple,
eficaz, pero con un diseño que genere interés e
interacción con el usuario.
 • Signos, Símbolos e Íconos.
1.

• Color realista, naturalista. Sígnico o

emblemático.
2.
• Niveles de iconicidad:
Ejercicio 2: • 8 y 9 Ilustraciones a color e infografías.
El Lenguaje Visual 3. • 4 Iconografía.
del Proyecto
 • Contenido con lenguaje técnico poco
conocido por el usuario.
• Necesidad de un programador para el
desarrollo de la app.
• El proyecto queda en su fase de propuesta.
• Información concreta.
• Comprensión mas rápida de la información.
• Diseño que genera interés e interacción con
el usuario.
• Fácil acceso y transmisión de la información.
• Ilustraciones descriptivas de la información.

• La información no sea aplicada de forma • Llevar la información a plataformas digitales

correcta por el usuario. prácticas.
• Otras aplicaciones con la misma función. • Producto sintetizado, simple y eficaz en
comparación a otros textos y manuales.
• Producto innovador que destaque de la
Metodología competencia, por su diseño dinámico e
Paso 1 interactivo.

Mapeo
 Diseño de protocolo de emergencias
médicas pediátricas
• Las aplicaciones para aprender idiomas, las • Las aplicaciones médicas existentes, con una
cuales se apoyan en los elementos gráficos diagramación monótona y un diseño de
como colores, formas e ilustraciones para interfaz muy simple.
captar la atención del usuario. • Los textos y manuales físicos y digitales, que
• Las aplicaciones para redes sociales, las cuales poseen mucha información, lo que genera poco
poseen una interfaz interactiva que invita al interés y atención en el usuario.
usuario a utilizar la app. • Algunos textos existentes en internet, que solo
poseen texto y no se apoyan de elementos
Metodología gráficos para que el usuario comprenda mejor
la información compartida.
Paso 1
Mapeo
 • Diseño de Interacción Digital, que integre
el diseño de información, el diseño
instruccional y el wayfinding.
• Una aplicación que sintetice la
información para el usuario y que se
complemente con el uso de elementos
gráficos como el color, la forma y la
ilustración.
• Un diseño que se adapte a las
características responsive.
• Una aplicación que posee experiencia de
• Diseño monótono, que no capte usuario (fácil de usar, rápida y dinámica)
la atención del usuario. • Uso de fotografías, como se
• Diagramación tradicional, en la encuentra en algunos textos o
que esté presente únicamente manuales médicos.
texto. • Texto muy extenso, que
Metodología • Uso del lenguaje técnico que no
sea conocido ni comprendido
provoque aburrimiento en el
usuario.
Paso 1 •
por el usuario.
Diseño estático y poco atractivo
• Producto en formato PDF como
la mayoría del material que se
Mapeo visualmente. encuentra en la red.
 • Transmitir la información de una manera fácil, rápida y concreta.
• Generar una interacción entre el usuario y la aplicación, captando la atención .
• Lograr un fácil y rápido acceso y transmisión de la información.
• El target se ampliará a un publico general, con algunos conocimientos médicos o que
le llame la atención esta temática.

• Diseño de información, diseño instruccional, wireframe y diseño de interacción digital.

• Contenido en una plataforma digital.
• Diseño dinámico, con una diagramación que comprenda imagen (ilustraciones) y texto.
• Diseño de aplicación para Smartphone.
• Facilidad de uso de la aplicación, sin demasiados aspectos técnicos.
• Funcionalidad offline una vez descargada.

Metodología • Al momento de presentarse una emergencia, escaseen los recursos e insumos requeridos para
atender el caso.
Paso 2 •
•
Desconocimiento de algún termino médico.
Soporte digital y no impreso.
Exploración
 Benchmarking

Metodología
Paso 2
Exploración
 Concept Board

Metodología
Paso 2
Exploración
 Color Board

Metodología
Paso 2
Exploración
 Mood Board

Metodología
Paso 2
Exploración
 Typographic Approach

Metodología
Paso 2
Exploración
 Buzz Reports. Referentes

Leer este concepto y luego lo borras

Buzz Reports es un método colaborativo de recogida de información

aleatoria procedente de diferentes fuentes. Nos sirve para alcanzar una percepción
significativa y pormenorizada sobre un tema en cuestión.

Después de ver qué carencias de conocimientos se tienen en el equipo, pasamos a

realizar la búsqueda de información en una gran variedad de fuentes de
información sin ninguna planificación evidente. Una vez determinadas las
referencias se vuelcan en el documento de manera que sean visibles para todo el
mundo y a partir de aquí se generan diversos debates y discursos en grupo. Con esta
sesión fomentaremos la inspiración y mantendremos la mente receptiva y abierta.
Metodología
Paso 2
Exploración
 Buzz Reports
Tipos de lectura:
Leer trae a nuestra mente innumerables beneficios tales como la adquisición de conocimientos, el desarrollo de la creatividad, entre otros.
La lista de géneros a la hora de hablar de libros es inmensa, como también el surgimiento de las nuevas tecnologías, lo es la de los formatos
en los que podemos disfrutar de ellos.

1 – Lectura oral, la lectura oral se da cuando la persona que lee lo hace en voz alta. Algunas personas hacen esto debido a que el sonido
ayuda a que las ideas queden “grabadas” en el cerebro.

2 – Lectura silenciosa, en la lectura silenciosa la persona recibe directamente en el cerebro lo que ven sus ojos, salteando la experiencia
auditiva.

3 - Lectura superficial, en este tipo de lectura se “barre” el texto para saber de qué se está hablando. Es una lectura más bien superficial
que pretende captar una idea general pero no los detalles. Este tipo de lectura está recomendada cuando se lee por primera vez un texto de
estudio.

4 - Lectura selectiva, este es el tipo de lectura que realiza una persona cuando está buscando datos específicos, por eso se la denomina
una “lectura de búsqueda”. El lector no lee minuciosamente todo sino que aquí también se realiza un paneo veloz buscando solo la
información de interés para la persona.

5 - Lectura comprensiva, en la lectura comprensiva el lector procura entender todo el contenido del mensaje. Se practica de manera
lenta, de modo que permita un abordaje del tema donde los tiempos que se le dedican sean suficientes para comprender a fondo.

Metodología 6 – Lectura reflexiva y crítica, en la lectura reflexiva o crítica el lector analizará el texto que tiene frente a sí y no lo “digerirá” o aceptará
como la verdad absoluta.
Paso 2 7 - Lectura recreativa, la lectura recreativa es la que predomina cuando se lee un libro por placer.
Exploración
Para nuestro proyecto la lectura que corresponde es: Lectura selectiva.
 Buzz Reports
Niveles de creatividad
Siguiendo las ideas de Irving A. Taylor podemos diferenciar entre cinco niveles de creatividad según el tipo de resultado que el acto creativo
genere.

Creatividad expresiva. La libertad, espontaneidad e imaginación aplicada a la expresión de una idea o una emoción.
Ejemplos: los dibujos de los niños en su primera etapa de expresión, gran parte de la creatividad artística, etc.

Creatividad productiva. La elaboración de un producto o servicio que permite la aplicación en el mundo real y cotidiano de nuevos conceptos
o nuevas emociones. El creador sabe medirse con éxito con la realidad y convertir sus visiones en algo útil para sus congéneres.
Ejemplos: los diseñadores, los arquitectos, los directores de cine, etc.

Creatividad inventiva. A partir de sus aptitudes de flexibilidad mental y fluidez imaginativa, el autor genera inventos o descubrimientos
basados en nuevas maneras de ver las cosas o en el establecimiento de nuevas relaciones. A veces la creatividad procede de ver lo que todo
el mundo tenía frente a sus ojos pero nadie veía. Otras veces la creatividad procede de ver lo mismo que todo el mundo ve pero relacionar lo
que nadie relacionaba, pensar lo que nadie pensaba. En cualquier caso, ver las cosas de una manera nueva.
Ejemplos: los inventores, los científicos, los descubridores, etc.

Creatividad para la innovación. Creatividad aplicada a conseguir la aceptación social de nuevas maneras de ver o utilizar las cosas existentes.
Ejemplos: empresas innovadoras, modistos, artistas multimedia, etc.

Creatividad emergente. Se aplica a la producción de nuevos paradigmas de trabajo, nuevas escuelas o nuevos planteamientos tecnológicos.
Metodología Requiere grandes aptitudes en la reestructuración de la realidad existente (pensamiento lateral).
Ejemplos: los creadores de Apple, Facebook, Google, etc
Paso 2
Exploración
 Buzz Reports
Diseño Instruccional: es el modelo para definir la planificación y estructura de los contenidos. Nos basaremos en la concepción y diseño que
son los requisitos organizacionales, la técnica y modelo didáctico, en el proceso de aprendizaje (pregnacia). Para esta app nos guiamos bajo
el modelo de aprendizaje de Addie que es una teoría del aprendizaje.

Etapas:
Análisis y definición.
Diseño y concreción.
Desarrollo de la propuesta.
Implementación. Evaluación.

Existen varias teorías para el aprendizaje, entre la que distingue el Conductismo y el Constructivismo, por lo cual tenemos:

Conductismo
Debilidad: el que aprende podría encontrarse en una situación en la que el estímulo para la respuesta correcta nunca ocurre, por lo tanto el
aprendiz no responde.

Fortaleza: el que aprende sólo tiene que concentrarse en metas claras y es capaz de responder con rapidez y automáticamente cuando se le
presenta una situación relacionada con esas mentas.

Constructivismo
Debilidad: a algunos alumnos les puede costar más trabajo construir, crear, resolver problemas por sí mismos, y es necesario guiarles más.
Metodología
Fortaleza: por ejemplo cuando hacemos un curso con la intención de que se trabajen una serie de conocimientos significativos, que le son
Paso 2 útiles para la vida. Y le enseñamos algunas destrezas, a modo de andamiajes para que aprenda a Resolver Problemas.

Exploración
 Buzz Reports
Wayfinding: encontrar el camino
hace referencia a la manera en que las personas nos desenvolvemos en un entorno.Y a la necesidad de que nos guíen por la ruta adecuada.

Su objetivo es crear buenos sistemas que nos indiquen dónde estamos, y nos ayuden a localizar y alcanzar nuestro destino desde esa
ubicación.

El wayfinding abarca más que la señalética y señalización. Es una manera de organizar el espacio y darle un sentido para evitar la confusión,
la desorientación y la ofuscación.

El proceso de organización y comunicación se centra en el usuario. Pero las herramientas y recursos gráficos no pretenden captarlo como
consumidor -o anunciante-, sino facilitar sus movimientos.

En este sentido, los elementos visuales –iconos, pictogramas,…- son el elemento principal. Por ello, debemos asegurarnos de que los
usuarios comprenden su significado y le asignan la acepción deseada. Probablemente sea necesario realizar un test previo.

Hay que tener en cuenta que estamos hablando de espacios por los que se desplazan personas de diversos grupos culturales, sociales,
capacidades, etc. Y el sistema de orientación debe incorporar soluciones para todos.

Por otro lado, un sistema de wayfinding tiene que diferenciarse del entorno –el recurso más empleado es el uso del color-. Y ser visto y
localizado desde diferentes puntos.
Metodología Asimismo, sólo debe mostrar lo necesario y relevante para ese momento del trayecto, eliminando el ‘ruido’ y la información innecesaria.
Paso 2
Exploración
 Buzz Reports
Diseño universal: es un paradigma del diseño relativamente nuevo, que dirige sus acciones al desarrollo de productos y entornos de fácil
acceso para el mayor número de personas posible, sin la necesidad de adaptarlos o rediseñarlos de una forma especial. El concepto surge del
diseño sin barreras, del diseño accesible y de la tecnología asistida de apoyo. A diferencia de estos conceptos el diseño universal alcanza
todos los aspectos de la accesibilidad, y se dirige a todas las personas, incluidas las personas con discapacidad. Resuelve el problema con una
visión holista, partiendo de la idea de la diversidad humana. Además, tiene en cuenta la manera en que se vende el producto y la imagen de
producto, para que estos, además de ser accesibles, puedan venderse y captar a todo el rango de consumidores.
El propósito del diseño universal es simplificar la realización de las tareas cotidianas mediante la construcción de productos, servicios y
entornos más sencillos de usar por todas las personas y sin esfuerzo alguno. El diseño universal, así pues, beneficia a todas las personas de
todas las edades y habilidades.

Principios del diseño universal

1. Igualdad de uso: el diseño debe ser fácil de usar y adecuado para todas las personas independientemente de sus capacidades y
habilidades.
2. Flexibilidad: el diseño debe poder adecuarse a un amplio rango de preferencias y habilidades individuales.
3. Simple e intuitivo: el diseño debe ser fácil de entender independientemente de la experiencia, los conocimientos, las habilidades o el nivel
de concentración del usuario.
4. Información fácil de percibir: el diseño debe ser capaz de intercambiar información con usuario, independientemente de las condiciones
ambientales o las capacidades sensoriales del mismo.
5. Tolerante a errores: el diseño debe minimizar las acciones accidentales o fortuitas que puedan tener consecuencias fatales o no deseadas.
6. Escaso esfuerzo físico: el diseño debe poder ser usado eficazmente y con el mínimo esfuerzo posible.
7. Dimensiones apropiadas: los tamaños y espacios deben ser apropiados para el alcance, manipulación y uso por parte del usuario,
independientemente de su tamaño, posición, y movilidad.
Metodología
Ejemplos del diseño universal: suelo con superficies suaves en las vías de acceso a los edificios, sin escalones. Puertas interiores espaciosas,
Paso 2 en las que quepa una silla de ruedas. Baños adaptados. Botones en los tableros de control que pueden distinguirse por el tacto. Iluminación
brillante y apropiada, particularmente en los puestos de trabajo. Output audible redundante con información visual. Output visual
Exploración redundante con información audible. Control del contraste en los output visuales. El uso de íconos significantes, tanto como el texto. Línea
de visión clara (para reducir la dependencia del sonido). Control del volumen en los output audibles. Control de velocidad en
los output audibles. Elección de idioma en los output escritos o hablados. Rampas de acceso en las piscinas de natación y en todos los
edificios. Closed Caption (subtitulado en tiempo real) en televisión. Teclas y números grandes en los teléfonos
 Buzz Reports
Diseño visual: se realizan con los wireframes con el diseñador y teniendo en cuenta el sistema operativo.

El estilo de las interfaces: En mayor medida está compuesta por botones, gráficos, íconos y fondos, que tienen una apariencia visual diferente en cada
uno de los sistemas operativos, porque Android, iOS y Windows Phone tienen su propia forma de entender el diseño.

Existen las interfaces nativas, que vienen con elementos preestablecidos en cada plataforma con características básicas de su apariencia. Las interfaces
nativas tienen un punto a favor y es que están constituidas por elementos que el usuario ya conoce y a los que está habituado, por lo tanto, no
representan un nuevo aprendizaje. Esto puede incidir favorablemente en la usabilidad de la app. Y la interfaz personalizada se planea y representa una
mayor complejidad y tiempo de desarrollo, donde todos los elementos son pensados para una mejor interacción, teniendo en cuenta los elementos para
sus descargar.

ANDROID: el diseño en esta plataforma está basado en la composición de la interfaz. Cada gráfico, botón y texto está acompañado por la idea de
limpieza visual, y pequeños detalles.

IPHONE: dejando atrás el estilo que lo marcó hasta su versión 6, iOS defiende actualmente una ideología compartida también con otros sistemas
operativos: despojarse de elementos innecesarios, privilegiando el contenido sobre el contenedor.

También hay considerar otros elementos a la hora del diseño de interfaz:

Íconos y pantalla inicial: también llamada splash, que se mostrará muchas veces al abrir la aplicación. En cuanto a la orientación de esta pantalla en
teléfonos móviles, hay que recordar que suele mostrarse de forma vertical, mientras que en las tabletas, es necesario determinar la orientación que se
está usando al momento de mostrar el splash y, en función de eso, hacer uso de la versión correspondiente al modo horizontal o vertical.

Ícono de lanzamiento: es el packaging que lo envuelve.

Metodología En Android los íconos son objetos representados frontalmente con una ligera perspectiva, como si fueran vistos desde arriba. Dan sensación de volumen
Paso 2 y profundidad.

Exploración En iOS los íconos son por lo general representaciones muy simplificadas de objetos reales o abstracciones del concepto de la app. Por lo general el ícono
contiene un solo elemento principal, sin muchos detalles, que reposa sobre un fondo opaco.

Íconos interiores: son una ayuda visual para reforzar información, complemento de elementos interactivos y mejorar la utilización del espacio.
 Buzz Reports
Grilla o retícula de construcción: la grilla o retícula es la estructura invisible sobre la cual se apoyan todos los elementos visuales. Su función es la de
separar cada uno de los componentes de la interfaz en un espacio ordenado, organizando los sitios que quedarán en blanco y aquellos que contendrán
formas. Una retícula bien definida se transforma en una ayuda al diseño que, generando orden y simplicidad, mejora la usabilidad de la app. En su forma
más básica consta de un módulo base: un cuadrado de un tamaño determinado que se usa como medida de referencia. A su vez, este módulo puede
dividirse en submúltiplos para espaciados más pequeños.

Tipografía: como en cualquier diseño, el objetivo de la tipografía es conseguir que el texto se lea con claridad. Esto se logra no solo con una adecuada
elección de la fuente, sino también gestionando su tamaño, separación entre líneas, ancho de columnas y contraste visual con el fondo. Este último
punto, el contraste, es más importante de lo que puede creerse a simple vista. Un móvil es un dispositivo que muchas veces se usará fuera de casa, por
ejemplo, en la calle. En algunos momentos el sol dará directamente sobre la pantalla y si no hay un buen contraste entre tipografía y fondo, la
información en pantalla será imposible de leer. La tipografía es un componente que, como botones y gráficos, también se asienta en una retícula que
definirá su ubicación y posición dentro del contexto general de la pantalla. Se debe jerarquizar para definir diferentes niveles de protagonismo en un
texto se puede apelar, además del tamaño, a las variantes negrita, regular o light, por ejemplo y al color.

Colores reservados: hay ciertos colores que deben emplearse de forma cuidadosa porque tienen connotaciones que no pueden obviarse. Se llaman
justamente «colores reservados» porque su uso debería limitarse especialmente a los nombrados a continuación:

Rojo: para errores y alertas importantes. Es un color que naturalmente indica peligro y llama la atención para centrarse inmediatamente en lo que está
ocurriendo.
Amarillo: prevención. Señala que la acción que va a realizarse implica la toma de una decisión que ocasiona alguna consecuencia, por lo cual hay que
estar alerta.
Verde: mensajes de éxito y confirmación de que una acción se ha realizado correctamente.

En textos: el color se puede usar para destacar aquellas frases o palabras que pueden ser pulsadas, como enlaces. En este caso, es importante mantener
Metodología la consistencia visual para permitir al usuario, intuitivamente y a simple vista, saber cuáles son los elementos tipográficos interactivos.
Otra función que cumple el color al ser usado en textos es la de jerarquizar el contenido.
Paso 2 En fondos: en el caso del color de fondo, este debe estar en consonancia con el elegido para la tipografía, ya que es necesario un contraste mínimo por
Exploración cuestiones de legibilidad y accesibilidad. Hay que tener en cuenta que los fondos oscuros suelen cansar la vista más rápidamente, por lo tanto, si la app
es de uso frecuente o requiere pasar cierto tiempo leyendo, es conveniente revisar la elección cromática y llevar el color de fondo hacia alternativas más
claras. Sin embargo, los colores oscuros en el fondo sí pueden ser una buena alternativa cuando el contenido sea muy visual, como fotografías o videos,
ya que ayuda a resaltar estos elementos.
 Buzz Reports
En elementos interactivos: el color puede utilizarse como respuesta o feedback a acciones concretas del usuario, un uso que muchas veces no se tiene
en cuenta. Para ilustrar con un ejemplo, los elementos seleccionados o pulsados, como botones o filas, pueden destacarse con un color que indique
visualmente dónde se ha pulsado, lo cual suele ser particularmente difícil de saber en un móvil. En el caso de elementos deshabilitados, generalmente el
color es más claro que cuando están en su estado normal, incluso, puede apelarse al uso de transparencias. De cualquier forma, el objetivo es indicar de
una forma evidente que ese elemento no producirá ningún efecto al ser pulsado.

Colores por defecto de cada sistema operativo: Android y Windows Phone usa tema o themes en inglés, que afectan el color de sus aplicaciones y
pueden ser claros u oscuros. Todos los elementos nativos de las aplicaciones se ven afectados por esta decisión: diálogos, botones y fondos de listas se
verán en consonancia con el tema elegido. Mantener o no la selección que hace el usuario del tema, tiene ventajas y desventajas que deben valorarse
cuando se decide el diseño de la app. Por ejemplo, usar el color del tema elegido brinda consistencia visual y comodidad a través de todo el sistema
operativo, además, el usuario se siente siempre dentro del mismo contexto.

Detalles visuales

Pantallas vacías: es necesario plantear también el diseño para cuando la aplicación comienza a ser utilizada y aún no se dispone de cierta información.
Por ejemplo, cómo se vería una pantalla vacía, sin ítems, cuando todavía no hay nada para mostrar.

Gráficos efímeros: Es necesario considerar también el diseño de aquellos elementos que aparecen por poco tiempo en la pantalla. Por ejemplo, si la
conexión es lenta.

Secretos visuales: aquellos gráficos que están ocultos a primera vista, que no son de fácil acceso para el usuario, pero que una vez descubiertos generan
un placer especial.

Metodología Desde <http://appdesignbook.com/es/contenidos/diseno-visual-apps-nativas/>

Paso 2
Exploración
 Sabe la existencia Escucha sobre Va al Play store Abre la Interactúa con Interactúa con Sale de la
de emergencias la aplicación y descarga la aplicación la aplicación aplicación
la aplicación
médicas
aplicación
pediátricas

Entorno: medios Organismos de Play Store de Smartphone Smartphone Smartphone Smartphone

digitales y/o Salud que Aplicación
publiciten la app
Google Aplicación Aplicación Aplicación
impresos
Smartphone

El usuario recibe Conoce sobre la Busca la Busca en su Visualiza la intro Dará click a un Ya vista toda la
información aplicación de aplicación en el Smartphone el en el cual ícono y visualizará información, el
emergencias Play Store, lee la ícono de la la información usuario sale de la
sobre muestra
descripción de la (Primero la aplicación con la
emergencias médicas aplicación y abre brevemente infografía y luego
médicas pediátricas, app, le llama la la app. como funciona noción de que
el diseño
pediátricas, a promocionada atención y decide la app y el instruccional) luego cuenta con un
través de como una descargarla. contenido que puede seguir dando acceso fácil a está
soportes digitales aplicación tiene, el puede siguiente para ya que la tiene
e impresos interactiva y de darle omitir a este seguir la secuencia de modo
existentes, pero fácil comprensión paso si ya lo de la información y permanente en su
de la información luego ya leído esta Smartphone.
de una manera conoce. pasará al
parte puede volver
muy extensa sin y esto le genera menú, se guiará al menú a buscar
generar interés. curiosidad. por los círculos otra emergencia.
del menú.

Metodología
Paso 3
Construir
Metodología
Paso 3
Construir
Concept Sketch.
Bocetos
Metodología
Paso 3
Construir
Selección de ideas
Metodología
Paso 3
Construir
Infografía
 wireframe

Metodología
Paso 3
Construir
Metodología
Paso 3
Construir.
Mock-Up o
Prototipo para
mostrar
Metodología
Paso 3
Construir.
Mock-Up o
Prototipo para
mostrar
Metodología
Paso 4
Testear
Metodología
Paso 4
Testear
 Abstracción:es una operación mental destinada a aislar conceptualmente una propiedad o función concreta de un objeto, y pensar
qué es, ignorando otras propiedades del objeto en cuestión.

Acción: hecho, acto u operación que implica actividad, movimiento o cambio y normalmente un agente que actúa
voluntariamente, en oposición a quietud o acción no física.

Análisis:es el proceso de dividir un tema complejo o sustancia en partes más pequeñas para obtener una mejor comprensión de él.

Atención:es el proceso conductual y cognitivo de concentración selectiva en un aspecto discreto de la información, ya sea
considerada subjetiva u objetiva, mientras que se ignoran otros aspectos perceptibles.

App: el términoappes una abreviatura de la palabra en inglés application. Es decir, unaappes un programa.

Boceto: esquema o proyecto que contiene solamente los rasgos principales de una obra artística o técnica.

Concepto: es la formulación de una idea o una imagen a través de palabras. El término concepto tiene origen del latín conceptus,
del verbo concipere, que significa algo concebido o formado en la mente, y es considerado una unidad cognitiva de significado.

Conocimiento: hechos o información adquiridos por una persona a través de la experiencia o la educación, la comprensión teórica
o práctica de un asunto referente a la realidad.

Cognición: es la facultad de un ser vivo para procesar información a partir de la percepción, el conocimiento adquirido y

Glosario características subjetivas que permiten valorar la información.

Cognitiva: del conocimiento o relacionado con él.

Dinámico:implica movimiento o lo produce.

 Diseño instruccional: es el proceso a través del cual se crea un ambiente de aprendizaje, así como los materiales necesarios, con
el objetivo de ayudar al alumno a desarrollar la capacidad necesaria para lograr ciertas tareas.

Diseño de interacción (IxD): se enfoca en crear interfaces bien pensadas en los comportamientos. Es el diseño de cómo
interactúa o qué hace el usuario con esos elementos.

Diseño de interfaz de usuario (UI): es el resultado de definir la forma, función, usabilidad, ergonomía, imagen de marca y otros
aspectos que afectan a la apariencia externa de las interfaces de usuario en sistemas de todo tipo.

Diseño responsive: el diseño web adaptable, es una filosofía de diseño y desarrollo cuyo objetivo es adaptar la apariencia de las
páginas web al dispositivo que se esté utilizando para visitarlas.

Elementos gráficos: son una parte fundamental del diseño en todas sus modalidades, introduciendo en las composiciones
información visual que complementa en gran medida el mensaje que se desea transmitir, y que a veces es tan importante en el
diseño como los contenidos textuales del mismo.

Emergencia:es una situación fuera de control que se presenta por el impacto de un desastre.

Entender: la palabra entender proviene etimológicamente del latín “intendere”, compuesto por “in” con el significado de
“dentro” y por “tendere” = estirar, en el sentido de dirigirse hacia algo, el conocimiento de un objeto, para incorporarlo a la
estructura mental, de modo no arbitrario sino comprensivamente.
Glosario Esquema:un esquema, en psicología y en ciencia cognitiva, describe cualquiera de varios conceptos como: Un patrón
organizado de pensamiento o comportamiento. Un conjunto estructurado o ideas preconcebidas. Una estructura mental que
representa algún aspecto del mundo.
 Experiencia de usuario: es el conjunto de factores y elementos relativos a la interacción del usuario con un entorno o dispositivo
concretos, dando como resultado una percepción positiva o negativa de dicho servicio, producto o dispositivo.

Funcionalidad: se aplica a ciertas funciones. Hay dos maneras comunes en que se aplica: éstas se relacionan históricamente, pero
divergen algo durante el sigloXX.

Habilidad: es la capacidad de llevar a cabo una tarea con resultados determinados a dentro de un período de tiempo, energía o ambos.

Icono:signo que representa un objeto o una idea con los que guarda una relación de identidad o semejanza formal.

Imagen: escribir a la figura, representación, semejanza, aspecto o apariencia de una determinada cosa.

Información: es un conjunto organizado de datos procesados, que constituyen un mensaje que cambia el estado de conocimiento del
sujeto o sistema que recibe dicho mensaje.

Interacción: acción que se ejerce recíprocamente entre dos o más objetos, personas, energías o entes. La idea de un efecto de dos vías
es esencial en el concepto de interacción, a diferencia de un solo sentido efecto causal.

Interfaz: interfaz es lo que conocemos en inglés como interfaces. En informática, se utiliza para nombrar a la conexión funcional entre
dos sistemas, programas, dispositivos o componentes de cualquier tipo, que proporciona una comunicación de distintos niveles
permitiendo el intercambio de información.

Glosario Infografía: es una representación visual informativa o diagrama de textos escritos que en cierta manera resume o explica
figurativamente.

Instrucción: se denomina instrucción en informática al conjunto de datos insertados en una secuencia estructurada o específica que el
procesador interpreta y ejecuta.
 Método: modo ordenado y sistemático de proceder para llegar a un resultado o fin determinado.

Metodología: Conjunto de métodos que se siguen en una investigación científica, un estudio o una exposición doctrinal.

Minimalista: El término minimalismo, en su ámbito más general, es la tendencia a reducir a lo esencial, a despojar de elementos
sobrantes. Es una traducción transliteraldel término inglés "minimalism".

Omitir:dejar de hacer algo voluntaria o involuntariamente.

Organización:preparar una cosa pensando detenidamente en todos los detalles necesarios para su buen desarrollo.

Orientación: es la acción de ubicarse o reconocer el espacio circundante y situarse en el tiempo. La palabra orientación proviene
de la palabra "oriente".También está la orientación en el modo deportivo.

Plataformas digitales: una plataforma digital es un lugar de Internet que sirve para almacenar diferentes tipos de información
tanto personal como nivel de negocios.

Play Store: Google Play es una plataforma de distribución digital de aplicaciones móviles para los dispositivos con sistema
operativo Android, así como una tienda en línea desarrollada y operada porGoogle. Esta plataforma permite a los usuarios
navegar y descargar aplicaciones, juegos, música, libros, revistas y películas.

Preciso:que es rigurosamente ajustado, exacto o fiel.

Glosario Procedimiento: método o modo de tramitar o ejecutar una cosa.

Proceso: es una unidad de actividad que se caracteriza por la ejecución de una secuencia de instrucciones, un estado actual, y un
conjunto de recursos del sistema asociados.
 Programador: un programador es aquella persona que elabora programas de computadora., es decir escribe, depura y mantiene
el código fuente de un programa informático, que ejecuta el hardware de una computadora, para realizar una tarea determinada.

Signo:todo aquello que se pueda interpretar, como alguna cosa, hecho o persona.

Referente:cosa tomada como referencia o modelo de otra.

Símbolo: Un símbolo es la representación perceptible de una idea, con rasgos asociados por una convención socialmente
aceptada. Es un signo sin semejanza ni contigüidad, que solamente posee un vínculo convencional entre su significante y su
denotado, además de una clase intencional para su designado.

Significado: idea o concepto que representan o evocan los elementos lingüísticos, como las palabras, expresiones o textos.

Síntesis: exposición breve, escrita u oral, que a modo de resumen contiene un conjunto de ideas fundamentales y relacionadas
con un asunto o materia y que estaban dispersas.

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.

Usuario: es una persona que utiliza una computadora o un servicio de red. Los usuarios de sistemas informáticos y productos de
software generalmente carecen de la experiencia técnica necesaria para comprender completamente cómo funcionan.

Glosario Wayfinding:se refiere a los sistemas de información que guían a las personas a través de ambientes físicos y mejoran su
comprensión y experiencia del espacio.

Wireframe:esquema de página o plano de pantalla, es una guía visual que representa el esqueleto o estructura visual de un sitio
web.
 Los aportes dados a este proyecto nos indican que podemos realizar diseños
muchos más allá que solo comunicar porque también esta implícito la conducta
del usuario al llevarlo a la tecnología en este caso realizarlo hacia una app, en
donde se tomo en cuenta a demás de los elementos gráficos, la interacción del
usuario hacia la conducta y el aprendizaje por enfocarse en una app para las
emergencias médicas pediátricas, por consiguiente ahora manejamos más
herramientas para un diseño de interfaz que sea eficaz y preciso.

Conclusión
 Vídeo

Anexo