Lesson 7: Designing the User

Interface
1. What is User Interface?

SYSTEMS
2. Guidelines for Designing User
Interface
3. Types of User Interface
ANALYSIS AND 4. Guidelines for Designing Dialog

DESIGN
5. Providing Feedback for Users
6. Providing Help
7. Guidelines for Designing Web
sites
 USER INTERFACE

✓ A user interface, also called a “UI” or simply an interface, is the

means in which a person controls a software application or
hardware device.
✓ A good user interface provides a “user friendly” experience,
allowing the user to interact with the software or hardware I a
natural and intuitive way.
✓ The user interface is everything the user comes into contact with
while using the system – physically, perceptually and conceptually.
 ASPECTS OF USER INTERFACE

1. Physical Aspect
✓ Comprise of the device that user really touches including
keyboard, mouse, touch screen or keypad.
✓ Other physical parts of the interface consists of reference
manuals, printed documents, data-entry forms, and others that
the end user works with while completing the tasks at the
computer.
 ASPECTS OF USER INTERFACE
2. Perceptual Aspect
✓ Consist of everything the end user sees, hears or touches (beyond
the physical devices).
✓ What the users sees comprises of all data and instructions
displayed on the screen, including shapes, lines, numbers and
words.
✓ What the user hears may rely on the sounds made by the system.
✓ User touches consist of menus, dialog boxes and buttons on the
screen with the use of a mouse.
✓ Users also touches objects such as documents, drawings or
records of transactions with a mouse when completing task.
 ASPECTS OF USER INTERFACE

3. Conceptual Aspect
✓ Includes everything the user knows about using the system.
✓ Includes all of the problem domain “things” in the system the
user manipulates, the operations that can be performed and
the procedures followed to carry out the operations.
✓ The end user should know all about these details in order to use
the system.
✓ The end user must know what the system does and how to use
it to complete the task and not how the system is implemented
internally.
 OBJECTIVES OF USER INTERFACE

1. Match the user interface for the task.

2. Make the user interface efficient.
3. Provide appropriate feedback to users
4. Generate usable queries.
5. Improve productivity of knowledge workers.
 TWO COMPONENTS OF USER
INTERFACE

1. Presentation Language – the

computer-to-human part of the
transaction.
2. Action Language – characterizes
the human-to-computer portion.
 GUIDELINES FOR DESIGNING
USER INTERFACE
1. Strive for consistency.
✓ The following should be consistent throughout the system:
• The way information is arranged on forms.
• The names and arrangement of menu items.
• The size and shape of icons
• The sequence followed to carry out task.
 GUIDELINES FOR DESIGNING
USER INTERFACE
2. Enable frequent users to use shortcuts.
✓ Designer should provide macro facilities for users to create
their own shortcuts.
3. Offer informative feedback.
✓ Each action taken by the user should result in some type of
feedback from the computer.
4. Design dialogs to yield closure.
✓ Every dialog should be organized in a clear sequence with a
beginning, middle and end.
 GUIDELINES FOR DESIGNING
USER INTERFACE
5. Offer simple error handling.
✓ System designer should prevent the user from making errors by
limiting available options and allow the user to select from
valid options at any point in the dialog.
6. Permit easy reversal of actions.
✓ System designers should make sure to include cancel buttons
on all dialog boxes and allow users to go back one step at
any time.
 GUIDELINES FOR DESIGNING
USER INTERFACE

7. Support internal locus of control.

✓ The system designers should provide control through the
wording of prompts and messages.
8. Reduce short-term memory load.
✓ The system designers should not assume that users will
remember anything from form to form, or dialog box to the
dialog box during an interaction with the system.
 TYPES OF USER INTERFACE

1. Natural-Language Interface
✓ Permits users to interact with the computer in their everyday or
natural language.
✓ There are no special skills required of the user who interacts
with the computer.
✓ Example: www.google.com
 TYPES OF USER INTERFACE

