10 kỹ thuật hữu ích giúp cải thiện hiệu quả giao diện website của bạn

Published by: 0

10 kỹ thuật hữu ích giúp cải thiện hiệu quả giao diện website của bạn

Thiết kế giao diện là một phần quan trọng trong thiết kế web. Có rất nhiều kỹ thuật liên quan tới việc vẽ đồ họa và thiết kế chức năng cho một giao diện. Dưới đây là 10 điểm lưu ý sẽ đem lại lợi ích cho công việc của bạn. Chúng không liên quan tới một theme cụ thể nào, mà chúng là tập hợp các kỹ thuật tôi sử dụng cho chính những dự án của mình. Không khiến bạn phải chờ lâu hơn nữa, hãy bắt đầu tìm hiểu nhé!.

1. Padded block links

Các liên kết (hoặc anchor) mặc định là những thành phần inline, có nghĩa là vùng có thể click chuột chỉ bao hàm chiều cao và chiều rộng của đoạn văn bản. Đó là vùng hoặc không gian có thể click chuột để chuyển tới liên kết đích, bạn có thể điều chỉnh để tăng hiệu quả sử dụng của những vùng này. Chúng ta có thể thực hiện bằng cách thêm thuộc tính padding và trong một vài trường hơp bạn có thể chuyển đổi liên kết (link) thành thành phần block (block element). Dưới đay là một ví dụ về các liên kết với thuộc tính inline và padding với vùng không gian click chuột được đánh dấu màu xanh:

Inline and padded links

Dễ dàng nhận thấy rằng vùng không gian click chuột càng lớn thì càng dễ được click vì ít khả năng xảy ra việc click trượt. Chuyển đổi các liên kết thành dạng block sẽ làm cho vùng văn bản tràn ra hết không gian của vùng chứa nó, trừ khi chiều rộng của nó được thiết lập với một kích thước riêng. Ý tưởng là tạo ra các liên kết được thiết lập trong sidebar. Chúng ta có thể thực hiện thông qua đoạn code sau:

a 
{
	display: block;
	padding: 6px;
}

Bạn cũng nên lưu ý tới kỹ thuật thêm các padding cho liên kết, vì việc chuyển đổi một liên kết thành dạng block chỉ có tác dụng tới các hành vi của nó và chiều rộng; thêm thộc tính padding sẽ đảm bảo đủ cho chiều cao và còn có thể chừa ra không gian trống.

2. Typesetting buttons

Chú ý đến từng chi tiết chính là cách để bạn tạo ra một sản phẩm tuyệt vời. Các thành phần giao diện như nút bấm, và tab được người dùng click rất nhiều lần, do đó hãy chú ý sắp xếp nó một cách hiệu quả; typesetting tôi nhắc đến ở đây chính là việc sắp xếp các nhãn (label). Dưới đây là một cặp ví dụ về việc đặt sai nhãn (label) mà tôi thường nhắc đến:

Badly typeset button labels

Thoạt nhì thì nó có vẻ ổn, nhưng hãy lưy ý rằng chữ được đặt quá cao vì những ký tự viết thường được dùng làm mốc để sắp xếp từ vào giữa theo chiều dọc, ví dụ:

Badly typeset button labels

Tuy nhiên, nếu chúng ta sử dụng các ký tự viết hoa cũng như các ký tự viết thường như (“t”, “d”, “f”, “h”, “k” và “l”), thì cán cân dịch chuyển lên trên làm cho label được sắp xếp quá cao trong nút bấn. Trong những trường hợp như vậy chúng ta nên căn chỉnh dựa trên chiều cao của ký tự viết hoa hoặc thiết lập nó hơi cao một chút nếu hầu hết các ký tự là ký tự viết thường. Tham khảo ví dụ sau:

Badly typeset button labels

Điều này giúp cho toàn bộ nút bấm được cân bằng. Những tương tác nhỏ như vậy nhưng là một bước tiến lớn trong việc làm cho giao diện của bạn trở nên sáng sủa và dễ chịu khi sử dụng.

3. Sử dụng kỹ thuật tạo tương phản để điều phối sự tập trung

Tương tự, bạn cũng có thể điều khiển sự tập trung chú ý của người dùng bằng cách tạo sự tương phản giữa các thành phần. Dưới đây là một ví dụ về một tin nổi bật (headline) và một vài thông tin liên quan như tác giả và thời gian post bài:

A typical blog post headline

Tất cả chữ đều được thiết lập một màu đen. Hãy giảm bớt độ tương phản giữa thông tin liên quan (ngày xuất bản và tên tác giả) và màu nền bằng cách cho chữ có màu xám nhẹ:

Headline with adjusted contrast

Thành phần có độ tương phản cao nhất ở đây chính là headline, như vậy nó sẽ được làm nổi bật lên. Các thành phần khác được làm chìm đi với nền. Ở đây rôi đã chọn tên tác giả là thành phần quan trọng thứ 2, và ngày xuất bản là thành phần có độ ưu tiên cuối cùng. Font chữ cũng được thiết lập với các kích thước khác nhau, nhưng độ tương phản tác động mạnh hơn cả. Hãy thử đảo ngược lại thứ tự ưu tiên từ ngày xuất bản tới tên tác giả và cuối cùng là headline ta sẽ được giao diện như sau:

Another headline with adjusted contrast

Bạn có thể thấy tác động của việc thay đổi trọng tâm chú ý: ngày xuất bản giờ đây trở nên nổi bật nhất, trong khi headline lại bị mờ nhạt đi. Kỹ thuật này rất thích hợp cho những website chứa nhiều thông tin như blog, forum, social network, trong đó bạn muốn tạo ra rất nhiều thông tin được dễ dàng tiếp cận trong khi vẫn hiển thị được thêm nhiều các thành tố phụ khác như ngày tháng. Làm mờ đi những thông tin mở rộng sẽ cho phép người dùng dễ dàng chú ý tới những đoạn nội dung quan trọng.

4. Sử dụng màu để điều khiển sự chú ý

Color can also be used to effectively focus your visitors’ attention on important or actionable elements. For example, during the US presidential election, pretty much all of the candidates’ websites had the donation button colored red. Red is a very bright and powerful color so it attracts attention, and it stands out even more when the rest of the website is blue or another colder color.

Warmer tones like red, yellow and orange are naturally bright and so tend to attract the eye. They also “expand” when set against colder colors like blue and green. This means that an orange button on a blue background looks like it’s flowing outwards and taking the front seat. Conversely, a blue button on an orange background contracts inward, wishing to stay in the background. Here’s a picture to illustrate:

Comparing warm and cold colors

Here’s a couple of examples of websites that use color effectively to direct users’ attention to the important elements:

Function website
Function features a “We’re Hiring” link on its jobs page. To ensure the link is not missed, the designers set it against a red background that pops out from the dark background header, effectively grabbing attention.

Causecast website
Causecast use color effectively. Four bright pink elements pop out at you: the logo, the feedback link, the donate link and the website description message.

Want the “About” blurb on your website to grab the visitor’s focus? Make the background yellow. Want to make the “Join” button stand out? Color it orange. Make sure not to highlight too many elements, though; if you do, they may get lost in each other’s company.

5. White space indicates relationships

One of the most crucial elements in an interface is the white space between elements. If you’re not familiar with the term white space, it means just that: space between one interface element and another, be it a button, a navigation bar, article text, a headline and so on. By manipulating white space, we can indicate relationships between certain elements or groups of elements.

So, for example, by putting the headline near the article text we indicate that it is related to that text. The text is then placed farther away from other elements to separate it and make it more readable. Here’s an example in which white space could be improved:

Whitespace usage here can be improved

The text looks all right and is certainly readable, but because the spaces above and below each heading are equal, they don’t separate each piece of text clearly. We can improve this by increasing the white space between each section and also by slightly tightening the line height of the paragraphs:

Improved whitespace

This results in more clearly defined blocks; we can easily tell which headings go with which pieces of text and can see the separate sections clearly. Good designers often squint or glance at their work from a distance, which lets them see the blocks of elements separated by white space as they merge together. If you cannot see these groups clearly then you may need to tweak your white space.

6. Letter spacing

Web design is pretty limiting for typographers. But while there are only a few safe Web fonts and not a great many things you can do to style them, it’s worth remembering that we do still have some level of control. “Tracking” is a term used in the field of typography to describe the adjustment of spacing between letters in words. We’ve got the ability to do this with CSS using the “letter-spacing” property.

If used with restraint and taste, this property can be effective in improving the look of your headlines. I wouldn’t recommend using letter spacing on the body text because the default spacing generally provides the best readability for smaller font sizes.

Here’s an example of letter spacing in use:

Letter spacin examples

And here’s the CSS code used for the above examples:

h1 {
	font-family: Helvetica;
	font-size: 27px;
}

h2 {
	font-family: Helvetica;
	font-size: 27px;
	letter-spacing: -1px;
}

h3 {
	font-family: Georgia;
	font-size: 24px;
	letter-spacing: 3px;
	font-variant: small-caps;
	font-weight: normal;
}

The effect can be useful when you want to craft a more aesthetically pleasing or more original heading. Here, I’ve used only a couple pixels for letter spacing, but already it makes a big difference to the style of the font.

7. Auto-focus on input

Many Web applications and websites feature forms. These may be search forms or input forms inviting you to submit something. If this form is the core feature of your application or website, you may want to consider automatically focusing the user’s cursor on the input field when the website loads. This will speed things up because users can start typing right away without having to click on it. A good example of this is Google and Wikipedia’s websites.

Wikipedia auto focus
Upon arriving at Wikipedia.org, the search box is already highlighted, ready to accept text.

