Task Analysis, Storyboarding,

Use Cases
J. Dheeba/SCOPE

J. Dheeba/SCOPE
Learning objectives
• Identify goals, tasks and actions and construct hierarchical task
analysis.
• Create storyboards and scenarios for user interactions.
• Design use case diagrams for identifying the activity in the interface
designs

J. Dheeba/SCOPE
Task analysis
• Task analysis is the process of analyzing the way people perform their
jobs: the things they do, the things they act on and the things they
need to know.
• Task decomposition which looks at the way a task is split into subtasks, and
the order in which these are performed.
• Knowledge-based techniques which look at what users need to know about
the objects and actions involved in a task, and how that knowledge is
organized.
• Entity–relation-based analysis which is an object-based approach where the
emphasis is on identifying the actors and objects, the relationships between
them and the actions they perform.

J. Dheeba/SCOPE
Task decomposition
• A hierarchical task analysis (HTA) describes an activity in terms of its
specific goals, subgoals, operations, and plans.
• Once the analysis is complete, the task activity is described in detail.
• The task hierarchy can be represented diagrammatically as well as textually
• Sample task analysis in textual form,
0. in order to clean the house
1. get the vacuum cleaner out
2. fix the appropriate attachment
3. clean the rooms
3.1. clean the hall
3.2. clean the living rooms
3.3. clean the bedrooms
4. empty the dust bag
5. put the vacuum cleaner and attachments away
Plan 0: do 1 – 2 – 3 – 5 in that order.
when the dust bag gets full do 4
Plan 3: do any of 3.1, 3.2 or 3.3 in any order
depending on which rooms need cleaning
J. Dheeba/SCOPE
• not all the subtasks need be performed, and not necessarily in the
order presented.
• This sort of restructuring, finding the appropriate and meaningful
hierarchy, is part of the process of HTA
• It involves,
• identifying users’ primary goals
• detailing the steps users must perform to accomplish their goals
• optimizing these procedures

J. Dheeba/SCOPE
 • Diagrammatic task analysis – More accessible at the first glance
• Example, task of making a cup of tea

Main task

Decomposed into six subtask

Expanded
further

Analysis is deliberately
stopped at this point

J. Dheeba/SCOPE
• One way the analyst can search for omissions is by examining the
form of the subtasks.
• For example, 1.4 says ‘turn off gas’, but nowhere does it say to turn
the gas on

J. Dheeba/SCOPE
• Modified HTA

J. Dheeba/SCOPE
Notations

Fixed sequence
Optional tasks
Waiting events
Cycles
Time-sharing
Discretionary

J. Dheeba/SCOPE
• Produce a high-level hierarchical task analysis showing how you
would find information on a website. Assume the site has a search
facility as well as normal links.

J. Dheeba/SCOPE
Storyboarding
• Graphical depiction of the outward appearance of the intended system,
without any accompanying system functionality.
• they can be mocked up without the aid of any computing resource.
• Initially was used in film industry
• provide snapshots of the interface at particular points in the interaction.
• storyboards usually include annotations and scripts indicating how the
interaction will occur.
• designer can rapidly build graphical and textual interaction objects and
attach some behavior to those objects, which mimics the system’s
functionality – Simulation
• HyperCard, Wizard of Oz

J. Dheeba/SCOPE
• Effective storyboards can quickly convey information that would be
difficult to understand in text.

J. Dheeba/SCOPE
In terms of interactive design
• Visualize, predict and explore the user experience in context of the
product.
• Think in the form of movie of how people will use it.
• Bringing the ideas on to the paper (cheap)
• bring from the old ideas.
• Design it on papers – faster, all can contribute (not just designers)

J. Dheeba/SCOPE
J. Dheeba/SCOPE
• 5 visual elements
• Level of detail
• Inclusion of text
• Inclusion of people and emotions
• Number of frames
• Portrayal of time

J. Dheeba/SCOPE
• Imagine you are creating a sales and services website/app. What are
the tasks do you think is required for the website/app. How do you
design the layout/storyboard? (front page)

Page logo Banner

About Us Services Products FAQs Testimonials Contact

Login

Footer
J. Dheeba/SCOPE
• Example

J. Dheeba/SCOPE
User scenarios – persona
• Storyboards are based on a scenario or a user story. The persona or
role that corresponds to that scenario is clearly specified at the top of
the storyboard.
• Description of user and what user wishes to do
• Be specific/detailed, even give names and picture

