CG Pattern Library (Online Sampling)

Action Buttons are graphical links that preform some kind of action. Verbs should be used to label Action Buttons.

The user is submitting, or deciding not to submit, information, or is in the midst of completing a process within the site.

A user interacts with a Action Button by clicking it with their mouse cursor.

The following image shows the source file before the css hover states have been programmed

To implement the hover states the following css code should be used. This code will mask the image and shift its position when different mouse states are triggered.

li.button_state a{
   display: block;
   height: 35px;
   width:70px;
   background-image:url(image.gif);
   background-position: 0 0;
   overflow: hidden;
}

li.button_state a:hover{
   display: block;
   height: 35px;
   width:70px;
   background-image:url(image.gif);
   background-position: 142px 0;
   overflow: hidden;
}

li.button_state a:active{
   display: block;
   height: 35px;
   width:70px;
   background-image:url(image.gif);
   background-position: 283px 0;
   overflow: hidden;
}

Click below to demo the button with a hover state and pressed state.

Using rounded buttons provides the website with a more comfortable feel to it, but more importantly, distinguishes these buttons from any other information or links on the page. These buttons help users achieve results such as completing a search, submitting a form, or other important tasks, so it is important that they are highly visible to users at all times.

The placement of the buttons is fairly standard across the web. Log Out buttons are traditionally found in the top right corner, so this will allow the user to easily find this function should they need it. Additionally, the right side is often associated with a “next step”, and since logging out could be interpreted as moving forward, this right side location is logical.

Cancel buttons are always necessary because users do make mistakes, and cancel buttons allow them an easy way out. However, it is also important that a confirmation is provided because should a user have been working on something within the site and accidently click the cancel button, the work would be lost. A confirmation screen prevents this from happening.

A method for determining where they are within a website and have an easy way to navigate back to higher levels within the website hierarchy.

A user is on level 2 or higher within the website.

A user interacts with a Breadcrumb by clicking on one of the active history links with their mouse cursor.

Near the top of the page, display breadcrumbs which explain to a user their current location within the greater hierarchy of the website. The page titles should be displayed in order from left to right, with the left most being the highest level page of the hierarchy. The pages should be separated by > signs. All page titles should be links to allow the user to quickly return to that page.

Breadcrumbs provide users with a better sense of where they are within the website and how the website is structured. By showing breadcrumbs, users not only are less prone to getting lost, but can more quickly learn the entire hierarchy of a website.

Through using the approach listed as the solution, the hierarchy is not only clear and easy to understand, but takes up minimal space and fits nicely near the top regardless of how the page has been designed.

Pagination allows users to browse through a large list of items looking for the item that interests them the most. Browsing is commonly done with back and forward arrows and/or numerical links

The user is submitting, or deciding not to submit, information, or is in the midst of completing a process within the site.

A user interacts with a Pagination widget by either clicking the back/forward links, start/end links, or the numerical links.

Break the large list of items into pages, and use pagination to allow the user to switch between the many pages of items. In the solution, the user may see the current page they are on, the two other nearest pages, a link to go to the next page, and >> arrows to transport the user to the late page. All pages are separated by a | symbol and the current page the user is on carries the traits of not being clickable and is shown as a different color. The solution should be placed at the very bottom below all search results.

Pagination prevents the scenario of a search returning so many results that the page takes an inordinate amount of time to load.

Placing pagination at the bottom makes sense as per the user’s mental model. They create a search, review the results, and if they have yet to find their desired match on the first page, they can then travel to the next. If pagination was placed on the top and users were allowed to go to the next page before they have seen everything on the current page, it would not be logical. Additionally, the size of the navigation bar can serve as an additional aide to the user in telling them how much further they have to scroll until they get to the end of the page. This may help them get a better sense of the amount of search results and whether traveling to another page may be necessary for them to find their desired result.