Modern software engineering handout 7 user interface and user experience

Document directory

• This is not a bug-it's okay if you enter Chinese.
• The user needs help, but the user is not so stupid
• Dogfood is not enough.
• Even Tom can't stand it.
• Improvements to human life cycle
• Academic search bug

Speaking of the User Interface, Let's first look at a figure:

[Source]

Some people think that UI design is full of creativity and extraordinary work, while others (especially those with some practical project experience) may complain that the work of UI is to clip clips behind clothes, let the front look better. In fact, the User Interface and User eXperience of computer software are a huge field (evolution of scholars, top conferences, and personal computer guis ), many suggestions are also circulating on the Internet. This article only records some sporadic examples I recently encountered and shares them with my colleagues in software engineering classes.

 

Software and Hardware have many functional components, and each component must be organically combined to meet user needs. A famous example is the teapot:

What are the functional components of the teapot?

Tea Pot lid, teapot body, teapot handle, teapot mouth

The following teapot has all these parts, but have they all met the user's needs? Or can we name them {normal teapot, literary teapot, 2 13 teapot} according to the trendy classification }?

 

[From Design of Everyday Things, by Donald A. Norman]

 

When a software team member is busy completing his/her "parts", does he/she think about how the user understands these parts? How do I use these components to complete user tasks?

Does your software engineer have empathy "empathy?

 

What is empathy? It is the ability to understand others' situations, psychology, and motivations. This is exactly what Xi Yan put yourself in other people's shoes.

1. From the user's perspective

Let's take a look at one of the many things we have talked about on the Internet recently:

Recently, some netizens reported that the anti-counterfeit currency email address published by the China Bank of China shuike sub-branch in Putian in Fujian has over 70 letters. The bank staff explained that the address was used internally in Chinese and the connection with the Internet would become a long string of code. Some netizens translated some Chinese characters corresponding to the Code according to GBK encoding as "cashier and cash management ".

[Picture from http://weibo.com/farmostwood]

Let's guess what the technicians think:

Requirement: you need an email address to allow the masses to send emails to complain about counterfeit currency and other things.

Technician: Good. The intranet address is ready. The tool is automatically converted to the Internet address!

Tester: copy/paste the email address to the email address and send it. Have you received the email? Yes. Pass!

Requirement: OK. Print the email address as a prompt card and move it to the business office!

What do software engineers with empathy think? They will think:

What are the cultural levels of our customers? under which circumstances will we find counterfeit coins? How will they send an email report?

They will drink tea in the Office (using one of the above three teapot) and copy the email address with the mouse and keyboard copy/paste?

No, what will they do, and the engineers put themselves in placeYourselfLet's take a look?

 

This is not a bug-it's okay if you enter Chinese.

I have to reinstall my computer from time to time at work. I usually have an English operating system. After the computer is installed, the first thing is to install the Chinese input method. I think it is not good enough because the system comes with the latest Chinese Input Method of Microsoft pinyin. So I used the search engine recommended by our company and input [Microsoft Chinese pinyin IME]. Hey, there is no link to the latest version in the search results. therefore, I sent an email to my colleagues in the relevant project team to provide comments [Thank God, our email address is generally relatively short, and it is easier to find emails from relevant departments]. After repeated email Forwarding/Q & A requests, a colleague replied:

If you enter the Chinese Pinyin input method. The first search result is the correct link!

Please, the reason why I want to search for this stuff is that my machineCannot enter Chinese Characters!

Fortunately, searching for [Microsoft Chinese pinyin IME] can finally return satisfactory results.

The user needs help, but the user is not so stupid

Our Bing search has a "display English explanations in Real Time" function, but this function explains all the English words with the mouse, including "a, of,, on, and, the, he, she ,... ", the user's mouse will often inadvertently stay on these words, you will see this" English translation "function to tell you with emotion" a "What does it mean, by the way, other text on the page is covered:

Our PM/Dev/Test thought about it when designing/implementing/testing this function.What is the English level of the target user?? To what extent do they need an English explanation? If they don't even know "a", can they come to your webpage to search for Results containing English ?!

Dogfood is not enough.

Microsoft has a tradition of dogfood. programmers use their own products (starting from the internal beta version). During the six years of development in Outlook, I spent most of my time using informal beta versions, some are the products just built the day before. This tradition ensures that developers can understand the performance of software functions in practice. If our employees often use dogfood's own products, the problems mentioned above will not occur-unless Microsoft employees even need to explain "...

However, this excellent tradition also has a side effect, because we are very familiar with the software we write, our psychology, technical capabilities are very different from general users. Once, a friend from Microsoft called me and asked me how to solve a strange problem in Outlook. I said, you go to the menu, Tools | Option | Advanced... Then you can select none of the selection boxes.

He said, "How dare I do? This is also an Advanced Option. What should I do if I make a mistake?

Many programmers do not realize that users have a great fear of the various options in the option dialog box. Programmers feel that they must have several advanced options to develop their own functions...

 

 

2. Remember the user's choice from start to end

My research institute often has foreign students for internships or foreign scholars for short-term exchanges. for the sake of work and life, most of them register accounts in a large bank. I have encountered several times of the following:

1. The User goes to the bank's portal website,Change the language to English, Start to register, although the interface is not so easy to use, but through repeated attempts, it is also done.
2. The website sends a text message to the user's mobile phone to inform the password (these visitors generally buy a shenzhouxing sim card and put it in their own foreign mobile phones ).
3. Tragedy:Text messages are in Chinese,Garbled characters are displayed on these users' mobile phones.
4. These people usually ask the people around them via their mobile phones. there are usually two ways out:
   1. Put the sim card in another machine, and then send the password again. // It is always unpleasant to let others know the password.
   2. Check whether there are 6 consecutive numbers in the Garbled text. // I can see the Garbled text that turns the first six digits into garbled characters. If you make a mistake, the consequences are serious.

The user uses any software to solve the problem. The various components of the software should be combined to solve the user's problem. The user has told the system in step 1-I want to use English! Does the module responsible for "text message" know this? Such problems can be solved through "scenario-based design" to enhance the team members' understanding of user experience coherence.

 

We often have some UI design drawings for new products in the innovation engineering group of Microsoft Asia Research Institute (the author has been working here for seven years). I have noticed that most of the design assumes that the user is the first to use the product, therefore, there are no accumulated files, photos, processed images, previous choices, and so on. I agree that the first impression is very important, but when the user is using your product for the nth time, can your UI provide convenience for these users? Your product is the following:

A) The more you use, the more difficult it is to use,

B) The more you use, the more difficult it is to use,

C) The more I use, the more I use it?

 

While I am writing this blog, I am suffering from a) Type of user experience:

 

Like other editing software, Windows Live Writer allows users to select fonts on the font selection page. You can see that all fonts are listed in alphabetical order. You need to select the "" font, what should we do? You can scroll through the menu and find Microsoft... And then select Microsoft YaHei. for users who use the software for the first time, there is nothing to say. The software cannot predict the font that the user will use. The user has to choose from all the fonts (it can do better, but it is not mentioned yet ).

But IAlreadyI used this software to write more than a dozen blogs on this computer. I often use two or three English fonts and two or three Chinese fonts. Why can't I remember this software? Why do I have to select a font that I have selected N times from the long menu?

As the number of fonts on my computer increases, this design may also deteriorateB) The more you use, the more difficult it is to use.

 

Windows Word has a better design, which divides the font into the theme font of the word template, the recently used font, and all fonts. Is it difficult to make software like this?

 

 

3. Short-term stimulus and long-term benefits/disadvantages

Some interns have made some new functions in Microsoft's academic search, such as the family tree that shows the relationship between scholars and teachers (genealogy/family tree ). After a long effort, they finally came up with the first version:

 

 

When you see the teachers, students, and students of a scholar pop up one by one through animation, it feels really cool! So we sent the link to others for appreciation... Very good... However, someone asked: If I come to this interface the next day, will the display change? How can we know that the information is new? Students replied: No, but this animation is cool!

Q: Will the user watch this cool animation every day?

A :...

 

Even Tom can't stand it.

Not long ago, Professor Andy Van Dam from Brown University visited the Institute. He talked about a lot of interesting things in graphics/human-computer interaction. We all know that movies often use household gestures to control computer scenarios. Tom Cruise's "Minority Report" is an example:

 

 

Atango looks pretty chic. He stretched his arm and made a gesture to move the information on the big screen. It's a pleasure. Professor Andy said that when making a movie, he had to take multiple sets of shots repeatedly. Tom repeatedly stretched his arm, waved, waved, and waved... I can't stand it anymore, and my arm cannot be lifted. Later, the cast had to hook his arm with a wire to complete the shooting.

If you want to work in front of the computer for two minutes, what control computer do you use:

A) mouse and keyboard,

B) gestures

C) Speech

What if you want to work 8 hours in front of the computer?

 

Similar situations have occurred in other industries. A long time ago, Pepsi and Coca-Cola competed fiercely in the market, and Pepsi announced that their new drinks were well received in user trials, the test user "said yes after taste". The Coca-Cola Company immediately bought the drinks from the other party and conducted user experiments in its own lab. unexpectedly, as competitors have said, most users like Pepsi's new drinks. Some people in the Coca-Cola Company are anxious to find countermeasures. However, after a few months, market data shows that this popular beverage in the lab has not produced a huge sales volume. Why? Is it wrong to launch the product to the market, or the supply cannot keep up, or the lab users lie? Later, we learned that drinking a few drinks in the lab is very different from drinking at the consumer's home. [Note: You can see it in the Blink book of Malcom Gladwell]

In the lab: You can have a few mouthfuls or a drink. // The new product is sweet and tastes good. I like it!

At home: American consumers buy a box (24 hours a day) and sit on the sofa while watching TV and drinking. // The new product has a high sweetness. It is too greasy to drink. No more.

 

 

4. Prevent Users From making simple mistakes

When you fly, you will see a small remote control in front of the seat. It can control the TV in front of the seat, read the light, and call the flight attendants. What UI problems and good design are there in this hi-tech Dongdong?

 

