1. Excitedly go out to buy brand new Apple Super Mouse… Only USB port is on the left.

2. Prototyping 3 CPSC 481: HCI I Fall 2012
Anthony Tang, with acknowledgements to Julie Kientz, Saul Greenberg, Nicolai Marquardt, Ehud Sharlin

3. Overview
A few more high-fidelity prototypes from research Integrating prototypes in an organization Visual Design - CRAP

4. VideoWhiteboard Video

5. ClearBoard

6. KinectArms

7. ShareTable

8. MirageTable

9. High Fidelity Prototypes in Communication Systems
Prototypes were built as a means to express an understanding of what was necessary in a communications system
» hand gestures in design collaboration
» role of eye contact in collaborative work
» role of gesture height in tabletop collaboration
» role of “real” artefacts | ease of use/establishing connection
» potential role of virtual objects

10. High Fidelity Prototypes in Communication Systems
Different contexts  different needs
» VideoDraw/VideoWhiteboard/ClearBoard: “design” scenarios, drawings/sketches
» KinectArms: tabletop work/play scenarios
» ShareTable: children, separated families
» Wilson: cool-dude virtual artefacts
Notice: each prototype serves to illustrate the particular idea

11. We will return again to research work later in the term
We will return again to research work later in the term. Now for something totally different…

12. Prototypes in an Organization
Question: How do we integrate the philosophy of prototyping into an organization?
Three methods for managing this integration:
Evolutionary
Modular (incremental)
Throw-away

13. Evolutionary Approach to Prototype Integration
Design prototype
Implement prototype
Test prototype
Iteratively change the prototype to incorporate changes
Eventually, the reworked prototype becomes the final system
System

14. Modular (Incremental) Approach to Prototype Integration
Design component
Implement component
Test component
Build the system as separate modules/components
Each module is designed, prototyped and build separately before being combed into a final system
Design component
Implement component
Test component
Design component
Implement component
Test component
System

15. Throw-away Approach to Prototype Integration
Design prototype
Implement prototype
Test prototype
Prototype is used to get rapid feedback (i.e. to learn lessons)
Prototype is built, tested, and deployed (or discarded)
Design prototype
Implement prototype
Test prototype
Design prototype
Implement prototype
Test prototype

16. Integrating Prototypes in Organizations
evolutionary
» prototype is altered to incorporate design changes
» eventually becomes the final product
2. modular (incremental)
» product is built as separate components (modules)
» each component is prototyped and tested, then added to final system
3. throwaway
» prototype serves to reveal user reach, then discarded
» creating prototype should be rapid, otherwise can be expensive
-- Many large systems (e.g. Twitter/Facebook) can be considered to be built with an evolutionary approach (timeline feed): modern SCRUM techniques
-- On the other hand, many of the feature areas are often designed somewhat independently of one another (Ebay: automobiles site is independent of rest of site; Yahoo: cars, mail, calendar, etc.):: traditional SENG
-- Modular is suitable for very large products with a lot of component pieces. The downside is trying to come up with a unifying interaction metaphor or theme. The U of Calgary website (as a whole) is a good example. There are published guidelines, etc., but these are rarely followed.
-- HCI research often gets to take a throw-away approach. This is more suitable for products where the main learnings are in the process of development, rather than being the end-goal itself

17. Visual Design
Great visual design is part art, part flare, and something you get from many years of Design school training
Good visual design is comprised of four simple elements: CRAP
» Consistency
» Repetition
» Alignment
» Proximity
Notes from Robin Williams’ book: Non-Designer’s Design Book

18. Visual Design: Consider a block of text (document)
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum text
Lorem ipsum—idea is to have “non-readable text” so people don’t get distracted by the text itself, and can focus on properties of its layout—font, shape, orientation, density, etc.
Normal distribution of text
Dummy text used in printing and typsetting industry
Been around since 1500s
Theory of ethics

19. Visual Design: Contrast
Differences in size, shape or colour help to distinguish elements from one another Use these sparingly, and where noticing something is a desirable thing
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Contrast: Contrast refers to any difference of size, shape, or color used to distinguish text (or other elements, though here we’re focusing on text) from other pieces of text. The use of bold or italics is one common form of contrast — the difference in shape makes the bolded or italicized text stand out from the surrounding text. Increasing the size of headers and titles, or using ALL CAPS or smallcaps are other ways of distinguishing text. These techniques only work if used sparingly; a document typed in all capital letters has less contrast than one typed normally, so is harder, not easier, to read.

20. Contrast in Posters
This poster does not have a lot of contrasting elements

21. Contrast in Posters This one does.
There’s a balance we have to find, but contrast helps keep something interesting

22. Visual Design: Repetition
Repeated text: bad Repeated design elements: absolutely necessary Repetition helps a reader understand aspects/components that are similar or play a similar role
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Repetition: Repetition in your text is bad; repetition of your design elements is not only good but necessary. Once you’ve decided on a size and typeface for second-level headers, for instance, all second-level headers should look the same. For most documents, two or maybe three fonts — leaning heavily on one for all the body text, with the other two for headers and maybe sidebars — are enough. The same bullets should be used on every bulleted list. Information that appears on every page should appear in the same place on every page. Design elements — like horizontal rules between sections or corporate logos — should appear the same whenever they are used throughout the document. Repetition of design elements pulls the document together into a cohesive whole, and also improves readability as the reader comes to expect text that looks a certain way to indicate certain qualities (e.g. the start of a new section, a major point, or a piece of code.

23. Repetition across multiple elements
Helps in creating an impression of unity

24. Visual Design: Alignment
Visual alignment helps to provide a context for contrast “Center” is one that most designers avoid almost at all cost, as it does not help to guide a reader’s eye in a meaningful way
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Alignment: Alignment is crucial not just to the cohesive appearance of your document but to the creation of contrast for elements like bulleted lists or double-indented long quotes. Your document should have a couple of vertical baselines and all text should be aligned to one of them. Unaligned text floats mysteriously, forcing the reader to figure out its relation to the rest of the document. Centered text is particularly bad (and is a novice’s favorite design trick). One immediate step you can take to vastly improve the appearance of your documents is to remove the “center” button from your software’s toolbar (or, less drastically, just ignore it). It is rarely self-evident what centering is meant to communicate, and too much centered text creates a sloppy, undisciplined look.

25. Alignment in Posters
These visual guides are not visible in the final print, but notice how the alignment and spacing guides how you look at the information.

26. Visual Design: Proximity
Information that complements one another should be close
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Proximity: Pieces of information that are meant to complement each other should be near each other. One great offender here is business cards and ads in local newspapers, where the name, address, and phone number are all scattered around the ad or card (for example, in the corners). Your reader shouldn’t have to seek out the next logical piece of information; rather, use proximity to make sure that the next piece of information a reader sees is the next piece of information they should see.

27. Proximity in Layout

28. Proximity in Layout

29. Proximity in Layout

30. All together now…
» Different element types have different font/size face. (contrast)
» A common pattern of “start of phrase” and “information” occurs. (repetition)
» Information is nicely aligned to graphic.(alignment)
» Information that is related is placed together (proximity).

31. Let’s take a look at this example. Where are some elements of CRAP
Let’s take a look at this example. Where are some elements of CRAP? And, where are some elements that aren’t really CRAP? Are these good? Bad?

32. Visual Design: Final Notes…
CRAP principles work together: repetition and alignment create a “normal” state that contrast works against Repetition and proximity help provide familiarity, and easy-to-learn interfaces Goal: take the work of “understanding the interface” out of a user’s interactions with your interface. Instead, the user should be focused on “getting work done,” with your interface.