I’ve enthused about Balsamiq Mockups before, but there’s another tool - Napkee - that promises to make it even more useful. It takes Balsamiq’s wireframe models and exports them as fully interactive clickable HTML/Javascript or Flex mockups.
Well, nearly. The product has been around since last August, but some of the support for some Balsamiq elements has been a little idiosyncratic until recently, so I have held off blogging about it. While there are still the occasional glitches, development is continuing apace and I reckon it is ready to be used in anger. The best place to get a feel for its quirks is on the company’s GetSatisfaction page.
In use it is simplicity itself. First make sure that your Mockup layout elements are all nicely linked to each other. Make sure that drop-down elements and menus are fully populated with options. Then import the Mockup’s .bmml xml file into Napkee and export. If you have both applications open simultaneous, changes to a Mockup are reflected in Napkee’s display every time a save occurs.
Development, pricing and support model is self-consciously modelled on Balsamiq’s: It’s an Adobe Air application, pricing is low - starting at $45 for Web or Flex export, $79 for both options. Like Balsamiq, Napkee is churning out application updates at an impressive rate.
The obvious thought is that Napkee’s lunch is likely to be eaten by Balsamiq implementing a similar feature itself. The addition of an “Export to PDF’ function including support for internal links in Balsamiq last November added basic support for exportable clickable models. The company is also putting the finishing touches to the MyBalsamiq online Web app which will allow collaborative commenting of clickable wireframes - taking it into Protoshare territory.
However Balsamiq founder and CEO Giacomo 'Peldi' Guilizzoni says he is leaving the field clear for Napkee in terms of standalone clickable prototypes to Napkee, - he has other fish to fry.
Indeed the two outfits are working closely together. Back in November Balsamiq added custom control ids to mock-up elements specifically so Napkee could hide, show and toggle visibility of a page elements in response to mouse clicks (although it has to be said that this feature will undoubtedly be useful for the MyBalsamiq effort). Balsamiq seems to intuitively like the idea of being an open platform on which others can build tools.
I suspect it won’t be long until some enterprising tools manufacturer decides it would like to buy both Balsamiq and Napkee as a package and put them together. At the moment, however both owners seem to be enjoying the role of nimble rapid-development entrepreneur.
|
||||||||||||||||||||||||||||||||||||||||||||||||||||
|
This Month
Month Archive
Login
|
Friday, January 8
From wireframe to clickable prototypes - Balsamiq meets Napkee
by
Chris Noble
on Fri 08 Jan 2010 14:11 GMT
Tuesday, September 30
Protoshare - a collaborative way to produce clickable wireframes.
by
Chris Noble
on Tue 30 Sep 2008 23:26 BST
Sometime last year I came across a little article by the Newfangled Web Factory about how they used “Grayscreen Prototypes” - clickable wireframes with some of the elements, such as menus, and text-links live. “That’s a nice idea” I thought, before deciding to leave the mock-ups to the Web developers, working from my specs and wireframes.
Well, now a tool has popped up which promises to anyone capable of creating a wireframe, to turn it into a prototype with enough functionality built in so that a client can experiment with the navigation scheme and get a real feel for how the site works. It was a commenter to this blog - indeed the only comment in the life of this blog so far - which asked whether I had looked at Protoshare, a relatively new online tool from Site9. I hadn't. But when 100% of your active audience suggests something, it seems churlish not to take a peek. To get a decent understanding of what Protoshare is all about, it is worth looking at the tutorial videos. It's a slick subscription-based Web tool that allows developers to: 1. Create hierarchical lists of pages (aka site maps) and then: 2. Create wire-frame clickable mock-ups with working menus etc. for each page 3. Set up a collaborative discussion, where developers and clients can discuss and annotate the wireframes. Overall, I like it. I have some niggles with usability, the pricing model and the support structure, but hopefully these can be ironed out as the product matures. There’s a 30 day free trial - give it a go. Though beware, you have to enter your credit card details and remember to send an e-mail asking to cancel, if you don’t want to be billed. Being a curmudgeon, I’m going to focus on my dislikes first. One problem with building any drag-and-drop wireframe tool is the constant demand from users for additional drag-and-drop widgets. Some user is always going to want to place a volume-slider, or some such into their mock-up. That user is me. Even so, s it stands, Protoshare’s selection feels a little thin - there are no horizontal or vertical rules, no support for tabbed navigation and no palette of little icons, to let you (say) drop in an RSS feed button. Of course it’s possible to insert your own graphic assets into a wireframe, but who wants to bother with that, for fairly common items. Similarly, styling of textual elements is a mixed bag. If you create a box to hold rich-text, Protoshare gives you the works - font, size, colour, style can all be selected on a per-word basis. However, if you want to make the text of your bread-crumb trail smaller, or want to decrease the font-size of your navigation bar so that the text doesn’t wrap, you’re on your own. It's true that Protoshare lets you attach custom CSS styles to elements to control all aspects of their look and feel, but it doesn’t give you any CSS tools, just a ‘type your CSS in here’ page. As a lazy IA, I don’t want to bother with code a CSS style to make my text fit on screen. And while entering the initial page hierarchy for a new site is a joy, why does the software have to make me mouse across to a separate Title box for every single new page? That gets irksome after the twentieth time. The box should be pre-selected as a page is created since the first thing that most people want to do is rename it.  On the other hand the collaboration system looks very nicely designed. Pages can have discussions attached to them and those discussions can have draggable push-pins associated with them (as illustrated above) to make it easy to see which part of the page they refer to. Each user can opt in and out of notifications when a discussion is initiated or added to. Alongside the push-pins, ‘specification’ markers can be added. These act as ‘callouts’ giving the developer a place to explain the functionality of a particular page element. Since this is a Web-hosted application, pricing is per licensed user per month. In effect this makes it a good tool for two groups: 1. An in-house enterprise team, which is developing a new site and may need the system intensively for a month or six, after which the subscription can be jettisoned 2. The dedicated high-end Web development house, which has a number of projects continuously on the go. It is not particularly attractive to consultants, for whom prototyping is a task that crops up every few months, but stop-start licensers are unlikely to be on Protoshare’s list of top customers. One area where the company really should move to make improvements, however is support. This is a Web-based tool, built on the premise that collaboration is important, and yet there is little effort to collaborate with customers. At this stage of the product’s life-cycle, I would expect to see a buzzing discussion board with the developers asking for feedback, finding out what the users’ priorities for improvement are and telling the users what developments are coming next. At the very least these online discussions act as a place for users to self-support and share hints and tips. Instead there’s a blog with comments turned off, and a rather thin FAQ. If you have a question, the e-mail form simply promises that a Customer Service representative will get back to you. Site9’s marcoms team is missing a trick here, with little additional effort they could be collecting data on how to continuously improve their offering, cementing the engagement of their existing user-base and impressing potential visitors with their responsiveness to customers. Perhaps they are just concentrating on super-servicing the super-big accounts, but even they will have "how do I" questions that are often best answered by fellow users. Post Scriptum. A couple of days after writing this entry Dave DeAngelis, Site9's Director of Product Experience got in touch to say that the company is planning to improve it's Web support in November. He also pointed out that the mouse-averse can tab across to the Title field when naming a page, but likes the suggestion of leaving the page name pre-selected on creation. Wednesday, September 10
It's just a rough dammit. Balsamiq to the rescue.
by
Chris Noble
on Wed 10 Sep 2008 21:09 BST
The problem of how to communicate rough design/layout ideas is an old one. How do you find a visual way to communicate the elements that a Web page or application, while making it clear that this is not a finished design?
It's a question that has bedevilled so many designers showing a wireframe to a client or member of their own management team, that it has become an an almost Dilbert-esque cliche. After loudly intoning: "it's a rough - take no notice of the fonts or the colours", they cautiously pop something on the screen, only to find that soon enough the debate turns to - the fonts and colours. It's too easy to make jokes about pointy-haired bosses at this stage, but the simple truth is, that most wireframes, created in tools such as Photoshop, Visio, even Powerpoint or Omnigraffle (linked because this a personal favourite) have enough polish to override the designer's verbal warnings: The human brain is very bad at ignoring things. And it is not just non-tech management fall prey to the problem. Designers do too. I've had conversations with Information Architects in the past who have sketched out ideas for a site or interface design, only to find the designer (who is meant to be the expert) has followed the sketch altogether too slavishly. In 2002 veteran information architecture and user experience designer Dan Brown, came up with the idea of the Page Description Diagram, an attempt to describe, in pure text the hierarchy of elements on a Web page and how they work together. An excellent idea, but one that its rarely seen in the wild. Which is why Balsamiq mockups, is such a breath of fresh air. This is a specialised graphical tool for mocking up user interfaces and Web pages. It gives you the pre-built wireframe elements, lets you drag, drop and resize and is smart enough to to know that (for example) radio buttons can have two states and to let you simply type in the labels for tab-bars and choose the one that should appear selected. It takes away much of the grunt-work.  Written in Adobe AIR, this is a young app, and it it wasn't the snappiest in the world to begin with. But over the the last couple of months, it's extremely responsive developer Giacomo 'Peldi' Guilizzoni has cranked out the point-revisions in response to an enthusiastic user community posting enhancement ideas and bug notifications on the company's Get Satisfaction page. A one-man-band, Guilizzoni is making himself a text-book case of how to use online tools to interact with your customers. Mockups isn't perfect - mainly, I suspect because of the quirks in AIR. On Mac OS X OS's native keyboard shortcut don't always work, for example and performance still leaves something to be desired. Nonetheless it is the quickest way that I have found to put an interface together. Moreover, alongside its standalone, desktop version, there versions available as plug-ins for Confluence, JIRA and (in development) Twiki. In other words it slots right into your collaborative workflow system. But one place where the software scores is the output looks truly rough. And I say that as if it is a good thing - because it is. There is no way that this can be mistaken for anything other than a mock-up. The font even defaults to comic sans, for goodness sake. Some architects/designers might feel that have is that the results look a bit amateurish, indeed they might be a bit embarrassed to put this in-front of a client. Trust me: if you carefully explain the issues and why you are using a tool that enables fast iterations of new layout possible, while also making the rough nature of the layout explicit, they are likely to 'get it'. Indeed the first client I showed it to ended up getting a licence. It is far better to undergo a little bit of pain at the start of the process, rather than endure misunderstandings throughout the project. |
|||||||||||||||||||||||||||||||||||||||||||||||||||
