4/3/2023

University of Buea
Faculty of Engineering and Technology
Department of Computer Engineering Course outline
CEF 472
• Chapter 1: HCI definition and main concepts
• Chapter 2: The design process
HUMAN COMPUTER INTERFACE (HCI) • Chapter 3: The design implementation
• Chapter 4: The design evaluation
• Chapter 5: Projects

By Dr. Eng. Ines DJOUELA

Dr. Eng. T.F. FOZIN

dorlystevia08@gmail.com
2

1 2

Course outline Course outline

• Chapter 2: The design process
• Chapter 1: HCI definition and main concepts • HCI, UX and UI: chap 1 summary
• Chapter 2: The design process •The design process main steps
• Chapter 3: The design implementation • Design frameworks
• Chapter 4: The design evaluation
• Design methods
• Chapter 5: Projects
•Interface design activities

3 4

3
I.R.D. Kamgang, Dr. Eng. OOM and UML 4
Faculty of Engineering and Technology 1
 4/3/2023

HCI, UX and UI: chap 1 summary HCI, UX and UI: chap 1 summary

Individual who uses Any system that Individual who uses Any system that
the system can interact with the system can interact with
Human interaction Computer humans Human interaction Computer humans

UX (user experience) UI (user interface) UX (user experience) UI (user interface)

• CLI • CLI
• WIMP • WIMP
 Windows  Windows
Usability Usefulness Usability Usefulness
 Icons  Icons
 Menus  Menus
Usability criteria  Pointing devices  Pointing devices
desirability desirability
• Effectiveness: can you achieve what you want? Summary: By improving UX through good UI design, HCI research will enable
Great UX • Efficiency: can you do it without efforts? Great UX smooth interaction between human and computers.
• Satisfaction: do you enjoy the process? The study of the efficient UI design is then crucial!
5 6

5 6

The design process Phase 1: Requirements analysis

• This phase collects all of the necessary requirements for an interactive system
or device and yields a requirements specification or document as its outcome.
• Requirements documents written specifically for user experience and
• .Phase 1: requirement analysis interaction design aspects are specified in terms of Three main components
• Phase 2: preliminary and for requirement analysis:
detailed design • Functional requirements define specific behavior that the system should
• Phase 3: implementation support (often captured in so-called use cases);
• Phase 4: evaluation • Non-functional requirements specify overall criteria governing the operation
of the interactive system without being tied to a specific action or behavior
(hardware, software, system performance, reliability, etc.); and
• User experience requirements explicitly specify non-functional requirements
for the user interaction and user interface of the interactive system
(navigation, input, colors, etc.).

7 8

7
I.R.D. Kamgang, Dr. Eng. OOM and UML 8
Faculty of Engineering and Technology 2
 4/3/2023

Phase 1: example of Requirements for

Phase 2: Preliminary and detailed design
different interactive systems
Requirement Functional requirements Non functional requirements UX requirements
system
• The design phase consists of two stages:
• allow users to purchase items • give users the ability to access • It shall always have a visible
E- • provide other, related their user account at all times, navigation menu in the same a preliminary stage where the high-level design or architecture
commerce merchandise based on past • view and modify name, e-mail position on the screen. of the interactive system is derived,
web site visits and purchases address, phone, etc.
a detailed stage, where the specifics of each interaction are
• let users enter a PIN code as • permit the ATM customer 15 • On-screen prompts and planned out.
identification seconds to make a selection. instructions shall be clear and
ATM • ensure that the code matches • The customer shall be warned accessible. • The outcome from the design phase is a detailed design document.
system the one on file that the session will be ended if • The ATM should return the user’s
no selection is made commands within half a second
• be able to send messages at all Messages should send within 2 • support customization such as color
Mobile times, even when out of the seconds, returning the user to the schemes, skins, and sounds.
Application service area (in which case they new message window (continuing in
are saved for later sending). the background if necessary).
9 10

9 10

Phase 2.1: Preliminary design Phase 2.1: Preliminary design: questions to

answer and refine at this stage
• a.k.a architectural design. It consists of mapping out the high-level concepts
such as the user, controls, interface displays, navigation mechanisms, and • Is your system focused on a central view, such as a map or a table?
overall workflow. • Is it a sequence of forms or a set of linked displays?
• Preliminary design can also be called conceptual design, particularly in • Is it an app that integrates with other apps to pop up on demand, or is it
software engineering, because it is sometimes useful to organize the high- intended for focused, sustained use?
level concepts into a conceptual map with their relations.
• Overall, this activity is about developing the mental model that users should
have about the interactive system when using it.

11 12

11
I.R.D. Kamgang, Dr. Eng. OOM and UML 12
Faculty of Engineering and Technology 3
 4/3/2023

Phase 2.1: detailed design Phase 3: Build and implementation

• The implementation phase is where all the planning gets turned into actual,
running code.
• This stage entails planning out all the operations that take place • The outcome from this phase is a working system, albeit not necessarily the
between user and interactive system to a level where only final one
implementation and technical details remain. • Different platforms are used for interactive applications.
• It can be done by creating and refining a step-by-step list for the • Regardless of platform, make sure to evaluate tool capabilities, ease of use,
exchanges between the user and the system. ease to learn, cost, and performance.
• refinement of architectural components and interrelations to
Systems Mobile apps Web apps Personal computers
identify modules to be implemented separately.
SDK and development - Front-End : JavaScript - Dedicated PC apps use the native SDKs.
• The refinement is governed by the nonfunctional requirements environments such as: - Back-End : PHP, Ruby, Java, - Development environments: Microsoft’s Visual
Used - Android SDK in Java JavaScript (using Node.js). Basic/C++, C# and the .NET Framework
platforms - Apple iOS SDK in Objective-C - Cross- Platform Software: Oracle’s
13
- Windows Phone/Mobile SDKs Java™ Development Kit™ (JDK).
14

13 14

Phase 4.1: Evaluation Phase 4.2: Validation

• In the final phase of the design cycle, developers test and validate
the system implementation to ensure that it conforms to the
requirements and design set out earlier in the process.
• Validation is a vital part of the design process. In addition to a variety
• The outcome of the validation process is a validation report of expert review methods, tests with the intended users, surveys,
specifying test performance.
and automated analysis tools are proving to be valuable.
• A straightforward approach to validate a system specified using use
cases is simply to check that each use case can be completed • Procedures vary greatly depending on the goals of the usability
successfully study, the number of expected users, the danger of errors, and the
• Depending on this outcome, the design team can decide to level of investment.
proceed with production and deployment of the system or to
continue another cycle through the design process.

15 16

15
I.R.D. Kamgang, Dr. Eng. OOM and UML 16
Faculty of Engineering and Technology 4
 4/3/2023

Design frameworks User-Centered Design (UCD)- introduction

• While the design process discussed above generally should remain the same • Many software development projects fail to achieve their goals.
for all your projects, the approach to performing it may vary following • Much of this problem can be traced to poor communication between developers
different design frameworks. and their business clients or between developers and their users.
• In other words, the design framework is the specific flavor and approach the • The result is often systems and interfaces that force the users to adapt and
designer takes to conducting the design process. change their behavior to fit the interface rather than an interface that is
• Three known design frameworks: customized to the needs of the users.
User-centered design • User-centered design (UCD) prescribes a design process that primarily takes the
Participatory design needs, wants, and limitations of the actual end users into account during each
Agile interaction design (nascent) phase of the design process.

17 18

17 18

User-Centered Design (UCD)-advantages User-centered design (UCD)-challenges

