• Save

Loading…

Flash Player 9 (or above) is needed to view presentations.
We have detected that you do not have it on your computer. To install it, go here.

Like this presentation? Why not share!

Like this? Share it with your network

Share

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

on

  • 14,018 views

This is the IA Summit 07 pre-conference workshop I gave on behalf of IxDA. It combines basic IxD theory with specific instructions for best design theory for RIAs.

This is the IA Summit 07 pre-conference workshop I gave on behalf of IxDA. It combines basic IxD theory with specific instructions for best design theory for RIAs.

Statistics

Views

Total Views
14,018
Views on SlideShare
14,009
Embed Views
9

Actions

Likes
62
Downloads
0
Comments
0

3 Embeds 9

http://www.slideshare.net 7
http://www.techgig.com 1
https://www.linkedin.com 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

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

  • 1. 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.
  • 2. 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)?
  • 3. 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.
  • 4. Interaction Design
  • 5. 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
  • 6. 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.
  • 7. Design (Big ‘D’) “I design software” “I’m wearing designer jeans” “interaction design” “design school” “That design looks cool”
  • 8. 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
  • 9. 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
  • 10. Defining Rich Internet Applications
  • 11. 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.
  • 12. 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)
  • 13. 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
  • 14. 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
  • 15. 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
  • 16. Design process
  • 17. 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
  • 18. Design-ING != conceiving, creating, producing • Formalized process • • Studio = exploration + formal critique process • Divergent unrefined thinking followed by • Evaluation, testing and reflection
  • 19. 3 Basic Steps to Designing Interactions Sketching • Framework and Language • Refinement •
  • 20. Sketching Rapid & Rough Multipicity Communication CONCEPTS What do you see here?
  • 21. 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/
  • 22. Framework and Language Create Structure Navigation Language • Object • Action • Modifiers
  • 23. Refinement Details Behavior Exceptions States Messaging
  • 24. 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 •
  • 25. 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
  • 26. 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... •
  • 27. BREAK – 15min. Enjoy!
  • 28. Why do richness?
  • 29. Why add richness? Aesthetics Enjoyment Engagement Complexity management Too hard Too much
  • 30. 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.
  • 31. Location, Location, Location That works for real estate … … for Interaction Designers … Context, Context, Context
  • 32. 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!
  • 33. Learnability Understanding where I was and where I’m going. Having the RIGHT information at the right time, with the right supporting information.
  • 34. 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
  • 35. 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
  • 36. 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.
  • 37. Playful Using your hands in multiple ways Novelty through animation and discoverability Engagement leads to productivity
  • 38. “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.
  • 39. Patterns & Principles
  • 40. 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
  • 41. 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
  • 42. 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
  • 43. interaction. feedback. information. page Interaction Info Info Feedback refresh boundary Pattern content provided by Bill Scott, Yahoo! © 2006
  • 44. interaction + feedback + information = richness Interaction Info Feedback Pattern content provided by Bill Scott, Yahoo! © 2006
  • 45. design principles for richness Interaction Feedback Info Pattern content provided by Bill Scott, Yahoo! © 2006
  • 46. principle. make it direct. pattern. drag & drop. pattern. inline editing. pattern. in-context tools. Pattern content provided by Bill Scott, Yahoo! © 2006
  • 47. 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
  • 48. make it direct Inline Editing Use inline forms where possible Use lightweight popups for ancillary information Pattern content provided by Bill Scott, Yahoo! © 2006
  • 49. make it direct In-context tools Same as context menus Only good for single objects Can actually slow you down Pattern content provided by Bill Scott, Yahoo! © 2006
  • 50. principle. keep a light footprint. pattern. in page action. pattern. rating an object. pattern. remembered collections. Pattern content provided by Bill Scott, Yahoo! © 2006
  • 51. 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
  • 52. 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
  • 53. cross borders reluctantly Rethink process flows It’s the user’s mental model, not the page model Every page jump is a mental speed bump Pattern content provided by Bill Scott, Yahoo! © 2006
  • 54. cross borders reluctantly Re-think paging Use scrolling for “owned” data Watch out for dual scroll bar issue Hybrid of paging & scrolling Pattern content provided by Bill Scott, Yahoo! © 2006
  • 55. 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
  • 56. cross borders relunctantly Use in-context expands For editing part of a collection Need to see surrounding context For managing content modules Pattern content provided by Bill Scott, Yahoo! © 2006
  • 57. cross borders relunctantly Use real-estate creatively Use slideouts Use in-place zoom Remember the backstage Pattern content provided by Bill Scott, Yahoo! © 2006
  • 58. key principle prefer direct, lightweight, in-page interaction Pattern content provided by Bill Scott, Yahoo! © 2006
  • 59. feedback principles Interaction Feedback Info Pattern content provided by Bill Scott, Yahoo! © 2006
  • 60. 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
  • 61. 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
  • 62. 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
  • 63. give live feedback Shape user perception Make time perceive to move faster Make application to be responsive Pattern content provided by Bill Scott, Yahoo! © 2006
  • 64. give live feedback Prevent errors before-hand Ounce of preventive design worth pound of error-handling Use live-previews Look before you leap Pattern content provided by Bill Scott, Yahoo! © 2006
  • 65. 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
  • 66. 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
  • 67. offer an invitation Bridge the new with the old Hyperlinks as actions Reveal with hovers Drop down clues Pattern content provided by Bill Scott, Yahoo! © 2006
  • 68. offer an invitation Make it inviting Treat it as a welcome mat Use hover, cursor, tooltip, and page Keep the noise down Pattern content provided by Bill Scott, Yahoo! © 2006
  • 69. 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
  • 70. show transitions Speak to the brain Understanding attention processing Sending the wrong message Pattern content provided by Bill Scott, Yahoo! © 2006
  • 71. 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
  • 72. key principle Provide invitations beforehand, transitions during, and feedback after interaction Pattern content provided by Bill Scott, Yahoo! © 2006
  • 73. feedback principles Interaction Feedback Info Pattern content provided by Bill Scott, Yahoo! © 2006
  • 74. principle. think in objects. pattern. shareable object. Pattern content provided by Bill Scott, Yahoo! © 2006
  • 75. 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
  • 76. key principle Think in objects, tie information to interactivity Pattern content provided by Bill Scott, Yahoo! © 2006
  • 77. 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
  • 78. Final Exercise
  • 79. 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
  • 80. 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 …
  • 81. 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.
  • 82. 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?”
  • 83. Questions ? Resources: Dave’s Blog: www.synapticburn.com