What Is a User Interface?

User interface (User Interface) refers to the overall design of the software's human-computer interaction, operating logic, and beautiful interface. Good UI design is not only to make the software have personality and taste, but also to make the operation of the software comfortable, simple, free, and fully reflect the positioning and characteristics of the software.

User interface (User Interface) refers to the overall design of the software's human-computer interaction, operating logic, and beautiful interface. Good UI design is not only to make the software have personality and taste, but also to make the operation of the software comfortable, simple, free, and fully reflect the positioning and characteristics of the software.

User interface ( User Interface , UI for short, also known as user interface [1]) is a medium for interaction and information exchange between the system and users. It implements the conversion between the internal form of information and the acceptable form for humans. The user interface is designed to interact and communicate with each other related software between the user and the hardware. The purpose is to enable users to easily and efficiently operate the hardware to achieve two-way interaction and complete the work they want to accomplish with the hardware. The user interface is widely defined. Contains human-computer interaction and graphical user interfaces. User interfaces exist in all areas of human and machine information exchange.

Chinese name

User Interface

Foreign name

User Interface

Means

The overall design of the software

Purpose

Make software operation comfortable and simple

Field

Software engineering

User interface introduction

The user interface ( User Interface , UI for short) is also the medium for interaction and information exchange between the system and users. It implements the conversion between the internal form of information and the form acceptable to humans.

The user interface is related software that is designed between the user and the hardware to interact with each other. It enables users to easily and effectively operate the hardware to achieve two-way interaction and complete the desired work. In addition to human-machine interaction and graphical user interfaces, user interfaces exist in all areas of human and machine information exchange.

Users and systems typically interact in a problem-oriented, restricted natural language. At present, some systems have begun to use multimedia technology to develop a new generation of user interfaces.

User interface introduction

Software design can be divided into two parts: coding design and UI design. Everyone is familiar with coding design, but UI design is still a very strange word. Even some people who specialize in website and multimedia design do not fully understand the meaning of UI. The original meaning of UI is user interface, which is the abbreviation of English User and interface. Literally it is the two components of the user and the interface, but actually also includes the interaction between the user and the interface.

Interface design, in the long software development, interface design work has not been taken seriously. People who do interface design are also derogated as "artists". In fact, the software interface design is just like the industrial modeling design in industrial products. It is an important buying point of the product. A friendly and beautiful interface will bring people comfortable visual enjoyment, shorten the distance between people and computers, and create selling points for businesses. Interface design is not purely art painting. He needs to locate users, use environment, use methods, and design for end users. It is purely scientific art design. The criteria for testing an interface is not the opinion of a project development team leader or the result of voting by project members, but the end user's feelings. Therefore, the interface design should be closely integrated with user research, which is a process of continuously designing satisfactory visual effects for end users.

In human-machine interaction (Human Machine Interaction), there is a layer, which is what we call the interface. In terms of psychological significance, interfaces can be divided into two levels: sensory (vision, touch, hearing, etc.) and emotion. User interface design is an important part of screen products. Interface design is a complex project involving different disciplines. Cognitive psychology, design, and linguistics all play important roles here. The three main principles of user interface design are: placing the interface under the control of the user; reducing the user's memory burden; and maintaining the consistency of the interface.

User Interface

Software and hardware parts in the electronic computer system that realize the information exchange between users and computers. The software part includes processing software such as the agreement between the user and the computer for information exchange, operation commands, and the hardware part includes input devices and output devices. Currently, a graphical user interface is commonly used, which uses a multi-window system to display a direct image and is easy to operate. Also called a man-machine interface. Referred to as the interface.

OS User interface Apple OS

The concept of the iPhone OS user interface is based on the ability to directly operate using multi-touch

User Interface

Make. Control methods include sliding, tapping switches and keys. Interacting with the system includes swiping, tapping, pinching, and reverse pinching. In addition, through its built-in accelerator, it can make its rotating device change its y-axis to change the direction of the screen. This design makes the iPhone easier to use.

