Web Technology Introduction

Website Development
Considerations
Hieu Dinh Vo

Outline
Privacy
Website design considerations
User-centered design

Have you ever received spam emails?

How your information gets on the Internet

Set up an online account

Make a purchase in an online store
Register for a contest
Take part in a survey
Download free software
Surf the web

Why should I care?

Companies and recruiters may use this
information, your online reputation, to gauge
your suitability for a job
Criminals may use data about you online to
target you for phishing scams, steal your
identity, and to commit other crimes

Protect your privacy on the Internet

First, read the website's privacy policy

Do not share more than you need to
Monitor what others post
Guard your information

Protect your privacy on the Internet

Cookies
Piece of information Web servers use to keep
track of users
Cookies are sent from Web servers to users
computers
When users request another web page (in the
same domain), cookies are sent back to
servers

Designing good Websites

10

Design Process and Evaluation

Provide content that is engaging, relevant, and
appropriate to the audience (useful content)
Use all available resources to better understand
users requirements
Involve users to improve the completeness and
accuracy of user requirements
Identify and clearly state the primary goals of the
Web site before beginning the design process
If user performance is important, make decisions
about content, format, interaction, and
navigation before deciding on colors and
decorative graphics
11

Optimizing the User Experience

Do not have unsolicited windows or graphics
pop-up to users
Allow users to perform tasks in the same
sequence and manner across similar
conditions
Do not require users to remember
information from place to place on a Web site
Minimize the time required to download a
Web sites pages
12

Optimizing the User Experience

Prepare information with the expectation that
it will either be read online or printed
Provide users with appropriate feedback while
they are waiting
Indicate to users the time required to
download an image or document at a given
connection speed

13

Hardware and Software

Design, develop and test for the most common
browsers
Do not assume that all users will have the same
browser features, and will have set the same
defaults
Design the Web site so it will work well with the
most popular operating systems
Design for the connection speed of most users
Design for monitors with the screen resolution
set at 1024x768 pixels
14

The Homepage
Enable users to access the homepage from any
other page on the Web site
Present all major options on the homepage
Treat your homepage as the key to conveying the
quality of your site
Limit the amount of prose text on the homepage.
Limit the homepage to one screenful of
information
Announce major changes to a Web site on the
homepagedo not surprise users
15

Page Layout
Create pages that are not considered cluttered by users
Put important, clickable items in the same locations,
and closer to the top of the page, where their location
can be better estimated
Establish a high-to-low level of importance for
information and infuse this approach throughout each
page on the Web site
Visually align page elements, either vertically or
horizontally
If reading speed is most important, use longer line
lengths (75-100 characters per line). If acceptance of
the Web site is most important, use shorter line
lengths (fifty characters per line)
16

Navigation
Do not create or direct users into pages that
have no navigational options
Provide feedback to let users know where
they are in the Web site
Place the primary navigation menus in the left
panel
Ensure that navigation tabs are located at the
top of the page, and look like clickable
versions of real-world tabs
17

Navigation
Use site maps for Web sites that have many
pages
Provide glosses to help users select correct
links
On long pages, provide a list of contents with
links that take users to the corresponding
content farther down the page

18

Scrolling and Paging

Use an appropriate page layout to eliminate the
need for users to scroll horizontally
Facilitate fast scrolling by highlighting major items
Use longer, scrolling pages when users are
reading for comprehension
If users system response times are reasonably
fast, use paging rather than scrolling
If users are looking for specific information, break
up the information into smaller portions (shorter
pages)
19

Headings, Titles, and Labels

Put a descriptive, unique, concise, and
meaningfully different title on each Web page
Use headings that are unique from one another
and conceptually related to the content they
describe
Visually distinguish (i.e., highlight) important
page items that require user attention,
particularly when those items are displayed
infrequently
Ensure that data tables have clear, concise, and
accurate row and column headings
20

Links
Use link labels and concepts that are meaningful,
understandable, and easily differentiated by users
rather than designers
Provide links to other pages in the Web site with
related content
Make the link text consistent with the title or
headings on the destination (i.e., target) page
Ensure that items that are not clickable do not
have characteristics that suggest that they are
clickable
21

