Using Images Student Web Presence Guidelines
Summary “These new media provide more design options but also require design discipline. Unconstrained us of multi-media results in user interfaces that confuse users and make it harder for them to understand the information.” Neilsen (2000) p131 1. Why use images 2. Using images 3. The Power of Icons 4. Infographics (Graphs and Charts) 5. Using photographs 6. Using moving images
Why use images? • Can enhance the message of your page • Good way to demonstrate a product or activity • Can give your customer service a personal face • Can encourage repeat/regular visits to your web pages • 90% of information transmitted to the brain is visual* • Visuals are processed 60,000X faster in the brain than text* • 40% of people will respond better to visual information than plain text* • Viewers spend 100% more time on pages with videos on them* • 25 million smartphone users stream 4 hours of mobile video per month* • 75% of smartphone users watch videos on their phones* • Pages that use infographics grow in traffic an average of 12% more than those who don't.* *Sources: (3M Corporation, SEOmoz, MarketingSherpa, Ooyala, Ipsos and Zabisco)
Using images • Limit the use of images • Use images only when they are critical to the success of a page • Limit large images to above the fold • Use Thumbnail images to preview larger images • Ensure that all clickable images are labeled • Make sure images do not severely decrease download speeds • Use images that look like real-world items • Use image to illustrate a process or concept • A image may help site visitors serve themselves
The power of icons A user’s understanding of an icon is based on previous experience Save space • • Are powerful visual tools Allow users to identify a message without having to think • • Make good targets: they are sized large enough to be easily touched • Text + image works better than just image or just text Just text works better than just image • • Icon images are learned, icon positions are learned faster People remember a function by where it lives more than how it • looks – keep icon in same location • No need to translate icons for international users Can enhance the aesthetic appeal of a design • • Support the idea of a product range when the same icons are used in several places
Infographics (graphs and charts) • An infographic should tell a story • problem • solutions backed with data • conclusion • call to action • Use charts, graphs, maps to help site visitors understand message Limit ornamental graphics • Make sure infographics do not look like ads • Include actual data values with your infographic • Only use credible and well researched data for your infographic • Use background images sparingly and make sure they are simple • Navigation Graphics assist the user in finding the information they • need, often in a way text can't do by itself
Photographs Photographs can distract the user from completing their task • Don’t make people wonder what the picture is about • Match photos to your messages • Think about what the photo is saying • Photograph of people are good (if they're real people) • Feel-good images are largely ignored • Photographs of products work well • Good for showing product details • Provide big photos only when they are requested • Choose an appropriate size • Don’t let large pictures push content down too far down the page • Make sure small pictures are clear – especially when resizing •
Moving images Before you start: think about the message you want to communicate and work out the medium that best suits the message – if it’s video great • Use moving images only when they help to convey a website’s message • Don’t distract users from the main purpose and tasks of the page • Be creative and think about what will engage your audience • Don’t annoy people with blinking, rolling, waving, or wandering text or pictures • Use video to direct users to the most important information • Keep it short and to the point • Think about the sound as well as the picture • Storyboard your ideas • Practice using your equipment
References • Reddish J (2012) “Letting Go of the Words”, second edition, Morgan Kaufman • Neilsen J (2000) “Designing Web Usability”, New Riders • Photos as Web Content http://www.nngroup.com/articles/photos-as-web-content/ • Why use visuals on your website, social media & enews? http://www.j6design.com.au/ClientArea/Whyuseimages • Harnessing the Power of Icon Standards http://webdesign.tutsplus.com/articles/harnessing-the-power-of- icon-standards--webdesign-8431 • Icon Usability by Aurora Bedford on July 27, 2014 • http://www.nngroup.com/articles/icon-usability/
Recommend
More recommend
