Transcript Human Interface Technology

Human Interface
Technology
Presented by:
Arlene N. Baratang, M.A.
Human Interface


It is the point of contact between a human and a
computer. Specifically, it refers to the layout of
the screen, form, and methods of operating the
computer when the system is used.
It is important to create a human interface that
considers ease of use from the user’s
perspective, and it is necessary to learn the
techniques and procedures for designing such an
interface.
GUI (graphical user interface)
It is a human interface that makes heavy
use of graphics to present information
visually, and enables basic operations to
be performed by using pointing devices
such as a mouse.
 The elements that comprise a GUI are
summarized below:….

Window

Small, stand-alone screen provided within
the operational screen. Text and images
are displayed here.
Click icon for full view
Menu Bar

Displays menu names. When a menu
name is selected, a list of corresponding
commands is displayed.
Text Box

Text and number data is entered here
using the keyboard.
Radio Button

One item is selected from a list of several
items. If a different item is selected, the
previous one will be unselected
automatically.
Pull-down Menu

Displays the
selected
menu by
opening
downward on
the screen
from the
menu
heading.
Check-box

Applicable items are selected from a list of
several. Either a single item or multiple
items can be selected. Alternatively, each
individual item may have and ON and OFF
option to select from.
Click this to view check-box
Command Button

Performs the corresponding action when
selected.
List Box

One or more items are select from a list of
several. Effective when there are more
items that will not fit in a radio button or
check box list.
Click this to view check-box
Icon

A picture or symbol representing a file or
command. Can be used to launch
applications, open, files, ets.
Pop-up Menu

A menu displayed in an arbitrary place on
the screen while preserving the current
contents. Also referred to as a “short-cut
menu”.
Interface Design
Screen Design
The input screen is the interface most
used in a system by users.
 An easy-to-use input screen should be
designed from the standpoint of the user.

Samples of Screen
Design
Procedures for designing an
input screen are as follows:
1.
2.
3.
Screen standardization. Standardized the items
common to each of the screens such as the
position of the title and function key assignment.
Screen systematization. Design the flow and
hierarchical relationship between related screens.
After the screens have been systematized, create a
“screen hierarchy chart” and “screen transition
chart”.
Screen item definition and layout design. Decide on
the position of items on the screen, default values,
input methods, etc.
Screen hierarchy chart
Main
Reservation
Cancellation
Inquiry
Event exhibition
information
Availability
Screen transition chart
Availability
Reservation
Main
Cancellation
Inquiry
Event
Exhibition
information
Shows that
the screen
can be moved
Points of consideration for
screen design





Have it move from left to right and top to bottom so that
the flow of input is natural.
When there are large number of options, group them
together or use some other means to make the selection
easy.
Establish rules for color usage.
Provide an operational guide (help function) for users not
familiar with the operations.
According to purpose of use, make it possible to use
other input devices other than a keyboard (barcode
reader, touch panel, scanner, etc.).
Form design

Forms used on a daily basis need to be
designed in such a way that they are easy
for anyone to use.
Procedures for designing forms:



Form standardization. Standardized the
elements common to each of the forms such as
the position of the title and the number of lines
per page.
Layout design. Design the layout of each of the
items.
Selection of printer and paper. If the form is to
be printed, select the printer and paper
according to the purpose of use.
Points of consideration in form
design:





Place items that are common to all the forms in
the same location.
Include only the bare minimum information.
Use commas for every three digits to make
numerical data easy to read.
Use tables, graphs, diagrams, etc. in the layout
according to purpose.
Make considerations for special output such as
barcodes according to purpose.
Sample of Form
Design
Web Design

It has become common practice for
companies to set up their own Web pages
and transmit information via the Internet.
As Web pages are seen by so many
people, it is not an exaggeration to say
that the quality of the Web page’s design
can make or break the company’s image.
Web design . . . .
Web pages are placed to search for
information on companies and submit
inquiries.
 It is important for Web pages to be
designed in such as way that they are
easy for anyone to use.

Considerations for Web Design
Use a style sheet and standardize the
colors and design.
 Keep use of images to a minimum and
make the operations stress-free.
 Avoid functions that only work on certain
Web browsers and make sure the site
renders properly on all browsers.

Samples of Web Designs
http://www.nlm.nih.gov/medlineplus/dentalhealth.html
http://www.dentalhealthtreatment.com/
Style Sheet


A “style sheet” sets various style formats for a
Web page that defines settings such as font
style, and size, background, and margins.
A style sheet can be used to comprehensively
manage a Web page, making it possible to not
only set and make changes efficiently but
maintain the overall volume of the website.
Usability

“Usability” refers to ease of use for a user.
It is an indicator for designing a userfriendly and easy-to-use Web page.
Web Accessibility

“Web accessibility” refers to the availability
of the desired information and services on
the website to everyone, including the
elderly disabled.
Information Accessibility


“Information accessibility” refers to the removal
of obstacles that get in the way of using
information devices so that information can be
accessed without difficulty.
In general, if a device is easy to use or a screen
is easy to see for people with disabilities or
special needs, it will likely be easy to use or see
for all users.
http://sciencedaily.healthology.com/dental-health/focusarea.htm
http://www.dentalroseville.com/
http://www.webmd.com/oral-health/default.htm
http://pinoydental.com/
http://dentalresource.org/
http://www.youngwomenshealth.org/braces.html
Universal Design

Universal design is an approach that
involves designing products, equipment,
facilities, and living spaces in such a way
that they can be used by anyone
regardless of nationality, culture, gender,
age, or physical ability.
Universal design. . .
Some examples include vending machines
that have the product dispenser in the
middle, and elevators that are entered on
one side and exited on the other.
 These designs provide ease of use to
everyone and are not limited to those in
wheelchairs or those with large luggage.

Vendo machine
ATM Machines, tickets vendo machine
Newspaper dispenser
Elevator
Universal design. . .



This universal design approach have been proposed
by Ronald Mace, a professor at the University of
North Carolina in the United States, in 1985.
The key point is that the target is all persons and is
not limited to the elderly or people with disabilities.
It is important to imagine in the user’s shoes and
make designs that are accessible to as many people
as possible by eliminating any conveniences.
The End