jim.shamlin.com

Graphic and Media Design

Media - which includes graphics, sound, video, and animation - is perceived and consumed differently on mobile devices as sa result of differences in the device as well as the way in which users perceive and consumer media in various contexts. The difference is such that it is highly unwise merely to "scale down" media to fit the smaller screen.

IMAGES

Primarily, the small screen size means that images viewed on the screen will also be physically small - fine details may not be discernable, and it's been found that the "negative space" does not register. Also, the device itself occupies a smaller percentage of the user's field of vision: at normal distances the desktop monitor is quite large and the user's attention is focused entirely on the screen, whereas the mobile device requires intent to focus and the environment is much more prominent in the user's field of vision.

The author draws a parallel between the mobile device and a "portrait miniature" - a photograph of a person that might be worn in a locket. These were generally head-and-shoulders images, whereas full-sized portraits would be full-length or waist-up - and if such a picture were merely scaled down, the person's facial features would be entirely lost. Miniature portraits required simplicity - they were often shot against a plain background, and usually either reduced to black and white, or in some cases, minimized to a silhouette. These are good principles for mobile design: one subject, no distractions, simple details, and clear focus.

Oddly enough, designers can also learn much from user-generated content. Amateur photographers take simple pictures, without elaborate compositions, lens effects, or mood lighting. As such, they present subjects very simply, discernibly, in a format that would seem bland and uninteresting at larger sizes, but is ideal for small-scale. It's also noted that garden-variety digital cameras enable users to preview pictures on a tiny screen, about the same size as a mobile device, so they have an immediate sense of its appearance.

There is some backpedalling: quality still matters, and a well-executed image still "looks" better. So the author isn't advocating using snapshots and pocket video shot with cheap equipment, merely considering the composition technique of amateurs when developing media for the mobile channel. (EN: I recall similar advice from another source on "viral" video - companies felt that an amateur, slapdash style would play well on YouTube, but found that poor production quality damaged their brand image. Users still expect companies to do quality work, even in an informal context.)

