MODULE 7

HCI DESIGN METHODOLOGIES

HCI design methodologies are structured approaches to creating user-friendly, efficient

technology by focusing on user needs, behaviors, and context. Key approaches include User-
Centered Design (UCD), activity theory, and value-sensitive design, often employing
iterative prototyping, usability testing, and task analysis to refine interfaces.
Various methodologies have materialized since the inception that outline the techniques for human–
computer interaction. Following are few design methodologies –
1) User-Centered Design (UCD): A broad approach to HCI design which focuses on user
requirements, needs, and limitations at every stage of the design process, ensuring the system
supports the user. User-centered design (UCD) focuses on designing for users by analyzing their needs
through research, with professionals maintaining control over development. It is an iterative process
where designers, technical experts, and users collaborate to focus on user needs, requirements,
and limitations throughout the design process. UCD uses methods like interviews and usability
testing. In UCD, user’s role is passive i.e. they are subjects/consultants – where they are asked to
review what has been designed.
User-centered design is ideal for refining products, enhancing usability, or when user input is needed
to validate solutions

In UCD, designers are expected to design in an Iterative Manner as shown below:

[Link]
Desiging in an Iterative manner means that the entire design process from start to end is not a linear
process, In a linear process, the designer starts the design and throughout the entire process of the
design they don't listen to the user or any others and just delivers the final product as instructed to
him at the start.
 In an iterative approach, the designer creates a certain product (prototype), let the user test the
product and then gathers the feedback from the user
 Using the feedback they make changes in the design and again let the user test it until and unless
the user says that they liked the product and no other change is needed to do there.

1
It’s a methodology aimed at meeting needs specific user segment. It uses user persona to achieve
this. In technology development, user persona is a fictional, research-based character that
represents a specific user segment, capturing their goals, behaviors, pain points, and motivations. A
persona typically includes a name, photo, demographic details (age, job title), goals, behaviors, and
frustrations.
2) Activity Theory: focuses on the entire activity system—subject, object, tools, rules,
community, and division of labor—rather than just the user-tool interaction. A key example
is designing for complex, collaborative, and context-dependent environments like healthcare or smart
homes. The design takes into consideration, the entire activity system with respect to the environment and
social factors influencing how users use technology. Therefore, influence of the community must be
factored into the design process.
In contextual analysis, it emphasizes understanding the real-world context, including social, cultural,
and physical factors influencing interaction. In terms of methodology, it encourages techniques
like ethnographic observation to understand the "activity system" (subjects, tools, objects,
community, rules, division of labor). Examples of HCI designs based on Activity Theory include:
 Electronic Health Records (EHR) Systems: Instead of just optimizing data entry, design considers
the subject (doctor), object (patient health), tools (software), rules (hospital
protocols), community (nurses/staff), and division of labor (who does what) to reduce errors and
improve workflows.
 Context-Aware Systems ("Cycler" case): Design focuses on the interaction between user and
environment, incorporating, for example, location, lighting, and network connections to create
adaptive interfaces.
 Smart Home Systems: Design focuses on mediating tools that help occupants manage energy
consumption or security, treating the home as a community activity rather than a solitary computer
task.
Core Components in Activity Design Analysis include:
Subject: The user/person.
Object: The goal or purpose.
Tools: The technological artifacts.
Rules: Norms, procedures, and policies.
Community: Social context.
Division of Labor: Allocation of tasks.
3) Value Sensitive Design (VSD): Integrates human values (such as privacy, sustainability,
or trust) directly into the technology development process, considering direct and indirect
stakeholders. It integrates human values throughout the design process, accounting for direct and
indirect stakeholders via conceptual, empirical, and technical investigations.
Examples of HCI design based on VSD include:
 Cookie Consent Management: Designing browser interfaces that move beyond "dark
patterns" to truly inform users about data tracking, prioritizing the value of informed
consent.
 Surveillance Systems in Public Spaces: VSD requires identifying both direct
stakeholders (security personnel) and indirect stakeholders (pedestrians) to ensure privacy,
autonomy, and security are balanced, rather than just focusing on efficiency.
 Privacy-Respecting Office "Windows": Instead of a simple camera feed, a VSD approach
