Eric's Chi-Leaders

Paper Prototype Evaluation

with 2 comments

Earlier this week, we were asked to make a “Paper Prototype” of our application.
For those of you that are not up to speed on our UI-developing process, the idea is basically to create a paper version of any interface element you’d fancy using.
After this mock-up is complete you let loose the ferocious hordes of the general public and see if your prototype survives the intense testing to which it will be treated.
In our case the individuals that tested our design were members of the other development groups.
Even though, as computer science majors, they are not really the “general public”, still they provided us with a lot of useful information.

Because of the somewhat negative comments that were given on our storyboard, we opted to go with another design that was improved upon by the paper-prototype evaluation.

This time, the look would be more “simple”, “understandable” and “uniform”.
What we mean by this is that we abandoned the idea of to many toolbars and in-your-face retractable menus.
Following our teachers advice, we abandoned the “layers” idea. In our new concept, everyone is free to draw on an article. The only restriction here is that we would allow the owners of an article to be able to keep the article “private” for only him/her and invited friends. We will most likely bootstrap the system by adding a lot of “public” articles gathered from news-sites. These will then be editable by anyone.
Once people start using this application or abuse becomes the main reason people choose not to use the application, steps will be taken to fix this.

The new design has a basic area, this being the “door” on which you draw.
All other functionality can be called upon by using the menu items at the bottom of the screen.
To keep things as uncomplicated as possible the user sees three fairly-large menu buttons:
“Articles”, “News” and “Options”.

Articles will open a smaller window (within the application) which will contain a list of all new articles.
News will inform you of your friends recent activity on the system.
The Options menu will allow you to change global settings such as account details, mail notification settings, etc.

On the top left of the interface there would be a small bar displaying the icons of the friends currently drawing on the same article as you are. In case the user is the article’s owner, he/she can kick people out of the article.
Users that were kicked from an article will be unable to further draw on it.

Also when in article reading/drawing mode the cursor changes when you get to the drawable area (top) or menu area. (bottom)

After the test

After letting our classmates have their way with our prototype, we noted some interesting things.
First was that users never want to see a blank screen.
In our first idea when a user would open a article, edit it and then close it, all he/she would see is the background image and the menu. After about three tests, we noticed that this seems to be very disorienting for most users.
We then decided to always return the user to the general overview of articles.

This overview of articles first had an organisation by topic. For now we have chosen to keep things as simple as possible and therefor it is now a simple list of articles, each article clearly showing whether it can be modified by the user or not (read-only). Our main goal now is focusing on the main idea, a summary by topic can always be added in a later phase of development.

The next problem was that users didn’t seem to find their way around the system in order to add their own articles.
This was originally done by pressing the “add” button at the top of the window that would open when a user selects the “Articles” menu-item.
Our solution was to unify the “News” and “Articles” section into one list (as shown in the slideshow below), thusly make it possible to replace one of the menu-buttons by an “Add Article”-button. The reason we chose to merge two existing features rather than adding a menu-button is that we felt an overly full menu would more confuse users than it would help them.
(Following the “keep it simple, stupid” principle)

The slideshow below shows our paper prototype and starts off with the very first prototype to take a look at the changes it went through during the last session.  We will also provide a video later this week of the testing that was done during the last session plus a detailed analysis per test case.

A blog post showing a new storyboard and a transition model will soon be posted.

This slideshow requires JavaScript.

Written by chileaders

13/03/2011 at 17:15

Posted in Meeting, Men-At-Work

2 Responses

Subscribe to comments with RSS.

  1. Don’t forget to post the new version of the storyboard and the screen transition diagram!

    Erik Duval

    19/03/2011 at 22:39

    • Due to a deadline for another course the new storyboard and screen transition diagram will be posted a bit later. They should be available on Tuesday.


      20/03/2011 at 01:38

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: