Option one: links to new page

Having separate web pages for each page of content is original flavour.

• Pros: Gives you N pageviews instead on one (if you’re worried about that metric), works on non-JS browsers
• Cons: Slow, as a whole new pageload is required

Here’s an example from Tom’s Hardware. This shows how many pages exist, and also what’s on each (so you can just skip to the conclusions page, for example.)

Option two: one page, AJAX changes the view

Here, all of the content is loaded in the initial pageview, but the pagination buttons switch what’s displayed to the user.

• Pros: Faster than a new pageview
• Cons: More complex to code (if you’re rolling your own)

Here’s an example from YouTube, but you’ll also find this all over the web on most large sites. Start watching the video, and click the page numbers at the bottom to get more comments. You don’t get another pageload – not only would that be slow, it would interrupt the 80s goodness you’re hearing.

When designing these, there’s a problem. If your list of stuff is kinda short – great. But if you have a long list, you scroll down to the bottom, click the page 2 button … and you’re at the bottom of the second page, not the top. To put it another way, you’re reading item 1, item 2 … item 10, then click Page 2, and instead of looking at item 11, you’re looking at item 20.

There are some solutions to this – Disqus, which powers sites like Engadget, collapses the whole comments section and re-expands it so you’re looking at the top. Steam does some batshit-crazy scrolling of the page and list to get you back to the top.

Option three: Don’t use pagination

If you’re feeling bold, you can just let the whole page load with every list item.

• Pros: Easy to code, easy to understand
• Cons: Unworkably large pageloads for very long lists (e.g. user generated comments)

A hybrid solution is using a MORE link that appends the next page to the current one. The nice part is that the list now goes from item 1 to item 10, then item 11 to item 20, and so on – the list order is easy to interpret.

• Pros: Easy to understand
• Cons: Harder to create references to data (e.g. item X is on page N is now an invalid reference), your list can look weirdly long compared to the rest of the page

You can see examples of this on Quora and other sites.

Which one should I use?

First – if you don’t need pagination, don’t use it. Nothing is as easy as having the whole page in front of you. Consider what your pageload times will be without it, both on desktop and mobile. If it’s too heavy – either right now, or in the future when a thousand people have created comments – consider the hybrid solution. Can you append items to the current list? Remember that from the user’s point of view, they are reading down a page of text – make it as easy as possible for them to continue that reading.

Here are some products that are close to the implementation model:

• The command line
• IRC
• Opening files with VLC

Here are some ideas that pull implementation closer to a mental model:

• An email inbox
• A desktop in your operating system
• Folder icons in Explorer / Finder / GNOME

It never occurred to me that the same could happen in real life, but here it is, from a gym in Birmingham, UK. This is a sheet that members use to refer their friends (presumably in return for a discount).

Should we do it?

Just because we can do a thing, it does not necessarily follow that we must do that thing.

People hold these two views about interface animations:

1. Take the animations off! They are slow and I want to concentrate on function – this crap just gets in the way!
2. I will put in animations because I can. L33t

There is a third way, which is this – make your animations useful. I’ll explain by showing an example of a site that lights the way, and a site that ballsed it up.

This site lights the way

bandize.com

Behold, Bandize.

As you click through the navigation links – Show / Tours, Accounting, Contacts and so on – the content in the lower box sweeps linearly. If you go from link 1 to link 3, you see the content from link 2 sweeping by quickly. The list of links is your map, and the content box below is your zoom into that map.

The animations directly describe how your control is related to what you’re seeing, and that’s good.

This site ballsed it up

widgetbox.com

Behold, widgetbox.

This is a really similar content discovery style – a set of links (the four grey panels to the right) that control a panel (content to the left).

But this time, there are a few errors.

• Firstly, path from navigation links to content doesn’t match the animations. The content animation sweeps linearly along to the right, same as Bandize – but the navigation links are actually arranged in a zigzag. Try it – it’s confusing as heck.
• The grey panels activate on hover rather than click, which makes it too easy to navigate by mistake rather than intention.
• There are two more ways of navigating through content (I circled these in orange above). One, a play / pause control that’s almost invisible, and second, iPhone style dots (that actually do map correctly with the content animation – they’re in a line.) Both of these elements are clutter.

Conclusion

Using animations is easier than ever, but be careful. Don’t add them for their own sake – make sure they are helping the user understand what’s happening and why.

A few tricks seem to be happening:

• A transparent proxy loads your requested images, but sends you a more compressed version of your image instead.
• On every pageload, a script tag to insert this javascript file is injected into the page header. This file allows a user to request the full quality images with a keyboard shortcut after pageload. Instructions are given with a tooltip on every image.
• All unnecessary formatting is removed from the page source, i.e. spacing, tabs and so on from the HTML.

