background preloader

Guide to Website Navigation Design Patterns

Guide to Website Navigation Design Patterns
In web design, there are certain common design patterns that are used for interaction. Site navigation has a wide variety of common and familiar design patterns that can be used as a foundation for building effective information architecture for a website. This guide covers popular site navigation design patterns. For each site navigation design pattern, we will discuss its common characteristics, its drawbacks, and when best to use it. Top Horizontal Bar Navigation Top horizontal bar navigation is one of the two most popular kinds of site navigation menu design patterns out there. The top horizontal bar navigation design pattern is sometimes paired with drop-down menus whereby hovering on a navigation item reveals second-level child navigation items. Common Characteristics of Top Horizontal Bar Navigation Navigation items are text links, button-shaped, or tabbed-shapedHorizontal navigation is often placed directly adjacent to the site’s logoIt is often located above the fold Tabs Navigation

Index - 4ourth Mobile Design Pattern Library Designing Mobile Interfaces: Patterns for Interaction Design is a comprehensive reference for mobile design patterns. Whether designing for smartphones, featurephones or other related devices, common principles are discussed and codified as 76 universal interaction and interface patterns. Aside from suggestions, each pattern lists pitfalls and implementations to avoid. Every pattern is grouped with similar or optional patterns, and explained with the underlying psychology and physiology. Along with appendices detailing mobile technologies, type and design principles and human factors, you will have a base of knowledge to make up your own mind, and react to the always-changing mobile environment. "Designing Mobile Interfaces is another stellar addition to O’Reilly’s essential interface books. Buy it from Amazon: Buy it direct from O'Reilly: Or, you can just read it right here on this wiki. Read in other languages Preface Designing Smartphone Interfaces The Patterns Additional Topics References

Top 5 UX (User Experience) Articles of the week - Week 3 Editor's note: Contributor Marcy Kellar is a SharePoint Strategist and User Experience Designer. Follow her @marcykellar Last summer, Marcy Kellar began a weekly series of her top picks of UX articles for that week. Marcy is going to pick up the series again so we've gone back to publish her original articles. Here are the top 5 UX articles on branding this week: 1 - Guide to Website Navigation Design Patterns In web design, there are certain common design patterns that are used for interaction. Marcy Kellar: This article outlines patterns of navigation that includes description of use andpros/cons. 2 - The Elements Of Navigation | Smashing UX Design This article is about the tiniest of details that goes into creating the main centerpiece of your digital product. Marcy Kellar: My favorite part of this article is the Six Navigation Design Guidelines found toward the end. 3 - Pleasure and Pain » Knowing Why Beats Knowing How 4 - Overcoming Halfhearted User Adoption | UX Magazine

Tag cloud foundation-l word cloud, created with the complete gzip'ed list archives (without duplicate emails from archives and all headers and quoted text in body), using IBM Word Cloud Generator build 32.[1] A tag cloud with terms related to Web 2.0 History[edit] In the language of visual design, a tag cloud (or word cloud) is one kind of "weighted list", as commonly used on geographic maps to represent the relative size of cities in terms of relative typeface size. The specific visual form and common use of the term "tag cloud" rose to prominence in the first decade of the 21st century as a widespread feature of early Web 2.0 websites and blogs, used primarily to visualize the frequency distribution of keyword metadata that describe website content, and as a navigation aid. The first tag clouds on a high-profile website were on the photo sharing site Flickr, created by Flickr co-founder and interaction designer Stewart Butterfield in 2004. Types[edit] Frequency[edit] Categorization[edit] and for ; else

Patternry | User Interface Design Patterns for Ideas and Inspiration The Elements Of Navigation Advertisement When users look for information, they have a goal and are on a mission. Even before you started to read this article, chances are you did because you either had the implicit goal of checking what’s new on Smashing Magazine, or had the explicit goal of finding information about “Navigation Design”. After a couple of seconds of scanning this article, and maybe reading parts of the introduction, you may have started to ask yourself whether the information that you’re consuming at the moment is actually relevant to you—the user. Unfortunately (and as certain as death and taxes), if users cannot find the information they are looking for, chances are they will abandon their track, never to return. Being the compassionate human being that I am, I’ll try to explain to you what this article is about, so you can make your choice either to continue reading, or not. Words, Words, Words “This might be a good start!” User-Testing Labels Another test is a Word Association3 game. What Is What

