Merja & Pauli Rapid prototyping & other stuff

2 Outline  Process = UX + Agile ideas  Wireframes -> mock-ups, prototypes  Method: parallel design  Rapid prototyping  Example HTML protyping (Pauli)  General testing method(s): user testing (+ think aloud), walk through, 2

3 Process - UX + Agile ideas 3 Adapting Usability Investigations for Agile User-Centered Design. Desiree Sy. Journal of Usability Studies, Volume 2, Issue 3, May 2007, pp Last retrieved October 4, 2009 from:

4 Usability in Agile - broken apart 4 3 parallel tasks going on: 1.To iterate on designs, usability tests on mock-ups one cycle ahead of developers– after OK, implement 2.Continue contextual inquiry for the future components 3.Usability test the implemented working version

5  Gathering data to refine or hone product and release-level goals – requirements and the needed usability criteria that should be acquired  Result: set of design principles and objectives as well usability criteria to focus on (in more abstract level)  First component features and function  Interaction flow -> operational level 5 Usability in Agile - broken apart

6  Prototypes (i.e., mock-ups): “usability testing” (e.g., the wiki commenting)  The mock-ups may need more cycles themselves than just one  Use colleagues to test the interaction logic  Use developers to comment on the interaction logic (they usually spot inconsistencies or omitted important steps, attributes etc.) 6 Usability in Agile - broken apart

7  Prototyping and usability testing for Cycle 3 designs using the requirements information gathered in Cycle 1.  Requirement elicitation for Cycle 4.  Usability testing the implemented working version from Cycle 1 in field  And so it continues 7 Usability in Agile - broken apart

Wireframes -> mock-ups, prototypes

9  Prototypes can range from extremely simple sketches (low-fidelity prototypes) to full systems that contain nearly all functionality of the final application (high-fidelity prototypes)  Prototypes are cheap, must be created in a short amount of time  For large projects, they are often mandatory.  Righetti Xavier(2006). “What is rapid prototyping ? Study of Prototyping Tools for User Interface Design”. Bachelor Thesis

10 Wireframes -> mock-ups, prototypes

11 KP-environment/mock-ups - example:Tailored View drawing (version 6) 11

12 KP-environment/mock-ups - Tailored View digital version 6.1

13 KP-environment/mock-ups - Tailored View digital version 6.2

14 KP-environment/mock-ups - Tailored View digital version 6.2a

15 KP-environment/mock-ups - Tailored View digital version 6.2b

16 KP-environment/mock-ups - Tailored View digital version 6.3

17 KP-environment/mock-ups - Tailored View digital version 6.3

18 Concept design + planning  Paper prototypes or other mock-ups are used to clarify requirements and enable draft interaction designs, logic design and screen designs to be very rapidly simulated and tested  These can be made out of paper, cardboard, line drawing in vector graphics programs, as bit map images, from collages, etc 18

19 Benefits of prototyping 19  Potential usability problems can be detected at a very early stage in the design process before any code has been written.Communication between designers and users is promoted.(Paper) prototypes are quick to build / refine, thus enabling rapid design iterations.Only minimal resources and materials are required.

20 Horizontal / vertical 20

21 Stages in design  Concept Design: Every possible approaches are sketched out.  The validity of each sketches is verified following the usability requirements and the goals agreed.  At the end, the best approach is selected.  Interaction Design: In this step, the structure of the UI must be set by naming interaction flows. Method: e.g. Affinity Diagramming, each action can be written on a Post-It note, and organised in clusters.  The Post-It notes are then rearranged to simplify user tasks.  Screen Design: Creating rough designs of the screens’ structure.  These layouts are linked together and usability test is performed with a user.  Testing: A user is asked to follow a realistic scenario/tasks on the sketched out prototype. 21

Parallel design

23 Parallel design   hods/parallel.htm hods/parallel.htm   parallel.html parallel.html  GUI TIPS: ips3.asp ips3.asp 23

24 Design Libraries  Patterns.aspx erns.wiki/index.php?title=Main_Page Patterns.aspx erns.wiki/index.php?title=Main_Page 24

HTML fast phase testing – Instant

26 Example HTML (Pauli) 26

Testing

28 Using things is Easy

29 Testing with prototypes 29

30 What methods do we have...  Competitor analysis:  Interviews:  User observation:  Evaluate existing system:  Heuristic evaluation:  Evaluate prototype:  Diagnostic evaluation:  Performance testing:  Subjective Assessment: 30