USER INTERFACE DESIGN (21IS733)

Module-1

1. Define User Interface Design. Explain the importance and benefits of a good design.
User interface design is a part of human-computer interaction (HCI), which focuses on how people and
computers interact to meet user needs effectively. HCI designers consider factors like user expectations,
physical abilities, cognitive processes, and enjoyment, along with the technical limitations of computer
hardware and software

The Importance of Good Design

Despite having advanced tools and a desire to create user-friendly interfaces, we often end up with
systems that are confusing or hard to use. The main reasons are that we still don’t fully understand
what makes good design, and we often don’t have enough time to implement it properly. A well-
designed interface is crucial because it is the user's primary way of interacting with the system. If the
interface is confusing or poorly designed, users may struggle, make mistakes, or become frustrated—
sometimes even to extreme levels. Good design directly impacts how effectively users can complete
important tasks, which can affect an organization's relationships with customers and its overall success.

Benefits of Good Design

1. Increased Productivity: Clear and well-structured screens make users more productive. For example,
reducing screen clutter improved user productivity by 20%. Reformatting screens to be more user-
friendly reduced task time by 25% and errors by 25%.
2. Improved Decision-Making: Better design can significantly speed up decision- making. In one study,
redesigning screens reduced decision time by 40%, saving 79 person-years.
3. Enhanced Usability for Web Pages: Iterative redesigns of web pages have shown that improving
design increases success rates and reduces the time taken to find information. For instance, a redesigned
homepage improved search success from 73% to 84% and reduced search time by about 50%.
4. Lower Costs: Good design lowers training and support costs because users require less training and
make fewer support calls. It also increases employee satisfaction by reducing frustration and stress.
5. Cost-Effective Problem Solving: Identifying and fixing problems during the design phase is far
cheaper than doing so after the product is released. Every dollar spent on usability can return $10 to
$100 in savings.
Overall, investing in good design not only improves user satisfaction and productivity but also results
in significant cost savings for organizations
2. Discuss the concept of Direct and Indirect Manipulation.
a. Direct Manipulation allows users to interact directly with objects on the screen, such as dragging and
dropping files or resizing windows. This method is intuitive, providing immediate feedback and
making it easy to understand and use. However, there are situations where direct manipulation is not
feasible or practical.
b. Indirect Manipulation involves using text commands, menus, dialog boxes, or other intermediaries
to perform actions. This approach does not involve direct interaction with the objects but rather
uses a layer between the user and the objects.

3. List the advantages and disadvantages of graphical system.

Graphical Systems: Advantages
1. Symbols Recognized Faster Than Text: Symbols and icons are quicker and easier to recognize
than text.
2. Faster Learning: Visual representations, like icons and pictures make remember tasks.
3. Faster Use and Problem Solving: Easier to understand leading to quicker problem solving.
4. Easier Remembering: Simple graphics help users remember how to use the system.
5. More Natural: Humans are naturally better at processing images than text.
6. Exploits Visual/Spatial Cues: Easier to grasp than text, supporting quicker thinking and decision-
making.
7. Fosters More Concrete Thinking: Users can interact directly with tasks, reducing the need for
complex commands.
8. Provides Context: Visible objects give users a clear view of the current situation or status.
9. Fewer Errors: Direct interactions and the ability to undo actions help reduce mistakes.
[Link] Feeling of Control: Users feel in charge of their actions, boosting confidence and system
understanding.
[Link] Feedback: Users see the results of their actions right away, which speeds up learning.
[Link] System Responses: Consistent responses from the system help users learn faster.
[Link] Reversible Actions: Users can easily undo mistakes, making the system easier to use.
[Link] Anxiety Concerning Use: The system’s ease of use and predictability reduce anxiety for new
users
[Link] Attractive: Graphical interfaces are visually appealing, making them more engaging to use.
[Link] Consume Less Space: Icons often take up less screen space than text, allowing more
information to be displayed.
[Link] National Languages: Icons are universally understood, avoiding language translation
issues.
[Link] Augmented with Text Displays: Graphics can be easily combined with text when needed.
[Link] Typing Requirements: Using a mouse or other pointing device reduces the need for typing.
[Link] Transition from Command Language System: Moving from text-based to graphical
systems is easier for most users.
Disadvantages of Graphical Systems
1. Greater Design Complexity: Designing GUIs is more complex due to numerous options and
elements, requiring careful selection and skill.
2. Learning Still Necessary: Users often need training to understand icons and controls, which can
take time.
3. Lack of Experimentally-Derived Design Guidelines: There are few standard design guidelines
due to limited published research and varied system requirements.
4. Inconsistencies in Technique and Terminology: Differences across systems and versions create
learning challenges.
5. Working Domain is the Present: GUIs focus on the "here and now," which can limit broader or
future planning.
6. Not Always Familiar: Icons may be less familiar than text or numbers, making them harder for
some users to understand.
7. Human Comprehension Limitations: Users may struggle with the complexity and variety of
graphical symbols.
8. Window Manipulation Requirements: Excessive time spent managing windows can interrupt
workflow and productivity.
9. Production Limitations: Creating clear and universally recognizable icons is still challenging with
current technology.
[Link] Tested Icons Exist: Icons must be carefully designed and tested in various sizes and styles,
unlike text.
[Link] for Touch Typists: Moving a mouse or pointer can be slower than typing for experienced
users.
[Link] for Expert Users: Advanced users may find GUIs inefficient when many objects/actions
clutter the screen.
 [Link] Always the Preferred Style of Interaction: Some users prefer text or mixed text-icon
interfaces over pure icons.
[Link] Always Fastest Style of Interaction: Text instructions can sometimes be faster and clearer
than graphics.
[Link] Chances of Clutter and Confusion: Too many graphical elements can lead to cluttered
and confusing screens.
[Link] Futz and Fiddle Factor: Users may waste time playing unnecessary features or games.
[Link] Consume More Screen Space: Not all applications are space-efficient in a graphical format
compared to text.
[Link] Limitations: Effective use of GUIs requires powerful hardware with good processing
and graphic capabilities.

4. Explain the characteristics of graphical user interface in detail.

Characteristics of the Graphical User Interface

1. Sophisticated Visual Presentation:

• GUIs offer a visually rich experience with graphics, icons, different fonts, colors, animations, and
videos.

• Objects in GUIs are organized into types like data (e.g., text or images), containers (e.g., folders), and
devices (e.g., printers). Objects can have different relationships, such as groups or collections, which
affect how they behave and interact with each other.

• It is important that any changes users make, like adjusting window size or cursor position, are saved
automatically so they stay the same when the user returns.
2. Meaningful Interface Elements:

• Common GUI elements include windows (primary, secondary, dialog boxes), menus (menu bars,
pull-down, pop-up, cascading), icons, screen-based controls (text boxes, list boxes, buttons, etc.), and
a mouse pointer.
• These elements are designed to visually represent the user’s real-world environment as clearly and
simply as possible.
3. Pick-and-Click Interaction:
Users interact with screen elements through "pick-and-click" actions, mainly using a mouse or
keyboard. This mechanism involves selecting an element (pick) and confirming an action (click),
allowing for rapid and efficient interaction.
 4. Restricted Set of Interface Options:
GUIs only present a limited set of options on the screen, following the principle of "What You See
Is What You Get" (WYSIWYG). This simplifies the interface by showing users only what is relevant
and available.
5. Visualization:
Visualization in GUIs helps users understand complex or large amounts of data by providing
specialized graphical representations. Effective visualizations reveal structure and functionality,
enhancing productivity and data comprehension.
6. Object Orientation:
GUIs consist of objects that users see and interact with on the screen. These objects can be
manipulated individually or as part of a group, and they are often composed of sub-objects (folder
and files). The design focuses on keeping users engaged with the objects rather than the actions
needed to manipulate them. For example, instead of typing a command to open a file, you simply
click on the file icon.

5. Define GUI. Write the difference between GUI and webpage design.
A Graphical User Interface (GUI) lets users interact with a system using a pointing device like a
mouse. Mouse functions as an electronic equivalent to the human hand.

Sl.
Aspect GUI Design Web Interface Design
No.

1. Purpose Designed for applications and systems on Focused on navigating and

specific devices like computers, displaying content over the
smartphones, etc. internet, accessible across devices
2. Offers structured, controlled navigation Typically uses hyperlinks, back/forward
Navigation through menus, buttons, icons, and buttons, and menus with varying structures.
toolbars.

3. Focuses on presenting content, less about

Focuses on data management and
Content data management, and more on visuals and
processing directly through the interface.
vs. Data information.
4. Limited by HTML and browsers, though
Highly interactive with dynamic menus,
newer technologies like JavaScript have
Interactivity drag-and-drop, and context-based actions.
improved interactivity.

5. Consistent within an application or OS, Lacks consistency across websites, as each

offering uniform buttons, menus, and can have its own navigation and design
Consistency
functions. style.

6. Provides less control due to variable

Provides clear control through aseries of
content and reliance on internet speed or
User Control well-defined actions in a stable user
device type.
environment.

7. Uses specific development

Relies on technologies like HTML, CSS,
Design Tools environments tailored to the device JavaScript, and other multimedia tools.
or OS (e.g., IDEs for desktop apps).

