This blog post is the second in a series of two about usability and interface design

User centered design and usability

Usability as one of the main goals of the user interface design process benefits not only from usability testing, but also from employing other methods of user centered design. User centered design allows designers to set realistic goals and objectives for the design of a user interface that balance the needs and limitations of the end user with the needs and goals of the designer or the organization employing the software application. User centered design tools can assist in the creation of user interfaces that are rooted in how users can, want, or need to work, instead of forcing the users to change how they work to accommodate the approach taken by the software developer. In order to achieve this goal, designers should make the needs of the user the central guiding force throughout each step of the interface design process:
•    Website / application planning
•    Content creation
•    Prototyping
•    Usability testing
•    Collecting user experience feedback

The benefits of employing the user centered design method are manifold because not only can you increase the popularity of a website of program, but you can also cut costs by developing applications that are successful on the first try.

Don’t make me think!

Many users encounter problems with interface designs because web developers lose sight of the importance of simplicity during the development process. Interface designs often become convoluted and complex, ultimately requiring too much time and energy output from the user in order to understand and navigate a system. Steve Krug, author of „ Don’t make me think: a common sense approach to usability“, has an excellent usability mantra: „Don’t make me think!“. According to Krug, this motto is the first law of usability. If you want a web site to be successful then you have to make sure your users find it so easy to use that they literally don’t have to think. This often means that designers have to think even more during the interface design process. Ensuring great usability in an interface design can be a very complex process, especially when the tasks to be accomplished with the application are complex. But the effort is worth it, since usable applications tend to be much more successful than those that require users to think about them too much. Not having to think – that is how you know your interface design has reached the level of usability required for success.

This blog post is the first in a series of two about usability and interface design

What is usability?

At its most fundamental level, usability is defined as the study of the ease with which people can achieve a particular goal by operating a human-made tool or system. The central goal of usability is to answer the following questions:

•    How well can users learn and use a system or tool to achieve a goal?

•    How satisfied are they with the process provided by the system or tool?

In computer science, these questions are kept at the forefront of user interface design during the development process in order to ensure that each user interface is characterized by optimal usability.

User interface design and usability

Usability relative to user interface design specifically focuses on evaluating how clearly and effectively a user can interact with a particular user interface. Usability.gov defines these user experience measurables as such:

•    Ease of learning – How fast can a user who has never seen the user interface before learn it sufficiently well to accomplish basic tasks?
•    Efficiency of use – Once an experienced user has learned to use the system, how fast can he or she accomplish tasks?
•    Memorability – If a user has used the system before, can he or she remember enough to use it effectively the next time or does the user have to start over again learning everything
•    Error frequency and severity – How often do users make errors while using the system, how serious are these errors, and how do users recover from these errors?
•    Subjective satisfaction – How much does the user like using the system?

In order to evaluate the above mentioned measurables usability tests can be employed by interface or interaction designers. A usability test is a technique that is used to evaluate the usability of an interface design by testing it with end users, often using wireframe prototypes before the interface design is fully implemented, in order to receive vital user experience feedback. Usability tests help interface designer not only obtain the critical usability design information they need, but also provide designers with a proven and effective process of doing so. This means that the overall interface design process will be much smoother, allowing you and your team to create an interface design with the potential to be highly successful.

This blog post is the second in a series of two about user interface design

Tips for designing a successful user interface

In my first post I talked about what user interface design is and why understanding it is important. Now, let’s take a brief look at a few tips on how to create a solid user interface design so that you can successfully meet the needs and expectations of your clients and the end users of the interface you are creating.

Consistency: When embarking on the creation of a new interface design, begin by thinking about consistency. Why is consistency important? Because people need to learn how to use a system, and once they have found out how it functions, they develop habits and expectations. Satisfying these expectations makes it easier for people to use an interface and to be comfortable while doing so.

Don’t be busy, be simple: Crowded user interfaces can frustrate users. They are often difficult to understand quickly, which makes them difficult or time-consuming to use because identifying or discerning information and filtering out your options as a user becomes harder. Don’t fill your interface design with unnecessary graphics and exotic font styles. Find a way to make your interface design clean, simple, but also interesting.

