wireframes & usability

Do you use wireframes in your interface design projects? If so, you may have found yourself debating just how detailed your wireframes should be. In this article I shall explore the concept of wireframe fidelity and how wireframing affects the usability of a user interface in software and/or website design. Deciding which level of fidelity in your wireframes would be most advantageous to you and your project can be pivotal in ensuring success. Experts are still debating the distinctions of wireframe fidelity and whether high or low fidelity is the way to go. In the following paragraphs I will go through the differences in wireframe fidelity and the benefits they carry.

Why use Wireframe Prototypes?

When designing websites or software applications paying attention to a great interface design is key, since the graphical user interface is the part of your software that users see first and use to interact with it. In order to achieve a great interface design, the use of wireframes during the design phase has become a valued method. A wireframe (sometimes referred to as website wireframe, software wireframe or application wireframe) is a visual representation of the projected content and structure of a graphical user interface and is an essential step on the way to a great interface design. It is easily understood by all stakeholders and can serve as communication aid. Much like an architect’s blueprint plans wireframes are an invaluable tool when creating software or websites with a solid foundation. In the same vein, they should be used long before the first bricks (or programming code in this case) are set.

Further Considerations of Using Wireframes.

Wireframes allow a project’s stakeholders to have a vision of what to strive for and are particularly useful in the collaborative process as they ensure that team members can easily understand a software concept and can keep track of a project’s workflow. Popular use cases for wireframes include improving usability through early user tests, involving non-technical key stakeholders early on in the development process, or communicating with developers and designers for planning purposes. The level of detail in a wireframe prototype is referred to as wireframe fidelity and can be in either of two main guises: low fidelity or high fidelity. (Some even distinguish three types, including medium fidelity wireframes.) Knowing which fidelity to employ is of crucial importance as the investment in creating them in terms of time, cost and expertise required varies tremendously.

What are Low Fidelity Wireframes?

Low fidelity wireframes are wireframes that focus on the essentials of a user interface: layout, structure, Information Architecture –  and not graphic design! Low fidelity wireframes evolved onto computer screens from rapid paper prototyping wireframes which emerged in the mid 1980s to become a popular Blue Chip company tool by the mid 1990s. Rapid paper prototyping involved the creation of rough sketches (often drawn by hand) of graphical user interfaces as prototypes of software applications to visualize and test usability long before the coding process began.

Example of a low-fidelity wireframe

What is an example of using Low Fidelity Wireframes?

A real life example of successful paper prototyping stems from the mid-90s when e-commerce was beginning to take off and Priceline.com was introducing a service that allowed consumers to submit a bid for a plane ticket along with a credit card. How could they convince users to trust their credit-card details to an as-yet-unknown website? Paper prototyping showed the team that their initial design would have been a failure, allowing them to correct the problems before launching the site. They also discovered that users didn’t need some of the hard-to-implement features they had included. Paper is a readily available resource, but not easy to change or adapt. Hence, nowadays, digital solutions like “digital paper prototyping” with specialized wireframing software are often used in iterative processes as they tend to be more efficient.

What are the benefits of using Low Fidelity Wireframes?

Low fidelity wireframes have many benefits. By eschewing many cosmetic factors they are relatively inexpensive and quick to create or alter. This allows for collaboration as suggestions and refinements can quickly be added to a number of variations very cheaply. Furthermore, low fidelity wireframes are useful in gathering great feedback because their rather rough appearance makes it clear to viewers that they are talking about a draft that is easy to change, rather than an almost finished product, thus inviting honest and unrestrained feedback. In addition, the lower level of detail allows you to focus on fundamental usability issues of your product. When using low fidelity wireframes for usability tests, testers can also give you qualitative feedback that really focuses on usability rather than being distracted by, say, the color of the fonts used. Yet, some critics caution that the level of abstraction may be difficult for inexperienced users. Once usability has been tested and polished, beautiful designs may be added onto a solid foundation that maximizes user experience.

Here you can find an interesting article on sketched wireframes.

What are High Fidelity Wireframes?

High fidelity wireframes (often referred to simply as high-fidelity prototypes) are very close in design to the true representation of the final user interface design. As such, they tend to include slick and polished design features and even go as far as simulating in much detail an application’s workflow or even logic. Despite pixel-perfect good looks a high fidelity wireframe remains but a prototype, however crisp it may look and feel. Due to their high level of detail, high fidelity wireframes tend to be more costly to create and usually take much more time to compose. They may also require more experience, sometimes even technical expertise, and can hinder the feedback process as testers or clients may be distracted by design features rather than focusing on usability. In addition, test users as well as clients may be more hesitant to critique a design done by a professional, which looks like it would require a significant amount of time to change. Fears that such changes may result in higher project costs are not uncommon and may skew feedback, which makes it very important to explain the purpose and method used in creating high fidelity wireframes before soliciting feedback. Advocates of high-fidelity wireframes find that aside from running usability tests, they enable quicker understanding of decision makers.

An examle of a high-fidelity wireframe.

What are the benefits of High Fidelity Wireframes?

On the positive side, high fidelity wireframes share many of the same advantages with low fidelity wireframes in general but have their own benefits in particular. High fidelity wireframes are usually used in addition to low fidelity wireframes, and after the latter have been used to resolve the most impactful and fundamental usability or interface design problems of an application. Being eye-catching and less costly to create than full-fledged applications, high fidelity wireframes can be used to impress clients who have to sign off on a concept quickly. Since they tend to require less programming knowledge than coded prototypes, high fidelity wireframe prototypes can be composed by users with limited programming knowledge. As they are closer in design to the final product, clients can quickly understand the final look and feel of an application without extensive verbal explanations. The high level of detail reduces the amount of abstraction required by non-technical stakeholders, which – depending on personal experience – may be important in some scenarios. In terms of your development team, high fidelity wireframes allow you to collectively bring an interface to life. This helps in keeping a project’s budget manageable which in turn further satisfies clients. Whether or not high fidelity wireframes are necessary or beneficial depends on the particular project at hand and your goal in using them. One should think about the costs and the benefits of creating detailed high fidelity wireframes beforehand. Sometimes, it turns out that it is faster to go from low fidelity wireframes to programmed code directly.

Which type of Wireframe should one use?

As can be seen from the short portrait above, each type of wireframe has its own advantages. It is often not an “either or“ decision which type of wireframe to use. Instead, both types are useful for different purposes and can be used consecutively in a project. It really depends on the goal or use case at hand and the budget of a project. Yet, if you have to choose one type, the low-fidelity wireframe tends to offer a better cost-benefit ratio as it is quick to create and sufficient to resolve the most urgent usability issues in user interface design which may be the most decisive factor affecting the success of your software. Or you could try “real wireframes” – low-fidelity wireframes augmented with some graphic design elements that help a user who is not familiar with the project understand the wireframe more quickly despite its abstractions.

What fidelity do you prefer in your prototypes?

More on when to use low vs. high fidelity:

http://www.uxmatters.com/mt/archives/2007/03/wireframing-with-patterns.php

http://www.boxesandarrows.com/view/what_an_ia_should_know_about_prototypes_for_user_testing

A nice slide show on wireframes:

http://www.slideshare.net/piksels/wireframes-and-interaction-design-documents-presentation

It’s no secret that globalization is upon us; and it’s also no secret that diversity adds to the culture, creativity, and competitiveness of globally operating businesses. We are happy to welcome two new members in our growing team who bring with them international experience and lots of fresh ideas: Carmen from the United States and Abba from Uganda have joined Pidoco’s marketing team and will be working together with the rest of the team to create educational and marketing materials. We wish both of them a great start at Pidoco: Welcome to our team!

Pidoco is committed to diversity. With our new team members we are proud to add yet two more countries to our “portfolio”, which by now includes Vietnam, France, Uganda, the U.S., and – you’ve guessed it: Germany. And we hope that we will continue to diversify our growing team in order to infuse our work atmosphere with new perspectives and unique ideas.

When managing a software project, a lot of the time goes into specifying what the software should do and what it should look like. Once the specification is written it is transformed into many small tasks that have to be assigned to different people working on this project. Designers have to develop some shiny screens, developers have to write the code in behind, maybe the UI has to be localized into several languages, just to name some. However, we all know that there is no project where the specification doesn’t have to be adjusted to new requirements. At this point many project try to adapt some facets of Scrum or other iterative approaches to keep the project manageable.

