Balsamiq Mockups - it Roqs (Web Prototyping Software)

Recently I heard about a piece of software for creating mockups for web apps. After a brief read of the features and nature to the tool it sounded almost too good to be true.

Striking the prototyping balance...
For many years, I have tried virtually every type of prototyping method for web page design.  Each has its own dedicated following (fanboys), advantages and disadvantages.


Examples of prototyping methods used previously

Method	Description	Advantages	Disadvantages
Pencil & Paper	Just as it sounds, sketch it out on a pad of paper.  Other variations include cutting and pasting paper to show interaction	Focused on ideas and functionality (if done with layers) Anyone can have input Less pride of ownership Can do it anywhere more info	Very tedius (especially if you have little to no drawing skills) No scale to duplicating elements
PowerPoint / Visio	Create a background image and start building on top of it with boxes / cut screenshots	Easy to duplicate elements Can show animation (PPT) On most desktops more info	Animation is very tedius Stuck with 1 page size (for all intensive purposes this is the case)
Photoshop	Use the industry standard image softwrare to build your comps	Powerful use of layers Easy to duplicate elements Lots of tools and templates available more info	Not always available Expensive Not easy for a novice Often focuses on "sexiness" instead of usability Animation not easy more info
Fireworks	Similar to Photoshop (and Illustrator) but handles reuse and "animation" better	Powerful use of layers Easy to duplicate elements Good animation tools more info	Not always available Expensive Not easy for a novice Often focuses on "sexiness" instead of usability
Dreamweaver	Use the most popular WYSIWYG tool to write HTML	WYSIWYG click and add elements Quick edits (small changes) Templates more info	Not always available Expensive Not easy for a novice Bad tradeoffs in having semi hi fidelity and inability to reach quickly to big changes (CSS can be a pain)
Straight HTML/jQuery	Grab your favorite Text Editor / IDE and start coding.	Closest approximation to the final product Adds real interactivity Forces designer to think of practicality jQuery adds lots of powerful tools to speed up layout and functionality more info	Strong technical knowledge needed Hard to react quickly / in real time to radical changes Often focuses on "cool factor" instead of usability

And then came Balsamiq Mockups...perhaps the perfect balance

Balsamiq Mockups (BM from now on) is from a micro-ISV called Balsamiq.  The founder is a former Adobe employee who decided to head out on his own and moved back to his home country of Italy to focus on the company.

The product's objective is to give you most of the advantages of Paper Prototyping but with the added value that comes from being digital (quick repetition and duplication, capture state easily, collaboration across long distance, etc...).

The interface is simple and the usability is very high.  Although it is a young product from a young company, the software so far has worked fairly reliably.

Every element acts a lot like a visio element.  They can be resized (I really like the autosize feature), grouped, layered, duplicated, etc... There are a minimal set of properties that many controls have to adjust background color, to add a real image (the sketch it feature is helpful to not lose site of the mockup's purpose), or adjust font sizes (this last feature is limited and something I suggest improving below).

Since I installed the application (it is Adobe AIR based) a couple of days ago, I have used it to mockup some important page changes that we are considering.  It is amazing how fast I was able to whip up the new design ideas using this tool.  Most recently, I have been doing these mockups using a combination of Firebug, Firefox, jQuery, and SnagIt.  For small changes I will continue to use these tools, but Balsamic Mockups was much easier and quicker for me to sketch up big changes to the pages, especially when it came to layout.

Examples of mockups from Balsamiq (I cannot show my mockups due to our corporate policy e.g. trade secrets)

  

 

What is still needed for the software right away:

• Zoom - You cannot zoom in or out of the page.  Needed, especially for us without fancy monitors (or on noteboooks)
• Adjust font size & style for all (or most) controls - font size and styles can only be changed in certain types of text controls but not all (ej, lists, some  text, etc...)
• Personal Library for Custom controls - Lets say that you created an image using an asset from your site.  You should have a simple way to add this to the collection for use in other prototypes.
• Naming Exported PNGs - you can export mockups at any point to a PNG file, but you are never given an option to name the PNG file.

Other items to add in the future...

• Interactivity - add clickable links to navegate between mockups (or PNGs), perhaps add common effect features (slide, fade, lightbox)
• Integration with other services - Balsamiq will focus on creating plugins and small opps for the web office.  It would be great to be able to export mockups or PNGs to photo sharing services like Picasa or collaboration sites like Basecamp.

Conclusion - it Roqs!
I love this software.  Looking over the blog posts, there seems to be a healthy rate of updates to the software, so I can only expect the features to become richer over time.  You can see on their site that they already have a fairly large following.  They can happily add one more (and any one else that I can convince) to that list of happy users.

You can try it using their online trial (benefit of being AIR based) although it is time-limited.

Export Google Trends to Google Docs Script

Feeling inspired from the success of the script that I wrote to export from Google Analytics to Google Docs , I decided to see if I could reuse most of the code for other Google CSV exports.  My first sub-project was to tackle Google Trends.

I made the necessary front end changes to put in the new links and collect the correct export URLs.  Generally everything worked on the backend as well after only a few minor tweaks.  However, I kept receiving a lot of junk in the export and the content was not legible.

There seems to be some issue with the format of the CSV file being delivered by Google Trends.  It opens fine is a pure text editor like Notepad++ , but the browser recognized thousands of "invalid" characters in the export.  Basically, the CSV contains a null value in between every other valid character and it included rare form feed characters at the beginning and end of the file.  These invisible characters were blowing up the import to Google Docs so that while I would receive a "success" message for the upload, everything came out as gobbledegoop .

After multiple attempts to try to request a different file format, I finally decided to work a little string magic using RegEx.  I stripped out all of the junk characters before sending it up to Google Docs and voila! Everything works fine now.

Unfortunately, Google Trends only allows exports for keyword comparisons at the moment, but not for website data.  In the meantime though, for anyone doing SEO Keyword research, this could be of some valuable use to you.

Here are the links:
Download GM script directly
Greasemonkey Script Page

Enjoy.

Google Analytics Bug - The Sum of its Parts is More Than the Whole

Google Analytics is a great product, in general, but sometimes I come across things that are totally head-scratching.

Their relatively new feature for Advanced Segmentation will be very very useful once it reaches some semblance of reliability. As for now, though, I cannot rely on it.

The image does not lie.  I have 2 segments applied:

1. All Visits (basically, unfiltered)
2. True Non-Paid (all visits that are not CPC)

GA tells me that yesterday I had about 110 more conversions coming from my non-cpc traffic than all of my traffic combined?????

I know that the little red tag says "Beta", but we have come to expect very reliable behavior from a lot of other "beta" products from Google (eg., Gmail , Google Earth , Maps for the longest time, etc...).

This is something that needs to get fixed quickly.  The worst thing that GA can do is put doubt in the minds of its users about the accuracy of the data.

New Version of Analytics Export to Google Spreadsheet Script

Newly updated script (v0.3.6) for exporting from Google Analytics to Google Docs / Spreadsheets.

Some of the improvements:

• Exports now properly handle applied filters, changes to dates, segments and any other AJAX-style update made to the report (previously only went off of the query in the URL)
• Enables user to name the report
• Cleaner UI that blocks the screen during loading

New links:
Download GM script directly
Greasemonkey Script Page

Thanks to sallymander for the input!

Original post

Cheers.

Watching UCLA Hoops from Barcelona using Orb, FFMPEG, and Zune

I am a big UCLA Bruins basketball fan. I started following the Bruins when I was probably 11 or 12 years old. This was during the Trevor Wilson/Pooh Richardson era. My brother was attending UCLA and I was really starting to get more interested in sports of all kinds.  Even when I first attended UW for my first 2 quarters out of high school, I found myself rooting for the Bruins against the Huskies in Pac-10 play.  After I transfered to UCLA, I could see the games in person as a student as well as always catch them on local TV.

After graduating, I still followed the games and other events closely, which was quite easy in the LA area between local cable (Fox Sports West) and the LA Times . Once moving to Spain, however, it has been a much bigger challenge to catch games that are:

1. Broadcast regionally only in the USA
2. Scheduled in the evenings (California time .... 9 hours behind Spain)

The first 2 years I had used a Tivo  connected to a Slingbox  at my parents' house.  It worked well enough but the quality was not great and the hard drive of the Tivo finally died this summer.

I now have a setup that is working quite well for the 2008-2009 season.  I bought a Haupauge 1600 TV card for my parents' PC and installed Orb.  Orb is a fantastic service that principally turns any computer into a powerful Slingbox with a built in PVR.

It is very easy to use and runs in the background.  I schedule the recordings using the web interface here in Spain.

I just look up the channel and the time (I have the schedule setup as an RSS feed from Google Calendar to have it all on the same page) and I click record:

Once the game is scheduled, I just wait.  Orb records video in dvr-ms format, which uses MPEG-2 video.  Although, very high quality, MPEG-2 makes just way too big of files to download (average size of 1 game is 3.2GB!).  

I could stream the games directly using Orb, but the PC at my parents house is not very powerful and the Internet connections are just too slow and far away between Spain and CA to maintain a stable streaming connection for 2 hours.  Additionally, since I have 2 young children, it is rare that I ever get 2 whole hours to sit and watch something, let alone 2 times per week during the season.

So, generally I watch the games partially on my PC and partially on my Zune (when it is working ).  To make the dvr-ms file, small enough to download (700MB) and is in a format able to be viewed on the Zune (WMV), I run a script to transcode  the video using FFMPEG.  It runs nightly and checks if a newly recorded video exists and if has not already converted that video, it quietly makes a copy in wmv.

I wake up morning following the game and initiate the download via Orb:

After the multiple hour download, I can start watching it on the PC or sync the game to my Zune to watch later.

This has worked so far after a lot of trial and error, especially with the file conversion (tried DVRMSToolbox and MCEBuddy before writing my own script with ffmpeg) and syncing.  I am about 3/4 done watching the UCLA vs. USC game and will finish watching it later today.  

Do not tell me who won please!

Hopefully, Orb will eventually be able to record directly to other formats like wmv or H.264 and soon I plan on changing my Zune for a Nokia 5800 XpressMusic.

Go Bruins! 

Our First Snow in Spain

This is now our 3rd winter in Spain and it finally snowed. It had snowed the previous 3 years straight in the town where we live, but there was nothing since late 2005/early 2006. We woke up this morning to find the whole neighborhood blanketed in white.

• 
• 
• 
• 
• 
• 
• 

Zune Y2K8 Global Meltdown (1st Gen 30GB) (AKA Z2K)

UPDATE: My Zune now works.  The MSFT people "jumped onto the problem" and came up with the precise technical solution of telling us to wait and see if all is good come Jan 1st 2009.  So they worked really hard to tell us to do nothing and excuse their error.

They need to make amends and win back the group of users that the likely have lost due to this mistake.

Also why does the Zune have an internal calendar anyway?  What purpose does it serve? Perhaps for syncing....would have been nice if they gave a real explanation.

---

I am a rabid user of my Zune.  I bought it on woot last year for $99 and have greatly enjoyed it.  I use it to listen to about 20 regular podcasts, house my music collection and photos, and keep tons of videos on it (especially useful with the TV out to have movies to entertain my kids just in case when at other people's houses).

So this morning I was listening to the zune without problem as I went to work.  I even showed some xmas photos to some coworkers right after I arrived.  However, soon after 9 AM in Spain (where I live) I tried to listen to the Slate weekly Gabfest and the device rebooted but froze in the bootup screen.  I just sat there with the loading bar full but non responsive.  None of the normal reset options were working.

Quickly I found some recent forum posts in Google and saw that this was d-day around the world for the 1st Gen 30 GB zune.  Later generation zunes seem unaffected.

I was able to fix the problem by unplugging the battery.  To do so:

• Remove the clip covering the connector port
  
• Remove the 2 small Phillips screws
• Gently open the case (I used a credit card) starting from the bottom and moving to the top slowly
• Unclip the battery connector (small ribbon coming from black battery)
• Let it sit for 10 seconds
• Reconnect everything by following the above instructions in reverse order

It will be interesting to see how MSFT responds to this disaster.  I sure hope that they make things right for their loyal users.  Giving freely the firmware updates to all users was a very smart move in my opinion (unlike some others who charge for their updates ).  Now they need to continue in that direction and do the following:

1. Make a big public apology
2. Get a fix out ASAP via firmware update
3. Offer some good compensation (Free $ for music in their marketplace or decent discount on new device)

If they do not do this correctly:

• They will have a big PR problem - the last thing they need is to hurt the Zune brand, especially if they are looking to expand it to mobile (for other branding problems see Vista)
• They will undermine one of their differentiating factors against Apple.  Apple basically screws ignores its users and makes most pay for updates or ignores them completely (hello copy/paste in iTouch)
• They will lose a large group of potential repeat purchasers that feel alienated and have lost their trust in MSFT.

Some of the more active forum threads:
http://www.zuneboards.com/forums/gen-1/38112-stuck-load-restart-screen-help-2.html

http://www.zuneboards.com/forums/gen-1/38110-help-total-freeze-20.html

http://forums.zune.net/0/32/403986/ShowPost.aspx#403986