Excitedly go out to buy brand new Apple Super Mouse… Only USB port is on the left. http://nicolebarlaan.wordpress.com/2010/09/16/apples-terrible-design/

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

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

VideoWhiteboard Video http://dl.acm.org/citation.cfm?id=108844.108932

ClearBoard http://tangible.media.mit.edu/project/clearboard/

KinectArms http://www.youtube.com/watch?v=Cz43UAr1nMY

ShareTable http://home.cc.gatech.edu/lana/25 http://www.youtube.com/watch?v=8fupEOc4pYY

MirageTable http://research.microsoft.com/apps/video/default.aspx?id=163426

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

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

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…

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

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

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

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

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

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 http://www.slideshare.net/dianetch/principles-of-visual-design-6647916 Notes from Robin Williams’ book: Non-Designer’s Design Book

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

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.

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

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

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.

Repetition across multiple elements Helps in creating an impression of unity

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.

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.

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.

Proximity in Layout

Proximity in Layout

Proximity in Layout

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).

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?

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.