Eric's Chi-Leaders

Storyboard and further information about the application

with 4 comments

In this post we’ll further discuss our plans regarding the user interface for our application. We are planning on using a dual menu system, with two separate main environments. We will have a “reading-and-drawing” environment and a RSS-reader like article browser. In this blog post we will textually describe the latter with a frawing of the main idea and provide mock-up pictures of the former.

The browser will perform the task of showing the user which articles are currently available. The user is then able to select an article to read, which will transport him to the other environment, where the chosen article is displayed and ready to be drawn upon. Alternatively, the user may choose to upload his/her own work  (We are still working out the details of which formats to support as we don’t want to establish false expectations). During a group session we drew the following first idea as our article browser:

The proposed browser shows main categories of articles like “Sport” “Politics” and so on in squares. When the user clicks on one of the categories that category is enlarged and “pushes away” the others. On the right side we foresee the functionality to add an article and select preferred topics. Per category all related articles are shown. When the user selects a category there is an animation that “closes the toilet door” and the user is presented with an environment where the article can be read and drawn on.

The core environment for this application is most definitely the part of the UI we expect the user to be spending most of  his/her time. Therefore we will continue with a visually supported description of the  UI. Please not that these are just concept pictures and that the actual application may have a different style of buttons and windows.

When first entering the reading environment, the user sees the desired article with the overlays of his/her friends already enabled (picture 1). Each layer has a diffrent color so they are easily distinguishable. If desired there is a quick way for the user to disable all layers and have a clean view of the article by indicating thusly in the bottom-left check box. All layers that are of interest to the user are displayed in a menu that can be folded down by clicking the “Layers”-button. We hope to be able to find a way to differentiate between the “up”- and “down”- positions of the buttons in a clear way.

When the user clicks the “New Layer” button, he/she is prompted with a window that allows him/her to enter some basic information on the layer (picture 2). Also, he/she is able to notify his/her friends on facebook about this newly created layer. This is done by pressing the “add friend”-button, located in the top-right of the pop-up window. Clicking this button pops up a selection bar, displaying the avatars of the people in their friend list (picture 3).

When the layer is created, the user gets access to the leftmost toolbar, which is similar to the toolbox of MS Paint (picture 4) with the typical functionality like a standard pen, a marker, an eraser, etc…

Some more notes on the UI
– By clicking the top-right button, the user gives a point to the watched layer(s) and informs his/her friends about the article and corresponding layers.
– The user will by default see the layers their friends have made
– By allowing users to upload their own articles/files, this system can also be used to make notes on lectures in a collaborative fashion

Future implementation using Flash Builder?

We will probably be using Flash Builder to create our application for a couple of reasons.

  • HTML5 (+javascript) vs. Java applets vs. Flash
    • We had a remark that the HTML5 canvas could do the trick, but this standard isn’t very widespread yet and still buggy. So we quickly decided that this isn’t the way to go.
    • Java applets usually have slower startup times and a smaller portion of the users have the requirements installed. (source:
    • Flash is the current leader on the market for making real time applications and the language strongly resembles Java. Actionscript (flashs programming language) also has a very good support for XML files and regular expressions.
  • Flash Builder is an IDE that is based on eclipse. (can also be downloaded as a plugin for eclipse)
  • One person in our team has already made a few applications in Flash Builder.

After a bit of experimenting we were already able to make a very early test pogram that reads in an RSS feed. We also were able to get the rotating door animation in. We give a screenshot pure as an illustration (it has no connection to our final UI):

Hoping to hear from you in the comments,
Eric’s Chi-leaders

Written by chileaders

04/03/2011 at 23:47

Posted in storyboard

4 Responses

Subscribe to comments with RSS.

  1. I’m a bit worried about the ‘dual menu system’: this seems rather complicated to me. But I think you may just mean that there is a way to get from category to article to grafitti environment?

    You do not really have a storyboard of the full application here: that should really ‘tell the story’ of a complete user session, from start to finish! This is really important!

    And note that “Please not that these are just concept pictures and that the actual application may have a different style of buttons and windows.” is not really how one approaches a storyboard! It is meant to give a clear picture of how the application will actually behave!

    On a more detailed level: do you really think it is necessary to provide information about a layer (picture new-layer1.png)? This is a big hurdle for contributors and doesn’t really add all that much for readers? (I often use the slogan ‘electronic forms must die’ to discuss this issue…

    For new-layer2.png, I don’t understand why one would add friends on a layer basis: does it not make much more sense to do so once, and then notify all friends whenever the user creates a new layer anywhere? BTW, how will one manage ‘friends’? Would it not make sense to use Facebook for this purpose?

    The remarks about FlashBuilder a really premature at this stage: the next phase concerns a paper prototype (more on that in the session next Tuesday). That prototype will be evaluated and then your design may change considerably. So, you can’t really know just yet whether one or other implementation environment will be suited, because you don’t know yet what you will build.

    BTW, the link to picture flex1.png is broken?


    06/03/2011 at 11:02

  2. I also have a few images which are broken.

    Like prof. Duval, I think it’s a little early to discuss implementation details right now. I looks to me like your creativity is lead by how you’re going to implement the thing eventually, not focusing on how you’re going to make your application attractive for users.

  3. Wouldn’t it be better if the user can notify his/her friends after he added things to the overlay instead of before? I’d rather want to know when a friend added something to the article then when he added a new overlay (maybe with nothing in it).

    The link to two pictures seems to be broken(IMG_0027 and flex).


    12/03/2011 at 21:23

  4. There were indeed issues with 2 of the screenshots which have been fixed.


    16/03/2011 at 01:24

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: