Tag Archives: web

Shipping is part of the product cost

Leave a reply

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.

How to do it

Really have two options if wanting to be upfront about shipping costs.

(1) Include shipping in the initial cost

This is the UK Book Depository model. One price is quoted for any item. And that price includes delivery.

Quoted cost = final cost to my door. Simple.

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.

(2) Provide a mechanism to quickly determine shipping costs

Simple tool to estimate shipping. Close enough is good enough at this stage of the purchasing process.

If shipping cannot be bundled, then allow me to calculate (or at least estimate) the shipping before entering any personal information. How much do you need to estimate shipping? Nothing more than a zip/post code and/or country. And I won’t be upset if I have to enter that twice; once to estimate and once to actually checkout.

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.

How not to do it

Already stated what not to do: don’t make me complete all my order details before I get a figure for shipping.

Don’t make me sign my life away before quoting postage.

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”.

Stop this UI Madness: Confirming visible fields

Leave a reply

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.

Bad usability calendar

Leave a reply

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.

CSS 101: Changing link appearance

Leave a reply

[Had a few people ask me about this. Easier to write it down....]

By default, links in HTML:

  • are underlined
  • are in the same font as the rest of the document
  • change colour depending on whether the link target has been visited or is yet to be visited in the current browser session.

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.

A word of warning before we start

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.

Styling links based on their status

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:

  • A:link – link that has not been used, and the mouse is not pointing at it
  • A:visited – link that has been used, and the mouse is not pointing at it
  • A:hover – link that has the mouse pointing at it (but not clicking it)
  • A:active – link (visited or not) that has the mouse clicking on it

There are some rules about the order to define the pseudo-classes:

  • a:hover MUST come after a:link and a:visited
  • a:active MUST come after a:hover

An example

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.

using these styles in your page

To make use of these styles on your page you need to include your new style definition:

  • in the <HEAD> section (add a <STYLE> section within the head), or
  • as a separate, linked CSS file

To 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.

Styling based on location on the page

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.

more information

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.

Quote of the week (13 July)

Leave a reply

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.

Sorting a PHP multi-column array

11 Replies

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.

How to

To sort a multi-column array:

  1. determine which columns you want to sort by
  2. for each column you want to sort by, copy its contents into a separate, single-column array
  3. build your array_multisort() command:
    • add the new single-column array as a parameter
    • optionally follow the array with parameters for sort order and type
    • repeat above two steps for each column to be sorted on
    • complete command with name of multi-column array to be sorted

sort type and order

Sort type can be:

  • SORT_REGULAR – compare/sort normally (default)
  • SORT_NUMERIC – compare/sort as numbers
  • SORT_STRING – compare/sort as strings

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:

  • SORT_ASC – ascending order (default)
  • SORT_DESC – descending order

For example…

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);
?>

more information

The official explanation of array_multisort can be found in the PHP manual.