2. Question-and-Answer Interface
✓ The computer displays a question to the user on the display.
The user inputs the answer and the computer takes action on
that input information in a pre-programmed manner, usually
by moving to the next question.
✓ A dialog box is a type of question-and-answer interface with
another application.
✓ Example: Wizard use in installing applications, Office assistant
 TYPES OF USER INTERFACE

3. Menu Interface
✓ Provides the user with a list of available selections on the
computer screen.
✓ To respond to the many, the user is limited to the option
displayed.
✓ Example: Word processing menu
 TYPES OF USER INTERFACE

4. Form-Fill Interface
✓ Also referred to as input/output forms, this interface consists of
onscreen forms or Web-based forms that display fields
containing data items or parameters that need to be
communicated to the user.
✓ Should be:
• A self explanatory title and field headings
• Has fields organized into logical groupings with distinctive
boundaries.
 TYPES OF USER INTERFACE

• Provides default values when practical

• Displays data in appropriate field lengths
• Minimizes the need to scroll windows.
✓ The benefit of the form-fill interface is that the printed version of
the filled-in form provides excellent documentation
✓ Example: Google Advance search Engine
 TYPES OF USER INTERFACE

5. Command-Language Interface
✓ Allows the user to enter explicit statements to invoke
operations within a system.
✓ This requires users to remember command syntax and
semantics.
✓ Command language interface can be a burden to user since
they need to memorize names, syntax and operations.
✓ Example: Command Prompt
 TYPES OF USER INTERFACE

6. Graphical User Interface

✓ Allows users to directly manipulate the graphical
representation on the screen which can be done with
keyboard input, joystick or a mouse.
✓ GUI presents graphical icons, visual indicators or special
graphical elements called “widgets”.
✓ Provides continuous feedback on task accomplishments.
✓ When used in intranets, extranets or Wed, it requires careful
planning.
 TYPES OF USER INTERFACE

Different devices that can be used with GUIs:

1. Stylus
2. Tablet PC
3. Touch Sensitive screens
4. Voice Recognition and Synthesis
 STANDARDS IN ACCESSING THE
CHOSEN INTERFACES
1. The training period necessary for users should be acceptably short.
2. Users who are early in their training should be able to enter
commands without thinking about them or without referring to a
help menu or manual. Keeping the interfaces consistent
throughout the application can be helpful in this regard.
3. The interface should be faultless so that errors are few and those
that do occur are not occurring because of poor design.
 STANDARDS IN ACCESSING THE
CHOSEN INTERFACES

4. The time that users and the system need to recover from errors
should be short.
5. Occasional users should be able to study again the system quickly.
 GUIDELINES FOR DESIGNING
DIALOG
1. Meaningful communication – information presented in the system
should be clear to the user that is – having an appropriate title for
every display, minimizing the use of abbreviations and providing clear
user feedback.
2. Minimal user action – minimizing the number of keystrokes required
when giving inputs.
3. Standard operation and consistency – the system should be consistent
throughout its set of different displays and in the mechanism for
controlling the operation of the displays throughout different
applications.
 PROVIDING FEEDBACK FOR
USERS
1. Status Information
✓ Keeps users informed of what is going on within the system.
✓ It is also important to inform the user that besides working, the
system has accepted the user’s input and that the input was in
the correct form.
✓ By providing status information, it assures users that nothing is
wrong with the system and it would make them feel in command
of the system.
 PROVIDING FEEDBACK FOR
USERS

2. Prompting Cues
✓ It is useful to be specific with request when prompting the user for
information or action.
✓ Example:
 PROVIDING FEEDBACK FOR
USERS
2. Error or Warning Messages
✓ To improve the usefulness of using error and warning messages:
1. Message should be specific and free of error codes and
jargon.
2. Messages should never scold the user and should guide them
toward a resolution.
3. Messages should be in user terms not in computer terms.
 PROVIDING FEEDBACK FOR
USERS
4. Use multiple messages so that users can get more detailed
explanations when needed or wanted.
5. Error messages should appear in the same format and
placement each time so that they are identified as error
messages and not as some other information.
 GUIDELINES FOR DESIGNING
