Must Design
75.5K views | +0 today
Follow
Must Design
Design Is Revolutionary
Your new post is loading...
Scooped by Martin (Marty) Smith
Scoop.it!

5 Quick Tips About Images & Web Design

5 Quick Tips About Images & Web Design | Must Design | Scoop.it

Hard Won Lessons
I spent almost a million dollars of OPM (Other People's Money) learning these five lessons about images and web design, so lessons learned the hard way:

1. Portraits Are Powerful
Portrait images where the model looks directly at the camera, are powerful "welcoming" images great for home, about and category "splash" pages.

2. Babies are DYNAMITE - Use Carefully
Thanks to our ancient caveman brain we can't NOT look at babies. Problem is that is not a secret so babies are now overused to hock insurance, tires and shampoo. If you use a baby my preference is to have the baby looking AT something.

Visitors eyes go where the eyes of people (or babies) are looking, so point your baby image directly at an important Call-to-Action and bet your conversions go up.

3. People Talking To Each Other = DANGEROUS
There may be context where it makes sense for you to have an image where people in the image are huddled together, but I doubt it. If you have two people huddled and a third looking directly out at the camera the image works better.

We respect a huddle. We don't want to intrude, so your web image is working against your online marketing purpose. Your image says we are here having a conversation and YOU (visitor) aren't invited. Not a good idea.

4. People Sell Better Than Widgets, but...
I  prefer to tell human stories even about the most widgety widget, but people bring "like me" problems too. Every visitor is looking for "like me" signals. If you know your archetype and tribe well enough to risk it use images of people consistent with your understanding.

If you have a wide variety of customers and members best to avoid single archetype "like me" images. This is yet another reason I like portraits. Portraits are "universal" meaning the welcoming look directly at the camera removes some of the "must be like me to engage" requirements.

5. In Action Shots Use The MOVEMENT
If your image is riding a bicycle POINT the movement at something important. I don't like movement images as heroes (largest images on a page is called a hero), but I love them in "sub-hero" images because movement creates excitement and allows me to direct the visitor's eyes where we want them to go.

Use these 5 hard won tips and your images won't fight your site's desire to connect, create community and convert visitors into buyers and members.



Martin (Marty) Smith's insight:

add your insight...



Michael Allenberg's curator insight, July 25, 2014 8:48 AM

Having spent over a decade as a professional photographer, this is spot on! Of utmost interest to Experience Designers interested in persuasive design methodologies! 

Scooped by Martin (Marty) Smith
Scoop.it!

Make Web Designs Welcoming Don't Say Welcome via @Scenttrail [Before and After graphic]

Make Web Designs Welcoming Don't Say Welcome via @Scenttrail [Before and After graphic] | Must Design | Scoop.it

Working with a team at UNC Emergency Room trying to make their website more engaging. As the BEFORE (on the right) image shows their current site "talks to itself about itself". Ways to fix that include:

* Hero image that heeds the sight line rule.
* Clear Calls To Action.
* Move Social from bottom left to upper right.
* Prominent Join Our List subscription form.
* Curate Customer / Patient content in (coming soon).

Your visitors' eyes follow the eyes of people in your photos. The image son the right show what NOT to do - make images that look like they are self referential. Never have people in an image on your site talking among themselves. Nothing says "we don't care about you" louder than images that are either too "smart", "exclusionary" or busy.

If people in your images don't look at the camera have their site lines pint to a Call To Action. Don't create ideas that are exclusionary either such as Leading, Teaching and Caring. That sounds like "selfspeak" to me.

OR, if you must have "selfspeak" then shore it with icons the way the UNC design lead did and use those icons to begin a conversation not a lecture about each of those ideas.

I LOVE text on a homepage for SEO, but it can be very exclusionary as the BEFORE image on the right proves. Tease the read with a few sentences and a "read more". BTW, the only time I use Read More CTAs is when I've teased something.

I prefer "learn more" since it feels more like we are learning together and less like work. Use closed loop CTAs when you are completing a proised action. All other times use CTAs that are more creative and fun.

The next step for this design, and the one that will make it really welcoming, is to curate in User Generated Content (UGC). When you include your customers (or patients in this case0=) you break down the THEM vs. US walls better than anything I can think of. Important to break down those walls since you need UGC and social shares to survive these days even if your have a .edu in your URL.

No comment yet.