+ All Categories
Home > Design > Functional Design Lab

Functional Design Lab

Date post: 30-Oct-2014
Category:
Upload: ifactory
View: 12 times
Download: 1 times
Share this document with a friend
Description:
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
Popular Tags:
82
FUNCTIONALDESIGN LAB IFACTORY & INFOMOUS FOR FUTUREM September 12, 2011
Transcript
Page 1: Functional Design Lab

FUNCTIONALDESIGNLABIFACTORY & INFOMOUS FOR FUTUREM

September 12, 2011

Page 2: Functional Design Lab

OVERVIEW11:30AM – 1:30PM

Page 3: Functional Design Lab

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?

Page 4: Functional Design Lab

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

Page 5: Functional Design Lab

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

Page 6: Functional Design Lab

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

Page 7: Functional Design Lab

BASELINEESSENTIAL PREREQUISITES

Page 8: Functional Design Lab

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

Page 9: Functional Design Lab

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

Page 10: Functional Design Lab

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 >

Page 11: Functional Design Lab

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

Page 12: Functional Design Lab

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

Page 13: Functional Design Lab

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

Page 14: Functional Design Lab

TYPICALSOLUTIONANATOMY FOR MOST-PRACTICED HOMEPAGE AND CONTENT PAGE DESIGNS

Page 15: Functional Design Lab

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

Page 16: Functional Design Lab

HOMEPAGEANATOMYA TYPICAL SOLUTION

Page 17: Functional Design Lab

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

Page 18: Functional Design Lab

CONTENTPAGEA TYPICAL SOLUTION

Page 19: Functional Design Lab

BEYONDTYPICALEXAMPLES OF INSPIRING DESIGNS

Page 20: Functional Design Lab

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

Page 21: Functional Design Lab

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.

Page 22: Functional Design Lab

FORMDRIVENDESIGN

HTTP://WWW.DELTA.COM

DELTA

Page 23: Functional Design Lab

FORMDRIVENDESIGN

HTTP://WWW.24SYMBOLS.COM

24 SYMBOLS

FORMDRIVEN

Page 24: Functional Design Lab

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.

Page 25: Functional Design Lab

BROWSETOOLKITS

HTTP://WWW.DANA-FARBER.ORG

DANA-FARBER CANCER INSTITUTE

Page 26: Functional Design Lab

BROWSETOOLKITS

HTTP://OED.COM

OXFORD ENGLISH DICTIONARY

Page 27: Functional Design Lab

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.

Page 28: Functional Design Lab

INTERACTIVEBRANDNARRATIVES

HTTP://WWW.WHARTON.UPENN.EDU/MBA

WHARTON - MBA

Page 29: Functional Design Lab

INTERACTIVEBRANDNARRATIVES

HTTP://WWW.HBS.EDU/MBA

HARVARD BUSINESS SCHOOL - MBA

Page 30: Functional Design Lab

04SINGLEPLANESITESLAYING DOWN ALL YOUR CONTENT IN A MASSIVE TABLEUX TRANSFORMS NAVIGATION INTO EXPLORATION. GREAT FOR 5-10 KEYPOINT CONTENT.

Page 31: Functional Design Lab

SINGLEPLANESITES

HTTP://STEVEANDJACQS.COM

STEVE AND JACQS

Page 32: Functional Design Lab

SINGLEPLANESITES

HTTP://WEAREMANIC.COM

WE ARE MANIC

Page 33: Functional Design Lab

05SCROLLTRIGGEREDUXAN ELEMENT OF SURPRISE CONVERTS A NATURAL USER ACTION INTO A MORE DYNAMIC USER EXPERIENCE. GREAT FOR LINEAR NARRATIVES AND SEQUENTIAL KEYPOINTS.

Page 34: Functional Design Lab

SCROLLTRIGGEREDUX

HTTP://NIZOAPP.COM

NIZO

Page 35: Functional Design Lab

SCROLLTRIGGEREDUX

HTTP://WWW.NIKEBETTERWORLD.COM

NIKE: A BETTER WORLD

Page 36: Functional Design Lab

SCROLLTRIGGEREDUX

HTTP://WWW.SULLIVANNYC.COM

SULLIVAN

Page 37: Functional Design Lab

SCROLLTRIGGEREDUX

HTTP://WWW.YURBUDS.COM

YURBUDS

Page 38: Functional Design Lab

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.

Page 39: Functional Design Lab

FIXEDNAVDESIGNS

HTTP://UNIONSTATIONDENVER.COM/NEIGHBORHOOD

UNION STATION NEIGHBORHOOD

Page 40: Functional Design Lab

FIXEDNAVDESIGNS

HTTP://TOUCHTECH.CO.NZ

TOUCHTECH

Page 41: Functional Design Lab

07DIMENSIONALDESIGNSCREATE A SENSE OF SPACE AND PLACE THROUGH SIMULATED (NOT JUST ANIMATED) 3D.

Page 42: Functional Design Lab

DIMENSIONALDESIGNS

HTTP://WYSS.HARVARD.EDU

WYSS INSTITUTE

Page 43: Functional Design Lab

DIMENSIONALDESIGNS

HTTP://WONDER-WALL.COM/

WONDERWALL INC.

