Guidelines for Mobile - Images, Multimedia, Forms, University of Cincinnati

University Communications

Guidelines for Mobile - Images, Multimedia, Forms

Include images on your website only if they are relevant and add value. Do not use images for decoration purposes only. Images should be easy to understand and/or show emotion or detail that text cannot (e.g., news story photos). (NN#65)
Right-align images for easier scanning of text (especially if not all items have image)
Ensure images are a small file size.
Avoid using images smaller than 44 x 44 pixels.
When you use thumbnails, make sure the user can distinguish what the picture is about. Place them far enough apart so user can “view-tap.”
Avoid shrinking photos originally designed for larger formats – either crop the image or downsize to fit the device. (NN#68)
Use captions for images that are part of an article if their meaning is not clear from the context of the article. (NN#69)
Do not use an image to mimic a text style.
Do not try to fit a lot of (text) information into a tiny size photo.
Align images either left or right – not both. Creates better “scannability.”
Use only client-side image maps and test. If a satisfactory image map cannot be displayed on any device, use a list of links with descriptive text instead. (w3.org)
Use a standard (consistent) set of icons to guide user behavior. Icons should be meaningful, simple and contextual. Use icons consistently – same expected behavior for same icon. E.g., > always means user will be taken to a separate page.
Avoid overusing icons – if everything stands out, nothing stands out.

Nielsen Norman Group - Usability of Mobile Websites (6.7 MB)
85 Design Guidelines for Improving Access to Web-Based Content and Services Through Mobile Devices.

Video.
1. Clicking on the thumbnail and clicking on the video title should both play the video. (NN#72)
2. Indicate video length. (NN#73)

Do not use
1. pop-up windows
2. auto refresh unless you have informed the user and provided a means of stopping it. (w3.org)
3. mouseovers
4. animation, flash, xml or jquery.
Transitions allow users to move quickly from one user experience to another within the same application/window by way of an animation.
Transitions can be full screen or as simple as a UI state change.
Qualifications for implementing transitions:
1. When user interaction changes state that should not be ignored.
2. Disruption to the user experience and interface.
3. Each user interface is independent of the other.
Unorthodox and unnecessary transitions are inefficient and can damage your brand.

Seriously consider the needs and context of the user before designing forms for mobile.
1. Sun and light reflection make it hard to see the screen.
2. Slow, unstable network connections make it challenging to complete forms.
3. Small screens + fat fingers = difficult text entry
Where possible, use selection lists, radio buttons and other controls that do not require typing.
Avoid free text entry where possible.
Form fields should be far enough away from each other for users to easily tap into the correct field. Fields should be 44 pixels high. Use 15-point type.
Consider total width of fields and submit buttons.
When user taps to type, the view point changes to adjust to the keyboard, which may cover up labels and information – be sure to test.

Provide feedback to users to guide them through interactions. Examples:
1. Deleting a file
2. Pressing a button (change color or glow)
Completing a step (completion indication bar; empty circle changes to green checkmark)
Waiting for something to load (use progress indicators or give user something to do while waiting)

Alerts require immediate interaction and should be used sparingly and only when necessary to avoid desensitizing.
Notifications should not abruptly interrupt users but rather draw their attention.
Make notifications based on user activity obvious through proper placement and visual clarity.