Popovers

8 minutes
Share the link to this page
Copied
  Completed
You need to have access to the item to view this lesson.
One-time Fee
$99.99
List Price:  $139.99
You save:  $40
€92.81
List Price:  €129.94
You save:  €37.13
£79.68
List Price:  £111.56
You save:  £31.87
CA$136.70
List Price:  CA$191.38
You save:  CA$54.68
A$151.47
List Price:  A$212.07
You save:  A$60.59
S$134.88
List Price:  S$188.84
You save:  S$53.96
HK$781.18
List Price:  HK$1,093.68
You save:  HK$312.50
CHF 90.49
List Price:  CHF 126.69
You save:  CHF 36.20
NOK kr1,087.35
List Price:  NOK kr1,522.33
You save:  NOK kr434.98
DKK kr692.92
List Price:  DKK kr970.11
You save:  DKK kr277.19
NZ$166.33
List Price:  NZ$232.87
You save:  NZ$66.53
د.إ367.25
List Price:  د.إ514.16
You save:  د.إ146.91
৳10,943.35
List Price:  ৳15,321.13
You save:  ৳4,377.77
₹8,337.18
List Price:  ₹11,672.39
You save:  ₹3,335.20
RM473.95
List Price:  RM663.55
You save:  RM189.60
₦123,487.65
List Price:  ₦172,887.65
You save:  ₦49,400
₨27,738.77
List Price:  ₨38,835.40
You save:  ₨11,096.62
฿3,675.50
List Price:  ฿5,145.85
You save:  ฿1,470.34
₺3,235.04
List Price:  ₺4,529.19
You save:  ₺1,294.14
B$509.60
List Price:  B$713.47
You save:  B$203.86
R1,850.72
List Price:  R2,591.08
You save:  R740.36
Лв181.51
List Price:  Лв254.13
You save:  Лв72.61
₩135,590.93
List Price:  ₩189,832.73
You save:  ₩54,241.80
₪370.74
List Price:  ₪519.05
You save:  ₪148.31
₱5,705.78
List Price:  ₱7,988.32
You save:  ₱2,282.54
¥15,303.96
List Price:  ¥21,426.16
You save:  ¥6,122.20
MX$1,697.07
List Price:  MX$2,375.96
You save:  MX$678.89
QR363.69
List Price:  QR509.19
You save:  QR145.49
P1,358.38
List Price:  P1,901.79
You save:  P543.40
KSh13,211.65
List Price:  KSh18,496.84
You save:  KSh5,285.18
E£4,788.95
List Price:  E£6,704.73
You save:  E£1,915.77
ብር5,723.72
List Price:  ብር8,013.44
You save:  ብር2,289.71
Kz83,591.64
List Price:  Kz117,031.64
You save:  Kz33,440
CLP$94,219
List Price:  CLP$131,910.38
You save:  CLP$37,691.37
CN¥723.64
List Price:  CN¥1,013.13
You save:  CN¥289.48
RD$5,794.19
List Price:  RD$8,112.10
You save:  RD$2,317.90
DA13,457.95
List Price:  DA18,841.67
You save:  DA5,383.72
FJ$225.30
List Price:  FJ$315.43
You save:  FJ$90.13
Q775.06
List Price:  Q1,085.12
You save:  Q310.05
GY$20,860.22
List Price:  GY$29,205.14
You save:  GY$8,344.92
ISK kr13,949.49
List Price:  ISK kr19,529.85
You save:  ISK kr5,580.35
DH1,005.73
List Price:  DH1,408.07
You save:  DH402.33
L1,766.28
List Price:  L2,472.87
You save:  L706.58
ден5,712.52
List Price:  ден7,997.75
You save:  ден2,285.23
MOP$802.57
List Price:  MOP$1,123.63
You save:  MOP$321.06
N$1,845.78
List Price:  N$2,584.16
You save:  N$738.38
C$3,670.67
List Price:  C$5,139.09
You save:  C$1,468.41
रु13,313.56
List Price:  रु18,639.52
You save:  रु5,325.95
S/372.22
List Price:  S/521.13
You save:  S/148.90
K385.44
List Price:  K539.63
You save:  K154.19
SAR375.02
List Price:  SAR525.04
You save:  SAR150.02
ZK2,689.66
List Price:  ZK3,765.63
You save:  ZK1,075.97
L462.03
List Price:  L646.86
You save:  L184.83
Kč2,326.92
List Price:  Kč3,257.79
You save:  Kč930.86
Ft36,152.68
List Price:  Ft50,615.20
You save:  Ft14,462.51
SEK kr1,078.64
List Price:  SEK kr1,510.15
You save:  SEK kr431.50
ARS$87,815.44
List Price:  ARS$122,945.14
You save:  ARS$35,129.69
Bs690.51
List Price:  Bs966.74
You save:  Bs276.23
COP$388,367.89
List Price:  COP$543,730.59
You save:  COP$155,362.69
₡50,962.55
List Price:  ₡71,349.61
You save:  ₡20,387.06
L2,463.20
List Price:  L3,448.58
You save:  L985.38
₲746,475.93
List Price:  ₲1,045,096.16
You save:  ₲298,620.23
$U3,821.56
List Price:  $U5,350.33
You save:  $U1,528.77
zł401.98
List Price:  zł562.79
You save:  zł160.80
Already have an account? Log In

