Web 2.0 Blog

With the recent release of the iPhone 3G I felt a post about the likely implications for the future of the web, regarding this device was relevant. Having been briefed about the iPhones capabilities, it seems apparent to me that this is the furthest point in pervasive computing that technology has taken us so far. For those unfamiliar with the term ‘pervasive computing’ or ubiquitous computing’, it is basically the post-desktop model of human-computer interaction whereby the computing system becomes integrated into every day life.

Whereas the traditional desktop HCI model was easier to predict how, when and why the device is being used, with a ubiquitous device like the iPhone, it is much more difficult to predict its use as it can be used for many more activities, interacted with in more ways, and vitally in practically any location. This throws up a host of HCI and usability issues that Apple appear to have controlled in a very smart way.

It seems apparent to me that interacting with the web in a pervasive way such as this will one day become the standard of computing, meaning web designers and webmasters will have to adjust how the web is generally presented. With the Internet wherever you go and in a much more accessible format - it is surely preferred to sitting at a desktop in an office or study and browsing using traditional methods. Why do we even need a web browser? The iPhone operates just fine without one, although admittedly the range of tools available is severely limited at this time. The difference is that Apple hasn’t tried to mimic the traditional web browsing standards, it has rewritten these standards and has just let us get on with it. No longer is an address bar needed when your favourite sites are located in an iPhone folder which need to be simply pressed to be accessed. Larger web 2.0 companies such as eBay and Facebook have released their own plugins for the system for improved and unique access.

Web browsing aside, the iPhone uses a wireless Internet connection for many other services, which are all located and stored on the same unit. GPS and location awareness, instant email access via cloud computing, news, stock prices and even additional features such as the ability to use the system as a remote control for your TV all add up to a device that you can centre your world around, except now the computer integrates into your world.

Following a recent optimization campaign, I was met by this terrible signing in interface courtesy of web advertising site Clickey.com. I felt I should point out the problems with it as it is a usability problem that should not be occurring in today’s web environment.

1. Firstly the terminology is way off. A task which involves registering for an account or adding your domain should not be referred to as ‘Request a password‘. The password is merely a formality when registering at a website, it should not be promoted as the prominent reason and result of the task. Then, check out the submit button - ‘Send Password‘ - I though we were requesting a password, why am I suddenly sending one?
2. From what I can tell, the box on the left is the traditional ‘login’ box, and the box on the right is the equivalent of a ’sign up’ box. They shouldn’t be of equal size as it’s not obvious which one to use, irrespective of the poor naming of the boxes. The login box should be the most obvious and take up most of the space. Preferences should be made to the existing users. A small, but clear option should be made for new users to sign up for an account underneath the main box so all users can think as they see the page: “I can’t login yet so I’ll carry on looking down the page to find where I can sign up.”
3. There are too many instructions too. Why should a box with three lines of instructions be required just to create or login to an account? It’s so unnecessary it’s untrue. Also, underneath each text box where you’d type in your details there’s more text telling you what to input. A usable form would make this obvious without additional instructions. They also put the text in red - which often appears on submitted forms where invalid details have been entered.
4. Lastly, I don’t think the positioning of the boxes works. If this is the way you have to do it then the login box should be on the right with the yellow box header which makes it stand out more. Traditionally users tend to see the furthest right of the two objects of as the most important.

The Yahoo! sign in box shown below is pretty much the perfect example of a sign-in box and it checks all the boxes of the requirements I just went through in terms of usability. The content is ordered and positioned correctly, there aren’t too many instructions, there an obvious but secluded area to sign up, there support for forgotten passwords or additional help, there’s an option to stay signed in, and it’s all contained in one simple, user-friendly box.

As a web developer I use the Internet a lot as you might expect and I also have to fill out a lot of forms. Form building should be a University course on its own, but I’d like to relay some guidelines for button usability as a lot of people are making some basic mistakes.

1. Appearance

If you’re going to be using an actual button on your site for any purpose, make it actually look like one and it will greatly improve your chances of the user clicking on it. It all goes back to the basics of affordances. A chair affords sitting, a ladder affords climbing and a button affords pressing (or clicking). Therefore make it look 3D and get some colour in there to make it stand out - this will also prevent users from accidentally clicking on it. The button used in the example below looks real and tempting to click onto.

2. Terminology

All buttons should have words on them and it should communicate to the user in a simple way what is going to happen when it is clicked upon. If the button sends an email it should perhaps read ’send’, or if it is going to complete an online shopping transaction it might read ‘confirm purchase’. Also don’t use too much text, it should be three or four words maximum. The user should be able to safely predict what will happen when the button is pressed based on what it says. In the example below, using the word ’search’ to submit a callback form is very misleading and inappropriate.

Futhermore, don’t use negative words such as ‘no’ or ‘decline’ to proceed, as often users will just skim the text and click ‘yes’ as that would appear to be the button used to get though the process. The example below is an example of how this can mislead users and cause errors.

3. Feedback

