wireframes & usability

Seems as Remote Usability Testing will be becoming more pervasive in the future.
Uxited.com reports positive findings on their remote usability testing which were conducted over the course of two days.
Uxited’s findings on the benifits:

• You hear what the user is saying (and perhaps listen better since you’re not distracted by what he/she looks like).
• You see the user’s on-screen activity including what browser they use and how it’s set up (e.g., number of toolbars).
• You get a better understanding of the user’s natural environment (whether their speakers are hooked up, whether there’s a dog in the house, etc.).
• You may get more honest feedback.  I’m not sure what the research says about this, but my impression was that people not meeting face-to-face with a facilitator may be more comfortable saying what they really think.
• No need to sit in a dark room behind one-way glass, nor keep our voices down when we wanted to discuss users’ comments during a test.  (Our conference line was on mute, of course.)
• No travel costs

We from pidoco° have been stressing the very same benifits for some time now and since our Remote Usability Tester has been available as a public BETA, we have been gaining heaps of positive feedback on this process.
Certainly, in the age of the real-time communication it is just another step towards improving communication within business and private realms whilst protecting the environment.  (Soon no more business trips in First Class needed, sorry guys!)

Welcome to the future of UX..

Rob James posted a great article on the “top down approach” which would aid developers to work on their projects in a “holistic approach”.

Essentially the concept is that you work from the user’s perspective down, rather than thinking through the requirements to come up with the domain model, class models and the like. The reason that this is beneficial is that you focus on what the user actually requires to do, not what the system expects them to do. And that is the first step towards building systems that employ best practices in usability.

In the post he mentions the 9 steps of successful project development:

• Concept
• Brainstorming
• Paper wireframes
• UI Design “Look & Feel”
• HTML Screens
• UI Controller Layer
• Tests and stubbed service layers
• Service implementation and data layer
• Utility classes

A well written article and surely a great approach and we believe that the perfect mediator between end-user, developer, client and technology is in fact -the wireframe.

There are many guidelines out there on Usability. We find that this article shows a few tips which can definitely aid the overall experiences of a Web interface. It can help to keep those tips in mind when designing an interface, even when still in the prototyping phase!
A  nice little article by “bestdesigntuts” on U&Design ideas with direct quotes.  The original post can be found here:

1. Design is a key determinant to building online trust with consumers. For motivated users of an information site, bad design (busy layout, small print, too much text) hurts more than good design helps. – Sillence, Briggs, Fishwick, and Harris, 2004.
2. Layout on a web page (whitespace and advanced layout of headers, indentation, and figures) may not measurably influence performance, but it does influence satisfaction. – Chaperro, Shaikh, and Baker, 2005.
3. Experience matters: Blue links are easier to click than black ones, even though black ones have higher visual contrast and are easier to see. – Van Schaik and Ling, 2003.
4. It’s important to consider the users when you have a choice of icons, links, or both. Initial performance is best with the link alone. Frequent users can use either equally effectively. Icons are not faster, relative to text links alone. – Wiedenbeck, 1999.
5. Rules of thumb for icons: Make them as large as feasible, place frequently used icons in a persistent task bar, and arrange them either in a square (first choice) or in a horizontal layout. – Grobelny, Karwowski, and Drury, 2005.
6. The acceptance and impact of animation is enhanced when users are warned to expect it and allowed to start it when they want. – Weiss, Knowlton, and Morrison, 2002.
7. Use of whitespace between paragraphs and in the left and right margins increases comprehension by almost 20 %. – Lin, 2004.
8. A format of 95 characters per line is read significantly faster than shorter line lengths; however, there are no significant differences in comprehension, preference, or overall satisfaction, regardless of line length. – Shaikh, 2005.
9. Applications vs. websites: In general, visual layout guidelines for GUIs also apply to the web, but there are differences to be aware of. For example, dense pages with lots of links take longer to scan for both GUI and web; however, alignment may not be as critical for web pages as previously thought. – Parush, Shwarts, Shtub, and Chandra, 2005.
10. Narrative presentation enhances comprehension and memory. Narrative advertisements produce more positive attitude about the brand and a higher incidence of intent to purchase.– Escalas, 2004.
11. On sites with clear labels and prominent navigation options, users tend to browse rather than search.Searching is no faster than browsing in this context. – Katz and Byrne, 2003.
12. Users will wait longer for better content. Users will wait between 8-10 seconds for information on the web, depending on the quality of the information. – Ryan and Valverde, 2003.
13. Consumer purchase behavior is driven by perceived security, privacy, quality of content and design, in that order. – Ranganathan and Ganapathy, 2002.
14. In 2001, Bernard found that prior user experience with websites dictated where they expected common web page elements to appear on a page. The same still holds true today: Users have clear expectations about where to find the things they want (search and back-to-home links) as well as the things they want to avoid (advertising). – Shaihk and Lenz, 2006.
15. When assessing web accessibility under four conditions (expert review, screenreader using JAWS, automated testing via “Bobby”, and remote testing by blind users) those using screenreaders find the most issues, while automated testing finds the least number of accessibility issues. – Mankoff, Fait, and Tran, 2005.

