The document presents insights from a session hosted by ifactory and infomous about effective visual design and user experience in digital landscapes. It focuses on strategies for clear communication of information through design, emphasizing the importance of interactive elements like infographics and navigational tools to enhance user engagement. The session includes practical examples and case studies to illustrate typical design components, processes, and innovative solutions for improving web content accessibility and user exploration.

1. FunctionalDESIGNLABifactory & Infomous For FUTUREMSeptember 12, 2011

2. OVERVIEW11:30am – 1:30pm

3. DESCRIPTIONFunctional 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. ABOUTuSAND OUR PERSPECTIVESIFACTORYAward-winning interactive design and development, founded in 1992Serving educators, publishers and mission-driven non profitsPete Gaioni, StrategistLori LoTurco, Marketing ManagerJeremy Perkins, Art DirectorAlen Yen, Creative Director / PresidentINFOMOUSInteractive visualization and navigation technology, started in 2005

5. Transitioned to online navigation tool in 2010

6. Paolo Gaudiano, PresidentTODAY’SGOALSDefine typical components for effective site designCategorize types of user experience approachesInspire through reviewing excellent sites with innovative and compelling solutionsExperiment with one easily implemented visualization solutionDemo a typical process though an audience case study

7. FLOWBASELINE – 5 minTYPICAL SOLUTIONS – 5 min(9) APPROACHES TO EXCELLENT UX – 30 minINFOMOUS: DYNAMIC VISUALIZATION CREATION DEMO – 30 min AUDIENCE CASE STUDY – 15 minQ&A

8. BASELINEESSENTIAL PREREQUISITES

9. BASELINEWHAT WE’RE NOT COVERING PREREQS TO INNOVATIONRobust discovery, architecture and design processImplementation AND maintenance of good technical solutionCreation AND continued publication of excellent content

10. BASELINEIDENTIFYING SITE GOALSINTENT IS EVERYTHINGA successful design and user interaction is obviously defined in different ways for different organizationsReading/learning

11. Purchasing product

12. Registering an account

13. Exploring

14. SharingSee also:Make Web Visitors Stay Longerby Cinetech

15. BASELINETYPICAL PROCESSDISCOVERY > IA > UX >DESIGN > IMPLEMENTATION > MAINTENANCE >Step 1 is defining your goals through a robust discovery processStep 2 is crafting functional solutions through IA and UX designDiscovery

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 testingBASELINETECHNOLOGYHIERARCHY OF NEEDSAccessibility: The website can be found and used by all peopleStability: The website is consistent and trustworthyUsability: The website is user-friendlyReliability: The website is consistently available, without downtimeFunctionality: The website offers content, tools and services users valueFlexibility: The website adapts to needs and wants of users.See also:10 Usability Tips Based on Research Studiesby Cameron ChapmanBook of Speedby StoyanStefanov

29. BASELINEDESIGNDESIRED SOLUTIONOn Brand: Clear brand positioning and messagingArticulate: Careful wordsmithing, and strong editorial controlBeautiful: Excellence of design, photoimagery, video, illustrationInformative: Useful, relevant contentPersuasive: Evidence through data: visualizing and showing: not just tellingInspirational: Unique, engaging, compelling, memorableSee also:Human Behavior Theories That Can be Applied to Web Designby Alexander Dawson

30. BASELINEMOVING BEYONDINSPIRED FUNCTIONAL DESIGNBeing 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 explorationWe’ll start by understanding the basics – so that we can move beyond themSee also:Simple Strategies for Engaging Your Visitorsby Andrew Follett

32. TYPICALSOLUTIONANATOMY FOR MOST-PRACTIcED HOMEPAGE AND CONTENT PAGE DESIGNS

33. HOMEPAGEANATOMYA TYPICAL SOLUTIONGOALSOld 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 offeringsHOMEPAGEANATOMYA TYPICAL SOLUTION

37. CONTENTPAGEA TYPICAL SOLUTIONGOALSDesign 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 levelsSee also:The decline of the homepageat Giraffe Forum

39. CONTENTPAGEA TYPICAL SOLUTION

40. BEYONDTYPICALEXAMPLES OF INSPIRING DESIGNS

41. BEYONDTYPICALEXAMPLES OF INSPIRING DESIGNSRevolutionary 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 data01FORMDRIVENDESIGNWHEN 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. FORMDRIVENDESIGNhttp://www.delta.comDELTA

47. FORMDRIVENDESIGNFORMDRIVENhttp://www.24symbols.com24 symbols

48. 02BROWSETOOLKITSPROVIDE 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. BROWSETOOLKITShttp://www.dana-farber.orgDANA-FARBER CANCER INSTITUTE

50. BROWSETOOLKITShttp://oed.comOXFORD ENGLISH DICTIONARY

51. 03INTERACTIVEBRANDNARRATIVEsDELIVER 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. INTERACTIVEBRANDNARRATIVESWHARTON - MBAhttp://www.wharton.upenn.edu/mba

53. INTERACTIVEBRANDNARRATIVESHARVARD BUSINESS SCHOOL - MBAhttp://www.hbs.edu/mba

54. 04SINGLEPLANESITESlaying down all your content in a massive TABLEUX transforms navigation into exploration. GREAT FOR 5-10 KEYPOINT CONTENT.

55. SINGLEPLANESITEshttp://steveandjacqs.comSTEVE AND JACQS

56. SINGLEPLANESITEshttp://wearemanic.comWE ARE MANIC

57. 05SCROLLTRIGGEREDUXAN ELEMENT OF SURPRISE converts a natural USER action into A MORE dynamic user experience. GREAT FOR LINEAR NARRATIVES AND SEQUENTIAL KEYPOINTS.

58. SCROLLTRIGGEREDUXhttp://nizoapp.comNIZO

59. SCROLLTRIGGEREDUXhttp://www.nikebetterworld.comNIKE: A BETTER WORLD

60. SCROLLTRIGGEREDUXhttp://www.sullivannyc.comsullivan

61. SCROLLTRIGGEREDUXhttp://www.yurbuds.comYURBUDS

62. 06FIXEDNAVDESIGNSbend 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. FIXEDNAVDESIGNShttp://unionstationdenver.com/neighborhoodUNION STATION NEIGHBORHOOD

64. FIXEDNAVDESIGNShttp://touchtech.co.nzTOUCHTECH

65. 07DIMENSIONALDESIGNScreate a sense of space and place through simulated (NOT JUST ANIMATED) 3D.

66. DIMENSIONALDESIGNShttp://wyss.harvard.eduWYSS INSTITUTE

67. DIMENSIONALDESIGNShttp://wonder-wall.com/WONDERWALL inc.

68. DIMENSIONALDESIGNShttp://thinkingspace.economist.comTHE ECONOMIST – THINKING SPACES

69. 08TEXTMAPPINGwhen 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. TEXTMAPPINGhttp://www.nytimes.com/skimmer/#/Top+NewsNEW YORK TIMES – SKIMMER

71. TEXTMAPPINGhttp://newsmap.jp/NEWSMAP

72. 09DYNAMICVISUALIZATIONSuse data to drive interactive maps and INFOGRAPHICS. DATA AS EVIDENCE DRIVES HOME POWERFUL MESSAGES. INTERACTIVITY PROMOTES UNDERSTANDING AND RETENTION.

73. DYNAMICVISUALIZATIONShttp://counterspill.orgCOUNTERSPILL

74. DYNAMICVISUALIZATIONShttp://www.messagesforjapan.com/messages/mapMESSAGES FOR JAPAN

75. INFOMOUSDEMOFunctional Design Applied to Online Text Navigation

76. INFOMOUSOUR INTEREST: FINDING RELEVANT INFORMATIONAs 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?INFOMOUSWHAT IS RELEVANT IN TODAY’S NEWS?

78. INFOMOUSWHAT ARE PEOPLE SAYING ABOUT…...a current event?...a product?Can you find what is relevant in this content?

79. INFOMOUSONLINE INFORMATION IS PREDOMINANTLY TEXT-BASEDArticles

80. Editorials

81. Blogs

82. Google/Bing search results