[BLOG] (re)Designing a complicated interface
I developed in-house web-based workflow software for a small printing company here in Michigan. I'm currently redesigning the interface for the third time, and it finally feels "right" and not just "better".
I've attached the old and new versions below.
Navigation
I made all of the navigation 1-step and reduced the number of separate pages. I changed from tabs to drop-downs, because it made better sense for the options available.
I moved the "Add Comment", "Add Printing", etc links to the left and made them a different color and underlined to make them standout as important actions (and yet be able to fade into the background when focusing on job details). This also fixed the hierarchy - they should be under their respective categories, not next to the heading.
The "status" as a drop-down menu on the right has always been troublesome, so I moved it inline with the rest of the job information.
Information structure
In the previous version, contact and "status" info are special and pulled out of the rest of the job details. I decided they weren't that special after all, and actually were harder to easily see because I'd made them special.
Also, I downplayed information in the wrong way. Some of it I would omit entirely if not specified (like the Proof Due date), and others I would gray-out. In the new version, I consistently left the label behind (same color) and simply omitted the information side. Like it works on paper job tickets, right? - either you fill in the little box or don't. They don't hide from you or turn colors. See "Vendor" as an example of the difference. (I've deleted the quote price from both example, hence the difference in that field).
In the original, the job number is specifed as "J-1234" and prefixed to the job's title, which makes 2 separate pieces of information appear as one. In the new version, I wrote out "Job 1234" and placed it as secondary information that labels the job title. This label format will usefully extend to other pages like Orders and Contacts.
Fonts & Colors
This time, I was a lot more careful about font selection and color. All navigation is in a serif that let's it "say what it is" even when it's outside the header (like the Options menu to the left).
I pulled out the information (over the label) by setting the label color as a gray (while leaving it as all-caps). I also made the labels wider to give me some breathing room for more descriptiveness.
I made more deliberate use of a grid (the other reason the labels are wider), and information lines up nicely in columns (production info in the left column, status & billing in the right).
Lastly, I toned the background down to #FAFAFA. This both gives a little less eyestrain to people staring at it all day and lets me use pure white as a popout color in places. Makes it a little more paper-like too, which is a nice fringe benefit when printing is your industry.
That's just a really quick brush-by of some of the changes I made, but I don't want to dissect every detail here. Overall, I'm immensely pleased with how it turned out (though it's still a work in progress) and would be comfortable submitting this to an A-list web designer. Of course the devil is in the details, and I still have much work to do to redesign how you edit the information, now
I've attached the old and new versions below.
Navigation
I made all of the navigation 1-step and reduced the number of separate pages. I changed from tabs to drop-downs, because it made better sense for the options available.
I moved the "Add Comment", "Add Printing", etc links to the left and made them a different color and underlined to make them standout as important actions (and yet be able to fade into the background when focusing on job details). This also fixed the hierarchy - they should be under their respective categories, not next to the heading.
The "status" as a drop-down menu on the right has always been troublesome, so I moved it inline with the rest of the job information.
Information structure
In the previous version, contact and "status" info are special and pulled out of the rest of the job details. I decided they weren't that special after all, and actually were harder to easily see because I'd made them special.
Also, I downplayed information in the wrong way. Some of it I would omit entirely if not specified (like the Proof Due date), and others I would gray-out. In the new version, I consistently left the label behind (same color) and simply omitted the information side. Like it works on paper job tickets, right? - either you fill in the little box or don't. They don't hide from you or turn colors. See "Vendor" as an example of the difference. (I've deleted the quote price from both example, hence the difference in that field).
In the original, the job number is specifed as "J-1234" and prefixed to the job's title, which makes 2 separate pieces of information appear as one. In the new version, I wrote out "Job 1234" and placed it as secondary information that labels the job title. This label format will usefully extend to other pages like Orders and Contacts.
Fonts & Colors
This time, I was a lot more careful about font selection and color. All navigation is in a serif that let's it "say what it is" even when it's outside the header (like the Options menu to the left).
I pulled out the information (over the label) by setting the label color as a gray (while leaving it as all-caps). I also made the labels wider to give me some breathing room for more descriptiveness.
I made more deliberate use of a grid (the other reason the labels are wider), and information lines up nicely in columns (production info in the left column, status & billing in the right).
Lastly, I toned the background down to #FAFAFA. This both gives a little less eyestrain to people staring at it all day and lets me use pure white as a popout color in places. Makes it a little more paper-like too, which is a nice fringe benefit when printing is your industry.
That's just a really quick brush-by of some of the changes I made, but I don't want to dissect every detail here. Overall, I'm immensely pleased with how it turned out (though it's still a work in progress) and would be comfortable submitting this to an A-list web designer. Of course the devil is in the details, and I still have much work to do to redesign how you edit the information, now
0
Comments