8. Based on icons, buttons, and Relies on hyperlinks and forms for

Interactio
direct manipulation like clicking interaction, less direct than GUI systems.
n Style
or dragging objects.

9. Platform-dependent; designed for specific Platform-independent; works on any device

Platform operating systems or devices. with a browser, though design must adapt
to screen size.
Dependenc
y
10. Complexity of Uses easy-to-understand menus, toolbars, Navigation can be complex and
Navigation and consistent navigation tools. inconsistent, requiring trial and error to
learn.

11. Error Recovery Offers clear error messages and easy error May lack robust error handling, often
recovery, like undo/redo actions. relying on the browser's back button or
reload options.
 12. Multimedia Supports multimedia but is often limited to Integrates multimedia but may lead to
Integration the features of the application (e.g., a media slower load times and complexity across
player). browsers.

13. User Interaction Tends to use direct manipulation, allowing Relies more on hyperlinks and forms,
Model users to interact directly with objects on the making user interactions less direct and
screen. intuitive.

14. User Allows significant customization such Limited customization unless specific
Customization as changing themes, layouts, and shortcuts. features like themes or accessibility options
are built in.

6. Compare the characteristics of Graphical User Interface Versus Web User Interface.
Both Graphical User Interfaces (GUIs) and Web interfaces let people interact with software
through screens and visuals. While they have some things in common, they also have important
differences in how they are designed and used, as shown in the table below.

No Characteristics GUI Interface Web Interface

Device characteristics are Huge variability in user

1 Device Variability well-defined (monitors, devices (handheld to high-
fonts, screen size). end). No fixed layout.

Focus on well-defined Focus on information and

2 User Focus tasks, data, and navigation; browsing is
transactions. unstructured.

Data created by trusted Content from unknown sources,

3 Data/Information sources, well-organized organization variable, privacy
with privacy. concerns.
 Install, configure, upgrade Rapid movement between
4 User Tasks programs; long engagement pages, filling out forms,
with apps. participating in transactions.

User’s Conceptual Infinite and unorganized, little

5 Space Controlled by the program; personal information organization.
structured access to data.

Structured elements (windows, Combines text, images, videos, etc.;

6 Presentation toolbars, menus); presented as presentation varies by
Elements designed. browser/device.

Structured via menus, dialogs, User-controlled via links,

7 Navigation and wizards with limited paths. bookmarks, and URLs; navigation
paths are unlimited.

Multiple windows maintain Single entities with almost

8 Context context; restricted paths help unlimited navigation paths, making
track tasks. context harder to maintain.

Complex interactions (buttons, Single-click interactions causing

9 Interaction lists, data entry) within a major changes, often without clear
structured environment. context.

Variable response times, often slow

10 Response Time Near-instantaneous response due to bandwidth and page content.
times.
 Allows for more artistic freedom
11 Visual Style Standardized by toolkits; limited but constrained by browser
creativity. capabilities and screen sizes.

Constrained by hardware,
System Limited by hardware and
12 browser, software, and user
Capability software capabilities.
preferences.

Efficiency often constrained by

13 Task Efficiency Efficient for specific tasks. browser/network; user tasks less
defined.

Consistent across Inconsistent across sites, each site

14 Consistency applications, supported by establishes its own identity.
design guidelines.

Limited assistance; customer

Integrated Help menus and
15 User Assistance support focused on services
documentation available.
offered.

Seamless integration of
functions across Integration across different sites
16 Integration
applications.(Ex. is rare.
Word,excel )

Controlled security based Web security is weak, with users

17 Security on organization’s resources. often unaware of browser
security options.
7. Discuss the general principles of User Interface Design.
1. Aesthetically Pleasing:

• The interface should be visually appealing, with meaningful contrast between elements, organized
groupings, and effective use of color and graphics.
2. Clarity:

• Visual, conceptual, and linguistic clarity is essential. Elements should be easy to understand, and
the use of metaphors and text should be simple, realistic, and free of jargon.
3. Compatibility:
The interface should be compatible with the user’s needs, the tasks they perform, and other
systems they use, adopting the user’s perspective.
4. Comprehensibility:

• Users should easily understand what actions to take, why, and how to do them. Information and
tasks should flow in a logical, easy-to-understand order.
5. Configurability:

• Allow users to personalize and configure the interface according to their preferences, increasing
their sense of control and satisfaction.
6. Consistency:

• The interface should look, act, and operate consistently throughout, with similar elements
performing similar functions. This helps reduce learning time and errors.
7. Control:

