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.
