Category — Remote Usability Tests

Interestingly enough, Zuckerberg’s statements retain the much abhorred ambiguity that started his troubles in the first place.  Zuckerberg has only confirmed that Facebook will address the interface design issues in the coming week, but he did not specify how.  As users trust in Facebook continues to erode, it is paramount that Zuckerberg and his organization find a way to redeem themselves by enacting quick and clear measures that will simplify the user experience of the privacy options including changes to the interface design. If they are unable to do so in a timely manner, the future of the social networking giant may hang in the balance.

Facebook and its dreaded partner sites

Facebook’s partner sites Yelp, Pandora, and Microsoft Docs all have access to your personal information unless you visit each site individually and opt out of information sharing. You can also by proxy share your friends’ information if they have not opted out on these websites.  So how do you opt out?  Well, Facebook makes that process very difficult according to the EFF.  The directions that Facebook provides users on its site about how to opt out of “intrawebsite” information sharing are vague and difficult to understand.  Facebook’s interface design is breaking one of the most important website usability rules: make everything easy and clear to your users!

The implication of Facebook’s interface design decisions

What is most troubling about Facebook’s interface design is that it could be a systemic problem plaguing thousands of websites and users. It begs the question: what exactly are the intentions of web designers and how safe is it to trust in the intuitiveness of any interface design?  This is a heated topic that will probably continue to keep internet users on their toes.  For now, it is important to remember that if you are creating a website, the interface design should be simple and usable!  Who knows what the ramifications of Facebook’s latest design changes will be.  Probably nothing.  They seem to own the internet already.

It’s no secret that consumers are flocking to the internet to fulfill their shopping needs. Online shopping has become one of the most popular forms of commerce in the last ten years.  According to Reuters, consumers spent 27 billion dollars online during the 2009 holiday season—and that was only in the United States.  It’s easy to see why eCommerce is so alluring.  In theory, the internet should be a shopper’s paradise—click a few buttons and buy anything you want from the comfort of your own couch. But in reality, online shopping isn’t always such a delightfully efficient experience. No matter how interesting the product or beautiful the graphic design, many consumers lose patience with online shopping sites because they simply aren’t usable.  Usability is the driving force behind eCommerce and if your site isn’t functional due to poor interface design, the consequences can be disastrous for you and your company.

Rendering apps useless can have significant impact on user behavior
Rendering popular apps useless is a surefire usability and user experience annoyance that in today’s super fast real-time web environment could cause serious problems for an app. According to Pinch Media, just 30% of people who buy an iPhone app use it the day after it was purchased. After 20 days less than 5% are actively using it!

Is this quarrel about the usability of third party apps’ interface design?
One might speculate if this recent quarrel has anything to do with usability issues of third-party Facebook apps. It is obvious that especially in the mobile context, the usability of apps is paramount to enabling users to make the most of them. Was Facebook fearing for its reputation? After all, even after the most recent drastic interface design changes, Facebook can be considered an example of good usability and user interface design. Or is it a purely IP-related issue?

With Twitter buying Tweetie to create the first official Twitter app another question remains: could Facebook be hoping to wrest control of the Facebook app market? This would leave fickle users with no other choice than to turn to the official app.

Beyond Storyboarding

Some of these wireframe tools that you can use for your storyboards even include interactivity and collaboration, offering you as an interface designer a dynamic innovation process that really brings your storyboard to life. You can create fully navigable wireframes with interactive elements, such as buttons, check boxes, and drop-down menus. These features let you create wireframes that allow you to actively simulate your website’s functionality. This is extremely useful because it facilitates communication and understanding between you, your clients and prospective users.  Collaboration features mean that several designers or even clients can simply log into the wireframe software and simultaneously make changes and/or provide feedback concerning storyboards or interactive wireframes. This obviously goes beyond the quick storyboards but may be immensely helpful in certain scenarios. In a world where time is of the essence, utilizing specialized wireframe software programs is concurrently smart and vibrant — features that do not always go hand in hand.

Storyboarding Resources

Of course, this bog post is too short to go into great detail about storyboarding. So I’ve compiled a short list of resources that may help you learn more about storyboarding as a means to optimize the interface design of websites.
Here are some helpful links:

•    http://en.wikipedia.org/wiki/Storyboard – A great article on the origin and wider uses of storyboards. It explains most of the relevant terminology.

•    http://www.boxesandarrows.com/view/comics-not-just-for – Comics: Not Just For Laughs! By
Rebekah Sedaca. This article goes into some details on how quick comic-like sketches can be immensely helpful in an effort to communicate concepts and create a great user interface design.

•    http://www.cs.cmu.edu/~landay/research/publications/storyboard-tr/storyboard.pdf – Just Draw It! Programming by Sketching Storyboards by Landay, J. A., & Myers, B. A. (1995).  An article for all those interface designers and usability experts out there who are interested in the more academic background of storyboarding.

