Inspirations, captions, ideas and notes.

Archive for the ‘User Interface Design’ 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. 


Inconsistency can be a good thing

Sometimes in our fixation to ensure consistency, we forget that inconsistency can be a good thing.

If we are expecting a different behaviour from the UI, it probably means a different UI needs to be considered. Ok, perhaps not entirely different, but there should be some sort of hint that the UIs behave in different ways in different situation. For instance, buttons for clicking vs buttons as drag and drop elements in the same environment should appear different.

Drawing from our experience with the house we are now renting, where the door knobs took some getting used to – The door knobs are your typical, very simple, classic round door knob, which as you’d expect, open doors. That’s perfectly fine and I don’t have issues with it. The trouble lies in how they work! Yes… that proved to be rather frustrating. See… the same style door knobs were used for all the doors in the house – but some needed turning before you can push the doors open while the rest you just pull and that gets the doors open.

After a while, we figured it out – trust me, our wrists have seen better days – I can see the sense in need for the different operation. Some doors lead to storage areas (these, you just pull) and the others were bedroom and bathroom doors (these you need to turn to open said doors unless you want to hurt your wrists or pull the knobs off!). It took us a while to learn the difference but the point is we shouldn’t have to.

If we are expecting a different operation style, outcome or behaviour, the UI we apply should highlight the difference. Something as simple as different shaped door knob or handles, or perhaps using different colours, would have helped tremendously – and caused far less pain to the users.

So next time you’re working on a project which involves deciding what UI to apply, don’t get too carried away with wanting to be consistent. Consider the operation and outcome; and ask yourself if being consistent would actually cause more pain and confusion.

I’m sure my experience with the door knobs is not unique. Feel free to share your encounters with me as well. It doesn’t have to be technology or web related. 🙂

Retrieving Emails from your Hotmail account using Email Clients and iPhone

Having searched in vain for this information since last year, I’ve decided to migrate to gmail. The frustration I faced was mainly with the fact that I can retrieve my emails from gmail using Windows mail and outlook, but I couldn’t do the same with hotmail. In December, I finally got an iPhone, and faced the same issues with access once again, with hotmail.

It seems this information is rather hard to find, and brings to mind Microsoft’s lack of attention towards usability. The help facility in hotmail is tucked away in a far corner (a tiny, round, blue icon; under the “sign out” link, next to the “Options” link). I thought it was the help facility for Settings! Silly me… and yes, I digress.

Setting up your email client

If you are looking for instructions to setting up your mail client to retrieve emails from your hotmail account, these listed in the hotmail help are for Outlook Express:

  1. In Outlook Express, click the Tools menu, and then click Accounts.
  2. Click Add, and then click Mail.
  3. Type your name, and then click Next.
  4. Type your full Windows Live Hotmail e-mail address, and then click Next.
  5. Enter the following information, and then click Next:
    • In the My incoming mail server is a box, click POP3.
    • In the Incoming mail (POP3, IMAP, or HTTP) server box, type
    • In the Outgoing mail (SMTP) server box, type
  6. Type the account name and the password for your Windows Live Hotmail account. Clear the Remember password check box unless you’re the only person with access to the computer. Make sure that the Log on using Secure Password Authentication (SPA) check box isn’t selected.
  7. Click Next, and then click Finish.
  8. In the Internet Accounts window, click the Mail tab, click the Windows Live Hotmail account that you added, and then click Properties.
  9. Click the Advanced tab, and under Server Port Numbers, enter the following information, and then click OK:
    • In the Incoming mail (POP3) box, type 995.
    • In the Outgoing mail (SMTP) box, type 25.
    • Under both Outgoing mail (SMTP) and Incoming mail (POP3), select the This server requires a secure connection (SSL) check box.
    • Click Close.

The above instructions will vary slightly if you are using another email client, but most of the parameters you need are there, so you should be able to get your hotmail emails in no time.

Finding the above instructions via hotmail

If for some reason the above doesn’t work, perhaps the other help information listed in hotmail can help you.  Here are the steps to finding the instructions you need:

  1. Look for a small blue round icon with “?” symbol. You will find it on the top right hand corner of the hotmail post-login screen, under the “sign out” link, next to the “Options” link.  Click on that icon and a popup window will appear.
  2. Select “Table of contents” in the left panel.
  3. Click on “Setup a Windows Live Hotmail Account”.
  4. If you are setting up for outlook express, follow the instructions by selecting “Add your e-mail account to Microsoft Outlook Express”
  5. If you need the pop3 and smtp settings for any other email client, select “POP3 settings”

Setup for iPhone users

The setup for iphone is very straightforward, and we wouldn’t expect anything less, would we? 😉

  1. Select Settings
  2. Choose Mail, Contacts, Calendar
  3. Under Accounts, choose “Add Account”
  4. Select “Other”
  5. Provide your name, email address and password; select “Save” when done.
  6. Your iPhone will verify the account information and once that is done, you can start retrieving your hotmail emails via your iPhone.

I had given up the notion of getting my hotmails on my iPhone and using an email client instead of using the browser, but thanks to my twitter friend @echo6ix who shared this information with me, there is still hope for hotmail in my books.

I hope you find this helpful.  Good luck and let me know how you get on. 🙂

List of development resource

I keep coming across interesting development, coding or javascript sites but have not jotted them down… only to have trouble finding them again when I need them later. Sigh… yup, so here is a list, in no particular order. I’ll update this post as I go along…

Web Development