Don’t Stop Learning: A Conversation with Yuguang Sun

 

YS

 

I recently met Yuguang Sun. Previously worked at Microsoft as a game programmer, Yuguang is currently the product manager/UX designer at “Pickies,” a food ordering service company he co-founded in New Jersey. Closely work with visual designer and programmers, he is in charge of prototyping and oversees the website design.

 

Education and background

Yuguang has an undergrad degree in Physics. He studied Computer science at Stevens Institute of Technology. While reading the biography of Steve Jobs, he was introduced to the concept of UX Design, and started taking courses in HCI and UX/UI basics. Yuguang also read books about Psychology along his way in becoming an UX designer. Looking back his journey, he realized that he has been interested Experience design for a while. Yuguang used to work on game design projects, where experience is a major component. He loves modern arts, which, in his interpretation, strives to bring viewers certain experience with visual rhythm.

“How did you get into your current position?”

Early Apple products were appealing to Yuguang; he was fascinated by the design and after Steve Job’s death he read his biography. As he dived into the world of UX design, he started reading books and blogs on this topic, including all of the 3 books by Don Norman. He collaborated with a group of game designer at a startup of a friend, but soon decided to run his own company.

While working on design projects as a freelancer, Yuguang see himself as a product manager at Pickies. He meet partners and negotiate, make plans and oversees the entire design process of their company website. Yuguang said that the normal phases goes as the following:

Talking to clients and getting to know their needs; create prototype; have visual designer do further editing; have programmers build the site; polish. Then the product was tested within the team, later in a small group of users, and finally the general public. In this process iteration is critical.

Yuguang also mentioned “Double blind test” – a testing method where neither the experimenter nor the participants know which group is control group and which one is test group. It helps to eliminate biased interpretations. Yuguang believes that this could be a combined with A/B test in evaluations.

“If you can go back to school, what course would you take?”

Yuguang said that he had been considering studying part-time for a UX degree. Some formal training in design and in using prototyping software is definitely necessary. He would also want to take research methods and usability testing courses. Yuguang revealed that since Pickies just started, they are are short of a specialist user research.

“Does your Computer Science degree helps?”

One thing Yuguang learned in work is that collaboration is the key. With training in CS he could communicate idea with programmers much easier. He also mentioned that CS training improved his critical thinking and problem solving skills. With rich knowledge of the tool that makes design models into something real, the design process may go smoother.

“What do you like/hate about your job?”

Yuguang loves the process of problem solving. While visual designers make “eye-candy” to please views, and programmers do what they are told to with little creativity, UX designers actually provide solutions and make things happen. He enjoys working on user-centered tasks, learning their needs, and getting feedback immediately.

Nevertheless, Yuguang admitted that it is hard to define UX. It’s all “soft-science”, and there are lots of things that you cannot prove with hard evidence. You cannot be 100% sure of what’s working and what’s not. On the other hand, regardless of all the efforts, good designs may not be appreciated since it’s so intuitive that people can’t even tell.

“Advice for UX newbies?”

Don’t stop learning. Read blogs, listen to podcasts, follow the news. This field is ever changing and be sure to keep up the pace. Full-stack designers are more preferable nowadays. It doesn’t hurt trying to become a “UX Unicorn”. Meanwhile improve communication skills, because it’s always teamwork in real life.

You must know how to adjust to different requests. UX design is a case-by-case job and every client has different need.

Know how to steal from the best. You’ll need to view at least 10 peer products before working on your own; do a thorough research/comparative analysis, the more the better.

Quick Q & A: The “5-Second Test”

 

What is “5-Second Test”?

“5 Second Test” is a usability testing tool that tells you whether the webpage effectively engage users. As the name suggests, you display a webpage to users for 5 second, then remove it, and ask them questions based on purpose of the page. It is a convenient and cost-efficient tool widely adopted by UX professionals.

Who developed this method?

The early 5 Second Test was collaborative efforts of Jared Spool, Christine Perfetti, and Tom Tullis (Perfetti, 2005). They aimed for testing content page and applied the 5 Second Test as part of a larger usability test. It was conducted under moderated environment. At the end, they were able to greatly improve client’s webpage using information they gathered through the test.

Why 5 second?

  • Research shows that users only spend a few second to judge the quality of a website. Emotionally, people can decide if they like a design or not in 5 second. (Actually, 50 million second is long enough!) (Hopkin, 2006)
  • “When we give users more than 5 seconds to study the page, we’ve found they start looking at the page more like a designer, noticing details they would normally miss or misinterpret.” (Perfetti, 2005).
  • It is cheap and convenient. You can gather a large amount of user information in a short time.

Which part of your interface needs the test?

UX Analyst Craig Tomlin found that success of a website largely depends on its home page. Though the early 5-second Test was to test content page, it is now frequently used for testing homepage or landing page. Essentially, designers want to know whether the page successfully communicate the following messages:

  • Who is the company?
  • What product or service is provided?
  • What’s the benefit to your visitor?

People also test pictures or overall design of an interface. No matter what, the purpose is always to find out the overall impact of an interface, and the core message it tries to deliver.

How to run the test?

