Ask Eric: Questions & Answers

November 17, 2005 – submitted by Blair Last Name: Hill of Irvine, CA

Our current project involves a redesign of an application-based site. Knowing that users will be comparing rows of information within the same page, I feel the need to visually control the layout and the many tables of data and forms. Are we taking a wrong step? Is there a usable approach to honoring different screen resolutions while keeping control of the layout?

Many thanks!

For form filling applications you really need to target a single resolution and design for that. Field layout requires an assumed screen space. Having fields dynamically reposition will result in inconsistent entry sequence, odd grouping, and a failure to correspond to any paper source document.

So just pick a resolution and stick with that.

November 9, 2005 – submitted by Vineet Chandra of Roseland, NJ

Question: In a Web application, should the buttons like save, done, continue, etc. come at the bottom of the browser window or is it better to place them just below the content that is above them?

In other words should a user expect buttons at a certain place in a browser window or is it okay that button locations vary screen to screen?

Once I had a client with a Vice President that wanted the buttons easily visible, so she put them in the upper right of the screen (as some GUIs do). In testing the users promptly scrolled down and then were perplexed when they saw no buttons at the bottom. The users rarely recovered in reasonable time.

For consistency you SHOULD have the buttons in the same LOGICAL place. You should design for your target resolution and TRY to have the content work well within the page size. But no, there is no practical way to lock down the Web.

October 25, 2005 – submitted by John Knight of USA

In addition, we use color to convey a brand or feeling to the application. Color (in conjunction with content, organization, textures, etc.) will make a site have a given flavor. We define the objectives based on the business goals (typically brand values targeted). We can then easily test them during usability trials to ensure that the design gives the right impression.

September 26, 2005 – submitted by Robert Thompson of California, USA

Development said that it impacts performance if it is inside the box.

Thanks in advance for any light you can shed on this issue.

Salary ($): ____________

Tax rate (%) ___

Or

Salary: ____________ USD

Tax rate: ___ %

If you put the character inside the text field it appears as if it is editable. If this is a false message, then avoid it. In addition, the special characters near the numbers will tend to clutter the screen.

September 8, 2005 – submitted by Ravindra Papineni of San Antonio, TX

CLEAR buttons make sense if the user is likely to suddenly decide they need to start over. This is not a universal situation. For example in a form where I simply put in my name and address it is quite unlikely I will need to clear it and start over.

September 1, 2005 – submitted by Chris Mastin of Malvern, PA

August 19, 2005 – submitted by Penelope Phillips of Sydney, Australia

As a fine artist before I tried to use this game for charity and many chastened hours later – I want to point out that the tricks like color or tonal patterns which lead the eye, and the use of multimedia maximally to explain points so that right brain can also record, are also valid modes of looking at Web design. Have you ever considered looking at it from this point of view that was not possible twenty years ago – of course I am the new kid off the block and WOEFULLY IGNORANT but I do feel that effective design should be centered on the user and that user is a being with eyes and emotions and prejudices and these are the bits that design should appeal to. Furthermore that across-the-board design rules maybe do not exist – it depends on the user what you shove in. Am I also WOEFULLY WRONG?

August 3, 2005 – submitted by Lisa Smith of USA

July 21, 2005 – submitted by H. Corinne of Massachusetts, USA

Do most still follow the conventions in Microsoft Manual of Style, written in 1998 and the online 3rd edition, bolding ALL window-based elements in procedures whether they are clicked or selected or not?

Is it acceptable to limit bold to actual user input (what the user clicks, selects, or types) and not to bold window-based elements the user is not actually selecting or clicking? For example in the following, I would not bold the name of the box:

In the Printer Name box, click Acrobat PDFWriter and click OK

In the following, I would not bold the name of the window:

In the Microsoft Internet Explorer main window, click Tools >> Internet Options.

Too much bolding clutters the page, especially when online also uses hyperlinks.

Thanks for your help!

My concern with your examples is that you have not provided a separator to make it clear that you are referring to a window name. So I would think about a convention to provide a stronger visual cue.

You show...
In the Printer Name box, click Acrobat PDFWriter and click OK.

Consider a design like this...
In the 'Printer Name' box, click Acrobat PDFWriter and click OK.

However, I also agree with your comment on bolding. The problem with bolding is that it is too powerful a highlighting method. That is what creates clutter. If you use less powerful methods like semi quotes or italics you can make the distinctions without undue distraction.

July 12, 2005 – submitted by Christy Shoudis of Springfield, MO

In this case you may be better off unpacking the task. Let the user enter one question and possible answers at a time. Let them then build out the network of questions.

You may then provide a full screen view so that they can navigate through the items and make changes.

July 8, 2005 – submitted by Jay Rogers of Austin, TX

I would like to see icons used in cases where they are actually useful. An example is a check mark that flags that the function has been completed. Then it is meaningful and useful.

In general, please aim for graphic work that is helpful. That conveys some information. There is also a clear value in terms of branding. But I suspect your icon/buttons may backfire even in brand positioning.

May 17, 2005 – submitted by Joanne Griffith of Roseland, NJ

The problem is probably not in the button placement as much as the issue of whether help is actually helpful and useful. In most applications we find that even the best help is not often used.

May 10, 2005 – submitted by Margaret Haze of Chicago, IL

The current state is that the site displays all results containing the input criteria of Manufacturer's part number in no particular order.

One group wants to display the results using the input criteria in numerical order. This group's rational is that the customer has searched by part number as criteria and would expect to see the results sorted on that number in ascending order. Users could scroll down to find the exact part they are for which they need.

Another group wants to display the results with the newest items first that contain the input criteria. This group's rational is that this enables users to see newer items first.

We tried to find some empirical data on this question, but didn't have much luck. What is your opinion?

April 13, 2005 – submitted by Edward Vest of USA

If you mean is there a relationship between the number of fields and the time to complete the form, the answer is certainly yes. For novice users the form completion time is very much a function of confusion and complexity. But for experts, the main issue is the amount of physical work involved. This is directly related to the number of fields. We often estimate time to complete a form for expert users by looking at the number of fields (and other controls) and mouse movement requirements.

If your question is form density, in general studies show reasonably dense forms are better than lots of scrolling or navigation between pages.

March 28, 2005 – submitted by Thomas Garrod of Seattle, WA

Eric's response: First let me say that I am not very enthusiastic about Help facilities. In most Web sites people don't often use help (they will more often access a FAQ). For expert users in corporate applications help is rarely useful, they would rather ask a friend. So please be sure that help is really the right solution. I would generally invest your effort in making the screens self-evident and the error messages clear.

Assuming you want to provide help, let's look at types and delivery. Rollover help is usually used for clarifying labels. (Right. It would be nice to just make the labels clear and label your icons. But there are cases where this is useful.) I have seen applications with extensive rollover help where the user was constantly distracted by unwanted messages, as there was almost no inactive place to rest a mouse. This is a serious problem (particularly as it was for emergency services personnel).

Probably the most useful type of help is very selective help that appears embedded as links in the screen at a FEW selected points where people have trouble. This is usually a more extensive explanation and should NOT be in a rollover. A popup that appears over the current screen is clearly best. This maintains context and provides space for the material. I would indeed avoid going to a separate browser as this impedes the flow.

Finally, extensive and involved help is sometimes available in a separate help facility. While a popup is still best, there are cases where the material and interactivity required is so extensive that a full separate browser or separate application I justified. In some cases these even become training facilities in their own right. In such cases the flow is fully broken as the user goes off to learn neurobiology (or something) in depth.

March 17, 2005 – submitted by Nupur Khanna Vij of New Delhi, India

The font size is an issue of legibility. The x-height of the characters should be 1/200th of the distance from the display to the user's eye. Certainly a small font will force more text onto the screen, but it will be slow to read and may encourage the user to not read at all.

Finally, remember that online users generally do not actually read the screen, they scan it. So unless your user is reading a novel online, you need to design for effective scanning. This means not dumping a bunch of paragraphs onto the screen. Organize the content and present it with better techniques like bullet lists and step charts.

March 3, 2005 – submitted by Daniel Himsworth of Horsham, PA

I have various business user opinions... some asking/requiring me to bold the labels for such... or highlight the input fields background... or if not complete, render in red after submit... etc.

I'd like somewhat of a more definitive source, if one exists (W3C?), that might settle this and any other GUI/UI best practices or at least provides me a direction to point such opinionated UI newbies to.

Any help on this matter is appreciated.

In any case AVOID cluttering the page with lots of extra visual noise. Bold and color will unnecessarily clutter the page.

February 15, 2005 – submitted by Carl Stone of Oakland, CA

The tasks involved are different and not everyone is an Administrator.

I would expect that the widget would be at the top of the screen, but what UI widget would you use and why?

It would be great to hear from you.

I am assuming that the people who do administrative work ALSO may want to use the "User" facilities. This is common when administrators are supervisors. If this is true, you design primarily for the users. They are most numerous and often least skilled. Then have a link available that is only seen by administrators. If the administration work is done infrequently (as is usually the case) just put a single link off of the main page that is only displayed to users who have administrator permissions.

It is very rare to have a situation where the administrator must frequently switch between the user and administrator facilities. If that was true then you might need a switch on every page. This can again be a link that is only shown to users with administrative permissions. Then there can be a similar link on each administrative page to return to the user mode. The one trick would be to keep track of the user page and state of the page that the administrator came from. Then return the user to the source page so they can continue their work.

The choice of control is not terribly important. It is a direct navigation to another page. This can also be done with a button. But a link is small, simple, and cheap. You could theoretically also use tabs, dropdowns, etc. But these are unnecessarily complex and physically large.

February 3, 2005 – submitted by Dei of Norway

Since you are building a search-primary site you should indeed focus on search design. A good primary search is essential. But I would also suggest the advanced search. This will allow customers to employ otherwise difficult search logic. Remember that advanced search is not really well named. It often provides the LESS experienced user with help in defining a complex search. The true advanced user will use commands in the search field.

January 4, 2005 – submitted by Soheil Abbasi of Iran

Generally people will scan the material from left to right and then down. However you can change this. People's eyes are attracted to movement, dark areas, visually complex areas, and highly saturated colors. People's eye track will also be affected by the grouping and apparent logical flow of material on the page. There is research showing very different scanning patterns between types of sites (news, eCommerce, etc).

People do an amazing job of visually scanning to obtain the information of interest. We foul this up with flashing banners and illogical layout.

These are a few of the basics, but it is truly an art form to consider and optimize the user's visual scan.