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

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.

0 comments

Post a comment

    Post a comment
    Embed Video
    Edit your comment Cancel

    46 Favorites

    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

    + David MaloufDavid Malouf, 3 years ago

    custom

    6115 views, 46 favs, 0 embeds more stats

    This is the IA Summit 07 pre-conference workshop I more

    More info about this document

    © All Rights Reserved

    Go to text version

    • Total Views 6115
      • 6115 on SlideShare
      • 0 from embeds
    • Comments 0
    • Favorites 46
    • Downloads 0
    Most viewed embeds

    more

    All embeds

    less

    Flagged as inappropriate Flag as inappropriate
    Flag as inappropriate

    Select your reason for flagging this presentation as inappropriate. If needed, use the feedback form to let us know more details.

    Cancel
    File a copyright complaint
    Having problems? Go to our helpdesk?

    Categories