Interaction design

All about web user experience and good design practice

Archive for the ‘Interaction Design’ Category

Interaction design discussion forums

Posted by Dan on June 13, 2011

Get feedback, expert opinion and answers to your UX related queries

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 

Posted in Interaction Design, Resources | Leave a Comment »

Persuasive web design

Posted by Dan on December 9, 2010

Principles and effects

- 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/

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.
Joshua Porter:
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

Related posts

Laws of interaction design
Interaction designer’s neccesities

Posted in Interaction Design | 2 Comments »

Usability heuristics

Posted by Dan on September 30, 2010

Checklist

Does the wireframe …
  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)
Other articles
read my Wireframe checklist post

Heuristics
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 »

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

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/

Posted in Interaction Design, patterns | Leave a Comment »

Avoiding slow design

Posted by Dan on July 3, 2010

Keywords: speed, efficiency, effectiveness

Let’s be honest – it happens to some of us more than others: as a designer you’ve been asked to complete a design by some deadline which seems impossible to you. This could apply to any work, whether it’s developing a concept, creating a designs, a well-written spec or a good presentation.

What can slow designers down and what can you do to speed things up?

- Don’t be a perfectionist

Rest assured that there´s no perfect answer.  http://52weeksofux.com/post/694599232/theres-no-right-answer

- Don’t get stuck in detail
You must Know the constraints. Work on what you can or know first.

- Find the detail balance
Don´t worry too much about the detail. It doesn´t have to be perfect. Get all the elements on the page in rough form, starting with high-level ´boxes´. When you´ve added enough detail and the deadline is nearing, start rearranging things. Then align things so they look good enough to the eye. Finally give everything some breathing space, leave some white space but don´t waste too much time on getting things pixel perfect. Eventhough your IA is only communicating something functional, giving it some visual structure and aestetic appeal helps convince the audience that the proposed design or concept is easy to use.

- Focus on the end-result, work on the essential 

Which pages really need be fleshed out? Spending more time on making the front page look and work  great may be better than having many dismal pages.

- Don’t get stuck in problems

While working on your design you may find an edge case that you feel will need more attention, sooner or later. Don’t give it your full attention just yet. Chances are, if it’s a conceptual presentation you are giving, it can be solved during detail design. Some problems solve themselves while working on other parts (relates to: deelproblemen). On the other hand, you might feel it’s a real biggy. If it’s a core functionality that sticks out like a sore thumb, you might need to ‘go back to the drawing board’ and explore a different interaction approach.

- Distractions and concentration
Isolate yourself from distractions. Hide in another room. Put on headphones (I prefer instrumental or classical music that doesn´t contain words). Increase your concentration (get enough sleep, exercise and eat healthily). Creative a serene working environment.

- Be honest
Be concious about when you are distracting yourself. Work towards your goal, and be cautious of diversions. For example, don´t delay because you like working out ´this little puzzle here´or like to get ´this little thing here´perfect because you personally prefer working on them.

- Rapid design
Don´t reinvent the wheel. There´s many sites or products out there which have done this before or something similar. Perhaps you could borrow their design and wireframe it.
Start with sketching. Don´t waste time with the tools (Axure, Photoshop, etc) until your certain about your design.

- Get help

Split the work, unless the briefing/training and communication required will take more time than actually doing it yourself. Where is the efficiency cut-off? And if you delegate, what quality and effort can you expect from the other(s)?

- Work overhours
Coffee anyone? You will still need some breaks to get your creative juices flowing and zoom out into the higher detail. Sleep is also important as it lets your subconcious work for you!

- Finally, say ´no´ more often – but nicely.
When the boss asks you to make the impossible happen, you have to manage his expectations on time. What does he need it for? Who is the audience? For example, will the design be thrown in as just one of many slides in his conceptual presentation, then don´t try to get it perfect. Chances are you don´t have to bog down into the detail, but just communicate the general idea. Get the objectives straight. If it still seems impossible, say so. Make it clear that with the time given, it won´t be a finished design but good enough to communicate the general functionality. Say what you will be able to do with with the given time. Here are some other tips to just say no under time pressure and other priorities. If time and budget are fixed, there is usually a trade-off between quality and quantity

Other thoughts:

  • Avoid interuptions. E-mails, phone calls, etc are unwelcome distractions. Don’t reply to them immediate
  • Finish what you started (when interupted). If somebody invades your space demanding your attention, show you are deep into finishing a sentence.
  • Work in burst. Work 45min shifts, take 10min breaks. Breaks help you see things from a distance, in perspective, from high-level.
  • Work intensively, twice a day. Research shows better violinists don’t necessary work harder or longer. In fact, they have two periods in the day where they are on full, intense concentration  (morning and sometime in the afternoon?). The rest of the day, they take it more easy. This way they get better at what they’re good at. Of course, if it’s not practice you are after but finishing something that requires relatively few brain-power, you might want to make an exception (?)
  • Stop early. Research shows more practice does not always make perfect. Quiting early, enough sleep is what differentiates good from expert musicians.
  • Be end-result driven. It’s all about goals. Constantly ask yourself why you are doing what you are doing and how does it help you achieve the end-result. If it doesn’t, take a step back and try a different strategy.
  • Fix your decisions. Constantly changing your mind about how to approach something, means you are constantly applying this new means over and over. Decide on a system, structure or format first. Work with it for all instances. Else you will find yourself with the next point:
  • Always have a finished product. Deadlines are tight. Your work might never be finished or perfect, but at least make it is written and structured in such a way that  you can hand it over for somebody to read or work on at any time.
  • Do one thing at a time. Research shows multi-tasking
  • Mind like water. Have a GTD system for clearing your mind. If you interupt yourself  with things not related to the task at hand (“I still have to do ….” or “I must remember to…”) or another project  (“I could use this solution for project x”). All this is held in your mental working RAM, waiting for action. Write it down somewhere where you know you will look at it  (@inbox). Getting this like that off your mind will clear it  and improve your creative potential.

Tool tips:

  •  Content first, Style after. Whether you’re working in Powerpoint or Axure, add the content first. Styling, structure, alignment, font sizes, colours – all these things are better left until later. The reason is that more than often you want to add or change something, but you only realise later. Then you have to re-apply and adjust all the style again. Another reason is that the appropriate style or format sometimes only becomes apparent later.
  • Be creative away from the computer first. Whether you’re considering a good structure/format for a presentation, mindmapping/brainstorming, or have some wireframing to do: always first start on paper, post-its (for ppt)  or whiteboard, or even draw in sand. Creative sparks often happen elsewhere, not behind the computer.
  • Be systematic, work in a structured manner. This won’t bother your creativity.

Further reading
Making design decisions

Posted in Interaction Design, Workflow/process | Leave a Comment »

Top videos about UX and Interaction Design

Posted by Dan on February 16, 2010

User experience vodcasts, webinars and other video streaming media. With summaries.

To see next:

Mobile UX design Stanford University 1hr free lecuture @ http://itunes.apple.com/in/itunes-u/3.-mobile-user-experience/id384233308?i=85092692

1. johnnyholland.tv/

description
Seen:
The Right Way to Wireframe — Russ Unger ;
Designing for today’s web with Luke Wroblewski  LIKE 7+/10  (mobile tip for HS),
Design in the Post-PC Era—Dan Saffer   (Past and trends, 6.6/10)

