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
•Web-Safe Color
•Color Schemes
Topic & Structure of the lesson

• Size
• Thumbnail
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
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
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
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
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
User Interface Design Guidelines

• Provide features that promote efficiency

• Organize pages, tasks and functions in groups
• Create hierarchical menu lists
• Provide shortcuts/shortcut keys (AccessKey – Keyboard shortcut use by
ASP.NET control, alt + key)
• Use default values
• Use a natural language feature
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
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
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
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
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
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
User Interface Controls

• Control features include:

• List boxes
• Scroll bars
• Drop-down list boxes
• Option buttons
• Check boxes
• Command buttons
• Progress bars
• Calendars
Input Design

• Online input
• Data is validated and available immediately
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
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)
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
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
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
Input Design

• Form layout guidelines

• Allow sufficient space
• Offer clear instructions
• Provide logical organization
• Use captions (title) effectively
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
Output Design Issues

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

• Why do we still design for 640x480 screen resolution??

• Printing
• Not browsing at the maximum browser size
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)
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.
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.
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.
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.
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
Web-Safe Color

•In the mid 90s, the majority of computer users had 8-bit video cards
that could only display 256 colors.
•Considering the average eye can distinguish up to 16 million colors,
trimming the colors in graphics was quite difficult.
•The “web-safe color palette” ensured the developer, as much as is
possible, that the colors intended would actually appear correctly on
every platform and all browsers.
•The web-safe color palette is comprised of 216 unique colors that will
not dither (map to other colors). Each color has a corresponding
value.
•You can view these 216 colors and their codes at:
http://www.lynda.com/hexv.html.
Web-Safe Color

• Since the majority of users have video cards that

can handle millions of colors, “the justification for
using the browser-safe palette has diminished
greatly if you are developing your site for users who
have current computer systems.” – Lynda Weinman
http://www.lynda.com/hex.html.
• So why even mention the Web-Safe Color Palette?
• Because history is important! And, the web-safe
color palette is built-in to most applications.
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.
Size

•Connection Speed: Dial-up modems still exist!

• 40 KB file would take approximately 12 seconds to download.
• 1 MB files would take approximately 30 minutes to download.
•A general rule (which can be broken if necessary!) is that graphics
should not be any larger than 400 pixels in width or height. There are
a few reasons for this “rule”:
• Real Estate: Because not everyone has a high screen resolution, large graphics
can easily compete with the content of a page. Make sure to crop unnecessary
information out of images.
• Download Time: Typically, the more physical space the graphic takes up on
screen, the larger the file size. Big file sizes and long download times make
users reach for the back button!
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).
Question and Answer Session

Q&A