When it came time to update Stone Hill Invoicer’s design to be a little more modern, I couldn’t resist playing around a bit. Some of this experimentation didn’t make it into the final app, but I think it’s fun to show it off anyhow.
Popovers
When the iPad announcement came out, I’ll admit I was thrilled about popovers. Those are those little bubbles that act like temporary panels when you press some button to summon them up.
A couple weeks earlier I’d used MAAttachedWindow to implement popovers in my app. In several places, the previous version of the app needed to use a sheet to present a more detailed view. That’s a lousy thing to do unless it’s really required. The user has to shift their focus, deal with a modal dialog, and then remember what they were doing.
An old modal sheet used to edit the billing address on an invoice
With a popover the user sees details immediately related to what they’re working on without changing their focus. Clicking away from the dialog immediately dismisses it. When their attention shifts to another part of the document, they don’t need to perform the initial manual step of dismissing what they were previously working on.
A new popover, displaying the same information, but in a way that doesn’t break the users workflow.
All in all, these work great on the desktop. They let me get rid of at least a half dozen modal sheets.
That being said, during initial testing, I found that users were confused by the lack of ‘Ok’ and ‘Cancel’ buttons on the popovers. Clicking elsewhere to dismiss it wasn’t an intuitive action, though they didn’t expect to have to dismiss the popovers when switching focus to another task. I added ‘Done’ and ‘Cancel’ buttons to my popovers. This increased the size of the popover, but provided the user with an immediate cue for how to dismiss them.
Modal Popovers with Lightboxing
Flush with popover success, I decided to try applying the same style to modal sheets. I’ve seen this in a few web apps, and on the iPad too if I’m not mistaken (I might be, we don’t get them in Canada for a while yet).
When I was experimenting, one of the big problems was that they weren’t very visible against the app. There was no real way of indicating that they were modal.
Lightboxes are something you see a lot in the web world. In order to highlight the modal popover, I dimmed the window they were modal to. Though it helped draw attention to them, in my implementation it disabled interaction with the window below it.
A modal popover on a lightboxed background.
Feedback during beta testing was that they were just weird. I got rid of these and replaced them with sheets.
That being said, I’m convinced that these help an application look more visually balanced, and it’s just a matter of getting the implementation right. I plan on revisiting this at some point.
Nag Screens in the Sidebar
There’s a fine line between annoying your users with nag screens and not getting paid for your software. In Stone Hill, I decided to try a bit of a different way of walking that line.
The nagsceen is unobtrusive. In unregistered copies, there’s a couple of items in the source list: “Buy Stone Hill Invoicer” and “Register Stone Hill Invoicer”. Clicking on the “Buy Stone Hill Invoicer” item shows a decent sized sales pitch.
The ‘upgrade nag screen’. This only shows when you click the “Buy Stone Hill Invoicer” item in the sourcelist.
During beta testing, one of my users asked where the purchase button was. He’d checked under the application menu and couldn’t find it. Fair enough. I ended up adding a menu item that shows the same screen under the application menu.
This strikes me as being in the same vein as Panic’s top–of-the-window nag counters.
Sidebar Search via the Global Search Box
One of the things that always drove me nuts about Stone Hill was that the search function only worked on some screens. In version two, using the search from one of the document screens filters the customer and inventory lists. Though I considered creating a special iPhone style search box at the top of each table that would initially be scrolled out of view, it seems like a better idea to keep the global search box as the only place to search from.
Feedback has been positive about this so far, but this method may have discoverability issues.
A customer list filtered by search text
