Interaction Design Association (IxDA) Symposium: Interaction Design (IxD) for Rich Internet Applications (RIAs)

Interaction Design Association (IxDA) Symposium: Interaction Design (IxD) for Rich Internet Applications (RIAs) - Presentation Transcript

IxDA Symposium Designing RIAs: A Workshop on Interaction Design Theory & Practice David Malouf Vice President IxDA Sr. Designer, Motorola Enterprise Mobility IA Summit 2007 23-Mar-2007 David Malouf © 2007. All rights reserved.

Let’s Learn about each other My background Web Software Enterprise Code Design Your background You do Web? You do Software? You are a designer? Product (Innie), Marketing Service (Outtie), Consulting Services (Outtie)?

The Morning Section 1 What is Interaction Design? How is it separate from other UX disciplines? – 10min. What is a Rich Internet Application? – 30 min. Design Process – 30min. Sketch, Framework, Refine Tools Exercise – Sketching – 30min. Break Section 2 Why do Rich? – 20min. Patterns & Principles – 45min. Putting it Together – Main Exercise – 45min.

Interaction Design

Defining Interaction Design (IxD): A design discipline dedicated to: Defining the behavior of artifacts, environments, and systems (i.e., products) …and therefore concerned with: Anticipating how use of the products will mediate human relationships and affect human understanding The Interaction Design Guiding the form of products Association’s (IxDA) definition of IxD can be to the extent that it found at http://define.ixda.org/ influences/is influenced by their behavior and use

Why IxD? Interactive digital products require and respond to human input, and change their own content or behavior based on that input. Form, behavior, and content must all be defined. Traditional design disciplines do not have methods that address complex behavior. Non-design disciplines are not geared toward generating desirable solutions.

Design (Big ‘D’) “I design software” “I’m wearing designer jeans” “interaction design” “design school” “That design looks cool”

What is “design”? Design as noun (I like that “design”) Is the result of a conceived idea, whether or not it was actually “designed” Design as verb (I “design” software) A process of creativity Non-linear Assumes there is more than one elegant solution to any single problem Considers the measurable and the aesthetic

Making Design (verb) Work Divergent thinking Skew, bend, melt, tear … change! Evaluation is separate from Ideation Put your judge on hold Multiple minds Model, Model, Model Communicate the details Taking the road least traveled can bring you back to the freeway Process ideas in disconnected ways Connect disconnected ideas in separate exercise

Defining Rich Internet Applications

What is a Rich Internet Application (RIA)? Give credit, where credit is due … Macromedia (today Adobe) coined the term “Rich Internet Application” to describe the growing trend of adding media richness (more motion internal to a single page view) due to the creation of applications using their product Flash MX. The simple answer: Multi-changing areas – “page redefined” Connected Locally Distributed Intelligence Moving – cinematic effects Extended – add to the browser Local access –drives, peripherals, systems.

Tactically what does this mean? Emulating desktop behaviors Cinematic Effects Client-side (in browser?) … Data management Business logic management Re-definition of the “page” metaphor Connection to local machine (optional)

Emulating Desktop Behaviors Non-HTML controls Drag & Drop Accordion Menu & Tool bars Combo box Spinner box Windows & Wizards Sliders Panels Keyboard actions Context Menus Trees Dialogs Form validation Google Spreadsheet Gliffy

Cinematic Effects: Animation for added context Movement of any type on a screen Change of display state even without movement: Visibility Transparency “zoom” “frame” Google Maps Scrybe

What happens to our page? “There is no [page].” - Neo “There is no page; only pathways” -- Emily Chang & Max Kiesler of ideacodes A page is a metaphor of a moment of uninterrupted context Kayak

Design process

Designing vs. Communicating vs. Documenting Designing - conceive and idea through a design • process. Communicating • • Get buy in • Collaborate to ensure proper implementation Documenting • • Archive ideas • “Hit by a bus” contingency

Design-ING != conceiving, creating, producing • Formalized process • • Studio = exploration + formal critique process • Divergent unrefined thinking followed by • Evaluation, testing and reflection

3 Basic Steps to Designing Interactions Sketching • Framework and Language • Refinement •

Sketching Rapid & Rough Multipicity Communication CONCEPTS What do you see here?

Bill Buxton on Sketch vs. Prototype Sketch Prototype Invitation Attendance Suggestion Description Question Answer Propose Test Destructive Constructive Taken from the notes of J. Spool on BrainSparks Blog of a talk given by Bill Buxton to Boston- SIGCHI. http://www.uie.com/brainsparks/2006/11/16/buxton-on-sketching-and-experience-design/