The dawning of the age of experience – Jared Spool   (watched)  LIKE  8/10

  • Business and user needs need to be understood.
  • But no research  (a good designer just thinking about a design) can result in a design just as good as real research.
  • Good design is invisible (users often won’t say about a design feature that is very good – e.g. navigation or the structure of genre categories overview at Netflix – because it’s really good).
  • A good design team is multi-disciplinary: Copywriting, IA, design process management, designing for interactions, information design (for presentations), visual design, editing/curation (what’s in/out), research, domain knowledge, business model, data interpretation, explain the value of features, underlying technology, get buy-in for methods/tools, good communication, translating documentation to implementation … but really good is a smaller, handful of multi-skilled people. So it’s more about skills than roles.
  • Determining the success design company/team can be determined using this 85% accurate model requiring only 3 questions (according to Jared’s research):
  • 1. Vision: “Can everyone on the team explain the experience using your design 5 years from now?” If yes, then success.
  • 2. Feedback: “In the last six weeks, have you spent more than 2 hours watching someone use your or a competitor’s design?”. Perhaps more critical than how many users to involve in a usability test, is how long each team member is exposed to watching a user use their design. Critical is that it should be at least 2 hours.
  • 3. Culture:”In the last six weeks, have you rewarded a team member for a major design failure?”. Controversial, but it turns out it’s good if you reward failure e.g. with a party, after a while CEO talks about the failure, publically humiliates the responsible person, who takes it well, and they talk openly about every lesson they learned.

Skipped:…

Stanford HCI lectures – done:
29 (Evaluating),
30 (Designing user studies) :  avoid between subjects ordering effects (bias and learning effect); within subject;  if there are 3 or more alternatives to test use latin square to get balanced results .

2. marathon.uidesign.ru

description
Seen:

3. SmashingMagazine.com : 25 User Experience Videos That Are Worth Your Time

http://www.smashingmagazine.com/2010/01/05/25-user-experience-videos-that-are-worth-your-time/

description
Seen:
Also mentioned at: http://www.upsidelearning.com/blog/index.php/2010/07/30/25-user-experience-videos/

http://ontwik.com/

Watching: How ninja’s wireframe  (18mins,slide56. Score:5/10)

  • Promotes use of Keynote (Mac software) to make med-fidelity wireframes
  • Talks a bit about pros and cons of wireframes vs high-fidelity prototypes
  • Process: sketch (when uncertain) > wireframe (lots of iteration) > prototype  (jquery, gs) > comp (photoshop).
  • Tip 1: Tell a story.
  • Tip 2: Visually annotate the interaction details. On demoing a wireframe, visual narrate the wireframes fram-by-frame (e.g. one frame shows a button, the next shows “Click” burst-balloon on the button, etc)
  • Tip 3: Use master slides for page/layout types
  • Tip 4: Create a library of components
  • Tip 5: Copy/paste style properties (in Axure use Style Editor for text)
  • Tip 6: Group items whenever possible
  • Tip 7: Learn the keyboard shortcuts
  • Tip 8: Use tables (as guides)
  • Tip 9: Add text to components instead of text line component
  • Tip 10: Keep your theme lean (delete unused masters)
  • Tip 11: Copy/paste between apps  (e.g. from Photoshop, or icons from Google Image search)
  • Tip 12: Don’t limit yourself to gray boxes  (e.g you could use a highlight colour, don’t dumb down the fidelity: add some visual appeal like icons)
  • Testing:
  • - Add in CSS a background colour to text in case images are off  (e.g. low bandwidth users)
  • - How does it look with text size larger/smaller?
  • - DS: Google Autofill?
  • Turn of CSS, is site still readable (screen-reader)
  • Use W3C validation tool to debug while your CSS  (make it more compatible with more browsers, more people)
Watched:
  • Apple keeps it simple by providing bite-size chunks of information  (spoon-feed them the information)
  • UI design is spoon-feeding them the process  (e.g. step-by-step order process, get the user to handle one issue/conflict at a time)
  • 80-20 rule: Give them 80% of the functionality that requires 20% of the user input. For 20% of the interaction process they get 80% of the functions.
  • The interface should be human, thoughtful

Google I/O – Creating Positive User Experiences

Other topics: startups, mobile, wordpress

 

Webstock 2011 Wellington, NZ

http://vimeo.com/user1374773/videos/sort:likes

To see: 

 

Watching:

John Gruber – The Gap Theory of UI Design  (@25mins)  Score: 6/10 ( learning from history of Mac GUI:

- consistency is ok for recognition/learnability  (e.g. a “hole” for a textfield, all buttons should look the same) , but be too  conservative/old fashioned about upgrading your style. Neither go overboard or zany.

 

Lynda.com

http://www.lynda.com/Kelly-Goto/96-1.html and other module (torrent previews)

Bestechvideos.com

Watching:
http://www.bestechvideos.com/2008/12/05/don-t-make-me-click
  (done) LIKE 9/10

  • The best interface is no (or an invisible) interface
  • As a designer, don’t give in to the interaction seduction‘  (e.g. as a marketeer adding to Google homepage: icons for top nav, ajax sliders for searching restaurants, etc an accordion tab for every content type,  lots of text) –> you have just created the anti-examplar.  The trick to good interface is to REMOVE interaction. E.g. instead of selling a shovel, sell the hole. Instead of showing a bike to sell, show the experience (mud, adrenaline, etc).
  • Don’t make me click - e.g. replace pagination with constant loading page as the scrollbar reaches the end of the page more content is loaded
  • Zooming interactions  (e.g. maps)

4. UXweek.com

http://www.uxweek.com/videos

The best ones are already mentioned in SmashingMagazine’s post, see 3 above.
Seen:

5.mfa in Interaction Design

http://interactiondesign.sva.edu/blog/entry/video_notes_from_the_field/

More:

lanryd.com  TIP
http://pivotallabs.com/talks/106-enough-design - seen: Enough design (36/58mins);
http://www.ixda.org/resources (advanced search > video)  +  (tipped by DesignByFire Yohan on linkedIn)
http://www.boxesandarrows.com/view/idea-2008

http://www.ciwcertified.com/About_CIW/webinars.php

http://whichtestwon.com/free-on-demand-webinars-plus-powerpoints (about conversion and A/B testing)

http://vimeo.com/togetherlondon
http://mxconference.com/2011/videos

http://vimeo.com/adaptivepath/videos

http://uxweek.com/2011/

Special topics

Responsive design – see post

Other

Marketing

http://video.google.com/videoplay?docid=-6909078385965257294#  – Seth Godin at Google – All marketeers are liars  (20/48mins)

http://tv.adobe.com/watch/classroom-five-essential-principles-of-interaction-design/part-1-five-essential-principles-of-interaction-design/

To try

http://www.uxbooth.com/view/resources/videos/   TIP

http://www.bestica.com/Videos.aspx?vid=8

http://www.cisco.com/en/US/solutions/ns669/video_tp_compelling.html

http://marakana.com/techtv/index.html

Posted in E-commerce, Interaction Design, Resources, User experience | Leave a Comment »

Where is the fold?

Posted by Dan on January 28, 2010

In my previous article we wrote about what ‘above the fold’ means, when to care about it, principles for web design and collected expert opinion.

What I’d like to answer now is:

  • Where is the fold? Are there any standards? What is generally agreed by designers and experts?
  • Where is the fold according to advertisers and other clients? Which browser types and versions and resolutions do they generally consider?

Where is the fold

The fold for 1024×768 resolutions is on average 578 pixels down from the top of a webpage. *

This is based on my research and average figures taken from various sources (industry experts, ‘best practice’ blogs, etc).

How wide should your site be? In terms of width (pixels across to prevent horizontal scrollbar) for PC only: 1004 pixels across. (Mac= 972) Anything to the right of 1004 pixels across the webpage is much less likely to be seen by the 1024×768 audience.

* note that 578 is probably a generous figure. I would argue that 285 is worst-case but common case scenario, giving a ‘safe’ or secondary fold at 768-285=483 pixels. Averaging 578 and 483 gives you 530.

** This is average. For any person the fold can be anywhere between 285 and 714, but those are min/max extremes and rare. If you consider the fold to be somewhere in the 483 – 600 region,  or about 70 pixels above and below 550  would be good design practice.

What other experts say

Anne Holland: 1024×768   15″ : 980 x 520

Jungle Minds: 714 pixels van de bovenrand (768 pixels minus 2 x 27 pixels voor de balken)

What the stats say

At a popular PL telco site,  7.6% (half a million users) had a browser height of 500 to 549.  (Measured with SiteCatalyst for the 6-month period Aug 2010 – Feb 2011)

Fold trends

Screen resolutions on desktops are getting higher, but increasing popularity of mobiles and  iPad. If you have a mobile equivalent site (designed especially for mobile), this is

Why there is no such thing as ‘one fold to rule them all’

Typically, browser versions and types will be any that the client take into account are aware or that we have specified as compatible with the particular portal. To be more precise you should consider your audience’s resolution, platform, browser and browser version. I’ve regarded only the popular 1024×768 resolution in the most popular browsers using figures from consulted sources mentioned in the Side Notes below.

Determining the fold for your website and audience

  • Profile your (most important) users to get a clearer picture (latest browser/resolution stats). If you have no access to stats for your own site, then use those of popular sites that your users are likely to use.
  • Browser is not always maximized: only 50.4% of users maximise their browser windows so actual browser viewport is often smaller. (source missing). Put another way, screen resolution is not browser resolution and the two often differ [5]. In a more recent survey on our sites it was about 80%.
  • 800×600 is used on average by 8% of my users. You could argue that users with lower resolutions are more used to scrolling, and might even scroll more often (and faster?).
  • Height is the trickiest, because some (novice) users have many and/or tall browser toolbars installed. In extreme cases toolbars might be eating away 250px giving a fold of about 530px. Considering default browser settings + one average toolbar = ~170px?
  • The horizontal fold/scrollbar is equally important.
  • One source claims that 95% of above the fold screen estate should be targeted to the most common users. Debatable.
  • Rule of thumb? Two-thirds down the screen?

Side notes

In answering this I have consulted various sources and articles. Research gets out-dated. Proper research should keep track of the source credibility, date of article, audience and – above all – resolutions and browser versions.

In this article:

  • Last updated in 2008. On 9 April 2008, my visitors mostly used Firefox, MSIE6, MSIE7, and Opera 9.x.   Mac users account for 4% and 800×600 users for 6%.
  • Only 1024×768 resolution considered (still the most popular resolution for most websites ).
  • Sources that also consider Firefox or Chrome have not been consulted yet. Generally the fold of these browsers is about 100 pixels off from the Internet Explorer fold.
  • The date of any source or consulted article should be considered, as the new IE7+ browsers have a different fold due to introduction of tabbed browsing (which some users have turned off). Chrome is especially minimal hence the fold figure for this browser may be increased as mentioned above.

Sources

http://www.boxesandarrows.com/view/blasting-the-myth-of

http://www.cxpartners.co.uk/thoughts/the_myth_of_the_page_fold_evidence_from_user_testing.htm (…”Less content above the fold may encourage more exploration below the fold”)

http://www.motive.co.nz/glossary/fold.php

http://www.webmonkey.com/99/41/index3a_page2.html?tw=design

[5] http://css-tricks.com/9778-screen-resolution-notequalto-browser-window/

[add table: site/source, resolution, fold, browsers]

Calculate the fold

How is the fold calculated? In a 1024×768 resolution, the screen is 768 pixels tall. On an average browser about 190 pixels are devoted to toolbars and other non-webpage elements (browser user interface elements and settings + extra toolbars from browser plug-ins). This gives 768 minus 190 = about 570 pixels

To get an idea of where the fold could be on your site, check out http://www.foldtester.com/
Cautions with foldtester.com:

  • It’s using global internet stats  (that is, the world-wide average). This doesn’t mean the percentages you are seeing reflect reality.
  • In fact, your audience might on average NOT have the internet average in terms of screen resolution, browser used, etc
  • For example there might be many people viewing your site on  iPads .
  • The site says it used “internet average”. This means low resolution (like mobiles) to high-resolution (like wide-screen TV’s)
  • Importance of the fold depends on your site, web skills of your audience  and the presence of ‘scroll-stopper’ elements
  • As this site demostrates, on any site the fold is not on one location but

[add table: browser, how much to substract for each user type (average user, high-resolution user, old PC user) to calculate your fold for any resolution]

Further reading

http://weenudge.com/thefold/  also check the links in the right-column

Posted in Interaction Design, Visual design | Leave a Comment »

 
Follow

Get every new post delivered to your Inbox.