To automatically focus on input fields, you’ll need a little bit of JavaScript. There are various solutions, and the one you should use depends on the functionality you want to achieve. The simplest way to do it would be to add the following to your body tag:

<body onLoad="document.forms.form_name.form_field.focus()">

Your form code should look something like:

<form method="get" name="form_name" action="#">
	<input type="text" name="form_field" size="20" />
	<input type="submit" value="Go" />
</form>

Now, every time the page loads, the text field called “form_field” will be automatically selected, ready for input.

The only problem with this is that if your users want to return to the previous page using the Backspace key, they will be out of luck because they’ll just be deleting characters in the input field. Thankfully, Harmen Janssen has another simple JavaScript solution you can find here. Harmen’s script allows the Backspace key to go to the previous page when there are no characters left in the input field to delete.

8. Custom input focus

While the default look of form elements suffices for most functions, sometimes we want something a little prettier or a little more standardized across various browsers and systems. We can style input fields by simply targeting it with an “id,” “class” or plain old “input,” like so:

input {
	border: 2px solid #888;
	padding: 4px;
	font-size: 1em;
	background-color: #F8F8F8;
}

Default and styled input fields

What’s more interesting is also being able to style the input field when it’s in focus; that is, the state it’s in when it has been clicked. To do this, we need to attach a “:focus” after the “input” property:

input:focus {
	border-color: #000;
	background-color: #FFFE9D;
}

Input field in focus

If you’re using custom backgrounds to style your input field, they may clash with some browsers and operating systems’ default focus styles. For example, here’s a screenshot of a custom-styled form clashing with the default blue OS X glow effect:

OS X input glow

In such cases, you could also use the “input:focus” property to remove the default styling. The default blue glow in the screenshot above can be removed by disabling the “outline” property:

input:focus {
	outline: none;
}

The blue glow effect will now be gone:

OS X input glow removed

Obviously you would only want to remove the outline if you’re replacing it with your own styling, so that you don’t negatively affect the accessibility and usability of your forms.

9. Hover controls

Some Web applications have extra utility controls, such as edit and delete buttons, that don’t necessarily have to be shown beside every item at all times. They can be hidden to simplify the interface and focus visitors’ attention on the main controls and content. For example, these hover controls are used in Twitter when you hover over messages:

Twitter's hover controls

These hover controls can be achieved with some simple CSS code, without any JavaScript. Simply style the <div> with the controls when its parent <div> is in a hover state. Here’s the code to hide and show the controls (using a <div> with the class “controls” inside a <div> with the class “message”):

.message .controls { display: none; }
.message:hover .controls { display: block; }

When you hover over the “message” <div>, the “controls” <div> inside it will appear, along with all of its content, giving you the same functionality as shown in the Twitter screenshot above.

There may be an issue with accessibility because screen readers may not be able to read the hidden <div>. There are plenty of other ways to hide the inner <div>, such as offsetting it with a negative margin that takes it off the page (e.g. “left-margin: -9999px”), coloring its text the same color as the background or simply placing another <div> on top of it.

This technique should of course be used with restraint because you don’t want to hide your important controls; but if used correctly, it can be useful for cleaning up your interface by removing those extra utility links that you don’t want to show up at all times.

Note that this doesn’t work in IE6, so you’ll need to override the hiding property in your IE6-specific style sheet or, if you don’t have one, simply use the following IE6-specific code inside the <head> section of your code:

<!--[if lt IE 7]>
  <style type="text/css" media="screen">
    .message .controls { display: block; }
  </style>
<![endif]-->

10. Verbs in labels

You can make options dialogs much more usable by thinking through the labels you use on buttons and links. If an error or message pops up and the options are “Yes,” “No” and “Cancel,” you have to read the whole message to be able to answer. Seems normal, right?

But we can actually speed things up by using verbs in the labels. So, if instead of “Yes,” “No” and “Cancel,” we have “Save,” “Don’t Save” and “Cancel” buttons, you wouldn’t even need to read the message to understand what the options are and which action to perform. All the information is contained in the button labels.

WordPad and OS X save dialogs

Using verbs in labels on buttons and links makes the options dialogs more usable because the labels contain all of the information the user needs to be able to make a decision.

To Conclude

Hopefully, you’ve found a few new techniques that will be useful in your work. As always, using them effectively comes down to restraint and thoughtful implementation. For example, controls that appear on hover may clean up your interface, but they will also increase the learning curve because people may not notice these controls at first. But showing all controls at all times may not be the best strategy either because users would need to scan more things to find what they’re looking for.

Striking the right balance between what you show and what you hide is a delicate art and is completely in your hands as the designer. Don’t use a technique just because it exists: use it if it makes sense in your context. (al)

Minh Quân

Nguồn – [http://www.smashingmagazine.com/2008/12/15/10-useful-techniques-to-improve-your-user-interface-designs/]

Leave a Reply