There is a home button at the bottom of the screen and a dock at the bottom. The icons of the four most frequently used programs are fixed on the dock. A status bar at the top of the screen can display some related data, such as time, battery power, and signal strength. The remaining screens are used to display the current application. The only way to launch the iPhone application is to click the program's icon on the current screen, and to exit the program, press the home button at the bottom of the screen. After the third-party software exited, it was closed directly, but in the upcoming iPhone 3.0 version, when the third-party software receives new information, Apple's server will push these notifications to the iPhone or iPod Touch (Regardless of whether it is running). On the iPhone, many applications are linked, so that different applications can share the same information (for example, when you receive a text message that includes a phone number, you can choose to save the phone number Make a call for a contact or choose this number directly).

User interface designer

UI design is divided into 3 directions from the work content. It is mainly determined by three factors of UI research, which are the research tool, the relationship between the researcher and the interface, and the researcher.

Research interface-Graphic UI designer

At present, most UI workers in China are engaged in this industry. Some people also call them artists, but in fact they are not art workers in a pure sense, but product shape designers for software products.

Most of these designers have graduated from art colleges, and most of them have educational background in art design, such as industrial shape design, decoration design, information multimedia design, etc.

User Interface

Study the relationship between human and interface --- interaction designer, interaction designer

Before the emergence of graphical interfaces, UI designers have long been referred to as interaction designers. The content of the interaction designer's work is to design the software operation flow, tree structure, software structure and operating specifications (spec). What a software product needs to do before coding is interaction design, and establish interaction models and interaction specifications.

Interaction designers are mostly software engineers.

Researcher ---- User test engineer

Any product needs to be tested in order to ensure quality, software coding needs to be tested, and natural UI design also needs to be tested. This test has nothing to do with coding, mainly to test the rationality of the interaction design and the aesthetics of the graphic design. The testing methods generally use focus groups to measure the rationality of UI design in the form of target user questionnaires. This position is very important. Without this position, the quality of UI design can only be judged by the experience of the designer or the aesthetics of the leader. This will bring serious risks to the enterprise.

User research engineers generally have a background in psychology and humanities.

In summary, UI designers are: software graphic designers, interaction designers, and user research engineers.

User interface history

User interface ancient

The oldest user interface is to make symbols and graphics on a variety of objects, so that humans and objects have an interactive interface. For example, when humans see a signboard, they know what the role of the house is.

The use of sounds, flags, and gestures is a user interface between people or devices, such as playing on the battlefield or orchestra, or even using tortoise shells and coins. Teachers use blackboards as user interfaces with students. The abacus is also an early human-machine interface made of beads.

Early computer batch interface (popular in 1945-1968): All input data is pre-set in the program or command line parameters. Command line interface (popular in 1969-1983): The user enters instructions through the keyboard, and the computer runs the instructions after receiving the instructions.

User interface modern

Computer: Graphical user interface generally refers to the hardware and software that communicates and interacts between the user and the computer. The purpose is to enable users of the computer system to operate the computer conveniently and efficiently to achieve two-way interaction, and to accomplish what they want to accomplish with the help of a computer Work, which covers: early paper tape input devices to keyboard, mouse, digital version and other data input devices, display screens, sounds and other output devices, reference files, online instructions, teaching courses, etc. Materials, the mode of human-computer interaction has reached the user interface between a computer and a human who only knows 1 and 0.

In the graphical user interface, graphics such as windows, icons, and buttons are displayed on the computer screen to indicate actions for different purposes. The user selects them with a pointing device such as a mouse. The most famous example is the graphical user interface created by Apple in Macintosh.

In the 1980s, the computer user interface revolution was when Macintosh, published by Apple Computer, used WIMP (windows, keys, windows, and mouse) to bring the graphical user interface (GUI) into the mass market. Replaces the command line interface used by earlier computers.

Windows 3.0, released by Microsoft in the early 1990s, reinforced this change.

Industry: Human-machine interface In the industrial world, traditional button skins have also entered the friendly touch human-machine interface (Human-Machine Interface, abbreviated as HMI ). Industrial user interfaces are simply divided into Input Output (output) two types, Input refers to the operation of machinery or equipment by humans, such as the release of handles, switches, doors, instructions (commands) or maintenance, and Output refers to the machinery or equipment Notifications, such as faults, warnings, operating instructions, etc. A good man-machine interface will help users to operate the machine more easily, more accurately, and more quickly. It can also maximize the performance of the machine and extend its service life. Currently on the market The man-machine interface referred to refers to the hardware (such as touch screen) with a user-friendly operation interface of the software.

