Assignment
Overview
Finally, it is time to start designing your interface. In this assignment, you will continue to the next step in the user interface design process-creating skeleton screen or page layouts to indicate where the key elements of your design will be located on each page. To do this, you will need to consider the task flow that you created in the Unit 2 assignment, and make sure you are enabling your user to engagingly and efficiently complete the desired task.
Assignment Preparation
Review feedback
Before you begin the assignment, review the course project information to make sure you are focusing on the required project scenario. Then review the feedback you received on your task analysis and task flow as well the comments from your classmates on your discussion post in this unit. You may also want to read the notes from your design journal regarding human factors related to information display and structure, as well as visual perception. You should build this wireframe and task flow for the same restaurant that you have researched in the previous assignments.
As in previous assignments, you will also want to complete your initial discussion post before you start.
Choose a Tool to Design Your Wireframes
You may use any tool available to you that will allow you to create simple skeletal sketches of each screen or page, and to label the location of the key elements described in Part B of the assignment. You should save the sketches in one of the following formats: docx, .pptx, .sketch, .psd, .pdf, .png, .jpg, .gif, .png, or .rtf.
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 be able to save the page in one of the formats identified above (one screen per page per file).
Assignment Instructions
Once you have completed your preparation, you will create a document that contains the following.
Part A: Task Flow - Customer Orders and Pays for Meal
Revise the task flow from your Unit 2 assignment. Your goal should be to make the user's food-ordering process more efficient. Include this revised version in this assignment as Part A.
This task flow should be the focus of your wireframe and user flow efforts. To make sure that your wireframe is doable in a reasonable amount of time, simplify the project in the following ways:
• Focus only on the tasks associated with a customer selecting and ordering a meal, and then paying for the meal.
• Design for the limited menu described in the course project information (three entrées, three beverages, and three sides).
• Simplify the task flow as much as possible without sacrificing any valuable steps.
Part B: Wireframe and Flow Between Wireframes
Design a series of wireframes to support your users in their tasks as they order online from this restaurant. A simple skeletal sketch of each screen or page, with the location of the following items clearly labeled:
• Navigation controls and links.
• Images.
• Text areas.
• Headings and subheadings, as applicable.
• Headers and footers that will appear on each page, as applicable.
• Other information display areas, as applicable.
Note that you will not be including content-the wireframe is just the layout or skeletal view of a screen or page. You will need to consider how each screen or page will support the completion of user tasks in the task flow you have created, and ensure that the wireframe contains the needed elements.
At a minimum, you should have three wireframes. You may have more, depending on how you design your task flow, but be sure to include one for each of the following:
• Entry page.
• Ordering.
• Payment.
Specify user flow between wireframes according to a task analysis. After you have created your wireframes, arrange them in a pattern that shows the flow of user actions from page to page, as supported by the task analysis. You may do this with directional arrows from wireframe to wireframe, and you may also number each wireframe. Note that you may reuse a wireframe layout in one or more screens or pages that you plan to include in your final application.
Part C: Design Strategies
Review your ideas about your project through the lens of human brain operations and the unit readings.
• Identify design strategies that address human recognition and recall, support user activities, and facilitate learning.
o How are you designing your online food ordering system user interface based on these human factors?
o What design strategies and features will you implement in your final prototype as a result of the readings and discussion?
• Include how you would modify the design of this interface for a mobile device such as a smartphone or tablet.
Include these ideas in your assignment, and also add them to your design journal, for use in developing your prototype in the next unit.
Format your assignment according to the following formatting requirements:
1. The answer should be typed, double spaced, using Times New Roman font (size 12), with one-inch margins on all sides.
2. The response also includes a cover page containing the title of the assignment, the student's name, the course title, and the date. The cover page is not included in the required page length.
3. Also include a reference page. The Citations and references should follow APA format. The reference page is not included in the required page length.