to digital "windows" between offices (using high-definition screens) might include features
that prevent surveillance of intimate moments while allowing for social, ambient connection.
VSD operates through an iterative cycle of three investigations:
i) Conceptual: Identifying stakeholders (direct and indirect) and values (e.g., trust, privacy).
Ii) Empirical: Understanding how stakeholders experience these values through interviews or
observations.
Iii) Technical: Designing the system's technical features to support these identified values.

2
4) Contextual Design: Contextual design in HCI involves designing technology based on in-depth
field observation of users in their actual environment ("work practice"), ensuring systems fit seamlessly into
their lives. An example is creating a mobile app for nurses that, based on observation, allows input via voice
or large, one-touch buttons to accommodate fast-paced, hands-busy, and high-stress hospital environments,
rather than a complex, text-heavy interface. (Developed by Karen Holtzblatt and Hugh Beyer), it uses
five key models—flow, sequence, culture, artifact, and physical—to analyze work practices, driving
the creation of systems that fit real user needs. In terms of contextual enquiry (i.e. user research),
instead of just surveys or interviews, designers watch users perform tasks in their own environment
to understand their true motivations and constraints.
An example of HCI design based on contextual design is creating a specialized, in-context interface
for hospital nurses, developed by observing them in their work environment to identify bottlenecks.
This approach involves "master-apprentice" interviews to understand workflow, leading to, for
example, a mobile dashboard for nurses that displays patient vitals and medication schedules based
on their current location and tasks. Other examples include adjusting websites to pre-fill forms based
on user location/history or designing smart devices that use sensors to adapt functionality to the
user's current environment.
In terms of modeling and Analysis, data is structured into five key models to interpret findings:
i) Flow Model: Social/functional communication.
ii) Sequence Model: Detailed steps of activities.
iii) Cultural Model: Constraints and influence of culture/norms.
iv) Artifact Model: Tools and documents used.
v) Physical Model: The physical environment's layout.

5) Participatory Design: This methodology involves end-users directly in the design process
by designing with users, empowering them as co-creators who actively shape the design process to ensure
the final product meets their practical needs and workflows.
Participatory design process involves all stakeholders in the design process, so that the end result
meets the needs they are desiring. This design is used in various areas such as software design,
architecture, landscape architecture, product design, sustainability, graphic design, planning, urban
design, and even medicine. In PD, user’s role is active i.e. they are co-designers – where they are
part of the design team, contributing to the process with team members. PD uses workshops and
collaborative, hands-on design sessions. Participatory design is best for complex,
community-based projects, or when deep insights and user investment (buy-in) are required.
Examples include:
 Physical/Digital Prototypes: Designers and users collaborate on physical mockups (e.g.,
paper, sticky notes) to map out user interfaces before digital development.
 Virtual Classroom Tools: Students and teachers co-designed features like a "virtual
snack" break, interactive polls, a question manager, and a collaborative blackboard to
enhance online learning engagement.

3
  Accessible Search Interfaces: Researchers partnered with blind users to design a search
interface, using simulations and scenarios to ensure the interface met their specific
assistive technology needs.
6) Goal-Directed Design: This methodology focuses on understanding user motivations
(goals) rather than just tasks, resulting in intuitive interfaces like, for instance, a banking app
designed to make financial management effortless for users. Key phases include research, modeling
(personas), and behavioral definition. GDD is a methodology that focuses on what the user wants
to achieve ("goals") and how they behave; thereby creating a product that feels intuitive because it
aligns with the user's mental model.
Major examples include:
 Banking Applications: Instead of just providing a list of transactions, a GDD-based app focuses on
the user's goal of "staying on top of my finances." It might feature a clear, immediate summary of
available funds and, for instance, automated, insightful spending categorization.
 Healthcare Software: Rather than just tracking data, software for nurses or doctors is designed to
support the goal of "providing excellent patient care," resulting in interfaces that highlight critical patient
information and, for example, minimize the time needed to input data.
 E-commerce (e.g., IKEA Place): To help users with the goal of "visualizing furniture in their home,"
the app uses augmented reality to place virtual furniture in a real room, rather than just showing
pictures.

7.2 Common Design Evaluation Techniques

