The latest version of Windows Phone (WP8), comes with updates to many of the apps that are pre-installed with the operating system/devices. The Help topics associated with those apps have also been updated. This look at one section of the Help + Tips app provides some insight in how the Microsoft UA team is thinking about design for mobile.
The gallery at the end of this article shows screen captures from a single scrolling topic about sharing photos in a text message. The eight images represent scrolling through approximately eight windows-ful of content. The use of page references in this article refers to the screen shots. There is only one “page” of content.
If you want to find this particular example yourself on WP8, from the Apps list select Help + Tips > People + email > Texting and Messaging. Scroll down on that page to the bulleted links and select Sharing Photos, Videos, and More in a Text Message. There is also a desktop browser-based version.
The topic appears with title, overview text and a video. This is followed by six separate procedures. There are no advance organizer links at the top. You need to scroll through the topic to become aware of what procedures are available on this long page. This really slows down your ability to find the specific information you are looking for. This appears to be a topic-specific design choice as organizer menus can be found in other topics.
The writing style is pretty much the same as you find in help topics for traditional Microsoft apps, with an infinitive title, an optional conceptual statement, followed by numbered steps. The amount of text is really overwhelming for such a small screen space. Technical writers can make themselves aware of this problem by doing their mobile writing and review in a small-space template. As an exercise, look at this help topic in a desktop browser using the link at the beginning of this article. The topic looks just fine there, but that is not the primary viewer for this content. For WP8 it would be much better to author in the Visual Studio WP8 emulator.
There definitely could have been more effort put into creating the same message with fewer words. For example, the title and conceptual statement on page 2 could be shortened to the following without losing the meaning.
Share any photo or video…
… that’s on your phone or in SkyDrive or Facebook.
If the existing content is vitally important, some attempt should be made at using HTML layering tricks like expanding text and tool tips. The visible info should be limited to completing the core tasks.
The numbered steps use the specific gesture verb of “Tap” versus the generic “Select.” That is fine for a touch-only device but can become problematic if there is voice or stylus support. The object noun uses both the name of the UI element as well as the associated icon. Some steps have sub-steps, indented with a bullet. In some cases, the Tap verb is replaced with “>”. Using that character shortcut is a popular, easy-to-understand technique. It is not clear why this Help uses it in a few places and not others.
Additional content elements include videos, screen captures, tips, and notes. Not mentioning the videos until this point is really burying the lead. The videos provide an engaging, quick view of how to complete a task. The design shown in the “Share my location” video on page one uses a nice blend of text and animation. You could make a strong argument that this form of Help is more useful and suitable to the medium than the documentation.
It would have been nice to see a video for each of the six procedures. Oddly, the Share my location video is for a task that is not even covered in the Help topic. One major fail is that the closed captioning doesn’t have any useful information. It just lists “background music playing”.
The formatting of the content has some questionable choices. The space between steps seems to be too large. It is a contributor to the exceptional amount of scrolling involved. The space could have been reduced in half without creating any readability issues.
The use of a grey color for the main text is arguably ok. It is impossible to beat black on white for clarity. But the grey does allow the bold UI labels to stand out.
The use of the UI labels at all is an interesting choice. It presents information that isn’t required for the user to complete the procedure. For example, the “New” function is always expressed in the UI as the + sign icon; not using the label. Including the label name in the procedure is only useful if you expect the user to add the word to their vocabulary. In practice, it is only the developers, designers, and writers who actually need to articulate the UI elements. Eliminating the labels (the ones with icons) would reduce the length of the steps.
The use of numbered steps is another arguable element. Numbers impart order and have always been a cornerstone of procedure writing. However, with small screen real estate, numbering takes up a lot of space. Using hanging indents takes up even more. Assuming mobile procedures should be short in the first place, a simple dash at the start of each step should be enough.
A screen capture is included on page 4. It is not clear why that screen was the only one important enough to include. If it is to illustrate typing a message, it might have been better to show the keyboard view.
The Tips are an element that should definitely be relegated to some form of expanding/hidden text. That information takes up too much room and gets in the way of the main procedures. An even better approach than hiding the info, would be to reveal it in the UI programmatically at appropriate times. For example, the tip shown on page 3 would be much more useful if it appeared in the app. Ideally, after a dozen or so image captures some onscreen info could guide the user through that shortcut.