Here are the slides of my talk at Adobe Dev Summit 2009 – Chennai & Hyderabad on Rapid Prototyping.

I was pleasantly surprised at the number of people who were interested in the science of Prototyping. The industry and the community has always regarded Prototyping as an optional phase in the idea-to-market process. While many other industries like mobile, automobile, mechanical have embraced Prototyping long ago, the software world still seem to be a bit reluctant in realizing the advantage and relevance of this science. Looks like more and more people are waking up …. The audience seem to be growing larger and larger with every talk I do on this subject and thats a good sign …

Dislaimer: Some slides in the above PPT have been re-used in multiple talks to people of USiD 2009, NID – Bangalore, IIT-Kanpur Tech Tour.

A big thank you to everyone who made it to our second meet-up of The Product Group, as well as to our sponsor, Balsamiq Studios! We all had a blast discussing Product People-oriented topics and enjoying Wonderful food.

Over the 2+ hours we discussed…

Product Positioning: from the ‘what’ to the ‘when’ and ‘why’

Event Planning Product: brainstorming solutions to the chicken-or-egg problem of a real-world startup product with the founder

Credibility Online: establishing, maintaining, and the importance of

The Product Group meet-ups are an opportunity for Product People (managers, strategies, marketers, etc.) to come together to meet, interact, and network in a roundtable setting. It’s awesome to meet fellow Product People in a laid-back, conversational gathering like this one and I am looking forward to seeing everyone, new and familiar, at our next meet-up …

Thursday, January 7th @ 7PM
@ Wonderful @ 172 8th Avenue (bet. 18th and 19th St)
NYC

If you would like to attend our next meet-up, RSVP today or visit our group webpage to learn about Holiday Drinks with the Product Group on December 17th at…

http://meetup.com/TheProductGroup

Enjoy!

Jeremy Horn
The Product Guy

P.S. If you or an organization you represent would be interested in sponsoring an upcoming gathering of The Product Group please contact me.

Add to Social Bookmarks:

DISCLAIMER
In exchange for a free copy of Balsamiq, I have agreed to do a review of the product. This is not a sponsored ad of the product but rather my honest opinion of what works well and what doesn’t.

As a developer, I often have to do UI mockups at various stages of development because it help crystallize the user experience and implementation. Plus it helps others who want to understand my application to see what the UI might look like and give feedback.

There are a variety of tools to help with the mockup process. On the low end, there’s pencil and paper, it’s cheap and quick but cumbersome to change and share online. On the high end, there are tools like Photoshop (proprietary and expensive) and GIMP (open source and free). While great, these high end tools have a steep learning curve and hence not ideal for me.

There are also a number of in-between tools available online on the web but somehow I never bothered to try them out, just seems like too much trouble. Balsamiq came to me as a good tool for mockups via recommendations from several other entrepreneurs and developers, so I decided to try it out.

Balsamiq is an Adobe AIR app, so it works cross platform, that’s a definite plus but if you have used AIR apps before, you also know that Adobe AIR platform is a memory hog, I hear there ’s a 2.0 version coming out in early 2010 that claims less memory consumption but we’ll see. I have seen Balsamiq use anywhere between 50MB to 100MB on my Windows XP. That’s not too shabby because other AIR apps use considerably more memory.

The installation process is trivial though you have to install Adobe AIR if you don’t already have it on your system. To learn about the product, online help is available here. To be honest, I tried to read through the help but it was dry and taking too long, so I simply jumped in after getting a basic understanding of the app layout (picture borrowed from the site).

Application Bar
Allows you to do operations on selected UI controls like cut, paste, copy, group etc, frankly I don’t use it much though it’s handy if you can’t remember the keyboard shortcuts.

UI Library
This is where I started to create a mockup. It contains a list of all the UI controls that are available to drag and drop on the mockup canvas. By default, all the UI controls are listed but you can restrict to one category by clicking on the category like Buttons, Layout, Media, Text, etc. I can also quickly find a UI control by searching the “Quick Add” area though that is not useful initially because I don’t know what UI controls are available and certainly don’t remember the names. It will be handy later after I used the product more.

Mockup Canvas
Self-explanatory, it’s where the actual mockup is done. For me doing web mockups, I started with the “Browser Window” control and dragged it to the canvas. For anyone familiar with Windows UI control, the basic operations using the mouse and keyboard apply in selecting and resizing a control. When a control is selected, there is an additional dialog box that gives me additional operations on the control, it’s faded in the background until I mouse over it. For the most part, inline editing (double click) is supported for controls that allows data entry. That’s sufficient for me to get started. Once I start experimenting more, I consult the online help page for further details. I should note that the app is designed to mimic pencil and paper mockups, it’s not meant for final or pretty UI design but for the purpose of creating mockups and getting feedback, it does a great job at it.

Parting Thoughts
Overall, I recommend the product if you can afford the $79. While that’s not cheap, it’s a good investment if you plan to use it for all your mockups. I should mention that sharing the mockups for feedback is kind of a pain. I would need to export the mockups as PNG files, upload them on some service like flickr, and send out emails or IMs to the URLs. Perhaps this is a service that the Balsamiq team can provide in the future. Also, this is a good tool for anyone (even non-techies) who wishes to do mockups because the learning curve is fairly easy.

Arjen Vrielink and I write a monthly series titled: Parallax. We both agree on a title for the post and on some other arbitrary restrictions to induce our creative process. For this post we agreed to create a design concept for a mobile Moodle application. The concept should include screen mockups. You can read Arjen’s post with the same title here. This month we are delighted to have two guest writers writing about the same topic. Marcel de Leeuwe (read his post here) and Job Bilsen (his post can be found here).

Mobile applications have taken off. This is largely due to the trailblazing work that Apple has done with the iPhone and the App Store. If you have been watching my Delicious feed, you will have noticed that I too have succumbed and will be part of the iPhone-toting crowd (I will write more about me losing my principles later).
Nearly every web service that I use has a mobile application. Examples are Last.fm, Flickr, WordPress, Dropbox, NY times, Paypal and more, the list is endless. Moodle, the web application that I use most often, does not have a mobile app yet. There have been a couple attempts at creating themes that display well on a mobile (such as here). These mobile themes usually try to deliver all of Moodle’s functionality, which often limits their phone specific interaction and their user friendliness. Other applications use JAVA applications that gives people access to specific Moodle functionality (examples here and here).

It would be great to have a true mobile Moodle application. Here are some initial thoughts for a design.

Audience
The audience for this Moodle application would mainly be students/participants. I want the functionality to focus on things that are easily delivered on a mobile platform. I don’t think grading and reporting interfaces lend themselves well to a smaller screen. The things that people like to do with a mobile device are usually: seeing what has happened/is happening, plan and communicate. This Moodle application will enable the users of a Moodle installation to do exactly those things.

Getting rid of the course paradigm
Moodle is extremely course centric. I have always thought that this has some great advantages, mainly that all the learning is very contextual. Students, however, often have to “multi-course” (doing multiple courses at the same time). A mobile application should make the most urgent or current events, actions and resources bubble to the top. This requires the application to get rid of the course paradigm and show a personal page per user.
People that have used Moodle for a while might know of the “My Moodle” page. This page also tried to pull up the most relevant information for a particular user, but would still display this information on a course by course basis.

This application will consist of four main screens. Each screen has its own icon at the bottom of the screen that stays available at all times. Each screen could of course lead to other screens that take you deeper into the Moodle installation.

1. Recent activity stream
Facebook and Twitter have really taught us the use of activity streams. These pages display short status messages about what is happening in reverse chronological order. Moodle has had an activity stream since its inception: the recent activity block. This block shows what has been happening in a particular course. Examples are forum posts, work being handed in or materials being added by the teacher.
This screen will work in a similar way, but will include all the courses a user is participating in. I would imagine that each update on the screen would include a date and a time, would link to an extended version of the update and would include a user image if the update concerns another user, or an activity icon if it concerns a particular activity. The newest updates would be at the top of the screen and the user would be able to scroll down to see older entries (very similar to Twitter). See below for an example:

Recent Activity

You would have to think about each Moodle module and decide what a status update would look like for that particular module. Some examples of events that could trigger a status update:

• A forum post is added to a course of which the user is a member.
• An activity becomes available (either because it was added or because it had certain time that it would become available, like the choice or assignment activity) or a deadline has passed.
• An entry is added to a database activity or a glossary that the user has access to.
• A topic or week has been made current by the teacher/facilitator.
• A message has been sent to the user.
• The user hands in work for an assignment, fills in a choice, starts a lesson, gets the results for a quiz or starts a SCORM object.
• A change is made to a wiki page that the user has access to.

These status updates could announce themselves on the home screen in a similar way to how the mobile platform shows that you have new email messages: by showing how many new updates are available.

2. Upcoming events
This screen is also an extension of existing Moodle functionality made course independent. Conceptually it is what you would see if you would scroll up on the recent activity screen. Upcoming events that can be displayed are:

• Anything that is in the user’s calendar.
• Activities that will become available or that have a deadline.
• Courses that will start and that the user is enrolled in.

This screen would look very similar to the “Recent Activity” screen as shown above.

3. Social: contacts, interests and messaging
A mobile device is used for communications and a mobile Moodle application should facilitate that. This screen is an alphabetical list of all the users that a student/participant shares a course with, combined with an alphabetical list of all the interests that a user has put in their profile and all the courses the user is enrolled in. See example:

Social

Selecting a user will take you their profile page. This page will focus on the ways that the user can be contacted. You can message the user from here, call (or Skype) them, send them an email and click on the links to their external websites (a blog, Twitter, Facebook, etc.). See this example:

Profile page

Selecting an interest or a course will apply a filter to the alphabetical list. It will now only show users that share this interest or this course. It might allow the user to contact all these users in one go (if this role has been given the permission for this capability).

