Application and UX Design For Large Data Sets<br />Taylor Bastien |  Senior Systems Analyst, 4Point<br />
Who Am I?<br />My name is Taylor Bastien<br />I’m a senior software consultant at 4Point, in Ottawa, Canada<br />I have a ...
Words of wisdom<br />3<br />You can’t take calculus! You’re in Arts, you’ll fail.<br />Former Housemate<br />
UX and Software Design<br />4<br />User Experience Design<br />The practice of conceiving interactive experiences maximizi...
UX and Software Design<br />5<br />Software Design<br />The practice of conceiving software that is efficient, maintainabl...
UX and Software Design<br />6<br />Software Design<br />The practice of inventing software that is efficient, maintainable...
Words of wisdom<br />7<br />[W]e’ve tried to be at the intersection of technology and liberal arts. We make things that ar...
8<br />When<br />Worlds<br />Collide!<br />
Two Worlds – Flex RIAs With LCDS<br />9<br />Client Side<br />Flash Player / AIR Runtime<br />Multi-platform runtime for d...
Two Worlds – Flex RIAs With LCDS<br />10<br />Server Side<br />Java, .NET, PHP, ColdFusion<br />ADEP (LiveCycle) Data Serv...
Two Worlds – Flex RIAs With LCDS<br />11<br />Client Side<br />Server Side<br />Powerful<br />Fast<br />Adaptable<br />Exp...
Too Much Information?<br />12<br />Our Challenge:<br />Create enterprise applications that deal in large amounts of inform...
Intro to Information Density<br />Information Density (or “ID”) is defined as follows:<br />The quantity of visible node i...
Words of wisdom<br />14<br />I didn’t have time to write a short letter, so I wrote a long one instead.<br />Mark Twain<br />
How We Process Information<br />15<br />Our minds and senses are incredibly powerful at filtering information, subconsciou...
How We Process Information<br />16<br />3<br />
Intro to Information Density<br />17<br />At what point does a little more information become way too much information?<br...
Intro to Information Density<br />18<br />At what point does a little more information become way too much information?<br...
Intro to Information Density<br />19<br />At what point does a little more information become way too much information?<br...
Intro to Information Density<br />20<br />At what point does a little more information become way too much information?<br...
Intro to Information Density<br />21<br />At what point does a little more information become way too much information?<br...
Key Information Density Challenges<br />22<br />At what point does a little more information become way too much informati...
Intro to Information Density<br />23<br />At what point does a little more information become way too much information?<br...
Key Information Density Challenges<br />24<br />At what point does a little more information become way too much informati...
Empower Your Users<br />25<br />We know that different users process information differently<br />We also know that it can...
Empower Your Users<br />26<br />Provide your users some discretion within your determined Information Density “Sweet Spot”...
Eliminate or Hide Useless Information<br />27<br />Individuals know what info they need and for what purpose they need it<...
Aggregate, Condense and Refine Information<br />28<br />It is easier to read, assimilate and work with large amounts of in...
Aggregate, Condense and Refine Information<br />29<br />4<br />
Tying It All Up<br />There is a point of diminishing returns as ID increases.<br />Because all users and situations are di...
31<br />When<br />Worlds<br />Collide!<br />with Taylor Bastien<br />@RIAGrande<br />
32<br />Turn in your surveys for a chance to WIN!<br />Hand in your surveys to the room monitors<br />One survey per sessi...
References<br />1 - http://hcil.cs.umd.edu/trs/98-13/node126.html<br />2 - http://www.sciencemag.org/content/332/6025/60<b...
When Worlds Collide: UX Design of Data-Centric Apps
Upcoming SlideShare
Loading in …5
×

When Worlds Collide: UX Design of Data-Centric Apps

1,274 views

Published on

When skilled software and UX designers work in harmony, users win. By bridging the cultural divide between coder and designer, we can release their creative strengths and develop useful, usable Rich Internet Applications.

In this presentation (originally given at Adobe MAX 2011), we delve into how this principle finds its expression in the development of data-heavy enterprise application development using Flex.

Please note that the original videos embedded in this presentation, as well as all application demos have been lost. However, you can watch the original screen cast (with videos and demos) here: http://t.co/ic1kKjyR

Published in: Technology
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,274
On SlideShare
0
From Embeds
0
Number of Embeds
19
Actions
Shares
0
Downloads
0
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide
  • i.e. if a star is counted as a single bit of information, that’s a galaxy of information for every person in the world
  • When Worlds Collide: UX Design of Data-Centric Apps

    1. 1. Application and UX Design For Large Data Sets<br />Taylor Bastien | Senior Systems Analyst, 4Point<br />
    2. 2. Who Am I?<br />My name is Taylor Bastien<br />I’m a senior software consultant at 4Point, in Ottawa, Canada<br />I have a dual role as both a User Experience Designer and a Technical Architect, depending on the project<br />I have a bachelor’s degree in Arts and one in Computer Science<br />I am a contributor to UXMagazine (UXMag.com) and an Adobe Certified Expert (ACE) in Flex and a CertifiedJavaProgrammer<br />What’s 4Point?<br />We’re a company of about 50 people and an Adobe Business Partner<br />Our clients include Fortune 500 companies and governments of all levels, spanning North America and into the UK and Japan<br />2<br />
    3. 3. Words of wisdom<br />3<br />You can’t take calculus! You’re in Arts, you’ll fail.<br />Former Housemate<br />
    4. 4. UX and Software Design<br />4<br />User Experience Design<br />The practice of conceiving interactive experiences maximizing user comfort, pleasure, confidenceand productivity<br />Software Design<br />The practice of inventing software that is efficient, maintainable, robust and functionally complete<br />
    5. 5. UX and Software Design<br />5<br />Software Design<br />The practice of conceiving software that is efficient, maintainable, robust and functionally complete<br />User Experience Design<br />The practice of conceiving interactive experiences maximizing user comfort, pleasure, confidence and productivity<br />An expression of Art, Industrial Design, Psychology and AestheticCreativity<br />
    6. 6. UX and Software Design<br />6<br />Software Design<br />The practice of inventing software that is efficient, maintainable, robust and functionally complete<br />An expression of Science, Engineering, Mathematics and Technical Creativity<br />User Experience Design<br />The practice of conceiving interactive experiences maximizing user comfort, pleasure, confidence and productivity<br />An expression of Art, Industrial Design, Psychology and AestheticCreativity<br />UX Design + Software Design ≈RIA Development<br />
    7. 7. Words of wisdom<br />7<br />[W]e’ve tried to be at the intersection of technology and liberal arts. We make things that are easy to use, fun to use — they really fit the users.<br />Steve Jobs<br />
    8. 8. 8<br />When<br />Worlds<br />Collide!<br />
    9. 9. Two Worlds – Flex RIAs With LCDS<br />9<br />Client Side<br />Flash Player / AIR Runtime<br />Multi-platform runtime for delivering Rich Internet Applications (RIAs)<br />On 99% of Internet-enabled PCs<br />AS3 & Flex<br />Serious, Object-Oriented rapid development of expressive RIAs<br />Mature, industry-leading tooling (Flash Builder/Eclipse)<br />Deep API allows the creation of highly dynamic user experiences<br />Flash Catalyst<br />Designers get in on the fun<br />
    10. 10. Two Worlds – Flex RIAs With LCDS<br />10<br />Server Side<br />Java, .NET, PHP, ColdFusion<br />ADEP (LiveCycle) Data Services<br />Blazingly fast data transfer w/ AMF<br />Transfer typed data between your back and front-ends<br />Data push keeps your UIs up to date in real-time<br />Manage data in offline mode by caching changes for automatic synchronization on re-connect<br />Benefit from advanced modeling tools to graphically map data sources to the front-end data model<br />
    11. 11. Two Worlds – Flex RIAs With LCDS<br />11<br />Client Side<br />Server Side<br />Powerful<br />Fast<br />Adaptable<br />Expressive <br />Responsive<br />Flexible<br />Let’s apply these principles to a real-world challenge.<br />
    12. 12. Too Much Information?<br />12<br />Our Challenge:<br />Create enterprise applications that deal in large amounts of information<br />Our Inputs:<br />Take your pick: We can currently store at least 295 exabytes of information2<br />That’s 295,000,000,000,000,000,000 bytes! (2.95 x 1020)<br />i.e. 315 times the number of grains of sand in the world<br />Our Main Obstacle:<br />Though the information we might display is nearly limitless, we are constrained by the displays on which we must deliver our applications<br />This brings us to the key concept of Information Density<br />
    13. 13. Intro to Information Density<br />Information Density (or “ID”) is defined as follows:<br />The quantity of visible node instances containing information divided by the screen space area of the whole interface in pixels.1<br />In plain English:<br />ID is the amount of information displayed per unit of visible space.<br />Note:<br />ID differs from Data Density, which is measured in bits of actual content<br />“Information” isn’t only the data, but also the elements making up the user interface that contains the data (e.g. buttons, sliders, labels, etc.)<br />13<br />
    14. 14. Words of wisdom<br />14<br />I didn’t have time to write a short letter, so I wrote a long one instead.<br />Mark Twain<br />
    15. 15. How We Process Information<br />15<br />Our minds and senses are incredibly powerful at filtering information, subconsciously discarding unneeded info, keying in on important items, etc.<br />Every waking hour, throughout our entire lives, our brains are being trained to process the information around us<br />Conversely, we spend only a tiny fraction of our lives processing information displayed in a UI<br />Our UIs therefore need to model their approach on how the “real world” presents information to leverage what our minds are most used to doing<br />
    16. 16. How We Process Information<br />16<br />3<br />
    17. 17. Intro to Information Density<br />17<br />At what point does a little more information become way too much information?<br />Usefulness<br />Information<br />
    18. 18. Intro to Information Density<br />18<br />At what point does a little more information become way too much information?<br />Usefulness<br />Information<br />
    19. 19. Intro to Information Density<br />19<br />At what point does a little more information become way too much information?<br />Usefulness<br />Information<br />
    20. 20. Intro to Information Density<br />20<br />At what point does a little more information become way too much information?<br />Usefulness<br />Information<br />
    21. 21. Intro to Information Density<br />21<br />At what point does a little more information become way too much information?<br />Usefulness<br />Information<br />
    22. 22. Key Information Density Challenges<br />22<br />At what point does a little more information become way too much information?<br />It depends.<br />Who is consuming / processing the information?<br />What isthe nature of the information?<br />For what purpose do they want to use the information?<br />
    23. 23. Intro to Information Density<br />23<br />At what point does a little more information become way too much information?<br />“Sweet Spot”<br />Usefulness<br />Information<br />
    24. 24. Key Information Density Challenges<br />24<br />At what point does a little more information become way too much information?<br />It depends.<br />Who is consuming / processing the information?<br />What isthe nature of the information?<br />For what purpose do they want to use the information?<br />It can be near impossible to know how much is just right for the current user, data and situation.<br />We can, however, target the ID “Sweet Spot”<br />
    25. 25. Empower Your Users<br />25<br />We know that different users process information differently<br />We also know that it can be challenging to please everyone<br />Allow your users to customize the level of Information Density through:<br />“Adaptive” renderers<br />Customizable controls (e.g. simple / advanced mode)<br />Account-specific preferences, like smart saved searches prioritizing most recently-run searches<br />
    26. 26. Empower Your Users<br />26<br />Provide your users some discretion within your determined Information Density “Sweet Spot”.<br />“Sweet Spot”<br />Usefulness<br />Information<br />
    27. 27. Eliminate or Hide Useless Information<br />27<br />Individuals know what info they need and for what purpose they need it<br />Allow them to trim large data sets to the essential items they care about through:<br />Searching<br />By keyword, category, range, date, etc.<br />Filtering<br />Search-style filters<br />Time-based constraints<br />
    28. 28. Aggregate, Condense and Refine Information<br />28<br />It is easier to read, assimilate and work with large amounts of information if they have been pre-processed into a more compact form.<br />Think Apples vs Applesauce, Wheat vs Bread, Coal vs Diamond<br />Condensing or refining information can be done in many ways, e.g.:<br />Graphically represent all or part of your information<br />Roll up nested information into a summary representation that can be expanded by users as needed<br />Transform certain information into its impliedrepresentation<br />
    29. 29. Aggregate, Condense and Refine Information<br />29<br />4<br />
    30. 30. Tying It All Up<br />There is a point of diminishing returns as ID increases.<br />Because all users and situations are different, you’ll likely never attain the perfect level of Information Density for all users in all cases, however you can still hit the “IDsweet spot”:<br />Empower your users to set their own level of ID through adaptive renderers and controls.<br />Graphically aggregate and condense large amounts of information.<br />Provide searching and real-time filtering.<br />By keeping a balanced view of ID and trusting your instincts, innovate.<br />30<br />When Worlds Collide<br />Because… <br />…usersthrive!<br />
    31. 31. 31<br />When<br />Worlds<br />Collide!<br />with Taylor Bastien<br />@RIAGrande<br />
    32. 32. 32<br />Turn in your surveys for a chance to WIN!<br />Hand in your surveys to the room monitors<br />One survey per session will be selected as a winner of an Adobe Press e-book or Video <br />Introduction to Adobe Edge<br />Web Design with Muse (code name) from Adobe<br />Android App Development and Design: Learn by Video<br />Winners will be notified via e-mail at the end of each day<br />
    33. 33. References<br />1 - http://hcil.cs.umd.edu/trs/98-13/node126.html<br />2 - http://www.sciencemag.org/content/332/6025/60<br />3 – http://www.dothetest.co.uk(Moonwalking Bear)(Defunct?)<br />4 – http://gapminder.org (200 Countries / 200 Years Video)<br />Photo credits: NASA, NASA/Jet Propulsion Lab - Caltech<br />33<br />

    ×