In my job as a product manager one of my key responsibilities is designing high-productivity software that is easy to use and powerful. We work in a complex domain that involves massive amount of data, millions of dollars on the line, and tight deadlines. We attack these complex software with advanced technology, masked in easy to use software.

One of the challenges with user interface development – and all software development, for that matter – is that the further down the line in development something goes, the harder it is to change. Once a developer spends days or weeks working on something the resistance becomes huge as people are attached to their work – regardless of whether it is a good fit for the customer. To counter these problems, I’m a big advocate of building mockups in order to sort out the key design issues before significant development happens.

Over the years, I’ve used the following types of tools to do this:

• Whiteboards with digital camera snapshots
• Pen and paper sketches scanned
• Photoshop / image mockups
• HTML mockups
• PHP prototypes

I use these various tools to build mockups for a variety of applications including native windows applications, classical web applications, and dynamic ajax applications. The more complex applications become, with complex widgets such as data grids, trees, and tabs, the tougher the hurdles are to crank out a quick mockup. The other problem I’ve seen is that the closer to ‘real’ a mockup looks, the more people are going to comment on the nitty gritty details instead of focusing on the key issues of workflow and usability – just like the problem of developers getting attached to something they’ve worked on, reviewers of super realistic models seem to often just assume that they can’t question the general structure and end up commenting on alignment issues, colors, etc.

I’m always on the prowl for new tools to use in this design phase, and have recently come across a product that is becoming a great addition to my arsenal of tools: Balsamiq Mockups. Balsamiq is a lightweight tool for building wireframes/mockups that look like sketches. The focus is on rapid creation of screen mockups that are easy to make and easy to change, encouraging feedback and rapid iteration. The product is available in a desktop version and also version integrated with Wiki software like Confluence. For the past few weeks I’ve been playing around with the desktop version – their website said that they’d give a free license of the desktop version if you promised to write a review, so here I am! Here I’d like to point out some of my likes, some annoyances, some features I’d like to see, and a weird little bug I came across.

First off, here’s a sample of what a mockup looks like for a fictional, non-sense product:

In a way, Balsamiq seems to be very much inspired by Microsoft PowerPoint…but in a good way. You drag shapes from a list of about 75 widgets onto a page and then rearrange, align, and change properties for the items. The big difference is in the different types of widgets that are available. There are some basic shapes, but most of the widgets are things you would see in applications, like text inputs, dropdowns, radio/checkboxes, and then some more complex widgets like tabs, trees, data grids, and iPhone widgets. The result is that you can build things fast – the mockup above took about 5 minutes to put together.

What I like

• Easy to use – the number one feature. As mentioned, the application uses many known paradigms from existing applications such as PowerPoint and other design apps. I was able to get going without reading the manual, going through a tutorial, or getting a lesson – the application explains itself.
• Fast – ok, this is tied for the number one feature. Because of its ease of use, it is possible to create and iterate on designs very quickly. The ‘Quick Add’ feature really speeds things up by letting you type in the name of a widget without having to find it in the mix of 75 widgets – conveniences like this can make a massive difference in productivity.
• Just the right level of realism – the mockups definitely would never be confused with a real application, but they are clean enough that they can convey to point very well and get people to focus on the key design and workflow issues early on in product design and development
• Advanced widgets such as tree and data table – these advanced widgets are some of the items that make it tough to build mockups for advanced apps in languages like HTML without investing a lot of effort to use libraries like extjs, jquery, or YUI.
• Easy to export to PNG – mockups can easily be exported out to the PNG format for posting on a wiki or emailing.
• Editable – as compared to paper mockups, these have the major advantage of being editable, so you don’t have to break out the eraser or start over from scratch.
• Translates well to traditional webapps, ajax webapps, and desktop applications – because the application

Annoyances…or things that aren’t necessarily bugs, but would make the application easier to use if they were addressed

