HFWEB June 3, 1999 AMS Center for Advanced Technologies 1 Web Navigation Eugene Tiller & Phillip Green AMS Center for Advanced Technologies.

Slides:



Advertisements
Similar presentations
Web Usability Starring the Webcredibles: Link, Dr. Web Credible, & Wendy Warner.
Advertisements

YOUR WEB SITE REVISITED Appearance, Organization, Tone.
Good Vs. Bad UI & Oakley Airwave 1.5 Sean Gergen & Derik Wright.
Chapter 3 – Web Design Tables & Page Layout
Reviewed by: Mandy Parsons.  High quality content  Easy navigation  Planning, selecting, organizing, writing, illustrating, reviewing, and testing.
CSE2MA Multimedia Authoring Semester 2, 2011 Web Page Design Week 2.
Chapter 19 Design Model for WebApps
Basic Principles of Web Page Design CSCI 150, CSCI 155, CSCI , MSTI 131 and MSTI 260 Developed by BNapoli.
6 Developing Content and Layout Section 6.1 Generate and organize content ideas Write and organize Web text Section 6.2 Identify page dimension guidelines.
LAYOUT OF PAGE ELEMENTS September 28 th, PATTERNS Common ways to use the Layout Elements of Visual Hierarchy, Visual Flow, Grouping and Alignment,
Mgt 240 Lecture Web Site Design Principles April 5, 2005.
Design Elements of a Web Page. Focal Point Each page should have a focal point to attract the viewer. This can be one large picture or a headline, a combination.
Web Usability By Chao Liang Based on Jakob Nielsen’s Book “ Designing Web Usability”
Good Websites. 2. Submit one good web interface. This website is a good because of it usability and appears of the website.
AdvWeb-1/20 DePaul University SNL 262 Web Page Design Design Information Instructor: David A. Lash.
Chapter 2 Web Site Design Principles Principles of Web Design, Third Edition.
Chapter 2 Web Site Design Principles Principles of Web Design, 4 th Edition.
User Centered Web Site Engineering Part 2. Developing Site Structure & Content Content View Addressing content Outlining content Creating a content delivery.
Expression Web 2 Concepts and Techniques Expression Web Design Feature Web Design Basics.
Color Theory in Web Design Web Design – Sec 2-2. Objectives  The student will: –Have a better understanding of effective use of color on the web. –Be.
Dawn Pedersen. Web Interfaces Web interfaces allow a user to interact with a website. The simplest web interfaces provide information and allow the user.
Website evaluation models and acceptability factors K.Vipartienė, E. Valavičius.
Copyright © Texas Education Agency, All rights reserved. 1 Web Technologies Website Development with Dreamweaver.
Successful Website Layout EWD Chapter 2. Defining Client’s Needs Many clients don’t know exactly what they want What they ask for may not be what’s needed.
Chapter 18 Web Design April 16 th & 17 th. Content The most essential element of any Web page is the content Before you begin a Web page you want to know.
Web Technologies Website Development Trade & Industrial Education
Creating an Attractive Site How will your site look. Think about what your customers are seeking and what type of Web site they find attractive.
Web-designWeb-design. Web design What is it? Web-design features Before…
Chapter 2 Web Site Design Principles
The Internet Writer’s Handbook 2/e Web Page Design Writing for the Web.
Web Site Design Principles
Developing Content and Layout Lesson 6. Creating Web Site Content Online users scan a page, read key words of text, and check out graphics Reading from.
Website Development with Dreamweaver
Designing a site (2/4) Conceptual Design – 1h. Lazar’s Development Lifecycle Define the mission & target users Collect user requirements Create and Modify.
An Introduction To Websites With a little of help from “WebPages That Suck.
Web Site Usability: Chapter 3 Billboard Design Summary Notes on Steve Krug Don’t Make Me Think New Riders, 2 nd Edition Ben Hunt Web 2.0 How to Design.
Dr. Andrew P. Ciganek WebsiteNightmares. Why Examine User Interface? Developers often lack user interface expertise –Many “mistakes” are quite common.
Web Design Guidelines by Scott Grissom1 A Quick Introduction to Web Design Scott Grissom Associate Professor Computer Science & Info Systems
Chapter 2 Web Site Design Principles Principles of Web Design, Third Edition.
Web Site Design 15 Easy Steps to an Excellent Web Site.
Web Design Guidelines by Scott Grissom 1 Designing for the Web  Web site design  Web page design  Web usability  Web site design  Web page design.
Innovation AMS Center for Advanced Technologies Web Navigation Eugene Tiller & Phillip Green AMS Center for Advanced Technologies.
Computer Science 101 Lists and Tables. Lists Unordered lists - use a bullet Ordered lists - use a number, Roman numeral, or letter.
Development and Design of Multimedia. Planning Your Title 1)Develop the concept or idea – a multimedia project starts with an idea that supports a vision.
Color Theory in Web Design Web Design – Sec 2-2. Objectives  The student will: –Have a better understanding of effective use of color on the web. –Be.
By: Caitlin McCullough, Kaitlyn Kauffman, and Alexis Bergquist.
Microsoft Expression Web 3 Expression Web Design Feature Web Design Basics.
Web Site Development - Process of planning and creating a website.
Informational Design.  Informational Design involves determining a Web page’s content  Content – text and graphics  A successful Web page uses words.
Blue Elephant Tony DiCola Mauktik Gandhi Jeff Mathew Tim McConnell Todd Sahl Eugene Talagrand.
Usability Olaa Motwalli CIS764, DR Bill – KSU. Overview Usability factors. Usability guidelines.  Software application.  Website. Common mistakes. Good.
Web Interface Design Basic GUI and Web layouts Fig H.12: Basic Layouts of Web and Graphic User Interfaces.
Tables: Basic Elements Header 1Header 2Header 3 Row 1, Column 1Row 1, Column 2Row 1, Column 3 Row 2, Column 1Row 2, Column 2Row 2, Column 3 Row 3, Column.
Introduction to Programming the WWW I CMSC Winter 2003 Lecture 5.
What makes a Good Website?. Examples of Bad Websites For more really.
DMT612 Professional Preparation EFFECTIVE WEB DESIGN.
Copyright © Terry Felke-Morris Web Development & Design Foundations with HTML5 8 th Edition CHAPTER 5 KEY CONCEPTS 1 Copyright ©
CIS101 Introduction to Computing Week 07 Spring 2004.
Chapter 2 Web Site Design Principles
Managing the content of web pages
Color Theory in Web Design
Web Design Principles.
Web-design.
Designing a site (2/4) Conceptual Design – 1h
Chapter 17 Designing for the web
Fixed Positioning.
Good and Bad Design Mandy Smetana.
CIS 376 Bruce R. Maxim UM-Dearborn
Chapter 2 Web Site Design Principles
Web Design Principles.
Presentation transcript:

HFWEB June 3, 1999 AMS Center for Advanced Technologies 1 Web Navigation Eugene Tiller & Phillip Green AMS Center for Advanced Technologies

HFWEB June 3, 1999 AMS Center for Advanced Technologies 2 Web Navigation Lay the Groundwork n Identify the goals of the Web site n Identify the target user population

HFWEB June 3, 1999 AMS Center for Advanced Technologies 3 Web Navigation Web User Interfaces n Users, Goals & Tasks

HFWEB June 3, 1999 AMS Center for Advanced Technologies 4 Web Navigation All Users Want n Easy, quick navigation n Fast page downloads n Satisfaction

HFWEB June 3, 1999 AMS Center for Advanced Technologies 5 Web Navigation The User Experience n Information complexity

HFWEB June 3, 1999 AMS Center for Advanced Technologies 6 Web Navigation Corner Stones of Web Navigation n 1. Site structure n 2. Page navigation n 3. Links and information

HFWEB June 3, 1999 AMS Center for Advanced Technologies 7 Web Navigation Site Structure n High-level n Tree-top view

HFWEB June 3, 1999 AMS Center for Advanced Technologies 8 Web Navigation Site Structure n Break a large site into mini-sites (CNET) News.comBuilder.comShareware.com

HFWEB June 3, 1999 AMS Center for Advanced Technologies 9 Web Navigation Site Structure n Fewer vertical levels are better n Two or three levels are best n A one page Web site is ideal n “Shallow pond”

