Date post: | 18-Dec-2014 |
Category: |
Technology |
Upload: | paul-leslie |
View: | 857 times |
Download: | 0 times |
1
Designing and Organizing a Web Site
CIS1203
2
Learning Objectives1. Website layouts (slides 35)
2. Home Page (slides 67)
3. Website organizational structures (slides 817)
4. Accessibility (slide 18)
5. Usability & Consistency (slide 19)
6. Browser compatibility (slide 20)
7. Screen resolution (slide 21)
8. Color schemes (slides 22 24)
9. Contrast (slide 25)
10. Content (slides 2627)
11. Website navigational structures (slides 2841)
3
Website layout: 2 column layout header,
footer and two columns; navigation on
the left side
4
Website layout: 3-column layout header,
footer and three columns
5
Benefits of both 2 Columns and 3-Columns layout
2-Columns Layout:- Large content area
- Larger pictures
- Better font choice
3-Columns Layout:
- e-Commerce benefit by promoting their products.
- Online users focus more on the center
6
Home Page
Home page should answer basic visitor questions:– Who are you?– What do you do?– Where can I find what I want or need?– Why should I be interested in your products or
services?
7
Home Page
8
Website organizational structures
1. Linear structure– A series of pages linked in sequential order to
perform a certain task like registration or payment process.
– Advantage: pages flow in sequence.– Disadvantage: the user has to click through
several pages to move forward or backward.
9
Website organizational structures (continues)
2. Webbed structure– Pages are linked together without regard for how the
content fits logically– Advantage: users can move quickly from page to
page– Disadvantage: users can easily got lost within the
website
10
Website organizational structures (continues)
11
Website organizational structures (continues)
3. Pure hierarchical structure– Similar to business organizational chart– Information is organized in levels– Home page at Level 1 (top-level)– Main topic pages at Level 2– Additional details about main topics at remaining
levels– Advantage: site structure matches content
organization (topic oriented structure) – Disadvantage: users can get lost with too many levels
12
Website organizational structures (continues)
13
Web Site Organizational Structure (continued)
4. Mixed hierarchical structure– Combines structured organization with cross-
linked pages– Advantage: combines the features of both
hierarchical and sequential structures
– Disadvantage: users can get lost with too many levels
14
Web Site Organizational Structure (continued)
15
Website organizational structures (continues)
Site organization– Should enable visitors to find actionable content
quickly and easily– Be neither too flat nor too deep– Logical and intuitive
Avoid a structure that is either too flat or too deep– Structure that is too flat is uninteresting– Structure that is too deep is difficult to navigate
16
Website organizational structures (continues)
17
Website organizational structures (continues)
Extending this structure to add additional levels may create a too deep structure.
18
Accessibility
Web accessibility: Designing Web pages so that Web resources are available to people with disabilities
W3C guidelines for accessibility– Visual/auditory content is supported by alternative
content– Color alone should not indicate a link– Suitable contrast for background/foreground colors– Simply worded text– Navigational links are clear and consistent– Page content is consistent across all pages
19
Usability & Consistency
Web usability– Designing Web pages to help all visitors
accomplish their goals at a site quickly and easily Consistency across all pages
– All pages should have a common “look and feel”– Elements in same position– Standard color scheme
20
Browser compatibility Browser compatibility: Different browsers
might display websites slightly different Make sure pages are running the same in
different browsers such as IE, Firefox, Chrome, Safari…etc.
Page layout– Fixed-width pages fit in a maximized browser
window for a specific screen resolution– Liquid design creates pages that size with the
browser window
21
Screen resolution
Should have a mobile version of website for mobile devices
Screen resolution is the number of dots on the screen.
Popular screen resolutions include 800 x 600, 1024 x 768, and 1280 x 800
22
Color Schemes The phrase color scheme implies a certain
harmony between the colors. Given a harmonizing set of colors, a reasonably
designed layout will "come together.
In the absence of harmony, colors can clash or otherwise affect each other badly.
23
Color Schemes
Powerful communication tool Wrong colors may communicate the
wrong message Color suggests emotion and
associations Adding color changes the look of
pages without adding to file size
24
Color Schemes
Contrast
Contrast: Use dark text color on light background or the opposite.
What is wrong?
25
26
Content: Design Options– Use simple, direct language avoid industry
terminology– Use bulleted and numbered lists– Use dark text color on light background– Use a familiar font and at least a 12-point font size– Check spelling and grammar, and proofread– Less text is usually better because more content
requires more levels– More levels add to confusion and frustration for user – Reduce levels by providing hyperlinks (links)– All multimedia (graphics, animation, sound, and
video) should complement content, not be the focus
27
Make sure content always accessible Users do not read a Web page; they scan
it, looking for keywords/links First-time visitors to a Web site generally
spend less than 60 seconds on the Web page
Web site must capture visitor’s interest Text still the primary element used to
convey information; text must be readable Always test your color and background
combinations
Content: Checklist
28
Website navigational structures
Characteristics of good navigation1. Clear text labels or icons
2. Easy to use
3. Consistent across all pages
4. Aligns with the meanings of the content
5. Attractive to the users
29
Website navigational structures
Navigational elements (internal links)1. Embedded text links
2. Clickable table of contents and top-of-page links
3. Navigation bars
4. Navigation menus and tabs
5. Breadcrumb trail
6. Site map
7. Rollover links
30
Website navigational structures (continues)
1-Embedded text links– Link positioned inside a paragraph– Text in link should clearly describe what page
visitors will see• Use Zax Phones• Do not use Click here
31
Website navigational structures (continues)
2-Clickable table of contents and top-of-page links– Use to navigate between topics on a long Web
page– Allow visitors to read subtopics and return to the
top of the page without scrolling
32
Website navigational structures (continues)
33
Website navigational structures (continues)
34
Website navigational structures (continues)
3-Navigation bars– Navigation bar is a series of graphic or text-based
internal links– Often found at the top or bottom of Web page
35
Website navigational structures (continues)
36
Website navigational structures (continues)
4-Navigation menus and tabs – Navigation menu is a list of internal links– Navigation tabs are similar to file folder tabs– Both are used to conserve space on a page
37
Website navigational structures (continues)
38
Website navigational structures (continues)
5-Breadcrumb trail– Hierarchical navigational outline– Provides visitor with feedback on path taken to
current page– Use in conjunction with other navigational
elements
39
Website navigational structures (continues)
40
Website navigational structures (continues)
6-Site map– Web page that shows a summary of all the linked
pages at the site
7-Rollover links– Hidden links that appear when mouse is “rolled
over” an animated image– Avoid rollover links
41
Website navigational structures (continues)