Interaction design

- Opt-out works better than opt-in
> Make the default option the option that you want the user to take.
Read more: here and see Dan Ariely’s TED.com video about decisions.

- Adding unattractive options makes other options more attractive
> Goldilocks pricing effect (also here)

Limit choice

> 10 or more makes deciding harder. Maximum 7. Depends on content type.
Related to: Goldilocks effect and abundance of choice affects decision making

- Order effect

> Show products from most to least expensive.
Read more: here

Social validation/proof

> Add testimonials and reviews, ratings (or tweets, likes, diggs)
> Reviews work better if users can relate to the reviewer (e.g. mention age, location or occupation)
> Expert opinions work well
Read more: here and Neuro Web Design book

People don’t read on the web, they scan

> Keep texts relevant, short and bulleted to increase the chance they will be read

Give the preffered option prominence

> Promote the product (e.g. on homepage)
> Highlight the product that needs promoting (using background color, font size, ‘popular’ stickers, 3D jump-out effect) to make it stick out when presented near others
Read more: Goldilocks effect

Progress bars

Your profile is x% complete

Awards/levels/points

Download/read this..for free!

Merchandising: support up-selling, cross-selling, and impulse buying.

> Provide ‘others liked’, ‘similar products’ on product detail pages
> Seduce at the right time

Read more: here (!) here , online impulse shopping
Examples: Amazon.com

Seduce but don’t deceive
> Create trust and confidence, demonstrate value, and guide the customer through the decision-making process
> Don’t push, over-manipulate
> Don’t be deceiving (see dark patterns)
>Avoid situations where users may feel cheated
Read more: here

To be continued..

How to implement in your project

How can we leverage {social proof} to get …. (goal) - http://getmentalnotes.com/

Great presentations

http://www.slideshare.net/stephenpa/the-art-science-of-seductive-interactions

Books

http://getmentalnotes.com/resources

http://www.uie.com/articles/chak_interview/

http://www.uxmatters.com/mt/archives/2009/01/beyond-usability-designing-web-sites-for-persuasion-emotion-and-trust.php

Expert: http://www.schrijvenvoorinternet.nl/

Posted in Conversion optimisation, E-commerce, Interaction Design | Leave a Comment »

Principles of interaction design

Posted by Dan on October 18, 2010

Hoekman’s guidelines:

Justify the functionality (see page 192 of Designing the moment book: Weather widgets on government sites don’t make sense).
Use instructive design to get users up to speed
Maintain consistency from one screen to the next (for learnability)
Leverage design patterns to make interactions more learnable and repeatable
Cater for each stage in the interaction: invitation, manipulation, completion (each needs simple and clear feedback)

Also from his book Designing the moment:

Build only what’s absolutely necessary.
Quickly turn beginning users into intermediates.
Prevent errors whenever possible and handle the errors we cannot prevent gracefully.
Reduce and refine interactions and task flows until even the most complicated applications are clear and understandable.
Design to support a specific activity.
Make constant, incremental improvements to your processes and applications.
Ignore the demands of users and stick to a vision. (debatable)

The book About Face 3 is full of useful principles.

On innovating: only break convention if doing so adds value.

Laws of simplicity book:

Reduce
Group
Hide
…

Dan Saffer wrote on how to achieve simplicity:

Remove features. The more features you have, the more complexity you have.
Hide features. Use menus, tabs, dropdowns, etc. to make features available, but not seen until needed.
Organize features. Cluster like features, content, and controls together under a single area (which can be hidden).
Tightly align the user’s mental model with the product’s conceptual model. The closer you get, the simpler it will seem.
Make every choice visible. Rather than hiding all choices under a dropdown, for instance, show them all.
Conversely, hide some choices if there are too many to be reasonably scanned.
Reduce choice. Take away customization and limit choices to the most often used.
Smart defaults. Have them. Make them visible.
Shortcuts. Make shortcuts to the most used actions in the product.
Distribute functionality to the right platform. Decide where functionality should logically be located: device, desktop, web. Don’t cram everything onto one platform unless it makes sense to do so.

