Designing LabVIEW User Interfaces with Hand-Drawn 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.
6 Comments
Make A CommentComments RSS Feed TrackBack URL

(3 votes, average: 4 out of 5)
May 16th, 2007 at 4:43 pm
I like to use microsoft visio to mock up my LV user interface. the only thing I had to create was the graphs and thte looks of some controls or indicators. Works great for me
May 16th, 2007 at 6:49 pm
you know… I do this in every other language and on every other IDE… it just never occured to me to do this in LabVIEW. You may have something in your statement about how easy it is to skip because of ease of UI developement in LV.
May 17th, 2007 at 4:45 pm
Hi Tomi: Great article. I’ve just posted a follow-up on whiteboard mock-ups on Thinking in G.
May 17th, 2007 at 4:57 pm
Jim, perhaps the emphasis on my article was on the word hand-drawn rather than on the word paper. White board user interface mock-ups are excellent for team-work design process. For the user experience simulations I would still prefare paper models as you can prepare multiple views in advance and quickly simulate the changes in the user interface. Using whiteboard for the same task may be ok if you are fast enough in drawing, which I’m not.
May 22nd, 2007 at 2:41 pm
Nice topic. How about using diferent size post-it notes and draw your controls and indicators on them, stick them on a blank sheet of paper. Then you can move them about.
But I prefer to actual use labview to create a mock front panel. The the end user can visualise it better.
May 22nd, 2007 at 4:55 pm
Ray, drawing user interface components on pieces of paper works fine when designing the layout of a specific view or when simulating the user interface behavior. LabVIEW can also be used to design the user interfaces, however in my experience you get more constructive feedback from users when working with paper mock-ups than when working with computer created user interfaces. I guess the reason is that users understand clearly from paper mock-ups that everything can still be modified whereas LabVIEW created user interfaces give an impression of being fixed.