Transcript

Okay, let's talk about a popover. A popover is a transient view that can be revealed when people tap a control or tap in an on screen area. Transition basically means transitory. Temporary. popover is a type of a model view. According to the guidelines, you're supposed to use popovers on the horizontal irregularly environments, horizontally compact environments, you're supposed to use other types of models instead, model view and self bid fullscreen and not action sheets, activity views.

There are however situations when you can use popovers in compact environments as well, and we will get into that later. Generally, use a popover to display additional information or actions related to the focus or selected object. In particular, it's useful when a specific action requires extra user inputs before proceeding. It can be as simple as one extra choice, as we see in this example. Or it can include multiple extra inputs. It can even include multi level navigation.

As you can see here. Here we have the segmented control. And then we have the categories inside, and each of them might have even more levels inside. That can be a lot of combinations in cases. No wonder, because the popover is a tool that is used on iPads instead of all those regular model views, action sheets and activity views. So it can contain a wide variety of objects and views within it table, which is simply at least image map text, web queue, and custom views, as well as navigation bars, toolbars and tab bars.

And of course, it can contain also other controls that act upon objects in the current app view. Let's take a look at a few more example. Here's a popover with an activity view. Here's the one with the table. Yep, guidelines referred to as a table instead of release. Well, you know, it's a table is just one column.

Here's another one with a list of contacts. Check it out. It has basically a navbar, a search bar, a table view, and the segmented control. Now, let's go over some details and recommendations from Apple. First, as you have already noticed, a popover displays an arrow that indicates the point from which it emerged. It has a translucent background and blurs content underneath just as many other UI elements do since iOS seven.

By default, they will use navigation bars and two bars in the popover is a transparent background, meaning they don't have any visible background at all. That is to let the popovers blurring show through. So for the default UI style in order for a popover to be consistent with other UI elements, you're not supposed to add any extra backgrounds to the elements that the popover things you might do though, for some specific functional or aesthetic reason, in your particular case. In the horizontal the regulatory environment, meaning mostly on iPads, an action sheet always appears inside a popover and so does the activity view. A closed button, such as cancel or done is worth including if it provides clarity, such as exiting with or without saving changes. In general, a popover should close automatically when its presence is no longer necessary.

In most cases, a popover should close when someone taps outside of its bounds or selects an item in the popover If multiple selections can be made, the popover should remain open until someone explicitly dismisses it with a cancel or Done button with taps outside of its bounds. In general, save users work when they tap outside the popovers borders. Not every proposal requires an explicit dismissal, so people might dismiss them mistakenly discard the work people do in the popover. Only if they specifically tap a Cancel button. A proposed arrow should point as directly as possible to the element that revealed it. Because popovers can be dragged around on the screen.

A popover shouldn't cover essential content people may need to see while using the popover. A popover also shouldn't cover the element that was tapped to show the popover ensure that only one popover is visible on screen at a time. You shouldn't display more than one popover custom view designed to look behaves like a popover at the same time. In particular, you should avoid displaying a cascade or hierarchy of popovers simultaneously, in which one popover emerges from another, you can need to show a new popover close the open one first. Don't display any other views on top of a popover. Except for an alert, nothing should be displayed on top of a popover.

Actually, Apple itself does it though. For example, in this case of showing the shortcuts bar popovers on top of the apps popovers. Those can be considered system popovers though, so listen to applicants and don't create popovers over popovers in your app. When possible, let users close one popover and open a new one with one tap. This behavior is especially desirable when several different bar buttons each open a popover because it's prevents people from having to make extra taps. Avoid making the popover too big a popover shouldn't appear to take over the entire screen.

Instead, it should be just big enough to display its content and still point to the place it came from. The height of a popover is not constrained, so you can use it to display a long list of items. In general, though, you should try to avoid scrolling a popover that enables a task. Note that the system might adjust both the height and the width of a popover to ensure that it fits well on the screen. When a popover grows in size due to the number of contained elements, and reaches the bottom edge of the viewport, it is possible to scroll within the popover. Use standard UI controls and views within a popover.

General popovers look best and they're easier for users to understand when they contain standard controls and views. Make sure a custom popover still looks like a popover. Although it's easy to customize many of the visual aspects of a popover. Avoid creating a design that people might not recognize it as a popover. If you change the appearance of a popover too much, users can't rely on their prior experience will help them understand how to use it in your app. Provide a smooth transition when changing the size of a popover.

You might want to change the popover size if you use it to display both a minimal and an expanded view of the same information when you adjust the size of visible popover animated change, because it avoids giving the impression that a new popover has replaced the old one. Now, let's go beyond the guidelines again. And take a look at the examples when it makes sense to use a popover in compact environments as well. First, a somewhat popular way to use it is as a navbar drop down as you see in these examples. Another case when it's okay to use a popover in compact environments is when the popover is pretty small. And an extra driving factor can be having quite a custom looking before, so it wouldn't really fit well in a standard action sheet or activity view.

In these cases, go ahead and use it if you want to, like in these examples here. Also note that you can actually show the popover on any side of the associated object, in case you need that. And by the way, here we see a popover with just the text. You can use it for giving some hints here and there. For example,

Sign Up

Share

Share with friends, get 20% off
Invite your friends to LearnDesk learning marketplace. For each purchase they make, you get 20% off (upto $10) on your next purchase.