SlideShare una empresa de Scribd logo
1 de 36
STORYBOARDING
REQUIREMENTS ENGINEERING
Information Systems Engineering
Overview
 Definition.
 Purpose and Benefits of Storyboarding.
 Types of Storyboards.
 Storyboarding Continuum.
 What does Storyboarding do?
 Tools, Tips and Use Cases.
 Agile Software Development.
 Key Points.
STORYBOARDING
2
Definition
Purposed
functionality
Story
Series of
steps/discrete
actions
 A graphic organizer that provides the
viewer with a high-level view of a project
 Explains how a product or different parts of
a product, could work
STORYBOARDING
3
Definition
STORYBOARDING
4
Storyboards originated in the motion picture
industry to help directors and cinematographers
visual a film's scenes in sequence. Such
storyboards resemble cartoon strips
Definition
STORYBOARDING
5
Agile Development
 a storyboard looks less like a cartoon panel
and more like a series of columns filled with
colored squares of paper
 the columns are laid out on large format paper,
a whiteboard or a bulletin board
 Each column represents a status and user
stories are dragged to a new column when the
status of the user story changes
Definition
STORYBOARDING
6
Scrum Software Development
Storyboard Task Board
Definition
STORYBOARDING
7
 Many storyboards show the user at a screen in
each panel
 Sometimes one picture is enough to illustrate
all the actions and outcomes for a use case
 For more complex use cases, or for playing
out of several use cases or aspects of the
whole product, you need a sequence of
pictures
Definition
STORYBOARDING
8
Purpose of Storyboarding
STORYBOARDING
9
 Gaining an early reaction from the users on
the concepts proposed for the application
 offer an effective technique for addressing the
"Yes, But" syndrome
Why Storyboarding?
STORYBOARDING
10
 Extremely inexpensive
 User friendly, informal, and interactive
 Provides an early review of the system’s
interfaces
 Easy to create and easy to modify
 Anchoring design in end use
 Promotes innovation by capturing the
problems people face in a real world domain
Why Storyboarding?
STORYBOARDING
11
 Conveying functionality of a proposed
solution, product or service
 Convince people of the value of a proposed
product in a real-world domain
 Collects requirements and generating
feedback on how the events and
functionalities depicted in the story map to
the intended domain
 Helps people understand how they could
incorporate a new technology in their own
work practice
Types of Storyboards
STORYBOARDING
12
Passive
Active
Interactive
Types of Storyboards
STORYBOARDING
13
Passive
Storyboards Tell a story to the user
they consist of sketches, pictures,
screen shots, PowerPoint presentations,
or sample application outputs
Walk the user through the storyboard,
with a "When you do this, this happens"
explanation
Types of Storyboards
STORYBOARDING
14
Active
Storyboards
Make the user see "a movie that hasn't actually
been produced yet“
They are animated or automated, perhaps by
an automatically sequencing slide presentation,
an animation tool, a recorded computer script or
simulation, or even a homemade movie
Provide an automated description of the way
the system behaves in a typical usage or
operational scenario
Types of Storyboards
STORYBOARDING
15
Interactive
Storyboards
Let the user experience the system in a realistic
and practical way
Require participation by the user
They can be simulations or mock-ups or can be
advanced to the point of throwaway code
An advanced, interactive storyboard built out of
throwaway code can be very close to a throwaway
prototype
Storyboarding Continuum
STORYBOARDING
16
Continuum
Passive
ActiveInteractive
Storyboarding Continuum
STORYBOARDING
17
 The continuum of possibilities ranges from
sample outputs to live interactive demos
 The boundary between advanced storyboards
and early product prototypes is a fuzzy one
Storyboarding Continuum
STORYBOARDING
18
What does Storyboarding do?
STORYBOARDING
19
 In software, storyboards are used most often
to work through the details of the human-to-
machine interface
 In this area each user is likely to have a
different opinion of how the interface should
work
What does Storyboarding do?
STORYBOARDING
20
User-
based
systems
Who
What
How
What does Storyboarding do?
STORYBOARDING
21
Users
Other
systems
Devices
Who
Behavior of
users
Behavior of
system
What
Interaction
Events
States
State
transitions
How
Tools of Storyboarding
STORYBOARDING
22
Passive Storyboarding
Tools of Storyboarding
STORYBOARDING
23
More Advanced
Storyboards
Tools of Storyboarding
STORYBOARDING
24
Passive, active, and user-
interactive storyboards
Tips for Storyboarding
STORYBOARDING
25
 Don't invest too much in a storyboard.
