Shulou(Shulou.com)06/02 Report--

This article mainly introduces "twitter design detail example analysis". In daily operation, I believe many people have doubts about twitter design detail example analysis. The editor consulted all kinds of data and sorted out simple and easy-to-use operation methods. I hope it will be helpful to answer the doubts of "twitter design detail example analysis". Next, please follow the editor to study!

It has been some time since the large-scale revision of Twitter, but I have long been accustomed to using third-party clients and have hardly seriously used or thought about its redesign. I didn't notice a little detail until the client encountered obstacles and had to climb onto Twitter two days ago. Let's first look at the top page when everything is calm:

Figure 1: calm interface

If you have never gained focus, the above image and even the input box will be more concise (interestingly, once you gain focus, even if you lose it, the input box will remain in the same state as above). What's really interesting about real-time systems, however, is when new news arrives:

Figure 2: rippling interface

At first, only messages like "7 new tweets" were noticed. Slow for a long time, only to find that there seems to be a pan-blue bright spot under the "Home" navigation entry, is this part of the background of the setting?

So why do you also use visual cue to prompt the "arrival" of new information under Home? Is that necessary? Compared with the straightforward, obvious and unambiguous "7 new tweets", isn't this bright spot very inexplicable? I immediately arrogantly interpreted it as the misuse of visual cues by the designers of Twitter, but in less than half an hour, I completely overturned my inference.

Why should I deny myself? Because if a man wants to be great, he must learn to deny himself.

Figure 3: drop-down interface

When I drop down the page to figure 3, the "main display" of "7 new tweets" has already been left at "now", while I went back to 12 minutes ago with the mouse (Twitter is really a "time machine"). So how can we know the arrival of new information since leaving the "main display" of the message prompt? Flip up to the main display? Look up at "Home" in the navigation bar.

All of a sudden, I thought the superfluous design elements yelled at me mercilessly about its meaning. Because the redesign of Twitter puts the navigation bar fixed at the top of viewport, such a bright spot "attached" under "Home" has become the "secondary area" of new information prompts, following our timeline and waiting for new information at any time, this is very important, because it is a real-time product, it needs to express this feature in some way.

But this is not without problems, how do we view the new information? Click Home? Turn back to the main display area? Have we considered that the meaning of clicking Home is different from clicking on the main display area? clicking Home is to re-request the entire page, then other real-time elements on the page will also change, such as trends, recommended users, etc., while clicking on the main display area will only request new information without affecting other real-time elements of the page.

So, I have a few questions:

Switches and numbers

Is it inexplicable to say so? We regard the appearance of the bright spot as the logic on and off: turn on the light, there is new news waiting; turn off the light: no new information comes. This is the strategy adopted by the "secondary display" of Twitter.

What if you use numbers? This should be easy, as long as you use the same variable as the number in the main display area, no new message will be displayed directly, or "turn off the light". The question is: why? Why change the switch with numbers? what is the function of "secondary display"? How is it different from the "main display area"? Prompt the user to have information waiting, or prompt the user how much information is waiting? Is there any difference between the two? If so, will it affect the cognitive burden and behavior of users? More interestingly, because the secondary display is "merged" with the "Home" navigation entry, as mentioned earlier, does this affect the user's understanding of "Home" or even the entire navigation bar?

What is the function of the secondary region? When the main display leaves the Viewport and a new message arrives, give us a hint that we can decide whether to flip up to the main display or press Home directly. What if we use numbers? Then when the primary and secondary regions coexist, the same number will be prompted twice. This may be a bit strange, we can accept different forms of redundant visual cues, such as we bold the title but also change the font, but if the prompt of specific text and numbers are repeated, it will cause us disgust. When there is only a secondary display area, it prompts the arrival of new messages, and also implies the "real-time" attribute of Twitter itself. if you consider the overall clarity of the interface and the primary and secondary functions, it is a more appropriate decision to choose "switch" in the design of this point from my point of view.

You might think that once you click on Home, it will be difficult for users to update without knowing how many new messages there are. On the one hand, the following point says that accurate numbers give us unspeakable psychological effects in such circumstances, and to a large extent, what is needed is our memory to assist; on the other hand, when visual cues are mentioned in the latter paragraph of the article, a train of thought may be able to solve this problem, please be patient.

So does the number of the main display area make sense? Why not simply say: Hey, you have some new news, or you have a lot of new news. I really haven't read about this, but a common psychology may be able to give some answers. The "accurate" representation of numbers can give people a sense of certainty, grasp and control. Although we don't read entries by counting 1, 2, 3, knowing that we are going to be faced with an exact number gives users a more sense of certainty than reading an old message: everything is under control! In even two cases, we rely on memory to tell us the boundaries between the old and the new. Of course, if there is a "1000 +" situation encountered by many people in GReader, I am afraid that the "sense of accuracy" can only be transformed into a "sense of powerlessness" or even "fear".

After all, the design needs to determine the primary and secondary at each level, and the decision needs to be made. One of the major dimensions to be considered in real-time applications is timeliness. Of course, we can also explain from the position relationship, from the Fitts's Law, this does not mention, since it is the main, and the "lamp" is this time, can not be said to severely deal with it, but design with it.

Limitation of logic application

The "secondary display" prompt is only valid on the home page, but when we leave the home page, such as going to the "Profile" or "People" page, even if you have information updated, the secondary display is no longer valid, 50%, to be exact. That is, if you leave in the "light on" state, then the light under the Home is always on, no matter whether the information is updated or not, the "light on" status is "correct", and if we leave in the "light off" status, then all information updates cannot be displayed in the "secondary display area".