As with many interactive elements on a webpage, giving feedback to the user lets them know they’re doing something to the object by manipulating it in some way. With buttons you can use rollovers and animations to alter the appearance of the button object when it is hovered over or pressed and this gives instant feedback to the user that something is happening.

4. Positioning & Visibility

Particularly important with forms, the button that will submit the information that the user has entered should be placed at the end of the form as this is the natural progression. Also, ensure that the button is contained within the form field and not outside, else the user may think it is a separate entity on the page. For example on Box.com, although the button is clearly visible it is not within the ‘boxed-off’ area of the form.

5. Damage Limitation

Clicking buttons can often have effects that cannot be reversed. It is useful to have message to confirm an action after the button has been clicked in case it was clicked by accident and if this isn’t appropriate then back buttons should be made available. Also, try not to position buttons that have opposite effects too close to each other and definitely don’t make them look to similar if they are. On eBay, you’re given a ‘last chance’ before you bid as you may have clicked it by accident. In this example I like the way it gives a very foolproof description about what will happen after clicking the button - you know you’ve reached the end of the process.

Similarity in accessibility design is concerned with how a user perceives objects in a group that are alike, are related in context. For example, the diagram below would be perceived as alternating columns of circles and squares, rather than rows of alternating squares and circles:

The same laws can be applied to web design. When creating interfaces for websites, the use of similarity can make individual elements on a page more accessible by grouping them based on their sharing of the same features.

For example, the website Blogotion separates its content with similarity. The links across the top sharing a blue container are clearly grouped and are reminiscent of a navigational structure. Down the right hand side, rounded squares full of colour and large text are designed to attract the readers attention before anything else and would be initially perceived as not part of the main content, but other areas of interest. Their design is also not dissimilar to how web ads are displayed.

Speaking of which, the ads on the left hand side also share a similar format, particularly the conventional ’tile+URL+description’ formulae which Google ads have become well known for.

Furthermore, the main content of this website’s homepage is arranged in the middle of the page and uses small icons which are all slightly different to highlight characteristics of each category. This is also an attempt to differentiate the list from the Google Ads, as it would look very similar without.

In a likewise manner, the grouping of similar links in this site’s navigation makes it easy to differentiate links that will take us to more in-depth content, and basic web pages that are not content-driven. The website Sigmapi Systems groups industry sectors into blue boxes with icons to illustrate the industry, while the more standard web pages are linked with white boxes and no icon. This clear division of web navigation makes it easier to distinguish what pages are considered more important to the user.

These are two simple examples of how similarity can be effective in web design but there are many more examples which have varying levels of usefulness. Please leave a comment if you have anything to say on this matter.

As Web 2.0 applications continue to dominate user’s time and investments in 2008, I’ve been doing some reading about Web 3.0 and what it holds in store for the future of web development and it seems there will be four very important milestones reached.

Portable Web
Traditional websites are designed with the intention of being viewed by users accessing them with desktop PCs and standard GUIs. With the evolution of Web 3.0, websites are no longer confined to the screens of a desktop computer but are also accessible via mobile devices such as mobile phones, iPods, Blackberry’s, IPTVs. This throws up a whole new set of questions regarding heuristics, accessibility and usability as users are not interfacing with the software and hardware in the way that all our previous rules were written to abide by.

Semantic Web & Web Services
This is the evolution of intelligent systems beyond the GU, that allow web services to share business logic, data and processes through a programmatic interface across a network. This results in multiple applications interfacing instead of the users. The ultimate goal of Semantic Web is to lessen the tedious work of users and encouraging systems to carry out tasks without the direction of humans. So instead of building web pages to be read by humans, Web services will allow different applications across different platforms to communicate with each other seamlessly.

Open Data
This is the idea of making the web completely integrated in an effort to encourage sharing between users and different applications. The intention would be to make code available via open source, making data portable between sites and making these sites accustomed to your browsing and sharing habits. Imagine being able to use the same login details for a host of your web applications. Google Mail, Yahoo Mail and Blogger are examples of cross-platform data sharing, allowing you to perform different tasks with the same unified account.

Customized Web
Web 2.0 applications are already becoming more customized and tailored to the individual user’s needs based on cookies and settings, and Web 3.0 aims to take this even further. We have already seen websites like Amazon adopting a recommendations engine, which generates thousands of additional sales. How about BBC’s new news site? You can choose which news you want to know about, and you can even have it delivered via RSS.

In my opinion the biggest development comes from the idea of mobile computing and Internet access as not only does it throw the traditional heuristics rulebook out the window, but due to its portability it could be always on, it is aware of its location and it offers instant ways of paying for items on the Internet.

The fact that you can call a number on a website and have credit added to your phone means there’s no reason why we can’t buy other things in the same way. Add to this the new ways that users will interface with these new devices and we could also have much more different ways of interacting with the web. With Google, Yahoo and Microsoft all driving mobile web systems we could be looking at portable Web 3.0 very soon.