Customers will be intimidated about making
changes if it looks like a real work product or
they think they might insult you
 Make the storyboard easy to modify
 If you don't change anything, you don't learn
anything
 Don't make the storyboard too functional
 Whenever possible, make the storyboard
interactive
Use Cases and Storyboarding
STORYBOARDING
26
If the player is a specific user and the
interaction is between that user and the user
interface, then storyboarding can help us
describe how we are approaching the
interaction
Use Cases and Storyboarding
STORYBOARDING
27
convergence on the GUI and the use case at
the same time
Iterative
Incremental
Use Cases and Storyboarding
Example
STORYBOARDING
28
Suppose you want to elaborate a section of a
use case that would describe how a user
inserts graphic clip art from an online source
into a document
Use Cases and Storyboarding
Example
STORYBOARDING
29
Use Microsoft PowerPoint as your storyboard
presentation tool to build one PowerPoint slide
for each of the steps in the use case to show
the user how you intend the system to work
Use Cases and Storyboarding
Example
STORYBOARDING
30
Use Cases and Storyboarding
Example
STORYBOARDING
31
Use Cases and Storyboarding
Example
STORYBOARDING
32
Agile Software Development
STORYBOARDING
33
 A storyboard can help developers quickly get a
sense of what work still needs to be completed
 As long as the team keeps the storyboard up to
date, anyone can see what work has been
completed, who's working on what and what work
is left to do
 This not only provides the product
owner with transparency, it also helps the team to
visualize the sequence and interconnectedness
of user stories
 Storyboards can be physical or digital
Key Points
STORYBOARDING
34
 The purpose of storyboarding is to elicit
early "Yes, But" reactions
 Storyboards can be passive, active, or
interactive
 Storyboards identify the players, explain
what happens to them, and describe how
it happens
 Make the storyboard sketchy, easy to
modify, and not shippable
 Storyboard early and often on each
project with new or innovative content
STORYBOARDING
35
Presented by:
 Abdul Majeed Al-Kattan
 Rabee Al-Rass
 Rahaf Aamer
 Rimon Koroni
 Sandra Sukarieh
STORYBOARDING36
Thank
You.

Más contenido relacionado

La actualidad más candente

What Is Interaction Design
What Is Interaction DesignWhat Is Interaction Design
What Is Interaction Design
Graeme Smith
 

La actualidad más candente (20)

Good bad design
Good bad designGood bad design
Good bad design
 
UI Design Patterns for the Web, Part 1
UI Design Patterns for the Web, Part 1UI Design Patterns for the Web, Part 1
UI Design Patterns for the Web, Part 1
 
CS6201 Software Reuse - Design Patterns
CS6201 Software Reuse - Design PatternsCS6201 Software Reuse - Design Patterns
CS6201 Software Reuse - Design Patterns
 
Graphical user-interface
Graphical user-interfaceGraphical user-interface
Graphical user-interface
 
Designing and prototyping
Designing and prototypingDesigning and prototyping
Designing and prototyping
 
3 ux design process
3 ux design process3 ux design process
3 ux design process
 
Ui And Ux Designer Proposal PowerPoint Presentation Slides
Ui And Ux Designer Proposal PowerPoint Presentation SlidesUi And Ux Designer Proposal PowerPoint Presentation Slides
Ui And Ux Designer Proposal PowerPoint Presentation Slides
 
What Is Interaction Design
What Is Interaction DesignWhat Is Interaction Design
What Is Interaction Design
 
UI UX introduction
UI UX introductionUI UX introduction
UI UX introduction
 
Introduction to UI/UX with Figma
Introduction to UI/UX with FigmaIntroduction to UI/UX with Figma
Introduction to UI/UX with Figma
 
HCI Basics
HCI BasicsHCI Basics
HCI Basics
 
UX Design Essential Theories
UX Design Essential TheoriesUX Design Essential Theories
UX Design Essential Theories
 
Scamper
ScamperScamper
Scamper
 
UI/UX Fundamentals
UI/UX FundamentalsUI/UX Fundamentals
UI/UX Fundamentals
 
HCI, Chapter 3
HCI, Chapter 3HCI, Chapter 3
HCI, Chapter 3
 
Tools for design thinking - University of Virginia
Tools for design thinking - University of VirginiaTools for design thinking - University of Virginia
Tools for design thinking - University of Virginia
 
Android 4.0 UI design tips
Android 4.0 UI design tipsAndroid 4.0 UI design tips
Android 4.0 UI design tips
 
