prototype (PDF)

prototype
Basically, three sections are implemented in the application, which includes
“Sketch” page, “History” page, and “Result” page. Users are able to jump among these
three basic pages at anytime by clicking the bottoms in sidebar.

“History” page

“Sketch” page

“Result” page

“Sketch” page
Description
In the “Sketch” page, there are five functions in the menubar. In the left-hand side,
the “undo” bottom allows users to go back to the last movement if they make unexpected
movement. In the right hand side, the “new” bottom enable users to create a new sketch
page. In the middle of the menubar, there are three functions in one list which can be used
during the sketch time. Users are able to choose the size of the line from minimum size to
maximum size if they click the first “pen” bottom in the list. The second “drip” bottom is
able for user to change the color of the image when sketching. Besides that, if users click
the “pentagon” bottom in the list, the image is supposed to be scrapped off rather than be
sketched when users make movements on the screen. The interactions of these three
functions are shown in following pictures:

Click “pen” bottom

Click “drip” bottom

Click “pentagon” bottom

Justification
From the decision of group discussion, the principle for designing the application is
to make it good for looking and easy to use. We have paid much effort on how to achieve
this goal. As can be seen, in the “Sketch” page, most of the space is covered by text area
where users are able to sketch, which makes the interface clean and tidy. Besides that,
cognitive bottom is designed for user to easily recognize, such as the “undo” arrow, the
“pen” bottom and the “pentagon” bottom. Besides that, three similar functions which are all
used during the sketch time is organized in one list covered by gray background, but two
special bottoms (“undo” bottom and “new” bottom) which control special functions are put
in the left-hand and right-hand, which shows similarity and contrast.

“Result” Page
Description
In the “Result” page, several similar images will show up based on user’s sketch
image. The “change” a batch” bottom make the interface show another list of images
which is different from the last one but still similar to user’s sketch image.
Justification
It is reasonable to display the result by two columns, because two images can be
clearly shown in one mobile screen. Also, this page can only be vertically scrolled rather

than horizontally scrolled, which doesn’t computes for users’ attention, because it is hard
for user to browse the images if this page can be both vertically and horizontally scrolled.
Besides that, the “change a batch” bottom enable user to view another list of images,
because use may not satisfied with the result that shown in the first time, this provides
more choices for user.