MikePadgett.com

When designing prototypes you could do a lot worse than Visio. But you could also do a lot better. Axure, for example, should make this article irrelevant, as should the fact that I generally have little positive to say about Microsoft in the web realm.

So why this article? Well, I wanted to say a few words about my recent experiences working with Visio 2003 on a client site with no budget for excellent yet costly apps like Axure or the mortgage-worthy iRise. You see, apart from a brief period around 2003, I have been fortunate enough to enjoy working with software whose definition of fit-for-purpose is somewhat tighter than Redmond’s.

The other reason is because there are lots of excellent articles out there about how to replace Visio and I think there might be a bit of mileage in discussing something few professionals in this business ever talk about, namely coping with a forced downgrade.

We’ve all done it: we’ve changed employers, clients or whatever to find that our pastures new have, well, a whiff of old age about them. And your new colleagues will smile at you with a mixture of embarassment and sympathy. Turns out they only just upgraded from Windows NT a couple of weeks ago.

In the agony of that moment, you are haunted by the notion that your complaint about having to use an ancient, usually buggy, version of this or that is likely to fall on deaf ears.

Not so bad?

So here I am sitting in front of Visio, wondering exactly how I’m supposed to fly like an eagle in a coop of turkeys. Well the wings of this particular bird of prey are clipped, and it has to pick clean a corpse of a budget just to get the licence for a knackered old copy of Visio.

When I receive it, the CD-ROM is gleaming with all the innocent hopes of 2002. That’s because it has never been out of the TechNet box. And it takes another week before a miserable-looking support fellow with sufficient rights crawls out of his windowless basement to install it.

Turns out, old Visio isn’t so bad after all. Granted, it hasn’t changed that much since the old days. What it lacks in common sense and workflow it certainly gains in ease of use out of the box: in that regard, it’s classic Microsoft.

It also helps that others have trodden these well-beaten paths in the past. The pain of setting up a decent stencil containing a range of shapes needed to render prototypes has been assuaged in no small part by the sterling efforts of Henrik Olsen and his GUUUI stencil. This stencil is the perfect starting point for prototyping in Visio and it saved me a lot of hassle in the early stages.

Visio stencils for Information Architects

• GUUUI stencil
• Nick Finck’s IA stencils
• Garrett Dimon at the IA Institute

Here come the problems

It wasn’t all plain sailing, of course. Sometime soon, the cracks had to appear in Visio’s everyman panacea, otherwise everyone would choose Visio (me included), wouldn’t they?

1. Updating common objects

Mimicking the purpose of server-side includes, prototyping software should always enable users to save common objects for use across multiple sheets. And it follows that, when a change is made to such an object, that change updates all instances of the object.

Those who start work with a great little stencil like that of Henrik above will quickly find that, working in drag-and-drop fashion, working up sheets is a cinch until they need to update an object (or “shape” as it’s called in Visio).

For example, let’s say you want to change the Font property of all the textual elements from Verdana to Arial. Why would anyone do that? Well, maybe Verdana just bothers you. It does with me, though I read somewhere (and write in if you know, because I can no longer remember the source - it could have been an O’Reilly book) that in Windows, Verdana occupies 13% more horizontal space than Arial. But I digress…

So you update the stencil you’ve adopted and you’ll find that your changes are not reflected throughout your prototype sheets. Don’t tear out your hair though, just read on, because this is one of those special Microsoft Moments in which there is method in the madness. If you skew your thought process forty-five degrees or so, you’ll see it makes perfect sense, like the famous skull in Holbein’s portrait of two ambassadors.

Visio appears to preserve the integrity of your adopted stencil by creating a new stencil on the fly (the “document stencil”) which may or may not be immediately visible to you. My advice is to open and start utilising the document stencil (File > Shapes > Show Document Stencil in Visio 2003, for example) as early as possible in your prototyping process because otherwise it can get messy in there pretty quickly.