There are many other user interfaces now, which have evolved from the traditional ancient interfaces such as buttons and paper to the direct use of fingers or special pens to touch the buttons and icons displayed on the touch screen for various operations, such as automatic teller machines (ATM) , Car navigation, media players, game consoles, mobile phones, etc., the general operation is simple and intuitive.

User interface future

Future user interface:

More realistic and interactive virtual reality: For example, it can be regarded as a Control-Alt-Delete key than a rude action. Brain-computer interface: It is a direct connection pathway created between the human or animal brain (or the culture of brain cells) and external devices. At present, it is still in the experimental stage. Scientists have implanted computer chips in the actual brain of patients with general paralysis. Successfully use brain waves to control computers, draw simple patterns and computer games, but when future research is successful, humans can use brain waves as a user interface.

User Interface China Today

UI is still a relatively unfamiliar word in China, and even some designers don't know much about this word. We often see some recruitment advertisements that say: Recruiting interface artists, interface art designers, and so on. This shows that the domestic understanding of UI is still in the area of art design. It is considered that the work of UI is only strokes and lines, lack of understanding of the importance of user interaction; on the other hand, there is still heavy emphasis on technology in the software development process. Application phenomenon. Many businesses believe that the core of software products is technology, and the UI is only a secondary aid, which can be expressed in terms of personnel ratio and treatment.

But this is not the true value of UI design, it is only a necessary process for the development of UI design. Let's take the physical product mobile phone industry as an example. When the mobile phone first entered the market, it was not only expensive and amazing, but also had no other functions except for calling. Because the dominant technology at that time was technology, everyone focused on signal, standby time, life and other aspects, and paid little attention to the rationality of the product's shape. Over time, technology has fully met the needs of users, so in order to create selling points and improve competitiveness, businesses attach great importance to the product's appearance design, in addition to frequently launched text messages, color screens, peace, MMS, cameras, and so on. In this way, the product's beauty, personality, ease of use, easy learning, humanization, etc. have become the selling points of the product. The development of software products and physical products is the same. In the past, due to the limitations of computer hardware, coding design became synonymous with software development. The beautiful and friendly graphical interface and reasonable and easy-to-use interaction methods have not been given sufficient attention. In fact, software in this period is called software programs, not software. product.

Nowadays, with the rapid development of computer hardware, the past software programs can no longer meet the requirements of users. In the fierce market competition of software products, it is not enough to have powerful functions. It is not enough to defeat strong competitors. Fortunately, some forward-thinking national companies in China have begun to realize the huge selling points of software products brought by the UI, such as Kingsoft's shadow fighter, Ciba, drug fighter, and network logo. Due to the importance of UI development and status, Jinshan The product is second to none in its class. The UI department of Lenovo Software actively conducts user research and usability testing, combines ease of use and aesthetics, and launches successful UI examples such as dual-mode computers and happiness series, which has earned Lenovo the third place in the global consumer PC and so on. . Practice has proved that as long as businesses have a small investment in product aesthetics and easy-to-use design, they will have great output. The input-output ratio is much greater than the investment in functional leadership development.

We have to admit that at this stage China has a considerable gap with the western developed countries in many fields. How to catch up with and surpass them is the historical mission of our generation. Software products do not have the same process and material limitations as physical products. The core problem of software products is people. Improving the personal ability of software UI designers and reducing the gap in personnel is the key issue for UI development in China.

At present, domestic universities and colleges have not established a relatively sound UI design major, so the key to improving the ability of UI designers is to provide a good environment for learning and communication. There are already many communication design websites in China that introduce industrial design, graphic design, fashion design, painting art, multimedia flash, etc. However, UI design has not received due attention, and it has only been placed in a column of digital design or graphic web design. This only resource is not enough to train excellent designers. There must be a place for fast and informative UI design, professional design and authoritative UI design to learn and communicate in order to meet the needs of the growing UI designers. .

User interface future

Software UI design should belong to a special form of ID (Industrial Product Design), but only for different materials. However, with the popularization of intelligent electronic products, more and more products with LCD screens will be displayed. This means that more and more product designs require software UI design.

With the development of technology, all products will be integrated into a ubiquitous computer in the near future. This computer controls all household products and data of users. As long as the user has his own account, he can control all other products through any one product, and all products have terminal functions. The basic form of this terminal operation is the software UI design.

