// UX

Designing clean and smart user experiences is a hobby of mine.  Yeah, it’s a little weird, but it’s a good way to change gears for a while when working through a problem.

Given that, I thought I would take a stab at the login pages for ADFS.  I didn’t do anything major, but lets take a look at some before and after shots.

Before

Nothing too complicated here.  It looks like a regular login page.

After

In comparison, not a lot has changed.  I switched the font, moved the textbox labels, fiddled with some border colors, and added a watermark in the username textbox describing the format.

Here is the updated style:

<style>
body
{
    background-color: rgb(255, 255, 255);
    color: #4a4a4a;
    font-family: "Segoe UI" , Arial, Helvetica, Sans-Serif;
    line-height: 1.4em;
    font-size: 12px;
    font-style: normal;
    font-variant: normal;
    font-weight: normal;
    font-size-adjust: none;
    font-stretch: normal;
    margin-top: 20px;
    margin-right: 20px;
    margin-bottom: 20px;
    margin-left: 20px;
    background-repeat: repeat-x;
    background-image: url(../App_Themes/Default/header_background.png);
}
</style>

The next step I’d like to take is add some JavaScript validation.  The default codebase just passes the text to the authentication code, which would eventually throw an exception, inevitably resulting in a little red blob of text saying “the user name or password is incorrect.”  Seems like a waste of a postback if all it’s going to do is remind me that some textbox is empty.

Earlier I had discussed how to bring the data from a database to the Windows Phone 7.  Now I’d like to discuss how we think about displaying that data.  It’s important to know the relationships in the data so we can think about how everything should be structured.  We want to create a simple interface that is smooth and logical.  All data is different and this is by no means the “right” way to do it, but it feels right to me.

This is industry standard stuff, and our data is modeled around it.  Each layer would be a collection of each sub-layer.  So as an example There are multiple tracks per breed, and multiple cards per track.  A Card is a set of races for a specific track.  My best understanding is that we try very hard to stick to one Card per day. 

For this application though we aren’t going to assume anything.

It seems logical to me that we should mimic this structure in the logic, so lets try and shoot for that.  This is not the finished version, but of a mock-up of what we might/should see.

Initial Page:

Once the breed has been selected we move onto selecting the track:

And so on…

In the future I will discuss the breakdown of each page and how the data is actually displayed, plus how we switch between pages.

I tend to complain a lot.  Which frankly, doesn't do much for what I'm complaining about.  In most cases, it comes down to "okay, here is a problem, now someone else go and fix it."  There is a direct correlation to how many people I annoy too.  The number of people I annoy increases as the magnitude of my complaining-ness (hey, a new word) increases:

If I wanted to change something, obviously I’m going about it the wrong way.  However, there is a direct correlation between how often I do something wrong and the likelihood I will get it right.  See previous image.  What that means is if I keep screwing something up, eventually I am bound to get it right.  However, what is not necessarily apparent in the chart is that if I do nothing, I won’t improve upon my actions.  Maybe it is apparent, I don’t know – I’m still working on it.

The reason I bring this up is because I keep hearing people bash/complain/hate the Office Ribbon and application Ribbons through Windows 7:

The major complaint has been that people couldn’t find what they are looking for anymore.  There aren’t any menus, so they can’t figure out how to set [insert obscure property].  It doesn’t make sense to them.  They now have to change the way they think about the application.  What is unfortunate about this is that menus are a horrible interface.  You shouldn’t have to dig through 6 layers of menus to change a single property, and that’s what Office 2003 became.  The Ribbon has it’s own problems, but it also increases user productivity greatly when the user knows how to use the Ribbon effectively.  Which in lies a major problem.

Most end-users don’t like when you move their cheese.

Well now we have a problem because people also want improved systems.  Improve the system, but don’t change it.  This paradox is why fundamentally different – game changing – designs aren’t seen all that often.  We stick with what we already know because if we deviate people will complain.  It’s a very tough way to create a better interface.

So how do you create a better interface?  You keep changing it.  Guaranteed the first couple of designs are going to annoy people: i.e. the Ribbon.

This is good.

If you keep failing at designs, that means eventually you are bound to figure out what kind of interface works best.  You will never figure it out if you never change.  Without MicroBating MasterSoft’s (hey look, two new words) ego, I must say that Microsoft is doing well in this area.  They keep making lousy design decisions.  See Expression Blend UI, and listen to most non-technical office workers using Office 2007.  I’m sure there are quite a few instances in other applications as well.  However, and I must make this clear, Microsoft is doing the right thing.  They are actively trying to create better interfaces.  Yes, it will piss people off (it’s pissed me off quite a few times), but at least they are making the effort.  And that’s what counts.

EDIT: P.S. I do like the Ribbon.

At first I was a little skeptical at the quality of the Zune Player, as it’s basically in direct competition with Windows Media Player.  In retrospect, that’s probably what made it what is today.  It’s designed to sync the Zune media player, and it works very well as an alternative to Media Player.  There are a couple problems that I have with it though:

• It’s a resource hog
• It requires a good video card to show effects
• It sorts things in weird ways when meta data is missing

The Zune Player is built on .NET.  It has a very big initial memory footprint.  It gets better as it settles into place.  My assumption is that it’s using WPF to make itself look pretty, and that’s where all the effects come from.  As a result some video cards aren’t capable of handling the effects renderings.  For instance, my laptop’s video card just dies when the effects are on.  Zune will turn them off if need be.  If the Album Artist meta tag is empty, Zune sticks “Various Artists” in place thereof.  Zune sorts based on Album Artist in the default view, so when I loaded my library into it, a whole whack of songs where under Various Artists, which isn’t all that useful.  With that being said, all the (legally) downloaded content had proper meta tags and were sorted perfectly.

However, with all the negatives, comes a few gems.  Sorting is a breeze.  Playlists are extremely easy to build.  Filtering works.  And it’s a really slick UI.

I’m a little miffed the band image is pixilated, but all the extra info brought with it makes up completely.  Talk about slick.

It also makes decent random playlist decisions.  On the UI and UX side of things it gets the job done.  It’s pretty stable.  It hasn’t blown up on me yet.  I give it my approval.  Check it out: www.microsoft.com/zune.