Website User Experience Design (UE)

Website User Experience Design (UE)
I just saw a post titled "Flow Theory and Design" written by JunChen in Google Reader, which was shared through a Gtalk contact. He briefly introduces the article Designing for Flow by Jim Ramsey, the designer of Movable Type.
Csikszentmihalyi’s Flow theory (the Flow entry on Wikipedia is here) is sometimes translated as “flow”, sometimes as “flow”, and sometimes as “blissful experience”. Xiaorong prefers the translation "happiness experience". Csikszentmihalyi's personal homepage is here.
You can check out the introduction of Csikszentmihalyi’s book “Flow: The Psychology of Optimal Experience” on Amazon. The Chinese version of the book cannot be found on Douban. In 2001, Shanghai Translation Publishing House published the Chinese version of the book Creativity: Flow and the Psychology of Discovery and Invention (Danny wrote some reading notes about this book, which can be seen here 1, 2)
Website Users Experience Design (UE) can be divided into several different realms:
1. Basic barrier-free experience A good UE should allow users to use the website without feeling any obstacles, getting lost, misunderstanding, or feeling awkward. UE designers should try to avoid making mistakes and avoid making users think as much as possible (Don't make me think).
2. Complete tasks efficiently. After avoiding basic mistakes, a good UE needs to allow users to complete tasks efficiently, allowing users to finish what they want to do in the shortest time while using the website. A website that allows users to complete tasks efficiently will allow users to invest more time. (Example: Google.com)
3. Create a UE with a good and enjoyable experience. The highest level should be to make users feel happy when using the website, so that users will concentrate on it and create performance that exceeds their daily performance and activate their potential.
What if we work towards this state? Jim Ramsey's article Designing for Flow gives us some answers. The following is part of the text translated by JunChen:
1. The first step is to set clear goals for users and tell them what the product can accomplish;
2. Provide immediate feedback. The website must guide users step by step, so that users can feel the degree of completion of the goal and how far they are from the goal;
3. More efficient design. Once users upgrade from beginners to intermediate and expert users, they will want to use the product more effectively.
4. Allow discovery. When users start working at peak efficiency, their engagement decreases and boredom increases. To avoid these situations, you need to hide some content, functions, and features and wait for them to discover them. Allow users to continue learning and improving, and let them know that there is always new stuff.

<<:  Detailed explanation of MySQL's Seconds_Behind_Master

>>:  Have you carefully understood Tags How it is defined How to use

Recommend

W3C Tutorial (15): W3C SMIL Activities

SMIL adds support for timing and media synchroniz...

Detailed explanation of built-in methods of javascript array

Table of contents 1. Array.at() 2. Array.copyWith...

MySQL 5.7.20 free installation version configuration method graphic tutorial

I have seen many relevant tutorials on the Intern...

HTML table markup tutorial (6): dark border color attribute BORDERCOLORDARK

In a table, you can define the color of the lower...

Tutorial on installing and configuring remote login to MySQL under Ubuntu

This article shares the MySQL installation and co...

Upgrade Docker version of MySQL 5.7 to MySQL 8.0.13, data migration

Table of contents 1. Back up the old MySQL5.7 dat...

Introduction to TypeScript basic types

Table of contents 1. Basic types 2. Object Type 2...

How to automatically delete records before a specified time in Mysql

About Event: MySQL 5.1 began to introduce the con...

How to use physics engine joints in CocosCreator

Table of contents mousejoint mouse joint distance...

How to use CocosCreator object pool

Table of contents Preface: Specific operations St...

How to use CSS to achieve two columns fixed in the middle and adaptive

1. Use absolute positioning and margin The princi...

Some understanding of absolute and relative positioning of page elements

From today on, I will regularly organize some smal...

Common usage of hook in react

Table of contents 1. What is a hook? 2. Why does ...