USABLE HELP

1. Simplicity – use short, simple wording, common spelling and complete

sentence. Give users only what they need to know, with ability to find
additional information.
2. Organize – use lists to break information into manageable pieces.
Help messages should be written so that information can be
absorbed easily by users.
3. Show – provide examples of proper use and the outcomes of such
use.
 GUIDELINES FOR DESIGNING
WEB SITES
1. Place the organization’s name and logo on every page and make
the logo link to the home page.
2. Include a search function if the site has more than 100 pages.
3. Write straightforward and simple headlines and page titles that
clearly explain what the page is about and that will make sense
when read out of context in a search engine listing.
4. Structure the page to facilitate reader scanning and help users
ignore chunks of the page in a single glance.
 GUIDELINES FOR DESIGNING
WEB SITES

5. Do not place everything about a product or topic into a single

huge page. Use hypertext to structure the content space into a
starting page that provides an overview and several secondary
pages that each focus on a specific topic.
6. Use product photos, however, avoid cluttered and bloated
product family pages with lots of photos.
7. Use relevance-enhanced image reduction when preparing small
photos and images.
 GUIDELINES FOR DESIGNING
WEB SITES

8. Use link titles to give users a preview of which each link will take
them before they have clicked on it.
9. Make sure that all necessary pages are accessible for users with
disabilities especially visually impaired users.
10. Do the same as everybody else, because if most big websites do
something in a certain way, users will expect other sites to work
similarly.
 WEB SITE DESIGN PRINCIPLES

According to the Web design book written by Joel Sklar, designers

should focus on three broad aspects of Web design and these are:

1. Designing for the computer medium

2. Designing the whole web site
3. Designing for the user.
 WEB SITE DESIGN PRINCIPLES

1. Designing for the computer medium

• Keep in mind that websites are displayed on a computer screen
an not on paper.
• System designers can choose from a large collection of video
display fonts, colors and layouts however, the appearance of the
website should flow from its function and the goals of the
organization.
• With hypermedia, users can navigate through the site in nonlinear
ways.
 WEB SITE DESIGN PRINCIPLES
Designing for the computer medium guidelines are as follows:
a. Craft the look and feel of the pages to take advantage of the
medium.
b. Make the design portable since it will be access by a wide range
of technology.
c. Design for low bandwidth since users will not want to wait for a
page to load.
d. Plan for a clear presentation and easy access to information to
aide the user in navigation through the site.
e. Reformat information for online presentation when it comes from
other sources.
 WEB SITE DESIGN PRINCIPLES

2. Designing the Whole Website

• The whole Website should have unifying themes that reflect the
impression the organization wants to convey and a structure.
• Four guidelines for designing the whole website are:
a. Craft the look and feel of the pages to match the idea
preferred by the organization.
b. Create smooth transitions between web pages so that users
are clear about where they have been and where they are
going
 WEB SITE DESIGN PRINCIPLES

a. Design each page using a grid pattern to provide visual

structure for related groups of information.
b. Place a reasonable amount of white space on each page
between groups of information.
 WEB SITE DESIGN PRINCIPLES
3. Designing for the User
• It is important not to include features that will annoy or distract
web users.
• A website must be defined carefully in order for the designers to
make better judgements.
• There are 6 guidelines to consider for designing for the user.
a. Design for interactions for web users expect sites to be
interactive and dynamic.
b. Guide the user’s eyes to information on the page that is the
most important.
 WEB SITE DESIGN PRINCIPLES

c. Keep a flat hierarchy so that the user does to have to drill down
too deep to find detained information.
d. Use the power of hypertext linking to help users navigate
through the site.
e. Decide how much content per page is enough based on the
characteristics of the typical; do not clutter the page.
f. Design for accessibility for diverse groups of users; including
those with disabilities.
REFERENCES:
 ACTIVITY:
Create a Relational Database Schema for your Information System
topic. Make sure to merge the relations into a consolidated set of 3NF
relations. State whatever assumptions you consider necessary to resolve
any potential problems you identify in the merging process