Lecture10 HCI 2020 - LUMS Web Online

10/14/20
+
Conceptual Design
Suleman Shahid
Suleman Shahid -Human Computer Interaction - LUMS-SBASSE-CS 10/14/20
+
Agenda
n Déjà vu
n User Research
n Conceptual Design
1
10/14/20
+
User centered design process
1 2 3 4 5
n Conceptual design
n Identify the content and functionality
n Structure of the contents
n Visualization of contents
n Design alternatives
2
10/14/20
+
User centered design process
1 2 3 4 5
n Techniques at this stage

n Brainstorming
n Card sorting
n Storyboards
n Participatory design
+
Key components of a problem
definition (Recap)
n identify the human activity
n which the proposed interactive system will support
n identify the people, or users

n who will perform the activity
n set the levels of support

n which the system will provide (the system’s usability)
n select the basic form of solution

n to employ in the design problem
3
10/14/20
+
n Déjà vu
n Phase-1 Highlights
n UCD Recap
n Product Development Cycle

n Where are we now?
Agenda n Conceptual Design

n From Requirements to Design
n Conceptual Model
n Design Alternatives
n Brainstorming
n Scenarios
n Sketching
n Storyboards
Suleman Shahid -Human Computer Interaction -

10/14/20
LUMS-SBASSE-CS
Brainstorming
4
10/14/20
+
Brainstorming/Concept
Generation
n The point is to generate MANY, WIDE-RANGING ideas
n nutty and absurd are GOOD.
n Go for the extremes (to get out of the rut)
n riff off other’s ideas
n The point is NOT to generate excellent, complete, feasible

ideas
n to develop or critique ideas
n go wide
n deep is for later.
Ref: cpsc 344 / class 03b

+
Brainstorming is like popcorn
Ground rules
n Postpone and withhold your judgment of ideas:

n never criticize
n Encourage wild and ‘larger-than-life’ ideas
n Quantity counts at this stage, not quality
n More Ideas == More Creative == Better
n Switch topics when the popcorn slows down
n Build on the ideas put forward by others
n Every person and every idea has equal worth
n Be Visual
n One Conversation at a Time (stay focused on the topic)
5
10/14/20
6
10/14/20
+ How not to BRAINSTORM
+
Storm the Brain
In-class activity
10/14/20 Suleman Shahid - Human Computer Interaction- LUMS/SBASSE/CS
7
10/14/20
Suleman Shahid - Human Computer Interaction- LUMS/SBASSE/CS 10/14/20
+
n Déjà vu
n UCD Recap

n Where are we now?

n Conceptual Model
n Brainstorming
n Scenarios
n Sketching
n Storyboards
Suleman Shahid - Human Computer Interaction-

10/14/20
LUMS/SBASSE/CS
8
10/14/20
+
Where do design alternatives
come from?
n Humans stick to what they know works
n But considering alternatives is important to ‘break out of the

box’
n How do you generate alternatives?

n ‘Flair and creativity’: research & synthesis
n Seek inspiration: look at similar products or
look at very different products
n Techniques?
ID Book, Preece et al
+
Steel Bridge Design Alternatives
9
10/14/20
10
10/14/20
+
How do you choose among
alternatives?
n Evaluation with users, using prototypes
n Technical feasibility: some not possible
n Quality thresholds:
n Usability goals lead to usability criteria set early on and check
regularly
n safety
n Utility
n effectiveness
n efficiency
11
10/14/20
+
In-class Activity
Generating design alternatives
10/14/20 Suleman Shahid - Human Computer Interaction- LUMS/SBASSE/CS
+
n Déjà vu
n UCD Recap

n Where are we now?

n Conceptual Model
n Brainstorming
n Scenarios
n Sketching
n Storyboards

10/14/20
LUMS/SBASSE/CS
12
10/14/20
+
Communicating your ideas
First Stage
n Lots of ideas
n Choose appropriate one based on the criteria discussed

