Essentials of IBM Rational Requirements Composer, v3 · 2017. 12. 16. · Encourage analysts to use scenario thinking rather than focusing on individual requirements. Enable customers

© 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


Topics

> = Current topic

>Creating user-interface

sketches and parts

Creating storyboards

and screen flows


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.


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


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


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


Creating a sketch

Create a user-interface sketch as you would

any other artifact.


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


Creating a part

You can create a part as you would any other

artifact. Add elements in the Sketch editor,

and then save it.


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.


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.


Lab 5.1: Create a user-interface sketch

Complete these tasks:


Create parts that can be reused in

user-interface sketches


Topics

> = Current topic

Creating user-interface

sketches and parts

> Creating storyboards

and screen flows


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


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?


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.


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.


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.


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.


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.


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.


A frame created from an existing sketch

A frame created from

existing UI sketch.


Related frames

Shows the series (dependency chain) that

the selected frame belongs to

Frames


Screen flow

Screen flows show the possible

paths between screens.


Lab 5.2: Creating a storyboard

Complete these tasks:

Explore an existing storyboard

Create a storyboard


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?


Module summary

In this module, you learned how to:

Create a user-interface part


Explain what storyboarding is

Create a storyboard

Documents

Essentials of IBM Rational Requirements Composer, v3 · 2017. 12. 16. · Encourage analysts to use scenario thinking rather than focusing on individual requirements. Enable customers