Design Guidelines: Transactional Email
Posted by Michael Gaigg
Feedback request to change my address
I usually try to balance positive and negative critique, but sometimes - and especially when I see really bad things - I just cannot help but mention it here as well. Latest 'incident' was a harmless email to my local government body with the intent to change my address.
Optimize your webpage to avoid emails
The reason I sent the email in the first place was that I couldn't find any form or document that would allow me to change my address online.
So, I tried to locate a tab or menu entry called 'contact' or similar (no luck), checked the footer (no luck) and eventually found the complete address with generic email (chief-on-duty@government) next to the logo - which showed me once more that users tend to look for certain elements in common places rather than even prominent locations.
Anyway, I figured this email address would do it and I shot my note to change my address. Here is the (automated) response:
Dear mail sender! The employee you have selected is out of office and can be reached again on June 29th, inquires will not be processed.
Wow, now what? Should I send my message again in two days (which I probably will)? Can I trust these guys to fix my address at all? Seems like there is no organization behind it. I have no chance to stop by because I'm out of the country but maybe I need to pick up the phone and call instead, how annoying. No big deal for a simple change of address but this slip can potentially damage your image and seriously reduce trust for other sorts of inquires, right?
Update: Today I received a very nice and personal response telling me that my address was updated. I will in return send a nice and personal note pointing out above issues. Let's hope for the best.
But now, here are the
Design Guidelines for transactional email
- Avoid being mistaken for spam.
- Enhance company’s reputation and increase users’ confidence.
- Be precise and answer all relevant questions.
- Provide recognizable brand name in ‘From’ field.
- Add clearly distinguishable transaction to ‘From’ field.
- Keep ‘From’ field shorter than 20 characters.
- Explicitely relate ‘Subject’ field to a customer-initiated transaction.
- Avoid unnecessary message sequences (e.g. transaction confirmation + shipping confirmation; order summary not necessary anymore).
- Start the ‘Content’ with the information that matters most.
Solution to my inquiry above
First of all, unless the whole department was moved, closed or is on vacation I would not expect a vacation response mail for an email sent to a generic address. Secondly, automated responses are ok if they state that a human response will follow promptly, usually within 24 hours.
What would have been a better response? Maybe: "Thank you, your inquiry has been received and will be processed by our team within the next couple of days. You will be notified once your request is processed or if we have further questions." And then some more specific information like contact names with alternative email and/or telephone numbers could follow. Maybe even some links that answer common questions or point the requester to common documents, be creative.
What are your experiences with transactional email?
How do you handle transactional email on your company webpage? What are your experiences? Any lessons learned (the hard way)?
References
- Nielsen, J.; Transactional Email and Confirmation Messages; http://www.useit.com/alertbox/confirmation-email.html
10 Webpage Design Lessons learned from a trip to Las Vegas… seriously!
Posted by Michael Gaigg
I just came back from an extended trip to Las Vegas, a fascinating city for a multitude of reasons. Not only is it the fastest-growing city in the US, it is also constantly transforming and reinventing itself, a Disneyland for grown-ups, gambling capital of the world, vacation spot for one and Sin City for others. It became evident to me that this city offers more than just pleasure, it teaches us how to attract, entertain and keep us happy despite the fact that we are loosing our money, which means they must be doing something right. Here are my 10 Webpage Design Lessons learned from a trip to Las Vegas... seriously:
1.) Don't Listen to Users
"What happens in Vegas, stays in Vegas", the motto of Las Vegas is a true #1 (who ever came up with that slogan is a genius in my eyes)! When asking your fiance/fiancee about his/her bachelor party ... pardon ... when designing an easy-to-use interface, pay attention to what users do, not what they say. Jacob Nielsen states that self-reported data is typically three steps removed from the truth:
- People bend the truth to be closer to what they think you want to hear or what's socially acceptable.
- In telling you what they do, people are really telling you what they remember doing.
- In reporting what they do remember, people rationalize their behavior.
Lesson: Perform user tests as early as possible (e.g. design phase).
2.) Optimize your Top Task
Drive-thru wedding chapel
Marriage is wonderful and so is the wedding day, at least mine was. Of course I blacked out the six months of preparation and swet that lead to that event. Now, Vegas wasn't Vegas without finding a way to optimize the wedding experience: A 24-hour drive-thru wedding chapel called A Little White Chapel Tunnel of Love. "Ahem, yes, Combo 2 with two wedding rings, a bouquet and the Elvis... can you make it 'Love me tender' please?" - "120 Dollars at the first window please."
Lesson: Identify and optimize your top task.
3.) Direct your Users
Sign post at the Paris Las Vegas
Once inside a Casino it is incredibly difficult to find your way out - I'm not certain but I would take any bet that exactly this is the purpose of a Casino designer. More than once I found myself in a maze of slot machines surrounded by their ringing noise and flashing lights. Whatever I was looking for (except ATM's) seemed always to be at the other end of the Casino.
Design your page in a way that helps users find their way around but at the same time support your business model, e.g. Amazon has perfected the process of returning articles and submitting online or email support request but made it really difficult to find a phone support number which would seriously compromise their business income.
Lesson: Create a logical Information Architecture; add links to related items; cross-reference articles.
4.) Make it Easy to Learn
Giant slot machine in Las Vegas
Casino games are mostly very easy to learn, don't you agree? It can't get any easier than inserting your bills, hitting the main button on the front panel or operating the lever to the side, wait until the reels have stopped spinning, compare the pattern of symbols on the reels with the possible winning combinations stated to the top of the machine and cash in the jackpot.
The actual difficult part is to get the people to play or use the machines. That's when the Casino offers free lessons and sections with machines that pay well, everything to get you started.
Lesson: Help novice users to learn and avoid frustration by offering easy entry tasks.
5.) Provide relevant and attractive Content
Donny and Marie at the Flamingo Las Vegas
Vegas has realized very early that sex-appeal and show makes a great combination, but it was limited to mostly the male population and that's when the city started to transform itself into a family-friendly, theme-park like vacation destination with Castles, Musicals, Rollercoasters in and around the Casinos, 3D rides and more. Free drinks, cheap buffets, Day-Spa's and a variety of other promotions added to the perfect experience. Attractive entertainment options could still be found at any corner in the form of bars, clubs and shows but lately I recognize a shift back to more go-go style entertainment in newly created bars in between the slot machines and tables. I guess the family-style hasn't really worked out.
Lesson: Create attractive content that is relevant to your target audience; test and adjust if necessary.
6.) Make it Easy to Enter
Casinos do everything to get you into their building. Almost free (two dollar tip is ok) valet parking allows you to drop off your car quickly and one-directional moving walkways (obviously you need to walk back) shovel you inside, that's where the music plays... Get the people where they want to be as quickly and easy as possible, show me the money!
Lesson: Avoid splash screens and flash intros; keep page sizes small.
7.) Avoid Windows and Clocks
There are two things you will never find in a Casino: windows and clocks. Right, nothing should distract your focus on the slot machines to the other wonderful Casinos outside and nobody wants to encourage you to make time-sensitive decisions (leaving the Casino early) by realizing how much time (and money) you have already spent during your visit.
Lesson: Avoid popup windows and time-sensitive triggers or forwarders.
8.) Make Sign-up Easy
Keypad to enter personal code
Even though 100% of players think they can win only 1% will win. The only safe way to win in Las Vegas is to sign up for a Players Club. Handing over your name and address to the Casino will in many cases give you an immediate bonus of 5 or 10 bucks in free slot play, discount coupons for drinks and shows as well as little Thank you presents (wink-wink, Tropicana gives you a free T-Shirt and a deck of playing cards). Gambling itself is then rewarded through comps like more gifts, free buffets, free hotel rooms, free show tickets and more. I'm 11 cards richer now 
Well, the sign-up process was easy enough, the only interaction with the clerk was handing over my drivers license and entering a PIN twice. Guess what, sure enough I always hit the Enter key after entering the PIN which wasn't very well received by the system and the clerk. I don't even know why I ended up apologizing. Why in the world can't the system take care of that? Another day, another Casino, another Keypad, yes, another keypad, it was an actual computer keypad which is reverse to an ATM keypad and thus reverse to ALL the other keypads. Try your ATM PIN on your keyboard right now ... exactly!
Lesson: Anticipate input errors and handle them gracefully; use common and widely accepted interfaces.
9.) Monitor User Behavior
by ph0t0 {loves you too}
There is no way one could walk into a Casino and cheat undetected. The famous 'Eye in the Sky' is omni-present. 24/7 'Surround'-Surveillance captures every movement, every face and every deal. That doesn't really worry me as long as they keep on bringing the free beer. It is clear that this kind of monitoring helps the Casinos to optimize their winnings not only by preventing cheats but also by detecting patterns in playing behavior and machine pay-out/malfunctions. I don't see a threat in it as long as my face isn't connected with the data collected.
Lesson: Use Server Traffic Log Analysis and Search Log Analysis to optimize your website.
10.) Make it Sexy
Google street view sighting
Sexy is probably the attribute I hear most often lately, it's not 'slick' or 'beautiful' anymore, it's 'sexy' now. That's fine with me if only I knew what that means. Any ideas? Send them to me...
Anyway, what would be a blog about Vegas without mentioning sexy at least twice, huh?
Cheers and good luck!
Design Guidelines: ‘About Us’ Page
Posted by Michael Gaigg
Example of an 'About Us' page from IT Solutions
There are many reasons for improving the usability of your 'About Us' page. Unfortunately many companies, especially bigger and well-known companies, tend to underestimate the value that comes from a well-designed 'About Us' page or simply assume that there is no need to explain themselves to their users.
The 'About Us' page helps to establish and re-enforce Trust and Credibility. Users of different backgrounds may need to know who is behind the content or service. Should I invest in this company? Apply for a job? Write an article about their service? Order a product?
The best news over all is: a simple link on your homepage is cheap and easy and the benefits of a clean and well-structured 'About Us' page outweigh many times the effort of creating it.
Design Guidelines for 'About Us' pages
- Provide clearly visible link on homepage
- Label the link either “About ” or “About Us”
- Present content in ‘inverted pyramid’ layers:
- Tagline: Few words or brief sentence summarizing what you do
- Summary: One to two paragraphs about goals and main accomplishments
- Fact sheet: Section that outlines key points and other essential facts
- Details: Subsidiary pages providing indebt information about processes, company structure, philosophy etc.
- Disclose address
References
- Nielsen, J.; About Us Information on Websites; http://www.useit.com/alertbox/about-us-pages.html
Design Guidelines: Content
Posted by Michael Gaigg
When writing content for the web it is essential to speak the language of your users. Become a word detective, use google trends. Words are the basic elements of links, get them precisely right to provide strong information scent. Identify trends, don't invent them. Look at the evolution of language.
Get to the essence of the message! Stop 'waving' on your webpage ('Welcome to the webpage of our company. We are proud to blah-blah...').
Always remember that the user is in charge, the user is impatient, nasty, demanding, in a hurry and in control to spend its time somewhere else (according to Jakob Nielsen: 'Users spend most of their time on other sites'). Online marketing is about giving attention (versus offline marketing is about getting attention).
Design Guidelines for Content
- Make information easy to find with clear headings and meaningful sub-headings (not ‘clever’ ones).
- Break up the information into manageable pieces.
- Put the pieces in a logical order for your readers.
- Keep your sentences short and employ one idea per paragraph.
- Use the ‘inverted pyramid’ style: conclusion (context) first, results later.
- Talk to your readers. Use "you".
- Write in the active voice (most of the time).
- Put the action in the verb, not in the nouns.
- Use your readers' words.
- Use half the word count (or less) than conventional writing.
- Use bulleted lists where appropriate – for a list of items and for parallel "if, then" sentences.
- Employ scannable text like highlighted keywords.
Best Practices
See my blog entry for Best Practices for accessible Content
References:
- Nielsen, J. (1997, 10 01). How Users Read on the Web. Alertbox: http://www.useit.com/alertbox/9710a.html
- Quesenbery, W. (2008, 05). Usability doesn’t stop when you write the content. http://www.apogeehk.com/articles/Usability_doesnt_stop_when_you_write_the_content.html
Design Guidelines: Links
Posted by Michael Gaigg
"If links were married they'd get divorced all the time! That's because they can't keep their promise." (Gerry McGovern)
What Gerry means is that what links say they will do and what they actually do are total opposites. How many times have I believed, clicked and followed a link that promised me to 'Download this or that' just to find another page describing this piece of software. There I had to muddle through even more links just to find another 'Download version' link that yet again takes me to another page acknowledging the terms and conditions. The story could go on and on.
Remember: Good links are like magnets - they drive users to them.
With that in mind, here are the
Design Guidelines for Links
- Color and underline link text (exceptions include lists of links like a navigation menu)
- Reserve underlining for links (do not underline text that is not a link)
- Use different colors for visited and unvisited links (e.g. shades of blue)
- Avoid using color for text unless it is a link and never use blue for non-text links (even if your links are not blue)
- Avoid changing the font style on mouse over
- Avoid tiny text for links
- Use appropriate spacing between links or use a clear separator
- Use links primarily for navigation between pages
- Link text must be describe the target as short and precise (clear call to action) as possible AND hold this promise!
Best Practices
See my blog entry for Best Practices for accessible Content
References:
- Nielsen, J. (2007, 05 14). Command Links. Alertbox: http://www.useit.com/alertbox/command-links.html
- Nielsen, J. (2004, 05 10). Guidelines for Visualizing Links. http://www.useit.com/alertbox/20040510.html
What is Accessibility?
Posted by Michael Gaigg
The purpose of web pages is to interactively display information. The Hypertext Markup Language was designed to encode meaning rather than appearance. Therefore
Accessibility is the extent of access to information on a webpage through user agents (e.g. browsers, screen readers,…) which translate HTML into hypertext structures (links, headers, tables, forms,…) in order to give the users a surplus value.
“As long as a page is coded for meaning, it is possible for alternative browsers to present that meaning in ways that are optimized for the abilities of individual users and thus facilitate the use of the Web by disabled users. Those disabilities are:
- Visual Disabilities
- Auditory Disabilities
- Motor Disabilities
- Cognitive Disabilities” [NIELSEN96]
Since Web pages are highly visual and interactive the most affected groups as far as accessibility is concerned are the visual disabled, i.e. blind users or users with other visual disabilities like color blindness and users with motor disabilities using alternative input devices or sometimes even just the keyboard instead of the mouse.
Everybody benefits!
In the same way a sidewalk curb is necessary for wheelchair accessibility it also benefits parents with strollers, children with rollerblades and elderly persons trying to cross the street. The same is true for web pages. Designing for accessiblity will not only benefit users with disabilities but will also increase your:
- Market Share Benefits
- SEO (search engine optimization)
- Repurpose
- Literacy
- Bandwidth
- Technical Efficiency Benefits
- Maintenance
- Server Bandwidth
About Me
I'm Michael Gaigg, Lead UI Engineer at Esri's Prof. Services.
I have over 8 years of experience in designing map interfaces and can't stop thinking about improving them.
Help me by sharing your thoughts, ideas and comments.
Categories
- Accessibility (16)
- Code Samples & Tips (8)
- Conclusions (4)
- Design Guidelines (11)
- Designing Map Interfaces (3)
- Go figure (9)
- Good News (19)
- Here and there (21)
- Map Applications (7)
- This Week's Highlights (53)
- Usability & UCD (22)
- Web Design (21)
Popular Posts
- ColoRotate – 3D color scheme generator with social component
- Web Content Accessiblity Guidelines (WCAG) 2.0: Overview and Structure
- Powerpoint Wireframe Stencils as Free Download
- Go figure: 10 Comic Strips that have Something in Common
- Job Posting: User Interface (UI) Engineer at ESRI
Latest tweets
- Awesome resources for website designers http://t.co/oB77As8O 2 weeks ago
- I just contacted Rep. Jerry Lewis to oppose #SOPA #PIPA - Join me! http://t.co/BuFcgvqf #wikipediablackout 2 weeks ago
- Awesome #login #form #sample http://t.co/hob6dtvF 3 weeks ago
- Photo: Dude, just don’t pin the place you’ve been… ;) http://t.co/lwf3gIU8 2012-01-09
- Photo: Who wants to buy a church in Los Angeles? http://t.co/0SJrYxCv 2011-12-31
- More updates...
Posting tweet...
