9 important features of the social network user interface (UI)

Intermediary transaction SEO diagnosis Taobao guest Cloud host technology Hall

The primary function of a good user interface (UI) is to provide an intuitive mapping between user intent and application functionality, providing a solution to the completion of a user's assigned task. Basically, the user interface (UI) describes how users and Web sites interact and how users access their functionality. In fact, usability is a good double product of the user interface, which determines whether the user can easily perform all the functions provided by the site. Usability is an important part of every design, especially on a Web site with a large number of features and users.

In this article, we talk about some of the key features of the user interface of social media and social networking. This article discusses the key features, techniques, and concepts behind the design and explains why these features are important by using some excellent websites as examples. These simple and generic availability strategies apply almost anywhere and any type of user interface.

1. Concise interface is the key

Before delving into the details of the user interface, it must be pointed out that a concise user interface is a common feature of social media and social networks. Social media sites are more concise in tone and graphics. Tonal aspects usually include a small number of colors accompanied by monochrome changes, the background is generally white, updates (such as status updates) tend to be light-colored and (usually green or yellow prominent; Alerts are usually highlighted in a red background)

In addition, you will find that graphics are often very simple and very cautious to use. This is caused by a variety of reasons. The most important reason is the simple fact that graphic design is not really useful for social networking sites. Social application is considered to provide users with a content that can be easily created and the conversation can easily produce a shared environment, and strong visual design can cause unnecessary interference, making it difficult for users to focus on their sessions.

For example, Twitter may be one of the most minimalist social user interfaces. The UI is very concise, uses very few colors, and puts the main features of its service-the text entry box-in front of it.

In other words, because a large part of the flow of information is for most users, it naturally requires the simplest interface design. If there are too many graphical elements on the interface, users will feel uncomfortable and confused because it is difficult for users to focus on specific tasks or areas. Although a simple interface means more than just a simple visual design. More importantly, this means that useful interface options are designed, arranged, and displayed in an intuitive way.

The colors of social media and social networking sites are often bland and enjoyable rather than bright and uncomfortable. Some features do not seek attention; In fact, the vast majority of social media interfaces are context-sensitive, and many functions are only "on-demand" display. With a lot of data and functionality on a website, bright colors can only confuse users and distract users.

2. Significant and practical search

Good search capabilities are undoubtedly the culmination of usability and a good user interface. The search function of social media is necessary--because social media has a lot of information. In addition to the multiple levels of traditional search, social media search provides an advanced search for social graph connections-whether in groups, communities or interests. The top right corner of the site is the most appropriate location for the search box. Where users expect to see: Search for input boxes and clear visible search buttons.

A common feature of social applications is the use of Instant search results and filtering. When you enter text into the input box, the search results are filtered in the form of pull below. The filter helps users quickly find what they're looking for and strip out irrelevant content.

The search results page is more important than a friendly search input box design. Digg has recently updated its search engine and is now a very useful and user-friendly example of search. You can organize search results with options such as Best Bets, Most Diggs, and the latest. On the left you will find the time range list, Digg range, hot topics and popular categories. In addition, you can organize your search results by the source of the content. There is also a huge search box at the top of the search results page to help users search for other keywords.

3. Notable call action (Call-To-Action) button

Of course, social applications involve a variety of functions that need to be communicated in some way. As a result, some buttons and links need to be placed almost on each page (registration may be the only reasonable exception). Some involve navigation links, others allow users to adjust the specific application features. Buttons are often used to motivate user actions, and links are often passive and more subtle. Buttons tend to be bigger, more vivid and more memorable. Whether it's a button that performs that function, it should be significant and point.

