@Cooper_42 [email protected] © The Rockley Group, Inc. #Infodevworld
Style vs Substance
@Cooper_42 [email protected] © The Rockley Group, Inc. #Infodevworld
Style vs Substance
Meeting the needs of the user
@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
@Cooper_42 [email protected] © The Rockley Group, Inc. #Infodevworld
Rockley Customers
@Cooper_42 [email protected] © The Rockley Group, Inc. #Infodevworld
Debate has been around forever…
Plato Aristotle
@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.
@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
@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)
@Cooper_42 [email protected] © The Rockley Group, Inc. #Infodevworld
Until it doesn’t
• Empress of Japan, 1930
@Cooper_42 [email protected] © The Rockley Group, Inc. #Infodevworld
Until it doesn’t
• Gigantic, 1932
@Cooper_42 [email protected] © The Rockley Group, Inc. #Infodevworld
The form can become a style
@Cooper_42 [email protected] © The Rockley Group, Inc. #Infodevworld
The form can become a style
@Cooper_42 [email protected] © The Rockley Group, Inc. #Infodevworld
The form can become a style
@Cooper_42 [email protected] © The Rockley Group, Inc. #Infodevworld
The form can become a style
@Cooper_42 [email protected] © The Rockley Group, Inc. #Infodevworld
What’s really important?
@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
@Cooper_42 [email protected] © The Rockley Group, Inc. #Infodevworld
What’s good visual design?
@Cooper_42 [email protected] © The Rockley Group, Inc. #Infodevworld
• Consultants answer…
It depends.
@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…
@Cooper_42 [email protected] © The Rockley Group, Inc. #Infodevworld
Mini
@Cooper_42 [email protected] © The Rockley Group, Inc. #Infodevworld
Ford
@Cooper_42 [email protected] © The Rockley Group, Inc. #Infodevworld
Ford Focus
@Cooper_42 [email protected] © The Rockley Group, Inc. #Infodevworld
Brand level compared
@Cooper_42 [email protected] © The Rockley Group, Inc. #Infodevworld
Brand level compared
@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’
@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’
@Cooper_42 [email protected] © The Rockley Group, Inc. #Infodevworld
Mini
@Cooper_42 [email protected] © The Rockley Group, Inc. #Infodevworld
Mini
• On a mini screen (iPhone 4s)
@Cooper_42 [email protected] © The Rockley Group, Inc. #Infodevworld
Ryanair - old
@Cooper_42 [email protected] © The Rockley Group, Inc. #Infodevworld
Ryanair - new
@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
@Cooper_42 [email protected] © The Rockley Group, Inc. #Infodevworld
Appearance and credibility
• My eyes hurt
http://www.mikesmarina.info/
@Cooper_42 [email protected] © The Rockley Group, Inc. #Infodevworld
Appearance and credibility
• Dull, but probably informative
http://www.firstclassfishing.com
@Cooper_42 [email protected] © The Rockley Group, Inc. #Infodevworld
Appearance and credibility
• To the point, updated design
http://www.fishingpuntacana.com
@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.
@Cooper_42 [email protected] © The Rockley Group, Inc. #Infodevworld
Techniques
@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!
@Cooper_42 [email protected] © The Rockley Group, Inc. #Infodevworld
Meet their needs
http://xkcd.com/773/
University Website
@Cooper_42 [email protected] © The Rockley Group, Inc. #Infodevworld
What does your audience expect?
@Cooper_42 [email protected] © The Rockley Group, Inc. #Infodevworld
What does your audience expect?
@Cooper_42 [email protected] © The Rockley Group, Inc. #Infodevworld
What does your audience expect?
@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/
@Cooper_42 [email protected] © The Rockley Group, Inc. #Infodevworld
Use standard form
• Too much Substance
@Cooper_42 [email protected] © The Rockley Group, Inc. #Infodevworld
Don’t go overboard
https://www.youtube.com/watch?v=MbspMfAWq48
@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
@Cooper_42 [email protected] © The Rockley Group, Inc. #Infodevworld
Match the visual to the message
@Cooper_42 [email protected] © The Rockley Group, Inc. #Infodevworld
Match the visual to the message
@Cooper_42 [email protected] © The Rockley Group, Inc. #Infodevworld
Match the visual to the message
@Cooper_42 [email protected] © The Rockley Group, Inc. #Infodevworld
Match the visual to the message
@Cooper_42 [email protected] © The Rockley Group, Inc. #Infodevworld
Match the visual to the message
@Cooper_42 [email protected] © The Rockley Group, Inc. #Infodevworld
Match the visual to the message
@Cooper_42 [email protected] © The Rockley Group, Inc. #Infodevworld
Match the visual to the message
@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
@Cooper_42 [email protected] © The Rockley Group, Inc. #Infodevworld
Consider different mobile devices
@Cooper_42 [email protected] © The Rockley Group, Inc. #Infodevworld
Do what makes sense
@Cooper_42 [email protected] © The Rockley Group, Inc. #Infodevworld
Yer doin’ it wrong…
@Cooper_42 [email protected] © The Rockley Group, Inc. #Infodevworld
Choose colours wisely
@Cooper_42 [email protected] © 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 [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