-
Notifications
You must be signed in to change notification settings - Fork 0
/
quick-reference.html
282 lines (282 loc) · 22.4 KB
/
quick-reference.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
<!DOCTYPE html><!-- This site was created in Webflow. https://webflow.com --><!-- Last Published: Sun Jun 23 2024 21:23:09 GMT+0000 (Coordinated Universal Time) -->
<html data-wf-page="5a8dc9e453abe60001297b48" data-wf-site="55ae8f3911b36a52616db49c">
<head>
<meta charset="utf-8">
<title>UX Map - Quick reference</title>
<meta content="Guide to the UX Map visual language for user interactions." name="description">
<meta content="UX Map - Quick reference" property="og:title">
<meta content="Guide to the UX Map visual language for user interactions." property="og:description">
<meta content="https://daks2k3a4ib2z.cloudfront.net/55ae8f3911b36a52616db49c/55ea21cdc173b7605503ac06_UX%20Map%20OGimage.jpg" property="og:image">
<meta content="UX Map - Quick reference" property="twitter:title">
<meta content="Guide to the UX Map visual language for user interactions." property="twitter:description">
<meta content="https://daks2k3a4ib2z.cloudfront.net/55ae8f3911b36a52616db49c/55ea21cdc173b7605503ac06_UX%20Map%20OGimage.jpg" property="twitter:image">
<meta property="og:type" content="website">
<meta content="summary_large_image" name="twitter:card">
<meta content="width=device-width, initial-scale=1" name="viewport">
<meta content="3UubgzYXhPCM7GIejqUdjPXw9TsvfeI7-_oUrii4fDg" name="google-site-verification">
<meta content="Webflow" name="generator">
<link href="css/normalize.css" rel="stylesheet" type="text/css">
<link href="css/webflow.css" rel="stylesheet" type="text/css">
<link href="css/ux-map.webflow.css" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com" rel="preconnect">
<link href="https://fonts.gstatic.com" rel="preconnect" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js" type="text/javascript"></script>
<script type="text/javascript">WebFont.load({ google: { families: ["Lato:100,100italic,300,300italic,400,400italic,700,700italic,900,900italic","Source Sans Pro:regular,700","Signika:regular,600,700","Source Sans Pro:regular,600,700,900"] }});</script>
<script type="text/javascript">!function(o,c){var n=c.documentElement,t=" w-mod-";n.className+=t+"js",("ontouchstart"in o||o.DocumentTouch&&c instanceof DocumentTouch)&&(n.className+=t+"touch")}(window,document);</script>
<link href="images/favicon.png" rel="shortcut icon" type="image/x-icon">
<link href="images/webclip.png" rel="apple-touch-icon">
<!-- open graph + twitter card metatags -->
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:image" content="https://daks2k3a4ib2z.cloudfront.net/55ae8f3911b36a52616db49c/55ea21cdc173b7605503ac06_UX%20Map%20OGimage.jpg">
</head>
<body>
<div class="hero-section">
<div class="div-1200-subpage">
<h1 class="header-legal">Quick reference</h1>
<p class="paragraph-standard">This page shows examples of how to apply the UX Map visual language to map out the content and interactions of your digital products. The UX Map syntax is not rigid and you can adapt it to your specific goals. You can also check the <a href="https://ixkti9.axshare.com/#p=ux_map" class="inline-link">sample project</a> on AxShare to see a concrete example, applied to a hypothetical website prototype.</p>
<h1 class="title-legal">Content/Widget</h1>
<p class="paragraph-standard">Any content, widget, portion of the UI that is convenient to represent as a standalone entity. It could sometimes be a web page or a mobile screen (as in a conventional sitemap), or you might want to break these down into components, each represented by a separate block. There's no rigid definition, just use to your convenience.</p>
<div class="reference-images-wrapper">
<div class="image-block">
<div class="image-block-counter">a)</div><img src="images/Content-1.png" alt="">
</div>
<div class="image-block">
<div class="image-block-counter">b)</div><img src="images/Content-2.png" alt="">
</div>
<div class="image-block">
<div class="image-block-counter">c)</div><img src="images/Content-3.png" alt="">
</div>
<div class="image-block">
<div class="image-block-counter">d)</div><img src="images/Content-4.png" alt="">
</div>
</div>
<h1 class="title-legal">Content / Widget (link)</h1>
<p class="paragraph-standard">As above, but to be used when you want the widget to work as a link to a specified target on the UX Map (or anywhere in the prototype). In example b) below, taken from the demo file, the content of the inlay error message is available on another page in the prototype.</p>
<div class="reference-images-wrapper">
<div class="image-block">
<div class="image-block-counter">a)</div><img src="images/Content-link.png" alt="">
</div>
<div class="image-block">
<div class="image-block-counter">b)</div><img src="images/Content-link-2.png" alt="">
</div>
</div>
<h1 class="title-legal">Widget wrapper</h1>
<p class="paragraph-standard">Use this to embed several UX map widgets together, whenever you need to break down a portion of the UI into the individual components, but you still want to group them together as a whole. You can use a wrapper to identify a page, a portion of a page, a navigation menu, and more.</p>
<div class="reference-images-wrapper">
<div class="image-block">
<div class="image-block-counter">a)</div><img src="images/Widget-wrapper-1.png" alt="">
</div>
<div class="image-block">
<div class="image-block-counter">b)</div><img src="images/Widget-wrapper-2.png" alt="">
</div>
<div class="image-block">
<div class="image-block-counter">c)</div><img src="images/Widget-wrapper-3.png" alt="">
</div>
<div class="image-block">
<div class="image-block-counter">d)</div><img src="images/Widget-wrapper-4.png" alt="">
</div>
</div>
<h1 class="title-legal">Section wrapper</h1>
<p class="paragraph-standard">Use it to identify a group of widgets, contents or interactions that can be semantically grouped together as a whole.</p>
<div class="reference-images-wrapper"><img src="images/Section-wrapper.png" sizes="(max-width: 479px) 100vw, (max-width: 702px) 87vw, 611px" srcset="images/Section-wrapper-p-500.png 500w, images/Section-wrapper.png 611w" alt="" class="image-block"></div>
<h1 class="title-legal">Section header / Vertical header</h1>
<p class="paragraph-standard">These widgets can help you group portions of the UX Map together, similarly to the section header, but at a higher level (or whatever is your preference).</p>
<div class="reference-images-wrapper">
<div class="image-block">
<div class="image-block-counter">a) Section header</div><img src="images/Section-header.png" sizes="(max-width: 771px) 100vw, 771px" srcset="images/Section-header-p-500.png 500w, images/Section-header.png 771w" alt="" class="image-2">
</div>
<div class="image-block">
<div class="image-block-counter">b) Vertical header</div><img src="images/Vertical-header.png" alt="">
</div>
</div>
<h1 class="title-legal">Background event</h1>
<p class="paragraph-standard">A component of the interaction whose effect is not immediately visible to the user, i.e. an email sent, a database update, a value or content saved temporarily in the browser cache. It can also be used in a more abstract way, to define a process that takes place behind the scenes.</p>
<div class="reference-images-wrapper">
<div class="image-block">
<div class="image-block-counter">a)</div><img src="images/Background-process.png" alt="">
</div>
<div class="image-block">
<div class="image-block-counter">b)</div><img src="images/Background-process-2.png" alt="">
</div>
</div>
<h1 class="title-legal">Condition</h1>
<p class="paragraph-standard">Use it whenever two different outcomes are possible, and they can be expressed as a "yes/no" condition. Conditions can be use to describe a real computational process, or in a more abstract manner, as a point in the flow where conditional logic is a convenient and practical way to differentiate between states/events (e.g. "User is logged in").</p>
<div class="reference-images-wrapper">
<div class="image-block"><img src="images/Condition.png" alt=""></div>
</div>
<h1 class="title-legal">Conditional list</h1>
<p class="paragraph-standard">A condition with multiple outcomes. The most common examples are dropdown menus or navigation menus, but similarly to the "yes/no" condition, it can also be used in a more abstract way.</p>
<div class="reference-images-wrapper">
<div class="image-block"><img src="images/Conditional-list.png" alt=""></div>
</div>
<h1 class="title-legal">Action or event</h1>
<p class="paragraph-standard">An interaction or process that produces an outcome, and is conveniently identified as a standalone entity. It can be a simple user action (such as "User logs in"), or a more complex sequence of events/actions that can be identified as a trigger or condition for the interactions that follow.</p>
<div class="reference-images-wrapper">
<div class="image-block">
<div class="image-block-counter">a)</div><img src="images/Event_Action.png" alt="">
</div>
<div class="image-block">
<div class="image-block-counter">b)</div><img src="images/Event_Action-2.png" alt="">
</div>
</div>
<h1 class="title-legal">Process / External</h1>
<p class="paragraph-standard">A sequence of interactions or processes that is conveniently identified as a standalone entity. Use it when you want to include an interaction flow in a generic manner, without entering into the details, i.e. a checkout process. It can also represent a sequence of interactions that are out of the scope of the UX map (an external site for example), but still has to be included as part of the flow.</p>
<div class="reference-images-wrapper">
<div class="image-block">
<div class="image-block-counter">a)</div><img src="images/External.png" alt="">
</div>
<div class="image-block">
<div class="image-block-counter">b)</div><img src="images/External-2.png" alt="">
</div>
</div>
<h1 class="title-legal">Primary / secondary button</h1>
<p class="paragraph-standard">Use it to identify buttons or calls to action depending on their importance / visual weight.</p>
<div class="reference-images-wrapper">
<div class="image-block">
<div class="image-block-counter">a) Primary</div><img src="images/Buttons-primary.png" alt="">
</div>
<div class="image-block">
<div class="image-block-counter">b) Secondary</div><img src="images/Buttons-secondary.png" alt="">
</div>
<div class="image-block">
<div class="image-block-counter">c) Mixed</div><img src="images/Buttons-mixed.png" alt="">
</div>
</div>
<h1 class="title-legal">Event trigger</h1>
<p class="paragraph-standard">Any interaction trigger other than a button or link. Edit the text to describe what the trigger is. You can also use the bespoke event triggers, with icons that help you identify gestures, mouse and keyboard interactions, as well as animations/state changes. Icons alone can be self explanatory enough, but sometimes it's useful to add a description of what the event trigger is.</p>
<div class="reference-images-wrapper">
<div class="image-block">
<div class="image-block-counter">a) Descriptive text</div><img src="images/Event-trigger.png" alt="">
</div>
<div class="image-block">
<div class="image-block-counter">b) Text + icon</div><img src="images/Event-trigge-2.png" alt="">
</div>
<div class="image-block">
<div class="image-block-counter">c) Icon only</div><img src="images/Event-trigger-3.png" sizes="(max-width: 479px) 100vw, (max-width: 734px) 81vw, 595px" srcset="images/Event-trigger-3-p-500.png 500w, images/Event-trigger-3.png 595w" alt="">
</div>
<div class="image-block">
<div class="image-block-counter">d) Bespoke event triggers</div><img src="images/Event-trigger-4.png" sizes="(max-width: 479px) 100vw, (max-width: 767px) 638px, (max-width: 778px) 82vw, 638px" srcset="images/Event-trigger-4-p-500.png 500w, images/Event-trigger-4.png 638w" alt="">
</div>
</div>
<h1 class="title-legal">Multi-step process</h1>
<p class="paragraph-standard">Used to indicate a step-by-step process where the user is lead from one step to the other, in a prescribed order.</p>
<div class="reference-images-wrapper">
<div class="image-block"><img src="images/Multi-step-process.png" sizes="(max-width: 479px) 100vw, (max-width: 707px) 80vw, 566px" srcset="images/Multi-step-process-p-500.png 500w, images/Multi-step-process.png 566w" alt=""></div>
</div>
<h1 class="title-legal">Annotation</h1>
<p class="paragraph-standard">Use this to add contextual notes across the UX Map. You can apply annotations to individual widgets or groups of widgets.</p>
<div class="reference-images-wrapper">
<div class="image-block"><img src="images/Annotation.png" alt=""></div>
</div>
<h1 class="title-legal">Reference</h1>
<p class="paragraph-standard">Use this when you need to add an identifier to a portion of the UX Map. There can be multiple use cases, the most common is to use this widget to identify a user story or scenario that is related to that particular section of the UX Map. You can also add a link to an external URL (a JIRA page containing the user story, for example). <br>In the demo project, the visibility of references is toggled on and off by clicking on the annotation icon in the main UX Map switch.</p>
<div class="reference-images-wrapper">
<div class="image-block"><img src="images/Identifier.png" alt=""></div>
</div>
<h1 class="title-legal">WIP</h1>
<p class="paragraph-standard">This widget is meant to stand out, and you can use it to identify portions of the UX Map where there's still work in progress, as a reminder. You can also add a description, if that helps.</p>
<div class="reference-images-wrapper">
<div class="image-block">
<div class="image-block-counter">a)</div><img src="images/WIP-1.png" alt="">
</div>
<div class="image-block">
<div class="image-block-counter">b)</div><img src="images/WIP-2.png" alt="">
</div>
</div>
<h1 class="title-legal">Go to section (anchor link)</h1>
<p class="paragraph-standard">Use the Go to (link) widget to let users navigate to another portion of the UX Map (the target). Details on how to set up the interaction can be found on the reference guide, included in the UX Map package. <br>A non interactive version is also available, if you want to identify a section that is part of the UX Map, without creating a direct link. If the section that you want to reference to is not part of the UX Map, you may want to use the "Process / External" widget, instead.</p>
<div class="reference-images-wrapper">
<div class="image-block">
<div class="image-block-counter">a) Go to (anchor link)</div><img src="images/GoTo-1.png" alt="" class="offset-image">
</div>
<div class="image-block">
<div class="image-block-counter">b) Target</div><img src="images/GoTo-2.png" alt="" class="offset-image">
</div>
<div class="image-block">
<div class="image-block-counter">c) Section identifier</div><img src="images/GoTo-3.png" alt="">
</div>
</div>
<h1 class="title-legal">Hot spot</h1>
<p class="paragraph-standard">This has the same function of the hotspot widget in the default widget library. It is a tool that you can use to add a transparent layer on top of any portion of the UX Map, to add interactions. It can also be used as a target for scrolling interactions.</p>
<h1 class="title-legal">Snapshot</h1>
<p class="paragraph-standard">Same as the snapshot widget in the default widget library.</p>
<div class="reference-images-wrapper">
<div class="image-block"><img src="images/Snapshot.png" alt=""></div>
</div>
<h1 class="title-legal">Horizontal/Vertical line, Curly bracket, Text, Image</h1>
<p class="paragraph-standard">Native widgets belonging to the default widget library, these graphic elements can be handy when building a map of the user experience.</p>
<h1 class="title-legal">Main navigator</h1>
<p class="paragraph-standard">This widget allows to set global anchor links so the viewers of the UX Map to navigate from one portion of the map to the other. Add targets and then associate a "scroll to" interaction to them where the target is the portion of the UX Map that you want to navigate to. See the reference guide in the downloaded package for more details.</p>
<div class="reference-images-wrapper">
<div class="image-block"></div><img src="images/Main-navigator.png" alt="">
</div>
</div>
<div data-collapse="medium" data-animation="default" data-duration="400" data-easing="ease" data-easing2="ease" role="banner" class="header w-nav">
<div class="div-1200-subpage">
<a href="index.html" class="brand-2 w-clearfix w-nav-brand">
<div class="logo-text orange-logo-text">UX</div>
<div class="logo-text white-logo-text">MAP</div><img src="images/Leaf-icon_29.png" alt="" class="logo-icon">
</a>
<nav role="navigation" class="back-to-main-site w-nav-menu">
<a href="index.html" class="navlink w-nav-link">< Back to main site</a>
</nav>
<div class="menu-button-wrapper w-nav-button">
<div class="menu-icon w-icon-nav-menu"></div>
</div>
</div>
</div>
</div>
<footer class="footer-section">
<div class="block-faq">
<div class="author">
<div class="author-block"><img src="images/Luca-Benazzi.jpg" alt="Luca Benazzi - Portrait" width="112" class="footer-image">
<div class="footer-text personal-description">Luca Benazzi has been working since 2003 as a UX consultant for small
startups as well as corporations such as eBay, PayPal, Expedia, Thomson
Reuters, Sky, Philips, to name a few. He's been training companies in Europe and the US on advanced prototyping techniques with Axure. He's been testing out and reviewing every single piece of prototyping software available on the market (more than 100 products at the
time of writing). Back in 2009, he created the most comprehensive
showcase of Axure functionality available on the Internet, <a href="http://humaneinterface.net/article/axure-in-action-v2" class="inline-link">Axure
in action</a>. He's currently working on a brand new UX training program which is also going to include advanced Axure tutorials.</div>
</div>
</div>
<div class="footer-text">© Copyright protected Luca Benazzi 2015 (international copyright law applies)<br><br>Get in touch/send feedback at <a href="mailto:[email protected]?subject=Questions%2Ffeedback" class="inline-link">[email protected]</a>
</div>
<div class="legal-block w-clearfix">
<a href="terms-and-conditions.html" class="footer-link">Terms and conditions</a><img src="images/Separator_8.png" width="10" alt="" class="image-separator">
<a href="privacy-policy.html" class="footer-link">Privacy policy</a>
</div>
<div class="footer-icons">
<div data-ix="share-overlay-disappear" class="share-active-area">
<div class="share-overlay">
<div class="twitter-tweat-button w-widget w-widget-twitter"><iframe title="Twitter Tweet Button" src="https://platform.twitter.com/widgets/tweet_button.html#url=http%3A%2F%2Fwww.ux-map.com&counturl=www.ux-map.com&text=Document%20and%20map%20the%20user%20experience&show_count=false&dnt=true&size=l&width=81&height=28" frameborder="0" scrolling="no" allowtransparency="true" style="border:none;width:81px;height:28px;overflow:hidden"></iframe></div>
<div class="google-share-button w-embed">
<div class="g-plus" data-action="share" data-annotation="none" data-height="24" data-href="http://www.ux-map.com"></div>
</div>
<div class="facebook-share-button w-embed">
<div class="fb-share-button" data-href="http://www.ux-map.com" data-layout="button"></div>
</div>
</div>
</div>
<a href="https://www.facebook.com/pages/Humane-interface/494082670751624" target="_blank" class="link-footer w-inline-block"><img src="images/Facebook_30.png" alt="Facebook icon" class="footer-social-icons"></a>
<a href="https://plus.google.com/u/0/b/113409995841970895132/113409995841970895132/about/p/pub" target="_blank" class="link-footer w-inline-block"><img src="images/GooglePlus_30.png" alt="twitter icon" class="footer-social-icons"></a>
<a href="https://twitter.com/Humaneinterface" target="_blank" class="link-footer w-inline-block"><img src="images/Twitter_30.png" alt="twitter icon" class="footer-social-icons"></a>
<a href="#" data-ix="share-overlay-appears" class="share w-inline-block"><img src="images/Share_30.png" alt="Share icon"></a>
</div>
</div>
</footer>
<script src="https://d3e54v103j8qbb.cloudfront.net/js/jquery-3.5.1.min.dc5e7f18c8.js?site=55ae8f3911b36a52616db49c" type="text/javascript" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script src="js/webflow.js" type="text/javascript"></script>
<!-- facebook social widgets -->
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.4";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<!-- google+ social widgets -->
<script src="https://apis.google.com/js/platform.js" async="" defer=""></script>
</body>
</html>