Assignment 4 – Creating a User Interface (Prototype)
It is about to get real.
READ THIS ENTIRE ASSIGNMENT TWICE – You will use the design you start here for the remainder of the class. It is important to do this correctly and ask questions (You have a discussion board – you MUST use it).
Computer users expect different types of interface elements to behave in a consistent and simple manner. These elements are covered by Usability.gov https://www.usability.gov/ . These are the elements that you will commonly use in interface design – and even though these elements can include many elements of style – their basic functionality will remain essentially the same.
Objective
1. Learn the steps in building a user interface
2. Use tools or technology to help build the UI
Assignment
1. You will be designing a software interface for a simple application and creating a prototype application interface. This can be a computer-based application, a mobile app, or a website.
2. You must select a target platform for your design – you are only required to design for a single platform, computer, tablet, or phone. For groups with clients – the client will determine the platform.
3. You will create a report that captures all the screens of the designs and outlines the user operation from start to final display and operation of the application.
– All screens must be captured or drawn and in your documentation.
– Actions and operations of each screen must be documented. This can be done as side by side or simply by annotating the captured screens.
– You must document the flow of the application from screen to screen
This will be submitted as a pdf or word doc file to the assignments dropbox. Note – this is not a fully complete and finished product; you will be analyzing and modifying your designs throughout the semester. Keep your original designs as you will document changes at the end of the semester.
You will be submitting your design document to the discussion boards and to me (in the assignments) as other students will be analyzing your design. You will be analyzing the designs of other students in upcoming assignments.
Information
The easiest and best way to design interfaces that can be expanded into full designs is html and css. To this end you will be designing the interface using these tools. Also, your design must be accessible to other students meaning you must have a way to publish your design (a website) or use a publishing tool or to a shareable document management tool (like Google Docs).
A great tool that has an educational licensing (with edu email address) is Figma. You can do the full design with this tool easily – https://www.figma.com/education/
Note: There are a large number of tools to assist you in creating designs. I suggest looking at and learning the tools you need for this and future assignments. A full list of free applications for design http://www.smashingapps.com/2011/03/08/21-free-ui-design-tools-toolkits-and-resources-part-1.html
You can also create a real website using straight HTML. It is the best choice (and simple enough to learn) for doing designs.
Sample Applications
The project selections are at Class Projects
You must demonstrate how your design will integrate three primary design principles of Learnability, Flexibility, and Robustness and give at least one example of the design addressing each of these principles.
All Course Lectures Part II of the class contains the necessary lectures on prototyping to create this interface successfully.
Grading
All acceptable first draft applications with screens and instructions for upcoming assignments will be accepted with full credit. You will submit this design to other groups of students for evaluation as part of the evaluation phase of the project. Submissions with comments and no grade must revise and resubmit. In addition, this is needed prior to releasing to other student groups for evaluation.