Desktop End UI Test Summary

Some tests are being done lately, with partial support for a smooth beta of the product.

The following is the test of the Desktop.

The first part: Windows program UI design preliminary

Background introduction

UI is the user interface (user-interface), is the interface between people and tools. In the process of human-machine interaction, it must be through the interface. This interface is actually reflected in every aspect of our lives, for example, when we drive the steering wheel and dashboard is the interface, watching TV when the remote control and the screen is the interface, use the computer keyboard and the monitor is the interface , To the use of software, the user can see through the visual interface. This interface includes hardware and software. The UI design we are talking about here refers specifically to the software interface under the Windows operating system.

User interface design has three basic principles: a. Home interface under the control of the user; b. Reduce the user's burden; c. To maintain the consistency of the interface. From the perspective of program design and development, interface design can be divided into three parts: structural design, interactive design and visual design.

Structural design, also known as conceptual design (Conceptual Design), is the skeleton of the interface design, through the user research and task analysis, to develop the overall structure of the product. The paper-based Paper Prototype provides user testing and refinement. In the structural design, the logical classification and definition of the directory system are important preconditions for the user to understand and operate easily.

Interaction design is the nerve of the program, so that users and software processing part of the communication, the ultimate goal is to make products easy for users to use. The realization of any product function is done through the interaction of people and machines. Therefore, human factors should be reflected as the core of the design.

1) Clear error message. After the wrong operation, the system provides a targeted hint.

2) let the user control the interface. "Next", "Completed", offers a wide range of options for different levels and offers multiple possibilities for users at different levels.

3) Allow both mouse and keyboard. The same function, you can use the mouse and keyboard. Offers many possibilities.

4) Allow work to be interrupted. For example, when using a mobile phone to write a new text message, you can receive a text message or a phone call. Once you are finished, you can still find the new text message you just wrote.

5) Use the user's language, not the technical language.

6) Provide quick feedback. Psychological hints to users, to avoid user anxiety.

7) to facilitate the exit, such as the phone's exit, is a key to completely exit, or layer by layer exit. Two possibilities are provided.

8) Navigation function. Transfer at any time, it is easy to jump from one function to another.

Visual design is based on the structural design, with reference to the psychological model of the target group and tasks reached, the face of the program, to achieve the purpose of making users happy, including color, font, page and so on. The principles of visual design are as follows:

1) The interface is clear. Allow users to customize the interface.

2) Reduce the burden of short-term memory. Let the computer help memory, for example: User Name ,, Password, IE into the interface address allows the machine to remember.

3) rely on cognitive rather than memory. Such as the print icon memory, drop-down menu list of options.

4) Provide visual clues. Visual stimuli of graphic symbols; GUI (graphic interface design): Where, What, Next Step.

5) provide default, undo, redo function

6) provide a shortcut to the interface.

7) try to use the real world metaphor. Such as: phone, printer icon design, respect for the user's previous experience.

8) Improve visual clarity. Clearly organized; pictures, text layout and metaphor do not allow users to guess.

9) The interface is coordinated. Such as cell phone interface button emissions, left key affirmative; right-negative; or by content display.

10) The same function with the same graphics.

11) color and content. The overall software does not exceed 5 colors, try to use less red, green. The approximate color indicates the approximate meaning.

2. UI design of some of the principles.

For Windows users, what users realize is what they see. The reality that must be seen is that the interface is user-oriented, the user needs the application developed by the developer to meet its needs, and is easy to use. A good user interface allows users to access the application without having to read a user manual or training.

2.1 interactive design of some of the principles:
2.1.1 clear, targeted operation tips. Use message and label wording should be appropriate. The text displayed on the screen is the user's primary source of information. Text wording directly affects the user's understanding. Use the user's language, not the technical language. The message should be active, showing that the user is in control and prompts for proper use of the software. For example, "you entered the wrong message" or "account should be 8 digits" will give users a different experience. In addition, the wording of the message should be the same, the position displayed on the screen should be the same.
2.1.2 let user control interface. "Next", "Completed", offers a wide range of options for different levels and offers multiple possibilities for users at different levels. Let users know their current location, make it the next action decision. Allow work interruption, easy to exit. The entire interactive process provides quick feedback. Psychological hints to users, to avoid user anxiety.
2.1.3 allows multiple inputs such as mouse and keyboard. The same function, providing a variety of ways.
2.1.4 Use non-destructive default button. Usually each screen defines a default button, if the user press the Enter key to call this button. The problem is that sometimes users accidentally hit the Enter key, the result activated the default button. The default button must not be potentially destructive, such as deleting or saving (maybe users do not want to save at all). The best way is to use the key combination to set the button, a more thorough way is to remove the default button, which is contrary to the principle of support for multiple inputs at the same time, but in a particular case can be considered.