1. Design is a key determinant to building online trust with consumers. For motivated users of an information site, bad design (busy layout, small print, too much text) hurts more than good design helps. – Sillence, Briggs, Fishwick, and Harris, 2004.
2. Layout on a web page (whitespace and advanced layout of headers, indentation, and figures) may not measurably influence performance, but it does influence satisfaction. – Chaperro, Shaikh, and Baker, 2005.
3. Experience matters: Blue links are easier to click than black ones, even though black ones have higher visual contrast and are easier to see. – Van Schaik and Ling, 2003.
4. It’s important to consider the users when you have a choice of icons, links, or both. Initial performance is best with the link alone. Frequent users can use either equally effectively. Icons are not faster, relative to text links alone. – Wiedenbeck, 1999.
5. Rules of thumb for icons: Make them as large as feasible, place frequently used icons in a persistent task bar, and arrange them either in a square (first choice) or in a horizontal layout. – Grobelny, Karwowski, and Drury, 2005.
6. The acceptance and impact of animation is enhanced when users are warned to expect it and allowed to start it when they want. – Weiss, Knowlton, and Morrison, 2002.
7. Use of whitespace between paragraphs and in the left and right margins increases comprehension by almost 20 %. – Lin, 2004.
8. A format of 95 characters per line is read significantly faster than shorter line lengths; however, there are no significant differences in comprehension, preference, or overall satisfaction, regardless of line length. – Shaikh, 2005.
9. Applications vs. websites: In general, visual layout guidelines for GUIs also apply to the web, but there are differences to be aware of. For example, dense pages with lots of links take longer to scan for both GUI and web; however, alignment may not be as critical for web pages as previously thought. – Parush, Shwarts, Shtub, and Chandra, 2005.
10. Narrative presentation enhances comprehension and memory. Narrative advertisements produce more positive attitude about the brand and a higher incidence of intent to purchase.– Escalas, 2004.
11. On sites with clear labels and prominent navigation options, users tend to browse rather than search.Searching is no faster than browsing in this context. – Katz and Byrne, 2003.
12. Users will wait longer for better content. Users will wait between 8-10 seconds for information on the web, depending on the quality of the information. – Ryan and Valverde, 2003.
13. Consumer purchase behavior is driven by perceived security, privacy, quality of content and design, in that order. – Ranganathan and Ganapathy, 2002.
14. In 2001, Bernard found that prior user experience with websites dictated where they expected common web page elements to appear on a page. The same still holds true today: Users have clear expectations about where to find the things they want (search and back-to-home links) as well as the things they want to avoid (advertising). – Shaihk and Lenz, 2006.
15. When assessing web accessibility under four conditions (expert review, screenreader using JAWS, automated testing via “Bobby”, and remote testing by blind users) those using screenreaders find the most issues, while automated testing finds the least number of accessibility issues. – Mankoff, Fait, and Tran, 2005.

“It’s all about usability”.. agreed!

Thanks to Scott Monty

To mark the 50th anniversary of the Prince Philip Designers Prize, design commentator Kevin McCloud interviews H.R.H. Prince Philip about his passion for good design. Some interesting retrospective views by the Prince, definitely an interesting view.

A SXSW Presentation from March 2009 held in Austin Texas-USA which we caught off slideshare.
A fairly lengthy presentation on wireframing- very informative for both, novice and advanced users!

Steffen Zörnig talks about us and some of our competitors.
It is an interesting review on wireframe creation tools and a definite must-read.  Sorry to the one’s who don’t speak German, maybe you view it via google translate..
One of his statements is that Usability Testing will definitely improve your prototype and that the usage of prototype creation tools is advisable.

Wireframe Mockups, bei dem die Webseiten skizziert werden und dank aktueller Software wie FlairBuilder, MockFlow, Axure, oder Pidoco sogar als Prototype (Klickdummy) interaktiv nutzbar sind. So lassen sich im Vorfeld schon Probleme in der Usability feststellen und verbessern.

Furthermore, his conclusion is that in fact our product seems to be the best solution in terms of functionality.

Funktionell ist jedoch Pidoco ein großes Stück weiter und wäre für größere Projekte meine erste Wahl!

Well, we could’t agree more and would like to thank Steffen for the research well done. Of course time is short these days and that is why we’d like to take the oportunity to add to his review.

Our product provides the “scribble mode” which lets the collaborators/co-workers etc.  undestand that it is- in fact a wireframe.
Anybody looking at a prototype done in the  “scribble mode” will get the impression that it has been done by hand(or on paper).  A nice little feature which shouldn’t be missed out on! Here is a good example of how it can look like.. We also let our users export to HTML, since it will give the possibility to directly import the pidoco° prototype into running projects.

A great review on wireframing tools and some of the author’s requirements for successful implementation. The author (Rolf Kleef) lists his personal requirements as:

• Integration of the whole work processes with how I work would be great, specifically allowing offline work on designs

• Software as a service (SaaS) is ok, if I can take my data with me.

• Should not require software installation, or expensive subscriptions to participate for people outside my organisation.

• Should be usable on all platforms: I’m using Linux, designers usually want a Mac, and project clients often are still stuck on Windows.

We’re extremely pleased that Rolf Kleef is so satisfied with our product and we are hereby thanking him for the great review.

However, one requirement is missing in his list:

• The ability to review the prototype and to get feedback from other co-workers!

We believe that getting feedback is an integral part of the design process and that it should be done via the very same tool which builds the prototype, wouldn’t you agree? If you do, then you have surely already made friends with our Reviewer and Remote Usability Tester, and if not -you really should!

The Blog post on “Forget the Wireframes, Throw Away Your Boxy Layouts — Design BIG!” points to the idea that people should think “outside the box” or “outside the wireframe”.

At least that is what the title of the post tries to convey. The author Fernandes Wendell claims that:

…many online portfolios out there have much of the same old look and feel: boxy, wireframed and boring look. My suggestion is to get away from this usual, tired style. These types of layouts are overdone…

I totally agree with him on the point that many designs are looking the same, specially if you’re working in WordPress. The basis of all design should be to have a rough concept and outline on how you’re gonna design your interface, let alone on where elements are going to be placed. If you decide to place a banner a bit more to the left or right and whether you gonna have a background picture which is not following a straight line, then it will surely still follow A line..in other words, I do not believe that “forgetting the wireframes” is the way forward.

Nontheless, it is an interesting article and is a good read for GUI designers