HFWEB June 3, 1999 AMS Center for Advanced Technologies 1010 Web Navigation Site Structure n Storyboards help us think clearly n Storyboards help us convey our concepts clearly to others

HFWEB June 3, 1999 AMS Center for Advanced Technologies 1 Web Navigation Site Structure n Think simplicity n Combine rather than differentiate

HFWEB June 3, 1999 AMS Center for Advanced Technologies 1212 Web Navigation Page Navigation n Casual visitors won’t memorize your navigation n Visitors are looking for the right information hooks

HFWEB June 3, 1999 AMS Center for Advanced Technologies 1313 Web Navigation Page Navigation n Visitors don’t read, they scan for a path to their goals. –Books –Fiction –Science Fiction –Arthur C. Clark –2001 A Space Odyssey

HFWEB June 3, 1999 AMS Center for Advanced Technologies 1414 Web Navigation Page Navigation n Vertical vs. horizontal navigation arguments don’t matter

HFWEB June 3, 1999 AMS Center for Advanced Technologies 1515 Web Navigation Page Navigation n More scrolling is better than more pages

HFWEB June 3, 1999 AMS Center for Advanced Technologies 1616 Web Navigation Page Navigation n Use “within-a-page” anchors

HFWEB June 3, 1999 AMS Center for Advanced Technologies 1717 Web Navigation Page Navigation n Use the Ferris wheel metaphor

HFWEB June 3, 1999 AMS Center for Advanced Technologies 1818 Web Navigation Questions for Every Page n Who owns this page?” n Where am I? n How did I get here? How do I get back?

HFWEB June 3, 1999 AMS Center for Advanced Technologies 1919 Web Navigation Links & Information n Push content (data) to the top of a Web site

HFWEB June 3, 1999 AMS Center for Advanced Technologies 2020 Web Navigation Links & Information n Push pivotal content to the top of each page

HFWEB June 3, 1999 AMS Center for Advanced Technologies 2121 Web Navigation Links & Information n Edit and edit again n Find a good writer and editor

HFWEB June 3, 1999 AMS Center for Advanced Technologies 2 Web Navigation Links & Information n White space = good (marketing sites) n White space = bad (information sites)

HFWEB June 3, 1999 AMS Center for Advanced Technologies 2323 Web Navigation Links & Information n Follow page size guidelines n The 10 second principle

HFWEB June 3, 1999 AMS Center for Advanced Technologies 2424 Web Navigation Links & Information n Columns keep text lines short

HFWEB June 3, 1999 AMS Center for Advanced Technologies 2525 Web Navigation Links & Information n Cell coloring “chunks” information

HFWEB June 3, 1999 AMS Center for Advanced Technologies 2626 Web Navigation Links & Information n Good color usage speeds navigation

HFWEB June 3, 1999 AMS Center for Advanced Technologies 2727 Web Navigation Links & Information n High content density is good

HFWEB June 3, 1999 AMS Center for Advanced Technologies 2828 Web Navigation Links & Information n Content links vs. category links

HFWEB June 3, 1999 AMS Center for Advanced Technologies 2929 Web Navigation Links & Information n Use 7-12 words in a content link

HFWEB June 3, 1999 AMS Center for Advanced Technologies 3030 Web Navigation Links & Information n Information can be defined in many ways n Use redundant links

HFWEB June 3, 1999 AMS Center for Advanced Technologies 3131 Web Navigation Questions?