Ask Eric: Questions & Answers

November 26, 2002 – submitted by Erin Bradner of San Rafael, CA

Question: I'm having a usability problem interpreting Bob Bailey's November 2002 article on line length. All of the references in the article refer to line length in inches, but line length will change depending on the monitor size and resolution. I am very interested in these findings, how do I interpret them? What is the screen size and resolution. ALSO: a line of 12 point text in MS word IS NOT THE SAME length as a line of 12 point text in the same font in Photoshop although they print the same. If you discuss the font size, please tell me the presentation media/application you're using to measure.

Eric's response: Good point. I think it is better to use "characters per line" in gauging width of text. This solves the problems you have identified. For optimal reading speed use 100 character wide columns. For optimal user preference use 55 character wide columns.

September 25, 2002 – submitted by Brian Melancon of Houston, TX

Question: What is the Web standard for table header and data alignment when the data types are mixed (text, numbers, date/time, etc.)?

Eric's response: With tabular data, left align the data, with the exception of numeric fields which are being compared (e.g., dollar amounts). These numbers should be right aligned. The headers should follow the alignment of the data in their column. There is one odd situation where the field label is long and the data is short. This can look odd, and might make one want to center the column.

August 14, 2002 – submitted by Clare De Cleene of Washington, DC

Question: Help! We are currently redesigning our Intranet site and are grappling with the issue of when acronyms should be used and when not. Sometimes we need to be aware of new employees who may not understand an acronym. Sometimes we think a specialist audience will be using some pages and they work better with acronyms. Are there any guidelines we should follow? Is it acceptable to use an acronym and then have the complete term display in a mouseover?

Eric's response: If an acronym will be a WORD for 90% of your user population you MUST use it. For example we would not abbreviate International Business Machines as INTER. IBM is a word for most users. There are even acronyms that many know, but they may not even recognize the words. For example TCP/IP is often understood, but the words are not known.

However, in general avoid using acronyms. They are non-mnemonic and people misinterpret them. If you decide to use one because most users know it and use it as shorthand, then define it the first time you use it. Use the conventional method please, with parentheses.

VOPAR (Vendor Oriented Payment and Reporting)

August 5, 2002 – submitted by Meny Lev-Sagie of Jerusalem, Israel

Question: We are trying to improve the way a medical decision support system presents its output, while allowing the user to perform his other tasks of using the system to document his actions, etc. Instead of modal pop-up dialogs that we sometimes use, suppose an alternative specific area would be used to display a list of suggested items. What options do you see for us to use a small screen area to show a considerable list (up to 20-30 items)? One idea we came up with is a running text banner window – like news headlines. How effective could that be? Is it better to rather hide the suggestions behind an indicator button?

Eric's response: A titled area of the screen is OK for monitoring secondary information. It is used extensively in the financial arena (for brokers and market makers who watch the market move on a screen with many tiled displays). It allows the users to maintain situational awareness. However, it is NOT good for critical alarms. The data is likely not to be noticed fast enough. It is also not good for supplemental task information (like online glossary or help) as it permanently takes screen real estate. For critical and time sensitive alarms use modal popups with auditory alarm. For supplemental task information use popups, which will go away and not take screen space.

You could put the 20-30 lines in micro-flyspec font and it will fit in a small tiled area. Unfortunately it will not be legible. You could scroll the tiled area. However at that point the data is not continuously displayed. Continuous display is probably the whole point of the exercise. Consider using a graphic presentation of the data. You might also consider textual aggregation of the information. So have 4-5 lines or numbers that indicate what is happening in the 20-30 lines.

June 14, 2002 – submitted by Emily Mueller of USA

Question: I am working with a team to design a customer-facing self-service Website, and a debate has come up regarding the terms "my" and "your". We will have several sections of the Website that are personalized, but we can't decide which pronoun to use (i.e. "My Account" or "Your Account"). Is there a standard that we should use or is it just a matter of personal preference? What is your preference?

Eric's response: In particular, the term 'My' has been quite overused in personalized Web sites. I have seen menus and headers that simply put 'My' at the head of each item. It is a silly waste of space. If you are going to have an optional personalized section you might use 'My' ONCE in the title of the section to indicate it is customized. I would use 'My' instead of 'Your' because 'My' is more widely used in that way and is also shorter.

I will also throw in a caution that few users are interested in filling out forms or doing other work to customize a site. It is better practice to design the site right the first time instead of hoping the users will do the design work for you. Personalization of this type is only likely to succeed in sites that are used EXTENSIVELY for a long period of time. Instead, use more subtle personalization that the user need not actively set. The best personalization is never noticed by the users.

May 31, 2002 – submitted by Erwin Van Trier of Wylie, TX

Question: Is there a difference between login and sign in ? A lot of times you see links like "click here to sign in" and then the first data you need to provide is the login field.

I see login as an action to validate a userid and a password. A lot of times the term "login" is used for the userid or account.

I also would like to know what is the opposite of login. I found terms like "log off", "logout" and even "disconnect" (should be used in combination with connect).

Eric's response: There is a phenomenon in design I call 'Out Subtling Your User'. So many times designers come up with some feature that is very cool and subtle. The designer is excited about it. But the users never notice. There is no practical difference between Login and Sign In. If you make one up it will be your own private joke. The ONLY useful principle is to maintain consistency. So if you use "Sign In", then have the button say "Sign Out". If you say "Login", then have the button say "Logout".

May 27, 2002 – submitted by Hal Pawluk of United States

Question: Re: the 'Ask Eric' Question 'What is your opinion concerning "liquid" design? Any compelling reasons to adopt this to allow pages to scale to any resolution if you do not know your user's system?'

I like part of your answer to that: "Making the page resize to match the current screen size is a very good strategy."

