Slashdot Mirror

← Back to Stories (view on slashdot.org)

What Tools Do You Use for UI Prototyping?

Posted by Cliff on from the dialog-drafting dept.

AccUser asks: "There are many articles discussing methods of UI prototyping. Having been involved in the design and implementation of a number of commercial applications (both desktop and embedded), I know the value of producing early prototypes of the UI. In the past I have used visual programming tools, such as Visual Basic, but there is always that request: 'Can't you just complete the prototype and release it?' One project I was involved with, the UI prototype employed hand drawn graphics (including hand written text labels, etc) in order to be explicit about the fact that it was a prototype. What I would like to know is what tools and techniques do you use for UI prototyping, and how do you manage your client's expectations?"

6 of 88 comments (clear)

  1. "incomplete" prototype by Anonymous Coward · · Score: 5, Interesting

    Make unfinished items on your prototype have a funny font or a strange color. When the client asks you to fix it, say that it looks bad because it isn't finished. Generally, people who aren't programmers have no idea that writing an application is any harder than changing the font on a button, or that changing the font on a button is trivial. If your mockup uses Comic Sans with random alignment, they can evaluate it while realizing that it is not actually near completion.

    1. Re:"incomplete" prototype by mykdavies · · Score: 4, Interesting

      If you're using Swing, have a look at Napkin -- it gives you a great 'sketch-style' look-and feel. As the author says 'the idea is to try to develop a look and feel that can be used in Java applications that looks informal and provisional, yet be fully functional for development. Often when people see a GUI mock-up, or a complete GUI without full functionality, they assume that the code behind it is working. While this can be used to sleazy advantage, it can also convince people who ought to know better (like your managers) that you are already done when you have just barely begun, or when only parts are complete.'

      --
      The world has changed and we all have become metal men.
  2. Best way to prototype UI is to just do it. by TheSkepticalOptimist · · Score: 3, Interesting

    I mean, lots of people need multi step procedures and seek approval inbetween each step, so developing UI goes from paper to prototype to working model finally to release.

    This is mostly why many software/web products take months or years to develop.

    Best way to prototype? Dive right in and code up working UI.

    After developing UI for software for the last 10 years, I can safetly say that I can work up a working "prototype" just as quickly as I can do the release version. I have written my own Windows based GUI controls which make it easier and quicker to implement then your basic Win32 or MFC ones. This way, I can actually start working on the release software while getting feedback from people directly using the UI.

    Whether its software or web design, UI really needs to be experienced and interacted with in order to determine is efficiency or practicality. Drawing up static images of a website or application is all nice, but its a waste of time. What do you do while waiting for management to approve your pretty pictures. Sure things might look all nice, but when they finally get the release product, they may not understand why some control doesn't do what the picture suggested it would do.

    It takes me anywhere from a few hours to a few days to get a functional UI up and running and while management is playing around with it and deciding what they like and don't like, I am continuing to develop the UI further, all in an effort to get to the release product quickly. In this way, by the time management decides what it is they finally want, its already done.

    In any regard, I find it best to work up prototypes in the development environment you would use to create the final product, that is, just start working on the final product right from the start. Using any kind of thrid party tools or procedures is just a good way to waste time and money.

    --
    I haven't thought of anything clever to put here, but then again most of you haven't either.
    1. Re:Best way to prototype UI is to just do it. by elemental23 · · Score: 3, Interesting

      How do you do your usability testing then? Don't tell me you code up a UI for every testing iteration.

      I'm not making any assumptions about you but, sadly, the answer most open source developers seem to have is some variant of "Who needs usability testing?".

      I'm in the early stages of a small project and spent a good part of the day today making a functional prototype for the web application/service I'm working on. As I code, I've got two iterations of paper prototypes sitting next to me as well as the notes taken during the user testing I did last week. I've found this process to be extremely valuable, as the feedback I got in the initial rounds of testing will save me a lot of time in the long run, not to mention ensure that the UI is intuitive and easy to use.

      --
      I like my women like my coffee... pale and bitter.
  3. A piece of cloth I can't find... by Anonymous Coward · · Score: 3, Interesting

    http://dub.washington.edu/projects/denim/

  4. Microsoft Excel by justdev · · Score: 3, Interesting

    In the past, I have used Microsoft Excel to do UI prototyping. It has some features which can be used to convey the design:-
    - Cell Comments: To mention any special logic etc on a particular field on the screen.
    - Can show drop downs, buttons.
    - Use multiple sheets and make the hyperlink work to navigate between sheets.
    - Can use colors to mark changes to some sections to existing UIs.