Hci Ch2 Conceptulaization Id

Download as pdf or txt
Download as pdf or txt
You are on page 1of 42

Course Info

Course Title: Human Computer Interaction (HCI)


Course Code: CPCS381, CPIT280, CPIS354
Pre-requisite:CPCS351, CPIT250, CPIS250
Instructor Name: Dr. Rabie Ahmed
Instructor Email: rabie.ahmed@nbu.edu.sa

Meeting: Monday: 10:30 – 01:30


Wednesday: 12:30 – 01:30
Room: LAB202, Theater

1
‫تفاهم‬
Chapter 2
‫تصور‬
UNDERSTANDING AND CONCEPTUALIZING
INTERACTION DESIGN
2
C O N C E PT UALI Z I N G
I N T E R A C T I O N DESIGN
• 2.1 Introduction
• 2.2 Conceptualizing Interaction
• 2.3 Conceptual Models
• 2.4 Interface Metaphors
• 2.5 Interaction Types
• 2.6 Paradigms, Visions, Theories, Models, and
Frameworks

3
2.1: Introduction
• HCI has moved beyond designing interfaces
for desktop machines
• Facilitating user experiences through
designing interactions:

• Make work effective, efficient and safer


• Improve and enhance learning and training
• Provide enjoyable and exciting entertainment
• Enhance communication and understanding
• Support new forms of creativity and expression

4
‫المشكلة‬ ‫مساحة‬
Understanding the problem space

–What do you want to


create?

–What are your


assumptions?

–Will it achieve what you


hope it will?

5
‫تصور‬
ّ ‫التفاعل‬

2.2: Conceptualizing Interaction


• When beginning a design project, it is
important to be clear about the underlying
assumptions and claims.
• Writing down your assumptions and claims
and then trying to defend and support them
can highlight those that are vague or
wanting.
• In so doing, poorly constructed design
ideas can be reformulated.

6
‫االفتراضات‬
What is an assumption?
• taking something for granted when it needs
further investigation
– e.g. people will want to watch TV while
driving

7
‫دعوى‬
What is a claim?
• stating something to be true when it is still open
to question
– e.g. a multimodal style of interaction for
controlling GPS — one that involves speaking
while driving — is safe

8
A framework for analysing
the problem space
• Are there problems with an existing product or
user experience? If so, what are they?
• Why do you think there are problems?
• How do you think your proposed design ideas
might overcome these?
• If you are designing for a new user experience how
do you think your proposed design ideas support,
change, or extend current ways of doing things?
9
Activity (1)
• What are the assumptions and claims made about 3D TV?

One assumption for 3D TV was that people would not mind


wearing the glasses that were needed to see in 3D, nor would
they mind paying a lot more for a new 3D-enabled TV screen.
A claim was that people would really enjoy the enhanced clarity
and color detail provided by 3D, based on the favorable feedback
received worldwide when viewing 3D films. 10
‫االفتراضات‬ ‫واقعية‬ ‫قائمة الرغبات؟‬
Assumptions: realistic or wish-list?
• People would not mind wearing the glasses that are
needed to see in 3D in their living rooms –
reasonable
• People would not mind paying a lot more for a new
3D-enabled TV screen – not reasonable

• People would really enjoy the enhanced clarity and


color detail provided by 3D – reasonable

• People will be happy carrying around their own


special glasses – reasonable only for a very select
bunch of users
11
‫فوائد‬ ‫التصور‬

Benefits of conceptualising
• Orientation ‫توجيه‬
– enables design team to ask specific questions
about how the conceptual model will be
understood
• Open-minded ‫منفتح العقل‬
– prevents design team from becoming narrowly
focused early on, Allowing the team to explore a
range of different ideas to address the problems
identified.
• Common ground ‫أرضية مشتركة‬
– allows design team to establish a set of commonly
agreed terms 12
‫مساحة المشكلة‬ ‫مساحة التصميم‬

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, behaviour,


functionality to provide

• But before deciding upon these it is important


to develop a conceptual model

13
‫النموذج المفاهيمي‬
2.3: Conceptual models
• A model is:
– a simplified description of a system or process that
helps describe how it works.

• A conceptual model is:


– a high-level description of how a system is organized
and operates.
(Johnson and Henderson, 2002, p26)

• Enables
– designers to straighten out their thinking before they
start laying out their widgets.
(Johnson and Henderson, 2002, p28) 14
‫مكونات النموذج المفاهيمي‬
Conceptual models Components
• In a nutshell, a conceptual model provides a working
strategy and a framework of general concepts and their
interrelations.
• The core components are as follows:
• Metaphors and analogies that convey to people
– how to understand what a product is for and how to use it for
an activity (e.g browsing and bookmarking).
• Concepts that people are exposed to through the product
– task–domain objects, their attributes, and operations (e.g.
saving, revisiting, organizing).
• Relationship and mappings between these concepts
– and the user experience the product is designed to (e.g. one
object contains another, one can revisit a page through looking
at a list of visited sites). 15
First steps in formulating
a conceptual model
• What will the users be doing when carrying
out their tasks?
• How will the system support these?
• What kind of interface metaphor, if any, will
be appropriate?
• 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
16
‫استعارات الواجهة‬

2.4: Interface metaphors


• Metaphors are considered to be a central component
of a conceptual model. More specifically, an interface
metaphor is one that is instantiated in some way as
part of the user interface, such as the desktop
metaphor.
– (e.g. search engine vs mechanical engine)

• Interface designed to be similar to a physical entity


but also has own properties. Exploit user’s familiar
knowledge, helping them to understand ‘the
unfamiliar’. Visualizing an operation.
– (e.g. an icon of a shopping cart for placing items into)
17
‫استعارات مادية‬
Material Metaphors
•An interface metaphor that has
become popular in the last few years
is the card.
• Many of the social media apps, such
as Facebook and Twitter, present their
content on cards.
•In the context of the smartphone
interface, the Google Now card
provides short snippets of useful
information.
•Material properties are added, giving
appearance and physical behavior,
e.g. surface of paper 18
Activity (2)
• Go to a few online stores and see how the interface has been
designed to enable the customer to order and pay for an item.

Making a purchase online usually involves spending money by


inputting one’s credit/debit card details. Designing the interface to
have a familiar metaphor (with an icon of a shopping cart/basket,
not a cash register) makes it easier for people to know what to do
at the different stages of making a purchase.
Shopping cart, Check-out 19
‫فوائد استعارات الواجهة‬
Benefits of interface metaphors

• Makes learning new systems easier

• Helps users understand the underlying


conceptual model

• Can be very innovative and enable the


computers and their applications to be more
accessible to a greater diversity of users

20
‫مشاكل مع استعارات الواجهة‬

Problems with interface metaphors


• Break conventional and cultural rules, e.g. recycle
bin placed on desktop
• Can constrain designers in the way they conceptualize
a problem space
• Conflict with design principles
• Forces users to only understand the system in terms of
the metaphor
• Designers can inadvertently use bad existing designs
and transfer the bad parts over
• Limits designers’ imagination in coming up with new
conceptual models
21
‫أنواع التفاعل‬
2.5: Interaction types
• Instructing ‫التعليمات‬
– issuing commands and selecting options

• Conversing ‫التحدث‬
– interacting with a system as if having a conversation

• Manipulating ‫التالعب‬
– interacting with objects in a virtual or physical space by
manipulating them

• Exploring ‫االستكشاف‬
– moving through a virtual environment or a physical space
22
1. Instructing
• Where users instruct a system and tell it what to do
– e.g. tell the time, print a file, save a file

• Very common conceptual model, underlying a diversity


of devices and systems
– e.g. word processors, VCRs, vending machines

• Main benefit is that instructing supports quick and


efficient interaction
– good for repetitive kinds of actions performed on
multiple objects

23
Activity (3)
Which is easiest and why?

24
2. Conversing
• Underlying model of having a conversation with
another human

• Range from simple voice recognition menu-driven


systems to more complex ‘natural language’
dialogs

• Examples include timetables, search engines,


advice-giving systems, help systems

• Also virtual agents, toys and pet robots designed


to converse with you
25
Activity (4)
Siri Would you talk with Anna

26
3. Manipulating
• Involves dragging, selecting, opening, closing and
zooming actions on virtual objects

• Exploit’s users’ knowledge of how they move and


manipulate in the physical world

• Can involve actions using physical controllers (e.g. Wii)


to control the movements of an on screen avatar

• Tagged physical objects (e.g. balls) that are manipulated


in a physical world result in physical/digital events (e.g.
animation)
27
Direct Manipulation
• direct manipulation interfaces are assumed to
enable users to feel that they are directly
controlling the digital objects represented by the
computer.
• The three core principles are as follows:
1. Continuous representation of the objects and
actions of interest
2. Rapid reversible incremental actions with
immediate feedback about the object of interest
3. Physical actions and button pressing instead of
issuing commands with complex syntax
28
The benefits of DM
• Helping beginners learn basic functionality rapidly
• Enabling experienced users to work rapidly on a wide
range of tasks
• Allowing infrequent users to remember how to carry
out operations over time
• Preventing the need for error messages, except rarely
• Showing users immediately how their actions are
furthering their goals
• Reducing users’ experiences of anxiety
• Helping users gain confidence and mastery and feel in
control

29
The disadvantages with DM
• Some people take the metaphor of direct
manipulation too literally

• Not all tasks can be described by objects and not all


actions can be done directly

• Some tasks are also better achieved through issuing


commands

• Moving a mouse around the screen can be slower


than pressing function keys to do same actions
30
4. Exploring
• Involves users moving through virtual environments
– (e.g. users can explore aspects of a virtual 3D environment, such as
the interior of a building)

• Physical environments with embedded sensor


technologies
– (e.g. detect the presence of someone or certain body movements,
respond by triggering certain digital or physical events)

• The basic idea is to enable people to explore and


interact with an environment, be it physical or digital
– (e.g. exploiting their knowledge of how they move and navigate
through existing spaces)

31
Which conceptual model is best?
• Direct manipulation is good for ‘doing’ types of tasks,
e.g. designing, drawing, flying, driving, sizing windows

• Issuing instructions is good for repetitive tasks,


