Viewing entries in
website

UI Labels and Why They Matter

Chicago restaurant week is here, so I pulled out my phone last night at home (while also on my laptop and watching Netflix - multiple screens are REAL) to look up some options. I came across Le Colonial, a high-end, 20-year old Vietnamese restaurant in an area of the city fueled by corporate credit card purchases, business travelers, and clientele over 45.

Looking at the heading of the mobile site, I was trying to find where to locate the 'About' information for this place. I had already scrolled down the page and clicked on a link to view the dinner menu, so I was in search of a UI element that would enable me to find location, hours, a gallery, restaurant history, etc.

What happened was humorous, and of interest to those in the user interface/user experience design world.  Because I was on a restaurant site, I had subconsciously assume the hamburger icon and related 'Menu' text was going to show me the actual food and drink menu for this place. I had completely forgotten that on any other site 'Menu' would take me to the site navigation menu. For 15 seconds I was lost, unable to find an 'About' page. Perhaps in instances of restaurant use, the hamburger icon alone without accompanying 'Menu' text would be easier for people to use.

On the flip side of that argument, could you imagine the 'Book' option with the icon only? It kind of looks like a calendar, but without the descriptor I think people would simply wonder what it was, and miss the opportunity to make a reservation.  And on the topic of text descriptors, I think that while 'Reservation' is a better word choice, based on space constraints, 'Book' was the logical best option.

 

The internet is an interesting place when you make the effort to pay attention to its details, and question design decisions that were made, and if they were intentional or not.

'Update Profile' Design Improvements for Wunderland

In my 2017 quest to find a UXD role at a company whose DNA includes user-focused products/services, I came across Wunderland staffing agency's website.  I attempt to register a profile by clicking that link in the left nav.

I was told to 'Enter Your Email'. I complied, opened a new browser to check my email (*dramatic sigh* at having to do all this WORK by leaving the site to click on this link), clicked on the link, was sent back to their site, to be told I already had a profile created in their system. Great.

PROBLEM #1
I then click the 'Update Profile' link and instead of recognizing me as having just requested the link, or recognizing that I just came to the site from the unique link they sent me, I'm forced to rinse and repeat this frustrating process.

SOLUTION #1
Create a way to recognize people visiting your site who've come back via unique link who then want to login to their profile, instead of making them start from the beginning of the convoluted login process.

Screen Shot 2017-01-05 at 8.18.46 PM.png

PROBLEM #2
Again I open a new browser, open the email, click on the link, and am taken back to the site.

SOLUTION #2
Be a normal website with a Username/Password login area to keep people on the site and decrease chances for abandonment and frustration (especially frustration).

Screen Shot 2017-01-05 at 8.19.00 PM.png

 

 

I know it's happened to you.  You've logged into the profile section of a website, made some changes, clicked the 'Submit button, then furiously look around for an acknowledgement that changes have been saved and you can close the browser for that site.

Wunderland staffing's profile section does a lovely job of showing me how to accomplish the #1 thing I came to their site to do - Find a Job.  Nice big, pleasing red, pill shaped button.  

PROBLEM #3
Upon submitting my profile changes, however, I missed the confirmation message, in small, undesigned font.

Live site as of 1/5/17

Live site as of 1/5/17

Suggested design enhancement

Suggested design enhancement

SOLUTION #3
While it does say 'Profile Updated' I completely missed that the first handful of times I looked at this page.  I propose calling out the message in a colored box, larger font, and instead of the standard, boring confirmation message font to use the Calluna Sans option for the headings, as it has more of a conversational, friendly tone to it.

Thanks for joining me on this recent stop on my 'Design for Good' tour. Please drop me a line if you have any thoughts to add, or a challenge you'd like to share.