Review of WireframeSketcher

I’m a big Eclipse supporter.  It is the de facto leading Java development environment, though impartial statistics are difficult to find.  If you are an Eclipse fan and want a well-integrated plugin to create screen mockups, look no farther than WireframeSketcher.

WireframeSketcher has a Sketching perspective and adds over 30 UI “components” in its palette:

Eclipse sketching perspective

You basically have two primary parts: a Screen and a Storyboard.  A screen is as shown above.  A storyboard is a sequence of screens:

Storyboard sequence of screens

You can then run a Presentation of your sequence in full-screen mode:

Presentation

You can also save a screen to the clipboard or as a .png file.

Pros

• Great integration with Eclipse.
• Lots of UI parts to work with.
• Storyboard and image output.
• Very fast to create a mockup.

Cons

• Not much documentation (though Peter is working on more).

Net: If you need to create mockups and you use Eclipse, this is a no brainer – get WireframeSketcher!

Review of MockupScreens v4

Summary:

Note: This is a review of the latest release – version 4.  It is greatly improved from my previous review of the 3.17 release.

MockupScreens, as the name implies, helps you quickly create mockups of screens.  MockupScreens also lets you combine screens into scenarios and navigate page to page.  And you can create HTML and PDF files to document the scenarios.  It does not however let you actually run the mock app.  For that, you should look at Denim or Prototype Composer.

Bottom line: If you need to put together some use case scenario screens quickly, this is a good choice.

Pros:

• Very fast creation of mockup screens.
• Lightweight.
• Supports scenarios.
• Publishes to HTML and PDF.
• Can set up “jumps” between screens based on user slideshow actions.

Cons:

• Cannot run the scenario (though you can do a slideshow).

Detailed review

The version (4-beta) of MockupScreens reviewed here runs as a Windows application.

MockupScreens installs very quickly.  When run, a window opens that allows you to create one or more screens within a scenario:

You add screens within the open scenario (and change the ordering) using drag and drop (DnD).

Creating a mockup

To edit a screen, you select it in the Screens panel on the right.  This displays the screen in the main editor area in the middle.  You then select a Widget from the lefthand palette and then place it within your screen.

Advanced properties

You can turn a component into a hyperlink to another screen during a slideshow by selecting the screen on the Jump to screen property on the Advanced tab for the component (at the bottom when the component is selected).

You can also enter commentary for a component.  This causes a yellow “note” to be attached to the component.  These notes are optionally included in HTML and PDF output as well as slideshows.  You can change the settings via Tools/Options…

Output

Finally, you can create an HTML or PDF document for a scenario via the Tools/Export to commands:

Review of MockupScreens

Summary:

MockupScreens, as the name implies, is intended to help you quickly create mockups of screens.  It is a bit clumsy to work with, e.g. the UI navigation is not standard nor intuitive.  MockupScreens also lets you combine screens into scenarios and navigate page to page.  And you can create HTML pages to document the scenarios.  It does not however let you actually run the mock app.  For that, you should look at Denim or Prototype Composer.

Bottom line: If you need to put together some screens quickly, this is a choice, but there are others that are arguably better.

Pros:

• Very fast creation of mockup screens.
• Lightweight.
• Supports scenarios.
• Publishes to HTML pages.

Cons:

• Some irritating UI drawbacks, like no undo and no alignment of multiple components.
• A bit difficult to use.

Detailed review

The version (3.1.7) of MockupScreens reviewed here runs as a Windows application.

MockupScreens installs very quickly.  When run, a window opens that allows you to create one or more scenarios within a project:

You add scenarios and screens within scenarios (and change the ordering) with the menus and menubar buttons.

Creating a mockup

To edit a screen, you double click on it.  This opens the screen editor:

You create a layout by selecting components from the list on the lefthand side.

Marks

One interesting feature of MockupScreens is that you can flag areas of the screen with comments (see “?”):

You can also put numbers within the screen, with associated events to navigate to another screen during a slideshow of the scenario (via the “Jump to screen” attribute of the mark). This is done much more elegantly in other tools such as Denim.

Output