J. Dheeba/SCOPE
J. Dheeba/SCOPE
• Felix (representing teenage ATM users)
• Felix is 13 and gets pocket money each week. He spends it with his friends, so
doesn’t make regular deposits. He does receive gifts for his birthday,
Christmas, etc. and saves that money for special purchases, such as a
computer games console or trendy clothes. He has an ATM card allowing him
to make withdrawals when needed for his purchases.
• Sandra (representing young adults thru middle age)
• Sandra is 30, is married to Jason, has two children Todd(6) and Carly (18
months). They live in a subdivision that is about three miles from the town
center, where the bank and stores are located. Jason uses the car for work,
and works long hours, leaving at 6:45 am and returning at 8:00 pm. Sandra
does not drive, so has to use public transportation. She tries to run errands
and shop while Todd is in school, so she does only has to take Carly to town
with her. She typically needs to make two trips to town each week to get
everything done. She uses a stroller with Carly, and the bank is one flight up
via escalator, so she prefers to use the ATM outside the first floor, even
though there is no canopy to protect customers from bad weather.
J. Dheeba/SCOPE
Use case
• Describe the goals of the users and other systems that interact with
the system that is being modeled.
• They are used to describe the functional requirements of a system,
subsystem or entity and present a simple but compelling picture of
how the system will be used.
• Communicate complex ideas in a basic ways.
• 4 different elements
• Systems
• Actors
• Use cases and
• Relationships

J. Dheeba/SCOPE
• System
• Whatever you are developing is the system – it could be a website, software
product or an App.
• System is represented with a rectangle with the name of the
application/website/software product at the top
• A boundary rectangle is placed around the perimeter of the system to show
how the actors communicate with the system.
• This shows the scope of the system and anything within this rectangle belongs
to the banking App. Banking APP
• Anything outside doesn’t belong to the App.

J. Dheeba/SCOPE
• Actor
• An Actor is outside or external the system. They use our system to achieve the goal.
• They have to be placed outside the system.
• It can be a:
• Human
• Peripheral device (hardware)
• External system or subsystem
• organization
• Represented by stick figure.
Customer
• For the banking App, who is going to be the actor
• Customer – who is going to download and use the app
• Bank – has to provide information that feeds into the banking app like transactions
• Actor – is the who of the system, end user.
• Primary actor – customer, initiates the use of the system
• Secondary actor – Bank, it acts when the customer does something in the app

J. Dheeba/SCOPE
 Banking APP
Note: Primary actor should be at the left
Secondary actor should be at the right

Customer

Bank

J. Dheeba/SCOPE
 Banking APP

Bank
Customer
Use Case – Depicted with the oval shape that
accomplishes the task within the system

J. Dheeba/SCOPE
 Banking APP

login

Check Bank
account
Customer
balance
What is this App going to do?
Login
Transfer Check account balance
funds Transfer funds
Make payment

Make
payment

J. Dheeba/SCOPE
 Banking APP

login

Check Bank
account
balance

Customer
Transfer Relationships
funds Each actor has to interact with the system
Represented by solid lines
Association – basic communication
Make
payment

J. Dheeba/SCOPE
 Banking APP
Verify
password

login Display
error

Check Bank
account
balance

Customer
Transfer Verify Relationships
funds sufficient Association – basic communication
funds Include
Extend
Make Generalization
payment

Checking Saving
account account

J. Dheeba/SCOPE
 Banking APP
Verify
password
<<include>>

login Display
error

Check Bank
account
balance

Customer
Transfer Verify Include – the action that immediately
funds sufficient happens when there is an attempt to login
funds It is a relationship between the base use
case and included use case.
Make Every time the base use case is executed the
payment included use case is also executed
Checking Saving
account account

J. Dheeba/SCOPE
 Banking APP
Verify
password
<<include>>

login <<extends> Display

>
error

Check Bank
account
balance

Customer
Transfer Verify Extend –
funds sufficient It is a relationship between the base use
funds case and extend use case.
<<include>> Every time the base use case is executed the
Make extend use case is sometimes executed but
payment not at all times

Current Saving
account account
J. Dheeba/SCOPE
 Banking APP
Verify
password
<<include>>

login <<extends>> Display

error

Check Bank
account
balance

Customer
Transfer Verify Generalization –
funds sufficient Parent and child relationship
funds
<<include>>
Make
payment

Current Saving
account account
J. Dheeba/SCOPE
Extension point

J. Dheeba/SCOPE
Example 1

J. Dheeba/SCOPE
Project management documentation

J. Dheeba/SCOPE
J. Dheeba/SCOPE
J. Dheeba/SCOPE
J. Dheeba/SCOPE