Published: 24 Sep 2009
By: Andrew Siemer

In this article we are going to start to look at one of the required design aspects when building a large web application. We will specifically look at what the new SketchFlow tool (in Expression Blend 3) has to offer us when designing our sitemap, wireframe, and user interaction for our site.

Contents [hide]

The Stack Overflow Inspired Knowledge Exchange Series

  • TOC Checkout the project homepage of this series to follow our journey from the creation of the famous StackOverFlow website.
  • Introduction

    In the last article we took an in depth look at how to automate build processes on a centralized development server. We reviewed what a complete build process might encompass and then implemented each item. By the end of the last article we had fully functional continuous integration process that ran with every check in. We also had the ability to roll back builds.

    In this article we are going to start to look at one of the required design aspects when building a large web application. We will specifically look at what the new SketchFlow tool (in Expression Blend 3) has to offer us when designing our sitemap, wireframe, and user interaction for our site. By the end of this discussion we should have a fully functional mock up of how our site should look and feel. This mock up will allow us to navigate and interact with our concept with enough detail that we should be able to spot workflow and navigation issues quickly. This will also allow us to quickly test any changes that we might consider implementing down the road.

    Steps prior to making a mock up?

    As usual there are always preliminary steps prior to getting to the really interesting things in a project. We will treat the creation of this site in the same way that we might if we were creating a site for a client or a company. In this case, prior to mocking up what we want to build we will first need to discuss a few things and pin down some details. In this series we will be attempting a pseudo-clone of StackOverflow. Obviously we can only build the features that we can see on the outside of their site or that we can read about in the blog or meta site. For this reason the following items that we will discuss will be primarily to insure that we thoroughly cover the ideas up to creating and surrounding a mock up.

    What are the goals of the web site?

    Determining the goals of our Knowledge Exchange software are easy for us to do. All one has to do is navigate to the about page on the StackOverflow site. From there we can find many goals that we need to strive for. Some of them apply directly to the software and how it works. Others apply more to the business model of StackOverflow and can be taken or left when this open source project is completed based on the needs of the implementor.

    Free is a very specific goal for the makers of StackOverflow. They mention that the usages of their site, posting questions and answers, and the general activity of interacting with their site will be free. Then they go into listing all the ways that their competition has migrated to a not for free style site such as rot13 text, javascript modal ad windows, sales people, etc. We will do our best to stick with the free model and therefore we won’t be building any scam-ware!

    Community owned is another goal of this software. This goal is going to be considerably more difficult to achieve than you might think. This points back to the point system that is implemented in StackOverflow where a user can accrue “Karma” with proper usage of the site. As a user earns more points more features are unlocked for them. Users go from being able to do very little, to being able to vote and flag inappropriate material, all the way up to editing other peoples posts, voting to close and reopen posts, to moderator privileges. This one goal will have to be thought of every step of the way when implementing each feature of the site. We will need to either implement some form of rules processing or an event model that we can hook into later.

    Usability of the site is to be frictionless and painless. This is another goal that will have to be tended too over time. This particular feature can be addressed quite a bit up front when it is time to create a mock up. We can plan to a large degree what each screen might look like and how each button click and page view might interact with some feature of the site. Streamlining the usability of the site will largely benefit from properly placed AJAX techniques. However, a little streamlining can go a long ways. I will try to not be too heavy handed in the application of AJAX!

    The site should be fun to use. This particular goal is to some degree subjective. This in turn means that what one person might find fun might not be so great for the next user. Fortunately we have the past year of experience that StackOverflow has been up and running. They have gone through many iterations of revamping their features to make the site more usable and FUN for their users. We will do our best to mimic many of their fun features (such as badges, user interaction, karma, etc.).

    The synthesis of features across very common applications (wiki, digg/reddit, blog, and forums) to create something special is the core of this application’s success. In order to create this special blend of secret sauce we will need to analyze the success of each of these plain Jane applications and extract only the best features. Some of these core features will include the voting aspects of a digg style content aggregator, the community managed content of a wiki, the question and answer capabilities of a forum, and the drive for many people in a professional industry to want to show their stuff within their community in the form of self publishing – like a blog. StackOverflow has a wonderful image on their about page that sums up the meshing of these common applications and how they apply to the StackOverflow community:

    Company or client goals

    If this project were something that we were making for our boss or perhaps for a client then we would also need to look beyond the goals of the application that we were building and also take into account what the owner of the product needed to get out of the finished application. This does not directly apply to us but to be complete this needed to be mentioned.

    If the client needed to make money by having a feature that did XYZ, but the client also wanted the site to be free in every way shape and form, then we would have a clashing set of goals that we would need to deal with. We would need to discuss this with the client and possibly suggest a free-mium model where most of the sites features are free to users, but really special or attractive features would be at a premium.

    NOTE

    The free-mium model (and others) are well documented in this book - FREE: The Future of a Radical Price.

    Design

    The design concepts of an application are often very important to discuss up front, prior to the first character of code being struck out. And frequently this needs to be discussed prior to creating a mock up. In our case the design discussion will be a brief one in that the application that we are creating will have a very sparse design in both color and layout. In other cases design may be more important or at least equally important to the features that the application has to offer.

    Design often covers navigation, color schemes, usability, and many other aspects of what you see and touch in an application. Don’t blow past this step without giving it an appropriate amount of attention. Coding an application first followed by a discussion about design, layout, colors schemes, workflow, and all the other usability aspects of an application can often result in total failure or at the very least a lot of extra busy work that could have been avoided.

    SEO

    Search engine optimization is a very important point to this particular application. It was decided early on by the makers of StackOverflow that rather than having a top notch search system built into StackOverflow it would instead depend on the power of Google and other search engines as their user interface. For this reason it is very important for us to pay attention to how the page is physically structured from an HTML perspective, what our URLs (routes) look like, and how each page is connected to one another. We will need to stuff as much data as we can into the URL, the page title, the header on the page, as well as having a few ways of cross linking the data from one end to the other.

    Summary

    In this article we discussed many aspects of what should be defined prior to creating a mock up. This included the definition of product goals, client goals, design, and SEO. Obviously there are many other aspects that one might want to define when working on a project that is not directly yours so that you might align yourself with your clients. In our case we are mostly cloning an existing product which helps remove some, but not all, of the prep work.

    In the next article we will take a look what a mock up is good for. We will discuss the definition of usability, getting client sign off, streamlining the specification process, and improving client collaboration. We will then take a look at a list of some of the tools that are out there to use for creating a mock up, some more complex than others. And finally we will discuss the usage of the latest edition of Expression Blend 3 and SketchFlow.

    <<  Previous Article Continue reading and see our next or previous articles Next Article >>

    About Andrew Siemer

    I am a 33 year old, ex-Army Ranger, father of 6, geeky software engineer that loves to code, teach, and write. In my spare time (ha!) I like playing with my 6 kids, horses, and various other animals.

    This author has published 29 articles on DotNetSlackers. View other articles or the complete profile here.

    Other articles in this category


    Code First Approach using Entity Framework 4.1, Inversion of Control, Unity Framework, Repository and Unit of Work Patterns, and MVC3 Razor View
    A detailed introduction about the code first approach using Entity Framework 4.1, Inversion of Contr...
    jQuery Mobile ListView
    In this article, we're going to look at what JQuery Mobile uses to represent lists, and how capable ...
    Exception Handling and .Net (A practical approach)
    Error Handling has always been crucial for an application in a number of ways. It may affect the exe...
    JQuery Mobile Widgets Overview
    An overview of widgets in jQuery Mobile.
    Book Review: SignalR: Real-time Application Development
    A book review of SignalR by Simone.

    You might also be interested in the following related blog posts


    Express Yourself With Custom Expression Builders read more
    Adding items to the end of a SiteMapPath read more
    Top
     
     
     

    Please login to rate or to leave a comment.