• Gives designers a much-needed understanding of what their users actually
need since they are directly involved in the process
• Dramatical reduction of both development time and cost when a careful
attention is paid to UCD at the early stage of software development.
• UCD leads to systems that generate fewer problems during development and
have lower maintenance costs over their lifetimes.
• UCD is easy to learn, result in faster performance, reduce user errors
substantially, and encourage users to explore features that go beyond the
minimum required to get by.
• UCD reduces the risk of designers building the “wrong system”: a system that
the end users neither need nor asked for.
• UCD practices help organizations align system functionality with their
business needs and priorities 19
• Finding users may be difficult because:
the users may be unable or unwilling to participate,
of the need to select a manageable number of representative users
(Persona)
the users often lack the technical expertise needed to communicate
effectively with the designers.
• Many users may not have a clear understanding of what they need in the new
system or product.
• Since business managers may lack the technical knowledge to understand
proposals made by the developers, dialogue is necessary to reduce confusion
about the organizational implications of design decisions.
20

19
I.R.D. Kamgang, Dr. Eng. OOM and UML 20
Faculty of Engineering and Technology 5
 4/3/2023

Participatory Design (PD) Participatory Design (PD)

• The participatory design goes beyond • For example: users can be asked to sketch
the UCD interfaces and use slips of paper, pieces of
• a.k.a cooperative design in Scandinavia, plastic, and tape to create low-fidelity
PD is the direct involvement of people early prototypes.
in the collaborative design of the things • Ideas about PD are being refined with
and technologies they use. diverse users, ranging from children to
• The key characteristic of PD is that the older adults.- we need children to design
design partners are active, first-class children apps and elders when designing
members of the product design team. older apps
21 22

21 22

Participatory Design (PD)-advantages and

Agile Interaction Design (AID)
challenges
• Advantages
PD experiences are usually positive, however, and advocates can point to
many important contributions that would have been missed without user
participation.
• Disadvantages
extensive user involvement may be costly and may lengthen the
implementation period
It may also generate antagonism from people who are not involved or
whose suggestions are rejected and potentially force designers to
compromise their designs to satisfy incompetent participants
Arranging for participation is difficult for some users, such as those with
cognitive disabilities or those whose time is limited
23
• UCD and PD Traditional designing processes are described heavyweight in that
they require significant investments in time, manpower, and resources to be
successful.
• Particularly, they are not adapted, such processes are often not sufficiently
reactive to today’s fast-moving markets and dynamic user audiences.
• agile interaction design uses lightweight design processes that facilitate the
incremental and iterative nature of agile software developments.
• agile interaction design will use sketches, low-fidelity mockups, and fast usability
inspections instead of costly and time-consuming documentation, high-fidelity
prototypes and usability evaluation and workshops that are common to
heavyweight design processes.
• This enables practical and pragmatic design, short development cycles, and
dynamic designs that are responsive to changing needs.
24

23
I.R.D. Kamgang, Dr. Eng. OOM and UML 24
Faculty of Engineering and Technology 6
 4/3/2023

Design methods Ideation and creativity

• Design methods are the practical building blocks that form the actual day- • One way to think about design is as an incremental fixation of the solution
today activities in the design process. space, where the range of possible solutions is gradually whittled down until
only a single solution exists. This is the final product or service that then goes
• There are dozens of design methods in the literature, but we will focus on the on to ship and be deployed. Gradually reducing the solution space in this
most common ones manner is called convergence or convergent thinking, particularly for teams of
Ideation and creativity designers
Surveys, interviews and focus groups
Ethnographic observations
Scenario development and storyboarding
prototyping

25 26

25 26

Ideation and creativity Surveys, interviews, and focus groups

• The most straightforward way to elicit

• Ideation (or idea generation) and creativity techniques are methods for such requirements and desires from users is simply
divergent thinking in that they require designers to test their limits, abandon to ask them. Surveys—online or paper-
their assumptions, and reframe their problems. based—are the simplest and cheapest
• Many creativity techniques exist in the literature, including lateral thinking, approach and simply entail distributing a
brainstorming and brainwriting, improvisation and role playing, and questionnaire to representative users.
aleatoricism (incorporation of chance) and bootlegging (Holmquist, 2008). • Online surveys can have significant reach but
• Common among many of these techniques is that they incorporate visual often yield a low response rate. Furthermore,
aids, sketching, and physical artifacts. the feedback received is often superficial in
Paper-based prototype: easy to create and
nature. change
• For example, brainstorming often results in mind maps that show the main
concepts as bubbles with links describing relations between the concepts.

27 28

27
I.R.D. Kamgang, Dr. Eng. OOM and UML 28
Faculty of Engineering and Technology 7
 4/3/2023

Guidelines for conducting ethnographic

Ethnographic observation
studies for interaction design
• The early stages of most methodologies include observation of
users. Since interface users form a unique culture, ethnographic
methods for observing them in the workplace are becoming Preparation Field study Analysis Reporting
increasingly important.
• Understand policies in the • Establish a rapport with all • Compile the collected data • Consider multiple audiences
• As ethnographers, interaction designers gain insight into individual target environment (work, users. in numerical, textual, and and goals.
home, public space, etc.). • Observe or interview users multimedia databases. • Prepare a report and present
behavior and the organizational context • Familiarize yourself with the in their setting, and collect • Quantify data and compile the findings.
• The goal of ethnographic observation for interaction design is to existing interface and its subjective and objective statistics.
history. quantitative and qualitative • Reduce and interpret the
obtain the necessary data to influence interface redesign. • Set initial goals and prepare data. data.
questions. • Follow any leads that • Refine the goals and the
• Examples of ethnographic observation research include • Gain access and permission emerge from the visits. process used.
 how cultural probes have been adopted and adapted by the HCI community, to observe or interview. • Record your visits.
 development of an interactive location-based service for supporting distributed
mobile collaboration for home healthcare, and
29
 social dynamics influencing technological solutions in developing regions 30

29 30

Scenario development and storyboarding Prototyping

• Scenario development builds on the use case concept and allows for
developing specific scenarios when a user engages the interactive
system to solve a particular task.
• Storyboarding is the use of graphical sketches and illustrations to
convey important steps in a scenario
• An easy way to describe a novel system is to write scenarios of usage
and then, if possible, to act them out as a form of theater.
• This technique can be especially effective when multiple users must
cooperate or multiple physical devices are used (for example, at
customer-service desks, medical laboratories, or hotel check-in areas).
• Some scenario writers take a further step and produce videos to convey
their intentions.
31
• Prototypes, or physical sketches as Buxton (2007) calls them, are particularly
powerful design tools because they allow users and designers alike to see and
hold (for physical prototypes) representations of the intended interface.
• They also allow the design team to play out specific scenarios and tests using
the prototype.
• Increasing realism, or fidelity, for a prototype governs the time investment in
creating it.
• Obviously, low-fidelity prototypes are more suitable for early ideation and
creativity because they are easily generated and as easily discarded.
32

31
I.R.D. Kamgang, Dr. Eng. OOM and UML 32
Faculty of Engineering and Technology 8
 4/3/2023

Some examples of prototypes at different

bibliography
levels of fidelity

• Low-fidelity prototypes are generally created by sketching, using sticky notes, • Shneiderman, B., Plaisant, C., Cohen, M. S., Jacobs, S., Elmqvist, N., & Diakopoulos, N. (2018).
or cutting and gluing pieces of paper together (paper mockups); Designing the user interface: strategies for effective human-computer interaction. Pearson.

• Medium-fidelity prototypes are often called wireframes, provide some

standardized elements (such as buttons, menus, and text fields), even if
potentially drawn in a sketchy fashion, and have some basic navigation
functionality;
• High-fidelity prototypes look almost like the final product and may have
some rudimentary computational capabilities; however, the prototype is
typically not complete and may not be fully functional.

33 34

33 34

Thank you for your attention

35
I.R.D. Kamgang, Dr. Eng. OOM and UML
Faculty of Engineering and Technology 9