Random laws:

Remove stuff till the design breaks.
If novices can use it, chances are intermediates and expert users will quickly also find what they’re looking for.
Links are for navigation, buttons are for actions

UI specific laws

When to use radiobuttons versus dropdowns versus link lists versus …

More reading

http://shortboredsurfer.com/2010/08/11-principles-of-interaction-design-explained/

Posted in Interaction Design | 2 Comments »

Usability heuristics

Posted by Dan on September 30, 2010

Checklist

Does the wireframe …

Ease of use / usability / navigation - for specific interactions and overall site experience
Confirm understandings and check for misunderstandings of information
Avoiding Incompleteness and overcompleteness of information – getting the information that is needed at the right time versus not being overloaded with content that they don’t need.
Match expectations – giving users the right information in the right form/tone at the right time. Exceed expectations, if done well, can give a positive experience.
Avoid annoyances (discomfort, uncertainty, confusion) – any tasks for which users have to think too long, look around frantically on the site or page, or hesitate to long
Meet the needs – allow users to accomplish their goals and tasks

Visual design

Images should not distract from the main call-to-action.
Images should not look as if they’re clickable if they are not
The call-to-action should stand out using contrast (see Call to Action book, page 92)

Other articles

read my Wireframe checklist post

Heuristics

http://www.useit.com/papers/heuristic/heuristic_list.html

http://www.userfocus.co.uk/resources/guidelines.html http://www.userfocus.co.uk/articles/expertreviews.html

http://www.webstyleguide.com/wsg3/index.html

Research-based Web guidelines

Yale

Posted in Interaction Design, Resources | Leave a Comment »

Axure versus Balsamiq prototyping tools

Posted by Dan on September 8, 2010

Balsamiq is simple and easy to use. Once you figure out how to install it, there are many ready-to-use UI elements available as a standard part of the software. There is also an Atlatissan Wiki plug-in available for everyone (even managers) to use.

Axure is more flexible and powerful. Advanced UI elements are also available but as separate downloads. What is great and pretty unique about Axure is that you can make interactive prototypes to demonstrate all kinds of functionality. You can them send these to your clients – all they need is Internet Explorer to simply click through your (multi-page) demo. I also like its ability to produce Word docs and detailed functional specifications – very useful!

Posted in Interaction Design, Resources | 2 Comments »

Golden ratio in web design

Posted by Dan on August 16, 2010

http://sites.google.com/a/chromium.org/dev/user-experience/visual-design#TOC-Mathemagics

Posted in Visual design | Leave a Comment »

Pattern: fixed toolbar

Posted by Dan on August 2, 2010

Use when

You need to give your users constant access to useful functions that need to be quickly accessible without scrolling. Think of it like the toolbar in Word or any other application for that matter.

Fixed toolbars contain functions which are:
- commonly used (share, add to wishlist)
- useful (search)
- or even promotional links (´Donate/join now´ or ‘give your feedback’)
- or branding fixed elements
Toolbar functions that need to be accessed at any time, with direct or indirect relation to the context on the page. The functions are accessible from a fixed position on the screen that holds its fixed position if the page is scrolled.

Form
Anything could go on the toolbar. Icons (if conventional and understood by users), pulldown menus, links, textfields. It depends what the tools are. In CSS fixed elements are achieved by using position:fixed
- The toolbar could be present on almost all pages on your site, or only on pages where it makes sense with certain cha.
- Beware: They take up space, especially on low resolutions such as mobiles. More scrolling is needed to uncover the part of the page that it obscures.
- Keep it small. If it´s a horizontal toolbar, reduce the height. If it´s vertical, keep it narrow.
- Provide a ´close´ option if you think users will find it more annoying that useful. Consider how and when to show the toolbar again.
- Add tooltips or contextual help (on mouse-over show a hint) to facilitate learning, or help balloons to encourage use (see UXmatters example).

Examples

Pricegrabber’s “ribbon” - read about it and Comet.co.uk ribbon

Tripadvisor.com – bottom toolbar