Here’s what the compressed image looked like:

Here’s what the original image looked like:

How much bandwidth did this save?

Here’s what we know.

• In my very non-scientific testing, the extra compression seemed to approximately halve the size of the image delivered.
• According to the YUI people, average image pageweight is around 50% due to images.

Therefore, T-Mobile should be saving around 25% on every pageload. This comes at the cost of a slightly diminished user experience for users, maintenance costs for the proxy and script files (albeit minimal), and potential subtle brand damage (a user might perceive T-Mobile delivered internet as worse quality).

Option one: Use vi

The cleanest way to develop code on that box is to SSH directly in there, and use vi, but it’s not all roses.

Advantages:

• Great syntax highlighting
• vi is frighteningly fast if you know how to use it
• You can use the same environment from any laptop running os x or linux, and it’s instantly familiar
• You don’t even need to install any software locally

Disadvantages:

• vi’s learning curve

For newbies like me, watching someone who’s familiar with vi makes me feel like Emmy from Mannequin. (“Where did they hide all the musicians?”)

So, you could spend a long time learning vi, or try something else.

Option two: Use something else

If you’ve ever used Dropbox, you’ll know that having a remote filesystem mounted in Finder makes working with files super easy. Luckily, there’s some great OSS around to help you do just that. Here’s how to get started:

1. Download and install MacFuse from here
2. Download and install MacFusion from here

After restarting your mac, you’ll be able to mount both SSH and FTP servers right into your filesystem. Now, you can use your text editor of choice on the mac, directly working on the files you want to play with.

Advantages:

• Use any text editor you want (I use TextWrangler because I’m cheap)
• Use all your mac’s keyboard shortcuts

Disadvantages:

• You need to install some software locally, so you’re screwed if you have to move between laptops

Being a vi numpty, I chose this second path, and so far it’s working a treat. However, there is a bug in the current version of MacFusion (v2 final).

Macfusion Bug on sshnodelay.so

When connecting over SSH, you’ll note that the connection can’t be made. You’ll see a “remote host disconnected” error, and on examining the log in MacFusion, you’ll see this:

dyld: could not load inserted library: /Applications/Macfusion.app/Contents/PlugIns/sshfs.mfplugin/Contents/Resources/sshnodelay.so

The solution is to rename the file to something else. Head into Terminal, and type this:

cd /Applications/Macfusion.app/Contents/PlugIns/sshfs.mfplugin/Contents/Resources/
mv sshnodelay.so MOVED_sshnodelay.so

… and voila, you can now mount over SSH no problem! (source)

First the obvious parts:

• Being a successful blogger takes a long time and is a lot of hard work.
• Even doing that won’t make you boat loads of cash.
• You need to stay disciplined in your posting.
• Get other sites interested in you through reviews, guest posts & media connections.
• Use primary market research.

Now the interesting parts. Chris’s position is that Adsense ads suck, because you’re trusting Google to figure out what’s contextual. If your site links out to stuff, you’re telling your visitors that if they trust you, they should trust this ad, and that link is being driven by an algorithm that could well be wrong.

I would argue that most people understand the weak trust link when they see Adsense embeds, but it follows that a weak trust link means that the advert is going to suck at being effective anyway. I’d not thought about this before, and it’s definitely worth considering.

Chris’s solution for monetisation is the freemium model – a blogger’s product is information, so why now charge for some of it. It’s not going to work for everyone, but Chris has made it work for a non-targeted blog, so that’s encouraging.

In reading it, a few quotations stuck out:

• “I work harder than most people I know, and the other unconventional success stories mentioned in this report do the same.”
• “I derive too much emotional validation from the daily state of my network. When lots of people are subscribing, the comments are up, and the links are rolling in, I feel great. When the numbers are down, I feel bad.”

Right there is the real reason Chris’s blog has been so successful – he clearly works his ass off.

The worrying parts

Interesting fact: a lot of the most popular blog content is about how to become a popular blogger. The whole hook of Chris’s report is on how to be just a successful as Chris. I’m not disputing his incentives at all, but when you strip away the excellent graphic design and verbiage, that’s what it boils down to.

Here’s the problem. Folks read his report because they want what he has, but for whatever reason (family, the day job and so on) they can’t invest the time needed to actually DO it. If they did, thousands of super successful blogs would start to spring up. It never happens. Even if it did, since global web attention is a stretchy-but-limited commodity, as supply increases, price goes down and folk spend less time with one individual blog.

