Web design patterns: Navigation
I was thinking of web design patterns that may be candidates for controls for use in Windows Presentation Foundation (WPF) apps, specifically the browser-hosted application flavors (XBAPs). I figure I should list the ones that I think are prevalent on the web first.
Bread crumb bars
This is what got me started. Hua and I were talking about this sample she started working on. Bread crumbs tell you where you are within a web application or site.
Each label in this pattern is a hyperlink, making it easy to jump back to another level. This is especially suited for sites that have a structured hierarchy, usually 3 or more levels.
Bread crumbs tell users exactly how they arrived at the current location but do not tell a user where they can go from here.
Directory-based navigation
If your site or application has categories and sub-categories, this is a good way to display them to users and facilitate navigation. This gives users a broad overview of functionality offered by the app, and the ability to switch between items in the same category. Directories are not suited for sites or apps that have deep hierarchies (i.e. >2) or fragmented sub-categories.
Doormat
The Doormat is another pattern used to direct users to the appropriate section of the site. This works well if you have a small number of categories, with each having small number of sub-categories. The typical use of this pattern is on a landing page or home page.
Fly-out menus
The Fly-out has an old standard at Microsoft.com. It conserves space well because menu items are generally hidden, and when exposed the fly-out menus overlay the page content. These were made popular on the web mainly with DHTML where the menu functionality could be made fast enough to not be an irritant. These fly-out menus can be horizontal or vertical.
Horizontal and Vertical navigation
This consists of a horizontal bar with hyperlinks laid side to side. Usually appears at the top of a page. Use this when you want the navigation item to be visible throughout your site or app. The current page is usually highlighted on the horizontal navigation bar. The position of this navigation bar at the top of the page can be a hindrance if your page content requires users to scroll down.
When sub-categories exist, it is not uncommon to employ the double horizontal navigation pattern. The law of diminishing returns applies with each added level.
Another variant is the Vertical Navigation menu. These menus suffer some of the same disadvantages as their Horizontal cousins. However, their main advantage is in their scalability. Scrolling vertically is seen as less of an irritant as scrolling horizontally.
Tabbed navigation
Tabs extend the horizontal navigation menu concept further. They allow categorizing content where top level items are fairly static. They also provide visual cues that suggest ownership over a page's content. The double tabular form has two levels where the top level is static and the bottom level changes based on top level selection.
This post does not aim to be comprehensive. I hope it got you thinking about navigation paradigms. So in closing...
Questions to the WPF community:
Tags: WinFX, NetFX3, WPF, XBAP, RIA, Web Design Patterns
Bread crumb bars
This is what got me started. Hua and I were talking about this sample she started working on. Bread crumbs tell you where you are within a web application or site.
Each label in this pattern is a hyperlink, making it easy to jump back to another level. This is especially suited for sites that have a structured hierarchy, usually 3 or more levels.
Bread crumbs tell users exactly how they arrived at the current location but do not tell a user where they can go from here.
Directory-based navigation
If your site or application has categories and sub-categories, this is a good way to display them to users and facilitate navigation. This gives users a broad overview of functionality offered by the app, and the ability to switch between items in the same category. Directories are not suited for sites or apps that have deep hierarchies (i.e. >2) or fragmented sub-categories.Doormat
The Doormat is another pattern used to direct users to the appropriate section of the site. This works well if you have a small number of categories, with each having small number of sub-categories. The typical use of this pattern is on a landing page or home page.
Fly-out menus
The Fly-out has an old standard at Microsoft.com. It conserves space well because menu items are generally hidden, and when exposed the fly-out menus overlay the page content. These were made popular on the web mainly with DHTML where the menu functionality could be made fast enough to not be an irritant. These fly-out menus can be horizontal or vertical.Horizontal and Vertical navigation
This consists of a horizontal bar with hyperlinks laid side to side. Usually appears at the top of a page. Use this when you want the navigation item to be visible throughout your site or app. The current page is usually highlighted on the horizontal navigation bar. The position of this navigation bar at the top of the page can be a hindrance if your page content requires users to scroll down.
When sub-categories exist, it is not uncommon to employ the double horizontal navigation pattern. The law of diminishing returns applies with each added level.
Another variant is the Vertical Navigation menu. These menus suffer some of the same disadvantages as their Horizontal cousins. However, their main advantage is in their scalability. Scrolling vertically is seen as less of an irritant as scrolling horizontally.Tabbed navigation
Tabs extend the horizontal navigation menu concept further. They allow categorizing content where top level items are fairly static. They also provide visual cues that suggest ownership over a page's content. The double tabular form has two levels where the top level is static and the bottom level changes based on top level selection.
This post does not aim to be comprehensive. I hope it got you thinking about navigation paradigms. So in closing...
Questions to the WPF community:
- Would you consider it valuable if there were high-level, native support for these navigation patterns in WPF? If so, which ones?
- Would you like to create one or more controls based on these patterns? If so, drop me a comment. I'll be happy to post them to the WPF community site.
- Are there other important navigation paradigms that I missed? Any that you'd like to see WPF versions of?
Tags: WinFX, NetFX3, WPF, XBAP, RIA, Web Design Patterns
7 Comments:
Got me thinking about navigation paradigms.
I thought of a slightly more obscure pattern, and that is the virtual earth pattern where you start out viewing the whole world, and zoom in on the detail you want.
This is useful if you can group information, and present all levels of detail symbolically. However I've only seen this sort of pattern used for mapping and line plots.
It would be interesting to experiment with this to say navigate large selections of photos, or music. With photos you could lay it out by time, or location, or by relation to the viewer.
With shopping you could lay out items like in a supermarket, browsing by isle, then product type, then zoom into the product details.
By
Anonymous, at October 3, 2006 at 11:19 PM
Other interesting way to navigate a application is using The Brain
http://www.thebrain.com/
John look this demo of The Zooming User Interface
http://rchi.raskincenter.org/demos/zoomdemo.swf
Bye
By
Anonymous, at October 4, 2006 at 6:42 AM
This might be going off on a bit of a tangent, but it makes two things come to mind regarding WPF.
First, it's slightly irritating that when you navigate internally within an XBAP, the address bar doesn't capture that. (E.g., if my xbap starts on Page1.xaml and I navigate to a Page2.xaml in the same xbap, the address bar continues to show just the URL of the xbap itself.
It's like frames all over again... How can I capture the URL for the thing I'm looking at right now? (I was going to ask how do I 'bookmark' it, but I can't remember the last time I created a bookmark. On the other hand, I can remember the last time I copied a URL to the clipboard and sent it to someone over IM - it was just a few hours ago. How will I do that for intra-xbap content?) Incidentally, this is also my one complaint so far with the New York Times reader - it doesn't appear to offer a way of getting any kind of URL for a news article that I can see.
Second, I love the breadcrumb/addressbar combo thing in Windows Explorer in Vista. One of those would for WPF be just fab.
Which leads to the obvious question: can we have such a Vista style breadcrumb bar appear in the browser address bar?
I realise that there's a big issue there: it presupposes specific semantics for the URL structure. I.e. it supposes URLs work like directories. And that's not universally true - as very many web sites in the world have demonstrated, an alternative strategy is to have utterly incomprehensible URLs with no obvious internal structure that are so idiotically long that they wrap across multiple lines when you try to send them in email... I don't like web apps that do that, so anything that puts apps with crummy/non-existent URL design at a disadvantage is a Good Thing in my opinion.
In principle there's nothing to stop you from offering a Vista-style breadcrumb bar to WPF applications for which that navigation model makes sense. And for applications where that navigation model makes sense, it's possible to map that navigation structure into a URL structure for addresses in an address bar. And for such an address bar, you could enable such breadcrumb behaviour as long as there's a way for the bar to ask the app what should appear in the various drop-downs.
By
Anonymous, at October 22, 2006 at 6:04 PM
Web Art Sense a web design company, affordable web design, web development, ecommerce, XHTML Services.
By
Anonymous, at December 1, 2008 at 5:27 AM
Thanks for this useful article. windows hosting | Website Hosting
By
Ray Creations, at January 14, 2009 at 8:34 PM
Nice article for the web design people to know.
Web Developer | Web Design
By
Ray Creations, at January 16, 2009 at 3:20 AM
I also use this pattern so if you have any other technique in this way so you should inform me because i want to get more skill in this field.
By
print shop westpalmbeach, at April 21, 2011 at 12:57 AM
Post a Comment | Home | Inference: my personal blog