User Interface Mockup & Storyboard
I'll place images and descriptions as I complete them. I'll put an update in the issue when I'm done. -- James
Note -- these are exemplary mockups for the purpose of layout. These are not what the final product will look like, but ideas modelling the desired design.
No multiple instances of same story (can only have single save).
No going back to story fragment after making choice.
Always autosave.
First screen user sees after opening app. 'Continue' can be hidden or faded-out if no stories have been started - it allows user to browse through in-progress stories. 'Browse' allows user to search through available and stories. 'Develop' allows user to be an author and make/edit stories.
Lists stories that the user has started. User can then jump into where they left off. Probably best to order the stories by most recently viewed.
Allows user to see their current story fragment.
At the top of the screen are the illustrations and videos in a filmstrip. The user can swipe horizontally to scroll through the different images. On double-tapping an image or video, we can have that item go full-screen. If we replace videos with their thumbnails and a '>' watermark, we can ensure quick scrolling and only have them load and play when fullscreened.
Below the illustration filmstrip is the text describing the current story fragment.
The filmstrip and description text are together in a scrollview, where the user can scroll down if the text is too long.
At the bottom of the screen is a bar for choosing dialogue options. On pressing, the screen fades darker and the 'Choice Dialogue' overlays. We could have the glowy-button pulse when the user hits the bottom of the page.
The 'settings' button on the actionbar can allow authors to access developer options if they are the owner of the story. As well, user comments will be accessed through here.
The menu on the action bar will also contain an option to save the entire story to the local cache.
Upon clicking the bottom bar in the 'Story Fragment' screen, this screen is overlayed. It allows the user to choose what action they would like to perform.
Currently the idea is to use a Mass Effect -esque dialog circle for the user to interact with. However, this may give issues if the authors are allowed to place too many choices (need to confirm we are allowed to limit dialog choices). The use can drag their finger from the centre of the circle and outward to their desired choice. As they pass a certain threshold-distance to a choice, it will light up. To not choose yet, the user can return their finger to the certain (within threshold), release, and then press bottom button again.
The change of colour of the bottom button will indicate to the user the interactivity of the bottom button.
Allows user to browse through all stories available from the cache, user-authored, and online. Cycling between these will be through the tabs and swiping horizontally.
If the user has already completed the story listed, a green check mark will appear. If the user is currently on that story, a yellow hourglass will appear (currently not an hourglass). If the user has not touched the story before, there is no image. We could potentially have a star on a story if it is new since last visit.
After choosing a story from the 'Browse' view, the user can then see some more detailed information regarding the story they chose. The green colour in this view indicates that the user has already finished the story once, and that they can play again. If the story is in progress, we can have a yellow layout, and the user can either continue or start over. If it is not yet been played, a light blue schema and the choice to start their adventure.
The menu on the action bar will also contain an option to save the entire story to the local cache.
After choosing 'Develop' from the main page, this activity is launched. An author can view and edit their existing stories. As well, they have the option to create new ones.
After selecting an item from the 'Develop' activity, a full description of the chosen story is presented. From this screen, an author may edit, upload, or delete their story. As well, by swiping horizontally, an author can cycle between the other stories.
On editing a story, the following view appears with three tabs available.
The 'overview' tab holds a graphical representation of the story tree, displaying all nodes. The green node is the story root, the white nodes are parent roots, the blue node is the node currently being edited, and the red nodes are tree leaves or 'endings' for the story. NOTE: Should probably replace lines with arrowed-lines.
This tree should allow zooming in/out. On clicking a node, the description for the node should appear in a dialogwindow. From there, the author can choose to directly edit that specific node.
This will edit the currently-selected fragment. This view is nearly identical to the 'Story Fragment view', except that everything is editable, and the tab bar at the top is still in place. As well, a button should be below the comments to manage the dialog choices for the fragment.
Here is a fun & exciting UML sequence for editing a Story Fragment.
Previews the current story fragment. Looks similar to the 'Story Fragment view.'