2.1.5 Opens the window at the operating focus. When the user double-clicks on an object to display its edit / detail screen, the user's attention is also concentrated on this. It makes sense, then, to open the window here and not elsewhere.
2.1.6 The pop-up menu should not be the only source of functionality, the main function menu should not be hidden. Proper use of context-sensitive menus. Depending on the circumstances of this menu to provide the right mouse button, lack of excessive is unscientific.

2.1.7 provide standard common features, provide a shortcut to the interface. For example, commonly used buttons, the menu should have the same shortcut keys and other similar software, generally open on the file menu. If a menu item, press to pop up a window, then the end of the text of this menu item should have an ellipsis to imply the user, for example, "open ..."

2.1.8 To consider the various levels of user operation level is not balanced.

2.2 Some principles of visual design:

2.2.1 Consistency. Ensure that the interface is consistent. For a list box, if you double-click one of the items so that some of the events occur, then double-clicking any other item in the list box should have the same event. The location of all window buttons should be consistent, the wording of the label and message should be consistent, and the color scheme should be consistent.

2.2.2 Interface layout is very important. People from left to right, from top to bottom reading, based on people's habits, the screen should be organized from left to right, from top to bottom. Clear interface, the screen can not be crowded, crowded screen makes it difficult to use. The experimental results (Mayhew, 1992) show that the overall screen coverage should not exceed 40%, while the group screen coverage should not exceed 62%. If you want to express more information, the best split-screen display. Area arrangement. When the screen has multiple editing areas, organize the areas visually and efficiently. Area left alignment is the best method. The corresponding label should be right-justified and placed next to the edit area. This is a neat and effective way to organize the area on the screen. Data alignment should be appropriate. For a column of data, the usual practice is to right-align the whole floating-point number and the left-justified string. Effective combination. Logically related items should be combined on the screen to show their relevance. Conversely, any items that are irrelevant to each other should be separated. This can also be done by grouping project sets with intervals or by using boxes.

2.2.3 Interface switching is very important. If it is difficult to switch from one screen to another, users are discouraged and discarded quickly. When the screen flow and the user want to complete the workflow, this software makes sense for the user. Due to the different ways in which users work, the applications need to be flexible enough to support them in different ways. As far as possible to provide users with a relatively easy, free user interface;
2.2.4 Provide visual clues. The visual stimulation of graphic symbols is far greater than the text. Try to use real-world metaphors. Such as: telephone, printer icon design, the same function with the same graphics. The purpose of adding icons is to make it more eye-catching, more prominent. However, if indiscriminate plus, indiscriminate, but can not highlight the focus, are the focus is equal to not the point. Add the icon to maintain the same style, do not want a button icon is the true style of the XP-style color icon, the next has become a Win95-style 16-color icon, the next Mac style has become the aesthetic icon, such a hodgepodge appears extremely Professional, reduce the user's trust.
2.2.5 color and content. The overall software does not exceed 5 colors, try to use less red, green. The approximate color indicates the approximate meaning. The colors should be used properly and consistently so that the entire software has the same look and feel. In addition, on different platforms, the performance of color is not satisfactory.On one system looks good, often looks bad on another system, you need to consider the software operating environment rather than closed behind the development environment. The use of color to follow the principle of comparison. The best way to ensure screen readability is to follow the principle of contrasting: dark text on a light background and light text on a dark background. The blue text is easy to read on a white background, but hard to recognize on a red background. The problem is that there is not enough contrast between blue and red, while the contrast between blue and white is great. Fonts should be used properly. Use fonts that read well, such as Times Roman. Thrifty, effective use of two or three fonts screen looks far better than the use of five or six fonts screen. In addition, the use of fonts should be consistent, remember that each time you change the font size, style (bold, italic, underline, ...), style or color, are using different fonts, it means that they do not Exactly the same. Display must take into account the user input / output devices, such as touch devices are relatively larger.

2.2.6 Deluxe interface, not suitable for all software. Gorgeous feeling often come from the interface. In general, games, players, need a beautiful interface.

