Style Vs. Substance - Cooper

59
@Cooper_42 [email protected] © The Rockley Group, Inc. #Infodevworld Style vs Substance

description

Style vs substance Cooper

Transcript of Style Vs. Substance - Cooper

Page 1: Style Vs. Substance -  Cooper

@Cooper_42 [email protected] © The Rockley Group, Inc. #Infodevworld

Style vs Substance

Page 2: Style Vs. Substance -  Cooper

@Cooper_42 [email protected] © The Rockley Group, Inc. #Infodevworld

Style vs Substance

Meeting the needs of the user

Page 3: Style Vs. Substance -  Cooper

@Cooper_42 [email protected] © The Rockley Group, Inc. #Infodevworld

About The Rockley Group

• Work with companies in pharmaceutical, medical devices, high technology, and finance

• These companies translate content in 4-70 languages • Deliver content on paper, traditional web and various

mobile devices • Create intelligent content strategies from creation

through translation and delivery • Optimizing information plays a big part in this process • Component content management plays a key role in

the solution

Page 4: Style Vs. Substance -  Cooper

@Cooper_42 [email protected] © The Rockley Group, Inc. #Infodevworld

Rockley Customers

Page 5: Style Vs. Substance -  Cooper

@Cooper_42 [email protected] © The Rockley Group, Inc. #Infodevworld

Debate has been around forever…

Plato Aristotle

Page 6: Style Vs. Substance -  Cooper

@Cooper_42 [email protected] © The Rockley Group, Inc. #Infodevworld

…and continues

Hollywood is in the perception business where you create layers to create mystery. In Silicon Valley it's about taking away the layers to get to the substance.

Page 7: Style Vs. Substance -  Cooper

@Cooper_42 [email protected] © The Rockley Group, Inc. #Infodevworld

Hollywood is in the perception business where you create layers to create mystery. In Silicon Valley it's about taking away the layers to get to the substance. MC Hammer

photo credit: Annie Leibowitz

Page 8: Style Vs. Substance -  Cooper

@Cooper_42 [email protected] © The Rockley Group, Inc. #Infodevworld

Form follows function

• Louis Sullivan, Architect

• The Tall Office Building Artistically Considered (1896)

Prudential Building, Buffalo (1894)

Page 9: Style Vs. Substance -  Cooper

@Cooper_42 [email protected] © The Rockley Group, Inc. #Infodevworld

Until it doesn’t

• Empress of Japan, 1930

Page 10: Style Vs. Substance -  Cooper

@Cooper_42 [email protected] © The Rockley Group, Inc. #Infodevworld

Until it doesn’t

• Gigantic, 1932

Page 11: Style Vs. Substance -  Cooper

@Cooper_42 [email protected] © The Rockley Group, Inc. #Infodevworld

The form can become a style

Page 12: Style Vs. Substance -  Cooper

@Cooper_42 [email protected] © The Rockley Group, Inc. #Infodevworld

The form can become a style

Page 13: Style Vs. Substance -  Cooper

@Cooper_42 [email protected] © The Rockley Group, Inc. #Infodevworld

The form can become a style

Page 14: Style Vs. Substance -  Cooper

@Cooper_42 [email protected] © The Rockley Group, Inc. #Infodevworld

The form can become a style

Page 15: Style Vs. Substance -  Cooper

@Cooper_42 [email protected] © The Rockley Group, Inc. #Infodevworld

What’s really important?

Page 16: Style Vs. Substance -  Cooper

@Cooper_42 [email protected] © The Rockley Group, Inc. #Infodevworld

• Should ‘look good’ • ‘Looks good’ can vary

• Provide information

• Work across all platforms • Print is still ‘a platform’

• Balances the needs of the user/viewer/reader and the

content owners

Page 17: Style Vs. Substance -  Cooper

@Cooper_42 [email protected] © The Rockley Group, Inc. #Infodevworld

What’s good visual design?

Page 18: Style Vs. Substance -  Cooper

@Cooper_42 [email protected] © The Rockley Group, Inc. #Infodevworld

• Consultants answer…

It depends.

Page 19: Style Vs. Substance -  Cooper

@Cooper_42 [email protected] © The Rockley Group, Inc. #Infodevworld

• Consultants answer…

It depends.

It’s more of an art than a science Let’s look at some examples…

Page 20: Style Vs. Substance -  Cooper

@Cooper_42 [email protected] © The Rockley Group, Inc. #Infodevworld

Mini

Page 21: Style Vs. Substance -  Cooper

@Cooper_42 [email protected] © The Rockley Group, Inc. #Infodevworld

Ford

Page 22: Style Vs. Substance -  Cooper

@Cooper_42 [email protected] © The Rockley Group, Inc. #Infodevworld

Ford Focus

Page 23: Style Vs. Substance -  Cooper

@Cooper_42 [email protected] © The Rockley Group, Inc. #Infodevworld

Brand level compared

Page 24: Style Vs. Substance -  Cooper

@Cooper_42 [email protected] © The Rockley Group, Inc. #Infodevworld

Brand level compared

Page 25: Style Vs. Substance -  Cooper

@Cooper_42 [email protected] © The Rockley Group, Inc. #Infodevworld

Mini

• The wrong type of responsive design

• Forces the user to respond to the designer’s ‘vision’

Page 26: Style Vs. Substance -  Cooper

@Cooper_42 [email protected] © The Rockley Group, Inc. #Infodevworld

Mini

• The wrong type of responsive design

• Forces the user to respond to the designer’s ‘vision’

Page 27: Style Vs. Substance -  Cooper

@Cooper_42 [email protected] © The Rockley Group, Inc. #Infodevworld

Mini

Page 28: Style Vs. Substance -  Cooper

@Cooper_42 [email protected] © The Rockley Group, Inc. #Infodevworld

Mini

• On a mini screen (iPhone 4s)

Page 29: Style Vs. Substance -  Cooper

@Cooper_42 [email protected] © The Rockley Group, Inc. #Infodevworld

Ryanair - old

Page 30: Style Vs. Substance -  Cooper

@Cooper_42 [email protected] © The Rockley Group, Inc. #Infodevworld

Ryanair - new

Page 31: Style Vs. Substance -  Cooper

@Cooper_42 [email protected] © The Rockley Group, Inc. #Infodevworld

Appearance and credibility

• Nearly half of all site evaluators (46.1%) used visual cues, such as the site’s overall design or look, to assess a site’s credibility.

How Do People Evaluate a Web Site’s Credibility? - Results from a Large Study (B.J. Fogg, Ph.D., Cathy Soohoo, David Danielson, Leslie Marable, Julianne Stanford and Ellen R. Tauber - Persuasive Technology Lab Stanford University) 2002

Page 32: Style Vs. Substance -  Cooper

@Cooper_42 [email protected] © The Rockley Group, Inc. #Infodevworld

Appearance and credibility

• My eyes hurt

http://www.mikesmarina.info/

Page 33: Style Vs. Substance -  Cooper

@Cooper_42 [email protected] © The Rockley Group, Inc. #Infodevworld

Appearance and credibility

• Dull, but probably informative

http://www.firstclassfishing.com

Page 34: Style Vs. Substance -  Cooper

@Cooper_42 [email protected] © The Rockley Group, Inc. #Infodevworld

Appearance and credibility

• To the point, updated design

http://www.fishingpuntacana.com

Page 35: Style Vs. Substance -  Cooper

@Cooper_42 [email protected] © The Rockley Group, Inc. #Infodevworld

How much time do you have?

• You have less than a half second!

Evaluating the consistency of immediate aesthetic perceptions of web pages ( Noam Tractinskya, Avivit Cokhavia, Moti Kirschenbauma, Tal Sharfi) 2008

No statistically significant difference in ‘attractiveness’ if the webpage was viewed for 1/2 second or 10 seconds.

Page 36: Style Vs. Substance -  Cooper

@Cooper_42 [email protected] © The Rockley Group, Inc. #Infodevworld

Techniques

Page 37: Style Vs. Substance -  Cooper

@Cooper_42 [email protected] © The Rockley Group, Inc. #Infodevworld

