March 2009 Entries
Thursday, March 26, 2009 12:46 AM
One of the many tasks that my profession (UX designer) is the design mockups. I'm always looking for the perfect mockup tool, because I'm spending a lot of time on design them and I wanted to find a better tool. I tried many programs as Adobe Illustrator, Microsoft Visio and Microsoft PowerPoint, but all have the same problem: they aren't born to design mockups.
In the last days I tried two web applications that whose main focus is wireframes design: LovelyChart and Balsamiq.
Balsamiq

LovelyCharts

LovelyCharts is a RIA application that allows you to designs most of the charts related to the application development, like flowchart, sitempas and Network diagrams.
Balsamiq is a more specialized tool, made specifically to design mockups only. It has a rich library of elements that you can choose and se to design without create it. It can cover a large part of the needs in designing an application from a simple website to complex rich internet or desktop application. It has a special library for iphone too.
And, there is also an external website which collects a lot of users' designed "components" that can be reused in your own mockup: mockupstogo.com
Both applications use simple drag&drop paradigma, very clear content organization and architecture: the user can immediately recognize tool indexed by useful area.
For the use that I need , I prefer Balsamiq, for its clear tools layout and for multiple paths to find the right element (through a list for the novice users, and with more criptic but faster autocomplete search for power users). For example, I perfectly translated the mockup that I made in Illustrator for a Silverlight information retrival application I developed, in a very short time and simple way.
My application mockup made with LovelyChart

My application mockup design with Balsamiq

The original mockup made with Illustrator

Another element to consider is the different style of the two applications: Lovelychart elements style is like powerpoint, very simple and basic; Balsamiq uses an hand-drawn-like style for its elements. Even though this is not a functional difference, it is important for the look and feel of your presentation, because it give the sketch feeling.
To add to the big picture, Balsamiq can also be embedded in wiki and other web-collaboration tools. This allows to keep a centralized repositories of mockups.
Choosing the correct tool to realize your idea, in this case your mockup, can reduce the amount of time and let you to concentrate to your goal.
Technorati tags: UIX,data visualization,microsoft silverlight, mockup
Wednesday, March 11, 2009 12:27 PM
While walking around Berlin, I saw an interesting book, Data Flow , on a table in a bookstore in the NeuroTitan gallery. The book is showcase of a lot of interesting visualizations and is very inspirational.
Data visualization is becoming very important for the future application. With all the opportunities opened by RIA applications you have to think about different way to design your applications: you can use both the web interaction patterns and usual desktop application's ones. And the given that, the information architecture is different as well.
One important fact to remember is that if you have to represent complex information, you have to explain the meaning of the objects you use in your application to the end user, either in a direct way or making the "meaning" of the object very simple to discover. And once decided what a certain interface object does, use it in a consistent way throughout all the screens of the application.
The taxonomies have an important role to help the developers, because they use a clear paradigma to manage data and term meaning. You can apply them to your RIA application and declare it to the users so that they know how to use the same "vocabulary".
I'll speak about this and other RIA design techniques in May, at the all4Web conference, in Milano.
I think that I'll come on this topic one more time in the future.
.
Technorati tags: UIX, WPF, RIA, data visualization,Adobe flex,microsoft silverlight