Typically, social networking sites have only a handful of buttons that call action, and these buttons should encourage users to take action (see Web Design trends:call to action Buttons, Buttons design Showcase and better call-to -action Buttons for "for" the "design of Call-to-action-buttons". These buttons are usually designed and placed in a prominent position, while other design elements are still very subtle and simple (see screenshot below).

In general, the realistic metaphor used in user interface design is very desirable. So a good idea is not only to make a button more like a button (for example, use drop shadows to make sure--active--and focused design, and button communication is actually "pressed", in which case it is best to add embossing effects instead of just changing the color of the button or its border.

The button should be large enough for the user to notice and choose easily. However, shape size is not the only feature of a clickable button or link. Another important factor is the internal margin. If you have a chain that is tightly packed together, it's impossible to click the one you actually want to click. You may consider providing some visual support for your links or buttons.

When using links, it is sometimes useful to use icons or illustrations, but this is not always possible, especially when links are not important to most users. If you need to emphasize some important links, you should consider adding some spacing to the link, using a prominent background, making it a large click block or just replacing a prominent button. Use a prominent background, but not too complex.

It is also important to mention the importance of the cursor effect. The cursor effect lets the user know that the button is actually clickable and confirms that the user's behavior is understood by the system.

4. Gentle separation Elements

The meaningful organization and presentation of various information blocks may be one of the advanced design issues that social user interface designers need to face. To make content readable, browsable and easily detectable, content blocks need to be visually partitioned. In other words, each element needs to be defined in some way and displayed as a separate element. In fact, the separation of elements in the layout is one of the simplest ways to use the user interface in a simpler way, and users can easily interact with it.

However, if many elements are visually separated, more blocks of information are generated on the interface, and the layout becomes more complex. Therefore, to ensure that the layout is still browsable, visual separation requires subtle processing. In most cases, horizontal and vertical lines use neutral, flat colors (such as grays). A strong, bright color--which is often hard to ignore--will distract users. Instead, "calm" lines are more easily overlooked, providing visual support.

What does it mean to separate elements in a page layout? Twitter uses visual separation to construct page layouts. You can see a dotted line between every two tweets. Without this line, it is almost impossible to quickly scan multiple lines of text. Small details like this can significantly improve the user interface for ease of use.

Delicious uses a small 1px gray line to separate popular bookmarks for its users.

You can also see that the separation between elements is also used on mixx.com. Like Twitter, a single gray pixel line separates a lot of text, making it easier to navigate.

Conversely, Reddit does not use separation between each piece of text, making the interface more confusing and therefore more difficult to scan. Sometimes a large, active white space may also help to separate elements in a layout, but the disadvantage of this approach is that it may cause the page to pull too long so that the user uses a vertical scroll bar.

On the Reddit, using the method of highlighting the title to improve the browsing, so the focus of attention completely falls on the title, but also a good design method.

Another technique for separating elements is to use the appropriate layout structure to visually separate the blocks of content/use whitespace for the same purpose. For example, Slashdot places each piece of content in an easily identifiable box and uses a background image to highlight the title.

StumbleUpon uses a grid based structure in which each content item has the same height and width. This is another effective and gentle way of separating.

5. Text as a user interface

In his speech to nine skills, separate good and mighty designers, Cameron Moll said: "The best designers think of text as content, and great designers think of text as a user interface." The content is basically a huge chunk of text, and the user interface needs to use subtle text colors, backgrounds, fonts, sizes, and link demos to make the content easier to navigate.

In fact, a good user interface on social media sites uses elements of different sizes and colors to create a clear visual and structural hierarchy. This is similar to the previous technique because it helps to provide separation and definition factors, as well as to make the interface concise. In addition to improving usability, working with the text of the user interface helps to improve readability because it clearly arranges the relationships between design elements, which also means that they are important in the layout. The result: Such pages are easier to navigate.

For an example of this concept, look at the user interface for Digg (see figure below). When you browse Digg, you'll find that text content is in a very consistent way, with varying variations in font size, font color, and other elements. Also note that this design is how to effectively provide users with a clear navigation path; The main links below underline and blue are highlighted, while "more ..." links are gray, other links are not underlined, and some other text content is red or gray.

Each content block has 7 different design elements (title, source, description, more links, categories, times, and other links to describe below), but such a design works because the visual weight of each element is unique and communicates well. This is a good design.

In addition, you can see the simpler example of Twitter. The first is to display the post, which is a smaller, more subtle text display-it's easy to find when you need to find it.

Another example is propeller. The background of the main content block is gray and white. Each element has a different hue, and the main content has a clearly visible boundary. These color changes make the interface look more beautiful.

6. Concise and Available forms

Web Forms may be the most important design element for social media and social networking sites. From registering to searching for anything, logging back or adding some content will use the form and input. Because the form is very important, it must be used. In particular, the registration form, because there is no "effective" registration form, it may be difficult to add a large number of critical users to allow social media sites to run.

There are several ways to help maintain the usability of your form. The easiest way to do this is to keep the form as short as possible. Many social media sites require only the most important content (email and password only), and leave some extra information for the user to edit after the account is created (such as personal introduction, location, and other relevant information). If possible, no e-mail or password confirmation is required and no authentication code is used.

Some services require email acknowledgement and message activation, which requires the user to spend time and not help users start using the system immediately. The universally accepted rule is that the simpler your Web form is, the more useful it will be for your users; the more you need to fill out, the more users will be registered. You can refer to this article Web Form design patterns:sign-up forms for the registration form (see Part 2 as OK).

The Reddit registration form is very brief and can be registered in just a few seconds. No email confirmation or email activation. The entire form is very clean and tidy.

Twitter's registration form is also clean and tidy without requiring a password confirmation. Once the cursor is moved to the input box, a prompt appears on the right.

The simplest example of a registration form is Tumblr. The entire registration only needs to fill in three items: email, password and username, it is so simple.

7. Instant Update

One of the reasons why microblogging services thrive in the past few years is to bring new, "live" elements to the social interface. And instant Messaging users are mostly focused on two-way conversations, and Twitter offers a variety of ways to talk to the web.

Today's users want to see instant incoming messages or release them as soon as possible, and observe what is happening in his social circle will. For the design of the social user interface, this means that users should have a real-time update feature that updates content instantly in an application. Automatic and compelling (but unobtrusive) updates help users stay in a "flow of information," such as focusing on his priorities and getting instant access can be important.

Twitter search uses a highlighted way to instantly display the latest updates from users. This may be the future of search and news streaming.

Facebook displays updates at the top of the page, which users can display on demand-using AJAX, of course, without refreshing.

8. Word-of-mouth Advertising and Personalization

Perhaps the best strategy for effective word-of-mouth advertising is to provide a good service and user experience. The more comfortable a user is on a social network, the more likely he is to improve his social capital on the site and expand his social circle. To do this, a social networking site needs to provide attractive functionality, both online and offline. Therefore, social networking sites tend to use personalization to provide a more flexible, more applicable user interface that is perfectly understandable.

In social applications, personalization is a powerful technique for distributing relevant content to users. Recommendation systems are often used to provide users with information that is of interest to the user or to the user's expectations. However, such a recommendation system will take a long time to build, because the first system to master the user and their preferences of the information is very small, so that the system can not effectively recommend useful information to users. Constantly grasp the user's information, based on the user's behavior, interest, search and other user behavior, so that the recommendation system can recommend personalized content to users.

In addition, DIDG uses the Digg recommendation engine to recommend personalized information to users, and you can see other digg information from people who have digg the same information as you. The recommendation system will also recommend some users who have the same preferences as you.

It is important to understand that most users of social networking apps are not just trying to connect with people they already know (although Joshua Porter in the "Designing for the Social Web", the first thing users need to do is contact people they know) Also used to discover new, like-minded friends. Personalized referral systems are often popular in social applications because they enhance the user's social existence and help build new connections.

In addition, most social networking sites also make it easy for users to invite their friends and disseminate information ("Share this message", "Share this link", and so on). Facebook's "Contact more Friends" feature is an example of this strategy.

The reason behind this is the classic network effect-the more people use Facebook,facebook to give each user a greater value. This has a positive effect because the user is not intended to create value for other users, but in reality it creates value for other users. The small "web contribution buildup" has led to a useful and popular application--which undoubtedly created Facebook today.

Facebook goes a step further by enabling users to integrate their contacts from other services, such as Gmail, and invite them to automatically use the open APIs of other social service providers. No one is willing to take the time to manually invite his friends to Facebook care in every application, automatically and painlessly.

9. User-centric user interface

Because social software is socialized, it provides users with a user interface that focuses intensely on their personal interests, and since the presence of the society and social media is based on user action, it is not difficult to understand that the socialization user interface is user-centric. Twitter,facebook and other social applications are user-centric, focusing on small details in the user's profile, prompting new friends, interests, activities, groups, and so on to broaden their social circle and enhance user participation.

Facebook's homepage is a user-centric user interface worth emulating. It shows details of a user's updates and notifications, and a click-by interface allows users to easily update their current status, hide information from friends, and update information about groups you might be interested in. As a result, Facebook emphasizes the personal value of the application and places the user at the center of the software. Twitter is another similar approach: The home page is all about a user's information, including his contacts and some conversations from friends.

From a usability standpoint, this approach is almost obvious-because an application is created for the user, it should focus on all the information of the user. However, most social applications are not as specific as the typical online banking software, but have more specific activities: it's all about participation and connections. Moreover, these services are not used to solve a single task, but to allow these applications to be used as much as possible. The more users are involved, the more traffic they will bring to the application, and the more people who are involved through word of mouth. This is the key to social application-the self-centered user interface, and using this strategy to effectively bind users to use these applications.