I am building a tool that will be used by call center agents. It is to help them support products on behalf of the customers who call up. It acts as a portal to many different types of product information - below is a simplified wireframe. I have used a tab and search model - this was as the result of usability testing against a couple of different prototypes.
In this particular view, the agent is viewing tools (think of these as portlets, or widgets) for a particular product (for example, a remote diagnostic tool). Effectively the agent is on the third level navigation (Home > Product Page > Tools Tab).
So far I have used contrast to highlight the different levels (Product Page, Tabs, Tools) but this is based on no training or theory.
What research, patterns or techniques will help me choose the correct colors (or saturations) to the various UI elements of the page? (e.g. Title Bar, Nav, Background, Tools, Tabs etc)
I want to make sure it is clear for the user where different parts of the page begin and end as well as clear which are related to the different areas of navigation, whilst making the page easy on the eye and readable.
For the purpose of this question we can ignore my company branding and colors - I would rather start with usability and then retrofit the branding into that. In fact, If I could find the right model in grayscale, that would be an ideal template.
No comments:
Post a Comment