ptg 258 CHAPTER 11 ● BRANDING AND ADVERTISING If your app has secondary information—parent company, free versus paid, loca- tion information—it’s important to consider its relationship to the app name. For example, Read It Later is 13 characters long, so the makers decided to place free versus paid information in the application icon (FIGURE 11.10). On the other hand, Not For Tourists is 16 characters, and it would be impossible to show the name plus the city. Instead, the icon/symbol is shown in the application icon and the city name is used for the guide below (FIGURE 11.11). FIGURE 11.10 Read It Later application icon FIGURE 11.11 Not For Tourists application icon TRADEMARKS Trademarks identify a company as the source of a product or service. ey may take the form of a logo, symbol, monogram, or other visual element. Choosing a trademark form depends on your app name, concept, and branding goals. In most cases you may nd that a combination is most eective (e.g., logo and symbol trademarks). Logos Logo is derived from the Greek logos and is short for “logotype.” In essence, logos are letter type customized for a particular company or product name. Although logos can work well within the app navigation bar, they tend to be too large when applied to application icons. Instead of trying to shrink the logo, apps may show the rst letter on the application icon. is approach tends to be most eective for established brands; for example, most Facebook users instantly recognize the lowercase f (FIGURES 11.12–11.13). FIGURE 11.12 Facebook’s logo in the app header FIGURE 11.13 Facebook’s app icon Symbols One of the best-known symbols is the old rainbow Apple icon with a single bite taken out of it (most people around the world can recognize the Apple brand even without the company name). If you design a symbol for your app, make TIP If you plan to localize your app, make sure the name is appropriate for the target regions. A well-known example of a name that was not considered for localization was a Jaguar model named Mist. In Ger- man, mist translates to the equivalent of “muck.” Download from www.wowebook.com ptg BRAND EXPRESSIONS 259 sure it’s immediately recognizable and can be easily distinguished from those of similar apps. To illustrate, compare the series of Twitter and camera symbols in FIGURES 11.14–11.19. Notice how the Twitter clients have distinctive colors and sym- bols. In contrast, the symbols for camera apps are almost identical, yet they have very dierent functions: One is an all-purpose camera, another is only for night photography, and the last one is for video. is lack of dierentiation makes it challenging for users to identify each one on their Home screens. Moreover, the uniformity suggests that these apps are commodities. FIGURE 11.17 Camera Genius FIGURE 11.18 Night Camera FIGURE 11.19 iVideo camera FIGURE 11.14 Tweetie FIGURE 11.15 Twitterific FIGURE 11.16 TweetDeck Monograms Monograms show the rst letter of each word in the company or product name. is approach tends to be more common with established brands (e.g., WSJ for the Wall Street Journal), since monograms are dicult to decipher otherwise. BRANDING VIA THE USER EXPERIENCE Not all app designs need to be explicitly branded with a trademark. Other approaches worth mentioning are included in the apps described in the following sections. TweetDeck Tweet Deck showc ases it s logo and sy mbol on the lau nch image, but t hey ’re not included elsewhere in the app. However, there are still plenty of cues that indi- cate it’s a TweetDeck app. For example, the yellow Tweet icon has the same visual treatment as the black-and-yellow bird symbol. In eect the creators killed two birds—brand and functionality—with one stone. Moreover, many interactions (e.g., the ability to add columns) are unique to TweetDeck, further reinforcing the brand (FIGURES 11.20–11.21). Download from www.wowebook.com ptg 260 CHAPTER 11 ● BRANDING AND ADVERTISING FIGURE 11.20 TweetDeck’s launch image FIGURE 11.21 TweetDeck’s All Friends view Gowalla Gowalla shows only its logo on the Passport screen; however, every other screen includes a narrow rainbow-striped bar above the header. is visual element is a subtle form of branding, cuing users that they are within the Gowalla app. Other aspects of the user experience that reinforce the brand include the app’s color, icons, language, rules, and stamps acquired when “spots” are visited ( FIGURES 11.22–11.23). FIGURE 11.22 Gowalla Passport screen FIGURE 11.23 Gowalla Spots screen Download from www.wowebook.com ptg MOBILE ADVERTISING FORMATS 261 Ocarina Ocarina, a musical instrument app, shows its product and company name (Smule) on the loading and tutorial screens. Although these brand expressions are not shown while the app is in use, others are embedded within the user experience. For example, the pulsing purple circles and green antenna can be found in sev- eral dierent media: on the App Store page, in the app’s launch image, and on the app’s web site (FIGURES 11.24–11.25). And, most important, Ocarina’s otherworldly sound is like nothing else in the App Store. FIGURE 11.24 Ocarina launch image FIGURE 11.25 Ocarina instrument Mobile Advertising Formats Apps with large audiences or frequent usage oen include some form of adver- tising, whether it’s for their own products, a partner, or a third party. Here we’ll discuss some common mobile advertising formats and suggest how to eectively integrate them into your design. ere are three main mobile advertising formats: in-line display, interstitials, and post-roll. Let’s take a look at each of these. In-line Display In-line ads are shown alongside app content—at the top, bottom, or even within lists (FIGURES 11.26–11.28). e most common place you’ll nd advertising is along the bottom, since it’s the least disruptive yet still gures prominently into the app design. If you choose this ad format, avoid “banner blindness,” which means the ad will disappear when the user scrolls. Users are less likely to see or tap on such ad placements. NOTE There are many mobile advertising networks that work with the iPhone—for example, AdMob and Grey- stripe. Additionally, Apple has its own advertising network, iAd (http:// developer.apple.com/ iad/). Download from www.wowebook.com ptg 262 CHAPTER 11 ● BRANDING AND ADVERTISING FIGURE 11.26 Ad at the top of Flixster FIGURE 11.27 Ad at the bottom of NYTimes FIGURE 11.28 Ads within EveryTrail Interstitials Interstitial ads are typically shown during natural transition points, such as when content is loading. For example, All Recipes shows an ad before displaying certain views (FIGURE 11.29). Use this format sparingly within your designs, as overuse may annoy or completely turn away users. FIGURE 11.29 All Recipes interstitial ad Post-Roll Post-roll ads are typically full-screen like interstitials but they’re displayed aer users complete a specic task. For example, 3D Tower Madness and Words With Friends show a post-roll at the end of the game. Download from www.wowebook.com ptg SUMMARY 263 ADVERTISING INTEGRATION TIPS As you consider which advertising format to incorporate in your app, keep in mind the following advice oered by George Chen, Product Design Manager at Ad Mob: • Leverage the medium. Ads don’t have to be links to web sites or the App Store—they can incorpo- rate music, videos, and maps. Consider creative ways to integrate relevant content given the domain and context of use. • ink strategically about placement. Ads are oen considered aer apps are coded, but they should be part of your design strategy. Incorporating ads into your design strategy will help create an integrated ad experience and lead to increased engagement. For example, Bubble Wrap had signicant ad engagement since the ads were shown at the right time and place—at the end of the game and below the game’s scoreboard. • Optimize landing pages for mobile. If your ad leads to a secondary screen, make sure it’s optimized for mobile—users shouldn’t have to pinch and zoom to view content. Landing pages optimized for mobile will lead to much higher “conversion rates,” meaning users are more likely to complete forms or other actions desired by the advertiser. at said, don’t ask users to ll out long surveys or input their credit card number since it will be challenging in the mobile context. • Filter ads for your specic audience. Many mobile ad providers allow you to lter ads and ad text via keywords. As much as possible, make sure the ads in your app are appropriate for your audience (e.g., political or religious ads may not be suitable within certain games). Appropriate ltering will benet advertisers and your users. Summary Eective branding combined with a strong user experience is vital if you want your app to stand out from the pack. is chapter introduced several ways to express your brand—naming, trademarks, and the user interface. NOTE Additional information on these advertising formats and related guidelines can be found at the Interac- tive Advertising Bureau 2 and the Mobile Marketing Association. 3 2. Interactive Advertising Bureau, www.iab.net/iab_products_and_industry_services/508676. 3. Mobile Marketing Association, http://mmaglobal.com/policies. Download from www.wowebook.com ptg 264 CHAPTER 11 ● BRANDING AND ADVERTISING To have the greate st i mpac t, brand ing a nd advertisi ng mu st be considered in t he early stages of your app design. As you develop the branding and advertising strategy for your app, keep in mind the following tips from this chapter: • Make sure your app name is distinctive yet memorable. Check if the corre- sponding domain name is available (e.g., www.yourapp.com). • Create a trademark that can be used within dierent contexts of your app and extended across other media (e.g., web, print, ads). • If you plan to integrate advertising into your designs, make sure the ads are ltered for your audience and displayed at the right time and place. ■ Download from www.wowebook.com ptg 265 Accessibility and Localization AS YOUR APP BECOMES increasingly popular, you may want to expand its reach and translate it into one or more of the 30 languages supported by the iPhone. Additionally, your awareness of accessibility issues may grow over time as visually impaired users struggle with your app and submit feedback. As a result, you may improve your app’s screen reader descriptions and incorporate other accessibility enhancements. If you envision your app heading in either of these directions—localization or accessibility—start designing solutions in the first version of your app. If you postpone, you may lose users who could have benefited from those features, and coding them later on may be more challenging. This chapter starts with a discussion of accessibility on the iPhone, with specific attention to VoiceOver compatibility. We’ll spend the remainder of the chapter reviewing ways to localize your app, including built-in and custom solutions. 12 Download from www.wowebook.com ptg 266 CHAPTER 12 ● ACCESSIBILITY AND LOCALIZATION Accessibility Accessibility is not required by Apple, but there are many strong reasons to cre- ate accessible apps. First, accessibility will make your app available to millions of people with visual, hearing, and other impairments. Second, almost all iPhone users, impaired or not, encounter visual or hearing limitations in the mobile context. For example, users have limited attention while driving; thus voice com- mands can have serious safety and usability benets. Finally, Apple has created tools to simplify the accessibility process, so it should not signicantly impact your development time. 1 Since the benets largely out- weigh the costs, why wait? In this section we’ll discuss ways to make your iPhone app accessible. BUILT-IN ACCESSIBILITY FEATURES A number of accessibility features are built into all iOS-based devices. Users can turn these features on in the Accessibility section of the iPhone Settings app ( Settings > General > Accessibility); no additional coding is required. • Zoom: Magnies the entire screen. • White on Black: Inverts the colors on the screen. • Mono Audio: Combines the le and right channels into a mono signal played on both sides. is is an important feature for hearing-impaired individuals. • Speak Auto-text: Speaks text corrections and suggestions as users type. • Voice Control: Allows users to make phone calls and control iPod playback. VOICEOVER In addition to the built-in accessibility features, your app can benet from Voice- Over, the screen-reading technology introduced in iOS 3.0. VoiceOver provides audio descriptions as users tap on UI elements. ese descriptions may be entered in Interface Builder, but they should be tested in VoiceOver (you can’t hear them within the coding environment). NOTE If you are developing an app for government or education use in the United States, chances are you must comply with Section 508, which includes provi- sions to establish a mini- mum level of accessibility. 2 1. iPhone Dev Center, “Accessibility Programming Guide for iPhone OS,” http://developer.apple.com/ iphone/library/documentation/UserExperience/Conceptual/iPhoneAccessibility/Introduction/ Introduction.html. 2. Section 508, www.section508.gov/index.cfm?FuseAction=Content&ID=11 . Download from www.wowebook.com ptg ACCESSIBILITY 267 To use VoiceOver, simply turn the feat ure on in t he Accessibi lit y Setti ngs. I nfor- mation used to formulate the audio descriptions includes • Label: Describes the UI element; for example, “Add” may be used for the “+” button. • Traits: Describe aspects of an element’s state, behavior, or usage (e.g., But- ton). When combined with a label, a trait may read like this: “Add Button.” • Hint: A brief, localized phrase that describes the results of an action on an element. For example, the Facebook “+” button in FIGURE 12.1 could provide a hint to clarify what content is being added (e.g., “Tapping this control adds a comment”). At the time of this writing, Facebook reads only “ Button,” which isn’t particularly useful. FIGURE 12.1 Facebook provides limited information for its Comment button via VoiceOver. • Value: e current value of an element, when the value is not represented by the label. For example, the label for a slider might be “Speed,” but its cur- rent value might be “50 percent.” • Frame: e frame (or tap area) of the element in screen coordinates. Voice- Over associates frames with relevant descriptions; the frame is not read to the user. Additional information you may want to add for VoiceOver includes the following: • Nontextual data: Apps with nontextual data should also provide descrip- tions in their accessibility labels. For example, Urbanspoon provides the label “Dollar sign, dollar sign, dollar sign” when users tap on the trio of dollar sign icons (FIGURE 12.2). While this is a step in the right direction, it Download from www.wowebook.com . accessibility. 2 1. iPhone Dev Center, “Accessibility Programming Guide for iPhone OS,” http://developer.apple.com/ iphone/ library/documentation/UserExperience/Conceptual/iPhoneAccessibility/Introduction/. can recognize the Apple brand even without the company name). If you design a symbol for your app, make TIP If you plan to localize your app, make sure the name is appropriate for the target. FIGURE 11.29 All Recipes interstitial ad Post-Roll Post-roll ads are typically full-screen like interstitials but they’re displayed aer users complete a specic task. For example, 3D Tower Madness