Tuesday, June 9, 2009

Quest Log: Redesign

If there was ever an incarnation of WPF it would probably be a beautiful and graceful ballerina. ...ironically this ballerina would have absolutely no clue what WPF is actually. Also like a ballerina, WPF is very flexible. Because of this flexibility, I decided I would do some tweaking to enhance the UIX (User Interface and experience. I made this up) of my application. (You can refer to the basic design in this post.)

First of all I thought it would be cool to have a Breadcrumb navigation for the Browser section of the application. This would make navigating much easier. If you don't know how breadcrumbs work, then you can read about them here. Here is what it looked like.


One of the desired features for this application was to have basic text editing for the questions. So I designed a window that would be used for editing questions - this includes the actual question, the answer to the question and the "details". Here is a screenshot of what I had come up with.


One of the major issues with the original design of this application as well as the predecessor is that you could not see the content of a question without selecting it. Using WPFs powerful Data Templates and Control Templates, I redesigned the items in both the browser and quiz to solve this issue. They take up a little more room, but contain much more information. Here is an early prototype of what a question bank would look like.


A question itself would have a preview of the actual question - Ingenious! So this solved the issue and has a much cleaner feel to it. In both the browser and quiz the items are stacked vertically. The user is able to scroll through the items by double clicking to explore the content of question banks, subjects and levels (all of these are folder type items) and double clicking on a question opens up the question editing window.

Soon after the above screenshot was taken I decided to add buttons onto the individual items for saving, editing and deleting the item. In a few posts I will show a screenshot.

I was finally beginning to be pleased with how things were turning out. It was starting to look nice and it was even working!

*saved game*

1 comment: