ptg 238 CHAPTER 10 ● VISUAL DESIGN Generality Icons should represent a broader class of similar concepts rather than a particular instance. For example, there are three common video icons on iPhone apps: a TV/ monitor, a video camera, and a reel of lm (FIGURES 10.33–10.35, respectively). ey all work, but the video camera (the old over-the-shoulder style) may become less general over time. Given the popularity of the iPhone, the Flip, and other small cameras, the prototypical image may evolve. FIGURE 10.33 Discovery News FIGURE 10.34 Consumer Reports FIGURE 10.35 Showtime Cohesiveness Designing a cohesive system makes icons easier to interpret and understand. Cohesiveness can refer to both style and form. For example, the icons in the Fanball app are stylistically similar, plus they have the same theme: balls (FIGURE 10.36). If the MLB (Major League Baseball) tab had a baseball diamond or a bat, the set would have an inconsistent theme. Ideally, your app icons will be cohesive in both respects. On a related note, abbreviations for labels (e.g., NFL) are ne as long as the target users understand them. FIGURE 10.36 Fanball tab bar icons. The N stands for “National”; the sports represented are football, baseball, hockey, and basketball. Communicability Communicability refers to an icon’s representation within the specied context— the physical, cultural, and social environments. For example, mailboxes oen have dierent cultural references depending on the country. And, even within one country, the references can run the gamut (FIGURE 10.37). In such a case it would be wise to draw from the most common mailbox form or explore a dierent icon approach altogether. Alternatively, as we’ll discuss in Chapter 12, “Accessibility and Localization,” icons can be localized for each region. Download from www.wowebook.com ptg ICONS AND OTHER IMAGERY 239 FIGURE 10.37 Mailboxes in the UK (Courtesy of Frans van Rijnswou, photographer) TAB BAR ICONS Tab bar icons are used in the tab bar within Productivity-style apps. is section reviews standard and custom icons as well as best practices. Standard Tab Icons e number of standard tab icons is smaller than most people expect; there are only ten, as shown in TABLE 10.2. As much as possible, try to use standard icons in your app. ey are easier for users to interpret since Apple has done the hard work for you—the icons are immediately recognizable, general, cohesive, and commu- nicable. Plus, users have learned their meaning and can transfer that knowledge to your app. As mentioned earlier, be sure to use these as outlined in the iPhone HIG; your app may be rejected if it diverges from the guidelines. TABLE 10.2 Standard Icons for Use in the Tab Bar 9 Icon Meaning Name Show application-specific bookmarks Bookmarks Show contacts Contacts Show downloads Downloads Show user-determined favorites Favorites Show content featured by the application Featured 9. iPhone Dev Center, iPhone Human Interface Guidelines: “System-Provided Buttons and Icons,” developer.apple.com/iphone/library/documentation/UserExperience/Conceptual/MobileHIG/ SystemProvided/SystemProvided.html#//apple_ref/doc/uid/TP40006556-CH15-SW15. continues Download from www.wowebook.com ptg 240 CHAPTER 10 ● VISUAL DESIGN Icon Meaning Name Show history of user actions History Show additional tab bar items More Show the most recent item Most Recent Show items most popular with all users Most Viewed Show the items accessed by the user within an a p p l i c a t i o n - d e f i n e d p e r i o d Recents Enter a search mode Search Show the highest-rated items, as determined by the user Top Rated Custom Tab Icons Creating a custom set of tab icons is no small feat. In addition to understanding the principles outlined earlier in this section, the designer must be able to formu- late an overall system, execute the designs, save them in the appropriate format, and so on. ere are many third-party services (e.g., Glyphish, www.glyphish.com) that have developed icons for popular use cases. If you’re not comfortable designing your own set, work with one of these services or hire an illustrator. If you choose to design them yourself, be sure to follow the guidelines included in the iPhone HIG: • Use the PNG format. • Use white with appropriate alpha and no shadow. • Use anti-aliasing. • Create icons that measure about 30 × 30 pixels. Additional Tips Not Included in the iPhone HIG As you browse the App Store, you may see custom tab icons that break Apple’s guidelines. For example, Tweetie doesn’t provide icon labels, and American Greet- ings uses a red background instead of black (FIGURES 10.38–10.39). Although these apps were approved by Apple, don’t assume that yours will breeze through. Also, apps may be rejected if they have icons that are part of the iOS but not sanctioned for third-party usage. NOTE The iOS automatically provides the pressed or selected appearance for items in tab bars, toolbars, and navigation bars. TABLE 10.2 Standard Icons for Use in the Tab Bar (continued) Download from www.wowebook.com ptg ICONS AND OTHER IMAGERY 241 FIGURE 10.38 Tweetie’s tab bar FIGURE 10.39 American Greetings’ tab bar Here are some other tips to keep in mind: • Use optically equivalent scaling for icons (e.g., circles are slightly larger than squares). • Always show icons in tabs. Don’t leave the space blank; don’t use words or arbitrary shapes. • Provide adequate space between icons and their labels. • Keep labels concise so they don’t run into neighboring labels. • Display labels in title case (e.g., Title Case); do not use all lowercase (title case) or uppercase (TITLE CASE). TOOLBAR AND NAVIGATION BAR ICONS e iPOS also provides a suite of icons that may be used in the navigation bar and toolbar. ese icons come in two dierent styles: bordered and plain. According to the iPhone HIG, the bordered style may be used in the navigation bar or tool- bar, but the plain style may be used only in the toolbar. is section examines the standard and custom icons and suggests how to incorporate them into your app. Standard Icons TABLE 10.3 includes the standard toolbar and navigation bar icons. Remember, it’s important to use standard icons only for the actions outlined in the iPhone HIG. Improper usage may make your app dicult to understand. Moreover, misuse could lead to rejection from the App Store. Custom Icons Custom toolbar and navigation bar icons are used in many kinds of apps. Regard- less of the context, the principles outlined earlier still apply—immediacy, general- ity, cohesiveness, and communicability. In addition to following the principles, make sure your custom icons do not conict with the standard ones. For example, the AP News app uses the Trash icon (shown in FIGURE 10.40) to remove an article from your saved list, but the context implies that the user is deleting the article. FIGURE 10.40 AP News toolbar Download from www.wowebook.com ptg 242 CHAPTER 10 ● VISUAL DESIGN TABLE 10.3 Standard Icons for Toolbar and Navigation Bar 10 Icon Meaning Name Opens an action sheet that allows users to take an a p p l i c a t i o n - s p e c i f i c a c t i o n Action Opens an action sheet that displays a photo picker in edit mode Camera Opens a new message view in edit mode Compose Shows application-specific bookmarks Bookmarks Displays a search field Search Creates a new item Add Deletes the current item Trash Moves or routes an item to a destination within the application Organize Sends or routes an item to another location Reply Stops the current process or task Stop Refreshes contents (use only when necessary) Refresh Begins media playback or slides Play Fast-forwards though media playback or slides Fast Forward Pauses media playback or slides Pause Moves backward through media playback or slides Rewind 10. iPhone Dev Center, iPhone Human Interface Guidelines: “System-Provided Buttons and Icons,” developer.apple.com/iphone/library/documentation/UserExperience/Conceptual/MobileHIG/ SystemProvided/SystemProvided.html#//apple_ref/doc/uid/TP40006556-CH15-SW15. Also, try not to conict with custom icons that have become de facto standards. AP News uses the Star icon for rating an article, yet many apps use the same star for Favorites, which could mislead users. To set expectations, AP News should create an icon that incorporates a star in a dierent way (perhaps as a series of smaller stars, sort of like an ellipsis). Also, make sure there is adequate space between the icons. Having enough space will make them easier to interpret and will certainly reduce tapping errors (and user frustration with your app). Download from www.wowebook.com ptg ICONS AND OTHER IMAGERY 243 OTHER CONTEXTS Icons are not restricted to tab bars and toolbars; they can appear on launch screens, list views, and detail views. App designers have more creative freedom in these contexts since the look and feel may diverge from the iPhone HIG. In many cases the icon illustration style is consistent with the app brand as opposed to the iPhone brand. While the style may dier, the dimensions should still be at least 30 × 30. Launch Screens As discussed in Chapter 9, “User Interface Design,” some apps use icons in a grid- based launch screen. Perhaps the most well-known example is Facebook, but other apps such as LinkedIn have followed suit (FIGURES 10.41–10.42). Cohesiveness is crucial given that these icons are displayed as a set. FIGURE 10.41 Facebook launch screen FIGURE 10.42 LinkedIn launch screen List Views List views tend to use icons to quickly communicate the underlying information or concept. FIGURES 10.43–10.44 illustrate how Evernote and Flixster use list view icons. e apps could function without them, but they wouldn’t be as aesthetically appealing. Notice how Evernote’s icons are much larger than the Flixster ones. is is because Evernote is typically used for spur-of-the-moment thoughts or observations. If users have to fumble around for the right icon, they may lose the chance to capture a photo or other annotation. Additionally, there are only four options; there would be too much white space if the list view had smaller icons. Download from www.wowebook.com ptg 24 4 CHAPTER 10 ● VISUAL DESIGN FIGURE 10.43 Evernote main screen FIGURE 10.44 Flixster view Detail Views Detail views oen use icons for actions or status indicators. When used eectively, icons can help conserve space and make your app more visually appealing. Facebook uses icons to incorporate loads of functionality into the prole screen (FIGURE 10.45). Instead of spelling out “comment” as on the Facebook web site, there is a small thought bubble icon. e dimensions are only about 25 × 25, but the surrounding white space should minimize tapping errors. Also, instead of list- ing the comments, the Facebook app compresses them in a thought bubble, which opens when tapped. FIGURE 10.45 Facebook news feed Download from www.wowebook.com ptg SUMMARY 245 If you choose to incorporate icons in detail views, be sure not to overuse them. Too ma ny icons may create v isual noise inste ad of leav ing t he page unclut tered and easy to navigate. Summary When people think of visual design, images of icons, type, and color palettes come to mind. Although mastering these areas is important, strong visual designs are built upon an underlying visual structure. is chapter introduced several techniques to establish visual structure within your app: grouping, hierarchy, and alignment. Once your visual structure is in place, you can bring in other visual elements, such as icons and typography, to reinforce the structure and create aesthetically appealing designs. Here are some other tips to keep in mind: • Your app’s visua l design should be considered as ea rly as the concept phase. If you wait until aer your app is coded, the benets will be minimal. • Do not design your app’s visual elements in isolation. e layout, typogra- phy, color, icons, and other elements must all work together. • Creating eective icons is very hard and time-consuming. Consider hiring an illustrator—nding an expert will be worth the investment. ■ Download from www.wowebook.com ptg 246 CHAPTER 10 ● CASE STUDY 11 CASE STUDY 11 MERCURY INTERMEDIA collaborated with USA TODAY on the design and development of its iPhone app. Mercury has been helping major brands reach their customers through new and emerging technologies for over 15 years. They provide a full range of services, including programming, graphic and UI design, content hosting, and analytics. USA TODAY How did Mercury Intermedia get involved in the USA TODAY app? It is a bit unbelievable looking back at it, but the USA TODAY app was our first iPhone app and our first ven- ture into the mobile space. Before we shifted our focus to mobile development, Mercury Intermedia had been working with companies such as Sports Illustrated, Golf magazine, and several NFL teams creating proprietary, network-enabled desktop applications. What we had been working on in the personal computing space translated incredibly well to mobile. We were very fortunate that USA TODAY saw our potential and gave us a chance to prove ourselves on the iPhone. How did the USA TODAY brand impact the iPhone app design? USA TODAY has always been known for large color photos, graphics, and diagrams along with short summarized news articles, all of which translated perfectly to the iPhone. Snapshots proved especially successful, partially because of the unique ability the iPhone gave us to sort voter responses by location through the built-in location services; we often saw more user voting from the iPhone app than from usatoday.com. FIGURE CS11.1 Progression of the Headlines section Download from www.wowebook.com ptg USA TODAY 247 Color-coded sections are also a vital part of the USA TODAY brand identity, and it was critical that we incor- porate them into the USA TODAY app gracefully. As in the paper and the web site, we wanted viewers to know immediately when they saw red in the app to associate it with sports and green with money, and so on. How did the designs evolve over the course of the project? The Headlines section saw the most evolution throughout the design process [FIGURE CS11.1]. In our early designs, the Headlines article list used an accordion scheme similar to the one in the Weather and Pictures sections. As unique as it was, we quickly realized that it just wasn’t easy enough or fast enough to consume a group of head- lines quickly, which is what most mobile users demand, so we returned to a more standard headline list view in that section. Once we decided to move to a list view in Headlines, we had to figure out how to deal with news categorization. Since USA TODAY is a multipurpose application, simply creating a tab bar section for each news category wasn’t a viable option. Lumping seven news categories in with four non-news features wasn’t ideal, and we noticed in our own iPhone use that anytime content or features were placed behind the tab bar More button, they generally went unnoticed and unused. We weren’t willing to sacri- fice any of the main sections within the application by burying them behind the More button. At this point, USA TODAY suggested we try the section slider bar approach. We had seen how successful it was in the original Facebook app developed by Joe Hewitt. Once we locked in on the slider bar approach, we wanted to keep the look and feel of the slider control similar to Facebook’s approach. We hoped that by modeling our slider control closely with Facebook’s, it would encourage a standard that other applications would adopt and would make it more familiar. To make sure we weren’t offending anyone at Facebook, we even emailed Joe Hewitt and got his blessing before moving forward. [ FIGURES CS11.2–CS11.3 show some of the final screen designs.] What’s next? We are constantly reevaluating and looking for better and more effective ways to present information and have several new features and improvements planned for the USA TODAY app. Two of our most requested features, font resizing and offline content access, will be added soon. Users can also expect to see improved subcategory navigation in Headlines as well as a more robust Scores section in the coming year. ■ (USA TODAY icon and application screenshots courtesy of Mercury Intermedia) FIGURE CS11.2 Photos FIGURE CS11.3 Snapshots Download from www.wowebook.com . Buttons and Icons,” developer.apple.com /iphone/ library/documentation/UserExperience/Conceptual/MobileHIG/ SystemProvided/SystemProvided.html#//apple_ref /doc/ uid/TP40006556-CH15-SW15. Also, try. Center, iPhone Human Interface Guidelines: “System-Provided Buttons and Icons,” developer.apple.com /iphone/ library/documentation/UserExperience/Conceptual/MobileHIG/ SystemProvided/SystemProvided.html#//apple_ref /doc/ uid/TP40006556-CH15-SW15. continues . i o n - s p e c i f i c a c t i o n Action Opens an action sheet that displays a photo picker in edit mode Camera Opens a new message view in edit mode Compose Shows application-specific bookmarks