53 Best practices for user experience (UX) MSCI brand guidelines IMAGERY Image size Image size has a big impact on your website’s performance. If your file sizes are too big, your pages take a long time to load, and you risk losing visitors who don’t have the patience to wait. This concern is heightened for mobile devices. • Ideal hero image file size recommendation: 200KB • Ideal image file size within body copy: 100KB • Limit number of images being used on one page. Slows page load times. Image resolution Resolution is what determines how good your image looks on screen. • Resolution of between 72 PPI as a minimum and 120 PPI as a maximum for the majority of screens. • One way to adjust the resolution and file size “Save For Web & Devices” option to save JPG images in Photoshop, you can choose preset quality settings (Low, Medium, High, Very High, and Maximum) Decorative image Images do not add information to the content of a page. • When using these images, a null (empty) alt text should be provided (alt=””) so they can be ignored by assistive technologies, such as screen readers. Text values for these types of images would add audible clutter to screen reader output. Informative image Images convey a concept or information that can be expressed in a short phrase or sentence. (i.e charts) • Ideally, informative imagery/interactive component should be built out in HTML. - If the alt text needs a long description to fully convey the message the image should be built in HTML. • The text alternative should convey the meaning or content that is displayed visually, which typically should not be a literal description of the image. - Avoid: “image of...”, “picture of...” Image selection Use an image that provides relevant correlation to the content. Overlaying text on images • Use actual text that is styled with CSS rather than image-based text presentation. • Text on image can be hard to read, especially on mobile device. Should be avoided. VIDEO All videos should have closed captions. Video and audio files should have a transcript. • Splash screen/thumbnail should be high resolution. If possible, should be informative. • Close captions should not be burnt in. (i.e. users have the option to turn cc on/off) • Add Transcript to meet accessibility guidelines and improve SEO. • Do not use animated GIFs. They fail accessibility guidelines at all 3 levels A, AA, AAA*. - Tends to be heavy in terms of file size and slow page load times. * The Web Content Accessibility Guidelines (WCAG), are a series of guidelines for improving web accessibility. The WCAG are the best means of making websites useful to all your users. WCAG 2.0 guidelines are categorized into three levels of conformance in order to meet the needs of different groups and different situations: A (lowest), AA (mid- range), and AAA (highest). Conformance at higher levels indicates conformance at lower levels.