Web HCI, Web Usability, Page and Site Design

Web HCI, Web Usability, Page and
Site Design
Web Applications
CT050-3-2
Web Applications
Web HCI, Web Usability, Page and Site Design
Slide 2 of 66
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
Web Applications
Slide 3 of 66
Topic & Structure of the lesson
Size
Thumbnail
Web Applications
Slide 4 of 66
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
Web Applications
Slide 5 of 66
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
Web Applications
Slide 6 of 66
Human-Computer interaction (HCI)
Describes the relationship between computers
and people who use them
HCI concepts apply to everything from PCs to
the global networks
Developers main objective is to create user-
friendly design that is easy to learn and use

Web Applications
Slide 7 of 66
User-centered Design Principles
Understand the underlying business functions
Maximize graphical effectiveness
Profile the systems users
Think like a user
Use prototyping
Design a comprehensive interface
Continue the feedback process
Document the interface design

Web Applications
Slide 8 of 66
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

Web Applications
Slide 9 of 66
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

Web Applications
Slide 10 of 66
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

Web Applications
Slide 11 of 66
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

Web Applications
Slide 12 of 66
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

Web Applications
Slide 13 of 66
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
Web Applications
Slide 14 of 66
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
Web Applications
Slide 15 of 66
Design screens that are attractive, easy to
use, and workable
Control features include:
Menu bars
Toolbars
Dialog boxes
Text boxes
Toggle buttons
Web Applications
Slide 16 of 66
Control features include:
List boxes
Scroll bars
Drop-down list boxes
Option buttons
Check boxes
Command buttons
Progress bars
Calendars

Web Applications
Slide 17 of 66
Input Design
Online input
Data is validated and available immediately

Web Applications
Slide 18 of 66
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
Web Applications
Slide 19 of 66
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)

Web Applications
Slide 20 of 66
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
Web Applications
Slide 21 of 66
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
Web Applications
Slide 22 of 66
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
Web Applications
Slide 23 of 66
Input Design
Form layout guidelines
Allow sufficient space
Offer clear instructions
Provide logical organization
Use captions (title) effectively
Web Applications
Slide 24 of 66
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

Web Applications
Slide 25 of 66
Output Design Issues
Types of output
E-mail
Printer
Screen
Printed reports are convenient and
sometimes necessary

Web Applications
Slide 26 of 66
Screen Resolution
Why do we still design for 640x480 screen
resolution??
Printing
Not browsing at the maximum browser size
Web Applications
Slide 27 of 66
Screen Resolution
Scenario designed
for
640x480
width
640x480
height
800x600
width
800x600
height
1024x768
width
1024x768
height
Safest
recommendation
(with scroll bar)
584 290 744 410 968 578
Safest
recommendation
(with scroll bar) 5.0+
Win & Mac (with
scroll bar)
588 290 748 410 972 578
Windows only (with
scroll bar)
616 290 776 410 1000 578

Web Applications
Slide 28 of 66
Site Structure
Its 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.
Web Applications
Slide 29 of 66
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.

Web Applications
Slide 30 of 66
Navigation
Short, sweet, and to the point links should be
used in navigation.
Remember rule of usability: Dont 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.

Web Applications
Slide 31 of 66
Page Necessities
Each page needs a base of information to gain
credibility.
Users want to know the following information:
Who created and sponsored the page.
You should have the logos of your page or your pages
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.
Web Applications
Slide 32 of 66
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.
Its important to include your physical location on your pages.
Sometimes its 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 Applications
Slide 33 of 66
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 Applications
Slide 34 of 66
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.
Web Applications
Slide 35 of 66
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.
Web Applications
Slide 36 of 66
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!

Web Applications
Slide 37 of 66
Thumbnail
If you need to have high quality photos online,
but you dont 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).
Web Applications
Slide 38 of 66
Resources

Web Applications
Slide 39 of 66
Q & A
Question and Answer Session

Web HCI, Web Usability, Page and Site Design

Caricato da

Informazioni sul documento

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

Web HCI, Web Usability, Page and Site Design

Caricato da

Copyright:

Formati disponibili

Web HCI, Web Usability, Page and

Potrebbero piacerti anche