However, you blow it in the implementation on your site and the "good example" you reference. In both cases, I have to scroll horizontally to see all the content because you don't use liquid pages.

You say: " We design for 800x600 resolution..." and while that may well be a good choice for your own software, it's not a good choice for a Web site.

I can see why you picked that number. Most monitors sold today are at least 800 x 600. Further, it you take a look at Web stats, you're likely to find that 95% of the visitors to any given site have monitors that are 800 px or wider. That's good data, but it's the wrong data for Web design.

The problem is that a large number of surfers do not maximize their browsers. Readability on the Web is worse than in print, so many surfers use a narrower window to get the line size down. The basic print design rule, by the way, is 1-1/2 to 2-1/2 English alphabets, or 39 to 65 characters per line.

You can see some sample browser and monitor stats here. This is a demo and they reset to zero at the end of the month, but currently they've got a fairly large sample size. Out of the measured 52,000+ surfers, over 90% have monitors 800 px or larger, as expected.

For Web design, though, they also provide stats on browser widths. In this case, 19% of the visitors have their browsers set to a width of 699 pixels or less. The measurements are for a gaming site, and gamers tend to maximize their browsers. On regular business sites, the number is usually quite a bit higher.

The bottom line is that 800 px is probably a good choice for software designs because you have a captive audience and can set the width to anything you want, but for the Web, you need to decide if you want to annoy and alienate 20% or more of your visitors.

Eric's response: Actually, the optimal reading speed is at 100 character length text lines, though people do like the 55 character wide text better.

It is absolutely good practice to design for 800x600 and then use liquid page design and other methods to avoid horizontal scrolling for viewers with lower resolution.

The HFI site is interesting. Note that our target users are people in the development community. They tend to use higher resolution displays. I think we may be being a bit conservative with our 800x600 resolution. The general point is that we need to examine assumptions like resolution for each user population we design for.

May 10, 2002 – submitted by Anonymous

Question: Is there a standard or best practice when it comes to formatting phone numbers for Web pages?

Eric's response: In the USA and Canada, if you are displaying phone numbers use:

Home: (212) 555-1212

If the user is entering a phone number in a form, use a single field entry. Do NOT break the number into three separate fields. Accept and remove blanks and other separators.

International phone numbers are a different issue. If it is critical, you need to know the specific country and then format for that country. Otherwise leave a large field for the user to enter what they want.

April 1 , 2002 – submitted by Len Conte of Northboro, MA

Question: I took your Web design course in 1997 and your UI design course years before ...I still refer to those notes :) I am interested in research and guidelines for selecting a good set of colors (6-10) from a "Websafe" palette for the display of multiple lines on line charts, multiple bars on bar charts, and stacked bars on bar charts. (We have the ability to code redundant cues as symbols on the line charts... we don't have a way to pattern the bar charts or stacked bar charts)... I'd also be interested in research and color recommendations for chart background colors and gridlines on these graphs.

Eric's response: Thanks Len. We love knowing that our courses make a difference. There is a rich literature on color coding. First it gets hard to have more then 6 color codes that people will recognize. Your suggestion of 10 is pushing the envelope.

When selecting colors you have two issues. First, the user must be able to discriminate between the colors. This is an issue when both colors appear together. But it far tougher if the colors are NOT show together. We are pretty good at comparing two colors shown together. We are much worse at independent identification. To make it easy to discriminate between colors be sure to pick ones that differ widely in hue (frequency), brightness (intensity), and saturation (how much of a pastel it is). You can also pick colors that are less likely to create trouble for color deficient users.

The second issue is the semantic content of the codes. Colors have associations. For example, we use green for 'Go' or 'OK'. We need to pick colors with the right associations. This can make them easier to interpret and remember.

March 5, 2002 – submitted by Shane Jewitt of Rochester, NY

Question: Hi Eric, I attended one of your seminars last year "How to Design Effective Graphical User Interfaces" as part of a retraining phase for my job. My background is in graphic design, specifically printed collateral and now I'm dealing with screen graphics. My question for you deals with contrast deficiency. You recommend on your Web site to give text and its background a 90% contrast difference between foreground and background in order to read text clearly. How does one go about measuring this?

Eric's response: Hi Shane. You need a 90% difference between text and background in order to avoid degradation in legibility. This can be measured by a light meter in lumens. However, be aware that this rule holds for black and white only. Color is complicated by the differential sensitivity of the eye to colors. So red and blue look relatively dark. Yellow and green appear brighter. So pure blue text on a black background is bad because the blue will appear dark and you will have insufficient contrast. Measuring this gets complicated and interacts with user types (the lens of the eye yellows with age accentuating this effect). Bottom line, LOOK at the design you create and make sure you have plenty of difference between character and background brightness.

January 16, 2002 – submitted by Subrata Basu of Toronto, ON

Question: Hi Eric – I attended one of your seminars last year and that really helped me to understand the importance of usability. Currently we are facing such an usability issue. We publish on our Intranet a lot of "Policies and Procedures" type of html documents for our organisation. These documents are read very often by our employees but they mostly look for changes made in the document. The software we use keeps track of the changes made in the document and marks these changes with an "Underline" and makes it "Green". With this marking it is easy to find out small changes made in a paragraph but when a couple of new pages are added in the document, it becomes difficult to read. Some of the text in our documents are already in "Red" so we cannot use that to mark these changes. Do you have any suggestion?

Eric's response: Try a vertical mark down the left margin of the page to indicate the area changed. This does not show the specific words changed, but it will eliminate the clutter problem. Also, the green unerline may look too much like a link. If you need to have the specific words indicated, consider a switch that allows the user to reveal the underlines to indicate the changes made.