I’m not saying it’s a pyramid scheme – Chris isn’t charging, isn’t benefitting, and in fact, licensed this report with CC-BY. But some elements are there – one successful guy at the top and a lot of people who want but can’t attain the same success.

• Keep system status visible: Is there a web page loading right now? Am I in private browsing mode? The user should be kept aware of the current status, and feeback on modes should be timely. When a user doesn’t know which mode we’re in, this is called a mode error.
• Systems should mirror the real world: Engineers want to implement whatever the technology makes easy to implement – but users want to use something that mirrors the world as they see it. Some technology elements are still confusing (e.g. Fx asking if you want to resend POSTDATA) but some are now commonplace (404 errors or the http:// prefix). Real world elements can appear in icons (padlocks, floppy drives, gold stars) or replicating a real life method (e.g. having a desktop).
• User control & freedom: Don’t prevent users from doing certain things. For example, in Fx3 it’s impossible to bring back the Most Visited folder on the Firefox bookmarks toolbar if you delete it.
• Consistency & standards: Be consistent internally with the way you’re always represented things inside your application, and be consistent externally with the wider OS or peer applications. These could conflict – Fx changed the bookmarks icon in v3 from a bookmark to a gold (or blue) star to fit with other browsers.
• Recognition not recall: The command line requires you to remember everything, which is why most users find it too tough to use. Ubiquity suffers from this in a way – although it does a lot to help you, it can’t do anything unless you type something.
• Flexibility & user efficiency: Toolbars that are malleable are flexible, but it’s tough to create complete flexibility, as very flexible UI systems (like Ubiquity) require some skill to use completely.
• Minimalist design: Visual clarity is good. Reduce redundant elements (e.g. the address bar URL, the window title and the tab title). Combine elements logically – the iPod wheel combines a set of functions into one element while keeping it easy to use.
• Error prevention: fix common user errors like commas in URLs.
• Help users recover from errors: proactively provide contextual help, like the internet connection wizard in Safari.
• Help and documentation: ensure users know where it is and can access it.

Balancing things out

The keen ones amongst you will have spotted that not all of these things are achievable – balances are needed between these elements, and the correct position depends on the user and the application. Here are the contradictions – and the balances – that I can identify.

• More user control and freedom can mean less minimalism, less error prevention and less consistency. The user can reconfigure away from standards.
• More recognition can mean less minimalism. The command line is an awesome interface for the right kinds of people.
• More system statuses can mean less minimalism. Where do you put the throbber in a chromeless browser?

Creating an awesome design – it seems – is about finding ways of winning on both sides of these balances so that compromise becomes less necessary. At the same time, we must recognise that no system is going to be perfect for everyone – as the market becomes more diverse, the interface must understand and trade off different requirements in that market.

Here’s a video I knocked together, which shows a very rough mockup of the UI. The basic idea is this – to extend pie menus in such a way that they can help train users into using mouse gestures, and remain as a backup for more complex commands.

Mozconcept: Pie Assisted Gestures from Shahid Hussain on Vimeo.

rEFIt, a wonderful boot manager for Mac, peers at all of your partitions when it boots, takes a guess at what OS is on there and shows and entry in the larger icon list at the top. To figure out that you have a Linux partition, it will look at the MBR of that partition and go from there.

If your icon has disappeared or been replaced with the generic one, this is where the problem is. So here’s how to fix it.

• Boot into Linux using a Live CD like the Ubuntu Ibex install CD.
• Open up a terminal.
• “sudo grub”
• Now, find your Linux partition with “find /vmlinuz”
• It will return (hd0,2) or similar. Use this to install grub like this: “root(hd0,2)” and then “setup(hd0,2)” and finally “quit”.

Once you reboot, your rEFIt icon should be restored, and you should be able to boot back into Linux no problem.

• Backup everything you might want to keep from your Mac just in case. Resizing partitions is always risky!
• Install rEFIt on the Mac.
• Make enough space on the Mac for your new partition.
• Create an Ubuntu Ibex installer & live CD.(You can just download the .iso and burn it with Disk Utility.)
• Boot into the live CD by holding down the “c” key when you reboot. Don’t install right now, but head into GParted.
• Just resize the HFS+ partition that contains your Mac. Keep your fingers crossed that it works OK. (It did for me).
• Run the Installer, and go to Manual mode when you get to the partitioner. From here you can do what you want – I created a 20gb partition for root and 4gb for swap partition.
• Finish the installer and reboot. Here’s a fun bonus – rEFIt will automatically detect the new partition, and just create a spot in the boot menu for you.

And that’s it!