Monday, 29 September 2008

Sign-up forms - basic elements

Posted at: 12:05 PM by Marianna

Though most web sites have sign-up forms, they are not always necessary or useful. There is the danger sign-up forms transform a nice website user experience to a bad one; by restricting users from pages that should be accessible to all i.e. content pages, access to resources pages (case studies). This usually is noticeable in websites that have a persistent sign-up form on the homepage and urge the visitors to sign-up first before they can navigate throughout the website. As a result, there is a risk to alienate visitors who do not wish to commit to your site yet.

However there are many websites (see smashing magazine: list) where sign-up forms are necessary such as most of the e-commerce sites. Especially when a user wishes to purchase a product he has to navigate in secure pages so as to complete payment detail forms. It is critical though when we should ask the user to sign-in and where we should place links that lead to the sign-up forms. Common place to have a link to sign-up forms is on the top of the page and repeated in all the pages, not only on Homepage. This could give the chance to the user to sign-out if he wants or sign-in from all the pages. Nevertheless there are occasions when a sign-up form needs to be on the homepage i.e. in social networking websites (i.e. Facebook) that most of the website's pages are based on users' customised settings. In this case make sure that you explain the customers why they need to use them and how they can use them.

Elements sign-up forms should have:

- Place sign-up form or sign-up link where people can see it (i.e. amazon homepage)

- Have a message reassuring them for the privacy of their details (i.e. windows live hotmail)

- Make them easy for users to understand them-use an example (i.e. BT account sign-up)

- Clear labeling next to the input fields (i.e. my space sign-up)

- Ways the user could retrieve from errors i.e. enter wrong password (i.e. ebuyer.com)

- Provide friendly inline messages at the point of the form where the error has occurred along with an overview at the top of the form (i.e. google mail sign-in form)

- Indicate clearly the mandatory fields (i.e. delicious form)

- Ask only necessary information / avoid long list forms (i.e. last.fm form)

What's your opinion about sign-up forms? I am interested in listening your examples and experiences.

Labels: , ,

 Use this button to bookmark this post.

Friday, 5 September 2008

The force is too strong

Posted at: 4:14 PM by Mark

In the last few weeks I've done something I never thought I'd do, or even think I'd be interested in doing... I've joined the dark side! That's right; I've taken my first few tepid steps into the strange and daunting world of code.

Until now, developers have always been those geeks at the other end of the office, non-creatives permanently docked at their little PC stations consumed in page after page of coloured dots, colons and squiggly brackets. Like well oiled machines, they endlessly create, edit and refresh pages of code, only surfacing from their online havens and engaging in the real world for the occasional service or refuel. The distance between them and us has been understandably well observed and any contact confined to email. This is simply the way it's always been and is best for everyone concerned, right?

Okay, so maybe I'm exaggerating a little. After all, the pursuits of the two professions cannot be fully realised without our harmonious collaboration. Despite our fundamental creative and technical differences, we rely on each other for the success of each and every project we undertake. Without us creative types, developers have no page layouts to code away at all day and without their technical skills, we designers have no one to turn our works of art into something useful! Yet the journey of creating a web site always remains a process of two distinct and separate phases, design then development, in which the intricacies and limitations of both fields inevitably arise, occasionally causing friction and frustration for either camp dealing with the ignorance of the other. It is this lack of understanding about the each other's field that has prompted me to do learn more about the dark art.

I've realised that I will never fully understand the restrictions of the web and how that effects my precious design until I actually get my head stuck into some code and try to see things from the perspective of the poor old developer. For too long, I've just has to grumpily sigh and resign myself to defeat when Lewis comes and tells me that some part of my design just isn't possible to recreate or the primary font I've used will just look terrible in IE6! My well thought out and balanced response that "the web sucks" simply won't cut it anymore.

So with the Lewis' help and complete disregard for my previous bad experiences with linguistics (GSCE French and German), I've set about studying the languages of HTML and CSS, in a bid to broaden my horizons, understand how to code a web site and ultimately learn how to best optimise my future designs for web.

So far, I've been surprised how much I've enjoyed learning about elements, attributes and divs. At first it plays havoc on the eyes and is pretty taxing on the brain, but like with anything, putting the theory into practise and repeating tutorials is proving to be working well. I so far understand everything these languages have thrown at me and can rustle up a pretty basic but solid web site from scratch.

My only previous experience in building websites has been through Dreamweaver's "Design view" and that has always been a pretty frustrating one, with elements on a page jumping around when previewed, no matter what changes I seem to make. When creating pages using code, everything feels that little bit more deliberate and stable.

