Forum Moderators: open
[big]User Interface[/big]
UI is a way to think about website design from the perspective of the end-user. Identify the tasks you want your users to be able to completely successfully, and then be sure that all your design decisions support these activities.
In some ways, it’s about guiding the reader to the places you want them to go and actually do what you want them to do.
Color Palette Effective color use can not only produce a visually pleasing page but colors can guide readers’ eyes to important areas.
Navigation Bar Should be accessible and easy to use, regardless of whether it’s located on the left, the right, or the top.
Key User Actions Can users easily subscribe to a newsletter, fill a shopping cart, or request someone contact them?
Page Layout and Organization Are important topics easy to find on the page? Are key links placed in visually significant positions?
Content Is the text written for a web-reader? Use shorter sentences, 3-4 sentence paragraphs, and lots of bullets.
[big]User Acceptance Testing (UAT)[/big]
This can be a beta-test step for web development. User Acceptance Testing focuses on how users experience the site.
UAT is the parallel of QA testing, and they often happen at the same time. QA testing focuses on “does the site work?” but UAT focuses on “how do people actually use the site?” One traditional way to conduct UAT is to define key tasks and ask sample users to perform them.
UAT testers should not be intimately familiar with your website. You can pick a few co-workers, representative end-users, friends, or even mom (yes, mom can be a great UAT tester!). Some companies hire formal UAT scripters and testers, but that’s for large projects. Choose people who have a range of computing skills.
Do not tell testers how to do the tasks. Ask them to figure these things out on their own. (This process can be humbling for a designer who thought everything was crystal clear.)
For example, you could ask your testers to:
After testing, you can compile the results through both clickstream analysis and also interviews (verbal or written) with your UAT testers.
Overall, you want to make key activities easier for your end-users to accomplish. Whether that means making a purchase, subscribing to a newsletter, or contacting you for more information.
Well, that's a start on UI. Who has more ideas?
Thanks again! I'm certain we will see some interesting perspectives....
- papabaer
Does the "two click rule" still apply to navigation? I guess always keeping pages within "touching" distance is always a good thing for any interface.
Apart from that Im looking for more info on this, need heads up on this stuff :)
I can honestly use the phrase: "if I knew then, what I know now..." - I'm going back to some old friends and putting them under the knife for a major USER-FRIENDLY UI update.
How vistors enter a site is a very important issue. In many sites, users do NOT come in through the front door, but rather through one of the many side-doors that make up most of the other pages. Will they be subject to drastic design differences if they do venture to your main page? Do your interior pages invite exploration... and do they provide a clear path?
BOL, (in regards to the two-click rule) one of the things that I've learned is that when it comes to websites is that a good UI is responsive to changes in content.
The UI solutions that work for an 8 page brochure site won't work for a 50 page site, let alone one with 1000 pages.
As I add pages, I regularly ask myself:
A static UI works great for software, but when it comes to a living and growing website, a static UI can become like a pair of children's shoes. As a child grows, the shoes begin to pinch and may even split at the seams.
The "two-click" rule helps us identify when a site's UI is starting to pinch our users. :)
I will often only refernece the site itself from the text link included with the on page navigation and once more in the copyright footer.
I know branding is very important, but I also think good content is what makes a site memorable, not a 468x60 banner at the top of each page. The WebmasterWorld logo here is agret example of minimilist design. It anchors the top menu, drawing attention without overpowering or obstructing.
in regards to the utilisation of space....i wish people would use a 1024x768 res :) smaller resolutions just dont offer any space to do anything really. In light of that, yeah, this must be one of the bigger issues involving the whole subject.
another issue may be whether you offer a "control panel" type interface that is not indexed by the engines, that you can 'topload' with options and directions to every juicy bit of info on the site :) I guess some people would like that, some would'nt.
All in all, I think the minimalist design does win 9 times out of 10, and certainly saves any waiting around too, very user-friendly :)
What I thought was cool, she thought was useless. Today, at trade shows I get many compliments on the interface and the ease of use, and I give her all the credit.
They didn't think their was any way they could design pages that small and still have an effective UI.
DrCool, you touched on an interesting area: what is perceived as required size (much more than 40kb) and the efficient elegance of <40kb design. I actually visited a few corporate sites tonight and was dismayed as I watched Opera track the file size of each page. Some, more than a few, exceeded 200kb! The sad part was, that in appearance, there did not seem to be 200kb worth of content present. Sad...
txbakers, sounds like a good team effort! I can recall a number of times when I thought I had the "cool" factor nailed for a UI... only to get a quick reality check from some close friends.
Initially, I like to use the ONE, TWO, THREE approach to design/UI. One: grab the visitors attention. Two, make the navigation interface apparent. Three, provide hightlights to entice exploration.
I used to actually take a sheet of notebook paper, place it in a landscape position and write in the numbers 1, 2 and 3 in the locations I wanted my visitors eyes to travel as the page displayed. Then I would hold it out at arm's length and track my planned eye movement to see if it "felt right." A simple little thing, but sometimes it can make a big difference.
I also favor the old design scheme of "odd numbers" and off-center presentation: three primary elements being my ideal. Obviously, not every desing can achieve this, nor should it. Whlie consistancy is important, it should never lead to boredom. Mixing it up has its own benefits.
I guess the theory is that if you can guide the eye, clicks will follow. From that perspective, it makes sense to figure out what are the most important links on your page and make sure that they are noticed by your visitor.
I think that a bad UI can lose as many visitors as a slow-loading site. Your site might have the information, but if the user can't find it, they will move on.
What strategies do people use to draw their visitors' eyes to key UI points? What's worked and what's been the kiss-of-death?
Other components have may subtleties not immediately apparent. Website typography is one of these. Since text presentation IS part of the UI in that presented in an optimal manner, it acts to draw in the visitor. Text presented in manageable blocks is much easier to grasp than text allowed to span the entire width of the page.
I've read where the optimal characters per line (paragraph text - including spaces and punctuation) ranges from 60 to 70 per line. More than that and it becomes uncomfortable due to eye movement. Too narrow has it's downsides as well. Line height should also be considered.
With this in mind, I've always been partial to UI's that present text in controlled blocks. Even in liquid layouts: text boxes, columns and blockquotes and lists all make for an easier to digest presentation that also offers visual cues. The last is key, as it helps guide us through the UI. Too many elements and it gets confusing, too few and it seems sparse.
Going back to the One, Two, Three, scenario for the most prominent elements, a heading or graphic that immediately communicates what the page is about should been seen first, an easiy identifiable navigation menu, second, and an "easy on the eyes" text box, third. These would constitute the three MAIN components of a typical information site.
I often prefer to "lead" a vistor's eye movement with three main components as visual cues: #1 TOP LEFT (LOGO/GRAPHIC or HEADING), #2 RIGHTSIDE-DOWN SLIGHTLY (column text or menu - use color or borders to draw attention) and #3 LEFTSIDE (same height as #2) main text. Obviously, this is very general but it does keep key items in focus.
Visual cues... like a trail of breadcrumbs! ;)
[edited by: papabaer at 10:30 am (utc) on June 3, 2002]
One item I think should paramount for any discussion on UI is the information heirarchy. How information relates to other information. I build a block diagram of all the chunks of information and organize the chunks into groups that relate to each other. These groups don't necessarily translate into page structure although it may be a good start.
The core of a great UI - one that is intuitive, clean, and easy to to learn - is planning, planning, planning!
I believe that we all use a standard set of criteria to build a UI. The 2 click rule, 40Kb sweet spot, etc... Perhaps a running list of these and why/when to use them would be helpful to consolidate in one location for everyone's benefit?
Lorax, a list of UI tips sounds like a good idea. Let's start building it:
The 2-click rule -- keep things close to your index or landing pages. Your key user-actions should be no more than 2-clicks away.
40kb sweet spot -- considered by many to be large enough to do heavy lifting without being so huge that it chokes a 56kb modem like a pig in a python.
1-2-3 -- guidelines for UI layout and design
We've talked a bit about making the UI quickly-understandable. How quickly do we have to accomplish this task?
Time-on-target -- A page has about:
Does that fit with what other people see or am I off-base?
I try to avoid Site Maps unless I think (or testing has shown) that it really helps the visitor find what thier looking for. There are cases where a Site Map becomes a necessity like complex web sites with many pages and/or many levels that preclude the 2 Click Rule and web sites that need a visual tool to help the user wrap their mind around the layout of the web site. A picture is worth a thousand words sort of thing.
Example : Search box
Collect information from the search box? Searches per user/search terms used/popular search terms etc
mcguffin, the things youve listed above, IMO, are some of the most important things to think about
Including a Site Map
I'm glad you mentioned this... I've gotten into the habit of looking for a sitemap link anytime I reach a larger site. Usually it is (by far!) the easiest means to find my way around. I think there is a lesson to be learned here....
BOL, tracking user interaction is definately worth noting. Good point! Which allows me to broach this: Some elements of a UI are more obviously interactive; items such as search boxes, feeback forms and multimedia links. Others are more passive: text highlights, blockquotes, lists, graphics (attention grabbing/designed to invite user action).
The obvious "action" elements are "gimmes," they already invite action by their existence. The latter, more passive elements can easily be overlooked resulting in lost opportunity to "guide" your vistor along.
For example, lets say you had a rightside div/column that that lists informational context presented in "smallish" paragraphs. For attention purposes, you might wrap the first few words in each distinct (informational) paragraph in bold/strong tags. No one can dispute the effect of bold text as an attention grabber. But has over-use weakened the effect to the point where "bold text intro's" are barely more noticeable than "ad banners?"
What about replacing the "bold text intro" paragaphs with a DEFINITION list <dl> as an alternative? The definition term <dt> and the offset definition text <dd> can offer an attention grabbing presentation first through the distinct formatting and secondly... simply because use of this element is not very common.
<h3>Woodworking Projects Are Fun!</h3>
<dl>
<dt><a href="bookcase_tutorial.htm">Build Me A Bookcase!</a></dt>
<dd>Building a bookcase is a fun project. It is not complicated and can take many shapes and sizes.
Read more about this "easy-to-do" project in our Building a Bookcase Tutorial!</dd>
<dt><a href="trimwork.htm">Adding Fancy Trimwork</a></dt>
<dd>The bookcase is almost complete: it's functional, it's sturdy, it's also rather plain.
Let's add some trim work to spruce it up. Afterall, it's going to be standing in your hallway.</dd>
<dt><a href="wood_finishing_tutorial.htm">Wood Finishing Made Easy</a></dt>
<dd>Now that you have built your bookcase and added some fancy trim, now it's time to add some
stain and choose a finish. Are you ready for the Wood Finishing Tutorial? I know I am!</dd>
</dl>
The above not only may be more attention grabbing, but the links invite exploration in a manner other than a simple navigation menu.
Offering a variation in presentaional style can be very effective. In this case, the DEFINITION LISTS almost shouts out: "Hey! Look at me! I've got someting to tell you!" Once you've grabbed their attention, you can continue inviting your visitors to explore... The trail of "breadcrumbs" grows! ;)19
[edited by: papabaer at 4:09 am (utc) on June 5, 2002]
His theory was that it was better to keep the number of choices for navigation on a page to an absolute minimum. So, you'd try to get your links down to 2 a page. This way, you don't overload the user with too many choices, and as long as there are simple and clear choices the user will get to what they want quicker even if the information is several pages deep into the site.
I must admit I havn't tried it myself (what no navbar?) but I thought it was an interesting idea. I suppose it would have more effect with inexperienced web users though. More experienced users might be thrown by the lack of a nav bar and leave in disgust at not getting where they want within a couple of clicks! It would certainly make your navigation easy to understand for a user if they only have 2 choices.
...it doesn't matter if the actually thing that they are looking for is one click away or six clicks away, as long as they are able to follow the scent to get to the content, they will be very happy users...
That quote hangs over my desk sometimes. As long as your users are moving forward through a site's architecture, towards their goal, you have their attention. When they get lost, they tend to leave.
For a portal stacked with content, I guess the 2click rule would work better, but for a short "snappy" site, a route A to Z seems to be more applicable.
Its good to see there are no absolutes and the webmaster has an either/or choice
Google has been turning every page into a landing page, so I'm not sure how long of scent trails we can create. Google's goal is to put the user on the right page on the first click-through.
Using the Boston Globe example in the article, someone searching for "boston red sox schedule" will land on a schedule page.
However, we can create scent-rich areas that invite the reader to stay on the site once they are there? We can encourage them to say "oooh, I want to read that too."
Back button = user saw a dead-end. Yeah, that makes sense.
From the parents, we can visit uncles, then cousins. From the grandparents, we can visit the great uncles, and second cousins, etc. From the children, we can drill down through grand children and great grand children. These are the natural places to follow from our entry point, IMO.
Apart from a few general links that may need to be at hand (contact, search, copyright, etc.), I find the ubiquitous 'navbar' quite depressing. Why link to fish and birds from the hamster page of an animal site? I should be linking up to small furry mammals, mammals and animals; and down to various types of hamsters. Yet I would have a general navbar just because everyone else does:(.
