Iterative Design

If you've been following along in the Building a Web Application series so far, you'll have already seen how the design of the application has changed from it's initial visual design to the current prototype. However, I wasn't entirely happy with it.

Allow me to introduce design #3. Only a few things have changed from the last version but I believe I gave it enough oomph that I won't feel the need to backtrack over the design phase again. I'd like to touch on a few of those changes.

Colour

I showed the original design to my wife and her response was, "it's boring." Ouch. Not really what I wanted to hear. At least she's honest. So I set out to add some colour in a way that wasn't overbearing and cluttered. Working with the blue and green of the design along with the greys and oranges of the intial design, I added colour in various spots where it seemed to fit. I'll let you be the judge of whether I was successful or not.

Tabs

Take a look at the section view page. You can see that there is now an Add and Delete tab at either corner of the table. This gave me the opportunity to add some colour. Adding colour helped address the "boring" dilemma but also created greater prominence for these two most oft used buttons.

I rearranged and removed some elements which would allow a consistent placement of the add and delete tabs throughout the admin.

Sparklines

If you haven't already, read Edward Tufte's article on sparklines (via). It's a fascinating concept and one that I felt could be applied usefully within my application.

Check out the old version of the Edit page and then compare it to the new version. Originally, I had some explanatory text indicating how many times the page had been viewed. By removing that and adding a sparkline, I'm suddenly able to present a greater amount of information in one place and in less space.

The user will then be able to click on the sparkline to view a detailed report of page statistics.

Sort Order

Originally, I had sort order indicated by light grey text. To simplify things, I removed the text from the interface and then reworked the table colours to show sort order. Highlighting the column header is fairly common. And once again, it opened the door to infuse the design with some colour.

Any better?

With each iteration, I've been able to simplify the design. I've done this by removing functionality or integrating it in a way that was unobtrusive. All-in-all, I think the design is even better than before. But don't be shy... what do you think?

Also, check out the latest revisions to the program flow.

Published October 13, 2004 · Updated September 17, 2005
Short URL: https://snook.ca/s/255

Conversation

7 Comments · RSS feed
Darryl said on October 13, 2004

I've been following this series, since I'm currently working on a similar project. I like the new design!

Looking forward to future installments!

Alex said on October 14, 2004

This is impressive... thank you for the write ups, I'm throughly enjoying the snippits of info you have to share...

Dave P said on October 14, 2004

Hey Jonathan,

I'm comming in from Dave Shea's site, and I must say: this CMS is pretty slick. You've got quite a talent for design.

Great idea in sharing the development process with us. I was thinking of doing something similar in opening my own business.

Keep up the good work!

Brent Wilcox said on October 14, 2004

I like the improvements to the design. At first when I read sparklines in your previous posts, I wasn't sure when you would ever use them - now I know :>

Gray Norton said on October 15, 2004

The design looks great -- clear, clean and uncluttered.

I'm not sure I like your use of the tab metaphor, though. Tabs are used frequently, and almost always for navigation or for toggling views. Unless I'm mistaken, you are using them here to represent actions. I'm not advocating a slavish adherence to convention, but I think this use of tabs is potentially confusing: when I click a tab, I expect to be manipulating my view, not performing an operation.

With that said, I do like the way these widgets are visually tied to the table which they are intended to manipulate, and I like the splash of color as well. Maybe if they just didn't look like tabs?

Jonathan Snook said on October 15, 2004

Fantastic insight Gray. You certainly raise an interesting thought about the tabs. I'll have to research it further to see if there's a better alternative.

Thanks!

dru said on October 25, 2004

I love the sparklines. Now I am going to have to go out and build a component that will let me do that. Sweet!

Sorry, comments are closed for this post. If you have any further questions or comments, feel free to send them to me directly.

Want to learn about scaling CSS for large projects?

I'm available for full and half-day workshops on scalable CSS architecture. I can provide on-site training for your team. Interested?
Get in touch.