Published: 07 Oct 2009
By: Andrew Siemer

In this article we will create our first SketchFlow application. We will then dig through the current version of StackOverflow and document all of the important aspects of that site (layout, navigation, workflow, and usability). We will then implement a working mock up that directly resembles StackOverflow which you will be able to play with when you are done reading this!

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 a look at what a mock up is good for. We then discussed the definition of usability, getting client sign off, streamlining the specification process, and improving client collaboration. Next we took 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 discussed the usage of the latest edition of Expression Blend 3 and SketchFlow and why it was chosen above all the others.

    In this article we will create our first SketchFlow application. We will then dig through the current version of StackOverflow and document all of the important aspects of that site (layout, navigation, workflow, and usability). We will then implement a working mock up that directly resembles StackOverflow which you will be able to play with when you are done reading this!

    Our first SketchFlow project

    Start by opening Microsoft Expression Blend 3. Then open up the new project dialog and select Silverlight and then Silverlight 3 SketchFlow Application. Put this in your projects directory. I prefer to put my prototype in a prototype folder within my source directory as what we will be creating is simple text files that we can version along with anything else in our project.

    Once our new project is open you should see a big blank design area to play with. There are a couple of steps that we need to take before we get started playing with SketchFlow. First, select the UserControl you see in the Objects and Timeline (Window->Objects and Timeline if it is not open). Then open the properties window. Then set the layout properties to have a width of 1000 and a height of 700 to resemble the web page dimensions that we will start to mock up. Next, to make things easier open up your SketchFlow Map window (Window->SketchFlow Map). This window will allow us to quickly create a our sitemap on which we can prototype our site.

    Your project should now look something like this:

    Creating the sitemap

    With our project workspace configured in a manner that suites us we can now start to create our sitemap. This is done in the SketchFlow Map window at the bottom of the program. You will see the default Screen 1 sitting there in blue waiting for us. Double click on "Screen 1" and change the name of that screen to "Home Page".

    Next we will start creating several copies of that screen. Right click on our Home Page screen and select duplicate. Do this several times to create copies of the blank home page screen. Then we can take a look at the StackOverflow site to quickly determine the public pages of that website.

    What do I do for pages that have different states?

    When thinking about building any project remember that there are most likely various states of your application. StackOverflow is an excellent case in that the home page looks one way for a logged in user that it does for an anonymous user. We won't worry just yet about state management in SketchFlow. I just want you to be aware that SketchFlow does have some magic built in for handling these differences. For this reason we will take a look at StackOverflow purely from a page perspective to begin with and not so much what is on each page.

    The first page we come to in StackOverflow is the home page (which we already have!). From there we can leap to many other pages. Here is a list of the pages linked to from the home page.

    Table 1: Pages linked off of the home page

    Page

    Purpose

    FAQ

    Frequently asked questions page

    Login

    Login page with OpenID capabilities

    Search

    The search results page

    Questions

    A list of questions

    Tags

    A list of tags

    Users

    A list of users

    Badges

    A list of badges

    Unanswered

    A list of unanswered questions

    Ask Question

    A page to ask a question

    Question

    Clicking on a question takes you to the details of that question

    Tag

    Clicking on a tag takes you to a list of questions taged by that tag

    User

    Clicking on a username takes you to that users profile page

    Badge

    Clicking on a badge takes to a page that shows all users with that badge

    Feeds

    Shows rss feeds for questions

    Blog

    Takes you to the blog site

    Privacy Policy

    Shows the privacy policy

    Contact Us

    Links to an email address – we will have a contact form

    Feedback

    Links to meta site

    As you can see from the list above, the home page is filled with links that will quickly create a fair sized site map for us. Let's quickly create screens for all of these pages before moving to the next step. With all of the screens created by duplicating the home page we can link the home page screen to each of our new screens. Do this by mousing over the home page screen and clicking on "Connect an Existing Screen" and then drag an arrow to the screen that you want to link to the home page.

    Once you have done this you should have a fairly complex albeit flat sitemap. I grouped mine into rough areas of the site. From left to right you will see account oriented stuff, general site pages, question related pages, and other feature pages such as tags and badges.

    From there we can continue to poke around on StackOverflow to uncover any other pages in the site and to discover relationships between the pages we have already found.

    Upon further investigation

    As you poke around the StackOverflow site you may find that it is fairly flat from a sitemap perspective. By this I mean to say that just about every page is in some way linked to just about every other page! For example, you can login from just about everyone. You can get to the tag page from just about everywhere. And you can navigate to a users profile page from about anywhere. For this reason I will hold off creating relationships until I actually need them. Otherwise we may end up with a "site ball-of-string" instead of a "site map".

    Design

    Now that you know how to create new screens and link them to one another lets return to the home page and knock out some rudimentary design. We can start by tackling the header which has a top level navigation (login, about, faq, and search) and a primary navigation (questions, tags, users, badges, unanswered, and ask question). To do this you need to click on the Assets tab (Window->Assets). Then expand the Styles section and then SketchStyles. On the right of that area you should see a long list of controls. I drug over a BasicTextBlock-Sketch control and changed the text to say "Fancy Logo Here". I then drug over several Button-Sketch controls for the primary navigation items (questions, tags, users, etc.). Next I added a few more Button-Sketch controls for the top nav (login, about, faq). I then edited their properties in the property window to have no brush for the border of the button to make it look more like a link. Finally I added a TextBox-Sketch control and added the word "search" to it to resemble the search field.

    Running the prototype

    Now we can hit F5 (same as in Visual Studio) to see our project run in the browser. This will start an instance of a web server in the same way that Visual Studio does and open a web page in your default browser. You will notice that your prototype will open up and display our home page. Also, notice that SketchFlow has added a list of navigation options on the left.

    We now have a home page with our top and primary navigation. You can mouse over the buttons, see the roll over effect, and even enter text into the search box! Of course none of the UI controls actually do anything beyond that just yet!

    Now move over to the navigation pane that is provided for you. Click on Ask Question and see where you go. What? A blank page? None of this UI has been propagated to any of our other pages yet. Also, did you notice that once at the blank page you can't get to any other pages from their navigation pane? That is because (at least in my case) we only defined a relationship from the home page to our other pages but to nowhere else. We will fix these shortcomings in the next discussion. To get back to the home page for now you can either click on the little home icon in the upper left or you can switch to the map view in the lower left. In the map view you will see your site map and you can click on any of the screens there to easily jump around.

    Summary

    In this article we have created our first SketchFlow project. We discussed how to get our project up and running by creating a site map. We then created some initial design aspects to create the header of our site. And then we took a look at what SketchFlow has to offer in the way of working with the prototype by running our project in the SketchFlow player.

    In the next article we will take a look at some team collaboration aspects of SketchFlow in the form of getting feedback from the users of our prototype. Then we will build a reusable component for our header and navigation controls that all of the screens in our project can use. Once we have a header throughout our entire project we will then implement navigation in our top and primary navigation buttons. Then we will create the guts of a couple of pages to show how easy it is to quickly mock up a page. And finally we will discuss managing the various states of a page with SketchFlow's state management tools.

    <<  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.
    Top
     
     
     

    Please login to rate or to leave a comment.