Tuesday, 23 July 2013

Improvements to the KwaMoja page header

I have been working with +Tim Schofield on ways to improve the look of KwaMoja. We have now completed the header, and the new look can be seen on the demo site here.

The first change you will notice is at the top left of the screen where you can see three upper case 'A' characters. Holding the mouse over these shows hints for Small/Medium/Large text size, as shown on the left. Clicking on these changes the font size that the user will see. This font size will be remembered for that user until they change it, even if they change sessions, or even change computers.

The next change is the removal of the users full name from the header, and replacing it inside the tool tip, as can be seen here.

This has been done to reduce the amount of clutter in the header, and to make better use of the space.

On the right of the header replacing the old quick menu, we see the above displayed.

The first of these icons is the home button. Clicking here at any time takes you back to the main menu, as indicated in the tool tip which you can see on the left.

There then follows the following drop down list. When you are inside some functionality you will see a green "plus" sign immediately before. Clicking on the plus sign adds this functionality to the drop down list, enabling you to quickly jump to that application at any time.

By selecting the "Select Customers" we can jump straight to that option.

If we are in an application that is already in our list of commonly used applications the the green "plus" sign becomes a red "minus" sign and clicking on that removes the application from the list. This enables the user to customise the quick menu for just the items they need/want.

The next icon is the help button. Clicking on this button takes you to the manual page relating to the functionality you are in. This is opened in a new tab on the browser.

Finally we have the exit button. Clicking on this logs the user out of KwaMoja, after showing one of our new confirm windows, which offers the user a chance to back out.

Hopefully this new design make KwaMoja easier to use, nicer to look at gives the flexibility for other improvements in the near future. The new code can be seen in action at the demo and can be downloaded from here.

No comments:

Post a Comment