User interface design patterns are solutions to common design challenges, such as navigating around an app, listing data or providing feedback to users.
Mobile apps and sites have unique UI design requirements because, compared to their desktop counterparts, they’re used in smaller screens and, at least with today’s modern mobile devices, rely on fingers instead of a keyboard and mouse as input mechanisms.
Mobile OS manufacturers typically have official docs geared for professionals developing for their platform. These docs often include guides on UI design patterns.
- For Android, check out Android Design’s Pattern section.
- For iOS app designers, see iOS Human Interface Guidelines in the iOS Developer Library.
- Designing for Nokia phones? Head over to Nokia Wiki’s Mobile Design Patterns.
Example Pattern - Composition - Scroll Pattern
More information is in the page or element than can fit in the view port You have to provide a method to access this information.
Usually, the OS provides this function. Certain behaviors will occur automatically, but in application design especially, you may need to customize your interaction and interface to work in the best possible manner.
Solution
Scroll indicators may be complete bars, or simple indicators floating over the content.
(Source: Hoober (2012), p. 11)
Scroll bars have long been used in information display systems of all sorts. For mobile, you will display them to indicate the scrollable axes, and the relative position within the scrollable area.
Due to the scale of mobile devices, as a general rule you should not allow the scroll bar to be manipulated directly. Instead, allow the content to be grabbed directly by a gesture, or make the entire area movable via dedicated Directional Entry keys.
You will find that scroll behaviours are key to interaction with mobile devices. As with all the patterns around page Composition, Scroll will be mentioned in a number of other patterns
Variations
Whenever possible, you should make sure scrolling takes place on a single axis. This is why the whole set of patterns based around Vertical Scroll exist. When the situation demands, such as for zooming in to content which otherwise fits the area, you can also offer a secondary scroll axis. Keep the secondary axis in mind throughout the design process; it may help you to understand how to avoid behaviors that may lead to confusion or cause the user to become lost when scrolling.
In rare cases, both axes of movement may be equally important. When zooming in on images, for example, the information is equally important in all directions:
A zoomed-in view of a small portion of a whole page
Interaction Details
Only allow items that are in focus to scroll. For scroll-and-select devices especially, be sure this is clearly communicated and strictly enforced.
For scroll bars on touch or pen devices, it is almost always best to not allow the scroll bar itself to be directly manipulated. Handset-size devices are too small, so this would encourage accidental input on the screen. Instead, the entire page is scrolled by gestural movement. Use care with detection of gesture to avoid selecting items on the page.
When designing for devices with larger screens, you may be able to add actionable scroll bars. Often, these still are distractingly large, so you may want to make them appear only conditionally.
Scroll-and-select devices will use a scroll key pair, or more often a five-way pad of some sort. Scrolling may be by item (line by line, or jumping link to link) or by moving a pointer on the screen. When you use a pointer, do not allow it to get too close to the edge of the screen; scroll when one-third to one-fourth of the way across. Of course, at the limits of the displayable information, it may approach the edges in order to select all items in the screen.
For item scrolling, do not allow the user to jump past content. For example, when viewing a web page, if the primary method jumps link to link, when there is a large area of content with no links, temporarily suspend this and scroll a few lines at a time so that all content can be seen.
You can also provide item scrolling as a secondary method. If you have set the Up and Down scroll keys to move line by line, the unused Left and Right keys may be set to jump from link to link.
When using the five-way pad, users should always be able to press and hold in one direction for a short time to accelerate scrolling. The absolute speed depends heavily on the amount of content. Scrolling must be slow enough to allow the user to see his current position; otherwise, he will not know when to stop scrolling. This is extremely expected behaviour, and so is noted when not included.
For touch and pen devices, inertia scrolling has also become expected behaviour. If the user’s finger (or pen) initiates a drag action, and departs the screen while still moving, the screen will continue scrolling at the departure speed until it is stopped by another form of input. It is usually best if you configure this to simulate friction so that the scrolling gradually slows over time, but do not overdo this deceleration if the list is very long.
If a thumbnail of the total content is provided, this may also be interactive. For touch and pen devices, tapping another area of the thumbnail will jump to that area.
Presentation Detail
Scroll indicators are not usually used in mobile devices to enable scrolling, but to:
• Provide an affordance (communicate the function) that the area is scrollable
• Convey the current location within the total content
• Indicate the relative amount of information the viewport displays, as a ratio of the total content
Always be sure to display an indicator of position. This may be hidden for full-screen views, when other information is hidden. But be sure to display the scroll position indicators whenever the user is interacting with the content, and especially whenever the user is scrolling.
Scroll bars may be made very small, or be obscured by other elements in some cases. Effective, visible scroll bars can be as small as two pixels wide: a single pixel line defines the outside of the bar, a single pixel line defines the inside, and a different coloured area is for the current position. Naturally, this depends on the resolution of the display, so larger bars will be needed for very high-resolution displays due to the small pixels.
Anti - Patterns
Do not allow users to become lost in the scrollable area. Especially be sure to not allow scrolling single-axis lists so far that no content is visible.
Consider anchoring secondary axis scrolling to an edge when scrolling on the primary axis. Two-dimensional scrolling is often very difficult to achieve with precision.
If you have to use multi-axis scrolling to show the information, do not assume it will be easily understood. Try it out, and add additional help or more prominent scroll indicators as needed.
Whenever possible, avoid vertically scrolling areas within other vertically scrolling areas. For example, a form text area within a page will, when it is in focus, stop the page scroll and grant all scrolling to itself until it has scrolled all the way to the bottom, then may allow the page to regain scroll focus. This is confusing, and often leads to errors. Avoid it instead.
For touch and pen devices, avoid drag-and-drop interfaces, or other interactions that require dragging an element within a scrollable area. If required, consider multi-finger on-screen gestures, or press-and-hold interactions as a method to initiate a mode switch.
Source:
Hoober, S & Berkman, E. (2012) “Designing Mobile Interfaces Patterns for Interaction Design” O'Reilly Media
No comments:
Post a Comment