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.
6. And oh, that *$#@&! context thing ...
@danieleizans | #WIADA2
7. What’s a UX pro to do?
RESPONSIVE DESIGN?!
UNIFY CODEBASES?
DEVICE SPECIFIC STRATEGY?
PROTOTYPE?
MOBILE FIRST?!
ESCHEW WIREFRAMES?
@danieleizans | #WIADA2
9. We create hierarchy.
Home Ford Social Support LAD En Esp. More Ford Search
Crossovers Hybrids Comm Shopping
Cars Trucks All Tech Hub
& SUVS and EVs Truck Tools
C-Max C-Max Fusion Fusion Focus
Build/Price
Hybrid Energi Hybrid SE Energi Electric
Hybrid
Gallery Features Specs Models Accesories Pricing Etc.
Games
@danieleizans | #WIADA2
23. These are problems we can solve
http://www.rexfeatures.com/search/?kw=lego+italy&iso=GBR&lkw=lego&viah=Y&stk=N&sft=&search_action=# @danieleizans | #WIADA2
24. Design from the content out!
A Call To Arms
@danieleizans | #WIADA2
25. We must look beyond the page.
@danieleizans | #WIADA2
26. Prepare for new devices and contexts.
@danieleizans | #WIADA2
29. Content is messy.
• PURPOSE
What’s the content supposed to accomplish?
• MESSAGE
What’s it saying? How is it saying it?
• RELATIONSHIPS
What other content is conceptually
connected?
• PRIORITIES
How important is it for the business? The
user?
@danieleizans | #WIADA2
30. Making sense of the mess
1. Content types (inventory)
2. Content wireframes
3. Content structure (data model)
4. CMS Plan
5. UX/Design
6. Prototype
@danieleizans | #WIADA2
31. Content Inventory
1. Content Type / Persona
2. Production Source / Author / Owner
3. Original Intent (aka why was it made)
4. Content Quality / Score
5. Length / Word Count /
File Size
6. Rights
@danieleizans | #WIADA2
33. Content Wireframe
1. Logo
2. Navigation
3. Headline
4. Author
5. Date
6. Related Assets
7. Related Badge
8. Comments
9. Related Articles
10. Social Links
@danieleizans | #WIADA2
34. Content Wireframe
1
1. Logo
2
2. Navigation
4 3
3. Headline
4. Author 5 6 7
5. Date
6. Related Assets
7. Related Badge 10 8
8. Comments 9
9. Related Articles
10. Social Links
@danieleizans | #WIADA2
35. Goal: Understand Hierarchy and
Relationships Links to
Related
Links to Feature Links to
Business Author Bio
Related Article Related
Tagged
by
Tagged
by
Landmark Tagged
by
City Links to
Related
Tagged Tagged Blog Post
by by
Links to
Related
Related
to
Deal Event
From Sara Wachter-Boettcher
“Building Bendable Content” @danieleizans | #WIADA2
36. Focus on Structure
By focusing on parts instead of
pages, data is portable and able
to shift when needed or seen as
a competitive advantage.
@danieleizans | #WIADA2
37. Goal: Create relationships in data
Chunking data appropriately
allows it to be nimble and
repurposed quickly.
@danieleizans | #WIADA2
38. CMS and Data Modeling
What you see may be
what you get, but what
you get isnʼt good for
content portability.
@danieleizans | #WIADA2
39. CMS and Data Modeling
Fields are your friends.
They create relationships
in the data and allow for
scalability and meaning.
@danieleizans | #WIADA2
40. So this will be
like wearing
handcuffs right?
@danieleizans | #WIADA2
41. Models are like
rails for each
new experience
@danieleizans | #WIADA2