Sunday, November 28, 2010

User Interface with LabVIEW and Paper Mock-Ups

Discovered on Tomi Maila's blog on "Designing LabVIEW User Interfaces with Hand-Drawn Paper Mock-Ups" found http://expressionflow.com/2007/05/16/designing-labview-user-interfaces-with-hand-drawn-paper-mock-ups/ . In his blog he goes in depth on how to take into account user roles, views of your user interface, and how to implement design in LabVIEW with paper mock-ups. 

User interface may be the one most important part of your LabVIEW application. It’s the only part of the application the end-user is directly in contact with. Still user interface is often the part of a LabVIEW application developers spend the least time with in the development process. Does LabVIEW make creating decent user interfaces too easy to be ignored in the design phase?

User roles
Let’s concentrate on graphical user interfaces. What should a user interface design process be like? The user interface design shoud start with determinig the different user roles of your application. For example you may need to have a different kind of user interface for the end-users as you do for the administrators.


Views of your user interface
After you have indetified different user roles you should list the main tasks a users in different user roles uses your application. It’s important not to go into too much detail, just concentrate on the most important tasks. The number of main tasks depends on your application. Determine what kind of views do you need in your application to allow users to do these main taks you have identified. You may need multiple different views such as monitoring view and configuration view and visualization view. Depending on your application, these views may be separate parts of a single window, different states of a window or separate windows.

Paper mock-ups
Once you have determined the main views you’ll need in your application you should not hurry to your computer and start coding. Instead you should sit down, take you pen and paper and start drawing mock-ups of your user interface. A mock-up is a model of you user interface. With pen and paper it’s easy and fast to try different variations of component locations. Also the drawing process helps you to concentrate on the important parts and not to go into too much detail too soon. You identified different main tasks the users need to do with your application. Go trough these tasks with your paper mock-ups. If there are major state changes in your views, don’t spare the paper. Try to cover all important views of you application and all important states of different views. Play around, all time consumed in the paper user interface design phase is well spend.

Usability testing
Next you should grap a small group of potential users and show them the user interface mock-ups you have made. Users tend to think differently from what you expect so it’s important to get into direct contact with the potential users. Show them your user interface paper models and ask them to proceed with the important tasks. Don’t help them too much, let them figure out by them-selves what to do, which button to press. Simulate the user interface functionality by showing them different pieces of paper. Use your imagination to find a nice way to simulate your user interface without a computer. Again, don’t go into too much detail, concentrate on the most important parts. If your test users don’t behave the way you would expect them to, ask them what would be the intuitive way for them to proceed with the tasks.
Hand drawn paper user interface models are an excellent tool for the user testing. In computer graphics based user interface models, the tested users tend to concentrate too much on the details and on the lack of polishing. With hand drawn paper models it’s evident that they are only models and users don’t expect them to be polished. Instead they concentrate on the usability and that is exactly what you want to test with them.
Don’t be afraid with the user test phase. You can really often find suitable test persons from your work or from your friends. Testing your user interface doesn’t take a lot of time but you get plenty of valuable feedback. With this feedback you need to go back to your desk and start considering how to make your user interface better, how would it serve your users better.

Conclusions
User interface design is an iterative process. Depending on the complexity of your user interface you may need to iterate the process several times. Only after you are happy with your paper models, you should start working on real front panel implementations. There are many ways of designing user interfaces and this particular process I learnd from useability experts when working on a consumer product project.
Take a look at Jim Kring’s related post on Human Interface Guidelines on his blog Thinking in G.

No comments:

Post a Comment