Web Development by Joe Sak » Javascript

Login Usability: Am I in or out?

Joe Sak — Wed, 01 Aug 2007 13:41:44 +0000

UPDATE: After making this post, and refreshing the parallels forums page, I was presented with “Welcome, Joseph Sak” instead of a login prompt. So maybe I got it wrong, or they did, but this post still stands!

The Parallels Forums recently got some redesign and information restructure, which all looks good and is organized quite well. But they’ve missed a couple really easy issues with their login functionality.

When you log into the Parallels Forums, it takes you to a “logging in” screen and redirects you back to where you were, which is fine, but what is this?!

Am I logged in or out?

This is what you see in the top right of the forums after logging in. Apparantly, I’m logged in because I can start threads, but unless I click on the “+” symbol in the top left and opening a post-thread page, I have no visual cue that I am logged in.

Originally, with the old design, you saw your name and a “logout” link next to it. Or you could click your name to edit your profile. This was highly usable and gave immediate feedback to the user that yes, John Smith, you are logged in.

Now, Parallels, if you’re not willing to clean up that little mess, why are you making me erase “Login” from your textbox before typing my user name?

You can solve this with a simple function.

onclick="eraseInput();"


...
function eraseInput(){

     if(this.value == "Login"){

        this.value = "";

     } else { return false; }

}

Pretty simple usability points, and I can’t believe Parallels just got rid of them with their new design.

Fix your Javascript Print Style Switcher for Internet Explorer

Joe Sak — Mon, 19 Feb 2007 21:08:03 +0000

So you’ve decided to use javascript to swap out a print style css sheet that basically hides a bunch of divs and maybe widens the content area. Perhaps your re-color the links and the text and fix the font sizes.

You try it in Firefox and it prints perfectly, but when you print in IE, you’ll notice IE didn’t really print your printable version.

So you think, ‘Ok I’ll add media=”print” to my stylesheet link!’ and then you refresh your page, try your Print this Page link, and nothing happens! And it still prints the wrong version! What to do?

Well, your old pal Joe here figured it out.

Here’s what you do:

Create a separate stylesheet called print.css
Add this code to your master stylesheet:
@media print { @import "print.css";
}
Implement your javascript for making the stylesheet override your master stylesheet
Test
Enjoy!

This allows you to switch to your print style so it is preview-able before printing and also tells IE to use print.css when it prints a page on your site. So incidentally, if a user just clicks print in IE without switching to your style, they will still get your printable version. I suppose this might cause confusion but considering the most reasons for making hard copies of digital information, it probably shouldn’t pose too much of a problem for your average user.

Now if your user wants to have a pretty print out of your website because they can’t access a computer to show it to someone else away from home, they’ll probably get stuck with the fact that IE does not print background images and colors by default any way.

FrogJS: A new twist on LightBox

Joe Sak — Fri, 26 Jan 2007 20:06:25 +0000

Eric just released a phenomenal bit of javascript called FrogJS. Basically it allows you to do paging between your pictures in a lightbox-type gallery.

This is a pretty neat little script. My only qualm with it is that it’s currently 760px wide. It’s not exactly going to work within your standard website template. I think the point of the typical lightbox is that you can throw your images into a template where your content area is typically 500 px in width, and the image pops up with an AJAX-y effect of muting out the rest of the screen.

Perhaps this concept can be taken further in this regard! I will definitely be playing with this.