[Recommended] One Screen Per Page
Part B: Prototype
Note: The prototyping guidelines addressed in the Required Resources for this assessment will help inform your prototype development.
For this part:
- Build a prototype that suits the goals and expectations of customers who will be using it. Your prototype should provide the look and feel of your user experience, with all of the following demonstrated:
- Adhere to best design principles for layout and style.
- Build navigation and controls that users would find intuitive.
- Incorporate accessibility factors into the design of your interface.
- Develop a flow that allows users to achieve their goals efficiently.
Choosing a Tool to Build the Web Pages
You may use any tool available to you to build the Web pages as long as it will allow you to create one Web page per file in one of the following formats: .sketch, .psd, .pdf, .png, .jpg, .gif, or .png. Note that this means you could also draw your screen or page by hand, and take a clear photo of it to generate a .jpg file. However, it will be difficult for you to add color, fonts, images, et cetera, if you use this approach. Possible tools include Paint, PowerPoint, Word, Adobe Illustrator, Visual Studio, Visio, et cetera. You may also use other prototyping tools that are available as open source or via free trial downloads. The only requirement is that you should able to save the page in one of the formats identified above (one screen per page per file).
After you have completed all of your screens or pages and saved them as individual files, plan the user flow between screens or pages for the customer to:
- Select from the menu.
- Pay for the meal.
- Submit the order.
Using InVision to Build Your Prototype
You are required to use InVision to build your prototype in this assignment. InVision offers a free account that will allow you to upload your screen or page files and link them together to mimic user task. Visit the InVision Web site (linked in the Resources under the Required Resources heading) and sign up for a free account.
Please note: InVision will ask for an e-mail address and a phone number. Promotional e-mails from InVision representatives are likely to arrive in the e-mail account you provide. You may wish to choose carefully what you share with InVision, if you would like to avoid being contacted by their representatives.
An initial Getting Started video will walk you through uploading your files and then linking them together by creating hotspots (ideally over buttons) so that you can establish the flow through the screens that the user will experience when using your restaurant ordering system. After you create your InVision account and log in, you can click Learn from the menu bar and view a variety of how-to videos. Start with the following (linked in the Resources under the Suggested Resources heading):
- Project Basics.
- Interactive Prototypes.
Complete creating the hotspots as well as the links between screens. Then test your prototype by beginning with the start screen and walking through the user tasks involved in selecting a meal, paying for it, and submitting the order.
After you have completed your prototype and reviewed it carefully, from the Prototype view in InVision, click the green Share icon and then click Public Share Link that appears in the gray bar at the bottom of the dialog box that opens. Copy and paste the URL to your prototype into a document that will contain your design justification