Design Case analysis: Three smaller design points in white society

Today, March 21, the World Sleep Day, happens to be a weekend, tired of the week we have to sleep at home ~ remind everyone, pay attention to the quality of life is to focus on quality, attention to sleep is to focus on health.

Well, back to the point, in the previous (i) and (ii) to talk about the truth and the task of design, this time to talk about the white society three smaller point of design.

First, new friends add reminders

In the White Society's homepage, the weight is the most important friend new, in order to ensure the rapid and direct flow of information, we adopted a "push" mode, and directly to the immediate push of the message to the user, this is called the real-time feed, which is actually a very cool experience, information access quickly and directly, Also saved the Refresh page, is not a kind of use chat room chat feeling it. But there are disadvantages to the advantage of everything, at the beginning of the new stage, we found that the actual use of the unpleasant place, when browsing the news (especially the video to share), or in the comments on the news, because of the news, will cause the whole news area rolling down, browsing and comments can not be carried out, Seriously interrupts the ongoing behavior, so we want the information to "stop" at this point. However, when to stop, it is necessary to carefully consider, can not destroy the real-time information, but also do not interrupt the user's browsing/operation behavior, this time we set up a user model, assume the user's behavior:

In the "Status 1" user browser when the first page is in the initial position, that is, the user does not scroll the pages, user behavior is:

(1) The user waits for the new
(2) The user publishes the information
(3) Users are browsing new news/Comments
(4) Users in the comments/operations
New

The "Status 2" user scrolls down the page, and the user behavior is:

(1) Users are browsing new news/Comments
(2) Users in the comments/operations
New

At this point, we can tell in state 2, the information must be "stopped" to ensure that the user's behavior is not interrupted, and in "State 1" The probability of (1) (2) behavior is greater than (3) (4), so we keep the information "moving". Into the executable, that is, we added a judgment, the page of a demarcation point if within the browser, information "move", outside the browser, information "Stop". After further refinement of the demarcation point, we set the cut-off point at the top of the novelty (see chart below).

After that, go to the next key point, is how to let in the "stop" state know there are new things. This is relatively easy, just give the logo on the page to remind users, we choose the top of the new area, there is a small hint layer, when there is a novelty, appear and show the number (see below).

At this point, the user learned in time to add new things, of course, if he wanted to see these new things, also can not be too troublesome, the best is to let him directly click on this thing, so this layer also has a function is scrolling back screen, when to the first screen, entered the previous said "State 1", New natural "move". Here's a little bit of detail, when the number of new additions to the tip is too high, users back to the first screen, a large number of new at the same time load, may be seriously slow or die browser, so we defined more than 30, back to the first screen, then refresh all the new things, to avoid this problem.

Second, online chat sessions

White Society on the right side of the page, there is an online chat, we call it Webim, is the web version of the instant chat, you can chat with white society friends, is not very like QQ? Salute to the Great QQ! Well, here we will focus on not QQ, but chat session state, we have used QQ know, when there are new news, the system task bar in the lower right corner will have a small head flash, we point to open a new chat window, and in the user's taskbar, will also add a session, And when chatting with many people will have more than one session, we only need to click on a different session, you can activate a different Chat window (see below).

How to deal with the web version of the session? There is no taskbar on the page. Some Webim create such a task bar, such as Facebook, there is a floating toolbar at the bottom of the page, of course it has other uses, this is a way, but is there any other better way? In the process of thinking, we have combed the role of conversation:

1, storage chat status
2, switch chat objects
3. Remind new information

In this way, the session needs to present the information does not need too much, only with small head display can, we put our eyes on the chat panel on the "online friends" above (see the figure below).

Here according to the time sequence of the small head of the conversation, the operation is also very convenient, detailed definition:

1, when there are new news, the goal of a small head of friends to flash a flash, click to appear Chat window, while storing chat status, session small head reservation, no longer flashing
2, minimize the chat window, keep the session small head, close chat window, remove the session small head
3, click the Session small avatar, pop-up/activate the chat window before

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

The location of the session can also be placed on the collection of small strips, the slightest impact on the use of ~

Editing area of editor

In the white Society's log, reprint, discussion area, all want to publish/modify content, so use the editor. When it comes to editors, you have to say that the originator of the editor--office Word, as a text editor the strongest, the development of the editor is also leading the times, and in the Web page, the editor's function is limited by the page end, do not too strong, so in the use of feelings, how to approach the use of Word feeling, Nature is the best.

Speaking of this, it needs to be clear that, for text editors, the editor is not just a bunch of toolbars above, but also the most important is the editing area, here in fact, the most impact on editing more text feelings, the past when we use the Web Edition editor, often because the editing area is too small, And to face the edit box and the page of the double scroll bar, very uncomfortable (see figure below).

Think back to Word, there is only one scroll bar, why, the document is full page after page, which brings us inspiration, if our browser is also so ~ so we defined the editor in the editor area is based on the content of automatic extension, so much like word in the full page and out of a page, So there's only one browser scroll bar, but when the page is long and down, the above toolbar is not visible, so we define the tool bar to follow the page down, with the above "friends new reminder" After this is the same definition, so the editor is the state of this (see below).

Such a small change, too much editing text will be much more useful.

has written three-phase interactive innovation, perhaps these innovative points are not mature, there are many shortcomings, but we are not afraid of everyone jokes, can give you to share our ideas on the road is also good, but also welcome everyone to exchange their ideas and ideas, let us work together to promote the development of the industry bar!