Category — Interface Design Tools

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

What are scenarios of use?

Scenarios of use are a usability method used in interface design.  They are a description of users performing a specific task on your website or application to improve its specific functional requirements.  These user-oriented and task-oriented scenarios of use are short “stories” that incorporate steps a user (often referred to as an actor) takes to accomplish a goal in order to ascertain how a website or application responds to the user’s actions.  Scenarios of use are written in plain language to avoid confusion among participants.

What are the benefits of scenarios of use?

Scenarios of use are a valuable usability method for user interface design and GUI prototyping.  Scenarios of use permit you to avoid weaknesses within your program that might be detrimental to its success by allowing you to collect user requirements systematically and make any necessary changes to your program before you market it.  Scenarios of use are very helpful in establishing what your program or website does before embarking on the interface design process through the use of interface design software or other GUI prototyping tools such as the wireframe software provided by pidoco°. Scenarios of use are also advantageous because they require minimal resources to be generated and they keep the focus on users, usability and user experience. This ultimately leads to happy customers, making your software more successful.

This blog post is the first in a series of two about brainstorming as a usability method.

What is brainstorming?

Brainstorming is a usability method used in interface design that software or web designers can use to gain helpful user experience feedback and constructive user ideas. Brainstorming is a process in which individuals or groups use creative and critical thinking to generate alternative ideas and solutions for a given topic or problem.  Brainstorming, a term coined by Alex Faickney Osborn in the late 1940’s, emphasizes quantity over quality: participants should come up with as many ideas as possible without worrying about whether or not they are “good”.  Brainstorming is a method rooted in the understanding that notable ideas spring forth when thinkers are given the freedom to think without experiencing the stress of value judgments applied to their thoughts.  The idea is that less pressure increases the creative flow.

What are the benefits of brainstorming?

In addition to enabling groups to come up with a wide range of interesting ideas, brainstorming also facilitates group cohesion.  Brainstorming groups are able to collectively discuss problems and thoughts,   deepening each participant’s overall understanding of the topic at hand.  Through actively engaging in the creative thought process with one another, the brainstormers’ experience boost their morale, enhance their work enjoyment, and improve their teamwork.

From a usability standpoint, brainstorming is an especially appealing usability method because it enables collaboration and creativity, but most importantly, because it does not require methodological expertise on the part of the participants.  This is significant because a goal of usability is accessibility, and when designers want to get helpful user experience feedback, it is imperative that the range of potential brainstorming participants is not limited to users who possess expertise in the field.  Oftentimes, the feedback of beginning or inexperienced users, who look at a user interface design with neutral eyes, is what allows designers to determine just how easy their software or web interfaces are to operate, and thus enables them to create a great interface design.

Collaboration is essential to the success of many creative or business endeavors. The confluence of diverse ideas, perspectives, and strengths propels the project forward and gives each team member a sense of purpose and accomplishment. According to Greengage consulting, a firm dedicated to helping individuals and companies achieve organizational effectiveness, organizations that develop their collaborative skills “will transform the way [they] work with colleagues, partners and customers” (greengage.com) often resulting in a more successful end product.

In the world of web interface design, the concept of real-time collaboration has become a crucial aspect of the web development process as it takes regular old teamwork one step further. Real-time collaboration makes it possible to work together across large distances effectively, because it allows several people to cooperate by editing various types of documents simultaneously, oftentimes while in direct contact via audio or video conferencing systems. Real-time collaboration usually occurs online, and so the internet is a crucial enabler for this modern form of team work. Real-time collaboration poses challenges to technology and man as it requires instant communication, i.e. instant relay of data in the form of audio-visual and textual information. More and more providers are moving to real-time collaborative applications, and they can be found in various fields.

Applications such as Google Docs, MindMeister or Pidoco optimally facilitate real-time collaboration because they are provided as software-as-a-service via the internet and thus enable easy access for different team members or project partners from all across the globe. In addition, their interface design is oriented towards a dynamic and team-oriented working environment, focusing on ease of use and catering to users who appreciate the advantages of real-time collaboration.

