Inspirations, captions, ideas and notes.

Archive for the ‘Information Architecture’ Category

The art of Signup design

Signing up to web services is something that most digital professionals are familiar with, and take for granted. But surprisingly as it sounds, although we know it is important to make the process as simple and painless as possible, what works or not depends largely on your target audience and the problem you are trying to solve.

Examples from existing sites

A couple of months ago, I was researching UI Patterns for registration and sign-ups.  There is no doubt a huge resource of information out there, with some examples that stand out from among the crowd:

  • Facebook
  • Twitter
  • Quora
  • Stackoverflow
  • I’ve collected some screencaps and will share them on flickr soon.

UI Patterns and research on signup design

This is a shortlist of resources I found useful:

Signup 101

There is no end of resources available. In summary, the usual suspects of signup 101 includes the following, but what works or doesn’t work for you will depend on your business, your target audience and ultimately, what it is you are trying to achieve with the signup:

  • Only use signup if there is an obvious benefit (e.g. access to useful/additional content that won’t be otherwise available)
  • The link to the sign-up should be available and obvious – top right-hand corner
  • Lazy signup – Defer signups until totally necessary, if possible
  • Keep the form minimal – Ask for only information that is necessary
  • Only include mandatory fields – if it’s optional, it means we can ask for it later
  • If you must have both optional and mandatory fields, make that difference obvious
  • If the sign-up has to be in steps, or require lots of input, group the details together so they make sense when filling up the form
  • If the sign-up caters to different types of accounts, separate the content of each clearly
  • Don’t rely on hover effects unnecessarily – firstly, they don’t use on touch screen devices, secondly, they can be confusing to the users
  • Provide realtime feedback and contextual error messages – this can be ajax/client-side topped with server-side messages.
  • Don’t display unnecessary details or graphics – they are distractions that distract and confuse

The outcome

  • Our intention was mainly to lock out access by organisations that abuse the site, so introducing the sign-up is something that works well for us; while at the same time, still allow access by individuals that just want to casually browse the content.  The sign-up allows us to identify who is accessing the site and isolate abusers.
  • Although we would have preferred the Lazy signup approach, it works in most situations, but unfortunately not ours because of the underlying objective for introducing the sign-up.
  • To ensure we keep the form minimal, we have segregated the sign-up into 2 types, signup by individuals for personal access of the site; as well as signup by individuals for business access of the site.  This allows us to get more information from businesses and corporations, while ensuring personal access is not hindered. We achieved this we did by keeping the content of each group separate and this is probably something we’ll continue to improve over time.
  • The original design show only mandatory fields.  Although it is not ideal, we have also included a couple of optional fields to address the needs of the business.
  • Realtime feedback is definitely useful, but there is a limit to what we can feedback (e.g. password and re-entered password must match, email format is incorrect); we are finding some users are struggling to type in the correct email address, and this hinders the account activation process.
  • Not displaying unnecessary graphics and texts is definitely key.  Although our original account activation email was very succinct, we felt it lacked friendliness and hence included  what we thought was friendlier copy with additional instructions. Long story short, we have reverted to succinct. Users only want a link to click to activate their account and that’s what the final version provides.

The art?

UI design is an ongoing process, it’s not a one-size fit all science.  On the same note, don’t make the mistake of assuming designing the UI is simple; the upside is, people think it’s simple because we do a good job of making the UI and the process straightforward, the downside is, there is a hell lot of detail that we have to bear in mind whenever planning, designing, developing, testing and launching anything like this.  Don’t assume that it is simple and something that you can put together and launch in a few days. 

Advertisements

Keeping your Corporate Web Site relevant and useful

What do you tend to do when looking for information about a certain product or service? Let’s say you’re planning to buy a new mobile phone. Would you look up the manufacturer’s site for information? Or would you turn to your local telecommunication provider’s web site? Perhaps you’d ask your likeminded friends and colleagues first? And maybe you’d look up reviews and comments on the internet, which would lead you to relevant forums and industry gazettes?

With the wealth of information available on the internet, people do not just go to Corporate web sites anymore. In fact, I’ve recently acquired a new 2nd generation HTC Touch. And my buying decision was made without even going to the HTC web site. Yup, I looked up the descriptions and features list on my local service providers’ web sites, as well as those of overseas providers. And to ensure that the phone was not a problematic model and if problems existed that they can be resolved, I did a search on Google and located a host of forums, product reviews and consumer feedback.

This is one of the reasons why companies need to revisit their corporate sites to keep the content relevant and useful. If I’m looking for ‘user reviews’ and did a search for that, would your web site’s ranking come up tops? Unlikely.

I recall several months ago, we discussed putting a forum and blog on our corporate web site. But this is not something conservative marketeers can stomach. There is always a fear of smear comments, negative feedbacks, etc. But with proper moderation, this can be managed. The way we hunt for information online now renders this concern obselete. If customers have a genuine concern and can’t air it on your corporate web site, they’ll vent it somewhere else.

Related articles:

  • How to evolve your irrelevant corporate website” by Jeremiah Owyang
  • Today’s top 10 – “Top sites in Singapore” by Alexa – the rankings shown here is a good indication of the trend I mentioned earlier. People are doing researching and visiting community sites more than anything. Today’s rankings are 1. Yahoo, 2. Friendster, 3. YouTube, 4. Windows Live, 5. Google.com.sg, 6. Blogger.com, 7. Facebook, 8. Google.com, 9. Wikipedia, 10. MSN. I’d discount the ranking for Windows Live and MSN, as people who use messenger tend to open these pages without even deciding to do so.
  • Slideshare has a presentation which compares the 2005 and 2007 rankings. For a comparison, you can have a look at slide 30.

Are frames really evil?

I was reading a techrepublic article, Avoid frame-based layouts in favor of alternative designs, which presented some insights about the use of frames. This article generated an interesting discussion, which reminded me that there are many web designers/developers who are avoiding frames, but are sadly only doing so as it’s the trend.

A couple of reasons sited for using frames were i) to share common content/navigation, and ii) quick page loading, as only the new content needs to be reloaded.

Several approaches to solving the 2 problems were mentioned in the thread, and I’ve used most them:
– dreamweaver templates
– include (using asp, php, shtml, coldfusion)
– ajax (methodology)
– iframes
– frames
– using css to control positioning of shared items

Yup, what we choose depends on what we are trying to achieve. I still use frames and iframes, even though some of my sites use include. I sometimes find the need to apply both. Off the cuff, I can think of 3 examples:

1) A coldfusion driven site which although shares navigation using includes, needs to incorporate a calculator and page content which was previously developed in another language/tool.

2) In a fund portfolio page, the fund history for a particular fund is presented in a table beneath the summary fund listing. The tricky part is, the fund history is very long, which means the need to scroll down the page to view it all. We needed the fund history table heading to not scroll beyond the top of the screen, else all that data becomes meaningless. Using CSS will work only if the table heading position is fixed to begin with. Unfortunately, its position depends on the number of items in the fund summary. Constrained by time, the next best option was used – Frame.

3) a .php site had to include within its framework, an .asp form, which unfortunately was hosted at a data centre. Our answer – iFrame.

I admit, I do try to avoid frames and iframes if there is no need for them. But if it solves the problem without adverse effects given existing constraints, we need to be practical.