The transition of product design from material design to immaterial design has begun, and it will definitely become the mainstream of product design in the future. A big UI era is coming.

User Interface Development Phase

Market economy needs competition, and competition will need to be designed to improve product competitiveness. Before 2000, domestic UI design started to sprout, but at that time doing UI was equal to doing graphic design, which was also reflected in web design. Later, with the popularity of flash, some art designers began to think about interactivity. In 2002, some companies began to pay attention to the importance of UI design, and they brought the UI department out of the software coding team, and began to have graphic designers and interaction designers specifically for software products. With the launch of mobile phones, computer add-on software, MP3 and other products after 2004, ID design has become more and more closely related to UI design, and UI design has begun to be promoted to a new height and importance. In 2005, the domestic UI design has been relatively mature, and with a professional division of labor, many good UI designers and UI design exchange organizations have appeared.

User interface work objects

With the advent of the "UI" boom, many domestic companies and companies engaged in mobile phones, software, websites, value-added services, etc. have set up this department in recent years. There are also many companies specializing in UI design. The treatment and status of software UI designers have also gradually increased.

User interface flow

Confirm target users

During the software design process, the requirements design role determines the target users of the software and captures the needs of end users and direct users.

User interaction should take into account the different focus of interaction design caused by different target users.

For example, the design emphasis is different for scientific users and for entry-level users.

User interface collects habitual interactions of target users

Different types of target users have different interaction habits. This habitual interaction method often comes from its original reality-oriented interaction process and the existing software tool interaction process.

Of course, on this basis, through research and analysis, find the interaction effect that the user wants to achieve, and confirm it with the process.

User interface prompts and guides users

Software is a user's tool. The software should therefore be operated and controlled by the user. The software responds to user actions and set rules.

For the results and feedback of user interaction, prompt the user for results and feedback information to guide the user to the next operation required by the user.

Consistency principle

Consistent user interface design goals

There are often multiple components (components, elements) in software. Interaction design goals between different components need to be consistent.

For example: if the primary user of computer operation is the target user and the design goal is to simplify the interface logic, then the goal needs to implement the software (software package) as a whole, not part of it.

User interface elements look the same

The appearance of interactive elements often affects user interaction. The same (class) software adopts a consistent style appearance, which is very helpful for maintaining user focus and improving interaction effects. Unfortunately, there is no particularly uniform measurement method for how to confirm that the elements look the same. Therefore, the target users need to be surveyed for feedback.

Consistent user interface interaction

In the interaction model, after different types of element users trigger their corresponding behavior events, their interaction behavior needs to be consistent.

For example: all dialog boxes that require user confirmation must contain at least two buttons, confirm and discard.

The more extreme idea of the consistency principle of interactive behavior is that the same type of interaction elements cause the same behavioral events. However, we can see that although this concept is correct in most cases, there are indeed contrary examples to prove that not designing according to this concept will simplify the user operation process even more.

User interface usability principles

Understandable

For the software to be used by the user, the user must be able to understand the function of each element of the software.

If it cannot be understood by the user, then a non-destructive way needs to be provided so that the user can understand the corresponding function by operating on the element.

For example: delete an operation element. The user can click the delete operation button to prompt the user how to delete the operation or confirm the delete operation. The user can understand the function corresponding to the element in more detail and can cancel the operation at the same time.

Reachable

The user is the center of the interaction, and the interaction elements correspond to the functions the user needs. So interactive elements must be controllable by the user.

Users can use interactive devices such as keyboards and mice to move and trigger existing interactive elements to reach other previously invisible or non-interactive interactive elements.

It is important to note that the number of interactions affects the effect that can be achieved. When a feature is deeply hidden (generally more than 4 layers), the user's chance of reaching the element is greatly reduced.

The achievable effect is also related to the interface design. An overly complex interface will affect what can be achieved. (Refer to the simple guide principle)

controllable

The interactive process of the software can be controlled by the user.

The execution flow of functions can be controlled by the user.

If control cannot be provided, prompt the user in a way that is understandable to the target user.

User interface design principles

The user interface knows your users

