Category — Prototyping Tool

In this blog post, inspired by a TheNextWeb blog entry,  I shall talk about a few things interface designers and web developers should consider when embarking on creating a new app, regardless of the platform. The 2005 animated film ‘Robots’ featured the following catchphrase “see a need, fill a need” in essence as a motif. Market research is crucial. If you have an idea you want to develop look around and see what programs or websites are already out there catering to that market or segment. Positioning your website or software application to cater to a previously unmet market demand is a great place to start. If you happen to be developing an alternative to already established (and popular) players in a market you have to ask yourself: How am I going to do this better? What unique selling point(s) will my product have over my rivals’ products? A case in point is webmail, which is a very crowded and competitive marketplace. If you want to start a new webmail service, for example, what features are going to make users want to use your service rather than, say, Gmail or Yahoo. But features are not the entire story.

Although such high numbers of users are threatening to pull the plug on their Facebook memberships, in all likelihood, the threats will remain threats. While it is true that people are furious that their private information is not being properly cared for, Facebook users will still have a hard time leaving the site because of all the social networking benefits. Facebook has become one of the main arteries in the social life of millions of people. It is a way to instantly and easily share life with all family, friends, coworkers etc. Pictures, videos, messages, chatting, fan clubs—Facebook is an outlet that allows users to participate in and share a diversity of interests. In reality, it is not so easy for a user to click the ‘delete account’ button. Perhaps Facebook should think about hiding this option in its interface design.

The poll numbers are also telling in terms of the potential mass user exodus. 60% of users only threaten to leave while 16% have actually left. This illustrates the fact that most people who are angry enough to leave have probably left already. This is not to say that people aren’t really mad—many, in fact, are livid. But the anger boiling in the blood of the 60% of users threatening to leave Facebook has actually led to a more positive Facebook evolution: in the past few weeks, Facebook has begun implementing changes to its security feature options in addition to simplifying its interface design. While the social networking site has a long way to go in terms of re-building client trust and respecting client privacy, the organization has proven that it is keen to take user experience feedback into account, even when it is apocalyptically critical. Because Facebook has allowed itself to succumb to self-reflexivity, their survival outlook remains good. For now.

In this blog post I shall look at design patterns as a usability method in 2 parts. In part 1 I shall look at what design patterns are and the advantages of using them in interface design.

What is a design pattern?

Design patterns are a useful method for the interface design of websites and software programs. One of the hallmarks of humanity is the evolution of our empirical collective body of knowledge that succeeding generations have built upon to get us, a relatively feeble creature, to where we are today. Anyone wishing to start a fire to prepare a meal does not have to accidentally discover fire first! In the same vein design patterns are a collection of solutions to typical problems encountered during the interface design of web sites and software programs. Over time these interface design problems have been documented and paired with solutions to assist all interface designers be they a novice or a seasoned professional.

What are the advantages of design patterns in interface design?

One of the ways of ensuring good usability in interface design is to always adhere to usability standards. These standards have been tried, tested and proven to work. Design patterns are there to assist you in solving the common problems encountered during interface design, including usability issues, thus enabling you to optimize your time much like a shortcut takes you to your destination faster. Design patterns sum up best practices and can be thought of as a template or guide that interface designers can use as a direct solution or a starting point to fine tune their interface designs.  Design patterns are also useful because they function as a code or standard that can be used by software developers, interface designers and other stakeholders to communicate and collaborate more efficiently. Novices can become accustomed to them and rely on their proven success, while professionals can share and show their expertise. Design patterns are also continuously being updated, tested and improved upon by an ever growing community of information architects and interaction or interface designers.

What is task analysis?

Task analysis is a usability method that can assist you with the creation of excellent user interface designs. In addition, you can use the information obtained from a task analysis to design usability tests for your interface design. Task analysis is the thorough investigation of all the important factors related to the achievement of a given task. These factors include catalogued descriptions of manual and mental activities, environmental conditions, task duration, task allocation, and task complexity. Task analysis is concerned with ascertaining the most in depth understanding possible pertaining to how people perform jobs and what materials, tangible and intangible, they need to perform them well. Task analysis is a byproduct of Applied Behavioral Analysis, which was established as a theory in the field of psychology by Montrose Wolf, Donald Baer, and Todd Risely in 1968.

What are the benefits of task analysis?

The information gathered during a task analysis can be extremely helpful when planning a new user interface design. Since usability is at the crux of interface design, it is crucial for you to find usability methods that provide you with detailed information on how to design and/or improve your product. Task analysis is especially helpful because as a usability method it allows you to understand the requirements relating to the flow of information within your system relative to the cognitive reasoning, expectations, and needs of your users. Your task analysis can serve as a reference for testing the usability and value of the system functions and features of your fledgling interface design.

How to conduct a task analysis

Task analysis is a complete deconstruction of the tasks users need to perform using your proposed or existing user interface design. The results can guide you in the design or improvement of your user interface. When embarking on a task analysis, be sure to remember that your goal should always be to understand the use of your interface design relative to the cognitive task performance and understanding of your users. Task analysis is relatively simple in theory, but can be arduous in practice. This is because detailed analysis is the focal point of a task analysis—the more painstakingly thorough you are with your investigation, the more relevant information you obtain that will lay a strong foundation for the creation of a successful user interface design. So be prepared to spend a lot of time within the confines of inquiry.