To date, there are many different tools available that support the project manager in handling all this, one of them is plan.io. We at pidoco use plan.io for quite a while right now and are really happy with it. Since we also use pidoco to create wireframes that represent the major part of our specification, it would be nice to have some kind of integration between the two systems. Having the prototype in the plan.io wiki where you can write some explaining texts around, but at the same time being able to click through the prototype to feel the intended interactions, would be great. In addition, when people comment the prototype using our review feature, most of the times it results in new tasks that we have to do in the next iteration.

From now on this becomes reality. We have developed a small plan.io app that integrates pidoco prototypes with the wiki with one click. In addition, there is a list of all discussions to the prototype, where each of the discussions can be transformed into a new task. On top of that we put all the discussions into the plan.io activity stream, which you can grab the RSS feed and get regular updates of new comments to your prototype. In order to try our plan.io app you need to have both a pidoco and a plan.io account, which you can both test for free.

As already mentioned above, there are plenty of tools out there and you are probably using a different one. However, if you let us know which one, it should be easy to integrate pidoco with your tool as well. While developing the plan.io app we also started developing an API, which we plan to publish soon, for those who would like to write their own integration. More on this is coming soon.

The previous week, I posted part Two of this article.

Tools Which Facilitate (partially) Synchronous Remote Usability Testing:

Here I will be listing some of the tools which in some way would aid in conducting Synchronous Remote Usability testing. Most of the tools will only fulfill some of the requirements listed previously or only implement partially the methodologies above.

Online Conferencing Systems:
These tools allow screen-sharing and remote control of mouse movements and the keyboard.

• Cisco Systems WebEx
• Microsoft NetMeeting
• Yuuguu

Although those tools allow you to observe and control tests sessions they come with a few flaws:

• Test-users are required to install the client software on their own system
• Firewalls may block the software (5% of test-users experience this problem)
• Real-time amendments of the prototype is not possible
• The moderator can’t use his machine for other tasks whilst conducting a test (making notes is not possible)
• Latency problems
• Test-user can not work on a familiar desktop environment

Screen Capture Software:
These programs allow virtual recording of the test-users screen. Test sessions can be recorded and stored but hardware configurations are often insufficient which leads to lagged test results.

• Camtasia by TechSmith
• Cam Studio
• iQuick Screen Capture

Video Conferencing Tools:
Video conferencing tools (Skype, MSN Messenger etc.) allow the moderator and test-user to communicate via live audio&video feeds. The downside is that the client software needs to be installed on both system. Also specific testing of prototypes is not possible and would require additional software which use-up additional bandwidth and system memory.

Presentation Softwares:
MS PowerPoint is a great tool for static presentations, is however limited in it’s collaboration and sharing features.

Video Editing Tools:
You can also create video snippets of your presentations ( MS MovieMaker, Adobe Premiere etc.) but it is a lot of hassle and will surely put you off quickly.

Online Questionaires:
Online questionnaires created with Google Form or Surveymonkey are great applications for getting quantitative feedback on your product. It is however difficult to organize and match the feedback to the right user and test session.

Since this overview on incomplete tools for Synchronous Remote Usability Testing tools could go on forever, I do not wish to withhold the solution for you guys!
A little self-promotion will follow:

pidoco° Usability Suite:
The pidoco° usability suite is an online, web-based collaborative platform which allows to create, share and test prototypes in an instance. It is a tool which combines rapid prototyping of fully interactive prototypes and has powerful collaboration features:

• Prototype Creator (creates realistic & fully functional prototypes via drag&drop)
• Reviewer (allows asynchronous work-flow and feedback collection)
• Remote Usability Tester (Synchronous Remote Usability Testing with screen-sharing, live audio-feed and mouse-tracking)

Conclusion: 

It is possible to conduct user tests at an early stage. The aim for every company is to deliver their product on time and with the least hassle possible. Every year thousands of agencies spend a fortune on running all sorts of tests and still deliver products with flaws which need later amendments. The problem is that early-on, qualitative feedback is needed yet often not achieved due to budget limitations.

