Mental model disconnection

I was looking up a website for a local bathroom renovation company. This image was on all their web pages:

A cooktop and range hood just don’t fit my mental model of a bathroom, so I checked their entire website to see if they did kitchen renovations as well, and found NOTHING to indicate that they do. Their business name clearly states that they do bathroom renovations.

Which leads me to wonder WHY they have an image of a range hood and cooktop on their bathroom renovation site. Did their web designer just grab any image from the internet and plonk it there? Or do they do kitchen renos too, but they’re keeping that service hidden for now? Or did no-one who signed off on the website notice that the image doesn’t match their business name and service offerings?

The problem with this mental model mismatch is that I now don’t trust that this company would take the care required to do a bathroom reno for me (not that I want one now, but that’s not the point). Any trust I may have engendered from looking at their website text and testimonials has been reduced by this cognitive dissonance.

Bottom line: Trust is jeopardized when the images and text (and business name in this case) on your website don’t match. If your prospective customer sees that you can’t get that right, then they won’t trust you to get their job done right either.

Or maybe that’s just me…

Strange error message

The other day a retailer gave me a web address (mercator.com.au) to check for a product. I entered it into Firefox–without the ‘www’–and got this strange (almost rude) error message:

Nothing on the page was clickable and there was no indication that I needed to type the ‘www’. So, because I’m a determined little bunny, I then added the ‘www’ bit (www.mercator.com.au) and this time I got the correct site.

These days, browsers like Firefox etc. normally resolve the ‘www’ bit and add it automatically, but not in this instance. Back in the day, it used to be that an address without the ‘www’ and one with the ‘www’ had to be linked (by the domain host?) so that they would resolve correctly, no matter what the user entered. Obviously that didn’t happen in this case, but the web developer did take the time to write this error message — I think that time would have been better spent making sure that the non-www URL resolved correctly.

[Links last checked January 2013]

Office 2010: Paste Options button not displaying

I have a new computer and I’ve installed Office 2010 on it. I was setting up a template for a client over the Easter weekend when I noticed that the hovering Paste Options button in Word 2010 never displayed and all I could get on the Paste icon on the ribbon was ‘paste as unformatted text’. That’s not usually a big deal as I often want to ‘paste as text’, but not always.

I compared my Word 2010 settings on my new Windows 7 PC with my Word 2010 settings on my Vista laptop (which did have the Paste Options hover button); the settings were EXACTLY the same, so something else was at play here.

Off to my friend Google, and after a few fruitless hits, I found the solution… and it’s not what you’d expect! In fact, it’s so far removed from what you’d expect that I’m surprised the person who found the answer even twigged that a small setting in Program A might be affecting a small setting in Program B (Word 2010 in my case, but all the Office 2010 products too).

And what’s the solution? A Skype add-on to all browsers that makes a phone number clickable to make a Skype call! Who knew??

So here’s what I did to get my Paste Options button back:

1. Closed Word 2010.
2. Opened Skype, went to Tools > Advanced > Advanced Settings and cleared the check box for Use Skype to call callto: links on the web. (I’m not 100% sure that this did anything, but I figured I should turn it off anyway.)
3. Opened Firefox and went to the Add-ons Manager and disabled the Skype Click to Call add-in. Restarted Firefox when asked to do so.
4. Opened Internet Explorer, clicked the settings icon (cog in top right of screen in IE9), selected Manage add-ons, selected Skype Click to Call and then clicked Disable. I didn’t have to restart IE9.
5. Opened Word 2010 and tried pasting some text from another source. It worked! I had my Paste Options button back!

Please note: You have to disable this add-on in ALL browsers on your computer, including IE, even if you don’t use IE. I initially only disabled it on Firefox but I still couldn’t get the Paste Options button to display. I had to disable it on IE9 as well. Then it worked.

I found the solution to this issue here: http://answers.microsoft.com/en-us/office/forum/office_2010-excel/solved-excel-2010-word-2010-powerpoint-2010-paste/f293995c-c52c-458a-86d6-da41e81d507f

