http://www.informationdesign.org/archives/infoviz/ - Videos, articles

Last updated: 2 Aug 2011

http://www.ixda.org/discuss.php
http://ux.stackexchange.com/   (Dutch moderator) +
SIGIA-L Mailing List http://www.info-arch.org/lists/sigia-l/ OR @ http://mail.asis.org/mailman/private/
CHI-WEB http://listserv.acm.org/scripts/wa.exe?A0=CHI-WEB (seems quiet)
High five babble @ http://www.babblelist.com/ - more about web dev than des  (subscribed via Yahoo groups)
Ask Eric Q&A - http://www.humanfactors.com/downloads/askericanswers.asp
http://hfiuxcentral.ning.com/forum
http://groups.google.com/group/nl.internet.www.ontwerp/topics (Dutch)
http://stackoverflow.com/questions/tagged/usability (programmer oriented but great answer/voting system)
http://www.sitepoint.com/forums/accessibility-usability-191/
http://www.quora.com/Interaction-Design?q=Interaction+design   (frequented by Dan Saffer)

More sites @ http://iainstitute.org/ and http://www.uxpond.com/sites.html

Many more @ LinkedIn groups 

Ranking engines
Alexa

Website rewards

http://www.webbyawards.com/

http://mashable.com/openwebawards/home/

http://www.iavisarts.org/winners-gallery-search.php?&event_id=2&entry_type=Websites&category_id=253 # (websites awarded for their visual appeal)

http://crunchies2008.techcrunch.com/nominations/

http://americandesignawards.com   (awards web agencies)
Time magazine’s slightly outdated The 25 Best E-commerce sites
BusinessWeek top sites of 2011

http://www.forbes.com/bow/b2c/main.jhtml

Website reviews

http://www.thegoodwebguide.co.uk

Directories (ranked)
Yahoo!?
http://www.dmoz.org/
http://www.google.com/dirhp (with Google Rankings)
http://www.ciao.co.uk/Internet_11531_1

Ranked but not categorised
http://xomreviews.com

Find similar and alternative sites
Google trick 1 = link:URL
Google trick 2 = type part URLs or site names to find similars and alternatives

More

http://www.linkedin.com/groupAnswers?viewQuestionAndAnswers=&discussionID=3761378&gid=3754&trk=EML_anet_qa_ttle-0Pt79xs2RVr6JBpnsJt7dBpSBA

- 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

Related

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/

• 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.

Related posts

Laws of interaction design
Interaction designer’s neccesities

1. Ease of use / usability / navigation    - for specific interactions and overall site experience
2. Confirm understandings and check for misunderstandings of information
3. 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.
4. 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.
5. 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
6. 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)

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!

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

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

Alternatives to dropdown

Radiobuttons - http://stackoverflow.com/questions/3339110/autocomplete-vs-drop-down-when-to-use

Articles/research:

http://www.useit.com/alertbox/20001112.html

http://listserv.acm.org/scripts/wa.exe?A2=ind0009D&L=CHI-WEB&P=R3784&1=CHI-WEB&9=A&J=on&d=No+Match;Match;Matches&z=4 – discussion about various issues and usability test results of  dropdowns

Related

autocomplete (e.g. Gmail To field), autosuggest (e.g. many latest browser and Google Auto-suggest)

http://usabilitydesk.com/10-autosuggest-and-autocomplete-demos/

http://www.webappers.com/2010/01/04/easy-and-slick-way-to-do-auto-complete-auto-suggest/  and http://www.webappers.com/2007/06/08/ajax-auto-suggest-auto-complete-textfield/