document.write('\
\
    <p><span class="bold">Assigned: Wed, Nov. 7, 2018; Due: Wed, Nov. 14, 2018, 1:30pm EST</bold></p>\
    <p>Using the information that you collected in Homework 1 for what is good and bad about the real device\'s user interface for the tasks you designed, now you are going to make <span class="bold">Sketches</span> and a <span class="bold">Paper Prototype</span> of a (hopefully) better design in homework 2. Following the redesign, in the next homework (homework 3), you will run a usability evaluation of the prototype and revise your design based on the feedback you get.</p>\
    <p>Turn in all parts of this homework on Canvas.</p>\
	<p>To make it easier to make sure you have all the parts of this assignment, we created an optional template you can use: <a href="http://www.cs.cmu.edu/~bam/uicourse/Paper Prototype of an Interface_Template2018.docx">http:/\/www.cs.cmu.edu/~bam/uicourse/Paper Prototype of an Interface_Template2018.docx</a>. \
    <h4>PART A:</h4>\
    <p>Sketch at least <span class="bold">three</span> different user interfaces for the functions you are targeting for your device (three different design directions). The three interfaces should be <span class="italic">dramatically different</span>; for example, with different organizations of what functions are on each screen, using different widgets for various functions, and using a different layout of the widgets on the screens. You might also vary which buttons are physical buttons and which are on-screen buttons. You should sketch the main screen or screens or a small storyboard -- <span class="bold">not</span> the whole interface, but enough that we can see how it works. Note, the goal is to have at least 3 <span class="italic">good</span> interfaces that are different in <span class="italic">interesting</span> ways -- you shouldn\'t just create a good interface and then two more bad versions of it. The different designs need to be for the <span class="bold">same</span> part of the UI (not 3 different parts of the UI). Be creative! By \"sketch,\" we mean informally draw the general idea, and label a few of the widgets so we can tell your intent.  It is not necessary for the sketches to have every function or every screen, but there should be enough to show off your idea. Sketches should be done on paper with pens and/or pencils (not using a computer). The sketch for each design will typically include a few screens, which you can put on multiple pieces of paper. Please hand-print neatly for the textual labels and any annotations on the sketches. Next, you will select one of the designs for Parts B and C. (Alternatively, if you decide you want to use a collection of ideas from your three designs, then please make a fourth sketch which shows your final idea, and discuss why you used that one.)</p>\
<p>Here are some hints to improve your design and homework:</p>\
<ul>\
<li>It is <span class="italic">not OK</span> to copy any pictures or images from existing websites or products. No screenshots.</li>\
<li>This is supposed to be a low-fidelity prototype, so you shouldn\'t include photos or fancy overlays in your designs.</li>\
<li>It is a good idea to use a ruler for your paper prototypes, so your lines are neater.</li>\
<li>Try to keep the sketches of all of your screens the correct proportions and the same size. For example, a mobile phone screen vs. a PC screen have very different screen sizes.</li>\
<li>Please put all your pictures in the right orientation in the PDF file. That is, if you scan or take a photo of your screens and they are sideways, rotate them before putting into the final PDF file you turn in so they are all the correct-side up.</li>\
<li>Make sure all of your turn-ins are easy for us to read. This is especially an issue if you take photos rather than a scan.</li>\
</ul>\
<p>Deliverables for PART A:</p>\
    <ul>\
        <li>The first deliverable for PART A is a scan or photo of your 3 (or more) sketches. Be sure to label the different versions so you can differentiate them in your discussion. Each sketch may be one or more pages. If you draw your sketch in color, please use color scanning. If you take a picture of your sketches, please make sure it is easy to read. If you cannot find a way to scan in your design, please let us know -- there is a color scanner in the mail room near the Professor\'s office.</li>\
        <li>The second deliverable is a discussion (e.g., a paragraph) talking about the <span class="italic">differences</span> between the versions. This should be done on a computer, for example in a word processor document.</li>\
        <li>The third deliverable is a discussion (e.g., a sentence or two) about which design you picked for Parts B and C and <span class="italic">why</span> you selected that one. This should be put into the same document.</li>\
        <li>The fourth deliverable is a discussion (e.g., a paragraph) talking about what you <span class="italic">learned</span> from the contextual inquiry of homework 1, and how that is reflected in your design. That is, what in your design is a result of what you learn? This is called "design rationale". This should also be put into the document.</li>\
    </ul>\
    <h4>PART B:</h4>\
    <p>You should now decide what are the <span class="bold">assumptions for the hardware</span> on which your new design will be implemented. If you are doing a webpage or regular computer application, this might be limited to what <span class="italic">screen size</span> you are assuming.  If you are doing a mobile phone, then describe the screen size and resolution you are assuming (note that Android phones, for example, can come with a variety of screen sizes). If you are doing a physical device (like a camera), you should describe assumptions such as whether the interface will be on a touch screen panel on your device (so you will need big, finger-sized buttons), or the interface will only use physical buttons around a display-only screen (<span class="italic">not</span> a touch screen).</p>\
    <p>Note that even if you assume you will have a touchscreen on your design, you will <span class="italic">still</span> be programming and doing the usability evaluation of your interface (in Homework 4) using a regular computer or tablet. Conversely, if you assume your real user interface will be operated with a mouse, when you do the usability evaluation of your paper prototype (in Homework 3), you will tell the users to pretend their finger is a mouse. You should also write down any <span class="italic">other</span> assumptions about your hardware, like whether the screen is color or black and white, whether it is a touch panel or not, whether there are any additional hardware (physical) buttons, etc. (You will decide on what specific buttons and kinds of buttons later.)</p>\
    <p>Next, you should write down the <span class="bold">assumptions about your users</span>. What level of experience do you expect? How familiar with computers will they be? What ages? Are there any other factors about the users that will influence your design or evaluation?</p>\
    <ul>\
        <li>The deliverables for PART B are descriptions of the assumptions about (a) your <span class="bold">hardware</span> and (b) your <span class="bold">users</span>, put into the same document.</li>\
    </ul>\
    <h4>PART C:</h4>\
    <p>Create a <span class="italic">complete</span> prototype of the version of your device that you selected in Part A. You can draw your paper prototype on paper or using simple drawing tools like Visio (PC only), Sketch (Mac only), Illustrator, Photoshop, or even PowerPoint. (It appears that CMU has <a href="https://e5.onthehub.com/webstore/productsbymajorversionlist.aspx?ws=8eeeb837-4e2e-e611-941b-b8ca3a5db7a1&vsro=8&jsenabled=1" target="_blank">a free download of Visio 2019</a>, or else you can try a <a href="https://creative.adobe.com/products/download/illustrator?promoid=Y69SGWKS&mv=other" target="_blank">free trial of Illustrator from Adobe</a>. Or you can use <a href="https://www.cmu.edu/computing/software/all/#A" target="_blank">Adobe Illustrator CC 2017, Photoshop, or other Adobe applications for free on the CMU Computer Lab</a>.) Alternatively, if you want to get a jump on homework 4, you can use a prototyping tool, but do <span class="italic">not</span> create a "click through prototype" yet -- that will be homework 4. But you can use the tool to create your drawings for this part. Good options include: Balsamiq, <a href="https://www.adobe.com/products/xd.html" target="_blank">Adobe XD</a>, OmniGraffle (Mac only), InVision, Axure, etc. No matter which tool you pick or if you draw the prototype for this part by hand, you will turn in a pdf version, and you will print out your prototype and use the paper printout for the usability evaluation in homework 3.</p>\
	<p> Unlike the sketches of Part A, your prototype must be <span class="italic">complete</span>, which means it should have at least a place-holder for <span class="italic">every</span> part of the user interface of the device or website that the user will see. For example, if you were doing a microwave oven, there should be a square on the front panel for every button that would be on the front panel of the final implementation. For all the tasks you will ask the user to do (which should include at least those you did in Homework 1), you should have paper prototypes for all the screens, menus, etc. that the user would see. For parts of the interface that you do not intend to test, you can just make place holders (for example, screens with just titles), or buttons without labels. Note that the level of complexity we are expecting is as described in Homework 0: It should have at least 30 different controls that do different things; for web pages, it should have at least 10 pages, and for desktop applications, it should have at least 5 different screens or dialog boxes.</p>\
    <ul>\
        <li>The first deliverable for PART C is a picture or scan of your new paper prototype. If you use color in your prototype, then you should scan in color. If you have little pieces of paper to represent pop-up menus and so forth, be sure to include each of those in your scan, and label them so we can tell what they are. If you use a computer tool to create your prototype, then create a pdf file of all the elements (pages) of your interface. (It is fine if this is a lot of pages, since we won\'t be printing it; but it is also OK to combine multiple elements on one page -- for example, to put multiple pop-up menus on the same page. Just make sure it is clear what each element is.)</li>\
        <li>The second deliverable for PART C is a short description of what <span class="italic">tasks</span> you will have users do with the device.</li>\
        <li>The third deliverable for PART C is the <span class="italic">actual instructions</span> you will give users to tell them to do those tasks. We want to see what you are planning to say to the users in your usability evaluation. This should go into the document. Note that <span class="italic">it is OK if the second, third and fourth deliverables for PART C are the same as they were for Homework #1</span> -- but you should still repeat them here so we can have everything in one place.</li>\
    </ul>\
    <p><span class="bold">Make a pdf file of all your deliverables, and upload the one file to Canvas.</span></p>\
');