Design Evaluation Techniques in Human-Computer Interaction (HCI) are methods used to assess the usability,
functionality, and user experience of a system, software, or interface. These techniques involve experts or
actual users and are applied throughout the design process to identify usability issues, ensure user needs are
met, and improve the overall design, ranging from formative to summative evaluations.
Heuristic Evaluation: Experts check the user interface against recognized usability principles (heuristics) to
identify violations.
Cognitive Walkthroughs: Experts simulate a user’s thought process to evaluate how easily a new user can
learn to perform tasks.
Usability Testing (User Observations/Think-Aloud Protocols): Evaluators observe real users as they
interact with a system and ask them to verbalize their thoughts, providing qualitative feedback on usability.
Tasks Analysis: Analyzing how users break down and sequence actions to complete tasks. Although it is
primarily a requirement-gathering method, it serves as a crucial analytical evaluation technique to assess
existing systems, identify usability issues, and predict user errors by comparing actual tasks against design
workflows
Experimental Evaluation: Controlled tests where specific variables are manipulated to measure user
performance (e.g., speed, error rates) and gather quantitative data.
Surveys and Questionnaires: Tools used to gather subjective feedback on user satisfaction and preferences.
Model-Based Evaluation: Using models like GOMS (Goals, Operators, Methods, and Selection rules) to
predict user performance and analyze interface complexity.
Prototyping: Prototyping: Ranging from low-fidelity (paper sketches) to high-fidelity (clickable) models to
visualize and test concepts.

7.2.1 Task Analysis

Task Analysis plays an important part in User Requirements Analysis. Therefore, what is a task? A
task is any human action that contributes to a useful objective of the HCI system. Task
analysis defines performance of users, not computers.
Task analysis is the procedure to learn the users and abstract frameworks, the patterns used in
workflows, and the chronological implementation of interaction with the GUI. It analyzes the ways in
which the user partitions the tasks and sequence them. Hierearchical task analysis method is usually
adopted in HCI systems.

4
Key aspects of Task Analysis as an evaluation method:
Evaluation of Workflow: It breaks down complex tasks into smaller sub-tasks (e.g., via
Hierarchical Task Analysis - HTA) to analyze user interaction with a system.

Identification of Bottlenecks: It helps identify where users struggle, enabling designers

to optimize workflows and reduce cognitive load.

Techniques Used: Common approaches include Cognitive Task Analysis (CTA) for
cognitive processes, HTA for procedural steps, and GOMS for keystroke-level interaction.
 Cognitive Task Analysis (CTA) – for cognitive processes: in HCI is a method for identifying the mental
processes—such as decision-making, memory, attention, and judgment—that users employ to complete
complex tasks. It goes beyond observing physical actions to understand the underlying knowledge,
goals, and strategies required for expert performance.
 Hierarchical Task Analysis (HTA) in HCI is a structured, top-down method used to break down complex
user goals into smaller, manageable subtasks and operations, forming a tree-like hierarchy. It identifies the
"what" and "how" of tasks, mapping out necessary actions, decisions, and plans to improve system
usability, user experience (UX), and interface design.
GOMS (Goals, Operators, Methods, and Selection rules) is a cognitive modeling technique in HCI used to
predict user performance, task completion times, and learnability by simulating expert behavior. It breaks
down tasks into specific actions to evaluate interface efficiency and identify bottlenecks. GOMS analyzes the
user's cognitive structure through four key elements:
Goals: The specific objectives the user wants to achieve (e.g., "delete a file").
Operators: The low-level actions required, such as pressing a key, clicking a mouse, or moving the cursor.
Methods: The sequences of operators and subgoals used to achieve a goal.
Selection Rules: The decision-making process for choosing between different methods.

A) Hierarchical Task Analysis

Hierarchical Task Analysis is the procedure of disintegrating tasks into subtasks that could be
analyzed using the logical sequence for execution. This would help in achieving the goal in the best
possible way. A hierarchy is an organization of elements that, according to prerequisite
relationships, describes the path of experiences a learner must take to achieve any single behavior
that appears higher in the hierarchy.
Techniques for Analysis
The following techniques are usually adopted in HCI tasks analysis:
 Task decomposition − Splitting tasks into sub-tasks and in sequence.
 Knowledge-based techniques − Any instructions that users need to know.
‘User’ is always the beginning point for a task.
 Ethnography − Observation of users’ behavior in the use context.
 Protocol analysis − Observation and documentation of actions of the user. This is achieved
by authenticating the user’s thinking. The user is made to think aloud so that the user’s mental
logic can be understood.

7.2.2 Engineering Task Models

