In this part of “A Study on UX: Registration and Login”, we look at the most tedious part when registering on a website.

Registration Forms

The fields used for Logging In are usually the same: Username/E-mail Address and Password.

However, most websites differ in terms of the input fields used in their Registration page.

Here, we will take a look at the different characteristics of the input fields.

Labelling of fields

The naming of the fields should be related to what you need.  Label it based on its purpose.

Try to stick to convention as sign up page is not a place to look cool, but to ensure that the users understand what you’re asking.

Let’s look at an example, Amazon.

This page is actually a sign in page but some new users might land on this page accidentally while looking for the registration link.

Though the fields are phrased in a conversational way, which is a good practice, the answers do not need to be a full-length answer.

The “No, I am a new customer” field could be easily replaced with “No”.

Other than wasting the users’ time, some user might think

“Oh, so there must be a reason for saying no? What if I’m not a new customer, but I’m registering for another account? Which option should I choose?”

Actually, the answer is still no, but with a different reason.

Hence, sometimes the longer you make an answer label, the more it will confuse the user.

Arrangement of fields

Which fields should come first and which should come later?

A form is a conversation.  So arrange it like how you will arrange your questions when you meet a new person, a potential client.

For example, you wouldn’t ask for someone’s contact number before asking for their name, would you?

It is also a good practice to group related fields together.

Yahoo! did a great job of grouping the fields plus helping the users understand more about the fields they are looking at.

For the registration form above, the first option is to choose a product.

This would make sense if the whole form were to change if I choose the different products available.  However, the fields never change.

Also, the fields are too close together which clutters the view of the user.

More spaces should be included between the fields and some fields should be separated further if it’s of a different category.

As it can be seen from the Dropbox example, there are more space between the two names field and the login info.

This serves much like a natural pause during a normal conversation and it also gives a pleasant view to the users.

Amount of fields

It is a norm that e-commerce websites usually have more fields to fill.

However, having more fields means longer time to fill, higher level of patience needed, which means lower conversion rate.

Some users will quit filling halfway, while some are completely turned off the moment they see the abundant fields to fill.

Vimeo did a great job.  Not only are the fields arranged nicely with a beautiful background, the fields are very simple.

Most of us know our First and Last Name and our E-mail Address.  The only thinking needed here is the Password field.

However, if you ever need more information (perhaps for marketing or advertising purposes), make those less important ones optional.

Take note that having too many fields might make your website seem suspicious to the user.  Users might lose trust if a humour site asks for its house address.

One website which I noticed has the least amount of fields is Friendster.

Notice that they only have one field – E-mail address.

Although this is convenient at first, users will need to change their password after that, which means more effort to complete the whole registration process.

This is assuming that most users will change their password, which I believe is a fair assumption.

Duplicate Fields

Sometimes I don’t understand why I should type my e-mail address twice.

The logic of repeating the fields is to avoid typo.

But then, can’t I check it myself?  The e-mail address field is usually not masked.

Actually, the more I type, the higher chance that I will make a typo.  So why do I have to type twice?

Let us examine a scenario: If a user types it wrongly and registers with the wrong e-mail address.

Then, the confirmation e-mail would have been sent wrongly and the user won’t get the e-mail.

Hence, there should be an option for the user to check his/her e-mail address, like what 9GAG does.

9GAG provides the option to update the e-mail address in case the user didn’t receive any confirmation e-mails.

In another scenario, having username and e-mail address on a registration page can sometimes be considered as having duplicate fields too.

This is especially the case if the website offers signing in with either username or e-mail address.

The first thing about using username is that it adds burden onto the user to remember another login ID, instead of the ever so familiar e-mail address.

Again, it entirely depends on your website’s audience.  Which one do your users prefer, logging in with username, e-mail address or either one?  Do your users remember their usernames, or are usernames redundant for your websites?

Confirmation e-mails