•    http://www.cs.cmu.edu/~landay/research/publications/CHI96/short_storyboard.pdf – Sketching storyboards to illustrate interface behaviors by Landay, J. A., & Myers, B. A. (1996). Another rather academic article that is quick to read and builds on the previous one.

•    Rosson, M. B. & Carroll, J. M. (2002). Usability Engineering: Scenario-Based Development of Human Computer Interaction.

Through prefab interface elements (e.g. radio buttons, links, navigation items, controls etc.) interface designers can create clickable and animated web or software interfaces just in seconds. Without any programming skills, interface designers can focus on the web concept and use cases, site structures and the overall layout of the site, instead of getting lost in details that only matter at a later stage of the project.

Our conclusion of wireframing software: It’s got the look and feel of Rapid Paper Prototyping, but adds interactivity (making wireframes clickable) and accelerates developing speed through re-usable elements and layers. Many (real-time) collaboration features enable interface designers to new ways to work with higher efficiency, leaving more time for the creative process that really counts.

For the people who are into screen design, Rapid Paper Prototyping is an old hat! But ever considered doing screen prototyping on screen?

With pidoco’s web-based prototyping software, screen designers and web developers can save valuable time, optimize communication within the team and build better usability for the WWW.
Rapid Paper Prototyping has already been known to be the solution to get a screen design started. The basic concepts of the layout will be put on paper and discussed within the team. This design will then be put through a refinement process by incorporating feedback from colleagues or even clients. This paper-built screen will eventually act as a rough guide for the whole project – from start to finish. Some interface designers even use these very limited paper prototypes for performing usability tests. Retrieving usability errors in the prototyping phase can save a lot of time, since later changes in the so called ‘finished’ web project are minimized.

Anyway, there are some drawbacks to Rapid Paper Prototyping.  Paper prototypes are only scanned to add to the project documentation and also difficult to share between team-members. Scanning paper prototypes and making them ‘clickable’ for testing use cases is also a time consuming task as we all know!

That is why many screen designers create their prototypes directly in MS PowerPoint or MS Visio and have them distributed to the relevant sources. True, that way one can share the sketches more effectively but it is not really more interactive than copying a piece of paper handing it to other stake holders. The digital sketches still do not show the real capabilities for test user excitement:  links, dynamic menus and combo-boxes etc. cannot be reproduced effectively and need to be explained individually in long paragraphs. Again, more time and effort has to be invested to get the message across.

pidoco° has noticed this problem and made it their task to tackle it by providing a simple web-based interface design software.

When you conduct an affinity diagramming workshop, make sure the group of participants is smaller than 7 or 8, since it is almost impossible to keep everyone focused (depending on the amount of data the affinity diagramming workshop might even take two sessions) and when working in turns participants must bring some patience until all other members have finished.

Note: When there is a lot of data in a non printable format, ask the participants of your affinity diagramming session to write things down on stick notes, so you split the workload.

After preparing the information and getting the users on board, the next step in affinity diagramming is to put the notes on the whiteboard (or wall), grouping similar content in the same area (do not label it yet). When certain groups of your affinity diagram get too ‘fuzzy’, it might be useful to split a group in various aspects (sub groups) so that you keep the data sets consistent.

When you do the affinity diagramming alone, it might also be usable to work digitally (like with MS Excel or mind mapping tools), but when team work is required, it has proven more effective to work offline with pen and paper.

At some time you will have arranged all sticky notes in groups and may do a quick review of your affinity diagram to make sure everybody agrees on the grouping results. For later processing of the data, now it might be useful to name the groups making them identifiable (or when the data sets represent areas on a website, think about appropriate navigation topics or headlines).

What you get from Affinity Diagramming?

Independent of the data, the purpose and the group of participants, affinity diagramming is a simple and cost effective usability method for extracting and grouping ideas from qualitative data and for obtaining consensus on how information should be structured.

Affinity diagramming is a very simple but powerful usability method for grouping single pieces of information, finding patterns and bringing structure to an unsorted amount of data. Thus helping to understand the underlying system and to process the data that others (users) can find their way around. Affinity diagramming is primary a method for interpreting and evaluating previously collected qualitative data.

When to use Affinity Diagramming?

Affinity diagramming is the right usability method when you have to deal with a vast amount of unsorted data, like qualitative statements from a user survey. And the name says it all: with this usability method you look for affinity in a set of data pieces and plot them on a whiteboard (or the like).

The structured approach of affinity diagramming should always be conducted when there is more than one ‘right’ and teamwork is required to find the best (most comprehensible) solution for the users. Grouping information is a process where the point of view influences the different data groups thus what’s logical from a designer’s perspective might be incomprehensible for an ingenious user not familiar with the site’s context. Bringing different views into the structuring of large amounts of data makes affinity diagramming so objective.

How is Affinity Diagramming conducted?

The easiest and most common way is to write down all single pieces of information on sticky notes and then gather with all participants around the data. When the end result of that sorting and grouping process is for purposes where users are involved, they should also be part of the affinity diagramming team.