UX Evaluation (Web): Zone1511.com.sg

So I’ve decided to start a weekly series of blog posts called UX Evaluation; each week, I will evaluate an interface that I’ve experienced and I will make recommendations on how we can improve its design.

and………HERE WE GO!

Website: Zone1511.com.sg Webpage: Manage Member’s Profile
Zone1511's Member's Profile Page

This week, I’m looking at Zone1511.com.sg.

3 hygiene issues I’m gonna highlight:

1. Alignment of labels, compulsory fields and text fields
– Left aligning the labels and placing the compulsory field asterisks on the right creates a jagged column that doesn’t facilitate scanning.
– Leaving a gulf of empty space between label and text field makes it hard to associate label and text field. I found my eyes tracing an imaginary line between label and text field as I filled out the form {for every form item}.

2. Tab design
– Doesn’t immediately communicate that “The tab you’re looking at how is ‘Membership Details'”.

3. Placement of [Submit], [Back] and [Clear] buttons
– When placed outside of “Membership Details”, the [Submit], [Back] and [Clear] buttons’ region of influence isn’t immediately clear.

Quick Fix
Zone1511's Manage Membership Details page after quick fix redesign

This quick fix merely addresses these 3 issues only.

1. Right align labels and left align text fields
– Improves scanning when users are trying to figure out what are the compulsory fields he needs to fill up.

2. Identical colouring of Tab and Tab region of influence
– You don’t need different colours for different tabs. What you do need is to maintain an identical colour of Tab and it’s region of influence. This way, it’s clear where the contents of the tab begins and ends.

3. Place the buttons within the area they influence
– When placed within the tab, it’s now clear that these buttons affect changes made within this region and this region only.

Advertisements

0 Responses to “UX Evaluation (Web): Zone1511.com.sg”



  1. Leave a Comment

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s