Talking about confirmation e-mails, the bad thing about this function is that sometimes users are often left un-logged in, has to log in to their e-mail, click the link to activate their account, redirected to a website, still not logged in, and has to log in manually.

The problem with this is that users could have been logged in since the start (after the registration), since the user has already given their login details during the registration.

The website should just log the user in, and the activation is only done to access the full feature of the website.

In this case, after activation, the users are still logged in.

Again, 9GAG does this well as users are already logged in once registered.

Certainly there might be privacy issues with this method, as some websites might not like the idea of some random user registering using some random e-mail address (which they might not own) to see the contents of the website.

Password Masking

Password masking is a common practice on every websites at login pages.

The reason it is masked is to prevent onlookers from knowing your private information which only you should know.

However, it is also a very common practice at registration pages, and there are always two fields for one password, with both masked.

Most of the time, the reason is to prevent mistakes.

What is the main cause of the mistake in the first place?

Imagine typing a whole essay with a damaged monitor, should you correct the mistakes made by retyping the whole essay and matching both, or just get a new monitor?

It is simple.  The reason for any mistake is because we couldn’t see our password.

In the analogy given earlier about the essay, a clear reason that both will not match is that both essays might have different errors in them, and matching both won’t mean anything.

Also, the longer the length of the words we type, the more mistakes we will made.

Hence, isn’t it an irony that websites are asking us to create more complicated passwords and asking us to type it twice, blindfolded?

The common sense solution is to let us see our password while registering.

Since we are only going to register once, the chance of it being seen is very small.  Also, most of us register for stuffs in private, not while commuting on a train.

One of my personal favourite registration pages is WordPress’ registration page.

Not only does it give you the option to show or hide your password, it also gives an option to generate strong password.

This feature is very important for the users who are buying a domain with WordPress and are doing professional blogging where security is certainly a priority.

Another example is to auto-hide the password after we have finished typing it.

Notice that on the example above (taken from smashingmagazine.com), the password is greyed-out which makes it harder to see by onlookers.

This could be useful for mobile users, as we can move the screen closer to our eyes without fearing that the person behind us can see it easily.

Deterring robots with Captchas

Above is a snapshot when I try to sign up for Youtube, or any of Googles services.

The image containing words are called captchas.

It used to be very simple.  Now they have added curving texts, to outplay the Optical Character Recognition (OCR) bots.

And then some websites also added subscripts, superscripts, striked-through texts and all sorts of things which made it hard even for normal humans to see.

The worst thing is that in some websites, you have to re-fill the some of the fields (e.g. password, e-mail address) again if you’ve entered the captchas wrongly.

The function of these captchas is to deter robots created to spam.

However, there are other methods to identify a human and deter a robot.

One alternative is the Honeypot Trap.

Honeypot Trap is an invisible, open field, which set the validation to fail when anything is entered in the honeypot field.

Certainly, normal humans won’t see it and won’t fill it.  But it will be recognised by bots as an open field.

There’s also an option to use mathematics question for users to solve.

Currently it’s indeed a good proposition.  However soon the OCR bots will catch up and when they’re able to process simple math, the questions will get even more difficult, which will then strain our brain cells.

Certainly there are other innovative ideas available, such as gamification and 3^rd party authentications

However, any methods you use must comply with the accessibility standards.  The current audio captcha is terrible, inaudible and should never be used.

T&C and Newsletters

Nobody reads the Terms and Conditions, so why bother showing it?

Instead, most websites have resorted to having a link to the full terms and conditions instead, which is a good choice since the users who really want to know the terms and conditions will still read them despite the hassle of loading another page.

Then, there are the newsletters.

Users wouldn’t mind receiving the newsletters which they want.

Hence, it would be reasonable for websites to display a sample of their newsletters.

Conclusion

That pretty much wrap up our study on the user experience of registration and login pages.  In the next part, we will look into an example of a well-done registration page.  Do let us know if you have any request which you want us to study on.

