Web Site Navigation

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.

Planning the InterfaceEffective interfaces generate:Logical environmentsNo confusion

Note: View your work in different Browsers to see how they are interpreted.

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.

Ease of UseThe Key to effective navigation: IntuitiveEasy to use

Ease of UseWhen designing the navigation system it is important to

think like someone… “seeing the site for the first time.”

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.

ClarityThe website should give an “impression of clarity” and

should be easy to use. It should be easily readable, clear and “easy to

understand.”

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

11 August 27, 2010

12 August 27, 2010

13 August 27, 2010

14 August 27, 2010

More Detailed Options

15 August 27, 2010

Consistency AlwaysIntroduce the user to a navigation system up front.

However users will expect it to apply throughout the whole site, without exception.

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?

Where To Put It: Bottom

18 August 27, 2010

Where To Put It: Top

19 August 27, 2010

Where To Put It: Left Side

20 August 27, 2010

Where To Put It: Right Side

21 August 27, 2010

22 August 27, 2010

23 August 27, 2010

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.”

Graphic / Text NavigationText navigation should be used in addition to any graphical

navigation.Images alone may not convey immediate meaning to all

users.

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.

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.

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.

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.

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.

Navigation StyleThere are many styles of navigation:

Buttons and Text Links come to mind.

Navigation Bars, (usually a group of buttons together).

Animated GraphicsBIG RULE: If you must use them please have only one per page!

Thoughts on Navigation StyleIf you have a long scrolling page, provide a navigation

system at both the Top and Bottom of the page.

Text Links Top and Bottom

35 August 27, 2010

Text Links Top and Bottom

36 August 27, 2010

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.

Text Links for Image Maps

38 August 27, 2010

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.

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.

Repetition is ImportantAdd a comfort level of familiarity and orientation to your

page by keeping the navigation system consistent throughout the web site.

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.

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.

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.

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.

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

The Site Decides StyleWhat’s the overall theme?

Sites about autos could have images related to autos. This one uses a gear shift pattern.

The Site Decides StyleWhat’s the overall theme?

This site is about Sound Engineering.

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.

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

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.

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.

Could your site benefit from a Search tool?

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.

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.

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.

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.

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.

Web Site Navigation

Documents

Transcript of Web Site Navigation

How to design decent site navigation

“Profile-Based Summarisation for Web Site Navigation”lac-essex.wdfiles.com/local--files/lac-meetings-2014-15/... · 2014-12-09 · “Profile-Based Summarisation for Web Site

Faceted Metadata for Site Navigation and Search

Increasing usability in site search & category navigation

Navigation System* - Honda Owners Site

How to Optimize eCommerce Site Navigation Menus

OUCampus 201 Site Navigation and Architecture. 2 Class Topics What is navigation? Vocabulary Template navigation overview How to customize site.

Lesson_15 Site Navigation

ASP.NET 07 - Site Navigation

Web Navigation

Army Readiness Assessment Program (ARAP) Navigation … · Army Readiness Assessment Program (ARAP) Navigation Explanation ARAP Main web site 1- Summary Graph 2 - Composite Categories

Magruder Proficiency Program Web Site Navigation for Data Entry ...

Hearst Faceted Metadata for Site Navigation and Search

USAC/Schools and Library Web Site Tour. Web Site Tour – Morning Edition… Navigation on the site – Instructions – Forms – Reference Area – Tools Later.

Model-Based Clustering and Visualization of Navigation Patterns on a Web Site

Virto JQuery Tab Navigation - Installation and User Guide · Virto JQuery Tab Navigation is a special web part for quick and easy grouping of web parts placed on a SharePoint site

Site Navigation Dock Red Hydrocarbon26c4ed2a7960c65b23ae-b9bb2f39455763193c3c41a034df672e.r90...Red Hydrocarbon Site Navigation Dock © Dr Rex Gaisford CBE, Red Hydrocarbon NFP 0.00

SPCA2013 - Navigation in a Multi Site Collection Environment

The Internet in Education Objectives Introduction Overview –The World Wide Web –Web Page v. Web Site v. Portal Unique and Compelling Characteristics Navigation.

Web Site Navigation. Slide 2 Web Site Navigation We use various navigational systems in our everyday lives Maps Street signs A Compass.