Rendering a web page that does not have a custom style sheet written for it, will use the browser’s default style sheet to style the content. However, different web browsers have slightly different default style sheets. They may have different margins and paddings from one other, or different default colors, or may have additional or even fewer rules than each other. One way to avoid this potential train wreck is by using a CSS Reset. A CSS reset is basically a set of rules in your style sheet to get the rendering web browser to forgot all its defaults. In this way, different web browsers can all start from the same baseline when determining how to display content.

We seemingly want to use a CSS reset because we want our web page, web site, or web app to render pixel-perfect across all web browsers. If we look at Digg or Wikipedia in IE compared to Firefox or Safari or Opera, they don’t render completely the same. The fonts are slightly different. The font weight in some is bolder than in others. They’re all pretty close, but just a little different.

Should web pages look the same across all web browsers or is a little variation ok?

Personally, I’m torn on which side to take (since not everyone uses them). It appeals to me that with a CSS reset, you start from scratch. What you build up will look the same on all browser platforms. The problem is that they still won’t. A CSS reset isn’t actually a pure and complete reset of all style sheet rules. With a CSS reset, you don’t reset everything with the * selector, you just reset a subset of all selectors, because not all browsers will apply things like a margin of 0 and a padding of 0 to all elements in a consistent way. So what you end up with is a lot of different renderings that all look a lot closer than if no reset was performed, but still not pixel perfection. So is it ok that CSS resets don’t completely reset everything? Is this a case where it’s all or nothing?

Not having a complete CSS reset may not be all that bad though. When using CSS resets, you (theoretically) should have to fix less spacing and style issues throughout development. On the web project I’m on, we don’t use CSS resets. While it may not render exactly the same across all browsers, it’s still pretty darn close. However it does make me wonder that if we had used CSS resets, that would we have had to handle a lot fewer of the small problems on a case by case basis and would we have had a lot more of them taken care of from the start.

Getting back to the main point, doesn’t part of this sound like the age old Java/JRE debate? You write code once and it runs on all platforms (that can run the JRE of course) and it looks the same on all platforms too. That’s great and all, but the thing is that no one likes Java. It may look exactly the same whether you’re on Windows, Linux or Mac OS X, but that’s not exactly a good thing. People want their apps to look native to the OS they’re on. I don’t want my app to look like an app that runs on a platform somewhere else. I’ve complained about that same problem with iTunes. With CSS resets, it’s not quite that bad since you’re mostly dealing with margins and paddings and smaller issues like that, but it strikes the same nerve.

But should all web pages look the same across all platforms?

The perfectionist in me says “yes”, but the realist in me says that it doesn’t matter. Applications don’t have to look the same in different operating systems, so why should web sites have to look the same in different browsers? Especially when different browser usage is largely (although not always) due to different operating system use. And on a similar note, applications in my opinion shouldn’t look the same on different operating systems. That’s a common downfall in application design: making your application look and feel and work the same in all operating systems due to company branding and application recognition. You should make your application look and feel and work how the users of that operating system think and how they are used to applications working. Making Mac users use Window-isms in an application running on Mac OS X is bad. Making Windows users use Linux-isms in an application running on Windows is bad. But that in itself is probably a discussion for another day…

Maybe the answer to all of this lies in some immortal lyrics from the 80’s:

Now, the world don’t move to the beat of just one drum,
What might be right for you, may not be right for some.

Should you ever allow a "Miscellaneous" category or section or tab or page in your application? When dividing your data up into different sections, do you always have a place for everything or do you have a place for most things and then everything else goes into the catch all "Miscellaneous" section?

Some applications use "Configuration" or "Options" to try and solve this problem. Visual Studio 2008 uses a "General" section:

"General" is not quite miscellaneous, but almost. These options don’t really seem to fit in the other subcategories of "Edit and Continue", "Just In Time", "Native", or "Symbols". So that at least seems to mean that they need their own section.

Firefox uses the same pattern in their Advanced section:

These options are at least grouped into sections, but they still don’t seem to fit into any of the other categories.

Outlook 2007 on the other hand has an "Other" tab:

This may as well have been called "General" as well. There’s no rhyme or reason as far as I can tell for the sections inside of "Other".  Looks like another case of "Miscellaneous" to me.

In the fields of Information Architecture and Usability, a method known as card sorting is used to have potential users sort terms and labels according to how they would logically group them, in whatever order that might be.

In many cases, the users have a leftover category that they might simply label "Miscellaneous". Is this ok or is this just another usability issue to deal with and redesign later? Should "miscellaneous" never ever be allowed? Does inclusion of a miscellaneous category mean that your data isn’t organized in a intuitive way? Or will inclusion of a miscellaneous category just lead to users hunting around all the similarly titled sections until they finally check miscellaneous?

Or is that just too much of a Platonic ideal? Are there times where some fields simply don’t fit anywhere else? At some point do we need to throw up our hands and allow the wave of meaningless titles and labels flow?

When you sit down to design a user interface, where do you start? Do pull up Visual Studio and start creating forms and dragging controls onto them? Do you go talk to the server guys to see what they need and then just go for it? Or do you wait until the design phase is done and then create a dialog for each class in the system? Doesn’t sound pretty, does it? Well, have you ever pushed away the keyboard and pulled out a pencil and paper? Believe me, I’m no fan of the old school input methods (I can barely read my own handwriting), but there may be some use for that dead tree after all.

With paper prototyping, you can design user interfaces (graphical or even hardware) and get real life user input about the usability of that interface without ever touching the mouse. Basically, the drill is to draw the different states and dialogs that your UI contains on several pieces of paper and then observe as users interact with them. During the session, a person playing the role of the computer puts down the appropriate pieces of paper as the user physically touches and interacts with UI, so that the paper prototype acts as the real application would… just in ink or graphite. Nothing in the UI (layout, navigation, etc) is the explained to the user beforehand. The user is simply given a task and is asked to perform the task on the paper prototype.

Right now, you might be thinking “Well, what the heck can you learn from this? It’s only paper!” That’s true, but the fact that it’s paper is key to the whole operation. The prototype only takes as much time and effort to develop as it takes for you to draw the dialogs. On the paper, the user can physically touch the buttons, links and other clickable controls and can even write character input into the appropriate controls. Better yet, the paper prototype can be quickly refined to fix discovered problems with the interfaces… sometimes even during the session itself! “We saw you had problems finding the place to input the name. Would you try it again with *this* prototype.” How cool is that?

So what sorts of problems can you really find from some scraps of paper? Well, let me tell you, dear reader:

Confusing UI and concepts

There are times when you really don’t know how to express your interface so that the targeted users of your application will be able to easily grasp and use the interface. Or worse, you may think that you have the interface nailed down… except that you don’t.

Maybe you think that adding an object by choosing the type of object and then clicking the “Add” button followed by configuring the object is a perfectly reasonable set of steps for the task at hand. Well, your users may disagree. Heck, your users may not even be able to find the dialog to add the object in the first place. They may even be “clicking” the options link in the upper right corner over and over because they’re sure that’s where they need to go to add the object. Acting this all out with a paper prototype will find that out.

Important pieces and not so important pieces

Sometimes you may think that a certain feature is really important. You’re positive that the user will have to have this flashing red spinning textbox. The interface just won’t make sense without the flashing red spinning textbox. You get to the paper prototyping session and the user doesn’t even touch the flashing red spinning textbox, but they keep commenting on how great the dull boring toolbar is. Now you know where your spend your valuable time.

Weird words and wrong words

Are you using terminology appropriate to the domain as well as words that your users actually know? Have you ever put “VOIP” as a label in a dialog and your users thought that it meant the Teen Girl Squad sound effect instead of Internet Telephony? I know I have…

But do you know what the best part about paper prototyping is?

You get all the bugs out of the way before you write any code at all!

Well, ok, not all the bugs, but a fair amount of them. You’ll have confidence that can be backed up with real data that your interface will, at the very least, not suck. Any improvements that need to be made after releasing the application should be minor adjustments… assuming that you’ve paper prototyped all the new features that crept in along the way too.

To get your feet wet in paper prototyping, check out PaperPrototyping.com, A List Apart and of course Jakob Nielsen’s Alertbox. To get your feet soaking and all prune-like, buy the book.

UPDATE: To see paper prototyping in action, check this out.

Does HP do this on purpose? I don’t know if HP just likes to reinvent the wheel or what, but this just seems crazy. But let’s back up a bit before I go on any further…

I was at my brother-in-law’s house tonight and I was “privileged” to take on the role of family IT guy. What that meant tonight was diagnosing “Active Desktop disabled” errors along with random blue-screenedness. After a little investigating and some scrounging through the event logs, I saw that some services failing to start and other weird errors, so we decided it was time to wipe the slate, or in this case drive, clean.

So we backed up the stuff from his laptop (since no one ever backs up) and popped in the Windows XP install CD (this was back when HP actually gave you CDs). I reformatted the drive, reinstalled Windows and then moved on to the driver CDs. These are the custom gems provided by HP to return your laptop to the tip top amount of crapware that is on them by default. After the second driver CD, I was presented with this:

Um… huh? Ok… so I have the choice of both restarting my computer now and not restarting now? So I click on the restart later checkbox and now only the restart later checkbox is checked. I click on the restart now checkbox just to make sure and again only the restart now checkbox is checked. Hm… how come this smells like another control I so often encounter?

I’ve already talked about my previous dealings with HP software and them using the wrong controls at the wrong time. Here is yet another instance. This leaves me with a couple thoughts neither of which are very uplifting. Either the programmer at HP didn’t know about radio buttons and so reinvented the wheel by using exclusive OR checkboxes, or he did know about radio buttons but choose not to use them. Talk about a case of “Not Invented Here” syndrome. What gets me is even if the original programmer didn’t know to use radio buttons, do they not do peer reviews? or testing? Did these dialogs not get looked at by anyone else down the line? I’m just amazed that this slipped through the cracks.

But for whatever reason it was, this managed to get released as is. Whether because of the programmer, project manager or whatever force it was, this is how it is. But no matter what the reason, it’s not good…

The dialogs popped up via the common Windows APIs through either MFC or the .NET framework always put the buttons in the same place, whether it’s an OK, Yes/No, OK/Cancel, whatever. Having controls in same place is a good thing. It make use of the user’s spatial memory. The user remembers and automatically knows where the controls, or in this case buttons, reside.

The problem is that typically modal popup dialogs are modal and popup precisely because they require the user’s attention. They need to ask the user something, confirm something, or simply alert the user to something. And since popup modals are all the rage, users get very used to simply dismissing them since either the user already knows what they say or the user simply doesn’t care. A form of popup dialog dismissal habituation has set in and combined with spatial memory automatically being invoked… BAM! no one reads your popups anymore.

So how do we fix this?

Well, some applications randomly rearrange the buttons (and don’t set a default button), so that the user has to read the text. Well, they have to read the button text, but they still don’t have to read the text in the body of the popup itself. And I don’t know about you, but those popups just piss me off. “Ok, where’s the darn button now???”

So what options do we have left? I’ve seen some people spouting that modal popups should be banned completely. Great! …now what do we put in their place? I agree that getting rid of modal popups would be a big win, but doing that requires doing all the confirmation and alerting in the form itself which requires much more code than just MessageBox.Show(). For example, how do you make sure that the user saw your alert? How do you make the user confirm something if they can continue using the form?

I don’t know about you, but I don’t see getting away from modal popups any time soon… but maybe that’s just me. Has anyone else had success in this?

I would have thought that the rules of when to use and when not to use checkboxes were pretty straightforward. However, after a UI review last week, it became apparent to me that this may not be the case. So when do you use checkboxes? Simply when you have a true/false, yes/no, or on/off choice:

However, checkboxes don’t work if you have a two choice option that is not a simple, binary, opposite choice. Usually you can tell if this is the case if you can’t logically put a “not” or “don’t” into the label to describe what happens when the checkbox is unchecked.

In that case, use something else like radio buttons or combo boxes:

And of course any option that requires three or more choices would be displayed similarly:

But of course, there’s always the problem of deciding when something is one option with several choices or is two or more options with dependencies:

But the simple and most common case for checkboxes still applies: only for simple binary choices!

I don’t like buying music online. There. I’ve said it. I don’t know if that makes me an old fart or what. I just don’t like doing it. When you buy the CD, you are actually buying something concrete… something substantial. When you buy music online, you’re buying bits.

I think my biggest problem with buying online though is that you get the music files in only one format and in only one bit rate (which you typically can’t control) and slathered chalk full of DRM. If I buy tens or hundreds of albums on iTunes, I am thereby chained to using iTunes and iTunes forever else I’ll have to rebuy all that music again. And that’s assuming that iTunes and Apple will still be around 10, 20 or 50 years from now. Those facts almost make me consider renting music. You pay a relatively small fee and can download all the music you want. But then again, if you ever stop your subscription or want to transfer your music elsewhere, you’re SOL. You never really owned anything.

However, if I own the CD, I can always rip, rip and rerip the music into any format I want. MP3 is still the dominant format nowadays, but I may want all Ogg Vorbis in a few years. No problem. I have the CD, so I can rerip it. And not just that, but CDs are already a pre-existing backup to their digital counterparts. After you rip it, the CD sits on a shelf or in a case. If your iPod or Zen or NAS dies on you, you can always just pop the CD back in and rip the songs again.

All that being said, there is one online music service that I’ve tried and may continue to use. It addresses most of my problems and I don’t feel too dirty using it:

Amazon’s music downloading service is almost everything that I’ve wanted. Look at this from their help page:

Where possible, we encode our MP3 files using variable bit rates for maximum audio quality and smaller file sizes, aiming at an average of 256 kilobits per second (kbps).

DRM-free means that the MP3 files you purchase from Amazon.com do not contain any software that will restrict your use of the file.

The albums and songs you purchase from AmazonMP3 Music Downloads are free of Digital Rights Management software so that you have the flexibility to play them on any of your media players, PC or burn them to CD.

They have high bit rate files and no DRM. NO FREAKIN DRM! No matter where I put this, it will work. It’s up to me to keep my actions legal. And I’m not a 15 year old kid that is going to share all this stuff. I actually believe in buying music and supporting the artists. If I like the stuff that the artist puts out, I have no problem giving them money so that they can continue to produce more. If my collection consists of a hundred one hit wonders, maybe I need to reevaluate my musical tastes, but that’s another blog entry…

So let’s take a look at how all this works. Let’s say you want to buy an album from Amazon. You go to the album page on Amazon as normal. Look for the amazon mp3 panel in the lower right hand side and click it if it’s available. Not all albums are available, of course, but I’ve found most of the things I’ve looked for (and my tastes aren’t too terribly mainstream):

That will bring you to the album’s purchase page in the MP3 Downloads section of Amazon. From here, you can either buy your music song by song or just buy the whole album. And a lot of songs and albums are even cheaper than iTunes:

So after purchasing the music, you than need to download Amazon’s Downloader application if you haven’t already and then the .amz token file which tells the Downloader app what to do:

The Downloader then just goes on automatically downloading your files whether in the foreground or in the background:

And when it’s done, you’re politely informed of that too:

You can then spawn off your default music player to start listening to your new purchase or you can click on “Show Downloads” to open Explorer in the folder where all your purchases are. For me, that is C:\Users\mike\Music\Amazon MP3\. They are arranged by artist then album. Pretty typical stuff. There you have all your free and clear mp3’s to do with what you want. How beautiful…