Framework and Language Create Structure Navigation Language • Object • Action • Modifiers

Refinement Details Behavior Exceptions States Messaging

Designing Behavior Time: Behavior cannot be static • It is not “flow” between contexts • Happens within a context • Multiple states • Can incorporate fluid motion • Hard to communicate “intra-contextual” behaviors using static • renderings More difficult to test •

Sample Process Sketch on paper/whiteboard • Scan/Photograph into digital environment • Trace (or re-draw) using computer tool • Use “blocking” tool to define framework • For further refinement, fill in blocks with higher-fidelity drawing • tool Add interactivity so behavior can be experience, evaluated, tested • and reflected upon

Simple Design Exercise Problem • • I need a device that allows a user to move & select objects, text and graphics in a graphical interface Let’s work through this... •

BREAK – 15min. Enjoy!

Why do richness?

Why add richness? Aesthetics Enjoyment Engagement Complexity management Too hard Too much

Humans are Emotional Don Norman’s Emotional Design Your emotional state when using a product will effect not just your enjoyment of it, but your effectiveness (at least perceptual) with it. “Attractive Things Work Better” is the very title of the first chapter.

Location, Location, Location That works for real estate … … for Interaction Designers … Context, Context, Context

Intuitive ? Creating an intuitive application is all about matching expectations of the user. Understanding the context of use is the best way to come as close as possible to do that. The desktop is a constant. The Operating System is the heart and soul of the desktop experience. The similarities between major operating systems are closer than there differences. It all started at PARC!

Learnability Understanding where I was and where I’m going. Having the RIGHT information at the right time, with the right supporting information.

Trust Using windowing enhances trust I know that I really didn’t leave I know when I’m done I’ll be going back to where I started Trust allows for more risk taking; which leads to FINDING

Managing Complexity Discoverability Use scent to guide people Hide complexity to avoid overwhelming people with too much content Richness allows for fluidity and better invitations

Power of Movement Sometimes contrasts in color, shape, alignment are not enough Moving objects catch our eyes and our mind’s attention Time is perception Motion (and change) = activity Perception of system working if not faster, at least working for my benefit.

Playful Using your hands in multiple ways Novelty through animation and discoverability Engagement leads to productivity

“Pliability” Term coined by Jonas Löwgren of University of Malmo in Sweden Relates to the tightness of an interaction model between the user’s action and the device’s response in both time and type. Quickness & appropriateness together lead to higher pliability Best example on the web … Mapping Software. Best example in a device … iPod click-wheel.

Patterns & Principles

Origin of Patterns A Pattern Language, Alexander, 1977 Dissatisfied with sterile, impersonal design Defined it as Solution to a problem in context Captured Situation, competing constraints, canonical solution Examples Couples Realm House for a Couple Sitting Circle, Marriage Bed Pattern content provided by Bill Scott, Yahoo! © 2006

current patterns Breadcrumbs. Module Tabs. Navigation Tabs. Auto Complete. Pagination. Item Pagination. Search Pagination. Ratings and Reviews. Architecture of a Review. Rating an Object. Writing a Review. Drag and Drop. Drag and Drop Modules. Transition. Dim. Brighten. Cross Fade. Contract. Expand. Fade In. Fade Out. Move. Self-Healing. Slide. Highlight. Invitation. Cursor Invitation. Drop Invitation. Tool Tip Invitation. Hover Invitation. Pattern content provided by Bill Scott, Yahoo! © 2006

rich patterns Drag and Drop. Drag and Drop Modules. In Page Editing. In Page Custom Editing. Direct State Editing. Grid Cell Editing. Inline Custom Editing. Inline Tag Editing. Popup Custom Editing. Slide-out Custom Editing. Inline Text Editing. Persistent Portals. Inline Reordering. Indication. Busy Indication. Cursor Busy. In Context Busy. In Context Progress. Inline Status. Auto Complete. Balloon Error Tip. Deferred Content Loading. Dynamic Goal. Narrowing Choices. Refining Search. Live Search. Dynamic Filter. Invitation. Cursor Invitation. Drop Invitation. Tool Tip Invitation. Hover Invitation. Detail Zoom. Opacity Focus. Configurable Module - Faceplate. Configurable Module - Flip It. Configurable Module - Inline Configure. Configurable Module - Slide Out Drawer. Slide Out. Flip. Opacity Fade. Endless Scrolling. Expandable Paging Boundary. Fresh Content. Hover Detail. In Place Drill Down. Inline Assistant. Inline Validation. Validate Then Suggest. On Demand Refresh. Periodic Refresh. Resizable Modules. Scrolling Modules. Auto Save. In Context Tools. Remembered Collection. Remembered Preferences. Auto Form Fill. Rating an Object. Transition. Brighten Transition. Cross Fade Transition. Dim Transition. Expand Transition. Fade In Transition. Fade Out Transition. Flip Transition. Move Transition. Self- Healing Transition. Collapse Transition. Slide Transition. Rich Internet Object. Available. Selected. Pattern content provided by Bill Scott, Yahoo! © 2006