• After ‘Quick Add’ clicking f2 doesn’t go into edit mode – you have to click the widget first. If you drag items from the strip they automatically go into edit mode, it would be nice to have that for the quick add as well.
• Dragging items from the strip doesn’t show the guides unless you place the widget then drag again, whereas normally when you are dragging you see guides to help you line up widgets
• It would be nice if there were a better way to select a set of items without moving the item beneath it. If you have 20 widgets on a dialog box and you need to shift them over to make space, in order to select them all you have to first lock the dialog box, select the items by click dragging, drag, release, and unlock the dialog. If you don’t do this then the dialog box will just be moved. This gets more confusing if you have multiple boxes on top of each other. It would be nice if there were a way to move into selection mode which would allow you to select any elements that are entirely enclosed by a bounding box.
• Related to the previous entry, you unlock items through a right-click menu (the only usage of right-click in the app?), but if multiple items are locked in the clicked area it just shows the item type in the context menu. In some scenarios I had 3 or 4 items showing up, some of which were of the same type. It would be nice to highlight the item when hovering over it in the context menu to let you know you’ve got the right one.
• It would be nice if the tree could user smaller fonts – some of the other widgets allow for choosing smaller fonts to fit more text, but the tree uses a very large font, making it tough to represent even remotely realistic data.

Features I’d like to see

• Ability to click through from one mockup to another to create workflow – while I don’t need to create an entire flow for an application, if I’m mocking up a particular feature it would be useful to show 3 or 4 screens that are linked together maybe with a generated HTML files or something of the sort.
• Ability to regroup after ungrouping items – you can group items, but you need to ungroup to make any edits (unlike PowerPoint which allows you to change text or even move sub-items), but then you don’t have an option to regroup…meaning you have to go through the same fun of locking outer elements, and reselecting.
• Radio and Check Box controls should allow adding multiple at once similar to Dropdown – since these fields usually come with multiple entries it would be nice to have the widgets allow for adding multiple ‘rows’ of data similar to dropdowns
• It would be nice to have right-click context menus for some operations like grouping or ungrouping
• Layers – it might be nice to have layers (like Photoshop) to help avoid some of the issues with moving items…this would add a lot of utility but it would come with the negative impact on ease of use and ramp up time.
• Ability to add custom widgets – it would be nice to be able to add custom widgets…now if you create a widget by composing the built in widgets you have to save it as another mockup and then select-all and copy/paste into the destination mockup – it would be nice to be able to save the widget to the strip and give it a name.
• Favorites bar in addition to the current ‘All’, ‘Big’, ‘Buttons’ – for many projects only a small number of the widgets are necessary. In my applications I have no need for things like the iPhone widgets so they just get in the way.
• Maybe a way to switch from click mode to select mode for selecting multiple items

Bug

• This was a weird one. If you type ’scro’ into the Quick Add box and click the entry for the ‘vertical scrollbar’, the horizontal scrollbar is actually added. Surprisingly, if you type in ’scrol’ or ’scr’ it works just fine!

Conclusion

Overall I really like this application – I’ve found myself evangelizing to colleagues and used it for some real feature design and have gotten good feedback from all who have seen the results. Like all software, there are many things that could be improved and there likely always will be, but it seems that the application is in active development and the focus on usability and user productivity look like they’ll keep the product on the right trajectory. At $79 I think it is a bargain and justifies its cost in hours or days of use. It doesn’t necessarily replace all of the other tools in my mockup toolbox – to get to the finer level of detail I still need to break out the HTML occasionally – but this is now usually something that happens only after I’ve validated the basic design with Balsamiq.

Rating: 8/10

Having put together a couple websites (Redstone Studios and Althea) that integrate with Paypal for providing checkout capabilities, I was very interested to look at Google Checkout when it was released this past week. My experience with the Paypal integration was not so good – while I eventually got it to work, it took a ton of experimentation, searching for documentation, and guessing why things weren’t working (i.e. no meaningful error messages). Luckily, Google Checkout doesn’t seem to suffer from these problems – I had it up and running in no time and it seems very solid for what it does. What does it do? Well, it’s basically a checkout system where you can pass in a cart, users can pay by credit card, and then the money gets deposited in your bank account. Google charges 2% of the transaction amount plus twenty cents. The two percent covers the percent Google has to pay the credit card companies, and the twenty cents is some extra cash for Google. If you use Google Adwords, you get a free credit on Google Checkout – for every 1 dollar spent on Adwords you get 10 dollars of sales with no costs.

Google provides sample PHP code for getting the integration going, but unfortunately the code is PHP4 only, and it is ugly ugly ugly code. I decided to put together a simple class that allows simple integration with Google Checkout. The class is PHP5 only because it uses PHP5’s DOM extension.

