-
Notifications
You must be signed in to change notification settings - Fork 4
/
Complete Beginner's Guide to Interaction Design - UX Booth UX Booth.html
1414 lines (1218 loc) · 101 KB
/
Complete Beginner's Guide to Interaction Design - UX Booth UX Booth.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
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
<!DOCTYPE html>
<!-- saved from url=(0079)http://www.uxbooth.com/articles/complete-beginners-guide-to-interaction-design/ -->
<html class="wf-refrigeratordeluxe1refrigeratordeluxe2-n4-active wf-abriltext1abriltext2-n4-active wf-abriltext1abriltext2-i4-active wf-refrigeratordeluxe1refrigeratordeluxe2-n7-active wf-abriltext1abriltext2-n7-active wf-abriltext1abriltext2-i7-active wf-active"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="readability-verification" content="hrChHYRh8s8EAWTRYwXyVdeDcEFZgU7yzsEfsSWc">
<title>Complete Beginner's Guide to Interaction Design - UX Booth | UX Booth</title>
<link rel="shortcut icon" href="http://uxbooth.s3.amazonaws.com/favicon.ico">
<script async="" src="./Complete Beginner's Guide to Interaction Design - UX Booth UX Booth_files/analytics.js"></script><script id="twitter-wjs" src="./Complete Beginner's Guide to Interaction Design - UX Booth UX Booth_files/widgets.js"></script><script type="text/javascript" src="./Complete Beginner's Guide to Interaction Design - UX Booth UX Booth_files/jquery.min.js"></script>
<script type="text/javascript" src="./Complete Beginner's Guide to Interaction Design - UX Booth UX Booth_files/xzw2eqk.js"></script>
<style type="text/css">.tk-refrigerator-deluxe{font-family:"refrigerator-deluxe-1","refrigerator-deluxe-2",sans-serif;}.tk-abril-text{font-family:"abril-text-1","abril-text-2",sans-serif;}</style><link rel="stylesheet" href="http://use.typekit.com/k/xzw2eqk-d.css?3bb2a6e53c9684ffdc9a9bf01b5b2a62ec6379d745fd2575909b931ba2232752420ccdc065efca2e7efc8b707ed5b6866655ee590a6fb0b728915a936d85ddea220081de5ec31fc35086a1dc639cc10fece5c3d2499aa72e77571df0b248f09f981777364a7e36e9d8177b9d1ae86ba94bd53f37467c7882a51a4ee579d778a54f70a0e71023c68df89143164cafd0459ff3fdc2486cf8eba54fffb0ed5d6b5366"><script type="text/javascript">try{Typekit.load();}catch(e){}</script>
<!--[if lt IE 9]>
<script src="http://assets.uxbooth.com/themes/uxbooth/javascripts/html5shiv.js"></script>
<![endif]-->
<link href="./Complete Beginner's Guide to Interaction Design - UX Booth UX Booth_files/css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="./Complete Beginner's Guide to Interaction Design - UX Booth UX Booth_files/basic.css" type="text/css" media="all" charset="utf-8">
<link rel="stylesheet" href="./Complete Beginner's Guide to Interaction Design - UX Booth UX Booth_files/header.css" type="text/css" media="all" charset="utf-8">
<link rel="stylesheet" href="./Complete Beginner's Guide to Interaction Design - UX Booth UX Booth_files/footer.css" type="text/css" media="all" charset="utf-8">
<link rel="stylesheet" href="./Complete Beginner's Guide to Interaction Design - UX Booth UX Booth_files/single.css" type="text/css" media="all" charset="utf-8">
<!--[if lt IE 9]>
<link rel="stylesheet" href="http://assets.uxbooth.com/themes/uxbooth/stylesheets/ie.css?v=2013241814" type="text/css" media="all" charset="utf-8">
<![endif]-->
<link rel="stylesheet" href="./Complete Beginner's Guide to Interaction Design - UX Booth UX Booth_files/print.css" type="text/css" media="print" charset="utf-8">
<link rel="alternate" type="application/rss+xml" title="The UX Booth" href="http://feeds.feedburner.com/uxbooth">
<script src="./Complete Beginner's Guide to Interaction Design - UX Booth UX Booth_files/compress.js" type="text/javascript" charset="utf-8"></script>
<script src="./Complete Beginner's Guide to Interaction Design - UX Booth UX Booth_files/jquery.pagination.js" type="text/javascript" charset="utf-8"></script>
<script src="./Complete Beginner's Guide to Interaction Design - UX Booth UX Booth_files/add_pagination.js" type="text/javascript" charset="utf-8"></script>
<!-- BuySellAds PRO Code -->
<script type="text/javascript">
(function(){
var bsa = document.createElement('script');
bsa.type = 'text/javascript';
bsa.async = true;
bsa.src = 'http://cdn.buysellads.com/ac/pro.js';
(document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(bsa);
})();
</script><script type="text/javascript" async="" src="./Complete Beginner's Guide to Interaction Design - UX Booth UX Booth_files/pro.js"></script>
<!-- End BuySellAds PRO Ad Code -->
<script id="_notify_projs" type="text/javascript" src="./Complete Beginner's Guide to Interaction Design - UX Booth UX Booth_files/pro.js"></script><script type="text/javascript" id="_bsaPRO_js" src="./Complete Beginner's Guide to Interaction Design - UX Booth UX Booth_files/CAAIV;C67D62V;C6SE" async="async"></script><script type="text/javascript" id="_bsaPRO_js" src="./Complete Beginner's Guide to Interaction Design - UX Booth UX Booth_files/saved_resource" async="async"></script></head>
<body id="blog" data-twttr-rendered="true">
<div id="ux-booth">
<header id="header" role="masthead">
<div class="site-width">
<h1><a href="http://www.uxbooth.com/" onclick="_gaq.push(['_trackEvent', 'Masthead', 'BigBanner', 'UX Booth Ticket']);">UX Booth</a></h1>
<ul id="global-navigation">
<li><a href="http://www.uxbooth.com/" onclick="_gaq.push(['_trackEvent', 'Masthead', 'Primary Nav', 'Home']);">Home</a></li>
<li class=" current">
<a href="http://www.uxbooth.com/articles/" title="User Experience Articles" onclick="_gaq.push(['_trackEvent', 'Masthead', 'Primary Nav', 'Blog']);">Articles <span class="drop-down-trigger"></span></a>
</li>
<li>
<a href="http://www.uxbooth.com/about/" onclick="_gaq.push(['_trackEvent', 'Masthead', 'Primary Nav', 'About']);">About</a>
</li>
<li><a href="http://www.uxbooth.com/contribute/" onclick="_gaq.push(['_trackEvent', 'Masthead', 'Primary Nav', 'Contribute']);">Contribute</a></li>
</ul>
<form id="search" class="search" method="get" action="http://www.uxbooth.com/search/">
<input type="hidden" name="cx" value="007238140087581621538:llm-htna2fm">
<input type="hidden" name="cof" value="FORID:11">
<input type="hidden" name="ie" value="UTF-8">
<div class="search-input field">
<span class="search-icon icon-search icon"></span>
<label>Search</label>
<input type="text" tabindex="1" id="s" name="q" placeholder="Search UX Booth">
</div>
<div class="search-button field">
<input type="submit" name="sa" value="Search" onclick="_gaq.push(['_trackEvent', 'Masthead', 'Search', 'Search Button']);" class="button">
</div>
<script type="text/javascript" src="./Complete Beginner's Guide to Interaction Design - UX Booth UX Booth_files/brand"></script>
</form>
</div>
</header>
<div id="breadcrumbs">
<div class="site-width">
<ul>
<li class="home"><a href="http://www.uxbooth.com/"><span>Home</span></a></li>
<li><a href="http://www.uxbooth.com/articles/"><span>Articles</span></a></li>
<li><a href="http://www.uxbooth.com/topics/articles/interaction-design/"><span>Interaction design</span></a></li>
<li class="last-child"><span>Complete Beginner’s Guide to Interac…<span class="fade"></span></span></li>
</ul>
</div>
</div>
<div id="content" class="single post articles interaction-design" role="main">
<div class="site-width">
<div class="primary-secondary-content">
<div class="primary-content">
<article class="hentry single" id="post-5905">
<header>
<h1 class="entry-title"><a href="./Complete Beginner's Guide to Interaction Design - UX Booth UX Booth_files/Complete Beginner's Guide to Interaction Design - UX Booth UX Booth.html" rel="bookmark">Complete Beginner’s Guide to Interaction Design</a></h1>
<dl class="entry-meta">
<dt class="author">By</dt>
<dd class="author vcard">
<a class="url fn" href="http://www.uxbooth.com/author/andrewmaier/">
Andrew Maier <img src="./Complete Beginner's Guide to Interaction Design - UX Booth UX Booth_files/fdaba74525c050cffd298cd7b959d0cc" alt="Andrew Maier" width="64" height="64">
</a>
</dd>
<dt class="date">On</dt>
<dd class="date"><abbr class="published" title="9:30 am">December 1st, 2009</abbr></dd>
<dt class="category">Category</dt>
<dd class="category">
<ul class="categories">
<a href="http://www.uxbooth.com/topics/articles/" title="View all posts in Articles" rel="category tag">Articles</a>, <a href="http://www.uxbooth.com/topics/articles/interaction-design/" title="View all posts in Interaction design" rel="category tag">Interaction design</a> </ul>
</dd>
<dt>Social</dt>
<dd>
<div style="margin-bottom: 3px;">
<iframe id="twitter-widget-0" scrolling="no" frameborder="0" allowtransparency="true" src="./Complete Beginner's Guide to Interaction Design - UX Booth UX Booth_files/tweet_button.1400006231.html" class="twitter-share-button twitter-tweet-button twitter-share-button twitter-count-none" title="Twitter Tweet Button" data-twttr-rendered="true" style="width: 56px; height: 20px;"></iframe>
<script>!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>
</dd>
<!-- <dt class="comments">Comments</dt>
<dd class="comments">
<a href="#comments">3</a>
</dd> -->
</dl><!-- dl.entry-meta -->
</header>
<div class="content entry-content">
<p class="important">Web design has followed a long and winding road from it’s rather modest beginnings. Initially, the term “web designer,” described something much more akin to that of a graphic designer: a designer who concerns themselves with the presentation of text and pictures. </p>
<p>Today, however, the majority of websites and applications online are <em>interactive</em>. In turn, modern web designers are called upon to make a number of considerations drastically different than those made by traditional graphic designers. To bridge this gap, we call upon the discipline of interaction design.</p>
<p>This article serves as a good jumping off point for people interested in learning more about Interaction Design. To that point, we’ll briefly cover the history, guiding principles, noteworthy contributors, tools, etc. related to this fascinating discipline. Even if you’re an interaction designer yourself, give the article a read and share your thoughts in the comments below.</p>
<div class="right inline-navigation">
<h4>Table of Contents</h4>
<ul>
<li><a href="http://www.uxbooth.com/articles/complete-beginners-guide-to-interaction-design/#what">What is Interaction Design?</a></li>
<li><a href="http://www.uxbooth.com/articles/complete-beginners-guide-to-interaction-design/#concepts">What concepts drive IxD?</a></li>
<li><a href="http://www.uxbooth.com/articles/complete-beginners-guide-to-interaction-design/#notable">Notable interaction designers</a></li>
<li><a href="http://www.uxbooth.com/articles/complete-beginners-guide-to-interaction-design/#tools">Tools of the Trade</a></li>
<li><a href="http://www.uxbooth.com/articles/complete-beginners-guide-to-interaction-design/#resources">Related Resources</a></li>
<li><a href="http://www.uxbooth.com/articles/complete-beginners-guide-to-interaction-design/#books">IxD Books</a></li>
</ul>
</div>
<h3 id="what">What is Interaction Design? <a href="http://www.uxbooth.com/articles/complete-beginners-guide-to-interaction-design/#" class="top"><span class="hide">Back to top</span></a></h3>
<p>Interaction design got its start only <em>a few decades ago</em> when the first interactive systems made their debut. Novel interfaces presented novel design challenges, and a new breed of designers emerged to accept it. Subsequently, a <a href="http://www.amazon.com/gp/product/0596008031?ie=UTF8&tag=ux-booth-20&linkCode=as2&camp=1789&creative=390957&creativeASIN=0596008031">number</a> <a href="http://www.amazon.com/gp/product/0470018666?ie=UTF8&tag=ux-booth-20&linkCode=as2&camp=1789&creative=390957&creativeASIN=0470018666">of</a> <a href="http://www.amazon.com/gp/product/0321537351?ie=UTF8&tag=ux-booth-20&linkCode=as2&camp=1789&creative=390957&creativeASIN=0321537351">books</a> were released that expressed the facets of this heretofore uncharted territory.</p>
<p>The Interaction Design Association (IxDA) explains:</p>
<blockquote>
<p>Interaction designers strive to create useful and usable products and services. Following the fundamental tenets of user-centered design, the practice of interaction design is grounded in an understanding of real users—their goals, tasks, experiences, needs, and wants. Approaching design from a user-centered perspective, while endeavoring to balance users’ needs with business goals and technological capabilities, interaction designers provide solutions to complex design challenges, and define new and evolving interactive products and services.</p>
</blockquote>
<p><cite><a href="http://www.ixda.org/about_interaction.php">IxDA</a></cite></p>
<p>Interaction design, like user experience design, has evolved to facilitate interactions between people and their environment. Unlike user experience design, which accounts for <em>all user-facing aspects</em> of a software or system, interaction designers are (typically) only concerned with the interaction between users and computers. This niche is referred to as <strong>human-computer interaction</strong>.</p>
<p>Because, in my opinion, the most rapid and exciting growth in the industry is taking place online, this article will focus on interaction design as it pertains to websites and applications.</p>
<h3 id="concepts">What concepts drive IxD?<a href="http://www.uxbooth.com/articles/complete-beginners-guide-to-interaction-design/#" class="top"><span class="hide">Back to top</span></a></h3>
<p>There are a number of underlying concepts that drive the practice of interaction design. Here, I’ll give a brief overview of some of the major ones: <em>goal-driven design, “interface as magic,” usability, affordances, and learnability</em>.</p>
<dl>
<dt>
<h4>Goal-driven design</h4>
</dt>
<dd>
<p>Although conducting user research isn’t strictly required by an interaction designer, the results of a comprehensive user study are essential to eliciting the best design response. In every design discipline, the artist must first acknowledge their constraints, and then devise a solution. In the case of interaction design, users themselves generally form the basis of an interface’s constraints. Users typically have a number of goals in mind when using your website. Perhaps they want to balance their checkbook online. If so, your application should do this one thing quite well. Adding user research to the equation and forming a clear set of user goals, enables the successful marriage of form and function.</p>
</dd>
<dt>
<h4>“Interface as Magic”</h4>
</dt>
<dd>
<p>For the sake of brevity, I’ve condensed a number of Interaction Design best practices into this phase borrowed from Alan Cooper (author of About Face 3: the Essentials of Interaction Design). Alan says that ideally, interfaces wouldn’t exist at all in the mind of the user — they should simply “see” the interface as an extension of the underlying system. To this effect, the best interaction designs <strong>don’t exist</strong>: they don’t take a long time to load/respond; they don’t make users think; and they don’t give user’s cause for grief. As Jason Fried, CEO of 37 Signal’s says: “Less is Less.” Give the user’s just what they need to accomplish their goals and then move along.</p>
</dd>
<dt>
<h4>Usability</h4>
</dt>
<dd>
<p>Usability denotes the ease with which people employ a tool in order to achieve a particular goal. Throughout their practice, interaction designers must concern themselves with the inherent usability of the interfaces they design. Interfaces which make the state of the underlying system easy to understand and use are favored.</p>
</dd>
<dt>
<h4>Affordances</h4>
</dt>
<dd>
<div class="image-container right medium"><img src="./Complete Beginner's Guide to Interaction Design - UX Booth UX Booth_files/scissors.jpg" alt="A pair of scissors"><span class="caption">Scissors serve as a simple example of affordances in action.</span><span class="credit">Photo by <a href="http://www.flickr.com/photos/ivydawned/">Ivy Dawned</a>.</span></div>
<p>Scissors are designed in such a way that someone unfamiliar with them should understand which end is for grasping and which end is for cutting. And why shouldn’t they be? The best (industrial/interaction) designs are those that speak for themselves; in which, as the saying goes, form follows function. In others words, <a href="http://www.uxbooth.com/blog/creating-usable-links-and-buttons/">links should look like links</a>, buttons should look like buttons, search boxes should …you get the idea.</p>
<p>The underlying principle here is one called <em>affordances,</em> which I discussed previously this year in <a href="http://www.uxbooth.com/blog/foundations-of-affordances/">my article on affordances</a>. Affordances represent the <em>action possibilities</em> available between an actor and their environment. Because affordances express a great deal about the underlying functionality behind a web site or service, it’s essential that designers utilize this concept consistently and cohesively throughout their designs. Bill Scott & Theresa Neil list a similar concept (“provide an invitation”) as one of their six interaction design principles. </p>
</dd>
<dt>
<h4>Learnability</h4>
</dt>
<dd>
<p>A great deal of what comprises a usable interface is made up of <em>familiar components</em>. If users are used to submitting a form with a button, they’ll look for a button when that time comes. This is an example of an interface idiom, or pattern. The best interaction designers don’t reinvent the wheel every time a similar design challenge comes. Rather, they call upon a set of patterns. Many online interaction design patterns are documented in <a href="http://developer.yahoo.com/ypatterns/">Yahoo!’s design pattern library</a>.</p>
<p>In sum, if the design problem at hand calls upon a truly unique interface, interaction designers should take great effort in making that interface <strong>learnable</strong>, or, easily learned. This, in and of itself, requires a strong knowledge of current design conventions, affordances, and overall web usability.</p>
</dd>
</dl>
<h3>What does an Interaction Designer do?</h3>
<p>An interaction designer is a key player throughout the entire development process. They will typically perform the following activities as part of a project team:</p>
<h4>Form/inform a design strategy</h4>
<p>Although the boundaries here are fuzzy, one this is certain: an interaction designer will need to know <em>who she is designing for</em> and <em>what their goals are</em>. Typically, this is provided for her by an Information Architect or User Researcher. In turn, an interaction designer will assess the goals and develop a design strategy, either independently or with help from other designers on her team. A design strategy will help team members have a common understanding of what interactions need to take place to facilitate user goals. I wrote up <a href="http://www.uxbooth.com/blog/focusing-interaction-design-with-design-strategy/">a short article outlining how to create a design strategy</a> earlier this year.</p>
<h4>Identify and wireframe key interactions</h4>
<p>After the interaction designer has a good idea of the strategy motivating her design, she can begin to sketch the interfaces that will facilitate the necessary interactions. The devil here lies in the details: some professionals will literally sketch these interactions on a pad/dry-erase board while others will use software application(s) to aid them in the process; some professionals will create these interfaces collaboratively while others will create them alone. It all depends on the interaction designer and their particular workflow.</p>
<h4>Prototype Interactions</h4>
<p>Depending on the project, the next logical step for an interaction designer might involve the creation of prototypes. There are a number of different ways in which a team might prototype an interaction, which I won’t be covering in extensive detail here. Some of these include: xhtml/css prototypes, paper prototypes, and even <a href="http://blog.rhjr.net/2007/08/protocasting-video-as-a-design-deliverable/">protocasting</a>.</p>
<h4>Stay Current</h4>
<p>One of the hardest parts about being a practicing Interaction Designer is the speed of change in the industry. Every day, new designers are taking the medium in a different direction. Consequently, users are expecting these new kinds of interactions to appear on <em>your</em> website. The prudent interaction designer responds to this evolution by constantly exploring the web for new interactions, taking advantage of new technologies (such as CSS3 or HTML5), and pushing the medium forward themselves. </p>
<h3 id="notable">Notable Interaction Designers <a href="http://www.uxbooth.com/articles/complete-beginners-guide-to-interaction-design/#" class="top"><span class="hide">Back to top</span></a></h3>
<div class="person with-picture left">
<h4>Cennydd Bowles</h4>
<p><img src="./Complete Beginner's Guide to Interaction Design - UX Booth UX Booth_files/cennyddbowles.png" class="headshot"></p>
<p>Cennydd Bowles is obsessed with making the web a better place and has several years’ experience of doing just that on e-commerce, government and community sites. As a user experience designer at Clearleft, he thinks, writes and practices information architecture, interaction design and usability like there’s no tomorrow. </p>
<p>Cennydd writes about user experience and interaction design on his blog, <a href="http://www.cennydd.co.uk/">http://www.cennydd.co.uk/</a>.</p>
</div>
<div class="person with-picture left">
<h4>Nathan Curtis</h4>
<p><img src="./Complete Beginner's Guide to Interaction Design - UX Booth UX Booth_files/nathan_curtis.png" class="headshot"></p>
<p>Nathan Curtis is a founder and principal at <a href="http://eightshapes.com/">EightShapes</a>, LLC, a user experience consulting firm based in Washington, DC. Nathan has been practicing varied disciplines within user experience design since 1996, and areas of interest include information architecture, interaction design, usability research, and front-end development. He started EightShapes in 2006 and has helped improve the user experience for clients in Washington DC and across the United States.</p>
<p>Checkout Nathan’s company, <a href="http://eightshapes.com/">EightShapes</a>, or <a href="http://www.nathancurtis.com/">his personal/professional blog</a>.</p>
</div>
<div class="person with-picture left">
<h4>Tim Van Damme</h4>
<p><img src="./Complete Beginner's Guide to Interaction Design - UX Booth UX Booth_files/timvandamme.png" class="headshot"></p>
<p>Tim is a 24 year old interface designer, based and raised in Belgium. When he’s not busy designing interfaces at his company <a href="http://madebyelephant.com/">Made by Elephant</a>, he can be found traveling (is it just me or is that an oxymoron?) or going to conferences.</p>
<p>Tim’s personal blog is available at <a href="http://maxvoltar.com/">MaxVoltar.com</a>.
</p></div>
<div class="person with-picture left">
<h4>Uday Gajendar</h4>
<p><img src="./Complete Beginner's Guide to Interaction Design - UX Booth UX Booth_files/uday.png" class="headshot"></p>
<p>Uday Gajendar is a UI designer with almost a decade of experience in Silicon Valley. His work has spanned enterprise software, consumer websites, and VOIP apps at Oracle, Adobe, Cisco, Netflix, as well as agencies like frog and Involution. Having earned degrees in industrial design (BFA from University of Michigan) and interaction design (MDes. from Carnegie Mellon), Uday advances the field with talks & articles about aesthetics, leadership, and strategy. He has also taught UI design at San Jose State University.</p>
<p>Uday frequently conjectures on the more idiosyncratic aspects of interaction design on his blog <a href="http://www.ghostinthepixel.com/">Ghost in the Pixel</a></p>
</div>
<div class="person with-picture left">
<h4>Theresa Neil</h4>
<p><img src="./Complete Beginner's Guide to Interaction Design - UX Booth UX Booth_files/theresa_neil.png" class="headshot"></p>
<p>Theresa Neil is a User Experience consultant located in Austin, Texas. She has led the design for more than 80 live web, desktop and mobile applications since 2001. Her recent clients include Zenoss, Innography, PayPal, Pervasive, and OneSpot.</p>
<p><a href="http://theresaneil.wordpress.com/">Theresa’s blog</a> is occasionally updated with notes of interest to Interaction Designers</p>
</div>
<div class="person with-picture left">
<h4>Bill Scott</h4>
<p><img src="./Complete Beginner's Guide to Interaction Design - UX Booth UX Booth_files/bill_scott.png" class="headshot"></p>
<p>Bill Scott is the director of UI Engineering at Netflix in Los Gatos, CA, where he plies his interface engineering and design skills. Scott is the former Yahoo! Ajax evangelist and pattern curator for the Yahoo! Design Pattern Library.</p>
<p>He has a long and glamorous history in the IT world, due mostly to his unique understanding of both the technical and creative aspects of designing usable products.</p>
<p>Checkout Bill Scott’s blog, <a href="http://looksgoodworkswell.blogspot.com/">Looks Good Works Well</a>.</p>
</div>
<h4>On Twitter</h4>
<div class="tweeters">
<div class="tweeter"><a href="http://twitter.com/Cennydd"><img src="./Complete Beginner's Guide to Interaction Design - UX Booth UX Booth_files/avatar-374x374_bigger.jpg"></a><br>
<h6>@Cennydd</h6>
<p><a href="http://twitter.com/Cennydd" class="follow">Follow</a></p></div>
<div class="tweeter"><a href="http://twitter.com/nathanacurtis"><img src="./Complete Beginner's Guide to Interaction Design - UX Booth UX Booth_files/nathancurtis.160x160photo_bigger.jpg"></a><br>
<h6>@nathanacurtis</h6>
<p><a href="http://twitter.com/nathanacurtis" class="follow">Follow</a></p></div>
<div class="tweeter"><a href="http://twitter.com/maxvoltar"><img src="./Complete Beginner's Guide to Interaction Design - UX Booth UX Booth_files/maskedboratfedora-bbd_bigger.png"></a><br>
<h6>@maxvoltar</h6>
<p><a href="http://twitter.com/maxvoltar" class="follow">Follow</a></p></div>
<div class="tweeter"><a href="http://twitter.com/theresaneil"><img src="./Complete Beginner's Guide to Interaction Design - UX Booth UX Booth_files/theresaneil_bigger.png"></a><br>
<h6>@theresaneil</h6>
<p><a href="http://twitter.com/theresaneil" class="follow">Follow</a>
</p></div>
<div class="tweeter"><a href="http://twitter.com/billwscott"><img src="./Complete Beginner's Guide to Interaction Design - UX Booth UX Booth_files/me-aug-2009_bigger.jpg"></a><br>
<h6>@billwscott</h6>
<p><a href="http://twitter.com/billwscott" class="follow">Follow</a></p></div>
</div>
<h3 id="tools">Tools of the Trade<a href="http://www.uxbooth.com/articles/complete-beginners-guide-to-interaction-design/#" class="top"><span class="hide">Back to top</span></a></h3>
<p>Interaction designers use a number of different tools to get their jobs done. Whether they’re sketching an interaction on a napkin or presenting a prototype to a client, their goal is the same: communication via conversation. Above all else, interaction designers need to communicate well. The list below is a small sampling of just a few of tools used to facilitate conversations. Keep in mind that the web interfaces that are eventually created, are typically done so with user-facing (front-end) technologies such as CSS/HTML, Flash, etc.</p>
<div class="roundup-list">
<div class="roundup-item">
<div class="right x-small image-container">
<img src="./Complete Beginner's Guide to Interaction Design - UX Booth UX Booth_files/mockups_fpa.jpg">
</div>
<h4>Balsamiq Mockups</h4>
<p>Balsamiq Mockups is a great little Adobe Air app that makes wireframing an interaction easy. The team at Balsamiq has done a superb job, providing users with a number of interaction design patterns that are ubiquitous to contemporary application design. In addition, users quickly share wireframes with clients, create links between wireframes, and more.</p>
<p><a href="http://www.balsamiq.com/products/mockups">Learn more about Balsamiq Mockups</a>.</p>
<p></p></div>
<div class="roundup-item">
<div class="right x-small image-container">
<img src="./Complete Beginner's Guide to Interaction Design - UX Booth UX Booth_files/omnigraffle.png">
</div>
<h4>OmniGraffle</h4>
<p>Omnigraffle is the premier diagramming software for Mac OS X. Interaction Designers can take advantage of the rather bland aesthetic created by diagramming software such as OmniGraffle to <em>focus their team on the interactions</em> behind their designs rather than on the design itself. OmniGraffle sports a number of nifty features, including: click-to-reveal functionality (for example, you can show how a modal box works), sketching/bezier curves, etc.</p>
<p><a href="http://www.omnigroup.com/applications/OmniGraffle/">Learn more about OmniGraffle</a>.</p>
<p></p></div>
<div class="roundup-item">
<div class="right x-small image-container">
<img src="./Complete Beginner's Guide to Interaction Design - UX Booth UX Booth_files/adobe-indesign-cs4.png">
</div>
<h4>Adobe InDesign</h4>
<p>Although InDesign as initially designed as a “page layout” application, used primarily by graphic designers, it’s utility to interaction designers shouldn’t be overlooked; especially with the introduction of the EightShapes Unify framework (see below). InDesign might be the ideal tool to introduce into a creative workflow simply because it’s a part of the Adobe creative Suite, meaning that other creatives on your team will face a more shallow learning curve.</p>
<p><a href="http://www.adobe.com/products/indesign/">Learn more about InDesign</a>.</p>
<p></p></div>
<div class="roundup-item">
<div class="right x-small image-container">
<img src="./Complete Beginner's Guide to Interaction Design - UX Booth UX Booth_files/moleskine.png">
</div>
<h4>Moleskine</h4>
<p>Last but certainly not least, let us not forget the ever faithful Moleskine notebook. Sketching interactions with pencil and paper adds a human element to the wireframing process that other software tools simply can’t match. In addition, everyone can play along. Even the worst designers can sketch “boxes and arrows.” Be sure to <a href="http://www.amazon.com/gp/product/8883701135?ie=UTF8&tag=vertcore-20&linkCode=as2&camp=1789&creative=390957&creativeASIN=8883701135">invest in a few of these notebooks</a> and then bring them along to your first client meetings; especially if a dry-erase board isn’t handy.</p>
<p><a href="http://www.moleskine.com/">Learn more about Moleskines</a>.</p>
<p></p></div>
</div>
<h3 id="resources">Related Resources</h3>
<div class="roundup-list">
<div class="roundup-item">
<h4><a href="http://mockupstogo.net/">Mockups To Go</a></h4>
<p>Mockups To Go is a “user-contributed collection of ready-to-use UI components and design patterns built using Balsamiq Mockups”. If you find yourself recreating something that already exists, you should go checkout their design library; they’re likely to have a template that closely approximates your design. </p>
<div class="xx-large image-container">
<img src="./Complete Beginner's Guide to Interaction Design - UX Booth UX Booth_files/mockups_to_go.png"><p></p>
<p class="caption">A Google Wave mockup on Mockups to Go</p>
<p></p></div>
<p></p></div>
<div class="roundup-item">
<h4><a href="http://konigi.com/tools/omnigraffle-wireframe-stencils">OmniGraffle Wireframe Stencils</a></h4>
<p>Konigi has offered up (for free!) a set of shapes for making wireframes (low-fidelity web page schematics) in OmniGraffle version 5.x. It consists of most of the basic elements you’ll need to create user interface specifications.</p>
<div class="xx-large image-container">
<img src="./Complete Beginner's Guide to Interaction Design - UX Booth UX Booth_files/omnigraffle_stencils.png"><p></p>
<p class="caption">Stencils lend affordances to OmniGraffle diagrams</p>
<p></p></div>
<p></p></div>
<div class="roundup-item">
<h4><a href="http://unify.eightshapes.com/">EightShapes Unify</a></h4>
<p>Here’s the elevator pitch: <q>EightShapes Unify is a collection of templates, libraries, and other assets that enable user experience designers to create more consistent, effective deliverables faster. The system utilizes the Adobe Creative Suite of products; primarily, Adobe InDesign is the key authoring tool.</q></p>
<div class="xx-large image-container">
<img src="./Complete Beginner's Guide to Interaction Design - UX Booth UX Booth_files/eightshapes_unify.png"><p></p>
<p class="caption">Unify offers consistency to your UX deliverables.</p>
<p></p></div>
<p>In sum, EightShapes attempts to standardize the Interaction (and User Experience) Designer’s workflow. I’ve yet to take the system for a spin, but it’s well-documented and comes with video tutorials to get yourself started.</p>
<p></p></div>
<div class="roundup-item">
<h4><a href="http://www.uxbooth.com/blog/tools-for-sketching-user-experiences/">Markers, Paper Templates, etc.</a></h4>
<p>In <a href="http://www.uxbooth.com/blog/tools-for-sketching-user-experiences/">Jason Robb’s post on sketching user experiences</a>, Jason details a number of tools one can collect to sketch interactions. Checkout his article to get started.</p>
<div class="xx-large image-container">
<img src="./Complete Beginner's Guide to Interaction Design - UX Booth UX Booth_files/markers.png"><p></p>
<p class="caption">Linking your sketches together gets everyone on your team involved.</p>
<p></p></div>
<p></p></div>
<div class="roundup-item">
<h4><a href="http://ixedit.com/">IxEdit</a></h4>
<p>Interaction Designers creating a rudimentary xhtml/css/javascript prototype of an interaction might speed up their process by using this in-browser tool for visualizing interactions. IxEdit is a self-described “JavaScript-based interaction design tool for the web. With IxEdit, designers can practice DOM-scripting without coding to change, add, move, or transform elements dynamically on [their] web pages.”</p>
<div class="xx-large image-container">
<img src="./Complete Beginner's Guide to Interaction Design - UX Booth UX Booth_files/ixedit.png"><p></p>
<p class="caption">IxEdit allows for in-page prototyping</p>
<p></p></div>
<p></p></div>
</div>
<h3 id="associations">Associations <a href="http://www.uxbooth.com/articles/complete-beginners-guide-to-interaction-design/#" class="top"><span class="hide">Back to top</span></a></h3>
<h4>IXDA</h4>
<p>In their own words:</p>
<p><q>the IxDA network provides an online forum for the discussion of interaction design issues as well as other platforms for people who are passionate about interaction design to gather and advance the discipline.</q><cite>http://www.ixda.org/</cite></p>
<p>More information available at: <a href="http://www.ixda.org/">http://www.ixda.org/</a>.</p>
<h4>AIGA</h4>
<p>Although the AIGA (American Institute of Graphic Arts) was initially founded for graphic designers, the organization itself realizes that graphic designers are more frequently designing compositions for new media, in which interaction design plays a major part. Local AIGA chapters are available throughout the United States. In chapters that I am familiar with have hosted events as Photoshop Layer Tennis, or art exhibitions, etc. It’s a great idea to go out and meet </p>
<p>More information available at: <a href="http://www.aiga.org/">http://www.aiga.org/</a>.</p>
<h3 id="books">Books <a href="http://www.uxbooth.com/articles/complete-beginners-guide-to-interaction-design/#" class="top"><span class="hide">Back to top</span></a></h3>
<p>The list of books relevant to interaction design could span many webpages by itself. Here, I’ve condensed this list to just five such books. If you’re really itching to expand your library, though, check out our <a href="http://www.uxbooth.com/blog/recommended-books-for-your-user-experience-and-usability-library/">recommended books for your user experience library</a>.</p>
<ul class="books">
<li class="odd book"><a href="http://www.amazon.com/gp/product/0975841963?ie=UTF8&tag=ux-booth-20&linkCode=as2&camp=1789&creative=390957&creativeASIN=0975841963"><img src="./Complete Beginner's Guide to Interaction Design - UX Booth UX Booth_files/the_principles_of_beautiful_web_design.png"><span>The Principles of Beautiful Web Design</span></a></li>
<li class="book"><a href="http://www.amazon.com/gp/product/032145345X?ie=UTF8&tag=ux-booth-20&linkCode=as2&camp=1789&creative=390957&creativeASIN=032145345X"><img src="./Complete Beginner's Guide to Interaction Design - UX Booth UX Booth_files/designing_the_obvious.png"><span>Designing the Obvious: A Common Sense Approach…</span></a></li>
<li class="odd book"><a href="http://www.amazon.com/gp/product/0470084111?ie=UTF8&tag=ux-booth-20&linkCode=as2&camp=1789&creative=390957&creativeASIN=0470084111"><img src="./Complete Beginner's Guide to Interaction Design - UX Booth UX Booth_files/about-face.jpg"><span>About Face 3: The Essentials of Interaction Design</span></a></li>
<li class="book"><a href="http://www.amazon.com/gp/product/0596516258?ie=UTF8&tag=ux-booth-20&linkCode=as2&camp=1789&creative=390957&creativeASIN=0596516258"><img src="./Complete Beginner's Guide to Interaction Design - UX Booth UX Booth_files/web_interfaces.png"><span>Designing Web Interfaces: Principles and Patterns…</span></a></li>
<li class="odd book"><a href="http://www.amazon.com/gp/product/0123740371?ie=UTF8&tag=ux-booth-20&linkCode=as2&camp=1789&creative=390957&creativeASIN=0123740371"><img src="./Complete Beginner's Guide to Interaction Design - UX Booth UX Booth_files/buxton-192.jpg"><span>Sketching User Experiences: Getting the Design Right…</span></a>
</li></ul>
</div>
</article>
</div>
<script src="./Complete Beginner's Guide to Interaction Design - UX Booth UX Booth_files/notify.js" id="_notify_js"></script>
<div class="secondary-content">
<div id="bsap_750" class="bsap" data-serve="CAAIV"><style type="text/css">
</style>
<a id="_bsap_ad_6673" href="http://srv.buysellads.com/ads/click/x/GTND423EC6YDL5QJF6B4YKQWCTYIT5QNFTAD4Z3JCEYD4KQECAYI45QKC6BDTKQEF6ADVK3EHJNCLSIZ" target="_blank"><img class="adcreative" id="adslot" alt="Download UX & UI Design Assets" src="./Complete Beginner's Guide to Interaction Design - UX Booth UX Booth_files/12898"></a>
<script type="text/javascript" id="auto_1" class="ignoreme"> if (typeof(_bsap_serving_callback) !== 'undefined') _bsap_serving_callback(6673, 'CAAIV', ''); </script>
<script type="text/javascript" id="auto_2" class="ignoreme"> if (typeof(BSAProLoadedCallback) !== 'undefined') BSAProLoadedCallback(750); </script></div>
<div id="contribute">
<h4>Write for UX Booth</h4>
<a class="page-icon" title="Contribute to UXBooth" href="http://www.uxbooth.com/contribute/"><span>Contribute to UX Booth</span></a>
<h5>Contribute</h5>
<p><a href="http://www.uxbooth.com/contribute/" title="Learn more about contributing content to the community" onclick="_gaq.push(['_trackEvent', 'Sidebar', 'Get Paid', 'Contribute Post'])">Contribute a guest post to UX Booth</a> and let the community know what's important to you!</p>
</div>
<br><br>
<div id="bsap_985" class="bsap" data-serve="C67D62V"><style type="text/css">
</style>
<script type="text/javascript" id="auto_3" class="ignoreme" src="./Complete Beginner's Guide to Interaction Design - UX Booth UX Booth_files/adsbygoogle.js"></script>
<!-- 300x600 -->
<ins class="adsbygoogle" style="display:inline-block;width:300px;height:600px" data-ad-client="ca-pub-6506933565836828" data-ad-slot="5695635701" data-adsbygoogle-status="done"><ins style="display:inline-table;border:none;height:600px;margin:0;padding:0;position:relative;visibility:visible;width:300px;background-color:transparent"><ins id="aswift_0_anchor" style="display:block;border:none;height:600px;margin:0;padding:0;position:relative;visibility:visible;width:300px;background-color:transparent"><iframe width="300" height="600" frameborder="0" marginwidth="0" marginheight="0" vspace="0" hspace="0" allowtransparency="true" scrolling="no" onload="var i=this.id,s=window.google_iframe_oncopy,H=s&&s.handlers,h=H&&H[i],w=this.contentWindow,d;try{d=w.document}catch(e){}if(h&&d&&(!d.body||!d.body.firstChild)){if(h.call){setTimeout(h,0)}else if(h.match){try{h=s.upd(h,i)}catch(e){}w.location.replace(h)}}" id="aswift_0" name="aswift_0" style="left:0;position:absolute;top:0;"></iframe></ins></ins></ins>
<script type="text/javascript" id="auto_4" class="ignoreme">
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
<script type="text/javascript" id="auto_5" class="ignoreme"> if (typeof(_bsap_serving_callback) !== 'undefined') _bsap_serving_callback(3823, 'C67D62V', ''); </script>
<script type="text/javascript" id="auto_6" class="ignoreme"> if (typeof(BSAProLoadedCallback) !== 'undefined') BSAProLoadedCallback(985); </script></div>
</div>
</div>
<!-- The Post Followup -->
<div id="post-followup" class="primary-secondary-content">
<div class="primary-content">
<div id="bsap_9" class="bsap" data-serve="C6SE"><style type="text/css">
.one{position:relative;}.one .bsa_it_ad{display:block;padding:15px;border:1px solid #e1e1e1;background:#f9f9f9;font-family:helvetica,arial,sans-serif;line-height:100%;position:relative;}.one .bsa_it_ad a{text-decoration:none;}.one .bsa_it_ad a:hover{text-decoration:none;}.one .bsa_it_ad .bsa_it_t{display:block;font-size:12px;font-weight:bold;color:#212121;line-height:125%;padding:0 0 5px 0;}.one .bsa_it_ad .bsa_it_d{display:block;font-size:11px;color:#434343;font-size:12px;line-height:135%;}.one .bsa_it_ad .bsa_it_i{float:left;margin:0 15px 10px 0;}.one .bsa_it_p{display:block;text-align:right;position:absolute;bottom:10px;right:15px;}.one .bsa_it_p a{font-size:10px;color:#666;text-decoration:none;}.one .bsa_it_ad .bsa_it_p a:hover{font-style:italic;}
</style>
<div class="bsa_it one"><div class="bsa_it_ad">
<a target="_blank" href="http://srv.buysellads.com/ads/click/x/GTND423EC6YDL53WC6SLYKQWCTYIT5QMCA7ILZ3JCEYD4K37CA7DE23KC6BDTKQEF6ADVK3EHJNCLSIZ">
<span class="bsa_it_i">
<img alt="Free Prototyping Software" src="./Complete Beginner's Guide to Interaction Design - UX Booth UX Booth_files/10957">
</span>
</a>
<a target="_blank" href="http://srv.buysellads.com/ads/click/x/GTND423EC6YDL53WC6SLYKQWCTYIT5QMCA7ILZ3JCEYD4K37CA7DE23KC6BDTKQEF6ADVK3EHJNCLSIZ">
<span class="bsa_it_t">Free Prototyping Software</span>
<span class="bsa_it_d">The fastest UI prototyping & IxD tool, helps you create UX focused prototypes!</span>
</a>
<div style="clear:both"></div>
</div>
<script type="text/javascript" id="auto_7" class="ignoreme"> if (typeof(_bsap_serving_callback) !== 'undefined') _bsap_serving_callback(5787, 'C6SE', ''); </script><span class="bsa_it_p">
<a href="http://buysellads.com/buy/detail/1514/zone/1248667?utm_source=site_1514&utm_medium=website&utm_campaign=imagetext&utm_content=zone_1248667">ads by BSA</a>
</span>
</div></div>
<h3 id="comments">Comments</h3>
<ol class="comments">
<li class="comment
" id="comment-35240">
<div id="div-comment-35240">
<div class="meta">
<img alt="" src="./Complete Beginner's Guide to Interaction Design - UX Booth UX Booth_files/93319eea93e0a7f88e523dd31e5069ed" class="avatar avatar-64 photo" height="64" width="64"> <span class="name"><a href="http://www.inathought.com/" rel="external nofollow" class="url">Chris</a></span>
<span class="date"><a href="http://www.uxbooth.com/articles/complete-beginners-guide-to-interaction-design/#comment-35240">December 1, 2009</a></span>
</div>
<div class="content">
<p>Good article. I’m assuming you’ve read Donald Norman’s “The Design of Everyday Things”? In it he mentions affordances and even uses the scissors example. Good stuff if you’ve not read it. Thanks for sharing.</p>
</div></div>
</li>
<li class="comment
" id="comment-35244">
<div id="div-comment-35244">
<div class="meta">
<img alt="" src="./Complete Beginner's Guide to Interaction Design - UX Booth UX Booth_files/218b1e5bdb2ba173d41a823d1da1c41d" class="avatar avatar-64 photo" height="64" width="64"> <span class="name"><a href="http://www.adamqureshi.com/" rel="external nofollow" class="url">adam</a></span>
<span class="date"><a href="http://www.uxbooth.com/articles/complete-beginners-guide-to-interaction-design/#comment-35244">December 1, 2009</a></span>
</div>
<div class="content">
<p>This is just the article i was looking for !thank’s UX booth i think im in love with UX ! but what about Jesse James Garret book, the elements of user experience ? i want to get one !</p>
</div></div>
</li>
<li class="comment
" id="comment-35245">
<div id="div-comment-35245">
<div class="meta">
<img alt="" src="./Complete Beginner's Guide to Interaction Design - UX Booth UX Booth_files/b37df1d2124e3e8e2923b98e530f325a" class="avatar avatar-64 photo" height="64" width="64"> <span class="name"><a href="http://www.thisisaaronslife.com/" rel="external nofollow" class="url">Aaron Irizarry</a></span>
<span class="date"><a href="http://www.uxbooth.com/articles/complete-beginners-guide-to-interaction-design/#comment-35245">December 1, 2009</a></span>
</div>
<div class="content">
<p>Great Overview Andrew! This is going to prove very helpful to many readers… bookmarking this one for good reference…</p>
<p>Thanks again for another rocking article!</p>
</div></div>
</li>
<li class="comment
" id="comment-35256">
<div id="div-comment-35256">
<div class="meta">
<img alt="" src="./Complete Beginner's Guide to Interaction Design - UX Booth UX Booth_files/abaa87bc433144c505766fb6ae96a80c" class="avatar avatar-64 photo" height="64" width="64"> <span class="name"><a href="http://caramelz.my/" rel="external nofollow" class="url">Grey</a></span>
<span class="date"><a href="http://www.uxbooth.com/articles/complete-beginners-guide-to-interaction-design/#comment-35256">December 1, 2009</a></span>
</div>
<div class="content">
<p>great article! as a beginner web designer i have always wanted to explore more in the fields of interaction design :D you’ve just given a number of precious resources that i just need! thank you so much! :)</p>
</div></div>
</li>
<li class="comment
" id="comment-35257">
<div id="div-comment-35257">
<div class="meta">
<img alt="" src="./Complete Beginner's Guide to Interaction Design - UX Booth UX Booth_files/3de83295e93db5bb0b1be251a1bad979" class="avatar avatar-64 photo" height="64" width="64"> <span class="name"><a href="http://www.fritzism.com/" rel="external nofollow" class="url">fritz</a></span>
<span class="date"><a href="http://www.uxbooth.com/articles/complete-beginners-guide-to-interaction-design/#comment-35257">December 1, 2009</a></span>
</div>
<div class="content">
<p>Good show Andrew. Good show indeed. </p>
<p>Great bridge article for those think designing for the web (and smart mobile) is just about getting the latest CSS or coding techniques under their belt. </p>
<p>There’s so much more. Thanks!</p>
</div></div>
</li>
<li class="comment
" id="comment-35258">
<div id="div-comment-35258">
<div class="meta">
<img alt="" src="./Complete Beginner's Guide to Interaction Design - UX Booth UX Booth_files/fd20e87337f00a2b2f54ca88b7beaa59" class="avatar avatar-64 photo" height="64" width="64"> <span class="name"><a href="http://www.theresaneil.com/" rel="external nofollow" class="url">Theresa Neil</a></span>
<span class="date"><a href="http://www.uxbooth.com/articles/complete-beginners-guide-to-interaction-design/#comment-35258">December 1, 2009</a></span>
</div>
<div class="content">
<p>Thanks for including me in the list!</p>
<p>Bill Scott and I have a joint blog at <a href="http://www.designingwebinterfaces.com/posts" rel="nofollow">http://www.designingwebinterfaces.com/posts</a> and a new tumbleblog showcasing the best Rich Internet Applications at designgalleria.tumblr.com</p>
</div></div>
</li>
<li class="comment
" id="comment-35259">
<div id="div-comment-35259">
<div class="meta">
<img alt="" src="./Complete Beginner's Guide to Interaction Design - UX Booth UX Booth_files/afc8216b56c283f4f0146a8e32e37e73" class="avatar avatar-64 photo" height="64" width="64"> <span class="name"><a href="http://biancayvonne.com/" rel="external nofollow" class="url">Bianca Casimes</a></span>
<span class="date"><a href="http://www.uxbooth.com/articles/complete-beginners-guide-to-interaction-design/#comment-35259">December 1, 2009</a></span>
</div>
<div class="content">
<p>Absolutely fantastic post, definitely made me think about basic interface design. A lot of qualities of interfacing could be extended to so many other areas. Thanks for a great post!</p>
</div></div>
</li>
<li class="comment
" id="comment-35269">
<div id="div-comment-35269">
<div class="meta">
<img alt="" src="./Complete Beginner's Guide to Interaction Design - UX Booth UX Booth_files/ff5bd1ba6caafbefd8382391ae3a5a16" class="avatar avatar-64 photo" height="64" width="64"> <span class="name">LSF</span>
<span class="date"><a href="http://www.uxbooth.com/articles/complete-beginners-guide-to-interaction-design/#comment-35269">December 1, 2009</a></span>
</div>
<div class="content">
<p>How did you arrive at the list of notable designers? I mean: notable for what reason? Have you seen their work?</p>
</div></div>
</li>
<li class="comment
" id="comment-35279">
<div id="div-comment-35279">
<div class="meta">
<img alt="" src="./Complete Beginner's Guide to Interaction Design - UX Booth UX Booth_files/22a86a79e0b16b6b5a718b84e4170c75" class="avatar avatar-64 photo" height="64" width="64"> <span class="name">Thomas</span>
<span class="date"><a href="http://www.uxbooth.com/articles/complete-beginners-guide-to-interaction-design/#comment-35279">December 1, 2009</a></span>
</div>
<div class="content">
<p>Skilled none the less, I have heard of not a single of those “famous” interaction designers mentioned. I have worked with ixd aka interaction design (not to be confused with webdesign) for 14 years.</p>
<p>I recommend <a href="http://www.johnnyholland.org/" rel="nofollow">http://www.johnnyholland.org</a> – one of the best article blogs on ixd.</p>
<ul class="children">
<li class="comment
" id="comment-35298">
<div id="div-comment-35298">
<div class="meta">
<img alt="" src="./Complete Beginner's Guide to Interaction Design - UX Booth UX Booth_files/fdaba74525c050cffd298cd7b959d0cc(1)" class="avatar avatar-64 photo" height="64" width="64"> <span class="name"><a href="http://www.designerandrew.com/" rel="external nofollow" class="url">Andrew Maier</a></span>
<span class="date"><a href="http://www.uxbooth.com/articles/complete-beginners-guide-to-interaction-design/#comment-35298">December 1, 2009</a></span>
</div>
<div class="content">
<p>Hey there! I arrived at the noteworthy list while researching this article (and passively in my work as an interaction designer). Before most of my posts, I go through a good day or two of research. If it’s not something “factual” I’m looking for but, rather, something more esoteric, I’ll typically send out a lazy tweet or two asking for suggestions (In fact, I did that for this very post). If you’re itching to help out with my next post you can follow/reply to @andrewmaier (me) or @uxbooth on Twitter. Or, if you’d rather write your own post and share it with the community, head on over to <a href="http://uxbooth.com/contribute" rel="nofollow">http://uxbooth.com/contribute</a> to see our submission guidelines.</p>
<p>Thanks for reading!</p>
</div></div>
</li>
</ul><!-- .children -->
</div></div>
</li>
<li class="comment
" id="comment-35287">
<div id="div-comment-35287">
<div class="meta">
<img alt="" src="./Complete Beginner's Guide to Interaction Design - UX Booth UX Booth_files/877ffb5890de8f96e38a11c159a1788d" class="avatar avatar-64 photo" height="64" width="64"> <span class="name"><a href="http://www.bluesailcreative.com/" rel="external nofollow" class="url">Blue Sail Creative</a></span>
<span class="date"><a href="http://www.uxbooth.com/articles/complete-beginners-guide-to-interaction-design/#comment-35287">December 1, 2009</a></span>
</div>
<div class="content">
<p>I agree with this post 100%. It’s great to see other companies preaching the same things. I try to sit with my clients and make them understand this because if they have an education early on it can help with future decisions. </p>
<p>My biggest thing with interaction design is justification. If you can justify the importance of an element I will allow it to stay. </p>
<p>Treat your website as a constitution that constantly grows and evolves.</p>
</div></div>
</li>
<li class="comment
" id="comment-35290">
<div id="div-comment-35290">
<div class="meta">
<img alt="" src="./Complete Beginner's Guide to Interaction Design - UX Booth UX Booth_files/a0db530c8e1696704fa09fe25e422084" class="avatar avatar-64 photo" height="64" width="64"> <span class="name"><a href="http://www.udanium.com/" rel="external nofollow" class="url">Uday Gajendar</a></span>
<span class="date"><a href="http://www.uxbooth.com/articles/complete-beginners-guide-to-interaction-design/#comment-35290">December 1, 2009</a></span>
</div>
<div class="content">
<p>Hi, thanks for including me on your list of Notable IxD’ers!</p>
<p>Just FYI that the bio you have of me is out of date. Ping me and I’ll send an update. I left Involution early 08, and currently consulting in the valley for clients like Netflix (met Bill Scott in fact, a great guy), Citrix, and Linked In. Thanks again!</p>
</div></div>
</li>
<li class="comment
" id="comment-35293">
<div id="div-comment-35293">
<div class="meta">
<img alt="" src="./Complete Beginner's Guide to Interaction Design - UX Booth UX Booth_files/a962b4d3a7d6405455b39a7b336ab133" class="avatar avatar-64 photo" height="64" width="64"> <span class="name"><a href="http://www.cennydd.co.uk/" rel="external nofollow" class="url">Cennydd Bowles</a></span>
<span class="date"><a href="http://www.uxbooth.com/articles/complete-beginners-guide-to-interaction-design/#comment-35293">December 1, 2009</a></span>
</div>
<div class="content">
<p>I feel privileged to be on the ‘notable’ list, thanks guys.</p>
<p>I’d recommend listening to folks like Dan Saffer, Nick Finck, Chris Fahey, Donna Spencer too. Whether they’d label themselves interaction designers I don’t know – but I do know they’re smart folks doing interesting stuff in the field.</p>
<ul class="children">
<li class="comment
" id="comment-35304">
<div id="div-comment-35304">
<div class="meta">
<img alt="" src="./Complete Beginner's Guide to Interaction Design - UX Booth UX Booth_files/fdaba74525c050cffd298cd7b959d0cc(1)" class="avatar avatar-64 photo" height="64" width="64"> <span class="name"><a href="http://www.designerandrew.com/" rel="external nofollow" class="url">Andrew Maier</a></span>
<span class="date"><a href="http://www.uxbooth.com/articles/complete-beginners-guide-to-interaction-design/#comment-35304">December 1, 2009</a></span>
</div>
<div class="content">
<p>Hey Cennydd, </p>
<p>I featured Nick Fink and Donna Spencer in a similar post on Information Architecture: <a href="http://www.uxbooth.com/blog/complete-beginners-guide-to-information-architecture/" rel="nofollow">http://www.uxbooth.com/blog/complete-beginners-guide-to-information-architecture/</a></p>
<p>I haven’t explicitly checked out Dan Saffer or Chris Fahey, so I’ll be sure to look them up tonight.</p>
</div></div>
</li>
<li class="comment
" id="comment-35479">
<div id="div-comment-35479">
<div class="meta">
<img alt="" src="./Complete Beginner's Guide to Interaction Design - UX Booth UX Booth_files/5d79f73bf83f3675bbc6dbbcb3b1ba81" class="avatar avatar-64 photo" height="64" width="64"> <span class="name"><a href="http://maadmob.com.au/" rel="external nofollow" class="url">Donna Spencer</a></span>
<span class="date"><a href="http://www.uxbooth.com/articles/complete-beginners-guide-to-interaction-design/#comment-35479">December 2, 2009</a></span>
</div>
<div class="content">
<p>thanks for another great article Andrew. I’m going to include it in next week’s UX Australia newsletter.</p>
<p>Cennydd – I do label myself an interaction designer and do lots of it. Just happen to be more well known for IA. I alternate between them…</p>
</div></div>
</li>
</ul><!-- .children -->
</div></div>
</li>
<li class="comment
" id="comment-35311">
<div id="div-comment-35311">
<div class="meta">
<img alt="" src="./Complete Beginner's Guide to Interaction Design - UX Booth UX Booth_files/fec6737a7a030bb0455d7d4f3523e28e" class="avatar avatar-64 photo" height="64" width="64"> <span class="name">Craig</span>
<span class="date"><a href="http://www.uxbooth.com/articles/complete-beginners-guide-to-interaction-design/#comment-35311">December 1, 2009</a></span>
</div>
<div class="content">
<p>I had to laugh. A post about interaction and design in a site that requires horizontal scrolling at 1024px and has zero left margin. haha, that was funny!</p>
<ul class="children">
<li class="comment
" id="comment-35443">
<div id="div-comment-35443">
<div class="meta">
<img alt="" src="./Complete Beginner's Guide to Interaction Design - UX Booth UX Booth_files/fdaba74525c050cffd298cd7b959d0cc(1)" class="avatar avatar-64 photo" height="64" width="64"> <span class="name"><a href="http://www.designerandrew.com/" rel="external nofollow" class="url">Andrew Maier</a></span>
<span class="date"><a href="http://www.uxbooth.com/articles/complete-beginners-guide-to-interaction-design/#comment-35443">December 2, 2009</a></span>
</div>
<div class="content">
<p>Hey Craig, you’re not the first to notice this! We’ve got a bug list that we’re getting to as time allows. Thanks for your patience.</p>
</div></div>
</li>
</ul><!-- .children -->
</div></div>
</li>
<li class="comment
" id="comment-35357">
<div id="div-comment-35357">
<div class="meta">
<img alt="" src="./Complete Beginner's Guide to Interaction Design - UX Booth UX Booth_files/d72a9c68870aa492e736fb961e8e4ab1" class="avatar avatar-64 photo" height="64" width="64"> <span class="name"><a href="http://blueflavor.com/" rel="external nofollow" class="url">Nick Finck</a></span>
<span class="date"><a href="http://www.uxbooth.com/articles/complete-beginners-guide-to-interaction-design/#comment-35357">December 2, 2009</a></span>
</div>
<div class="content">
<p>Cennydd, you have no idea what you are talking about.. no one should ever listen to me :P</p>
<p>Cheers,<br>
- Nick</p>
</div></div>
</li>
<li class="comment
" id="comment-35394">
<div id="div-comment-35394">
<div class="meta">
<img alt="" src="./Complete Beginner's Guide to Interaction Design - UX Booth UX Booth_files/039a87be2d3843f64170f5e625252e84" class="avatar avatar-64 photo" height="64" width="64"> <span class="name"><a href="http://www.purecaffeine.com/about/" rel="external nofollow" class="url">Nathanael Boehm</a></span>
<span class="date"><a href="http://www.uxbooth.com/articles/complete-beginners-guide-to-interaction-design/#comment-35394">December 2, 2009</a></span>
</div>
<div class="content">
<p>Dan Saffer has my vote too. Ignore his website (tis a bit ugly :-), just read his books.</p>
<p>Lot more to being a good designer than having drawing talent or crazy widget ideas or mad Flash skills;</p>
<p>Being able to herd cattle, drag feedback out of people with tonsil-pliers and get everyone excited without resorting to LSD. Being able to throw out ideas, good and bad, to keep at it, wittle it down, keep everyone invested … that’s most of the job.</p>
<ul class="children">
<li class="comment
" id="comment-35654">
<div id="div-comment-35654">
<div class="meta">
<img alt="" src="./Complete Beginner's Guide to Interaction Design - UX Booth UX Booth_files/3d551b4a3d20bf17996e6eb98cd47269" class="avatar avatar-64 photo" height="64" width="64"> <span class="name"><a href="http://mediajunkie.com/" rel="external nofollow" class="url">xian</a></span>
<span class="date"><a href="http://www.uxbooth.com/articles/complete-beginners-guide-to-interaction-design/#comment-35654">December 4, 2009</a></span>
</div>
<div class="content">
<p>what’s wrong with resorting to LSD?</p>
</div></div>
</li>
<li class="comment
" id="comment-35884">
<div id="div-comment-35884">
<div class="meta">
<img alt="" src="./Complete Beginner's Guide to Interaction Design - UX Booth UX Booth_files/039a87be2d3843f64170f5e625252e84" class="avatar avatar-64 photo" height="64" width="64"> <span class="name"><a href="http://www.purecaffeine.com/about/" rel="external nofollow" class="url">Nathanael Boehm</a></span>
<span class="date"><a href="http://www.uxbooth.com/articles/complete-beginners-guide-to-interaction-design/#comment-35884">December 5, 2009</a></span>
</div>
<div class="content">
<p>Oh nothing – except that it’s use in focus groups and collaborative design sessions might be seen as unethical by other IxD professionals :)</p>
</div></div>
</li>
</ul><!-- .children -->
</div></div>
</li>
<li class="comment
" id="comment-35432">
<div id="div-comment-35432">
<div class="meta">
<img alt="" src="./Complete Beginner's Guide to Interaction Design - UX Booth UX Booth_files/0c3804f34126e907ae302479d5a6b4dd" class="avatar avatar-64 photo" height="64" width="64"> <span class="name">Ben</span>
<span class="date"><a href="http://www.uxbooth.com/articles/complete-beginners-guide-to-interaction-design/#comment-35432">December 2, 2009</a></span>
</div>
<div class="content">
<p>Tremendous article. One of the best I’ve read on any design-centric blog in some time. Stumbled here from Smashing Mag and UXBooth will forever be bookmarked from here on out.</p>
<ul class="children">
<li class="comment
" id="comment-35444">
<div id="div-comment-35444">
<div class="meta">
<img alt="" src="./Complete Beginner's Guide to Interaction Design - UX Booth UX Booth_files/fdaba74525c050cffd298cd7b959d0cc(1)" class="avatar avatar-64 photo" height="64" width="64"> <span class="name"><a href="http://www.designerandrew.com/" rel="external nofollow" class="url">Andrew Maier</a></span>
<span class="date"><a href="http://www.uxbooth.com/articles/complete-beginners-guide-to-interaction-design/#comment-35444">December 2, 2009</a></span>
</div>
<div class="content">
<p>Thanks for the feedback, Ben! I hope to see you around here in the future.</p>
</div></div>
</li>
</ul><!-- .children -->
</div></div>
</li>
<li class="comment
" id="comment-35445">
<div id="div-comment-35445">
<div class="meta">
<img alt="" src="./Complete Beginner's Guide to Interaction Design - UX Booth UX Booth_files/9a0372ca4c176a2b21cfd021622f9765" class="avatar avatar-64 photo" height="64" width="64"> <span class="name"><a href="http://www.nuritperes.com/" rel="external nofollow" class="url">Nurit</a></span>
<span class="date"><a href="http://www.uxbooth.com/articles/complete-beginners-guide-to-interaction-design/#comment-35445">December 2, 2009</a></span>
</div>
<div class="content">
<p>“interaction designers are (typically) only concerned with the interaction between users and computers”<br>
How did you arrive at this conclusion? It is not in the Ixda definition you quote. See also David Malouf post on The essence of Interaction Design here: <a href="http://davemalouf.com/?p=1744" rel="nofollow">http://davemalouf.com/?p=1744</a></p>
<ul class="children">
<li class="comment
" id="comment-35551">
<div id="div-comment-35551">
<div class="meta">
<img alt="" src="./Complete Beginner's Guide to Interaction Design - UX Booth UX Booth_files/fdaba74525c050cffd298cd7b959d0cc(1)" class="avatar avatar-64 photo" height="64" width="64"> <span class="name"><a href="http://www.designerandrew.com/" rel="external nofollow" class="url">Andrew Maier</a></span>
<span class="date"><a href="http://www.uxbooth.com/articles/complete-beginners-guide-to-interaction-design/#comment-35551">December 3, 2009</a></span>
</div>
<div class="content">
<p>Nurit,</p>
<p>I think that the quote you pulled from my article has the same problem as the quote that David analyses in his own blog post: it’s without context. </p>
<p>I arrived at the conclusion that interaction designers generally design software interfaces because that’s where I see our technology-centered culture heading; with the ubiquity of the internet and mobile technologies, interaction designers are (by and large) called upon to sort out the boundary between users and software.</p>
<p>The IxDA’s definition is worded in such a way that it applies to an immense variety of products and services––and rightfully so, it’s on their website to the interaction design community at large. </p>
<p>This article is unique because it primarily focuses on web-application-based interaction design–I give that disclaimer upfront. While I appreciate your comment––it’s a welcome addition because it brings some perspective to the guide as a whole––I still feel that the article itself is appropriate to beginning interaction designers reading UX Booth.</p>
</div></div>
</li>
</ul><!-- .children -->
</div></div>
</li>
<li class="comment
" id="comment-35472">
<div id="div-comment-35472">
<div class="meta">
<img alt="" src="./Complete Beginner's Guide to Interaction Design - UX Booth UX Booth_files/313e1c387bcd40abd8071f445ee8b0af" class="avatar avatar-64 photo" height="64" width="64"> <span class="name"><a href="http://jasonrobb.com/" rel="external nofollow" class="url">Jason Robb</a></span>
<span class="date"><a href="http://www.uxbooth.com/articles/complete-beginners-guide-to-interaction-design/#comment-35472">December 2, 2009</a></span>
</div>
<div class="content">
<p>I’m glad you mentioned the importance of staying current. True to any industry! =)</p>
<p>And thanks for the link to my sketching article, Andrew. Much appreciated!</p>
</div></div>
</li>
<li class="comment
" id="comment-35578">
<div id="div-comment-35578">
<div class="meta">
<img alt="" src="./Complete Beginner's Guide to Interaction Design - UX Booth UX Booth_files/6a3ee49625841a3100dd0dc00309cf35" class="avatar avatar-64 photo" height="64" width="64"> <span class="name"><a href="http://fuelyourblogging.com/" rel="external nofollow" class="url">Tim Smith</a></span>
<span class="date"><a href="http://www.uxbooth.com/articles/complete-beginners-guide-to-interaction-design/#comment-35578">December 3, 2009</a></span>
</div>
<div class="content">
<p>Wow Andrew! I don’t think I’ve seen such an awesome article in a long time. All of your points are so well thought out and very well explained. </p>
<p>Thanks for an awesome article!</p>
</div></div>
</li>
<li class="comment
" id="comment-35629">
<div id="div-comment-35629">
<div class="meta">
<img alt="" src="./Complete Beginner's Guide to Interaction Design - UX Booth UX Booth_files/29fff275ec187441ca99a85970e643ef" class="avatar avatar-64 photo" height="64" width="64"> <span class="name">Yohoho</span>
<span class="date"><a href="http://www.uxbooth.com/articles/complete-beginners-guide-to-interaction-design/#comment-35629">December 3, 2009</a></span>
</div>
<div class="content">
<p>Hmm… It starts by saying that most websites today are interactive, which just isn’t close to true. Then it seems as though you’re advocating following the lead of a few notables. iow, let them reinvent the wheel then watch and do what they do, which is kind of how it’s been since people were drawing on cave walls (They always seem to have a similarity don’t they?)<br>
Don’t get me wrong, I think this is all good. It’s important that each new generation of designers try to reinvent the profession in order to stay fresh, and current, and relevant, and whatever. But it’s also interesting that for all the new tools and outlets, the impulse and the thought process remains generally the same. Good article.</p>
</div></div>
</li>
<li class="comment
" id="comment-35715">
<div id="div-comment-35715">
<div class="meta">
<img alt="" src="./Complete Beginner's Guide to Interaction Design - UX Booth UX Booth_files/11c35683485c03dcec57af3bc87a4951" class="avatar avatar-64 photo" height="64" width="64"> <span class="name"><a href="http://davemalouf.com/" rel="external nofollow" class="url">Dave Malouf</a></span>
<span class="date"><a href="http://www.uxbooth.com/articles/complete-beginners-guide-to-interaction-design/#comment-35715">December 4, 2009</a></span>
</div>
<div class="content">
<p>Hi Andrew,<br>
I actually think this is both a great piece and well a very myopic one at the same time. But I’m not going to concentrate on the good stuff bc well people already did that.</p>
<p>Titles frame more than disclaimers do and while it is clear you are speaking about “web design” your framing and title make it sound like IxD is limited to web design which when speaking to “beginners” as you are is a tad irresponsible. If I google and find this piece and I’m a phone designer, I might be put off by this piece and thus put off by IxD and think that IxDA (which you reference) is only for web interaction designers.</p>
<p>But I’ll even take this a step further. Let’s say you even changed the title to “Interaction Design for Web Designers”. That in itself would be a GREAT improvement, but also misleading in a way from the other direction in that you’ll be limiting readers to think that the scope of their work in interaction design even in the sphere of ‘web design’. That just isn’t true. It is this myopic viewpoint that will relegate way too many of the folks who read UXBooth to fall under the camp of UXers that Jon Kolko is taking to task (despite Peter Merholz’s protestations). (link here: <a href="http://tr.im/GCOO" rel="nofollow">http://tr.im/GCOO</a>)</p>
<p>Your definitions and framing of IxD are very old school is I guess what I’m saying. In a recent framing of IxD’s path in this piece–http://davemalouf.com/?p=1720</p>
<p>You account for steps 1 & 2, but you stop there and don’t account for step 3. By only being about goals and the confines of communicating between user and machine you miss the real opportunity and promise of IxD. Further, as Dan Saffer (I can’t believe you wrote a piece about ixD and not included him, or Verplank, or Kolko or Fabricant or Crampton Smith or, or, or …) that IxD is much more about human to human connection mediated through technology than about human to technology. Your definition is really just UI Design.</p>
<p>So while this is a solid attempt to frame Interaction Design for the Web, it is actually incredibly short-sighted for THAT medium and does an strong injustice to IxD more generally beyond that medium.</p>
<p>When is the UX/Web Design community going to end the myopia in this community.</p>
<p>Andrew, come to IxD10 and really see the breadth and depth of what IxD is all about. For the Web, and MORE!</p>
<p>Sorry to be so harsh, but this and the reaction to Kolko’s piece have been the piling of some straws on this camel’s back w/ this community. Allowing stuff like this to go uncountered is not OK any longer.</p>
<p>And this response missed a lot of other points that can be talked about in this piece.</p>
<p>I suggest better is to just point people to Dan Saffer’s Designing for Interaction, Bill Moggridges Designing Interaction, Bill Buxtons Sketching UX, Todd Zaki Warfel’s Prototyping and Jennifer Tidwell’s Designing Interfaces.</p>
<p>Would be better!</p>
<p>BTw, I like the design of your blog (which I normally don’t get to see through my gReader view of the world.)</p>
<ul class="children">
<li class="comment
" id="comment-41267">
<div id="div-comment-41267">
<div class="meta">
<img alt="" src="./Complete Beginner's Guide to Interaction Design - UX Booth UX Booth_files/fdaba74525c050cffd298cd7b959d0cc(1)" class="avatar avatar-64 photo" height="64" width="64"> <span class="name"><a href="http://www.designerandrew.com/" rel="external nofollow" class="url">Andrew Maier</a></span>
<span class="date"><a href="http://www.uxbooth.com/articles/complete-beginners-guide-to-interaction-design/#comment-41267">January 6, 2010</a></span>
</div>
<div class="content">
<p>Dave,</p>
<p>Thanks so much for your detailed response to this article. It’s inspiring to get this kind of a reaction.</p>
<p>I myself am a student of the community: blogs, videos, websites, meetups, consultants, etc. The messages which I receive I compile into these articles. So in that sense, you’re correct in saying that this article presents a more-or-less myopic view of IxD. Unfortunately, that’s just the nature of writing based on personal experience. I also filter out concepts that I think don’t appeal to our community, etc. There are a lot of compromises that have the be made in generating an article like this in a timely manner. So by no means should anyone take this kind of article as the end-all-be-all of interaction design. </p>
<p>I left out designers (such as Dan Saffer) not because he isn’t important, but because he wasn’t visible to me. His work most certainly informs my practice, but he’s farther up the “family tree” of interaction design. In fact, I’ve heard the name but I don’t know his work in any literal sense. Just like Don Norman. These people have made many worthwhile contributions to the field, but they are invisible to me on a periodic basis.</p>
<p>I’ve used the community members/tools/books that I’ve listed as jumping off points for my career, others can benefit from that as well. This article was created to serve as a resource for our community.</p>
<p>After some thought and schedule juggling, I *do( plan on making it out to Interaction ’10 this year in Savannah, GA. I hope to see you there. If not, would you be interested in chatting about Interaction Design outside of this comment log? </p>
<p>Thanks for reading and commenting.</p>
</div></div>
</li>
</ul><!-- .children -->
</div></div>
</li>
<li class="comment
" id="comment-36103">
<div id="div-comment-36103">
<div class="meta">
<img alt="" src="./Complete Beginner's Guide to Interaction Design - UX Booth UX Booth_files/b932a2d62f8d6c0b50b43bb1a1dcf0b5" class="avatar avatar-64 photo" height="64" width="64"> <span class="name"><a href="http://www.smashingshare.com/" rel="external nofollow" class="url">Waheed Akhtar</a></span>
<span class="date"><a href="http://www.uxbooth.com/articles/complete-beginners-guide-to-interaction-design/#comment-36103">December 6, 2009</a></span>
</div>
<div class="content">
<p>Great resource for beginners. Thanks for putting them all together</p>
</div></div>
</li>
<li class="comment
" id="comment-36483">
<div id="div-comment-36483">
<div class="meta">
<img alt="" src="./Complete Beginner's Guide to Interaction Design - UX Booth UX Booth_files/10de2c151c3f6fd76471ef12ed23880a" class="avatar avatar-64 photo" height="64" width="64"> <span class="name"><a href="http://www.aimonkey.com/" rel="external nofollow" class="url">Waasys</a></span>
<span class="date"><a href="http://www.uxbooth.com/articles/complete-beginners-guide-to-interaction-design/#comment-36483">December 8, 2009</a></span>
</div>
<div class="content">
<p>Great article, thanks for posting!</p>
</div></div>
</li>
<li class="comment
" id="comment-37518">
<div id="div-comment-37518">
<div class="meta">
<img alt="" src="./Complete Beginner's Guide to Interaction Design - UX Booth UX Booth_files/74e6281e75cf6001cde78bb280eb9984" class="avatar avatar-64 photo" height="64" width="64"> <span class="name"><a href="http://www.danbirlem.com/" rel="external nofollow" class="url">Dan Birlem</a></span>
<span class="date"><a href="http://www.uxbooth.com/articles/complete-beginners-guide-to-interaction-design/#comment-37518">December 15, 2009</a></span>
</div>
<div class="content">
<p>Liked the bit about IxEdit – new text editor I’ve never heard of before!</p>
</div></div>
</li>
<li class="comment
" id="comment-41105">
<div id="div-comment-41105">
<div class="meta">
<img alt="" src="./Complete Beginner's Guide to Interaction Design - UX Booth UX Booth_files/cab89d80c4ef535a84cd08516a31516d" class="avatar avatar-64 photo" height="64" width="64"> <span class="name"><a href="http://blog.jirijerabek.net/" rel="external nofollow" class="url">Jiri Jerabek</a></span>
<span class="date"><a href="http://www.uxbooth.com/articles/complete-beginners-guide-to-interaction-design/#comment-41105">January 5, 2010</a></span>
</div>
<div class="content">
<p>Thanks for very informative article!</p>
<p>I’d like to move my career more towards interaction design, so I’m researching what skills and knowledge should I gain.</p>
<p>Thanks :)</p>
</div></div>
</li>
<li class="comment
" id="comment-42389">
<div id="div-comment-42389">
<div class="meta">
<img alt="" src="./Complete Beginner's Guide to Interaction Design - UX Booth UX Booth_files/dbf2a0e9bab81f2ba8c4c17487541329" class="avatar avatar-64 photo" height="64" width="64"> <span class="name"><a href="http://gryphonheart.spreadshirt.dk/" rel="external nofollow" class="url">Mr. børnetøj</a></span>
<span class="date"><a href="http://www.uxbooth.com/articles/complete-beginners-guide-to-interaction-design/#comment-42389">January 11, 2010</a></span>
</div>
<div class="content">
<p>Great article, I found much inspiration in this. Thanks for sharing ;-)</p>
</div></div>
</li>
<li class="comment
" id="comment-47697">
<div id="div-comment-47697">
<div class="meta">
<img alt="" src="./Complete Beginner's Guide to Interaction Design - UX Booth UX Booth_files/44075f5d4b932fe763ad301cb70ffba0" class="avatar avatar-64 photo" height="64" width="64"> <span class="name"><a href="http://www.huntsman08.com/" rel="external nofollow" class="url">Jame</a></span>
<span class="date"><a href="http://www.uxbooth.com/articles/complete-beginners-guide-to-interaction-design/#comment-47697">February 10, 2010</a></span>
</div>
<div class="content">
<p>Thanks! It ‘s good information for me.</p>
</div></div>
</li>
<li class="comment
" id="comment-47981">
<div id="div-comment-47981">
<div class="meta">
<img alt="" src="./Complete Beginner's Guide to Interaction Design - UX Booth UX Booth_files/99c9666a12c10b65678363c321c49c24" class="avatar avatar-64 photo" height="64" width="64"> <span class="name"><a href="http://ditindia.com/" rel="external nofollow" class="url">Tejas</a></span>
<span class="date"><a href="http://www.uxbooth.com/articles/complete-beginners-guide-to-interaction-design/#comment-47981">February 13, 2010</a></span>
</div>
<div class="content">
<p>Great article for beginners. Thanks a bunch.</p>
</div></div>
</li>
<li class="comment
" id="comment-48375">
<div id="div-comment-48375">