[Post] test point of e-commerce website-Interface Test

Source: Internet
Author: User
The interface is software, the most direct layer for website interaction with users. The quality of the interface determines the first impression of the software. In addition, well-designed interfaces can guide users to complete their own operations

As a wizard. At the same time, the interface, such as the face of the same person, has the direct advantage of attracting users. A well-designed interface can give users a relaxed and pleasant feeling and a sense of success.

On the contrary, because of the failure of the interface design, the user may feel frustrated. Practical and powerful functions may be lost in the fear and abandonment of the user. Current interface design causes Software

The importance of parts designers is far from enough. It was not until the rise of the production of web pages recently that they were favored by experts. Moreover, the well-designed interface needs to be artistic.

Rejected.
Currently, there are three popular interface styles: multi-form, single-form, and resource manager styles. The following rules should be emphasized regardless of the style.
1: ease of use:
The button name should be easy to understand, accurate words, and no words can be left blank. It should be easy to distinguish from other buttons on the same interface, so it is best to understand the text. The ideal scenario is to use

Users can know the functions of the interface and perform relevant operations without checking the help.
Easy-to-use Details:
1): the buttons that complete the same or similar functions are framed by frame. Common buttons must support shortcuts.
2): place the elements that complete the same function or task in a centralized position to reduce the distance between the mouse movement.
3): divide the area blocks by function, enclose them in a frame, and provide function descriptions or titles.
4): the interface must support the keyboard auto-browse button function, that is, press the tab key and the auto-switch function of the return car.
5): controls that need to be input and important information on the interface should be placed in front of the tab order, and should also be placed in a prominent position on the window.
6): the number of controls on the same interface should not exceed 10. If there are more than 10 controls, you can use pagination interface display.
7): The paging interface must support shortcut switching between pages. Commonly Used combination Shortcut Keys: Ctrl + Tab
8): the default button must support the enter and select operations, that is, automatically execute the corresponding operation of the default button after pressing enter.
9): allow users to control malicious injection to indicate that they should be able to automatically increase their focus after illegal injection.
10): the order of the tab key must be the same as that of the control. Currently, the top-to-bottom mode is popular, and the lines are left to right at the same time.
11): the check box and selection box are sorted based on the high selection rate.
12): the check box and selection box must have a default selection and support tab selection.
13): When the selected data is the same, use the selection box instead of the drop-down list box.
14): the drop-down box is used when the page space is relatively small, instead of the Option box.
15): use the option box when the number of options is small. Instead, use the drop-down list box.
16): the use of relevant terminology is required for professional software, while the use of generic words is recommended for the universal interface.

2:
Normative:
Generally, the interface design is based on the specifications of the Windows interface. It can be said that the higher the degree of standardization of the interface, the better the ease of use. Small software is generally not provided

Tool compartment.
Regulatory rules:
1): Common menus must have command shortcuts.
2): menus with the same or similar functions are separated by a horizontal line and placed in the same position.
3): The icon in front of the menu can intuitively represent the operation to be completed.
4): Generally, the menu depth must be limited to three layers at most.
5): You can customize the toolbar according to your requirements.
6): place the toolbar with the same or similar functions together.
7) prompt information should be provided for each button in the toolbar.
8): the maximum length of a toolbar cannot exceed the screen width.
9): the toolbar icons can intuitively represent the operations to be completed.
10): Set the default placement position in the commonly used toolbar.
11) when there are too many toolbar tools, you can consider using the toolbox.
12): The Toolbox must be changeable and can be customized by the user as needed.
13): the default total width of the Toolbox should not exceed 1/5 of the screen width.
14): the status bar must display the information that the user actually needs. Commonly used:
The current operation, system status, user location, user information, prompt information, error information, etc. If an operation takes a long time, you should also display the progress bar and process progress

.
15): the length of the scroll bar must be changed in time based on the length or width of the display information to help you understand the position and percentage of the display information.
16): the height of the status bar should be five good words, and the width of the scroll bar is slightly narrower than that of the status bar.
17): the menu and toolbar must have a clear line; the menu must be highlighted so that there is still a stereoscopic effect when the toolbar is removed.
18): The menu and status bar usually use the font No. 5. The toolbar is generally wider than the menu, but not too wide. Otherwise, it looks very uncoordinated.
19): the shortcut menu adopts the same principle as the menu.
3: help facilities:
The system should provide detailed and reliable help documents, so that users can seek a solution if they are confused.
Help facility details:
1): The Performance description and description in the help document should be consistent with the system performance. (Our system help documentation is a description of the system's ancestor period, confusing ).
2): When packaging a new system, modify the changes in the help document.
3): promptly call the system help function during operations. F1 is commonly used.
4): when calling help on the interface, you should be able to locate the help location corresponding to this operation in time. That is to say, the Help needs to be targeted in real time.
5): it is best to provide popular online help formats or HTML Help formats.
6): You can use keywords to search for the expected help in the Help Index. Of course, you should also provide the help keywords.
7): If you do not provide any written help documentation, it is best to print the help function.
8): Our technical support methods should be provided in the help. Once the user is difficult to solve the problem by themselves, they can easily seek new help methods.

