Using Imagery and Dynamic Media to Master User Experience
•
0 likes•440 views
This document summarizes a presentation about using imagery and dynamic media to improve user experience. It discusses four rules for image usability: 1) choose relevant photos, 2) avoid filler photos, 3) use photos to guide readers, and 4) use photos for a purpose. It also discusses optimizing product images for online retail by ensuring they are the right size, have adequate resolution and contrast, and present a clean background. Finally, it explores emerging technologies like 360-degree views, hotspots, and video that can create more interactive online shopping experiences.
Recommended
Recommended
More Related Content
Similar to Using Imagery and Dynamic Media to Master User Experience
Similar to Using Imagery and Dynamic Media to Master User Experience (20)
Recently uploaded
Recently uploaded (12)
Using Imagery and Dynamic Media to Master User Experience
- 1. EYE CANDY USING IMAGERY AND DYNAMIC MEDIA TO MASTER USER EXPERIENCE
- 2. Matt Fowler, Account Executive Snap36 Twitter: @FreakinFowler Molly Pfister, Director of Marketing Snap36 Twitter: @molly_pfister
- 4. Snap36 • Founded in 2008 • Snap36 specializes in 360 & 3D product photography • 7,000 ft Chicago studio configured to shoot thousands of products using the latest robotic equipment • Mobile studio capable of shooting on location • Exclusive distributors of professional grade robotic hardware and workflow software
- 5. WHAT WE’RE TALKING ABOUT… 1 Image Usability Rules 2 Optimizing Images for Online Retail 3 Future of Product Photography
- 6. {1 Ima ge Usa bil ity Ru les } are your pictures worth 1,000 words?
- 8. Our brain process visuals 60,000x faster than text 70% 50% 40% 90% Of info transmitted to the brain is visual Of sensory receptors are in your eyes Of your brain is active in visual processing Of people respond better to visuals
- 9. RULE 1: Choose the Right Photos Users pay close attention to photos and other images that contain relevant information, but avoid generic-looking images on the page Image Usability Rules
- 10. Image Usability Rules RULE 2: Don’t Use Photos as Filler Elements People will go their way to ignore fluffy pictures used to ‘jazz up’ Web pages
- 11. Image Usability Rules RULE 3: Use Photos to Guide a Reader
- 12. RULE 4: Use Photos for a Purpose Use images to provide important contextual information— how it works, how big it is, what it looks like Image Usability Rules
- 13. RECAP: IMAGE USABILITY RULES 1) Choose the right photos 2) Don’t use photos as filler elements 3) Use photos to guide a reader 4) Use photos for a purpose
- 14. {2 Opt imi zin g Im ag es for Onl ine Re tail} how to master the customer experience
- 15. WE DON’T GO ONLINE, WE LIVE THERE
- 16. GROWTH OF E-COMMERCE $231 $262 $291 $319 $345 $370 2012 2013 2014 2015 2016 2017 (US$ Billions) Year-Over-Year Growth Share of Total Retail Sales 14% 13% 11% 10% 8% 7% 8% 8% 9% 10% 10% 10%
- 18. MCOMMERCE GROWTH IS OUTPACING TRADITIONAL ECOMMERCE GROWTH BY 200%
- 20. Research online and in store, buy in store Search online, buy online 13% 7% Search in store, buy online Search online, buy in store MULTI-CHANNEL JOURNEY TO PURCAHSE Research online and in store, buy online Search in store, buy in store Buy online, pick up in store 40% of respondents purchased their last product using cross-channel methods 7% 7% 21% 39% 6%
- 22. HOW WE SEE PRODUCTS IN THE REAL WORLD • Check out the collection of available styles • Compare products to each other • Closely examine items you find most interesting
- 23. WHAT MAKES A GOOD PRODUCT IMAGE? 1) Right size 2) Contrast and details 3) Clean background 4) Adequate resolutions 5) Consistency
- 24. {3 Fut ure of Pro duc t P hot ogr aph y } how to create interactive experiences
- 25. VIDEO: Tom Ford
- 26. 360° SPIN: Ann Taylor
- 28. LET’S REVIEW… • Photos should act as information-dense pieces of content that can quickly send your intended message to your audience • Create images that deliver a seamless customer experiences across a variety of mediums and user touch points • As the line between the virtual and real world continues to blur, new possibilities to enhance both will present themselves
- 29. THANKS!
Editor's Notes
- Images really are worth 1,000 words. They are a powerful medium that can give your brand personality. And when used properly, photos are effective, information-dense content that can quickly send your intended message to your audience.
- In fact, our brain process visuals 60,000x faster than text. No wonder we’re all addicted to Instagram. It’s easy to digest and our brain loves that. 90% of info transmitted to the brain is visual 70% of sensory receptors are in your eyes 50% of your brain is active in visual processing 40% of people respond better to visual than standard copy Of course, you all know the importance of visuals or else you wouldn’t be here! So let’s get into some general usability rules
- #1 Choose the Right Photos Jakon Nielsen did a eyetracking study to gauge how users approach website images. He found that users skipped a photo that didn’t help with the purpose of the web page, which was to outline the steps prospective students need to take in order to apply to the Yale School of Management. As you can see from the image above, people didn’t look at the photo on the right of the web page, probably because it didn’t serve an important purpose in giving readers any information about how to apply to the school. When choosing a photo you need to consider Fundamentals – such as composition, size, exposure Effectiveness – How well does the photo create an appealing argument for the rational or emotional user Message Communicated – Is this photo sending the correct information to its intended audience? Anticipated user response – is this photo able to change behavior?
- Rule 2 is don’t use photos as filler elements. Photos that don’t serve a purpose other than being ornamental components of a web page are obstructions. In the same study as rule 1, Nielsen noted that people went out of their way to avoid generic-looking images. Superfluous images only burden your users by slowing them down. It’s best to leave these types of photos out of your web pages.
- Usability specialist James Breeze did an eye tracking study of over 100 people. He found that people fixated on the eyes of the photo’s model — in this case, a baby — and wherever the baby’s eyes were directed. When he changed the direction of the baby’s eye gaze towards the text of the web page, more people fixated on the text. In these images, the redder the spot, the more time spent looking at that area. A separate study conducted found that having the model’s eyes gaze toward the intended product or copy, lead to a 78% in users looking at the target
- Photos have the amazing ability to do many things. They can provide important contextual information about its subject, such as how it works, how big it is and what it looks like. The Square image used on their homepage does just that. Square’s photo shows you: how the mobile card reader attaches to your smartphone how big the mobile card reader is how you’d swipe a credit card the mobile card reader what will appear on the screen of your smartphone when you swipe a credit card Additionally, the finger pointing left helps guide readers to the CTA
- By 2017, Forrester predicts that US online retail sales will reach $370 billion Small web retailers that generate less than $10 million annually in online sales and that have been in business for less than four years have the fastest annual growth Online retail will continue to outpace the growth of physical retail stores –something this category has done since its inception.
- There are two main factors contributing to the growth of e-commerce and this is the first mobile devices Mobile devices have profoundly and lastingly changed the digital media landscape and the way retail does business. Virtually all growth in total internet usage over the past three years has come from the use of smartphones & tablets, which are responsible for almost doubling the amount of time Americans spend online. 4 out 5 mobile users now use a mobile device to shop online and are spending almost 6x as much time on their mobile phones as they were a year ago. Why is this important for imagery? UPS reports that the #1 hurdle that users encounter when accessing a retailers website, is bad, un-optimized imagery. Not only does imagery need to be optimized for mobile purchases, but it also needs to be optimized for users to research products.
- There are two main factors contributing to the growth of e-commerce and this is the first mobile devices Mobile devices have profoundly and lastingly changed the digital media landscape and the way retail does business. Virtually all growth in total internet usage over the past three years has come from the use of smartphones & tablets, which are responsible for almost doubling the amount of time Americans spend online. 4 out 5 mobile users now use a mobile device to shop online and are spending almost 6x as much time on their mobile phones as they were a year ago. Why is this important for imagery? UPS reports that the #1 hurdle that users encounter when accessing a retailers website, is bad, un-optimized imagery. Not only does imagery need to be optimized for mobile purchases, but it also needs to be optimized for users to research products.
- Why research? Because we’ve all been here. Shopping is no longer a linear path. It is a multi-touch journey through various channels. The second factor contributing to the growth of e-commerce, a multi-channel journey, means that your site’s imagery need to educate your audience. Regardless of if you have an e-commerce site, today’s consumers are savvier than ever and use the internet to research before heading into a store, while in the store and even after a store visit.
- Why research? Because we’ve all been here. Shopping is no longer a linear path. It is a multi-touch journey through various channels. The second factor contributing to the growth of e-commerce, a multi-channel journey, means that your site’s imagery need to educate your audience. Regardless of if you have an e-commerce site, today’s consumers are savvier than ever and use the internet to research before heading into a store, while in the store and even after a store visit.
- Before discussing best practices helpful to examine shoppers’ real world experiences at “bricks and mortar” stores to understand what influences and motivates purchases. Usable e-commerce imagery should deliver the same benefits as an in-store retail experience You go to a store to See a collection of available styles Compare products to each other Look closely at the items you find most interesting So how can optimize imagery to meet these objectives?
- Before discussing best practices helpful to examine shoppers’ real world experiences at “bricks and mortar” stores to understand what influences and motivates purchases. Usable e-commerce imagery should deliver the same benefits as an in-store retail experience You go to a store to See a collection of available styles Compare products to each other Look closely at the items you find most interesting So how can optimize imagery to meet these objectives?
- 1. The right size for their purpose. For thumbnails, use the largest size you can get away with that fits in your layout and enables you to display enough images on a page. Check your images on multiple screen resolutions. Currently 1024x768 is the most common resolution, but it makes sense to see how your product images look at higher resolutions too. You can use Google Analytics to tell you what resolutions your visitors use 2. Bright enough for the subject matter Some types of products are more difficult to see than others. Dark colored garments don’t photograph well, so details can get lost easily. Use Photoshop or other editing tools to bump up contract or take separate close-up photos of products with fine detail. This is especially important your goal is to provide enough information to your users that they can evaluate/compare the product and make a purchasing decision 3. Uncluttered Display products by themselves with no background. An uncluttered image makes it easy for users to focus on the product and quickly determine if it’s what they want. It also makes it easy to compare multiple items. Enable your users to understand what they are looking at and how it differs from your other products. 4. Adequate resolution This is a common mistake! You main product image cannot be an enlarged version of your thumbnail! You will lose all detail and clarity. Make the thumbnail from the larger product image, not the other way around. 5. Consistency Consistency of product images is very important for users trying to compare various products. Different angles and background can create confusion, which breeds frustration.
- To prepare for customers who, no doubt, will want the same shopping experience whether they are shopping via the PC, tablet, or mobile phone, best in class retailers will need to have the technical agility to provide a shopping experience that is appropriate to the device but still allows customers to be able to access as much information as they could using other means. Here are a few examples of top retailers taking an innovative approach to product photography
- Purpose - Photos need to be useable. They can pack load of information in a tiny space