4. Browsing courses, activities and resources
I really like a side scrolling drill down navigation (examples are the way that email works on the iPhone or the “Slider view” on Grazr). A mobile Moodle application should allow the user to navigate to activities and resources in their course by constantly drilling down. This can be done it two ways: course centric or activity-type centric. The application should probably support both.
The first screen shows a list of all the courses the user is participating in and below that a list of all the activity types that exist in Moodle.
Clicking on a course will make the previous screen slide to the left and display a new screen. The first option on this screen will be called “Course overview”. If you click on this you will see all the section/topic summaries, all the activities and resources and all the labels in their correct order (blocks are completely ignored in this mobile application). Below the course overview are links to the overview pages of each activity type. Clicking these will display all the instances of a particular activity or resource.

If you click on an individual activity or resource you will be shown that activity (again by making the screen slide to the left). What is shown here and what interactions are possible is dependent on the activity module. The minimum it would show is the title and the description. This would probably be the case for SCORM modules for example or for “upload a file” assignments. You would not implement a mobile SCORM player, nor will people likely have files for upload on their phone. The one activity that would benefit from being a bit richer would be the forum activity. It should be possible to follow and contribute to a forum discussion from the mobile Moodle application.

Technical considerations
The (start of a) functional design that I describe above will certainly have technical consequences (not to write obstacles). Below some of my first thoughts:

• What platform? The nice thing about web applications is that you only have to develop them for one single platform: the platform that the server is using. Of course it would be possible to create a mobile version of a Moodle site, but this would negate some of the great things that a native application can do. We are now in the unfortunate situation that we have multiple mobile development platforms. The two obvious choices for mobile development would be an iPhone app and an app for Android. But what about people who use a Blackberry, or a Symbian or Maemo phone? I have no knowledge of how easy it is to port an Android app to the iPhone, but I do know that multiple platforms will be a reality in the next couple of years. You better write portable code!
• Where does the code live? It is easy for Facebook to create an iPhone application. They run a single installation and can have server-side code and client-side code to make it all work. Moodle’s install base is completely decentralised. That means that Moodle installations will have to get some code that will allow a client to talk to it. In the client you will then need to be able to say what Moodle installation you want to connect to. This poses a couple of questions. Will a mobile Moodle app require a special server module? Will Moodle 2.0 expose enough of itself to an external API to make a client like I describe above possible? Should one client be able to plug into multiple Moodle installations at the same time? I am not a software architect, so I would not have any answers to these questions, but they will need to be resolved.
• Performance? Moodle’s data structure is course-centric and not user-centric. Moodle currently does not have internal functions that deliver the data in a format that the Moodle client can use. I think that the query to deliver a recent activity feed that is cross-course and has the perspective of a single user is very complex and will create a huge performance hit on the server. Again, I am not an architect, but I would imagine that this requires a special solution. Maybe more push and less pull? More database tables? Server-side pre-caching? Who knows? I certainly don’t!
• Roles/permissions/capabilities? Any new Moodle client that uses existing Moodle data (as opposed to new modules) needs to be very aware of any existing capabilities. All of these need to be checked before information can be shown to the user. I am sure this has further performance implications.
• Online/offline? A lot of mobile applications cache their information so that a user can continue to use the application even if an Internet connection is not available (e.g. the New York Times app). Even though it might be useful for a Moodle application too, I wouldn’t put any initial effort into solving that problem. Smartphones that have decent application support function well in a context where there is persistent mobile broadband. It is therefore okay for the first version of mobile Moodle application to assume that it is online.

A note on prototyping/mockups
I used the excellent Balsamiq to create the mockups that go with this post. This easy tool delivers quick static results, although it lacks a bit of precision that I would like to have added. Moodle has Balsamiq integrated into the Moodle Tracker, making it trivial for anybody to add a user interface mockup to any issue. There are other tools that could be used to do iPhone prototyping. This blog post gives a good overview.

Continuing the dialogue
I would really like an application like this (or something similar) to come into existence. I look forward to working with other people with a similar interest (bored developers? Google Summer of Code students?). Let’s make this happen! Any and all comments are welcome…

A big thank you to everyone who made it to our second meet-up of The Product Group, as well as to our sponsor, Balsamiq Studios! We all had a blast discussing Product People-oriented topics and enjoying Wonderful food.

Over the 2 hours we discussed…

Product Management Career: resources people use, how everyone go to where they are, and much more

Yahoo: the strategy of ‘all in one place,’ and its larger implications for the Internet and companies like Google and Microsoft

… and more …

View Larger Map

The Product Group meet-ups are an opportunity for Product People (managers, strategies, marketers, etc.) to come together to meet, interact, and network in a roundtable setting. It’s awesome to meet fellow Product People in a laid-back, conversational gathering like this one and I am looking forward to seeing everyone, new and familiar, at our next meet-up …

Thursday, Decmber 3th @ 7PM
@ Wonderful @ 172 8th Avenue (bet. 18th and 19th St)
NYC

If you would like to attend our next meet-up, RSVP today or visit our group webpage at…

http://meetup.com/TheProductGroup

Enjoy!

Jeremy Horn
The Product Guy

P.S. If you or an organization you represent would be interested in sponsoring an upcoming gathering of The Product Group please contact me.

Add to Social Bookmarks:

First of an occassional series of posts describing how we do development here at Mike CI. I’m sure what we do is by no means unique, but hopefully our experiences might resonate with your own project. Or at the very least give you an opportunity to point out how we can do things better!

