FunctionalDESIGNLAB<br />ifactory & Infomous For FUTUREM<br />September 12, 2011<br />
OVERVIEW<br />11:30am – 1:30pm <br />
DESCRIPTION<br />Functional Design Lab <br />In a digital landscape that evolves every day, it is crucial to communicate i...
ABOUTuS<br />AND OUR PERSPECTIVES<br />IFACTORY<br />Award-winning interactive design and development, founded in 1992<br ...
Transitioned to online navigation tool in 2010
Paolo Gaudiano, President</li></li></ul><li>TODAY’SGOALS<br />Define typical components for effective site design<br />Cat...
FLOW<br />BASELINE – 5 min<br />TYPICAL SOLUTIONS – 5 min<br />(9) APPROACHES TO EXCELLENT UX – 30 min<br />INFOMOUS: DYNA...
BASELINE<br />ESSENTIAL PREREQUISITES<br />
BASELINE<br />WHAT WE’RE NOT COVERING <br />PREREQS TO INNOVATION<br />Robust discovery, architecture and design process<b...
BASELINE<br />IDENTIFYING SITE GOALS<br />INTENT IS EVERYTHING<br />A successful design and user interaction is obviously ...
Purchasing product
Registering an account
Exploring
Sharing</li></ul>See also:<br />Make Web Visitors Stay Longer<br />by Cinetech<br />
BASELINE<br />TYPICAL PROCESS<br />DISCOVERY > IA > UX >DESIGN > IMPLEMENTATION > MAINTENANCE ><br />Step 1 is defining yo...
Clarification of organizational goals and brand strategy
Stakeholder interviews and focus groups
Stats analysis
Competitive audits
User personas
Use cases
Identify key performance indicators
Define metrics for success
Information Architecture
Sitemaps
Wireframes
User Experience prototypes
Usability testing</li></li></ul><li>BASELINE<br />TECHNOLOGY<br />HIERARCHY OF NEEDS<br />Accessibility: The website can b...
BASELINE<br />DESIGN<br />DESIRED SOLUTION<br />On Brand: Clear brand positioning and messaging<br />Articulate: Careful w...
BASELINE<br />MOVING BEYOND<br />INSPIRED FUNCTIONAL DESIGN<br />Being uniquely inspirational AND useful is the aspiration...
increasing exploration: how to move a user sideways to additional content in order to broaden experience and exploration</...
TYPICALSOLUTION<br />ANATOMY FOR MOST-PRACTIcED HOMEPAGE AND CONTENT PAGE DESIGNS<br />
HOMEPAGEANATOMY<br />A TYPICAL SOLUTION<br />GOALS<br /><ul><li>Old metaphors: the cover of your book; the lobby to your b...
Deliver organizational brand positioning and messaging
Facilitate access to content
Communicate a mental map of site offerings</li></li></ul><li>HOMEPAGEANATOMY<br />A TYPICAL SOLUTION<br />
CONTENTPAGE<br />A TYPICAL SOLUTION<br />GOALS<br /><ul><li>Design for content or entry pages is of equal importance to th...
The same availability of modules and widgets which facilitate transactions and explorations into site-wide offerings shoul...
CONTENTPAGE<br />A TYPICAL SOLUTION<br />
BEYONDTYPICAL<br />EXAMPLES OF INSPIRING DESIGNS<br />
BEYONDTYPICAL<br />EXAMPLES OF INSPIRING DESIGNS<br /><ul><li>Revolutionary and evolutionary changes occur constantly in w...
Many “best practices” are really “most practiced”
Predictability is important for no-nonsense transactions, but overrated for overall user experience
Constraints drive creativity
The following (9) sets creatively address a gamut of site design problems, from the need for quick and straightforward for...
FORMDRIVENDESIGN<br />http://www.delta.com<br />DELTA<br />
FORMDRIVENDESIGN<br />FORMDRIVEN<br />http://www.24symbols.com<br />24 symbols<br />
02BROWSETOOLKITS<br />PROVIDE WAYS FOR USERS TO MINE STACKS OF CONTENT BY TAILORING SEARCH AND BROWSE FOR MINING DATA. WIT...
BROWSETOOLKITS<br />http://www.dana-farber.org<br />DANA-FARBER CANCER INSTITUTE<br />
BROWSETOOLKITS<br />http://oed.com<br />OXFORD ENGLISH DICTIONARY<br />
03INTERACTIVEBRANDNARRATIVEs<br />DELIVER COMPLEX MESSAGES BY BENDING THE CAROUSEL FORM FACTOR. BIG IMAGES ARE FINE, BUT R...
INTERACTIVEBRANDNARRATIVES<br />WHARTON - MBA<br />http://www.wharton.upenn.edu/mba<br />
INTERACTIVEBRANDNARRATIVES<br />HARVARD BUSINESS SCHOOL - MBA<br />http://www.hbs.edu/mba<br />
04SINGLEPLANESITES<br />laying down all your content in a massive TABLEUX transforms navigation into exploration. GREAT FO...
SINGLEPLANESITEs<br />http://steveandjacqs.com<br />STEVE AND JACQS<br />
SINGLEPLANESITEs<br />http://wearemanic.com<br />WE ARE MANIC<br />
05SCROLLTRIGGEREDUX<br />AN ELEMENT OF SURPRISE converts a natural USER action into A MORE dynamic user experience. GREAT ...
SCROLLTRIGGEREDUX<br />http://nizoapp.com<br />NIZO<br />
SCROLLTRIGGEREDUX<br />http://www.nikebetterworld.com<br />NIKE: A BETTER WORLD<br />
SCROLLTRIGGEREDUX<br />http://www.sullivannyc.com<br />sullivan<br />
SCROLLTRIGGEREDUX<br />http://www.yurbuds.com<br />YURBUDS<br />
06FIXEDNAVDESIGNS<br />bend the OLD home metaphor BY INTRODUCING A MODAL FORM OF “PAGE.”  SURPRISINGLY PREDICTABLE AND EAS...
FIXEDNAVDESIGNS<br />http://unionstationdenver.com/neighborhood<br />UNION STATION NEIGHBORHOOD<br />
FIXEDNAVDESIGNS<br />http://touchtech.co.nz<br />TOUCHTECH<br />
07DIMENSIONALDESIGNS<br />create a sense of space and place through simulated (NOT JUST ANIMATED) 3D.<br />
DIMENSIONALDESIGNS<br />http://wyss.harvard.edu<br />WYSS INSTITUTE<br />
DIMENSIONALDESIGNS<br />http://wonder-wall.com/<br />WONDERWALL inc.<br />
DIMENSIONALDESIGNS<br />http://thinkingspace.economist.com<br />THE ECONOMIST – THINKING SPACES<br />
08TEXTMAPPING<br />when dealing with massive amounts of text, MOVE BEYOND LISTS. MORE THAN JUST A GIMMICK, INNOVATIVE TEXT...
TEXTMAPPING<br />http://www.nytimes.com/skimmer/#/Top+News<br />NEW YORK TIMES – SKIMMER<br />
TEXTMAPPING<br />http://newsmap.jp/<br />NEWSMAP<br />
09DYNAMICVISUALIZATIONS<br />use data to drive interactive maps and INFOGRAPHICS. DATA  AS EVIDENCE DRIVES HOME POWERFUL M...
DYNAMICVISUALIZATIONS<br />http://counterspill.org<br />COUNTERSPILL<br />
DYNAMICVISUALIZATIONS<br />http://www.messagesforjapan.com/messages/map<br />MESSAGES FOR JAPAN<br />
INFOMOUSDEMO<br />Functional Design Applied to Online Text Navigation<br />
INFOMOUS<br />OUR INTEREST: FINDING RELEVANT INFORMATION<br />As we heard earlier:<br /><ul><li>“It is crucial to communic...
“The goal, regardless of project size, is to deliver design and functionalityin an easily digestible package”</li></ul>Our...
INFOMOUS<br />WHAT ARE PEOPLE SAYING ABOUT…<br />...a current event?<br />...a product?<br />Can you find what is relevant...
INFOMOUS<br />ONLINE INFORMATION IS PREDOMINANTLY TEXT-BASED<br /><ul><li>Articles
Editorials
Blogs
Google/Bing search results
Upcoming SlideShare
Loading in …5
×

Functional Design Lab

2,122 views
2,028 views

Published on

iFactory and Infomous teamed up to deliver this virtual workshop as part of the FutureM Conference in Boston.
---
In a digital landscape that evolves every moment, it is crucial to communicate information clearly and effectively through visual design. We'll take a look at brand modules, infographics and interface innovations and showcase how (and how not!) to combine compelling content with smart and visually appealing design.

Presenters were Alen Yen, iFactory President/Creative Director; Jeremy Perkins, iFactory Art Director; and Paolo Gaudiano, Icosystem President and Chief Technology Officer.

www.ifactory.com
www.infomous.com

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

  • Be the first to like this

No Downloads
Views
Total views
2,122
On SlideShare
0
From Embeds
0
Number of Embeds
624
Actions
Shares
0
Downloads
24
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • A
  • A
  • A
  • A
  • S
  • S
  • S
  • S
  • S
  • S
  • S
  • S
  • S
  • S
  • S
  • S
  • S
  • S
  • S
  • S
  • S
  • S
  • S
  • S
  • S
  • S
  • S
  • S
  • S
  • S
  • S
  • S
  • S
  • Functional Design Lab

    1. 1. FunctionalDESIGNLAB<br />ifactory & Infomous For FUTUREM<br />September 12, 2011<br />
    2. 2. OVERVIEW<br />11:30am – 1:30pm <br />
    3. 3. DESCRIPTION<br />Functional Design Lab <br />In a digital landscape that evolves every day, it is crucial to communicate information clearly and effectively through visual design. Web hooks such as infographics, brand modules and interface innovations enable you to combine compelling content with smart and visually appealing design. <br />Toeing the line between simplicity and sophistication, the goal, regardless of project size, is to deliver design and functionality in an easily digestible package. <br />So where do you start? What are some of the ways you can present your content in a visually compelling way? <br />
    4. 4. ABOUTuS<br />AND OUR PERSPECTIVES<br />IFACTORY<br />Award-winning interactive design and development, founded in 1992<br />Serving educators, publishers and mission-driven non profits<br />Pete Gaioni, Strategist<br />Lori LoTurco, Marketing Manager<br />Jeremy Perkins, Art Director<br />Alen Yen, Creative Director / President<br />INFOMOUS<br /><ul><li>Interactive visualization and navigation technology, started in 2005
    5. 5. Transitioned to online navigation tool in 2010
    6. 6. Paolo Gaudiano, President</li></li></ul><li>TODAY’SGOALS<br />Define typical components for effective site design<br />Categorize types of user experience approaches<br />Inspire through reviewing excellent sites with innovative and compelling solutions<br />Experiment with one easily implemented visualization solution<br />Demo a typical process though an audience case study<br />
    7. 7. FLOW<br />BASELINE – 5 min<br />TYPICAL SOLUTIONS – 5 min<br />(9) APPROACHES TO EXCELLENT UX – 30 min<br />INFOMOUS: DYNAMIC VISUALIZATION CREATION DEMO – 30 min <br />AUDIENCE CASE STUDY – 15 min<br />Q&A<br />
    8. 8. BASELINE<br />ESSENTIAL PREREQUISITES<br />
    9. 9. BASELINE<br />WHAT WE’RE NOT COVERING <br />PREREQS TO INNOVATION<br />Robust discovery, architecture and design process<br />Implementation AND maintenance of good technical solution<br />Creation AND continued publication of excellent content<br />
    10. 10. BASELINE<br />IDENTIFYING SITE GOALS<br />INTENT IS EVERYTHING<br />A successful design and user interaction is obviously defined in different ways for different organizations<br /><ul><li>Reading/learning
    11. 11. Purchasing product
    12. 12. Registering an account
    13. 13. Exploring
    14. 14. Sharing</li></ul>See also:<br />Make Web Visitors Stay Longer<br />by Cinetech<br />
    15. 15. BASELINE<br />TYPICAL PROCESS<br />DISCOVERY > IA > UX >DESIGN > IMPLEMENTATION > MAINTENANCE ><br />Step 1 is defining your goals through a robust discovery process<br />Step 2 is crafting functional solutions through IA and UX design<br /><ul><li>Discovery
    16. 16. Clarification of organizational goals and brand strategy
    17. 17. Stakeholder interviews and focus groups
    18. 18. Stats analysis
    19. 19. Competitive audits
    20. 20. User personas
    21. 21. Use cases
    22. 22. Identify key performance indicators
    23. 23. Define metrics for success
    24. 24. Information Architecture
    25. 25. Sitemaps
    26. 26. Wireframes
    27. 27. User Experience prototypes
    28. 28. Usability testing</li></li></ul><li>BASELINE<br />TECHNOLOGY<br />HIERARCHY OF NEEDS<br />Accessibility: The website can be found and used by all people<br />Stability: The website is consistent and trustworthy<br />Usability: The website is user-friendly<br />Reliability: The website is consistently available, without downtime<br />Functionality: The website offers content, tools and services users value<br />Flexibility: The website adapts to needs and wants of users.<br />See also:<br />10 Usability Tips Based on Research Studies<br />by Cameron Chapman<br />Book of Speed<br />by StoyanStefanov<br />
    29. 29. BASELINE<br />DESIGN<br />DESIRED SOLUTION<br />On Brand: Clear brand positioning and messaging<br />Articulate: Careful wordsmithing, and strong editorial control<br />Beautiful: Excellence of design, photoimagery, video, illustration<br />Informative: Useful, relevant content<br />Persuasive: Evidence through data: visualizing and showing: not just telling<br />Inspirational: Unique, engaging, compelling, memorable<br />See also:<br />Human Behavior Theories That Can be Applied to Web Design<br />by Alexander Dawson<br />
    30. 30. BASELINE<br />MOVING BEYOND<br />INSPIRED FUNCTIONAL DESIGN<br />Being uniquely inspirational AND useful is the aspiration that we want to focus on. <br />Along the way, there are two common problem/opportunities we want to look out for:<br /><ul><li>communicating complex messages: how to pair content with brand/meaning in promoting your organization
    31. 31. increasing exploration: how to move a user sideways to additional content in order to broaden experience and exploration</li></ul>We’ll start by understanding the basics – so that we can move beyond them<br />See also:<br />Simple Strategies for Engaging Your Visitors<br />by Andrew Follett<br />
    32. 32. TYPICALSOLUTION<br />ANATOMY FOR MOST-PRACTIcED HOMEPAGE AND CONTENT PAGE DESIGNS<br />
    33. 33. HOMEPAGEANATOMY<br />A TYPICAL SOLUTION<br />GOALS<br /><ul><li>Old metaphors: the cover of your book; the lobby to your building
    34. 34. Deliver organizational brand positioning and messaging
    35. 35. Facilitate access to content
    36. 36. Communicate a mental map of site offerings</li></li></ul><li>HOMEPAGEANATOMY<br />A TYPICAL SOLUTION<br />
    37. 37. CONTENTPAGE<br />A TYPICAL SOLUTION<br />GOALS<br /><ul><li>Design for content or entry pages is of equal importance to that of homepages
    38. 38. The same availability of modules and widgets which facilitate transactions and explorations into site-wide offerings should be adapted and made present on all levels</li></ul>See also:<br />The decline of the homepage<br />at Giraffe Forum<br />
    39. 39. CONTENTPAGE<br />A TYPICAL SOLUTION<br />
    40. 40. BEYONDTYPICAL<br />EXAMPLES OF INSPIRING DESIGNS<br />
    41. 41. BEYONDTYPICAL<br />EXAMPLES OF INSPIRING DESIGNS<br /><ul><li>Revolutionary and evolutionary changes occur constantly in web design practice yielding opportunities for innovation
    42. 42. Many “best practices” are really “most practiced”
    43. 43. Predictability is important for no-nonsense transactions, but overrated for overall user experience
    44. 44. Constraints drive creativity
    45. 45. The following (9) sets creatively address a gamut of site design problems, from the need for quick and straightforward forms entry, to delivery of complex messages and data</li></li></ul><li>01FORMDRIVENDESIGN<br />WHEN CALLS TO ACTION ARE THE POINT, DON’T SKIMP ON THE FORMS. CONTAIN OPTIONS IN A DASHBOARD-STYLE UI TO CREATE A CONSISTENT COMPREHENSION OF OPTIONS. MAKE THINGS BIG.<br />
    46. 46. FORMDRIVENDESIGN<br />http://www.delta.com<br />DELTA<br />
    47. 47. FORMDRIVENDESIGN<br />FORMDRIVEN<br />http://www.24symbols.com<br />24 symbols<br />
    48. 48. 02BROWSETOOLKITS<br />PROVIDE WAYS FOR USERS TO MINE STACKS OF CONTENT BY TAILORING SEARCH AND BROWSE FOR MINING DATA. WITHOUT FILTERS AND FACETS THAT HELP TO “SHAPE” your content, USERS MAY NOT BE AWARE OF WHAT YOU HAVE.<br />
    49. 49. BROWSETOOLKITS<br />http://www.dana-farber.org<br />DANA-FARBER CANCER INSTITUTE<br />
    50. 50. BROWSETOOLKITS<br />http://oed.com<br />OXFORD ENGLISH DICTIONARY<br />
    51. 51. 03INTERACTIVEBRANDNARRATIVEs<br />DELIVER COMPLEX MESSAGES BY BENDING THE CAROUSEL FORM FACTOR. BIG IMAGES ARE FINE, BUT RICH MEDIA COMPONENTS AND ENGAGING INTERACTION DRAW USERS IN AND LEAVE THEM WITH INDELIBLE IMPRESSIONS.<br />
    52. 52. INTERACTIVEBRANDNARRATIVES<br />WHARTON - MBA<br />http://www.wharton.upenn.edu/mba<br />
    53. 53. INTERACTIVEBRANDNARRATIVES<br />HARVARD BUSINESS SCHOOL - MBA<br />http://www.hbs.edu/mba<br />
    54. 54. 04SINGLEPLANESITES<br />laying down all your content in a massive TABLEUX transforms navigation into exploration. GREAT FOR 5-10 KEYPOINT CONTENT.<br />
    55. 55. SINGLEPLANESITEs<br />http://steveandjacqs.com<br />STEVE AND JACQS<br />
    56. 56. SINGLEPLANESITEs<br />http://wearemanic.com<br />WE ARE MANIC<br />
    57. 57. 05SCROLLTRIGGEREDUX<br />AN ELEMENT OF SURPRISE converts a natural USER action into A MORE dynamic user experience. GREAT FOR LINEAR NARRATIVES AND SEQUENTIAL KEYPOINTS. <br />
    58. 58. SCROLLTRIGGEREDUX<br />http://nizoapp.com<br />NIZO<br />
    59. 59. SCROLLTRIGGEREDUX<br />http://www.nikebetterworld.com<br />NIKE: A BETTER WORLD<br />
    60. 60. SCROLLTRIGGEREDUX<br />http://www.sullivannyc.com<br />sullivan<br />
    61. 61. SCROLLTRIGGEREDUX<br />http://www.yurbuds.com<br />YURBUDS<br />
    62. 62. 06FIXEDNAVDESIGNS<br />bend the OLD home metaphor BY INTRODUCING A MODAL FORM OF “PAGE.” SURPRISINGLY PREDICTABLE AND EASY TO USE IF DONE WELL, AND KEEPS YOUR CONTENT AND NAVIGATION FRONT AND CENTER.<br />
    63. 63. FIXEDNAVDESIGNS<br />http://unionstationdenver.com/neighborhood<br />UNION STATION NEIGHBORHOOD<br />
    64. 64. FIXEDNAVDESIGNS<br />http://touchtech.co.nz<br />TOUCHTECH<br />
    65. 65. 07DIMENSIONALDESIGNS<br />create a sense of space and place through simulated (NOT JUST ANIMATED) 3D.<br />
    66. 66. DIMENSIONALDESIGNS<br />http://wyss.harvard.edu<br />WYSS INSTITUTE<br />
    67. 67. DIMENSIONALDESIGNS<br />http://wonder-wall.com/<br />WONDERWALL inc.<br />
    68. 68. DIMENSIONALDESIGNS<br />http://thinkingspace.economist.com<br />THE ECONOMIST – THINKING SPACES<br />
    69. 69. 08TEXTMAPPING<br />when dealing with massive amounts of text, MOVE BEYOND LISTS. MORE THAN JUST A GIMMICK, INNOVATIVE TEXT-DRIVEN INTERFACES CAN IMPROVE FUNCTIONALITY THROUGH NEW USER EXPERIENCE.<br />
    70. 70. TEXTMAPPING<br />http://www.nytimes.com/skimmer/#/Top+News<br />NEW YORK TIMES – SKIMMER<br />
    71. 71. TEXTMAPPING<br />http://newsmap.jp/<br />NEWSMAP<br />
    72. 72. 09DYNAMICVISUALIZATIONS<br />use data to drive interactive maps and INFOGRAPHICS. DATA AS EVIDENCE DRIVES HOME POWERFUL MESSAGES. INTERACTIVITY PROMOTES UNDERSTANDING AND RETENTION.<br />
    73. 73. DYNAMICVISUALIZATIONS<br />http://counterspill.org<br />COUNTERSPILL<br />
    74. 74. DYNAMICVISUALIZATIONS<br />http://www.messagesforjapan.com/messages/map<br />MESSAGES FOR JAPAN<br />
    75. 75. INFOMOUSDEMO<br />Functional Design Applied to Online Text Navigation<br />
    76. 76. INFOMOUS<br />OUR INTEREST: FINDING RELEVANT INFORMATION<br />As we heard earlier:<br /><ul><li>“It is crucial to communicate information clearly and effectively through visual design”
    77. 77. “The goal, regardless of project size, is to deliver design and functionalityin an easily digestible package”</li></ul>Our interest is to address a related problem:<br /><ul><li>How do you help your users find relevant contentburied within your site, and amidst a flood oftext-based information?</li></li></ul><li>INFOMOUS<br />WHAT IS RELEVANT IN TODAY’S NEWS?<br />
    78. 78. INFOMOUS<br />WHAT ARE PEOPLE SAYING ABOUT…<br />...a current event?<br />...a product?<br />Can you find what is relevant in this content?<br />
    79. 79. INFOMOUS<br />ONLINE INFORMATION IS PREDOMINANTLY TEXT-BASED<br /><ul><li>Articles
    80. 80. Editorials
    81. 81. Blogs
    82. 82. Google/Bing search results
    83. 83. Consumer reviews
    84. 84. Commentaries
    85. 85. Twitter feeds
    86. 86. Facebook feeds
    87. 87. LinkedIn activities</li></ul>Web surfing becomes overwhelming and information is easily missed!<br />
    88. 88. INFOMOUS<br />SOME TYPICAL APPROACHES<br />News readers (e.g., Google)<br />Specify your preferred sources<br />Receive updated “feeds”<br />Widgets<br />Twitter feeds<br />“Most read”<br />Latest headlines<br /> Navigation menus<br />
    89. 89. INFOMOUS<br />The NYT Skimmer<br />We’ve already seen some more creative approaches<br />Newsmap<br />These approaches improve matters, but still leave the reader with an overwhelming amount of information<br />
    90. 90. INFOMOUS<br />Tag clouds provide a quick visual representation of the most prominent terms in a text source.<br />An alternative approach: word/tag clouds<br />
    91. 91. INFOMOUS<br />Tag clouds are trying to summarize content, but give you no way to do anything further.<br />Which of the following gives you more useful information?<br />Tag clouds fail to increase exploration:<br />“move a user sideways to additional content in orderto broaden experience and exploration”<br />tag clouds: a fading fad?<br />
    92. 92. INFOMOUS<br />A NEW APPROACH: INFOMOUS INTERACTIVE TEXT CLOUDS<br /><ul><li>Interactive, intuitive, based on visual representation of content
    93. 93. Flexible, embeddable, highly customizable
    94. 94. Typical uses:</li></ul>News readers<br />Social sites<br />Search engines<br />Site navigation<br />
    95. 95. INFOMOUS<br />HOW INFOMOUS WORKS<br />Summarize text based on word frequency and adjacency (other text processing possible)<br />Word size representative of “importance”<br />Links and groups depending on co-occurrence<br />Interact (click or hover) with a word to reveal hyperlinks to original sources<br />Hide/remove unwanted words<br />“Focus” on specific words to narrow navigation to relevant topics only<br />Infomous goes WAY beyond tag clouds to increase exploration<br />
    96. 96. INFOMOUS<br />INFOMOUS HELPS YOU FIND RELEVANT CONTENT AND EXPLORE<br />2. Find what is relevant<br />1. See the news<br />3. Increase exploration<br />
    97. 97. INFOMOUS<br />FOLLOW RELEVANT CONVERSATIONS<br />...about current events<br />...about products<br />
    98. 98. INFOMOUSapplication<br />how to use infomous for functional design<br />
    99. 99. INFOMOUS<br />you can Embed any infomous cloud on any website simply by including a snippet of html<br />added benefit: infomous is easy to embed within any site<br />
    100. 100. INFOMOUS<br />TOUR OF SAMPLE APPLICATIONS<br />Reader opinions: The Economist, Washington Post<br />Academic content: IMD<br />Integrated news site navigation: FCNP<br />blog navigation: Nova SPivack<br />consumer reviews: DOOYOO<br />
    101. 101. INFOMOUSPERFORMANCE<br />HOW WELL DOES INFOMOUS PERFORM?<br />
    102. 102. <ul><li>3% of users engage once or more per visit
    103. 103. 2.5%CLICK-THROUGH BY ENGAGED USERS
    104. 104. 35x increase in length of time spent on sitewhen engaged with infomous cloud (stickiness)</li></ul>68<br />2011 Infomous, Inc. - all rights reserved<br />INFOMOUS<br />SAMPLE RESULTS: THE ECONOMIST<br />user commentary pages<br />
    105. 105. <ul><li>10.5% user engagement (USERS WHO INTERACT WITH THE INFOMOUS CLOUD AT LEAST ONCE)
    106. 106. over 50% CLICK-THROUGH BY ENGAGED USERS
    107. 107. 7x increase in length of visit for engaged users</li></ul>69<br />2011 Infomous, Inc. - all rights reserved<br />INFOMOUS<br />SAMPLE RESULTS: THE WASHINGTON POST<br />special page on unemployment<br />
    108. 108. INFOMOUS<br />futurem: events page<br />1.4% engagement<br />14.6% CLICK-THROUGH<br />52% shorter visits!<br />caveat emptor: not a silver bullet!<br />what went wrong???<br />
    109. 109. INFOMOUS<br />just like any other “widget,” many factors impact INFOMOUS<br />performance<br />Page placement: WashingtonPost is above the fold – 10.5% engagement Economist is below the fold – 3% engagement<br />Title: need to make it clear what this widget is supposed to do Always include “interactive”<br />Content sources: Choose meaningful feeds More feeds are better in some cases<br />Word quality: curate cloud content carefully Blend of sources, hide meaningless/confusing words<br />Integration: take care of size and layout Match the site look-and-feel<br />Exploration: think about where you are taking your usersFutureM’s feeds are all pointing to external sites!<br />lessons learned<br />
    110. 110. AUDIENCECASESTUDY<br />University of Arkansas for medical sciences<br />Fay W. Boozman College of Public Health<br />
    111. 111. UAMS<br />http://uams.edu/coph<br />COLLEGE OF PUBLIC HEALTH<br />
    112. 112. UAMSQUICKFIX<br />COLLEGE OF PUBLIC HEALTH<br />RAPID AUDIT<br />Non-standard primary and secondary navigation scheme<br />Long, list-style navigation without effective clustering<br />Endorser site homepage linked to logo creates navigation issue<br />Inability to jump laterally to sibling sites or overtly up/down to endorser site<br />Non-standard location of Search functionality<br />Lack of well-crafted brand message and positioning<br />Impersonal hero image lacking in meaning<br />No social media streaming<br />Mysterious ad lobs<br />Inconsistent site design in subsections<br />Non-adaptive design, optimized for older screen resolutions<br />Use of image-mapped graphical text impairs discoverability<br />Roll-overs, flyouts, and dropdowns could optimize navigation design<br />Brand and content carousels could clarify organizational messages, and featured <br /> content<br />
    113. 113. UAMS<br />COLLEGE OF PUBLIC HEALTH<br />SOLUTION RESULTS<br />LOREM IPSUM SIT DOLOR<br />LOREM IPSUM SIT DOLOR<br />LOREM IPSUM SIT DOLOR<br />LOREM IPSUM SIT DOLOR:<br />
    114. 114. UAMSQUICKFIX<br />CHECKLIST FROM EARLIER:<br />DESIRED SOLUTION<br />On Brand: Clear brand positioning and messaging a<br />Articulate: Careful wordsmithing, and strong editorial control a<br />Beautiful: Excellence of design, photoimagery, video, illustration a<br />Informative: Useful, relevant content a<br />Persuasive: Evidence through data: visualizing and showing: not just telling a<br />Inspirational: Unique, engaging, compelling, memorable<br />
    115. 115. UXDESIGN<br />MORE OF WHAT WE DIDN’T DO<br />UX PROCESS<br />Problem/opportunities defined by Discovery<br />Baseline functionality dictated by wireframes<br />Concept ideation through sketches, prototypes, and renderings<br />Validation through testing<br />
    116. 116. UXDESIGN<br />PROCESS FOR WYSS INSTITUTE FOR BIOLOGICALLY INSPIRED ENGINEERING <br />DISCOVERY > IA > UX > DESIGN > IMPLEMENTATION > MAINTENANCE ><br />http://ifactory.com/clients/wibie/design/artdir1/index.html<br />(password protected)<br />
    117. 117. badEXAMPLES<br />SITES THAT DIDN’T CUT IT<br />
    118. 118. badEXAMPLES<br />SITES THAT DIDN’T CUT IT<br />For one reason or another, the following sites attempted to use some of the preceding techniques and ended up with solutions that fell short:<br />http://www.the-girl-store.org/shop<br />http://www.cascadebreweryco.com.au/<br />http://lieblingdesign.dk/<br />http://deeptime.info/<br />http://natl.tv/<br />
    119. 119. Q&A<br />
    120. 120. THANKYOU<br />IFACTORY and INFOMOUS FOR FUTUREM<br />Paolo Gaudiano, Paolo@Infomous.com, 617.520.1070<br />Pete Gaioni, Pete@ifactory.com, 617 426.0609<br />Lori Loturco, Lori@ifactory.com, 617 426.0609<br />Jeremy Perkins, Jeremy@ifactory.com, 617.426.0609<br />Alen Yen, Alen@ifactory.com, 617.426.0609<br />SEPTEMBER 12, 2011<br />WWW.IFACTORY.COM<br />

    ×