You can set up the test in a lab with a moderator, or you can choose online testing tools like UsabilityHub (https://usabilityhub.com/five-second-test). This website allows you to collect user data remotely (see the image below) by simply uploading a screen capture of your design and entering a few questions.

Screen Shot 2015-11-11 at 10.41.49 AM

Screen Shot 2015-11-11 at 10.45.46 AM

 

Asking the right question is very important! Participants’ memory fade while reading and answering questions, and you don’t want answers like “I don’t know”. Here are some tips:

  • Be clear and concise. Don’t combine questions.
  • Target on specific feature
  • Ask close-ended questions
  • Avoid “yes or no” question
  • 3 would be enough. Don’t ask more than 5 questions

 

Can I run the 5-Second Test on everything?

NO! Don’t do the test when

  • The page serves many different purposes/Requiring reading text to answer questions
  • Testing for specific usability issues.
  • Evaluating changes/comparing design
  • Predicting behavior – e.g. would you use this for xxx

——————

 

Further reading:

The UX Five-Second Rules: Guidelines for User Experience Design’s Simplest Testing Technique by Paul Doncaster (https://books.google.com/books?id=b7XrAgAAQBAJ&dq=5+second+test+ux)

Paul Doncaster also published articles on The UsabilityHub Blog – http://blog.usabilityhub.com

 

Reference:

Doncaster, P. 2013. The five-second test: a wealth of ux data if you know how and what to ask.Retrieved from http://www.uxbydesign.org/2013/10/10/the-five-second-test-wealth-ux-data

Hopkin, M. 2006. Web users judge sites in the blink of an eye. Retrieved from http://www.nature.com/news/2006/060109/full/news060109-13.html

Tomlin, C. 2014. 5 Second Test: An important conversion optimization tool. Retrieved from http://www.usefulusability.com/5-second-test/

Perfetti, C. 2005. 5-Second Tests: Measuring Your Site’s Content Pages. Retrieved from https://www.uie.com/articles/five_second_test/

 

 

Design Critic: The Roundabout Theatre Company Website

 

Rdb Home

The Roundabout Theatre Group produces several Broadway and Off-Broadway shows every year. Though Roundabout also present events like education programs and workshops, rent their venues and accept donations, purchasing ticket and looking up show information are patrons’ most urgent need, and yet their website is not user-friendly in terms of these services.

Problem 1: a very confusing homepage

As shown in the screen shot above, the first thing you see on the site is a slide show. However, it is difficult to figure out what to do next. It seems that the first slide present capitalized title of shows, which are expected to be links to show’s pages, while it is actually a picture that brings you to the subscriber page (see below). And you have to scroll down to find current shows.

Rdb Subscriber

Subscriber page

Rdb home nav

One of the homepage slides

Beneath the slide there is a bar that summarizes all slides, including show titles and non-show content. Non-show buttons are put right next to show buttons and are in the same format, and everything seems to be mixed together. The real navigation bar on top is well hidden by dark background of the image (see above). There is another list of links to shows page on the bottom of the page (see below). How can you tell what this slide show is really for?

 

Rdb home 2

Rdb Home 3

Analysis and suggestions

The Roundabout Theatre Group homepage violates Norman’s rule of affordance and constrain. The first slide provides wrong clue and there are two many place to click on. There are also no clear suggestions that distinguish links to show’s page from other content. Clearly it tried to present everything at once, but users may get lost easily with all the links that direct to various content.

In order to fix this problem, I would substitute the entire slide show with “the 2015-2016 season” list on their “SHOWS & EVENTS” page (see below), which listed upcoming shows in a consistent format with smaller pictures. I would also separate the rest of content from the show lisi by putting them at the bottom, and emphasize the navigation bar with brighter shading or wider spacing.

Rdb List of shows

 

Problem 2: they are preventing me from purchasing tickets…

 RdbTicket-2

Aside from the messy slides on home page, there is no button labeled “TICKET”. And when you finally reached a show’s page, there you may still fail to know how to buy ticket, until you found a tiny notice that says the show is not on sale yet (see above).

On another show’s page, there finally is a “Buy Ticket” button, but when you click on it, and then click the calendar and then click on show time, you are told that the show has been sold out while it also says “best availability.” It would take you a while to find another tiny notice that says that the shows is not on sale as well (see below)…

 

Rdb ticket-1.1 Rdb Ticket-1

Analysis and suggestions

This ticket-purchasing mechanism shows bad mapping, poor visibility, wrong feedback and no logical constraints. Most shows’ websites or performing arts organization websites normally have a big bright button labeled “Ticket” on the top of their homepage in the navigation bar, or on individual show’s page. That would be what people expect to see on this website. But such button is not visible and there is no clue where to find it.

Since the show is not on sale yet, the “Buy Ticket” button should not be active at all in order to stop people from trying to purchase ticket. Whereas show schedule is still necessary, and the calendar should be visible right in the middle on the show’s page, with correct “not-on-sale” feedback when clicking on dates.

Nevertheless, a better solution is to put the “not-on-sale” notice where the “Buy ticket” button used to be. Since most people don’t read everything on the website line-by-line but scan and look for important message, the “not-on-sale” notice should be much bigger than other content or marked with a bright shading.