Design
General concept
|
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. |
|
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. |
First user task and drawing process description
|
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”. |
|
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. |
|
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: |
|
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. |
|
Finish page looks now in following way as it shown on the picture. |
The second user task and the search process
|
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: |
|
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. |
|
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: |
Implementation
In addition to the interface implementation, we had two internal procedures to be implemented:
- Search algorithm. Both the main page and the search page contains the search bar. It is aimed on searching within the list of techniques/pictures/artists to find an appropriate technique. The search was implemented in JavaScript. When the user tries to search for a certain phrase, the search script reads the list of techniques and files with their descriptions and outputs the techniques which has the search phrase in their description. The search itself was implemented as a substring comparison.
- Image processing for giving feedback to the user
- Content. The main idea of our project is to allow users to learn new techniques by redrawing pictures/paintings. That is why it is essential to have content to redraw. We implemented the techniques storage in a structured way, so that the process of adding a new technique will take only a couple of minutes. After adding a technique, the search script will take it into account and show it in the search results during the next search attempt. At the same time the process of adding techniques is monotonous and we decided not to waste too much time on adding techniques, their descriptions, pictures, etc. That is why we have 3 techniques, each has 9 pictures as levels of difficulty. So, the search script and the search page work for 3 techniques and 27 pictures. When the user wants to redraw a picture, he needs to watch a video on how the process of getting feedback works (it was a user feedback to include a video). We recorded one video for one picture, so the user can redraw one picture now. Again, we decided to record only one video in order to save time on doing monotonous work and to spend it on improving the prototype.
Evaluation
User Population
All 3 users are professional artists (age 20-25) who are keen on sketching. 2 are females. All three have experience of studying in art school as well as working as tutor for pupils.
They all participated in Hacking Arts event in MIT which helped us to reach them
Our main aim was to target those artists who already know main fundamentals of drawing and who already learned a number of techniques so they have organized process for it.
Conducting User Tests
User tests were conducted during meetings in Boston.We didn't conduct demo because we put video in our prototype which helps to describe the process of drawing.
Equipment:
- Macbook Air (OS X 10.8.2. Snow Leopard)
- Chrome
- A piece of paper A4
- Black felt-tip pen
Introduction
So, you're an artist who want to study a Leonardo Da Vinci drawing technique. You want to use our service "ArtUp" for interactive learning how to draw.
But first you want to know how to do it via test lesson.
Tasks
|
Description |
Subtasks |
---|---|---|
Task #1 |
Try the test lesson from the main page |
|
Task #2 |
Find Leonardo Da Vinci's drawing techniques |
|
User feedback
Page |
Problem |
Screen shot |
Importance |
Possible solutions |
---|---|---|---|---|
Search page |
Not the whole picture becomes |
|
Cosmetic |
Resize pictures which are generated during search |
Drawing page |
Video doesn't have sound - it confuses the listener |
|
Minor |
Add audio description which helps to guide the user |
Drawing page |
It isn't clear that I need to allow webcam |
|
Critical |
Add text and image information about necessity of allowing camera |
Drawing page |
Text description is far from the part of the |
|
Major |
Make text information appear on the screen with |
Drawing page |
It is unclear about what exactly I need to do |
|
Major |
Add picture which is going to be drawn on the initial preparation page |
Drawing page |
There is no way to get back to stop process |
|
Minor |
Add button "Go to main page" |