Show last authors
1 Extended-Breadcrumb's purpose is to provide a solution to //combine// the global-menu functionality with the current breadcrumb functionality, while supporting //nested spaces// concept and being backwards compatible with //parent/child// relationship.
2
3 (% class="row" %)
4 (((
5 (% class="col-xs-12 col-sm-12" %)
6 (((
7
8 = Proposal =
9 )))
10 (% class="col-xs-12 col-sm-4" %)
11 (((
12
13
14 {{toc start="3"/}}
15 )))
16
17 (% class="col-xs-12 col-sm-offset-2 col-sm-6 " %)
18 (((
19 {{info}}
20 **Related Proposals**
21
22 There is a related proposal for [[extended-global-menu navigation>>Improvements.ActionMenuNavigation]] (Nov 2009)
23 {{/info}}
24
25 )))
26 )))
27
28 (% class="row" %)
29 (((
30 (% class="col-xs-12" %)
31 (((
32
33 )))
34
35 (% class="col-xs-12 col-sm-6 col-md-6" %)
36 (((
37 == Current ==
38
39 [[{{image reference="current.png" width="100%"/}}>>attach:current.png]]
40 )))
41
42 (% class="col-xs-12 col-sm-6 col-md-6" %)
43 (((
44 == Purpose ==
45 * Represent the following hierarchy: {{code}}Europe - Eastern Europe - Romania - Moldavia
46 - Southern Bucovina - Suceava - Vatra Dornei{{/code}}
47
48 * Combine //global-menu// functionality (actions) with the //breadcrumbs// (navigation)
49
50 * This is an usage example. There are other possibilities to achieve this kind of hierarchy (in the main wiki, only with space, only with pages, etc.)
51 )))
52 )))
53
54 (% class="row" %)
55 (((
56 (% class="col-xs-12" %)
57 (((
58 === Entity Icons ===
59
60 {{usecase}}
61 Displaying the breadcrumb item entity type (wiki, space, page) by using an appropriate icon
62 {{/usecase}}
63 )))
64
65 (% class="col-xs-12 col-sm-6 col-md-6" %)
66 (((
67 [[{{image reference="icons.png" width="100%"/}}>>attach:icons.png]]
68 )))
69
70 (% class="col-xs-12 col-sm-6 col-md-6" %)
71 (((
72 (%class="table"%)
73 |(%width='50%'%){{success}}Pros{{/success}} Combined functionality|{{error}}Cons{{/error}} Increased complexity
74 |{{success}}Pros{{/success}} Clear entity type displayed|{{error}}Cons{{/error}} Display is crowded by the icon usage, making it harder to read the label, thus slowing navigation
75 |{{success}}Pros{{/success}} User can anticipate the available actions for a specific type |{{error}}Cons{{/error}} If the available actions are identical, the type doesn't offer any additional hint
76 ||(%width='50%'%){{info}}Recommended{{/info}} Don't display entity icons
77 )))
78 )))
79
80 (% class="row" %)
81 (((
82 (% class="col-xs-12" %)
83 (((
84 === Home Icon ===
85
86 {{usecase}}Displaying the main-wiki link, currently called 'Wiki Home' with a house icon{{/usecase}}
87 )))
88
89 (% class="col-xs-12 col-sm-6 col-md-6" %)
90 (((
91 [[{{image reference="home.png" width="100%"/}}>>attach:home.png]]
92 )))
93
94 (% class="col-xs-12 col-sm-6 col-md-6" %)
95 (((
96 (%class="table"%)
97 |(%width='50%'%){{success}}Pros{{/success}} (((Being one of a kind (only one main wiki) can be represented in a special manner.
98
99 Also it should be outside of the hierarchy (since its purpose is navigational), thus does not need a label.)))|{{error}}Limitation{{/error}}((( Currently, at sub-wiki level we don't display the main-wiki link for breadcrumbs (but only in the global-menu). We should display the main-wiki link also in the extended-breadcrumb (except for the 'farm' case).
100
101 With this change we should also change the logo behavior, by redirecting to main-wiki, instead of sub-wiki homepage (or make this customizable since there are cases when we might want isolated sub-wikis).
102 )))
103 |(%width='50%'%){{info}}Recommended{{/info}} Display home icon|
104 )))
105 )))
106
107
108
109 (% class="row" %)
110 (((
111 (% class="col-xs-12" %)
112 (((
113 === Entity Actions ===
114
115 {{usecase}}
116 Displaying the breadcrumb item entity actions
117 {{/usecase}}
118 )))
119
120 (% class="col-xs-12 col-sm-6 col-md-6" %)
121 (((
122 [[{{image reference="actions.png" width="100%"/}}>>attach:actions.png]]
123
124
125 [[{{image reference="actions1.png" width="100%"/}}>>attach:actions.png]]
126 )))
127
128 (% class="col-xs-12 col-sm-6 col-md-6" %)
129 (((
130 (%class="table"%)
131 |(%width='50%'%){{success}}Pros{{/success}} (((Easy access to entity actions)))|{{error}}Cons{{/error}} Crowding the display. Alternative is to display the actions in content-menu
132 |{{success}}Pros{{/success}} Consistent actions across entities|{{error}}Cons{{/error}}(((Hard to differentiate between entity types in the absence of entity icons:
133
134 - Different actions per type will produce confusion;
135
136 - If the actions are symmetric than they can be displayed somewhere else (content-menu) )))
137 ||(%width='50%'%){{info}}Recommended{{/info}} Don't display entity actions, rely on content-menu (see [[Proposal.MacawSkin]])
138 )))
139 )))
140
141 (% class="row" %)
142 (((
143 (% class="col-xs-12" %)
144 (((
145 === Limit items ===
146
147 {{usecase}}
148 Displaying a limited number of items
149 {{/usecase}}
150
151 ==== Limit by type ====
152 {{usecase}}
153 Limit display to following types: parent wiki, parent space and current page
154 {{/usecase}}
155 )))
156
157 (% class="col-xs-12 col-sm-6 col-md-6" %)
158 (((
159 [[{{image reference="limit_type.png" width="100%"/}}>>attach:current.png]]
160 )))
161
162 (% class="col-xs-12 col-sm-6 col-md-6" %)
163 (((
164 (%class="table"%)
165 |(%width='50%'%){{success}}Pros{{/success}} Similar to current display mode of global-menu|{{error}}Cons{{/error}} Not backwards compatible with parent/child relation
166 |(%width='50%'%){{success}}Pros{{/success}} Compatible with display of entity actions since there is a limited number of entries and the type is displayed|{{error}}Cons{{/error}} Limited navigation because of displaying only 3 entries
167 )))
168
169 (% class="col-xs-12" %)
170 (((
171 ==== Limit by count ====
172 {{usecase}}
173 Limit display for a specified length (currently is 5). Alternatively, use container's width instead of a fix number.
174 {{/usecase}}
175 )))
176
177 (% class="col-xs-12 col-sm-6 col-md-6" %)
178 (((
179 [[{{image reference="limit_count2.png" width="100%"/}}>>attach:current.png]]
180 )))
181
182 (% class="col-xs-12 col-sm-6 col-md-6" %)
183 (((
184 (%class="table"%)
185 |(%width='50%'%){{success}}Pros{{/success}} More inclusive navigation|{{error}}Cons{{/error}} Hard to know which is the more relevant navigation (left part, right part, symmetric) since this depends on the user's structure
186 |{{info}}Recommended{{/info}} Limit the displayed items depending on the breadcrumbs container's width|
187 )))
188
189 )))
190
191 (% class="row" %)
192 (((
193 (% class="col-xs-12" %)
194 (((
195 === Expand ===
196 )))
197
198 (% class="col-xs-12" %)
199 (((
200 ==== Linear expansion ====
201 {{usecase}}
202 When the items are limited, expand structure on user's click/hover interaction
203 {{/usecase}}
204 )))
205
206 (% class="col-xs-12 col-sm-6 col-md-6" %)
207 (((
208 [[{{image reference="linear_collapse.png" width="100%"/}}>>attach:linear_collapse.png]]
209
210
211 [[{{image reference="linear_expand.png" width="100%"/}}>>attach:linear_expand.png]]
212 )))
213
214 (% class="col-xs-12 col-sm-6 col-md-6" %)
215 (((
216 (%class="table"%)
217 |(%width='50%'%){{success}}Pros{{/success}} Familiar breadcrumb interaction |{{error}}Cons{{/error}} (((Container needs to be able to expand horizontally and vertically when items are expanded)))
218 |{{info}}Recommended{{/info}}((()))|((()))
219 )))
220
221 (% class="col-xs-12" %)
222 (((
223 ==== Tree expansion ====
224 {{usecase}}
225 When navigation is limited, use a tree displayer in order to show the whole hierarchy
226 {{/usecase}}
227 )))
228
229 (% class="col-xs-12 col-sm-6 col-md-6" %)
230 (((
231 [[{{image reference="tree_expand.png" width="100%"/}}>>attach:tree_expand.png]]
232 )))
233
234 (% class="col-xs-12 col-sm-6 col-md-6" %)
235 (((
236 (%class="table"%)
237 |(%width='50%'%){{success}}Pros{{/success}} Useful for complex hierarchy structures (5+ items) |{{error}}Cons{{/error}} (((Might be an overkill for simple structures, since the linear display could suffice. Also the tree duplicates the breadcrumb functionality.
238
239 The advantage of using a tree would be if we add additional functionality inside the tree displayer, but this increases complexity.)))
240 ||
241 )))
242 )))
243
244 (% class="row" %)
245 (((
246 (% class="col-xs-12" %)
247 (((
248 === Conclusion ===
249
250 * Combining the global-menu and breadcrumb functionality increases the navigation complexity.
251
252 * (((Currently we have difficulties in understanding the differences between the location hierarchy vs. parent hierarchy.
253 When we will combine them, providing different actions for items depending on the item's type will be very confusing for the user, since different users will use different types of entities (wikis.webhome, spaces.webhome, pages) to achieve the same hierarchy )))
254
255 * The recommendation is to keep separate the navigation (breadcrumb) from entity type actions (menus).
256
257 ==== Usage Examples ====
258
259 [[{{image reference="example_breadcrumb.png" width="100%"/}}>>attach:example_breadcrumb.png]]
260
261 [[{{image reference="example_linear.png" width="100%"/}}>>attach:example_linear.png]]
262
263 [[{{image reference="example_tree.png" width="100%"/}}>>attach:example_tree.png]]
264 )))
265 )))

Get Connected