content first for better ux
TRANSCRIPT
Content First f r Better UX
Kavitha KrishnanUX Camp - Apr 30, 2016
Why content first?
1996
1980s
1970sPhotographer’s Market
But, Why content before design?
http://blog.usabilla.com/10-best-ux-infographics-5/
But, Why content before design?
Design may be impressive but content is the reason users are there
Design may be impressive but content is the reason users are there
Content decides interaction
Design may be impressive but content is the reason users are there
Content decides interaction
Content determines the design
Design may be impressive but content is the reason users are there
Content decides interaction
Content determines the design
Content first is mobile first approach
Content Choreography
https://speckyboy.com/2013/01/17/the-evolution-of-responsive-web-design-responsivity-analysis/
But, why?
Design
ContentDesign
Content
Round 1“A well-designed space immediately says that you care about the details and that you want to contribute something fun and meaningful to your customers' lives.”
“Design is a word that’s come to mean so much that…we don't really talk about design, we talk about developing ideas and
making products.”
Round 2“The use of high quality, education-based content has become an essential ingredient in creating awareness, building trust, converting leads, serving customers and generating referrals.”
“Today’s web is an endless 24/7 cycle fed by content and social actions.”
Round 3“You can write for your idea-spreaders AND you can write for your buyers.”
“Design is the fundamental soul of a man made creation.”
What is content first strategy?
“ You can create good experiences without knowing the content. What you can’t do is create good experiences without knowing your content structure. What is your content made from, not what your content is.”
- Mark Boulton
What do you do when there is no content?
F*&% Lorem Ipsum
Start with Five W’s
Who are your users?
What is the main message you want to get across?
Where does the action take place?
When is it relevant?
Why is it important?
The Core Model
Content Inventory
Navigation Title Page Title Files Last Updated Owner Content (optional)
0.0 Home Wine Tasmania 3/5/2016 PK
1.0 Wine Tasmani 3/5/2016 KK
1.1 History History
1.2 Touring Touring
1.3 Investments Investments
1.4 Partners Partners
1.5 Industry statistics Industry Statistics
2.0 Latest News Latest News 3/5/2016 KK
3.0 Events PK
3.1 Overview Events
3.2 Booking Event Booking
3.3 Policy Booking Policy
4.0 Members Members 3/5/2016 JH
5.0 Resources Resources 3/5/2016 JH
6.0 Contact Us Contact Us 3/5/2016 JH
Page Table
Use real text in early sketching
Use Proto Content
Current Content
Competitor Content
Write your own content
This won’t hold up
bradfrostweb.com
Era of Digital Omnivore
90% move between 4 core devices to accomplish a goal
1.75 Billion smartphone users worldwide in 2014
24 Billion wireless connected devices in 2022
225 B app downloads worldwide in 2016
6 connected devices owned on average by tabled owners
86% use mobile devices while watching TV and other media
Designing Multi-Device Experiences, Michal Levin, O’Reilly, 2014
Multi-Device Ecosystem
Designing Multi-Device Experiences, Michal Levin, O’Reilly, 2014
Design/content that’s unfixed from the desktop
Design/content ready for new devices
Design/content portable to future platforms/devices
COPE: Create Once, Publish Everywhere
GO FROM PAGES TO PARTS
Brad Frost’s Atomic DesignWe’re not designing pages, we’re designing system of components
- Stephen Hay
Brad Frost’s Atomic Design
Atoms
Molecules
Organism
Templates
Pages
Why Brad Frost’s Atomic Designs?
Brad Frost’s Atomic Design
Object Oriented Design
Object Oriented Design
Object Oriented Programming is a programming language model organized around objects rather than “actions” and data rather than logic.
Object Oriented design is the art of identifying real world objects and map objects so that they work together to create a digital system that is efficient and meets user goals.
Brad Frost’s Atomic Design
Object Oriented Design
Interactive Game Design Approach
Interactive Game Design Approach
We can’t manually managehow each bit of design looks.
But, when we have structure,we can make rules.
Better content knowledge
More Structure
Rules that best reflect human choices
Questions ?