Technology allows us to connect to connect to people around the globe, so why not use this opportunity to run usability test session online. It will save us the cost of travel, give the test-user the comfort of staying in his home or at his workplace and create a greener world for all of us!

This weekend we added two new features to the pidoco Prototype Creator: colors and permalinks. From now on you can choose the border and fill color for rectangles and ellipses to highlight certain areas of your prototype. We also added a semi transparent grey filling which you may use to create overlays and modal dialog boxes, similar to what you see on the screenshot.

For the second new feature we slightly modified the invitation dialog and added a new feature to the invite menu entry. In this new dialog you get three links, one points to a png image, one to the sketched html, and the third to the plain html version of your prototype. You can choose the page they will point to and copy paste the link into your wiki or send these links via chat to your colleagues.

The first European UXcamp will open the ticket lists on next Wednesday, 3rd of March. Be prepared to register and grab your ticket since we expect the tickets to be gone rather soon. However, there will be two separate lists, one for all Germans and one for our international guests, so there should be enough tickets for all foreigners. If you need some advice for booking your trip, please don’t hesitate to ask us.

To all of you who plan to give a presentation or workshop, please have a look at our Session Forum and add a note on what you want to talk about. We hope to see some very exciting sessions!

So What About Synchronous Remote Usability Testing?

The previous week, I posted part One of this article.

In order to integrate the user into the design process at the earliest possible date, it is customary to develop a low-fi prototype which will allow initial evaluation of the overall design. We are however faced with a problem if we want to combine the qualitative feedback of synchronous usability testing with the advantages of non-biased remote testing. How can both approaches be combined?

Yet again, technology should hold the answer to this question:

Requirements for Synchronous Usability Testing:

• test-user and moderator need to be connected via the Internet
• a shared screen needs to be in place for both to view the prototype
• a live audio connection should be in place for synchronous communication
• the data of the test-session needs to be recorded (audio, video recording of all mouse movements)
• recorded data needs to be stored for instant retrieval

Optional requirements which may increase the quality of the session:

• information and tasks should be visible to the test-user
• moderator’s ability to integrate questionnaires which the user can fill in his own time
• the moderator can change parts of the prototype whilst conducting the test
• comments and annotations can be included on-the-fly
• test-user and moderator can be connected via a live video-feed

Usability Test: Methodologies

The overall test should allow the following methodologies:

• Thinking Aloud (test-user must think aloud and express what he thinks or misses in the prototype)
• Wizard of Oz Prototyping (the prototype can be changed on-the-fly for instant ratifications)
• Team Observation: (the rest of the production team follows the usability test, make notes and come up with alternatives)
• Formal and Informal Tests
• Click-path Analysis
• Use of Questionnaires

Next week, part THREE of this article will follow.

This weekend, we added some new things to pidoco. First, you can now pay in dollar directly with a fixed price. Since many of our test users live in the USA, we thought this might support you. There are no more exchange rates to consider or some special fees from your bank for paying in Euros. Prices start from $9 per month and user. You may want to have a look at the complete pricing list. The free trial remains with 31 days which you can use to extensively test pidoco.

The second thing we added are custom stencils that you can create. We thought the most likely case is that you want to have elements in your own style. Therefore, all images that you upload or add via URL are automatically added to the stencil palette. From there you can use them just like you use the other stencils: simply drag them onto a page. That not enough, we made all images linkable. You can set a target just as you do for a button or a link. This way, you may create and use your very own buttons in a pidoco prototype. Since some pictures may be rather small, you can give them a name that is visible in the palette to distinguish similar looking images.

This is only the first step in adding custom stencils to your prototype. What would you like to be able to do regarding custom stencils? Let us know, either by leaving a comment in here or by adding your idea to our feedback forum.

The article will be posted in 3 parts -which should be released a week after another.

Developing a software application is a creative and complex process. It becomes specially challenging when trying to design an interface which suits the end-user. Designers, project managers and programmers all have different views on how to approach their common goal: a successful, stable and user-friendly design.

Now let’s be honest: how many of you have met their targets on time and within budget? How many of you have spent sleepless nights because of unforeseen problems which came up in the very last minute?

I bet there are a few of you and one of them is me!

Most problems come up at a stage where a lot of design and programming work has already been invested. These problems become apparent when the test-users start getting their fingers dirty and as soon as they uncover flaws with your work, a lot of heartache will follow. User-tests are necessary yet are often deployed when it is ‘nearly too late’. Don’t get me wrong, I’m a keen supporter of usability tests but I believe that the traditional ways of running such tests are outdated.

The user should be included in the production process as soon as possible. The sooner this happens, the less time and money you will spend on conducting usability tests since you will be able to spot the flaws at an early stage. Makes sense, right?

So why do we keep insisting on setting up expensive test labs and pay thousands of dollars for expensive equipment and spend time and money in finding the right test-users? I want to present you a different approach to user-testing, a way which may very well change your attitude towards the established forms and also a way which can save you from those troubles mentioned earlier.

In order to gain the feedback you need, it always helps to gather qualitative data of users which can test your product in the right environment. Having housewifes, students or seniors sitting in your office and trying out that new e-commerce website for your client isn’t the way forward, or is it? Well, i think it is defenitely more safe and reliable to let them stay at home and do it from their own desk. Why ruin that new test-rig if you can get your test-users to work remotely?

Remote Usability Testing

Remote Usability Tests are conducted in the natural environment of the user (e.g. at home).

The fact that it is conducted remotely and not in a lab environment has a lot of benefits:

• test-user can work in his natural and familiar surrounding
• limits biased feedback since user is not ‘under pressure’
• saves money for travel & set-up costs
• creates sustainable usability testing for a greener world

Synchronous Usability Testing

Synchronous Usability Testing is a well established approach for running qualitative Usability Tests.

As the name suggests, synchronous testing is done on a one-to-one basis and in real time. The test-user will be running tasks set by the moderator which then can be closely monitored and recorded. The moderator’s difficult task is to interpret and evaluate the test-user’s problems with the product. This is not an easy task and it takes a lot of experience and well refined ability to use the feedback in the most effective way possible. This is why synchronous Usability testing is often done with low-fi prototypes – therefore early testing is possible.

The advantages of Synchronous Usability Testing are:

• allows moderator to guide the user
• produces qualitative feedback
• questions can be solved on the spot
• UX flaws can be spotted at an early stage

Next week, part TWO of this article will follow.

The first UXcamp was a huge success if you read some of the blog articles from last summer (read the review from centigrade or have a look at the German blog feedback). That was encouragement enough to lift the UXcamp to the next level by opening the event to an international audience. This makes it UXcamp Europe 2010.

We still follow the BarCamp principle to bring together the European community for User Experience, Information Architecture, Usability, Interaction Design, Visual Design, and everybody who feels himself dedicated to the user of products and services. In case you fit somehow to that description, please join the UXcamp network and prepare yourself for a trip to Berlin on 29th and 30th of May 2010. The registration for the single days and the UXcamp party is planned to open next month. The concrete date will be published in our network once we decided which day.

Since we want to welcome participants from hopefully every country of Europe, we introduced the concept of Country Ambassadors. If your country is not yet represented by an ambassador, please let us know. The only thing you have to do as an ambassador is to spread the word and connect your local community with our network. We are sure this will be an exciting event to be for everybody!

Usually, a BarCamp is free to the participants to provide everybody with the possibility to join the event and participate by giving a session, discussing with the others, or simply by giving a hand whenever necessary. However, this requires us to cover the expenses with sponsorships. If your company is active in the User Experience field, or if you think your company should get active, please don’t hesitate to get in touch with us. We are thankful for every support we can get!

If you  are still in doubt whether you should travel to Germany next May, there is also the International UPA Conference, taking place in Munich from 26.-28. of May, which is right before the UXcamp Europe. Oh, and two weeks before there will be the (German) IAKonferenz in Cologne. And if you’d like to extend your stay in Berlin, right after the UXcamp Europe there will be the Webinale, another gathering for all the Web geeks. So, plenty of events to go to next May.