Page History

Image Added

Our main criteria for choosing the graphic design, besides the learnability, efficiency and safety, was that we were creating design for artists, which means that everything should be creative and relative to the paintings. That’s why, for example, we decided to set a canvas on background and to choose the Pokémon-artist as a symbol of the site.
Main page was decided to be scrollable. It’s made in such way because we didn’t want to make it too loaded with different elements. This decision was motivated by paper prototype, because users said the main page was too loaded and it was difficult to find major control elements. So, now, when user downloads main page, he sees:

Image Added

There are only 3 control elements in user focus: “Try now”, “Sign up” buttons and search string. Having only three control elements help with learnability. If user can’t understand what he can look for, he can scroll the page down and see popular requests

.

One of the major problems that our users determined during paper prototype testing and heuristic evaluation was that it was unclear whether these popular example pictures are clickable. So, we decided to create a mask with the name of technique and a brush (showing that it can be redrawn) that appears on hovering.

Image Added

The first user-testing task was to try the example lesson. It can be easily done with the button “Try now”. Pressing this button launches the initial preparation page that has initial steps description and only one button – “Start the training”.
In the beginning of the training user is suggested to watch the training video. We decided to implement it after user testing, because one of the users said he wanted to understand the process of training before beginning it.

Image Added

Then user is asked to put the list of paper in the way, it can be seen by web-cam. We tried different variants of showing the user how to set the web-cam since the paper prototype testing. Drawing the rectangle as shown on the

picture appears to be the best from the learnability side.

Image Added

The major part of our web site is drawing process. The idea of the design changed a couple of times. After user-testing, we decided to divide the whole process on different steps for easier understanding. Also, we decided not to provide feedback in real-time because it disturbs artists and interrupts them. So now, the one-step process looks like on:

Image Modified

As it can be seen from the screenshots, the artist can either continue or redraw the step. It creates the full user control feeling, because even if the system does not satisfied with the results, it doesn’t prevent the artist from continue drawing.

Also, we tried some different types of giving feedback and it appears that just highlighting the wrong places satisfies users.

Image Added

Finish page looks now in following way

as it shown on the picture.

It has undergone some changes since paper prototype stage. Firstly, users said that they do not see enough information, so we added the name of the technique that describes what was drawn. Also, the heuristic evaluation showed that there were a lot of buttons that brought mess on the page. So, we decided to leave only one button – for returning to Main page. Later, when we implement registration, the system will determine whether the user is registered and depending on that, will show the second button: either “Save and register” for new users, or “Go to Personal Page” for registered users.

Image Added

The other user task was to find “Mona Lisa” bi Da Vinci. Later we changed it for finding the sketch because we implemented lessons only for sketches. So, now, Search Page looks in the following way:

We had the same problems with the search results as we had with the main page examples – the pictures didn’t look like they were clickable. So, we made here hovering like on the main page. After pressing the result of the search, the user sees the technique page

.

Image Modified

Heuristic evaluation showed that firstly, the description of the technique was hard for understanding, so we decreased the amount of text and made it better for reading (by adding white spacing for example). Secondly, earlier we had an additional page for choosing the level of the technique.

Image Added

During the paper prototype testing, the users complained about big number of steps before the start of training. One of heuristic evaluators suggested making a drop-down menu instead of additional page. So, we implemented it: