Using Images Student Web Presence Guidelines Summary These new - - PowerPoint PPT Presentation

▶
using images
SMART_READER_LITE
LIVE PREVIEW

Using Images Student Web Presence Guidelines Summary These new - - PowerPoint PPT Presentation

Oct 27, 2023 245 likes •353 views

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

slide-1
SLIDE 1

Using Images

Student Web Presence Guidelines

slide-2
SLIDE 2

Summary

1. Why use images

  • 2. Using images
  • 3. The Power of Icons
  • 4. Infographics (Graphs and Charts)
  • 5. Using photographs
  • 6. Using moving images

“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

slide-3
SLIDE 3

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)

slide-4
SLIDE 4

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
slide-5
SLIDE 5

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

slide-6
SLIDE 6

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

slide-7
SLIDE 7

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
slide-8
SLIDE 8

Moving images

  • 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

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

slide-9
SLIDE 9

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/