Cards for discovery
•
9 gefällt mir•3,069 views
Cards are becoming an increasingly popular presentation format and an effective platform for content discovery. Emily Heath explores what benefits they provide the user, some psychology around why they work, and how they can help the BBC improve horizontal user journeys. Video of this talk https://www.youtube.com/watch?v=sFAqmDOKKTg Please see NOTES tab for my presentation notes (transcript is just text from slides).
Empfohlen
Weitere ähnliche Inhalte
Kürzlich hochgeladen
Kürzlich hochgeladen (20)
Empfohlen
Empfohlen (20)
Cards for discovery
- 1. Cards for discovery Emily Heath Sr UXA, BBC ! ! World IA Day 2015, Bristol
- 4. Senior User Experience Architect
- 8. A card is a piece of portable, snackable micro-content presented in a consistent and recognisable format.
- 9. Like what?
- 11. Easy to scan
- 13. Easy to flip through
- 14. Can be saved or shared
- 15. The Card as a platform
- 17. The mash up of many things Card Sources
- 19. News Sport TV & iPlayer Children’s Knowledge & Learning Homepage Search App Cards footer Radio & Music
- 20. Cards footer News Sport TV & iPlayer Children’s Knowledge & Learning Radio & Music 2,000 Homepage Search App 2,000
- 21. Homepage Search App Cards footer News Sport TV & iPlayer Children’s Knowledge & Learning Radio & Music Traffic
- 22. News Sport TV & iPlayer Children’s Knowledge & Learning Radio & Music Traffic Traffic Homepage Search App
- 23. Replacing ladders with ropes Image: Cornell Library Kaleidescope newsletterImage CC: Ed Costello
- 25. Products are very connected within themselves, but not to each other Marketing and Audiences
- 31. 1997
- 33. • Familiar • Portable • Snackable It’s a Mona Lisa lunchbox! Hakonart’s lunchbox design available on zazzle.co.uk. Other lunch boxes and designs are available
- 34. Familiarity
- 37. Cognitive fluency Try it for yourself on http://facelab.org/
- 40. Portability
- 42. Image CC: Peter Mooney
- 43. Image CC: Antti Leppänen
- 44. Image CC: David Gingrich
- 46. Snackability Image CC: Arjan Richter
- 49. • Global Experience Language (Card pattern) • Systems audit • Data structure • Consistency in code format • Content strategy / work with editorial Familiar - Portable - Snackable
- 50. Find out more Manchester United need two further transfer windows of heavy spending to contend for the title. Phil Neville 5 min agoFOOTBALL Listen now 3 Live Cricket Lancashire v Middlesex Venue: Old Trafford 23-26 September, 10:25 BST
- 52. Title/headline 5 min Available until 6th August iPlayer Snackable content Signposting of what kind of thing it is 13:56 - Mistake by Woods as he putts wide. He can get a bogie at best… 16:9 4:59 One destination Short description or latest update Share and save
- 53. Initial proposal for the MVC (minimal viable card)
- 54. A card is a piece of portable, snackable micro-content presented in a consistent and recognisable format.
- 55. Thanks! ! Emily Heath @gradualist ! For a copy of my slides, see lanyrd.com next week ! ! This presentation was sponsored by Magic MoveTM every UXA Wizard’s favourite Keynote transition.
Hinweis der Redaktion
- Simple pun-free title: Cards for discovery. This is what I’m talking about today.
- Hello! I’m Emily Heath, and I’m a wizard! Not really, but I am…
- I work at Mediacity in Salford. These are our thought bubbles. We do a lot of thinking at the BBC. I’ve been thinking a lot about cards, and had a lot of time to think up ‘punny’ titles.
- One pun-y title I decided not to use.
- Another pun-y title I decided not to use, though wouldn’t it be appropriate for this audience of information architects (we love card sorting)?
- Simple pun-free title: Cards for discovery. This is what I’m talking about today. But what are cards? I’ll get to the discovery bit later…
- Cards are all around the web. Why they’re useful for discovery. They looks like bit like a promo. But often have some preview content in it (like a video).
- Boarding Pass in the iphone passbook. Google supermarket cards. Tinder app. Pinterest/bookmarks. Embeds in Twitter. Seer app (reads and finds actions in your emails). Hopefully the definition makes a bit more sense now.
- Presentation format: uses the metaphor of the physical card. A business card or playing card or a trumps card. WHY this format?
- Useful meta-data, consistent formatting. Tells you what the thing IS (type of thing, source/owner).
- They’re familiar, they’re not so different from promos. And you can pick them up, quite literally with the example of the Trello board (a collaboration tool).
- Tinder (dating) app let’s you thumb swipe through profiles of people.
- Saving or sharing functionality show prominently on the card. Key/encouraged behaviour. (Airbnb and Pinterest)
- Aren’t they just promos or souped-up listings? No, they’re more than that. Here’s why.
- Google can surface wikipedia content and other sources, Twitter can surface details about an event posted on meetup.com on their platform.
- They show you what you need, where you are. (quote from a blogpost?) Content in context.
- Why do the BBC need cards? What do they help us do?
- Core vertical products, then horizontal products to move people around. joining up all the incredible content using search, homepage, navigation. but what about horizontal journeys? App ideas, cards, cards footer.
- ROUGH estimate: 2000 new pieces of content published a day: news/sport articles, news/sport videos, programmes, but also clips (multiple per programme)
- App, homepage and search drive traffic to, and between, the vertical products. The purpose of our Content Discovery products is to drive traffic towards the rest of the BBC products.
- Cards to send users on horizontal journeys between products. This a problem that everyone faces. We all want lateral journeys from other sites.
- Allow our users to move horizontally across products. sure you are too. This is the IAs problem: how to let users move naturally and fluidly around their website, easily finding the things they need.
- Pretty data visualisation time! BBC’s specific problem.
- Petals represent internal links within products, but the few, faint grey lines are the journeys between products. We need more!
- Users are familiar and comfortable within the sites they use.
- Users are familiar and comfortable within the sites they use.
- Users are familiar and comfortable within the sites they use. It’s red (for news), or it’s pink/dark grey
- These related videos are well signposted, and we don't have a problem with audiences clicking around within their product because they're familiar with them (videos in news)
- But we’re not linking a recent news story on the moon to a related programme (from 1960) currently available on the iPlayer.
- What’s stopped us doing this better already? we’ve been online since 1997 / technical debt / multitude of content management systems / siloed product teams
- So why are cards good for discovery? Could we take this effective design pattern and make it a SINGLE CURRENCY FOR CROSS-PRODUCT JOURNEYS? Make a content module appear on all our (red/yellow/pink) products and tie them together?
- IMAGE: card wireframe, with a handle, and a bite taken out of it (animated) FAMILIAR, PORTABLE, SNACKABLE
- research on how our brains process information has concluded that the easier and more familiar something looks, the more likely we are to choose it. the path of least resistance. sounds obvious right? (of course we don't want to make long forms or difficult to read headlines)
- But familiarity plays a part too. when researchers asked participants to choose the most appealing face in a collection of faces, they chose the face that was a composite of all the other faces.
- Middle face is composite of other 4. But it isn't that we find average features attractive: it is because they are easy to process and things that are easy make us feel good, so we choose them.
- Cognitive or processing fluency shows that we prefer things that are easy to think about. and in terms of journeys of discovery online, we will follow familiarity over the unknown. we want our users to be fluent in our language of discovery.
- STOCKS which have easy to pronounce names do better than others. This research is fundamental to the principle of advertising, where a brand gains trust the more it is seen by the consumer.
- Why twitter is so successful (and for their clients): same thing across multiple products / familiar format / trust / trust the content. BBC GOAL: our audience fluent in our language of discovery. make it look easy and they will follow
- responsive/apps/indexes/footers. cards can go anywhere. they go with you (save them for later), they go without you (share to your social network)
- Why? Efficiency. BBC values “delivering value for money”. Your clients want that too. Not cheap goods from China, but the efficiency in of the intermodal transport system.
- "Intermodal" = container can be used across various modes of transport without unloading and reloading its contents.
- designed to move materials and products efficiently and securely around the world. No need for reloading.
- No need for reformatting. We need to be able to move content from one product to another (to another), between databases, across servers, on and off different page templates. To do this more efficiently, we need to standardise sizes.
- Twitter, Storify, Soundcloud, Facebook
- Segue from portability - what about repurposing (container used as a snack bar in Madrid station). We want our users to be able to consume the thing where they are, they’re likely on their way somewhere already, they don’t want to have to stop or go elsewhere along the way.
- Have a quick taste and see if they like it first. Try before you buy. I don’t need to give you the psychology story here - people are inherently lazy, I mean time poor. Don’t show us a picture of a sandwich, give us a canapé.
- Products are using Twitter for its inherently snackable format to give you a sample (in this case a delayed samp Don’t make me install an App just for a one time use. Let me try it now and see if I like it, then I’ll download it next time. AVAILABILITY 4 BBC
- How do we go about making cards this way? Auditing all the data sources to find common elements. working with all our products to find common needs. don’t show us a picture of a sandwich, give us a canapé.
- DRAFT! DRAFT! Gathering sketches from around the BBC - ideas for what kind of content they might want to put on a card.
- Analyise all the different content types that could be put on a card and find the consistent components.
- What are the common elements of a card? What is a MVC (minimal viable card) for the BBC?
- There is a nice side effect to taking this approach to make things easier for our audience: we make it easier for our developers and systems too, they are biased towards easy processing too, they like things to be presented in familiar formats, it saves time and we are measured by our efficiency.
- Hopefully you now understand why I say that: A card is a piece of snackable, portable micro-content presented in a consistent and recognisable format.