The Amazon MP3 Downloader is a pretty bare bones app. It’s not this bloated thing sitting there in your system tray taking up CPU cycles. Consequently, it doesn’t save any state. After you close it or even if you buy and download additional songs, it will have totally forgotten everything you bought beforehand. You can only access them through the file system. But that isn’t a big deal. I don’t really like it when applications try to manage that stuff for you… like iTunes. Yes, it’s yet another thing I don’t like about iTunes.

Anyway, I’ve bought three albums in researching Amazon’s MP3 service and I think I like it. I’m still a little uncomfortable that I don’t have anything concrete to show now that ten more of my hard earned dollars are gone, but I guess I need to get my head out of 1995 and embrace this new age of digital music, social networking and cloud computing.

I was at the Picture People in the mall the other day getting some pictures taken. After we trod through the photography session with our Sunday best on, we sat down at the computer to see the shots. This year we also decided to get Christmas cards. With these cards, you always get to put a little message on each card. They allow you to choose all the gory details of the text including the font, style and color… and that’s where things get interesting.

Above our personalized text, there was “Merry Christmas” in a cursive font and an orangeish goldish color. Our photographer suggested that we use the same color for our message and proceeded to pick the color:

However, our photographer either didn’t know the exact RGB values of the color or didn’t have an advanced talent for matching colors, since we sat there trying to match the stupid color for about 10 minutes… “A little more orange”. “No that’s too orange.” “Maybe if we change the brightness.”

What it really needed was a custom dialog that allowed the user to pick from the common colors used in the cards. Or better yet, a color picker tool to simply click on the color of the text to auto-select it for the foreground color. Either way, the generic color picker dialog was simply too advanced and provided too many choices for the application. Sure it’s nice to be able to pick any color, but what’s the help in being able to pick any color if you aren’t able to pick the exact color you need?

Another example is the common file dialog. This allows you to open and save files to and from any folder. However, if you need to limit the available folders to save to or if you know that the files will always be in a specific folder, then using this dialog is overkill. Write your own dialog and simplify that step for the user. I almost always know where the file I want is located, but I can’t tell you how many times I’ve looked over the shoulder of a friend or relative and I see them struggling to browse to the right location and find exactly where they put the file they want. How many users ever save anything to any location other than the desktop, My Documents, or an external drive anyway?

Don’t get me wrong. It’s often right to just use the common control as is. You don’t want to customize every combo box you have, but you need to be able to identify when usability demands using a custom control. We almost abandoned the whole Christmas card thing, because of this stupid dialog. The difficulty in picking the color almost lost them the sale. So is the simplicity of using a common dialog really worth the risk?

On Tuesday, Miro v1.0 was released by the non-profit Participatory Culture Foundation. Formerly known as “The Democracy Player”, this little player improved both its name and the stability problems it was plagued with. After seeing this announcement, I immediately (well after a little thought of “do I really need another media player” followed by “yes”) went to download it.

After playing with it the past few days, I must say I like it. It’s a combination media player, bit torrent client and podcatcher, but this is all very much behind the scenes. With iTunes, I’m still very aware of the RSS behind the scenes and often have to paste in URLs. In Miro, I haven’t seen any address yet. It very much has a need-to-know attitude and hides things (like RSS URLs) that the user doesn’t need to know about. Anyway, let’s get on to the review…

After the install, Miro starts up with a little tutorial. In Step 1, you’re presented with a video that gives you a little overview of Miro:

In Step 2, you can easily add different groupings of channels. You’re not made aware of how these channels are synch’d or what’s behind the scenes, simply click the add button and it’s yours:

And then a little statement that tells you that it’s downloading and that you can start playing around:

So after the install and setup, you’ll have all your channels synchronizing and downloading content. You can easily see all your channels in the panel to the left and also the number of videos downloaded for each channel. There’s also a selection to view all your new (unwatched) videos as well as all the videos currently downloading. In the right panel is a view of the currently selected channel and all the the videos in it. The information and action buttons are very clear and very pleasing to the eyes. You can view the nitty gritty details of each item or just play happily with the overview of each:

As you can see they take their UI pretty seriously, which can be rare in free applications like this. But this isn’t just another pretty application. These guys obviously put great effort towards usability as well. For instance, after I installed it I was messing around with the options to see what was there. I found a field to change the downloaded video folder, so I changed it to reside on my data drive instead of the default. However, by that point videos were already downloading. So I made peace with the fact that I’d probably have to delete all the downloaded videos and redownload them to the new location, but after pressing OK I received this:

So now I don’t have to worry about any of that. Coolness. So what’s left to say about Miro? It’s clean. It’s slick. It’s polished. It doesn’t bog you down with details you don’t need to know or options you don’t care about. It’s simple to navigate and easy to add new channels.

My only problem is that now with Miro, Beyond TV, and the other video podcasts out there, I’m never short of video. If it were only legal to watch video while driving…

When I started writing this blog, I hosted the images in my posts on the same server that hosted the blog. A little later I started hosting the images off site in the name of increased load speed (load balancing across servers), keeping the bandwidth usage of my server down and to keep the images in a separate location in case I wanted to change my blog’s host (which I did: blogger -> wordpress -> my own host). I started using Photobucket simply because I had heard of it before and it seemed easy enough to use. Well, not too long after I moved all my images to Photobucket, I found a comparison of various image hosting sites. In the comparison, it showed that ImageShack had a higher bandwidth limit per image per hour. Since I’m a plan-for-the-future kinda guy, I thought I’d investigate ImageShack a little more. I signed up for an account and started using it for my next post. Half way through uploading my images, I just quit and went back to Photobucket. ImageShack just took too many clicks.

Here’s how I upload an image to Photobucket and get the URL:

1. Log in (if I’m not already):

2. The next page you come to both has a few edit fields to upload new images and also lists the last several images that you uploaded. From here, you can browse to or enter the local path of the image(s):

3. Now the image is uploaded and appears in the uploaded image list. You simply click (not double click, just single click) on the edit field containing the newly uploaded image’s URL and you’re done:

To accomplish the same thing with ImageShack, I do this:

1. Log in (if I’m not already):

2. Click on “Upload Image”:

3. A little popup dialog appears. From here, you can browse to or enter the local path of the image (only a single image can be uploaded from here):

4. After the image has been uploaded, it appears in the uploaded image list. From here, you need to right click on the image:

5a. If you click “View Image”, you’ll see a page showing the photo. You can then right click the image and copy the image’s location:

5b. If you click “Share It”, another popup dialog appears with various fields that you can then manually select the photo’s URL and then copy it:

Both websites have a multiple image upload, but since I rarely need to upload more than two or three images at a time I can just use the simple image upload. Either way, to just upload a single image is immensely easier and faster to do in Photobucket than in ImageShack. There may be a simpler path that I’m not aware of in ImageShack, but I haven’t found it. And even if that’s true, than that’s another strike against ImageShack; It would prove that it’s not easily discoverable either.

Sure Photobucket doesn’t have the prettiest or fanciest UI, but if we only look at pure ease of use and speed of uploading process, Photobucket wins hands down. If we don’t count login and if we use the mouse to do everything, Photobucket needs five mouse clicks to upload a single image. ImageShack requires eight mouse clicks (plus one to return to the main page, which Photobucket does not).

Flickr is another popular image hosting, but I encountered similar problems. It took nine clicks (plus one to return to the main page) and loaded numerous pages in the process. I know there are some tools to make it easier to do this, but I can’t see how any of these can beat Photobucket’s great ease of use and single page to do everything I need to do.

Yet another thing I love about Photobucket is the format of their URLs. Since I have an account there, I already know the format of the URL of each image I upload. It will be:

http://i183.photobucket.com/albums/x294/mike6024/<filename>

I can write up my post and fill in all of my img src’s before uploading any of the images. You can’t say the same about Flickr or ImageShack. So based on all that…

Why in the world shouldn’t you use Photobucket?