Introduction difference of Ux&ui

In the world of web design, there is always a variety of professional nouns such as UX and UI. But what exactly do they mean?
In the process of delivering an extraordinary website experience to end users, the UX (user Experience) Design and UI (user Interface) design are both important components, but not the same. We will quickly break down the key differences between the two, and then discuss how they relate to each other.



Drawing Source: UX Movement

The UI (user interface) design mainly includes the visual part of the web design. It presents the different levels of the presentation layer and the interaction layer, giving the product a holistic look and feel.
Usability.gov is an important resource site for Web design best practices and guidance that classifies different UI elements into:
-Input class (input)---text field form (text fields forms), Date field form (Date field forms), drop-down list (dropdown lists), check box (checkboxes), ListBox (list boxes) , clickable buttons, and more.
-Navigation classes (Navigation)---sliders (sliders), search field forms (searching fields forms), pagination elements (pagination), sidebar (siderbars), tags (tags), icons (icons), and so on.
-Share classes (sharing)---Friends lists, focus buttons (follow buttons), Likes/Tops (Like/promote), share buttons, invite friends, and more.
-Information Class (information)---text content, hint message (tooltips), message box (messages boxes), notification reminder (notifications), Icon, progress bar (progress bar) such as

The UI design not only includes what you see when you first access a page, but also the design of how the element feeds back when the user interacts with the page elements. The app for the weather forecast below is a typical example of an interactive part of UI design:

Map Source: dribbble

If the UI covers all of this stuff, what's left for UX?
The UX (user experience) design is defined as the process of improving user satisfaction and loyalty (stickiness) through improved usability (usability), ease of use (ease of use), and usability (pleasure) in user and product interactions.
To create such a high-quality experience between the enterprise and the user, the user Experience designer focuses on research, usability testing, and other aspects that can be deeply understood by the user. For example, many UX researchers use A/B testing methodology to help determine which of the two designs is more favored by end users.


So, how do they relate to each other? An effective UI and UX design will work together to create a holistic and enjoyable experience for the user. If one of them does not meet the standards, it will greatly affect the performance of the entire site. For example, a Web site has a great UI design, but the UX is poorly designed, and it feels wrong. Because it looks amazing, but it's very difficult to control. On the other hand, some things are very practical but not very good to see, is the UX design is great, UI design is a bad example of the typical.

Introduction difference of Ux&ui