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

3,414 views

Published on

‘Designing Future-Friendly Content’ is a hands-on workshop, introducing the concepts of structured content, domain modeling, content modeling, and content planning for a content management system.
It is ideally suited for UX designers, content strategists, web developers, or other business stakeholders with a responsibility for content publishing.
We can run the session as a full-day or half-day event at your company or conference event. Contact us for details.

@mikeatherton / @carriehd

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. WIT H ` ^ R R f b = e^ k b = a b k k f plk = jfhb=^qebRqlk m R b s f b t = p r j j ^ Rv = criiJa ^v=L=e^icJa^v= tlRh pelm
  2. 2. PREFACE FOR EVENT ORGANISERS 2 ‘Designing Future-Friendly Content’ is a hands-on workshop, introducing the concepts of structured content, domain modeling, content modeling, and content planning for a content management system. It is ideally suited for UX designers, content strategists, web developers, or other business stakeholders with a responsibility for content publishing. We can run the session as a full-day or half-day event at your company or conference event. Contact us for details. Mike and Carrie 0 @CARRIEHD / @MIKEATHERTON
  3. 3. THE 21ST CENTURY. t b i ` l j b = q l = q e b = c r q r R b
  4. 4. @CARRIEHD / @MIKEATHERTON a b p f d k = f p = ^ = m i ^ k = c l R = ^ R R ^ k d f k d = b i b j b k q p = f k = p r ` e = ^ = t^v = ^ p = _ b p q = q l = ^ ` ` l j m i f p e = ^ = m^ R q f ` r i ^ R = m r R m l p b K — CHARLES EAMES
  5. 5. @CARRIEHD / @MIKEATHERTON a b p f d k = f p = q e b = R b k a b R f k d = l c = f k q b k qK — JARED SPOOL
  6. 6. @CARRIEHD / @MIKEATHERTON i ^ k d r ^ d b = f p = q e b = j ^q b R f ^ i = l c = f k q b k qK — ABBY COVERT
  7. 7. LANGUAGE IS INFRASTRUCTURE 7 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 / @MIKEATHERTON SHOUT OUT TO ANDREW HINTON @INKBLURT
  8. 8. “So we’re putting on a ÅçåÑÉêÉåÅÉ=ÉîÉåí about ru. This óÉ~ê it’s going to be in máííëÄìêÖÜI=m^. 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 ëéçåëçêë.” GETTING HOLD OF THE WORDS 80 @CARRIEHD / @MIKEATHERTON 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? abp`Rf_fkd=qeb=pr_gb`q=alj^fk=rkm^`hp=`lk`bmqpI=qbRjpI=Rbi^qflkpefmp=^ka=RribpK
  9. 9. INTERFACES ARE WINDOWS ON THE WORLD 90 @CARRIEHD / @MIKEATHERTON b^`e=fkqbRc^`b=fp=^=afccbRbkq=RbmRbpbkq^qflk=lc=qeb=p^jb=pqRr`qrRba=`liib`qflk=lc=RbplrR`bpK il`^qflk RbplRq m^Rh elqbi tbbkfb i^ka jb^i Rbpq^rR^kq ^qqR^`qflk `e^R^`qbR `Rb^qlR tlRh
  10. 10. crqrRbJcRfbkaiv=`lkqbkq STORED, STRUCTURED, AND CONNECTED FOR PEOPLE AND COMPUTERS, BEYOND THE USER INTERFACE. @CARRIEHD / @MIKEATHERTON
  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 / @MIKEATHERTON
  12. 12. CONCEPTS & RELATIONSHIPS _ R f a d b p = l c = r k a b R p q^ k a f k d
  13. 13. CONCEPTS ARE GENERALISED TYPES 130 @CARRIEHD / @MIKEATHERTON b^`e=`lk`bmq=fp=Rbrp^_ib=^`Rlpp=jriqfmib=pmb`fcf`=bu^jmibpK qvmb Rbdflk _lqqibR _R^ka mRllc `lrkqRv sfkq^db `^ph afpqfiibRv TYPE OF WHISK(E)Y; E.G. SCOTCH, IRISH, RYE, BOURBON, SOUR MASH ORIGIN COUNTRY; E.G. SCOTLAND, IRELAND, WALES, USA, JAPAN ORIGIN REGION; E.G. HIGHLANDS, ISLAY, SPEYSIDE, CAMPBELLTOWN PRODUCT BRAND; E.G. PAPPY VAN WINKLE, JIM BEAM, GLENMORANGIE YEAR OF BOTTLING; E.G. 1990, 1962 ALCOHOL BY VOLUME; E.G. 65% ABV CASK TYPE USED; E.G. BOURBON, PORT, MADEIRA DISTILLERY USED; E.G. ARDBEG, BALVENIE, OBAN BOTTLING PLANT; E.G. ACORN, KINGSBURY pr_gb`q=alj^fkW=tefphv
  14. 14. RELATIONSHIPS 14 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 / @MIKEATHERTON
  15. 15. RELATIONSHIP EXAMPLES 150 @CARRIEHD / @MIKEATHERTON jllk mi^kbq ^rqelR _llh fkdRbafbkq Rb`fmb jlsfb _llh qeb=Rbi^qflkpefm=s^irb=abp`Rf_bp=elt=qtl=`lk`bmqp=^Rb=`lkkb`qbaK orbits wrote partOf adaptationOf
  16. 16. DOMAIN MODELS R b m R b p b k q f k d = R b ^ i f q v
  17. 17. MAPPING THE DOMAIN FROM CONTENT 170 @CARRIEHD / @MIKEATHERTON rkabRpq^kafkd=qeb=alj^fk=`^k=pljbqfjbp=jb^k=tlRhfkd=_^`ht^Rap=cRlj=`lkqbkq=bu^jmibpK= different examples of a ‘craft’ different examples of a ‘craft type’overall subject domain
  18. 18. BUILDING A DOMAIN MODEL 180 @CARRIEHD / @MIKEATHERTON Environment Craft type Pilot Creative workCraft Inventor qeb=alj^fk=jlabi=peltp=b^`e=`lk`bmq=bkqfqv=^ka=abp`Rf_bp=qeb=Rbi^qflkpefmpK hasType OperatesIn InventedBy FlownBy AppearsIn AppearsIn
  19. 19. 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 / @MIKEATHERTON@CARRIEHD / @MIKEATHERTON
  20. 20. INTERMISSION
  21. 21. STRUCTURED CONTENT c R l j = _ i l _ p = q l = ` e r k h p
  22. 22. @CARRIEHD / @MIKEATHERTON Ú p q R r ` q r R b a = ` l k q b k q Û = R b c b R p = q l = f k c l R j ^q f l k = l R = ` l k q b k q = q e ^q = e ^ p = _ b b k = _ R l h b k = a l t k = ^ k a = ` i ^ p p f c f b a = r p f k d = j b q^ a ^q^ K = — WIKIPEDIA
  23. 23. qR^mmba=fk=qeb=_lav=cfbia WHEN CONTENT IS UNSTRUCTURED IN A ‘BLOB,’ CORE CONCEPT ATOMS ARE INVISIBLE. @CARRIEHD / @MIKEATHERTON SHOUT OUT TO JEFF EATON @EATON
  24. 24. UNSTRUCTURED ‘BLOB’ CONTENT 240 @CARRIEHD / @MIKEATHERTON qeb=rkpqRr`qrRba=`jp=qefkhp=fk=m^dbpI=qfqibpI=^ka=_lav=cfbiapK *’What You See Is What You Get’ (if you’re very lucky) Generic ‘post’ - nothing which defines this as a ‘session’ the than the menu category it’s placed in. WYSIWYG* tools which will add formatting to this post only, potentially clashing with global stylesheets. Title, though not defined as specifically a session title. Images added directly into post body, with no explicit relationship stated. Dumb links to speakers added by hand to this post only.Three important pieces of information (track, time, duration) added to the body as text. This description is appropriate for a body-type field, but one explicitly for ‘session description’.
  25. 25. STRUCTURED CONTENT IN A CMS 250 @CARRIEHD / @MIKEATHERTON qeb=pqRr`qrRba=`jp=qefkhp=fk=klabpI=`lkqbkq=qvmbpI=^ka=Rbi^qflkpefmpK 2015 IA SUMMIT, EDITING INTERFACE IN DRUPAL 8
  26. 26. STRUCTURED CONTENT IN THE INTERFACE 260 @CARRIEHD / @MIKEATHERTON a^q^=fk=^=pqRr`qrRba=`lkqbkq=bkqfqv=fp=afpmi^vba=fk=afccbRbkq=t^vp
  27. 27. AUTOMATIC CONTENT NAVIGATION 270 @CARRIEHD / @MIKEATHERTON pqRr`qrRba=`lkqbkq=^iiltp=qeb=`ljmrqbR=ql=`Rb^qb=^ka=rma^qb=fkabubp=^rqlj^qf`^iivK
  28. 28. ADVANTAGES OF STRUCTURED CONTENT t e v = ` e r k h p = _ b ^q = _ i l _ p
  29. 29. CREATE ONCE, PUBLISH EVERYWHERE 290 @CARRIEHD / @MIKEATHERTON qeb=p^jb=`lkqbkq=pqRr`qrRbp=j^v=_b=`elRbldR^meba=afccbRbkqiv=^`Rlpp=absf`bpK
  30. 30. FUTURE-FRIENDLY IS ROBOT-READABLE 300 @CARRIEHD / @MIKEATHERTON `lkqbkq=pqRr`qrRba=clR=`ljmrqbRp=`^k=qR^sbi=^kvtebRbK Google Images iMDb Rotten Tomatoes Tribune Media Services Google Play / Amazon WikiData
  31. 31. EDITORIAL COLLECTIONS AS CURATION 310 @CARRIEHD / @MIKEATHERTON Ú`liib`qflkÛ=fp=^=jlabiba=`lk`bmq=tef`e=RbcbRbk`bp=`lkqbkq=cRlj=bipbtebRb=fk=qeb=jlabiK BBC IPLAYER AND BBC FOOD. WWW.BBC.CO.UK
  32. 32. EDITORIAL PAGE AS STRUCTURED CONTENT 320 @CARRIEHD / @MIKEATHERTON ^=tb_=m^db=`^k=pqfii=e^sb=jlRb=mRlmbRqfbp=qe^k=^=qfqib=^ka=_lavK Optionally add a header image Intro area is a different style than body Body contains only basic HTML
  33. 33. CONTENT MODELING c R l j = ` l k ` b m q = q l = a b p f d k
  34. 34. alj^fk=fp=`lkqbuqI= `lkqbkq=fp=bumRbppflkK DOMAIN MODELS CAPTURE AN OVERALL CONTEXT. CONTENT MODELS ZOOM IN TO SPECIFIC STRUCTURE. @CARRIEHD / @MIKEATHERTON
  35. 35. PREPARING FOR THE CONTENT MODEL 350 @CARRIEHD / @MIKEATHERTON qeb=`lkqbkq=jlabi=abp`Rf_bp=qeb=j^glR=`lkqbkq=`lk`bmqp=^ka=qeb=mRlmbRqfbp=lc=b^`e=`lk`bmqK “type’ of each spacecraft (name, description?) photo of the spacecraft a spacecraft (name and description) the properties of this craft (length, speed, weight, service year)
  36. 36. THE CONTENT MODEL 360 @CARRIEHD / @MIKEATHERTON ^=`lkqbkq=jlabi=`^k=_b=aR^tk=ifhb=^=alj^fk=jlabi=tfqe=mRlmbRqv=cfbiap=^aabaK 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
  37. 37. CONTENT PLANNING m R b m^ R f k d = c l R = q e b = j ^ ` e f k b
  38. 38. MEASURE TWICE, CUT ONCE 38 Content planning is done before CMS configuration. By considering all the parts of the model first, we save time and money later. Content planning can’t be avoided — either you do it or your developers will. 0 @CARRIEHD / @MIKEATHERTON
  39. 39. CONTENT PLANNING WORKSHEET 390 @CARRIEHD / @MIKEATHERTON abcfkb=qeb=`lkqbkq=qvmbp=clR=`jp=fjmibjbkq^qflk
  40. 40. COMPLETING THE WORKSHEET 400 @CARRIEHD / @MIKEATHERTON `lkqbkq=qvmbp=abp`Rf_ba=tfqe=mRlmbRqv=cfbiap k^jb abp`Rfmqflk qfqib=cfbia=i^_bi _lav=cfbia=i^_bi cfbiap=L=qvmbp Person Info about people associated with IAS Full name Bio First Name / Text (plain) Middle / Text (plain) Last Name / Text (plain) Suffix / Text (plain) Photo / Image
  41. 41. WRAP UP 41 Content needs to be designed. Auditing and decision making is more meaningful with domain knowledge. Structuring content frees it from the interface to be useful in multiple contexts. Planning how the structure will be implemented is essential to success. 0 @CARRIEHD / @MIKEATHERTON
  42. 42. @CARRIEHD / @MIKEATHERTON a b p f d k = f p = m r q q f k d = c l R j = ^ k a = ` l k q b k q = q l d b q e b R K — PAUL RAND
  43. 43. THE FUTURE IS NOW. ^ = d R b ^q = _ f d = _ b ^ r q f c r i = q l j l R R l tK
  44. 44. `lkqbkq=fp=qeb= telib=a^jk=mlfkqK WE CONNECT WITH PEOPLE TO CONNECT THEM TO INFORMATION. @CARRIEHD / @MIKEATHERTON
  45. 45. qefkh=afccbRbkqK UNDERSTANDING HOW DEVELOPERS, WRITERS, AND COMPUTERS THINK WILL MAKE YOU A BETTER DESIGNER. @CARRIEHD / @MIKEATHERTON
  46. 46. alkÛq=_b=^cR^fa=lc= `ljjfqjbkqK BEING FUTURE-FRIENDLY MEANS DESIGNING FOR LONG- TERM BENEFITS AND BUILDING ON STABLE FOUNDATIONS. @CARRIEHD / @MIKEATHERTON
  47. 47. 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 / @MIKEATHERTON
  48. 48. FURTHER READING: QUICK LINKS 48 For a Future-Friendly Web — Brad Frost Thriving in a World of Change — Karen McGrane Breaking Dev: There is No Mobile Web — Luke Wroblewski The Battle for the Body Field — Jeff Eaton How we make Websites — Michael Smethurst 0 @CARRIEHD / @MIKEATHERTON SHOUT OUT TO GERRY MCGOVERN @GERRYMCGOVERN
  49. 49. FURTHER READING: SLOW LINKS 490 @CARRIEHD / @MIKEATHERTON SHOUT OUT TO GERRY MCGOVERN @GERRYMCGOVERN `lkqbkq=bsbRvtebRb= p^R^=t^`eqbRJ_lbqq`ebR j^k^dfkd=bkqbRmRfpb= `lkqbkq= ^kk=Rl`hibv `lkqbkq=pqR^qbdv=clR= jl_fib= h^Rbk=j`dR^kb alj^fkJaRfsbk=abpfdk= bRf`=bs^kp alj^fkJaRfsbk=abpfdk= nrf`hiv= fkcln
  50. 50. CONTACT US ] ` ^ R R f b e a = ] j f h b ^q e b R q l k = t b = ` ^ k = R r k = q e f p = ^ p = ^ = e ^ i c J a ^v = l R = c r i i J a ^v = t l R h p e l m = ^q = v l r R = b s b k qK
  51. 51. qeb=_bpq=t^v=ql=mRbaf`q= qeb=crqrRb=fp=ql=fksbkq=fqK THANKS FOR COMING. @CARRIEHD / @MIKEATHERTON

×