Mapping In 1932, Charles O. Paullin and John K. Wright published Atlas of the Historical Geography of the United States, a reference of almost 700 maps about a varied set of topics, such as weather, travel, and population. The Digital Scholarship Lab at the University of Richmond brought the atlas to digital life. In this digital edition we've tried to bring—hopefully unobtrusively and respectfully—Paullin and Wright’s maps a bit closer to that ideal. Not only are the maps overlaid on a slippy map, but the lab also added simple interactions with tool tips and animation so you can look more specifically at the data. I could spend all day (or several days) looking through this. Patterns in Interaction Design

Knowing Why Beats Knowing How | Pleasure & Pain ☯ by Whitney Hess Last year around this time, I started following an eating plan called The 4-Hour Body by Tim Ferriss. At the same time, I was feverishly traveling the globe presenting my talk Design Principles: The Philosophy of UX. Midway through the book, Tim begins a chapter with a quotation from Ralph Waldo Emerson that draws a surprising parallel between his philosophy on eating right and my philosophy on designing right. “Without ambition one starts nothing. Without work one finishes nothing. ~ Ralph Waldo Emerson In a few short sentences, Emerson encapsulated exactly why I felt the message of my talk was such a crucial one to tell: In order to figure out how, you need to know why. Put bluntly: strategy always outperforms skill. Purpose makes perfect. This is the theme that exists across all of my talks, especially the one I’ve been giving this year, What’s Your Problem? All the more so, it is the philosophy by which I live my life. Emerson is known as the father of Transcendentalism, defined as: or as:

Everything You’ve Been Told About Mobile App Design By Developers Is Bullshit | Usability Counts | User Experience, Social Media Or, Design Your Own Mobile Application With These Nine Easy Steps… 2011 is the year of mobile. This year is the tipping point that’s really going to turn the World Wide Web into a “platform doesn’t matter” medium. If you’re doing User Experience and you don’t have a mobile app in your portfolio, you’d better get cracking. We’ve been working on a few applications as prototypes (iPad, iPhone, and Android), and I’m at version 1.1 of Pick An Excuse (finally iOS 3 compatible). If you have even an inkling of an idea, you should work on your own application — just for the experience. It’s All about Context, Baby I do all my best user research at the local bars here in San Francisco, California. Watching people use devices at Tony Nik’s is one of my favorite pastimes. Why? It’s because of the context. The fun thing about it is that all I have to do is ask a few questions, and they’ll tell me everything they love about their device — without having to buy them a drink. Keep It Simple Make It Social

Responsive Web Design Patterns | This Is Responsive Responsive Patterns A collection of patterns and modules for responsive designs. Submit a pattern Layout Reflowing Layouts Equal Width Off Canvas Source-Order Shift Lists Grid Block Navigation Single-Level Multi-level Breadcrumbs Pagination Images Responsive Image Techniques Media/Data Video Fluid Video Iframes Tables Charts & Graphs Responsive Chart Forms Basic Forms Text Lettering Fittext Footnotes Responsive Footnotes Modules Carousel Tabs Accordion Messaging Lightbox

Overcoming Halfhearted User Adoption In 1996, I was a database developer at AT&T Solutions (now defunct). AT&T Solutions had two separate payroll systems, one for AT&T Solutions and one for AT&T corporate. Both were excruciatingly slow. My colleagues used to joke that we needed a separate accounting code for the time it took to enter our hours into both systems. Being young and cocky, I decided I would ignore the corporate payroll system. That experience taught me two valuable lessons about user adoption: User adoption is not a binary concept; there are many levels between wholehearted adoption and outright user rejection. Wholehearted user adoption means that users embrace your solution as part of their daily work routine. On the other hand, outright user rejection is fairly easy to spot. But what’s often just as damaging as outright user rejection (and much harder to recognize) is halfhearted user adoption. Symptoms of Halfhearted User Adoption Do you have to give incentives for using the application? Usability

Related: