102759 Software Design

Problems on user interface design: process (2)

Joan Serrat

November 25, 2015

1. ? ? ?? Strange as it may seem, POPApp http://popapp.in is an Android and IOSapplication for paper prototyping, that is, performing user testing on paper prototypes.Its purpose is to replace the computer person in user testing for the actual smartphone,thus achieveing a greater realism: the user interacts with a paper prototype, only thatnot with paper sketches but with the phone itself. The idea is very simple but original:you draw your whole paper prototype (figure 1a) and then take pictures of it, one perdrawing (figure 1b). The app allows to insert hot spots on the images (figures 1c-e) that,when clicked, link the different screens. At the end, you can “run” the paper prototypeon your mobile phone (figure 1f). See http://popapp.in for a demo.

Create the prototype of your time tracker with POPApp. Deliver screenshots (or someother representation) showing it.

2. ? ? ?? The purpose of sketching or wireframing tools is to show clients, users and projectmanagers how the UI would be without actually constructing it. They generate lo-fi andhi-fi sketches or prototypes. Also, some tools support interactivity pretty well and canthus be employed also for user testing.

You can choose among WireframeSketcher http://wireframesketcher.com/, PencilProject http://pencil.evolus.vn (you’ll need to download the Android 4 stencil, aset of control templates and gestures icons), or JustInMind http://www.justinmind.

com/prototyper.

The two first are able to create low-fi sketches and mockups with some support to inter-action and perhaps are easier than the third. The last one is a powerful tool supportingboth lo-fi and hi-fi mockups, you can simulate not only clicks but a number of gestures(pinch, swipe. . . ) and the result can be a pdf file, a web page (figure 2) or even an app soyou can test it in an actual mobile phone. You can read the article Product Review: Mo-bile Prototyping and Testing with Justinmind http://www.uxmatters.com/mt/archives/2012/

10/product-review-mobile-prototyping-and-testing-with-justinmind.php for a quick review,and play with an example of an Android app mockup at http://justinmind.com/

prototyper/examples

There’s a two weeks license, fully functional version for WireframeSketcher, Pencil Projectis free and there’s a limited functionality free version of JustinMind (as of December2013).

We are asking you to build a mockup (simulated interface, not coded) for some functionalpart of the interface (like generating a report or create plus start and stop a task) ac-cording to your previous sketches, as if it was intended to show to the project manager, a

1

(a) (b)

(c) (d)

(e) (f)

Figure 1: Building a “paper” prototype with POPApp

client, or used for formative (user) testing. Thus, interactivity support is a must. Deliverit in some viewable format by e-mail but print also some screenshots.

Once you have done your mockup, what did and didn’t you like of the chosen tool ? wasit easy to learn ? how much time did it take to learn and complete the mockup ?

2

Figure 2: Mockup prototype made with Justinmind as web pages

3