Creating UI mock-ups – a ‘top-down’ approach to designing software

As a customer it’s always refreshing to receive a mock-up of the UI before you commit to the task of coding.  Lots of developers are good at doing this, but there are some who always seem to want to start down at the bottom – at the technology end.  When I’m a customer I actually enjoy being pretty dumb – show me the buttons, levers, and dials please.  I think of starting at the technology end as being a bottom-up approach and good mock-ups as being more of a top-down approach.

In other words, start by mocking-up your UI and then you can walkthrough it with your customer and have them describe the behaviours to you rather than starting by talking about which version of .NET you are going to use, whether you are going to use LINQ in your data layer, or whether you are planning to use other technology to implement the solution.  At least then you’ll be speaking a common language to begin with.

So the question then arises, how can you create a mock-up, and how good (or bad) should it be?  I’m not going to attempt to cover off on the theory behind mock-ups today, but I would like to show a few different methods of producing them rapidly.

 

Simple Line drawing: Uses something like Word and Rectangles and Circle shapes to define the UI.  Upside: fast to create.  Downside: user doesn’t get a good feel for what they’ll get.

Mockup1

 

Descriptive Shape Drawing: A more descriptive version of Simple line drawing using rounded rectangles and more detailed elements to give the user a better feel for the final product.

Mockup2

 

Napkin Drawing (or Tablet drawing): Easy to create a quick drawing and add behavioural annotations.  If you don’t have a TabletPC you can draw on a sheet of paper and take a photo with your mobile phone.

Mockup3  

 

Advanced Drawing: The below image was created by Mitch Denny with a crayon-drawing software program he uses.  It’s great for inferring tacit or emotional ‘feelings’ into the drawing.

Mockup4

Update: Mitch explains his technique here.

 

Overall though, you want to get something to your user which allows them to understand what you are thinking and then use that drawing/diagram/sketch to have a shared understanding of what’s going to be produced.  As a rule of thumb, I would say that, dependant upon how much time you have and what your skills/strengths are, I think that the richer your mock-up, the better.  And after all, if movies were the lingua franca of the twentieth century, then surely mock-ups are the common language of the digital age?  What are your thoughts on mock-ups?  Do you have another tip or technique that you use? 

Advertisements

~ by D on January 27, 2008.

9 Responses to “Creating UI mock-ups – a ‘top-down’ approach to designing software”

  1. There are at least two other options.  One is to use a good drawing program like Adobe Photoshop to give a photo-realistic view of the screen to be delivered.  There is a tool cost, but often this sort of tool is at hand for other uses, amortizing or negating the cost.  There is a startup cost to create the initial screens, but this is minizized by pasting in shots from existing screens that you can obtain with a Snipping Tool or with good ol\’ Alt+Shift+PrtScr (F Lock must be off.)   Behavioural annotations are a snap.  Pretty essential is a Photoshop plug-in called Genuine Fractals (onOne Software) which was once free but now is only so for 30 days.  Cost is not too bad at US$159.  This lets you take your 72 pixel/inch laptop screen resolution screen shots and wind them up to 300 ppi , so you can resize them for publication and not lose resolution.  Once you have one set of Photoshop screens, you can generate others much more quickly. 
     
    The other option is to use Visula Studio and simply create the screens without the plumbing behind them.  Build and Run and there\’s your screen shot.  For a lot of controls this works quite well.  Then grab your Snipper and you are there.  If you can\’t do everything you want this way, using this approach with the idea from the previous paragraph gets you a nice presentation rapidly.
     
    Both these approaches or their combination are more time-consuming than the back-of-the-envelope sketches.  For most "customers", unless you know them well, they might at some point in the process expect the polish these techniques deliver. 

  2. Trackback from Paul Stovell\’s blog: http://www.paulstovell.net/blog/index.php/mockups-close-the-feedback-loop/
     

  3. item4sale xhjq09jj wow goldwow goldwow goldwow goldwow golditem4saleitem4saleitem4saleitem4saleitem4saleage of conan power levelingage of conan power levelingage of conan power levelingage of conan power levelingage of conan power leveling洗衣洗衣水洗机水洗机连锁干洗加盟连锁干洗加盟洗衣设备洗衣设备干洗店设备干洗店设备干洗机干洗机干洗店设备价格干洗店设备价格修鞋修鞋皮鞋美容机皮鞋美容机wow goldwow goldwow goldwow goldwow goldwow goldwow goldwow goldwow goldwow goldwow goldwow goldwow goldwow goldwow goldyll0912jj

  4. Hi,Do you need advertising displays, digital signages, advertising player and LCD displays? Please go Here:www.amberdigital.com.hk(Amberdigital).we have explored and developed the international market with professionalism. We have built a widespread marketing network, and set up a capable management team dedicated to provide beyond-expectation services to our customers.
    amberdigital Contact Us
    website:www.amberdigital.com.hk
    alibaba:amberdigital.en.alibaba.com[cdbebgfadbejgj]

  5. Hi,Do you need advertising displays, digital signages, mp4 advertisement players, SD card players and advertisement LCD displays? Please go Here:www.amberdigital.com.hk(Amberdigital).we have explored and developed the international market with professionalism. We have built a widespread marketing network, and set up a capable management team dedicated to provide beyond-expectation services to our customers.
    amberdigital Contact Us
    website:www.amberdigital.com.hk
    alibaba:amberdigital.en.alibaba.com[dejcbgaabfbefhg]

  6. dadaxiaod1015 zhhxixiad wow gold wow gold buy worhammer gold buy worhammer gold 澳洲留学中介 澳洲留学论坛 澳洲留学网 澳洲留学申请 澳洲留学签证 wow account wow account wow accounts buy wow account buy wow accounts world of warcraft account 澳洲留学费用 伦敦大学 澳洲大学排名 英国商学院 伦敦摄政学院 澳洲大学排名 马来西亚签证 德国签证 wow gold wow gold wow gold wow gold wow gold wow gold wow gold wow gold wow gold wow gold wow gold wow gold wow gold wow gold wow gold wow gold wow gold wow gold wow gold wow gold wow gold wow gold wow gold wow gold wow gold wow gold wow gold wow gold wow gold wow gold

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

 
%d bloggers like this: