Each pattern idea has a description of the design (sometimes including a video demo) followed by the best practices information to help you design that next interface with great user experience (UX) in mind.

• What Problem Does The Pattern Solve?
• When to Use It?
• How to Use It?
• Why to Use It?
• Accessibility
• Sources
• Useful Links (to additional information)
• Code Examples
• Where is it Used? (actual real world web examples are typically provided)
• Comments (about the design)

This site’s article pages are a great example of web design. The logo is prominently located in the upper left corner. It’s colors are progressive and memorable. The menu navigation is conveniently at the top of the page. The main header’s font is at a balanced size and weight, and in a distinctive blue hue. The page itself is a large, centered, white column containing all of it’s information on a blue striped background. What I take away from this design helps me associate Search Engine Land’s branding as blue and white with a splash of progressive green.

This branding impression can be very important because there are visitors who browse the internet with multiple windows (or tabs) at open at once. I admit I am one of these types, and I observe others who do the same. When these multiple viewing panes are open and one of them accidentally gets closed, that branding impression can help the visitor remember what was just closed.

Case in point:
Last night, I was shutting down my computer for the night. I had multiple browser windows open with multiple tabs open in each. My browser is set to remember all of the tabs’ URLs of the last instance of the browser window open. I accidentally closed one browser window which had a webpage article I did not finish reading from earlier in the day. I looked in my task bar and realized I still had one more browser instance running.

Okay, quick. Think of which website had that article. I remember seeing white and blue. I believe it was Search Engine Land & the article was a recent post. I navigate to my RSS feeds and see if it was still listed. No it was not. It was obviously not that recent. So I just went to the homepage; maybe it’s listed there. It wasn’t; the morning posts were being outdated by the afternoon posts. Okay — let’s use the site’s search: flying solo SEO. Found it!

Now I could have used my browser’s web history tools to find it, but I didn’t want to launch those. I was leaving for the night. I want that immediate satisfaction, like many web users. It was because of the great aesthetic design of Search Engine Land & branding identity I was able retrace my steps in less than a few clicks.

Excellent work Search Engine Land!

In the recent weeks, I’ve been working on an interface design for an upcoming project. The design will be released to the international community in the coming months–which has caused an interesting dialog between the project’s team members.

The interface is meant for operators to control the  high and low productivity, network structure, as well as some other features.  The interesting points made amongst the team members were focused on the high/low productivity controls:

• How should we represent the high control and the low control? Should there be a plus and a minus in their corresponding graphic?
• Where should the high control and low control be in relation to the productivity indication screen?

Decision 1: Use an up arrow for the high control; use a down arrow for the low control. Put a + in the middle of the up arrow and a – in the down arrow.

Decision 2: [This is the fun one.] There is no proper answer for where the high/low arrows should be in relation to the productivity indication screen. Or is there?

Concept A included the down arrow on the left of the indication screen and the up arrow on the right of the screen. This may seem backwards to you right-handers out there like  it did for me., but the left handers in the US and some of my co-workers in the UK (not sure if they were left-handed, right-handed, or both) chimed in that they liked it, it was easy for them to use.

–Scrap Concept A, could cause too many user frustrations.

Concept B included going with both of the arrows on one side of the indication screen; the up arrow on top, the down arrow beneath the up arrow.  Everyone in the team agreed that it made sense — what goes up is above what goes down.  Now only to choose what side of the indication screen the arrows should be on; left or right.  The overall design of the interface panel dictated that. It was wherever there was the most available room for the arrows to be next the indication screen.

–Concept B approved; put the arrow buttons to the right of the indication screen where there was the most graphical real estate.

Do you think Concept A should have been chosen? Think it was the best decision to choose Concept B? Or do you have a different suggestion? Take the poll: