Thursday, February 24, 2011

Windows Mozilla - on Android

I was reading a review of the much-anticipated Motorola Atrix, when I stumbled upon this beauty:



Nothing like running Windows Mozilla on an Android phone!

Friday, February 11, 2011

UI Guidelines for web developers

Now I know that there are no hard-and-fast rules regarding user interfaces for websites, but I thought I would put in my 2 cents.

I was thinking about button rollovers (think :hover pseudo selector) and in trying to draw a parallel with physical buttons a few ideas came to me.

TACTILE SENSATION

Physical buttons have a tactile sensation BEFORE you push them, letting you know that your finger is in the right place before you push down on them. On web apps, we don't have that luxury, at least not yet.  Enter the rollover.  We need to give the user a visual indication akin to the tactile sensation one receives when lightly touching a button in reality.  So we change the style of button, here is a good example of such a change:

Normal State:









Rollover (hover) State (slightly lighter in hue):






Down (clicked) State (less bevel, less shadow):








*Feel free to take these images if you want them


The normal state has a clearly defined bevel, a high drop shadow and full opacity on the gradient.
The hover state has a lighter opacity on the gradient.
The down state has a "flattened" bevel and a lighter gradient with almost no drop shadow.

It's very important to not confuse the user by using the down state for the rollover.  It is very tempting to only create 2 images and shorten the time it takes to make the style.  If you make the down state the same as the hover state, users may be confused and think that a rollover causes a click.

It must be very clear the difference between a rollover and a click because we don't have that tactile sensation like in real life.  The rollover is a substitute for lightly putting our finger on a key and lets the user know, "I've seen your cursor and you are in fact in the right place to make something happen."

Drop down list vs Radio button List


When should I use a radio button list vs a drop down list?

Use a radio button list when:

1. The number of items is finite or guaranteed to be fairly small.
2. You need the user to make a conscious choice and not just set a default (even though you can set a default if you want).
*I've used radio button lists for true/false questions, month selection, year selection, and others.

Use a drop down list when:

1. The number of items is larger than would fit in a radio button list.
2. The number of items changes greatly over time.
3. You don't care if the user makes a choice or not (you can always set a default value though).
     a. I've seen a lot of users not change the selection on a drop down list so the developer puts a blank choice at the top.  This leads to having to handle the blank choice in code by putting some null value or a -1 or something of the like.  Again, if the user must make a choice and the number of items is small, use radio button lists.


Any comments are welcome,  thanks for reading!

Thursday, February 3, 2011

jQuery Datepicker & Date Selection

So I'm trying to set a property on my jQuery datepickers that I found out later is called "defaultDate", when I discovered this thread:


A quick summary: 

These guys are disputing whether or not the date should change in the textbox when you choose a month or year.  Currently, the only way to change the selected date is to click on a date in the calendar part of the datepicker.  Choosing a different month or year will not update the date until you do so.

I found this, that will alter that behaviour (see bold part):

 $("#FromDate").datepicker({
        changeMonth: true,
        changeYear: true,       
        defaultDate: "-40y",
        onChangeMonthYear: function (y, m, i) {
            var d = i.selectedDay + "";
            if (d.length < 2) d = "0" + d;
            var m = m + "";
            if (m.length < 2) m = "0" + m;
            $('#FromDate').val(d + "/" + m + "/" + y);
        }
    });

So the question in the forum that they are debating is: "Should the selected date change when the month and year change?".  To which I will answer an unequivocal, YES!  I don't even think this needs explanation, when you change something, you expect it to change, end of story!