1.

Información General

Nombre de la Asignatura: Diseño Multimedia

Carrera: Tecnología Superior en Desarrollo de Software

Semestre: Tercero

Paralelo: A

Fecha: 04-01-2023

Nombre de los estudiantes: Kevin Paucay, Bryan Mamallacta, Marco Quispe y

Francisco Huatatoca
Tema: Escenarios y sketches de interfaces

Docente: Ing. Fernando Núñez

TEMA
Escenarios y sketches de interfaces

• OBJETIVO GENERAL

Desarrollar conocimiento del escenario y sketch sobre el entorno del usuario y su

espacio de trabajo.

• OBJETIVOS ESPECIFICOS
1. Analizar los conceptos teóricos acerca de las interfaces escenarios y
sketch.
2. Dar a conocer los conocimientos de las interfaces escenario y sketch.

ANTECEDENTES

Cuando tengas un proyecto y tengas creadas las personas (explicado en el post anterior),
puedes pasar a usar escenarios. Como una definición de escenarios podría verse “poner en
contexto cómo funcionan las ideas de los diseñadores sobre los usuarios persona”.
Y todo esto sin encender el ordenador. Con lápiz y papel, antes de wireframes o prototipos.
METODOLOGIA O MARCO TEORICO

¿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.
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
Algunos consejos a la hora de crear un sketch

Coge un lápiz y papel y empieza a jugar con ideas y bocetos. El objetivo principal del
dibujo es conseguir ideas de trabajo y explorar cualquier propuesta que creas pueda
llegar a más. Lo mejor que puedes hacer con el dibujo es experimentar, no importa
cometer un error, o que algo no se vea bien, estamos en un momento inicial y no
tenemos que tener miedo de descartarlo y pasar al siguiente boceto. Realmente, cuanto
más tiempo pasemos jugando con las ideas y viendo cómo se pueden mejorar, o si
deben de ser mejoradas, comenzaremos a ver lo que hace que una buena idea lo sea.

Una de las mejores cosas que se puede hacer con un dibujo es documentar y escribir
sobre lo que hemos hecho. Esto es tan fácil como escribir en los laterales pequeños
comentarios con un poco de información acerca de lo que hemos hecho.

Piensa que quizás una idea que hemos descartado para un proyecto en concreto, puede
servirnos para otro proyecto y estas anotaciones nos vendrán muy bien. Incluso es
posible que estemos varios días trabajando sobre una idea, esto también nos resultara
útil para recordar porque añadimos algún elemento en un sketch.

LOS ESCENARIOS

Los escenarios son pequeñas historias sobre usuarios concretos, los cuales usan
tecnologías creadas para un objetivo concreto en un contexto concreto. Vale, se dice
mucho concreto, pero lo cierto es que es vital entender que no debes crear un escenario
general, sino plantear algo muy específico para que tenga un uso real.
Se trata de probar si una idea propuesta es una solución real a las necesidades de los
usuarios.
Por supuesto, estas necesidades las tendrás que haber encontrado mediante un análisis previo,
o deben haber llegado al equipo de diseño a través de un informe de investigación de
mercado.

Elementos de un escenario
Básicamente es una historieta de uno o dos párrafos. Para que sea completa y funcional, debes
concretar los siguientes elementos:
• Agente: debe protagonizarla una o varias de tus personas.
• Objetivo: incluye la funcionalidad o tecnología a testar.
• Situación: encuentra un contexto real para la persona elegida.
• Acción: describe la interacción persona/contexto/funcionalidad.
• Eventos: provoca cosas que ocurran mientras el agente realiza su acción.

¿Por qué usar escenarios en el diseño de interfaces?

Durante el proceso teórico de diseño de una funcionalidad para una aplicación, necesitaremos
aplicar la definición de escenarios. Es la hora de poner esa funcionalidad en contexto real
mediante una historia corta para todos los públicos.
Quita abstracción, sitúa de manera realista a los usuarios objetivo, concreta ideas y facilita
una conversación del equipo.
También es una fuente de nuevas ideas. Puede abrir la mente y provocar caminos
divergentes para resolver los problemas o llegar a los objetivos.
Los escenarios deben ser tan simples y reales que permitan situar a cualquier perfil del equipo
(diseño, programación, venta o análisis) con la posibilidad de hablar en el mismo lenguaje.

