Designing Scenes for a Mobile Application

Before you start developing your application, it is good to get feedback on your scenario. 

The description of how your application works and what it does. As collaborative task, you will be able to submit your idea to your classmates in the form of a storyboard (Storyboard). A storyboard is a visual way of presenting your scenario using sketches or images. Storyboards are usually linear, sequential while yours will probably take the form of a graph od a diagram (UML as sequence etc...), with the possibility of going back from one screen to a previous one for example. This will help you to design the navigation and interaction of your application. There are many tools for designing an application, from paper and pencil to sophisticated frameworks. The tools to use in this level are wireframes, mockups and prototypes.

• Functional mockup (Wireframe): provides a simplified and low-fidelity visual representation of the layout of each screen of the application. It shows the main elements and functions of each screen, such as buttons, menus, text fields, etc. It does not include any colors, fonts or graphics. It is useful to test the usability and functionality of your application. Ex. https://wireframe.cc/ 
• Mockups: offers a finer and more detailed version of the wireframe : it displays content such as graphics and texts using a "look" (colors, fonts...) as close as possible to that of the final application. It is useful to test the aesthetics and appeal of your application. Ex. https://wireframe.cc/
• Prototypes: While wireframes and mockups model the user interface, prototypes model the user experience. They are interactive versions of your wireframes or mockups that simulate how your application will work in reality. They are useful to test the user flow and feedback of your application. Ex. https://marvelapp.com/

Steps

1. Break down the process into sequences: Identify the main steps or tasks that your user will perform with your application. For example, if your application is a game, you might have sequences such as start game, choose level, play level, win or lose, etc.
2. Illustrate each sequence with one or more scenes: For each sequence, draw one or more screens that show how it will look like in your application. Use wireframes, mockups or prototypes depending on the level of detail you want to achieve.
3. Annotate each scene: Add notes or labels to each scene to explain what is happening and what the user can do. For example, you can indicate what each button does, what information is displayed, what feedback is given, etc.
4. Check the consistency of the sequences: Make sure that your storyboard flows smoothly and logically from one sequence to another. Check that there are no gaps or errors in your scenario. You can also ask for feedback from others to see if they understand your storyboard and if they have any suggestions for improvement.

Dr. Aymen ABID