© Copyright IBM Corporation 2010, 2011
Essentials of IBM Rational Requirements Composer, v3
Module 5: Creating user-interface sketches and storyboards
2 © Copyright IBM Corporation 2010, 2011
Module overview
After completing this module, you should be able to:
Create a user-interface sketch
Create a user-interface part
Explain storyboarding
Create a storyboard
3 © Copyright IBM Corporation 2010, 2011
Topics
> = Current topic
>Creating user-interface
sketches and parts
Creating storyboards
and screen flows
4 © Copyright IBM Corporation 2010, 2011
Improving user experience through sketching and storyboarding
Use case model
Vision
Supplementary spec
• Features
• Functional requirements
• Non-functional requirements (including
constraints)
• Use cases and user story elaborations
Userperspective
Solution
space
UI specification
Systemperspective
Storyboard
• User interface
specification
• User interface
• StoryboardUI sketch
High-level businessrequirements
,
• Business goals and objectives
• Business processes (as-is versus to-be)
• Stakeholder needs
• Glossary
• Business rulesGlossary
Businessperspective
Stakeholder needs
Business processes
Problem
space
Sketches and storyboards
provide stakeholders with
a visual representation of
the solution.
5 © Copyright IBM Corporation 2010, 2011
The value of creating sketches and storyboards
Facilitate requirements conversations by putting abstract ideas into a concrete context.
Present abstract, conceptual, often highly technical ideas simply and visually to remove ambiguity and enhance understanding by all, including non-technical customers.
Encourage analysts to use scenario thinking rather than focusing on individual requirements.
Enable customers to more intuitively grasp proposals and to have more productive conversations about them.
Enable teams to start creating low-fidelity artifacts that focus on customer needs and scenario flows rather than design details. Teams then evolve same artifacts through iterations into more mature, higher-fidelity views.
Create visual artifacts that take advantage of the collaborative features of Rational Requirements Composer and the CLM context
6 © Copyright IBM Corporation 2010, 2011
User interface sketches
A user-interface sketch is a mock-up of the graphical user interface
of a software product.
You can use sketches to create low to medium-fidelity mock-ups for
web-based and rich-client applications.
User-interface sketches can be used to build frames in a storyboard.
A login page mock-up
7 © Copyright IBM Corporation 2010, 2011
User interface editor
You create user interface sketches by adding
design elements in the Sketch editor.
You can use created artifacts such as images, parts, and sketches.
Various UI objects are available to place on screen mockups.
Pointer options
8 © Copyright IBM Corporation 2010, 2011
Creating a sketch
Create a user-interface sketch as you would
any other artifact.
9 © Copyright IBM Corporation 2010, 2011
User-interface parts
A part is a reusable set of user-
interface elements
Reuse a part in user-interface
sketches and storyboard frames to
create persistent user interface-
elements
A part can contain a single element
(such as a menu) or many
elements that are aggregated in a
container element (such as a panel
or group)
A part can be added to other parts
10 © Copyright IBM Corporation 2010, 2011
Creating a part
You can create a part as you would any other
artifact. Add elements in the Sketch editor,
and then save it.
11 © Copyright IBM Corporation 2010, 2011
Creating a part from within a sketch
Or, you can create a part from within
a sketch.
1
2 3
Use the Marquee selection tool to select
elements in the sketch to be in the part.
From the menu, click Save
Selection as a user interface part.
12 © Copyright IBM Corporation 2010, 2011
Guidance on using sketching tools
Reuse parts and sketches whenever possible.
Think twice before taking these actions:
Deleting sketches or designs
Deleting elements in a sketch
Copying a sketch and breaking the inheritance relationship
Use screen capture images to demonstrate changes
to an established UI.
13 © Copyright IBM Corporation 2010, 2011
Lab 5.1: Create a user-interface sketch
Complete these tasks:
Create a user-interface sketch
Create parts that can be reused in
user-interface sketches
14 © Copyright IBM Corporation 2010, 2011
Topics
> = Current topic
Creating user-interface
sketches and parts
> Creating storyboards
and screen flows
15 © Copyright IBM Corporation 2010, 2011
Storyboards
A visual representation of a user
scenario with sequentially
numbered frames on a timeline
Each step refers to a specific
sketch, and all sketches appear
on the board
Provides a way to explore:
The context of a system
Possible sequences to solve
a complex requirements
sequence flow
A scenario or use case– to
view a set of screens that
accomplish something
valuable to a user
16 © Copyright IBM Corporation 2010, 2011
The purpose of using a storyboard
Reduce project risks:
Customer: “I’ll know it when I see it.”
Resolve uncertainties early in the development process.
Use these uncertainties to decide where storyboarding will be useful.
Save time and money:
Use storyboards to help elicit, clarify, complete, and validate
requirements.
– Validate scenarios before detailing a use case.
Use storyboards for interactive requirements and use-case reviews with
stakeholders and to find answers to these questions :
– What’s missing?
– What’s wrong?
– What’s unnecessary?
17 © Copyright IBM Corporation 2010, 2011
What is in a storyboard
Frame list
Frames
Timeline
The
content of
the frame
is based on
these
sketches
A well written frame list
can tell a user story or
describe a use-case
scenario.
18 © Copyright IBM Corporation 2010, 2011
The storyboarding process
Identify scenarios that outline the key system functions.
You can employ use cases (or user stories) for
the initial scenario identifications, if available.
Determine which scenarios must have storyboards.
Many scenarios are obvious, and a storyboard
does not add value.
Outline the steps of the storyboard with the stakeholders.
Use Rational Requirements Composer to create the frame list.
Keep storyboards focused on a specific user context and user goal.
19 © Copyright IBM Corporation 2010, 2011
Recommendations for creating a storyboard
Define a persona template:
Describe a real user of the system and how the user will
work with it.
Create the persona template in a rich-text document.
Link to related actors and related storyboards.
Use subfolders to group artifacts by categories and
themes.
Create the frame list:
Complete the step-by-step outline before delving into the
details of each frame.
Populate the frames.
20 © Copyright IBM Corporation 2010, 2011
Guidance on UI sketching and storyboarding
Sketch user interfaces and wire frames to visualize
interaction points in user scenarios.
Compose storyboards from sketches to understand
the user experience, identify gaps, and verify
requirements.
Link storyboards to business processes, use-case
flows, and rich-text content to create related content
and to encourage team understanding and
consensus.
Focus on visually designing the user interaction that is
preferred in an application.
Do not use sketches or storyboards to produce a
prototype.
21 © Copyright IBM Corporation 2010, 2011
Creating a storyboard
Create a storyboard as you would any other
artifact: Choose the Storyboard Artifact
Type. Then build it in Edit mode.
To add frames to the storyboard, click Enter
Frame Title to type a frame title. Press Enter.
To add a new frame, on the Frames menu click
Empty Frame .
Repeat these steps to outline the entire story.
22 © Copyright IBM Corporation 2010, 2011
Creating a frame
To add content to a frame, double-click a
frame thumbnail to open it in the editor.
You can add content to the frame from an
another frame or from a sketch.
23 © Copyright IBM Corporation 2010, 2011
A frame created from an existing sketch
A frame created from
existing UI sketch.
24 © Copyright IBM Corporation 2010, 2011
Related frames
Shows the series (dependency chain) that
the selected frame belongs to
Frames
25 © Copyright IBM Corporation 2010, 2011
Screen flow
Screen flows show the possible
paths between screens.
26 © Copyright IBM Corporation 2010, 2011
Lab 5.2: Creating a storyboard
Complete these tasks:
Explore an existing storyboard
Create a storyboard
27 © Copyright IBM Corporation 2010, 2011
Review
Why build user-interface parts?
What is the value of building
storyboards?
What is a screen flow?
When would you use story
boards and user sketches to
elaborate user stories?
28 © Copyright IBM Corporation 2010, 2011
Module summary
In this module, you learned how to:
Create a user-interface part
Create a user-interface sketch
Explain what storyboarding is
Create a storyboard