-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathappendix_F.tex
212 lines (155 loc) · 9.05 KB
/
appendix_F.tex
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
\chapter{Initial Prototype Screen Flows}
\label{sec:appendixf}
\section{Screen Flows}
% All use cases can be seen in Appendix \ref{sec:appendixb}.
\subsection{Splash Screen}
\begin{figure}[H]
\centering
\includegraphics[width=10cm]{figures/Splash.png}
\caption{Splash Screen}
\label{fig:splash}
\end{figure}
The Splash Screen is the first screen shown to the child when the application is opened. The splash screen will last for 3 seconds.
\subsection{Main Menu}
\begin{figure}[H]
\centering
\includegraphics[width=10cm]{figures/MainMenu.png}
\caption{Main Menu}
\label{fig:mainmenu}
\end{figure}
The Main Menu (figure \ref{fig:mainmenu}) is the next screen that will show after the splash screen, here the child may tap between 3 buttons, namely: start, tutorial, and load. The start button will open a blank workspace. The tutorial button will show the user how to assemble the firefly step by step and the different gestures that will be utilized. The load button will open the Load Menu where the user may load saved workspaces.
\subsection{Start New}
\begin{figure}[H]
\centering
\includegraphics[width=10cm]{figures/BlankSpace.png}
\caption{Blank Workspace}
\label{fig:blankworkspace}
\end{figure}
After tapping Start button this is the blank workspace that the child will see figure \ref{fig:blankworkspace}. In this screen, the user will see a jar of fireflies, and other playback controls. This screen is important as this follows the principle of an Obvious Starting point as it becomes a starting point in the application that the child can first explore different interactions and also a safe space for the child as they know that if they commit something wrong they can always go back to this screen.
\subsection{Edit Firefly}
\begin{figure}[H]
\centering
\includegraphics[width=10cm]{figures/ChooseFirefly.png}
\caption{Editing a Firefly}
\label{fig:editfirefly}
\end{figure}
After Loading a blank workspace, the child may choose a firefly model to edit by tapping any of the small fireflies in the jar. After tapping a firefly model in the jar, the firefly model will be enlarged so that the child may tap a firefly part to edit. We decided to use simple tap gestures for tasks involved in manipulating the firefly parts to make it easier for the child to remember them and to reduce the load of the actions that can be caused by using other gestures.
\subsection{Edit Firefly Body}
\begin{figure}[H]
\centering
\includegraphics[width=10cm]{figures/Body.png}
\caption{Editing Firefly Body}
\label{fig:tweakBody}
\end{figure}
After choosing a firefly model to edit, the child may tap the body to show the popup settings that can configure the properties. The different body color corresponds to different tempos.
\subsection{Edit Firefly Wing}
\begin{figure}[H]
\centering
\includegraphics[width=10cm]{figures/Wing.png}
\caption{Editing Firefly Wing}
\label{fig:tweakWing}
\end{figure}
After choosing a firefly model to edit, the child may tap the wing to show the popup settings that can configure the properties. For the wing popup settings, there will be two bubbles. The first bubble is for configuring the wing speed. The different wing speed corresponds to length of notes. The other wing configures the wing size. The different wing size corresponds to different number of repetitions.
\subsection{Edit Firefly Tail Light}
\begin{figure}[H]
\centering
\includegraphics[width=10cm]{figures/Tail.png}
\caption{Editing Firefly Tail Light}
\label{fig:tweakTail}
\end{figure}
After choosing a firefly model to edit, the child may tap the tail light to show the popup settings that can configure the properties.
\subsection{Feed Firefly}
\begin{figure}[H]
\centering
\includegraphics[width=10cm]{figures/FeedFirefly.png}
\caption{Set Pitch of Notes by Feeding the Firefly}
\label{fig:feedfirefly}
\end{figure}
After choosing the preferred tail light, the user may tap the feed me button in order to set the biscuits for the path of the firefly model which will also determine the pitch of the notes that the firefly model will play.
\begin{figure}[H]
\centering
\includegraphics[width=10cm]{figures/PreviewEatingTrail.png}
\caption{Preview Flight Pattern}
\label{fig:previewFLight}
\end{figure}
The user may also see a preview of how the firefly model will fly based on their placed biscuits by tapping the preview button.
\subsection{Change Currently editing firefly}
\begin{figure}[H]
\centering
\includegraphics[width=10cm]{figures/ChangeFirefly.png}
\caption{Choosing Different Firefly to Edit}
\label{fig:firefly2}
\end{figure}
In order to change the currently editing firefly model to a different firefly model. The child can simply click any of the smaller fireflies to enlarge and the previously enlarged firefly model will minimize. We wanted this action to show a contrast of sizes so that the child focus will shift from the one currently made to the new one.
\subsection{Release Fireflies to start playback}
\begin{figure}[H]
\centering
\includegraphics[width=10cm]{figures/Release.png}
\caption{Releasing the Fireflies}
\label{fig:releaseFirefly}
\end{figure}
After editing the firefly models to desired configurations, the child can tap on the lid of the jar to release all the fireflies and start the rhythm playback. This particular action was chosen as the start of the playback since we wanted it to represent the real world where fireflies are released and the child can see it as a way of familiarity.
\subsection{Pause, Play, and Stop playback}
\begin{figure}[H]
\centering
\includegraphics[width=6cm]{figures/StopPlayPause.png}
\caption{Play Pause, and Stop Controls}
\label{fig:firefly2}
\end{figure}
During playback, the child can pause and play the playback by toggling the play button. The stop button stops the current playback and starts the playback from the start on pause. The design of the buttons was made to be familiar buttons as they can already give the child an idea of what the buttons do.
\subsection{Adjusting Volume}
\begin{figure}[H]
\centering
\includegraphics[width=6cm]{figures/volumecontrol.png}
\caption{Changing Volume of Playback}
\label{fig:volcontrol}
\end{figure}
During playback, the child can adjust the volume of the playback by using the slider between the sun and moon. The moon will represent a lower volume and the sun will represent a higher volume. One finger drag gesture will be used as the child has more control of the desired volume they need with the use of this gesture.
\subsection{Replay Previous Tracks}
\begin{figure}[H]
\centering
\includegraphics[width=6cm]{figures/historyplayback.png}
\caption{List of Previous Tracks}
\label{fig:firefly2}
\end{figure}
After the firefly models are done with their playback, they are placed on to the playback history. The user may play these previous tracks again by dragging them to the jar on the left side then press play. This also was designed to represent the real world action of catching and releasing a firefly.
\subsection{Reset Album}
\begin{figure}[H]
\centering
\includegraphics[width=6cm]{figures/resetwork.png}
\caption{Reset Album Button}
\label{fig:firefly2}
\end{figure}
If the child wishes to start fresh with a new blank album, the child may press the reset button to return everything to default. We needed to put this as the child can go back to the start which is a screen where he is already familiar with and he would know there is a way to undo their mistakes.
\subsection{Save Album}
\begin{figure}[H]
\centering
\includegraphics[width=6cm]{figures/Save.png}
\caption{Save Album Button}
\label{fig:firefly2}
\end{figure}
The child may choose to save the existing album at anytime. Upon tapping the save button, the child is asked to input an author name and a title for the album. After confirming the album is then saved to the local device and can be loaded at anytime.
\subsection{Load Album}
\begin{figure}[H]
\centering
\includegraphics[width=6cm]{figures/load.png}
\caption{Load Album Button}
\label{fig:firefly2}
\end{figure}
The child may choose to load an existing album at anytime by tapping the load button.
\subsection{Load Menu}
\begin{figure}[H]
\centering
\includegraphics[width=6cm]{figures/LoadMenu.png}
\caption{Load Menu}
\label{fig:loadmenu}
\end{figure}
The Load Menu shows all saved albums/workspaces. The child may tap on an album then press the load button to continue working on that album.
\subsection{Exit to Main Menu}
\begin{figure}[H]
\centering
\includegraphics[width=6cm]{figures/exitmenu.png}
\caption{Exit Button}
\label{fig:exitbutton}
\end{figure}
The child may choose to tap the exit to main button at any time. When the button is pressed, a confirmation appears and when the child confirms that they want to exit to main menu, the screen will be transferred to the main menu. Same as the start screen this will give the child a sense of relief knowing they can go back to the start and begin all over again.