Innovation AMS Center for Advanced Technologies 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

Good Vs. Bad UI & Oakley Airwave 1.5 Sean Gergen & Derik Wright.
Chapter 3 – Web Design Tables & Page Layout
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.
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.
Website: Best Practices. Sources: The World Wide Web Consortium the main international standards organization for the World Wide Web Research-Based Web.
Chapter 2 Web Site Design Principles Principles of Web Design, 4 th Edition.
Visual Design for the Web. Keep the end in mind What is the purpose of the webpage?
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.
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
Web-designWeb-design. Web design What is it? Web-design features Before…
Chapter 2 Web Site Design Principles
Web Site Design Principles
Human Factors in Web Design Mohsen Asgari. Contents WWW & Human Factors Relationship Human and Computer Interaction HCI & WWW Information Presentation.
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
An Introduction To Websites With a little of help from “WebPages That Suck.
1 Usability Design. 2 Designing for Usability What are the things users will want to do with your site –This is not what you want users to do with your.
Website Development Instructor: Brad Atkinson. Planning Save valuable time Create mock-up drawing Provide useful content.
Web site development: Basics & MS FrontPage. What I hope to demonstrate n n Basics of a good web site n n How to most effectively communicate via the.
Usability Testing & Web Design by Alex Andujar. What is Usability? Usability measures the quality of a user's experience when interacting with a Web site,
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.
4 Simple Web Design Rules. Your Web Site Should Be Easy To Read  Choose your text and background colors very carefully  Don't use backgrounds that obscure.
Effective Web Writing April Overview - Why Content Matters - Reading Online vs Print - Best Practices with Web Writing - Content Plan/Schedule.
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 Design Guidelines by Scott Grissom 1 Designing for the Web  Web site design  Web page design  Web usability  Web site design  Web page design.
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.
Principles of effective web design NOTES Flo Morris-Duffin.
By: Caitlin McCullough, Kaitlyn Kauffman, and Alexis Bergquist.
General “Search” or “Find” vs “Manage” “Edit” has no second level tab. is always under the “Create” tab “Create” or “Add” – need consistency Clickable.
Microsoft Expression Web 3 Expression Web Design Feature Web Design Basics.
Web Site Development - Process of planning and creating a website.
Graphics Navigation Usability Typography Content Clarity & Consistency.
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.
Web Design, 5 th Edition 3 Planning a Successful Website: Part 1.
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.
HFWEB June 3, 1999 AMS Center for Advanced Technologies 1 Web Navigation Eugene Tiller & Phillip Green AMS Center for Advanced Technologies.
1 CSE 403 Web Patterns and Design These lecture slides are copyright (C) Marty Stepp, 2007, with significant content taken from slides written by Valentin.
Introduction to Programming the WWW I CMSC Winter 2003 Lecture 5.
DMT612 Professional Preparation EFFECTIVE WEB DESIGN.
Chapter 2 Web Site Design Principles
Section 6.1 Section 6.2 Write Web text Use a mission statement
Managing the content of web pages
Color Theory in Web Design
Web Site Design Plan Checklist
Web-design.
Fixed Positioning.
Good and Bad Design Mandy Smetana.
Basic Web site Design PMEHS Web Design Dr. Kerby.
For use on your feedback page
CIS 376 Bruce R. Maxim UM-Dearborn
Elements of Effective Web Design
Chapter 2 Web Site Design Principles
Presentation transcript:

innovation AMS Center for Advanced Technologies Web Navigation Eugene Tiller & Phillip Green AMS Center for Advanced Technologies

innovation AMS Center for Advanced Technologies 2 Web User Interfaces People + goals = success

innovation AMS Center for Advanced Technologies 3 The User Experience Information complexity

innovation AMS Center for Advanced Technologies 4 Web Users Want Fast page downloads Time in seconds

innovation AMS Center for Advanced Technologies 5 Web Users Want Easy, quick navigation

innovation AMS Center for Advanced Technologies 6 Web Users Want Satisfying, usable Web sites

innovation AMS Center for Advanced Technologies 7 Web Navigation 3 areas of study for Web navigation

innovation AMS Center for Advanced Technologies 8 3 Areas of Study 1. Site structure 2. Page navigation 3. Links and information

innovation AMS Center for Advanced Technologies 9 Site Structure High-level Tree-top view

innovation AMS Center for Advanced Technologies 10 Site Structure Break a large site into mini-sites (CNET) News.comBuilder.comShareware.com

innovation AMS Center for Advanced Technologies 11 Site Structure Fewer vertical levels are better

innovation AMS Center for Advanced Technologies 12 Site Structure Storyboards help us think clearly

innovation AMS Center for Advanced Technologies 13 Site Structure Think simplicity Combine rather than differentiate

innovation AMS Center for Advanced Technologies 14 Page Navigation Most visitors won’t memorize your navigation

innovation AMS Center for Advanced Technologies 15 Page Navigation Visitors don’t read, they scan for buzzwords

innovation AMS Center for Advanced Technologies 16 Page Navigation Vertical vs. horizontal navigation arguments don’t matter

innovation AMS Center for Advanced Technologies 17 Page Navigation More scrolling is better than more pages

innovation AMS Center for Advanced Technologies 18 Page Navigation Use “within-a-page” anchors

innovation AMS Center for Advanced Technologies 19 Page Navigation Ask “who am I?” on every page

innovation AMS Center for Advanced Technologies 20 Links & Information Push content (data) to the top of a Web site

innovation AMS Center for Advanced Technologies 21 Links & Information Push pivotal content to the top of each page

innovation AMS Center for Advanced Technologies 22 Links & Information Edit and edit again

innovation AMS Center for Advanced Technologies 23 Links & Information White space = good (marketing sites) White space = bad (information sites)

innovation AMS Center for Advanced Technologies 24 Links & Information Follow page size guidelines

innovation AMS Center for Advanced Technologies 25 Links & Information Columns keep text lines short

innovation AMS Center for Advanced Technologies 26 Links & Information Cell coloring “chunks” information

innovation AMS Center for Advanced Technologies 27 Links & Information Good color usage speeds navigation

innovation AMS Center for Advanced Technologies 28 Links & Information High content density is good

innovation AMS Center for Advanced Technologies 29 Links & Information Content links vs. category links

innovation AMS Center for Advanced Technologies 30 Links & Information Use 7-12 words in a content link

innovation AMS Center for Advanced Technologies 31 Links & Information Information can be defined in many ways Use redundant links

innovation AMS Center for Advanced Technologies Questions?