Вы находитесь на странице: 1из 103

- / //, , , 2012

ISBN: 978-5-91657-386-2
FB2: MCat78, 02 July 2012, version 1.0
UUID: 3e4d7ce9-c3b0-11e1-bd2c-ec5b03fadd67
PDF: org.trivee.fb2pdf.FB2toPDF 1.0, Jan 29, 2015

( , #2)
, , , -, . !
, , , . , .
. , , .

1.
2.
3.
4.
5.
6.
7.


-
,


Objectified (
, ). , . .
, . ,
,
. . , , .
,
, , , , .
, , , ,
. ,
, .
.
, ! .
.

,
,
,

, . ,
, . .
, , . , 30- ,
WHA-A-ATS A-AAWP?[1], .
.
? , - , , .
, , .
, . , , , . , -
.
, .
, - . , , .
, , ,
. .
.
, . !

, CEO[2] User Interface Engineering

1.
, ,
XVIIIXIX . ,
XX . , , , .

, . , , , ,
.
, .
, .
XIX Arts and Crafts
[3].
. , , . , .
.
, .
, ,
. , Etsy Kickstarter
. . , ,
( - ),
, . .
, -, .
,
. , , .
. .
, Arts and Crafts, ,
, .
,
. , , , . .
,
, , .

, . -, .
,
.



. , ,
, .
, . ,
[4]. , 1990- , , ,
.
, html.
, .
2000- . ,
, , ,
, , .
, , , , , .
Twitter Facebook, .
. ,
, , . , .
, .
, , , , .
, , . , , , ,
.
, - . ,
, , , . ,
, , . ,
.
.
, ? [5], , .

,
19501960- ,
, : , , , .
(. 1.1).

. 1.1.
,
: , , . , :
, , ,
. , ,
. , , . . ,
, . , , .
, ,
.
, .
, (. 1.2).
. 1.2.


.
. , ,
. , Apple Ping? iTunes. , ,
Twitter Facebook. , , .
. , Twitter , , ?
, .
. ,
.
? , , , ,
, . . , Hipmunk (http://hipmunk.com) .
, , [6],
. , . , AMC Pacer[7] 1978 .
,

. ,
. !
, . .
, .

=
, , ,
Basecamp (http://basecamphq.com),
37Signals (. 1.3).

. 1.3. Basecamp
, 37Signals
. , Getting Real (
http://bkaprt.com/de/2), - , .
37Signals . , , -.
, Basecamp . . , - , . , . .
37Signals ,
, . , , ,
. - .
, . , , , . ? ?
? , ? , . ,
? ( ). , .

?
, . , , , .
, , ?
, , Wufoo , , .

Wufoo:
Wufoo (http://wufoo.com/) , - . Wufoo (.
1.4). Basecamp, Wufoo . ,
.
, .
Wufoo , , .

. 1.4. Wufoo -
Wufoo , . , , , . -, , Wufoo . Basecamp, , , .
Wufoo . , , .
. ,
! ,
, : . , . ! ,
. , .
, , : Wufoo ,
, .

, Wufoo,
,
:

.
, , .
, .
, . ,

. , , .
, . ,
. .
Wufoo , .
, . , Wufoo, , . ,
Wufoo ,
. , , , . ,
.


.
, . Brain Rules ( )
:


, .
? , , ,
.
,
[8] . ,
, . , , post-it.
, , . ,
!. , . , -

, .
, !
, , :
. ,
. , ,
. , ,
.
:
, , , . , ,
, .
.
.
. , , .
, Wufoo , . ,
Wufoo . , . , ,
,
.
. , Betabrand (. 1.5). Betabrand (
http://betabrand.com) ,
, -, . .
Betabrand -, . , .
Cordaround,
, .
. 1.5. Betabrand -, . 16,24 %
, , , , .

. :
? , .

(ROI) . ,
, Betabrand.


, Betabrand , . , -, . ,
.
, . Wufoo
Betabrand. ,
, . . . , ;
?
, .
, - .
Betabrand , ,
( ):

Cordarounds[9]
, ,
. , Nordstrom.
, ,
-, , .

,
, , : Portland Trail Blazers, , Los
Angeles Clippers, ,
. , , , Betabrand.
,
, Trail Blazers , .
. ? : ,
.
, .
Betabrand , , , . ,
. .
, ;
.
, .

, , , . .
, ,
, . , , .

2.
, . , , . , ?
. . .

,
: .
:


.
.
, . , , , , , .
, . , , .
, . lingua franca[10] .


, . , , , .
. , [11], ,
, .
,
.
. , , , ,
, , . . , .
, , . , ,
! , , ,
. , , ,
.
,
.
, ,
. , . , .
, , , , . . A Biological Homage to Mickey Mouse
(-: ) , , , .
. , .
: Twitter, StickyBits (http://stickybits.com/), Brizzly (
http://brizzly.com; . 2.1) MailChimp (http://mailchimp.com).
, . , , .
. 2.1. Brizzly ,


, . ,
. , . , , , .

. .
.
, .
,
. , , ,
. ,
. ,
, , , iPod,
, .
The Elements of Typographic Style[12], , .
- .
Twitter, (. 2.2).
. 2.2. Twitter ,
. , .
, , .

. , , , , .

: ?
,
.
, , .
, , , ,
: - ,
. . . ,
( ?), ( , ?)
( ?).
, : ,
?
:
: , . .;
: .
,
- . , .
. , ( )
, , . (,
).
,
. , . , .
. . ,
tumblr (. 2.3)
. .
, ,
.

. 2.3. tumblr

. , , . , .
, ,
.


, tumblr,
.
, ,
.
. - ,
, ? , . :
, .
, .
, ,
. Tumblr
.
, . , .
Tumblr , . ,
- , . , .
, . ( , - .)
, , .


Tumblr .
, .
, . , .
- , .
(http://duplos.org) (. 2.4).

. 2.4.
, . ,
, . , - ,

. -, .
, , , , .


tumblr , ,
, - :
. , , ,
. , .
.
- , :
, , ,
, . , -
, , ? ,
, , .
Emotional Design ( ) [13],
, :

, , , .
? : , .
- . ,
, .
, , Apple.
Apple , .
.
. Apple ,
.
Apple ,
. , ,
. : Apple ,
.
2002 Apple Breathing Status LED Indicator.
, Mac, , Apple
, . Apple ,
, , .
. : 12 20 .
, .
, , .
Apple , ,

, .


, : . . , ,
. . ,
.
: , , , , . : , .
.
, , . , .
, ,
. ,
,
.

3.
,
, .
. ,
.
, .


, - (Human-Computer
Interaction, HCI) ,
. HCI , , ,
. ? -,
.
: - . , ,
, , . , , , , .
.
. , ,
. , , .
, . , -
. , , . ? , , , , ? , , - . , , . .
. . , . , .
, , .
,
, . .
, . , .


, ,
. XV , , , .
, .
; , . , .
, ,
. , ,
(. 3.1).

. 3.1. ,

XX ,
.
Volkswagen Beetle 1938 , 2003 ,
.
(. 3.2). .
Beetle , , ,
. , ,
. ,
, Beetle.
. 3.2. , Volkswagen
Beetle,

, , . . -

, Slug bug
red! Beetle (, The Love Bug[14]).
,
, .
Volkswagen Beetle , , ,
, Apple
Get a Mac. Maca , , PC . , , . , , Mac.
, ,
, , .


-, , , .
, . . .
, . 3.3, , messagefirst (http://messagefirst.com). . , , , , ,
, .
,
.

. 3.3.
, , , messagefirst .
. ,

,
.
, .
, , ,
, .
, , ,
,
, .
,
. ,
, ? , . , , .


, ? , ,
, , ? -, ?
, . , .
, -, ,
, .
, Get a Mac.
-, MailChimp, . .

: .
: :
?
: , , . .
, . , , . .
: - ,
, ,
.

.
:
XY. -

, , Y
.
: , ?
? ?
, . , .
: ,
. , - .
:
/ ,
. ,
, . mood board[15] (http://bkaprt.com/de/5
).
: , , , , .
.
. MailChimp,
-. , . , .

: MailChimp
: IV (. 3.4).
, , .
, .
, .
MailChimp . ,
. , ,
,
.
MailChimp ,
[16] YouTube.
, .
(. 3.4)
: , -. , . , . , . -

, . , . ,
.
(. 3.5)
: MailChimp , , . , .
MailChimp ( , ), ,
. MailChimp : dont do not,
. MailChimp --, , , ! , . .
: :
! .
: , , . :
. . .
:. , . ,
. MailChimp , .
. MailChimp , ,
. , , .
MailChimp , .
. ,
, . , .
.
.
: .
, .
, , -.
.
.
, .
. 3.4. IV, MailChimp

. 3.5. MailChimp
- MailChimp
http://aarronwalter.com/design-personas. .
- , ,
, .
,
. - ,
, .
, , ,

. , Tapbots,
Carbonmade Housing Works, , ,
,
, , .

Tapbots:
Tapbots (http://tapbots.com), iPhone, ,
(. 3.6).

. 3.6. Tapbot ,

Convertbot ( ) , Weightbot
.
, . .
, . ,
. . , .
iPhone, . :

-. ,
.
,
, , . ,
[17], .

, ,
, . - , :
, , .

Tapbots (http://bkaprt.com/de/6): ,
.
, .
, , . , , ,
. , , , ,
.
. Carbonmade
, , .

Carbonmade: ,
,
. ,
. ,
, .
,
.
Carbonmade (http://carbonmade.com) -, , [18].
(. 3.7), , .
. 3.7. Carbonmade ,

. , , .
:

,
.
. , .
, ,
. , , , -

!
Carbonmade -
[19]: , . ,
. . ,
. , Carbonmade , .

.
,
.

.
Carbonmade .
, , , .
Carbonmade,
. .
, , .

, Housing Works , .

Housing Works:
. .
Housing Works (http://housingworks.org) , . Housing Works
- . , .
2008 Happy Cog (http://happycog.com) Housing Works (. 3.8), .

. 3.8. Housing Works ,


, Housing Works, :

, Housing Works ,
, , .
. , , , .
, Housing Works , .
, .
.
, ,
.
, , . Housing
Works , , .


,
, . .
, , .
, -
, . ,
, .
, , , , , .
, , , .
, . .

4.
, . , , .
- . , ,
, .
. ,
, - - ? , - ,
? , ,
, , .


, , ,
, ? . -, . ,
.
, ,
.
, .
, .
, . , . , , .
. , .
, . ,
. ,
.
, .
Photojojo -
.

Photojojo:
Photojojo (http://photojojo.com) , . . - -

. , Photojojo .
Photojojo ,
. (
. 4.1), - , . , , , .

. 4.1. Photojojo , ,

Photojojo ,
, , . ; .
, Photojojo.
. ,
.
. ,
- -, . . , - ,
: , (. 4.2).
. 4.2. ,

, , ,
. ,
Photojojo, . !


. , :

. , , - . [20]
, , , ,
Flickr.
( )
, , .
Photojojo , . Photojojo , , . Photojojo .
Wufoo ? . , ,
, .

Wufoo:
-. Wufoo,
, , , ,
, . ,
, Wufoo
. , , , ,
. , Wufoo
. ,

- (. 4.3).

. 4.3. Wufoo
Wufoo . , .
: , .
, Twitter, Facebook Flickr. , Wufoo ,
,
.
, ,
, . , Wufoo , ,
, .
(, : .) .

. ,
,
. ? , . (, ?
.)

,
,
, ( ) . ,
. , , , .
. (, The Sims[21])
. .
, Super Mario Brothers[22], , . ,
. , .
, , ,
. , , . . - ,
, .
Twitter , : , , .
Twitter .

Twitter
2010 Twitter Twitter. Twitter , . .
-,
.
: Twitter
. ,
, .
, Dribbble (http://bkaprt.com/de/7) , 300 400 (. 4.4).
Dribbble , ,
. , .

. 4.4. Twitter
Dribbble 2010 ,
. GigaOm Mashable
, Twitter.
Twitter .
, , ,
. , !
Twitter (. 4.5) , twitter-, [23] #NewTwitter. . , , , , . ,
, .

. 4.5. Twitter 2010


, Twitter.
, , : Twitter (. 4.6).
Twitter
.
, .

. 4.6. , Twitter


Twitter - . , .
, . - , . , , . .
Twitter Facebook ,
. ,
,
.
, Twitter ,
. , ,
.
: ,
, ,
.


, .
, :
. , .
,

. Photojojo , . , ,
.
Dribbble, Twitter , ,
. . , ,
. ,
?

, , ,
. , .

MailChimp:
, , MailChimp. 2008 ,
. ( , , ,
)
.
,
. ,
IV, -
, YouTube (. 4.7). , , .
. 4.7. IV ,
, Microsoft Office 1997- 2003-?
, . ,
: ? ? :
, , . ( .) .

. Microsoft Office. , , , - . , .
, .
, .
, !
. , ,
, , , . , , , .
, , . (. 4.8) , .

. 4.8. MailChimp Twitter


,
(. 4.9).
. 4.9.

,
. , , , , . , , ,
.
, : ? ? !
. , .
,
. . , Groupon (http://groupon.com)
Scoutmob (http://scoutmob.com/), :
, , .
.
, , . .
, , -, . , , ,
. ,
, , ,
(. 4.10).

. 4.10. , ,
,

, , . (, ,
) .
, , .

. .
. .
, .
. ,
, .
, ,
. ,
. , ,
.
, , .
, , ,
, . , . :
MailChimp , , MailChimp.
, , , , , .


, . , , , , .
. . ,
, ,
, ,
.
, : . ,
, . , .
, ,
, . ,
. , ,
, .
. , , ?
, , .

5.
, ,
- , .
.
.
,
, . , ,
,
.
, ,
. ,
.
, . .
, , , . , .


, , .
, . , , . , , : ? , , . ? . , , . , , , .
. , . , ,
, . , ,
, . , , . , ,
-.
, ? , , , , . ,
. , ,
. , , .
.


, , . , , , ,
, , , , . ,
, . ,
.
, , (. 5.1
).

. 5.1. ,
, ,

, : , . , , .
, . ,
.

Mint:
Mint (http://mint.com) . , , . Mint
, .
Mint. , , ,
, ,
.
: (
)
.

Mint , :

. , , - .
, ,
.
Mint,
, Quicken TurboTax,
-. Mint 2006 , ,
37Signals. .
, .
, , . , Mint, .
, , Mint .
, . , Excel. , . , 2006
Gmail Basecamp. Mint , (. 5.2).

. 5.2. Mint ,

. Mint
.
(
), . Mint
, , ,
. Mint .
, Mint, ,
, . , Mint ,
, , ?

Grateful Dead? , . Mint , ,
, .
,
,
Mint:

. ,
.
,
. ,
.
, , , .
, , Mint ,
, .
Mint
, Mint ,
. 2009 Mint
Quicken. Mint , , , .
, ,
.

Dropbox:
. . , ,
. , , -

. , .
, Dropbox (http://dropbox.com) , , , 250
. , . ? Dropbox .
, . Dropbox,
, .
, . .
, , ,
, - Dropbox .
- , .
Dropbox . -, -
, .
, , , . Dropbox , .
Dropbox ,
, , . ,
Dropbox, (. 5.3).

. 5.3. Dropbox
. , ,
, : Dropbox ,
, .
, ,
250 . , Dropbox
, , ,

, . ,
Dropbox , .
, ,
. ,
(. 5.4), . ,
Twitter Facebook, .
, ,
, .
, .
, ?

. 5.4. Dropbox
,


,
. : , .
, . . , ,
, The Elements of
Content Strategy[24].
, , .
,
. , [25] .
Betabrand ? -, . Betabrand . , .
, , . Betabrand , .
Housing Works . , ,
,
.
,
. , .


, ? :

?
?
?
( , )?
, .
.
?
GoToMeeting (
http://gotomeeting.com). ,
.
:
?
?
, ?
? ? ?
, ,
? ? ?
, . , , ?
,
. , ? , .
- , , Dont Make Me Think[26]. , - , ,
-, .
, Silverback (http://silverbackapp.com), . ? , , .
,
. : , . , .

, , , , , , , , .
, ,
,
.
. :
, ,
, . ,
- . ,
,
.

6.
, - . ,
, .
,
, .
, , - , , , . , . - , , : , , , . .
,

, . , .
.
Flickr , . , .

Flickr:
2006 Flickr . , , , , ( ) .
: , .
Flickr . ,
, , . ,
, ; Flickr Pro (. 6.1).
. 6.1. 2006 Flickr ,

. 6.2. Flickr. ,
Pro-
, , . ,
(. 6.2). ( ), Flickr ,
, Pro-.

, , Flickr,
.
, , , , .
Flickr , . Flickr , ,
.

: ,
, . -
, , . ,
, , , , . Flickr (http://bkaprt.com/de/8).
, .
, .
, ,
, Flickr. ,
, .
,
, .
, , .
Flickr ,
,
.

Flickr
19 2006 Flickr , , . Flickr , , ,
. , , , . -, . , , -,
, .
, . - , , , , . , , . , . -

.

,
.
.
,
.
, , .
Memory is More Important Than Actuality ( ) , ,
, :

-, .
? . , , ,
.
. ? , . ,
. ,
, , .
. , .
,
, . , , . ,
.
, . , , , , .

7.
, . - , - , . , .

,
. ,
, . .
, , , , ( , . .). , , .
, . , , : ,
.
, , .
,
. : ,
- , ,
. ,
.

: CoffeeCup Software
,
. ( ) .

. CoffeeCup Software (
http://coffeecup.com) 2010 .
, CoffeeCup
. .
CoffeeCup, ,
.
(. 7.1). : . , , .
- CoffeeCup ,
Twitter (. 7.2).

. 7.1. CoffeeCup

. 7.2. -
Twitter Facebook,
: . CoffeeCup ,
. , . Facebook , :

, . . ,
.
CoffeeCup (
http://bkaprt.com/de/12):

. . , . ,
(10:15, ) ,
- !
- , ?
CoffeeCup .
3700, 55 !
. CoffeeCup Facebook 217 %,
Twitter 170 %.
CoffeeCup . ,
, , ,
. CoffeeCup ,
.
CoffeeCup ,
, ,
, . , , ,
, .
Blue Sky Resumes,
.

-: Blue Sky Resumes


, , . Blue
Sky Resumes (http://blueskyresumes.com) , , . 2010
- Squared Eye (http://squaredeye.com)
.
, Blue Sky
Resumes. : , . ,
- , .
Able Design (
http://designedbyable.com), Squared Eye , Blue Sky
Resumes , , . , Squared Eye ,

, -.
(. 7.3) , , , .

. 7.3. Blue Sky Resumes ,


, , , , Blue Sky Resumes , . :

, , ,
@font-face[27] .
. Blue Sky Resumes
.
, Blue Sky Resumes , , , . 15 % ,
15 %. 65 % , 85 %. 25 36
%.
, Blue Sky Resumes ,
. Blue Sky Resumes
.
, .
Blue Sky Resumes ,
-:

,
. , , .
50 %.
Blue Sky Resumes O, the Oprah Magazine , . Blue Sky?
,
. ,
. Blue Sky Resumes , .
Blue Sky Resumes Squared Eye . , .
.
Blue Sky Resumes , CoffeeCup Software
. .

:
, , CoffeeCup Software,
, , Blue Sky
Resumes. , . A List Apart, -, (
http://bkaprt.com/de/13). , , ,
.
,
.
MailChimp, . : ,
, .
, .

, - . ,
Twitter
.
, . , , .
: .
, , , , . , ,
, .
,
. , , -

, ,
-. , 0,007 %
. , , , MailChimp,
, . ,
.
:
, , . .
, ,
: .



. , , , , .
. , ? ,
? ,
-, .
, -
, . .
, , , - : , .
- , . , .
, . ,
. ,
, .
,
.

. ,
, ,
.
, , ,
. , ,
. ,
, .

,
, ,
, . , , , Google Site Optimizer (http://bkaprt.com/de/14), . , , .
, . ,
.

, Wufoo, Betabrand, Housing


Works, Mint, Flickr Blue Sky Resumes. , , , :
, .
.
, , . ,
. , ; , .
, , . ,
, , , , .
, . , ,
. , . ?
, , , .
. .
Arts and Crafts, ,
.

, , - .
Book Apart
.
, ,
, . ,
- ,
, , . , , .
,
. , .

. , .
. . ,
( ,
).
.
,
, , . , !
.
- .
.
, , ,
. ,
,
. . , .
, , . ,
. , , .

-
1
1. http://gettingreal.37signals.com/

3
2. http://www.flickr.com/photos/clagnut/4947389773
3. http://en.wikipedia.org/wiki/File: Bundesarchiv_Bild_146II732,_Erholung_am_Flussufer.jpg
4. http://www.webdesignerdepot.com/2008/12/why-mood-boards-matter/
5. http://daringfireball.net/linked/2009/04/02/designing-convertbot

4
6. http://dribbble.com/shots/14379-Profile

6
7. http://blog.flickr.net/en/2006/07/19/temporary-storage-glitch/
8. http://www.flickr.com/photos/14922438@N00/194463892/
9. http://www.flickr.com/photos/41225983@N00/193706751/
10. http://interactions.acm.org/content/?p=1226

7
1
1
.
http://www.coffeecup.com/forums/search/?q=%22Guess+I+could+have+waited+for+toda
y+if+all%22&in=81&type=contents&view=posts&search=true&button_search.x=54&butto
n_search.y=-106&button_search=true
12. http://www.alistapart.com/articles/understandingprogressiveenhancement/
13. http://google.com/websiteoptimizer
14. http://amzn.com/1592535879
15. http://getmentalnotes.com/
16. http://amzn.com/0465051367
17. http://amzn.com/0393334775
18. http://amzn.com/014303622X
19. http://amzn.com/030746086X
20. http://amzn.com/0979777747
21. http://amzn.com/0321607376
22. http://uxmag.com/design/beyond-frustration-three-levels-of-happy-design
23. http://uxmag.com/design/the-psychologists-view-of-ux-design
24. http://uxmag.com/design/organized-approach-to-emotional-response-testing
25. http://boxesandarrows.com/view/emotional-design


. : ,

. ,
, Universal
Principles of Design: 125 Ways to Enhance Usability, Influence Perception, Increase Appeal,
Make Better Design Decisions, and Teach Through Design (http://bkaprt.com/de/15).
, , .
Emotional Design (
http://bkaprt.com/de/17).
, , .
, How the Mind Works (
http://bkaprt.com/de/18) Descartes Error: Emotion, Reason, and the
Human Brain (http://bkaprt.com/de/19).
Different: Escaping the Competitive Herd (
http://bkaprt.com/de/20) ,
.
, , ,
. Brain Rules: 12 Principles for
Surviving and Thriving at Work, Home, and School (http://bkaprt.com/de/21).
, A Project Guide to
UX Design: for User Experience Designers in the Field or in the Making (
http://bkaprt.com/de/22).


. Mental Notes, : http://bkaprt.com/de/16
UXMag ,
. :
, Beyond Frustration: Three Levels of Happy Design:
http://bkaprt.com/de/23;
, The Psychologists View of UX Design: http://bkaprt.com/de/24;
, Organized Approach to Emotional Response Testing:
http://bkaprt.com/de/25.
Emotional Design with A.C.T.: Part 1
: http://bkaprt.com/de/26.
,
, , -,
, (
http://aarronwalter.com/tag/emotional-design).


MailChimp.
- .
The Web Standards Projects
InterACT (http://interact.webstandards.org). , ,
.

1
Bud,
. . .

2
Chief Executive Officer (.) .
.

3
Arts and Crafts , XIX . .

4
- 1995 2000 . 10 2000 , NASDAQ. - , .

5
: user experience designer. . user experience ,
.
. , . . .

6
. ,
( , ) .

7
AMC Pacer , American Motors
Corporation (AMC) 1975 . ,
. ,
.

8
,
.

9
. ,
Cornarounds corduroy (, ).
Sons of Britches ( , )
. .

10
Lingua franca , . , .
.

11
,
1799 . .

12
: . . .: . , 2006.

13
(1935) ,
-, - . , .

14
The Love Bug 1968 , .

15
Mood board , ,
.

16
(. Easter Egg) ,
, .
.

17
(. geek) , , , .

18
,
. - . : ,
.

19
,
, .

20
( . follower ) -
, .

21
The Sims , , , , .

22
Super Mario Brothers ( ), Nintendo 1985 . , .

23
Twitter,
.

24
: . . .: ,
, 2012.

25
.

26
: . . .: -, 2008.

27
@font-face
, .

Вам также может понравиться