Needless to say, the time I've spent in code view has helped me appreciate the restrictions of the web in terms of the way different elements display on a page and how the medium is much more fluid than that of print design. I can't necessarily make every bit of design sit precisely where I want like I can in print, simply because of the organic nature of the web and the sheer number of variables there are (browsers, fold lines, anti-alias's etc). With each new web site I come to design, these are the sort of factors that I can keep in mind to make the whole process run a bit smoother and improve Lewis' quality of life.

Not only does my foray into uncharted technical territory help with the efficiency and enjoyment of the design and development process in the studio, it also helps me to expand my skill set and improve my employability in an industry where the role of the designer is becoming ever broader.

When studying graphic design at university, there is very little mention of designing for web, in fact there are entirely separate degrees dedicated to digital and multimedia design. My course focused entirely on conceptual "ideas" based print design, occasionally venturing into the worlds of advertising or packaging design. Yet this separation in design courses is not really mirrored in the real world, where many design/marketing agencies strive to meet the needs of clients wanting a range of services: branding, printed literature, web design and search marketing for example. Unless you happen to join a huge agency which has a team covering each of these bases and thus employ you solely for your branding abilities, then you're going to have to be able to branch out somewhat and adapt to the requirements of each individual project.

Many job descriptions for designers these days specify requirements for candidates to have experience and skills in both print and web design, and the relevant computer software for each. It would seem that knowledge of HTML, CSS and Flash etc. is becoming just as important as that of Adobe's Creative Suite and the print industry for those employing the next wave of graduates. For the purist designer who ignores this trend though, preferring to stick to their guns and the world of print, the opportunities may well become that little bit harder to find. This is an industry changing to meet the needs of those wanting to communicate their message, and with the web being at the forefront of the communication age, I for one am not going to rest on my laurels.

Labels: , , ,

 Use this button to bookmark this post.

Interactive maps - a simple tool or something more?

Posted at: 2:59 PM by Marianna

One of my responsibilities as an Information Architect is to keep abreast of the latest releases in the computer science industry. Recently I have come across a selection of different maps from a variety of sources that have made me realise there is a trend nowadays to use more and more interactivity when presenting data. A set of examples is:

- A UK interactive map that enables Regional Economic Strategy (RES) to display evidence data in an engaging visual way.

- A world interactive map from www.publicprofiler.org which presents the distribution of certain surnames, compiled by researchers from the University College London (UCL) using publicly available sources of information such as electoral registers and telephone directories. It contains information on over 300 million names covering 26 nations from Europe, America, Asia and Oceania.

- And a visualisation tool in the form of a map created by the New York Times providing information about the Olympic medals throughout its existence. Each country that has won medals during the Olympic Games is represented by a circle - its size relative to the number of medals won.

In terms of usability these three maps along with all the other well designed maps in the web are bright examples of well presented data, in a user friendly way saving a lot of time for the user. The users can effortlessly figure out how to use these interactive interfaces and at the same time they are easily memorable. The usage of a variety of colours in association with tables, pop-up windows with information or lists under the maps form a powerful source of information accessible within a few seconds. The efficient usage of white space also enhances the user experience.

Interactivity is one of the major advantages of web maps, enabling simple map tools to fully integrate multimedia elements. It helps to explore maps, change parameters, navigate and interact with the map, reveal additional information, link to other resources, and much more. My conclusion of this short reference to interactive maps is that they are a powerful tool in terms of efficient access to a large amount of data.

Labels: , , ,

 Use this button to bookmark this post.

A new browser - Google Chrome

Posted at: 2:40 PM by Marianna

Some days ago Google released a beta version of their new browser called "Google Chrome". The browser is still in an early stage of development but as Google states they will constantly updating the browser following users' reviews. With this browser Google team believes that they will "add value for users and help drive innovation on the web".

My first observation is that Chrome is a modern browser managing to introduce a new minimalistic design, leaving behind old design concepts. The first innovation you notice is the usage of tabs at the top of the page instead of being under the address bar and toolbar. This layout eases the way users manipulate tabs. They can easily add or remove them and each tab can be dragged independently out of the browser window opening a new Google Chrome browser improving the speed that users handle different tabs.

The Google team has also created a user-friendly help page where you can find all the information you need for various topics, either using the help search engine or clicking a link from one of the group links (getting started, troubleshooting, using Google chrome, and popular articles or help resources). From this help page a user can change the language settings too.

The browser's homepage is another newbie. It is called the "Most visited" page and so far it displays icons with links to the most frequently visited pages. It also has an internal search engine where you can search among those pages, together with a box of recent bookmarks and a link to a full history list. This page can save a lot of time to the user eliminating the number of clicks he has to make in order to view his bookmarks and navigate to the most popular pages.

Google Chrome Homepage

Picture 1: Google Chrome Homepage

The combination of the address bar and search engine into one (known as the "omnibox") is another plus point of Chrome. Many times in the past I got frustrated by Mozilla Firefox's browser when I typed a word in the address bar but a "failed to connect" message appeared. Then I realised I was not typing on the search engine box! I am sure I was not the only one! This feature makes the design more simplistic and saves more space on the tools area too.

An additional feature that Google launches for the first time is the "incognito window "where you can view pages without appearing in your browser history or search history, and they will not leave cookies, on your computer.

Incognito window feature

Picture 2: "Incognito window" feature

Enough with all the appraisals! Google Chrome received a lot of bad reviews too; though it has become the 4th browser used already. Google has released a list with known issues for Google Chrome that grows bigger day by day. Among them are plug-in issues such as "Scrolling is delayed on pages with a lot of plug-ins" and display issues such as "Google Chrome's fixed width font is tiny on some sites". There are also claims that Chrome is not a secure browser at the moment but this is probably expected as it is a beta. In terms of user experience a negative issue indicated by the usability blog is that Google chose for the browser to use Windows Vista icons that are not allowing any customisations made by the user. As a result users with poor eyesight, tend to increase the size of these controls so they can easily minimise windows without accidentally closing them.

Google has still a lot to change in Chrome, especially things that they see as important, and it'll be interesting to see how it will evolve.

What do you think about Google Chrome? A good User Interface or not?

Labels: , , , , ,

 Use this button to bookmark this post.