This article is compatible with the latest version of Silverlight.
Introduction
In Part 7.1 of this series I looked at the importance of styling your Silverlight applications. In this article I will be taking a look at fashions in user interface design of late, and what basic elements can be identified as working towards beautiful and functional applications. Also I will address some of the “controversy” from my previous article and provide some opinions and responses to the comments I received.
Before we start, I have a disclaimer. I’m a developer, not a graphics designer – so I’m writing these styling articles from a developer’s perspective (and with the same limited graphical design skills many other developers share). I have spent a lot of time as a developer producing user interfaces as a part of the systems I have designed though, so hopefully I can provide some useful information that I have gained over the years to other developers from my own trial and error experiences - though these are not necessarily the opinions of an expert in this area. I have built up my own philosophies on user interface design that I practise (of which this particular article is predominantly composed), so please feel free to question these and provide your own alternative (or additional) views in the comments.
Source Code and Live Demo*
Instructions on setting up the sample project can be found in Part 1.
To log into the sample application use the following Username: demo and Password: demo
Fashions
I plan in this section to pass on a few tips that I have learnt in order to implement the “glossy” look that’s all the rage at the moment (I believe made famous in Apple products such as the iPhone, and also the Windows Vista toolbar and taskbar), but I’m not claiming to be an expert or have any talent in this area – these aren’t original ideas from me but concepts gleamed from a number of sources (some referenced at the end of this article). Hopefully these tips will be useful as good information in this area is fairly sparse. It helps to have some graphics design talent when it comes to producing attractive user interfaces, but I’ve come to realise that with a few tricks up your sleeve and understanding of core concepts you can do a reasonable job of faking some talent. It will never match up to the work of a good graphics designer, but if you don’t have budget for one this is probably your second best option. Unfortunately fashions come and go and the glossy look won’t remain in fashion forever (only a few years ago the 3D look was “in”, then it was thin straight lines and sharp corners, then rounded corners, and now glossy). But for now these tricks should get you by with how to implement the glossy look.
So let’s start by defining exactly what I mean when I say the “glossy look”. My perception of this look is where parts of your user interface mimic a hard shiny surface that has a white light directed towards it. The light will reflect off parts of this surface, perhaps in accordance to its shape, making that part of its surface a little lighter and whiter. Objects sitting on this surface will reflect off it as per where the lighting is coming from. Shadows may also be cast where an object comes between the light source and the surface.
Here’s an example of applying gloss to a button. I’m making use of the black glossy theme from the Blacklight project, demonstrating a button without gloss applied (a manual modification to the theme), compared to one with gloss (the original from the theme):
Other design elements worth investigating (which won’t be covered in this article, but I’ve provided some links to get you started) are frosted/smoked glass (good for panels, as are radial gradients), wet floor reflections (as often seen in “Web 2.0” logos), drop shadows, and glow effects.
Following a style or fashion (such applying a bit of gloss as per above) does not necessarily mean that your user interface will automatically look attractive. In fact, the incorrect use of various styles can make things worse, and you also need to be careful you don’t overuse them. Regardless of the style you choose, merely picking one won’t ensure that your application will be attractive. So what aspects do you need to focus on to make your application attractive? Well that’s a book in itself, and I’m probably not suitably knowledgeable to cover this subject in detail. However, I can pass on a few pointers. The first thing is to define a clean, consistent user interface. By clean I mean uncluttered, with plenty of white space, and making use of visual clues to direct the attention of the user to the important elements they should be focused on. Presenting too much information at the one time is likely to overwhelm and confuse the user, so limit the amount of information being presented at the one time, and group similar functions or related information together. Also be consistent with the layout and order of your controls, both within your application and to standard layouts. For example if you have two buttons OK and Cancel, ensure the OK button is on the left and the Cancel button is on the right in accordance with standard button layouts.
Fonts
The type and size of fonts should be carefully chosen such that the user doesn’t need to squint when reading, but not too big or it tends to make your application look somewhat unprofessional. Note that there are only ten fonts built into Silverlight that you can use. Nine really, because in my opinion Comic Sans Serif is not a font that should be used in any business application! You can use fonts other than the built in ones, but these need to be compiled in with your application as resources. Note that to do this you must have a license to publicly distribute the font. Here is some information on embedding fonts into your application and using them.
Choosing Colours
One of the most important aspects of styling your application is choosing the right colours. Colour theory is too big a topic to be discussed here, but it is vital that you understand how to choose the colours that make up your user interface such that they work together (harmonise) well. Avoid using garish colours (hot pink, highlighter yellow, etc), and use more subdued colours instead. Ensure there is enough contrast between the text and the background colours. Also be aware of how your application might look to users that may be colour blind and cater for these users accordingly in your choice of colours. You can use a colour wheel to help you pick the colours that work well together and can be used in your design, or you could simply use a predefined colour scheme such as one of those in the Adobe Kuler community themes. Adobe Kuler also has the ability to enable you to generate your own themes using its colour wheel so you can find the colours that work with the starting colour that you choose. Ultimately, when choosing colours a colour wheel should be your best friend. More information about colour theory can be found in the resources at the end of this article.
Animations
Animating certain aspects of your user interface (such as page transitions) can add a certain pizzazz to your application and add to the “wow factor”. However you must use animations sparingly, and be sure not to distract users from their primary task when using your application. An animation can impress the user the first couple of times, but can quickly become an annoyance. In business applications in particular you must be aware of this as users will often spend considerable time in their working day with the application, and animations can get old quickly. Transition animations (if you decide to use them) should be fast and not slow the user’s interaction with the application.
Icons
Good use of icons throughout your application can really enhance its visual appeal. However, designing quality icons is really the job of a graphics designer, and not a skill that can be “faked”. If you don’t have the budget for a graphics designer there is still the viable (and relatively cheap) option of purchasing a stock icon library. Most libraries come as raster files (such as .png files), though some companies are starting to include or sell separately the original vector images. While .png files work perfectly well in Silverlight, there are many advantages to using vector images instead. Vector images are scalable without losing quality, can be modified easily, and are often smaller than the equivalent raster image (depending on the complexity of the image). Therefore vector icons are often the best choice for purchase if available.
Note that vector icons often come as Adobe Photoshop (.psd), Adobe Illustrator (.ai), or Scalable Vector Graphics (.svg) files and need to be converted to XAML (possibly losing some definition along the way) in order to be used within a Silverlight application. There is a plug-in available for Adobe Illustrator to export to XAML (if you have Adobe Illustrator), or you can open these files from within Microsoft Expression Design. Note however that opening .psd files in Expression Design is of little value as it only reads the contents as a single layer bitmap image – not as a vector image. Opening .ai files in Expression Design is a little more successful but often containing black shapes where it couldn’t render the corresponding element correctly. The preview of Expression Blend 3 has two new import filters for Adobe Illustrator and Adobe Photoshop files which does a slightly better job but still contains the same rendering problems for some elements (most likely using features not available in Silverlight I guess). Ideally you want the icons already converted to XAML files when you purchase them to save you these problems. IconShock provide some of their icon collections in vector file format, though not as XAML files (.ai, .fla, or .eps only). The only supplier of stock XAML icons that I have managed to find is Horizon Software, who seem to have a large collection of icons, each in numerous formats including XAML. These seem formatted for WPF (not usable in Silverlight without modification), though the Expression Design file type is also included so you can use that to export a new XAML file.
Styles and Themes
Any further advice is beyond my meagre knowledge of graphics design, but these points have worked for me to reasonable effect. Again, a graphics designer will often add a lot of value to a project, as they can bring many other skills and a natural talent and inspiration that many developers don’t possess (a category which I more or less fit into). Rarely is any particular user interface design unique – like music and other artistic forms they are mostly derivations acquired from other projects and constantly evolving. Personally, whenever I see a website or user interface that catches my eye I bookmark it or take a screenshot and store it for the next time I need some inspiration. Then when I start a new project I go through these and identify what I like, try to determine how the designer achieved each effect, experiment with implementing the effects myself, and finally attempt to combine these effects into a cohesive and attractive user interface. This is often a good way to spot trends in user interface design and keep up to date with current fashions.
These days it can be a bit tricky to mimic elements in the work of others due to regular extensive use of gradients and layered transparency that can be hard to dissect and reproduce to similar effect. There is also the issue of copyright which must be considered when referencing the work of others, and the line isn’t always clear. I’m not a copyright law expert so don’t take advice from me as gospel, but my take is that effects (such as applying “gloss” or reflections) is acceptable, but reusing someone’s graphics (such as icons) without permission infringes their copyright and could be considered theft, and I don’t endorse this practise.
When you find an example you like, take a look at the various themes you can find that might provide a similar look and feel. Currently there are very few professional looking Silverlight themes available, so it might be worth taking a look at themes for use by other similar technologies such as WPF and Flex and see if you can convert these for use in Silverlight somehow. Nikhil Kothari has a great article on creating your own themes. Here are some sources (both free and commercial) for themes:
- The Silverlight Toolkit contains a number of Silverlight themes.
- The Blacklight CodePlex project contains a very nice black glossy theme.
- Reuxables from Nukeation are some very nice professional looking commercial WPF themes. Surprisingly they don’t appear to have Silverlight specific themes despite mentioning some in older blog posts, but you should be able to convert the XAML for use in your Silverlight project.
- xamltemplates.net has a number of commercial WPF themes (and one Silverlight theme).
- The Microsoft Expression Community Gallery has an area for themes. Currently the only themes available are the Silverlight Toolkit themes but this may change over time if the community gets involved.
- ScaleNine has a decent number of free Flex themes.
We’ll look at how to apply themes to your application in a future article in this series.
Examples of Good Design
As I previously stated, it’s worth looking to existing applications to get some inspiration for your own project. Unfortunately it’s hard to find good publicly available examples of innovative business applications in Silverlight currently, but here are some examples which you might like to investigate as potential directions you might like to head in.
The ultimate Silverlight demonstration business application is possibly the Microsoft Health Common User Interface – Patient Journey Demonstrator. I do have a few issues with this application however. To me the text is way too small for easy reading, the animation of the panels is too slow in the Primary Admin Care screen which will lead to user frustration, and there is too much information displayed at the one time - creating a very busy and confusing user interface. However, as an innovative use of Silverlight in a business application scenario this is possibly one of the better examples publicly available. Some source code is available, but too little to be useful in your own projects.
Some other well designed sample applications built in Silverlight:
- Woodgrove Financials by Infusion Development is an incomplete but creative implementation of a business application in Silverlight. Source code is available for this sample.
- The Telerik Northwind Demo is a simple sample application for maintaining some data in a database. Source code is available for this sample.
- colaab is a commercial real time collaboration application with a very attractive user interface.
- The Microsoft WorldWide Telescope Web Client doesn’t have a particularly striking user interface, but its use of semi-transparent overlays is rather nice.
- The Telerik RadControls Demo demonstrates an appealing rich user interface. Despite being a showcase of their controls rather than an application as such it does demonstrate some nice user experience concepts with transitions, animations, and user interface elements.
- Infragistics Quince is a design pattern explorer application that demonstrates an excellent wait screen whilst downloading the application, an attractive user interface, and some interesting user interface elements.
In your research it’s worth widening your scope and looking beyond existing Silverlight examples by investigating designs in other areas of the RIA space (such as Adobe Flash/Flex/Air based applications) and even WPF based applications (since WPF and Silverlight share a similar architecture by both using XAML to define their user interfaces). A brilliant example of a business application built using WPF was demonstrated by Billy Hollis on dnrTV in June 2008 which is worth watching for some fantastic ideas for innovative user experience design. Looking further afield, here are some Adobe Flash/Flex/Air applications worth looking at:
- Salesbuilder by Christophe Coenraets – source code is available here.
For other applications, take a look at the various showcases out there which highlight applications using a specific technology. Often the quality of these applications varies and there are generally few examples of business applications (due to their nature of usually being internally used only and containing business sensitive data), however they are worth looking at to see other uses of the same technology. Here are a few showcases across several RIA technologies to investigate:
- WindowsClient.net WPF Showcase
The Yahoo! Developer Network has a Design Pattern Library that covers similar territory to that of the Infragistics Quince application in detailing various user interface design patterns. You may also be interested in downloading the Yahoo! Design Stencil Kit that can provide a basis for designing your user interface elements.
What examples (preferably business application focused) out there do you believe exhibit good user interface design (from an attractiveness perspective), and more importantly which applications provide a good user experience (from a usability perspective)? Leave a comment at the end of this article with your examples and why you like them.
Unique and Innovative User Experiences
In my last article I received some criticism for my updated design lacking innovation, and with my updated styled application not having changed or improved the means in which the user interacts with the program – instead resorting to traditional user interface paradigms used in other older and less flexible technologies. I agree entirely with these assertions, as it was never my intention to change the program substantially in order to address the user experience in the areas in which it lacks. In fact the application at some stage in the future will probably go through another iteration where I target the user interaction and experience from the ground up. However at this point I am focused on styling, which I will argue is a topic aligned with user interface design, whereas designing user experience is a completely separate activity. I don’t believe the point in time within the project timeline that each takes place is necessarily the same, and the person/people who are charged with the duties of each are not necessarily the same either. The skillset of a graphics designer does not necessarily cover the skills required in the role of a user experience designer. I’m firmly a developer and not a designer (user experience nor graphical), though I have regularly found myself covering all three roles on projects, so hopefully some of what I say these other areas can be considered of value.
It must be remembered that user experience (UX) design is not the same as user interface (UI) design. User experience design is very task oriented – taking the requirements of what needs to be done and turning them into how they should be implemented. User interface design is more application oriented – determining how the application will look, bringing a consistency across all parts of the application and making it pleasing to the eye.
Being two completely different areas, the design of the user experience isn’t necessarily the domain of the graphics designer. To me, styling the application is an activity that takes place when designing the user interface, and the user interface design will be based upon requirements determined from the user experience design. I agree entirely that user experience/interaction design should take place first before any controls are placed on the page, but I don’t agree that the user interface design (aka styling) of the application needs to or should be complete before development has begun. In fact this is really an ongoing process through the development cycle which requires regular designer/developer integration, and I believe the styling can generally take a back seat to the development until there are enough pages created to enable a cohesive and attractive design to be generated. Whilst refactoring is regularly considered a development practise, there is a place for it in both user experience and user interface design also.
There's always the conflict over levels of importance of form versus function, and different people will see it in different ways. A business application is essentially useless if it doesn't have the required functionality, so of course that is going to take precedence and the majority of focus – hence the emphasis will be on function over form. With budget slashing and the current financial crisis, along with testing and documentation is going to go the user interface and user experience design. But as with testing and documentation, good user interface/interaction/experience design is very important in building an application and shouldn’t be overlooked. Applications tend to evolve over time and it can be perceived as a waste of time putting too much effort into designing control layouts in early stages of a development if things are going to change (adding one more field or an extra button can mean totally redesigning a page).
Despite the flexibility of Silverlight and XAML to create new user interface elements, I don’t believe the traditional controls and old paradigms will fall out of favour any time soon for a couple of reasons. The first is that they make development process a lot quicker which during a time of tightened belts is a big advantage. Developers are familiar with implementing them, and little customisation is required to get them working. Users are also generally familiar with and understand how to use them. Sometimes however good user experience design can cause major confusion and alienate users. Take a look at the Ribbon control in Microsoft Office – huge amounts of time and effort went into the user experience design producing a wonderful new paradigm that made it easy for new computer users to use the Office applications, but it ended up confusing existing users because they could no longer find functions where they expected them to be. Without something familiar to grasp onto, users will be left frustrated and looking for alternatives.
Please continue with this debate – it’s a very grey area that needs further discussion to create awareness of these issues (especially amongst developers) and I must say I’m enjoying and learning from it. It’s somewhat akin to the Domain Driven Design versus Data First Design debate and I don’t think a final conclusion will come any time soon, nor that there is necessarily a right and wrong way to do it. In the end however the only thing that will ultimately make a difference is for people to provide solutions to the problems and demonstrate better ways to tackle and reengineer the old paradigms. I am very open to alternative designs and better ways of tackling the problem domain – it’s all a learning process. In my initial design of the user interface I was focused on creating a basic application user interface framework from the blank slate that Silverlight 2 provided us with. For many developers that is a task in itself with XAML being quite a foreign concept and providing quite a learning curve for most. It's all a case of baby steps too - you can't run before you walk. Hopefully I can help some people (including designers) walk, and from this they can use their other skillsets and demonstrate how they can run. In fact I would be most delighted if some people can rise to the challenge, and create a completely different user experience to achieve the same functionality I have been developing. I have some ideas of my own, but would be interested in what the community could create as there are few examples currently available demonstrating non-traditional and innovative user experience design. This is possibly where SketchFlow (a promising new prototyping tool from Microsoft not yet released but demonstrated at Mix09) will take hold to support and enhance the user experience design process. The fact is (as I stated in the last article) with Silverlight being such a blank slate, developers (and I suppose designers too) are having trouble working out where to start (though the Silverlight 3 SDK will have some application templates to help), and thus will end up producing uglier and clumsier applications than they would using other technologies where they have a solid basis to get started from. It will be an evolving process, and one which requires a lot more discussion, a lot more examples, and a lot more controversy.
Conclusion
In this article we’ve taken a look at the various aspects that need to be targeted when styling your application. This was by no means an extensive discussion of all the issues involved in designing how your application will look, but it should provide some food for thought for many developers. Determining a direction for the design of your user interface can be the hardest part of the process but hopefully this has given you a few pointers to get started in the right direction.
In the next article I will be taking a look at the concepts involved in styling your Silverlight applications.
Resources
Principles of Glossy Interface Design
Professional Dark Web Button
Adobe Photoshop CS3 Style Icons
Wikipedia – Colour Theory
Colour Theory Tutorial
Tutorial: Create a Fiery Button by Alex Knight
A Glass Orb Button in Silverlight by Timmy Kokke
Simplicio Icon Set
On-Stage: Free Vector PSD Icon Set