There is a short list of general principles for mobile imagery: tight cropping, high color contrast, thick lines, and nothing fine or subtle. Avoid gradients or transparencies (real transparencies, in overlaid images - a single image that "fakes" transparency is OK for resource consumption. "Cartoons" (line art with solid color fill) work very well on mobile. Text embedded in a graphic generally does not.

Quality and size generally go together, and increasing either has a detrimental effect on bandwidth load (if downloaded) or application size (if stored locally).

Be conservative in using graphics: using an image as a bullet or a button is generally not a good use of bandwidth. Graphics presented for purely decorative reasons should be avoided, and even "content graphics" should be carefully designed to convey the maximum detail with the minimum detail.

Logo graphics are essential to brand, but should be small and clean. Consider a two-color "business car" type version of your logo for use in the mobile channel.

VIDEO AND ANIMATION

All the principles for static images generally apply to video an animation. The caution about bandwidth is even more important, is video is data-intensive. While current video formats can compress much better than previous ones, video is still a very large file.

The file size of video can be improved by composition: space is saved by refreshing only those pixels that change from one frame to the next, so a video shot against a moving background, or which cuts abruptly to different camera angles, will be a larger file than one with a single camera angle against a static background.

Video files can also be reduced in size by cutting the number of frames per second and the quality of audio. In technical terms, it's been found users perceived quality to be acceptable at a rate of 6 fps and 12 Kbs audio. But again, this depends on the content: a "high action" video where the entire screen is in motion may require a refresh rate of at least 10 fps. It's also noted that the perception of quality of mobile video derives more from audio than the image.

It's been found that users will watch lengthy videos, including full-length feature movies, on a mobile device - but not while they are mobile. In this regard, the device is used as a portable video player, by a user who is inactive and largely isolated for a long period of time (such as riding a bus or airplane). Users consume a far greater quantity of short-length videos during down-time (waiting in line, or to kill a few idle moments here and there.) An in both cases, the video is often a distraction that does not obtain the user's full attention, but is glanced at intermittently.

In general, video undermines the mobility of mobile devices. The user who watches a video cannot be physically in motion (or if in motion, cannot give much attention to the video). Instead, the user will stop moving to watch the video, or delay watching it until they can find an opportunity to stand still (or even sit down) and pay attention.

In general, the preferred length of mobile video is one minute or less. Consider the model fo the television commercial rather than the television show. Serializing longer content is recommended. (EN: but no tips are provided for this - while you can shop up a longer episode, the user will lose context, and there might be long stretches of time in-between viewing parts, such that the user no longer understands the message in small fragments. My sense is that it requires composing specifically for the time span, rather than editing into disjointed fragments.)

Content produced for the television medium is also not well-suited to the mobile medium, for the same reason a full-size photo is not well suited to miniaturization: the object on which the user is expected to focus is shot in too large a field, and as such is often not as discernable: the subtle expressions and motions that are accentuated on the large screen are lost on the small.

In terms of storytelling, the author advises against the television standard of putting a "hook" at the end of the segment to encourage the viewer to stay tuned through commercials or to tune in next week. The author advises against doing that, but instead expecting and respecting the common practice of viewing video at the user's discretion rather than trying to tease more engagement out of them.

An analogy to another medium: consider the person who reads a novel - who may break off in the middle of the chapter and resume the next day. As such, if a book "cant' be put down," many readers will not pick it up in the first place. The ability to do things at one's own pace is a quality they value, and find attempts to "hook" them into a longer engagement annoying.

One strategy is to put the "hook" or "cliffhanger" in the middle of an episode and end a t a low-action state. Because the viewer generally knew the length of the clip before they pressed "play,

it's generally safe to assume they consent to be engaged for that period of time, and expect to be able to break off afterward.

In terms of production, the author advises capturing raw video at high resolution and down sampling it for mobile. Not only does this result in a higher quality mobile product, but the original video can be used in other channels (EN: from my own experience, it was never a good conversation when a client later wanted to use a Web site image in print advertising - an image built at 72 dpi for the computer screen just can't be up-sampled to high-res print.)

In terms of composition: avoid wide shots unless your intention is to show a panorama in which small detail is unimportant, focus tightly on subjects, avoid "busy" backgrounds, and avoid on-screen text (boards, crawlers, etc.). A best practice would be to shoot video specifically for mobile - if you can't do a mobile-only production, consider having a separate crew on a scene to take a mobile video that is to be shot and edited for the channel's specific needs.

In terms of editing, keep in mind that jump-cuts require a full-screen refresh. Ideally, eliminate any motion that is not necessary: if the same information can be conveyed by the audio track over a still image, the full-motion video adds no value.

SOUND

User testing indicates that mobile users are much more sensitive to quality of audio than quality of video - to the point that a video with good audio will be perceived as being of better quality than the very same video with lower-quality audio. While it would stand to reason that audio quality would be high on a device intended to be a telephone, this is not true of all models - some are notoriously awful.

A primary obstacle for audio is that it is generally not accepted in social environments - a person can discreetly read text in a crowded place, but annoys others with any sound. The interference also works both ways - natural sounds in a public environment distract and overpower the sound the user intends to receive from a mobile device.

A few quick facts: many mobile devices do not handle stereo (though and increasing number do, in order to handle music); QCELP is a native method for encoding speech content, which is very good and reliable, but not optimized for music; increasing frequency higher than 12 kbs does not result in an appreciable improvement for most users; and staying close to the middle of the range of audible sound (staying away from low and high pitches) makes it more likely that people who are hard of hearing or are in noisy environments will be able to hear the content.

Also, audio is a primary delivery method for mobile - many users will listen to the audio track without looking at the screen, so it's wise to ensure that the audio-only experience is satisfactory. It's noted that the voice track of a video (such as a newscast) can sometimes deliver a good experience, but be careful not to take that for granted - the amount of "explaining" done by a radio broadcaster at a sporting event is significantly more than his video media counterparts.

STREAMING VERSUS DOWNLOADED

Streaming media are popular online because the user need not wait for the entire program to download before watching, ut this technology is largely dependent on a reliable and reasonably fast connection. While mobile speeds have improved of late, the connection tends to be unreliable and download speed fluctuates greatly.

But neither is downloaded video a good solution: a lengthy download is still required, there are synchronization issues, local storage capacity is low. In general, downloaded video is preferable for content that will need to be viewed repeatedly - but otherwise, the disadvantages generally outweigh the advantages.

The author presents tips for streaming video (EN: which would seem pertinent to any video, but perhaps the streaming technique exaggerates some of these problems): while quick cuts increase the amount of screen that needs to be refreshed among frames, panning is far worse; when panning is necessary, crop tight to the subject that you are following to minimize the amount of background that will appear; and zooming is less intense than panning.

MANAGING MEDIA: META DATA

The author alludes to the problem with managing media elements: computer systems have never done this very well at all. While they have been generally effective for managing ASCII text (EN: this is arguable - they store it, but managing it has always been painful), they did not manage images well, and are acutely bad at handling multimedia, where information is contained within a compiled media object. The problem of managing media is further complicated by versions of media that appear in different channels: multiple versions of the same "clip" exist, and the user may not access it directly from the operator's servers (in Web 2.0, media may be stored on third-party sites).

The typical method for managing media is by use of metadata, sometimes in the file itself, other times in an external file or database that contains a pointer to the file along with the additional information: tags, keywords, publication date, etc.

The author looks to Apple's iTunes application, which manages both the media files as well as associated information in a database. For each MP3 file, various data are stored (artist, album, length, last played, user rating, etc.) to enable the user to sort through a large library of music files with relative ease. (EN: I'd not entirely disagree, but this is effective for a very specific purpose and use - leisure MP3 listening. It's long been criticized for being clumsy for handling video, and even the audio management capabilities become less than adequate when anything other than music is loaded: podcasts, audio books, etc. are not well accommodated.)

The author suggests that metadata can be effective in managing not only audio, but also images and media clips. (EN: But again, the tags proposed are very limited and omit a great deal of data that might be useful for anything other than browsing and sharing snapshots. This also suffers from the notion that a multimedia object is a single piece of "data" rather than a broader collection of information encapsulated in a video clip of multimedia presentation.)