Your users are the ones who ultimately judge the user interface, so the user is your ultimate goal and you do nt understand the user s needs. Even if your interface is as good as it is, it is not the product the user wants. Take your time and carefully observe the user's preferences, understand their skill level and experience, and observe how they operate in the interface. Don't be obsessed with updates that follow design trends, or keep adding new features. Always keep in mind that the first task is to focus on your users so that you can create an interface that allows them to achieve their goals.

UI The user interface values the UI model

In the software, most of the user's time is consumed in the interface operations (data entry, data modification, data review, etc.), which is completely different from the user operations of browsing the main website pages. We don't need to add any extra effort. Users want to see existing software interfaces with similar functions or following basic operating methods in the newly created interface. So using the established UI model will make users feel intimate.

Consistent user interface

Users need to know that once they learn to do something, it is also possible next time. Language, layout, and design are the few interface elements that need to be consistent. Consistent interface allows users to have a better understanding of how to operate, which improves efficiency.

Clear visual hierarchy of user interface

When designing, let users focus on what matters most. The size, color, and position of each element collectively point the way to understanding the interface. Clear hierarchical relationships will play an important role in reducing the complexity of the appearance (even when the behavior itself is equally complex).

User interface provides feedback

The interface should always communicate with the user, whether their behavior is right or wrong. Prompt user behavior at any time: status change, error or abnormal information. Visual cues or simple text reminders can tell users whether their behavior is as expected.

User interface fault tolerance

No matter how clear your design is, users make mistakes. Your interface should allow and provide users with a way to undo their behavior, and be as forgiving as possible with a wide range of input data (no one wants to start over just because the birthday format was wrong). Similarly, if the user's behavior causes an error, use the information at the right time to show what the behavior is wrong, and make sure that the user understands how to prevent this error from happening again.

User interface encourages users

Once the user has completed a key operation, inform the user in time (popup dialog box, etc.). It is worth noting that breaking down a complex process task into several simple steps will be more tedious and distracting. So no matter how complex and lengthy the task being performed is, keep the process uninterrupted on the interface.

User interface language has affinity

All the interfaces have more or less text on them, so that the manuscripts are spoken as much as possible, rather than piled up by rhetoric. Provide clear, concise labels for behaviors and keep a brief textual narrative. Users will appreciate it, because they are no longer obedient to others-they hear expressions like friends or even speaking by themselves.

Keep the user interface simple

The best user interface is no interface. In the excellent software interface, you can't see the flashy UI decoration, let alone those design elements that you don't use. So when thinking about adding a new feature or element to the interface, think again: Do you really need these in the user or interface? Why do users want to be this small and dynamic icon here? Do you add these elements just because of your preferences and the beauty of the page? The software interface made by a good UI engineer will not be very gorgeous, and there is no element in the interface that distracts the user from interrupting the user's operation. It should even be achieved that when the user uses the system, the page and the complicated operation are not noticed at all, and everything should be logical. ^[1]

User Interface Applications

User interface industrial applications

Touch screen: it can be used to replace the mechanical button skin, and through the inductive liquid crystal display device that can receive input signals such as contacts (whether it is a finger or a plastic pen tip), it has reached the human-machine interface between mechanical devices and humans. interface.

User interface entertainment applications

Game console: The game console is like a computer, the main components are very similar, and there are various software and hardware to install and use. The main hardware components of the game machine include CPU, memory, storage media, audio and video output equipment, signal input equipment and other mechanical equipment. Among them, the signal input devices of game consoles, such as handles or joysticks, use televisions and computers to achieve ingenious interaction with humans through simple buttons. The game software also uses graphics and text to reach between machinery and humans. Entertainment man-machine interface.

User Interface Computer Application

Hardware: keyboard, mouse, display constitute software: Microsoft Windows and MacOS.

User interface design specifications

Consistency principle

Adhere to the design principle of taking the user experience as the center, the interface is intuitive, concise, and the operation is convenient and quick. After the user contacts the software, the corresponding functions on the interface are clear at a glance, and the application system can be conveniently used without much training.

• Fonts -keep the fonts and colors consistent, and avoid multiple fonts in a set of themes;
  -Unmodifiable fields are displayed in gray text uniformly.

• Alignment -keep the alignment of the elements in the page consistent. If there are no special circumstances, you should avoid multiple data alignments on the same page.

