- Created on Thursday, 17 March 2011 07:06
- Last Updated on Tuesday, 04 April 2017 15:30
- Written by Terrence
- Hits: 8639
User interface (UI) design is both an art and a science.One of the most significant elements of a good user interface is visibility of the system's status. Color can be used to effectively focus your visitors attention on important or actionable elements. Today we will discuss How to use color to attract the users.
Separate the Selected Menu Item From the Other Menu Item
Its Important to separate the selected menu from other menu item. It will help the users to identify which landing page they are on. If you don't clearly display it, user will get frustration. So that You can give different color to the selected menu item so the users can clearly identify where they are. See the below example.
Highlight the Changes
You need to visibility the status to the user. User must identify what's going on behind the scenes and whether their actions have actually led to the expected results. For example when user select the item display background color so that the user can easily understand that the action is taken place.
Use Color Code List
Some web application need various type of user group or content. For example your application has 3 different type of user groups. If you list all the groups in similar color it may be difficult to identify the groups. You can separate the group by using different color code. It will be more visible to the user.It's important not to use various colors for the same task or similar colors for completely different tasks.
Eye Catching Color for Error Message and Help Message
Error massage and help messages are very important to users. If they are doing something wrong in the application you need to attract and the attention the users to this message. Higher contrast items stand out they catch your eye. Use bright color in error and help messages.
Use Color to Manage Focus
All the colors are don't behave in a same way. Warmer colors are naturally bright for example red, orange and yellow. They also "expand" when set against colder colors like blue and green. Take a look at the square on the below image with the blue and the yellow color segments. The yellow is warmer and brighter and so it takes prominence on the image.
Darken Background Color Under Modal Windows
To make this window stand out better, you can darken the content below it. The darker background will block out all the noise of the content behind the box and make the modal window the center of attention. This is very similar to using shadows around the window but is even more powerful in directing focus. The darker background also indicates that interaction with the content beneath is disabled and that the user should instead interact with the modal window.