Week 3 - Understanding and Conceptualizing Interaction

Understanding and conceptualizing
interaction
Human and Computer Interaction
Week 3
Learning Goals and Standard
At the end of the lesson the learners will be able to:
• Explain what is meant by the problem space.
• Explain how to conceptualize interaction.
• Describe what a conceptual model is and how to begin to formulate one.
• Discuss the use of interface metaphors as part of a conceptual model.
• Outline the core interaction types for informing the development of a
conceptual model.
• Introduce paradigms, visions, theories, models, and frameworks
informing interaction design.
Understanding the Problem Space
Consider this problem:
Providing drivers with better navigation and traffic information
Augmented Reality HP’s vision of the future: CoolTown

Understanding the Problem Space
What do you What are your

want to create? assumptions?
Problem Space
Will it achieve
What are your
what you hope it
claims? will? If so, how?
A framework for analyzing the problem space
• Are there problems with an existing product or user experience?
• Why do you think there are problems?
• How do you think your proposed design ideas might overcome these
problems?
• When designing for a new user experience how will the proposed
design extend or change current ways of doing things?
An Example: Flickr
What do you think were the main assumptions and claims made by
developers of online photo sharing and management applications, like
Flickr?
An Example: Flickr
 Able to capitalize on the
hugely successful
phenomenon of blogging
Just as people like to blog
so will they want to share
with the rest of the world
their photo collections and
get comments back
 From Flickr’s website (2005):
People like to share their
“is almost certainly the best
photos with the rest of the
online photo management and
world
sharing application in the world”
Conceptualizing the design space
Software Engineering Vs Interaction Design
From problem space to design space
 Having a good understanding of the problem space can help inform the design
space
 e.g., what kind of interface, behavior, functionality to provide
 But before deciding upon these it is important to develop a conceptual model
Develop a conceptual
model
Problem Design
Space Space
Definitions of Conceptual Models
 A conceptual model is “a high-level description of how a system is organized and operates.”
(Johnson and Henderson, 2002, p. 26)
 Not a description of the user interface but a structure outlining the concepts and the
relationships between them
 Why not start with the nuts and bolts of design?
 Architects and interior designers would not think about which color curtains to have before deciding
where the windows will be placed in a new building
 Enables “designers to straighten out their thinking before they start laying out their widgets”
 Provides a working strategy and a framework of general concepts and their interrelations
Goals of Conceptual Models
How can conceptual models help design teams?
 Orientation:
 Orient themselves towards asking questions about how the conceptual model
will be understood by users.
 Open minded:
 prevents design teams from becoming narrowly focused early on.
 Common Ground:
 Establish a set of common terms they all understand and agree upon.
 Reduce the chance of misunderstandings and confusion arising later on.
Steps in Formulating a Conceptual Model
1. What will the users be doing when carrying out their tasks?
2. How will the system support these?
3. What kind of interface metaphor, if any, will be appropriate?
4. What kinds of interaction modes and styles to use?
• always keep in mind when making design decisions how the user will
understand the underlying conceptual model
Conceptual Models
• Many kinds and ways of classifying them
• We describe them in terms of core activities and objects
• Also in terms of interface metaphors
A Classic Example of a conceptual

model:
• The Spreadsheet
Interface Metaphors
• Designed to be similar to a physical
entity but also has own properties
(e.g. desktop metaphor, search
engine)
• Brings up the essence of the

unfamiliar activity, enabling users
to leverage of this to understand
more aspects of the unfamiliar
functionality
Benefits and problems with metaphors
Benefits of using a metaphor Problems with metaphors (Nelson, 1990)
Makes learning new systems easier Break conventional and cultural rules (e.g.,
recycle bin placed on desktop)
Explains an abstract concept
Can constrain designers in the way they
Helps users understand the underlying conceptualize a problem space
conceptual model Conflict with design principles
Can be innovative and enable the realm of Forces users to only understand the system in
computers and their applications to be made terms of the metaphor
more accessible to a greater diversity of
Designers can inadvertently use bad existing
users
designs and transfer the bad parts over
Limits designers’ imagination in coming up with
new conceptual models
Interaction Types
1. Instructing
 Issuing commands using keyboard
and function keys and selecting
options via menus
2. Conversing
 Interacting with the system as if
having a conversation
3. Manipulating
 Interacting with objects in a virtual
or physical space by manipulating
them
4. Exploring
 Moving through a virtual
environment or a physical space
Paradigm
• Inspiration for a conceptual model
• General approach adopted by a community for carrying out research shared
assumptions, concepts, values, and practices
• e.g. desktop, ubiquitous computing
• It is intended to orient designers to the kinds of questions they need to ask.
Examples:
• Ubiquitous computing (mother of them all)
• Pervasive computing
• Wearable computing
• Tangible bits, augmented reality
• Attentive environments
• Transparent computing
Theories, models and frameworks
Are used to inform and inspire design
• A theory is a well-substantiated explanation of some aspect of a phenomenon.
• Example: Activity Theory see Bonnie Nardi’s HCI work on activity theory
To help identify factors relevant to design.
A model is a simplification of some aspect of human–computer interaction
intended to make it easier for designers to predict and evaluate alternative
designs.
Based on a theory coming from other discipline.
A framework is a set of interrelated concepts and/or a set of specific questions.
Provide advice on how to design e.g. steps, questions, concepts, challenges, principles,
tactics and dimensions
Main Differences
Assessment
• Compare the following:
• a paperback book and an ebook;
• a paper-based map and a smartphone map.
• What are the main concepts and metaphors that have been used for
each (think about the way time is conceptualized for each ofthem)?
How do they differ? What aspects of the paper-based artifact have
informed the digital app? What is the new functionality? Are any
aspects of the conceptual model confusing? What are the pros and
cons?
Integration
Whenever you encountered a
problem, who is the person
you first looking at? Did it
came to your life that you
ask God about your
problems? What is your
reflection on the bible verse
about problem?
Reference
• HCI: Fundamentals and Practice, CRC Press, 2018-2019
• Schwartz, Lopsie (2015). Precision Photoshop: creating powerful
visual effects, CRC Press is an imprint of Taylor & Francis Group
• Gustafson, Aaron (2016). Adaptive web design: crafting rich
experiences with progressive enhancement. New Riders
• Maivald, James J. (2015). Adobe dreamweaver CC: 2014 release,
Adobe Press Books.

Week 3 - Understanding and Conceptualizing Interaction

Uploaded by

Copyright:

Available Formats

Week 3 - Understanding and Conceptualizing Interaction

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

Week 3 - Understanding and Conceptualizing Interaction

Uploaded by

Copyright:

Available Formats

Understanding and conceptualizing

Augmented Reality HP’s vision of the future: CoolTown

What do you What are your

A Classic Example of a conceptual

• Brings up the essence of the

You might also like