Archive for May, 2010

User Interface Design – Information Design – Search Design

Monday, May 24th, 2010

Google has confirmed what academics have claimed with mixed success for centuries, “Information is gold.” But, how do we access the gold?

Google has kind of answered that question too; you google it. But, what do you get in the data return. “Mary Kay Smith” returns 2,160,000 records, most of the top ones being from services offering to help you find your own Mary Kay. Maybe this is a good start when on the open Internet, but what if Mary Kay Smith works in the Kansas City branch of your company, even with some filtering words like, Kansas City and your company’s name, the return is still going to be front-loaded with helpful services.

This type of search is called a “Free Word” search. It has exception value. Most of us use it more than daily. But, it is not the only way to search and it is often not the appropriate way.

Assuming your company has an employee database you could use an in-house search tool, maybe still a Free Word search tool accessing just that one database. The return would show you all the Mary Kays in your company. Assuming only a few, you quickly click the one showing the KC address and there is her phone and fax number.

We could save a click. Why not have a drop-down list of all the employees? Let’s assume a few thousand. Yeah, the drop-down is too long. So maybe we have instead two “controls”. One is a radio button set asking “First Name” or “Last Name”. The other is an alphabet list. So now we get all the Matts, Marys, Marthas, and so forth. Right, what if we add one more control to limit us to Kansas City. Now we have a “Structured Search”.

You have probably thought of a still better or different way to find Mary Kay using a Structured Search, or maybe even, a combination of Structured Search and Free Search. This is Information Design – the search aspect of Information Design.

Let’s ask a polar question, what is the essential difference between Free Search and Structured Search? Answer is Capital Cost. It will always cost less, even much less, to setup a Free Search. But what about Operational Cost. If employees are searching each other out all day, how much is saved by providing a quick and certain search method? How much is saved by shipping the printer to the right Mary Kay?

Structured Searches cost more upfront because someone has to imagine them, organize a database, setup strict methods for adding, editing, and deleting from the database, and provide a set of controls for making the search. Not all of these costs are avoided by choosing Free Search, but many are.

It’s finally a User Interface decision involving cost, scalability, and accuracy. This is a favorite subject of mine. Call me for quick discussion or to arrange analysis of your search needs.

User Interface Design – Information Design and Design Evaluation

Thursday, May 13th, 2010

In some inner circles the terms “Information Design” has been around for a long time. There are even famous “information designers” such as Edward Tufte at Yale University, the author of Envisioning Information and possibly the inventor of the term.

So why am I inviting you into these inner circles? An information system known as the Internet has pushed its way into your space. You have a website and you may or may not be prepared to deal with anything called Information Design. Here is some help.

Tufte alone has written seven books touching this subject, so I will not presume to encapsulate it here. My goal is to alert you to the existence and depth of this field, while also providing the rudiments for evaluating Information Design in your business application, database application, or website.

Here are two websites by GORGES that show just what Information Design deals with. The first site, http://birdsandbayous.org, is so simple that information design is little more than not making basic mistakes or omissions. There are only a few “information points” and only a basic navigation is needed to reach these points and return from them. This information design is analogous to the chapter ordering in a very small book.

The Martha Stewart site, http://www.marthastewart.com, is on a different planet. Every graphic and text object on this home page is a link to something, and amazingly, it all makes sense. It is visually organized to lead the visitor comfortably through dense information.

Note further, that much of the home page information is layered on top of other information and the visitor is invited to interact with it – to engage.

So it is dense, multi-layered, diverse, and interactive.

Your website’s complexity probably lies somewhere between the Birds and Bayous website and Martha Stewart’s. What can you learn from these two sites to help you evaluate your website or work with your website designers? Here’s one thing:

Insist that when presenting a design to you the designer makes at least three systematic passes across the demo pages in some carefully ordered, slow-paced way.
• In the first pass you should be told both “how” and “why” the information design suits your information set.
• In the second pass you should be told both “how” and “why” the graphic design suits you information set, as well as “how” and “why” it is appropriate to your brand and your communication intention for each of the audiences you have identified.
• In the third pass the designer needs to explain how the graphic design and information designs reinforce each other.