As you’d expect for a new product start-up we are an Agile shop.  All prospective features we get are put in our Product Backlog in Agilo, which is our Scrum tool of choice. I’ll probably do another blog at some point on how we do Scrum. At the start of each sprint we take user stories from the backlog and figure out how we will implement them during the Sprint planning meeting.

The main goal of our last sprint was to add a new component – the Account Manager. Our first release of the Account Manager includes functionality to enable users to register an account, invite other users to join them, manage their profile and change their password. Simple stuff, but a core component to the platform.

For the Account Manager we wanted a cleaner look and feel than the Control Panel. Managing your account should be easy and simple to do, and the design should reflect that. We also knew we would be adding more features here so the design had to be able to cope with that, eventually users will be able to upgrade/downgrade subscriptions, view usage and change their payment methods.

Our initial step is to story board the flow on a whiteboard and then capture the flows in Balsamiq. We’re really pleased with Balsamiq as a prototyping tool. It is incredibly quick to pick up and produces great mock-ups that convey the flow and spirit of the story without restricting the design. We then review and debate these flows in the sprint planning session. As you’d expect with a team of IT geeks professionals these debates can get quite animated! We then re-factor the mock-ups and paste the images in to the relevant user story in Agilo. The flows and mock-ups are crucial as not only do they give us the spec for development but we work our test plans from them too.

Here is the first cut of the Manage Users Page from Balsamiq.

As this is a new application we decided to follow this up with some Photoshop mock-ups. We don’t always do this, but on this occasion as we weren’t constrained by the Control Panel look and feel we decided to add this step.

Initial Design for Account Manager

We created about six different designs, variations on a theme, but they really helped us visualise what we wanted and review and discuss the designs. This was a bit of a design smack-down, there could only be one winner!

While this was going on the developers had been implementing the functionality without the design. The application is a fairly typical Java Spring application – web pages are JSPs, we use SiteMesh and a bit of Ajax here and there. The developers coded from the back-end first giving all the screens a blank design to start with. All the key elements in the screens were given IDs which helped the skinning process later on. The most crucial stage is resolving the design on the webpages. This is another iterative cycle and often what looked good in Photoshop doesn’t necessarily work when implemented in CSS and HTML. In fact, I’d recommend not spending too long on the Photoshop design stage – the sooner you start working up the designs for real the better.

Once we’d settled on a final skin design it didn’t take long to skin the app, about a day or so, with a few impromptu reviews along the way.

Final version of Manage Users screen

This is the final version, I hope you like it. It ties in more to our website and blogs than the Control Panel and that does raise us some questions about whether or not we want to align the designs more. I’m really happy with the designs and I hope our users are too. We hope to release the initial version of the Account Manager soon – so watch this space!

After a few iterations we think we now have a pretty good process for rapidly developing Mike applications. Balsmiq has been great in enabling us to define an initial design. We can then, in parallel, work up the final designs (in Photoshop or HTML) while we progress the development. The final step is to skin the pages with the final designs. Constantly review along the way and be prepared to compromise, what looked great in Photoshop might not work for real.

I hope this has been useful, comments appreciated!

A big thank you to everyone who made it to the inaugural meet-up of The Product Group, as well as to our sponsor, Balsamiq Studios! We all had a blast discussing Product People-oriented topics and enjoying Wonderful food.

Over the 2 hours we discussed…

Product Development Cycle: tips, challenges, advice

Google Wave: the strategy behind it, Google, and online collaboration

Product Focus & Organization: tips for keeping your product on track and how to avoid the problems of the ‘heads down’ dilemma

The Product Group meet-ups are an opportunity for Product People (managers, strategies, marketers, etc.) to come together to meet, interact, and network in a roundtable setting. It’s awesome to meet fellow Product People in a laid-back, conversational gathering like this one and I am looking forward to seeing everyone, new and familiar, at our next meet-up …

Thursday, November 5th @ 7PM
@ Wonderful @ 172 8th Avenue (bet. 18th and 19th St)
NYC

If you would like to attend our next meet-up, RSVP today or visit our group webpage at…

http://meetup.com/TheProductGroup

Enjoy!

Jeremy Horn
The Product Guy

P.S. If you or an organization you represent would be interested in sponsoring an upcoming gathering of The Product Group please contact me.

Add to Social Bookmarks:

Balsamiq – I love it – the fonts and stuff can seem a bit cheesy … but I’ve take to this like a duck to water. Its much more useful than powerpoint, visio or other tools as its designed for wireframing.

Being built on Adobe Air means anyone can use it.

my phoney cellfone

It’s very quick to create a UE design and while I couldn’t find a template or mockup for cell phone / mobile phone. I now made my own.

You can get my balsamiq mock fone here

Given the need of my “customers” to have something visual I started looking at wireframing and rapid prototyping tools. I wanted to be able to give them a rough sketch to spur discussion and ideas without the sketching method taking too much time and being more trouble than it was worth.

Back in the 1990s, when wireframing was a niche activity, you were pretty much limited to Visio or Illustrator. Nowadays there are a huge number of alternatives

via Help, we’re drowning in wireframing apps!- 90 Percent of Everything.

Turns out I didn’t know what I was getting into as there’s a ton of tools available! Fortunately, I found a few posts trying to make sense of what’s available.

http://ciohappyhour.com/wireframing-marathon-starts/
http://www.dexodesign.com/2008/11/07/review-16-user-interface-prototyping-tools/
http://articles.sitepoint.com/article/tools-prototyping-wireframing
http://www.adaptivepath.com/blog/2009/09/16/rapid-prototyping-tools-revisited/

So far, one of the market leaders appears to be Balsamiq, notable for what they don’t include as much as what they do. It doesn’t hurt that they gave me a free license! I’ll be giving Balsamiq a try for the near future, though I’m hoping the web version is released soon as I think it would make collaboration much easier.

Heard about this via a software podcast over the weekend, definitely want to try it out.

# Create software mockups in minutes

# Collaborate with your team

# Focus on creating your product

via Balsamiq Studios.

Este programita nos permite crear nuestras interfaces, para la documentación de nuestras aplicaciones, de una forma muy simple y amigable.

Les recomiendo usar este o algún programa similar para “crear” las interfaces (solo sirve para la documentación de nuestros proyectos), dado que tener estar haciendolas en el Visual Studio o Front Page, etc. puede resultar bastante molesto y no les va a quedar para nada amigable a la vista.

Necesita tener instalado el Adobe Air, que lo pueden descargar desde aqui.

Fuente:http://www.balsamiq.com/products/mockups

Les dejo algunas capturas de maquetados de ejemplo:

Hello All,

If you like me work with application development, you know how difficult is sometimes to produce screen mockups to show to your customers. I’ve used to do that using pencil and paper but today I’ve run into Balsamiq Mockups which is a application developed in Flash specially for design screen mockups. It works on Windows, Linux and Mac OS.

You can take a look how easy is to produce mockups watching the video below:

Balsamiq has a lot of components available:  Labels, Textbox, Combos, Buttons, List, etc.

Another interesting feature is you can export the screen mockup as PNG.

Balsamiq is not free. You can try it online, but I think it’s tool which values each cent.

See ya!

As Product Managers we must often spend much time designing web or application interfaces for our products.  Speaking personally, I never saw these tasks as either tedious or annoying – I have always loved the art of creation, and in fact spent quite a bit of time in my past designing board and card games.  So for me the idea of designing a web interface was always well received!  However the chosen medium by which these interfaces were to be mocked up was always in question…

For years I’d been searching for good mock-up tools.  I went through just about every iteration of the mainstream apps – PowerPoint, Keynote, Publisher, Pages, etc.  I also tried dozens of smaller tools – open-source, freeware, shareware, and/or commercial.  Quite honestly, for a while I favored Microsoft Publisher above all others, though Apple Keynote was a close second.  However, when you start to use any of those apps for mock-up work on a regular basis you quickly realize that’s just not what they’re meant for.  The biggest problem with any of them is that they don’t allow for rapid alterations to designs as new ideas pop up or requirements change – considering the Agile world we live in these tools have proved to be…  not so Agile.

Then one day I saw someone Twitter about a tool called Balsamiq, wondering if anyone had tried and liked using it for mock-up creation.  I had never heard of it so I was very eager to check it out – 20 minutes later I was hooked on this little known tool!   I couldn’t believe I had never heard of it before, since it was 95% of what I *thought* (at that time) I needed.

Balsamiq is indeed a great tool.  It take a very stylistic approach to mock-up creation – every widget that you place on the canvas appears in a pencil-sketch type look and feel, which for a mock-up interface is great!  This way when you build and then demonstrate an interface to a group of folks there is no mistaking that it’s just a sample.  It also gets the point across very well that pretty much any part of the mock-up is still subject to change.  You can add just about any type of “widget” you’d expect any current-day interface to have – everything from standard buttons and drop-downs to newer widgets like ribbons and cover-flow.  There are also some basic customization capabilities for many of the widgets, such as selecting which entry in a list should be highlighted or how far a scroll bar should appear to have been scrolled.  I thought I was in heaven!

But then…  soon after, I discovered another independent developer’s product and suddenly heaven didn’t seem quite as high up as I thought it was.  Flairbuilder is by far the best tool I’ve found for interface mock-ups and more importantly “GUI prototyping”!  I could not recommend it higher for anyone who needs to design, then FEEL, and then re-design as necessary a new web or application interface!

Before I talk more about Flairbuilder let me say I’ve researched many other tools around the same time I found  Balsamiq and Flairbuilder – Pencil, iPlotz, Mockupscreens, Axure, Gliffy, and several others.  Of course each of these tools have their pros and cons, but when I consider what I was so quickly able to accomplish with Flairbuilder the winner was clear!

To be fair, Flairbuilder is not without its problems – since Cristian Pascu is essentially a one-man-show the product is not yet at the maturity level of something like Axure.  But Flairbuilder does come at a fraction of the cost and with key features and an overall work-flow that I find favorable.  Additionally many of the bugs I’ve discovered have been quickly verified by Cristian and then resolved in a new release shortly thereafter.  More impressive is that I’ve made no less than five individual feature requests of varying complexity – three of them were implemented SAME DAY.  The others were implemented in short order.  I’ve had many discussions with Cristian to date – his excitement and dedication towards his product are clear and respectable, and he has many great things on the horizon!

What’s different about Flairbuilder from Balsamiq and some of the other tools?  Most notably Flairbuilder is not just a mock-up or wireframe tool, but rather a full GUI prototyping tool.  Every widget that you add to the canvas can be customized not just in cosmetic appearance, but in behavior as well.  For example, if you have a button on the screen you can make it “clickable”, causing any number of possible events to occur – open a pop-up window, show a floating pane, display a simple informational or error message, switch to a new page, add an item to a list, ask a conditional question, change the layout of the screen entirely, or countless other possible actions.  The same is true of selecting an item from a drop-down or double-clicking an entry in a data table.  Just about any action you can think of is easily re-creatable within this tool, and it takes no programming experience to accomplish.

Once a project is complete there are several options on how you can present the prototype to an audience.  Of course you can open the program locally and show how everything works using the application’s built-in “preview” mode, but you can also use an online viewer which allows anyone, anywhere to see the prototype from within a standard web browser.  An HTML export feature is also coming soon which will make it even more accessible.

Flairbuilder comes at a price of just over $100, and if you’re a Product Manager or anyone else who has a need to design new interfaces for just about any type of project it’s worth every penny!  It has quickly become my favorite software tool, and I look forward to continuing to work with Cristian in an effort to manipulate his product’s strategic direction to serve my own devious plans!!

As  I was writing the title for this post, I ran through many iterations before settling on this one soley for the purpose of being more targeted towards search terms.  Here’s some of the runner ups:

• Mockups in Visio and PowerPoint Suck!
• Say goodbye to Visio and PowerPoint mockups
• Mockups in Visio and PowerPoint….Never!

It should be clear now just how much I hate Visio and PowerPoint for doing mockups.  Neither of these tools were built for this purpose, so it’s no surprise that the process is awkward and usually time consuming.  Thankfully, I came across a far superior tool a while back in a DDD post by Casey Charlton.

The tool is called Balsamiq and it’s pretty amazing.  It’s whole reason for existence is for doing mockups – not presentations,  flow charts or anything else.  It runs on Adobe Air, so the installation can take a while if you don’t have this runtime on your machine already, but updates are free for life and come down pretty quick.

Balsamiq comes in 2 flavors, the desktop edition and the web edition, as well as plug-ins to some popular CMS and Project software packages.  The license is cheap, only $79 for a single license and cheaper for multiple seats.  The project file is saved in an XML format, so it can be checked into source control and easily shared.  It has a ton of built-in controls to allow you to mock everything from Maps to Browser Windows to Grids to Buttons and just about any other UI element you can think of.  The only downside is that you can’t make reusable components, which means a simple change to something like a header could result in hand-editing every mockup file you created.

I won’t go into too much detail here.  If this sounds good to you and you want to learn more, watch the quick demo video and then take a test drive with the browser edition (no setup required).

The practice of wireframing is common to most web production professionals. Oddly, there’s no clear market leader or category-defining product in this space; even solutions such as Adobe’s Creative Suite (s adbe) lack dedicated wireframing or rapid prototyping tools.

There are, however, a number of useful smaller options. Late last year,  Mike Gunderloy evaluated the popular Balsamiq Mockups and its deliberately sketchy wireframes. I recently discovered FlairBuilder, another up-and-coming wireframing tool which, like Balsamiq, is based on the Adobe AIR platform.

While lacking Balsamiq’s cutesy, sketchy style, FlairBuilder has a number of interesting features useful for wireframing:

• A tabbed interface, enabling users to work on multiple projects and pages, along with tools to create “master” templates for a number of pages within a particular project.
• A pretty comprehensive gallery of components, segmented into palettes, along with a nifty search-as-you-type tool to help locate individual components.
• Integration with web applications, including Google Maps (s goog), Vimeo and YouTube, allows live content from third-party services to be incorporated into a wireframe layout.
• An online viewer allows non-FlairBuilder users to open and view projects created within the app, which is great for working with clients.

At $99, FlairBuilder is inexpensive enough for most web design or development professionals to take a chance on — in fact, it’s only marginally more expensive than Balsamiq.

Both Balsamiq and Flairbuilder do a reasonable job at a low cost. Personally, I use a combination of MindNode for high-level site structure and OmniGraffle-based wireframing templates to put together information architectures. But I can’t help thinking there’s great potential in an application or service that’s more integrated into the workflow of other common design tools such as Dreamweaver, Illustrator and Photoshop, or that’s oriented around web-based collaboration like Google Docs.

Incidentally, there’s a great unsung blog called Wireframes that’s worth adding to your feed reader.

What wireframing tools, methodologies and practices do you use?

I don’t have a tablet PC or a drawing board (electronic or not). I guess I could create wireframes on basic  computer tools like Pencil even using the highlight tools on Microsoft PowerPoint, for instance.

But one tool I discovered recently makes it much easier to come up with mockups very quickly: Balsamiq Mockups. The tools has a small cost ($79 at the time of this posting) but it is worth it.

Features

• Drag and drop interface
• Hand-drawn look and feel (makes the mockups look like just that: mockups, allowing you to communicate your ideas with enough freedom for creativity in the actual development process and without raising too much expectation from the developers since what you are offering is nothing more than a *mockup*)
• Several standard built-in navigation and user interface elements ready to be customized
• Ability to export as PNG
• Ability to create new mockups from an existing one
• Repository of icons and images

Features that would be nice to have (at least some I can think of off the top of my head)

• Native “print” functionality
• Custom lines and hands-free drawing. Right now you’re limited to the icons and shapes available in the tool’s repository.
• Collaborative editing possibility – either by sync’ing your local files in real time over the Internet or by providing an online-only version (I’d rather have the first option in case I don’t have internet connection for some reason).
• Sharing capabilities (to services like those covered on ShareThis and AddThis.
• A “website” mentality type of mockup. With “real-time” navigation, allowing a person to navigate through the (mockup) website and have that experience from a user perspective. This would need a mockup to have multiple pages linked to a main index. Similar to FlairBuilder and  Napkin Look & Feel’s approach.
• As pointed our by StuffThatHappens, a built-in storyboarding feature (storyboarding templates?) would be an asset as well.

Competition

The only similar tool I have found is iPlotz (I do not have this software and can’t make a comparison here) but it does seem to offer an online collaborative version of the tool (a bit overprices if you ask me). Their desktop app costs $75 (as I post this entry). Might also be worth checking out. Here is a post comparing both tools. Beware: it has been written by a competitor, FlairBuilder).

Visual Studio 2008

I remember looking for a way to start a single project in a solution having multiple projects. Now, the Web Developer Tips team has put a nice post about it.

Enterprise Library

David Hayden has a new screencast on Data Access Application Block.

Expression

Somasegar has a nice post on SketchFlow – a add on for Expression Blend 3. It seems to be a great tool for providing prototypes in the early stages of the project. You might also take a look at Balsamiq for creating great UI mockups in no time.

Entity Framework

Moses wrote a few days ago about his wish of having something like DataLoadOptions for ObjectContext. Stuart Little wrote today a very interesting post with a few extensions to ObjectQuery.Include to make it strongly typed. I think that it could be something that Moses can use for his approach.

Alex James continues his series of tips showing how we can use AttachTo() in combination with projections and avoid loading unnecessary properties.

ASP.NET

Scott Galloway has a nice post on how to build a ASP.NET control to combine and compress CSS files, reducing the number of requests and the traffic between the client and the server.

If you are looking for a DataReader – JSON converter, go check Rick Strahl post!

DDD

Yves continues his saga showing the importance of assertions for controlling the effects of commands.

NHibernate

Peter Bromberg has a nice overview on Fluent NHibernate automapping.

Luis Abreu takes a look to NHibernate Validator here and here while analyzing  S#arp framework.

ASP.NET MVC

After Oxite and Kobe, there is a lot of debate on the framework itself.

Karl Seguin asks whether ASP.NET MVC is half-baked or not. Jeffrey Palermo has a nice list of cases when ASP.NET MVC should NOT be used. Jeremy Miller has its own list of pros and cons for using ASP.NET MVC. Rob Conery has an excellent post on why we should learn MVC.

Scott Allen has a very interesting post on model binders.

C#

CoNatural continues the series on asynchronous programming showing how to search asynchronously with ASP.NET MVC and JQuery.

Design patterns

Greg and Ayende continue their debate on the repository pattern. Greg says that having a repository makes an explicit boundary around our domain. By simply having a contract of those boundaries we can adhere to the “onion architecture”. Ayende replies to Greg about the lack of explicit boundaries in cases such as transparent lazy loading. He also presents his concerns about the need of abstracting away the persistence without having a clear requirement in this direction.

I think that both of them have interpreted each other statements without having the other’s complete context and as Ayende says in his post, not having the complete context invalidates the entire argument.

Sharp

Luis Abreu talks about repositories in S#arp.

Architecture

Karl Seguin starts a very interesting series of posts showing how we can roll our own validation framework.

Ayende has a nice post about the differences between infrastructure and architecture.

Several people have asked me what tool I used to create the screen shots used in the YAGNI vs Usability post.

The tool is called Balsamiq. And if you are looking for a simple, quick, easy way to create great looking screen mockups, it is a tool I highly recommend.

Dead easy to use

One of the things I like most about the tool is how easy it is to use.

With its easy drag-and-drop interface, designers could learn a lot from just studying how Balsamiq was built and designed.

Good plugin community

And because Balsamiq is so open and configurable, there is a decent plugin community for Outlook, Facebook, and iPhone apps.

Making mock-ups is just fun

For no other reason, I like this tool because it’s funky, fun, and actually makes the creation of paper based looking mock-ups really cool and fun.

So if you are in the market for a tool like this, check out Balsamiq. It is well work the low price of $79.

We started our project last Friday with some requirements engineering. Unlike the document required in CS192, our document wasn’t as detailed but still outlined the tasks, deliverables and wireframes. A new thing that we learned was about a wireframing software introduced to us during our usability training: http://www.balsamiq.com/.

Sample Balsamiq Mock-up

