Today I downloaded and installed the trial-version of LightSwitch available here http://www.microsoft.com/visualstudio/en-us/lightswitch/try

Before I downloaded it, I watched the demo-video which promised that LightSwitch could do just about everything you ever dreamed of, and yes: WITHOUT A SINGLE LINE OF CODE!

“Building a business application has never been easier…”

Well, I could agree with that. I actually managed to create a “business application” without a single line of code and it was a walk in the park. My business application consists of a list of people where you are able to search for them and change their shoe size. Isn’t that great?

You could actually have done the exact same thing in MS Access back in 1989. Back then the user interface looked exactly like any other Windows product. Just like LightSwitch does.

The problem with the Out-of-the-box-application is that the real world is never that simple. In the real world you would probably want something to happen when you make various choices in the UI. You may want a n-tier application where you could re-use components and share resources. You may want it too look completely different, because you don’t really fancy the MS-look.

Who knows -If I give it a little more time and study, maybe LightSwitch  could do all these things, but I cannot help to feel some suspicion about frameworks that promises just about everyhing without a single line of code.

Let’s see, maybe I come back to this subject with a different point of view.

Working mainly with web applications and websites for the past 10 years I happened to end up in this project where a desktop application was going to be built. My first instinct told me that desktop applications was something from the past and should be avoided, for various reasons. But since this application was aiming towards a very small number of end users it didn’t make sense to choose a web application.

We decided to develop this application on Microsoft WPF, which enables a great deal of freedom in terms of layout and design. WPF also comes with lots of out-of-the-box controls that enhances development speed. Freedom of choice when it comes to graphical user interfaces is a good thing but it also opens up for bad decisions and more choises to make. It demands a more responsible way of carrying out this process.

I’m not going to list tons of advice on this subject because there’s really nothing new to it. Standard usability guidelines. But if you’re a developer and don’t have the time  or talent for attending an art directors’ course – read this pragmatic piece of advice:

• Left align text
• Right align numbers in datagrids
• NEVER center align anything
• Skip most of your borders on elements OR make them extremely subtle, like 10 % opacity.
• Increase the line-height on standard treeView-control, by setting top- and bottom margins on the itemTemplate
• Rip color scheme from some other successful application and you’re safe.
• Don’t use website-like navigation. It’s useless in a desktop app. Look at outlook or something like it for inspiration. Use menus, tabs, sidebars, modal dialogs more then you would in a web application.
• A margin between two chunks of information should be around 20 pixels. Why do all developers forget this? Margin, padding – USE THEM. It looks horrible without them, and unreadable.
• Never present the current date and time of day in the header.
• Remove every piece of graphic that doesn’t have a purpose.

Over and out.

Here’s an example of using JQuery to produce smooth mouseover effects.
I have included functionality for handling zebra formatting, which is often the case in tables. But you could of course modifiy the code for use in any kind of element. Please note that you’ll have to include the JQueryUI-lib as well.

And here is the JQuery

Demo…

When it comes to date and time  there are about a  thousand different ways to present them.
Most questions in this area regards localisation issues. This article is not about localisation. It is about readability and usability. I’ll start with an example (Northern european style):

2010-02-23 12:03:42

(US: 02/23/10   12:03:42)

This is how it looks on a lot of web pages and applications. The reason for that is that this is what comes out from a database or a program. What’s wrong with that? – you might ask. Well – there might be nothing wrong with it, it depends on the audience your targeting. If you are about to present time-critical data in a table with hundreds of rows where it is important to know exactly when something happend, this is probably the way to go. But if you’re not? Remove seconds and show your users some readable words. like this for example:

February 3rd, 2010,  12:03

The name of the month February is presented here. Nice. More readable. But be careful  to use this in long lists. Hard to align vertically. Now we are on to something. FEBRUARY. That is a real word. “02″ doesn’t say that much instantly. In most UX matters it is often quite useful to go inside your own head: What goes on inside your head when you think about a future event, a concert you are about to attend for example? Most people go about it something like: “Ah, let’s see… The 23:rd… is that on Tuesday or wednesday?

Tuesday, December 3rd, 2010    12:03

You can always use shorthands if you are short of space. Ok, let’s go back inside our heads again: “The 23:rd, eh – what date is it today?… mm let’s see. Oh! it’s the 24th!  - I’ve missed it. Doh. What do we learn from this? The 23:rd is not just the 23:rd. It is something more . It is YESTERDAY. A very important word. It speaks directly to you much faster than a number.

Yesterday 12:03

Yes! This is really nice. We don’t even have to say anything about year or month or day. Yesterday says it all.
Ok, but how do I write it if it is NOT yesterday? What if it is today?

12:03

Now we are soon reaching nirvana. Almost nothing left! Of course, this will only work for the present day.
Well – you can write Today or nothing at all if it is today. If it is not today or yesterday you can write the day of week if it is within the current week. Let’s say it is wednesday and you are to present something that happened on monday. There you go: Monday.

Monday 12:45

An example of this style in a list, assuming today is monday:

12:03
10:45
Yesterday 09:41
Saturday   14:45
Thursday  09:34
Tuesday    10:38
May 23rd  10:45

If it is further back in time. Go with the date. Monday 3rd for example. Now let’s move on to some graphical enhancements and typography. The old calendar that you pull off one day at the time from has proven to be  great to use on websites. This is a very nice example from the swedish agency oktavilla:

This is also an example of using contrast- one of the most important design elements. Contrast in size in this case. 16 is written in a much larger font than the month and year. This example also does not show the time of day. And in many cases this is totally irrelevant. And you can always present the time by using the title-tag. Here’s another nice example from webdesignledger.com

Another example of this is the way time is presented in mobile phones.

iPhone time

The above example is emphasizing the time. It all depends on what the purpose of your application is. And how people are using it. A phone is something you carry with you all the time. When you pick it up, you are most likely wanting to know what time it is. But if you are browsing a list of articles on a blog or web site, you’re most likely want to see which date it was printed – if it is an old article or a new one.

That was all for now. I’m highly interested in any kind of input on this subject. I will continue this post with some date-input issues. Date and time input – a usability view.