In the current web development process, User Experiencethe quality of user experience ( ) is an important criterion for measuring a front-end engineer. I would like to recommend a book "Elements of User Experience". This book systematically describes the user experience and is worth reading by every front-end user.
Many times you will feel that a website is not easy to use, but you don’t know where the problem is.
Sometimes a website is ugly, but you find it useful.
A website looks great when you use it, but you find it difficult to use it.
This is the difference between "usability", "ease of use" and "beauty".
We should give priority to "usability", and then consider "ease of use" and "beauty".
Website development process
Let’s briefly list the process in the actual development process
1. Project establishment - determine what to do, determine personnel, determine budget, etc.
2. Demand - demand collection and analysis
- collection is more difficult than analysis, and sometimes users do not know their needs
- Henry Ford once said, "If I had originally asked consumers what they wanted, they would have said Tell me, want a faster horse!"
- You can use "use case diagrams" to analyze requirements
3. Feasibility analysis
4. System design (functional design, framework design)
UMLdiagrams, timing diagrams, etc.
5. Prototype design (sketches, wireframes)
- Sketch with paper and pen
- Wireframes are available
Balsamiq
6. Interaction design
- You can use
Axure RP, ink knife,Sketch.app
7. Visual design
- Can use
Photoshop,Fireworks,Sketch.app
8. Program development
9. Test
10. Function preview
11. Internal beta
12. Grayscale release
13. Official release
Amway's design software
Sketch.app is macOSa proprietary software of China and is currently BATused by web designers in large companies such as China Sketch.
Its benefits are:
- Fewer functions (compared to
PhotoShop), so easier to master - Easy to operate
- Close to the front-end (exportable
CSS, vector graphics, reusable, many plug-ins),
interaction design is very important in the front-end development process. Summarizing several elements will greatly improve the user experience in the future development process.
Main points
- Have feedback
- Consistency (learnable)
- predictable
Take form submission as an example
1. tabThere must be feedback when the user presses , and there must be feedback when the user presses Enter
. 2. When the user clicks submit, the submit button must become disabledand loading
3. If confirmation is placed on the left and cancel is placed on the right, then this habit must be adhered to
4. User If an error occurs after submission, the filled-in content cannot be lost.