style vs. substance - cooper

@Cooper_42 cooper@rockley.com © The Rockley Group, Inc. #Infodevworld

Style vs Substance

@Cooper_42 cooper@rockley.com © The Rockley Group, Inc. #Infodevworld

Style vs Substance

Meeting the needs of the user

@Cooper_42 cooper@rockley.com © 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

@Cooper_42 cooper@rockley.com © The Rockley Group, Inc. #Infodevworld

Rockley Customers

@Cooper_42 cooper@rockley.com © The Rockley Group, Inc. #Infodevworld

Debate has been around forever…

Plato Aristotle

@Cooper_42 cooper@rockley.com © 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.

@Cooper_42 cooper@rockley.com © 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

@Cooper_42 cooper@rockley.com © The Rockley Group, Inc. #Infodevworld

Form follows function

• Louis Sullivan, Architect

• The Tall Office Building Artistically Considered (1896)

Prudential Building, Buffalo (1894)

@Cooper_42 cooper@rockley.com © The Rockley Group, Inc. #Infodevworld

Until it doesn’t

• Empress of Japan, 1930

@Cooper_42 cooper@rockley.com © The Rockley Group, Inc. #Infodevworld

Until it doesn’t

• Gigantic, 1932

@Cooper_42 cooper@rockley.com © The Rockley Group, Inc. #Infodevworld

The form can become a style

@Cooper_42 cooper@rockley.com © The Rockley Group, Inc. #Infodevworld

The form can become a style

@Cooper_42 cooper@rockley.com © The Rockley Group, Inc. #Infodevworld

The form can become a style

@Cooper_42 cooper@rockley.com © The Rockley Group, Inc. #Infodevworld

The form can become a style

@Cooper_42 cooper@rockley.com © The Rockley Group, Inc. #Infodevworld

What’s really important?

@Cooper_42 cooper@rockley.com © 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

@Cooper_42 cooper@rockley.com © The Rockley Group, Inc. #Infodevworld

What’s good visual design?

@Cooper_42 cooper@rockley.com © The Rockley Group, Inc. #Infodevworld

• Consultants answer…

It depends.

@Cooper_42 cooper@rockley.com © The Rockley Group, Inc. #Infodevworld

• Consultants answer…

It depends.

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

@Cooper_42 cooper@rockley.com © The Rockley Group, Inc. #Infodevworld

Mini

@Cooper_42 cooper@rockley.com © The Rockley Group, Inc. #Infodevworld

Ford

@Cooper_42 cooper@rockley.com © The Rockley Group, Inc. #Infodevworld

Ford Focus

@Cooper_42 cooper@rockley.com © The Rockley Group, Inc. #Infodevworld

Brand level compared

@Cooper_42 cooper@rockley.com © The Rockley Group, Inc. #Infodevworld

Brand level compared

@Cooper_42 cooper@rockley.com © The Rockley Group, Inc. #Infodevworld

Mini

• The wrong type of responsive design

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

@Cooper_42 cooper@rockley.com © The Rockley Group, Inc. #Infodevworld

Mini

• The wrong type of responsive design

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

@Cooper_42 cooper@rockley.com © The Rockley Group, Inc. #Infodevworld

Mini

@Cooper_42 cooper@rockley.com © The Rockley Group, Inc. #Infodevworld

Mini

• On a mini screen (iPhone 4s)

@Cooper_42 cooper@rockley.com © The Rockley Group, Inc. #Infodevworld

Ryanair - old

@Cooper_42 cooper@rockley.com © The Rockley Group, Inc. #Infodevworld

Ryanair - new

@Cooper_42 cooper@rockley.com © 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

@Cooper_42 cooper@rockley.com © The Rockley Group, Inc. #Infodevworld

Appearance and credibility

• My eyes hurt

http://www.mikesmarina.info/

@Cooper_42 cooper@rockley.com © The Rockley Group, Inc. #Infodevworld

Appearance and credibility

• Dull, but probably informative

http://www.firstclassfishing.com

@Cooper_42 cooper@rockley.com © The Rockley Group, Inc. #Infodevworld

Appearance and credibility

• To the point, updated design

http://www.fishingpuntacana.com

@Cooper_42 cooper@rockley.com © 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.

@Cooper_42 cooper@rockley.com © The Rockley Group, Inc. #Infodevworld

Techniques

@Cooper_42 cooper@rockley.com © 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!

@Cooper_42 cooper@rockley.com © The Rockley Group, Inc. #Infodevworld

Meet their needs

http://xkcd.com/773/

University Website

@Cooper_42 cooper@rockley.com © The Rockley Group, Inc. #Infodevworld

What does your audience expect?

@Cooper_42 cooper@rockley.com © The Rockley Group, Inc. #Infodevworld

What does your audience expect?

@Cooper_42 cooper@rockley.com © The Rockley Group, Inc. #Infodevworld

What does your audience expect?

@Cooper_42 cooper@rockley.com © 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/

@Cooper_42 cooper@rockley.com © The Rockley Group, Inc. #Infodevworld

Use standard form

• Too much Substance

@Cooper_42 cooper@rockley.com © The Rockley Group, Inc. #Infodevworld

Don’t go overboard

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

@Cooper_42 cooper@rockley.com © The Rockley Group, Inc. #Infodevworld

Don’t go overboard

• Unless that’s the point!

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

@Cooper_42 cooper@rockley.com © The Rockley Group, Inc. #Infodevworld

Match the visual to the message

@Cooper_42 cooper@rockley.com © The Rockley Group, Inc. #Infodevworld

Match the visual to the message

@Cooper_42 cooper@rockley.com © The Rockley Group, Inc. #Infodevworld

Match the visual to the message

@Cooper_42 cooper@rockley.com © The Rockley Group, Inc. #Infodevworld

Match the visual to the message

@Cooper_42 cooper@rockley.com © The Rockley Group, Inc. #Infodevworld

Match the visual to the message

@Cooper_42 cooper@rockley.com © The Rockley Group, Inc. #Infodevworld

Match the visual to the message

@Cooper_42 cooper@rockley.com © The Rockley Group, Inc. #Infodevworld

Match the visual to the message

@Cooper_42 cooper@rockley.com © The Rockley Group, Inc. #Infodevworld

Do what you should, not what you can

• Movies or Flash required to get any useful information

@Cooper_42 cooper@rockley.com © The Rockley Group, Inc. #Infodevworld

Consider different mobile devices

@Cooper_42 cooper@rockley.com © The Rockley Group, Inc. #Infodevworld

Do what makes sense

@Cooper_42 cooper@rockley.com © The Rockley Group, Inc. #Infodevworld

Yer doin’ it wrong…

@Cooper_42 cooper@rockley.com © The Rockley Group, Inc. #Infodevworld

Choose colours wisely

@Cooper_42 cooper@rockley.com © The Rockley Group, Inc. #Infodevworld

Colour blindness

• As many as 8% of men have some form colour blindness

• You may see: • 74 • 21 • No number at all

http://upload.wikimedia.org/wikipedia/commons/e/e0/Ishihara_9.png

Web page renderer: http://colorfilter.wickline.org/ Image renderer: http://www.color-blindness.com/coblis-color-blindness-simulator/

@Cooper_42 cooper@rockley.com © 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