Tipos de escenarios
Según Jhon Carroll, diseñador experto en UX de la Interaction Design Foundation, hay
muchos tipos de escenarios:
Escenarios de problemas:
Describe las características de la situación inicial del proyecto, antes de implementar ninguna
funcionalidad. Identifica usuarios objetivo y su contexto. Puede redefinir o crear personas.
Escenarios de metas:
Describe qué intentan conseguir los usuarios objetivo y cuáles son las restricciones que
encuentran para conseguirlas. Útil para poder buscar las primeras soluciones tecnológicas.
Escenarios de actividad:
Describe cómo se desarrollaría una situación anterior con las nuevas funcionalidades de
diseño.
Hay más: escenarios de tareas, de información, de interacción. Cada escenario es
especialmente útil en un momento concreto del desarrollo de un diseño. Podéis encontrar más
información en la web de IDF.

CONCLUSIONES

Los escenarios pueden unir al equipo dando una base sólida para la toma de decisiones. No
hace falta ser un gran escritor para crear un escenario. Al igual que con las personas, los
escenarios sirven al equipo para concretar la situación de la aplicación con sus usuarios
objetivo.
Es mejor crear muchos escenarios en borrador que trabajar intensamente en un
escenario perfecto. Mejor tener algo que cubra los aspectos generales de la aplicación e
incluya diferentes tipos de usuarios. Podrías llegar a ver efectos de la incorporación de
funcionalidades que cambien el rumbo de tu diseño.
Y después, vendrá el storyboards… que es la puesta en escena visual de una persona en un
escenario.

RECOMENDACIONES

Se recomienda investigar mas a profundidad sobre los temas tratados en este

documento ya que la información mostrada en este documento solo explica parcialmente los
contenidos de cada tema tratado, se recomienda también anexar más imágenes que describan
la usabilidad de cada uno de los programas aquí tratados.

BIBLIOGRAFIAS

• Web UI Design Best Practices UI Design From The Experts ,

• The Ultimate Guide to Prototyping
• The Guide to Mockups. Mockup. Types, Methods And Best Practices
• Wireframing for responsive design
• A Beginner’s Guide to Wireframing
• Sketching and Your Design Workflow
• Sketching: How a Simple Pen and Paper Can Transform Your Web Designs
• WebDev-il
• Recopilación de Métodos de Usabilidad
• Design Process In The Responsive Age
• How to use mockups in the UX design process
• Creating Your First Mockup
• All About Grid Systems
• How to Design a Mobile Responsive Website
• The Power of Wireframes and Mockups
• A Comprehensive Guide to Mockups in Web Design
• Los principios heurísticos según Nielsen
• Página oficial de Twitter Bootstrap http://getbootstrap.com
• Página oficial de 960 GRID system http://960.gs
 • Arhippainen, L., Tähti, M. (2003). Empirical Evaluation of User Experience in Two
Adaptative Mobile Application Prototypes. Proceedings of the 2nd International
Conference on Mobile and Ubiquitous Multimedia, 10–12 December, 2003,
Norrköping, Sweden. Disponible en:
http://www.ep.liu.se/ecp/011/007/ecp011007.pdf
• Knapp Bjerén, A. (2003). La Experiencia del Usuario. En: Knapp Bjerén, A.
(coord.). La Experiencia del Usuario. Madrid: Anaya Multimedia, 2003, ISBN 84-
415-1044-X.

ANEXOS

1imagen de un escenario propiedad de: https://www.monografias.com/trabajos108/ingenieria-interfaz-

software/ingenieria-interfaz-software2
2 Imagen de un sketch3 Propiedad de https://mosaic.uoc.edu/2015/09/15/proceso-de-desarrollo-de-un-proyecto-
digital/
PREGUNTAS

¿Cuántos elementos de un escenario hay?

5

¿Por qué usar escenarios en el diseño de interfaces?

Quita abstracción, sitúa de manera realista a los usuarios objetivo, concreta ideas y facilita
una conversación del equipo

¿Qué es escenarios de problemas?

Situación inicial del proyecto, antes de implementar ninguna funcionalidad. Identifica
usuarios objetivo y su contexto

¿Qué es un sketch?
Es un primer boceto que realizamos para un proyecto digital que queremos crear

¿El Sketch donde tiene que reflejar las ideas generales?

Sobre el proyecto