Navigation CS 4640 Programming Languages for Web Applications

Slides:



Advertisements
Similar presentations
Mistakes in Web Design. Top 10 Mistakes in Web Design 10. Long download times 9. Outdated info 8. Link colors & consistency 7. Lack of navigation support.
Advertisements

Page Design Scroll zone Data Tables Screen Readers
KompoZer. This is what KompoZer will look like with a blank document open. As you can see, there are a lot of icons for beginning users. But don't be.
PHP Meetup - SEO 2/12/2009. Where to Focus? Ensuring the findability of content Ensuring content is well understood by search engines Maximizing the importance.
How to Create Top Ranking Searchable and Accessible Documents Chris Pollett and Elizabeth Tu April, 2010.
1.Learning the Terms Learning the TermsLearning the Terms 2.Accessing the Internet from a PC Accessing the Internet from a PCAccessing the Internet from.
Nick Donnarumma. We are either very lazy or very efficient because we tend not to read pages. We scan them instead to save time. We don’t figure out how.
November 3, 2011 Deborah de Bruin Building Digital Libraries.
Web Design, 3 rd Edition 4 Planning a Successful Web Site: Part 2.
Web Design, 4 th Edition 4 Planning a Successful Web Site: Part 2.
Links in HTML. Hyperlinks or links Millions of linked web pages make up the World Wide Web Used to connect a web page to another web page on the same.
NAVIL GONZALEZ ANDREA CANTU MAGALY LUNA Heuristic Evaluation.
How to use the internet The internet is a wide ranging network that thousands of people use everyday. It is a useful tool in modern society that once one.
Lecture 3 Web Design What makes a "good" website? Getting started on your website. Planning the layout. Picking a theme. Effective Design Tips.
USABILITY An Introduction. Usability “..usability really just means making sure that something works well: that a person of average (or even below average)
Review Paul Ammann SWE 432 Design and Implementation of Software for the Web.
Chapter 6: NavigationCopyright © 2004 by Prentice Hall 6. Navigation Design Site-level navigation: making it easy for the user to get around the site Page-level.
Prioritizing Web Usability Nielsen and Loranger Chapter 6: Navigation and Information Architecture Paul Ammann SWE 432 Design.
USING WORDPRESS TO CREATE A WEBSITE (RATHER THAN A BLOG) STEP-BY-STEP INSTRUCTIONS.
Zipcar ( BK FarmyardsZipcar URL S: The URL is clear, logical and intuitive to Brooklyn Farmyards O: Not all users are familiar with.
Zipcar ( Zipcar ( BK FarmyardsZipcar URL S: The URL is clear, logical and intuitive because it.
Urban Farming ( Urban Farming ( BK FarmyardsUrban Farming URL S: The.
Next Door Organics ( LIS : Personas and Scenarios: Meghan Constantinou, Barbara Douglass, Susan.
MIMOS Berhad. All Rights Reserved. Nazarudin Wijee Mohd Sidek Salleh Grid Computing Lab MIMOS Berhad P-GRADE Portal Heuristic Evaluation.
The Internet and World Wide Web Sullivan University Library.
Do This file can be found at
HTML Comprehensive Concepts and Techniques Second Edition Project 2 Creating a Web Site with Links.
Web Page Design The Key to a Successful Web Page by Judy Bogdanets.
Web page design. Web Site Design Principles Design for the Medium What is meant by Hyper Media? Hypertext links.
Next Door Organics ( Next Door Organics ( LIS :
Microsoft FrontPage 2003 Illustrated Complete Creating a Frames Page.
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.
Zipcar ( BK FarmyardsZipcar URL S: The URL is clear, logical and intuitive because it is the same as the organization’s (BK Farmyards)
“Top Ten Guidelines for Homepage Usability” Article Author: Jakob Nielsen Presenter: Amish Patel Date of Presentation Sept. 16, 2008.
Upsorn Praphamontripong CS Design and Implementation of Software for the Web Fall 2016 Navigation and Information Architecture (Ch. 6)
The Internet.
Computing and Information Technology Building a Web Browser
Getting an account with WordPress.com
Online PD Basic HTML The Magic Of Web Pages
The Successful Website
Creating Website Content CS Programming Languages for Web Applications
Basics of Website Development
Promoting Website CS 4640 Programming Languages for Web Applications
Creating Links – Lesson 3
Layout and Design CS 4640 Programming Languages for Web Applications
How to Use Members Area of The Ninety-Nines Website
Electronic Communication
Design and Implementation of Software for the Web
Web Programming– UFCFB Lecture-4
Krug Chapter 2 How We Really Use the Web and Web Site Design
Unit 14 Website Design HND in Computing and Systems Development
Formatting a Workbook Part 1
Design Principles 8-Dec-18.
HCI and Hypermedia/WWW
Krug Chapter 1 Don’t Make Me Think ! And Designing Hyper Text
Krug Chapter 3 Billboard Design 101 and Chapter 4 Mindless Choices
Don’t make me think Usability.
Where am I? Navigating a website: Browsing, searching, menus & breadcrumbs.
DELIGHT WITH UX DESIGN RACHEL KORPELLA
Design Principles 5-Apr-19.
Project 4 Creating an Image Map.
Accessible PowerPoint
Elements of Effective Web Design
Tips on good web site Design
Layout and Design CS 4640 Programming Languages for Web Applications
Promoting Website CS 4640 Programming Languages for Web Applications
Krug Chapter 1 Don’t Make Me Think ! And Designing Hyper Text
Navigation CS 4640 Programming Languages for Web Applications
Navigation CS 4640 Programming Languages for Web Applications
Promoting Website CS 4640 Programming Languages for Web Applications
Presentation transcript:

Navigation CS 4640 Programming Languages for Web Applications [Jakob Nielsen and Hoa Loranger, “Prioritizing Web Usability,” Chapter 6] [Sean McManus, “Web Design,” Chapter 5]

Good navigation requires clear structure, controls, and links Outline Am I there yet? Match the site structure to user expectations Navigation: Be consistent Navigation: Beware the coolness factor Reduce clutter and avoid redundancy Links and label names: Be specific Vertical dropdown menus: Short is sweet Multilevel menus: Less is more Can I click on it? Direct access from the homepage Good navigation requires clear structure, controls, and links

Poor navigation is the worst problem in websites today Am I There Yet? Four key “findability” problems cause huge problems Navigation and menus Category names Links Information architecture (How the information space is structured) Good navigation design … Shows users where they are Shows users where things are located Shows users how to access things in a methodical way Navigation is a map Poor navigation is the worst problem in websites today

Match the Site Structure to User Expectation Design for users, not builders (or managers!) Do not show internal corporate organization Users do not care about your org charts Arrange products by user attributes, not brand Example: Escalade sports Try to find an actual product Proper categorization example : City of San Diego Optimized for ordinary citizens

Navigation: Be Consistent Consistency is fundamental to good navigation Prime offenders : Large sites with subsites or affiliates Any university! Pretty good example : Pixar

Navigation: Beware the Cool Factor Save your creative juices for areas of site users care about Example: Burger King Career Site Used to have the moving menus Minesweeping Definition: Moving mouse in search of something clickable Some young children enjoy minesweeping Most users hate it Reduce clutter and avoid redundancy Example: US Postal Service (2003) vs US Postal Service (now) Note: Options in middle identical to links at top Just the facts, nothing but the facts

Navigation: Beware the Cool Factor Make sure your users understand your labels Honda: 2006 vs. Now What are the different car types? Pictures help a lot! Be brief Users do not want to scan Start with keywords or information words Do not use labels with redundant prefixes Do not use “Here” or “Verify Here” or “More” What do user want?

Limit 2: A mouse is hard to use Menus Vertical drop down menus: Short is sweet The longer the menu is, the harder it is to control The farther users travel, the more they get lost Multilevel menus: Less is more Limit fly-out menu to two levels (American Pearl) Three levels is usually bad; four levels is a disaster Avoid unpredictability of which menu items fly out Always a usability problem if menu disappears or is replaced by a different menu Limit 1: 7 +/- 2 Limit 2: A mouse is hard to use

Doors should look like doors and walls should look like walls Can I Click It ? Users should always know what is clickable Blue is the default : Do not use blue for nonclickable text High-lighting on mouse-over helps But may require minesweeping Standard button shapes imply clickability Do not rely on the “hand” pointer Novice users think arrow and hand pointer are identical Affordances: Whatever can be done with an object Perceived affordance is crucial to design Clickable objects need a perceived affordance of clickability Unclickable objects should not look clickable Doors should look like doors and walls should look like walls

Direct Access From The Homepage Directly link just a few high priority operations Need to balance with other goals of homepage Setting stage for site and informing users of full range of options Nielsen suggests 3 to 5 direct links from any specific area of homepage Good example: Firefox Maximize what users want without overwhelming

Navigation within Pages Try to avoid horizontal scrolling Navigation buttons should always be visible Top and bottom of the page Action buttons should always be visible Put most important content on the top Logos and headers should not use too much space Use intra-page links to help users keep their hands on the mouse (“home” button is on the keyboard)

Navigation Anchors Make clickable items obvious Use standard color (blue) and underline Do not use blue and underline for emphasis Users will get confused Highlight clickable items with mouseover Navigation should be on the top or the left Navigation buttons should not use much space

Connecting with the World Remember that users do not always come in through the “front door” Bookmarks, URLs emailed from friends, search engines Each page should have: Clear identifiers to indicate its context Titles that are meaningful without the context Navigation to other pages in the website Every page must have a meaningful <TITLE> tag Clearly indicate non-HTML links Add last modified notes – remember that creation is fun, but maintenance is hard

Summary Getting the structure and navigation right is very hard Maintenance and evolution are even harder !