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*

Quest Log: Power Overwhelming

The moment I took WPF up in hand, I was hit with a surge of power. Once I gained some control I realized there was much much more to WPF than I had initially thought. Not to mention that I also moved to .NET 3.5 SP1 which had a number of new things as well.

I had never used Routed Commands. Never heard of Dependency Properties. Had no concept of Data Templates, Control Templates, and Styles! Bindings? I will admit it was fairly difficult to completely grasp everything and I am actually still learning.

I definitely would have not been able to do it without the help of fellow bloggers, miscellaneous forum posts and one of my new favorite sites, StackOverflow. Unfortunately I do not have everything bookmarked, but here are some of the sites that were very useful.

StackOverflow
This has been the most helpful site for me. It is basically a website were users can post questions and answer questions. That's it!

Dr. WPF - Items Control Series
A blog series by Dr. WPF. It was what really helped me start to learn how WPF actually works and was the inspiration for some of the UI.

Bea Stollnitz Blog
This blog wasn't as helpful to me as some other blogs because of what I was doing, but it definitely has HQ Content (High Quality).

Official Microsoft WinForms and WPF Website
Very useful. I watched many of the videos on the site and plan to watch some more.

Some Site
I don't remember how much I used of this site, but I had it bookmarked and it looks pretty good...

The weekend I made the switch to WPF I did some major grinding. I would say that I was at it for almost 40 hours in the three days. (I had Fridays off... yes, heroes get days off.) Once I returned to the town "SJSU", I couldn't help but to walk up to all of the NPCs and tell them about WPF. But still they all repeated the same thing they always say. I suppose that should have been expected.

Needless to say, I gained a lot of XP from this...

Level Up!
Jasson grows to Level 8 Programmer.
Jasson's HP increases by 1...
Jasson's STR increases by -5... >.>;
Jasson learns skill "Basic WPF"

*saved game*

Quest Log: Beginning Design and Implementation

Design Design Design! This has to be the most important step. Planning everything out before implementation is vital - I wish I knew this before. The first thing I had to keep in mind is that the new interface needed to be "brain-dead idiot-proof." The FITS NPCs reiterated this several times. ...Well, there goes my plans to have the UI (User Interface) look like a cockpit.

At first, the UI and UX (User Experience) was planned to be relatively the same as the predecessor (link has a screenshot). If you look at the screenshot you will see that all of the content is displayed in one window with tabs. The user can only work on one quiz at a time. If multiple question banks are desired to be used, then the user must open up another question bank which will appears in a separate window. All windows have the same functionality, they are just a different question bank. You can even look at the current quiz in multiple locations which can be confusing at first. Overall, the predecessor is a good program and has done well over the years; however, as you can see, it shows its age.

It was at this point that I realized I could design the application however I wanted, as long as it fit the requirements. Consequently, I became consumed with coming up with a more intuitive UX. I immediately got to brainstorming and before too long I had something. I would have the layout of the entire application would be split up into 3 parts.

1. Browser - At startup, all of the question banks the user has will be loaded and be explorable much like folders in windows explorer.
2. Question View - If a question was selected in the browser, then the full details of the question would be displayed.
3. Quizzes - Multiple quizzes could be open at a time and displayed in tabs.

After working on it for a few days I came up with this.

I submitted it to the FITS NPCs for some feedback on the new UX and overall received positive feedback. I was glad that they liked it, but I was not exactly enthralled by it myself. It was too bland and was not exactly professional looking. Something was going to have to change...

*saved game*

Quest Log: First Glance

Before accepting the quest, I had a rough idea of how I would go about completing it. With a little bit of application development under my belt, I figured I could take the quest on as I was without any level grinding or obtaining new equipment required. My plan was simple. Take up WinForms (Window Forms) as my sword with C# as my shield. The .NET Framework would be my magic and Visual Studio 2008 as one of my skills.

Before I set out on my journey with sword in hand, my quest giver included some requirements. I wont bore you by going over these in detail right now but I will mention them as I come across them in development. With these requirements in mind, I made an experienced estimate that, from start to finish, development would be about two weeks. Now I was ready to start some designing!

*saved game*