Web 2.0 Blog

The Web 2.0 Expo is over and some interesting announcements have been made. A lot of the keynote speeches which you can watch on Blip TV, were pretty much as expected with a primary focus on semantic technologies, mobile web and new website which provide more complete user experiences. Mozilla in particular expressed an ambition in developing new ways of accessing information on the Internet via mobile technologies in ways that are much more natural than before.

Microsoft Live Mesh - Microsoft’s premier RIA, which promises to allow users to exchange and share folders using an integrated network of desktops. It is basically promoting the idea of remote desktops. This was the only announcement that really got my attention as I think it’s been something that’s been a long time coming.

Watch the keynote speech from Live Mesh GM, Amit Mital.

I’m sure most people have been in the situation where they’ve wanted to access a file on their computer at home. With Live Mesh, you’ll be able to access you computer’s files from anywhere. Could this result in some security issues? I guess time will tell. I think the days where desktops as stand-alone systems exist unconnected are numbered, in favour of a more interconnected web where anything is accessible from anywhere. This is basically bringing the desktop to the web and bringing the web to the desktop - or combining the both so that there’s no longer a division.

At the moment it seems like it will run predominantly on a web browser which I don’t think it the way forward. Why not allow this system to function independently from old-fashioned browsers which can be restrictive and inconsistent across platforms?

It’s also confirmed that along with file sharing and distributing services among different platforms, Live Mesh will include other services along the lines of social networking and mashups. It’s not completely unique, but you’d expect a high quality solution from Microsoft and I’m looking forward to its capabilities.

The Web 2.0 Expo in San Francisco kicked off today and it promises to bring to light many questions about the future of the Internet. With keynote speakers Matt Jones, Lane Becker, Matt Cutts and more, plus input from Dion Hinchcliffe and O’Reilly media, it should be packed with new information and ideas.

I expect to see more about:

• Blogs, Wikis and Ajax Applications
•  Semantic Web
• Next Generation Web Apps - Adobe Air, Silverlight, Ajax
• RIAs & Offline Web Apps

All major news stories from the expo will be posted here, and I’ll be casting my opinion on any latest developments that generate particular interest from me.

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.

Rich Internet Applications, the future basis for how users will be presented with web applications are slowly but surely killing off the standard, limited and occasionally inaccessible HTML methodologies that have been dominating Internet development over the last 10 years. But what exactly do RIAs mean to Web 2.0?

In-Depth User Interaction
RIAs offer users a much richer and more engaging experience. Basically things that encourage the user to interact with the interface more such as flash games, interactive menus, customization and manipulation. A good example of this is Multimap.com. What once was a simple HTML search returning static image results has turned into a data and functionality rich interface which allows the user to physically drag the map around the interaction area, just as you would if a paper map were underneath the window.

Desktop-Webtop Integration
The process of delivering web applications to user desktops and further narrowing the gap between browsers and desktop interfaces is finally coming to fruition as apps such as Google Desktop. The more the desktop is connected, the more likely it is to stay up-to-date with the latest technologies. Ebay’s desktop application offers users a way of browsing, buying, selling and bidding without even using a browser window. The program starts just like a desktop application and can even run in the background without interfering with the user’s other activities. Could all websites follow a similar suit one day? Why do we even need browsers, when we can search Google from the desktop?

Greater Accessibility
Usability will always stand as the highest priority in rich web applications as without it, you’ve built something that doesn;t work. One aim of these technologies is to make the sites that use them accessible to everyone. Adobe claims their RIA technologies reach 98% of desktops, plus users will no longer need to install them as updating and distributing the application is an instant, automatically handled process  - Wiki. The fact that they are also client-based rather than remote server based also means a higher response time is to be expected.

Check out the Siblu Booking Form, a one-screen interface which totally eliminates any need for the user to ‘refresh’ or ‘go back’. Having to follow links is one of the most prominent issues when developing usable interfaces as it requires users to find ways of navigating through pages unnaturally. Could RIAs completely rewrite the rules of Internet form usability?

In order for RIA’s to develop even further, web developers will need to evolve how they design and build websites to accommodate for this new technology. Programs such as Adobe Air and similar next-gen applications will surely lead the way to a better Web 2.0.

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.