• Users should feel in control of the system, with actions resulting from explicit user input. They
should be able to interrupt or undo actions and should never be interrupted for errors.
8. Directness:

• Tasks should be performed directly, with visible alternatives and effects of actions being clear.
Direct manipulation systems reduce the mental load on users.
9. Efficiency:

• Minimize unnecessary movements and optimize transitions between tasks. Navigation paths should
be short, and systems should anticipate the user’s needs.
10. Familiarity:

• The interface should use familiar concepts and terminology, drawing on real-world metaphors to
make the system intuitive and easy to learn.
11. Flexibility:

• A system should adapt to the user’s skills, preferences, and experience levels, offering different
ways to accomplish tasks.
12. Forgiveness:

• The system should tolerate user mistakes, provide clear recovery options, and prevent catastrophic
errors. When errors do occur, constructive feedback should be provided.
13. Predictability:

• Users should be able to anticipate the outcome of their actions. Screen elements should be distinct
and guide the user to the next step in a logical way.
14. Recovery:

• Users should be able to undo actions and easily return to a previous state. Systems should ensure
that users never lose their work due to errors or technical issues.
15. Responsiveness:

• The system should respond quickly to user inputs, providing immediate feedback either visually,
textually, or audibly.
16. Simplicity:

• The interface should be as simple as possible, using progressive disclosure to hide complexity until
needed. Common actions should be made easy, with consistency and uniformity across the system.

17 Transparency:

• The interface should focus on the task, not the mechanics of the system. Technical details should be
invisible, allowing users to concentrate on their work.

18 Trade-Offs:

Designing an interface often involves balancing conflicting requirements. Human needs should
always take precedence over technical requirements to ensure a user-centered design.
 8. Define User Interface. Explain its two essential components.

User interface design is a part of human-computer interaction (HCI), which focuses on how people
and computers interact to meet user needs effectively. HCI designers consider factors like user
expectations, physical abilities, cognitive processes, and enjoyment, along with the technical
limitations of computer hardware and software.
The user interface includes all parts of a computer and its software that users can interact with—
through sight, sound, touch, or other means. It consists of two main components:
1. Input: How users communicate their needs to the computer, using devices like keyboards, mice, touch
screens, or voice commands.
2. Output: How the computer presents information back to the user, primarily through screens, and
sometimes through sound.
Effective interface design combines well-crafted input and output methods that align with user needs,
capabilities, and limitations. The best interfaces are seamless and allow users to focus on their tasks
rather than on the interface itself.

9. Define object in graphical system. Differentiate between application and data orientation.
Objects in GUIs have proper es (or a ributes) that describe their characteris cs, like text style
(e.g., bold or italics), font size, or background color.
These proper es can be changed by the user to customize the appearance or behavior of the
object.

Application vs. Object or Data Orientation

Application oriented (Action First, Then Object)

 In older systems, the interaction started with choosing the application (like a word processor,
spreadsheet, etc.), and then the user would select or create objects within that application
(such as opening a document or spreadsheet).
 For example, in an application-oriented system, a user first opens a word processing application,
then opens a file or creates a new document within that application. Here, the action (opening
the application) comes first, followed by selecting the object (document).
Object / data Oriented (Object First, Then Action)

 In contrast, modern systems use an object-oriented approach. Users first select the object (like
a file, folder, or piece of data) and then decide which action to perform on it (open, edit, delete,
etc.).
  For example, a user might select a document directly from their file system or desktop and
then choose to open it in an application of their choice. In this case, the object (document) is
chosen first, and the action (opening or editing) follows.
Benefit of Object-Oriented Systems:
The object-action approach is more intuitive because it mirrors how people naturally think
about tasks. Users focus on the object (the task or content) they want to work with, and then
perform actions, making the system task-centered rather than application-centered. This
results in a smoother, more efficient user experience

10. Explain the characteristics of intranet and internet. Also write the differences
between them
Characteristics of an Intranet vs. the Internet:
 Users: Intranet users (employees) are familiar with the organization, while Internet users
(customers or the public) are less knowledgeable.

 Tasks: Intranets handle complex internal tasks like transactions and communications, whereas
the Internet is primarily used to find information and perform simple transactions.

 Type of Information: Intranets provide detailed, frequently updated internal data, while Internet
sites offer more stable, customer-facing information.

 Amount of Information: Intranets tend to be much larger than an organization’s Internet site,
with significantly more internal data.

 Hardware and Software: Intranets are in a controlled environment, allowing for

standardization, faster speeds, and more advanced graphics and multimedia compared to the
public Internet.

Design Philosophy: Intranets incorporate traditional GUI designs with the visual appeal of the
web, eliminating unnecessary web features for more efficient systems