4: Rationality:
The intersection of the diagonal lines of the screen is where the user looks directly. The top 1/4 is a location that is easy to attract the user's attention. Pay attention to the two locations when placing the form.
Detailed rules on Rationality:
1): the center of the parent form or main form should be near the diagonal focus.
2): The position of the subform should be in the upper left corner or center of the main form.
3): when multiple subforms are displayed, they should be shifted to the lower right to show the title of the form.
4): Important Command buttons and frequently used buttons should be placed on the interface for attention.
5): buttons that are easy to exit or close due to incorrect use should not be placed in easy-to-click positions. The start or end of the horizontal column and the end of the vertical column are easy points.
6): buttons irrelevant to ongoing operations should be blocked (highlighted in gray in windows and cannot be used ).
7): You must provide confirmation information for operations that may result in data recovery failure and give the user the opportunity to give up their selection.
8): Illegal input or operation should be prompted.
9): a prompt should be prompted for errors that occur during the running process, so that users can understand the error source and avoid waiting for an indefinite period of time.
10): the prompt, warning, or error description should be clear, clear, and appropriate.
5: appearance and coordination:
The interface size should be suitable for aesthetic points of view. It feels coordinated and comfortable, and can attract the user's attention within the effective scope.
Detailed rules on appearance and coordination:
1): the length and width ratio is close to the Golden Point. Do not adjust the length and width ratio, or the width exceeds the length.
2): The layout should be reasonable, should not be too dense, should not be too empty, and reasonable use of space.
3): The button size is similar. Do not use too long names to avoid occupying too many interface positions.
4): the button size should be consistent with the page size and space.
5): avoid placing large buttons on open interfaces.
6): After the control is placed, the interface should not be very vacant.
7): the font size should be consistent with the size ratio of the interface. The commonly used font contains a beautiful font ranging from 9 to 12, and rarely contains a font larger than 12.
8): the foreground and background colors should be properly matched, and the contrast should not be too large. It is best to use less dark colors, such as red and green colors. For common colors, use Windows interface tones.
9): if other colors are used, the main color must be soft, with affinity and magnetic force, and the color of the thorn is resolutely put an end to it.
10): Major colors commonly used in large systems include "# e1e1e1", "# efefef", and "# c0c0c0.
11): the UI style should be consistent, and the word size, color, and font should be the same unless it is art processing or has special requirements.
12): If the form can be minimized or maximized, the controls on the form also need to be scaled with the form. Do not zoom in the form only and ignore the zoom of the control.
13): interfaces with buttons generally do not support scaling, that is, only the function is disabled in the upper right corner.
14): when the parent form supports scaling, there is no need to scale the child form.
15): it is better to provide users with custom interface styles. You can select colors and fonts by yourself.

6: menu position:
Menus are the most important elements on the interface. Menu positions are organized by function.
Menu test rules:
1): Menus are usually arranged in the "commonly-used-Main-secondary-tool-help" location, in line with the popular Windows style.
2): commonly used options include "file", "Upload History", and "View". Almost every system has these options, of course, different systems must be rooted.
3): the drop-down menu should be grouped according to the meaning of the menu options and arranged according to certain rules, separated by a horizontal line.
4): when the use of a group of menus requires a sequence or has a wizard function, they should be arranged in sequence.
5): menu items without sequence requirements are arranged according to the frequency and importance of use. Commonly Used menu items are placed at the beginning rather than the back. Important menu items are placed at the beginning and secondary menu items are placed at the back.
6): if there are many menu options, extend the menu length and reduce the depth.
7): Generally, the menu depth must be limited to three layers at most.
8): Quick commands must be provided for commonly used menus. For the combination principles, see 8.
9): the menu irrelevant to the operation should be blocked. If the dynamic loading mode is used, that is, only the required menu is displayed.
10): the icon in front of the menu should not be too big, and keep it best with the word height.
11): the width of the main menu should be close, and the number of words should not exceed four. The words in each menu can be the same and the best.
12): The number of main menus should not be too large. It is best to arrange the menus in a single row.

13): Is the menu bar displayed in a proper context?

14): Does the menu bar of the application display system-related features (such as Clock Display )?

15): Can the drop-down operation work correctly?

16): Does the menu, palette, and toolbar work correctly?

17): Are all menu functions and drop-down sub-functions properly listed?

18): Is it possible to access all menu functions through the mouse?

19): are icons and texts of buttons with the same functions consistent?

20): Can I use other text commands to activate each menu function?

21): Is the menu function highlighted or dimmed with the current window operation?

22): Is the menu function correctly executed?

23): is the name of the menu function self-explanatory?

24): Is the menu item helpful or contextual?

25): Can mouse operations be identified throughout the interactive context?

26): Can I recognize the context correctly if I need to click the mouse multiple times?

27): Can a mouse with multiple buttons be correctly recognized in the context?

28): Does the cursor, processing indicator, and recognition pointer change as appropriate?
7: uniqueness:
If you follow the industrial interface standards blindly, you will lose your personality. In the case that the framework complies with the above specifications, it is particularly important to design an interface with its own unique style. You

