Inspirations, captions, ideas and notes.

Archive for the ‘Web 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. 

What makes designers frustrated?

I started typing out my answers to this question “What makes designers frustrated” at the IxDA forum and decided to put my random thoughts here as well.  Many of you will be familiar with the scenarios here.

It’s frustrating if you hear…

  1. “It doesn’t have to look good – that’s not important. Just make it work.” when how it looks will affect site usability.
  2. “The logo needs to be bigger. No, bigger than that. No, bigger.”
  3. “We’re a small company, can you charge us less? Perhaps you’d like your name at the footer for that?” when it’s not really a small company.
  4. “Use your creativity and come up with something” when there’s no brief, no design objective, no direction whatsoever. (This is usually followed by…5, or 6 in this list)
  5. “We like this from version A, this from version B, and that from version C”. Come up with another version which combines them.”
  6. “The background should be like this… and the logo should be here… and the banner should be here… and…”
  7. “No, the ‘sign up’ and ‘buy now’ buttons are too big. They should be smaller than our logo. Nothing should be bigger than the logo on the page.”
  8. “Can we add a scrollbar here, and here, and there.”
  9. “We’re looking for a suitable agency. But first, you’ll have to pitch  for the project with your concepts.” and they are not paying for the concepts.
  10. “Have you finished the design yet?” this morning, when the brief was only yesterday night.

I’m sure you have more to add. We can choose to laugh or cry at these situations, but we should always come out a little wiser and tougher.

Colour mixing and matching

Some of us may be more well versed than others in colour theory, and even so, the way we apply the theories and match our colours will remain unique. It all comes down to perception, and method you choose to apply. If you’re after an online colour wheel type tool to help you with picking the colours for your next project, these might work for you, like they did for me:

  • Color Schemer – Online Colour Generator
  • VisiBone Webmaster’s Colour Lab
  • I guess this will be a post that I can add to in future, so if you find any tools let me know as well.

    Learning about colours

    Color in motion is an interesting site, and a great way to learn about colours. I was forwarded this site’s url some time ago, and came across it again today! It’s a fun way to revisit the meaning of colours, and even take into consideration interpretations in various countries. If you have no problems viewing Flash content, it’ll be perfect for you. I hope you’ll find it useful.