CT050-3-2 Web Applications

Web HCI, Web Usability, Page and

Site Design
 Topic & Structure of the lesson

• Human-Computer interaction (HCI)

• User-centered Design Principles
• User Interface Controls
• Input Design
• Output Design Issues
• Screen Resolution
• Navigation
• Page Necessities

CT050-3-2-WAPP Web HCI, Web Usability, Page and Site Design

 Learning Outcomes
At the end of the module, your should be
able:
• To explain the concept of user interface design and
human-computer interaction
• To describe user-centered interface design principles
• To describe guidelines for user interface design
• To describe user interface controls
• To explain input design concepts, techniques, and
methods
• To apply good design principles.
• To gain hands-on experience designing web sites and
web pages that adhere to the elements of good web
design

CT050-3-2-WAPP Web HCI, Web Usability, Page and Site Design

 Key Terms you must be able to use

If you have mastered this topic, you should

be able to use the following terms correctly
in your assignments and exams:
• HCI
• User-centered Interface

CT050-3-2-WAPP Web HCI, Web Usability, Page and Site Design

 Human-Computer Interaction (HCI)

• Describes the relationship between computers

and people who use them
• HCI concepts apply to everything from PC’s to
the global networks
• Developers main objective is to create user-
friendly design that is easy to learn and use

CT050-3-2-WAPP Web HCI, Web Usability, Page and Site Design

 User-centered Design Principles

• Understand the underlying business functions

• Maximize graphical effectiveness
• Profile the system’s users
• Think like a user
• Use prototyping
• Design a comprehensive interface
• Continue the feedback process
• Document the interface design

CT050-3-2-WAPP Web HCI, Web Usability, Page and Site Design

 User Interface Design Guidelines

• Create a design that is easy to learn and

remember
– Label clearly all controls, buttons, and icons
– Select only those images that users can
understand easily
– Provide on-screen instructions that are
logical, concise, and clear
– Show all links/pages in a list of menu items
– Make it easy to return to one or more levels in
the Web site
CT050-3-2-WAPP Web HCI, Web Usability, Page and Site Design
 User Interface Design Guidelines

• Provide features that promote efficiency

– Organize pages, tasks and functions in
groups
– Create hierarchical menu lists
– Provide shortcuts
– Use default values
– Use a natural language feature

CT050-3-2-WAPP Web HCI, Web Usability, Page and Site Design

 User Interface Design Guidelines

• Make it easy for users to obtain help or

correct errors
– Ensure that help/faq is always available
– Provide a direct route back from Help
– Include contact information
– Require user confirmation before data
deletion
– Use hypertext links

CT050-3-2-WAPP Web HCI, Web Usability, Page and Site Design

 User Interface Design Guidelines

• Minimize input data problems

– Provide data validation checks
– Display event-driven messages and
reminders
– Establish a list of predefined values
– Build in rules that enforce data integrity
(complete)
– Use input masks (restricts text entry inside a
preset mask), or templates, that make it
easier to enter data

CT050-3-2-WAPP Web HCI, Web Usability, Page and Site Design

 User Interface Design Guidelines

• Provide feedback to users

– Display messages at a logical place on the screen
– Alert users to lengthy processing times or delays
– Allow messages to remain on the screen long enough
for users to read them
– Let the user know whether the task was successful or
not
– Provide a text explanation (alt) to identify the control
button
– Use messages that are specific, understandable, and
professional

CT050-3-2-WAPP Web HCI, Web Usability, Page and Site Design

 User Interface Design Guidelines

• Create an attractive layout and design

– Use appropriate colors to highlight different areas of the screen
– Use special effects sparingly
– Use hyperlinks
– Group related objects and information
– Keep screen displays uncluttered
– Display titles, messages, and instructions in a consistent manner
– Use consistent terminology
– Ensure the commands will always have the same effect
– Ensure that similar mouse actions will produce the same result
– Require the user to confirm data entry

CT050-3-2-WAPP Web HCI, Web Usability, Page and Site Design

 User Interface Design Guidelines

• Use familiar terms and images

– Stick to a pattern
– Use familiar functions/operations
– Provide a similar look and feel
– Avoid complex terms and technical jargon

CT050-3-2-WAPP Web HCI, Web Usability, Page and Site Design

 UX vs. UI

CT050-3-2-WAPP Web HCI, Web Usability, Page and Site Design

 Every website must be …

CT050-3-2-WAPP Web HCI, Web Usability, Page and Site Design

 Bad vs. Good UI

CT050-3-2-WAPP Web HCI, Web Usability, Page and Site Design

 Bad vs. Good UI

CT050-3-2-WAPP Web HCI, Web Usability, Page and Site Design

 Bad vs. Good UI

CT050-3-2-WAPP Web HCI, Web Usability, Page and Site Design

 Bad vs. Good UI

CT050-3-2-WAPP Web HCI, Web Usability, Page and Site Design

 Bad vs. Good UI

CT050-3-2-WAPP Web HCI, Web Usability, Page and Site Design

 Bad vs. Good UI

CT050-3-2-WAPP Web HCI, Web Usability, Page and Site Design

 User Interface Controls

• Design screens that are attractive, easy to

use, and workable
• Control features include:
– Menu bars
– Toolbars
– Dialog boxes
– Text boxes
– Toggle buttons

CT050-3-2-WAPP Web HCI, Web Usability, Page and Site Design

 User Interface Controls

• Control features include:

– List boxes
– Scroll bars
– Drop-down list boxes
– Option buttons
– Check boxes
– Command buttons
– Progress bars
– Calendars

CT050-3-2-WAPP Web HCI, Web Usability, Page and Site Design

 Input Design

• Online input
– Data is validated and available immediately

CT050-3-2-WAPP Web HCI, Web Usability, Page and Site Design

 Input Design

• Six main input design objectives

1. Select suitable input and data entry method
2. Reduce input volume
3. Design attractive data entry screens
4. Use validation checks to reduce input errors
5. Design required source documents
6. Develop effective input controls

CT050-3-2-WAPP Web HCI, Web Usability, Page and Site Design

 Input Design

• Input volume
– Guidelines for reducing input volume
• Input necessary data only
• Do not input data that can be retrieved from
system files or calculated from other data
• Do not input constant data
• Use codes (M & F, Y & N)

CT050-3-2-WAPP Web HCI, Web Usability, Page and Site Design

 Input Design

• Form filling is the most effective method of

online data entry
• Effective screen design guidelines
– Restrict user access to screen locations where data is
entered
– Provide a descriptive caption for every field
– Display a sample format if a user must enter values
in a specific format
– Display default values
– Use default values for constant entries
– Display a list of acceptable values for fields

CT050-3-2-WAPP Web HCI, Web Usability, Page and Site Design

 Input Design

• Effective screen design guidelines

– Provide a way to leave the data entry screen without
entering the current record (Cancel or Reset)
– Provide the opportunity to confirm to confirm the
accuracy of input data
– Provide for movement among fields in a standard
order (the tab order of control, TabIndex) or any
chosen order
– Design the screen form layout to match that of the
source documents
– Allow users to add, change, delete, and view records
– Provide for users to search for specific information

CT050-3-2-WAPP Web HCI, Web Usability, Page and Site Design

 Input Design

• Input errors
– Fewer errors mean better data quality
– Types of data validation checks
1. Sequence checks
2. Existence checks
3. Data type checks
4. Range checks
5. Validity checks

CT050-3-2-WAPP Web HCI, Web Usability, Page and Site Design

 Input Design

• Form layout guidelines

– Allow sufficient space
– Offer clear instructions
– Provide logical organization
– Use captions (title) effectively

CT050-3-2-WAPP Web HCI, Web Usability, Page and Site Design

 Input Design

• Input control
– Measures to ensure that data is correct,
complete, and secure
• Effective source document design
• Data validity checks
• Log files for rejected records
• Data security measures, including encryption
• Password and sign-on procedures

CT050-3-2-WAPP Web HCI, Web Usability, Page and Site Design

 Output Design Issues