Unlike Hierarchical Task Analysis, Engineering Task Models can be specified formally and are more
useful. Engineering Task Models, also known as ETMs, are detailed, formal representations of how
users interact with a system to complete specific tasks. They provide a structured way to describe
and analyze user activities and interactions within a software application or system.
Characteristics of Engineering Task Models
 Engineering task models have flexible notations, which describes the possible activities
clearly.

5
  They have organized approaches to support the requirement, analysis, and use of task
models in the design.
 They support the recycle of in-condition design solutions to problems that happen throughout
applications.
 Finally, they let the automatic tools accessible to support the different phases of the design
cycle.
To further understand the task analysis process, one should understand the following concepts:

Key Aspects of Engineering Task Models

Abstraction of user Tasks: ETMs abstract any complex tasks into a smaller well defined steps or
actions, this process simplifies the representation of the task.
Hierarchical Structure: ETMs also provide a Hierarchical Structure, breaking the bigger and
complex task into smaller sub tasks, the hierarchical flow helps the designers understand the user's
flow of activities and understand the relation between the sub-tasks.
Formal Notations: ETMs mainly uses formal notation to represent tasks and interactions accurately.
Human Performance Prediction: Several ETMs like GOMS can estimate the time a human might
need while interacting with a system or a service and how much time he/she takes to complete a
specific task.
Error Detection: ETMs can also be used to find flaws in the design or the system.

7.2.3 ConcurTaskTree (CTT)

ConcurTaskTree or CTT is a modeling technique and a notation used in Design Process and Task Analysis.
It has been designed to analyze and model task based user interactions with a complex system / problem. It
is mostly used in critical domains like AeroSpace, Automotive Design and Healthcare Systems. Simply put,
it is used for modeling a task and consists of tasks and operators. Operators in CTT are used to portray
chronological associations between tasks. Following are the key features of a CTT −
 Focus on actions that users wish to accomplish.
 Hierarchical structure.
 Graphical syntax.
 Rich set of sequential operators.

7.2.4 Dialogue Design

A dialog is the construction of interaction between two or more beings or systems. In HCI, a dialog is studied
at three levels −
 Lexical − Shape of icons, actual keys pressed, etc., are dealt at this level.
 Syntactic − The order of inputs and outputs in an interaction are described at this level.
 Semantic − At this level, the effect of dialog on the internal application/data is taken care of.

Dialog Representation
To represent dialogs, we need formal techniques that serves two purposes −
 It helps in understanding the proposed design in a better way.
 It helps in analyzing dialogs to identify usability issues. E.g., Questions such as “does the
design actually support undo?” can be answered.
7.2.5 Formalism Techniques
There are many formalism techniques that we can use to signify dialogs. In this chapter, we will
discuss on three of these formalism techniques, which are −
 The state transition networks (STN)
 The state charts
 The classical Petri nets

6
State Transition Network (STN)
STNs are the most spontaneous, which knows that a dialog fundamentally denotes to a progression
from one state of the system to the next.
The syntax of an STN consists of the following two entities −
 Circles − A circle refers to a state of the system, which is branded by giving a name to the
state.
 Arcs − The circles are connected with arcs that refers to the action/event resulting in the
transition from the state where the arc initiates, to the state where it ends.

STN Diagram

StateCharts
StateCharts represent complex reactive systems that extends Finite State Machines (FSM), handle
concurrency, and adds memory to FSM. It also simplifies complex system representations.
StateCharts has the following states −
 Active state − The present state of the underlying FSM.
 Basic states − These are individual states and are not composed of other states.
 Super states − These states are composed of other states.
Illustration with State Chart
For each basic state b, the super state containing b is called the ancestor state. A super state is
called OR super state if exactly one of its sub states is active, whenever it is active.
Let us see the StateChart Construction of a machine that dispense bottles on inserting coins.

The above diagram explains the entire procedure of a bottle dispensing machine. On pressing the
button after inserting coin, the machine will toggle between bottle filling and dispensing modes. When
a required request bottle is available, it dispense the bottle. In the background, another procedure

7
runs where any stuck bottle will be cleared. The ‘H’ symbol in Step 4, indicates that a procedure is
added to History for future access.
Petri Nets
Petri Net is a simple model of active behavior, which has four behavior elements such as − places,
transitions, arcs and tokens. Petri Nets provide a graphical explanation for easy understanding.
 Place − This element is used to symbolize passive elements of the reactive system. A place
