Finnotype

It is a telltale sign of failed user experience when you need to write "click" in technical documentation. When did you last read the Twitter user guide? Me neither. Using Twitter is pretty self-evident. Just look at the app and tweet. You don't need documentation. Self-explanatory tasks need no docs. They should be intuitive enough to complete by looking at the user interface and relying on past knowledge. Creating a folder? Moving a file? Cropping an image? Everyday stuff that should be obvious. A huge amount of effort goes into perfecting the user experience in consumer apps. Intuitive UX can lift an app above its competition just as disastrous UX can sink it. Great UX is infectious. It sets user expectations. Users start demanding that software at the workplace be just as simple. In that way, consumer software forces enterprise software to adapt. For  Magnolia 5 , we broke our necks to make Web content management simple. Instead of features ga...

Deleted mail was mysteriously disappearing from my email account. I could not find anything older than one week. The culprit turned out to be iPhone. I use it to read the same account. A well-hidden setting removed deleted messages. To check your iPhone: Go to Settings > Mail, Contacts, Calendars . Select the account from which deleted messages are disappearing. Go to Account Info > Advanced . Under Deleted Messages , change Remove to Never . Go back to Advanced . Go back to Account Info . Click Done . This is important to save the setting! My removal interval was set to After one week . Gotcha!

Update! Picnik is closing on April 19, 2012 .  This is sad news. I really liked working with the product. Please sign the  Don't Close Picnik petition ! A subset of Picnik features is available in the Google+ Creative Kit but, crucially, the Photo Bucket is not. This means that the custom circles and arrows we use to annotate images are gone. At Magnolia, we recently started using Picnik  to annotate screenshots. We wanted a casual but obvious way to draw the reader's attention to an image detail. In this post I explain why we chose Picnik and how it is working so far. Picnik is a photo editor that runs in the browser. You may have seen it as the embedded photo editor in Picasa Web Albums. The requirements that drove us to a Web-based tool were: No OS lock-in . We have technical writers working on Windows 7, Vista and Mac OSX. It is difficult to find a screenshot tool that works on all those platforms. Skitch  is awesome on the Mac but a Wi...

In this post I show how to improve textarea usability with a Twitter-style character counter. Validating form input length is a common strategy for reducing errors. So common in fact that the  HTML specification  provides a maxlength attribute for input fields. Starting with  HTML5 , multiline  textarea fields support the attribute too! <textarea id="message" rows=4 maxlength="100" /> Since it is always better to prevent an error than catch one the user already made, here are two ways to improve textarea usability in Magnolia CMS , making sure the user knows how many characters are allowed. Display the character limit The obvious improvement is to display the character limit. In Magnolia CMS, you set the limit on the form field. The system saves it to a maxLength property in the repository. Render the length on the page: Copy the formEdit.ftl  script which renders input controls. Create folder  Templa...

I saw a story on BBC News about the London subway map. The map is a classic 20th century design created by electrical engineer Harry Beck. It was a great hit with the public when first published and is still used today with few modifications. Beck's map was originally rejected by London Transport, however, because it was not geographically accurate. To make the complex map clearer, Beck had enlarged the central areas and compressed the outer areas. While Beck's ingenious design makes the subway network easy to comprehend, it is indeed difficult to tell how far apart the stations actually are. This can be a problem in the physical world; what seems like a short walk on the map may turn out to be quite a trek on the surface. In the virtual world where scale does not matter, a subway map can be an incredibly useful navigation metaphor. I am currently involved in commercializing a tool called Prosumer . Prosumer allows you to create workflow-oriented Web applications without codin...

Design patterns are popular in software engineering. They provide time-tested, repeatable solutions to common problems. Since most programming problems can be distilled into a number of core tasks, design patterns work like templates; they solve each core task and allow you to derive a solution to the overall problem. Design patterns are abstract enough so that choosing the language and tools with which to apply them is up to you. In my information architecture work I often come across navigation problems that have generally applicable solutions. Here's an example of a "navigation pattern" that you will hopefully find useful. Design problem A user needs to add, edit and delete items. Pattern name Minimal add-edit-delete Click thumbnail to view image When to use In an application that is task and workflow oriented. When the user is expected to perform one task at a time to complete an action. Suitable for devices that are not feature-rich, such as mobile phones. Solution ...

I recently reviewed a Web application for Section 508 compliance. Section 508 is a part of U.S. Rehabilitation Act which requires that information technology must be accessible to users with disabilities. For example, Web sites must be accessible to people who are visually impaired. This can be achieved by providing alternative keyboard navigation and ensuring that these people can use assistive technology such as screen readers and Braille displays. Compliance with the act is necessary if you want to sell software to U.S. government agencies. So I compared the product against a checklist of standards . The standards are quite logical: provide ALT attributes for non-text assets, don't rely on color alone to convey information, identify form elements, and so on. I found some shortcomings and suggested how to fix them. What surprised me, however, was how common these problems still are. Let's consider image ALT attributes. Very few Web pages are hand-coded today. Content is autho...

Want to learn how usability plays a key role in voting practices and governance? Thursday, November 3, 2005 is World Usability Day. Usability Professionals Association's Boston chapter is hosting a full-day event to promote the fields of usability engineering and user-centered design by educating the public about the value of user-centered design processes. Multi-disciplinary teams of researchers, designers, developers, and members of the public will be let loose on the city of Boston to study aspects of public life. They will report back their findings and suggest improvements. You also get to watch usability specialists evaluate products and Web sites in a rapid-fire manner providing detailed feedback about each product's usability-related strengths and weaknesses. Events will be held at the Museum of Science. Exhibits and activities will begin at 9 a.m. The event is free with museum admission and open to the public. For more details, visit http://www.upaboston.org/ .