Users Are Not Designers

While I open a mobile radio app, a screen (on the right) appears, describing how to use a feature in the application. The instruction says “Slide into the drawer to get started.” donotusejargonThe drawer? I think most of the people outside the UI (user interface) design world may not know what it means. Fortunately, there is a pink arrow in the picture, so I guess the three line icon is the drawer.

“The drawer” on a mobile screen is a technical term UI designers or developers use to refer to a UI element at the top corner of a mobile screen. Usually, it is a three line icon that allows users to show or hide a navigation panel. Designers may call it a hamburger icon. (This is a big misnomer since this icon has nothing to do with the hamburger metaphor.)

“Drawer” is not a bad metaphor to use since it indicates the behavior of pulling out and pushing in. However, to conjure the image of a drawer from these three small lines, one has to be exceptionally imaginative.

In addition, I’m not clear on the instruction, which says “Slide into the drawer…” What am I supposed to slide into? Assuming I know the icon stands for the drawer, how could I slide into it? Added to the confusion is the pink arrow, it’s pointing down. So my immediate response is to side the icon down.  To make it simple, I would say “Slide the side menu to the right to see more options.” menu_icon_2

To make it simple and plain, I would simply call it a side menu if it appears from the left or right side. I think the three lines represent more like a menu. See the example from the Frontier Communication mobile app. It simply uses “menu icon”.

UI designers or developers can call something whatever it makes in their field. However, for the general public, it would be more helpful to name something that they could easily relate to or understand.

“Nothing” is an Option

If someone asks you a yes-or-no question, you may feel obligated to choose one of the answers. In fact, the one being asked should be given the chance of not answering the question.

Look at the screen on the right. I’m asked to rate a mobile application. There are two answers given. Basically, one answer “I love it!”, meaning Yes to me, and the other “Needs some work”, meaning No. But the problem is I don’t I felt like I know enough to say one way or the other. However, I’m not given this in-between option. What should I do? It seems like I have to choose one of the answers as I don’t see any way to get rid of this overlay. It’s quite frustrating.

Look at another example on the left. At the bottom, there are a No option (No thanks), Yes option (LEARN MORE), and the between-yes-and-no option (Remind me later). In this case, I’m not forced to choose either Yes or No. I can choose to do nothing now. The LEARN MORE option seems to be a Yes option, but to me it’s like a “soft” Yes because selecting this option doesn’t mean I’m going to take this offer.

“Do nothing now” or “Do it later” is a legitimate option or sometimes a preferred option for users in a hurry. Uers may be interested, but for some reason they would not want to take any action at the moment.

In conclusion, UI designers need to consider these options when requesting an action from users:

  • Now
  • Later
  • Never
  • More
In addition to these three options, sometimes users may also need to have an option like “LEARN MORE” discussed in the above example. Or it’s like an tell-me-more option. I’m not making a decision yet, but I have a little time to spare and see if I can take advantage of this offer. One more example to illustrate my point.
Challenge yourself and see if you can match my suggested options to the buttons in the above example.

Fear Factor

I remember learning about classic persuasive techniques: ethos, pathos, and logos. These modes of persuasion are useful rhetoric devices to appeal to the audience. In this post, let me focus on pathos.

Pathos is a classic persuasive technique, which appeals to someone’s emotions. When used properly, especially in the design of an e-commerce site, it is a very powerful tool to persuade users to make a decision in favor of the business.

Here is one example. On Travelocity, a popular leisure travel web site, if you rent a car, you will be offered collision insurance coverage close to the end of the process, as shown below.

persuasion-1

If you select the option “Yes,” you will have a peace of mind, knowing you will be covered if you unfortunately have a collision. However, if you select “No,” you will not be covered. When you select No, you see “No, I’m willing to take the risk.” If you’re a moderate risk taker, it may not mean much to you. However, if you’re someone who is not risk tolerate, it recommends you buy the coverage. The psychological effect of “No, I’m willing to take the risk” is so much powerful than simply saying “No.”

Assume you select No. The game is not over yet. You will see the following message.

persuasion-2

