Web Design Details: Expanding user-accessible areas

Source: Internet
Author: User

From one of Google's details:

The entire dotted box is a clickable area of "Next". Seemingly casual, but directly enhance the availability of details. Other page numbers also subtly form the clickable area together with the letter o above. Google wins compared to the flip page of Baidu and Bing.

Let's look at Twitter's registration page:

It's big and comfortable. To this page, wandering will not be tempted to fill out. Hint text is also just right, can provide help, not annoying.

I like Google. Look at the color selection in Google Docs:

Compared with other rich text editors, Google has a lot of color. Compare the FCKEditor:

Look at a beautiful design, TINYMCE's color selection:

Notice the drop down arrow next to a: You can only open the color marquee when you click on the small arrow. When clicked on a, the current color is set. This is to learn from Microsoft:

In terms of functionality, Microsoft's approach is powerful. As the client software Office, the button is relatively large, re-use the same color frequency is also high, so the design is understandable. But as a rich text editor on the Web, it's not necessary for individuals to design this. This makes the small arrowhead's operational area less and affects availability.

To mention a button too small for the best example, YUI Editor:

With the mouse to change the size of the font, you must click on the up and down arrows, which makes me this "advanced user" is difficult to operate successfully. YUI's editor has been applied to Taobao, the result of this detail, so that users are very annoyed. Finally, it's better to change the dropdown box.

Again, turn the page. Remember Twitter before a big "more" button (copy may be inconsistent, no screenshots before, regret), very useful. Now simply use automatic loading, when the user's scroll bar to a certain extent, automatically load the next page of content.

In Firefox, for automatic paging, there is a very useful extension:Autopager. Since I installed it, I rarely need to click the page. (Lazy people create the world, most like this kind of lazy gadgets)

Just a stroll around again, give a few examples:

The image above is the new Yahoo homepage Registration link. Pay attention to "New here", Idle is also idle, better put in the link, enlarge clickable area.

The image above is the "my Taobao", which has just been tested recently. Note the small arrow on the left of the "bought Baby", the clickable area is small. Personally feel these contraction small buttons, all belong to look very beautiful but actually basically useless chicken design.

Finally, I would like to discuss a problem with my friends:

The automatic loading of Twitter, Firefox automatically load the next page of the Autopager expansion, this interactive way, really good? What are the scenarios that apply?
For example, Taobao search results page, if the use of automatic loading, what will bring the drawbacks?

For the automatic loading of Twitter, I have one idea is to keep the "more" button, while the user scrolls the scroll, preload the next page of content, but only when the user clicks "More", will load the next page content display.

Apply to Taobao, you can also make the search results page keep only a "next page" button. When the user scrolls, preload the content, and when the user clicks on the "next page", immediately displays. In this way, you can do dynamic update ads, can reduce the user waiting for the page to load time, at the same time as far as possible to avoid unnecessary loading.

I don't know what people think? Tell me what you think and welcome the discussion.



Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.