In our next series of app reviews: Let’s Discover, we will review non-gaming apps on iOS and/or Android platforms, fresh out of app stores! 

For future app reviews, do give us suggestions on apps or games to review and we will dispatch our Runner to get reviews from our various talented individuals with various expertise in the office.

Moldiv

	A universal photo application with optimized user interfaces for both iPad and iPhone/iPod Touch devices.
	Developer: JellyBus Inc. Price: FREE Platform: iOS Review version: 1.0 Device reviewed on: Apple iPad 2 and iPhone 4

This week’s featured app is Moldiv, a sophisticated photo collage editor by JellyBus Inc., creator of several other successful photo editing apps such as HDR FX, PicsPlay Pro and qbro. Naturally, we had high expectations for Moldiv but we’re pleased to say that it did not disappoint. The impressive range of functions and variety of choices differentiates it from other photo collage editors, and all these are available at no cost. Read on to find out about its hits and misses!

Once the app is up and running, you will see a huge selection of frames. With 80 basic frames and 60 premium frames ($1.99 each), you will have plenty to choose from and it was pleasant to see some rather novel frames!

Proceed to add photos from your Camera Roll or capture a new image. You can choose multiple images from your gallery in just one step. Awesome! If you change your mind about the photos, you can easily switch them around or delete them.

Resize each frame by pinching and expanding. Tap on photos for the popup menu to switch their placement or apply effects. There are a total of 12 effects and if that’s not enough, you can shop for more “Vintage Effects” packs ($0.99 each).

The frames are adjustable in roundness, shadow, margin, and spacing. The background of the frame can be selected from either 20 basic patterns or photos from your Camera Roll. Premium background packs ($0.99 each) with more complex designs are also available.

Next, you can add text and boy was I spoilt for choice. The fonts available all looked so good! They can be customized in colour (solid colours or patterns), spacing, effects and backdrops. Trust me, you will spend a lot of time just looking through the options available!

As for stamps (they have everything under the sun!), there are 24 free ones and additional paid stamps are available at $0.99 each. Stamps can be easily placed, resized and rotated easily to your liking.

Finally, your collage is ready to be saved in your Photo Library and/or be shared over almost any social networks you can think of – Instagram, Twitter, Facebook, Tumblr and Flickr. You name it, they have it!

Here’s what some of 2359 Media’s developers and designers have to say about Moldiv:

“The app has tons of layouts and icons… it has an identity crisis!” – Aerin

“The UI is quite pretty but the UX can be improved. For instance, a ‘back’ button can be included, and there should be a collection bar of items at the side for users to leave and choose items. The drawer from the home page should be available even after frame selection. - Jowin

“The app tutorial should not bring the user to an external site, because he or she would have to search for the app again.” – Naveen

“Popup menus are a little small, especially for iPhone. They can make better use of the space available.” – Nevin

Moldiv is available on all iOS devices and will appeal to all photo lovers. Kudos to JellyBus for another delightful photo editing app!

As a continuation of our previous blog post on A Study on UX, in this part, we will talk about the positioning of the registration and login link.

Positioning

Talking about placing the two further apart from one another, let’s examine how sites usually place their log in and register options.

Type 1: Both links at one section of the screen

Type 2: Both options ready to be filled

Type 3: Access another one by clicking a link

An interesting point to note about Type 1 is that those sites are usually websites which don’t require users to sign up to view the full content.

Perhaps some features are locked, like the comments feature, but those websites are Content-based websites and are focused on every user getting the content which they want.

As companies are always looking to make money, this means that they can gain revenue even if the users don’t register.

This is also true for several e-commerce sites.

Several e-commerce websites gives the option to register instead of force-registering the users.

This is because in real life, we don’t need to register an account at 7 Eleven to buy a can of Pepsi from there.

Instead, e-commerce websites gives the option to register so that their future transactions can be made easier as they can store their billing information with their account.