Like Holbein’s skull, this approach to maintaining your adopted stencil’s integrity is actually sensible enough when you look at it the right way, it just should have been better managed in the interface. I was clued in after a lot of irritation and Googling brought me to a little forum snippet which explained more or less the same thing.

So if you update the objects in your document stencil, the updates will be reflected throughout your prototype sheets.

2. Managing multiple prototype sheets and hierarchies

Navigating larger prototype documents is difficult in Visio because the software does not enable users to create hierarchical structures. In short, you can’t organise your sheets into folders to make them easier to manage or to better express their relationships to one other.

So whilst a few prototype sheets can be mocked up within a short space of time, when you try to work with twenty or more in a site structure that matches what will eventually become your intended site map, life becomes that much tougher.

Would it be that much of a stretch to have the context menu in the Drawing Explorer provide an option for “Create New Folder” or similar? After all, the developers already generated folders in which to collect the objects on every sheet.

To express an information architecture hierarchy in my Visio document, I found myself resorting to creating pages with names like o Organisation or ooo Policymaking just to create a sort of indent with which to visualise the structure at authortime. Should you ever find yourself having to do this in Drawing Explorer, by the way, ensure you use an alphanumeric as the indenting character (i.e. not something like — Federal support), otherwise hyperlinks between pages will not work.

3. Checking for broken links

If you alter the name of or delete a prototype sheet in a large document, how can you be sure that you’re not breaking hyperlinks? In Visio 2003 you can’t be, since there appears to be no link checking facility. I’d be happy to hear from you if you’ve found this essential feature. Had I the choice, this would probably have been the dealbreaker.

Conclusion

In Visio, you can brainstorm ideas for a new software product. In Visio, you can model your new software product using the conventions of UML. When you release the software, Visio will help you graph the success of sales. On the proceeds, your company can move to new offices and Visio will help you visualise the new desk layout and the organisation chart for your expanding workforce. If the company continues to grow and you need to consolidate, you can map more efficient processes in Visio.

So in common with most Microsoft products, Visio tries hard to be a lot of things to a lot of people and in a general sort of way, it succeeds admirably.

Indeed the three issues I identified above are not so serious that you’ll want to kidnap a minor royal to pay for the alternative. It’s just that other products do the job better and more efficiently and if you have the means, try them.

And I can’t comment on Visio 2007. I haven’t tried it and it’s not part of this article, though Microsoft doesn’t seem to have started a revolution with it. It might well have improved significantly however.

So I won’t say that this forced downgrade, this rollback, this blast from the past, turned out badly. That would be wrong - it was a question merely of making do. I’m not the prototype of a prototyping snob.

Microsoft’s Office Sharepoint Server 2007 clears up some problems with cosmetic improvements, but delivers enough new ones out-of-the-box to remain beyond the reach of assistive technology users. Significant development will be necessary to ensure a basic level of accessibility.
Article continues after the jump…

Just over a week ago, I indirectly criticised the BBC for running away to the the Jade Goody media circus. A bad case of overexposure if ever there was one!

Now they’re at it again and this time the Beeb is cosying up to our old friends from Redmond:

Spot the overexposed product!

You see, ever since the BBC signed an agreement with Microsoft to “explore ways of developing its digital services” I’ve been a bit sceptical about just how impartial a digital news service can be in today’s times.

Sure, the release of Vista is a newsworthy event. After all, it’s taken Microsoft several years and several dramatic delays to rebuild and market their operating system.

The release of Mac OS X enjoyed a paltry three articles over the period of several weeks and for the popular press, Linux has an image problem.

The logic here would be: “Windows is the most popular operating system, so it should get the most attention from the popular press”. Well it’s a chicken and egg equation, isn’t it? Plenty of exposure equals increased marketability, whilst increased marketability equals more press attention.

Note that our equation takes no account of the product’s actual quality. But in our times that simply doesn’t matter.

Just ask Jade Goody…

Flash is ten years old, as the BBC reports, and for any Internet technology still around after a decade that’s a considerable achievement.

