0% found this document useful (0 votes)
19 views

Unit5 - Balancing - Function Final 1

The document discusses user interface design principles for error messages, displays, and web pages. It provides guidelines for making error messages specific, constructive, and user-centered. It also discusses effective display design principles for layout, labeling, and formatting. Web page design significantly impacts user performance, and visual layout is a critical factor.

Uploaded by

michaelgatsi2003
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
19 views

Unit5 - Balancing - Function Final 1

The document discusses user interface design principles for error messages, displays, and web pages. It provides guidelines for making error messages specific, constructive, and user-centered. It also discusses effective display design principles for layout, labeling, and formatting. Web page design significantly impacts user performance, and visual layout is a critical factor.

Uploaded by

michaelgatsi2003
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 38

BALANCING FUNCTION

UNIT 5
INTRODUCTION
⯈ User experiences play a critical role in influencing software
acceptance
⯈ Conversational messages have their limits
⯈ Design needs to be comprehensible, predictable, and
controllable
⯈ Information layout is important
⯈ Multi window coordination
⯈ Large, fast, high-resolution color displays have potential
⯈ Recognition of the creative challenge of balancing function and
fashion may lead to designers even working even harder.
2
INTRODUCTION
⮚ “This chapter deals with design matters that are
functional issues with varying styles/solutions to suite a
variety of users.”

⮚ Error messages

⮚ Display design
⮚ Web page design
⮚ Window design
⮚ Colour 3
ERROR MESSAGES

⮚ Overview
⮚User experience with computer-system prompts,
explanations, error diagnostics, and warnings is crucial
in influencing acceptance of SW systems
⮚ Why do errors occur?
⮚ Lack of knowledge, incorrect understanding, inadequate slips

⮚ What is the consequence?


⮚ Users are likely to be confused, are anxious or feel inadequate

⮚ What is a solution?
⮚Make error messages as user-friendly as possible; this is especially important
for novice users as they commonly have a lack of knowledge, confidence, and
are sometimes easily frustrated or discouraged 4
ERROR MESSAGES

⯈ Improving Error Messages

⮚Measure where errors occur frequently, focus on these


issues
⮚Improve messages but also revise error handling
procedures, improve documentation and training manuals,
change permissibleactions, etc.
⮚All error messages should be reviewed by peers,
managers, should be tested empirically, and be included
in user manuals
5
ERROR MESSAGES
⯈ Guidelines

⮚ Product
⮚ Be as specific and precise as possible
⮚ Be constructive: Indicate what the user needs to do
⮚ Use a positive tone: Avoid condemnation
⮚ Choose user centred phrasing
⮚ Consider multiple levels of messages
⮚ Maintain consistent grammatical forms, terminology, and
abbreviations
⮚ Maintain consistent visual format and placement
⮚ Process
⮚ Increase attention to message design
⮚ Establish quality control
⮚ Develop guidelines
⮚ Carry out usability tests 6
⮚ Record the frequency of occurrence for each message
ERROR MESSAGES

⮚ Rules to follow:
1. Specificity
⮚ Avoid being too general (e.g., “Syntax Error”)
⮚ This makes it difficult to understand what went wrong and how it can be
fixed
Poor Better

SYNTAX ERROR Unmatched left parenthesis

ILLEGAL ENTRY Type first letter: Send, Read, or


Drop
INVALID DATA Days range from 1 to 31

BAD FILE NAME File names must begin with a


letter 7
ERROR MESSAGES

2. Constructive Guidance and Tone


⮚ Avoid hostile messages and violent terminology
⮚ Do not only focus about what went wrong (give guidance)
⮚ Eliminate negative words (e.g., error, illegal, fatal, bad, catastrophic)
⮚ Options for guidance: Automatic error correction, present possible
alternatives, avoid errors from occurring
Poor Better
Run-Time error ‘-2147469 (800405):
Method ‘Private Profile String’ of Virtual memory space consumed. Close
object ‘System’ failed. some programs and retry.

Resource Conflict Bus: 00 Device: 03 Remove your compact flash card and
Function: 01 restart
Network connection refused. Your password was not recognized.

8 Please date
Drop-off retype.
must come after pickup
ERROR MESSAGES

3. User Centered Phrasing


⮚ User initiates more than responds
⮚ Avoid negative and condemning tone
⮚ Be brief but provide more information if
needed

