Innovation in white society interaction design (3)

Source: http://ued.sohu.com/article/630

Today, March 21, world sleep day, happens to be a weekend. Have you ever slept late at home after a week of fatigue ~ Remind everyone that focusing on the quality of sleep is about the quality of life, and focusing on sleep is about the health.

Now, let's go back to the topic and talk about the truth and Task Design in the previous works (1) and (2). This time we will talk about three smaller design points in the white society.

1. New notifications for friends

On the homepage of the white society, the most important part is the new things of this friend. To ensure fast and direct information flow, we adopt the "push" mode, in addition, information is pushed directly to users in real time, which is called real-time feed. This is actually a very cool experience, and information retrieval is fast and direct, saving the need to refresh the page, does it feel like chatting in a chat room. However, there are advantages and disadvantages in all things. At the beginning of the new things, we found some unpleasant things in actual use, especially when Browsing new things (especially watching shared videos ), or when commenting on new things, the new things will cause the whole new things to scroll down, browsing and commenting will not be able to proceed, seriously interrupting ongoing behavior, at this time, we want to "stop" the information. However, when to stop, we need to be careful when we can neither disrupt the real-time information nor interrupt users' browsing/Operation behaviors. At this time, we will establish a user model, assume the user's behavior:

[Status 1] When the homepage in the user's browser is in its initial position, that is, the user does not scroll the page, and the user behavior is:

(1) users are waiting for new things
(2) users publish information
(3) users are browsing new things/comments
(4) Users comment on/operate new things

[Status 2] The user scrolls down the page and the user behavior is:

(1) users are browsing new things/comments
(2) Users comment on/operate new things

At this time, we can determine that in [status 2], information must be stopped to ensure that user behavior is not interrupted, but in [Status 1, because the probability of (1) (2) behavior is greater than (3) (4), we let the information continue to "dynamic ". This is an executable solution. We add a judgment. If a demarcation point on the page is within the browser, the information is "dynamic", and the information is "STOPPED" outside the browser ". After the demarcation point is further accurate, we set the demarcation point as the top of the new (SEE ).

After clarifying this, the next key point is to know how to add new things in the stopped state. This is relatively easy. You only need to give an identifier on the page to remind the user. We choose to display a small prompt layer at the top of the new area, when new things are added, the displayed number is displayed (SEE ).

At this time, the user learns about new things in time. Of course, if he wants to see these new things, it cannot be too troublesome. It is best to let him directly click this thing, so this layer also has a function that is to scroll back to the first screen. When the first screen is reached, it enters the state 1 mentioned above, and the new thing is naturally "dynamic. There is also a small detail here. When there are too many new things prompted, after the user returns to the first screen, a large number of new things are loaded at the same time, which may seriously slow down or slow down the browser, so when we define more than 30 items, we will refresh all the new things after returning to the first screen to avoid this problem.

2. online chat sessions

There is an online chat on the right side of the white community page. We call it webim, which is an instant chat on the web edition. It can chat with friends in the white community. Isn't it like QQ? Salute to the great QQ! Okay, here we will focus on not QQ, but the chat session status. We all know that when there is a new message, there will be a flash of pictures in the lower right corner of the system taskbar, when we click open, a new chat window will appear, and a new session will be added on the user's taskbar, and there will be multiple sessions when chatting with multiple users, you only need to click different sessions to activate different chat windows (SEE ).

What should I do with web-based sessions? There is no taskbar in the page. Some webim has created such a taskbar, such as Facebook. There is a floating toolbar at the bottom of the page. Of course, it has other purposes. This is also a solution, but is there any better way? During our thinking, We reorganized the role of sessions:

1. Store chat status
2. Switch the chat object
3. Remind new information

In this case, the session does not need much information to be presented. We only need to display it with a small profile picture. We can look at the chat panel and see online friends ).

Here we will sort the pictures of the sessions in chronological order, which is also very easy to operate. Let's define them in detail:

1. When there is a new message, a small avatar of the target friend will flash, and a chat window will appear after you click it. The chat status will be stored at the same time, and the session avatar will be retained and will not flash again.
2. After the chat window is minimized, the session avatar is retained. After the chat window is closed, the session avatar is removed.
3. Click the session avatar to bring up/activate the previous chat window.

Of course, there is also a state that we can't forget, that is, when the screen resolution is 1024 or lower, we define that the chat panel is closed (see ).

In this case, the session location can also be placed on the small slice, without affecting the usage ~

3. Editing area of the Editor

In the log, post, and discussion area of the white society, you must publish/modify the content, so you must use the editor. Speaking of the editor, I have to say that the word in the office, the originator of the editor, is the most powerful person in text editing. The development of the editor is also leading the times. On the webpage side, the editor function is limited by the webpage side, it cannot be too strong, so it is naturally the best way to feel the use of word.

Here, we need to make it clear that for text editing, the editor is not just a bunch of toolbar above, but also the most important part is the editing area, in fact, this most affects the experience of editing many texts. In the past, when we used a webpage editor, we often had to face the dual scroll bars in the editing box and the page because the editing area is too small, very Uncomfortable (SEE ).

Recall that there is only one scroll bar in Word. Why? The document is full of pages and pages, which brings us inspiration. If our browser is like this, too ~ Therefore, we have defined that the editing area in the editor is automatically stretched Based on the content, which is like a page after a page full of word, so that there is only one browser scroll bar, however, when the page grows and goes down, the toolbar above cannot be seen, so that we define a toolbar to follow the page to roll down, with the above "new friend reminder, this is the same definition. This is the status when editing (SEE ).

Such a small change makes it much easier to edit text too much.

I wrote three phases of interactive innovation. Maybe these innovations are not mature yet and there are still many shortcomings, but we are not afraid of jokes. It is also good to share with you our ideas on the road to exploration, at the same time, you are also welcome to share your thoughts and ideas. Let's work together to promote the development of the industry!