Prototype and then test your interface design’s usability: Prototypes (for example wireframe prototypes) and usability tests are a critical aspect of successful interface design. Prototypes are rudimentary working models of your interface design (or of any type of design for that matter). They range from simple wireframe prototypes consisting of placeholder boxes to detailed high-fidelity prototypes. Usability tests are designed to evaluate your interface design by testing design concepts with end users, giving you direct input about how users use your system and how well they can understand it. During the creative process, you should keep in mind what objectives the end users of the application want to achieve. Consequently you should be prototyping and thinking about or rather measuring how your users will react to your interface design instead of assuming you know your end users well enough. If you are designing a user interface, the benefits of prototyping, usability tests, and real-time collaboration are
worth checking into.

If you want to be a successful web designer, you must make usable, functional interface designs a focus of your work. This will contribute to the success of not only your company (or whatever entity you design for), but also yourself. A popular interface design is something you can take pride in and will win you future contracts.

This blog post is the first in a series of two about user interface design.

What is user interface design?

Before we define user interface design, let’s define the basic concept of an interface. An interface is a point of interaction between two entities that are autonomous yet mutually dependent. These entities exchange information and contribute to the successful completion of a given process. Interfacial interactions are a ubiquitous phenomenon without which we could not accomplish the simplest of tasks like doing laundry or preparing meals.

User interface design (UID) is the design of computers, software, mobile devices, and machines with the central focus being the user experience and interaction between humans and these objects. User interface design’s main goal is to make these objects as intuitively usable as possible based on the needs of the user.

Why is understanding user interface design important?

As a designer, you must grasp the fundamental importance of user interface design if you want to create functional websites for your clients. An interface that is poorly designed can cost end users (and potentially your clients) time, money, and relationships.

If you are a user interface designer, here is a good motto to live by: Users are not designers and designers are not users. Understanding this core concept of user interface design is crucial because it allows you as a designer to constantly keep in mind that your product must be created to optimize usability from the perspective of the user and not from the perspective of what you as a designer find most interesting. Don’t get carried away during the design process— make sure your user interface design is always accessible to your users.

When thinking of applying paper prototyping to test the usability of your interface design you have to arrange a workshop for users and developers to attend. The users that are invited to attend should be representative of the intended customer of your product meaning you have to identify them before recruiting them for testing. Tasks, or use cases, have to be designed for users to go through before you can create the paper prototypes. Go through the paper prototypes in-house prior to usability testing.  During usability testing you will need a good facilitator, a person to take note of issues raised and someone to play the part of the computer (simulating the response of the program to user actions). After testing go through any issues raised in order to revise the prototypes for the next test. At the end of the process communicate the results to the rest of the team. It is advisable to record sessions with audio or video equipment for later analysis and archival purposes.

What are the four stages of paper prototyping?

Paper prototyping is applied using four different stages which serve different purposes. The first stage of paper prototyping is the concept design stage. This stage of paper prototyping is when you brainstorm different approaches and strategies with a view of learning which thereof fulfills the targeted usability requirements.  The interaction design stage of paper prototyping is when you organize the structure of your different interface designs. Affinity diagrams are used to sort out the interface designs into clusters of similarity in order to better make sense of the large amounts of data. The screen design stage of paper prototyping is used for the initial graphical user interface designs. The screen testing stage of paper prototyping is used for the refinement of user interface designs.

What are the limitations of paper prototyping?

As with everything in life, paper prototyping also has its limitations. A human being looking for the appropriate print out as he tries to play the role of the computer is not equal to the latter. The main drawback with paper prototyping has a lot to do with the fact that it is on paper. Paper is static and not truly interactive. A hyperlink on paper looses all of its functionality as do interactive elements like drop-down menus, datepickers and text input fields. Simulating the elegant subtleties of all these effects can be a real challenge using print-outs with a person fiddling through a stack of paper trying to find the right screen.

A step ahead: Rapid digital paper prototyping

Thanks to the Web 2.0 paper prototyping has evolved beyond paper through the advent of rapid digital paper prototyping. Software, such as pidoco°, an online wireframing tool, allows you to create clickable wireframe prototypes that embrace interactivity with the ease of drag and drop functionality that allows users to assemble the prototypes from pre-fabricated visual elements without any need for programming. These prototypes are created in a standard web-browser without the need to install any software. Prototypes can be shared with stakeholders who can then view, annotate and/or edit them offering not only feedback but also a great way to collaborate with stakeholders as well as the possibility of conducting remote usability tests over the internet.

To learn more, I recommend books like Paper Prototyping by Carolyn Snyder or having a look at paper prototyping explained in 7 photos.

How do the new enterprise features improve usability?

One of the ways the new OS uses enhanced enterprise functionality to increase usability is by allowing users to distribute apps “wirelessly” without having to rely on iTunes for synching. This is good news for enterprises (especially large ones) as iTunes is designed and optimized for use by a singular Joe Public in mind. Businesses that apply iPhones can now cut out the middle man and directly supply their workforce with the necessary in-house apps.

How will the new Game Center improve user experience?

The iPhone has been heralded as a milestone in mobile gaming. The new OS will now offer a platform for gamers to connect in order to play with and against each other by using the Game Center “social gaming network” as an interface. Unlike the PS3 and Xbox 360, the iPhone has never had a centralized social gaming network with a number of 3rd party networks springing up all with their own sign-up and login processes and their own user interface designs. By introducing Game Center, a consistency will be achieved, improving on user experience.

How do Folders improve usability?

One of the iPhone’s major usability flaws has been the home-screen user interface’s lack of management features. Downloaded apps randomly fall into place and remain forever that way until they are purged! Furthermore once you have reached the limit of apps (currently 180) that can be displayed on the Springboard any further apps are simply invisible and require search entry to locate it. What happens when you don’t remember its name? Tough luck, computer says no! OS 4 takes several steps to rectify these usability issues. For starters, up to 2,160 apps can be accommodated on the Springboard. Apps can also now be organized into folders of your choosing with drag and drop simplicity resulting in a much better user experience!

For developers the new OS offers many usability boosting tools such as automated testing through the new UIAutomation Instrument among others. Several of the new APIs include the ability to compose SMS messages from within apps thus streamlining usability. New Quick Look APIs now enable apps to present previews of documents without having to launch another app just to know what that photo looks like etc… Improvements like these serve to prop up the iPhone OS’ successful user interface design and improve its overall usability and user experience allowing you to develop great apps that users love to use! The only question that remains for me: Is the new OS also advantageous for using wireframe software applications like Pidoco?

How do you generate scenarios of use?

Creating scenarios of use is often a group effort. As with many group tasks, the direction of a good facilitator with inter-personal aptitude can be crucial when generating scenarios of use. As a general rule, try to generate a number of scenarios that cover a wide range of situations and be sure to include some negative scenarios, also known as misuse cases, to also investigate other non-functional requirements (such as security and accessibility) of your systems and interface design. Go through all the scenarios by yourself first before including other 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 use for a new website are:

1.    Identify who is going to be using the website (or other piece of software).
2.    Pick one of those actors.
3.    Define what that actor wants to do on the website. Each thing the actor does on the website 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 description for 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 scenarios of use.
8.    Repeat the steps 2 through 7 for all other actors.
The results will give you a basis for deciding what the user interface design should be like and what needs it will have to satisfy.

What are the limitations of scenarios of use?

According to Alistair Cockburn, scenarios of use are indispensable but they do not “take care of system design, user interface design, feature lists, or testing”. Instead they give you valuable information for how to craft a good user interface design. Scenarios of use should focus on what the user wants to do with your program or website but not yet what the interface design should look like. It is easy to edit a list of requirements but changing a design is a more taxing process. Scenarios of use can be a great input into subsequent testing processes but actual test cases have to be created to match the scenarios of use.

What are the ground rules of Brainstorming?

