This is somewhat related to my previous post about "less is more". Another thing that I've noticed over the years is that some websites or applications tend to give a priority to looks over function. There are some exceptions to this that obviously depend on the theme of the application or website. Now, WPF and Silverlight provide us with a lot of features to alter the visual appearance of an application and as I mentionned before: with great power comes great responsibility.
A lot of our clients have to wear the designer, artist, and programmer hat all at once. Not everyone has the chance to have an integrator and artist/designer working alongside. If you are just starting out in WPF or Silveright and do not have a lot of experience in design my first advice is this: don’t try to be cute. Design is hard and requires a lot of experience, you wouldn’t expect someone to start coding in C# and or VB.NET by improvising, well don’t expect you can easily improvise design ;-).
When I say “don’t sacrifice function over looks” it means elements placed on your application or website that require interaction should not be blended in your design in a way that they cannot be easily accessible. This might sound very basic; however, even the most advanced design companies make these fundamental mistakes. For example, here’s something Odi (@kosmatos) tweeted : “So who can tell which is currently selected in the "Public | Private" TOGGLE button? How do you know? http://twitpic.com/659sb”. And he’s right, the purpose of a ToggleButton is to easily determine if a button is currently toggled or not. When designing an application make sure your controls are easily accessible and that their visual representation respects the essence of the controls.
Another fundamental way to allow users to easily indentify an element that can be manipulated is by using contrasts. Make sure that what is important to the end users visually stands out. This is another point that may sound very basic to most of you; however, it is a detail that can be forgotten or ignored. Here’s a selected menu item from a very awesome website I visit:
Bright orange on white is not the best way to make text stand out. Test your contrasts and make sure that important text or informationcan be easily read.
Regroup valuable information or sections currently important to the user. We faced this issue when developing our Resource Center. We wanted to display a lot of information in a single form. For those who don’t know what the Resource Center looks like, here it is:
We have a main section in our circular listbox, we have News Headlines and Licensing Information. That’s a lot of content to throw at our users. So we have to guide our user eyes to what is important. The currently active section will have a big icon standout and the icon will be linked to the currently active section, in this case Getting Started, which is represented by a timer. One of the issues we had is that the news headline would have grabbed the user's attention too much when really this is not where we want them to initially look. So what we did is we made the text semi transparent until the user hovers over the section. We also decided to hide our scrollbar on the News section that would just be cumbersome to the user's eye. So with this, we hope that the users initially pay attention to the middle circular panel.
This is just some advice I’ve learned by working with our designer over the years. They are fundamental principles that we obviously did not invent. Those are related to the Contrast, Repitetion, Alignment, Proximity (C.R.A.P.) design principles brought up by Robin Williams in his popular book The Non-Designer’s Design Book. You can do a quick google search for C.R.A.P. Web Design to find more information about this. Keep in mind that the C.R.A.P. Principles applies, in my opinion, to application design as well.
Questions or comments, feel free to send them either on twitter @mattd1980 or drimonakosm@xceed.com
