Golden ratio in web design

August 16, 2010

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

Advertisements

Pattern: fixed toolbar

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.

http://www.uxcandy.net/frictionless-watching/    TED video docks on top when you scrol down TIP

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

http://www.demystifyingusability.com/2010/08/does-a-bottom-browser-toolbar-add-clutter.html

http://www.usability.nl/2012/de-navigatiebalk-blijft-bovenin-mijn-scherm-plakken-help/?utm_source=rss&utm_medium=rss&utm_campaign=de-navigatiebalk-blijft-bovenin-mijn-scherm-plakken-help&utm_source=Usability.nl&utm_campaign=c686bed32b-RSS_EMAIL_CAMPAIGN&utm_medium=email

http://www.simpleweb.fr/2012/09/28/de-linteret-des-headers-flottants/?utm_source=feedburner&utm_medium=feed&utm_campaign=Feed%3A+Simpleweb+%28SimpleWeb.fr%29

Related

Nominated the best new UI element @ “Sticky” headers/sidebar content – critical elements stay fixed as you scroll down the page (the way the gMail header stays fixed as you scroll through an email, lots of “share” functionality on blogs/magazines stays with you as you scroll down the page). See also http://fab.com/inspiration/ main nav. The text formatting options in Quora and Basecamp Next stay with you as you write longer posts, like this one!


Dropdown usability issues and solutions

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.

Problem #3 – Dropdowns are often skipped

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/