UI Prototyping and Mockups Part 1 – Balsamiq

Preamble

(if you rate this I would like to read your comments about your rating)

I was originally going to write this post and cover 2 or 3 different UI prototyping tools with Balsamiq being one of them.  Well, as I started working with Balsamiq I realized that I wanted to spend more time working with each tool so I decided to make this a mini-series of a sort with Balsamiq in Part 1 with ForeUI in Part 2 and an unknown (even to me) in Part 3.  So here we go with Balsamiq (this is not a tutorial but more of a review so I encourage you to explore the help file for all the capabilities here).

FYI: Real nice thing in this day of most software vendors requiring a license per machine and sometimes per use Balsamiq allows you to use your license on every machine you own.  As they say in the FAQ:  “The license for Mockups for Desktop is tied to you, not a particular machine. Install it on any machine you own and use, and enjoy!”

Update: Balsamiq has been updated to v1.8.5 on 06.22.2010 (release notes).

Let me preface this review of mine by saying it is a review of how I see the program and how it felt working with it as well as my impressions from a software developer point of view.  This is not some indirect advertising or some way to push more business to Balsamiq as I am actually using this tool in my work while I doing UI designs for the software I am developing.  Enough said.

Finally, here’s some links for Balsamiq:

Balsamiq Home

Sample Mockups

YouTube Demo

Mockups as Plugins

I did not include a great many screen shots of what Balsamiq can do as their website really has this covered much better than I do from the Sample Mockups link just above.

Contents

Looking Around

What I Did

Off The Top

Recommendation

Looking Around

Before I display my little mockup I figured I would go over some parts of Balsamiq and give my impressions.

General

I really like the clean look of this program.  It’s snappy, lot’s of room for composition and there is not a lot of clutter (ie.. there are no multiple sidebars, bottom bars, etc).  The Application Bar above the UI Library is interesting to me coming from mostly a Windows background (being used to toolbars) but it’s simple and workable.  I like the tools there but it would be nice to be able to move it around.  In fact, I would like to be able to dock the Application Bar, UI Library and Properties myself but perhaps that’s on a future version?

The menus are nice and short though a menu option for configuration would be nice (see Configuration below).

The UI Library slide menu is very responsive and the drag and drop is precise and crisp when dragging onto to Mockup Canvas.  I also like the wide array of control types though I don’t quite understand the iPhone specific controls as the overall wire frame concept implies that the mockup is OS or Device independent but that’s just me and the controls themselves, as well as any others I might not use myself, would probably be valuable to others.

Application Bar

The Application Bar contains some common actions such as cut, copy, paste, delete, control grouping and locking.  What I wish it had was the layer buttons (bring forward, send backward, etc) since it appears that those buttons exist on the Properties page for just about every control I worked with.  I would also be nice if the color pallete was available from the Application Bar.

UI Library

This is a great way to present the controls.  I like the preview of the controls and I like how responsive the navigation is within the library.  What I see that would be beneficial to me is to have a split level button for the control groups (ie.. Big, Navigation, iPhone, etc) that I could click on to see a drop down menu of what each group contains and clicking on an item in the menu would take me to that item in it’s group – just a thought..

Canvas

Not a whole lot to say about the Canvas itself.  It works very well, I don’t notice much if any lag when I am composing a mockup and that’s important to me since I tend to like to work fast when I have an idea (maybe it’s just poor short term memory!).  Anyway, if I could have one thing it would be rulers:  I know it’s  probaly not a pure mockup tool but sometimes I want to ensure that my mockup will fit on a page if I print it – trivial I know but some things you get used to.

Properties

This IS a part of the Canvas but I had a few things I wanted to comment on with the properties.  First, it seems there is a lot of redundancy such as the layering buttons, color, transparency to name a couple.  It would be really cool if the Properties were dockable with the option to slide out on mouse hover.  Then the common properties from the Properties window and maybe some from the Application Bar could go into a common properties section and then the custom properties unique to each control could go in a unique properties section just below the common properties – similar to this:

The Properties Window shows semi-transparent when I click on a control on the canvas and I have to click on the properties window itself to see what properties are available.  That’s kind of a bummer after a while and I am uncertain as to the value of that type of display when I have clicked on the control.  I am ok with the properties hiding itself after a bit but I still like the idea of having a properties area like the one I mocked above (it would not have to be docked permanently,  just have the option to do so).

Working with Images

Here I am, looking for a way to import images, and could not find an obvious way (ie.. File | Import Image..) to do so.  Then, being so smart, I actually went and read the online help and found out that images are easy to import in a rather cool way:  You use the Image control and once you drag it onto the mockup you can import through the control’s properties from your local drive, a URL or from Flickr.  Very simple and very cool!  I really liked the Sketch It feature which renders the image with a similar look to the rest of the mockup controls (not exact because you have more OS specific look with your screenshots but for other non OS images it’s nice).