is represented by a circle.
 Transition − This element is used to symbolize active elements of the reactive system.
Transitions are represented by squares/rectangles.
 Arc − This element is used to represent causal relations. Arc is represented by arrows.
 Token − This element is subject to change. Tokens are represented by small filled circles.

7.3 Visual Thinking

Visual materials has assisted in the communication process since ages in form of paintings,
sketches, maps, diagrams, photographs, etc. In today’s world, with the invention of technology and
its further growth, new potentials are offered for visual information such as thinking and reasoning.
As per studies, the command of visual thinking in human-computer interaction (HCI) design is still
not discovered completely. So, let us learn the theories that support visual thinking in sense-making
activities in HCI design.
An initial terminology for talking about visual thinking was discovered that included concepts such
as visual immediacy, visual impetus, visual impedance, and visual metaphors, analogies and
associations, in the context of information design for the web. As such, this design process became
well suited as a logical and collaborative method during the design process. The following are the
concepts associated with visual thinking:
i) Visual Immediacy
It is a reasoning process that helps in understanding of information in the visual representation. The
term is chosen to highlight its time related quality, which also serves as an indicator of how well the
reasoning has been facilitated by the design.
ii) Visual Impetus
Visual impetus is defined as a stimulus that aims at the increase in engagement in the contextual
aspects of the representation.
iii) Visual Impedance
It is perceived as the opposite of visual immediacy as it is a hindrance in the design of the
representation. In relation to reasoning, impedance can be expressed as a slower cognition.
iv) Visual Metaphors, Association, Analogy, Abduction and Blending
 When a visual demonstration is used to understand an idea in terms of another familiar idea
it is called a visual metaphor.
 Visual analogy and conceptual blending are similar to metaphors. Analogy can be defined as
an implication from one particular to another. Conceptual blending can be defined as
combination of elements and vital relations from varied situations.
The HCI design can be highly benefited with the use of above mentioned concepts. The concepts
are pragmatic in supporting the use of visual procedures in HCI, as well as in the design processes.

7.6 Direct Manipulation Programming

Direct manipulation has been acclaimed as a good form of interface design, and are well received
by users. Such processes use many source to get the input and finally convert them into an output
as desired by the user using inbuilt tools and programs. “Directness” has been considered as a
phenomena that contributes majorly to the manipulation programming. It has the following two
aspects, namely Distance and Direct Engagement.

8
a) Distance
Distance is an interface that decides the gulfs between a user’s goal and the level of explanation
delivered by the systems, with which the user deals. These are referred to as the Gulf of
Execution and the Gulf of Evaluation.
 The Gulf of Execution
The Gulf of Execution defines the gap/gulf between a user's goal and the device to implement that
goal. One of the principal objective of Usability is to diminish this gap by removing barriers and follow
steps to minimize the user’s distraction from the intended task that would prevent the flow of the
work.
 The Gulf of Evaluation
The Gulf of Evaluation is the representation of expectations that the user has interpreted from the
system in a design. As per Donald Norman, The gulf is small when the system provides information
about its state in a form that is easy to get, is easy to interpret, and matches the way the person
thinks of the system.
b) Direct Engagement
It is described as a programming where the design directly takes care of the controls of the objects
presented by the user and makes a system less difficult to use.
The scrutiny of the execution and evaluation process illuminates the efforts in using a system. It also
gives the ways to minimize the mental effort required to use a system.
Problems with Direct Manipulation
 Even though the immediacy of response and the conversion of objectives to actions has made
some tasks easy, all tasks should not be done easily. For example, a repetitive operation is
probably best done via a script and not through immediacy.
 Direct manipulation interfaces finds it hard to manage variables, or illustration of discrete
elements from a class of elements.
 Direct manipulation interfaces may not be accurate as the dependency is on the user rather
than on the system.
 An important problem with direct manipulation interfaces is that it directly supports the
techniques, the user thinks.

c) Item Presentation Sequence

In HCI, the presentation sequence can be planned according to the task or application requirements.
The natural sequence of items in the menu should be taken care of. Main factors in presentation
sequence are:-
 Time
 Numeric ordering
 Physical properties