Cnet.com (browse the Reviews tab) – bottom toolbar

UXmatters – Top toolbar appears only when scrolled a certain amount down the page untill the site header is no longer in site. Powered by Apture.

eConsultancy (blog) – Side toolbar with commercial-promotional function. Left toolbar is home-built, the corner toolbar is the ´Give feedback´ button by Kampyle

The http://www.conversion-rate-experts.com/buzz/ use a fixed side-bar :

uipatterns use a ‘you might like’ pop-over in the bottom-right corner. This could be useful for cross-sell, but it shouldn’t obscure other elements or it will have the adverse effect of annoying users.

More examples

From webdesignerdepot.com : “There are plenty of situations in which a fixed element (such as persistent navigation) could serve the owner’s business objectives and make the website more usable. Fixed elements are memorable and enhance the user experience. They have countless creative uses, and we will continue to see designers take advantage of them.”

For more examples, search google for ‘fixed position web design trends’

Related articles

http://www.linkedin.com/groupAnswers?viewQuestionAndAnswers=&discussionID=62855696&gid=3754&trk=EML_anet_di_pst_ttle

Posted in Interaction Design, patterns | Leave a Comment »

Dropdown usability issues and solutions

Posted by Dan on August 2, 2010

Keywords: SELECT,drop-down list, drop down, pull-down menus, combobox (is not a dropdown, but many misuse the term)

Problem #1 - Long dropdown lists fall outside the browser viewing area

When the user clicks to open the dropdown the value that he wants to select falls off the screen, outside the browser viewport. If the user tries to scroll, chances are that the dropdown will close again. In worst case the user won’t be able to select his value with the mouse at all.

Solutions
In Firefox (3.6.8), Landsend.com product detail quantity dropdown seem to position the dropdown list above or below where the dropdown control, depending on position of the viewport.
If this is browser dependant behaviour, are there researches or sites that force this behaviour?

Other solutions:
- Dynamically shorten height of dropdown list (drawback is that you must scroll more to find something at the end of the list)
- Dropdowns are suitable for common lists such as country, but for long lists HTML links are preferred.
- Autosuggest (e.g. Hotels.com, Google Suggest) allows user to type and select from a dynamic list, but has its own issues…
- Add a ‘show more…’ link to bottom of dropdown

Problem #2 – Dropdowns pull attention

In one eye-tracking study

, the dropdown menu grabbed the user’s eyeball attention, no matter where it was positioned. Probable cause is that the dropdown is situated among empty textfields in a form, but looks as if it is prefilled which makes the user curious.
<h2>Problem #3 – Dropdowns are often skipped</h2>
In one usability test

, a dropdown was the first element in a form. Likely this is because it looks like a textfield that is already filled, so hasty users will skip it.

Recommendations

- Use a label with good copy. I prefer ‘(select your country)’ over ‘ — select your country —’

- For this label, use a grayshade that is distinctly lighter than the black text colour used for filling in textfields.

- Add a form label in front of the dropdown, just like you do for textfields. Example: ’Country: (select your country)’

- Keep the width of the dropdown equal to the width of textfields above and below it.

- Don’t make the dropdown (or radiobutton or checkbox) the first element in a form.

Are dropdowns problematic?

In favour of dropdowns:

- US users are more used to dropdowns, because they are used to selecting their State. International sites often ask for country.

Opposed to dropdowns:

- …

More issues

General usabililty issues of dropdown menus

- Avoid long dropdown lists.Elderly have difficulty or annoyance of using dropdowns, especially if they are long. In some cases users don’t know that you can scroll inside the menu.

(source needed)

- Dropdowns affect user performance and error rate. Using the mousewheel you can change the selection inside the dropdown if the mouse cursor is over the dropdown menu. The dropdown is prone to accidentally change the value. In one form usability test the most common user error was the user had selected the wrong expiry year for his creditcard.

[/source]

- Dropdowns z-index obscure other elements such as custom tooltips, lightboxes, Flash applets

More issues:

http://baymard.com/blog/drop-down-usability

http://www.ixda.org/node/17094