CIS67 Foundations for Creating Web Pages Professor Al Fichera Web Site Navigation Rev. August 27, 2010
Feb 24, 2016
C I S 6 7Fo u nd ati o n s fo r C re ati n g We b Pa ge s
Professor Al Fichera
Web Site Navigation
Rev. August 27, 2010
Web Site Navigation by Professor Al Fichera profal2.com August 27, 20102
Planning the Interface“Interface” refers to how the: Pages look Pages work Pages Interact with the viewer.
Web Site Navigation by Professor Al Fichera profal2.com August 27, 20103
Planning the InterfaceEffective interfaces generate:Logical environmentsNo confusion
Note: View your work in different Browsers to see how they are interpreted.
Web Site Navigation by Professor Al Fichera profal2.com August 27, 20104
Start With a Simple PlanGood web site design begins with a good web site plan.
(Simple is best!)List the information to be included in the site.Each main item will probably be on a separate page.
Web Site Navigation by Professor Al Fichera profal2.com August 27, 20105
Ease of UseThe Key to effective navigation: IntuitiveEasy to use
Web Site Navigation by Professor Al Fichera profal2.com August 27, 20106
Ease of UseWhen designing the navigation system it is important to
think like someone… “seeing the site for the first time.”
Web Site Navigation by Professor Al Fichera profal2.com August 27, 20107
Ease of UseA navigation system’s “goal”...Provide Direct Access to the various content or parts of
the site. Users need to make an “informed decision” on whether or
not to take a certain path.
Web Site Navigation by Professor Al Fichera profal2.com August 27, 20108
ClarityThe website should give an “impression of clarity” and
should be easy to use. It should be easily readable, clear and “easy to
understand.”
Web Site Navigation by Professor Al Fichera profal2.com August 27, 20109
ClarityIt is important that the site is “not too cluttered” with text
and images. Images used should be simple and “convey immediate
meaning.”Let's look at a few examples…
Web Site Navigation by Professor Al Fichera profal2.com
Navigation by Sub-Categories
10 August 27, 2010
Web Site Navigation by Professor Al Fichera profal2.com
Navigation by Sub-Categories
11 August 27, 2010
Web Site Navigation by Professor Al Fichera profal2.com
Navigation by Sub-Categories
12 August 27, 2010
Web Site Navigation by Professor Al Fichera profal2.com
Navigation by Sub-Categories
13 August 27, 2010
Web Site Navigation by Professor Al Fichera profal2.com
Navigation by Sub-Categories
14 August 27, 2010
Web Site Navigation by Professor Al Fichera profal2.com
More Detailed Options
15 August 27, 2010
Web Site Navigation by Professor Al Fichera profal2.com August 27, 201016
Consistency AlwaysIntroduce the user to a navigation system up front.
However users will expect it to apply throughout the whole site, without exception.
Web Site Navigation by Professor Al Fichera profal2.com August 27, 201017
Consistent Navigation StyleA navigation “menu bar” could be used throughout the
site. Have consistent text or button links on each page. Where should the links be placed?
Web Site Navigation by Professor Al Fichera profal2.com
Where To Put It: Bottom
18 August 27, 2010
Web Site Navigation by Professor Al Fichera profal2.com
Where To Put It: Top
19 August 27, 2010
Web Site Navigation by Professor Al Fichera profal2.com
Where To Put It: Left Side
20 August 27, 2010
Web Site Navigation by Professor Al Fichera profal2.com
Where To Put It: Right Side
21 August 27, 2010
Web Site Navigation by Professor Al Fichera profal2.com
Where To Put It: Right Side
22 August 27, 2010
Web Site Navigation by Professor Al Fichera profal2.com
Where To Put It: Right Side
23 August 27, 2010
Web Site Navigation by Professor Al Fichera profal2.com August 27, 201024
Internal LinksAllow users to move through the site not only through
text or graphical navigation system but also “through the content.”
Users can follow the “natural progression of the content.”
Web Site Navigation by Professor Al Fichera profal2.com August 27, 201025
Graphic / Text NavigationText navigation should be used in addition to any graphical
navigation.Images alone may not convey immediate meaning to all
users.
Web Site Navigation by Professor Al Fichera profal2.com August 27, 201026
Help With a StoryboardSketch a rough layout of your plan on paper first.Use simple boxes or “sticky-notes,” to layout the content.Keep your vision of the site organized, and focused at all
times.
Web Site Navigation by Professor Al Fichera profal2.com August 27, 201027
Horizontal FormatKeep in mind that browser windows are more
“Landscape” than “Portrait”.Designing for the Web page is a bit different than for the
Word Processor, such as MS WORD.
Web Site Navigation by Professor Al Fichera profal2.com August 27, 201028
Design for Small Screens FirstLocate Important Navigation Items in the “visible portion”
of the screen.Design for “all the viewers” of your pages, not for those
with the largest screens, or most powerful processors.Rarely will anyone see your elegantly tall, and narrow Web
pages all at once, they’ll see small chunks at a time.
Web Site Navigation by Professor Al Fichera profal2.com August 27, 201029
Navigation DesignYou should be able to navigate back to the home page
without difficulty. If not, it is poorly designed.The focus of good navigation design is “organization,” not
just graphics.
Web Site Navigation by Professor Al Fichera profal2.com August 27, 201030
Navigation DesignYour primary goal is to “make it easy” for visitors to find
their way to and from any part of the site you design.If you need instructions on how to navigate the site, you
probably have it too difficult for most people.
Web Site Navigation by Professor Al Fichera profal2.com August 27, 201031
Navigation StyleThere are many styles of navigation:
Buttons and Text Links come to mind.
Web Site Navigation by Professor Al Fichera profal2.com August 27, 201032
Navigation StyleThere are many styles of navigation:
Navigation Bars, (usually a group of buttons together).
Web Site Navigation by Professor Al Fichera profal2.com August 27, 201033
Navigation StyleThere are many styles of navigation:
Animated GraphicsBIG RULE: If you must use them please have only one per page!
Web Site Navigation by Professor Al Fichera profal2.com August 27, 201034
Thoughts on Navigation StyleIf you have a long scrolling page, provide a navigation
system at both the Top and Bottom of the page.
Web Site Navigation by Professor Al Fichera profal2.com
Text Links Top and Bottom
35 August 27, 2010
Web Site Navigation by Professor Al Fichera profal2.com
Text Links Top and Bottom
36 August 27, 2010
Web Site Navigation by Professor Al Fichera profal2.com August 27, 201037
Thoughts on Navigation Style If you use graphic images for links, provide Text Links as
well. Use ALT tags with the images and perhaps a small text link
bar below for those who might not be able to see the images.
Web Site Navigation by Professor Al Fichera profal2.com
Text Links for Image Maps
38 August 27, 2010
Web Site Navigation by Professor Al Fichera profal2.com August 27, 201039
Navigation With FramesConsider the proper use of “Frames” as a navigational
tool.A small frame at the top of the page holding link
information can be of great use.However, the thinking has changed quite a bit about framesets,
especially those which are not user accessible.
Web Site Navigation by Professor Al Fichera profal2.com August 27, 201040
Navigation With FramesPlease be aware of how to use frames properly and have a
good idea of what type of pages work well with frames, and of those that do not!Frameset Navigation will be covered in another lecture.
Web Site Navigation by Professor Al Fichera profal2.com August 27, 201041
Repetition is ImportantAdd a comfort level of familiarity and orientation to your
page by keeping the navigation system consistent throughout the web site.
Web Site Navigation by Professor Al Fichera profal2.com August 27, 201042
So Where are You Now?A good navigation system gives the visitor a clue as to
what page they are currently on in the link system.
Web Site Navigation by Professor Al Fichera profal2.com August 27, 201043
So Where are You Now?Try unlinking the text, and change its color so the viewer
knows this was the link for the current page.
Web Site Navigation by Professor Al Fichera profal2.com August 27, 201044
So Where are You Now?If you are using graphic links, try fading the color of the
icon so it appears different than the other hot links.Notice the faded link for cars, it’s the page I was on when I took
the screen shot.
Web Site Navigation by Professor Al Fichera profal2.com August 27, 201045
More Than One WayDepending upon the site, a client may want links to the
newest information or products on the home page.A special link can be created that has material unique for
the moment, but the more traditional links repeat themselves throughout the site.
Web Site Navigation by Professor Al Fichera profal2.com August 27, 201046
The Site Decides StyleAfter all the information is known…A Storyboard has been created…Decide upon the Graphic Images to be used to suit the
site.
Web Site Navigation by Professor Al Fichera profal2.com August 27, 201047
The Site Decides StyleWhat’s the overall theme?
Sites about autos could have images related to autos. This one uses a gear shift pattern.
Web Site Navigation by Professor Al Fichera profal2.com August 27, 201048
The Site Decides StyleWhat’s the overall theme?
This site is about Sound Engineering.
Web Site Navigation by Professor Al Fichera profal2.com August 27, 201049
Index, Sitemap, or SearchIs the site large enough to sport an Index?
Works very well on the Internet; can be a simple alphabetical listing of key words that link to appropriate pages in the site.
Web Site Navigation by Professor Al Fichera profal2.com August 27, 201050
Here is a well thought out Site Index from Adobe.comNote: This screen shot was taken long ago, do not expect to be
able to see this page any longer.
Index, Sitemap, or Search
Web Site Navigation by Professor Al Fichera profal2.com August 27, 201051
Another good idea, a Site Map.Usually a graphic representation of the site, a diagram
that shows the site organization and the structure of the page links.
This graphic image is usually an image map with hot spots that link to the appropriate pages.
Index, Sitemap, or Search
Web Site Navigation by Professor Al Fichera profal2.com August 27, 201052
Here is a well thought out Sitemap from Adobe.com Note: This screen shot was taken long ago, do not expect to be able to
see this page any longer.
Index, Sitemap, or Search
Web Site Navigation by Professor Al Fichera profal2.com August 27, 201053
Could your site benefit from a Search tool?
Index, Sitemap, or Search
Web Site Navigation by Professor Al Fichera profal2.com August 27, 201054
Internal Search EnginesAn Internal Search Engine provides users with a means of
finding what they want on the website quickly and efficiently.
This is especially important for large sites with a lot of content.
Web Site Navigation by Professor Al Fichera profal2.com August 27, 201055
Selective LinkingUse “good judgment and restraint” when you start linking
to other pages.Too many links in the body copy can make the reader feel
anxious, afraid they’re missing something if they don’t follow the links right away.
Make a link worth jumping to, don’t link to pages that are going to be a waste of time for your viewer.
Web Site Navigation by Professor Al Fichera profal2.com August 27, 201056
Learn From OthersStudying the work of other designers broadens your view
of how to approach design problems.It may start you thinking in a new direction if you’re stuck
for ideas.
Web Site Navigation by Professor Al Fichera profal2.com August 27, 201057
Learn From OthersLook at pages dealing with the same subject you wish to
pursue, what makes them good, or interesting?Don’t just say, “I don’t like it.” Be very specific about what
you like and don’t like about the page or site.
Web Site Navigation by Professor Al Fichera profal2.com August 27, 201058
What You Got From the LectureI hope you were able to gain a little more insight into what
good Web page designers might be thinking about when they create their navigation systems.
Perhaps now with this information at your disposal, you too can come up with some very interesting methods to navigate your Web pages.