Personally, I prefer the optional registration.  Repeat buyers will eventually turn into registered users for the convenience.

However this optional registration method (a.k.a. lazy registration) might not work on some websites where the users would want their information to be stored in a secured place (an account).  Again, it ultimately boils down to the user group you’re serving and their expectations.

For Type 2, usually they are social network websites or websites that need the users to register to view anything.  Hence, Register and Log In are given similar attention.

Type 3 however is an interesting one.  I personally prefer the one where I have to click again to access the creation of account instead of the other way round.

The reason is because I only have to do that once.

I will only create one account, which applies to almost every websites.  So I don’t mind looking for the Sign Up button (which is usually smaller in size) and wasting an extra click.

However, my personal dislike is for the website Udemy (final example of Type 3), which requires me to click on a small link at the bottom (which I sometimes forget it was there), just to log in.

Perhaps the reason Udemy is doing this is because they are aiming to get as many registered users as possible.

However, that has jeopardised their registered users’ experience who need to look for the log in link all the time

Another bad example is the Barnes & Noble website.

For a user who wants to register, at first glance, there is no register button.

After screening around the website, I decided to click on the sign in link, hoping that there’s a registration link.

At first glance, I realised that I asked for my e-mail address.  But since I remember I was looking for a registration link, I didn’t enter my e-mail address.  Instead I look for the word “register”.

I found it, but it wasn’t a link.

I hesitated for a few seconds, and then I select the second checkbox.  But I’m still hesitant to click anything, as the green box is labelled “Secure Sign In”.

I’m not keen on signing in yet.  But due to the lack of options, I clicked the green box.

Finally I found the registration page.

The website could have made things easier by providing a registration link at its main page, much like how Amazon did it.

Conclusion

That’s it for this week.  The position of web elements do always play a part in a good user experience.  In this post, we’ve seen how the location for users to register and login play a part in creating a great user experience.

Over the next few weeks, we will dive into a world of User Experience (UX).  We will study about the UX of Registration and Login pages.  The registration and login pages are an integral part of almost every websites that exists today.

Below are the aspects that we will cover.

1. Description Words used
   
   • SIGN UP/REGISTER/CREATE ACCOUNT/JOIN and SIGN IN/LOG IN
     All the different words which we encounter all the time.  Each of them means differently to different audience and the key is to know what it means to our users.
   • SIGN IN and SIGN UP
     Two very similar words with very different meaning.  We will explore the use of both these words.
2. Positioning
   • Type 1: Both links at one section of the screen
     Registration and Log in link conveniently located at one corner of the site.  Mostly use for content-focused websites.
   • Type 2: Both options ready to be filled
     Fields for both Registration and Log In ready to be filled.  Mostly seen in social networks and restricted-access websites.
   • Type 3: Access another one by clicking a link
     Access Registration by clicking a link on the page where the fields for Log In are at, or the other way round.
3. Registration Forms
   • Labelling
     Should your fields stick to the convention, or should you make it look different by making it sound like a conversation, or with unique words meaning the same thing?
   • Arrangement
     Which fields should come first and which later? How to arrange it so users would want to fill up the fields?
   • Amount
     Should you have that many fields in your registration page?  How many fields are considered acceptable?
   • Duplicate Fields
     Make sure your fields don’t waste the users’ time by doing the same thing twice.
   • Confirmation emails
     An e-mail which requires you to move away from the webpage, just to return to the webpage via a link, and log in on another page…
   • Password Masking.
     Explore the reason to hiding your passwords, and why it doesn’t make sense on some situations.
   • Deterring robots with Captchas
     A tool to trick the robots which makes us feel stupid at times.
   • T&C and Newsletters
     Do people actually read the T&C? How do you have more users signing up for your newsletters?
4. A Personal Favourite
   • An exploration into a convenient registration page

The option to register or to sign in appears in almost every websites we visit.

Signing in is needed on websites to:

1. restrict non-users from entering the website (Facebook, Twitter)
2. access a personalised version of the website (Youtube)
3. purchase items online (eBay, AirAsia)

For these different types of purposes, our patience level differs too.  We probably won’t mind if we need to register to enter a social network.  It has been seen as a norm since the birth of social network.

However, for some of us, needing to register to buy certain things doesn’t seem reasonable, especially when we don’t need to do the same in real life.

The process of registering and signing in can be seen as a hassle, especially when we need to key in a lot of information while registering and we need to keep keying in the same thing every time we come back (unless we save the information).

Since internet users are fairly impatient, it is important as a web designer to make sure that our users don’t get frustrated before they finish registering to ensure a high conversion rate.

So here, from my brief study on UX design plus my own personal experience surfing around the many seas on the internet, I will give my personal insights on this issue.

Description Words used

SIGN UP/REGISTER/CREATE ACCOUNT/JOIN and SIGN IN/LOG IN

These words are too familiar to us, but then, how do the sites actually choose which words to use?

Let’s learn some English first before going deeper

1. Sign up means to engage in an agreement to be a participant or recipient by signing one’s name.  A synonym is Enlist. (Twitter)
2. Join is used mostly for entering a club, like back in your schooling days. (LinkedIn)
3. Register means keying in your information into a registry/database for whatever use it might be for. (eBay)
4. Create an account means to create an account… (Dropbox)
5. Sign in means to record your entry into an area by signing a register. (Amazon)
6. Log in is a computer language, meaning to enter into a restricted area. (Facebook)

All these meanings don’t really matter.  What’s more important is what it means to your target audience?  Which one do they prefer to see?

Take note that some newer users to the internet might not understand Sign Up, mistaken it for signing up for something (e.g. a newsletter) or needing to leave a signature, and Log In too as it is a term created for the internet.

SIGN IN and SIGN UP

Since these two words are very similar to one another, it is recommended to not use them together, especially not close to one another.

It is always good to have users understand the meaning of a button the MOMENT s/he sees the first few letters.  Take note that internet users are very impatient.

For this combination, firstly, it might cause confusion for some and secondly, people might click the wrong option.

If they have clicked the wrong option, they might be frustrated to see something they do not expect.

If you insist on using them, please make sure the two are distinctively different (e.g. different colours, different length) and far apart from one another.

Conclusion

That’s it for the first part of our study on the UX of registration and login page.  In a nutshell, take into account what the words will mean to your users.  Also, to ensure that your users does not click wrongly (and get frustrated), try not to use “Sign In” and “Sign Up” together.

This is the first entry to our app review series called: Let’s Play!  In this series, we will review gaming apps on iOS and/or Android platform.

For future app reviews, do give us suggestions on apps or games to review and we will dispatch our Runner to get reviews from our various talented individuals with various expertise in the office.

So…. Let’s begin!

Freeze!

	A beautifully-made, physics puzzler that will certainly test your patience with its exciting levels and unique gameplay
	Developer: Frozen Gun Games Price: FREE Platform: iOS and Android Review version: 1.5 Device reviewed on: Samsung Galaxy S2 i9100

Freeze! is a very interesting physics puzzler with a very unique theme and an accurate physics engine.  Its unique, dark, gloomy, spooky, minimalistic theme can certainly evoke players’ emotions.

The game developers have a great eye on the aesthetics of the game.  It is different and in a way, beautiful.  It reminds me of the game, Limbo and Tim Burton.  The music also blends in perfectly.  The minimalistic aspect is also very good where everything is kept neat.

In terms of gameplay, the game focuses on an unnamed, eyeball-shaped hero, where he has the power to turn world and control gravity to reach his “escape path”, which is a vortex.  It is not just a normal gravity twisting/turning, physics game because you are given the option to FREEZE time on certain levels (certainly something you can’t do in real life!). 

