From time to time I come to think of how important it is with a user-friendly and with a professional Graphical User Interface (GUI). Of course, this is something that every developer sooner or later finds out themselves. What matters and what clients usually see is the GUI that the technical solutions are wrapped in.
In this article I will try to discuss my tools I use to create a GUI that can be competitive. I will do it by using the Ribbon UI, aka Office UI, and see which tools that is necessary in order to create the UI. I will not cover any guidelines to create the UI only which tools that are necessary in order to build the GUI.
Ever since Microsoft released its Office UI they have had a strong desire to protect the intellectual property (ip) of it. From what I know it appears to be the first time Microsoft actually has taken this action. To protect their ip Microsoft request every vendor, that wish to implement the Ribbon UI in their software solutions, to apply for a license in order to use the UI. It should be noted that it exist some exceptions from this request.
To apply for a license to use the Office UI is rather easy and is also free. To find out more about it please see the following; Office UI Licensing. What is notable is that if we have got a license to use Office UI 2007 we need to update the license to also include the Office UI 2010.
Due to my lack of knowledge about the law I don’t know to which extend we must apply for licenses when developing add-ins and standalone workbooks with customized Office UI in Excel.
So far I have only applied for licenses for my free and commercial add-ins that have customized Office UI but not for any clients’ solutions.
VS 2010 is shipped with some basic controls together with some simple icons. I say basic because the controls do what they are supposed to do but provide no flexibility and no extra that actually can light up the solutions. If we want to use the Office UI we must buy the required controls from a third-party since Microsoft does not provide us with such controls. On the market it exist a great number of vendors that offer a great number of powerful controls.
As for the icons we face the same situation as with the controls for the Ribbon UI. However it exist a larger groups of free icons with various quality on the Internet and without any support at all. An advantage with icons, compared with the controls, is that we can use the built-in icons shipped with Office. These icons are quite common which may be a limitation if we want to create more relevant and unique UIs. Third-party provides us with icons that reflect specific tasks and activities and the vendors usually provide us with support.
Personally I try to always get commercial tools as I then get good products with support and an access to larger knowledge base. Through the years I have used several vendors but previously this year I changed my strategy. Instead of using many vendors I decided to only have a very few vendors. Actually, I ended up with two vendors; Syncfusion for all the Windows Form Controls and Professional-Icons.com for all the icons.
I decided to use Syncfusion for a various reasons including very good and powerful controls together with an excellent support. Syncfusion’s packages are not among the cheapest on the market but I think they offer a high ROI, especially if we learn how to leverage them. At least that’s my experience. An expression I picked up for many years says: quality goes never out of style. Syncfusion has that kind of quality and their products are robust and reliable for all kind of software development.
When building the Ribbon UI (see below) I used several controls from the Syncfusion’s Essential Tools also for creating the framework for the Ribbon UI. It’s straightforward and quite easy to build this UI, especially if You have done it a couple of times. The Ribbon UI control can, in addition to work with Windows Form Controls, also work well with other .NET controls. For a good introduction about the main control RibbonControl Adv please click here.
So far I have only been talking about Windows Form controls but nothing about the icons. The icons from Professional-Icons.com come with a great number of file formats including ICO, PNG, GIF, JPEG and BMP. The icons shipped come also in various sizes from 16 x 16 to 256 x 256. They ship the icons in various packages such as Applications, Accounting, Business, Medical and many more. Professional-Icons.com also offers some bundles of their packages that give better prices then buying the packages one by one. In my experience I rarely can only use one package of icons. It’s more common that I need icons from at least from two packages like Business and Network or Database. Again, Professional-Icons.com’s products are not the cheapest on the market but by selecting them You get great icons with high quality and also a very good support.
The following screen shot shows Syncfusion’s Windows Form controls and Professional-Icons.com’s icons in use in a Ribbon UI. This is actually a stripped version of a client’s solution.
Personally I find the screen shot to be very nice and reflect the quality I want to achieve when building UI in my clients’ solutions.
What do You think and how do You work to create user-friendly UI?
PS: Syncfusion offers also great controls for ASP.NET/ASP.NET MVC, WPF and Silverlight