e.g. spell-checking, file management

• Having a conversation is good for children, disabled


users and specialised applications
e.g. phone services

• Hybrid conceptual models are often employed, where


different ways of carrying out the same actions is
supported at the interface
but can take longer to learn 32
Which interaction type to choose?
• Need to determine requirements and user
needs

• Take budget and other constraints into account

• Depend on suitability of technology for activity


being supported

• Based on the designing conceptual models


33
Conceptual models:
interaction and interface
• Interaction type:
– what the user is doing when interacting with a
system,
– e.g. instructing, conversing, manipulating, or exploring

• Interface type:
– the kind of interface used to support the
Interaction type,
– e.g. menu-based, speech, gesture, browse

34
Many kinds of interface types
• Command Button instructing
• Drop-Down Menus instructing

• Speech conversing

• Data Collection conversing

• Graphical manipulating
• Pen manipulating
• Augmented reality exploring
• Virtual 3D exploring

• Gesture Vary based on purpose


• Web Vary based on purpose 35
2.6: Paradigms, Visions, Theories, Models,
and Frameworks
• Other sources of conceptual inspiration that are used to inform
designer are paradigms, visions, theories, models, and frameworks.
• A paradigm refers to a general approach that has been adopted by a
community of researchers and designers for carrying out their work.
• A vision is a future scenario that frames research and development
in interaction design and often depicted in the form of a film.
• A theory is a well-substantiated explanation of some aspect of a
phenomenon.
• A model is a simplification of some aspect of human-computer
interaction intended to make it easier for designers.
• A framework is a set of interrelated concepts and/or a set of
questions that are intended to inform a particular domain area.
36
2.6:(1): Paradigms
• General approach adopted by a community for carrying
out research by shared assumptions, concepts, values,
and practices
– In the 1980s, the prevailing paradigm in HCI was how to design
user-centered applications (GUI)
– In 1990s, A big influence on the paradigm shift that took place in
HCI was ubiquitous technology where design devices that people
can use in their everyday and working lives, such as smart
glasses, tablets, and smartphones. (ubiquitous computing
technology)
– In 2000s, the next big paradigm shift that took place in HCI was
the emergence of Big Data, Internet of Things, sensor
technologies, Data science and machine-learning algorithms
where Smart buildings were built using these technologies.
(Artificial Intelligence APPs) 37
2.6:(2): Visions
• A powerful driving force that frames research and
development that is carried out in companies and
universities.
• Provide concrete scenarios of how society can use the
next generation of imagined technologies.
• Visions are caring about on how AI will make our lives
easier on the one hand and how it will take our jobs away
on the other.
• Tech companies have produced videos about the future of
technology, inviting audiences to imagine what life will be
like in 10, 15, or 20 years’ time.
– e.g. Apple’s 1987 Knowledge Navigator
– KSA VISION 2030
– Smart Cities, Smart Health 38
2.6:(3) Theories
Explanation of a phenomenon
• providing a means of analyzing and predicting the
performance of users carrying out tasks for specific
types of computer interfaces and systems.
– e.g. information processing that explains how the
mind, or some aspect of it, is assumed to work.

Can help identify factors


• One of the main benefits of applying such theories
in interaction design is to help identify factors
– e.g. cognitive, social, and affective, relevant to the
design and evaluation of interactive products
39
2.6:(4): Models
• We discussed earlier why a conceptual model is
important and how to generate one when designing a
new product.
• The term model has been used more generally in
interaction design to describe, in a simplified way, some
aspect of HCI, which depicts the core features and
processes underlying a phenomenon.
• It is usually abstracted from a theory coming from a
contributing discipline intended to make it easier for
designers to predict and evaluate alternative designs.
– e.g. Don Norman (1988) model, which developed based on
theories of cognitive processing.
– e.g. Marc Hassenzahl’s (2010) model, which developed based
on characterize core components of the user experience.
40
2.6:(5): Frameworks
• The framework explicitly clears the relationship between
how a system should function (Designer Model), how it
is presented to users (System Model), and how it is
understood by users (Users Model).
• In contrast to a model, a framework offers advice to
designers as to what to design or look for, including
steps, questions, concepts, challenges, principles.
• Frameworks, like models, have been based on theories
of human behavior, but they are being developed from
the experiences of actual design practices.
– e.g. Distributed Cognition (Rogers, 2012) framework, was
developed to analyze qualitative data at user level.
– e.g. DiCoT (Furniss and Blandford, 2006) framework, was
developed to analyze qualitative data at system level. 41
Summary (Key Points)
• Developing a conceptual model involves good understanding of the
problem space, specifying what it is you are doing, why, and how it
will support users
• A conceptual model is a high-level description of a product in terms
of what users can do with it and the concepts they need to
understand how to interact with it
• Interaction types (e.g. conversing, instructing) provide a way of
thinking about how best to support user’s activities
• Interface metaphors are commonly used as part of a conceptual
model.
• Decisions about conceptual design should be made before
commencing physical design (such as choosing menus, icons, dialog
boxes).
• Paradigms, visions, theories, models, and frameworks provide
different ways of framing and informing design and research 42

You might also like