...
| 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
We used the concept of iterative prototyping/development. At the beginning we implemented the raw interface only with pictures/text without any feedback to the user. After getting feedback after testing, we refined our prototype as it was described in the Design section (including eliminating one transitional page) and implemented the ability to redraw one picture. After another couple of iterations (mentioned in the Design section) we refined the design again, and finally implemented the searching system adding more pictures to the website.
In addition to the interface implementation, we had two internal procedures to be implemented which should be described more detailed:
- 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.
We used a standard JavaScript library for working with video and JSFeat (JavaScript Image Processing Library) for analyzing the user's progress and giving feedback. We spent a decent amount of time adding that library as well as programming image processing algorithms. This time spending might have affected our implementation of other parts. - 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.
We used task decomposition and task delegation between the team members to make the implementation process more efficient. For example, the parts about the search and giving the feedback during redrawing are not connected with each other in terms of implementation. That is different members of our team did these part allowing us to save time on team meetings.
Evaluation
User Population
...
During the course we learned that early prototyping really helps on early stages of developing projects development. All iterations (from paper prototype to computer prototype) helped us to make main major design decisions.
- Paper prototype helped us to understand the flaws in structure of the website as well as position of the elements on each page.
- The first computer prototype helped us to finally understand the position of the elements on each page and colors and style of the elements.
- Final prototype helped us to understand user perception of drawing and adjust this process because it required some back-end.
Playing with Implementing each prototype helped us to get feedback from user in different view to develop users, which was important for the final product development. Also we tested different feature in features of our prototypes: for example, during first prototype testing we were more focused on the structure of the website, and on during the final prototype (with the whole back-end) testing we were more focused on the drawing part.
If we were to do this project again we would probably test drawing part early earlier in the process. Also we would divide the testing in on two parts - drawing part and all other features. The reason for it is that drawing part is more oriented on direct mapping from real life and second part is more oriented on external consistency with other website (social networks). I would also say that I The drawing part would be should have been tested more properly - because many . Many people never saw that kind of thing things before, so the learnability implementation was very challenging from the learnability side.
Also we discovered that working with artist artists is very hard and providing the feedback to them on their drawing can be very challenging because they don't like to get negative feedback about their perfomanceperformance.
We will try to address all these issues and to understand the process of drawing better we . We are planning to observe following processes:
...
All these observations will help us to refine drawing process in our product. We learned that we should be very careful about gathering user feedback because user in the end is the most important person for us.