Your SlideShare is downloading. ×
0
Functional Design Lab
Functional Design Lab
Functional Design Lab
Functional Design Lab
Functional Design Lab
Functional Design Lab
Functional Design Lab
Functional Design Lab
Functional Design Lab
Functional Design Lab
Functional Design Lab
Functional Design Lab
Functional Design Lab
Functional Design Lab
Functional Design Lab
Functional Design Lab
Functional Design Lab
Functional Design Lab
Functional Design Lab
Functional Design Lab
Functional Design Lab
Functional Design Lab
Functional Design Lab
Functional Design Lab
Functional Design Lab
Functional Design Lab
Functional Design Lab
Functional Design Lab
Functional Design Lab
Functional Design Lab
Functional Design Lab
Functional Design Lab
Functional Design Lab
Functional Design Lab
Functional Design Lab
Functional Design Lab
Functional Design Lab
Functional Design Lab
Functional Design Lab
Functional Design Lab
Functional Design Lab
Functional Design Lab
Functional Design Lab
Functional Design Lab
Functional Design Lab
Functional Design Lab
Functional Design Lab
Functional Design Lab
Functional Design Lab
Functional Design Lab
Functional Design Lab
Functional Design Lab
Functional Design Lab
Functional Design Lab
Functional Design Lab
Functional Design Lab
Functional Design Lab
Functional Design Lab
Functional Design Lab
Functional Design Lab
Functional Design Lab
Functional Design Lab
Functional Design Lab
Functional Design Lab
Functional Design Lab
Functional Design Lab
Functional Design Lab
Functional Design Lab
Functional Design Lab
Functional Design Lab
Functional Design Lab
Functional Design Lab
Functional Design Lab
Functional Design Lab
Functional Design Lab
Functional Design Lab
Functional Design Lab
Functional Design Lab
Functional Design Lab
Functional Design Lab
Functional Design Lab
Functional Design Lab
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Functional Design Lab

1,885

Published on

iFactory and Infomous teamed up to deliver this virtual workshop as part of the FutureM Conference in Boston. …

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
1,885
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
24
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
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
  • Transcript

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

    ×