Usability Methods in Interface Design: Affinity Diagramming
When you conduct an affinity diagramming workshop, make sure the group of participants is smaller than 7 or 8, since it is almost impossible to keep everyone focused (depending on the amount of data the affinity diagramming workshop might even take two sessions) and when working in turns participants must bring some patience until all other members have finished.
Note: When there is a lot of data in a non printable format, ask the participants of your affinity diagramming session to write things down on stick notes, so you split the workload.
After preparing the information and getting the users on board, the next step in affinity diagramming is to put the notes on the whiteboard (or wall), grouping similar content in the same area (do not label it yet). When certain groups of your affinity diagram get too ‘fuzzy’, it might be useful to split a group in various aspects (sub groups) so that you keep the data sets consistent.
When you do the affinity diagramming alone, it might also be usable to work digitally (like with MS Excel or mind mapping tools), but when team work is required, it has proven more effective to work offline with pen and paper.
At some time you will have arranged all sticky notes in groups and may do a quick review of your affinity diagram to make sure everybody agrees on the grouping results. For later processing of the data, now it might be useful to name the groups making them identifiable (or when the data sets represent areas on a website, think about appropriate navigation topics or headlines).
What you get from Affinity Diagramming?
Independent of the data, the purpose and the group of participants, affinity diagramming is a simple and cost effective usability method for extracting and grouping ideas from qualitative data and for obtaining consensus on how information should be structured.
March 24, 2010 No Comments
Google does it right – and wrong! An Appeal for more User Centric Design
It’s not a secret that Google’s success (or at last the fast adoption rate) has been accelerated through an exceptional example of simplicity and user centered design on their search page (homepage). Almost every user centered design expert I know agrees on the well and consequently implemented user centric approach. So apparently they have done something right!
The more astonishing it is how Google messed it up as soon as you leave the homepage! What is shown on the results pages, is still acceptable, although you could enrich the user experience much more through additional filter options, previews etc. But let’s get on and try to dig deep into Google’s website and find out how far Google took the user centered design approach!
Ever changing (or even disappearing) navigation elements, constantly changing page layouts, giving no clue to users where to click next, … couldn’t be much worse from a user centered design perspective! And after neglecting all existing usability patterns, on some pages their only focus is the ‘sign me up’ button, not providing any information concerning a service without registering beforehand – is that user friendly? As I said, with that approach Google disregards almost every usability pattern for web design but it sadly seems that they can afford it!
They allocated 200% effort on the homepage, but very little on the other pages and the site’s overall structure, it seems. But the funny thing about the usability gap between homepage and all other pages is that a lot of companies still do the exact same thing! They test and optimize the homepage (and may be the checkout process) various times and with a more or less user centered design approach (okay, I think, they really focus on conversion, not on users), but forget everything that’s in the middle!
March 20, 2010 No Comments
Online-Collaboration reduces Cost in Web Development. Part II
Collaborative software solutions aim to transform the way ideas, documents and rich media are shared from distributed locations in order to enable more effective team collaboration. In other words: these tools help you to communicate better, off-site and with many visual support tools thus reducing travelling and meeting expenses immensely. The latest web-based solutions even enable teams to access important data (or tools) from any location as long as they have internet access and a web browser.
But in addition to the web 2.0 ‘usual suspects’ like slideshare, mindmeister and all the millions of web conferencing tools, we found a new interesting collaboration tool especially for interface designers and media agencies: Pidoco’s wireframing and media collaboration tool (www.pidoco.com).
This completely web-based tool helps interaction designers to communicate the work-flow concepts and specs (as interactive interface mockups) of a new website to developers, customers and other stake holders in the extended project team. All communication takes place online (just a web browser is needed) and all team members can collaborate in real-time (or asynchronously) on the same wireframes, tracking and influencing the different stages of development. What makes it special for screen designers; it’s not just collaboration, but also a great wireframing and usability testing tool. It basically transfers the idea of rapid paper prototyping to the web and adds a lot of helpful testing, communication and collaboration features.
Visual collaboration tools like this really help us project managers keeping our teams on track and reduce communication cost across boundaries – boundaries in the head, location and language. Because a picture says more than a thousand words!
March 18, 2010 No Comments
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 sketches, just use the digital prototypes to perform a one-on-one 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.
March 16, 2010 No Comments
Wireframing and Real-time Collaboration
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.
Clickable 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 web concept, just use the clickable wireframes to perform a one-on-one 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.
March 9, 2010 No Comments
Interface Design – faster than ever
But even if screen designs have already been made in some hi-fi 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 developers team and online discussions can be held. Just like web conferencing, but with real-time editing never seen before!
March 4, 2010 No Comments
Usability Guidelines from Usability.gov
Ever thought why websites of public services and local authorities are most of the time so way behind common usability standards and widely used UX patterns? The US government apparently wondered about the same thing and hands on as the Americans are (even in public services) put up a service website with free usability resources on the web.
Actually it is addressed to ‘for government web designers’, but in any case it’s a nice source for designers and web developers somewhat new to the field of user centered design. Besides the explanation of some usability methods, templates and articles, on www.usability.gov you will find a complete 20 MB ‘Usability Guidelines’ eBook (www.usability.gov/guidelines/) for download with much useful information on the following topics:
- Design Process and Evaluation
- Optimizing the User Experience
- Accessibility
- Hardware and Software
- The Homepage
- Page Layout
- Navigation
- Scrolling and Paging
- Headings, Titles, and Labels
- Links
- Text Appearance
- Lists
- Screen-based Controls (Widgets)
- Graphics, Images, and Multimedia
- Writing Web Content
- Content Organization
- Search
- Usability Testing
May be to the UX professionals with lots and lots of hands on experience in the field it might be old news, but nevertheless it’s a nice overview dealing with many important aspects of usability, user experience (UX), user centered design and usability testing. And this resource is even more astonishing considering it’s a government’s website and completely free!
Well done, US government!
March 3, 2010 No Comments
Getting it right with Wireframing
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 use cases, 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.
March 2, 2010 No Comments
Digital beats Pen and Paper
Our conclusion of Rapid Digital Prototyping: It’s got the look and feel of pen and paper, but adds interactivity (making wireframes clickable) and enhances developing speed through re-usable elements and layers. Many (real-time) collaboration modules enable interface designers to new ways to work with higher efficiency, leaving more time for the creative process that really counts.
February 27, 2010 No Comments
Interface Design – faster than ever
But even if screen designs have already been made in some hi-fi graphics software (e.g. Photoshop, 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 feedback process and online discussions can be held. Just like web conferencing, but with real-time editing never seen before!
February 26, 2010 No Comments