⮚ Good example
⮚ We’re sorry, but we are unable to complete your
call as dialed
⮚ Please hang up, check your number, or consult the operator
for assistance
⮚ Bad example
⮚ Illegal telephone number
⮚ Call aborted
⮚ Error number 583-2R6.9
Consult your user manual for further information 9
DISPLAY DESIGN
Overview
⮚ Deals with layout of information on the display
⮚ Goal: Avoid clutter, reduce search time, increase
subjective satisfaction
⮚ Task performance goes up!
⮚For most interactive systems the display is key component of
successful design
⮚General rule: Always start with task analysis without
consideration of display size
⮚ Consider:
⮚ Provide all necessary data in a proper sequence to carry out the
task
⮚ Meaningful grouping of items (with labels suitable to users’
knowledge)
⮚ Use consistent sequences of groups and orderly 22
formats
DISPLAY DESIGN
Overview:
⯈ Effective display designs must provide all the necessary data in the
proper sequence to carry out the task

⯈ Graphic Designers have proposed principles suited for print formats


and these principles are now adapting for Display Design.

⯈ Mullet and Sano proposed six categories of principles that reveal the
complexity of designer’s task.

⯈ Data display guidelines are proposed by Smith and Mosier.

23
DISPLAY DESIGN

Design Principles Proposed by Mullet and Sano


1. Elegance and Simplicity: unity, refinement and fitness

2. Scale, Contrast, and Proportion: clarity, harmony, activity, and restraint

3. Organization and Visual Structure: grouping, hierarchy, relationship, and


balance

4. Module and Program: focus, flexibility, and consistent application

5. Image and Representation: immediacy, generality, cohesiveness, and


characterization

6. Style: distinctiveness, integrity, comprehensiveness, and appropriateness


24
DISPLAY DESIGN

⯈ Field layout
⯈ Blank spaces and separate lines can distinguish fields.

26
DISPLAY DESIGN

⯈ Field layout
⯈ Names in chronological order, alignment of dates, familiar date
separators.

27
DISPLAY DESIGN

⯈ Field layout
⯈ Labels are helpful for all but frequent users.

28
DISPLAY DESIGN

⯈ Field layout
⯈ Distinguish labels from data with case, boldfacing, etc.

29
DISPLAY DESIGN

⯈ Field layout
⯈ Ifboxes are available they can be used to make a more appealing
display, but they consume screen space.

30
DISPLAY DESIGN

⯈ Field layout summary


⯈ Blank spaces and separate lines can distinguish fields.
⯈ Names in chronological order, alignment of dates, familiar date
separators.
⯈ Labels are helpful for all but frequent users.
⯈ Distinguish labels from data with case, boldfacing, etc.
⯈ Ifboxes are available they can be used to make a more appealing
display, but they consume screen space.
⯈ Specify the date format for international audiences
⯈ Other coding categories – background shading, color, and graphic
icons 31
DISPLAY DESIGN

Empirical results
⯈ Structured form superior to narrative form
⯈ Improving data labels, clustering related information, using
appropriate indentation and underlining, aligning numeric values,
and eliminating extraneous characters improves performance
⯈ Performance times improve with fewer, denser displays for expert
users
⯈ Screen contents should contain only task-relevant information
⯈ Consistent location, structure, and terminology across displays
important
⯈ Sequences of displays should be similar throughout the system for
similar tasks 32
WEB PAGE DESIGN
⯈ User performance
⯈ Visual layout has a strong impact on (human) performance and is a critical
factor in web page design.
⯈ Some specific patterns of performance with web pages reflect differences
between web page and traditional GUI design.
⯈ User performance test based on layout and language
⯈ Layout factors: Quantity of links, alignment, grouping indications, and density
⯈ Languages: Hebrew (right-to-left) and English (left-to-right)
⯈ Measurement: Search times and eye movement
⯈ Conclusion:
⯈ Performance patterns were similar between languages
⯈ Poor performance in pages with many links and variable densities
⯈ But improved with the presence of uniform density

⯈ Alignment did not improve performance


38
WEB PAGE DESIGN

⮚ Good approach: user task focused

⮚ Analyze task sequences, frequencies Layout page


according to the data
e.g. Top-to-bottom movement through display more
efficient than having to move around top to bottom all over
the screen
⮚ Goal is to minimize visual scanning time, movement
time

Also...
⮚ Guidelines documents are numerous
46
BALANCING FUNCTION AND FASHION

⮚ Error messages
⮚ Display design
⮚ Web page design
⮚ Color

47
COLOR

⯈ Benefits of using Colors


⮚ Soothe or strike to the eye
⮚ Improve an uninteresting display
⮚ Facilitate subtle discrimination in complex displays
⮚ Emphasize the logical organization of information
⮚ Draw attention to warnings
⮚ Evoke strong emotional reactions of joy, excitement,
fear
or anger
48
COLOR

⯈ Dangers of using Colors


⯈Color pairings may cause problems

⯈Color fidelity may degrade on other hardware

⯈Printing or conversion to other media may be a problem

49
COLOR

⯈ Color Guidelines
⯈ Use color conservatively
- too much color can confuse and mislead users.
⯈ Limit the Number of Colors
- Too many colors may confuse novice users.
⮚ Recognize the power of color as a coding technique
- Ex Red means stop, overdue tasks. Green means go, completed
tasks.
⯈ Ensure that color coding supports the tasks
- Ex. Wrong data is highlighted for search task