I sincerely thank Martin who somehow figured out that a Skype browser add-on was affecting a setting in Office 2010. That was a moment of pure serendipitous genius.

Too many steps

I needed to unsubscribe from an email newsletter. Easy enough, you’d think. You just click the Unsubscribe link at the bottom of the email, which typically takes you to a web page that tells you that you’re now unsubscribed, and sometimes gives you the option of resubscribing in case you made a mistake.

Not this time.

I clicked the Unsubscribe link at the bottom of the email, and a web page opened:

What the? I had to click another link??? So I clicked it. And got another web page displayed:

Now I have to check my email??? And what’s the language box for? (I selected a different language and didn’t get the message displayed in another language — instead I got ANOTHER web page where I could subscribe!).

When the email came through, I got this:

Sheesh! I had to do about six steps/clicks/actions just to unsubscribe from the email list. It should’ve taken two steps at the most — click the link in the email, then either click a confirmation in the webpage OR, even better, just see a message that I’ve been unsubscribed and close the web page.

This process is in need of a serious makeover.

How long?

I’ve been part of several web application and website developments, as well as worked for numerous software companies. In all cases, we’ve spent a lot of time testing the new app/site/software in a test environment. There’s all sorts of testing that happens with the developers before the code gets put together for overall internal development testing, then it’s released to others in the company, before being released to a select group of beta testers (users). Only after LOTS of rigorous testing in several development environments (internal development, alpha, beta, user acceptance testing [UAT], and perhaps others), does the app/software/site get released to production and then to the public.

If it’s a website, then a copy of the site is worked on on an internal web server at first, and then in the real web environment, but that URL is never made public until it’s time for release.

Anyhow, that’s my experience over the past 15+ years. So I was surprised when a site I visit regularly had this on its home page about a week ago:

This message concerns me for several reasons:

• There’s no date on it as to when the message was first displayed, therefore anyone visiting the site has no idea what ‘a few weeks’ means.
• What’s ‘a few weeks’? One week? Two? Four? Ten? Never?…
• Whatever happened to testing in a protected environment while keeping the existing site running (it didn’t seem to be broken when it was up)? Perhaps add a message to the existing site to say that a new site is coming soon, but leave the functionality up.
• This site invited sellers to sponsor them by displaying a small ad on the left and right of the main content. There were a lot of sellers, all of whom would’ve paid money for xx weeks of ad exposure. What happens to them? Do they get their money back if their ad campaign was stopped before it had run its course?

If you’re going to revamp your website/app/etc., then:

• test it thoroughly in a development environment, while keeping the current site up
• perhaps let users know that a new site is coming, but DON’T take down the site entirely, unless you’ve gone out of business. You’ll lose paying customers (ad campaigns) and readers.
• provide a way for readers/advertisers to be notified when the site is back up and running. If you don’t, readers will find somewhere else to go, and will forget about you — if you have to take the site down completely, as in this case, you need  have some sort of form where they can sign up to be notified when the site is back up. (BTW, this site had an option for entering your email address to be notified when it was back, as well as options to follow them on Twitter and Facebook for updates.)

[Link last check February 2012]

Clever!

Seen on Facebook:

If you set a limit, then set it properly

I needed to report a software installation issue to my client’s IT service desk. If it’s urgent, I’ll call them, but this wasn’t urgent, so I followed protocol and went to their web form to log the issue.

And here’s where it got annoying — the Details field had a limit of 500 characters. They told me so in the user assistance next to the field (thank you!). They also told me after I’d written my description and clicked the Submit button. BUT… I wasn’t prevented from entering more than 500 characters!!

The field let me type in well over 500 characters, and it was only when I clicked Submit that I found I’d exceeded the limit. There was nothing in the error message to tell me how many characters I had entered, so I had no idea how many I had to cull. And when I was typing my issue description into the field, there was no counter to let me know I only had, say 23 characters, left.

