Guidelines for images, photos and other graphics used on HSC websites.
All images, photos and other graphics should be
- Professionally designed or produced
- Web layouts, templates and web graphics must be created by the professional graphic designers on the OIT web team or those in PR
- Graphics and design elements created elsewhere must be approved by PR
- Photos are professional in appearance and composition (preferably shot by a professional photographer)
- Consistent with the look and feel of HSC websites
- Sharp on a high resolution screen
- Useful & relevant - does it enhance the content?
- Optimized using Photoshop’s ‘save for web’ or equivalent
- jpg compression between 70 & 90%
- Appropriately sized and cropped - e.g. is a 10000 x 10000px photo being used at 100 x 100?
- Used at the correct aspect ratio - no stretching or skewing
- Given a concise, descriptive alt tag
note: the terms photo, image, graphic can be used interchangeably, these guidelines apply to all
1. Legibility and credibility
Can you clearly see the content of the photo/s on both mobile and desktop?
e.g. Focus, size, quality, composition, exposure, crop etc.
- Focus: are the important elements of the photo in focus? Does all of the photo need to be in focus to communicate its message?
- Composition: has the composition been used effectively to draw attention to the relevant part of the photo and to create an aesthetically pleasing image? Would the photo be more effective if it was cropped in a different way?
- Quality: is the photo pixilated or easy to see? Is it properly exposed? Check on mobile and desktop.
- Size: is the physical size of the photo appropriate? Does the size make the subject of the photo clear enough?
Do the photos look credible?
e.g. Does it look professional? Does it suit the brand? Is it appropriate & relevant?
- Professionally shot: do the photos look like they have been taken by a professional? Is this appropriate given the context of what you are evaluating?
- Match the brand: are they the kind of photos you would expect to see from this brand?
- Appropriateness: Are the photos appropriate given the context within which they will be viewed?
- Believable: to what extent have the photos been manipulated? Does this affect the credibility of what they depict or the message they convey?
- Relevance: is the photo relevant to the content that it accompanies?
2. What messages do the photos communicate?
What do you want the photos to communicate?
e.g. 'Look how awesome and modern our classrooms are.'
What messages should the photos communicate to meet user needs?
e.g. 'How does the tuition compare to similar programs at other schools?'
What messages do the photos actually communicate to users?
e.g. 'That college looks like its stuck in the 90s!'
Do the photo/s support one of our key messages?
Supporting our key messaging isn’t always applicable for all content but should be kept in mind for content that promotes our programs
- Responding to the state’s needs
- Delivering real-world solutions through innovative research
- Reflecting the changing face of Texas
- Connecting with communities
3. Usefulness and effectiveness
Do the photos result in the desired emotional response?
e.g. Does it make me want that thing? Does that photo have a calming effect?
- Desire: does the photo represent something in an attractive way?
- Aspiration: does the photo communicate how a product may fit into someone’s life or help them to live the life they aspire to?
- Aesthetics: is it pleasing to look at?
- Others’ emotions: does the content of the photo result in a direct emotional response from the viewer (for example, are people in the photo smiling, frowning or angry)? Does the photo create a calming effect?
- Entertainment: is the photo funny? Is it intended to entertain the viewer?
Do the photos help the user with their task?
e.g. Does the photo serve a purpose or is it just a placeholder?
- Useful: does the photo serve a purpose or is it just a placeholder?
- Helpful: does the photo help users with their tasks? Does it prevent them getting lost? Does it answer their questions or help them to make the right choice?
- Instructional: does the photo show someone how to do something?
- Constructive: does the photo help to mitigate a user anxiety? Does it answer a typical question or concern?
- Prevent errors: does the photo help users to avoid making mistakes?
- Recognition over recall: does the photo aid recognition to save people having to remember things?
- Communicative: does the photo communicate its intended message effectively?
- Global suitability: will the photo mean the same in different countries or cultures? Might it offend people from other cultures?
- Educational: does the photo teach something or provoke thought about a subject in a different way?
- Complexity: does the photo convey something that would be difficult to put into words?
Will the photos influence the behavior of the user?
e.g. Does the photo have the desired effect it was planned to have?
- Gaze direction: should the people in the photos be looking towards other elements on the page or is it more appropriate for them to be looking back at the user? Service related websites benefit from eye contact with users, whereas product sites may benefit from gaze being diverted towards a specific call to action or button.
- Prompting an action: is the photo designed to prompt action such as apply to a program? Do the contents of the photo encourage this behavior? Does the photo encourage users to act or to make a decision?
- Changing opinions: will the photo help to change our point of view?
- Creating desire: does the photo make your college, department, program or services desirable?
- Perception: will the user attribute a particular quality to our brand having seen the image, such as quality or heritage?
- Message: does the photo communicate the message to people that is intended?
*This is a customized version of the Photo Usability Checklist by James Chudley