Page 44: Functional Design Lab

DIMENSIONALDESIGNS

HTTP://THINKINGSPACE.ECONOMIST.COM

THE ECONOMIST – THINKING SPACES

Page 45: Functional Design Lab

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.

Page 46: Functional Design Lab

TEXTMAPPING

HTTP://WWW.NYTIMES.COM/SKIMMER/#/TOP+NEWS

NEW YORK TIMES – SKIMMER

Page 47: Functional Design Lab

TEXTMAPPING

HTTP://NEWSMAP.JP/

NEWSMAP

Page 48: Functional Design Lab

09DYNAMICVISUALIZATIONSUSE DATA TO DRIVE INTERACTIVE MAPS AND INFOGRAPHICS. DATA AS EVIDENCE DRIVES HOME POWERFUL MESSAGES. INTERACTIVITY PROMOTES UNDERSTANDING AND RETENTION.

Page 49: Functional Design Lab

DYNAMICVISUALIZATIONS

HTTP://COUNTERSPILL.ORG

COUNTERSPILL

Page 50: Functional Design Lab

DYNAMICVISUALIZATIONS

HTTP://WWW.MESSAGESFORJAPAN.COM/MESSAGES/MAP

MESSAGES FOR JAPAN

Page 51: Functional Design Lab

INFOMOUSDEMOFUNCTIONAL DESIGN APPLIED TO ONLINE TEXT NAVIGATION

Page 52: Functional Design Lab

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?

Page 53: Functional Design Lab

INFOMOUSWHAT IS RELEVANT IN TODAY’S NEWS?

Page 54: Functional Design Lab

INFOMOUSWHAT ARE PEOPLE SAYING ABOUT…

...a current event?

CAN YOU FIND WHAT IS RELEVANT IN THIS CONTENT?

...a product?

Page 55: Functional Design Lab

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!

Page 56: Functional Design Lab

INFOMOUSSOME TYPICAL APPROACHES

News readers (e.g., Google)Specify your preferred sourcesReceive updated “feeds”

WidgetsTwitter feeds“Most read”Latest headlines

Navigation menus

Page 57: Functional Design Lab

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

Page 58: Functional Design Lab

INFOMOUS

TAG CLOUDS PROVIDE A QUICK VISUAL REPRESENTATION OF THE MOST PROMINENT TERMS IN A TEXT SOURCE.

AN ALTERNATIVE APPROACH: WORD/TAG CLOUDS

Page 59: Functional Design Lab

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?

Page 60: Functional Design Lab

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

Page 61: Functional Design Lab

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

Page 62: Functional Design Lab

2. Find what is relevant

INFOMOUSINFOMOUS HELPS YOU FIND RELEVANT CONTENT AND EXPLORE

1. See the news

3. Increase exploration

Page 63: Functional Design Lab

INFOMOUSFOLLOW RELEVANT CONVERSATIONS

...about current events

...about products

Page 64: Functional Design Lab

INFOMOUSAPPLICATIONHOW TO USE INFOMOUS FOR FUNCTIONAL DESIGN

Page 65: Functional Design Lab

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

Page 66: Functional Design Lab

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

Page 67: Functional Design Lab

INFOMOUSPERFORMANCEHOW WELL DOES INFOMOUS PERFORM?

Page 68: Functional Design Lab

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!

Page 69: Functional Design Lab

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

Page 70: Functional Design Lab

INFOMOUS

FUTUREM: EVENTS PAGE• 1.4% ENGAGEMENT• 14.6% CLICK-THROUGH• 52% SHORTER VISITS!

CAVEAT EMPTOR: NOT A SILVER BULLET!

WHAT WENT WRONG???

Page 71: Functional Design Lab

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

Page 72: Functional Design Lab

AUDIENCECASESTUDYUNIVERSITY OF ARKANSAS FOR MEDICAL SCIENCESFAY W. BOOZMAN COLLEGE OF PUBLIC HEALTH

Page 73: Functional Design Lab

UAMS

HTTP://UAMS.EDU/COPH

COLLEGE OF PUBLIC HEALTH

Page 74: Functional Design Lab

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

Page 75: Functional Design Lab

UAMSCOLLEGE OF PUBLIC HEALTH

1.LOREM IPSUM SIT DOLOR2.LOREM IPSUM SIT DOLOR3.LOREM IPSUM SIT DOLOR4.LOREM IPSUM SIT DOLOR:

SOLUTION RESULTS

Page 76: Functional Design Lab

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

Page 77: Functional Design Lab

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

Page 78: Functional Design Lab

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 >

Page 79: Functional Design Lab

BADEXAMPLESSITES THAT DIDN’T CUT IT

Page 80: Functional Design Lab

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/

Page 81: Functional Design Lab

Q&A

Page 82: Functional Design Lab

THANKYOUIFACTORY and INFOMOUS FOR FUTUREM

PAOLO GAUDIANO, [email protected], 617.520.1070PETE GAIONI, [email protected], 617 426.0609LORI LOTURCO, [email protected], 617 426.0609JEREMY PERKINS, [email protected], 617.426.0609ALEN YEN, [email protected], 617.426.0609

SEPTEMBER 12, 2011WWW.IFACTORY.COM


Recommended