3. User's operation

For the user, the simpler the operation, the clearer and better the usage of the program. The following combination of the environment simple to explain how to use common controls.

3.1 For a longer time operation:

Recommended to use progress bar (progress bar) For example, to carry out database operations, take a long time. The use of the progress bar allows users to have a waiting time, or the user does not know what your program is doing, and the user is generally annoyed by the time spent in vain. Design time, the operation of their own calculation of time to determine whether you need to use. If only 5 seconds, the user is generally tolerable, adding progress bar but will produce superfluous effects.

Use the progress bar at the same time, you can use the status bar. StatusBar is often placed under the form, it is recommended to use the dock. You can provide multiple panes in the status bar to provide different information. Status bar, usually there will be a panel to prompt the program running information, for example, display progress, time and so on. Need to expand, you need owerndrawn attribute support. You can add buttons, such as cancel. Generally, when the background operation starts for a long time, set the starting status information in the status bar. After the calculation is finished, clear the status information or set the status information to the stop status, and display the necessary error through the status bar during background running Information, prompt the user's current status. For example, when doing a calculation, it starts to show: Calculating, please be patient. When the operation is finished, it shows: Can finish, exit correctly.

Waiting for the use of pointers, when making calculations, especially in difficult to calculate the progress of these operations, setting the foreground mouse pointer wait cursor is a good user prompt. If some operations must be blocked, then the need to use the wait cursor (wait cursor) is also a good account of the user. Similarly, the shape of the cursor is very flexible, reasonable use of the user can prompt.

In short, using the above controls, you can visually inform users that some programs are executing and may take some time to wait.

Proper use of the try ... finally statement in the program can achieve good results. No matter what the circumstances are guaranteed, it is normal, it is abnormal Ye Hao, anyway, the final will be executed to finally.

3.2 After the start of the operation, the necessary program switches are provided at the appropriate time.

The user should be able to cancel or terminate the operation for a longer time through the interface operation. No matter what you are doing, give users a chance, because the user is using the program. Of course, you can not let the user, any time you can intervene in the operation of the program, for example, a data save interface, save, close, cancel the three buttons when saving data, if forced to close, it will lead to data anomalies, In this case you need to enable it properly and disable the controls. For this interface, after clicking "Save", the "close button" is disabled. After saving is complete, turn on Save Button.

3.3 timely and reasonable disable some of the menu

Visually prompts the user that certain functions are disabled while running certain programs. After the program is finished, some disabled menus and controls are re-enabled and prompts the user that the operation has been completed in an appropriate manner. At the same time, the appropriate enable disabled menu allows users to more clearly understand the application's workflow, understand the logic of the application execution. Such as users, generally first look at what you can use the interface, what needs to reach certain conditions to use. In the implementation of a function, by disabling enable, you can know that this can not be performed. When done, the user discovers, oh, that button is lit and can be executed.

3.4 to verify the user's input, the use of validation control.

Avoid the user's mistakes, leading to the failure of the program, accidents. Use the friendly MessageBox, pay attention to the prompt dialog box using the appropriate buttons and icons, it's overloaded more, according to the specific situation, choose a different icon and button. For example, if the user forcibly exits, a warning may pop up, this time should warn the user may have adverse consequences.

3.6 Use the appropriate controls

The use of TreeView control to display the data level, the use of ListView to display a group of data with multiple columns, the use of DataGrid control allows users to change the data in each cell, the use of TabControl form controls in accordance with the use of logic For classification, according to the specific needs of the development of composite controls, extended controls, custom controls.

3.7 reasonable use of the Splitters Docking and Anchoring properties

When the form is zoomed in, can the various elements on your form be scaled up and the area filled?

Use Splitter control to separate the user area, use the Fill option of the Dock property to enable the control to fill part of the screen, Anchor can be changed in the window size, to ensure that the form controls and the relative position of the form does not change. By setting

3.8 different resolution display automatically adjusts.

Taking into account the user's environment, the program at high resolution, fonts, pictures, displays need to be automatically adjusted with the resolution to meet the user's visual effects.

3.9 By using the Common Dialog allows users through the familiar interface to implement the standard operation

ColorDialog, FontDialog, OpenFileDialog and more

3.10 For a long time operation, do not block the main thread, which is the UI thread