50
COLOR

⯈ Color Guidelines
⯈ Have color coding appear with minimal user effort
- Color coding should in general be automatic when users perform a task
⯈ Place color coding under user control
– Users should be able to turn off or correct color coding
⯈ Design for monochrome first
- Layout data in a logical manner first, before colouring (universal usability,
black\white monitors, colour blind users)
⯈ Consider the needs of color-deficient users
- Readability, universal usability issue
⯈ Use color to help in Formatting
- Useful for densely packed
51
displays
COLOR

⯈ Color Guidelines
⯈ Be consistent in color coding
- don't use different colors for messages i.e some red and some
yellow
⯈ Be alert to common expectations about color codes
- Ex. Red – danger, stop, etc.
⯈ Be alert to problems with color pairings
- Ex. Red and Blue
⯈ User color changes to indicate status changes
- To gain attention of user
⯈ Use color in graphic displays for greater information density
- Example Graphs with multiple plots
52
User Documentation

Introduction to User Documentation

1) Definition of User Documentation


2) Importance of User Documentation
3) Purpose of User Documentation
Definition

User documentation, often referred to as user manuals or user guides, is a


type of technical communication designed to assist users in understanding
how to use a product or service effectively
Importance

User documentation plays a crucial role in the success and usability of a


product or service. Its importance lies in several key areas:

Enhances User Experience: User documentation provides users with the


necessary information to understand, set up, and use a product effectively.
Clear and comprehensive documentation ensures that users can make the
most out of the product, leading to a positive user experience.
Reduces Support Costs: Well-written user documentation can significantly
reduce the need for customer support. Users can find answers to their
questions and solutions to their problems without having to contact customer
support, which in turn reduces the workload and costs associated with
providing support.
Increases Product Adoption: Comprehensive user documentation helps users
to understand the product's features and benefits, increasing the likelihood of
the user adopting and continuing to use the product.
Saves Time: Users can quickly find the information they need to set up,
configure, and troubleshoot the product, saving them time and frustration.
This leads to increased productivity and efficiency.
Purpose

Guidance and Instruction: The primary purpose of user documentation is to


provide clear, concise, and comprehensive instructions to users on how to
use a product or service effectively. It guides users through the setup,
configuration, and operation of the product, helping them to utilize its
features and functionalities.
Enhanced User Experience: User documentation aims to enhance the overall
user experience by providing the necessary information and resources for
users to maximize the benefits of the product. Well-written documentation
reduces frustration and confusion, making it easier for users to achieve their
goals with the product.
Online Help:Community

In the context of Human-Computer Interaction (HCI), online help refers to the


resources and information provided to users within a software application or
operating system to assist them in understanding how to use the system or
application.
Here are some key characteristics of online help in HCI:

Accessibility: Online help is typically integrated into the software, allowing


users to access help without leaving the application.
Context-Sensitivity: It often provides information relevant to the current task or
screen the user is on.
Searchability: Users can search for specific topics or keywords to find the
information they need.
Multimedia Support: Modern online help systems may include text, images,
videos, and interactive elements to enhance understanding.
User-Friendly: It is designed to be easy to navigate and understand, even for
users who may not be technically proficient.
Information search

Human-Computer Interaction (HCI), information search is a critical concept


that refers to the process and methods by which users seek and retrieve
information using computer systems
Here’s a more detailed look at information search in HCI:

User-Centered Design: Information search systems are often designed with a


user-centered approach, ensuring that they align with the users’ mental
models and support their search tasks.
Search Interfaces: These are the components of a system that allow users to
input their queries and interact with the search results. Good design of
search interfaces is crucial for effective information retrieval.
Search Algorithms: Behind the scenes, sophisticated algorithms work to
understand the user’s query, search through vast amounts of data, and
return relevant results.
Information Visualization

In Human-Computer Interaction (HCI), information visualization is the practice


of representing data in a visual context, such as a chart or a map, to help
users understand the significance of the data and derive insights from it. The
goal is to make complex data more accessible, understandable, and usable.
Here’s a breakdown of the concept:

Purpose: Information visualization aims to present data in ways that are both
visually engaging and easy to understand. This can help users make
decisions based on the data presented.
Process: It involves the transformation of abstract data into visual
representations like graphs, charts, and maps. This process requires an
understanding of the data, the context in which it will be used, and the target
audience.
Principles: Effective information visualization adheres to principles that
enhance the user’s ability to perceive patterns and trends. These include
clarity, consistency, and the use of visual hierarchies to direct attention.
Interactivity: Modern information visualization often includes interactive
elements that allow users to manipulate the visualization and explore the
data in different ways.
ANY QUESTIONS???

7
0

You might also like