designing for distributed content models
Post on 17-Oct-2014
3.767 views
DESCRIPTION
If we want to have content that's prepared for future technologies, is ready for shifting user and device contexts and is appropriate for machines and humans, we must change our patterns of thinking in Interaction Design. This presentation calls for a content out approach to design and begins examining tools and tactics to achieve this method.TRANSCRIPT
![Page 1: Designing For Distributed Content Models](https://reader034.vdocuments.us/reader034/viewer/2022051322/5441f4c8afaf9f52208b4840/html5/thumbnails/1.jpg)
DESIGNINGFOR DISTRIBUTEDCONTENT MODELS
@danieleizans | #WIADA2
DANIEL EIZANSWIAD2013 | 2.9.2013
![Page 2: Designing For Distributed Content Models](https://reader034.vdocuments.us/reader034/viewer/2022051322/5441f4c8afaf9f52208b4840/html5/thumbnails/2.jpg)
http://www.flickr.com/photos/ryanprince1974/7417131586/
Let’s talk about patterns
@danieleizans | #WIADA2http://www.flickr.com/photos/ryanprince1974/7417131586/
![Page 3: Designing For Distributed Content Models](https://reader034.vdocuments.us/reader034/viewer/2022051322/5441f4c8afaf9f52208b4840/html5/thumbnails/3.jpg)
We look for clarity in patterns
@danieleizans | #WIADA2
=
![Page 4: Designing For Distributed Content Models](https://reader034.vdocuments.us/reader034/viewer/2022051322/5441f4c8afaf9f52208b4840/html5/thumbnails/4.jpg)
But we’re increasingly distracted
@danieleizans | #WIADA2
![Page 5: Designing For Distributed Content Models](https://reader034.vdocuments.us/reader034/viewer/2022051322/5441f4c8afaf9f52208b4840/html5/thumbnails/5.jpg)
And Mobile Isn’t Going Away
@danieleizans | #WIADA2
![Page 6: Designing For Distributed Content Models](https://reader034.vdocuments.us/reader034/viewer/2022051322/5441f4c8afaf9f52208b4840/html5/thumbnails/6.jpg)
And oh, that *$#@&! context thing ...
@danieleizans | #WIADA2
![Page 7: Designing For Distributed Content Models](https://reader034.vdocuments.us/reader034/viewer/2022051322/5441f4c8afaf9f52208b4840/html5/thumbnails/7.jpg)
What’s a UX pro to do?
@danieleizans | #WIADA2
RESPONSIVE DESIGN?!UNIFY CODEBASES?
DEVICE SPECIFIC STRATEGY?PROTOTYPE?
MOBILE FIRST?!ESCHEW WIREFRAMES?
![Page 8: Designing For Distributed Content Models](https://reader034.vdocuments.us/reader034/viewer/2022051322/5441f4c8afaf9f52208b4840/html5/thumbnails/8.jpg)
@danieleizans | #WIADA2
What (many of us) DO
![Page 9: Designing For Distributed Content Models](https://reader034.vdocuments.us/reader034/viewer/2022051322/5441f4c8afaf9f52208b4840/html5/thumbnails/9.jpg)
We create hierarchy.
@danieleizans | #WIADA2
Home Ford Social Support LAD En Esp. More Ford Search
Cars Crossovers & SUVS Trucks Hybrids
and EVs
C-Max Hybrid
Hybrid Games Gallery Features Specs Models Accesories Pricing
C-Max Energi
Fusion Hybrid SE
Fusion Energi
Focus Electric
Comm Truck All Tech Hub Shopping
Tools
Build/Price
Etc.
![Page 10: Designing For Distributed Content Models](https://reader034.vdocuments.us/reader034/viewer/2022051322/5441f4c8afaf9f52208b4840/html5/thumbnails/10.jpg)
@danieleizans | #WIADA2
We catalogue and audit pages.
![Page 11: Designing For Distributed Content Models](https://reader034.vdocuments.us/reader034/viewer/2022051322/5441f4c8afaf9f52208b4840/html5/thumbnails/11.jpg)
We devise a strategy.
@danieleizans | #WIADA2
![Page 12: Designing For Distributed Content Models](https://reader034.vdocuments.us/reader034/viewer/2022051322/5441f4c8afaf9f52208b4840/html5/thumbnails/12.jpg)
We produce wireframes.
@danieleizans | #WIADA2
![Page 13: Designing For Distributed Content Models](https://reader034.vdocuments.us/reader034/viewer/2022051322/5441f4c8afaf9f52208b4840/html5/thumbnails/13.jpg)
Then we think about design and content.
@danieleizans | #WIADA2
![Page 14: Designing For Distributed Content Models](https://reader034.vdocuments.us/reader034/viewer/2022051322/5441f4c8afaf9f52208b4840/html5/thumbnails/14.jpg)
And then things like this happen.
@danieleizans | #WIADA2
![Page 15: Designing For Distributed Content Models](https://reader034.vdocuments.us/reader034/viewer/2022051322/5441f4c8afaf9f52208b4840/html5/thumbnails/15.jpg)
And happen....
@danieleizans | #WIADA2
![Page 16: Designing For Distributed Content Models](https://reader034.vdocuments.us/reader034/viewer/2022051322/5441f4c8afaf9f52208b4840/html5/thumbnails/16.jpg)
And happen....
@danieleizans | #WIADA2
![Page 17: Designing For Distributed Content Models](https://reader034.vdocuments.us/reader034/viewer/2022051322/5441f4c8afaf9f52208b4840/html5/thumbnails/17.jpg)
And happen....
@danieleizans | #WIADA2
![Page 18: Designing For Distributed Content Models](https://reader034.vdocuments.us/reader034/viewer/2022051322/5441f4c8afaf9f52208b4840/html5/thumbnails/18.jpg)
And happen....
@danieleizans | #WIADA2
![Page 19: Designing For Distributed Content Models](https://reader034.vdocuments.us/reader034/viewer/2022051322/5441f4c8afaf9f52208b4840/html5/thumbnails/19.jpg)
And happen....
@danieleizans | #WIADA2
![Page 20: Designing For Distributed Content Models](https://reader034.vdocuments.us/reader034/viewer/2022051322/5441f4c8afaf9f52208b4840/html5/thumbnails/20.jpg)
And happen.... (for lots and lots of pixels)
@danieleizans | #WIADA2
![Page 21: Designing For Distributed Content Models](https://reader034.vdocuments.us/reader034/viewer/2022051322/5441f4c8afaf9f52208b4840/html5/thumbnails/21.jpg)
Taking 25 seconds to load
@danieleizans | #WIADA2
![Page 22: Designing For Distributed Content Models](https://reader034.vdocuments.us/reader034/viewer/2022051322/5441f4c8afaf9f52208b4840/html5/thumbnails/22.jpg)
Foundational workflows (and patterns) are failing us.
@danieleizans | #WIADA2
![Page 23: Designing For Distributed Content Models](https://reader034.vdocuments.us/reader034/viewer/2022051322/5441f4c8afaf9f52208b4840/html5/thumbnails/23.jpg)
These are problems we can solve
@danieleizans | #WIADA2http://www.rexfeatures.com/search/?kw=lego+italy&iso=GBR&lkw=lego&viah=Y&stk=N&sft=&search_action=#
![Page 24: Designing For Distributed Content Models](https://reader034.vdocuments.us/reader034/viewer/2022051322/5441f4c8afaf9f52208b4840/html5/thumbnails/24.jpg)
@danieleizans | #WIADA2
A Call To ArmsDesign from the content out!
![Page 25: Designing For Distributed Content Models](https://reader034.vdocuments.us/reader034/viewer/2022051322/5441f4c8afaf9f52208b4840/html5/thumbnails/25.jpg)
@danieleizans | #WIADA2
We must look beyond the page.
![Page 26: Designing For Distributed Content Models](https://reader034.vdocuments.us/reader034/viewer/2022051322/5441f4c8afaf9f52208b4840/html5/thumbnails/26.jpg)
@danieleizans | #WIADA2
Prepare for new devices and contexts.
![Page 27: Designing For Distributed Content Models](https://reader034.vdocuments.us/reader034/viewer/2022051322/5441f4c8afaf9f52208b4840/html5/thumbnails/27.jpg)
@danieleizans | #WIADA2
Prepare for distribution.
![Page 28: Designing For Distributed Content Models](https://reader034.vdocuments.us/reader034/viewer/2022051322/5441f4c8afaf9f52208b4840/html5/thumbnails/28.jpg)
@danieleizans | #WIADA2
Designing for Portability
![Page 29: Designing For Distributed Content Models](https://reader034.vdocuments.us/reader034/viewer/2022051322/5441f4c8afaf9f52208b4840/html5/thumbnails/29.jpg)
@danieleizans | #WIADA2
Content is messy.• PURPOSE
What’s the content supposed to accomplish?
• MESSAGEWhat’s it saying? How is it saying it?
• RELATIONSHIPSWhat other content is conceptually connected?
• PRIORITIESHow important is it for the business? The user?
![Page 30: Designing For Distributed Content Models](https://reader034.vdocuments.us/reader034/viewer/2022051322/5441f4c8afaf9f52208b4840/html5/thumbnails/30.jpg)
@danieleizans | #WIADA2
1. Content types (inventory) 2. Content wireframes 3. Content structure (data model)4. CMS Plan 5. UX/Design 6. Prototype
Making sense of the mess
![Page 31: Designing For Distributed Content Models](https://reader034.vdocuments.us/reader034/viewer/2022051322/5441f4c8afaf9f52208b4840/html5/thumbnails/31.jpg)
@danieleizans | #WIADA2
1. Content Type / Persona2. Production Source / Author / Owner3. Original Intent (aka why was it made)4. Content Quality / Score5. Length / Word Count / File Size6. Rights
Content Inventory
![Page 32: Designing For Distributed Content Models](https://reader034.vdocuments.us/reader034/viewer/2022051322/5441f4c8afaf9f52208b4840/html5/thumbnails/32.jpg)
@danieleizans | #WIADA2
Goal: Understand the whys
Content purpose
Content quality
Content reach
![Page 33: Designing For Distributed Content Models](https://reader034.vdocuments.us/reader034/viewer/2022051322/5441f4c8afaf9f52208b4840/html5/thumbnails/33.jpg)
@danieleizans | #WIADA2
1. Logo2. Navigation3. Headline4. Author5. Date6. Related Assets7. Related Badge8. Comments9. Related Articles10. Social Links
Content Wireframe
![Page 34: Designing For Distributed Content Models](https://reader034.vdocuments.us/reader034/viewer/2022051322/5441f4c8afaf9f52208b4840/html5/thumbnails/34.jpg)
@danieleizans | #WIADA2
1. Logo2. Navigation3. Headline4. Author5. Date6. Related Assets7. Related Badge8. Comments9. Related Articles10. Social Links
Content Wireframe1
2
34
5 6 7
8
9
10
![Page 35: Designing For Distributed Content Models](https://reader034.vdocuments.us/reader034/viewer/2022051322/5441f4c8afaf9f52208b4840/html5/thumbnails/35.jpg)
Goal: Understand Hierarchy and Relationships
Feature Article
City
Author BioBusiness
Blog Post
Landmark
Deal Event
Links to Related
Tagged by
Tagged by
Links to Related
Links to Related
Tagged by
Tagged by
Related to
Tagged by
Links to Related
Links to Related
From Sara Wachter-Boettcher“Building Bendable Content” @danieleizans | #WIADA2
![Page 36: Designing For Distributed Content Models](https://reader034.vdocuments.us/reader034/viewer/2022051322/5441f4c8afaf9f52208b4840/html5/thumbnails/36.jpg)
Focus on Structure
@danieleizans | #WIADA2
By focusing on parts instead of pages, data is portable and able to shift when needed or seen as a competitive advantage.
![Page 37: Designing For Distributed Content Models](https://reader034.vdocuments.us/reader034/viewer/2022051322/5441f4c8afaf9f52208b4840/html5/thumbnails/37.jpg)
Goal: Create relationships in data
@danieleizans | #WIADA2
Chunking data appropriately allows it to be nimble and repurposed quickly.
![Page 38: Designing For Distributed Content Models](https://reader034.vdocuments.us/reader034/viewer/2022051322/5441f4c8afaf9f52208b4840/html5/thumbnails/38.jpg)
CMS and Data Modeling
@danieleizans | #WIADA2
What you see may be what you get, but what you get isnʼt good for content portability.
![Page 39: Designing For Distributed Content Models](https://reader034.vdocuments.us/reader034/viewer/2022051322/5441f4c8afaf9f52208b4840/html5/thumbnails/39.jpg)
CMS and Data Modeling
@danieleizans | #WIADA2
Fields are your friends. They create relationships in the data and allow for scalability and meaning.
![Page 40: Designing For Distributed Content Models](https://reader034.vdocuments.us/reader034/viewer/2022051322/5441f4c8afaf9f52208b4840/html5/thumbnails/40.jpg)
So this will be like wearing
handcuffs right?
@danieleizans | #WIADA2
![Page 41: Designing For Distributed Content Models](https://reader034.vdocuments.us/reader034/viewer/2022051322/5441f4c8afaf9f52208b4840/html5/thumbnails/41.jpg)
Models are like rails for each
new experience
@danieleizans | #WIADA2
![Page 42: Designing For Distributed Content Models](https://reader034.vdocuments.us/reader034/viewer/2022051322/5441f4c8afaf9f52208b4840/html5/thumbnails/42.jpg)
We can’t manage how every bit of
content looks
@danieleizans | #WIADA2
![Page 43: Designing For Distributed Content Models](https://reader034.vdocuments.us/reader034/viewer/2022051322/5441f4c8afaf9f52208b4840/html5/thumbnails/43.jpg)
@danieleizans | #WIADA2
Content ItemAttributes:⁃ Title⁃ Date⁃ Author⁃ Abstract ⁃ Detailed
Content
Relation-ship
Relation-ship
Relation-ship
Relation-ship
Content ItemAttributes:⁃ Title⁃ Address ⁃ Short
Description
Content ItemAttributes:⁃ Title⁃ Date⁃ Author⁃ Abstract ⁃ Detailed
Content
Content ItemAttributes:⁃ Title⁃ Date⁃ Location⁃ Teaser ⁃ Detailed
Content
Relation-ship
Relation-ship
Content ItemAttributes:⁃ Title⁃ Date⁃ Author⁃ Abstract ⁃ Detailed
Content
But we can define rules
and encourage
relationships
From Sara Wachter-Boettcher“Building Bendable Content”
![Page 44: Designing For Distributed Content Models](https://reader034.vdocuments.us/reader034/viewer/2022051322/5441f4c8afaf9f52208b4840/html5/thumbnails/44.jpg)
Clean, purposeful content flows
@danieleizans | #WIADA2
![Page 45: Designing For Distributed Content Models](https://reader034.vdocuments.us/reader034/viewer/2022051322/5441f4c8afaf9f52208b4840/html5/thumbnails/45.jpg)
And when content flows via systems, we can scale
COPECreate Once Publish Everywhere
![Page 46: Designing For Distributed Content Models](https://reader034.vdocuments.us/reader034/viewer/2022051322/5441f4c8afaf9f52208b4840/html5/thumbnails/46.jpg)
And we can design responsively
@danieleizans | #WIADA2
![Page 47: Designing For Distributed Content Models](https://reader034.vdocuments.us/reader034/viewer/2022051322/5441f4c8afaf9f52208b4840/html5/thumbnails/47.jpg)
And we can deploy
@danieleizans | #WIADA2
![Page 48: Designing For Distributed Content Models](https://reader034.vdocuments.us/reader034/viewer/2022051322/5441f4c8afaf9f52208b4840/html5/thumbnails/48.jpg)
Assured that our system is good for humans and robots
@danieleizans | #WIADA2
![Page 49: Designing For Distributed Content Models](https://reader034.vdocuments.us/reader034/viewer/2022051322/5441f4c8afaf9f52208b4840/html5/thumbnails/49.jpg)
@danieleizans | #WIADA2
“Content and form are lovers, their love-child is design”
- Stephen Hay
![Page 50: Designing For Distributed Content Models](https://reader034.vdocuments.us/reader034/viewer/2022051322/5441f4c8afaf9f52208b4840/html5/thumbnails/50.jpg)
Hug it out. Get to work.
@danieleizans | #WIADA2
![Page 51: Designing For Distributed Content Models](https://reader034.vdocuments.us/reader034/viewer/2022051322/5441f4c8afaf9f52208b4840/html5/thumbnails/51.jpg)
Thanks.
> Me (danieleizans.com)
> Work (Team Detroit)
> Passion (Contents Magazine)
> Microthoughts (@danieleizans)
@danieleizans | #WIADA2