If long time, it is recommended to use multi-threaded. You can use ThreadPool.QueueUserWorkItem () for asynchronous calls. In this class, the management thread, QueueUserWorkItem: the method into a proxy, the agent to the QueueUserWorkItem, if there is no other thread, the immediate calculation, or need to wait for the user to cancel / stop function. Updating controls in the user interface from other threads requires the use of BeginInvoke and delegate. Hook, the method called in the current thread, gets the method in another thread, and operates in another thread. Not used to create the thread, just let the thread to execute the method you want to execute. Acting function pointer package, as an object passed in the program to achieve the callback mechanism. In NF2, use the helper Backgroundworker

3.11 close the confirmation principle. Turn off the need to activate the principle, the user does not allow enough permissions to close the program. Especially important for real-time software.

The second part: UI test points

one. UI test concept

UI test refers to whether the style of the test user interface meets the requirements of the client, whether the text is correct, whether the page art works, whether the text and the picture combination are perfect, whether the background is beautiful, whether the operation is friendly or not.

User interface (UI) testing is used to verify the user's interaction with the software. The goal of UI testing is to ensure that the user interface provides the user with the appropriate access or browsing capabilities through the capabilities of the test object. In addition, UI testing also ensures that objects in the UI run as expected and meet company or industry standards. Includes user-friendly, user-friendly, easy-to-use testing. UI testing is subjective and related to the preferences of testers. For example, the page tone is dazzling; the user login page is more difficult to find; the typos in the text and the page picture are too wide are UI test defects; however, none of these defects Too serious.

two. UI test points

1. According to the function of the interface block is divided into local area, to complete the same or similar function box up, and have a function description

2. The interface to support automatic switching by Tab function; Tab key switch is correct; Tab order and control the order must have been, the current overall from top to bottom, while the line from left to right way;

3. The default button to support Enter and select operation, that is, press Enter automatically perform the default button corresponding operation

4. Click menu, the window initialization

5. The center of the parent or main form should be near the center of the diagonal; the subform should be in the top-left or center of the main form; multiple sub-forms should be shifted down to the bottom right Display form the title appropriate

Is it normal at all resolutions?

7. Prospects and background color with a reasonable coordination, contrast should not be too large, it is best to use less color, such as red, green and so on. Common colors to consider the use of Windows interface tones.

8. If the form supports minimization and maximization or enlargement, the controls on the form also scale with the form; the interface that contains the button should generally not support scaling, that is, the top-right corner only has a close feature.

9 the form can be closed properly several times, open

10. Whether the scroll bar can be dragged, and can be automatically dragged through the keyboard

11. Buttons that are not related to ongoing operations should be masked (grayed out in Windows and can not be used).

12. For operations that may cause the data to be unrecoverable, a confirmation message must be provided to the user to give up the choice, such as deleting the confirmation prompt and confirming whether to save before exiting

13. Writable control data type and length, as far as possible in the foreground control

14. Illegal input or operation should be sufficient prompt instructions to allow users to understand the source of the error, to avoid the formation of an indefinite wait, prompts, warnings, or error instructions should be clear, clear, appropriate; prompt sequence Tab order

