Back to Traqline project

Here is something I can show you now with my first variation of the design. (LINK TO DESIGN)

First, the very top heading is just a placeholder. I'll apply a proper traqline graphic a bit later. I focused more on the internals of the interface first. I started with a header design that matched more of what was in the print documentation that you handed me, which I felt looked really sharp with the thick black underline. I changed the top menu to be black text on a white background, which I think separates it from the "product selection" line.

With this first design concept, I played around with ideas for using visual cues to differentiate between the various parts of the interface. I made some things very prominent (product selection, Run Report button, export/graph/save buttons) and controlled a lot of the use of color so things are not overly saturated with color. I feel this makes the interface feel more "clean" and allows the things that DO use color to pop out a bit more (like buttons and links).

The theory is that if you make the colors more subtle in general, then when you need to emphasize something with color, it's more effective. If everything is super colorful, then color can not be used to emphasize anything of importance. The colors being less saturated also creates a neutral style that can allow for the header to switch out with red/green/orange for the different TraQline brands.

I defined a style for each area of the interface. The "input" or "option" sections are defined by a lighter gray color. I turned the "filters" into its own section using this style. With the sections are more defined, they can be more easily identified by the user, no matter what part of the application they are in. With this defined, I can then do things like change the "help" button into a more descriptive "about" button with a question mark icon, and an orange color that could signify "help links" (since orange is not used anywhere else on the page). So when someone is having trouble with any of the "input" areas within the application, they can expect to always find an orange "about" button on the same line as the section title to help them. Regardless of how it's styled (orange, red, green, etc) this type of design consistency is very functional for users.

I also added an "action item" next to the title of each of the 'input areas". For "selection options", I added the "advanced" link right next to it. The advanced link is also under the run report button, for users who are used to seeing it there. For the filters, I added the "add filter" link right next to the filter title. I thought by default, maybe the filters section could be empty with the "add filter" link inviting people to use the filters more often. There is also a "view more" link at the end of long filters, made more visible with a red color.

I added the basic tabs that you had mentioned before. I'm gonna play around more with the visual style of the tabs. I placed them below the filters and on top of the table because it seems to me like they are more of a table function (sort of like column sorting) than an input function.

I also changed the export/graph/save links into buttons with text + icons. I think this gives them much more attention, and that area became vacant after I added the tabs on the left. Those icons will be redesigned to be a bit more clean and consistent with one another.

While I made some things smaller, the overall height (I think) is not shorter than the existing TraQline design. But there is still more room for adjustment, since I believe my fonts are a little bigger in some areas of this first design.

I feel this is a good start. I'm going to continue working some more tonight and in the morning. Let me know if our meeting is at a different time than 2:00pm. Of course, feel free to give me your initial thoughts and maybe I'll incorporate some of those ideas before our meeting tomorrow.

Brian

Back to Traqline project