Configuration

Most programs you work with have a configuration dialog that helps you to set your preferences for that program.  With Balsamiq, you have to create this file for yourself as it does not appear to exist by default after installation.  It would be nice if there were a default config with a nice dialog to modify the settings from the UI.

Here is my config that I used on Windows:  BalsamiqMockups.cfg


<config>
<fontFace>Tahoma</fontFace>
<rememberWindowSize>false</rememberWindowSize>
<useCookies>true</useCookies>
</config>

The config is pretty simple and self-explanatory so the only thing I would say is choose your font wisely and that’s only from the standpoint of working with existing mockup’s.  I had a sample I was working with that had the font in Comic Sans and then I created the config and changed the font to Lucida Console for fun and I had to re-arrange everything.  No real big deal and no different than if you change fonts in any drawing tool so it’s just something to be aware of.

Here is the info on the config

Exporting and Importing

Exporting is pretty straightforward with the option to export the current mockup to .png or all open mockups to .png.  There is no option to choose the location or filename of the exported .png for a single export but the export all does allow you to pick the folder.  The .png names are derived from the name of your mockup.  I would actually like the option to choose so I could have different names for the exported .png files.  Balsamiq DOES give you the option to create a sequentially named file if the export exists already so that is good.

The Export to Clipboard creates a snapshot of your mockup and puts it in the clipboard.  I tried this with Paint.Net and it worked perfectly.  The image was clear and exact.

If you want to get the xml representation of your mockup you can Export Mockup.. and Balsamiq will copy the xml to the clipboard in text format suitable for pasting in to an editor (the xml is in what is called .bmml format).

Importing was an interesting experience.  The way I understand importing is that you can import a .bmml into your current mockup as long as the .bmml file resides in the same folder as the current mockup.  Alternatively, you can paste the xml (.bmml format) into a text box and import that way.  I am uncertain if Adobe Air creates this kind of restriction or if it is by design but I can tell you that I am certain I will have .bmml files in various places on my system and I don’t always want to copy them around to current working folders.  This needs a file selection dialog similar to what the Image Control can do.

Here is the info on Exporting and Importing

Integration

Integration is often where a lot of products fail, especially with collaboration tools.  In this, Balsamiq really excels in it’s integration.  According to what I read, you can have full blown integration into Confluence, Jira, XWiki and FogBugz.  This means that you don’t have to use the desktop version of Balsamiq and import images from your mockups as you can create them from within the aforementioned collaboration tools.  That’s a very cool thing.

Here’s the info on Integration (starting with Confluence – scroll down on the help page to read more).

What I Did

Here are some screen shots  of a mockup I did with Balsamiq.  I admit it’s not as interesting as a real project might be but it will have to do…for now:

Just getting started, dragged a window to the canvas:

Now we have a toolbar and a tab control:

The treeview is in place:

Finally, the textbox and content on the right:

So, I am quite sure that this was a simpleton’s sample but it gives you some idea of what you can do in about 10 minutes but the results are well worth it.

Off the Top

Things I liked

What I think really makes this program work for me.

I liked the overall UI a great deal.  Despite some issues I might have it is still extremely productive.

I liked how little time it took me to produce so much.

I liked the large array of controls and Balsamq’s willingness to create more – just contact them and see what they say.

I liked how cool the Image Control was (is) for importing images – excellent!

I liked how responsive this program was (is!).  It’s very refereshing after working with some really speed hogs like Visual Studio.

I liked the integration features with Confluence, Jira, Xwiki, and FogBugz.

I liked a lot more things but I think this is a good start.

Things I could like

Some things that would be cool (to me) if they existed (if I missed something please tell me!) in Balsamiq – some of the items I might have mentioned already.

I could like it if the vertical curly brace control would show the text I just typed after I am done.  It seemed that I had to resize the object on the canvas and then it displayed fine.

I could like it if there were some line connection tools for annotation purposes similar to how dia does it or any other drawing tool for that matter.  I realize this might go against purist mockup thinking but many manual mockups I have done on paper always get arrows and lines pointing to the UI elements.  Just a thought…

I could like it if I could see a ruler along left and top.

I could like it if there was some rudimentary color formatting of the text in text type controls such as text area.  Some basic formatting exists in the controls with text editing in them such as Italics, Bold, and Links to name a few but I sometimes like color in my mockups (I used to use Paint.Net or Gimp so I am spoiled where color comes in) to draw attention to content that may be important to the project.

