A SXSW Presentation from March 2009 held in Austin Texas-USA which we caught off slideshare.
A fairly lengthy presentation on wireframing- very informative for both, novice and advanced users!
Ever wondered how to conduct an UAT? What are the main issues to keep in mind? Below some great tips there by redsneaker which blogs on zmogo.com, find the full article here
- Find 7-10 people who may use your site. These should be a variety of people and not just family and friends.
- Write down a list of questions to ask the testers. These should be centered around the activities on your site. For example if you are an e-commerce site, ask them to buy a specific item. Have them walk you through their thought processes as they go through the process of that activity. It may be helpful to video tape these sessions for review later.
- Keep the requests simple.
- If they have trouble finding something, ask them “What are you looking for?” or “What are you expecting to see?”
- You will find 80-90% of all the usability issues after 7-10 people.
- Keep record of the patterns that occur between testers. Are they all having trouble finding one particular item?
- Don’t worry about them successfully completing the task, just document what they did to accomplish it. Later, analyze the results to see if there were any changes that would make sense for your site.
- Keep the testers at ease and let them know you are not evaluating them, but rather the web site. Reassure them that they are helping the web site development team make the site better for everyone.
- Make the changes deemed necessary to improve the usability of your site. This could range anywhere from relabeling some navigation items, to a complete redesign of the site.
- Finally, reevaluate after making some changes. Test with another group of 3-4 users to see if the same issues continue to occur. Keep all usability testing sessions brief. Also don’t be afraid to retest after any changes in the site in the future. Sometimes it’s difficult to see the faults of the site since we are the developers and it makes complete sense too
Steffen Zörnig talks about us and some of our competitors.
It is an interesting review on wireframe creation tools and a definite must-read. Sorry to the one’s who don’t speak German, maybe you view it via google translate..
One of his statements is that Usability Testing will definitely improve your prototype and that the usage of prototype creation tools is advisable.
Wireframe Mockups, bei dem die Webseiten skizziert werden und dank aktueller Software wie FlairBuilder, MockFlow, Axure, oder Pidoco sogar als Prototype (Klickdummy) interaktiv nutzbar sind. So lassen sich im Vorfeld schon Probleme in der Usability feststellen und verbessern.
Furthermore, his conclusion is that in fact our product seems to be the best solution in terms of functionality.
Funktionell ist jedoch Pidoco ein großes Stück weiter und wäre für größere Projekte meine erste Wahl!
Well, we could’t agree more and would like to thank Steffen for the research well done. Of course time is short these days and that is why we’d like to take the oportunity to add to his review.
Our product provides the “scribble mode” which lets the collaborators/co-workers etc. undestand that it is- in fact a wireframe.
Anybody looking at a prototype done in the “scribble mode” will get the impression that it has been done by hand(or on paper). A nice little feature which shouldn’t be missed out on! Here is a good example of how it can look like.. We also let our users export to HTML, since it will give the possibility to directly import the pidoco° prototype into running projects.
A great review on wireframing tools and some of the author’s requirements for successful implementation. The author (Rolf Kleef) lists his personal requirements as:
- Integration of the whole work processes with how I work would be great, specifically allowing offline work on designs
- Software as a service (SaaS) is ok, if I can take my data with me.
- Should not require software installation, or expensive subscriptions to participate for people outside my organisation.
- Should be usable on all platforms: I’m using Linux, designers usually want a Mac, and project clients often are still stuck on Windows.
We’re extremely pleased that Rolf Kleef is so satisfied with our product and we are hereby thanking him for the great review.
However, one requirement is missing in his list:
- The ability to review the prototype and to get feedback from other co-workers!
We believe that getting feedback is an integral part of the design process and that it should be done via the very same tool which builds the prototype, wouldn’t you agree? If you do, then you have surely already made friends with our Reviewer and Remote Usability Tester, and if not -you really should!
The Blog post on “Forget the Wireframes, Throw Away Your Boxy Layouts — Design BIG!” points to the idea that people should think “outside the box” or “outside the wireframe”.
At least that is what the title of the post tries to convey. The author Fernandes Wendell claims that:
…many online portfolios out there have much of the same old look and feel: boxy, wireframed and boring look. My suggestion is to get away from this usual, tired style. These types of layouts are overdone…
I totally agree with him on the point that many designs are looking the same, specially if you’re working in WordPress. The basis of all design should be to have a rough concept and outline on how you’re gonna design your interface, let alone on where elements are going to be placed. If you decide to place a banner a bit more to the left or right and whether you gonna have a background picture which is not following a straight line, then it will surely still follow A line..in other words, I do not believe that “forgetting the wireframes” is the way forward.
Nontheless, it is an interesting article and is a good read for GUI designers
Rapid Paper Prototyping
If one wants to save cost and distress when designing a web-project, he should consider using a method called ‘Rapid Paper Prototyping’.
pidoco° uses the web-based prototyping software solution which not only promises saving time but also aims to create better usability and creative concepts for the Internet, Web-Portal and E-Commerce website sectors.
The ‘Rapid Paper Prototyping’ method has already been established as THE way to get a web-application started. The basic concepts of the layout will be put on paper and discussed within the team. This prototype will then be used by the experts and put through a refinement process by implementing the gathered feedback from the different decision makers and of the needed functionalities. This paper-built prototype will be the stepping stone and act as a guide for the whole project – until it is finished.
Some screen-designers use hand-drawn imagery for running usability tests which can already reveal certain problems before starting the actual programming of the project. By using this method, companies often save valuable time and money and do not need to make a lot of changes to their intitial plans.
However, there are some drawbacks to ‘Rapid Paper Prototyping‘. They are difficult to add to the project documentation and also difficult to share between the different team-members. That is why many companies see the need for creating their prototypes directly in MS PowerPoint or MS Visio and have them distributed to the relevant sources. Yes, that way one can share the data more effectively but is not much more interactive than making copies of that piece of paper and handing it to the team. The prototypes still do not show the real functionality and therfore outlines yet another major drawback to ‘Rapid Paper Prototyping’; links, dynamic menus and work-flow can not be reproduced effectively and need to be explained individually. Again, more time and effort has to be invested..
pidoco° has spotted this problem and made it their duty to tackle this problem by providing a solution for such scenarios in form of a prototyping tool. The Berlin-based firm developes a complete usability suite which ties in with the outlined scenarios of ‘concept vs implementation‘.
The pidoco° usability suite consists of three main elements which work in conjunction with each other. They speed up the web-production and optimize the general workflow.
Clickable prototypes are quickly drafted through the drag ‘n drop capabilities of the ‘Prototype Creator’ and which later can easily be reviewd in the ‘Prototype Reviewer’ by other team-members. If there is a need for even more in-depth feedback on individual aspects of the prototype, the solution is to make use of the ‘Remote Usability Tester’. It will surely satisfy the most detailed questions which could arise, since it offers live, one-on-one phone conversations with additional mouse-tracking features. Those features increase productivity and ease communication between the team and they are also easily accessible through a browser window – no installation of any kind is necessary!
Rapid Paper Prototyping in the Web
The ‘Prototype Creator‘ offers many drag ‘n drop interface building blocks (radio buttons, frames, combo-boxes etc..) which can create a complete web or software interface within minutes. There is no need for previous programming knowledge since all the linking and other functionalities are already in place. The only thing one has to do is to connect the elements via the mouse and they are ready to go! This way, the designer can conceive the complete click-patterns of the end-user and evaluate the gathered performance ratios.
Even if screen designs have been made in (eg. Photoshop), pidoco°’s usability suite can be put to use in very effective ways. Ready made screenshots, menu bars and animated gif’s can be easily imported and added to the wireframe outline. This way, making a perfect composition of real-life graphic design and pidoco°wireframe usability is done in just a few minutes. No matter if it’s just a basic wireframe or fully fletched GUI prototyping, all the prototypes created with pidoco° can be shared and reviewed by the relevant members via an invite function found in pidoco°’s repository.
Reviewing the Ready-Made Prototype
By making use of the invite function the designer can get valuable feedback from team-members and discuss the prototype’s functionality. The ‘Prototype Creator‘ can send an invitation link via email to one or more people via a simple mouse click and can also decide whether the invited will be able to simply see, review or even be able to modify the wireframe. The invited will simply receive an instant email with a link to the prototype and can view it as if he was visiting a normal website on the www. He can then use the review function and per drag ‘n drop and point to the specific elements which he wants to comment on. All comments can be viewed by the other party which can be then used for further discussion. The huge advantage: since all comments are recorded and point to the specific elements in question, communication is made more efficient. Also, all decision-making can easily be understood and reconstructed even after a prolonged period of time!
Putting the comments and discussion points into one communication hub, the administration of the gathered feedback is made simple and effective. By exporting the prototypes to different formats (HTML, SVG, CSV) it is then possible to re-use the gathered information on other platforms.
Remote Usability Testing
If you need even more in-depth feedback on the wireframe usability of your web project, you may well want to make use of the ‘Remote Usability Tester’. Its capabilities will ensure future success to your project since it has certain review elements which can test your prototype in several very effective ways:
With the ‘Remote Usability Tester’ it is possible to test the prototype with a proband which can be as far away as India or Peru. Both will be connected via a live telephone connection and a shared screen. The moderator can then ask the proband to make use or solve specific tasks with the prototype and can view via the mouse-tracking module how the different tasks are being executed. Image and sound of the test session is recorded and stored , which gives the possibility to fully evaluate the test session at any later point in time. Thereby, iterative conception is possible before starting to hard code the project in itself!
Prototyping and Usability Testing: All-in-One!
Overall, pidoco° offers an all-round software solution which can be deployed in all kinds of conceptual and practical areas. It speeds up the overall production time and facilitates easy communication and access on a global scale. Website usability testing is made easier than ever before and the pidoco° prototyping tool certainly has the potential to improve your prototype applications whilst helping you to gain better feedback from users and developers alike.