To use Google Checkout you need to create a Google Checkout account. From there, you can get your merchant id and merchant key, both of which are needed to communicate with Google Checkout. The Google Checkout API works by POSTING XML over HTTP. While Google’s API is very flexible, I’ve chosen to implement a subset that I think would be useful for many people. Also, I’ve only implemented this class to support the creation of the cart and submission to Google, I haven’t included any functionality for greater integration. This greater integration would involve creating web services that Google could call to update the website on changes to the order status, shipping, etc. The way I’ve set this up, all of that is skipped, and store owner would receive orders via email or Google’s Checkout interface.

Limitations:

• No support for cart expiration
• No support for merchant calculations for tax/shipping/gift certificates as these require HTTPS and I don’t have it and don’t care to use it
• No support for requesting the buyers phone number because I didn’t notice that field until just now!
• No support for shipping restrictions – i.e. shipping option 1 is only available in these zip codes/states/etc
• No support for complicated tax rules. Tax can be setup on a state by state basis. One alternative tax rule ‘taxfree’ is setup to allow certain items to be tax free. No support for other alternative tax rules.
• Currently doesn’t support customization of the form and checkout image

In order to work around some of these limitations, I’ve provided a method called setDefaultXML which allows the developer to specify a default XML file to be used. The class will then fill in the items, do the encryption, and generate the form and checkout image. This allows much greater flexibility and support for all of Google’s options, when needed.

Here’s a simple example of how I might use it:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

require('GoogleCheckout.php');
 
$merchant_id = 'XXXXXXXXXXXXXXX';
$merchant_key = 'XXXXXXXXXXXXXXXXXXXXXX';
 
$google = new Gregphoto_Service_Google_Checkout($merchant_id,$merchant_key);
$google->setMode('sandbox');
$google->addItem('Doolittle','Doolitle CD by The Pixies (1989)','11.98',1);
$google->addItem('PSCREEN18','18 inch Pizza Screen','7.99',3);
$google->addItem('MYWIDGET01','New tax free widget - Student Use Only','149.21',1,'','taxfree');
$google->addItem('NDISC01','New Customer Discount','-10',1);
$google->editCartUrl = 'http://www.gregphoto.net/index.php?action=editcart&source=google';
$google->continueShoppingUrl = 'http://www.gregphoto.net';
$google->setShipping('UPS Ground',19.99);
$google->setShipping('UPS Next Day',27.99);
$google->setShipping('Instore Pickup',4.99,'pickup');
$google->setStateTax('CA',.0875);
$google->setStateTax('IL',.0525);
 
echo $google->getHTMLForm();
$google->printXML();

Now, for what’s going on:

• Line 1 includes the class
• Lines 3 and 4 setup variables for the merchant id and merchant key
• Line 6 instantiates the class, passing in the merchant id and key
• Line 7 sets the class to use the Google Checkout Sandbox – this is a testing sandbox where you can setup fake accounts to use while creating your site. Paypal offerers a much richer sandbox functionality.
• Lines 8-11 add new line items to the cart, setting there name, description, price, quantity, notes, and special tax rules
• Lines 12 and 13 setup the URLs the user should be sent to if the choose to edit the cart or continue shopping
• Lines 14-16 setup various shipping options including their prices
• Lines 17 and 18 setup taxes for the users in specific states. Google Checkout supports much richer rules around taxation, but I kept it simple on a state-by-state level.
• Line 20 outputs the HTML form and checkout image that will send the cart to Google Checkout and bring the user to the Google Checkout page
• Line 21 shows the XML cart, for debugging purposes

View this example running on my site
View the API of Gregphoto_Service_Google_Checkout
Download the class and API docs
View Google’s Develper Guide for Google Checkout

I love music, and I love the tools that make it easier and more convenient for me to listen to music. One of the advances that has made music so much more accessible over the past few years has been the advent of mp3s, digital music, and digital music players. I bought a first generation iPod the day they were released for Windows based computers, I’ve since upgraded to a non-Apple mp3 player, and I’ve got a mp3 CD player in my car. While some new technologies can be a burden on their users, digital music technology lets me listen to more music with more choice, and keeps me from listening to the same album over and over in my car due to my own laziness. I’m not a super audiophile, and I tend not to notice the slight degradation of music quality I get from digital music, and what I do notice in inferior sound quality is greatly outweighed by the convenience of it’s portability, searchability, and ease of use. Despite the great conveniences of digital music, there are a couple things that really bother me – they bother more than they should because I think they’re things that wouldn’t be all that hard to fix.

