Unfortunate word wrap

I make fabric things in my spare time, and sell some of them on Etsy.com (http://RhondaMadeIt.etsy.com). I also participate occasionally in Etsy’s forums.

Recently, Etsy changed some of their web page design, and now I get this no matter how I resize Internet Explorer:

I think it should say ‘Forum Title’…

[Links last checked April 2010]

Excellent resource on typography

Saw this on my Twitter feeds: http://www.typographyforlawyers.com/

What an EXCELLENT resource for anyone who writes, not just lawyers. Sections 8, 9 and 10 go into detail about things such as hyphenation, font choices, use of all caps and small caps, kerning, line spacing etc.

[Link last checked April 2010; thanks to @charjtf for Tweeting this link]

Multiple products in the one manual?

Should you document multiple products in the one user manual? Or does it just confuse users?

This question was prompted by a blog post I read recently (I like R-ing the F-ing Manual: http://www.merebagatelle.com/index.php/2010/04/wtfm/). The author stated that he hates manuals that try to cover all product lines in the one document — he finds them confusing and of no use when he is looking for specifics about the model he’s purchased. And he’s frustrated by the endless safety warnings and the input that lawyers have on these.

Normally, I wouldn’t have responded to his plea for a manual that just covers a single product. However, only two weeks ago I purchased a Sunbeam electric blanket for our new bed. And reading those instructions was frustrating and confusing!

Why? Because they covered general safety precautions (2 full pages + a loose leaf page), then SEVEN different types of blanket and 24 different models — all in a 20 page booklet. You can view a PDF of this manual here: http://www.sunbeam.com.au/PDFDownloadHandler.ashx?id=11047

In addition, there were sections that were general to all types and models. These were before AND after the specific model information. Some of the specific model information was common to all models, yet wasn’t in one of these general sections. For example, every model included the same subsection wording  for SleepPerfect Technology and Cosy feet heating — this could have gone in with the general information about all models. Every model had a similar subsection for Detachable controls and Dual controls (there were some minor variations in wording for some of these).

Even my cursory analysis of this content highlighted several areas of repetition. A full analysis would no doubt highlight more. The information for the specific models may have been better placed in a table or matrix of features, with supporting notes — if required. That would have saved on paper and would have made reading this manual much less confusing. Instructions for fitting and using the blanket would have been clearer with numbered steps.

With today’s authoring tools that allow for all sorts of single-sourcing, the use of variables, variants and the like, there’s no reason (except printing costs) why there should haven’t been a different manual for each type of electric blanket, even if there wasn’t a separate one for each model.

Alternatively, if printing costs are so prohibitive, then spending a little more time and money on information/content analysis could pay for itself in reduced printing costs (replace nine specific model pages with a feature table/matrix on a single page), better readability, better usability and better comprehension.

BTW, many technical writers/communicators and/or content strategists can do information/content analysis of your existing documentation. You might even have one on staff…

See also:

• What makes a content strategist?: http://scattergather.razorfish.com/612/2009/05/29/what-makes-a-content-strategist/
• Why you need a content strategist: http://boagworld.com/site-content/content-strategist

[Links last checked April 2010]

Practising what you preach

Bottom line: If you’re going to write articles and create a website all about the user experience (UX), especially the UX of websites, then at least make the site usable and readable for as many users as possible.

One of my RSS feeds displayed an article from the 52 Weeks of UX website. The problem: I could hardly read the article — the image on the left took up much of the space, and the text column on the right was not fluid, i.e. it didn’t reflow the text as I resized the browser window.

I thought the problem was with my feed reader, so I opened the page in Firefox. Same deal. The right side was cut off. I have dual 19″ monitors rotated into portrait mode, but I still had to stretch the browser window a long way across the two monitors to read the article’s text without using the horizontal scroll bar.

Next I checked the code, looking for a link to the CSS file. And to my absolute surprise, I found that the CSS was incorporated directly into the HTML page. That may be because this is a blog-style website. So next I checked the almost unreadable CSS, finally finding the culprit — a fixed 525 px width for articles (.entry-content div, in case you go looking).

This site would be even worse on a small form factor device, such as a cell phone. That fixed width is the killer.

BTW, I also noticed a typo in the keywords — that’ll make it hard for some search engines to find…

[Links last checked April 2010]

iTunes showing up in German

I’m our household’s resident geek. If my husband gets stuck with his computer, he calls me. Well, he’d been complaining that the text he sees in iTunes was all in German — and neither of us read German! I checked the preferences in his iTunes desktop app. There’s a language setting under Edit > Preferences. It was already set to English (US), so I got him to change it to English (UK) just in case the selection needed to be refreshed. Then, following the on-screen instructions, he closed down iTunes and restarted it.

That didn’t fix it. However, I noticed that the iTunes app toolbar etc. was in English — and had been all along. The German text was in the iTunes Store section in the middle.

Off to Google… where I found that there are TWO language settings you have to change — one for the app (which we had already done, above), and one for the store. To change the one for the store, scroll to the bottom of any page in the store. On the bottom right, you’ll see a flag. Click the flag and choose the country/language you want. Problem solved — no more German text!

However, what my husband did find was that the information available to him from the Australian version of the store and the German (or other language) version of the store was different in some respects. He’s a bit of a ‘music detective’ in that he hunts out things like album credits, times for songs, release dates etc. so he’s interested in all that stuff — and that’s where he noticed differences. Now that he knows he can change the store’s country/view, he’s got has another little world to explore when hunting down such information. So that’s a bonus — I think…

BTW, Apple have documented this language issue in their knowledge base, which is where I found the answer: http://support.apple.com/kb/HT2242

[Links last checked April 2010]

ANZAC Day

On April 25th, Australians and New Zealanders the world over will remember those who died in the various wars. The original ANZAC Day was April 25, 1915 — the site was Gallipoli in Turkey; the result was slaughter. During WW1, Australia had a population of 5 million; some 420,000 fought in WW1; and some 60,000+ died, many at Gallipoli.

I’d like to share two songs in remembrance of those who were injured or who died in the various conflicts and wars, and the families left behind:

• And the band played Waltzing Matilda (Eric Bogle; lyrics: http://ericbogle.net/lyrics/lyricspdf/andbandplayedwaltzingm.pdf):
  
  BTW, a ‘matilda’ is a pack/swag, and ‘waltzing matilda’ was a term from the late 1890s and early 1900s to describe those who had no work (depression of the 1890s) and who roamed the countryside looking for food and work.
• I was only 19 (Redgum; lyrics: http://www.schumann.com.au/john/lyrics.html):
  

Also, if you’ve never watched Gallipoli — the Peter Weir movie starring a very young Mel Gibson — do so.

[Links last checked April 2010]

A $20K proofreading error

Oops! (from: http://news.bbc.co.uk/2/hi/asia-pacific/8627335.stm)

Awesome Help!

When we moved house a couple of months ago, we upgraded our TV system to a high-definition big screen TV and, as part of our Foxtel (cable/satellite) subscription, we decided to include the Foxtel IQ2 as well. IQ2 is Foxtel’s answer to Tivo and PVR/DVRs. And I love it! It’s SO much easier than setting up programs to record on VHS (our most recent technology before the purchase of the new TV system!).

With the all stresses and amount of stuff to do when moving, followed by my trip to the US only a few weeks later, I hadn’t had a chance to really get to know more than the basics of the IQ, or the Foxtel electronic programming guides. But on the weekend I rectified that. I sat down and watched their Help channel. I expected to be bored, but instead I watched it all the way through!

This Help was GREAT. It was an animated demo complete with excellent and clear callouts for things you press, things you need to look at on screen etc. The narration was excellent — soothing, but informative and without any hint of condescension. The Help runs on a 45 min loop, so you can go back to it at any time, and you can record it so you always have it ready to go from the beginning. I learned a lot about how to do things with the IQ, like record a complete series, view the TV guide for a channel for the next few days, add 20 minutes to a program you think might go overtime (such as NBA finals).

Almost the entire Help was visual — I can only recall text being used for the section menus and titles. There’s a lesson in there for those of us who write Help, particularly for products and software…

But the main reason this Help was awesome was because it answered questions I didn’t even know I had and improved my understanding of this product immensely. Well done, Foxtel!

For a taste of this Help, go to http://www.foxtel.com.au/discover/video-tutorials/default.htm and view the On-screen TV Guide video.

[Link last checked April 2010]

Critiquing the UI of a web form

A few years ago I was asked to critique the user interface (UI) and layout of a web form for a client. It was a simple form requesting product support.

Below is a screen shot of the form (I added the numbered callouts), followed by the comments I submitted to the person who requested my feedback.

My comments about this form

1. Labels:
   • Contact Name: Change the label to just “Name” (KISS principle!)
   • Phone: My first thought was that ‘country’ here referred to the country where I lived, then I realized it was the phone code for the country. It was only a second’s hesitation, but it made me stop and think (remember: ‘Don’t make me think!’). So I think the explanatory text needs rewording so that it’s clearer. Perhaps: “Phone (with country and area codes)”??
   • Subject: I think this box needs to be a little longer, and I believe that it should be a required field too.
   • Description: This box should be longer — at least 10 lines long (currently about 3). Does a vertical scroll bar appear if users type more characters than the visible box holds?
   • Severity: The help text about calling should be separated by at least a full stop, but preferably some other way of dealing with this. Maybe smaller text (if possible?), and positioned to the right of the selection box? Instead of a link for “What is this?” perhaps make the link on the word “Severity”.
   • Can you repeat the error?: Another one that made me hesitate. I thought you wanted me to restate the error. But what you’re asking is if I can replicate it — i.e. can I do the same steps again and again and get the same result each time. Perhaps reword to “Can you replicate the error?”
   • List other applications…: Spelling error — it should be “occurred”.
2. Required fields: Indicating required fields with an asterisk (*) is good! But the asterisks are way over on the right, and for the Description box, the asterisk is near the bottom of the box (the others are near the top). Another method is to put the asterisks next to the words (right or left) or on the left of the boxes. Perhaps try different placements.
3. Severity field: I have a problem with this Severity field — the only options [not visible in the screen shot] are Low and Medium, yet when you click “What is this?” the page that opens lists FOUR options. You’ve sort of dealt with “Urgent” in the user assistance text, but what does a customer do if they deem their problem to be High severity? They have nothing they can select and no option but to either deem it Medium or call the Support line even if they think it isn’t Urgent. I think that ALL four options should be listed in the box. If you want to leave Urgent out of it, fine, but include High. Also, the descriptions of the levels opens in the same window — does the data you’ve already completed stay populated in the fields when you return? If it doesn’t, that’s a really bad thing to happen! Suggestion: Make the page of the Severity options open in a new tab or window, OR make it open in a popup window of some sort. But separate it from the main form, especially if the form’s data does not remain on returning to that page.
4. Submit Enquiry button: I have two suggestions for this button:
   • Shift it to the right so it’s under the form fields, either aligned with the left or right edge of the “List” memo field, maybe even centered. But get it away from under the labels as it’s hard to find there.
   • Change the text to just Submit (KISS principle again).

   A question about what happens next — is there some sort of feedback to the user? E.g. a ‘thank you’ message, an auto email response detailing their issue, a page that displays their call’s details (with issue #, time/date of submission etc.)?

5. Phone number: I think that the phone number needs to be up at the top as an option they can use to log a call. Perhaps “Please help us to resolve your support enquiry by filling in the details below, or calling us on +61 x xxxx xxxx.” Actually, I have a problem with the top sentence as it stands too. Perhaps reword to something like: “Do you have a problem with your software or want to know how to do something? Contact our support team using the form below, or call us on + 61 x xxxx xxxx.”

Other comments about this form:

• “Enquiry” is British English; Americans use “inquiry”. So to avoid the arguments, why not replace the word “enquiry” with “issue” or similar?

• The vertical gap between the field boxes varies — they should all be the same. [I used a screen ruler to measure that the gap varied between 8 and 17 px].

• The width of the boxes varies too. Memo boxes are 280 px wide; field boxes are 260 px wide; and the selection list boxes vary a lot too (does their width reflect the length of the content?). My opinion: The select list boxes should all be the same width as each other; the field and memo boxes should all be the same width as each other.

For more on user interfaces, see these blog posts:

• Presentation: Techniques for reviewing a user interface: http://cybertext.wordpress.com/2009/07/08/presentation-techniques-for-reviewing-a-user-interface/
• User assistance in web forms: http://cybertext.wordpress.com/2009/04/08/user-assistance-in-web-forms/
• Interaction design principles: http://cybertext.wordpress.com/2009/09/16/interaction-design-principles/
• Designing a login form: http://cybertext.wordpress.com/2008/12/08/designing-a-login-form/

[Links last checked April 2010]

Word: Add a Back button to the toolbar

If you have a long Word document and need to regularly go back to where you made your last edit (e.g. where you were after scrolling), you can add a ‘Back’ button to the toolbar (Word 2003) or to the Quick Access Toolbar (QAT) in Word 2007. Here’s how:

Word 2003

1. From the menu, select Tools > Customize to open the Customize window.
2. Select the Commands tab.
3. In the Categories list on the left, select All Commands.
4. In the Commands list on the right, select GoBack.
   
5. Click and drag the GoBack command where you want it to go on the toolbar. The button is named Previous Edit by default. Don’t close the Customize window yet…
6. To change the name of the button and/or add an icon to it, click Modify Selection on the Customize window:
   • You can change the name by altering the text in the Name field (the & indicates the letter for the shortcut access key).
   • If you just want an icon (and no text on the button), select Change Button Image and choose the ‘back’ arrow (or any other), then select Default Style from the Modify Selection list of options.
     
7. Click Close.

Word 2007

1. Click the drop-down arrow next to the Quick Access Toolbar (QAT).
   
2. Select More commands.
3. In the Choose commands from drop-down list, select Commands Not in the Ribbon.
4. Scroll down the list and select Back.
   
5. Click Add.
6. Click OK.

Your new Back button is now on the QAT ready for you to use from any place in your document: