Post on 30-Oct-2014
description
transcript
FUNCTIONALDESIGNLABIFACTORY & INFOMOUS FOR FUTUREM
September 12, 2011
OVERVIEW11:30AM – 1:30PM
FUNCTIONAL DESIGN LAB
DESCRIPTION
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?
IFACTORY
ABOUTUSAND OUR PERSPECTIVES
Award-winning interactive design and development, founded in 1992Serving 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
Transitioned to online navigation tool in 2010 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
FLOW
BASELINE – 5 minTYPICAL SOLUTIONS – 5 min(9) APPROACHES TO EXCELLENT UX – 30 minINFOMOUS: DYNAMIC VISUALIZATION CREATION DEMO – 30 min AUDIENCE CASE STUDY – 15 minQ&A
BASELINEESSENTIAL PREREQUISITES
BASELINEWHAT WE’RE NOT COVERING
1.Robust discovery, architecture and design process2.Implementation AND maintenance of good technical solution3.Creation AND continued publication of excellent content
PREREQS TO INNOVATION
BASELINEIDENTIFYING SITE GOALS
A successful design and user interaction is obviously defined in different ways for different organizations
Reading/learning Purchasing product Registering an account Exploring Sharing
See also:MAKE WEB VISITORS STAY LONGERby Cinetech
INTENT IS EVERYTHING
BASELINETYPICAL PROCESS
Step 1 is defining your goals through a robust discovery processStep 2 is crafting functional solutions through IA and UX design
Discovery 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
DISCOVERY > IA > UX > DESIGN > IMPLEMENTATION > MAINTENANCE >
BASELINETECHNOLOGY
1. Accessibility: The website can be found and used by all people
2. Stability: The website is consistent and trustworthy3. Usability: The website is user-friendly4. Reliability: The website is consistently available, without
downtime5. Functionality: The website offers content, tools and
services users value6. Flexibility: The website adapts to needs and wants of users.
See also:10 USABILITY TIPS BASED ON RESEARCH STUDIESby Cameron ChapmanBOOK OF SPEEDby Stoyan Stefanov
HIERARCHY OF NEEDS
BASELINEDESIGN
1. On Brand: Clear brand positioning and messaging2. Articulate: Careful wordsmithing, and strong editorial
control3. Beautiful: Excellence of design, photoimagery, video,
illustration4. Informative: Useful, relevant content5. Persuasive: Evidence through data: visualizing and
showing: not just telling6. Inspirational: Unique, engaging, compelling, memorable
See also:HUMAN BEHAVIOR THEORIES THAT CAN BE APPLIED TO WEB DESIGNby Alexander Dawson
DESIRED SOLUTION
BASELINEMOVING BEYOND
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
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 VISITORSby Andrew Follett
INSPIRED FUNCTIONAL DESIGN
TYPICALSOLUTIONANATOMY FOR MOST-PRACTICED HOMEPAGE AND CONTENT PAGE DESIGNS
HOMEPAGEANATOMYA TYPICAL SOLUTION
Old metaphors: the cover of your book; the lobby to your building Deliver organizational brand positioning and messaging Facilitate access to content Communicate a mental map of site offerings
GOALS
HOMEPAGEANATOMYA TYPICAL SOLUTION
CONTENTPAGEA TYPICAL SOLUTION
Design for content or entry pages is of equal importance to that of homepages
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 HOMEPAGEat Giraffe Forum
GOALS
CONTENTPAGEA TYPICAL SOLUTION
BEYONDTYPICALEXAMPLES OF INSPIRING DESIGNS
BEYONDTYPICALEXAMPLES OF INSPIRING DESIGNS
Revolutionary and evolutionary changes occur constantly in web design practice yielding opportunities for innovation
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 forms entry, to delivery of complex messages and data
01FORMDRIVENDESIGNWHEN 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.
FORMDRIVENDESIGN
HTTP://WWW.DELTA.COM
DELTA
FORMDRIVENDESIGN
HTTP://WWW.24SYMBOLS.COM
24 SYMBOLS
FORMDRIVEN
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.
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.
INTERACTIVEBRANDNARRATIVES
HTTP://WWW.WHARTON.UPENN.EDU/MBA
WHARTON - MBA
INTERACTIVEBRANDNARRATIVES
HTTP://WWW.HBS.EDU/MBA
HARVARD BUSINESS SCHOOL - MBA
04SINGLEPLANESITESLAYING DOWN ALL YOUR CONTENT IN A MASSIVE TABLEUX TRANSFORMS NAVIGATION INTO EXPLORATION. GREAT FOR 5-10 KEYPOINT CONTENT.
SINGLEPLANESITES
HTTP://STEVEANDJACQS.COM
STEVE AND JACQS
05SCROLLTRIGGEREDUXAN ELEMENT OF SURPRISE CONVERTS A NATURAL USER ACTION INTO A MORE DYNAMIC USER EXPERIENCE. GREAT FOR LINEAR NARRATIVES AND SEQUENTIAL KEYPOINTS.
SCROLLTRIGGEREDUX
HTTP://WWW.NIKEBETTERWORLD.COM
NIKE: A BETTER WORLD
SCROLLTRIGGEREDUX
HTTP://WWW.SULLIVANNYC.COM
SULLIVAN
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.
FIXEDNAVDESIGNS
HTTP://UNIONSTATIONDENVER.COM/NEIGHBORHOOD
UNION STATION NEIGHBORHOOD
07DIMENSIONALDESIGNSCREATE A SENSE OF SPACE AND PLACE THROUGH SIMULATED (NOT JUST ANIMATED) 3D.
DIMENSIONALDESIGNS
HTTP://WYSS.HARVARD.EDU
WYSS INSTITUTE
DIMENSIONALDESIGNS
HTTP://WONDER-WALL.COM/
WONDERWALL INC.
DIMENSIONALDESIGNS
HTTP://THINKINGSPACE.ECONOMIST.COM
THE ECONOMIST – THINKING SPACES
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.
TEXTMAPPING
HTTP://WWW.NYTIMES.COM/SKIMMER/#/TOP+NEWS
NEW YORK TIMES – SKIMMER
09DYNAMICVISUALIZATIONSUSE DATA TO DRIVE INTERACTIVE MAPS AND INFOGRAPHICS. DATA AS EVIDENCE DRIVES HOME POWERFUL MESSAGES. INTERACTIVITY PROMOTES UNDERSTANDING AND RETENTION.
DYNAMICVISUALIZATIONS
HTTP://COUNTERSPILL.ORG
COUNTERSPILL
DYNAMICVISUALIZATIONS
HTTP://WWW.MESSAGESFORJAPAN.COM/MESSAGES/MAP
MESSAGES FOR JAPAN
INFOMOUSDEMOFUNCTIONAL DESIGN APPLIED TO ONLINE TEXT NAVIGATION
INFOMOUSOUR INTEREST: FINDING RELEVANT INFORMATION
As we heard earlier: “It is crucial to communicate information clearly and
effectively through visual design” “The goal, regardless of project size, is to deliver design
and functionality in an easily digestible package”
Our interest is to address a related problem: How do you help your users find relevant content
buried within your site, and amidst a flood of text-based information?
INFOMOUSWHAT IS RELEVANT IN TODAY’S NEWS?
INFOMOUSWHAT ARE PEOPLE SAYING ABOUT…
...a current event?
CAN YOU FIND WHAT IS RELEVANT IN THIS CONTENT?
...a product?
INFOMOUSONLINE INFORMATION IS PREDOMINANTLY TEXT-BASED
Articles Editorials Blogs
Google/Bing search results Consumer reviews Commentaries
Twitter feeds Facebook feeds LinkedIn activities
WEB SURFING BECOMES OVERWHELMING AND INFORMATION IS EASILY MISSED!
INFOMOUSSOME TYPICAL APPROACHES
News readers (e.g., Google)Specify your preferred sourcesReceive updated “feeds”
WidgetsTwitter feeds“Most read”Latest headlines
Navigation menus
INFOMOUS
The NYT Skimmer
WE’VE ALREADY SEEN SOME MORE CREATIVE APPROACHES
THESE APPROACHES IMPROVE MATTERS, BUT STILL LEAVE THE READER WITH AN OVERWHELMING AMOUNT OF INFORMATION
Newsmap
INFOMOUS
TAG CLOUDS PROVIDE A QUICK VISUAL REPRESENTATION OF THE MOST PROMINENT TERMS IN A TEXT SOURCE.
AN ALTERNATIVE APPROACH: WORD/TAG CLOUDS
INFOMOUS
TAG CLOUDS FAIL TO INCREASE EXPLORATION:“MOVE A USER SIDEWAYS TO ADDITIONAL CONTENT IN
ORDERTO BROADEN EXPERIENCE AND EXPLORATION”
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: A FADING FAD?
INFOMOUSA NEW APPROACH: INFOMOUS INTERACTIVE TEXT CLOUDS
Interactive, intuitive, based on visual representation of content
Flexible, embeddable, highly customizable Typical uses:
News readersSocial sitesSearch enginesSite navigation
INFOMOUSHOW 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 onlyINFOMOUS GOES WAY BEYOND TAG CLOUDS TO INCREASE
EXPLORATION
2. Find what is relevant
INFOMOUSINFOMOUS HELPS YOU FIND RELEVANT CONTENT AND EXPLORE
1. See the news
3. Increase exploration
INFOMOUSFOLLOW RELEVANT CONVERSATIONS
...about current events
...about products
INFOMOUSAPPLICATIONHOW TO USE INFOMOUS FOR FUNCTIONAL DESIGN
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
INFOMOUSTOUR OF SAMPLE APPLICATIONS
READER OPINIONS: THE ECONOMIST, WASHINGTON POST
ACADEMIC CONTENT: IMD
INTEGRATED NEWS SITE NAVIGATION: FCNP
BLOG NAVIGATION: NOVA SPIVACK
CONSUMER REVIEWS: DOOYOO
INFOMOUSPERFORMANCEHOW WELL DOES INFOMOUS PERFORM?
INFOMOUS
• ~6M PAGE LOADS PER MONTH• ROUGHLY 3% OF USERS ENGAGE
(ONCE OR MORE PER VISIT)• 2.5%CLICK-THROUGH BY
ENGAGED USERS
SAMPLE RESULTS: THE ECONOMISTUSER COMMENTARY PAGES
• AVERAGE TIME ON SITE FOR ALL VISITS:21 SEC.
• AVERAGE TIME ON SITE FOR ENGAGED USERS: 12+ MINUTES
• 35X INCREASES IN STICKINESS!
INFOMOUS
• ~6K PAGE LOADS• 10.5% USER ENGAGEMENT (644/6151)• OVER 50% CLICK-THROUGH BY ENGAGED
USERS (350/644)• 7X INCREASE IN LENGTH OF VISIT FOR
ENGAGED USERS (761/110)
SAMPLE RESULTS: THE WASHINGTON POSTSPECIAL PAGE ON UNEMPLOYMENT
INFOMOUS
FUTUREM: EVENTS PAGE• 1.4% ENGAGEMENT• 14.6% CLICK-THROUGH• 52% SHORTER VISITS!
CAVEAT EMPTOR: NOT A SILVER BULLET!
WHAT WENT WRONG???
INFOMOUS
JUST LIKE ANY OTHER “WIDGET,” MANY FACTORS IMPACT INFOMOUSPERFORMANCE Page placement:
WashingtonPost is above the fold – 10.5% engagementEconomist is below the fold – 3% engagement
Title: need to make it clear what this widget is supposed to doAlways include “interactive”
Content sources: Choose meaningful feedsMore feeds are better in some cases
Word quality: curate cloud content carefullyBlend of sources, hide meaningless/confusing words
Integration: take care of size and layoutMatch the site look-and-feel
Exploration: think about where you are taking your usersFutureM’s feeds are all pointing to external sites!
LESSONS LEARNED
AUDIENCECASESTUDYUNIVERSITY OF ARKANSAS FOR MEDICAL SCIENCESFAY W. BOOZMAN COLLEGE OF PUBLIC HEALTH
UAMSQUICKFIXCOLLEGE OF PUBLIC HEALTH
1.Non-standard primary and secondary navigation scheme2.Long, list-style navigation without effective clustering3.Endorser site homepage linked to logo creates navigation issue4.Inability to jump laterally to sibling sites or overtly up/down to endorser site5.Non-standard location of Search functionality6.Lack of well-crafted brand message and positioning7.Impersonal hero image lacking in meaning8.No social media streaming9.Mysterious ad lobs10.Inconsistent site design in subsections11.Non-adaptive design, optimized for older screen resolutions12.Use of image-mapped graphical text impairs discoverability13.Roll-overs, flyouts, and dropdowns could optimize navigation design14.Brand and content carousels could clarify organizational messages, and featured content
RAPID AUDIT
UAMSCOLLEGE OF PUBLIC HEALTH
1.LOREM IPSUM SIT DOLOR2.LOREM IPSUM SIT DOLOR3.LOREM IPSUM SIT DOLOR4.LOREM IPSUM SIT DOLOR:
SOLUTION RESULTS
UAMSQUICKFIXCHESKLIST FROM EARLIER:
1. On Brand: Clear brand positioning and messaging a2. Articulate: Careful wordsmithing, and strong editorial
control a3. Beautiful: Excellence of design, photoimagery, video,
illustration a4. Informative: Useful, relevant content a5. Persuasive: Evidence through data: visualizing and
showing: not just telling a6. Inspirational: Unique, engaging, compelling,
memorable
DESIRED SOLUTION
UXDESIGNMORE OF WHAT WE DIDN’T DO
1.Problem/opportunities defined by Discovery2.Baseline functionality dictated by wireframes3.Concept ideation through sketches, prototypes, and renderings4.Validation through testing
UX PROCESS
UXDESIGNPROCESS FOR WYSS INSTITUTE FOR BIOLOGICALLY INSPIRED ENGINEERING
http://ifactory.com/clients/wibie/design/artdir1/index.html(password protected)
DISCOVERY > IA > UX > DESIGN > IMPLEMENTATION > MAINTENANCE >
BADEXAMPLESSITES THAT DIDN’T CUT IT
BADEXAMPLESSITES 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/shophttp://www.cascadebreweryco.com.au/http://lieblingdesign.dk/http://deeptime.info/http://natl.tv/
Q&A
THANKYOUIFACTORY and INFOMOUS FOR FUTUREM
PAOLO GAUDIANO, PAOLO@INFOMOUS.COM, 617.520.1070PETE GAIONI, PETE@IFACTORY.COM, 617 426.0609LORI LOTURCO, LORI@IFACTORY.COM, 617 426.0609JEREMY PERKINS, JEREMY@IFACTORY.COM, 617.426.0609ALEN YEN, ALEN@IFACTORY.COM, 617.426.0609
SEPTEMBER 12, 2011WWW.IFACTORY.COM