/
gettingstarted_uxd.html
261 lines (239 loc) · 13.4 KB
/
gettingstarted_uxd.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
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=iso-8859-1'>
<meta name='myds_document_title' Content='Getting Started User Experience Design / MADE'>
<meta name='myds_document_id' Content='38070'>
<title>Getting Started User Experience Design</title>
<meta name='description' content=''>
<meta name='keywords' content='Getting Started User Experience Design'>
<link rel=stylesheet href='site/1210/1210.format-1.1.1.css'>
<link rel="shortcut icon" href='site/1210/favicon.ico'>
<link rel="stylesheet" href="/jscripts/css/prettify.css"/><link rel="stylesheet" href="/jscripts/jqueryui/darkness.css"/><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script><script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js" type="text/javascript"></script><script src="site/1210/1210.home-1.0.10.js" type="text/javascript"></script>
<script src="/jscripts/prettify.js" type="text/javascript"></script>
<link rel="stylesheet" href="site/1210/1210.format.messaging.001.css"><link rel="stylesheet" href="site/1210/1210.invite.css">
</head>
<script language="JavaScript">
var msOnDemandDocumentId = 38070;
var mydigitalstructureDocumentId = 38070;
var msOnDemandContextId = '';
var mydigitalstructureContextId = '';
var msOnDemandSiteId = 1210;
var mydigitalstructureSiteId = 1210;
function cmdPrint_OnClick() {window.print();}
function cmdAllSections_OnClick() {window.location.href = 'document_PublicView.asp?select=38070&allsections=True&site=1210';}
function PageSetup2(){}
</script>
<body>
<table myds='LayoutTable1' width='100%' height='100%' border=0 cellpadding=0 cellspacing=0><tr>
<td myds='LayoutTable1.LeftBorder' height='100%' width='' Class='border1 borderLeft' >
</td><td myds='LayoutTable1.MainTable1' valign=TOP width='900' height='100%'>
<table width='900' myds='MainTable1' width='100%' height='100%' border=0 cellpadding=0 cellspacing=0>
<tr><td myds='MainTable1.HeaderTable1' valign=TOP height=0>
<table myds='HeaderTable1' width='100%' height='100%' border=0 cellpadding=0 cellspacing=0>
<tr><td myds='HeaderTable1' valign=TOP height='100%'>
</td></tr>
</table>
</td></tr>
<tr><td valign=TOP height='100%'>
<table myds='MainTable2' width='100%' height='100%' border=0 cellpadding=0 cellspacing=0>
<tr>
<td myds='MainTable1.Main' valign=TOP height='100%'>
<div id="container">
<div id="header"><a href="http://ibCom.biz" target="_blank"> </a>
<div id="logo"><a href="http://ibCom.biz" target="_blank"></a><a href="http://ibCom.biz" target="_blank"><img src="site/1210/ibCom_Vertical_Light_17.png" alt="" /></a></div>
<div id="logon"></div>
<div id="nav" style="padding-left: 12px;">
<ul>
<li value="0"><a href="index.html">home</a></li>
<li value="0"><a href="gettingstarted_signup.html">sign up</a></li>
<li value="0"><a href="https://console.mydigitalstructure.com">log on</a></li>
<li value="0"><a href="gettingstarted.html">getting started</a></li>
<li value="0"><a href="documentation.html">documentation</a></li>
<li value="0"><a href="endpoints.html">endpoints</a></li>
<li value="0"><a href="examples.html">examples</a></li>
<li value="0"><a href="developwith.html">blog</a></li>
<li value="0"><a class="last" href="contact.html">contact</a></li>
</ul>
</div>
</div>
<div id="main"><table style="width: 100%;" border="0" cellspacing="0" cellpadding="4">
<tbody>
<tr>
<td style="width: 25px;" valign="top"> </td>
<td>
<h1><strong><span style="color: #888888;">GETTING STARTED</span><br /><strong><span style="font-size: 24pt;">USER EXPERIENCE DESIGN (UXD) / MADE</span><br /></strong></strong></h1>
<p>To get the maximum value out of an information application, the user experience is key - we call our approach to this the "<a href="http://mydsondemand.com/site/1210/ibCom_mydigitalstructure_Human_Engagement_1.4.pdf" target="_blank">human engagement framework</a>" <span style="color: #888888;">(pdf) </span>- <span style="color: #000000;">of which the mydigitalsructure platform is a part</span>.<br /><br />The associated application framework is based on the principles of:</p>
<ul>
<li value="0">layering <span style="color: #808080;">(with appropriate specialists working on layer)</span></li>
<li value="0">model-view-controller <span style="color: #808080;">(MVC)<br /></span></li>
<li value="0">manage-analyse-design-execute <span style="color: #808080;">(MADE)</span></li>
</ul>
<p><a href="http://en.wikipedia.org/wiki/User_experience" target="_blank">More about UX</a> | <a href="http://en.wikipedia.org/wiki/User_experience_design" target="_blank">UXD</a> | <a href="gettingstarted_ffp.html">Fit for purpose (FFP)</a></p>
</td>
<td style="width: 40px;" valign="top">
<p> </p>
</td>
<td valign="top">
<table style="background-color: #f5f5f5; width: 180px;" border="0" cellpadding="6">
<tbody>
<tr>
<td valign="top"><span style="font-size: 12pt;"><strong>model-view-controller</strong></span>
<p><span style="font-family: arial,helvetica,sans-serif; font-size: 10pt;">Model–view–controller (MVC) is a software architecture, currently considered an architectural pattern used in software engineering.<br /><br /></span><span style="font-family: arial,helvetica,sans-serif; font-size: 10pt;"><a href="http://en.wikipedia.org/wiki/Model%E2%80%93view%E2%80%93controller" target="_blank">Some reading</a>...</span></p>
</td>
</tr>
</tbody>
</table>
</td>
<td style="width: 5px;" valign="top">
<p><strong> </strong></p>
</td>
</tr>
<tr>
<td style="width: 25px;" valign="top"> </td>
<td><strong><span style="font-size: 12pt;"><span style="font-size: 14pt;"><br />LAYERS</span><br /><br /></span></strong>As used in many construction disiplines, layers are very important to allow teams of people to work together with maximum efficiency.
<p>eg building a house, which brings together the layers of:</p>
<ul>
<li value="0">Design <span style="color: #999999;">(select existing or bespoke)</span></li>
<li value="0">Approval</li>
<li value="0">Foundation</li>
<li value="0">House Frame</li>
<li value="0">Roofing</li>
<li value="0"><span style="color: #999999;">etc</span></li>
</ul>
<p><span style="color: #333300;"><strong><br />APPLICATION FRAMEWORK<br /><br /></strong></span><strong><img title="hef_layers.PNG" src="site/1210/hef_layers.PNG" alt="hef_layers.PNG" width="538" height="429" /><br /></strong></p>
</td>
<td style="width: 40px;" valign="top">
<p> </p>
</td>
<td valign="top">
<table style="background-color: #f5f5f5; width: 180px; margin-bottom: 15px;" border="0" cellpadding="6">
<tbody>
<tr>
<td valign="top"><span style="font-size: 12pt;"><strong>Service Oriented Architecture</strong></span>
<p><span style="font-family: arial,helvetica,sans-serif; font-size: 10pt;">Service-Oriented Architecture (SOA) is a set of principles and methodologies for designing and developing software in the form of interoperable services.<br /><br /><a href="http://en.wikipedia.org/wiki/Service-oriented_architecture" target="_blank">Some reading</a>...</span></p>
</td>
</tr>
</tbody>
</table>
<table style="background-color: #f5f5f5; width: 180px;" border="0" cellpadding="6">
<tbody>
<tr>
<td valign="top"><span style="font-size: 12pt;"><strong>Simplexity</strong></span>
<p><span style="font-family: arial,helvetica,sans-serif; font-size: 10pt;">Why Simple Things Become Complex (and How Complex Things Can Be Made Simple)<br /><br /><a href="http://en.wikipedia.org/wiki/Simplexity" target="_blank">Some reading...</a><br /><br /><img src="site/1210/simplexity.PNG" alt="simplexity" width="125" height="175" /><br /></span><span style="font-family: arial,helvetica,sans-serif; font-size: 10pt;"><a href="http://www.amazon.com/Simplexity-Simple-Things-Become-Complex/dp/1401303013" target="_blank">See on amazon.com</a>...</span></p>
</td>
</tr>
</tbody>
</table>
</td>
<td valign="top">
<p><span style="font-size: 12pt;"><strong> </strong></span></p>
</td>
<td style="width: 25px;" valign="top">
<p><strong> </strong></p>
</td>
</tr>
<tr>
<td style="width: 25px;" valign="top"> </td>
<td>
<p><strong><strong><span style="font-size: 14pt;">MADE PRINCIPLES</span><br /><br /></strong></strong>If the <em>MADE</em> principles are followed and the <em>MAD</em> component is conducted successfully, then the <em>E</em> (execute) component should just pull together, leveraging the mydigitalspace onDemand model and other "view-controller" resources (eg jQuery) - the overall effect is of a well synchronised machine and human experience, minimising training and human change energy.<br /><strong><strong><br /></strong></strong></p>
<table style="width: 100%;" border="0" cellspacing="0" cellpadding="6">
<tbody>
<tr>
<td style="width: 100px;" valign="top"><strong>M<span style="color: #808080;">anage</span></strong></td>
<td>Manage expecations and the process, including testing to ensure the execution matches the design.<br /><a href="security/downloadAttachment-select=3720368.asp">Sample testing plan</a> <span style="color: #888888;">(docx)</span></td>
</tr>
<tr>
<td><strong><span style="color: #000000;">A</span><span style="color: #808080;">nalyse</span></strong></td>
<td>Analyse and document the customer and user needs.</td>
</tr>
<tr>
<td><strong>D<span style="color: #808080;">esign</span></strong></td>
<td>System and user experience design, including selection of best human interface and model interfaces (eg endpoints & methods). <a href="site/1210/ibCom_mydigitalstructure_design_space_plan_1.0.png" target="_blank">Example of a mapping diagram as used in Exchange integration</a>.<span style="color: #888888;"> (<a href="site/1210/ibCom_mydigitalstructure_design_space_plan_1.0.psd" target="_blank"><span style="color: #888888;">psd version</span></a>)</span></td>
</tr>
<tr>
<td><strong>E<span style="color: #808080;">xecute</span></strong></td>
<td>Build the application - modify the model structure as required and create the view and controller logic (eg if web-based update js/jQuery scripts)</td>
</tr>
</tbody>
</table>
</td>
<td style="width: 40px;" valign="top">
<p> </p>
</td>
<td valign="top">
<table style="background-color: #f5f5f5; width: 180px; margin-bottom: 15px;" border="0" cellpadding="6">
<tbody>
<tr>
<td valign="top"><span style="font-size: 12pt;"><strong>User Experience </strong></span>
<p><span style="font-family: arial,helvetica,sans-serif; font-size: 10pt;">"User experience" encompasses all aspects of the end-user's interaction with the company, its services, and its products. The first requirement for an exemplary user experience is to meet the exact needs of the customer, without fuss or bother. <br /><br /><a href="http://www.nngroup.com/about/userexperience.html" target="_blank">Keep reading...</a></span></p>
</td>
</tr>
</tbody>
</table>
</td>
<td valign="top">
<p><span style="font-size: 12pt;"><strong> </strong></span></p>
</td>
<td style="width: 25px;" valign="top">
<p><strong> </strong></p>
</td>
</tr>
<tr>
<td style="width: 25px;" valign="top"> </td>
<td>
<p> </p>
<hr /><a href="gettingstarted.html"> <br />Getting started with mydigitalstructure</a>
<p> </p>
</td>
<td style="width: 40px;" valign="top">
<p> </p>
</td>
<td valign="top"> </td>
<td valign="top">
<p><span style="font-size: 12pt;"><strong> </strong></span></p>
</td>
<td valign="top">
<p><span style="font-size: 12pt;"><strong> </strong></span></p>
</td>
</tr>
</tbody>
</table>
<script type="text/javascript">// <![CDATA[
var uvOptions = {};
(function() {
var uv = document.createElement('script'); uv.type = 'text/javascript'; uv.async = true;
uv.src = ('https:' == document.location.protocol ? 'https://' : 'http://') + 'widget.uservoice.com/4v2ZZ7p3IwSGdDK0VzJjNw.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(uv, s);
})();
// ]]></script>
<div style="width: 100%; text-align: right; padding-right: 15px; padding-top: 20px;"><a target="_blank" href="http://community.ibcom.biz"><img src="site/1210/ibCom_help.png" alt="Help!" /></a> <a class="twitter-share-button" href="https://twitter.com/share">Tweet</a>
<script type="text/javascript">// <![CDATA[
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");
// ]]></script>
</div>
</div>
<div id="footer"></div>
</div></td myds='MainTable1.Main'></tr>
</table>
</td></tr>
</table myds='MainTable1'>
</td myds='LayoutTable1.MainTable1' >
<td myds='LayoutTable1.RightBorder' height='100%' width='' Class='border2 borderRight' >
</td myds='LayoutTable1.MainTable1/LayoutTable1.RightBorder'>
</tr>
</table myds='LayoutTable1'>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-27776845-1']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
</body>
</html>