Haven’t found anything suitably inspiring for a while. But this one from Copyranter made me smile.
Being an expert in social media is like being an expert at taking the bread out of the refridgerator.
Haven’t found anything suitably inspiring for a while. But this one from Copyranter made me smile.
Being an expert in social media is like being an expert at taking the bread out of the refridgerator.
When shopping online, while comparing product costs is important, often what I need to compare is the total ‘cost-to-the-door’. This is particularly the case when shopping at overseas sites – something those of us in Australia do most of the time.
Different sites/vendors have different rules about shipping. And the variations in shipping options can easily negate any variation in original price.
So as a general request to web store developers and vendors, please allow visitors to determine the shipping cost prior to checkout and/or prior to registration. Don’t make me sign up and complete all my mailing details before I can determine the actual price.
Really have two options if wanting to be upfront about shipping costs.
This is the UK Book Depository model. One price is quoted for any item. And that price includes delivery.
Note technically the site states delivery is free worldwide. But we all know that really means they just include it in the initial price. That’s why they’re not the cheapest on first quote. But the convenience of knowing the final price up front far outweighs any interest in comparing with other stores. I’m not going to search for the same book in Amazon (for example), add to basket, check out, log in, enter shipping details, etc, just to get a price to compare with the first number offered by UK Book Depository.
Another consequence of including delivery in the initial cost is it removes any order friction around postage optimisation and bundling. For example, Amazon postage appears to get cheaper the more books I order, with the consequence that if I want a book I’ll add to my basket but not actually order until a few more items in there to lessen the postage overhead. But then what actually happens is they sit there long enough for me to lose interest and remove them. With UK Book Depository there is no benefit in bundling orders together. Which means all orders get submitted immediately. Before I’ve had time to reconsider.
Simple tool to estimate shipping. Close enough is good enough at this stage of the purchasing process.
For example, look at how Think Geek does it. As soon as I add an item to my basket, I get a simple shipping calculator. This gives me a figure close enough to the final value that I can immediately determine whether to progress with the order or not.
Already stated what not to do: don’t make me complete all my order details before I get a figure for shipping.
To that essential rule, I’ll add an extension particular to us overseas buyers. Don’t make me complete all my order details before you tell me that you cannot ship the requested item to me. Too often some protectionist racket prevents requested items being sent overseas. Nothing more annoying than completing your forms before being told “sorry, not available in your country”.
Enough people. Please stop building forms where I’m asked to confirm a field I can see quite clearly. Like this example:
Or here’s another example. Which shows right and wrong use of duplicated fields and (horror or horrors) disables cut&paste.
The only requirement for a confirmation field is when entering a value that is not visible, i.e. a password. For anything else I can see the value I’ve typed and “confirm” it’s correct without retyping. Don’t make me repeat myself.
If worried about validity, beef up your error-checking. Don’t delay me with pointless re-typing (or more usually, cut&pasting).
And another thing. While making me repeat myself is bad enough, making me repeat myself and then disabling cut&paste in the repeated field gets you your own special corner of hell.
From Robert Brault:
A blogger is an average person who happens to have a need to count his friends every half hour.
I’m a firm believer that one of the most effective ways to learn is to study mistakes, yours or other peoples. Which is why I used to live at Web pages that suck when first starting out in developing web content.
Just come across a similar, humoured, approach to usability in the Bad Usability Calendar. Highlights a different usability issue for each month. Which means it’s not much use as an actual calendar but very useful as a quick usability prompt.
Granted a bit late now to pick up the 2009 edition. But watch the space for the 2010 copy.
From Carl Sagan:
All of the books in the world contain no more information than is broadcast as video in a single large American city in a single year. Not all bits have equal value.
[Had a few people ask me about this. Easier to write it down....]
By default, links in HTML:
Note this the last rule “link has been visited” is slightly different to the expected “link has been clicked”. Your links can therefore change their appearance to indicate a visit without ever being clicked. For example if you have two links to the same page, both will change colour when you click one of them and visit the target page.
To change any of these defaults you simply need to define an alternate style for the links.
Be careful when updating the default styles for your links. Users are used to the defaults given above.
If you change them too dramatically some users may not be able to identify your links and not access your content. If changing the styles, ensure you provide some other method to identify the links as links. For example, position in an obvious-looking menu, use different colours/fonts, add an icon or image, use standard wording, etc.
A link is added using the <A>
tag. However adding a style for this tag is slightly complicated because the link has four different statuses, called pseudo-classes, and styles can be set for each:
There are some rules about the order to define the pseudo-classes:
For example, assume you want to remove the underline style for the link, but show the underline when the mouse hovers over it. Additionally you do not want visited links to show a different colour to unvisited links. A sample style definition would be:
A:link, A:visited { color: #0066ff; text-decoration: none; } A:hover, A:active { color: #0066ff; text-decoration: underline; }
Note how the different pseudo-classes for the link tag are identified by “:name”. Eg A:hover defines the style for the hover status of the link, etc. Also note how the same definition can be used for multiple statuses simply by separating the names by commas.
Obviously you can do anything you want on those styles. For CSS text-decoration
is the attribute that determines underlined or not.
To make use of these styles on your page you need to include your new style definition:
<HEAD>
section (add a <STYLE>
section within the head), orTo add the above definitions in the document, add a <STYLE>
section in the document head. For example:
<head> <style> A:link, A:visited { color: #0066ff; text-decoration: none; } A:hover, A:active { color: #0066ff; text-decoration: underline; } </style> </head>
To link as a separate stylesheet, save the style settings in a text file (don’t include the <style></style>
tags) and then add the link to that file in the document head. For example:
<head> <link href="styles/main.css" type="text/css" rel="stylesheet" /> </head>
If you want to add comments/descriptions in your stylesheet file (you know you ought to!) use /* … */ to indicate those comments.
Only other point of interest is that you can also set styles for your links depending on where they appear in your HTML. For example we often use links in table headings to allow sorting (click on heading to set order, etc). Since headings have a different default style, we need different link styles just for headings:
TH A:link, TH A:visited { color: #ffffff; text-decoration: none; } TH A:hover, TH A:active { color: #ffffff; text-decoration: underline; }
Notice how this CSS just refers to links within the tag to allow me to finetune their appearance.
Once you know the pseudo-classes for manipulating link appearance, you are obviously free to make any changes supported by CSS. All these pseudo-classes are part of CSS1 – the full CSS1 specification is on the W3C website.
A useful primer on using CSS and styles is provided by W3Schoools.
From Dr. George Lundberg:
Information on the Internet is subject to the same rules and regulations as conversation at a bar.
From Benjamin Pollack:
“There is a tremendous amount of spit and polish that goes into making a major website highly usable. A developer, asked how hard something will be to clone, simply does not think about the polish, because the polish is incidental to the implementation. ”
The quote was part of a response to a suggestion to duplicate Stack Overflow, and thus save subscription fees to the original. You can read Benjamin’s entire rebuttal, or Jeff Attwood’s succint commentary for more details. Jeff’s article in particular does a good job in summarising what “polish” entails, and by doing so makes it clear how such polish is integral, not incidental, to eventual success.
PHP support for arrays is fantastic, particularly for those of us with a history using ASP. Sorting a single-column array is straightforward (there is a sort() function). But what about sorting a multi-column array? Well, there is a function (array_multisort()) that does it, but understanding how to use it is a challenge. This article hopefully provides a simpler explanation.
If you are using a multi-column array to store data from a database, it is much simpler and faster to get the data directly from the database in the order required (use the ORDER BY clause in your SELECT statement). This function is best used for multi-column arrays that are generated locally, or only in part from a database.
To sort a multi-column array:
Sort type can be:
Sort regular uses standard ASCII order (“ABa” is 3 characters in regular order). The other two options operate more logically (eg “aAB” is the same characters now in string order).
Sort order can be:
For example. here’s a 3-column array we want to sort:
<?php $data[0]['name']= 'Google'; $data[0]['url'] = 'http://www.google.com'; $data[0]['rank'] = 45; $data[1]['name']= 'Yahoo'; $data[1]['url'] = 'http://www.yahoo.com'; $data[1]['rank'] = 17; $data[2]['name']= 'MSN'; $data[2]['url'] = 'http://www.msn.com'; $data[2]['rank'] = 6; ?>
Assume we want to sort this array by rank (ascending order). The first step is to store the rank column as a separate, single-column array. This is easy to do using the foreach command:
<?php foreach ($data as $val) { $sortArrayRank[] = $val['rank']; } ?>
To sort by this column, use array_multisort and pass our newly created rank array as the first parameter:
<?php array_multisort($sortArrayRank, $data); ?>
To change the sort to descending order, add the required order parameter after the 1-column array:
<?php array_multisort($sortArrayRank, SORT_DESC, $data); ?>
To sort by more than one column (eg to sort by rank, then name), simply repeat the above steps for the subsequent column(s) and add the paramaters to the list.
<?php foreach ($data as $val) { $sortArrayName[] = $val['name']; } array_multisort($sortArrayRank, SORT_DESC, $sortArrayName, $data); ?>
The official explanation of array_multisort can be found in the PHP manual.