1. CMP 868 - Creating Your Personal and Small Business Web Sites
Lesson 3
Chapter 5 - Designing Effective Navigation

2. Copyright © Carl M. Burnett
Class Outline
What is Navigation?
Laying out Your Navigation
Grouping Options
Tabbed Navigation
Dropdown Menus
Using Icons
The Role of the Homepage
You are Here
Encouraging Exploration
Adding Search
Effective Error Messages
Tips for Effective Links
4/11/2019
Copyright © Carl M. Burnett

3. Copyright © Carl M. Burnett
What is Navigation?
4/11/2019
Copyright © Carl M. Burnett

4. Laying out Your Navigation
Header
Site Logo
Utility Links
Sitewide Navigation Options
Sidebar
Local
Navigation
Page Content
Sidebar
Bonus
Navigation
Footer – Background Links And Copyright Info
4/11/2019
Copyright © Carl M. Burnett

5. Copyright © Carl M. Burnett
Grouping Options
Before
Books
CD’s
Posters
Wallpapers
MP3’s
Who We Are
Visiting Us
Contact Us
After
Shop
Books
CD’s
Posters
Free Downloads
Wallpapers
MP3’s
About Us
Who We Are
Visiting Us
Contact US
4/11/2019
Copyright © Carl M. Burnett

6. Copyright © Carl M. Burnett
Tabbed Navigation
4/11/2019
Copyright © Carl M. Burnett

7. Copyright © Carl M. Burnett
Dropdown Menus
4/11/2019
Copyright © Carl M. Burnett

8. Copyright © Carl M. Burnett
Using Icons
4/11/2019
Copyright © Carl M. Burnett

9. The Role of the Homepage
Clear Statement about Site
Clear Navigation
Prominent Search Box
Standard Navigation Bar
4/11/2019
Copyright © Carl M. Burnett

10. Copyright © Carl M. Burnett
You are Here
Give Each Page a Title
Change Color of Visited Links
Change Navigation Bar
Use Breadcrumbs
Create a Process Map
4/11/2019
Copyright © Carl M. Burnett

11. Encouraging Exploration
4/11/2019
Copyright © Carl M. Burnett

12. Copyright © Carl M. Burnett
Adding Search
4/11/2019
Copyright © Carl M. Burnett

13. Effective Error Messages
4/11/2019
Copyright © Carl M. Burnett

14. Tips for Effective Links
Be Consistent
Avoid Quirky Names
Keep Link Text Short
Links Make Sense
Do Not Share Links
Link Text Descriptive
Don't tell where to click
Don't Draw Attention
Link At a Glance
Use Plain HTML
Warn if Link is to Doc
Address Link
Never Open a New Page
Only Hover Links
4/11/2019
Copyright © Carl M. Burnett

15. Copyright © Carl M. Burnett
Class Review
What is Navigation?
Laying out Your Navigation
Grouping Options
Tabbed Navigation
Dropdown Menus
Using Icons
The Role of the Homepage
You are Here
Encouraging Exploration
Adding Search
Effective Error Messages
Tips for Effective Links
Next – CSS - Adding Style to Your Pages
4/11/2019
Copyright © Carl M. Burnett