This blog post is the second in a series of two about scenarios of use as a usability method.

How to generate scenarios of use

Scenarios of use are not exceptionally difficult to craft, which makes them an attractive usability method.  Creating them, however, is easiest if you have a facilitator with strong communication and interpersonal skills—this helps boost group morale and creates an atmosphere that has a higher level of productivity.  When creating your scenarios of use, try to generate a number of scenarios that cover a wide range of circumstances, both positive and negative (the negative are called ‘misuse cases’).  You want to be sure to include misuse cases so you can investigate non-functional requirements such as the security and accessibility of your interface design.  You should go through all scenarios of use by yourself or with your group before you include stakeholders.

What are the 8 steps to developing scenarios of use?

According to Edward Kenworthy’s 1997 book Use Case Modeling: Capturing User Requirements the eight steps to developing scenarios of are:
1. Identify who is going to be using the website (this also works for other web-based, desktop-based or mobile applications).
2. Pick one of those actors.
3. Define what that actor wants to do on the site. Each thing the actor does on the site becomes a scenario of use.
4. For each scenario of use, decide on the normal course of events when that actor is using the site.
5. Describe the basic course in the scenario of use. Describe it in terms of what the actor does and what the system does in response that the actor should be aware of.
6. When the basic course is described, consider alternate courses of events and add those to “extend” the scenario of use.
7. Look for commonalities among the scenarios of use. Extract these and note them as common course scenario of use.
8. Repeat the steps 2 through 7 for all other actors.

What are the limitations of scenarios of use?

According to Alistair Cockburn, scenarios of use are an indispensable usability method, but they do not “take care of system design, user interface design, feature lists, or testing”.  Thus, scenarios of use can only assist you in laying the foundation for a great user interface design; scenarios of use help you hypothesize about your interface design, but they do not aid you in the actual feature design or edits of your prototype. Scenarios of use provide guidelines and suggestions only, but are still very useful because they help you identify the points in your interface design upon which you should focus design effort and subsequent usability tests.

Our conclusion of Rapid Digital Prototyping: It’s got the look and feel of handmade scribble prototyping, but adds interactivity (making wireframes clickable) and enhances developing speed through re-usable elements and layers. Many (real-time) collaboration features enable interface designers to new ways to work with much better time allocation, leaving more time for the creative process that really counts.

A lot of web designers I worked with so far, tried to reinvent the wheel every time faced with a new web project, creating really beautiful and arty stuff – nobody could use on first sight (but I have to admit, the stuff looked really nice!). But nice isn’t the task here, usable is what we want and need!

Re-arranging learned patterns, controls and site structures, some designers might say, is boring, limited and not innovative at all! On the contrary I say! It is probably much more challenging, using the very same controls users know and still creating innovative design.
For that reason I am a great fan of the Yahoo! Design Patterns library. The Yahoo! Design Patterns are a collection of usability patterns or usability best practices for what they categorized as: page layout, navigation, selection, rich interaction and social.
Yahoo! presents more than 50 individual design best practices and tells you exactly when to use them and what problem you will solve with that! Here is what you will find in the different
categories:
Yahoo! Design Pattern – Page Layout

In this design pattern category you will find best practices for page grids and general page layouts, keeping consistency over the whole site, delivering a cohesive user and brand experience. With a standardized grid (wireframe grid) you keep the site comprehensible for the user while maintaining flexibility for integrating all sorts of dynamic and individual content.
Yahoo! Design Pattern – Navigation

This Yahoo! Design Pattern category solves the most important problem on a website: finding the right stuff! These design patterns present best practices for all sorts of navigation challenges, filter options, pagination, navigation tabs and bars etc.

The pidoco° wireframe software consists of three main modules which complement each other perfectly. They speed up the interface design process and optimize the general workflow in all stages of collaborative web design.

Interactive wireframes are quickly sketched with the Prototype Creator (just by drag&drop) and can later easily be shared and reviewed by colleagues, test users or clients. If there is need for even more in-depth feedback on individual aspects of the use cases, just use the digital prototypes to perform a easy to set up remote usability test where moderator and test user are connected remotely by a shared screen and an integrated phone. All modules are aimed to increase productivity of the interface design process and ease communication within the team.

Rapid Digital Prototyping (RDP)

Through prefab stencils (e.g. radio buttons, links, navigation items, controls etc.) interface designers can create clickable and animated web or software interfaces within minutes. 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.

But even if screen designs have already been made in some hi-fi graphics software (e.g. InDesign, pidoco° can add value to the design process by bringing interactivity to static screens. Adding ‘click areas’ to the finished screenshots enhance the collaboration and interaction capabilities of a former static screenshot. Colleagues, clients and test users can now easily be integrated in the developers team and online discussions can be held. Just like web conferencing, but with real-time editing never seen before!

The pidoco° wireframe software consists of three main entities which complement each other perfectly. Together, they enhance the interface design process and optimize the general workflow in all stages of interactive web design.

Digital prototypes are quickly sketched with the Prototype Creator (just by drag&drop) and can later easily be shared and reviewed by colleagues, test users or clients. If there is need for even more in-depth feedback on individual aspects of the web concept, just use the clickable wireframes to perform a plug&play remote usability test where moderator and test user are connected remotely by a shared screen and an integrated phone. All modules are aimed to increase productivity of the interface design process and ease communication within the team.