Guidelines for Mobile - Images, Multimedia, Forms
Images and Image Maps
- 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.
- Clicking on the thumbnail and clicking on the video title should both play the video. (NN#72)
- Indicate video length. (NN#73)
- Do not use
- pop-up windows
- auto refresh unless you have informed the user and provided a means of stopping it. (w3.org)
- 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:
- When user interaction changes state that should not be ignored.
- Disruption to the user experience and interface.
- Each user interface is independent of the other.
- Unorthodox and unnecessary transitions are inefficient and can damage your brand.
Forms & User Input
- Seriously consider the needs and context of the user before designing forms for mobile.
- Sun and light reflection make it hard to see the screen.
- Slow, unstable network connections make it challenging to complete forms.
- 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:
- Deleting a file
- 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 & Notifications
- 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.