Excellent Web site UI design simple and generic usability strategies

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 is important to point out that a simple 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 in their use. This is caused by a variety of reasons. The most important reason is a simple fact: 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, this naturally requires that the interface is designed to be as simple as possible. If there are too many graphic 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 color of social media and social networking sites is often bland and enjoyable, rather than bright and uncomfortable. Some features do not fight for attention; many of them are invisible for most of the time. 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 practical and friendly example of search. You can organize your 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:callto Action Buttons, Buttons design showcase< /c2> and good Call-To-Action Buttons for good guidelinesfor 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 use of metaphor in the design of the user interface is very desirable. Therefore, a good idea can not only 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 on. 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 information blocks will be created on the interface, and the layout will become 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 the user. In contrast, "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 the page layout. 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 the mixx.com. Just 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 is 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 the user interface
In Nine skills that separate good and great designers speech, Cameron Moll said: "Good 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 more easily browsed.

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 down.

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 completed in just a few seconds. No e-mail confirmation or email activation. The entire form is very clean and tidy.

Twitter's registration form is also clean and tidy and does not require 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 Zizhong. 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 look of future searches and news streams.

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 an effective Word-of-mouth advertisement 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 features, whether online or 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 very 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 applications are not just trying to reach people they already know (though Joshua Porter in the "Designing for the Social Web", a book that mentions, The first thing users need to do is to contact people they know and find new, like-minded friends. Personalized referral systems are often popular in social applications because they improve the social life of users and help build new relationships.

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 (for example, from Gmail), inviting 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 that is 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 about all the involvement 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.

Original text:9-crucial-ui-features-of-social-media-and-networking-sites
The original author:Matt Cronin
Translator:puting
This article link:http://www.socialbeta.cn/articles/9_crucial_ui_features.html
Reprint please retain the above information, in order to avoid the original point of view translation misunderstanding, please e good direct look at the original text.