Balsamiq is every lazy layout artist’s dream software, it is even more straightforward and easy to use than Netbeans’ drag-and-drop UI plugin, although it doesn’t generate java code. It has a lot of components to choose from such as the usual textboxes, buttons and menus to the bizarre such as the iphone and sticky notes. Balsamiq boasts a very intuitive and drag-and-drop interface perfect for creating mock-ups fast. Try it now!

Yesterday, we started coding our project. We will use the following technologies: Javascript, XML, CSS, HTML and the Globe Labs API. We were able to make the mock-ups in XML but we’re still stuck in creating functions in Javascript that talk to the Globe Labs API. We have tried a lot of methods – HTTP POST, Javascript+SOAPClient, XMLHttpRequest, even Javascript+PHP+NuSOAP – but nothing seems to work. We seem to have a problem mixing the Globe Labs API, Javascript and XML. If anyone out there has any idea, please contact me (liv.dag@gmail.com) or allen (jqsantos@upacm.net). Thanks!

Liv Dag

An important component of my role as UX Designer and Project Manager at Enzyme IT involves prototyping application concepts for clients, as well as in-house product ideas. Over the past year we’ve reviewed multiple products, and have gravitated toward two which offer a brilliant feature set at a very affordable price: Axure RP Pro and Balsamiq.

Axure RP Pro

• Price: USD$589 – Single User License (Discounted to $539 for 5+ Licenses)
• OS Compatability: Windows 2000, XP, 2003 Server or Vista

Balsamiq Mockups

• Price: USD$79 for desktop
• OS Compatability: Uses Flash, so cross-platform compatible – Windows, Mac, Linux

Having tried and tested both applications on different project requirements, I can say that each has application certainly has its place.

For instance, Axure allows the tagging of elements with functional specifications, which is excellent when a wireframe itself will not provide adequate information to allow a programmer to code the feature. Having said that, a programmer will normally prefer to receive specifications whether they be tagged to an element or written in a wiki, rather than code based on an interpretation of a wireframe.

Balsamiq on the other hand allows the wireframing of user interfaces, with notes that can be input on the wireframe as well. If you have a detailed wireframe with lots of notes, things start to look messy. Hence I prefer to use Balsamiq for UI designs which do not require extensive notes or specifications which would compete with the UI elements for space.

I could go on for pages about what each product does or does not accomplish, but in summary and as a point of reference for those of you who undertake UI/UX and prototyping tasks:

Use Axure when you’re planning a medium to large scale application which requires documentation (Axure exports all tagged specifications into a neatly laid out document – a big time saver!), functional specifications and HTML prototype (Axure will generate an HTML prototype for you – another time saver, however if you take a look at the code you’ll realise that there is no way it could be used as a basis for the actual production application. Use the prototype to display UX concepts and provide clients with a realistic and tangible model for feedback.)

Use Balsamiq when you’re wanting to quickly wireframe a feature or story, using elements which are tailored toward web applications. You can export your designs in image format, and collaborate with colleagues on designs even if they do not have Balsamiq Mockups installed (they can use the free web version).

Personally, I use Axure more regularly than Balsamiq because the majority of our client projects are medium to large scale, and require enough information to accurately quote a project’s cost and duration, as well as provide our programmers with the specifications they need to start coding. Both solutions are very easy to use and become familiar with, and having now written this post I’m quite sure that either could be utilised effectively for any project with a little forethought. Balsamiq mockups could very easily be coupled with specifications in a wiki. In fact, I’ll try that on the next iteration for a project that we’re working on here, and see how it runs……. sounds nice and agile.

One of my friends introduced me to Grails last week and I have been hooked ever since. I was really excited to see an application up and running in less than the time you you take to say ‘Da Vinci’. No more dabbling with frameworks like struts/spring/hibernate/ejbs. No more putting in all the plumbing just to get some water out of the well.  It is as simple as creating a domain class and running a couple of command lines on the console and voila! you have a full featured CRUD application staring at your face. Pretty nice eh!  

I intend to develop an application to help me maintain an estimate repository for my projects. Once it is complete, I will throw it open to the community with a GPL license. 

I created the mockups for this application with the tool (Balsamiq Mockups) graciously donated by Balsamiq. It is a beautiful tool and I recommend it to anyone serious about creating UI mockups. 

I installed NetBeans 6.5 on my laptop that comes with builtin grails support. I have been a long time eclipse user but stayed away from it this time because grails plugin for eclipse is not mature yet and several problems have been reported with it.  Netbeans, on the other hand, seems to work just fine.

I created my domain classes and paused to admire the results. Looking good so far. I guess I can have the application ready by evening. Moving on to the front end. I chose ExtJS as my AJAX framework for its sheer good looks and JSON to transfer data between the controller and view because it seems to me the the only natural to represent data.

Grails provides a rendering engine that can render a model in XML and JSON format. I use

render reqDetail as JSON

and go to the gsp page to see a nice rendition of my domain class. But my browser decides to play the spoil sport and prompts me to download reqDetail file instead of showing pretty formatted data. Anyway, saving grace is that the downloaded file has correct data.

Next time.. Wire ExtJS treeview to render my domain..