Finally, you can create an HTML document for a scenario via the Scenario/Export scenario to HTML command:

Storyboards, mockups, prototypes – oh my!

I have been on a mission of late.  I have used Denim for a few years, but have always longed for a better way of storyboarding UIs for requirements, mockups, and such. This post will start toward sharing my findings so far.

First of all, why did I name this post as I did?  Well, it turns out that this genre of tooling seems to fall into multiple variants, depending on the tool’s focus.  I will review tools in all these categories and you can decide the best fit for your situation (and pocketbook).

So, to begin – here’s the list I have looked at in no particular order.  Additions are welcome.

• Denim – review
• Visio stencils – review
• Balsamic Mockups – review
• Serena Prototype Composer – review
• MockupScreens – review
  • Update! Review of MockupScreens v4 beta (much improved)
• Axure – review

I will create separate posts for each and reference them from here.

Review of Balsamiq Mockups

Summary:

Balsamic Mockups, as the name implies, is very good at quickly creating mockups of screens.  It does not however let you actually run the mock app or generate scenario documentation.  For that, you should look at Denim or Prototype Composer.

Bottom line: If you need to put together some screens quickly and be able to update them as comments are made, this is the program for you!

Pros:

• Very fast creation of mockup screens.
• Very easy to use.
• Lightweight.
• Nice handling of imported images.
• Easy to share mockups (e.g. http://www.mockupstogo.net/).

Cons:

• No way to interactively “run” the mockups.
• No way to create an OpenOffice document or PDF from a scenario or set of screens (though you can save the screens as artwork files and import into a document).

Detailed review

The version (1.5.23) of Balsamic Mockups reviewed here runs as a Windows application within Adobe Air.  It also has versions for a browser and wiki among others.

Balsamic Mockups for Desktop installs very quickly.  When run, a window opens that allows you to create one or more mockups of screens:

Tabs for each mockup show at the bottom.  I have two as shown above, one browser and one client.  The mockups are stored as bmml files.  These are XML documents, such as this:

<mockup …>
<controls>
<control controlID=”0″ controlTypeID=…/>
</controls>
</mockup>

Other than for reuse within Mockups (or if you want to create an XML transformation to create a document – anyone have this?), you don’t need to worry about these files.

Creating a mockup

It takes very little time to create a mockup of your screens.  One way I judge tools is how much you get stuck and how much you can do with little or no help. Mockups passes this test easily.  Lets walk through some steps (writing this takes a lot longer than actually doing it).

• Create a new Mockup – Mockup/New blank mockup
• In the Quick Add field, type “win”. You will now see Browser Window and Dialog / Window.  Pick either one you’d like.
• You now have a window.  Double click it to set its name.

Notice: when a component is selected, its associated attributes window shows as a gray-ish panel to the side.  When you roll over it, it darkens and you can edit the component’s properties.  Also notice that tool tips help you along the way – very nice!

• Select some properties to change on the window, such as adding a scrollbar and a minimize button.
• Use your Quick Add to add a tabbed pane.  Double click it to change the tab names to ones of your choice.  Change the properties to select the second tab and place the tabs on the bottom.  Your mockup should look similar to this now:

• Add a comment as described above.
• Choose Mockup/Export snapshot to clipboard.
• Paste into a document:

You get the idea.  It is very easy to create and share screen mockups.

Tip

You can find mockups that others have created to reuse them online.  Choose /Help/Download More Controls and choose which of the dozens of screens that others have built (and maybe contribute your own!).

Toward writing less code, part I

Much of the agile tooling efforts in recent months really come down to simpler ways to create functionality with less code. I recently wrote a justification for using Groovy, which is in my opinion a no-brainer for Java shops. I’m sharing it here, in the hope that others may benefit.

Groovy justification

(This is an OpenOffice document)

Tired of typical web editing?

Have I got a Firefox add-on for you! You can use your favorite editor any time you’re presented with a (typically small, hard to use) edit box on a web page. Just install It’s All Text! in Firefox and a small edit button will appear whenever your cursor is within the edit box.

Before you use the button, you need to indicate your editor. To do this, right click on the edit button and select Preferences…

In the resulting dialog, choose Browse and select your browser program of choice. In my case, I use Notepad++ (highly recommended).

That’s it! We’re all set to use the plugin. When you see the edit button, merely select it and the text (if any) in the edit box will be sent to your editor!

Enter your text as desired.

and save it in your editor as often as you like (in this case via Ctrl-S). The edit box in the browser will turn yellow temporarily to tell you the changes have been made!

That’s it! Much nicer than these teeny-tiny edit boxes! Enjoy.

Firefox: Dictionary Tooltip

Dictionary Tooltip is a Firefox add-on that makes it easy to look up words on a web page in the Firefox browser. Once installed, double clicking on a word in your browser will make a small “book” icon appear just below the word.

If you position your cursor over this icon, a dictionary lookup on the selected word will be attempted and displayed in a resulting dialog.

Note: to dismiss the dialog, just click outside the dialog or press Esc.

In this case, no definition was found, so alternatives are offered. Lets try Wikipedia in this case.

Or we could choose computing dictionary.

Most words will be found immediately…and it is smart enough to find variants of words.

And you can search again from within the dialog just by double clicking!

Acronyms work…

…with an additional step…

…to get your final result.

As an added bonus, you can choose the reference to use.

Enjoy!

Note: If you use Hyperwords in combination with Dictionary Tooltip, you will want to configure Hyperwords so that its menu comes up with select + F2. Otherwise, you end up with both coming up on double click.

Technorati Tags: firefox, add-on, dictionary

Powered by ScribeFire.

Launchy

Launchy is a very cool Windows utility. What it does for you is elegant in its simplicity and yet powerful enough to replace many of your day-to-day actions. Once you’ve installed Launchy, you activate it by Alt-Space (assuming default “hot” key).

Lets look at some examples of its features:

• Go to a URL

Start typing http or www and Launchy will change its icon to a world (for the Internet).

Finish typing your URL, such as www.fairtax.org. When you hit Enter, your browser will display the page.

• Search Google

Start typing goo and press tab and enter your search terms, such as darfur.

When you press Enter, your search results will appear in your browser.

• Check the weather

Start typing wea, press tab once Weather is displayed and enter a location, such as Apex NC.

When you press Enter, a weather forecast for that location will appear in your browser.

• Run an application on your desktop or go to a bookmark

Start typing some string, e.g. calc and pause. Launchy will present a set of possible matches to what you want to do!

Your results will vary of course, but on my system Launchy found the Windows calculator, the OpenOffice Calc spreadsheet application, and a couple of Firefox bookmarks that contain “calc” somewhere in them. Nice.

• Look up a definition of a word

Start typing dict, hit tab, and enter a word, such as throes.

 

 Press Enter and the definition opens in your browser.

• Look up a movie on Netflix

Start typing netf, hit tab, and enter a movie title, such as Life as a House.

Hit Enter and the search results appear in your browser.

• Shop on Amazon

Got a book title that was mentioned on a web page? You could use HyperWords or stick with Launchy. Start typing ama, hit tab when Amazon shows up, and enter what you’re looking for, such as fairtax boortz.

Hit Enter and the result is opened in your browser.

• Look something up on Wikipedia

Start typing wik and press tab when Wikipedia shows up, then enter your search string such as fairtax.

Press Enter and your results are again presented in your browser.

To do some administrative and configuration actions, you bring up Launchy (Alt-Space) and press the right mouse button (assuming a righthanded mouse configuration). A menu will appear.

The skin I use is the default – I tried some others, but I liked the default the best. One nice feature you can access through the menu is the Directories option.

This allows you to specify what you want Launchy to find on your system. You can include music, pictures, or whatever else you typically want to access. When you use Launchy to find files and directories, you just start typing as you would on Windows: c: then hit tab and the slash appears for you. Continue typing until you see what you want, e.g. c:\mag in my case.

When you find the directory location you want, hit Enter and an explorer window will open.

You can read more about Launchy in the readme PDF that’s installed with it.

---

That’s it for our look at Launchy. Now, it’s your turn… I know there are people out there using Launchy. What cool things have you tried that I haven’t listed? Help me out here!