earlier
n Communicate these ideas within team and with users

n Scenarios
n Sketching
n Storyboards
+
Scenarios
n “Scenarios are stories about people and their activities”
n Focuses developers on the most important user activities

that should be supported
n Does not focus on implementation
n Can either describe current practice, or a future

hypothetical scenario
T. Parikh
13
10/14/20
+
Using scenarios in conceptual
design
§Express proposed or imagined situations
§Used throughout design in various ways
§scripts for user evaluation of prototypes
§concrete examples of tasks
§as a means of co-operation across professional
boundaries
+
Example Scenario
John wants to take notes while in class. Even though the slides
will be posted online later, he wants to make sure he captures
the most important points. Before the professor starts the
lecture, he starts the note-taking application on his phone.
The application automatically notes the current date, time and
class. During the class he can press one of two buttons - to
start recording audio or to take a picture. After recording, the
application allows him to tag the recording with keywords.
Later, when he is home, he can review his notes, synchronized
with the powerpoint slides downloaded from the course web
site. He can search by keyword, follow the lecture linearly, or
sped up in time.
T. Parikh
14
10/14/20
+
Elements of a Scenario
n Agents / Actors
n Setting
n Goals / Objectives
n Actions / Events
+
Ways to Present a Scenario
n Text paragraph
n Storyboard (Comic book)
n Video
Tapan Parikh
15
10/14/20

Source: http://best.me.berkeley.edu/~lora/images/process_photos/ses_storyboard.jpg
16
10/14/20
17
10/14/20
+
Agile User Story
18
10/14/20
+
In-class activity
n A user scenario is the fictitious story of

a user's accomplishing an action or goal via a product. It
focuses on a user's motivations, and documents the process
by which the user might use a design. ... It is therefore
common for user scenarios to be based on user personas.
+
n Déjà vu
n UCD Recap

n Where are we now?

n Conceptual Model
n Brainstorming
n Scenarios
n Sketching
n Storyboards

10/14/20
LUMS/SBASSE/CS
19
10/14/20
+ Sketches
+
Sketching
From ‘Sketching User Experience’ Book

Suleman Shahid - Human Computer Interaction- LUMS/SBASSE/CS B. Buxton 10/14/20
20
10/14/20
+
Sketches

From a previous cs147 project…
21
10/14/20
+
Sketching: rendering Styles
22
10/14/20
+
Annotating Sketches
23
10/14/20
24
10/14/20
+
n Déjà vu
n UCD Recap

n Where are we now?

n Conceptual Model
n Brainstorming
n Scenarios
n Sketching
n Storyboards

10/14/20
LUMS/SBASSE/CS
+
Storyboards
§Often used with scenarios, bringing more detail, and a

chance to role play
§It is a series of sketches showing how a user might

progress through a task using the device
§Used early in design
25
10/14/20
+
Storyboarding
n Borrowed from the film/animation/comic industries

n One panel = One Scene
n Presented to a group of people
n Gauge their reactions, understanding
n Takes time up front, saves time later
n Intended to visualize our scenarios
n Provide a mechanism to gracefully move from conceptual
n Design to screen design
n Allow us to make mistakes early, in paper (cheap and quick),
n Instead of later, in software (expensive and tedious)
J. Kolko
+
Pervasive game storyboard

26
10/14/20
Pervasive game storyboard

+
27
10/14/20
28
10/14/20
+
A simple flip book animation
From ‘Sketching User

Experience’ Book
B. Buxton
+
In-class activity
29
10/14/20
+
Summary of Conceptual Design
30

Lecture10 HCI 2020 - LUMS Web Online

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Lecture10 HCI 2020 - LUMS Web Online

Uploaded by

Copyright:

Available Formats

10/14/20

Suleman Shahid -Human Computer Interaction - LUMS-SBASSE-CS 10/14/20

Suleman Shahid -Human Computer Interaction - LUMS-SBASSE-CS 10/14/20