A designer must select one of the following prospects when there are no task-related arrangements
−
 Alphabetic sequence of terms
 Grouping of related items
 Most frequently used items first
 Most important items first

d) Menu Layout
 Menus should be organized using task semantics.
 Broad-shallow should be preferred to narrow-deep.
 Positions should be shown by graphics, numbers or titles.
 Subtrees should use items as titles.
 Items should be grouped meaningfully.
 Items should be sequenced meaningfully.
 Brief items should be used.
 Consistent grammar, layout and technology should be used.
 Type ahead, jump ahead, or other shortcuts should be allowed.
 Jumps to previous and main menu should be allowed.
9
  Online help should be considered.
Guidelines for consistency should be defined for the following components −
 Titles
 Item placement
 Instructions
 Error messages
 Status reports

e) Form Fill-in Dialog Boxes

Appropriate for multiple entry of data fields −
 Complete information should be visible to the user.
 The display should resemble familiar paper forms.
 Some instructions should be given for different types of entries.
Users must be familiar with −
 Keyboards
 Use of TAB key or mouse to move the cursor
 Error correction methods
 Field-label meanings
 Permissible field contents
 Use of the ENTER and/or RETURN key.
Form Fill-in Design Guidelines −
 Title should be meaningful.
 Instructions should be comprehensible.
 Fields should be logically grouped and sequenced.
 The form should be visually appealing.
 Familiar field labels should be provided.
 Consistent terminology and abbreviations should be used.
 Convenient cursor movement should be available.
 Error correction for individual characters and entire field’s facility should be present.
 Error prevention.
 Error messages for unacceptable values should be populated.
 Optional fields should be clearly marked.
 Explanatory messages for fields should be available.
 Completion signal should populate.

6.17 Interface Design and Programming

The implementation activity begins with the creation of a 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.

6.18 HCI Design and Development Tools

This section presents some of the tools that are used in interactive interface design and
development. Most of them come in the form of software tools. A software tool is a programmatic
software used to create, maintain, or otherwise support other programs and applications.
A) Design Tools
 State Transition Network (STN) – they are used for dialog analysis, as dialog progresses
from one state to another. In terms of symbols, it uses circles for states and arcs to connect
the circle. A dialog is the interaction between two or more beings or systems. In HCI, a dialog
is studied at three levels, namely Lexical – shape of icons, actual key pressed etc; Syntactic
– the order of inputs and outputs in an interaction; Semantic – the effect of dialog on the
internal application/data.
 Transition Diagram − Set of nodes and links that can be displayed in text, link frequency,
state diagram, etc. They are used in evaluating usability, visibility, modularity and
synchronization.
10
  GUI Specification tools – This provides easy method to specify the GUI. Even though these
are lengthy and ambiguous methods, they are easy to understand.
 Interface Design Software Tools – used to design GUI e.g. Zeplin, Figma, Sketch,
Mockplus, Adobe XD. Tool like Zeplin is a UI design tool with extension for HTML, CSS,
Swift, XML, React Naïve etc.
A brief description of some of these software tools follow thus
1. Figma — Best UI design software for effective cross-functional collaboration
2. Invision — Best UI design software for a vast template collection of product-building
touchpoints
3. Marvel — Best UI design software for drag-and-drop iOS wireframe templates
4. UXPin — Best UI design software for component-driven prototyping
5. Justinmind — Best UI design software for responsive and gesture-based interactive
prototyping
 Grammars – Tools with written Instructions or Expressions that a program would understand.
They provide confirmations for completeness and correctness of GUI design.
 Interface Building Tools − Design methods that help in designing command languages,
data-entry structures, and widgets. A widget is an element of a GUI that displays information
or provides a specific way for a user to interact with the OS or an application.
B) Programming and Design Implementation of Interactive Interfaces
This has to do with translating design concepts into functional software, focusing on user interface
components (buttons, menus).
Interaction Modes: Programming for various input methods, including touch, speech, and gesture-based
interfaces.
Flexibility & Control: Enabling users to customize their experience (shortcuts) and providing robust error
handling.

Contextual Examples: Implementing user-friendly, responsive forms, navigation menus, and feedback
mechanisms to ensure seamless interaction.

The goal is to ensure the technology is both functional and, more importantly, used by the public.

Tools for Programming and Design Implementation of Interactive Interfaces