When I started out in web design, it was almost the only medium I worked in, reflecting the tastes of the time. That was before the Flash backlash, led by the arch-headline-grabber himself Jakob Nielsen’s vociferous take on the matter.

Since then, the paths of Flash and I have diverged considerably. I rarely work with it nowadays.

Inappropriate Flash harms user experience

I haven’t seen developers breaking new ground lately, in the way every week used to bring extensions of Flash’s seemingly limitless capabilities in two dimensions.

Just at the time when Flash was in the corner licking its wounds, good old HTML enjoyed a renaissance with the adoption of web standards and increased accessibility. Today, JavaScript has taken markup into orbit and in a curious irony, it has also saved Flash from a further beating from the Eolas patent mess.

A few major successes have been brought to us by Flash in recent times. Yahoo has finally done the obvious and released a Flash mapping interface and YouTube’s video relies totally upon Flash’s video capabilities, of course.

Indeed, it’s the video stuff that ensures Adobe’s trusty plug-in is still relevant today, since the tech corporate’s vision of an all-purpose application delivery medium still looks years away, with a muted response to Flex and Microsoft’s competing Avalon (now imaginatively retitled WPF) technology tied to the long-delayed Vista.

“It’s a bit chaotic. There’s lots of noise, lots of activity. That’s great; there’s a huge amount of innovation” said Adobe’s Kevin Lynch [1] when asked about the future of Flash. Not a straight (or strong) answer.

In times past, Macromedia always managed to brave the storms, so perhaps Adobe can keep the tide in its favour.

I’ve been working on several .NET Smart Clients recently.

A Smart Client is a hybrid application in that the user runs it from the desktop, but its data is provided by a Web Service.

I tend to avoid the dull marketing speak that Microsoft churns out. This kind of output is often a gloopy porridge with just enough acronyms and cool phrases sprinkled on top to hook management.

If I were to indulge in a bit of mimicry of that style, the gist of the Smart Client buzz will be that the Smart Client “leverages the best of both worlds: the power and flexibility of the desktop application with the currency of web data”. Even the Smart Client itself is downloaded from the Web to “consign rollouts to relic status”.

I know. I won’t give up my day job just yet.

Smart Client applications provide an ill-founded excuse to drag in some web designer resource on the grounds that the UI might have some vague relationship to the Web. In reality, however, Smart Clients are usually dressed in the same regulation grey apparel of any other traditional Windows Forms clients. So I find myself in a whole different realm of UI design. To be honest, I feel a bit of a tourist in an ancient land.

The .NET 2.0 controls are interesting, though. Rather than being unique inventions in their own right, most of them are supercharged versions of standard controls, with bafflingly huge numbers of properties. Several are like junk robots: existing controls welded together to create a new (presumably improved) one. A datagrid with comboboxes, listboxes whose options also have checkboxes, that sort of thing.

I’m mindful of the period when Flash MX first came out and we started to see some pretty complex custom components written by horribly clever people. Some were totally unusable for even seasoned surfers, of course, but others seriously looked like the beautiful dreams of Xerox PARC bods circa 1982.

The free flights of Flash were subsequently crippled by accessibility constraints and thinly spread expertise and you had Nielsen complaining vociferously about usability until Macromedia silenced him with a nice bit of consultancy. But the damage was done.

I naively used to believe that the creative multiplicity of user controls was a healthy thing - the cream would get to sit on top, ideas would come from freethinking, positive change would be effected and all ex-Soviet republics would thrive on democracy.

I enjoyed twiddling with Flash knobs. I worked on a few bits myself, a couple of bells and the odd whistle. But eventually I sobered up to the fact that, in the main, users didn’t want to be intimidated by bizarre navigation and, hey, forms are forms.

On the web, we’re still feeding on a diet of select menus, radio groups and textareas. Avalon (now known as the “Windows Presentation Foundation” - sounds like a charity) hasn’t been properly cooked yet and XForms is still raw like radish.

So .NET 2.0 controls are different without being, well, revolutionary. And I know what you’re going to say about evolution and revolution. There’s no need. Tell it to those republics instead.