Website Usability
Website UsabilityWebsite Usability
Website Usability
 
Introduction to User Experience Design
Introduction to User Experience DesignIntroduction to User Experience Design
Introduction to User Experience Design
 
Backbase Webinar: Next Level Mobile Banking
Backbase Webinar: Next Level Mobile Banking Backbase Webinar: Next Level Mobile Banking
Backbase Webinar: Next Level Mobile Banking
 

Similar a Storyboarding - Information Systems Engineering

Introduction to Storyboards
Introduction to StoryboardsIntroduction to Storyboards
Introduction to Storyboards
Lou Patnode
 
Create a storyboard prototype of a mobile app.When creating a stor.pdf
Create a storyboard prototype of a mobile app.When creating a stor.pdfCreate a storyboard prototype of a mobile app.When creating a stor.pdf
Create a storyboard prototype of a mobile app.When creating a stor.pdf
mohammedfootwear
 

Similar a Storyboarding - Information Systems Engineering (20)

Introduction to Storyboards
Introduction to StoryboardsIntroduction to Storyboards
Introduction to Storyboards
 
User Story Mapping Definitions & Basics - StoriesOnBoard.pdf
User Story Mapping Definitions & Basics - StoriesOnBoard.pdfUser Story Mapping Definitions & Basics - StoriesOnBoard.pdf
User Story Mapping Definitions & Basics - StoriesOnBoard.pdf
 
EuroIA 2016 Designing Connected Products
EuroIA 2016 Designing Connected ProductsEuroIA 2016 Designing Connected Products
EuroIA 2016 Designing Connected Products
 
Unified user experience for toshiba products
Unified user experience for toshiba productsUnified user experience for toshiba products
Unified user experience for toshiba products
 
Designing for Multiple Devices - Sarit Arora
 Designing for Multiple Devices - Sarit Arora Designing for Multiple Devices - Sarit Arora
Designing for Multiple Devices - Sarit Arora
 
Create a storyboard prototype of a mobile app.When creating a stor.pdf
Create a storyboard prototype of a mobile app.When creating a stor.pdfCreate a storyboard prototype of a mobile app.When creating a stor.pdf
Create a storyboard prototype of a mobile app.When creating a stor.pdf
 
Prototyping
PrototypingPrototyping
Prototyping
 
Building in Digital and Web Accessibility (for content creators)
Building in Digital and Web Accessibility (for content creators)Building in Digital and Web Accessibility (for content creators)
Building in Digital and Web Accessibility (for content creators)
 
Understanding human motivation_in_the_age_of_connected_machines
Understanding human motivation_in_the_age_of_connected_machinesUnderstanding human motivation_in_the_age_of_connected_machines
Understanding human motivation_in_the_age_of_connected_machines
 
Designing Connected Products - Web Directions 2015 Sydney
Designing Connected Products - Web Directions 2015 SydneyDesigning Connected Products - Web Directions 2015 Sydney
Designing Connected Products - Web Directions 2015 Sydney
 
The Future of UX: What designers need to know to stay ahead
The Future of UX: What designers need to know to stay aheadThe Future of UX: What designers need to know to stay ahead
The Future of UX: What designers need to know to stay ahead
 
ThingsCon Amsterdam 2015 - Koen van Niekerk
ThingsCon Amsterdam 2015 - Koen van Niekerk ThingsCon Amsterdam 2015 - Koen van Niekerk
ThingsCon Amsterdam 2015 - Koen van Niekerk
 
Mobile Prototyping Essentials
Mobile Prototyping EssentialsMobile Prototyping Essentials
Mobile Prototyping Essentials
 
Prototyping
PrototypingPrototyping
Prototyping
 
Max Tkachuk, UI Heuristics for everyone
Max Tkachuk, UI Heuristics for everyoneMax Tkachuk, UI Heuristics for everyone
Max Tkachuk, UI Heuristics for everyone
 
Digital Storytelling: Making Smart Choices by Paul Cheung - Philadelphia News...
Digital Storytelling: Making Smart Choices by Paul Cheung - Philadelphia News...Digital Storytelling: Making Smart Choices by Paul Cheung - Philadelphia News...
Digital Storytelling: Making Smart Choices by Paul Cheung - Philadelphia News...
 
Fra idé til value proposition
Fra idé til value propositionFra idé til value proposition
Fra idé til value proposition
 
Fra idé til value proposition
Fra idé til value propositionFra idé til value proposition
Fra idé til value proposition
 