So at this point, the meaning of this lamp is not exactly what I mentioned earlier, it doesn't exactly represent the update status since you last checked the information, but only if you stay on the main page. If it is such a logic, then it may be necessary to question whether merging it with "Home" is a reasonable decision. If we add such an update prompt to Home, what about other navigation items? I all know that such navigation entries are global, that is, they are valid throughout the site, which is also a kind of invisible common sense of Internet users. So should the navigation function be effective throughout the site? At least this lamp of Twitter is not.

Although Twitter sets the navigation bar to Fixed, giving the "secondary display" a visually logical place to live from the CSS property of the page, this is "flawed" in terms of the broader process logic.

More visual aids

If you look at Twitter's Home page alone, I'll simply divide it into three dimensions: limitation, topic, and person. These three are intertwined, and the three core attributes of each tweet are topic (content gist), timeliness (publication time, more importantly, relationships with others pushed on the timeline), and people (publishers, human attributes are naturally more). Of course, we can subdivide each dimension, but that's not what I'm going to explore here.

Only for Home pages, in terms of timeline, each tweet is arranged in a linear queue (of course, this is related to the minimalism of the contact structure of mechanisms such as Twitter replies, in contrast, Sina Weibo can have a lot of exploration on the timeline, which will be discussed later). However, now that we have provided a "time anchor"-OK, which I call a time anchor, that is, the starting and ending time points at which the "stacking" of the main display area is pushed on the timeline-why can't the user use the highlight method (foreground, background, or graphics) to assist the user when the user clicks on the main display area?

It is precisely because of the timeliness, the use of highlights naturally need to consider from "fading" to "normal", telling users that "the information is old". We can choose when the timing ends, or when the user clicks on the next batch of new information before the end of the timing. But how to time it? Is it feasible to specify that each tweet has a reading time constant and then multiply it by the number of new messages? In one case, I clicked on a link and came back after reading the relevant materials. is there a constant to follow?

In fact, the above idea of "reading time constant" is to confuse the public. We are talking about timeliness, not relative to the time spent by the user, but to the information itself. Even if a piece of information from yesterday is stored in the "main display" and clicked by users as "new" information, it is still "old" and should not be highlighted, because as a real-time application such as Twitter, its core value lies in the timeliness of the information.

Yes, users do have different needs, such as the item with the highest number of RT in a topic and the item with the most RT in someone's speech (this can be called a "celebrity quote" entry? ), or topics, people, etc., for a specific period of time, which can provide related functions and corresponding interfaces. If someone does read Twitter as an article in Google Reader, then third parties such as TweetDeck can also be trusted to provide "read / unread" tags. But as a Home page, prescription is always the theme and focus.

So, if there is a time constant, then this constant is based on the difference between the current time and the information release time: 5 minutes, transition from highlight to "insipid".

Figure 4: time transition of the page

The gradient shown in figure 4 is not complicated in terms of the CSS implementation, either using the picture or the gradient attribute of CSS3: "wrapping" within 5 minutes of the new information and * * more than 5 minutes of information (if any) in a div to implement the background gradient. (it will be easier if the history of new information is more than 5 minutes, and you don't have to do anything. )

The Gradient effect in figure 4 is just an example. It uses color gradients to indicate the passage of time. What if you consider using texture?

The comparison of the timeliness of information may be newspapers. If we think of a newspaper that has just been printed, to be scattered on street corners until it fades away, then Twitter new information can be revealed in the background texture like a new piece of ink-stained paper, and as the timeline goes back, it gradually becomes the texture of an old newspaper that yellowed and faded.

To put it bluntly, if we extend from the metaphor of "newspaper", the "favorite" or "collection" function provided by Twitter is like a newspaper reader who cuts out specific stories and news every day, collects them, or even makes them into scratch book, sharing them with visiting friends, or assisting him in his writing (if we make a persona and define him as a writer). What kind of Twitter reader stories can we get from this? And what kind of design concept is developed from this? I think you already have an idea, at least in my mind.

Another visual cue area is Trend. Trend is directly related to the topic:

The Trend provided by Twitter's Home page is updated automatically and regularly, but I have three questions:

When were ◆ trends updated? Why?

The Twitter service is unstable, and it is difficult for users to detect the interface if the data request fails. The hint of time can make users aware of the "limitation" of the trend.

2,A Sense of Control

3. It is suggested that Twitter emphasizes the aging characteristic, every minute counts!

◆, what topics have just been squeezed into the page? Why? Especially for users who have just entered the page without "tracking" the trend. In analogy, it is as if once there is "sudden" news, the TV station will put a special label: Breaking NEWS. Attract eyeballs, gather popularity, attract attention, stimulate participation. The more users propagate unexpected events at * time, the "timeliness" of Twitter-like services can be recognized on a larger scale, which is their core value.

What is the trend of each topic in ◆? Why? Similar to the logic above. It is suggested that the upward and downward trend of user topics leads to "curiosity". For those of us who have climbed over the wall of fire, we have experienced the psychology of pushing the wall of fire onto Trend, and when users expect the "need" of a topic to rise, so will their participation. It is suggested that the upward and downward trend of each topic is only "induced". Selfishly, it's because I like to watch the numbers change in real time.

So you have to come to a page like this:

At this point, the study on "twitter design details example analysis" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.