Kathy's UX Journey

The User Experience of Studying UX

Puzzles of Thirst — June 6, 2016

Puzzles of Thirst

A man dies of thirst in his own home. How is this possible?

Perhaps you’ve heard this riddle.

Does it seem like you are living in it? Say, when you try to use a some drink dispensers?

At first I thought it was just the ones in our office. But I keep seeing more and more instances of water coolers, coffee brewers and drink dispensers that are overly complicated, almost to the point of being impossible to figure out.

Let’s delve into a couple of these riddles!

The Case of the Secret Combination

hot-or-cold-crop

This seems straightforward; after all, there are only 3 buttons.

Looking at these icons and colors we can make some pretty good guesses about how it works. Red button with mug icon looks like a hot liquid. The green button looks like a glass with something in it. That big blue button definitely looks like water.

That blue button is pretty big so let’s try pushing that one. And we get… water! Yay!

Great! Now let’s try pushing that red button. And… nothing. Huh?

Hey [co-worker], how do you get hot water out of this thing?”

“You have to hold down the red button till the light flashes.

Ok. Got it. Doing that now. And… nothing.

Hey [co-worker], that didn’t work.”

“Oh! Haha, I forgot to tell you to push the big blue button once the red light starts blinking.

Of course. Wouldn’t want to get burned by unexpected hot water. So I guess it makes sense that it would be more complex to get hot water.

OK figuring out two out of three buttons is enough for today.

~~~ 2 months later ~~~

Hmm, what is that green button for? And what is that shape inside the glass icon supposed to be?

Poke. Poke. Poke.

Ah ha! The green button works like the red button. Hold it down until the green light flashes then hold the blue button to dispense the water.

And it gives you… (drumroll please) … room temperature water!

I still have no idea what the shape inside the glass icon on the green button is supposed to be though.

How can this be improved? Should it be improved? While it may be a bit weird to do the first time, the actions are simple enough to remember after that. It makes sense to have the hot water be a more deliberate action. And, cold water is the most common request from a water cooler so it definitely makes sense for that button to be the largest and most obvious.

The real issue here is the initial difficulty figuring out how to get hot or room temperature water.

3 buttons. 3 temperatures. It seemed that straightforward in the beginning, maybe it actually can be?

  • push red button and hold, light starts to flash, hot water comes out
  • push big blue button and hold, cold water comes out
  • push green button and hold, green light starts to flash, room temperature water comes out.

No need to change the buttons themselves. Just remove the need to fiddle with two buttons. The less common actions are already smaller buttons and will therefore be slightly harder to hit, making it more of a conscious decision to push them.

And you know what would be a nice touch? A tiny additional touch factor: buttons that are slightly different temperatures. A slightly warm button for hot water, slightly cool for cold water. Our fingers are sensitive, it doesn’t have to be a big difference in temperature, just enough to remind us of our choice.

The Case of the Unknown

ice-or-water

I love this one with its two mysterious black buttons.

And somebody in the office tried so hard to fix it by adding helpful labels below the buttons. Unfortunately, the label maker had clear label tape in it, making the black text almost unreadable because of the dark surface showing through.

The fix for this one is simple! Just add white icons on the black buttons: ice cubes on the ice button and a water drop on the water button. Here’s my rendition:

ice-or-water-icons

My sincere hope is that originally the manufacturer had labels or icons on the buttons and they wore off over time. Though if that was once the case, there is no evidence of it now.

What’s your favorite thirst quenching riddle?

Advertisements
Reflections on Google’s New Multi-Screen World Study — May 26, 2014

Reflections on Google’s New Multi-Screen World Study

Screens.

What does that bring to mind? Media such as TVs? Or perhaps movies, as in “the big screen”? What about computers or laptops? Tablets / iPads? What about your smart phone?

Consider your day for a moment.

How many times do you work on your computer during the day? What about your tablet? How often do you pick up your phone to do a quick internet search or find a store nearby? Do you play on your phone while watching TV?

Google asked these questions in their study “The New Multi-Screen World Study: Understanding Cross-platform Consumer Behavior,” published in 2012.

Why am I talking about this on a UX blog? Because there are some incredibly valuable lessons to be learned about when and how people view your website/app/thing-you-designed-to-be-viewed-on-a-screen.

In fact, before you read anymore of my post, open up Google’s study and read it. It’s an easy read with lots of pictures and useful conclusions. No fancy academic verbiage, just the stuff you need to know.

Done?

Ok, here are my thoughts.

First, I want to know why did people switch from one device to another during an activity? For instance, what motivated people shopping on a tablet to switch to a computer to complete the task? Was it because the shopping website they were looking at didn’t let them do what they wanted to on a tablet but they knew it would work on a PC? If that’s the case, there is likely to be a percentage of people who just didn’t finish the task at all because it required switching devices.

Those are lost sales.

That, my friend, is a very strong incentive to apply user experience design principles to the mobile experience of your site/app. In particular, consider applying a “mobile first” design philosophy as outlined in Luke Wroblewski’s book Mobile First or learn more about responsive web design to help you give all your site’s users a great experience.

Which brings me to my second thought.

Google looked at how people keep track of their activity while moving from one device to another. Methods included:

  • Search again on second device
  • Directly navigating to the destination site
  • Via email / sending a link to myself

Since switching between devices seems to be a prevalent course of action, what can we do to ease that transition?

Remember, easing the transition = less audience loss = more sales!

What if you had a “universal account” linked to all your devices such that you could retrieve the state of one device while on a different device? Imagine playing around on your iPhone but the battery dies and … you can’t find your charger. You really want to continue reading that awesome UX blog post … but you can’t remember the URL. Just pick up your iPad and click the “get current browser state from iPhone” button.

Ta-da! Problem solved.

[The cloud is a big idea currently. Probably someone has done this already. But, if not, get to it!]

The authors of Google’s study saw this potential as well, as they concluded:

The prevalence of sequential usage makes it imperative that businesses enable customers to save their progress between devices. Saved shopping carts, “signed-in” experiences or the ability to email progress to oneself helps keep consumers engaged, regardless of device used to get to you.

My next thought stems from this quote from a participant of the study: “I do find myself being distracted from what I’m watching a lot more, now that I have these devices. I’ll find myself, just out of habit, picking up the touchpad or the phone and deciding to search on the internet for a little bit. I’ve never understood why I do it, but I just do it in the middle of a TV show, and start searching… It’s frustrating that I do it though, because you feel like you don’t stay as engaged with the show that you’re watching.” – Bradley

Now here I’m going to wander off UX for a moment.

My reaction to this quote is that TV programs need to be more engaging and thought-provoking in order to have any chance at all to compete. Mobile phones, laptops and tablets are much more interactive. If you’re not communicating with viewers on an intellectual level they’re going to turn elsewhere to keep a dialog open.

Based on the sheer percentage of multi-screening happening with one device as a TV, I’d say that TV stations and advertisers are losing the focus and attention of their audience.

Personally, I think there needs to be more TV for “smart people.” Catering to the lowest common denominator (as seems to be the current state) means losing the complete attention of smarter folks. [Note the popularity of the Colbert Report and the Daily Show as preferred news sources.]

Additionally, shows and advertisers could (and do I’m sure) consider ways to purposefully engage viewers simultaneously on other devices. For instance, someone could watch a show about X and at the same time search for more info about X on that show’s website. Advertisers could think this way about it: “we know you’re going to use your tablet while watching our show, let’s see if we can get that use to be in our favor.”

Again, the authors of the report seem to come to a similar conclusion:

Most of the time when TV is watched, another screen is being used. These instances present the opportune time to convey your message and inspire action. A business’s TV strategy should be closely aligned and integrated with the marketing strategies for digital devices.

Those are some of my thoughts. What are yours? Please share in the comments below.

The post was spawned by an assignment in Aquent’s Responsive Web Design class–which I highly recommend if you want to know more.

Dr. Grace Murray Hopper – UX Pioneer — April 4, 2014

Dr. Grace Murray Hopper – UX Pioneer

Perhaps, if you are an inquisitive geek or fond of history, you have heard of Dr. Grace Murray Hopper.

I think I may have heard the name in passing at one time or another, but the name didn’t mean much to me until the other day when I read a section in this book to my daughter:

Girls Think of Everything: Stories of Ingenious Inventions by Women

Wherein I realized that Grace Hopper is the most awesome role model ever for a woman following her dreams in the user experience field.

Reading WikipediaFamous Women Inventors, and The Grace Hopper Celebration of Women in Computing you’ll see that Grace was full of energy and spirit and had a great tenacity–she didn’t retire (involuntarily) from the Navy until she was over 79.5 years old! And even then she didn’t really retire, she just moved on to be a senior consultant to Digital Equipment Corporation.

But that’s not the amazing part. The amazing part is how much and what she did with all those years of service.

Grace Hopper became the third programmer on the very early computer, the Harvard Mark I, and then became senior programmer on the first large-scale commercial computer, the UNIVAC.

This was when programmers had to enter every program individually into the computer as a string of 0s and 1s called machine code. It was very time-consuming and if only one 0 got switched to a 1 (or visa versa) the program wouldn’t run.

She believed there was a better way. A way to let you save and run repeatable commands. Her supervisors didn’t believe it was possible but she persisted and developed the first compiler–a program that could turn mathematical code into machine code.

‘No one thought of that earlier because they weren’t as lazy as I was,’ Grace said. ‘A lot of our programmers liked to play with the bits. I wanted to get jobs done. That’s what the computer was there for.'”
– from Girls Think of Everything: Stories of Ingenious Inventions by Women

Then Grace went a step further creating a compiler that could take English instructions, in the syntax of the FLOWMATIC programming language, and turn it into machine code.

In 1952 [Grace] had an operational compiler. ‘Nobody believed that,’ she said. ‘I had a running compiler and nobody would touch it. They told me computers could only do arithmetic.'”
– from Wikipedia

But Grace wasn’t done yet. As different companies began to develop different computer programming languages she saw the need for standardization and “lead the team that invented COBOL (Common Business-Oriented Language), the first user-friendly business computer software program.” (Source: Famous Women Inventors)

She continued her groundbreaking work for many years, coming out of retirement multiple times and even remaining “on active duty for several years beyond mandatory retirement by special approval of Congress.” (Source: Wikipedia) Think about that for a moment–how awesome and necessary must she have been to get Congress to agree on keeping her past retirement age. Wow.

After finally retiring from the Navy, for real this time, she became a senior consultant to Digital Equipment Corporation. There her primarily role included lecturing widely on “the early days of computers, her career, and on efforts that computer vendors could take to make life easier for their users.” (Source: Wikipedia)

Dr. Grace Murray Hopper had a passion to make computers easier to use and that passion sparked a movement that continues today as UX.

Think of Grace and go forth and make the world a better place!

Find UX Events — March 20, 2014

Find UX Events

Looking for UX events? Check out Find UX Events.

Their motto is “Helping UX Professionals find UX Events” and they certainly live up to it with events across the globe and even events in 2015.

If you’d like to see or hear previous conference presentations visit UXMastery’s list of UX Conferences for materials.

Fruity Cone: the Food Trailer of the Future — January 13, 2014

Fruity Cone: the Food Trailer of the Future

During Aquent Gymnasium’s Coding for Designers, the instructor often encouraged us to expand on and practice ideas presented in the class.

One assignment was to code the home page for a restaurant website based on a Photoshop comp. Not only did we practice creating pixel perfect CSS, we also learned and experimented with Twitter Bootstrap and Google Web Fonts.

The extra credit assignment for this assignment was to invent our own restaurant and design a Photoshop comp for the desktop version of the home page. Then we had to code the website utilizing Twitter Bootstrap and Google Fonts.

Inventing a restaurant

Considering the current trends in gourmet food trailers, locally sourced food and healthy eating, it seems natural that the next step should be a food trailer selling fruit. It would be an on-the-go food, but should be fancier than just a banana, so the fruit would be presented in a cone–a fancy waffle cone.

Designing a Photoshop comp

This is the Photoshop comp I designed for my pretend restaurant “Fruity Cone”.

Fruity Cone - the desktop version

Coding the home page

By examining all the elements and layers in the Photoshop comp I was able to recreate the page using HTML and CSS in jsbin.

I used Google Web Fonts to bring in Source Sans Pro and Open Sans and Twitter Bootstrap for layout support. After researching cool CSS3 tricks like shadows and the border radius I utilized the handy site CSS3Gen.com to create some nice box effects.

View the home page I created and the code I wrote based on the comp: Fruity Cone website.

2013 Online Course Wrap-up — January 3, 2014

2013 Online Course Wrap-up

Happy 2014!

Want to learn something new? Try a free online course!

I’ve participated in several during the past year. What I’ve noticed is that online courses have different goals and different audiences depending on the source. Thus you’ll get different things out of each one. Here’s an overview of the courses I took. See what works for you.

Human-Computer Interaction, a Stanford Online course through Coursera

This is a university course modified for online presentation and massive open participation. As you might expect, it has a very academic feel. With videos, quizzes, assignments and peer assessments, all on a rigid time frame, it’s definitely the most intense and immersive of the courses listed here. Plan to spent 10-15 hours per week on course related activities during the 2 months of class.

Definitely worth it if you can make the time. It includes a huge amount of material and hands-on experience. During the course you take an idea (website or mobile app) all the way into the prototyping and user testing phases. You won’t get a completely finished app or site but you’ll be well on your way. Read all my posts on this course.

User Experience for the Web (WebUX) through Open2Study

Open2Study is backed by the Open Universities Australia. This particular course is a free course related to the Bachelor of Arts (Internet Communications) accredited degree program. After taking the HCI course from Stanford, this one feels like a teaser to their BA program and it may well be.

It consists of four modules with about 10 videos each and includes brief in-video quizzes and end-of-module assessments. No specific deadlines or time frame–start and end the course whenever you like.

No hands-on activities but it does provide a nice overview of UX including purpose, elements and methods, all with a lovely light Australian accent. If you’re not sure yet if user experience is your thing or if you want to introduce a co-worker to UX, then this is the course for you.

Javascript lessons on Codeacademy

Here’s where I jumped from UX into code for a bit. Curiosity got the better of me and you should let it get the better of you too.

Codeacademy is completely self-paced and provides lessons on popular languages for programming websites including HTML, CSS, Javascript, jQuery, PHP, Python and Ruby. This is all about do-it-yourself style learning. No videos. Just a step-by-step addition to your skill set. Text instructions and information on one side of the screen and the code (theirs and yours) on the other.

Lessons are easy to follow and quick. It saves your progress as you go and it’s easy to stop and come back to. Time commitment is minimal for just an introduction. The more you want to know the more time you’ll want to spend. If you’re looking for a hands-on introduction to any of the languages above then this is your place.

Coding for Designers through Aquent Gymnasium

Since Aquent is a staffing firm for “digital creative and marketing professionals” it should come as no surprise that this course is the most productive in terms of professional development and building your portfolio.

The express purpose of the Aquent Gymnasium is to bridge the skills gap by “teach[ing] digital designers and front-end developers today’s most in demand skills.”

The Coding for Designers course is, as you might imagine, for designers (print or web) who want to learn more about the coding part of website design, specifically HTML and CSS. This is the only class I’ve taken that had a quiz covering the prerequisites and you had to pass it before signing up. This is a great idea as it ensures that students have the necessary knowledge to understand the design terms used throughout.

The thoughtfully put together and engaging videos answered many questions a designer has walking into a coding environment. Each of the 6 lessons includes videos, a brief quiz and a real-world assignment to practice the material covered. The final exam is relatively brief but ensures that you have a foot in the door of the coding world.

The Aquent Gymnasium is still pretty new and the number of students enrolled is relatively low compared to many other massive free online courses. Course assistants frequently answer questions on the forum and review student assignments.

What I found particularly useful was the specific guidelines given regarding what you can say in your resume and what you should show in your portfolio after the course. There are specific extra credit assignments given to help you build your portfolio.

If you have career oriented educational goals, definitely check out the current course offerings on Aquent Gymnasium.

Enjoy a very educational 2014!

Smart Transitions in User Experience Design — December 5, 2013

Smart Transitions in User Experience Design

This article from Smashing Magazine is definitely worth reading. It talks about how small interaction details can significantly improve the user experience. And it provides nice animations to demonstrate each concept.

Smart Transitions In User Experience Design
By Adrian Zumbrunnen

 

The Skeleton — November 26, 2013

The Skeleton

Every design needs a first draft. Three is even better!

Brainstorming different ideas gives you several advantages over just charging down the first path you think of:

  1. The first idea is probably not going to be the best idea.
  2. By having several ideas, your ego is not wrapped up in one specific idea. You’ll feel free to critique any particular design more, thus improving it.
  3. You can compare and contrast the different designs. And you can mix and match parts from each.

Thus, here are the very first design ideas for the yarn ecommerce site. They’re just rough navigational skeletons at this point. These are interactive pdfs created with Balsamiq.

Wireframes 1

Wireframes 2

Wireframes 3