Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Designing Future-Friendly Content

4,884 views

Published on

Prepare now for the next disruption! Future friendly content is stored, structured, and connected for people and computers outside of any user interface. We’ll explore how to create content-first designs that can restructure, reuse, and remix content, making it easier to find, explore, and share.

Companion article available:https://medium.com/@carriehd/designing-future-friendly-content-modeling-structure-for-every-user-interface-7737c3952edd

Published in: Internet
  • Hey guys! Who wants to chat with me? More photos with me here 👉 http://www.bit.ly/katekoxx
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

Designing Future-Friendly Content

  1. 1. R b c R b p e = a ` = l` q l_bR =OMI=OMNS= # R E F R E S H D C WIT H ` ^ R R f b = e^ k b = ]` ^R R f bes^
  2. 2. IT IS THE YEAR 2016. t b i ` l j b = q l = q e b = c r q r R b
  3. 3. `lkqbkq=fp= bsbRvtebRbK @CARRIEHD
  4. 4. YOUR HOST ` ^ R R f b = e ^ k b = @ C A R R I E H D
  5. 5. MISSION BRIEFING 50 @CARRIEHD 1. Future-Friendly Content - What is it and why do you need it? 2. How it starts: Research 3. Understanding the subject domain 4. Bring it to life with content design 5. Using your models for interface design
  6. 6. crqrRbJcRfbkaiv=`lkqbkq STORED, STRUCTURED, AND CONNECTED FOR PEOPLE AND COMPUTERS, BEYOND THE USER INTERFACE. @CARRIEHD
  7. 7. WHERE IT STARTED O M N R = f ^ = p r j j f q
  8. 8. IA SUMMIT 2015 8 Goal: Create a future-friendly presence for annual event Need: Anticipate every future event, not just 2015 Audience: Information architects and content strategists (No pressure!) Outcome: Met our goals by practicing the same information architecture and content strategy methods we’re sharing today 0 @CARRIEHD
  9. 9. FUTURE-FRIENDLY CONTENT SOLVES PROBLEMS 9 So much content So many devices Changing design trends Organization-centric Silos 0 @CARRIEHD
  10. 10. b^`e=fkqbRc^`b=fp=^=afccbRbkq=RbmRbpbkq^qflk=lc=qeb=p^jb=pqRr`qrRba=`liib`qflk=lc=RbplrR`bpK INTERFACES ARE WINDOWS ON THE WORLD 100 @CARRIEHD il`^qflk RbplRq m^Rh elqbi tbbkfb i^ka jb^i Rbpq^rR^kq ^qqR^`qflk `e^R^`qbR `Rb^qlR tlRh
  11. 11. RbplrR`b=_bclRb= RbmRbpbkq^qflkK YOUR FIRST DESIGN DOESN’T CARE ABOUT YOUR PLATFORM OR WHAT CONTENT YOU HAVE. FORGET WEBSITES. FORGET SITEMAPS. CONSIDER THE pr_gb`q=alj^fk=AND THE RESOURCES WITHIN. @CARRIEHD
  12. 12. RESEARCH _ r f i a f k d = p e ^ R b a = r k a b R p q^ k a f k d
  13. 13. DESIGN BEGINS WITH WORDS 13 Design starts from sharing a common language Information spaces have contextual concepts, relationships, and rules Our fundamental design is a model of connected concepts in a ‘subject domain’ The interfaces we then create are representations of that abstract space 0 @CARRIEHD
  14. 14. bumbRqp=j^m=qeb=tlRiaI= rpbRp=j^Rh=qeb=mlfkqp= lc=fkqbRbpqK GOOD MODEL-BASED DESIGN HAS COMPLEXITY BEHIND THE SCENES AND CLARITY UP FRONT. FIND A BALANCE BETWEEN AUTHORITATIVE AND ACCESSIBLE. @CARRIEHD@CARRIEHD
  15. 15. “So we’re putting on a ÅçåÑÉêÉåÅÉ=ÉîÉåí about f^. This óÉ~ê we will be in jáååÉ~éçäáëI=jk. Our éêçÖê~ã has ÑìääJäÉåÖíÜ=and= äáÖÜíåáåÖ=í~äâë from fantastic ëéÉ~âÉêë and âÉóåçíÉë, and other Ñçäâë giving ÑìääJÇ~ó=and=Ü~äÑJÇ~ó=ïçêâëÜçéë, on íçéáÅë like Future-Friendly Content. _ççâ=É~êäó for that one! The main event has Ü~åÇëJçå=sessions for ÄÉÖáååÉêë and ÉñéÉêíë. We host ëÉëëáçåë and ëçÅá~ä=ÉîÉåíë in different îÉåìÉë all over the cityI=with the help of our îçäìåíÉÉêë and ëéçåëçêë.” abp`Rf_fkd=qeb=pr_gb`q=alj^fk=rkm^`hp=`lk`bmqpI=qbRjpI=Rbi^qflkpefmpI=^ka=RribpK GETTING HOLD OF THE WORDS 150 @CARRIEHD is each event an instance of the overall ‘conference’? is the topic always the same? new location each year? is this a type of talk or a duration? can a speaker also give a workshop? Is a keynote different to a speaker?what are people giving workshops called? all sessions have variable duration? is this kind of topic like the main event topic? ticketing? availability? workshops only? difficulty? which session types? different venue for each session! is social just a kind of session? can volunteers also be speakers? what about in the future? is a sponsor always associated with a session?
  16. 16. klqbp=cRlj=Rbpb^R`e=fkqbRsfbt CONCEPTS EXTRACTED 160 @CARRIEHD Brand: The overall brand, distinct from specific events. Event: The 2016 IA Summit is an event. Location: Place the event is held. Different city each year. Venue: Within the location, a specific venue (usually a hotel) houses the event. Hotel: The ‘official’ hotel for attendee accommodation. Usually this is the same as the event venue, though not necessarily. Person: An individual associated with one or more events. Role: The specific role (such as a speaker, co-chair, or volunteer) a person has within an event. A person may hold one or more roles for the same event. Topic: May refer to the subject theme of a specific session, or an overall event. Session: A specific occurrence within an event, such as a workshop or social. Session format: The type of session, such as 45m talk, social, or workshop. Track: A thematic grouping of sessions Sponsor: Company who sponsors an event or specific session
  17. 17. lkb=mlppf_ib=alj^fk=jlabi=clR=^=`lkcbRbk`bK CAPTURING THE DOMAIN MODEL 170 @CARRIEHD mbRplk Rlib bsbkq pbppflk il`^qflk pbppflk=clRj^qsbkrb qlmf` hasRole InvolvedIn HostedAt LocatedIn hasFormat hasTopic HostedAt hasTopic pmlkplR SponsoredBy qR^`h elqbi `lkcbRbk`b=_R^ka SponsoredBy partOf partOf hasAccomodation LocatedIn
  18. 18. DOMAIN MODELS R b m R b p b k q f k d = R b ^ i f q v
  19. 19. CONCEPTS 19 Concepts hold specific meaning within a subject domain We define them at a generalised level to which specific examples can be applied Concepts have their own descriptive properties 0 @CARRIEHD
  20. 20. RELATIONSHIPS 20 Relationship values explain how concepts connect in reality They help to define the structure of the working model outside of an interface Explaining in an interface ‘how’ ideas connect supports learning through linking 0 @CARRIEHD
  21. 21. THE DOMAIN MODEL 21 The domain model is our working model of how the concepts and relationships within a specific subject domain fit together It is not intended as a sitemap, nor should it be limited by our content inventory It aims to describe the subject complexity and we can decide later which parts of the model we want to expose in our interface Domain models model truth, not websites 0 @CARRIEHD
  22. 22. afpkbv=qebjb=m^RhpW=alj^fk=jlabi MODELING THE INFORMATION SPACE 220 @CARRIEHD il`^qflk RbplRq m^Rh elqbi tbbkfb i^ka jb^i Rbpq^rR^kq ^qqR^`qflk `e^R^`qbR `Rb^qlR tlRh locatedIn hasWeenie ParentResort locatedIn locatedIn hasEvent features adaptationOf adaptationOfhasAttraction CreatedBy appearsIn hasPark contains appearsIn
  23. 23. alj^fk=fp=`lkqbuqI= `lkqbkq=fp=bumRbppflkK DOMAIN MODELS CAPTURE AN OVERALL CONTEXT. CONTENT MODELS ZOOM IN TO SPECIFIC STRUCTURE. @CARRIEHD
  24. 24. FUTURE-FRIENDLY CONTENT SOLVES PROBLEMS 24 So much content So many devices Changing design trends Organization-centric Silos 0 @CARRIEHD
  25. 25. CONTENT DESIGN c R l j = ` l k ` b m q = q l = R b ^ i f q v
  26. 26. ^=`lkqbkq=jlabi=`^k=_b=aR^tk=ifhb=^=alj^fk=jlabi=tfqe=mRlmbRqv=cfbiap=^aabaK SPACECRAFT CONTENT MODEL 260 @CARRIEHD bksfRlkjbkq `R^cq=qvmb mfilq `Rb^qfsb=tlRh pm^`b`R^cq fksbkqlR FIRST NAME / LAST NAME PHOTO AFFILIATION YEAR OF BIRTH BIOGRAPHY NAME PHOTO DESCRIPTION LENGTH SPEED WEIGHT SERVICE YEAR FIRST NAME / LAST NAME YEAR OF BIRTH PHOTO BIOGRAPHY TITLE AUTHOR DESCRIPTION RELEASE YEAR NAME PHOTO DESCRIPTION NAME DESCRIPTION
  27. 27. @CARRIEHD / @MIKEATHERTON Ú p q R r ` q r R b a = ` l k q b k q Û = q^ h b p = _ i l ` h p = l c = ` l k q b k q = ^ k a = _ R b ^ h p = q e b j = a l t k = f k q l = p j ^ i i b R = ` e r k h p
  28. 28. qR^mmba=fk=qeb=_lav=cfbia WHEN CONTENT IS UNSTRUCTURED IN A ‘BLOB,’ CORE CONCEPT ATOMS ARE INVISIBLE AND UNACCESSIBLE. @CARRIEHD SHOUT OUT TO JEFF EATON @EATON
  29. 29. CROSS-CHANNEL READY 29 Meaning and relationships stored in a database, represented in an interface Build many different interfaces to represent the same content and structure Ready for visual redesigns or new devices yet to come. 0 @CARRIEHD
  30. 30. Rl_lqJRb^a^_ib CREATE CONTENT FOR CONSUMPTION BY HUMANS, SEARCH BOTS, AND ALGORITHMS ALLOW CONTENT TO BE PUBLISHED ON EXTERNAL PLATFORMS WHILE RETAINING INTEGRITY ALLOW YOUR CONTENT TO BE AVAILABLE AS AN API FOR THIRD-PARTY USE. @CARRIEHD
  31. 31. SCALABLE FOR THE FUTURE 31 Create a structure to support a lot of content Accommodate current and future content inventory Build connections and create a knowledge network across subjects 0 @CARRIEHD / @MIKEATHERTON
  32. 32. al`qlRtelKqs EXAMPLE OF SCALABLE CONTENT ON BBC 320 @CARRIEHD
  33. 33. PLAN FOR IMPLEMENTATION 33 Working as a team Understanding content management The Future-Friendly CMS Understanding Content Type Planning for Display 0 @CARRIEHD
  34. 34. MISSION NEARLY COMPLETE 340 @CARRIEHD 1. Future-Friendly Content - What is it and why do you need it? 2. How it starts: Research 3. Understanding the subject domain 4. Bring it to life with content design 5. Using your models for interface design
  35. 35. INTERFACE DESIGN ` R b ^q f k d = t f k a l t p = l k = v l r R = t l R i a
  36. 36. plrR`bW=eqqmWLL_R^acRlpqK`ljL_ildLmlpqL^qljf`Jtb_JabpfdkL ATOMIC DESIGN & CONTENT 360 @CARRIEHD
  37. 37. `lkqbkq=^p=abpfdk= j^qbRf^i CREATING DESIGN PATTERNS AND BUILDING CONTAINERS FOR CONTENT @CARRIEHD
  38. 38. CONTENT AS DESIGN MATERIAL 380 @CARRIEHD / @MIKEATHERTON
  39. 39. mbRplk=abpfdk=m^qqbRk=clR=ifpqp=lc=mblmib CONTENT AS DESIGN MATERIAL - PATTERNS 390 @CARRIEHD
  40. 40. CONTENT AS DESIGN MATERIAL - DYNAMIC DISPLAY - SPEAKERS 400 @CARRIEHD / @MIKEATHERTON
  41. 41. CONTENT AS DESIGN MATERIAL - DYNAMIC DISPLAY - TEAM 410 @CARRIEHD / @MIKEATHERTON
  42. 42. CONTENT AS DESIGN MATERIAL - TEMPLATES 420 @CARRIEHD / @MIKEATHERTON Username Twitter ID Bio Main Event Session date, start time - end time Session Name RolePicture
  43. 43. @CARRIEHD t b = p e l r i a = ^ it^v p = _ b = i l l h f k d = q l = j ^ h b = ^ = ` i b ^ k = p v p q b j = t f q e = ^ k = f k q b R c^ ` b = R b ^ a v = q l = _ b = r p b a = _ v = ^ = p v p q b j = t e f ` e = e ^ p k D q = v b q = _ b b k = f k s b k q b a K = TIM BERNERS-LEE, 2008
  44. 44. FUTURE-FRIENDLY CONTENT SOLVES PROBLEMS 44 So much content So many devices Changing design trends Organization-centric Silos 0 @CARRIEHD
  45. 45. THE FUTURE ^ = d R b ^q = _ f d = _ b ^ r q f c r i = q l j l R R l t
  46. 46. mfqc^iip ONGOING COMMITMENT AND RESOURCES TO SUPPORT DOMAIN-DRIVEN DESIGN IS ESSENTIAL @CARRIEHD
  47. 47. `lkqbkq=fp=qeb= telib=a^jk=mlfkqK WE CONNECT WITH PEOPLE TO CONNECT THEM TO INFORMATION. @CARRIEHD
  48. 48. qefkh=afccbRbkqK UNDERSTANDING HOW DEVELOPERS, WRITERS, AND COMPUTERS THINK WILL MAKE YOU A BETTER DESIGNER. @CARRIEHD
  49. 49. alkÛq=_b=^cR^fa=lc= `ljjfqjbkqK BEING FUTURE-FRIENDLY MEANS DESIGNING FOR LONG- TERM BENEFITS AND BUILDING ON STABLE FOUNDATIONS. @CARRIEHD
  50. 50. pbb=qeb=telib=_l^RaK CREATE GREATER VALUE BY MODELING THE COMPLETE DOMAIN, AND STITCHING YOUR CONTENT INTO THE FABRIC OF THE WIDER WEB. @CARRIEHD
  51. 51. MISSION ACCOMPLISHED 510 @CARRIEHD 1. What is Future-Friendly Content? Why do you want to have it? 2. How it starts: Research 3. Understanding the subject domain model 4. Bring it to life with content design 5. Using your models for interface design
  52. 52. @CARRIEHD a l = t e ^q = v l r = a l = _ b p qI = ^ k a = i f k h = q l = q e b = R b p qK — JEFF JARVIS
  53. 53. CONTACT ME ] ` ^ R R f b e a = q^ k w b k ` l k p r iq f k d K ` l j

×