A LECTURE NOTE ON

CSC 440: Human-Computer Interaction (2 Units)

By
Prof. S. A. Onashoga, FNCS
(2023)
Course Synopses
Introduction to the field of Human-Computer Interaction (HCI) and an overview of software
architectures used in modern graphical user interfaces. A variety of analysis and design methods
are introduced (e.g. GOMS. heuristic evaluation, User-Centred Design and contextual design
techniques). Interface implementation with the Java Swing toolkit. Evaluations of user interfaces
according to usability and accessibility standards will be covered. Quality of design, user-centered
approach to interface development is emphasized. Relevance of HCI is also central to recent
technological developments such as hypertext, multimedia, virtual reality and the web.
Psychological aspects of the individual user, universal design principles, and User Centered
Design (UCD) models. Interactive system development lifecycle and its requirements, major
themes and recent trends in HCI, interaction design models, participatory design, Information
Architecture (IA), adaptive interfaces, measuring the User Experience (UX), social computing and
online communities, mobile computing and issues surrounding the design for smaller screens,
ubiquitous computing, Computer Mediated Communication (CMC) and Computer Supported
Cooperative Work (CSCW).
1.0 INTRODUCTION

HCI (human-computer interaction) is the study of how people interact with computers and to what
extent computers are or are not developed for successful interaction with human beings. As its
name implies, HCI consists of three parts: the user, the computer itself, and the ways they work
together.

User

By "user", we may mean an individual user, a group of users working together. An appreciation
of the way people's sensory systems (sight, hearing, touch) relay information is vital. Also,
different users form different conceptions or mental models about their interactions and have
different ways of learning and keeping knowledge and. In addition, cultural and national
differences play a part.

Computer
When we talk about the computer, we're referring to any technology ranging from desktop
computers, to large scale computer systems. For example, if we were discussing the design of a
Website, then the Website itself would be referred to as "the computer". Devices such as mobile
phones or VCRs can also be considered to be “computers”.

Interaction
There are obvious differences between humans and machines. In spite of these, HCI attempts to
ensure that they both get on with each other and interact successfully. In order to achieve a usable
system, you need to apply what you know about humans and computers, and consult with likely
users throughout the design process. In real systems, the schedule and the budget are important,
and it is vital to find a balance between what would be ideal for the users and what is feasible in
reality.

The Goals of HCI

The goals of HCI are to produce usable and safe systems, as well as functional systems. In order
o produce computer systems with good usability, developers must attempt to:

 understand the factors that determine how people use technology

 develop tools and techniques to enable building suitable systems
 achieve efficient, effective, and safe interaction
 put people first

Underlying the whole theme of HCI is the belief that people using a computer system should come
first. Their needs, capabilities and preferences for conducting various tasks should direct
developers in the way that they design systems. People should not have to change the way that
they use a system in order to fit in with it. Instead, the system should be designed to match their
requirements.

Usability

Usability is one of the key concepts in HCI. It is concerned with making systems easy to learn and
use. A usable system is:
  easy to learn
 easy to remember how to use
 effective to use
 efficient to use
 safe to use
 enjoyable to use

Why is usability important?

Many everyday systems and products seem to be designed with little regard to usability. This leads
to frustration, wasted time and errors. This list contains examples of interactive products:
mobile phone, computer, personal organizer, remote control, soft drink machine, coffee machine,
ATM, ticket machine, library information system, the web, photocopier, watch, printer, stereo,
calculator, videogame etc¦.

How many are actually easy, effortless, and enjoyable to use?

For example, a photocopier might have buttons like these on its control panel.

Imagine that you just put your document into the photocopier and set the photocopier to make 15
copies, sorted and stapled. Then you push the big button with the "C" to start making your copies.
What do you think will happen?

(a) The photocopier makes the copies correctly.

(b) The photocopier settings are cleared and no copies are made.

If you selected (b) you are right! The "C" stands for clear, not copy. The copy button is actually
the button on the left with the "line in a diamond" symbol. This symbol is widely used on
photocopiers, but is of little help to someone who is unfamiliar with this.

Factors in HCI

There are a large number of factors which should be considered in the analysis and design of a
system using HCI principles. Many of these factors interact with each other, making the analysis
even more complex. The main factors are as listed:

Organisation Factors: Training, job design, politics, roles, work organisation

Environmental Factors: Noise, heating, lighting, ventilation, Health and Safety Factors
The User: Cognitive processes and capabilities, Motivation, enjoyment, satisfaction, personality,
experience
Comfort Factors: Seating, equipment, layout.
User Interface: Input devices, output devices, dialogue structures, use of colour, icons,
commands, navigation, graphics, natural language, user support, multimedia,
Task Factors: Easy, complex, novel, task allocation, monitoring, skills
Constraints: Cost, timescales, budgets, staff, equipment, buildings
System Functionality: Hardware, software, application
Productivity Factors: Increase output, increase quality, decrease costs, decrease errors, increase
innovation
2.0 GRAPHICAL USER INTERFACE

A GUI (Graphical User Interface) is a user interface that employs graphical elements, such as
icons, buttons, windows, and menus, to facilitate interactions between users and computers. In the
context of Human-Computer Interaction (HCI), a GUI is designed with the principles of usability,
accessibility, and user-centered design in mind.

HCI emphasizes creating GUIs that offer a seamless and intuitive user experience. Here's how a
GUI aligns with HCI principles:

Usability: A GUI designed with HCI principles focuses on usability, ensuring that the interface is
easy to learn, efficient to use, and minimizes the cognitive load on users. Elements are organized
logically, and interactions are consistent, making it straightforward for users to achieve their tasks.

Accessibility: An HCI-driven GUI takes accessibility into consideration, making sure that users
with disabilities can access and use the interface effectively. This includes providing alternative
text for images, ensuring keyboard navigation, and considering color contrast for those with visual
impairments.

User-Centered Design: HCI encourages involving users throughout the design process. GUIs
developed with HCI principles undergo user testing and iterative design cycles to gather feedback
and improve the interface based on actual user experiences and preferences.

Feedback and Affordances: HCI-based GUIs offer visual and interactive feedback to users. This
includes displaying changes in response to user actions, providing informative error messages, and
offering visual cues (affordances) that suggest how to interact with elements.

Consistency: An HCI-oriented GUI maintains consistency in its design and interactions. Common
design patterns and conventions are followed, reducing user confusion and allowing users to apply
knowledge from one part of the interface to another.

Flexibility and Customization: A well-designed GUI respects user diversity by offering options
for customization. Users might be able to adjust settings, layouts, or preferences to match their
needs and preferences.

Efficiency: HCI-driven GUIs aim to enhance user efficiency. This can involve keyboard shortcuts,
predictive text input, and minimizing unnecessary steps in completing tasks.

Error Prevention and Recovery: HCI principles guide the design of GUIs to minimize errors and
support users in recovering from mistakes. Clear instructions, confirmation dialogs, and undo
functionalities are examples of features designed with error management in mind.
In summary, GUIs aligned with HCI principles prioritize user needs, preferences, and behaviors.
They create interfaces that are usable, accessible, and optimized for a positive and efficient user
experience, enhancing the interaction between humans and computers.
 3.0 SOFTWARE ARCHITECTURE FOR MODERN GUI

Modern GUIs (Graphical User Interfaces) can be built using a variety of software architecture
patterns. Some common software architecture patterns used for modern GUIs include:

i. Model-View-Controller (MVC): This architecture separates the application into three

main components: the Model (data and logic), the View (user interface), and the
Controller (handles user input and manages communication between the Model and
View). MVC promotes modularity and maintainability.

 The Model contains only the pure application data, it contains no logic describing how to
present the data to a user. (It’s just a data that is shipped across the application like for
example from back-end server view and from front-end view to the database. In java
programming, Model can be represented by the use of POJO (Plain-old-java-object) which
is a simple java class.
 The View presents the model’s data to the user. The view knows how to access the model’s
data, but it does not know what this data means or what the user can do to manipulate it.
View just represent, displays the application’s data on screen. View page are generally in
the format of .html or .jsp in java programming (which is flexible).
 The Controller exists between the view and the model. It is where the actual business logic
is written. It listens to events triggered by the view (or another external source) and
executes the appropriate reaction to these events. In most cases, the reaction is to call a
method on the model. Since the view and the model are connected through a notification
mechanism, the result of this action is then automatically reflected in the view.

Let’s see an example of MVC Design Pattern.

 Java

class Student
{
private String rollNo;
private String name;

public String getRollNo()

{
return rollNo;
}
public void setRollNo(String rollNo)
{
[Link] = rollNo;
}
 public String getName()
{
return name;
}
public void setName(String name)
{
[Link] = name;
}
}

class StudentView
{
public void printStudentDetails(String studentName, String studentRollNo)
{
[Link]("Student: ");
[Link]("Name: " + studentName);
[Link]("Roll No: " + studentRollNo);
}
}

class StudentController
{
private Student model;
private StudentView view;

public StudentController(Student model, StudentView view)

{
[Link] = model;
[Link] = view;
}
public void setStudentName(String name)
{
[Link](name);
}
public String getStudentName()
{
return [Link]();
}
public void setStudentRollNo(String rollNo)
{
[Link](rollNo);
}
public String getStudentRollNo()
{
return [Link]();
}

public void updateView()

{
[Link]([Link](), [Link]());
}
}

class MVCPattern
{
public static void main(String[] args)
{
Student model = retriveStudentFromDatabase();
StudentView view = new StudentView();
StudentController controller = new StudentController(model, view);
[Link]();
 [Link]("Vikram Sharma");
[Link]();
}
private static Student retriveStudentFromDatabase()
{
Student student = new Student();
[Link]("Lokesh Sharma");
[Link]("15UCS157");
return student;
}
}

Output:
Student:
Name: Lokesh Sharma
Roll No: 15UCS157
Student:
Name: Vikram Sharma
Roll No: 15UCS157
Advantages
 Multiple developers can work simultaneously on the model, controller and views.
 MVC enables logical grouping of related actions on a controller together. The views for a
specific model are also grouped together.
 Models can have multiple views.
 The overall components of an application are easily manageable & are less dependent on
each other for proper functioning of application.
Disadvantages
 The framework navigation can be complex because it introduces new layers of abstraction
and requires users to adapt to the decomposition criteria of MVC.
 Knowledge on multiple technologies becomes the norm. Developers using MVC need to be
skilled in multiple technologies.

ii. Model-View-ViewModel (MVVM): Similar to MVC, MVVM separates the

application into Model, View, and ViewModel components. The ViewModel acts as
an intermediary between the Model and View, handling data transformations and
interactions. MVVM is commonly used in applications that require a more reactive and
data-binding approach.

iii. Model-View-Presenter (MVP): In MVP, the View is passive and delegates user input
handling to the Presenter. The Presenter communicates with the Model and updates the
View accordingly. This pattern enhances testability and separation of concerns.
The model is an interface defining the data to be displayed or otherwise acted upon in the user
interface.
The view is a passive interface that displays data (from the model) and routes user commands
(events) to the presenter to act upon that data.
The presenter acts upon the model and the view. It retrieves data from repositories (the model),
and formats it for display in the view.

iv. Flux Architecture: Popularized by frameworks like React, Flux is an architecture that
emphasizes unidirectional data flow. Actions trigger updates to the application's state, and changes
are propagated to the user interface. This pattern simplifies data flow and state management.

Flux is an architectural pattern proposed by Facebook for building SPAs. It suggests to split the
application into the following parts:
 Stores
 Dispatcher
 Views
 Action / Action Creators
Store
Store manages the state. It can store both domain state and user interface state. Store and state are
different concepts. State is the data value. Store is a behavior object that manages state through
methods. In the case of managing books: the book list is the state and BookStore manages that list.
A store manages multiple objects. It is the single source of truth in regards to those specific objects.
In an application there can be many stores. For example: BookStore, AuthorStore, UserStore.
There are no setter methods on the store. You can only request state change by passing an action
to the dispatcher.
A store listens for all actions and decides on which of them to act. This usually means
a switch statement. Once the store has made the state changes, it will emit a change event. The
store is an event emitter. Stores don’t take other stores as dependencies.
Dispatcher
Dispatcher is a single object that broadcasts actions/events to all registered stores. Stores need to
register for events when the application starts. When an action comes in, it will pass that action to
all registered stores.
View
View is the user interface component. It is responsible for rendering the user interface and for
handling the user interaction. Views are in a tree structure. Views listen for store changes and re-
render.
Views can be further split in Presentation and Container Views. Presentation views don’t connect
to dispatcher or stores. They communicate only through their own properties.
Container views are connected to stores and dispatcher. They listen for events from stores and
provide the data for presentation components. They get the new data using the stores’ public getter
methods and then pass that data down the views tree. Container views dispatch actions in response
to user iteration.
Actions
An action is a plain object that contains all information necessary to do that action. Actions have
a type property identifying the action type. Actions may come from different places. They may
come from views as a result of user interaction. They may come from other places like the
initialization code, where data may be taken from a Web API and actions are fired to update the
views. Action may come from a timer that requires screen updates.
Action Creators
The practice is to encapsulate the code, creating actions in functions. These functions that create
and dispatch actions are called action creators.
Web API Calls
When doing Web API calls to update the user interface, the Web API call will be followed by an
action to update the store. When the store is updated it will emit a change event and as result the
view that listens for that event will re-render. Web API calls are made in action creators. We can
extract out the code that does the API call in Web API Utils functions.

Unidirectional data flow

Updating views flow in a single direction:

Views do not modify the data they received. They listen for changes of this data, create actions
with new values, but do not update the data.
Stores, views and any other action can’t change the state in (other) stores directly. They must send
an action through the dispatcher
The data flow is shorter in store reads than in writes. The data flow in store writes differs between
asynchronous and synchronous actions.
Store Reads

Store Writes in synchronous actions

Store Writes in asynchronous actions

Pros
Flux architecture is better in an application where views don’t map directly to domain stores. To
put in a different way, when views can create actions that will update many stores and stores can
trigger changes that will update many views.
Actions can be persisted and then replayed.
Cons
Flux can add unnecessary complexity to an application where each view maps to one store. In this
kind of application a separation between view and store is enough.

vi. Component-Based Architecture: This approach breaks down the user interface into reusable
components or widgets. Each component encapsulates its own logic and user interface elements.
This architecture promotes modularity and reusability.

Component-based architecture focuses on the decomposition of the design into individual

functional or logical components that represent well-defined communication interfaces containing
methods, events, and properties. It provides a higher level of abstraction and divides the problem
into sub-problems, each associated with component partitions.
The primary objective of component-based architecture is to ensure component reusability. A
component encapsulates functionality and behaviors of a software element into a reusable and self-
deployable binary unit. There are many standard component frameworks such as COM/DCOM,
JavaBean, EJB, CORBA, .NET, web services, and grid services. These technologies are widely
used in local desktop GUI application design such as graphic JavaBean components, MS ActiveX
components, and COM components which can be reused by simply drag and drop operation.
Component-oriented software design has many advantages over the traditional object-oriented
approaches such as −
 Reduced time in market and the development cost by reusing existing components.
 Increased reliability with the reuse of the existing components.

What is a Component?
A component is a modular, portable, replaceable, and reusable set of well-defined functionality
that encapsulates its implementation and exporting it as a higher-level interface.
A component is a software object, intended to interact with other components, encapsulating
certain functionality or a set of functionalities. It has an obviously defined interface and conforms
to a recommended behavior common to all components within an architecture.
A software component can be defined as a unit of composition with a contractually specified
interface and explicit context dependencies only. That is, a software component can be deployed
independently and is subject to composition by third parties.
Views of a Component
A component can have three different views − object-oriented view, conventional view, and
process-related view.
Object-oriented view
A component is viewed as a set of one or more cooperating classes. Each problem domain class
(analysis) and infrastructure class (design) are explained to identify all attributes and operations
that apply to its implementation. It also involves defining the interfaces that enable classes to
communicate and cooperate.
Conventional view
It is viewed as a functional element or a module of a program that integrates the processing logic,
the internal data structures that are required to implement the processing logic and an interface that
enables the component to be invoked and data to be passed to it.
Process-related view
In this view, instead of creating each component from scratch, the system is building from existing
components maintained in a library. As the software architecture is formulated, components are
selected from the library and used to populate the architecture.
 A user interface (UI) component includes grids, buttons referred as controls, and utility
components expose a specific subset of functions used in other components.
 Other common types of components are those that are resource intensive, not frequently
accessed, and must be activated using the just-in-time (JIT) approach.
 Many components are invisible which are distributed in enterprise business applications
and internet web applications such as Enterprise JavaBean (EJB), .NET components, and
CORBA components.

Characteristics of Components
 Reusability − Components are usually designed to be reused in different situations in
different applications. However, some components may be designed for a specific task.
 Replaceable − Components may be freely substituted with other similar components.
 Not context specific − Components are designed to operate in different environments and
contexts.
 Extensible − A component can be extended from existing components to provide new
behavior.
 Encapsulated − A A component depicts the interfaces, which allow the caller to use its
functionality, and do not expose details of the internal processes or any internal variables
or state.
 Independent − Components are designed to have minimal dependencies on other
components.

Principles of Component−Based Design

A component-level design can be represented by using some intermediary representation (e.g.
graphical, tabular, or text-based) that can be translated into source code. The design of data
structures, interfaces, and algorithms should conform to well-established guidelines to help us
avoid the introduction of errors.
  The software system is decomposed into reusable, cohesive, and encapsulated component
units.
 Each component has its own interface that specifies required ports and provided ports; each
component hides its detailed implementation.
 A component should be extended without the need to make internal code or design
modifications to the existing parts of the component.
 Depend on abstractions component do not depend on other concrete components, which
increase difficulty in expendability.
 Connectors connected components, specifying and ruling the interaction among
components. The interaction type is specified by the interfaces of the components.
 Components interaction can take the form of method invocations, asynchronous
invocations, broadcasting, message driven interactions, data stream communications, and
other protocol specific interactions.
 For a server class, specialized interfaces should be created to serve major categories of
clients. Only those operations that are relevant to a particular category of clients should be
specified in the interface.
 A component can extend to other components and still offer its own extension points. It is
the concept of plug-in based architecture. This allows a plugin to offer another plugin API.

Component-Level Design Guidelines

Creates a naming conventions for components that are specified as part of the architectural model
and then refines or elaborates as part of the component-level model.
 Attains architectural component names from the problem domain and ensures that they have
meaning to all stakeholders who view the architectural model.
 Extracts the business process entities that can exist independently without any associated
dependency on other entities.
 Recognizes and discover these independent entities as new components.
 Uses infrastructure component names that reflect their implementation-specific meaning.
 Models any dependencies from left to right and inheritance from top (base class) to bottom
(derived classes).
 Model any component dependencies as interfaces rather than representing them as a direct
component-to-component dependency.

Conducting Component-Level Design

Recognizes all design classes that correspond to the problem domain as defined in the analysis
model and architectural model.
 Recognizes all design classes that correspond to the infrastructure domain.
 Describes all design classes that are not acquired as reusable components, and specifies
message details.
 Identifies appropriate interfaces for each component and elaborates attributes and defines
data types and data structures required to implement them.
  Describes processing flow within each operation in detail by means of pseudo code or UML
activity diagrams.
 Describes persistent data sources (databases and files) and identifies the classes required to
manage them.
 Develop and elaborates behavioral representations for a class or component. This can be
done by elaborating the UML state diagrams created for the analysis model and by
examining all use cases that are relevant to the design class.
 Elaborates deployment diagrams to provide additional implementation detail.
 Demonstrates the location of key packages or classes of components in a system by using
class instances and designating specific hardware and operating system environment.
 The final decision can be made by using established design principles and guidelines.
Experienced designers consider all (or most) of the alternative design solutions before
settling on the final design model.
Advantages
 Ease of deployment − As new compatible versions become available, it is easier to replace
existing versions with no impact on the other components or the system as a whole.
 Reduced cost − The use of third-party components allows you to spread the cost of
development and maintenance.
 Ease of development − Components implement well-known interfaces to provide defined
functionality, allowing development without impacting other parts of the system.
 Reusable − The use of reusable components means that they can be used to spread the
development and maintenance cost across several applications or systems.
 Modification of technical complexity − A component modifies the complexity through
the use of a component container and its services.
 Reliability − The overall system reliability increases since the reliability of each individual
component enhances the reliability of the whole system via reuse.
 System maintenance and evolution − Easy to change and update the implementation
without affecting the rest of the system.
 Independent − Independency and flexible connectivity of components. Independent
development of components by different group in parallel. Productivity for the software
development and future software development.

vii. Single Page Application (SPA): SPAs load a single HTML page and dynamically update the
content as users interact with the application. They often use frameworks like Angular, React, or
[Link] to manage the user interface components and data flow.

viii. Microservices Architecture: While not exclusive to GUIs, this approach involves building an
application as a collection of loosely coupled, independent services. Each service can have its own
user interface components, allowing for scalability and flexibility.

ix. Event-Driven Architecture: This architecture relies on events and event listeners to trigger
actions in response to user input or other system events. It's commonly used in applications with
asynchronous and real-time interactions.

These architecture patterns provide different ways to structure and manage the components of a
modern GUI application, depending on factors like complexity, scalability, and development team
preferences.
4.0 USER INTERFACE DESIGN PROCESS

User interface is the front-end application view to which user interacts in order to use the
software. The software becomes more popular if its user interface is:
 Attractive
 Simple to use
 Responsive in short time
 Clear to understand
 Consistent on all interface screens
There are two types of User Interface:
1. Command Line Interface: Command Line Interface provides a command prompt,
where the user types the command and feeds to the system. The user needs to remember
the syntax of the command and its use.
2. Graphical User Interface: Graphical User Interface provides the simple interactive
interface to interact with the system. GUI can be a combination of both hardware and
software. Using GUI, user interprets the software.

User Interface Design Process:

The analysis and design process of a user interface is iterative and can be represented by a
spiral model. The analysis and design process of user interface consists of four framework
activities.
1. User, task, environmental analysis, and modeling: Initially, the focus is based on the
profile of users who will interact with the system, i.e. understanding, skill and
knowledge, type of user, etc, based on the user’s profile users are made into categories.
From each category requirements are gathered. Based on the requirements developer
understand how to develop the interface. Once all the requirements are gathered a
detailed analysis is conducted. In the analysis part, the tasks that the user performs to
establish the goals of the system are identified, described and elaborated. The analysis
of the user environment focuses on the physical work environment. Among the
questions to be asked are:
 Where will the interface be located physically?
 Will the user be sitting, standing, or performing other tasks unrelated to the
interface?
 Does the interface hardware accommodate space, light, or noise constraints?
 Are there special human factors considerations driven by environmental factors?
2. Interface Design: The goal of this phase is to define the set of interface objects and
actions i.e. Control mechanisms that enable the user to perform desired tasks. Indicate
how these control mechanisms affect the system. Specify the action sequence of tasks
and subtasks, also called a user scenario. Indicate the state of the system when the user
performs a particular task. Always follow the three golden rules stated by Theo Mandel.
Design issues such as response time, command and action structure, error handling, and
help facilities are considered as the design model is refined. This phase serves as the
foundation for the implementation phase.
3. Interface construction and implementation: The implementation activity begins with
the creation of prototype (model) that enables usage scenarios to be evaluated. As
iterative design process continues a User Interface toolkit that allows the creation of
windows, menus, device interaction, error messages, commands, and many other
elements of an interactive environment can be used for completing the construction of
an interface.
4. Interface Validation: This phase focuses on testing the interface. The interface should
be in such a way that it should be able to perform tasks correctly and it should be able
to handle a variety of tasks. It should achieve all the user’s requirements. It should be
easy to use and easy to learn. Users should accept the interface as a useful one in their
work.

Golden Rules:
The following are the golden rules stated by Theo Mandel that must be followed during
the design of the interface.
Place the user in control:
 Define the interaction modes in such a way that does not force the user into unnecessary
or undesired actions: The user should be able to easily enter and exit the mode with
little or no effort.
 Provide for flexible interaction: Different people will use different interaction
mechanisms, some might use keyboard commands, some might use mouse, some might
use touch screen, etc, Hence all interaction mechanisms should be provided.
 Allow user interaction to be interruptible and undoable: When a user is doing a
sequence of actions the user must be able to interrupt the sequence to do some other
work without losing the work that had been done. The user should also be able to do
undo operation.
 Streamline interaction as skill level advances and allow the interaction to be
customized: Advanced or highly skilled user should be provided a chance to customize
the interface as user wants which allows different interaction mechanisms so that user
doesn’t feel bored while using the same interaction mechanism.
 Hide technical internals from casual users: The user should not be aware of the internal
technical details of the system. He should interact with the interface just to do his work.
 Design for direct interaction with objects that appear on screen: The user should be able
to use the objects and manipulate the objects that are present on the screen to perform
a necessary task. By this, the user feels easy to control over the screen.
Reduce the user’s memory load:
 Reduce demand on short-term memory: When users are involved in some complex
tasks the demand on short-term memory is significant. So the interface should be
designed in such a way to reduce the remembering of previously done actions, given
inputs and results.
 Establish meaningful defaults: Always initial set of defaults should be provided to the
average user, if a user needs to add some new features then he should be able to add the
required features.
 Define shortcuts that are intuitive: Mnemonics should be used by the user. Mnemonics
means the keyboard shortcuts to do some action on the screen.
 The visual layout of the interface should be based on a real-world metaphor: Anything
you represent on a screen if it is a metaphor for real-world entity then users would easily
understand.
 Disclose information in a progressive fashion: The interface should be organized
hierarchically i.e. on the main screen the information about the task, an object or some
behavior should be presented first at a high level of abstraction. More detail should be
presented after the user indicates interest with a mouse pick.

Make the interface consistent:

 Allow the user to put the current task into a meaningful context: Many interfaces have
dozens of screens. So it is important to provide indicators consistently so that the user
know about the doing work. The user should also know from which page has navigated
to the current page and from the current page where can navigate.
 Maintain consistency across a family of applications: The development of some set of
applications all should follow and implement the same design, rules so that consistency
is maintained among applications.
 If past interactive models have created user expectations do not make changes unless
there is a compelling reason.

User interface design is a crucial aspect of software engineering, as it is the means by which
users interact with software applications. A well-designed user interface can improve the
usability and user experience of an application, making it easier to use and more effective.
There are several key principles that software engineers should follow when designing
user interfaces:

1. User-centered design: User interface design should be focused on the needs and
preferences of the user. This involves understanding the user’s goals, tasks, and context
of use, and designing interfaces that meet their needs and expectations.
2. Consistency: Consistency is important in user interface design, as it helps users to
understand and learn how to use an application. Consistent design elements such as
icons, color schemes, and navigation menus should be used throughout the application.
3. Simplicity: User interfaces should be designed to be simple and easy to use, with clear
and concise language and intuitive navigation. Users should be able to accomplish their
tasks without being overwhelmed by unnecessary complexity.
4. Feedback: Feedback is important in user interface design, as it helps users to understand
the results of their actions and confirms that they are making progress towards their
goals. Feedback can take the form of visual cues, messages, or sounds.
5. Accessibility: User interfaces should be designed to be accessible to all users, regardless
of their abilities. This involves considering factors such as color contrast, font size, and
assistive technologies such as screen readers.
6. Flexibility: User interfaces should be designed to be flexible and customizable,
allowing users to tailor the interface to their own preferences and needs.
Overall, user interface design is a key component of software engineering, as it can have a
significant impact on the usability, effectiveness, and user experience of an application.
Software engineers should follow best practices and design principles to create interfaces
that are user-centered, consistent, simple, and accessible.

5.0 ANALYSIS AND DESIGN METHOD FOR HCI

i. GOMS (Goals, Operators, Methods, and Selection rules) is a cognitive modeling framework
used in Human-Computer Interaction (HCI) for analyzing and designing user interfaces. It breaks
down human-computer interaction into various components to understand and predict user
behavior. Here's how GOMS is used as an analysis and design method:

Goals: GOMS starts by identifying the high-level goals users aim to achieve when interacting with
a system. These goals represent the tasks users want to complete, such as sending an email or
formatting a document.

Operators: Operators are basic cognitive and motor actions that users perform to accomplish their
goals. These can include pressing keys, moving the mouse, clicking buttons, and making decisions.
Each operator represents a specific action or interaction step.

Methods: Methods are sequences of operators that users employ to achieve their goals. They
represent the step-by-step procedures users follow to complete tasks. For example, composing an
email might involve methods like "select recipient," "write message," and "send."

Selection Rules: Selection rules guide users in choosing which methods to apply in a given
situation. They help determine which methods are most appropriate based on the context and user's
intentions. For instance, a user might choose between different methods for attaching a file based
on the file type and the desired action.

GOMS can be applied in both analysis and design phases of HCI:

Analysis:

Predicting Performance: By breaking tasks down into operators and methods, GOMS can estimate
the time it takes for users to complete tasks. This is valuable for predicting user performance and
identifying potential usability issues.

Identifying Bottlenecks: GOMS analysis can reveal bottlenecks or areas where users might
struggle in completing tasks. This information helps in optimizing the user interface to minimize
cognitive load and streamline interactions.

Design:

Task Decomposition: GOMS guides designers in breaking down complex tasks into smaller,
manageable steps. This aids in designing interfaces that provide clear paths to accomplishing goals.

Interface Design: Designers can use GOMS to identify opportunities for creating shortcuts,
reducing unnecessary steps, and improving the overall efficiency of interactions.

It's important to note that GOMS has limitations, such as not fully accounting for real-world
variability in user behavior and not being well-suited for tasks that involve creativity or non-linear
processes. However, when used in conjunction with other usability methods, GOMS can provide
valuable insights into designing more effective and efficient user interfaces.

ii. User Centered Design

User-centered design (UCD) is an iterative design process in which designers focus on the users
and their needs in each phase of the design process. In UCD, design teams involve users throughout
the design process via a variety of research and design techniques, to create highly usable and
accessible products for them.

UCD is an Iterative Process

In user-centered design, designers use a mixture of investigative methods and tools (e.g., surveys
and interviews) and generative ones (e.g., brainstorming) to develop an understanding of user
needs.
User-centered design is an iterative process that focuses on an understanding of the users and their
context in all stages of design and development. When your design team brings the users into every
stage of the design process, you invest your effort and other resources into a powerful way of
finding out what works well, what doesn’t and why. Your users are an early-warning system you
can use to course-correct and fine-tune your design. They can expose many aspects—positive and
negative—your team may have overlooked regarding such vital areas as usability and accessibility.
That’s why it’s so important to understand how powerful the benefits of a user-centered design
approach are
4 Phases in User-centered Design

Generally, each iteration of the UCD approach involves four distinct phases. First, as designers
working in teams, we try to understand the context in which users may use a system. Then, we
identify and specify the users’ requirements. A design phase follows, in which the design team
develops solutions. The team then proceeds to an evaluation phase. Here, you assess the outcomes
of the evaluation against the users’ context and requirements, to check how well a design is
performing. More specifically, you see how close it is to a level that matches the users’ specific
context and satisfies all of their relevant needs. From here, your team makes further iterations of
these four phases, and you continue until the evaluation results are satisfactory.

iii. Heuristic Evaluation

Heuristic evaluation is a usability evaluation method used to analyze and design user interfaces.
It involves a group of evaluators examining a user interface against a set of predefined usability
principles or heuristics. These evaluators identify usability problems and provide
recommendations for improvement. Here's a breakdown of the process:
 a. Select a Set of Usability Heuristics: Start by defining a set of usability heuristics or principles
that will serve as the evaluation criteria. These heuristics are typically established guidelines
for good interface design. Commonly used heuristics include Jakob Nielsen's "10 Usability
Heuristics for User Interface Design."

b. Choose a Team of Evaluators: Assemble a team of usability experts or individuals familiar

with HCI principles. Typically, 3 to 5 evaluators are sufficient, but having more can provide
diverse insights.

c. Provide Context and Goals: Share information about the application or system being
evaluated, along with its intended users and tasks. Define the evaluation goals and what
aspects of the interface should be assessed.

d. Conduct Individual Evaluations: Each evaluator independently examines the user interface,
interacting with it as a typical user would. They use the selected usability heuristics to
identify any violations or issues related to each heuristic.

e. Document Findings: Evaluators document usability problems they encounter, including a

description of the problem, its severity (e.g., minor, major, critical), and recommendations
for improvement. Screenshots or screen recordings can be helpful for illustrating issues.

f. Aggregate Results: After individual evaluations are completed, the findings from each
evaluator are compiled. This can involve categorizing and prioritizing the identified issues
based on their impact on usability.

g. Report and Discuss: Generate a usability evaluation report that summarizes the identified
problems and recommendations. Include severity ratings and provide examples to clarify
issues. Hold a discussion or debriefing session with the evaluators to ensure a shared
understanding of the results.

h. Iterative Design: The design team can use the evaluation findings to make iterative
improvements to the user interface. Address the identified usability issues and retest the
interface to verify that improvements have been made.

Heuristic evaluation is a cost-effective method for quickly identifying usability issues in an

interface. However, it's essential to recognize that it might not uncover all usability problems,
and combining it with other usability testing methods, such as user testing, can provide a more
comprehensive assessment of the user experience.

5.1 Differences between GOMS, Heuristic evaluation and UCD

The choice between GOMS (Goals, Operators, Methods, and Selection rules), Heuristic
Evaluation, and UCD (User-Centered Design) depends on the specific goals and stage of your
Human-Computer Interaction (HCI) project:

1. GOMS (Goals, Operators, Methods, and Selection rules)

 Best for: GOMS is primarily used for modeling and predicting task performance. It's
valuable when you want to analyze and optimize the efficiency of user tasks within an
interface.
 Use case: GOMS is commonly used in the early design stages to understand how users
will interact with a system and identify potential bottlenecks or inefficiencies.
  Benefits: It provides a structured way to break down user tasks into subtasks and analyze
the time required for each step.
 Limitations: GOMS may not address broader usability issues or user experience
concerns.
2. Heuristic Evaluation
 Best for: Heuristic Evaluation is an effective method for identifying usability issues and
violations of established usability principles or heuristics.
 Use case: It's typically used during the evaluation phase of a project to pinpoint usability
problems in an existing interface or prototype.
 Benefits: It's cost-effective, quick, and can uncover a wide range of usability issues. It
doesn't require user testing.
 Limitations: It relies on the expertise of evaluators, and it may not capture all user issues
or provide insights into the reasons behind the problems.
3. UCD (User-Centered Design)
 Best for: UCD is an overarching approach that emphasizes involving users throughout
the design process to ensure a user-centric result.
 Use case: UCD is ideal when you want to create a user interface that prioritizes the
needs, preferences, and goals of the users from the beginning to the end of the design
process.
 Benefits: UCD fosters a deep understanding of users, leading to interfaces that are more
likely to meet their needs and expectations. It results in a holistic, user-centered design.
 Limitations: UCD can be time-consuming and resource-intensive, and it may not be
suitable for projects with tight deadlines.

In practice, many HCI projects use a combination of these methods. For instance, you might start
with UCD principles to ensure a user-centered approach from the beginning and incorporate
heuristic evaluation and GOMS as needed during the design and evaluation phases. The choice
should align with your project's specific objectives and constraints.