It has a good advertising utility for migrating shards in the circulation of commercial software.
Test rules:
1): the installation interface should contain organization introduction or product introduction with its own icons.
2): the main interface, preferably a company icon on most interfaces.
3): the logon interface must contain the logo of this product and the company icon.
4): the "about" in the Help menu should contain copyright and product information.
5): The company's series of products should maintain a consistent interface style, such as the background color, Font, menu arrangement, icons, installation process, button terms, and so on.

8: Combination of shortcuts
Using shortcut keys in menus and buttons allows users who prefer to use the keyboard to perform operations faster. Most of the shortcut keys used in western windows and their applications are consistent.
Menu:
1): transaction-oriented combinations include:
CTRL-D Delete; Ctrl-F find; Ctrl-H replace; Ctrl-I insert; Ctrl-N new record; Ctrl-s save Ctrl-o open.
2): List:
CTRL-R, Ctrl-G, and Ctrl-tab to navigate to the same page control in the next page or in reverse order ;.
3): Edit:
CTRL-A: select all; Ctrl-C: copy; Ctrl-V: paste; Ctrl-X: cut; Ctrl-Z: Undo; Ctrl-Y: Restore.
4) file operations:
CTRL-P print; Ctrl-W close.
5): System Menu
Alt-A file; Alt-e edit; Alt-T tool; Alt-W window; Alt-H help.
6): MS Windows reserved key:
CTRL-ESC task list; Ctrl-F4 close window; Alt-F4 end application; Alt-tab next application; enter default button/confirm operation; ESC cancel button/get

Cancel operation; Shift-F1 context-related help.
Button:
It can be adjusted according to system requirements. The following are only common combinations.
Alt-y OK (yes); Alt-C canceled; Alt-N No; Alt-D deleted; Alt-Q exited; Alt-A added; Alt-e edited; alt-B browsing; Alt-r reading; Alt-W writing.
These shortcut keys can also be used as the standard for developing Chinese application software, but can also start with a letter in Chinese pinyin.
9. security considerations:
You can control the error probability in the following ways on the interface to greatly reduce the damage caused by user-caused errors. Developers should give full consideration to various possibilities

To minimize the possibility of errors. If the application exits from the system due to a protective error, the user may lose confidence in the software. Because this means that the user wants

It takes time and effort to log on again, and all the operations that have been performed will be lost because no disk is saved.
Security rules:
1): the most important thing is to eliminate errors that may cause the application to stop abnormally.
2): avoid unintentional data input by users as much as possible.
3): use related controls to restrict the types of user input values.
4): when there are only two possibilities for a user to make a choice, you can use a single region.
5): when there may be more options, you can use the check box. Each option is valid and you cannot enter any invalid options.
6): when there are many options, you can use the list box and drop-down list box.
7): In an application system, developers should avoid unauthorized or meaningless operations by users.
8): restrict or block input characters or actions that may cause fatal errors or system errors.
9): actions that may have serious consequences must be remedied. The user can return to the correct status through remedial measures.
10): determines the input of some special symbols and the characters that conflict with the symbols used by the system, and prevents users from entering this character.
11): it is best to support reversible handling of right and wrong operations, such as canceling series operations.
12): users should be prevented from performing operations only after they enter valid characters.
13): the cancellation function should be provided for operations that may have a long wait time.
14): special characters are often; '"> <, comment':" ["{, \ |}] + =)-(_ * & ^ % $ #@!
,..? /There are spaces.
15): conflicts with reserved characters used by the system must be restricted.
16): when reading the information entered by the user, select whether to remove the leading and trailing spaces as needed.
17): Some Fields read into the database do not support spaces in the middle, but you must enter spaces in the middle. In this case, you must process the fields in the program.

10: Multi-Window applications and system resources:
Well-designed software should not only have complete functions, but also occupy the minimum resources as much as possible.
1): In a multi-window system, some interfaces must be kept at the top layer, so that you do not need to switch or even Minimize the number of other windows to display the window.

.
2): After loading on the main interface, the memory is automatically detached to allow the occupied Windows system resources.
3): Close all forms. After the system exits, it will release all the system resources it occupies, unless it is a system that needs to run in the background.
4): Try to avoid exclusive use of the system.

5): Can Windows be opened properly based on relevant input or menu commands?

6): Can the window resize, move, and scroll?

7): Can the data content in the window be accessed by the mouse, function key, direction arrow, and keyboard?

8): Can Windows be correctly regenerated after being overwritten and called?

9): Can I use all window-related functions when necessary?

10): Are all window-related functions operable?

11) Are there any related drop-down menus, toolbar, scroll bar, dialog box, buttons, icons, and other controls available for the window and displayed as appropriate?

12): Is the window name properly displayed when multiple windows are displayed?

13): Is the activity window properly highlighted?

14): If multiple tasks are used, are all windows updated in real time?

15): Will repeated or incorrect mouse clicks lead to unexpected side effects?

16): Does the window sound and color prompts and Operation Sequence meet the requirements?

17): Is the window closed correctly?

 

Reprinted: http://bbs.51testing.com/thread-112897-1-1.html

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.