What is UX?

Are UX and UI the same thing?

No, UI refers to the user interface, delivering only what the user sees on the product; UX focuses more on the user experience of the product, ensuring that the product logic is smooth. UI is an important part of UX, but UX is by no means limited to UI.

Composition of 1.0 UX

User Experience (UX/UE) is a purely subjective Experience established during the User’s use of a product.

  • Look – Product presentation (color, sound, image, text, website layout, interactive experience, etc.)

  • Feel – The feeling of using the product

  • Usability – How easy it is to use a product

1.1 Usability

  • Learnability – whether the product is easy to learn

  • Efficiency – How efficiently users use the product to accomplish specific tasks

  • Memorability – Does the user still remember how to operate the product after leaving it for some time

  • Errors – The frequency and severity of operational Errors

  • Satisfication – The degree of subjective satisfaction and acceptance that users feel in the process of using products

Reference:

Usability testing | everyone is the product manager

Ii. User Experience Design (UXD/UED)

2.0 UXD process

In theory, the flow of user experience design is as follows:

  1. User survey

  2. Persona & User Story

User portrait:

User story: As a character, I want an activity for business value.

  1. Wireframe & Prototyping

Wireframes:

Prototype:

  1. UI design and development

  2. test

And the fact that steps 2 and 3 are often overlooked in the application, why?

User portrait and user story are two tedious parts. User portrait needs to simulate the target user according to the real situation and analyze the user’s personality, background and purpose of using the product. A user story is a story that uses one of the product’s features (including who am I? What do I want to do with the product? To achieve what?) . Many designers will consider this step as “useless work”, but in fact, if this step can be perfected, it will reduce more ambiguity in UI design and development, and also enable the designed product to better achieve the goals described by the function and meet the needs of real users.

Wireframes and prototypes figure is actually the prototype of interaction, because here can show a prototype how is the function of each step, how to return to the previous step, how to proceed to the next), but in fact, the prototype figure is requires user testing, also is to make the whole process of the real function of the user experience, layout arrangement, The interaction designer then makes changes based on feedback. These two steps may be repeated many times (and take a long time), and a high-quality prototype will resemble a real UI design so much that this step is often omitted.

Reference:

Introduce User Experience (UX) Design

What is the role of the developer in ux design?

As a developer, we rarely have the opportunity to actually communicate with users to understand their needs, but through user research results, user profiles and user stories, we can know what groups or groups of users we are targeting and what they are trying to accomplish with our products. Wireframes, prototypes, and UI diagrams are all designed to help us understand the functionality, interaction, and workflow of a product to technically implement it.

2.1 Eight Golden Rules of interface design

Let’s get App (App version and Web version of ๐ŸŒฐ have oh ~) to talk about these eight rules

1, Strive for consistency

  • Common component

  • โœ… Develop generic components using component libraries

  • Inconsistency on โŒ editor

  • Use unified ICONS and pictures

Enable frequent users to use Shortcuts

  • โœ… E-books adjust font size

  • โœ… ESC to exit full-screen editing

  • ๐Ÿ’ก When writing notes, you can use the shortcut keys (Command + Z) to undo text entry, picture insertion, and topic insertion

3, provide useful informative feedback

  • โœ… Toast prompt

    This. Toast = {show: true, type: ‘success’, tips: ‘success’,};

  • โœ… Page status (Loading, error,…)

  • โœ…. Handle exceptions and provide appropriate error information according to error codes

  • ๐Ÿ’ก During the development process, we often go to the console or network to determine the cause of the error, but when facing users, we should inform users of the cause of the error according to the different error codes (for example: 404 to inform users that the resource does not exist, 401 to inform users that they do not have permission).

4. Design Dialog to Yield Closure

  • โœ… Toast prompt operation completed (add shopping cart)

  • โŒ the time of successful course purchase is too short (really sorry, xiaobian tried my best, the video is not allowed to upload and I cannot show the case ๐Ÿ˜ฎ๐Ÿ’จ)

A good headline will get more recommendations and followers

5. Offer simple error handling

  • โœ… User input does not meet specifications (for example, the user nickname cannot exceed the number of words)

  • โŒ when the network status is abnormal, in the Knowledge City comments, there will be a prompt “send failed” but there will not be a more friendly prompt like “network exception, please try again later” to let the user know the cause of the send failure

6. Permit easy Reserval of Actions

  • โœ… Upvote/unupvote

  • โœ… Publish or delete notes

  • ๐Ÿ’ก can have a draft box when the notes are published, allowing users to save the content in the draft box and edit it later

7. Support internal Locus of Control for users

  • โœ… Allows users to customize Settings

  • ๐Ÿ’ก When an exception or an error is reported, the user can choose whether to wait or refresh the page during video loading.

8. Reduce short-term memory load

  • โœ… The number of ICONS displayed in a single line is not more than 5

  • โœ… helps users remember (for example, login state memory)

  • The TAB page of โŒ App displays more than 5 categories, and you need to swipe left and right to view more categories, which is not good for users’ memory

What have these eight golden Rules really helped us?

1. When we first encounter a requirement, we often learn about a new feature from the design draft and requirements documentation, but we often need to consider what kind of prompt we need to give the user during exception handling, and what kind of prompt will make the user experience better? If we have a better text prompt or scheme, we can discuss with the product and design to give users a better feeling

2. At the early stage of development, when we complete functional grouping, we can give priority to whether components can be reused and which components are likely to become common components, so as to be more efficient and time-saving in the development process

3. If we have extra time during development, we can use our ability to stand on the user’s point of view and consider simple optimization to make users have a better experience

Reference:

Tips for Perfect Interface Design: The eight golden Rules of Interface design

Off topic: from the designer sister know the UI design standards, interested can understand

www.uisdc.com/web-vitals

Iii. Barrier-free design

3.0 Accessibility Design Principles

1. Provide appropriate alternative text

  • Provide alternative text for non-text parts of the page (for example, Alt attributes for the IMG tag)

    <img SRC =”” Alt =” this is a picture”

Allow users to skip repetitive elements on the page

  • The header and footer of the page can be skipped

Ensure links make sense out of context

  • “Click here” vs. “Go to get home page”

4. Do not rely on color alone to convey meaning.

  • It’s not friendly for color blind people

  • Most screen readers only recognize HTML tags, ARIA attributes, and text content

5. Provide headings for data tables

  • Use the TH tag and scope attributes in the data table

The bookstore

Book 1

The book 2

Book 3

The bookstore 1

1 this

0 this

3 the

The bookstore 2

10 this

2 this

4 the

< table > < tr > < th scope = "col" > < / th > bookstore books < th scope = "col" > 1 < / th > < th scope = "col" > < / th > book 2 books < th scope = "col" > 3 < / th > < / tr > < tr > < th scope = "row" > 1 < / th > bookstore 1 this < / td > < td > < td > 0 this < / td > < td > 3 < / td > < / tr > < tr > < th scope = "row" > bookstore 2 < / th > this < / td > < td > 10 </td> </tr> </table>Copy the code

Set the table so that the screen reader can read:

Bookstore 1, book 1, book 1, book 2, book 0, book 3, book 3

Bookstore 2, books 1,10 books, books 2, 2 books, books 3,4 books

Ensure users can complete and submit all forms.

  • All required fields need to be represented in the element using an attribute (aria-required attribute)

    First Name (required)

Visually, the page would look like this:

But from the perspective of screen reader users, the input tag is not required

  • Error correction: how should users correct errors after submitting the form?
  1. Error popup –> Set focus to the input tag with the input problem

Cons: can only display and focus on one bad input at a time

  1. Put the error message at the top

Cons: If there are multiple bugs, it can be difficult for users to remember, find, and change them all

  1. Inline display error

Cons: You need to go through the form again to find incorrect input

Caption and/or provide transcripts for media

  • Media resources include not only audio and video, but also documents in various formats (e.g. PDF, Word)

8. Make sure content is clearly written and easy to read.

  • The font is clear

  • Use of heading and list (UL, OL tags) logically

9. Make Javascript accessible

  • Event handlers are device independent (do not rely on the use of a particular device to trigger events)

  • Device-independent event handlers include onfocus, onblur, onSelect, onchange, and onclick

Reference:

WebAIM: Introduction to Web Accessibility

3.1 WAI-ARIA Web specification for accessibility

Wai-aria is a technical specification for providing barrier-free access to dynamic, interactive Web content for people with disabilities and others.

โš ๏ธ Note: Accessibility refers not only to people with disabilities, but also to the elderly and others who need other tools to use the product.

The ARIA of HTML:

1. Role Identifies the role of an element

  • alertdialog

    {{ config.tips }}

With the role attribute, the screen reader can let the user know that Toast is a pop-up box, and the contents are prompt text

2. Aria – Attribute names describe what is associated with it and what it is like

1) www.zhangxinxu.com/wordpress/2…

2) developer.mozilla.org/zh-CN/docs/…

  • aria-hidden

    {{ progress }}%

When showing progress, there is a picture to show progress bar and another text to show progress. It is not necessary for screen reader users to show progress bar by picture. What they need to know is their progress data, so aria-Hidden can be used to hide the picture progress bar from screen reader at this time. Screen readers only read progress numbers to the user

  • aria-label

The aria-label attribute allows screen readers to get a detailed description of the element when the element itself lacks a literal description. Screen readers can immediately know what the element’s role is

Reference:

Wai-aria Web specification for Accessibility _WAI-ARIA, Design for Accessibility, Member column tutorial _W3cplus