athe.la blog » usability

The New Resizeable TextArea in Firefox 4

Dan Cooper — Thu, 25 Mar 2010 12:37:19 +0000

So there I was, whittering away my time on facebook when I noticed I could resize the textbox of which I was writing my useless comment. My immediate thought was that facebook had opened up the ability to resize, but nay! In firefox 4 you now have the ability to resize textareas! Sweet! I’ve always admired it in google chrome and now us firefox lovers have it too!

In the bottom right, you see it. The 6 dots of resizeable glory

If you’re running the latest version of firefox, check it out here

Emphasising Primary Actions on User Input Forms

Dan Cooper — Thu, 04 Feb 2010 22:43:22 +0000

A pretty simple philosophy: If you make the primary action on a form or web page stand out, users will be more likely to click it. By emphasising these buttons or actions you are attempting to draw the user’s focus toward it. And by primary action, I mean the submit, send, save etc buttons; actions where the user is making progress. Secondary actions could be buttons like back, undo or cancel

There are a number of ways to emphasise the primary action. One of the easiest and yet still effective methods is to colour the button brightly to draw attention. Similarly you could reduce the saturation of the cancel button. The human eye is drawn to areas of colour which stand out from the page. Also culturally the colour green is associated with a positive action and so if the user is in a hurry or just speedily going through the form, when they see the green button they will know it’s the button that submits the information. Chances are that they won’t actually read the text of the button!

Notice how the send button is all bright and cheery in the facebook-blue colour whereas the cancel button is grey and boring. Other methods are also just as effective such as using a text link for the cancel action instead of a button. This is the one I much prefer as it informs the user that by pressing the link, it’s not going to post anything they’ve typed in on the form. Perhaps less tech-savvy users might think the cancel button would perform some function if they typed in their order details and requested to ‘Cancel’ the order. A link would completely resolve any issues as a normal web user knows that a link just redirects to a different page (in most cases).

Below we see a text link being used to give the user the opportunity to cancel the submission and return to where they came from.

Also it might be worth noting that rarely is the ‘reset’ button used on forms now. I don’t know why it ever caught on in the first place anyway… Who wants to fill out an entire form and then scroll to the bottom and press reset? It provides functionality that I’m sure was never used and when it was used it was never intended(!)

How to Vertically Align Text Within an Element

Dan Cooper — Sat, 16 Jan 2010 12:33:14 +0000

Just thought I’d let you all know of a quick trick to get your text to vertically align within an element without using nasty padding or margin hacks. If you know that your element is going to be a certain height, then you can use the css attribute ‘line-height’ and give it the same value as the height of the object. Please note that this will only work where there is only a single line of text.

The background colour I’m using is #EFF8F8

Here I have a pseudo-button and actually it’s just a text link within a

. Here’s the HTML and css:

Buy Holiday


p.actionbutton
{
margin:0 auto 1em auto; /*center the button on the page*/
text-align:center;
width:124px;
height:44px;
}

p.actionbutton a
{
line-height:44px; /* same height as actionbutton element */
font-size:1.2em;
display:block; /* makes the whole area clickable rather than just the text */
text-decoration:none;
color:Black;
background-image: url('smartbutton.gif');
}

/*rollover*/
p.actionbutton a:hover
{
color:DarkOrange;
background-image: url('smartbutton-down.gif');
}

Here are the source images for you to play around with

Normal button state

On mouse rollover

TimeToggle django custom filter

Dan Cooper — Tue, 21 Apr 2009 18:21:45 +0000

It’s always good to keep web pages clean and free of clutter to focus the user experience on what really is important. For this matter, it’s nice to be shown the difference between the time now and the time something was posted in a informal way such as below:

So if you still wanted this uncluttered view but still desired to allow the user to see the exact moment that was, then maybe you’d have to let the user check a checkbox in their user settings are show an exact time when the view of that object is more detailed. However I’ve come up with the idea that on mouseover the nice and informal ‘time since’ can be replaced with an exact time of the post in an easy custom filter.

Here’s the same chirp as shown above but with the mouse hovering over the time.

When the mouse is rolled back out, the informal time since is displayed again.

Seamless user experience showing more detail when the user wants it

from django.utils import timesince, dateformat

@register.filter
def timetoggle(time, id):
link = " about "
link += timesince.timesince(time)
link += " ago  at "
link += dateformat.DateFormat(time).format("g:ia o\\n l jS N Y")
link += ""
return mark_safe(link)

Use in the following way: {{ time_object|timetoggle:unique_identifier }} Here’s an example: {{ post.pub_date|timetoggle:post.id }}