User interface mockup and storyboard
Images of what we plan to have each of the Views look like, as well as an expertly illustrated storyboard for a typical usage scenario.
|
This is the main view for the application, also showing up as the starting screen. Displayed here are the major options which we deam to have the greatest likelihood of selection. From here, the User can navigate through our application to the major sections of interaction. |
|
This view shows off the list of currently created Mole watchers that the user has made. They are listed with their given title as well as the last date that they were updated. This view is not set in stone and may be updated to include things like the location in which the picture was taken and potentially a thumbnail of the latest image |
|
The Search view is similar to the ListMole View in that it displays the moles that the user has created. The only difference is an added search function that the user can use to limit the shown Moles down to those related to the query. |
|
The mole view can be reached from either the Search or ListMole view. This is done after the selection of one of the displayed moles in those views. Here, any information pertaining to the mole over it's history can be displayed here. Additional information can be provided in this screen, including the latest picture take, the date in which that picture was taken, additional tags that could be added to the Mole, and other relevant data. |
|
NewMole View is a view designed for when a new mole is added from the Main screen, or if a user decides to edit information pertaining to an already created mole, that data will already be filled in and ready for editting here. |
|
This view is designed to allow the users to see the Pictures that are associated with a watched Mole. Along with each picture will be the date it was taken and any additional descriptions that the user provided with the photo. |
|
Edit Image is a use for editting the data pertaining to a Photo previously taken or for when a new picture is taken, this will be blank and ready for the user to input the required information |
|
This is the view for when a picture is first being taken for a Mole. This is important in terms of establishing the angle that the mole will be viewed from for later points in time.
We might not need to implement this, since sending an intent to the camera seems to achieve the desired effect. |
|
This image displays the additional photos being taken for a previously established Mole. This shows how we will be overlaying a previous image over the screen while the user takes the photo in order to guide them to take a consistant photo every time.
This is currently listed under additional features as we are uncertain of the difficulty to implement such a system, though feel it is an important enough attribute of our system to include here. |
 (click for full size) |
To the left is the flow to the GUI. The buttons are circled and point to the resulting screen. It is important to notes that the back button at the bottom of the screen will return to the previous screen. Along with that functionality, when the screen currently on is an Edit screen, the App will prompt the user with a warning that in returning to the previous screen, all changes will be lost. This is to ensure data that was written isn't accidentally dropped |
 (click for full size) |
To the left is the storyboard designed to show the case where in the user finds a new mole on their skin and starts off the new mole with a picture. The majority of our UI interface is shown within the fifth to eighth panels. |