Research Brief
Human Interface Guidelines - Apple
Aesthetic Integrity
Aesthetic integrity represents how well an app’s appearance
and behavior integrate with its function. For example, an app that helps people
perform a serious task can keep them focused by using subtle, unobtrusive
graphics, standard controls, and predictable behaviors. On the other hand, an
immersive app, such as a game, can deliver a captivating appearance that
promises fun and excitement, while encouraging discovery.
Consistency
A consistent app implements familiar standards and paradigms
by using system-provided interface elements, well-known icons, standard text
styles, and uniform terminology. The app incorporates features and behaviors in
ways people expect.
Direct Manipulation
The direct manipulation of onscreen content engages people
and facilitates understanding. Users experience direct manipulation when they
rotate the device or use gestures to affect onscreen content. Through direct
manipulation, they can see the immediate, visible results of their actions.
Metaphors
People learn more quickly when an app’s virtual objects and
actions are metaphors for familiar experiences—whether rooted in the real or
digital world. Metaphors work well in iOS because people physically interact
with the screen. They move views out of the way to expose content beneath. They
drag and swipe content. They toggle switches, move sliders, and scroll through
picker values. They even flick through pages of books and magazines.
Interface
Essentials
Bars. Tell people where they are in your app,
provide navigation, and may contain buttons or other elements for initiating
actions and communicating information.
Views. Contain the primary content people see in
your app, such as text, graphics, animations, and interactive elements. Views
can enable behaviors such as scrolling, insertion, deletion, and arrangement.
Controls. Initiate actions and convey
information. Buttons, switches, text fields, and progress indicators are
examples of controls.
Loading
Make it clear when loading, so the user doesn’t think the app has
crashed.
Show content as soon as possible. Use placeholder text, graphics or
animations to identify where content isn’t available yet.
Modality
Modality creates focus by
preventing people from doing other things until they complete a task or dismiss
a message or view.
Minimize the use of modality. Generally,
people prefer to interact with apps in nonlinear ways. Consider creating a
modal context only when it’s critical to get someone’s attention, when a task
must be completed or abandoned to continue using the app, or to save important
data.
Don’t display a modal view
above a popover. With the possible exception of an alert, nothing
should appear over a popover. In rare cases when you need to present a modal
view after action is taken in a popover, close the popover before displaying
the modal view.
Navigation
Navigation should feel natural and
familiar, and shouldn’t dominate the interface or draw focus away from content.
Hierarchical Navigation
Make one choice per screen until
you reach a destination. To go to another destination, you must retrace your
steps or start over from the beginning and make different choices. Settings and
Mail use this navigation style.
Content-Driven or
Experience-Driven Navigation
Move freely through content, or
the content itself defines the navigation. Games, books, and other immersive
apps generally use this navigation style.
Design an information structure
that makes it fast and easy to get to content. Organize your
information structure in a way that requires a minimum number of taps, swipes,
and screens.
Use a navigation bar to
traverse a hierarchy of data. The navigation bar’s title can show the
current position in the hierarchy, and the back button makes it easy to return
to the previous location.
Onboarding
Onboard new users and reconnect with returning ones.
Provide a launch screen – gives the impression your app is fast and
responsive.
Stick to the essentials in
tutorials. It’s fine to provide guidance for beginners, but education
isn’t a substitute for great app design. First and foremost, make your app
intuitive. If too much guidance is needed, revisit the design of your app.
Make learning fun and
discoverable. Learning by doing is a lot more fun and effective than
reading a list of instructions. Use animation and interactivity to teach
gradually and in context. Avoid displaying screenshots that appear interactive.
General Layout Considerations
Ensure that primary content is
clear at its default size.
Maintain an overall consistent
appearance throughout your app. In general, elements with similar
functions should look similar.
Use visual weight and balance
to convey importance.
Use alignment to ease scanning
and to communicate organization and hierarchy. Alignment makes an app
look neat and organized, helps people focus while scrolling, and makes it
easier to find information. Indentation and alignment can also indicate how
groups of content are related.
Animation
Use animation and motion
effects judiciously. Don’t use animation for the sake of using
animation. Excessive or gratuitous animation can make people feel disconnected
or distracted, especially in apps that don’t provide an immersive
experience.
Strive for realism and
credibility.
Use consistent animation.
Branding
Successful branding involves more
than just adding brand assets to your app. Great apps express unique brand
identity through smart font, color, and image decisions. Provide enough
branding to give people context in your app, but not so much that it becomes a
distraction.
Incorporate refined,
unobtrusive branding.
For the best experience,
subtly incorporate your brand through your app’s design. Using colors from your
app icon throughout your interface is one great way to provide context in your
app.
Don’t let branding get in the
way of great app design. Above all, make your app feel like an iOS
app. Ensure that it's intuitive, easy to navigate, easy to use, and focuses on
content. Even if your app is available on other platforms, avoid diluting your
design by focusing too much on consistent branding.
Resist the temptation to
display your logo throughout your app.
Colour
Use color judiciously for
communication. The power of color to call attention to important
information is heightened when used sparingly. For example, a red triangle that
warns people of a critical problem becomes less effective when red is used
elsewhere in an app for noncritical reasons.
Use complementary colors
throughout your app.
In general, choose a limited
color palette that coordinates with your app logo. Subtle use of color
is a great way to communicate your brand.
Consider choosing a key color
to indicate interactivity throughout your app.
Avoid using the same color for
interactive and noninteractive elements.
Test your app’s color scheme
under a variety of lighting conditions.
Consider how your use of color
might be perceived in other countries and cultures. In some cultures,
for example, red communicates danger. In others, red has positive connotations.
Make sure the colors in your app send the appropriate message.
Typography
Emphasize important
information. Use font weight, size, and color to highlight the most
important information in your app.
If possible, use a single
typeface. Mixing several different typefaces can make your app seem
fragmented and sloppy. Consider using one typeface and just a few font variants
and sizes.
Make sure custom fonts are
legible.
Image Sze and Resolution
Designing High-Resolution
Artwork
Use an 8px-by-8px grid. A
grid keeps lines sharp and ensures that content is as crisp as possible at all
sizes, requiring less retouching and sharpening. Snap the image boundaries to
the grid to minimize half pixels and blurry details that can occur when scaling
down.
Produce artwork in the
appropriate format. In general, use de-interlaced PNG files for
bitmap/raster artwork. PNG supports transparency and, because it's lossless,
compression artifacts don't blur important details or alter colors. It's a good
choice for intricate artwork that requires effects like shading, textures, and
highlights. Use JPEG for photos. Its compression algorithm usually produces
smaller sizes than lossless formats and artifacts are harder to discern in
photos. Photo-realistic app icons, however, look best as PNGs. Use PDF for
glyphs and other flat, vector artwork that requires high-resolution scaling.
Use the 8-bit color palette for
PNG graphics that don’t require full 24-bit color. Using an 8-bit
color palette reduces file size without reducing image quality. This palette is
not appropriate for photos.
Optimize JPEG files to find a
balance between size and quality. Most JPEG files can be compressed
without noticeable degradation of the resulting image. Even a small amount of
compression can save significant disk space. Experiment with compression
settings on each image to find the optimal value that yields an acceptable
result.
Provide alternative text labels
for images and icons. Alternative text labels aren’t visible onscreen,
but they let VoiceOver audibly describe what's onscreen, making navigation
easier for people with visual impairments.
App Icon
Embrace simplicity. Find
a single element that captures the essence of your app and express that element
in a simple, unique shape. Add details cautiously. If an icon’s content or
shape is overly complex, the details can be hard to discern, especially at
smaller sizes.
Provide a single focus point. Design
an icon with a single, centered point that immediately captures attention and
clearly identifies your app.
Design a recognizable icon.
Keep the background simple and
avoid transparency.
Use words only when they’re
essential or part of a logo.
Don’t include photos,
screenshots, or interface elements.
Test your icon against
different wallpapers. You can’t predict which wallpaper people will
choose for their Home screen, so don’t just test your app against a light or
dark color. See how it looks over different photos. Try it on an actual device
with a dynamic background that changes perspective as the device moves.
Custom Icons
Create recognizable,
highly-simplified designs. Too many details can make an icon confusing
or unreadable. Strive for a simple, universal design that most people will
recognize quickly and won’t find offensive.
Design icons as glyphs. A
glyph, also known as a template image, is a monochromatic image
with transparency, anti-aliasing, and no drop shadow that uses a mask to define
its shape. Glyphs automatically receive the appropriate appearance—including
coloring, highlighting, and vibrancy—based on the context and user
interactions. A variety of standard interface elements support glyphs,
including navigation bars, tab bars, toolbars, and Home screen quick actions.
Prepare glyphs with a scale
factor of @2x and save them as PDFs. Because PDF is a vector format
that allows for high-resolution scaling, it's typically sufficient to provide a
single @2x version in your app and allow it to scale for other resolutions.
Keep your icons consistent. Whether
you use only custom icons or mix custom and system icons, all icons in your app
should be the same in terms of level of detail, optical weight, stroke weight,
position, and perspective.
Make sure icons are legible. In
general, solid icons tend to be clearer than outlined icons. If an icon must
includes lines, coordinate the weight with other icons and your app's
typography.
Use color to communicate
selected and deselected states. Avoid toggling between two different icon
designs, like a solid version and an outlined version.
Avoid including text in an
icon. If you need text, display a label beneath the icon and adjust
its placement accordingly.
Navigation Bars
A navigation bar appears at the
top of an app screen, below the status bar, and enables navigation through a
series of hierarchical screens. When a new screen is displayed, a back button,
often labeled with the title of the previous screen, appears on the left side
of the bar. Sometimes, the right side of a navigation bar contains a control,
like an Edit or a Done button, for managing the content within the active view.
In a split view, a navigation bar may appear in a single pane of the split
view. Navigation bars are translucent, may have a background tint, and can be
configured to hide when the keyboard is onscreen, a gesture occurs, or a view
resizes.
Navigation Bar Titles
Consider showing the title of
the current view in the navigation bar. In most cases, a title helps
people understand what they’re looking at. However, if titling a navigation bar
seems redundant, you can leave the title empty. For example, Notes doesn’t
title the current note because the first line of content supplies all the
context needed.
Navigation Bar Controls
Avoid crowding a navigation bar
with too many controls. In general, a navigation bar should contain no
more than the view’s current title, a back button, and one control that manages
the view’s contents. If you use a segmented control in the navigation bar, the
bar shouldn’t include a title or any controls other than the segmented control.
Use the standard back button.
Status Bars
The status bar appears along the upper edge of the screen and displays
useful information about the device’s current state, like the time, cellular
carrier, network status, and battery level. The actual information shown in the
status bar varies depending on the device and system configuration.
Consider temporarily hiding the
status bar when displaying full-screen media.
Avoid permanently hiding the
status bar.
Tab Bars
A tab bar appears at the bottom of an app screen and provides the ability
to quickly switch between different sections of an app. Tab bars are
translucent, may have a background tint, maintain the same height in all screen
orientations, and are hidden when a keyboard is displayed. A tab bar may
contain any number of tabs, but the number of visible tabs varies based on the
device size and orientation. If some tabs can’t be displayed due to limited
horizontal space, the final visible tab becomes a More tab, which reveals the
additional tabs in a list on a separate screen.
No comments:
Post a Comment