22 Jan o APA format: Resources

IT3301

Unit 3 Assignment

Model User Flow and Wireframes

Note: Complete the discussion in this unit before you begin this assignment.

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:

o Focus only on the tasks associated with a customer selecting and ordering a meal, and then paying for the meal.

o Design for the limited menu described in the course project information (three entrées, three beverages, and three sides).

o 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:

o Navigation controls and links.

o Images.

o Text areas.

o Headings and subheadings, as applicable.

o Headers and footers that will appear on each page, as applicable.

o Other information display areas, as applicable.

Please 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:

o Entry page.

o Ordering.

o 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.

o Identify design strategies that address human recognition and recall, support user activities, and facilitate learning.

? How are you designing your online food ordering system user interface based on these human factors?

? What design strategies and features will you implement in your final prototype as a result of the readings and discussion?

o 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.

Refer to the Model User Flow and Wireframes Scoring Guide to ensure that you meet the grading criteria for this assignment.

When complete, add all three parts in a single zip file and submit it as an attachment in the assignment area.

Submission Requirements

Your assignment should meet the following requirements:

o Written communication: Communicate effectively. While content is the most important aspect of your assignment submission, organization, readability, grammar, and spelling are also important.

o APA format: Resources and citations must follow current APA guidelines.

o Document type: Submit the assignment as a zip file.

Resources

o Model User Flow and Wireframes Scoring Guide.

o APA Style and Format.

• Toggle Drawer