Once again, it reminds you that you have no protection.

By the time you wrap up your transaction and are ready to pay, you are reminded again (in red text) one final time that your car is not protected. And it’s not too late to add it now.

persuasion-3

Note that once you click on “Add now”, the fee will be added automatically and the total updated accordingly.

So in rejecting the purchase, you’re “hit” three times about the risk of not having coverage.

I don’t know the percentage of people that change their mind after being “warned” with these messages. Pathos appeals to fear in order to sway people’s decision. In this example, you can see the full display of it.

Here is another example to “pressure” users to make the purchase now.

persuasion_trip_summary

See the message “Only 3 tickets left at this price!” in red. It urges users to make the purchase now before it’s gone because the inventory is running out.

Injecting “fear” to users influences their decisions or causes them to change their decisions to our favor. However, if we can alleviate users’ fear, it may also change their actions. See the following picture:

fear_factor_dont_worry_we_dont_spam

Users may feel apprehensive giving out their email addresses. But there is a note “Don’t worry, we don’t spam” below the Email input box. This may help calm the fear of their email addresses being abused. Hopefully, they feel more comfortable providing the information. Alleviating users’ fear is another technique designers can use to change users’ behaviors.

 

Does One Size Really Fit All?

To make things simple, designers may apply a standard “template” to all the similar scenarios. Sometimes, this “one-size-fits-all” approach may not work. For example, when you open a dropdown list, you can find only one single item. The intent of using a dropdown list is to display multiple items. However, if there is only one item, we actually don’t need a list. Simply display the item.

Here is another example I come across on an ecommerce web site. After deciding what to purchase, I am ready to pay for my items. When it comes to selecting a shopping method, this is what I see.dont_tease_me_3

In the Standard shipping method, there is a “Details” link. I clicked on it, expecting to see more details. Here is what I see:
dont_tease_me_4

Surprised. It doesn’t tell me any more details. So I ask, “Why the link was there?” It just wastes my time.

Actually, the Details link shows the breakdown of the shipping costs if I purchase more than one item. See the picture below:
dont_tease_me_5

If I select Express shipping, I do see the breakdown for each of the items. However, for Standard shipping, it doesn’t matter how many items you purchase. It remains the same. If this is the case, why do we need Details for Standard shipping? It should be removed.

I believe the Details link is the default layout and applies to all shipping methods. However, if a particular option is not relevant, the designer should have it removed. Adding it there won’t enhance the user experience. And the reverse is true.

Here is another example, where the up and down arrows are not needed. There is no more text to be displayed.
The up and down arrows in the text box are not perfunctory.

The arrows are only needed when there is more text than the text box can fully display.

It’s Worth Waiting For

Research studies have shown that if a web page takes longer than three seconds to load or retrieve the requested information, users will not wait for the page to fully load. If a long wait is really necessary, user experience designers may display an animated progress bar to indicate the time remaining to wait. Knowing how much longer to wait, users think the wait is not as long as it really is.

Travelocity, a popular travel booking e-commerce site, makes waiting a bit interesting. You search for air ticket fares, hotels, rental cars, etc. When the results come back, you will see items progressively display on the screen. First, it loads the items and then the prices. What is intriguing is that the prices are loading in descending order, meaning that you see the highest prices first and then the lowest prices last.

People in general don’t like to wait. But in this case, you would like to “wait” as long as you can to see the prices going down, like from $2,000 .. $1,500 … $1,000 to say $500. How nice! It may be psychological to entice buyers as they see the prices dropping rapidly to a comfortable level and make them feel like they are going to get a great deal.

So user experience designers need to explore ways to make wait less frustrating or annoying. If your intent is to make your application enjoyable and pleasurable, then you’ll come up with innovative and creative ideas.

Ideas to Streamline Wait Time

  • While loading data, the application can display information useful to the user. For example, while installing an application, the screen can display information on how to get started with the application.
  • Commercially speaking, the screen can display advertisements to generate revenue.
  • Identify new technologies to help retrieve data faster. Performance improvement is a direct way to reduce wait time.