I could like it if there was an option to choose the location and filename of the .png I was exporting to.

I could like it a lot if Balsamiq generated XAML (.Net WPF) and/or MXML (Flex) – that would be so cool!

Recommendation

So, here we are, at the end of this little review. I hope I communicated the sharpness of Balsamiq and it’s focus towards one thing:  creating UI mockups.  This program, so far, is about the best thing that I have found to do mockups in a long time including Visio, SmartDraw or Dia (and I have used all of these).  I really think that Balsamiq, the company, is on the right track with this product and with some enhancements or changes it would just keep getting more popular.

Sigh.. I am not so good at writing a lot of fluff so to tell it like I say it:  This is a cool program and I don’t think I will use anything else except for my brain doing mockups in the future and while you can’t beat the collaborative integration the desktop version is great.

If you have to do UI mockups for clients this is a great way to go.

Side:  I was going to write a separate post about mockup magnets (called GuiMags) but that’s been done here.  So I thought I would entice your thought processes by mentioning you can get coated, magnetized, UI shapes for the ultimate manual UI design process.  You can write on them like a white board and best of all you can reuse them!  Here is the site where you can get GuiMags (as well as GuiBoards).  Check it out as a compliment to your digital mockups!

Stay tuned for UI Prototyping and Mockups Part 2 – ForeUI.

Tab

Installing and Customizing MediaWiki

Contents

Requirements – MediaWiki

Requirements – Internal

Parts

Skins

Extensions

Preamble

(if you rate this I would like to read your comments about your rating)

Notes on installing MediaWiki on an in-house server and customizing it with extensions and skins.  Windows was my first ‘test’ environment and Linux will be the final residing environment.

Why a wiki? Well, I have installed and initiated the use of a wiki on 4 different occasions.  Not personally but within the corporate environment.  Yea, what does that mean?  It means I saw the value of ‘a’ wiki and knew how useful it could be if it was adopted.  I have used Sharepoint and always felt as if I was having my hands tied everytime I used it due to what seems to be a half-hearted implementation in the wiki area.

Here is what I have used and installed in the past and highly recommend any of them:

MoinMoin - Python based wiki with everything you could ever want in a wiki.

FlexWiki - .Net based wiki which was cool when I used it but seems dead now.

DokuWiki - Php based wiki which is very fast and very complete – probably my favorite after MoinMoin.

Instiki – Rails based wiki I used to build a .Net community at a previous job.  This does not appear to be active but it was pretty cool.

How did I arrive at my decision to use MediaWiki? Well, I have long used WikiMatrix to keep track of the various wikis out there and their features and that’s where I started.  Then I winnowed down the choices until I had about 5 to install and I tried them all and between MediaWiki and DokuWiki as the top contenders MediaWiki was chosen due to is usage as the base for Wikipedia.

Requirements – MediaWiki

These are the requirements that MediaWiki has to get up and running:

• MediaWiki stack
• Apache v2
• Php v5
• MySql v5

Requirements – Internal

These are the requirements that my company has for using MediaWiki (or any wiki):

• Text Editing (of course!)
• Page Locking / Protect
• Page Templates
• Versioning – History
• Image / File Upload
• Mind Map integration (FreeMind and/or MindMeister)
• Image Navigation (Image Maps if possible)

Parts

So, here is how I got this going and the reasoning behind some of my choices.  Initially I installed all of the MediaWiki components individually and became discouraged because I wanted to get this up and running quickly and while I am fairly familiar with the LAMP / WAMP stack I am not an expert.  In order to get management interested I had to offer a no cost solution that could be shown to be installed, configured and running quickly.

BitNami saved the day!  Some months ago I was looking at setting up a Joomla! site and, again, I wanted to put my time in things other than installing, configuring, etc. so I turned to Bitnami and discovered that in no time at all I could get Joomla up and running with a full WAMP stack with virtually no trouble at all (unless you count forgetting the various passwords during installation!).  I know, it’s so un-purist of me…oh well, I want to solve problems and and think proving I can hand install and configure and application I need is no longer part of my work ethic.

Anyway, here is the download page for the various BitNami application stacks, infrastructures and server stacks.  Bitnami offers a wide variety of applications as well as _AMP (Linux, Windows, Mac) stacks that include, for example: PHP, MySQL, Apache or PHP, PostgreSQL, Apache as well as phpAdmin for the database types.  Check it out – I highly recommend it.

Ok, enough evangelizing..So, I downloaded the following:

• WAMPStack - for my first test
• LAMPStack – for my final installation
• MediaWiki – modules for both windows and linux – notice I said modules and NOT stacks.  I did it this way so I could install other applications and make it easy for others to install other applications down the road – probably just my viewpoint on how BitNami works.