Reducing social inhibitions among group members, stimulating idea generation and increasing the overall creativity of the group are end-goals of brainstorming. In order to achieve these there are four basic rules in brainstorming. The first, as a means of enhancing divergent idea production, is to focus on the quantity of ideas produced. By spreading as wide a net as possible the idea is to increase the likelihood of producing a radical and effective solution. Secondly, withholding criticism until a later stage is crucial as criticism may become a bottleneck hindering the flow of creativity. Thirdly, in order to generate a sizable list, unusual ideas should be encouraged by suspending assumptions and looking at the topic from new perspectives. Fourthly, improving on and combining ideas to make better ideas should be encouraged. Clarification of ideas is OK but should be brief and to the point in order to spend as much time as possible generating ideas. Go over the ground rules with participants before the session begins.

Considerations when choosing participants for a Brainstorming session

When choosing participants for a brainstorming session one should aim for enough heterogeneity among the group in order to cultivate diversity in ideas. Conversely bringing in too many outsiders who are unknown to a team may result in the group taking a long time to achieve a comfort level. In the context of user interface design, participants are generally involved in the design of a product. Hence, good candidates are potential users of a product and other stakeholders such as experts in the field for which the product is intended. Although brainstorming can be done individually, the ideal size of a group ranges between five and twelve. If the number of participants is too large (i.e. larger than 12) one should split the group into smaller groups.

Other considerations when conducting Brainstorming sessions

A facilitator with good interpersonal skills is crucial in making the most of the brainstorming session by keeping the focus on the topic, including the whole group in the session and motivating participants. The facilitator should be monitoring, recording ideas and enabling participants to come up with ideas, rather than come up with ideas himself.

Analyzing Brainstorming sessions

After gathering a large number of ideas they must be analyzed. Similar ideas are combined, impractical ideas are discarded and, even, new ideas may be generated. Affinity diagrams are one method of doing so. An affinity diagram, developed by the Japanese anthropologist Jiro Kawakita in the 1960s, is a tool used to organize large numbers of ideas and data into groups and further sub-groups for review and analysis. This is done by recording each idea on cards and notes and those most similar are grouped together until there are no more cards left.  The same process is repeated within the groups. After forming these, the brainstorming group chooses the best ideas by voting or ranking the items on several criteria. Another method of analyzing brainstorming data is by using a decision matrix. A decision matrix, is a quantitative method that uses the ideas generated from a brainstorming session and a set of criteria (i.e. cost, form factor etc…) for rating the ideas. The matrix is especially useful for looking at large numbers of decision factors and assessing each factor’s relative importance. Participants score each item and the ideas with the highest average rankings are generally considered further. Other ideas can be stored in a database for future reference or for further sessions.

But there are also common usability issues that should be considered. Like with traditional applications, one of the major problems associated with cloud application user interface design in terms of usability is the creation of interfaces that are unclear. Whether it is perplexing navigation support or obscure site structure, cloud application interfaces that do not enable optimal usability can be a major pitfall and waste of time, both for the users and for their employers or clients. The impact can be dramatic for the cloud application provider: While desktop applications are usually purchased with a lifetime license that is paid upfront, cloud applications are often offered as software-as-a-service where the license fee is spread out across the period of use. So if the user decides to switch to a different tool because of poor usability – the cloud application provider may lose a lot of money.

In order to avoid cloud application usability hazards, designers should keep the following things in mind:

•    Internet connection:  Cloud applications should be designed to concurrently support fast and slow internet connections as well as different browsers. Make sure you use the right amount of content and images so that your application can easily be accessed regardless of the speed of the internet connection.  Don’t use too many graphical details that may slow down the app.

•    Navigation support: Users should be able to navigate cloud applications quickly and with efficacy. Can users easily identify how to navigate from one page to the next? Does the user know where he is in the application and where he needs to click to go to his next destination?

•    Overall site structure: Is the structure of the cloud application site logical and can clients use the software without being technology experts? Remember that cloud applications are not websites: they are used to complete a certain task rather than simply look at pretty content.
If designers are able to keep these things in mind during the creation of new cloud applications, it will be easier to ensure great usability, and in turn users and their clients will be more easily satisfied and kept as happy customers.

Our conclusion of wireframing software: It’s got the look and feel of handmade scribble prototyping, but adds interactivity (making wireframes animated) and accelerates 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.