What you don't know will hurt you: Designing with and for existing content
20 likes14,884 views
The document discusses the importance of structured and simplified content design in web development, emphasizing the need for modular content that is logically organized and easily navigable. It outlines the challenges faced in achieving this, including the complexities of existing systems and the necessity of strategic planning within organizations. The text advocates for a thorough content audit to streamline web presence and enhance user experience.
What you don't know will hurt you: Designing with and for existing content
- 1. what you don’t know will hurt youDESIGNING WITH & FOR EXISTING CONTENT sara wachter- boettcher mobilism 2013 amsterdam www.flickr.com/photos/gcfairch/4385543669/
- 4. free app!?
- 5. I’ve been there, too.
- 8. What are we doing about it?
- 9. same old same old Mad Men / AMC
- 10. or, we get out Robert Libetti / Business Insider
- 11. Time for some hard truths.
- 12. ‘‘Making something look simple is easy; making something simple to use is much harder—especially when the underlying systems are complex —but that’s what we should be doing. Design Principle #4, UK Government Digital Service
- 14. this is simple
- 16. nor is this
- 18. Complex topics Changing laws Years of additions Endless modifications Aging platforms
- 19. media queries? toss on some www.123rf.com
- 20. What we really need is some structure.
- 21. Trim, compact writing Modular content Logically broken into parts Clearly labeled Cleanly stored
- 23. But it doesn’t just happen.
- 24. ‘‘Structuring content requires synthesizing a swath of sources, designing usable systems, changing organizations, training personnel, soothing egos, adjusting priorities, allaying fears, reallocating resources... This is big “S” strategy. Rachel Lovinger, “Strategy on the Inside”
- 26. If you want to get inside an organization, get inside its content.
- 27. Location Section Subsection Sub- subsection Page Name IA Notes Content Notes Update Plan HC Pr http://calexport.fas.harvard.edu/cgi-bin/calendar/exporter.cgi?view=monthviewcal=117046template_url=https%3A%2F%2Fblue-sea-697d.quartiers047.workers.dev%3A443%2Fhttp%2Fwww.admissions.college.harvard.edu%2Fvisit%2Fcalendar.htmlAdmissions Visit Harvard Visitor's Center Calendar: Tours Information SessionsVisitor's Center Calendar: Tours Information SessionsCurrently this is offsite; should this be integrated into the College site?Calendar for when visits are happening. Keep Hig http://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 Hig http://college.harvard.edu/icb/icb.doCollege College Homepage - Page doesn't have much content unique to it. Is primarily a feed ofKeep Hig http://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 ; doesn't seeIndividual events include attributes for: Event Name, Start Time/DatKeep Hig http://freshmanseminars.college.harvard.edu/icb/icb.do?keyword=k61681pageid=icb.page270690Freshman Seminars About the Program Director's WelcomeDirector's 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 Low http://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 Mid http://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 Low http://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 Low http://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 Low http://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 Mid http://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 ApplicatioMid http://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 Low http://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 Low http://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 Low http://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 it's not where you review appRename Low http://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 Mid http://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 Hig http://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 Mid http://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 Mid http://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 Mid http://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 Low http://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 Low http://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 Low http://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 Low http://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 Low http://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 serviceLow http://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 serviceLow http://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 serviceLow http://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 serviceLow http://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 Mid http://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 Low http://wintersession.college.harvard.edu/icb/icb.do?keyword=winterbreakpageid=icb.page385332Wintersession For Faculty For Faculty Content talks about President's January Innovation Fund, but doesKeep Low http://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 Low http://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 Mid http://wintersession.college.harvard.edu/icb/icb.do?keyword=winterbreakpageid=icb.page477831Wintersession Connect with Alumni Connect with Alumni - Long page but doesn't need to be updated until next year.Keep Low http://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 serviceLow http://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 Low http://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 Low http://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 Low http://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 Mid http://admissions.college.harvard.edu/about/beyond/athletics.htmlAdmissions About Harvard Beyond the ClassroomAthletics - Content is good, direct tone, clear. Keep Mid http://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 Mid http://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 Hig http://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 Mid http://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 Mid http://admissions.college.harvard.edu/about/beyond/politics.htmlAdmissions About Harvard Beyond the ClassroomGovernment Politics - Content is passive and impersonal but informative.Keep Mid http://admissions.college.harvard.edu/about/beyond/studyabroad.htmlAdmissions About Harvard Beyond the ClassroomStudy Abroad - Content is passive and impersonal but informative.Keep Mid http://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 Mid http://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 Mid http://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 Mid audit the content
- 28. ‘‘A mind-numbingly detailed odyssey through your web site. Jeffrey Veen, Adaptive Path, 2002
- 29. REASONS TO GET TO KNOW YOUR CONTENT 3
- 30. LESS CRAP, NOT SHOEHORNED CRAP 1
- 32. WHAT DO YOU HAVE? ✦ Quantity ✦ Location ✦ Topics
- 33. DOES IT FIT YOUR STRATEGY? ✦ Useful for users ✦ Drives business goals ✦ Supports your brand
- 34. IS IT ANY GOOD? ✦ Up to date ✦ Well written ✦ Organized ✦ Accessible
- 37. the win:SHORT-TERM Designing for—and supporting—only what actually matters means less time on content migration. (Oh, and less crap for users, too.)
- 38. This opens up conversations about priorities, roles, and responsibilities before launch. the win:LONG-TERM
- 40. ‘‘Design without content is designing with your eyes closed. Stephen Hay, Yesterday Morning
- 44. Representative content is a set that includes one example of each content type you need to support.
- 47. CONTENT TYPES ✦ Based on patterns in content’s shape, purpose, and “chunks.” ✦ Categorize like content (like services, bios, people, events). ✦ Can be more or less granular, depending on your scope.
- 48. CONTENT REQUIREMENTS ✦ Define which attributes a content type needs. ✦ Set formats, character limits, and optional fields. ✦ Define what you’ll have to work with—and design for.
- 49. Content maps logically to templates and pattern libraries, rather than rotting in generic pages. the win:SHORT-TERM
- 50. When every content type has a purpose, you’re less likely to end up with stuff you don’t need. the win:LONG-TERM
- 51. RELY ON SYSTEMS, NOT JUST PAGES 3
- 52. ‘‘Fitting a complex, multi-level navigation onto small screens is difficult no matter what way you slice it. Brad Frost, “Complex Navigation Patterns for Responsive Design”
- 55. Structured content can help you.
- 57. CONTENT MODEL ✦ Defines a system of content. ✦ Establishes relationships between content types. ✦ Defines shared attributes.
- 58. METADATA ✦ Provides additional information about content (topic; author date). ✦ Can be exposed, but the real magic is behind the scenes.
- 59. RULE-BASED LAYOUTS ✦ Rules use metadata to decide how and where to display content. ✦ Can control combinations of content modules, related items, excerpts, and prioritization.
- 62. Makes related content actually relevant.
- 63. Content is easier to access in range of natural, useful ways—without having to lay out every damn page. the win:SHORT-TERM
- 64. When content is a system that supports the business, it’s not tied to just one destination. People collaborate—rather than post whatever, wherever. the win:LONG-TERM
- 67. this looks nothing like the comps!
- 68. Don’t let broken content break you.
- 71. thank you, MOBILISM Flickr images used via CC-Attribution license unless otherwise noted. sarawb.com @sara_ann_marie rfld.me/content-everywhere