Before I get going on my rant, I should note that my only credentials on this topic are being both a music enthusiast and a computer enthusiast – I don’t know all the details about every digital music file format or player, I just know what I’ve seen in popular applications such as mp3 players, iTunes, and other digital music players…

And then there was silence…

At least there was silence for a couple of seconds. The biggest gripe I have with digital music is that there seems to be no reliable way to control the ‘gap’ between tracks. For many albums or types of music, I don’t particularly care about the gap. For other music, the gap can really take away from the enjoyment. This is most evident is albums where songs blend together with no gaps – this includes albums from The Beatles’ ‘Abbey Road’ to The Red Hot Chili Pepper’s ‘ Blood Sugar Sex Magik’, just about all classical music, and live music recordings. Some applications and mp3 players have settings to let the user control the time between tracks or even the cross-fade between tracks. This really isn’t enough, as the time between tracks changes from track to track. Sometimes I need no space between tracks, sometimes I need the standard 2 seconds, and sometimes I need more. The key is that this is all dependent on the album and how it was meant to be heard. Another important element is that the gap between tracks should be context-sensitive to the album. If a song typically has no gap between it and the next song, should it also have no gap when it is played on a playlist outside of the album? The problem is that there really is no concept of the ‘album’ in popular digital music, but we’ll get to that later.

From Abbey Road to the White Album

My other problem with digital music is that in mp3 players and digital music players, when I look at a list of albums from a band, I see them alphabetically. An alphabetical list of albums makes it easy to find one you’re looking for, but to me, is not the best way to look at albums. I would rather look at albums chronologically – so that when I’m looking at a list of Led Zeppelin albums I see ‘Led Zeppelin I’ before I see ‘Houses of the Holy’, or The Beatles’ ‘The White Album’ before ‘Abbey Road’. This is an unusual problem because our digital music has metadata, and one of those fields is for the year of the music. So why can’t that be used to show a chronological list of albums? I suppose it could, but it would present problems. Let’s say an album has 10 tracks – in the perfect metadata world, all of these will have the same year, so the application or music player could just look at one of the songs and pick the year. In a more complicated world, the songs could have different years marked, or incomplete data – what should the player do in this case? What if we’re looking at a compilation of songs all recorded in different years – should the file’s metadata list the year the song was recorded and released or the year the compilation was released. I would argue that attached to the song should be the year in which it was recorded, while another entity – ‘the album’ – should keep track of it’s own release date.

The Album – The Metadata that Went Missing

So the common thread here is the album. Right now, popular music systems have no real concept of the album – they infer the existence of an album based on metadata attached to each song – an artist name, an album, year, genre, track number, and whole bunch of other fields. As mentioned earlier, this becomes increasingly complex when songs start belonging to multiple albums or playlists, because the songs can only have one value for each of the aforementioned metadata fields. What we really need is a wrapper around all the files in an album that can store some of this information.

Let’s think about this from the technical perspective. If I were to develop a database-based application to store information about my music collection, how would I do it? I would need to create tables for songs, albums, and song/album mappings. Basically, one table would have all the basic information about each song, another table would have the basic information about each album (artist, release date, record company, producer, credits, etc), and another would connect the two other tables – mapping which songs are on which albums and the order in which they are on those albums. If I wanted to go an extra step further, I could add another table to track information about the artist, but that isn’t really essential for most purposes.

Obviously the files that make up the digital music of today are not databases, so the table concept doesn’t directly translate to what can be done in the real world. So if this had to be done in a file-based manner, we could add one small file that has album information and the album/track mapping – similar to a playlist file but with more information. The album’s year would solve my second issue of chronological sorting of albums, and the tracklist within the album file could have information about the space between tracks, solving the gap between tracks issue.

Overall I think this could add to the experience of digital music and make it easier for people to switch over from the physical realm of music to the digital realm. I still love my liner notes and opening up a new album, so I don’t think I’ll go all digital anytime soon, but making the experience of listing to music closer to what I get with a CD, record, or tape player, will certainly make it easier for me to get rid of that CD player in my living room…