Fortunately, I’m familiar with the word and character count function in Word, so I copied my text, pasted it into Word and checked to see how many characters I’d typed — it was some 650. So I culled. Then checked the character count again. And culled some more. Then checked again, and culled more… Until I got to 495 characters. I then copied the text from Word back into the web form and submitted it.

Sheesh! It shouldn’t be that hard!

• Why did the form allow me to enter more than 500 characters in the first place?
• What’s with the 500 character limit anyway? That’s only about 70 words, which is not a lot when you’re trying to describe a computer problem.
• Why didn’t the error message tell me how many characters I’d entered so that I didn’t have to copy the text into another application and find out? How would other employees get on who would have no clue that they could check this in Word?
• Why didn’t the error message or the user assistance tell me that ‘characters’ included spaces, punctuation and the like? I know this because I’ve worked in and around software companies for the past 20+ years, but many of my client’s employees wouldn’t have a clue (they are oil and gas people, not software people).

So, user assistance is a fine thing and they got full marks for that. But the way that they informed the user that they’d exceeded the character limit needs a lot of work. For starters, the designers of the web form could do one or all of these:

• stop the user from entering any more characters into the field once they’d hit the 500 character limit
• implement a progress count of the number of characters entered as the user is typing (e.g. TweetDeck does this for 140-character limit Twitter messages, WordPress does it by number of words at each draft save)
• tell the user via the error message how many characters they’d entered so they know how many to cull
• tell the user via the error message and/or the user assistance that ‘characters’ includes spaces, punctuation, etc. as well as letters and numbers
• reconsider the 500 character limit and increase it to, say, 1000 characters
• get a technical writer or editor to rewrite the error message so that it’s understandable to non-techies!

It’s not the only problem they have

I received an email at work yesterday regarding disruptions to Perth’s rail system.

Well, from the look of the email the trains weren’t the only thing not working for Transperth — the file links (highlighted in yellow in the screen shot below) in the email aren’t working either!

My guess is that these missing ‘filenames’ point to locations on an internal–not public–server.

Never a good idea…

Test your web forms!

I tried to sign up for six free months of a digital magazine the other day. There were only six fields to enter, yet despite the small number of fields, I suspect this online form had never been tested. Why? Because there were two glaring errors in it that jumped out as soon as I tried to sign up.

• Error 1: Not telling me which fields were mandatory. There were no visual or textual indicators to tell me that all the fields were mandatory. Nothing. No red asterisks, no explanatory text. Nothing.
• Error 2: Giving me incorrect error message when I didn’t complete a mandatory field. When I see a form that doesn’t tell me which fields are mandatory, I deliberately try to enter as little personal information as possible. There are two reasons for this — keeping stuff private that I don’t want to disclose and that I don’t think the company that’s asking needs to know, and checking if the form’s design team actually tested the form and put in appropriate validation error messages.

I entered everything except my surname. When I clicked Submit Details, I got an error message telling me that I had to enter my first name. What the…? I’d already entered my first name — it was my surname that they wanted, yet that’s not what the error message told me.

But I've already entered my first name!

How hard is it to test SIX fields? Here’s the answer — it’s not hard at all! I’ve done it and it takes very little time. And how hard is it to use some of that white space to indicate that the fields are mandatory? Again, not hard.

Web developers have been designing online forms for 15 or more years now — there’s just no excuse for getting this simple stuff wrong.

Is the website ready for launch?

Andy Wickes, over at Boagworld, has written a nifty list of things to check prior to the website you’ve been working on for weeks or months ‘going live’.

His extensive checklist is sorted into these categories:

• Copy (this is where a good editor — preferably one who is external to the project — is worth their weight in gold as they’ll see things that you can never see because you’re too close to the content)
• SEO (Search Engine Optimization)
• Standards and validation
• Site functions
• Security
• Performance
• Legal
• Icons and error pages

You can read all the details, with specific checks for each category, here: http://boagworld.com/business-strategy/pre-launch-checklist/

[Link last checked July 2011]