Links
Ensure that important content can be accessed from
more than one link
Use text links rather than image links
Use color changes to indicate to users when a link has
been visited
Provide sufficient cues to clearly indicate to users that
an item is clickable
Pointing-and-clicking, rather than mousing over, is
preferred when selecting menu items from a cascading
menu structure
Make text links long enough to be understood, but
short enough to minimize wrapping
22

Text Appearance
When users are expected to rapidly read and
understand prose text, use black text on a
plain, high-contrast, non-patterned
background
Ensure that the format of common items is
consistent from one page to another
When users must read a lot of information,
use lower-case fonts and appropriate
capitalization to ensure the fastest possible
reading speed
23

Text Appearance
Use bold text only when it is important to draw
the users attention to a specific piece of
information
Use attention-attracting features with caution
and only when they are highly relevant
Use at least a 12-point font (e.g., typeface) on all
Web pages
Change the font characteristics to emphasize the
importance of a word or short phrase
Do not use two (or more) different ways to
highlight the same information on one page
24

Lists
Place a lists most important items at the top
Display a series of related items in a vertical list
rather than as continuous text
When items are numbered, start the numbering
sequence at one rather than zero
Use bullet lists to present items of equal status or
value, and numbered lists if a particular order to
the items is warranted
Capitalize the first letter of only the first word of a
list item, a list box item, check box labels, and
radio button labels
25

Screen-Based Controls
Distinguish clearly and consistently between
required and optional data entry fields
Ensure that a pushbuttons label clearly
indicates its action
Ensure that data entry labels are worded
consistently, so that the same data item is
given the same label if it appears on different
pages
Do not require users to enter the same
information more than once
26

Screen-Based Controls
Ensure that labels are close enough to their
associated data entry fields so that users will
recognize the label as describing the data
entry field
Create data entry fields that are large enough
to show all of the entered data without
scrolling
Provide radio buttons when users need to
choose one response from a list of mutually
exclusive options
27

Screen-Based Controls
Use the computer to detect errors made by
users
Design data entry transactions so that users
can stay with one entry method as long as
possible
Use a check box control to allow users to
select one or more items from a list of
possible choices

28

Screen-Based Controls
Display default values whenever a likely
default choice can be defined
Place (automatically) a blinking cursor at the
beginning of the first data entry field when a
data entry form is displayed on a page
Require users to enter information using data
entry fields (instead of selecting from list
boxes) if you are designing to speed human
performance
Never use one radio button alone
29

Graphics, Images, and Multimedia

Use background images sparingly and make
sure they are simple, especially if they are
used behind text
Ensure that all clickable images are either
labeled or readily understood by typical users
Take steps to ensure that images on the Web
site do not slow page download times
unnecessarily
Place your organizations logo in a consistent
place on every page
30

Graphics, Images, and Multimedia

Use images only when they are critical to the
success of a Web site
Provide an introductory explanation for
animation prior to it being viewed

31

User-centered Design
User-centered design (UCD) is an approach to design
that grounds the process in information about the
people who will use the product.
UCD processes focus on users through the planning,
design and development of a product.

32

Importance of User-Centered Design

Satisfy the user with a more efficient and userfriendly experience
Increase loyalty and return visits
Establish a more relevant and valuable
website
Create websites that supports rather than
frustrates the user

33

The Process
1.
2.
3.
4.
5.

Planning
Collecting user data
Developing prototypes
Writing content
Conducting usability tests

34

Web Accessibility
Web accessibility means that people with
disabilities can use the Web
Web Accessibility Initiative (WAI) is to develop
guidelines and techniques that describe
accessibility solutions for Web software and
Web developers
WCAG: Web Content Accessibility Guidelines
Websites are evaluated the conformance to
the guideline with three level A, AA, and AAA
35

References
Almost all of the points presented in this
lecture are collected from the website
http://www.usability.gov/

36

37