make it direct Use Drag & Drop where appropriate Not for simply setting an attribute Don’t construct artificial visual constructs Have clear targets for grabbing and dropping Good for layout changes Requires transitions Pattern content provided by Bill Scott, Yahoo! © 2006

keep a light footprint Design for engagement Remove the “pain points” Shorten the path Use invitations & feedback Keep actions immediate Treat it like an impusle aisle Theory of fun Use hover, blur, focus; avoid heavy events Pattern content provided by Bill Scott, Yahoo! © 2006

principle. cross borders reluctantly. pattern. on-demand scrolling. pattern. in-context expand. pattern. inline assistant. pattern. hover details. pattern. lightweight popup + lightbox. Pattern content provided by Bill Scott, Yahoo! © 2006

cross borders relunctantly Use Overlays For more information Replace page transition When editing an individual, more complex item Be symmetrical Try not to disturb the page Pattern content provided by Bill Scott, Yahoo! © 2006

principle. give live feedback. pattern. live suggest. pattern. periodic refresh. pattern. auto complete. pattern. busy indicator. pattern. live previews. Pattern content provided by Bill Scott, Yahoo! © 2006

give live feedback Keep the goal in mind Design for relevancy Is it narrowing or distracting? Use feedback to boost confidence Let the user iterate where possible Pattern content provided by Bill Scott, Yahoo! © 2006

give live feedback Keep feedback focused Use laws of proximity in context feedback Respect feedback bandwidth Reveal relevance just-in-time Avoid side-noise (periphial distractions) User Nuance Pattern content provided by Bill Scott, Yahoo! © 2006

principle. offer an invitation. pattern. hover invitation. pattern. drop invitation. pattern. tour invitation. pattern. tooltip invitation + hover invitation + cursor invitation. Pattern content provided by Bill Scott, Yahoo! © 2006

offer an invitation Discoverability No easy answer Use the hover to reveal interaction Use the familar to teach the new Tours are generally a band-aid Can’t flag all interactions Pattern content provided by Bill Scott, Yahoo! © 2006

principle. show transitions. pattern. fade transition + self-healing transition. pattern. slide transition. pattern. zoom box. pattern. active spotlight. Pattern content provided by Bill Scott, Yahoo! © 2006

show transitions What you can communicate... Speed up time Slow down interaction Show state change Show relationships between objects Focus attention Keep it sane “Cut it in-half” rule of thumb Use “contrast knob” approach Don’t overuse Pattern content provided by Bill Scott, Yahoo! © 2006

tie information to interactivity pattern. multi-variate views. Think “deeper interaction” Multi-variate data Interesting relationships Just-in-time information Pattern content provided by Bill Scott, Yahoo! © 2006

key principles for richness Prefer direct, lightweight, in-page interactions Interaction Provide invitations beforehand, Feedback transitions during and feedback after interaction Think in objects and Info tie information to interactivity Pattern content provided by Bill Scott, Yahoo! © 2006

Final Exercise

Exercise: Criteria From Section 1 Criteria for the design Application Service (Hosted) Infinite Audience Business-to-Business community File Management System Moving lots of files Collaborative Media Centric Criteria for Development Old-school software engineering; Highly formally educated group

Exercise: Moving forward Need to share corporate media objects across different enterprises Need to collaborate on these objects Annotate Version Append Need to publish out to 3rd parties Don’t worry we aren’t doing this whole application …

Exercise: Annotate Design a set of screens that make up one page Displays both a list objects and single object 1. Allows the user to comment on that object 2. Track commenting 3. Annotate on media directly 4. Create a collection and “send” that collection 5.

Things to think about Manage complexity through progressive presentation Motion aids learnability Prirotize information and tasks within a single context “Do I need a new context?” “Why?” “Why not?” “What is the nature of my data for this context?”

Questions ? Resources: Dave’s Blog: www.synapticburn.com