Please note that no matter how smart you are to improve the wait time, excessively protracted wait is never good. So if the wait is really lengthy, you will need to reduce it to avoid users clicking on the Back button or close the application completely.

Don’t Make Me Remember

I believe you’ve had unpleasant experiences looking for your vehicle in a huge parking lot that you’re not familiar with. How frustrating it is trying to recall where you parked. Whenever I park my car in a multi-level parking lot, I always take a few pictures with my cell phone to remind myself of the level and row where I park.

The other day, I went to the Dallas/Fort Worth (DFW) airport, which is a big airport. I did the same and took a couple of pictures of where I parked. Then I walked to the nearby elevator and found a small pile of small note cards hanging on the button panel outside the elevator. Out of curiosity, I took one of them. The card showed the terminal, level, and a blank for me to write down the row letter. Then I realized it acted as a memory aid.

Parking card that shows the location of your parked vehicle

Parking card that shows the location of your parked vehicle

Imagine you park you car at the airport for a week-long business or leisure trip. When you fly back to the airport, you may not remember exactly where you’ve parked your vehicle. With a handy note card, you won’t forget. But you need to make sure you remember where you put the card. (Maybe it’s better to take a picture and store it on your mobile phone.) It seems a small thing, but it comes in handy in case you don’t remember where you parked.

In UI design, we can also help users remember information they may need later. Examples:

  • On many e-commerce shopping sites, such as  amazon, it tracks your browsing history. So if you ever want to go back to an item you have viewed, you can find it in your history. So it’s even better than shopping at a physical store because you may have trouble backtracking to the location of the item you didn’t want to buy, but now you do.
  • Travelocity, a popular travel web site, has a feature called Scratchpad, which tracks your searches. If you’re planning a trip but aren’t sure where to go, you may try numerous destinations, travel dates, travel types (air, car, cruise), etc. If you want to go back to a previous search, you can open the Scratchpad to see all your previous searches. It is quite a handy feature. Imagine how much information you need to enter or re-enter to do each search. With this feature, you don’t need to remember all the details.

Here are only a couple of examples. UI designers should use every opportunity to help users perform their tasks with ease, including reducing their cognitive load. Any design, big or small, that provides users with what they need can enhance their user experience.

Be Smart. Don’t Ask Twice.

One of the design areas I’m interested in is self-service kiosk design. So whenever I see a kiosk at a store, I would put my fingers on it (literally). Today, I came across a kiosk that allowed people to duplicate keys. Most kiosks have a language selection on the first screen. So if you’re more comfortable with your native language and it is available, you can change the default language to your preference. Figure 1 shows the first screen of the kiosk.

be_smart_1_edited

Figure 1: Two buttons at the bottom: one label in English and the other in Spanish

At the bottom of the screen, there are two options: “Touch Screen to Begin” and “Toque Aqui Para Comenzar.” I enlarge the two buttons, so you can better see the button labels.

The button label on the left is in English. Being in Texas, I can guess the one on the right is in Spanish. I don’t know Spanish, so if I wanted to use this kiosk, I would tap “Touch Screen to Begin” since I don’t know what the other option means. But just out of curiosity, I selected the Spanish option.

be_smart_2

Figure 2: The user is asked to select a language

Figure 2 is the next screen. It asks me to select my language.

What? I just did. Not directly though.

If someone selects the Spanish language option, I would think that’s the language she would prefer. How come she is asked (again)? The application should be more intelligent to detect the user’s preferred language from her previous selection.

The only justification for this screen would be it functions like a confirmation screen giving the user a chance to confirm or change her selection.

To simplify the screens, the application could provide an option (in both languages) on the opening screen that allows the user to select a preferred language and then display the following screens in the selected language accordingly. There is no need to ask what you already know!

Other examples:

  • An automatic phone system may ask your account number. You painfully enter all the characters in your account number. By the time you get to a live agent (most likely after a wait), he will ask you again.
  • When you fill out an address form, the zip code is likely the last field before the city and state. It would be good to have users provide the zip code before the city and state. Because once the zip code is provided, the city and state can be determined. Of course, users can verify after the the city/state information is displayed.