Suleman Shahid -Human Computer Interaction - LUMS-SBASSE-CS 10/14/20

Suleman Shahid -Human Computer Interaction - LUMS-SBASSE-CS 10/14/20

n Techniques at this stage

Suleman Shahid -Human Computer Interaction - LUMS-SBASSE-CS 10/14/20

n identify the people, or users

n set the levels of support

n select the basic form of solution

Suleman Shahid -Human Computer Interaction - LUMS-SBASSE-CS 10/14/20

n Product Development Cycle

Agenda n Conceptual Design

Suleman Shahid -Human Computer Interaction -

n The point is NOT to generate excellent, complete, feasible

Ref: cpsc 344 / class 03b

n Postpone and withhold your judgment of ideas:

Suleman Shahid -Human Computer Interaction - LUMS-SBASSE-CS 10/14/20

Suleman Shahid -Human Computer Interaction - LUMS-SBASSE-CS 10/14/20

Suleman Shahid -Human Computer Interaction - LUMS-SBASSE-CS 10/14/20

+ How not to BRAINSTORM

Suleman Shahid -Human Computer Interaction - LUMS-SBASSE-CS 10/14/20

10/14/20 Suleman Shahid - Human Computer Interaction- LUMS/SBASSE/CS

Suleman Shahid - Human Computer Interaction- LUMS/SBASSE/CS 10/14/20

n Product Development Cycle

Agenda n Conceptual Design

Suleman Shahid - Human Computer Interaction-

n But considering alternatives is important to ‘break out of the

n How do you generate alternatives?

Suleman Shahid - Human Computer Interaction- LUMS/SBASSE/CS 10/14/20

Suleman Shahid - Human Computer Interaction- LUMS/SBASSE/CS 10/14/20

Suleman Shahid - Human Computer Interaction- LUMS/SBASSE/CS 10/14/20

Suleman Shahid - Human Computer Interaction- LUMS/SBASSE/CS 10/14/20

n Technical feasibility: some not possible

Suleman Shahid - Human Computer Interaction- LUMS/SBASSE/CS 10/14/20

10/14/20 Suleman Shahid - Human Computer Interaction- LUMS/SBASSE/CS

n Product Development Cycle

Agenda n Conceptual Design

Suleman Shahid - Human Computer Interaction-

n Choose appropriate one based on the criteria discussed

n Communicate these ideas within team and with users

Suleman Shahid - Human Computer Interaction- LUMS/SBASSE/CS 10/14/20

n “Scenarios are stories about people and their activities”

n Focuses developers on the most important user activities

n Does not focus on implementation

n Can either describe current practice, or a future

Suleman Shahid - Human Computer Interaction- LUMS/SBASSE/CS 10/14/20

Suleman Shahid - Human Computer Interaction- LUMS/SBASSE/CS 10/14/20

n Storyboard (Comic book)

Suleman Shahid - Human Computer Interaction- LUMS/SBASSE/CS 10/14/20

Suleman Shahid - Human Computer Interaction- LUMS/SBASSE/CS 10/14/20

Suleman Shahid - Human Computer Interaction- LUMS/SBASSE/CS 10/14/20

Suleman Shahid - Human Computer Interaction- LUMS/SBASSE/CS 10/14/20

Suleman Shahid - Human Computer Interaction- LUMS/SBASSE/CS 10/14/20

Suleman Shahid - Human Computer Interaction- LUMS/SBASSE/CS 10/14/20

n A user scenario is the fictitious story of

Suleman Shahid - Human Computer Interaction- LUMS/SBASSE/CS 10/14/20

n Product Development Cycle

Agenda n Conceptual Design

Suleman Shahid - Human Computer Interaction-

Suleman Shahid - Human Computer Interaction- LUMS/SBASSE/CS 10/14/20

From ‘Sketching User Experience’ Book

From ‘Sketching User Experience’ Book