9

 Interface Mockup Tools − Tools to develop a quick sketch of GUI. They are used mainly to
create mockup/prototype systems. E.g., Microsoft Visio, Visual Studio .Net, etc.
 Software Engineering Tools − Extensive programming tools to provide user interface
management system.
 Evaluation Tools − Tools to evaluate the correctness and completeness of programs.
 Programming Languages – Python, Java, C#, Swift.

7.7 Information Search and Visualization in HCI

In HCI systems where information search is involved, database systems are used to store the data
that could be searched for. In such systems, Database query plays a major role. The figure below
shows the interaction of the user with such data storage through the interface.

Data
Storage
Interactive Systems with Data Storage

11
Database Query
A database query is the principal mechanism to retrieve information from a database. It consists of
predefined format of database questions. Many database management systems use the Structured
Query Language (SQL) standard query format.
Example
SELECT DOCUMENT#
FROM JOURNAL-DB
WHERE (DATE >= 2004 AND DATE <= 2008)
AND (LANGUAGE = ENGLISH OR FRENCH)
AND (PUBLISHER = ASIST OR HFES OR ACM)
Users perform better and have better contentment when they can view and control the search. The
database query has thus provided substantial amount of help in the human computer interface.
The following points are the five-phase frameworks that clarifies user interfaces for textual search
as: Formulation − expressing the search
 Initiation of action − launching the search
 Review of results − reading messages and outcomes
 Refinement − formulating the next step
 Use − compiling or disseminating insight

Multimedia Document Searches

Following are the major multimedia document search categories.
Image Search
Preforming an image search in common search engines is not an easy thing to do. However there
are sites where image search can be done by entering the image of your choice. Mostly, simple
drawing tools are used to build templates to search with. For complex searches such as fingerprint
matching, special softwares are developed where the user can search the machine for the
predefined data of distinct features.
Map Search
Map search is another form of multimedia search where the online maps are retrieved through mobile
devices and search engines. Though a structured database solution is required for complex
searches such as searches with longitude/latitude. With the advanced database options, we can
retrieve maps for every possible aspect such as cities, states, countries, world maps, weather
sheets, directions, etc.
Design/Diagram Searches
Some design packages support the search of designs or diagrams as well. E.g., diagrams,
blueprints, newspapers, etc.
Sound Search
Sound search can also be done easily through audio search of the database. Though user should
clearly speak the words or phrases for search.
Video Search
New projects such as Infomedia helps in retrieving video searches. They provide an overview of the
videos or segmentations of frames from the video.
Animation Search
The frequency of animation search has increased with the popularity of Flash. Now it is possible to
search for specific animations such as a moving boat.
Information Visualization
Information visualization is the interactive visual illustrations of conceptual data that strengthen
human understanding. It has emerged from the research in human-computer interaction and is
applied as a critical component in varied fields. It allows users to see, discover, and understand huge
amounts of information at once.
Information visualization is also an assumption structure, which is typically followed by formal
examination such as statistical hypothesis testing.
Advanced Filtering
Following are the advanced filtering procedures –
12
  Filtering with complex  Implicit search
Boolean queries  Collaborative filtering
 Automatic filtering  Multilingual searches
 Dynamic queries  Visual field specification
 Faceted metadata search  Query by example

Hypertext and Hypermedia

Hypertext can be defined as the text that has references to hyperlinks with immediate access. Any
text that provides a reference to another text can be understood as two nodes of information with
the reference forming the link. In hypertext, all the links are active and when clicked, opens
something new.
Hypermedia on the other hand, is an information medium that holds different types of media, such
as, video, CD, and so forth, as well as hyperlinks.
Hence, both hypertext and hypermedia refers to a system of linked information. A text may refer to
links, which may also have visuals or media. So hypertext can be used as a generic term to denote
a document, which may in fact be distributed across several media.
Object Action Interface Model for Website Design
Object Action Interface (OAI), can be considered as the next step of the Graphical User Interface
(GUI). This model focusses on the priority of the object over the actions.
OAI Model
The OAI model allows the user to perform action on the object. First the object is selected and then
the action is performed on the object. Finally, the outcome is shown to the user. In this model, the
user does not have to worry about the complexity of any syntactical actions.
The object–action model provides an advantage to the user as they gain a sense of control due to
the direct involvement in the design process. The computer serves as a medium to signify different
tools.

13