Researching existing guidelines set by Apple offered insight into essential considerations around UX Design. This formed an essential part of my research whilst also enabling me to brainstorm ideas with consideration for low-fidelity wireframes.
For Mac OS (desktop) and iPhone (mobile)
Adaptivity and Layout
People generally want to be able to use their favourite apps on all of their devices and in any context. In iOS, interface elements and layouts can be configured to automatically change shape and size on different devices, during multitasking on iPad, in split view, when the screen is rotated, and more. It’s essential that you design an adaptable interface that provides a great experience in any environment.
Auto Layout
Auto Layout is a development tool for constructing adaptive interfaces. Using Auto Layout, you can define rules (known as constraints) that govern the content in your app. For example, you can constrain a button so it’s always horizontally centered and positioned eight points below an image, regardless of the available screen space.
Auto Layout automatically readjusts layouts according to the specified constraints when certain environmental variations (known as traits) are detected. You can set your app to dynamically adapt to a wide range of traits, including:
- Different device screen sizes, resolutions etc.
- Different device orientations (portrait/landscape)
- Split view
- Multitasking modes on iPad
- Dynamic type set text-size changes
- Internationalisation features that are enabled based on locale (left-to-right/right-to-left layout direction, date/time/number formatting, font variation, text length)
- System feature availability
Layout guides define rectangular regions that don’t actually appear visibly onscreen, but aid with the positioning, alignment, and spacing of content. The system includes predefined layout guides that make it easy to apply standard margins around content and restrict the width of text for optimal readability. You can also define custom layout guides.
Adhere to the safe area and layout margins defined by UIKit.
These layout guides ensure appropriate insetting based on the device and context. The safe area also prevents content from underlapping the status bar, navigation bar, toolbar, and tab bar. Standard system-provided views automatically adopt a safe area layout guide.
Size Classes
Size classes are traits that are automatically assigned to content areas based on their size. The system defines two size classes, regular (denotes expansive space) and compact(denotes constrained space), which describe the height and width of a view.
A view may possess any combination of size classes:
- Regular width, regular height
- Compact width, compact height
- Regular width, compact height
- Compact width, regular height
As with other environmental variations, iOS dynamically makes layout adjustments based on the size classes of a content area. For example, when the vertical size class changes from compact height to regular height, perhaps because the user rotated the device from landscape to portrait orientation, tab bars may become taller.
General Layout Considerations
Ensure that primary content is clear at its default size. People shouldn’t have to scroll horizontally to read important text, or zoom to see primary images, unless they choose to change the 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. Large items catch the eye and appear more important than smaller ones. Larger items are also easier to tap, which is especially important when an app is used in distracting surroundings, such as in the kitchen or a gym. In general, place principal items in the upper half of the screen and—in a left-to-right reading context—near the left side of the screen.
Use alignment to ease scanning and to communicate organisation and hierarchy.Alignment makes an app look neat and organised, helps people focus while scrolling, and makes it easier to find information. Indentation and alignment can also indicate how groups of content are related.
If possible, support both portrait and landscape orientations. People prefer to use apps in different orientations, so it’s best when you can fulfil that expectation.
Be prepared for text-size changes. People expect most apps to respond when they choose a different text size in Settings. To accommodate some text-size changes, you might need to adjust the layout.
Provide ample touch targets for interactive elements. Try to maintain a minimum tappable area of 44pt x 44pt for all controls.
4.7" iPhone
5.8" iPhone
Preview your app on multiple devices. You can use Simulator (included with Xcode) to preview your app and check for clipping and other layout issues. If your app supports landscape mode, make sure your layouts look great regardless of whether the device was rotated left or right. Upside-down portrait mode is not supported on full-screen iPhones. Some features, like wide colour imagery, are best previewed on actual devices.
Apply readability margins when displaying text on larger devices. These margins keep text lines short enough to ensure a comfortable reading experience.
Adapting to Changes in Context
Maintain focus on the current content during context changes. Content is your highest priority. Changing focus when the environment changes can be disorienting and frustrating, and can make people feel like they’ve lost control of the app.
Avoid gratuitous layout changes. When someone rotates a device, the entire layout doesn’t have to change. For example, if your app shows a grid of images in portrait mode, it doesn’t have to present the same images as a list in landscape mode. Instead, it might simply adjust the dimensions of the grid. Try to maintain a comparable experience in all contexts.
If it’s essential that your app run in a single orientation, support both variants. An app that runs only in landscape mode should be usable regardless of whether the user rotates the device left or right. An app that runs only in portrait mode should rotate its content 180 degrees when the user rotates the device 180 degrees—except on iPhone X, which doesn’t support upside-down portrait mode. If your app doesn’t rotate automatically when someone holds the device in the wrong orientation, they’ll know instinctively to rotate it. You don’t need to tell them.
Customise your app’s response to rotation according to context. A game that lets people move a character by rotating the device, for example, probably shouldn’t switch orientations during gameplay. It could, however, display menus and intro sequences based on the current orientation.
Make sure your app works on iPad, not just on iPhone. Users appreciate having the flexibility to run your app on either type of iOS device. Even if you expect most people to use your app on iPhone, interface elements should remain visible and functional on iPad. If certain features of your app require iPhone-specific hardware—like 3D Touch—consider hiding or disabling those features on iPad and letting people use your app's other features.
Designing a Full-Screen Experience
Extend visual elements to fill the screen. Make sure backgrounds extend to the edges of the display, and that vertically scrollable layouts, like tables and collections, continue all the way to the bottom.
Avoid explicitly placing interactive controls at the very bottom of the screen and in corners. People use swipe gestures at the bottom edge of the display to access features like the Home screen and app switcher, and these gestures may cancel custom gestures you implement in this area. The far corners of the screen can be difficult areas for people to reach comfortably.
Inset essential content to prevent clipping. In general, content should be centered and symmetrically inset so it looks great in any orientation, isn’t clipped by rounded corners, isn’t hidden by a sensor housing, and isn’t obscured by the indicator for accessing the Home screen. For best results, use standard, system-provided interface elements and auto layout to construct your interface and adhere to the layout guides and safe area defined by UIKit. When the device is in landscape orientation, it may be appropriate for some apps—like games—to place tappable controls in the lower portion of the screen (extending below the safe area) to allow more room for content. Use matching insets when placing controls at the top and bottom of the screen, and leave ample space around the Home indicator so people don't accidentally target it when trying to interact with a control. Because the Home indicator remains centered on the screen, its location relative to your app’s interface may change.
Inset full-width buttons. A button that extends to the edges of the screen might not look like a button. Respect the standard UIKit margins on the sides of full-width buttons. A full-width button appearing at the bottom of the screen looks best when it has rounded corners and is aligned with the bottom of the safe area—which also ensures that it doesn't conflict with the Home indicator.
Don't mask or call special attention to key display features. Don't attempt to hide a device's rounded corners, sensor housing, or indicator for accessing the Home screen by placing black bars at the top and bottom of the screen. Don't use visual adornments like brackets, bezels, shapes, or instructional text to call special attention to these areas, either.
Be mindful of the status bar height. The status bar is taller on full-screen iPhones than on older iPhones. If your app assumes a fixed status bar height for positioning content below the status bar, you must update your app to dynamically position content based on the user's device. Note that the status bar on full-screen iPhones doesn't change height when background tasks like voice recording and location tracking are active.
If your app currently hides the status bar, reconsider that decision for full-screen iPhones. Full-screen iPhones have more vertical space for content than older iPhones, and the status bar occupies an area of the screen your app probably won't fully utilise. The status bar also displays information people find useful. It should only be hidden in exchange for added value.
Allow auto-hiding of the indicator for accessing the Home screen sparingly. When auto-hiding is enabled, the indicator fades out if the user hasn't touched the screen for a few seconds. It reappears when the user touches the screen again. This behaviour should be enabled only for passive viewing experiences like playing videos or photo slideshows.
Animation
Beautiful, subtle animation throughout iOS builds a visual sense of connection between people and content onscreen. When used appropriately, animation can convey status, provide feedback, enhance the sense of direct manipulation, and help users visualise the results of their actions.
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. iOS uses motion effects, such as a parallax effect, to create the perception of depth on the Home screen and in other areas. These effects can increase understanding and enjoyment, but overusing them can make an app feel disorienting and difficult to control. If you implement motion effects, always test the results to make sure they work well.
Strive for realism and credibility. People tend to accept artistic license, but they can feel disoriented when movement doesn’t make sense or appears to defy physical laws. If someone reveals a view by sliding it down from the top of the screen, for example, they should be able dismiss the view by sliding it back up.
Use consistent animation. A familiar, flowing experience keeps users engaged. They're accustomed to the subtle animation used throughout iOS, such as smooth transitions, fluid changes in device orientation, and physics-based scrolling. Unless you’re creating an immersive experience, such as a game, custom animation should be comparable to the built-in animations.
Make animations optional. When the option to reduce motion is enabled in accessibility preferences, your app should minimise or eliminate application animations.
Incorporate refined, unobtrusive branding. People use your app to be entertained, get information, or get things done, not to watch an advertisement. For the best experience, subtly incorporate your brand through your app’s design. Using colours 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 its 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.
Defer to content over branding. Showing a persistent bar at the top of the screen that does nothing but display brand assets means there’s less room for viewing content. Instead, consider less intrusive ways to implement branding, such as using a custom colour scheme or font, or subtly customising the background.
Resist the temptation to display your logo throughout your app. Avoid displaying a logo throughout your app unless it’s necessary for providing context. This is especially important in navigation bars, where a title is more helpful.
Colour
Colour is a great way to impart vitality, provide visual continuity, communicate status information, give feedback in response to user actions, and help people visualise data. Look to the system’s colour scheme for guidance when picking app tint colours that look great individually and in combination, on both light and dark backgrounds.
R 255G 59B 48
Red
R 255G 149B 0
Orange
R 255G 204B 0
Yellow
R 76G 217B 100
Green
R 90G 200B 250
Teal Blue
R 0G 122B 255
Blue
R 88G 86B 214
Purple
R 255G 45B 85
Pink
Use colour judiciously for communication. The power of colour 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 colours throughout your app. The colours in your app should work well together, not conflict or distract. If pastels are essential to your app’s style, for example, use a coordinating set of pastels.
In general, choose a limited colour palette that coordinates with your app logo. Subtle use of colour is a great way to communicate your brand.
Consider choosing a key colour to indicate interactivity throughout your app. In Notes, interactive elements are yellow. In Calendar, interactive elements are red. If you define a key colour that denotes interactivity, make sure other colours don’t compete with it.
Avoid using the same colour for interactive and non-interactive elements. If interactive and non-interactive elements have the same colour, it’s hard for people to know where to tap.
Enabled and disabled elements
Consider how artwork and translucency affect nearby colours. Variations in artwork sometimes warrant changes to nearby colours in order to maintain visual continuity and prevent interface elements from becoming overpowering or underwhelming. Maps, for example, displays a light colour scheme when using map mode but switches to a dark colour scheme when satellite mode is activated. Colours can also appear different when placed behind a translucent element, or when applied to a translucent element, such as a toolbar.
Test your app’s colour scheme under a variety of lighting conditions. Lighting varies significantly both indoors and outdoors, based on room ambiance, time of day, the weather, and more. Colours you see on your computer won’t always look the same when your app is used in the real world. Always preview your app under multiple lighting conditions, including outdoors on a sunny day, to see how colours appear. If necessary, adjust colours to provide the best possible viewing experience in the majority of use cases.
Consider how the True Tone display affects colour. The True Tone display uses ambient light sensors to automatically adjust the white point of the display to adapt to the lighting conditions of the current environment. Apps that focus primarily on reading, photos, video, and gaming can strengthen or weaken this effect by specifying a white point adaptivity style.
Be aware of colourblindness. Many colourblind people, for example, find it difficult to distinguish red from green (and either colour from grey), or blue from orange. Avoid using these colour combinations as the only way to distinguish between two states or values. For example, instead of using red and green circles to indicate offline and online, you could use a red square and a green circle. Some image-editing software includes tools that can help you proof for colourblindness.
As seen without colour blindness.
As seen with red-green colour blindness.
Consider how your use of colour 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 colours in your app send the appropriate message.
Use sufficient colour contrast ratios. Insufficient contrast in your app makes content hard to read for everyone. Icons and text might blend with the background, for example. An online colour contrast calculator can help you accurately analyse the colour contrast in your app, to ensure that it meets optimal standards. Strive for a minimum contrast ratio of 4.5:1, although 7:1 is preferred because it meets more stringent accessibility standards.
Colour Management
Apply colour profiles to your images. The default colour space on iOS is Standard RGB (sRGB). To ensure that colours are correctly matched to this colour space, make sure your images include embedded colour profiles.
Use wide colour to enhance the visual experience on compatible displays. Wide colour displays support a P3 colour space, which can produce richer, more saturated colours than sRGB. As a result, photos and videos that use wide colour are more lifelike, and visual data and status indicators that use wide colour are more impactful. When appropriate, use the Display P3 colour profile at 16 bits per pixel (per channel) and export images in .png format. Note that a wide colour display is needed to design wide colour images and select P3 colours.
Provide colour space-specific image and colour variations when the experience calls for it. In general, P3 colours and images tend to appear as expected on sRGB devices. Occasionally, however, it may be hard to differentiate between two very similar P3 colours when they're viewed in sRGB. Gradients that use colours in the P3 spectrum can also sometimes appear clipped on sRGB devices. To avoid these issues, you can provide distinct images and colours in the asset catalog of your Xcode project to ensure visual fidelity on both wide colour and sRGB devices.
Preview your app’s colours on actual sRGB and wide colour displays. Make adjustments as needed to ensure an equally great visual experience on both types of displays.
Terminology
Every word in your app is part of a conversation with your users. Use this conversation to help them feel comfortable in your app.
Use familiar, understandable words and phrases. Technology can be intimidating. Avoid acronyms and technical jargon that people might not understand. Use what you know about your audience to determine whether certain words or phrases are appropriate. In general, apps that appeal to everyone should steer clear of highly technical language. Such language may be appropriate in apps that target a more advanced or technical crowd.
Keep interface text clear and concise. People absorb short, direct text quickly and easily and don’t appreciate being forced to read long passages to accomplish a task. Identify the most important information, express it succinctly, and present it prominently so people don’t have to read too much to find what they’re looking for or figure out what to do next.
Identify interactive elements appropriately. People should be able to tell at a glance what an element does. When labelling buttons and other interactive elements, use action verbs, such as Connect, Send, and Add.
Avoid language that might sound patronising. Avoid we, our, me, and my (for example "our tutorial" and "my workouts"). They're sometimes interpreted as insulting or patronising.
Strive for an informal, friendly tone. An informal, approachable style echoes the way you speak with people over lunch. Use contractions occasionally, and you and your to address the user directly.
Be careful when using humour. Remember that people are likely to read the text in your interface many times, and what might seem clever at first can become irritating over time. Also remember that humour in one culture doesn't necessarily translate well to other cultures.
Use relevant and consistent language and imagery. Always make sure guidance is appropriate for the current context. If someone’s using an iPad, for example, don’t show iPhone tips or graphics. Use language that’s consistent with the platform. You tap, flick, swipe, pinch, and drag content on the touchscreen. You press physical buttons and content that responds to 3D Touch. You rotate and shake the device.
Refer to dates accurately. It’s appropriate to use friendly terms like today and tomorrow, but these terms can be confusing or inaccurate if you don’t account for the current locale. Consider an event that starts just before midnight. In one time zone, the event may start today. In another time zone, the same event may have started yesterday. Generally, dates should reflect the time zone of the person viewing the event. However, in some cases, such as in a flight tracking app, it may be clearer to explicitly show the start date and time zone where the flight originates.
Typography
San Francisco (SF) is the system typeface in iOS. The fonts of this typeface are optimised to give your text unmatched legibility, clarity, and consistency.
Emphasise 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.
Use built-in text styles whenever possible. The built-in text styles let you express content in ways that are visually distinct, while retaining optimal legibility. These styles are based on the system fonts and allow you to take advantage of key typographic features, such as Dynamic Type, which automatically adjusts tracking and leading for every font size. iOS includes the following text styles:
Large Title
Title 1
Title 2
Title 3
Headline
Body
Callout
Subhead
Footnote
Caption 1
Caption 2
Make sure custom fonts are legible. Custom typefaces are supported on iOS, but are often tough to read. Unless your app has a compelling need for a custom font, such as for branding purposes or to create an immersive gaming experience, it’s usually best to stick with the system fonts. If you do use a custom font, make sure it’s easily readable, even at small sizes.
Implement accessibility features for custom fonts. System fonts automatically react to accessibility features like bold text and larger type. Apps using custom fonts should implement the same behaviour by checking whether accessibility features are enabled and registering for notifications when they change.
Dynamic Type Sizes
The San Francisco typeface was designed to be highly legible at both small and large sizes. Dynamic Type provides additional flexibility by letting readers choose their preferred text size.
Prioritise content when responding to text-size changes. Not all content is equally important. When someone chooses a larger size, they want to make the content they care about easier to read; they don’t always want every word on the screen to be larger.
Video
The system-provided video player offers two viewing modes: full-screen (aspect fill) and fit-to-screen (aspect). By default, the system selects a viewing mode based on a video's aspect ratio, and the user can switch modes during playback.
- Full-screen (aspect-fill) viewing mode. The video scales to fill the display. Some edge cropping may occur. This is the default viewing mode for wide video (2:1 through 2.40:1)
- Fit-to-screen (aspect) viewing mode. The entire video is visible onscreen. Letterboxing or pillar boxing will occur. This is the default viewing mode for standard video (4:3, 16:9, and anything up to 2:1) and ultra-wide video (anything above 2.40:1).
Examples of Viewing Modes on iPhone XS
Make sure custom video players behave as expected. The objective is to fill the display by default when playing video content on full-screen devices. However, if filling the display results in too much cropping, the video should be scaled to fit the screen. You should also allow people to switch between full-screen and fit-to-screen viewing based on their individual preferences.
Examples of Padding on iPhone XS
Always display video content at its original aspect ratio. When video content uses embedded letterbox or pillar box padding to conform to a specific aspect ratio, iOS is unable to correctly scale the video based on the user's choice of viewing modes. Padding embedded within the video frame can cause videos to appear smaller in full-screen mode and fit-to-screen mode. It also prevents videos from displaying correctly in edge-to-edge, non-full-screen contexts, like picture in picture mode on iPad.
SOURCE: (https://developer.apple.com/design/human-interface-guidelines/ios/overview/themes)
SOURCE: (https://developer.apple.com/design/human-interface-guidelines/ios/overview/themes)
No comments:
Post a Comment