15. Some of the special symbols for the input, symbols used in the system and the conflict of the characters to judge and prevent users from entering the characters, often special characters ;; "", "[" {, \ |} ] + =) - (_ * && ^% $ # @!, ..? / There are spaces

16. In reading the information entered by the user, according to the need to choose whether to remove the space before and after.

three. General client test logic division

Title bar

a, title text description of the correctness

b, the title bar (maximize, minimize, close) button, according to the characteristics of the window, if there is no window to maximize or minimize the state, should not display the maximize and minimize buttons, or the button Disable status display.

2 words

(1) the accuracy of the text description:

a, check the description of the text and the corresponding function is consistent;

b, check typos.

(2) the consistency of words and phrases:

(Menu, interface button or Label, ToolTip, window title) such as option setting. In the main interface, there is a button to enter the option setting dialog box, or there are menu items in the menu to enter the option setting dialog box, then the button, menu , The title of the dialog box should be unified terms, such as "Options" or "Settings", but can not use "Options" and "Settings", or there are other terms.

(3) In order to fully examine all the text, you should check all the text resources in the program, because some dialogs may be more difficult to appear in the black box test all.

3 controls

(1) control alignment:

a, side-by-side relationship between the controls should be left-aligned, peer controls should be aligned horizontally.

b, the affiliation of the control should be indented.

(2) control status:

a, can not operate the control's status should be Disable, so that the interface also plays a leading user to use the effect of the operation.

b, there are dependencies in the control, for example (several options for selection (CheckBox or RadioBox), each option has its own independent settings (other controls: Edit, ComboBox, CheckBox, etc.), then when the option is not selected When the following controls should be Disable, on the contrary is Enable.

(3) TabOrder control

TabOrder control should be from top to bottom, left to right order, the default TabOrder interface should fall on the interface of the first Enable state control above.

(4) control of the right-click menu support

Allowed to enter the controls should support the right-click menu, easy to use the right-click menu user copy, cut, paste, select all such operations.

(5) the operation of the control

a, one-line text Edit input box, carriage return support: Enter the default operation is the window of the "OK" button function.

b, in the operable list control (List, ListView), the mouse double-click operation, the keyboard operation should have the corresponding default operation. For example, the following figure, double-click an item in the list, the default operation is the Modify button operation; double-click the space in the list, the default operation should be the Add button operation; select the items in the list, press the Delete key , The default operation should be Remove button operation.

(6) Edit control to determine the validity of the input

a, the type of judgment: integer, floating-point data input box does not allow other non-input data string (such as: abcd or other characters, etc.);

b, the size of the judge: If the size of the data type data size, to determine the size of the input (such as: that the month of the input box, only allows the input of 1-12 figures.

c. Length Judgment: If the length of the string processed by the program is limited, the input data length is not limited in the input box, which may result in a program error or the processed result does not match the input.

d, the correctness of judgments: the path or file name of the full path input box to enter the path to determine whether the path is valid, such as: Enter aaaa or C: \\ // as incorrect input.

Picture

The picture shows the length should not be too big.

5. The overall color of the interface

6. Window System menu on the taskbar

Each application, such as a window with a reduced icon on the system tray, should have system right-click menu support (Restore, Maximize, Minimize, etc.). To test the right and left menu items, the Enable and Disable states are correct Sexual and functional correctness.

7. Prompt dialog test

1, the correctness of the text description

2, the correctness of the icon shows:

a, program error, operation error, prohibit operation, etc. Tips: MB_ICONHAND, MB_ICONSTOP, MB_ICONERROR

b, ask the prompt: MB_ICONQUESTION

c, sigh, warning tips: MB_ICONEXCLAMATION, MB_ICONWARNING

d, common information tips: MB_ICONASTERISK, MB_ICONINFORMATION

The third part: UE test summary

UE (User Experience User Experience): refers to the software application and aesthetic value, based on the user-oriented view as the cornerstone. Mainly by the following four factors:
1, the impression (sensory impact)
2, functional
3, use
4, content These factors are interrelated, indivisible, together to form the correct user experience. These factors are also a major factor in the success of software. The "impression" can also be summed up as a "brand" effect created by this software.

User experience is a purely subjective experience created by the user using a product (service). Because it is purely subjective, it carries with it some uncertainties. Individual differences also determine that each user's real experience can not be completely simulated or reproduced by other means. However, the commonality of user experience for a well-defined user community can be realized through well-designed experiments.

User experience mainly comes from the interactive process between user and HMI. In the early days of software design, the human-machine interface was seen as a "wrapper" wrapped around the functional core without being given enough attention. The result is that HMI is developed independently of the functional core and often begins at the end of the development process. This approach greatly limits the design of human-computer interaction, the results with a great risk. Because in the final stage to modify the functional core of the design cost, sacrificing human-computer interface is the only way out. This kind of speculative and gambling development is almost impossible to obtain a satisfactory user experience. As for customer service, it is also part of the user experience in a broad sense because it is inseparable from the product's own design. Customer service is more about the requirements of people's qualifications, and it's hard to change the products that have been completed and brought to market. However, a good design can reduce the user's need for customer service, thereby reducing the company's investment in customer service and reducing the chances of losing customers due to customer service quality.

The popular design process now focuses on the user. The concept of user experience from the earliest stages of development into the entire process, and throughout. The purpose is to ensure that (1) there is a correct estimate of the user experience (2) to recognize the true expectations and purpose of the user (3) to modify the design at a time when the functional core can be modified at a low cost (4) Coordination between the man-machine interface to reduce the BUG.

Specific implementations include the early focus group, contextual interview, and multiple usability studies during development, as well as later user tests. In designing-testing-modifying this iterative development flow, when the usability experiment leaves the loop with quantifiable metrics.

Source: http://www.mdong.org/?p=1643