Google Docs is a free data storage service that allows users to create, edit and share documents online, enabling them to collaborate easily in real-time with other users. In addition to permitting the concurrent viewing and editing of documents, Google

But even if screen designs have already been made in some high-fidelity graphics software (e.g. InDesign, pidoco° can add value to the 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 feedback process and online discussions can be held. Just like web conferencing, but with real-time editing never seen before!

Everybody who is into screen design, Rapid Paper Prototyping is old school! But ever considered doing screen design on screen?

With pidoco’s web-based prototyping software, designers and software developers can save valuable time, enhance the creative process and build better usability for the internet.

Rapid Paper Prototyping has already been established as THE way to get a website started. Rapid Paper Prototyping is about sketching ideas with pen and paper to be discussed within the team. This prototype will then go through an iterative design process by integrating feedback from different stake holders. This paper screen will eventually act as a guideline for the whole project – from beginning to the end (but is there a real end?). Some screen-designers even use these very limited paper prototypes for performing usability tests. Retrieving usability errors before programming can save a lot of time, since later alterations in the so called ‘finished’ website are minimized.

However, there are disadvantages of Rapid Paper Prototyping.  Prototypes are not easy to add to the document servers and also difficult to share between team-members. Scanning paper prototypes and making them ‘clickable’ for web testing is also a time consuming task as we all know!

That is why many interface design executives create their wireframes directly in MS PowerPoint or MS Visio and have them send to the relevant sources. True, that way one can share the designs more effectively but it is not really more interactive than making copies of a piece of paper handing it to the team. The prototypes 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 text. Again, more time and effort has to be invested to get the message across.

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

Our conclusion of wireframing software: It’s got the look and feel of pen and paper, but adds interactivity (making wireframes animated) and enhances developing speed through re-usable elements and layers. Many (real-time) collaboration components enable interface designers to new ways to work with higher efficiency, 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.

With a user survey you try to find out how your software, application or web site is most likely to be used by your target audience or a special segment of users. The usability method of posting user surveys on your website is a powerful tool to find out what other analytics tools cannot deliver. When a quantitative analytics tool tells you everything about what people did on your website or interface, a user survey tells you the hidden secrets about user motivation, feelings and the why people using your website or interface.

You post all kinds of questions (by letter, email, online) to get an idea about stuff that you cannot trace or observe technically (e.g. ask about features that do not exist yet), but which you need to know for making your product evenmore customer centric.

What should I ask in a User Survey

With the internet it is easy to carry out user surveys with hundreds and thousands of users, presenting qualitative and/or quantitative data for decision making. But what should you ask your target audience? Well, what do you want to know? Depending on your goals, the questions will and can be quite different. But compared to many other usability methods, user surveys can give you answers about stuff that is hard to find out through tracking and observing user behavior (e.g. feature requests, expectations etc.).

Everybody who is into screen design, Rapid Paper Prototyping is an old hat! But ever considered doing screen design on screen?

With pidoco’s web-based prototyping software, interaction designers and web developers can save valuable time, enhance the creative process and build better interfaces for the internet.
Rapid Paper Prototyping has already been established as THE way to get a GUI started. The basic concepts of the layout will be put on paper and  shared and iterated within the team. This prototype will then go through an iterative design process by implementing feedback from different stake holders. This paper screen will at last act as a rough guide for the whole project – from start to finish. Some screen-designers even use these paper sketches for running usability tests. Revealing usability issues in an early stage of development can save a lot of time, since later alterations in the so called ‘finished’ web project are minimized.

Anyway, there are several drawbacks to Rapid Paper Prototyping.  Paper prototypes are difficult to add to the document servers and also difficult to share between team-members. Transforming paper sketches into interactive, digital documents for getting the grip on how workflows are reproduced in the design is also a time consuming task as we all know!

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

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

Wireframing and Real-time Collaboration

The pidoco° wireframe software consists of three main components which complement each other perfectly. They speed up the interface design process and optimize the general workflow in all stages of interactive 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 concept wireframes, 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.

But even if screen designs have already been made in some high-fidelity graphics software (e.g. InDesign, pidoco° can add value to the work flows 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 designs process and online discussions can be held. Just like web conferencing, but with real-time editing never seen before!