First, how to take out the remote control is a problem (there are many buttons on the opposite side of the remote control to be used ). You will notice the surroundings of the remote control, especially the traces of a lot of hard things in the upper right corner. It seems that some passengers may not go into the door, so they will simply be hard.

It is said that one of the biggest complaints of flight attendants and empty brokers about such remote control systems is that passengers accidentally press the "Call the flight attendants" button-when the flight attendants put down their work and ran away, passengers will say-ah, I didn't call you... If the flight attendant is not too tired, they will educate the passengers which key is used for what to do and then try again.

Let's take a look at these keys. in the upper left corner, call the flight attendants, in the upper right corner, cancel the call, and in the lower corner, read the light. As you can imagine, passengers can easily make mistakes in long-distance flights with insufficient lighting.

If we are designers, what are our good solutions? <Modern software engineering> students put forward many ideas in the classroom:

1. Represented by different colors
2. Use different voices for feedback
3. Multi-country text description
4. Install a light in the button
5. Ask the user to confirm again

These ideas are very interesting, but they may not really solve the problem, but may bring new problems.

1. Different colors may not be clear when the light is dark, and the user will still press it in disorder.
2. Sound feedback occurs after a button, and an error has occurred.
3. There are not many users who try again after reading the instructions
4. Lamp installation is expensive, and it seems that there are several small lights flashing in front of all seats in the past, some passengers may be uncomfortable.
5. How to Implement "confirm again? Will the user be happy?

This remote control also reflects the design improvements:

From the perspective, you will notice -[Call] Intentionally not doing too well (not because the passengers have pressed too many times );[Cancel call] Buttons are highlighted ;[Reading Lamp] Button is normal height.

According to a report:

Http://www.reuters.com/article/2011/06/21/us-airshow-button-idUSTRE75K1XR20110621

As mentioned in the report, many passengers simply don't want to turn on the reading lamp to avoid accidentally clicking the [Call] button.

The internal design of the new 737 aircraft finally separated the [Call] button and the [reading light] button from each other and placed them in different colors. The original design was complained by many people-they also visited the baddesign website. This seemingly simple improvement is said to have taken many years.

 

 

Now that we are talking about airplanes, let me give another funny example:

Http://www.codinghorror.com/blog/2010/03/the-opposite-of-fitts-law.html

 

If we place the [emergency ejection seat] button on the fighter Control Panel: [sprinkler window] [FM radio station] [ejection seat] [Cabin light]

It can be imagined that there will be many tragedies... This design can also be called a fighter in the braindamage design.

 

 

Improvements to human life cycle

From this book [note], I can see that different infusion medicines are used in the anesthesia process of the anesthesiologist in the operating room. Two tubes are identical, but they have different purposes, this has become the root cause of many medical accidents.

How can we improve it? You have many suggestions:

1. Strengthen training
2. Add a clear flag to the two tubes
3. Increase manpower and confirm the steps. Multiple people confirm before each operation.
4. Increase penalties for such incidents
5. The interfaces of the two pipes are completely different, making mistakes impossible.

Which option do you choose?

(5) is selected in the hospital. After this improvement, the number of deaths resulting from anesthesia mistakes in the operating room was reduced by 95%

 

 

Academic search bug

One of my favorite projects is Microsoft academic search. Although many users think its UI is good, it still has many improvements, A student named xiqiao gave the following suggestions:

 

 

5. User Experience and quality

 

Good user experience is of course what everyone wants. What if it conflicts with the quality of the product? Can the customer experience be turned into profit at the expense of quality?

Jack Welch, president of GE, told this story (from Chapter 4 of "win ):

In the 1990 s, Welch noticed that the channels of the MRI machine were very narrow. During dozens of minutes of examination, the patient often had the feeling of being autistic. Jack has done similar checks and has a deep understanding. He asked, can the channel be larger? Experts say that will reduce the quality of scan imaging.

He also asked, Can I sacrifice some imaging quality for those checks that do not require too much precision, in exchange for a good user experience? Experts say they will consider... Then there will be no more details.

Soon, Hitachi launched wide-pass scanning devices and gained a large market share. It took two years for GE to catch up with each other.

 

6. your remote control

We all usually say that we should learn from masters or products of XXX, hand over the most important functions to users, hide irrelevant functions, and perform subtraction... but programmers still want to "show" advanced functions. We have used remote controls for various TV/DVD players. They are very powerful and have a lot of buttons, right? Have you noticed the difficulties of remote control for the elderly?

The following "design" bold subtraction solves the problem:

(Link)

If there are so few buttons, it's not like Apple's iPod interface?

 

Exercise-always pay back

Good user interfaces and experiences can make users feel happy when using software. Mechanical and brainless user experience design will waste users time and increase learning costs, mistakes that can be avoided, frustrations, and even accidents.

 

It is impossible to read a blog without thinking about it. We may wish to do an exercise, which is a user interface of the indoor air-conditioning controller. I have tried it many times and still cannot solve it.

If I find that the air conditioner is on (whether hot or cold), I want to turn it off. What should I do? The ideal interface is that I only need to perform one operation.

How many operations does the user actually perform?

 

 

 

-----------------------

[Note:] Influencer: The Power to Change Anything (link)