Great article on pagination styles -> Easy as 1,2,3? http://is.gd/F4cy (from goodusability.co.uk)
Tag Archives: best practice
Quince: UI Design Patterns
Now bare with me on this – I found a blog site which contains a review of a really useful site containing UX libraries, which is doubly noteworthy because it presents the patterns in a very usable and very lovely UI.
So, my dilemma is do I post a link to the review or direct to the site with the patterns?
I’ll start by posting a link to the blog site I found the link on, as the blog owner, Patrick Neeman does a really nice job of explaining the patterns site’s features:
Patrick Neeman’s blog: http://www.usabilitycounts.com/2009/02/03/cool-website-tuesdays-infragistics-quince/
And Patrick’s comment:
I can never say Infragistics right, but they produce top notch controls for the ASP.NET world. Now they have something else that is way cool: Quince, a great little directory of user interface patterns that is built using SilverLight. J. Ambrose Little, a User Experience guy over there, wrote an extensive blog post about the new tool.
You can navigate through different patterns four different ways (I find user tasks especially useful), search them via keyword, and see sort through them by letter. Very, very easy to use.
The best part? If you have a design pattern you want to submit, you can do it through the site, and the Infragistics team will review it and post it. It’s got all the requisite social networking tools with it!
And here’s a couple of screenshots of the Quince site:
Quince patterns explorer - View by wireframe location
Quince patterns explorer - Pattern detail
Followed by the all important link: http://quince.infragistics.com/
Enjoy!
10 techniques for an effective ‘call to action’
This is a really good article that documents the obvious and the not-so-obvious design decisions behind creating effective calls to action…
Original article: http://boagworld.com/design/10_techniques_for_an_effective/
Having an effective call to action is an essential part of any website. A call to action is not just limited to ecommerce sites. Every website should have an objective it wants users to complete whether it is filling in a contact form, signup for a newsletter or volunteering their time.
…
An effective call to action is the linchpin of a successful site and involves drawing together best practice in usability, creative visual design and powerful copy writing.
Summary
- lay the groundwork
- offer a little extra
- have a small number of distinct actions
- use active urgent language
- get the position right
- use white space
- use an alternative colour
- make it big
- have a call to action on every page
- carry the call through
Selected screen-shots from the article
Skype clearly show the benefits of downloading their application
The Things website draws attention to its calls to action by using a constrasting colour
Original article: http://boagworld.com/design/10_techniques_for_an_effective/
Usable ‘Store Finders’
I’ve been doing some investigation into Store Finders recently and I’ve found one that is so quick, simple and easy to use that I thought I’d mention it here.
It’s for women’s fashion retailer Jane Norman, and can be accessed here:
http://www.janenorman.co.uk/pws/StoreFinder.ice?country=GB&page=Stores
The design is uncluttered and the finder guides the user towards their goal with a couple of simple clicks.
The Store Locator page in its initial state
Choices are made using Drop-down lists, which have known usability and accessibility implications, but the implementation here seems to fit with general best practice recommendations while avoiding most of the pitfalls, such as overly long lists.
Choosing a region:
A drop-down list to choose the region you are looking for
At this stage the region break-down seems to find the right balance between being too broad/generic and too narrow/restrictive.
Picking the store in your chosen region:
A drop-down list to choose a specific store
The item labels in the drop-down list are descriptive enough to give the user some meaningful options, without being too wordy.
If you were simply looking to verify a store’s general location this might be enough detail for you already.
Results page:
The Store Locator results page showing useful store information and an embedded Google map
The results page contains lots of useful information:
- full address
- contact details
- store opening hours
- embedded google map
The implementation of Jane Norman’s Store Finder uses traditional form posts, which result in page refreshes after each selection, but I don’t see any reason why it couldn’t all be done inline using a bit of JavaScript (where available) for an even smoother experience, although this may have accessibility implications.
Additionally, it would also be nice if the results page could also offer a ‘permalink‘, so it can be easily bookmarked for later reference.
Using the feature feels much more friendly than asking the user to enter a postcode, which is the other commonly used technique.
Further reading
- Usability study of 35 store locators on Dutch retail websites: http://www.webmapper.net/locators/
- Store Finders and Locators (Jakob Nielsen’s Alertbox):
http://www.useit.com/alertbox/location-finders.html
User Interface Implementations of Faceted Browsing
Over the last couple of years a technique known as faceted browsing has become something of a standard on e-commerce sites.
Faceted browsing allows users to filter data (typically product data) by groups of words that describe them (e.g.: colour, size, style, manufacturer’s name).
Amazon.com were one of the early proponents of faceted browsing and it is now such a common element of any large shopping site that it is more noticeable by its absence than by its inclusion.
This article by Mike Padilla over on Digital Web Magazine gives a clear and concise breakdown of the technique, and offers some great advice on planning faceted browsing for your a site, highlighting best practice and potential pitfalls.
Original article: http://www.digital-web.com/articles/user_interface_implementations_of_faceted_browsing/
Just as it is important to choose the proper knife when slicing-n-dicing vegetables, it is critical to prescribe a suitable user interface to support faceted filtering. Faceted filtering allows you to narrow down a large list of objects to a manageable size by applying flexible combinations of attribute filters in any order.
…
If we define groups of adjectives (facets) that describe objects and allow users to filter with them, we could empower users to manipulate the information space themselves rather than oppressively imposing a fixed structure upon them. Users could flexibly select values across all facets, in any order, to view only those objects that could be described as such.
Selected screen-shots from the article
Placing an item count after each facet value effectively gives users future insight without requiring additional interaction
Original article: http://www.digital-web.com/articles/user_interface_implementations_of_faceted_browsing/
10 Useful Web Application Interface Techniques
There’s a great article from Smashing Magazine today which outlines 10 simple interface ideas which contribute hugely to a good user experience. A few of them are common in many well-designed web applications, but there’s a couple of really good ideas in there that perhaps aren’t quite so well known.
More and more applications these days are migrating to the Web. Without platform constraints or installation requirements, the software-as-a-service model looks very attractive. Web application interface design is, at its core, Web design; however, its focus is mainly on function. To compete with desktop applications, Web apps must offer simple, intuitive and responsive user interfaces that let their users get things done with less effort and time.
Summary
1. Interface elements on demand
2. Specialized controls
3. Disable pressed buttons
4. Shadows around modal windows
5. Empty states that tell you what to do
6. Pressed button states
7. Link to the sign-up page from the log-in page
8. Context-sensitive navigation
9. More emphasis on key functions
10. Embedded video
The article itself goes into much more detail about each point, with useful illustrations and screen-shots of these techniques in practice.
Sample screen-shots
Hide or conceal advanced functionality
Using empty states to motivate users and animate actions
More emphasis on key functions
Original article: http://www.smashingmagazine.com/2009/01/12/10-useful-web-application-interface-techniques/
E-Commerce interface and design elements
This promises to be a great resource for UX practitioners looking for examples of interface design best practice:
ecommr: a collection of e-commerce interface and design elements
http://www.ecommr.com/
www.ecommr.com
5 Quick Accessibility Fixes
This article over on BoagWorld gives a nice summary of some quick fixes developers can make to their pages to give their site’s accessibility compliance a bit of a boost.
Complying with accessibility guidelines can seem like a massive undertaking. However, addressing 5 simple problems can make a huge difference to your site’s accessibility.
Essentially these are:
- poorly described images
- badly labelled links
- no alternatives to media
- reliance on javascript
- user controlled text
The article outlines quick fixes that it claims addressed 80% of issues.
These might seem like pretty basic fixes, and any web UI developer worth their salt will have been working within these parameters for years, but sometimes its worth reminding yourself of why you do the things you do…
(Source: http://boagworld.com/accessibility/quick_fix_accessibility/)
Web Application Form Design
This site has been around for some time, but Luke’s work is arguably some of the most definitive in the field of web form design, so its always worth re-iterating.
Web Application Form Design
by Luke Wroblewski
http://www.lukew.com/resources/articles/web_forms.html
Here’s a couple of examples of some of his findings:
Vertical labels
Left-Justified horizontal labels
His online articles form the basis of a book, available through Rosenfeld Media: Web Form Design: Filling in the Blanks. I heartily recommend it!
Account Sign-in: 8 Design Mistakes to Avoid
This is a great article on mistakes commonly made regarding login and registration to websites:
Account Sign-in: 8 Design Mistakes to Avoid
BY JARED M. SPOOL
http://www.uie.com/articles/sign_in_process_reprint/
Summary
Mistake #1: Having a Sign-in In The First Place
Mistake #2: Requiring Sign-in Too Soon
Mistake #3: Not Stating the Benefits to Registering
Mistake #4: Hiding the Sign-In Button
Mistake #5: Not Making “Create New Account” or “Forgot Your Password” a Button or Link
Mistake #6: Not Providing Sign-in Opportunities at Key Locations
Mistake #7: Asking for Too Much Information When Registering
Mistake #8: Not Telling Users How You’ll Use Their Information
Good article, Jared.