• Types of output
– E-mail
– Printer
– Screen
• Printed reports are convenient and
sometimes necessary

CT050-3-2-WAPP Web HCI, Web Usability, Page and Site Design

 Screen Resolution

• Why do we still design for 640x480 screen

resolution??
– Printing
– Not browsing at the maximum browser size
• New way – by using CSS responsive web
method.

CT050-3-2-WAPP Web HCI, Web Usability, Page and Site Design

 Screen Resolution

Scenario designed 640x480 640x480 800x600 800x600 1024x768 1024x768

for width height width height width height

Safest
recommendation 584 290 744 410 968 578
(with scroll bar)

Safest
recommendation
(with scroll bar) 5.0+ 588 290 748 410 972 578
Win & Mac (with
scroll bar)

Windows only (with

616 290 776 410 1000 578
scroll bar)

CT050-3-2-WAPP Web HCI, Web Usability, Page and Site Design

 Site Structure

• It’s important to be organized when

designing a web site.
• It is good practice to organize your web
site files into functional folders.
• Put all of your images in one folder, all of
your documents in one folder.

CT050-3-2-WAPP Web HCI, Web Usability, Page and Site Design

 Navigation

• Navigation is an essential aspect of any web

site, and a natural way to incorporate content
and page layout that can work together to guide
the user through your site.
• Navigational elements and cues also add an
essential efficiency for browsing around your site
quickly and easily.
• Users should never have to wonder where a link
in your navigation would take them.

CT050-3-2-WAPP Web HCI, Web Usability, Page and Site Design

 Navigation

• Short, sweet, and to the point links should be

used in navigation.
• Remember rule of usability: “Don’t Make Me
Think!”
• Carrying a consistent navigational bar
throughout your site allows a user to discover
where he or she wants to be without having to
go back to the top page of the site and drill down
through another section.

CT050-3-2-WAPP Web HCI, Web Usability, Page and Site Design

 Page Necessities

• Each page needs a base of information to gain

credibility.
• User’s want to know the following information:
– Who created and sponsored the page.
• You should have the logos of your page or your page’s
sponsors in the upper left corner of the page. Also remember
to include an e-mail address for contact persons.
– What the page content is.
• Each page should have a title and a heading. This
information gives the user a summary of the content in one
glance.

CT050-3-2-WAPP Web HCI, Web Usability, Page and Site Design

 Page Necessities

– When the content was last modified.

• Users want to make sure that what they are reading is up to
date.
– Where the web page resides.
• It’s important to include your physical location on your pages.
Sometimes it’s necessary for a user to contact you via snail
mail! Physical address also allows the user to know what
time zone you are in.
– How to view the material.
• If the user needs a software programs to extend the
capabilities of his/her Internet browser in a specific way
(a.k.a. – a Plug-In), you must include:
– Text that informs the user which plug-in needs to be installed in
order to access the material
– URL of a site where you can download a free version of the
plug-in

CT050-3-2-WAPP Web HCI, Web Usability, Page and Site Design

 Color Schemes

• Background colors are often used with text heavy

content to provide a more comfortable and inviting
reading environment.
• Color contrast, especially regarding luminosity
(lightness/darkness) is an important issue when using
text over backgrounds.
• Black text on a white background is an obvious example
of extreme, and useful contrast.
• Examples lacking contrast are dark on black, pastel on
pastel, or primary on primary.
• Each of these demonstrates how colors will interact and
prevent one from obtaining the content.

CT050-3-2-WAPP Web HCI, Web Usability, Page and Site Design

 Thumbnail

• If you need to have high quality photos online,

but you don’t want to force your users to wait a
half hour to download one page, you can use
what are called thumbnail images.
• Thumbnails are smaller, lower quality versions
of your photos.
• Typically, people link thumbnails to a larger
version of an image. Using thumbnails allows
your users to pick which photos they want to
view at a high quality (and thus long wait time).

CT050-3-2-WAPP Web HCI, Web Usability, Page and Site Design

 Question and Answer Session

Q&A

CT050-3-2-WAPP Web HCI, Web Usability, Page and Site Design