You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
The number of locations a merchant has can range dramatically, and the location experience should adapt to that number. Using progressive disclosure, we can introduce features as merchants need them.
21
+
Resource picking experiences let merchants browse, find, and select items in a list to perform an action. The picking feature can help them navigate to a new page, filter an index table, or input one or more values in a form.
13
22
14
23
---
15
24
16
25
## Principles
17
26
18
27
-**Leverage shared foundations.** By starting with available components and patterns, we keep design and development simple. Shared foundations also help guarantee familiar experiences for our merchants.
19
-
-**Use progressive disclosure.** This is at the core of designing location experiences. As merchants add locations, patterns should gradually offer more features. For example:
20
-
-A small number of locations (1–10) doesn’t need text search, sorting, and filtering.
21
-
-A larger number of locations (11 or more) requires patterns like text search, sorting, filtering, and pagination.
28
+
-**Use progressive disclosure.** This is at the core of designing resource picking experiences. As merchants add resources, patterns should gradually offer more features. For example:
29
+
-Lists with a small number of resources (1–10) doesn’t need text search, sorting, and filtering.
30
+
-Lists with a larger number of resources (11 or more) require patterns like text search, sorting, filtering, and pagination.
22
31
23
32
---
24
33
25
34
## Foundational patterns
26
35
27
-
When building a location experience, leverage components and patterns that offer:
36
+
When building a resource picking experience, leverage components and patterns that offer:
28
37
29
38
- Easy access to known complex data (text search by location name, city, province, etc.)
30
39
- Access to incomplete or unfamiliar data (filter contextual to the surface area)
31
40
- The ability to organize and browse data (sort contextual to the surface area)
32
-
- Pagination (load additional locations via infinite scrolling)
41
+
- Pagination (load additional resources via infinite scrolling)
33
42
34
43
Sometimes existing solutions don’t fit your use case. They are a great place to start, but don’t be afraid to create a new solution for your merchant’s unique situation. If you do create something new, it’s important to document that solution and share it back to the system.
35
44
@@ -41,19 +50,25 @@ Progressive disclosure means we introduce advanced features only when needed. Th
41
50
42
51
To scale the experience consistently, we want to establish specific points for introducing new functionality.
43
52
44
-
While there are many ways to treat locations, two common patterns that use progressive disclosure are the location picker and the location list.
53
+
While there are many ways to treat a resource depending on the use case, two common resources that use progressive disclosure across their picking experiences are locations and customer segments.
54
+
55
+
## Case studies
45
56
46
-
### Location picker
57
+
### Locations
58
+
59
+
The number of locations a merchant has can range dramatically, and the location experience should adapt to that number. Using progressive disclosure, we can introduce features as merchants need them.
47
60
48
-
The location picker allows a merchant to select any location they have added in the admin.
When a merchant only has one location, the button that opens the location picker should be hidden. There’s no need to access the experience when they can’t switch locations.
- List all other locations in alphabetical order. Each location item shows the location name only.
67
82
68
-
83
+
69
84
70
85
#### 11 or more locations
71
86
@@ -76,22 +91,22 @@ When a merchant has 11 or more locations:
76
91
- Directly below the search, show a section with the 5 most recently used locations. If there are none, show the first 5 locations from the full list.
77
92
- Below recently used locations, show an option to view all locations. Clicking this will show the inactive search state, displaying the full list of locations.
78
93
79
-
### Location list
94
+
####Location list
80
95
81
96
The location list allows merchants to view all locations they have added in the admin.
When a merchant has 1–10 locations, show all locations in a simple list. As notated in the image above:
88
103
89
104
1. Each list item should include the location name and address
90
105
2. The indicator at the bottom shows the total number of locations
91
106
92
-
107
+
93
108
94
-
#### 11 or more locations
109
+
#####11 or more locations
95
110
96
111
When a merchant has 11 or more locations:
97
112
@@ -104,3 +119,36 @@ Notated in the image above, location list functionality at this level includes:
104
119
2.**Sort**. This will be contextual to the use case (alphabetical sort, date created, date edited, etc.).
105
120
3.**Filter**. This is also contextual to the use case. For example, merchants could filter by subscription type.
106
121
4.**Pagination**. Allow the merchant to load and view additional sets of locations. Trigger loading with a “Load more” button.
122
+
123
+
### Customer segments
124
+
125
+
The number of locations a merchant has can range dramatically, and the location experience should adapt to that number. Using progressive disclosure, we can introduce features as merchants need them.
126
+
127
+
#### Popover list
128
+
129
+
The location picker popover allows a merchant to select any location they have added in the admin.
When a merchant only has one location, the button that opens the location picker should be hidden. There’s no need to access the experience when they can’t switch locations.
- Add text search at the top of the location picker. This allows merchants to search for locations by specific criteria (location name, city, province, postal code, address, etc.).
145
+
- Directly below the search, show a section with the 5 most recently used locations. If there are none, show the first 5 locations from the full list.
146
+
- Below recently used locations, show an option to view all locations. Clicking this will show the inactive search state, displaying the full list of locations.
0 commit comments