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.

Beyond the Polar Bear

88,557 views

Published on

  • Hello! Get Your Professional Job-Winning Resume Here - Check our website! https://vk.cc/818RFv
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Thank you very much for sharing great material!! For your instance, I reached ere from the link below.
    http://ux.stackexchange.com/questions/17124/domain-strategy-from-a-ux-perspective
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • These were great slides to read, despite not hearing/seeing the talk. Thank you.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Despite currently being taught from the Polar Bear book (whoops!), your talk given yesterday in Brighton made a lot of sense and helps to make the bridge between ideal world of text books to the real world of unwieldy content.

    Cheers

    Moira
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • A very well set-up journey beyond the famous Polar Bear book we all use daily. Pragmatic and detailed, with great illustrations that match up. Would love to listen to the talk as well....
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

Beyond the Polar Bear

  1. Beyond the Polar Bear<br />Mike Atherton @mikeatherton<br />BBC / RedUXD<br />www.reduxd.com<br />
  2. New routes to content<br />
  3. “inform, educate and entertain”<br />
  4. 2. The Problem Space<br />
  5. Information Isn’t Neat<br />
  6. The BBC: ONE SITE OR MANY?<br />
  7. Sections or Separate Sites?<br />
  8. Broadcasting over 1000 Programmes Every Day<br />
  9. Pages mothballed or Removed<br />
  10. Deep Cuts Across The Online Division<br />The BBC has made a commitment to halve the number of ‘top level directories’ on its site<br />In 2011 it will reduce its online spend by 25%<br />Controversy has arisen over a recent announcement that legacy content will be removed from the web<br />
  11. UX emphasis on the top layers<br />‘User experience design’ has put considerable emphasis on front-end presentation and interaction design<br />Yet the elements that contribute to a user’s experience go much deeper<br />In ‘tearing down the wall’, many IAs have leaned toward interaction design and away from software design<br />CSS / Javascript<br />HTML<br />Controller<br />Business Logic<br />Data Model<br />
  12. Fake ARTIFACTS<br />Projects usually begin with extensive front-end prototyping tested against user stories and personas, not actual users<br />The belief is that ‘real’ technical prototypes are too expensive to develop<br />
  13. 3. Domain modelling<br />
  14. Avoiding Sorting by Document Type<br />
  15. A Web of Connected Things<br />
  16. A way of representing the important ‘things’ within as subject, and the relationships between those things<br />A way of using the subject knowledge of users and experts to influence software design<br />The first stage in the BBC’s process of designing new websites, and one of the few tangible artefacts<br />Inspired by Eric Evans’s ‘Domain-Driven Design’ book<br />What is domain modelling?<br />
  17. What a domain model looks like<br />ALBUM<br />LIVE<br />artists<br />release types<br />SINGLE<br />COMPILATION<br />releases<br />release events<br />tracks<br />labels<br />
  18. Talking to experts<br />Domain experts need not be technical, they just need to know their subject<br />They will help you understand the important and complex things<br />Break out the pencils and sketch their world back to them<br />
  19. Talking to users<br />round<br />competition<br />Use their language; learn how they speak, what they consider important and how they search<br />Users may understand the subtle differences between concepts, but can struggle to label them<br />Your aim is to capture their mental model<br />stadium<br />match<br />team<br />goal<br />player<br />
  20. stadium<br />competition<br />team<br />match<br />round<br />goal<br />player<br />Sketching a model to define Relationships<br />
  21. The differences between things<br />
  22. The canonical thing<br />Novel editions<br />Film adaptations<br />How about something like<br />bbc.co.uk/works/wuthering_heights<br />?<br />Wuthering Heights<br />The ‘Master Work’<br />Has a general sense of wutheringheightness.<br />Musical adaptations<br />
  23. Basic-Level categories and Prototypical Examples<br />car<br />dog<br />tree<br />Name a type of chair…<br />Name a type of bird…<br />
  24. Creating a ubiquitous language<br />Defines a common lexicon used by all members of the team, at all levels of the design<br />Labels for things can be informed by thinking about basic-level categories<br />Specific priority of things can be informed by thinking about prototypical examples<br />domain model<br />CSS classes<br />user labels<br />
  25. Don’t reinvent, link<br />In defining your subject, define the boundaries of your domain<br />Where objects touch existing models, use them instead of replicating them<br />If canonical content pages already exist on your website for domain objects, link to them<br />Don’t have more than one page covering the same topic<br />
  26. Test Understanding and iterate<br />Verify the model with experts and users as soon as possible<br />Check against business requirements and available content<br />It’s not too late to change, even after you’ve started building<br />
  27. Shared Model<br />+<br />Shared Language<br />+<br />Shared Understanding<br />=<br />Consistent USER EXPERIENCE<br />
  28. 4. BBC Programmes<br />
  29. The complex world of Television Shows<br />brand<br />series 14<br />episode<br />“Part 1”<br />version(sign language)<br />sub-series “The Prodigal”<br />
  30. brand<br />Episode 1<br />Episode 2<br />Episode 3<br />Sherlock <br />
  31. SHERLOCK BRAND<br />SHERLOCK SERIES 2<br />Series 1<br />Episode 1<br />Episode 2<br />Episode 3<br />Episode 1<br />Episode 2<br />Episode 3<br />Sherlock’s Future?<br />
  32. BBC Programmes domain model<br />brands<br />formats<br />genres<br />series<br />programmes<br />episodes<br />services<br />versions<br />broadcasts<br />on demands<br />
  33. Getting the data right<br />Massive amounts of content, so metadata needs to be captured during business as usual<br />Many data systems were built for production purposes, not for users<br />Quality of data capture and labels used varies across departments<br />Data needs to be reshaped to best fit the domain model<br />
  34. pages for Brands, Series and Episodes<br />
  35. Wikipedia<br />
  36. CAPTURING SOCIAL BUZZ<br />
  37. Principles of URI Design<br />Cool URIs should be<br />Hackable<br />Human-Readable<br />Persistent<br />
  38. Cool URIs don’t change.<br />
  39. Choosing a Nice URL design Pattern<br />http://www.bbc.co.uk/bbcone/sherlock/series1/episode1.shtml<br />Don’t expose your technology. No-one cares and it might change anyway.<br />http://www.bbc.co.uk/bbcone/sherlock/series1/episode1<br />Is it really series 1 until there’s a series 2? Will it be the same overseas?<br />http://www.bbc.co.uk/bbcone/sherlock/episode1<br />What if this show moves to BBC TWO or another network later?<br />http://www.bbc.co.uk/sherlock/episode1<br />What if Radio 4 decide to do a programme called ‘Sherlock’ in the future?<br />http://www.bbc.co.uk/episode1<br />Hmm, well now that doesn’t make much sense at all!<br />
  40. The resultant URL<br />http://www.bbc.co.uk/programmes/b00t8wp0<br />The only thing we know for sure is that it’s a programme that can be uniquely identified<br />Using a unique ID isn’t human-readable, but is an acceptable compromise to get persistence<br />301 redirects can be used for a more marketing-friendly URL<br />
  41. A Page For Every Programme<br />
  42. From THE EDUCATIONAL…<br />
  43. …To The POPULAR.<br />
  44. Media rich page<br />Embedded video of the programme itself<br />Episode synopsis<br />Additional programme clips<br />Production stills<br />Contributors list<br />Web links<br />List of broadcasts<br />Track listings<br />
  45. Links Across to Other Subject Domains<br />PROGRAMME PAGE WITH TRACKLISTING<br />BBC MUSIC ARTIST PAGE<br />
  46. Making microsites<br />Model allows for fully-skinned and even restructured pages<br />Additional material can be associated at brand, series or episode level<br />Marketing URLs are redirected to the Programmes space<br />User experience is enhanced without undermining the structure<br />
  47. Telling the Stories within Stories<br />
  48. 5. BBC Food<br />
  49. A crowded MArketplace<br />
  50. HOW Google SAW THE SITE<br />
  51. What do we think about?<br />programme<br />ingredient<br />recipe<br />chef<br />dish<br />
  52. BBC Food domain model*<br />chef<br />ingredient<br />technique<br />recipe<br />programme<br />dish<br />*simplified version<br />
  53. Recipes: A rich source of Data<br />Roasted lobster with champagne souffle<br />Ingredients<br />1 cooked lobster<br />30g/1oz butter<br />30g/1oz plain flour<br />150ml/ 1/4 pint champagne<br />150ml/ 1/4 pint milk<br />1 tbsp Dijon mustard<br />1 free-range egg, separated<br />salt and black pepper<br />
  54. Unlocking new ways to Explore<br />
  55. The Dish as a Canonical Work<br />SEARCH QUERY<br />DISH PAGE<br />SPECIFIC RECIPES<br />
  56. Enhancing pages based on Popularity<br />
  57. Results<br />NetPromoter improved post-relaunch (58) <br />150,000 extra users each week from search engines alone<br />~20% share of UK recipes market<br />1.3m<br />650,000<br />OLD SITE<br />(weekly)<br />NEW SITE<br />(weekly)<br />
  58. Desktop TRAFFIC vs. mobile<br />89%<br />10%<br />1%<br />Of the top 2500 search queries November 2010 saw over 20% of searchers arriving via smartphones alone - an increase of 20% since October.<br />Source: Google Webmaster Tools<br />
  59. Where does Food traffic come from?<br />70%<br />30%<br />other<br />Most visitors arrive into the middle of a site, via a deep link, not via the homepage.<br />Source: Google Webmaster Tools<br />
  60. SO Which is the real FOOD homepage?<br />DESKTOP<br />MOBILE<br />GOOGLE<br />
  61. 6. BBC Wildlife<br />
  62. Showing How the Natural World Joins Up<br />Showcasing the BBC Natural History archive<br />Unlocking the value contained in complete programmes<br />Presenting content in new and useful ways<br />
  63. Unlocking New Ways to Explore<br />
  64. What does the Polar bear share with…<br />
  65. The Barn owl?<br />
  66. Both are polygynous<br />
  67. Hippopotamus<br />
  68. BBC Wildlife Domain Model<br />location<br />event<br />has location<br />individual<br />bio_event<br />participates in<br />is composed of<br />participates in<br />ecozones<br />cohort<br />features in<br />displays learnt behaviour<br />is aggregation of<br />is aggregation of<br />ecoregions<br />species<br />adaptation<br />has adaptation<br />is composed of<br />lives in<br />inhabits<br />is endangered<br />habitat<br />domicile<br />con_status<br />
  69. Using the Web as a CMS<br />
  70. Linking to Other Sources of Data<br />CLIPS FROM BBC PROGRAMMES DOMAIN<br />CONSERVATION STATUS FROM ANIMAL DIVERSITY WEB<br />DISTRIBUTION FROM WWF WILDFINDER<br />
  71. The Linked data Cloud<br />
  72. Canonical Objects<br />
  73. Aggregations and Resources<br />bbc.co.uk/nature/life/Giant_Panda/news<br />bbc.co.uk/nature/life/Giant_Panda/sounds<br />bbc.co.uk/nature/life/Giant_Panda<br />bbc.co.uk/programmes/p00chptr<br />
  74. Same URI scheme as Wikipedia<br />bbc.co.uk/nature/life/Giant_Panda<br />en.wikipedia.org/wiki/Giant_Panda<br />
  75. Curation to Add Context and Trust<br />
  76. 7. How we make websites<br />
  77. Develop a domain model<br />Talk to experts and end-users<br />List the important things and sketch relationships<br />Develop a ubiquitous language<br />Think only about the mental model, not webpages<br />
  78. Populate your data model<br />Work with a developer to translate your domain model to a data model<br />Look at your business data and reshape if necessary<br />Identify sources of linked data to enhance your product<br />Don’t reinvent where someone else has done the thinking<br />
  79. Design URIs<br />Design for persistence, hackability and human-readability<br />Maintain one URI only per thing<br />Don’t expose your technology in the URI<br />Don’t include taxonomy or other things that may change over time<br />Use web-scale identifiers where you can<br />
  80. Build pages<br />Start with simple stub pages for all your objects<br />Think about all representations, not just HTML<br />Design your document to put the most important things at the top<br />Consider requirements for caching and load-balancing<br />
  81. Apply layout and décor CSS<br />Layout your wireframe pages directly in the browser using CSS<br />Design for your least-able user first<br />Practice responsive design and use media queries<br />Progressively enhance using Javascript and AJAX, but don’t make them mandatory<br />
  82. Test and iterate<br />Test at every stage, from the domain model upward<br />Test not just interaction, but the conceptual model itself<br />Test with real people, not against personas or user stories<br />
  83. 8. What can you do now?<br />
  84. UX Thinking All the Way Down<br />User experience goes far deeper than presentation and interaction<br />Consider things like business logic, SEO, document design and URI design<br />Take your rightful place at the heart of service design<br />
  85. Think Things not documents<br />Design your content for a semantic web, modelling things and relationships<br />Understand the business you want to represent<br />Consider the domain modelling approach for projects of all sizes<br />
  86. Think of the Web as a Single Shared Space<br />The web was designed to be universal<br />Design your content to be pointable, sharable and used to plug gaps in the Web<br />Use the data published by others, and publish data of your own<br />
  87. Think Bottom-up everywhere<br />Don’t start from wireframes, but from the information itself<br />Put 70% of your effort into your ‘thing’ pages; your homepage is less important<br />Design for your least-able user first (that’s probably the Googlebot)<br />CSS / Javascript<br />HTML<br />Controller<br />Business Logic<br />Data Model<br />
  88. Team with a developer<br />Design in the browser, using CSS frameworks and code that references real data<br />Be agile and iterate often, putting your prototypes in front of users<br />Focus your personal development to meet the skills gap between IA and software engineering<br />Standards-based CSS framework<br />Standards-based web editor<br />Design in the absence of content is not design, it’s decoration.<br />Jeffrey Zeldman<br />Living, breathing wireframes!<br />
  89. Think How the web has changed<br />It’s still about making the shortest route to well-organised content<br />Primary routes to content have shifted from silos to aggregators<br />Design for a world where Google is your homepage, Wikipedia is your CMS, and humans, software developers and machines are your users<br />
  90. 9. In closing<br />
  91. The new Information Architect…<br />Thinks about real-world things<br />Thinks ‘user-experience’ from the ground up<br />Designs for mobile first<br />Designs for search and social media<br />Wrestles data from around the web, and publishes their own data back out<br />
  92. Beyond the Boxes and Arrows<br />The complexities of knowledge call for ontological structures<br />Relationship values attached to connections teach us how the world joins up<br />Reusing content and linked data across domains greatly unlocks value and maximises investment<br />
  93. Playing nice with The Other KIds<br />Has IA turned into UX?<br />Has this put the focus on interaction and presentation?<br />Can we make a more direct contribution to the building of web services?<br />What skills will that require?<br />Photo by Oliver Klink<br />The way to get started is to stop talking and start doing.Walt Disney<br />
  94. Thanks to<br />Michael Smethurst@fantasticlife<br />Silver Oliver @silveroliver<br />Chris Sizemore @onpause<br />Chris Thorne @songschris<br />Tom Scott @derivadow<br />Paul Rissen@r4isstatic<br />Patrick Sinclair @metade<br />Further Reading<br />‘How we make websites’ by Michael Smethurst<br />bbc.co.uk/blogs/radiolabs/2009/01/<br />‘How does the emergence of the semantic web change the way we think about information architecture?’ by Silver Oliverblockslabpillar.com/2010/09/18/<br />‘Some thoughts on curation – adding context and telling stories’ by Tom Scott<br />derivadow.com/2010/03/11/<br />This presentation appearing soon at<br />slideshare.net/reduxd<br />
  95. Picture Credits<br />THANKS TO<br />flickr.com/photos/<br />cobalt/4330261604<br />dtaylor28/4369801559<br />debbcollins/4620829591<br />notm/1499506651<br />krustysplodge/1297721427<br />fcam/2476027735<br />peadar/2487923494<br />joncandy/3931662699<br />smaira/3721669619<br />phes999/1180686827<br />peterbecker/233071629<br />andertoons-cartoons/2517000136<br />benmcleod/11391970<br />89142790@N00/3212373419<br />danbri/2415237566<br />rapettif/4399201987<br />jjay69/4050882410<br />rwr/281039209<br />philip_d/2559996327<br />photos/saariy/2612208165<br /><ul><li>“Linking Open Data cloud diagram, by Richard Cyganiak and AnjaJentzsch. http://lod-cloud.net/”</li>

×