Fa102b (9)
Fa102b (9)Fa102b (9)
Fa102b (9)
 
Fa102b (10)
Fa102b (10)Fa102b (10)
Fa102b (10)
 

Más de sandra sukarieh

Más de sandra sukarieh (9)

SPRAP - Master Thesis Defense
SPRAP -  Master Thesis DefenseSPRAP -  Master Thesis Defense
SPRAP - Master Thesis Defense
 
Master Thesis Seminar
Master Thesis SeminarMaster Thesis Seminar
Master Thesis Seminar
 
Schema learning
Schema learningSchema learning
Schema learning
 
Strong stubborn sets
Strong stubborn setsStrong stubborn sets
Strong stubborn sets
 
Cloud Computing Interoperability in Education
Cloud Computing Interoperability in EducationCloud Computing Interoperability in Education
Cloud Computing Interoperability in Education
 
Applications of Distributed Systems
Applications of Distributed SystemsApplications of Distributed Systems
Applications of Distributed Systems
 
Timed Colored Perti Nets
Timed Colored Perti NetsTimed Colored Perti Nets
Timed Colored Perti Nets
 
Web Server - Internet Applications
Web Server - Internet ApplicationsWeb Server - Internet Applications
Web Server - Internet Applications
 
Database Threats - Information System Security
Database Threats - Information System SecurityDatabase Threats - Information System Security
Database Threats - Information System Security
 

Último

Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Safe Software
 
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
?#DUbAI#??##{{(☎️+971_581248768%)**%*]'#abortion pills for sale in dubai@
 
Why Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire businessWhy Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire business
panagenda
 
Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Finding Java's Hidden Performance Traps @ DevoxxUK 2024Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Victor Rentea
 

Último (20)

MS Copilot expands with MS Graph connectors
MS Copilot expands with MS Graph connectorsMS Copilot expands with MS Graph connectors
MS Copilot expands with MS Graph connectors
 
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
 
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
 
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost SavingRepurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
 
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, AdobeApidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
 
Why Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire businessWhy Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire business
 
Strategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a FresherStrategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a Fresher
 
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
 
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerHow to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected Worker
 
DEV meet-up UiPath Document Understanding May 7 2024 Amsterdam
DEV meet-up UiPath Document Understanding May 7 2024 AmsterdamDEV meet-up UiPath Document Understanding May 7 2024 Amsterdam
DEV meet-up UiPath Document Understanding May 7 2024 Amsterdam
 
Spring Boot vs Quarkus the ultimate battle - DevoxxUK
Spring Boot vs Quarkus the ultimate battle - DevoxxUKSpring Boot vs Quarkus the ultimate battle - DevoxxUK
Spring Boot vs Quarkus the ultimate battle - DevoxxUK
 
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemkeProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
 
Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...
Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...
Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...
 
Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...
Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...
Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...
 
Apidays New York 2024 - The value of a flexible API Management solution for O...
Apidays New York 2024 - The value of a flexible API Management solution for O...Apidays New York 2024 - The value of a flexible API Management solution for O...
Apidays New York 2024 - The value of a flexible API Management solution for O...
 
Exploring Multimodal Embeddings with Milvus
Exploring Multimodal Embeddings with MilvusExploring Multimodal Embeddings with Milvus
Exploring Multimodal Embeddings with Milvus
 
[BuildWithAI] Introduction to Gemini.pdf
[BuildWithAI] Introduction to Gemini.pdf[BuildWithAI] Introduction to Gemini.pdf
[BuildWithAI] Introduction to Gemini.pdf
 
Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Finding Java's Hidden Performance Traps @ DevoxxUK 2024Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Finding Java's Hidden Performance Traps @ DevoxxUK 2024
 
Biography Of Angeliki Cooney | Senior Vice President Life Sciences | Albany, ...
Biography Of Angeliki Cooney | Senior Vice President Life Sciences | Albany, ...Biography Of Angeliki Cooney | Senior Vice President Life Sciences | Albany, ...
Biography Of Angeliki Cooney | Senior Vice President Life Sciences | Albany, ...
 
Apidays New York 2024 - Passkeys: Developing APIs to enable passwordless auth...
Apidays New York 2024 - Passkeys: Developing APIs to enable passwordless auth...Apidays New York 2024 - Passkeys: Developing APIs to enable passwordless auth...
Apidays New York 2024 - Passkeys: Developing APIs to enable passwordless auth...
 

Storyboarding - Information Systems Engineering