The game is a fully-touch game and not gyroscope-enabled unlike many games of this genre.  Players rotate the world like a wheel using their finger.  Gravity always points downwards and players need to align the world accurately to influence the hero’s motion.

In terms of the difficulty, most of us were stuck at level 6, which was a big jump in difficulty from the rest.  This is one level which all of us think that a Freeze button will make sense.  Other than that, the difficulty progresses smoothly, with more dangerous objects introduced.  The dangerous objects instantly kill the hero on contact.  There are the static ones, those that follow a fixed path and those that are also influenced by gravity.  The different challenges help keep players continuously engaged.

The dreaded level 6

The various dangerous objects

Our hero explodes on contact with a spike

Currently it is a free app, with 25 levels available in the first world and 10 bonus levels on the second world which requires a 0.99USD in-app purchase. 

What Our Reviewers Say

Aesthetics

The aesthetics is very unique but it seems to appeal more to the guys and less for the girls.  The dark, monochromatic theme certainly limits the palette the developers could use.  Coupled with its minimalistic theme, players could get confused about the role of each object and icons.  Dangerous objects are represented only by a white outline on it, which is not intuitive at all.

Also for the in-game tips, it uses the native pop-up menu which does not blend well with the minimalistic theme.  Instead of that, they should make the instructions to be within the game itself (perhaps a dialogue) and not a pop-up.

Gameplay

Overall, it is a very addictive level-based puzzle game, where players are challenged to complete each stage.  All of us agree that a gyroscope option would be good as it is certainly more intuitive.

Most of us agree that there should be more hints, which shouldn’t take us away from the game.  Level 6 is definitely the buzzkill for most of us.  Non-puzzle lovers might uninstall once they face a seemingly impossible level.

Verdict

If you are those who will continuously return to Angry Birds in an attempt to clear a level with one shot, then most probably this is the game for you.  It is still a new game, so surely there are things that can be improved.

Its unique appearance and its carefully-designed levels coupled with an accurate physics engine will certainly keep puzzle lovers sticking around for more challenges.

By   Valerie 

2359 Media is launching an Application Reviews Series – APPerception. In this series posts, we are going to share great mobile applications over all categories. If you want to equip your phone with great apps, if you want to know more about mobile apps user interface (UI) and user experience (UE) designing, if you want to hear professional opinions on a certain app, or if you are interested in mobile apps for any weird reason, do read our APPerception Series weekly!

We are going to share 2 great iphone applications today.

Inkflow - APPlicability: 4.5/5

Index finger is to iPhone as fountain pen is to moleskin—true with Inkflow. Basically the Penultimate or Noteshelf equivalent that’s compatible with iPhone, this app lets you sketch and write in beautiful (black) ink, see below.

In landscape view, undo/redo strokes and enlarge a specific portion with just a tap on the toolbar. Once completed, email, tweet or save to camera roll. All these basic functions are free.

There are times you just need to scratch something on a piece of paper (typing just isn’t the same); this offers a quick and convenient simulation. Easy save and share, beautiful ink and free. Only downside is there’s no eraser, but this is bearable with undo.

Sing Something - APPlicability: 2/5

Just about the time Draw Something was taking over my Facebook feed (“Look at what so-and-so drew!”, “Haha this is so-and-so’s drawing of dog poop” and “25 Best Draw Something Drawings”, “30 Funny Draw Something Sketches” – you get the picture), I was getting restless. Now we barely hear anything about Draw Something.

So with that demise, here’s something that’s like Draw Something, except you sing it. It’s the exact game format—you choose a song out of 3, record a snippet of yourself singing it, your friend listens to the playback and guesses the song title and singer. Even the interface is pretty similar, though it’s not an OMGPOP/Zynga production.

I’m not betting on this to catch on the way Draw Something did. It can’t be played like its predecessor where you can guess and draw anywhere—on the commute, in boring meetings, in the toilet… without looking like a complete prat.