For the best result, allow the designers to make the points above without interruption and then go through it all again in a question and answer format. Good designers seek good criticism.

Here’s one more information design evaluation thing:

Ask two or three innocents to do the “What do you see?” test. With the page hidden, tell them you are going to ask them what they see first. Show the page. Then ask what they see second. You will get variation from person to person, but not much. Do this for the home page and for several subordinate pages. Does the visual prioritizing match your message plan?

My next posting will be also about Information Design – searching for information.

User Interface (UX) – Content – Just the Message

Wednesday, May 5th, 2010

User Interface Design (UX) – Content – Just the Message

This set of guidelines may be used for evaluating websites as they develop or for examining sites by others. It addresses Usability, User Interface, and Communication. There is more to UX, please see other posting by me and watch for new posting on the subject in the next few months.

While this article is not explicitly about SEO, applying the standards here will only be good for SEO.

Usability

Do the graphics communication or supplement the message and purpose of the page? What is the desired balance between the graphical message and the text message?

People scan web pages. They do not read them. So, layout should be rhythmic and language should be concise. Break up traditional paragraphs by using subheadings, bullet lists, and short paragraphs.

Do not over do the breaking up of the page text. If it is a bullet item, then it does not need to be indented. Use one method or the other.

Font styles, sizes, and alignment should be consistent, and generally controlled by the style sheet. Avoid in-line styles. Using more than three different fonts in one page requires very high design skill. Keep it simple.

Link text should contain clear, action words that indicate what the link points to. Avoid using “Click Here” and other test that refers to the document. Remember, the user should be aware of the message, not the website.

Links to non-web formats, such as PDFs, should be identified by noting the format in the link text.

Users associate underlined text with links. So, do not underline text that is not links, this includes headings, page and section identification, and titles in general.

Color for emphasis and differentiation is under used in web pages. The twentieth century used italics and bold to differentiate. The twenty-first century uses color.

Communication

The purpose of every page should be clear to the user. Good questions to ask when creating and reviewing pages include:
• Is it clear what this page is for?
• How is it different from other pages?
• Is this message necessary?
• What is the first thing I notice on this page and does that match what should be the first thing a user notices?
• Is there anything distracting me from the main purpose of this page?

The language of the site and any system messages should be written in clear terms familiar to most users. Avoid jargon and overly technical terms.

Do not invent syntax. Do you mean “or” or do you mean “and”? Do not write “and/or”. It is one or the other. More distracting yet is “inside/outside”.

Do not over use punctuation. Users are not generally computer programmers. The comma is understandable. “Jim ate rice, the brown kind.” Parenthesis have a purpose, but can be just distracting. “Jim ate rice (the brown kind).”

Strunk and Whites. The Elements of Style belongs on every proofreader’s desk.

All text should be proofread for spelling and grammar mistakes.

User Interface

Link text should contain clear, action words that indicate what the link points to. Avoid using “Click Here” and other test that refers to the document. Remember, the user should be aware of the message, not the website.

Links to non-web formats, such as PDFs, should be identified by noting the format in the link text.

Users associate underlined text with links. So, do not underline text that is not links, this includes headings, page and section identification, and titles in general.

Help user to avoid errors. For example, if data need to be entered in a specific format, provide clear instructions for doing so. Do this consistently. Examples:

Home Phone _________________ +1 (607) 555-1212
URL ________________________ http://www.mydomain.com

Does the text wrap around images correctly? Is it spaced away from borders and other graphical edges?

Did you use H1’s for page titles, H2’s for sub-headings, etc.?

Does each page have a unique <title> ? Does the title match the page content and purpose. Remember, these are the words displayed by search engine returns and the default words stored in bookmarks.

©2012 GORGES - All rights reserved
where programming meets design and lives happily ever after