Know who your user is

• Apollo Guidance Computer • 1966 -1972

• 19 pushbutton keys • 12 status lights for output • 32K of RAM • 1 Mhz clock speed

• Worked for the intended

users though!

Page 38: Style Vs. Substance -  Cooper

@Cooper_42 [email protected] © The Rockley Group, Inc. #Infodevworld

Meet their needs

http://xkcd.com/773/

University Website

Page 39: Style Vs. Substance -  Cooper

@Cooper_42 [email protected] © The Rockley Group, Inc. #Infodevworld

What does your audience expect?

Page 40: Style Vs. Substance -  Cooper

@Cooper_42 [email protected] © The Rockley Group, Inc. #Infodevworld

What does your audience expect?

Page 41: Style Vs. Substance -  Cooper

@Cooper_42 [email protected] © The Rockley Group, Inc. #Infodevworld

What does your audience expect?

Page 42: Style Vs. Substance -  Cooper

@Cooper_42 [email protected] © The Rockley Group, Inc. #Infodevworld

Use standard form

• Too much Style

http://www.thefrisky.com/2013-04-11/flowchart-should-i-throw-that-thing-out/

Page 43: Style Vs. Substance -  Cooper

@Cooper_42 [email protected] © The Rockley Group, Inc. #Infodevworld

Use standard form

• Too much Substance

Page 44: Style Vs. Substance -  Cooper

@Cooper_42 [email protected] © The Rockley Group, Inc. #Infodevworld

Don’t go overboard

https://www.youtube.com/watch?v=MbspMfAWq48

Page 45: Style Vs. Substance -  Cooper

@Cooper_42 [email protected] © The Rockley Group, Inc. #Infodevworld

Don’t go overboard

• Unless that’s the point!

https://www.youtube.com/watch?v=MbspMfAWq48

Page 46: Style Vs. Substance -  Cooper

@Cooper_42 [email protected] © The Rockley Group, Inc. #Infodevworld

Match the visual to the message

Page 47: Style Vs. Substance -  Cooper

@Cooper_42 [email protected] © The Rockley Group, Inc. #Infodevworld

Match the visual to the message

Page 48: Style Vs. Substance -  Cooper

@Cooper_42 [email protected] © The Rockley Group, Inc. #Infodevworld

Match the visual to the message

Page 49: Style Vs. Substance -  Cooper

@Cooper_42 [email protected] © The Rockley Group, Inc. #Infodevworld

Match the visual to the message

Page 50: Style Vs. Substance -  Cooper

@Cooper_42 [email protected] © The Rockley Group, Inc. #Infodevworld

Match the visual to the message

Page 51: Style Vs. Substance -  Cooper

@Cooper_42 [email protected] © The Rockley Group, Inc. #Infodevworld

Match the visual to the message

Page 52: Style Vs. Substance -  Cooper

@Cooper_42 [email protected] © The Rockley Group, Inc. #Infodevworld

Match the visual to the message

Page 53: Style Vs. Substance -  Cooper

@Cooper_42 [email protected] © The Rockley Group, Inc. #Infodevworld

Do what you should, not what you can

• Movies or Flash required to get any useful information

Page 54: Style Vs. Substance -  Cooper

@Cooper_42 [email protected] © The Rockley Group, Inc. #Infodevworld

Consider different mobile devices

Page 55: Style Vs. Substance -  Cooper

@Cooper_42 [email protected] © The Rockley Group, Inc. #Infodevworld

Do what makes sense

Page 56: Style Vs. Substance -  Cooper

@Cooper_42 [email protected] © The Rockley Group, Inc. #Infodevworld

Yer doin’ it wrong…

Page 57: Style Vs. Substance -  Cooper

@Cooper_42 [email protected] © The Rockley Group, Inc. #Infodevworld

Choose colours wisely

Page 59: Style Vs. Substance -  Cooper

@Cooper_42 [email protected] © The Rockley Group, Inc. #Infodevworld

Finally - Balance

• It’s really style and substance • Too much of either and

everybody loses • There is no right way, there are

many wrong ways • What works is what’s right • Respect your users