For example, there are three common video icons on iPhone apps: a TV/ monitor, a video camera, and a reel of film FIGURES 10.33–10.35, respectively.. For example, the icons in the Fanbal
Trang 1238
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 film (FIGURES 10.33–10.35, respectively) They 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 fine 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 specified context—
the physical, cultural, and social environments For example, mailboxes often have different 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 different icon approach altogether Alternatively, as we’ll discuss in Chapter 12, “Accessibility and Localization,” icons can be localized for each region
Trang 2FIGURE 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 This section
reviews standard and custom icons as well as best practices
Standard Tab Icons
The 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 They 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
Show application-specific bookmarks Bookmarks
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
Trang 3240
Show items most popular with all users Most Viewed Show the items accessed by the user within an
application-defined period
Recents
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
There 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)
Trang 4FIGURE 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
The iPOS also provides a suite of icons that may be used in the navigation bar and
toolbar These icons come in two different 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 This section examines the
standard and custom icons and suggests how to incorporate them into your app
Standard Icons
TABLE 10.3includes 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 difficult 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 conflict 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
Trang 5242
TABLE 10.3 Standard Icons for Toolbar and Navigation Bar 10
Opens an action sheet that allows users to take an application-specific action
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
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
Fast-forwards though media playback or slides Fast Forward
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 conflict 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 different 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)
Trang 6OTHER 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 differ, 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.44illustrate how Evernote and Flixster use list view
icons The 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
This 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
Trang 7244
FIGURE 10.43 Evernote main screen FIGURE 10.44 Flixster view
Detail Views
Detail views often use icons for actions or status indicators When used effectively, icons can help conserve space and make your app more visually appealing
Facebook uses icons to incorporate loads of functionality into the profile screen (FIGURE 10.45) Instead of spelling out “comment” as on the Facebook web site, there is a small thought bubble icon The 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
Trang 8If you choose to incorporate icons in detail views, be sure not to overuse them
Too many icons may create visual noise instead of leaving the page uncluttered
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 This 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 visual design should be considered as early as the concept phase
If you wait until after your app is coded, the benefits will be minimal
• Do not design your app’s visual elements in isolation The layout,
typogra-phy, color, icons, and other elements must all work together
• Creating effective icons is very hard and time-consuming Consider hiring
an illustrator—finding an expert will be worth the investment ■
Trang 9246
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
Trang 10Color-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