• Form Entry -In the pages that include mandatory and optional, a prominent mark (*) must be given next to the required field;
  -For each type of data input, the text type must be restricted, and the format must be verified. For example, phone numbers can only be entered, and the email address must include "@". When the user enters an error, a clear prompt is given.

• Mouse gestures -clickable buttons and links need to switch mouse gestures to hand shape;

• Keep function and content descriptions consistent -Avoid using multiple words for the same function description, such as editing and modifying, adding and adding, deleting and clearing, etc. It is recommended to establish a product dictionary during the project development phase, including common terms and descriptions in the product. The designer or developer strictly displays the text information according to the terminology in the product dictionary.

Accuracy principle

Use consistent markings, standard abbreviations, and colors. The meaning of the displayed information should be very clear, and users do not have to refer to other sources of information.

• Display meaningful error messages instead of pure program error codes.

• Avoid using text input boxes to place non-editable text content. Do not use text input boxes as labels.

• Use indentation and text to aid understanding.

• Use user language vocabulary instead of pure computer terminology.

• Use the display space of your monitor efficiently, but avoid overcrowding.

• Maintain language consistency, such as "OK" for "Cancel" and "Yes" for "No".

Rationalization of layout

When designing the UI, you must fully consider the rationalization of the layout, follow the user's top-down, left-to-right browsing, and operating habits to avoid the frequent arrangement of commonly used business function buttons, which causes the disadvantage of the user's long mouse movement distance. Do more "subtraction" operations, and hide unused functional blocks to keep the interface simple, so that users can focus on the main business operation processes, which is helpful to improve the ease of use and usability of the software.

• Menus -Keep the menus simple and accurate, and avoid menus deeper than 3 levels.
  -The function in the menu needs to open a new page to complete, you need to add "..." after the menu name. [Only applicable to C / S architecture, please ignore B / S].

• Buttons <br /> Confirm that the action button is placed on the left and the Cancel or Close button is placed on the right.

• Features -Unfinished features must be hidden and not placed in the page content to avoid misunderstanding.

• Typography -All text content is typeset to avoid overlying display (edge of the page). Try to maintain a spacing of 10-20 pixels and align it in the vertical direction. Also, maintain a spacing of at least 10 pixels between each control element and ensure that the control elements are not tight Stick to the edge of the page.

• Tabular data list -character data is left-justified and numeric data is right-justified (for easy comparison), and the number of decimal places is displayed uniformly according to the field requirements.

• Scroll bars -Avoid horizontal scroll bars when designing page layouts.

• Page navigation (crumb navigation)
  -A breadcrumb navigation bar should appear at a prominent position on the page to let users know the location of the current page and clear the navigation structure, such as: Home> News Center> Occo Intelligent Investment Service Platform is officially released, where the underlined part is a clickable link .

• Information prompt window -The information prompt window should be located at the center of the current page, and the background layer should be appropriately weakened to reduce information interference, so that the user can focus on the current information prompt window. The general method is to add a translucent color mask layer on the back of the information window.

System operation rationality principle

• Try to ensure that the user can smoothly complete some commonly used business operations without using the mouse (only using the keyboard). You can use the Tab key to switch between the controls and select all editable text.

• Query search page, press Enter in the query condition input box should automatically trigger the query operation.

• When performing some irreversible or delete operations, there should be information to prompt the user, and let the user confirm whether to continue the operation, and if necessary, the user should also be informed of the consequences of the operation.

• The "Confirm" and "Cancel" buttons in the information prompt window need to map the keyboard keys "Enter" and "ESC" respectively.

• Avoiding double-clicking with the mouse will not only increase the difficulty of the user, but may also lead users to misunderstand that the function click is invalid.

• The form entry page needs to position the input focus on the first input item. The user can switch between input boxes or operation buttons through the Tab key, and note that the operation of the Tab should follow the order from left to right and top to bottom.

System response time principle

The response time of the system should be moderate. If the response time is too long, the user will feel uneasy and frustrated. Too fast response time will also affect the user's operation rhythm and may cause errors. Therefore, adhere to the following principles in system response time:

• 2-5 seconds window displays processing information prompts to avoid users from mistakenly thinking that there is no response and repeat operations;

• Display processing window or display progress bar for more than 5 seconds;

A completion warning message should be given when a long period of processing is completed. ^[2]