Next, I installed the WAMPStack and made sure it was working and that I could get to the phpAdmin.  After that I installed the MediaWiki stack for Windows and verified it worked as well (the after installation takes you to the home page of your MediaWiki installation).  And there you have it:  a nice, easy and clean installation of a full web stack along with the open source web application of choice.

Skins

Skins allow you to customize the look and feel of MediaWiki with a single skin set as the global default in the LocalSettings.php (your basic MediaWiki config file) under ..apps\mediawiki\htdocs (..apps is where BitNami installs the web applications so look for your BitNami folder and you will find \apps under it).  Once you have a logon (and you will have a logon if you are the installer) you can go to my preferences at the top of any page and click on the skins tab.

By default, MediaWiki comes with the following skins with MonoBook as the default:

Chick
Classic
Cologne Blue
Modern
MonoBook (default)
MySkin
Nostalgia
Simple

Installing skins is a simple matter. Simply copy the skin_name.php and the skin_name.dep.php to the \skins subfolder and copy the skin files to it’s own folder under the \skins subfolder.  ie… copy theskin.php and theskin.dep.php to the \skins folder and copy the skin .css/image files to \skins\theskin folder.

You would think that something like MediaWiki would have a ton of skins like WordPress or Blogger does but that’s just not the case with many wiki’s and MediaWiki is no different.  I searched and searched and only found one site (Free MediaWiki Skins) that had more than a skin or two.

Not all of the skins work well and many of them seem to have extra headers in them that don’t relate to the wiki layout.  I have not looked at this yet but I will be taking a look to see if it is simply headers exposed by incomplete styles.  Also be aware that what may appear to be a different skin style (hence a different skin) turns out to be the same skin in various stages or implementation.

Here is a list of the skins I downloaded:

• bookjive.zip
• cavendish.zip
• clean.zip
• drupal.zip
• enhanced_relief.zip
• fratman.zip
• gumax-3-2-1.zip
• gumax-3-4-5.zip
• gumaxdd-1-1.zip
• gumaxv-1-0.zip
• paulgu.zip

Extensions

MediaWiki offers a ton of extensions but many of them are half finished, experimental or unstable.  Fun.  Anway, here is the help page for checking and installing extensions. And here is extensions matrix that you can spend hours reading through.

The basic installation procedure for extensions is to copy the extension in the \extensions subfolder under ..apps\mediawiki\htdocs, edit the LocalSettings.php and add the include for the plugin similar to this:

require_once( “$IP/extensions/mysuperduperextension.php” );

Most extensions come in the form a a .php file but some of them are quite involved such as the extension to embed FreeMind MindMaps into your wiki pages – read the instructions is all I can say.

Here is my finalized list of extensions I installed:

• addHTML – Inserts HTML code
• AnyWikiDraw – The AnyWikiDraw extensions adds a {{#drawing:}} tag to the MediaWiki parser which allows to edit SVG, PNG and JPEG images directly in a page using a Java applet.
• ArticleComments – a MediaWiki extension that provides a means for creating inline blog-like comment forms for regular wiki articles.
• CategorySuggest – Adds input box to edit and upload page which allows users to assign categories to the article. When a user starts typing the name of a category, the extension queries the database to find categories that match the user input.
• FreemindMediawikiExtension (FreeMindFlashBrowser and FreeMindBrowser are part of this) – This extension is for FreeMind-Users. It displays the FreeMind-MindMap (user does not have to install FreeMind).
• NewArticleTemplate – NewArticleTemplates is an Extension that allows you to automatically prefill text of new pages with the contents of other predefined wiki-pages. It is possible to distinguish between namespaces and specify a different text for new subpages.
• Dia – The Dia extension allows Dia diagrams to be embedded/rendered inside MediaWiki pages.
• MindMeister – Provides integration with MindMeister MindMaps.
• ImagePlus – Imageplus extends the editpage with capabilities to add images and edit the markup of images in a userfriendly way.
• ImageMap – ImageMap is an extension which allows clickable image maps.
• SyntaxHighlighterCodeColorizer – Highlight Syntax and Color Code using javascript. This plugin integrates Alex Gorbatchev’s Syntax Highlighter Tool.
• jQuery Tab Containers – Helps you organize content of your page into AJAX tabs.
• Personalised Home Page – This extension allows users to personalise the home page by creating a new page in their user space that will be used instead.

Something to be aware of:  all extension installations are manual via your file manager (unless there is an extension that helps you install extensions which I did not see).

End

So, that is my experience with getting MediaWiki running.  Let me know if you have questions, inputs, etc.

Tab