What you don't know will hurt you: Designing with and for existing content

13,411 views
13,260 views

Published on

Are you trying to make responsive design scale for a complex site? Building an app, but your organization doesn't have an API yet? If so, you've probably got legacy content—content that already exists, and that doesn't fit neatly into your new project.

What do you do? You could ignore it and end up with one of those responsive homepages that devolve into big content blobs after just one tap, or a one-off mobile site that no one can remember to maintain. You could put it off until it becomes the bane of your existence: the thing that "breaks" your design, because it's way messier than you’ve planned for. Or, you could deal with it.

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

No Downloads
Views
Total views
13,411
On SlideShare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
0
Comments
0
Likes
20
Embeds 0
No embeds

No notes for slide

What you don't know will hurt you: Designing with and for existing content

  1. 1. what you don’tknow will hurt youDESIGNING WITH & FOR EXISTINGCONTENTsara wachter-boettchermobilism 2013amsterdamwww.flickr.com/photos/gcfairch/4385543669/
  2. 2. we sureare eagerMOBILE
  3. 3.  FIRSTwww.flickr.com/photos/islaclairvaux/3457249348
  4. 4. free app!?
  5. 5. I’ve been there, too.
  6. 6. beneathwhat lieswww.123rf.com
  7. 7. is this it?www.flickr.com/photos/cedwardmoran/3649399678
  8. 8. What are we doing about it?
  9. 9. same oldsame oldMad Men / AMC
  10. 10. or, weget outRobert Libetti / Business Insider
  11. 11. Time for some hard truths.
  12. 12. ‘‘Making something look simple iseasy; making something simple touse is much harder—especially whenthe underlying systems are complex—but that’s what we should be doing.Design Principle #4,UK Government Digital Service
  13. 13. this is simple
  14. 14. www.flickr.com/photos/kzirkel/8161123197/this is not
  15. 15. nor is this
  16. 16. and definitelynot this
  17. 17. Complex topicsChanging lawsYears of additionsEndless modificationsAging platforms
  18. 18. media queries?toss on somewww.123rf.com
  19. 19. What we really need is somestructure.
  20. 20. Trim, compact writingModular contentLogically broken into partsClearly labeledCleanly stored
  21. 21. This is foundational.
  22. 22. But it doesn’t just happen.
  23. 23. ‘‘Structuring content requires synthesizing aswath of sources, designing usable systems,changing organizations, training personnel,soothing egos, adjusting priorities, allayingfears, reallocating resources... This is big“S” strategy.Rachel Lovinger,“Strategy on the Inside”
  24. 24. it takes timewww.flickr.com/photos/snappa2006/2770979727
  25. 25. If you want to get inside anorganization, get inside its content.
  26. 26. Location Section SubsectionSub-subsection Page Name IA Notes Content Notes Update PlanHCPrhttp://calexport.fas.harvard.edu/cgi-bin/calendar/exporter.cgi?view=monthviewcal=117046template_url=http%3A%2F%2Fwww.admissions.college.harvard.edu%2Fvisit%2Fcalendar.htmlAdmissions Visit Harvard Visitors Center Calendar: Tours Information SessionsVisitors Center Calendar: Tours Information SessionsCurrently this is offsite; should this be integrated into the College site?Calendar for when visits are happening. Keep Highttp://www.college.harvard.edu/icb/icb.do?keyword=k61161tabgroupid=icb.tabgroup84423College Academics Academics Most subpages go offsite, except for academic requirements. But should that be the case? Seems like someLong, multiparagraph page of content without a clear purpose. NeeKeep Highttp://college.harvard.edu/icb/icb.doCollege College Homepage - Page doesnt have much content unique to it. Is primarily a feed ofKeep Highttp://events.college.harvard.edu/Events Events Events Calendar Will this be part of our build? Current design is completely different from the rest of the site and ; doesnt seeIndividual events include attributes for: Event Name, Start Time/DatKeep Highttp://freshmanseminars.college.harvard.edu/icb/icb.do?keyword=k61681pageid=icb.page270690Freshman Seminars About the Program Directors WelcomeDirectors Welcome Completely different design and nav than College site. Pull into main College IA?Content is fine as is, but not that useful. Could likely be consolidateMerge Lowhttp://freshmanseminars.college.harvard.edu/icb/icb.do?keyword=k61681pageid=icb.page270693Freshman Seminars About the Program In the News In the News Completely different design and nav than College site. Pull into main College IA?Content is out of date (posts are about professors research makingDelete Midhttp://freshmanseminars.college.harvard.edu/icb/icb.do?keyword=k61681pageid=icb.page270691Freshman Seminars Contact Us Contact Us Completely different design and nav than College site. Pull into main College IA?Content is straightforward and page is simple.Keep Lowhttp://freshmanseminars.college.harvard.edu/icb/icb.do?keyword=k61681pageid=icb.page298788Freshman Seminars For Faculty Committee For Faculty Committee Completely different design and nav than College site. Pull into main College IA?Content is straightforward and page is simple.Keep Lowhttp://freshmanseminars.college.harvard.edu/icb/icb.do?keyword=k61681tabgroupid=icb.tabgroup94471Freshman Seminars For Faculty For Faculty Completely different design and nav than College site. Pull into main College IA?Content is written like a letter, signed by the program director. DoesKeep Lowhttp://freshmanseminars.college.harvard.edu/icb/icb.do?keyword=k61681pageid=icb.page506998Freshman Seminars For Freshmen Student and Faculty FeedbackStudent and Faculty FeedbackCompletely different design and nav than College site. Pull into main College IA?Content seems to be formatted with a different font and custom layoSplit - create modules Midhttp://freshmanseminars.college.harvard.edu/icb/icb.do?keyword=k61681tabgroupid=icb.tabgroup86241Freshman Seminars For Freshmen Apply to Seminars Apply to Seminars - Duplicates http://freshmanseminars.college.harvard.edu/icb/icb.do?Merge with other ApplicatioMidhttp://freshmanseminars.college.harvard.edu/icb/icb.do?keyword=k61681pageid=icb.page295201Freshman Seminars For Faculty Propose a SeminarPropose a Seminar Completely different design and nav than College site. Pull into main College IA?Info on how to propose a seminar, eligibility, etc. Would be nice if coKeep Lowhttp://freshmanseminars.college.harvard.edu/icb/icb.do?keyword=k61681pageid=icb.page270197Freshman Seminars For Faculty Helpful Information for InstructorsHelpful Information for InstructorsCompletely different design and nav than College site. Pull into main College IA?Links to offsite resources and downloadable formsKeep Lowhttp://freshmanseminars.college.harvard.edu/icb/icb.do?keyword=k61681pageid=icb.page477858Freshman Seminars Seminars Seminar Changes/CancellationsSeminar Changes/CancellationsCompletely different design and nav than College site. Pull into main College IA?Lists cancelled seminars. Keep Lowhttp://freshmanseminars.college.harvard.edu/icb/icb.do?keyword=k61681pageid=icb.page270199Freshman Seminars For Faculty Review ApplicationsReview Applications Completely different design and nav than College site. Pull into main College IA?Naming of page seems strange since its not where you review appRename Lowhttp://freshmanseminars.college.harvard.edu/icb/icb.do?keyword=k61681tabgroupid=icb.tabgroup145480Freshman Seminars About the Program About the Program Completely different design and nav than College site. Pull into main College IA?Not a lot of content about the program—seems to mostly talk aboKeep Midhttp://freshmanseminars.college.harvard.edu/icb/icb.doFreshman Seminars Freshman Seminars Completely different design and nav than College site. Pull into main College IA?Overview content and video are very helpful - tone of copy could beKeep Highttp://freshmanseminars.college.harvard.edu/icb/icb.do?keyword=k61681tabgroupid=icb.tabgroup86240Freshman Seminars Seminars Application InformationApplication Information Completely different design and nav than College site. Pull into main College IA?Page has a lot of content, but the apply button is prominent, whichKeep Midhttp://freshmanseminars.college.harvard.edu/icb/icb.do?keyword=k61681tabgroupid=icb.tabgroup99155Freshman Seminars For Freshmen For Freshmen Completely different design and nav than College site. Pull into main College IA?Page has a video and download at the top that are quite large. CopKeep Midhttp://freshmanseminars.college.harvard.edu/icb/icb.do?keyword=k61681tabgroupid=icb.tabgroup138909Freshman Seminars Seminars Seminars Completely different design and nav than College site. Pull into main College IA?Seminar content is being pulled in from freshsem.fas.harvard.edu. CKeep Midhttp://freshmanseminars.college.harvard.edu/icb/icb.do?keyword=k61681pageid=icb.page556258Freshman Seminars Seminars Spring Meeting Times and LocationsSpring Meeting Times and LocationsCompletely different design and nav than College site. Pull into main College IA?Table of seminars and times. Keep Lowhttp://freshmanseminars.college.harvard.edu/icb/icb.do?keyword=k61681tabgroupid=icb.tabgroup94173Freshman Seminars Seminars Fall Seminar Meeting Times and LocationsFall Seminar Meeting Times and LocationsCompletely different design and nav than College site. Pull into main College IA?Table of seminars and times. Keep Lowhttp://freshmanseminars.college.harvard.edu/icb/icb.do?keyword=k61681pageid=icb.page263169Freshman Seminars For Freshmen Freshman FAQs Freshman FAQs Completely different design and nav than College site. Pull into main College IA?Would be nice to use an FAQ module for these. Content of individuKeep Lowhttp://freshmanseminars.college.harvard.edu/icb/icb.do?keyword=k61681pageid=icb.page270226Freshman Seminars For Faculty Faculty FAQs Faculty FAQs Completely different design and nav than College site. Pull into main College IA?Would be nice to use an FAQ module for these. Content of individuKeep Lowhttp://wintersession.college.harvard.edu/icb/icb.do?keyword=winterbreakpageid=icb.page391128Wintersession Other January Programs Other January ProgramsThe other nomenclature is not very useful: Other than what?All content on this page is about trips students can join. Should theRename Lowhttp://wintersession.college.harvard.edu/icb/icb.do?keyword=winterbreaktabgroupid=icb.tabgroup151676Wintersession Campus Services Campus Services - Blank page - should have content and be a wayfinder for subpagesMerge with student serviceLowhttp://wintersession.college.harvard.edu/icb/icb.do?keyword=winterbreaktabgroupid=icb.tabgroup151678Wintersession Campus Services Library Hours Library Hours - Blurb just says click HERE for library calendar and sends user to thMerge with student serviceLowhttp://wintersession.college.harvard.edu/icb/icb.do?keyword=winterbreakpageid=icb.page315737Wintersession Campus Services Shuttle Services Shuttle Services - Content could be streamlined and more concise, and send users toMerge with student serviceLowhttp://wintersession.college.harvard.edu/icb/icb.do?keyword=winterbreakpageid=icb.page315739Wintersession Campus Services Dining Locations and HoursDining Locations and Hours- Content could be streamlined and more concise.Merge with student serviceLowhttp://wintersession.college.harvard.edu/icb/icb.doWintersession Wintersession HomepageSame design as College pages, but navigation changes completely. This site is not easily available from theContent hierarchy is strange—basic content explaining WintersessiKeep Midhttp://wintersession.college.harvard.edu/icb/icb.do?keyword=winterbreaktabgroupid=icb.tabgroup158438Wintersession On-Campus Housing On-Campus Housing - Content is clear and well organized. Link to https://starrez.fas.harvaKeep Lowhttp://wintersession.college.harvard.edu/icb/icb.do?keyword=winterbreakpageid=icb.page385332Wintersession For Faculty For Faculty Content talks about Presidents January Innovation Fund, but doesKeep Lowhttp://wintersession.college.harvard.edu/icb/icb.do?keyword=winterbreaktabgroupid=icb.tabgroup158475Wintersession 2013 Wintersession Programs 2013 Wintersession ProgramsCalendar of Wintersession events seems to be pulled in from a Google calendar—is this right? Would be greLead-in content is sparse—could use some warmth.Keep Lowhttp://wintersession.college.harvard.edu/icb/icb.do?keyword=winterbreakpageid=icb.page305618Wintersession Frequently Asked Questions Frequently Asked QuestionsLots of different FAQs on the site. Could these be made into structured modules and tagged to appear in FALight editing for voice/tone and clearer, more concise language.Keep Midhttp://wintersession.college.harvard.edu/icb/icb.do?keyword=winterbreakpageid=icb.page477831Wintersession Connect with Alumni Connect with Alumni - Long page but doesnt need to be updated until next year.Keep Lowhttp://wintersession.college.harvard.edu/icb/icb.do?keyword=winterbreakpageid=icb.page315736Wintersession Campus Services Library Hours Gym Hours - No content and page is set up as subpage of library.Merge with student serviceLowhttp://wintersession.college.harvard.edu/icb/icb.do?keyword=winterbreakpageid=icb.page563620Wintersession Faculty Alumni Book Talks Faculty Alumni Book Talks- No content on the page. Should pages like this exist without contenKeep Lowhttp://wintersession.college.harvard.edu/icb/icb.do?keyword=winterbreaktabgroupid=icb.tabgroup151677Wintersession 2013 Wintersession ProgramsSubmit an Activity Submit an Activity Sends user offsite to login-only Wintersession activities portalOffsite - login page Keep Lowhttp://wintersession.college.harvard.edu/icb/icb.do?keyword=winterbreakpageid=icb.page478659Wintersession Harvard Travel Tools Harvard Travel Tools Unclear at first what this page is for. Copy has typos and could useKeep Lowhttp://admissions.college.harvard.edu/about/beyond/arts.htmlAdmissions About Harvard Beyond the ClassroomThe Arts - Content is good, but could use a tone refresh and more breakdownKeep Midhttp://admissions.college.harvard.edu/about/beyond/athletics.htmlAdmissions About Harvard Beyond the ClassroomAthletics - Content is good, direct tone, clear. Keep Midhttp://admissions.college.harvard.edu/about/beyond/research.htmlAdmissions About Harvard Beyond the ClassroomResearch - Content is high quality and broken down nicely—very clear. Could uKeep Midhttp://admissions.college.harvard.edu/about/beyond/index.htmlAdmissions About Harvard Beyond the ClassroomBeyond the Classroom - Content is lengthier than needed for a page used to drive visitors inKeep Highttp://admissions.college.harvard.edu/about/beyond/community.htmlAdmissions About Harvard Beyond the ClassroomCommunity Outreach - Content is light and could use more specifics and details.Keep Midhttp://admissions.college.harvard.edu/about/beyond/cultural.htmlAdmissions About Harvard Beyond the ClassroomCultural Ethnic Activities.- Content is light and could use more specifics and details.Keep Midhttp://admissions.college.harvard.edu/about/beyond/politics.htmlAdmissions About Harvard Beyond the ClassroomGovernment Politics - Content is passive and impersonal but informative.Keep Midhttp://admissions.college.harvard.edu/about/beyond/studyabroad.htmlAdmissions About Harvard Beyond the ClassroomStudy Abroad - Content is passive and impersonal but informative.Keep Midhttp://admissions.college.harvard.edu/about/beyond/clubs.htmlAdmissions About Harvard Beyond the ClassroomStudent Clubs Activities- Intro content is passive and could use a refresh to be direct and enKeep Midhttp://admissions.college.harvard.edu/about/beyond/environmental.htmlAdmissions About Harvard Beyond the ClassroomSustainability. Environmental Action, and Research- Intro content is passive and could use a refresh to be direct and enKeep Midhttp://admissions.college.harvard.edu/about/beyond/rotc.htmlAdmissions About Harvard Beyond the ClassroomROTC - Intro content is passive and could use a refresh to be direct and enKeep Midauditthe content
  27. 27. ‘‘A mind-numbingly detailed odysseythrough your web site.Jeffrey Veen, Adaptive Path, 2002
  28. 28. REASONS TOGET TO KNOWYOUR CONTENT3
  29. 29. LESS CRAP, NOTSHOEHORNED CRAP1
  30. 30. FROM70kTO3kPAGES
  31. 31. WHAT DO YOU HAVE?✦ Quantity✦ Location✦ Topics
  32. 32. DOES IT FIT YOUR STRATEGY?✦ Useful for users✦ Drives business goals✦ Supports your brand
  33. 33. IS IT ANY GOOD?✦ Up to date✦ Well written✦ Organized✦ Accessible
  34. 34. outdatedredundanttrivialwww.flickr.com/photos/stevendepolo/5190591885
  35. 35. meaninglesswww.flickr.com/photos/atomicjeep/22208897/
  36. 36. the win:SHORT-TERMDesigning for—and supporting—onlywhat actually matters means less timeon content migration.(Oh, and less crap for users, too.)
  37. 37. This opens up conversations aboutpriorities, roles, and responsibilitiesbefore launch.the win:LONG-TERM
  38. 38. 2REPRESENTATIVECONTENT
  39. 39. ‘‘Design without content is designing withyour eyes closed.Stephen Hay, Yesterday Morning
  40. 40. infinitedesigners?
  41. 41. so...whichcontent?www.flickr.com/photos/tdd/4493216417
  42. 42. representativewww.flickr.com/photos/28478778@N05/5728474385/content
  43. 43. Representative contentis a set that includes one example ofeach content type you need to support.
  44. 44. CONTENT TYPES✦ Based on patterns in content’sshape, purpose, and “chunks.”✦ Categorize like content (likeservices, bios, people, events).✦ Can be more or less granular,depending on your scope.
  45. 45. CONTENT REQUIREMENTS✦ Define which attributes a contenttype needs.✦ Set formats, character limits, andoptional fields.✦ Define what you’ll have to workwith—and design for.
  46. 46. Content maps logically to templatesand pattern libraries, rather thanrotting in generic pages.the win:SHORT-TERM
  47. 47. When every content type has apurpose, you’re less likely to end upwith stuff you don’t need.the win:LONG-TERM
  48. 48. RELY ON SYSTEMS,NOT JUST PAGES3
  49. 49. ‘‘Fitting a complex, multi-level navigationonto small screens is difficult no matterwhat way you slice it.Brad Frost, “Complex Navigation Patterns forResponsive Design”
  50. 50. Structured content can help you.
  51. 51. more interconnection,less nav
  52. 52. CONTENT MODEL✦ Defines a system of content.✦ Establishes relationships betweencontent types.✦ Defines shared attributes.
  53. 53. METADATA✦ Provides additional informationabout content (topic; author date).✦ Can be exposed, but the realmagic is behind the scenes.
  54. 54. RULE-BASED LAYOUTS✦ Rules use metadata to decide howand where to display content.✦ Can control combinations ofcontent modules, related items,excerpts, and prioritization.
  55. 55. Allows for facetedsearch.
  56. 56. Makes related contentactually relevant.
  57. 57. Content is easier to access in rangeof natural, useful ways—withouthaving to lay out every damn page.the win:SHORT-TERM
  58. 58. When content is a system that supportsthe business, it’s not tied to just onedestination. People collaborate—ratherthan post whatever, wherever.the win:LONG-TERM
  59. 59. selfishlet’s getwww.flickr.com/photos/clanlife/4948367381
  60. 60. www.flickr.com/photos/pedrosimoes7/190673196/hard, right?you work
  61. 61. this looksnothing like thecomps!
  62. 62. Don’t let broken contentbreak you.
  63. 63. look,really look
  64. 64. www.123rf.comrelying on usthey’re all
  65. 65. thank you,MOBILISMFlickr images used via CC-Attribution license unless otherwise noted.sarawb.com@sara_ann_marierfld.me/content-everywhere

×