I stumbled across Microsoft Expression this afternoon, quite by chance, really. Expression is a three-product graphics suite for designers. It borrows enormously from Macromedia Studio and a bit of Adobe Photoshop.

It seems to me to be quite a bald response to Macromedia’s buyout, but as usual Microsoft has an angle.

That angle is XAML, the UI language based on the XML standard that Microsoft will ship with Avalon.

XAML, which from what I’ve seen bears comparison to XML-based code for Macromedia Flex applications, is the output format from Expression’s Interactive Designer, the more unusual package in the suite.

Also on offer are Graphic Designer and Web Designer, sold to us via the kind of (literally) kaleidoscopic visuals that presumably appeal to funky design types.

Sample downloads weigh in at upto a rather hefty 140Mb.

Can’t wait to hear the price!

I’ve been roadtesting the beta 1 of Microsoft’s Internet Explorer 7, which was released to a limited audience (though I gatecrashed myself a copy). How’s it been? Well, I started this item already but it crashed, so that’s a bad start!

Fans of Redmond’s finest (not counting Milt’s Barbecue, of course) have been made to wait about four years for this seventh iteration in the perennial series of the world’s most popular standards shirker.

Was it worth that wait? Well, after a few days’ general use and comparison with Firefox, Opera and even Netscape 8 (leaving no stone unturned, then), and allowing for more crashes and unexplained slowdowns than the A34 between Oxford and Milton Park, I’m forced to say no.

The GUI is a tragic attempt to marry up the playtime iconography of XP and the muted future demands of Longhorn (now with the [un]inspired title of Windows Vista). Ignoring fifteen years of precedent, the File Edit View etc menu appears at the bottom of the header bar, having been pushed out of the running by Back/Forward, the Address bar and an inexplicably miniscule Refresh button.

Tabbed browsing is nothing new. Users, say MS, have been crying out for it, so now the tabs come thick and fast, starting out with none-too-neat land of the giants widths until the interface gets suitably crammed with them. There’s also a somewhat counter-intuitive blank tab for tabbing the current page.

On the plus side, integrated search support is good, with a little window to switch between all the good engines and MSN, thereby saying goodbye to that annoying popup frame on the left. There’s also a kind of RSS reader, though it’s not really comprehensive enough at this stage to warrant further comment.

Devwise, the IE box model issue doesn’t appear to have been corrected, though I haven’t delved too far into this yet, but MS are shouting out loud about the [shock] PNG transparency support that has now finally arrived with IE7.

Overall, then, rather disappointing and in that sense, predictable. I’ll look forward to beta 2 and hope for a miracle.

In my current efforts to adhere to div-only layouts, it was expected that I would eventually get to a sticky point.

I’m not used to hacking CSS, so progress for me has been slow. Hacking CSS is something of an unnatural process, particularly when you feel most comfortable you’re coding pages fluently from a design.

Of course, it’s not the CSS that’s the problem, it’s the browsers. Or perhaps I should say, the browser. For as Dunstan shows, curved corners are not especially difficult with selectors. It’s good old Internet Explorer that has the issues.

The Microsoft response is particularly horrid, manifested in an abhorrence of nested divs. As someone later pointed out, the whole point of good CSS is that unnecessary markup is removed.

“The drawback to this solution,” owns MS’ Markus Mielke, “is that the code can be difficult to read, and you can end up with convoluted HTML that’s hard to maintain. The DIVs really have no reason to be in the code other than to provide insertion points for each corner, since you can’t put all the images in one DIV.” But that’s his solution, over and above which he suggests we try Google. Great.

If you can get past the invective that was hurled at this by way of response, you certainly find some alternatives that do cater for IE in this particularly thorny area. Though it contains some javascript workings, Alessandro Fulciniti’s “Nifty Corners” solution is one of the tidiest, with Roger Johansson’s cross-browser and transparency effort one of the cleverest.

Finally, a good little tool to help overcome the alien div-only methodology are fu2k.org’s layout test pages- very handy for figuring out the whats and the whys!