62
Content First f r Better UX Kavitha Krishnan UX Camp - Apr 30, 2016

Content first for Better UX

Embed Size (px)

Citation preview

Page 1: Content first for Better UX

Content First f r Better UX

Kavitha KrishnanUX Camp - Apr 30, 2016

Page 2: Content first for Better UX
Page 3: Content first for Better UX
Page 4: Content first for Better UX
Page 5: Content first for Better UX
Page 6: Content first for Better UX
Page 7: Content first for Better UX
Page 8: Content first for Better UX
Page 9: Content first for Better UX

Why content first?

Page 10: Content first for Better UX
Page 11: Content first for Better UX

1996

1980s

1970sPhotographer’s Market

Page 12: Content first for Better UX

But, Why content before design?

Page 13: Content first for Better UX

http://blog.usabilla.com/10-best-ux-infographics-5/

Page 14: Content first for Better UX

But, Why content before design?

Page 15: Content first for Better UX

Design may be impressive but content is the reason users are there

Page 16: Content first for Better UX

Design may be impressive but content is the reason users are there

Content decides interaction

Page 17: Content first for Better UX
Page 18: Content first for Better UX

Design may be impressive but content is the reason users are there

Content decides interaction

Content determines the design

Page 19: Content first for Better UX
Page 20: Content first for Better UX
Page 21: Content first for Better UX

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

Page 22: Content first for Better UX

Content Choreography

https://speckyboy.com/2013/01/17/the-evolution-of-responsive-web-design-responsivity-analysis/

Page 23: Content first for Better UX

But, why?

Page 24: Content first for Better UX

Design

ContentDesign

Content

Page 25: Content first for Better UX

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.”

Page 26: Content first for Better UX

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.”

Page 27: Content first for Better UX

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.”

Page 28: Content first for Better UX
Page 29: Content first for Better UX

What is content first strategy?

Page 30: Content first for Better UX

“ 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

Page 31: Content first for Better UX

What do you do when there is no content?

Page 32: Content first for Better UX

F*&% Lorem Ipsum

Page 33: Content first for Better UX

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?

Page 34: Content first for Better UX

The Core Model

Page 35: Content first for Better UX

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 36: Content first for Better UX

Page Table

Page 37: Content first for Better UX

Use real text in early sketching

Page 38: Content first for Better UX

Use Proto Content

Current Content

Competitor Content

Write your own content

Page 39: Content first for Better UX

This won’t hold up

Page 40: Content first for Better UX

bradfrostweb.com

Page 41: Content first for Better UX

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

Page 42: Content first for Better UX

Multi-Device Ecosystem

Designing Multi-Device Experiences, Michal Levin, O’Reilly, 2014

Page 43: Content first for Better UX

Design/content that’s unfixed from the desktop

Design/content ready for new devices

Design/content portable to future platforms/devices

Page 44: Content first for Better UX

COPE: Create Once, Publish Everywhere

Page 45: Content first for Better UX

GO FROM PAGES TO PARTS

Page 46: Content first for Better UX

Brad Frost’s Atomic DesignWe’re not designing pages, we’re designing system of components

- Stephen Hay

Page 47: Content first for Better UX

Brad Frost’s Atomic Design

Page 48: Content first for Better UX

Atoms

Page 49: Content first for Better UX

Molecules

Page 50: Content first for Better UX

Organism

Page 51: Content first for Better UX

Templates

Page 52: Content first for Better UX

Pages

Page 53: Content first for Better UX

Why Brad Frost’s Atomic Designs?

Page 54: Content first for Better UX

Brad Frost’s Atomic Design

Object Oriented Design

Page 55: Content first for Better UX

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.

Page 56: Content first for Better UX

Brad Frost’s Atomic Design

Object Oriented Design

Interactive Game Design Approach

Page 57: Content first for Better UX

Interactive Game Design Approach

Page 58: Content first for Better UX

We can’t manually managehow each bit of design looks.

Page 59: Content first for Better UX

But, when we have structure,we can make rules.

Page 60: Content first for Better UX

Better content knowledge

More Structure

Rules that best reflect human choices

Page 61: Content first for Better UX

Questions ?

Page 62: Content first for Better UX

Thank You!@PassionateUXer

[email protected]