Programmers
can UX too

Avoiding the Programmer's
User Interface

ERYN O’NE| L - @eryno
Hi,  I'm Eryn.
I make websites.
I am not a UX
professional.
I am not a UX
professional. 

I am a programmer.
Good software is
software that people
want to use,  and want
to keep using.
WHY ME? 

Because programmers
need to care-deeply-about
the interfaces they write.
The best software happens
when everyone on the
team feels ownership of
the user interface.
Today we'll talk about: 

(in no particular order)

.  UX ‘F

Practical ways to How to work Some red flags
make your users...
WHY CARE?
Where do you live? 

Front end
or

Back end?
spoiler alert: 

If no one can use
your software,  no
one cares about it.
WHY US? 

Programmers are uniquely
capable of having opinions on
interfaces because we are the

ones who make them.
All software has
USERS. 

Yes,  even APls,  bash utilities,  and
internal tools.
What is the
“PROGRAMMER’S lNTERFACE”

anyway?
as Fi! '='hl= Jiri, t 2' FrivJuy,  Inlay 0’).  2003 [I2-'}) :1 6:57:29 Pia‘.  [-3512,] 2' : 'U‘u'u'.  'J2U. U MES l_'3‘l'l...
wGetGUI V1.0 |  You are using GNU Wget 1.9-beta - 1.7 is minimum. 

- Hosts

~ Accept/ R eiect
t" Acceptfo‘ Reject: 

I7 h...
Q Q 6 Terminal

219(1)
ZIP(1)

NAME
zip - package and compress (archive) files

SYNOPSIS
zip [-aABcdDeEfFghjklLnoqrRSTuvVu...
i-‘ Bulk Rename Utility - I:  I 1]

File Actions Options Help

     
 
 
 
 
 
   
 
  

 
  
   
 
     
   
  
   
   

...
(Here is a palate cleanser. )
How can we
DO BETTER?
How can we DO BETTER? 

The programmer's interface
happens when you try to
design an interface at the

same time that you'...
How can we DO BETTER? 

UX First.
How can we DO BETTER? 

UX First. 

. ..and third. ..and fifth
How can we DO BETTER? 

Negative taste
&

Positive taste

Aaron Swartz,  “Two Conceptions of Taste",  http: //www. aaronsw...
How can we DO BETTER? 

USER CENTERED DESIGN

“A process in which the needs,  wants, 
and limitations of the end users of ...
How can we DO BETTER? 

USER CENTERED DESIGN

Analyze

 

Implement
There is no one true
UNIVERSAL UX.
H hTc one

Universal - Make it Mine
Human - Stay Close
Clean - Discover the
Consistent Um-‘XP9Cted
Useful

Fast

Transpare...
How can we DO BETTER? 

Don't reinvent the

wheel.
How can we DO BETTER? 

PATTERN MATCH
How can we DO BETTER? 

PATTERN MATCH

Usefully
PATTERN MATCH Usefully. 

Llama Lemur Olive
Lemon Orange Orangutan
Lollipop Octopus Ocelot

Lynx Labrador Licorice
PATTERN MATCH Usefully. 

Llama Lemur Labrador
Lynx Ocelot Orangutan
Lollipop Octopus Olive

Lemon Orange Licorice
How can we DO BETTER? 

Protect your users.
How can we DO BETTER? 

Don't expect
people to read.
How can we DO BETTER? 

Avoid surprising
behavior.
How can we DO BETTER? 

Watch people use
your software.
How can we DO BETTER? 

Watch people use
your software. 

. ..and believe your users.
How can we

WORK BETTER WITH THE
UX PROFESSIONAL IN
OUR LIVES?
The developer's job is
to think about how
the implementation

will affect the UX.
How to work with UX PROS? 

ll 7,

“Yes,  but. ”
How to work with UX PROS? 

Know your limits. 
Defer.
How to work with UX PROS? 

(Don't have UX people?  That's
fine.  Grab your coworker.  Grab
your friend.  Grab a few bucks...
The users‘ experience
depends on everyone
on the team. 

None of us is as good as all of us.
THAN KS! 

eryn. oneil@gmai| .com
@eryno
Programmers Can UX Too
Programmers Can UX Too
Programmers Can UX Too
Programmers Can UX Too
Programmers Can UX Too
Programmers Can UX Too
Programmers Can UX Too
Programmers Can UX Too
Upcoming SlideShare
Loading in …5
×

Programmers Can UX Too

6,702 views

Published on

Programmers have a bad reputation when it comes to UX, but it’s time to set the record straight: It isn’t because we don’t care! It’s because we fall in the trap of thinking we can design a user interface and write it at the same time when, the truth is, these processes require different kinds of thinking. But learning how to unlock that part of your brain is worth it– and you’ll be surprised at what you already know. From one developer to another, this talk will discuss why you should think critically about the interfaces you write and give you some strategies you can start applying right away.

This talk is aimed at developers, both front-end and server-side, who implement user interfaces but may not have training in UX. And the truth is, ALL programmers implement user interfaces; sometimes the user is another developer (in the case of an API) or a more advanced user (for a command-line tool), but all software has its users.

Published in: Software, Technology
0 Comments
32 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
6,702
On SlideShare
0
From Embeds
0
Number of Embeds
469
Actions
Shares
0
Downloads
156
Comments
0
Likes
32
Embeds 0
No embeds

No notes for slide
  • The picture on the programs is out of date, so, that’s what I look like.
  • Design patterns exist for UX, too.Convention enhances discoverability, reduces confusion. EX: “Play” icon on images that indicate video.Graphic: wheel. Video.
  • Graphic: shopping cart or eyebobs glasses
  • Programmers Can UX Too

    1. 1. Programmers can UX too Avoiding the Programmer's User Interface ERYN O’NE| L - @eryno
    2. 2. Hi, I'm Eryn.
    3. 3. I make websites.
    4. 4. I am not a UX professional.
    5. 5. I am not a UX professional. I am a programmer.
    6. 6. Good software is software that people want to use, and want to keep using.
    7. 7. WHY ME? Because programmers need to care-deeply-about the interfaces they write.
    8. 8. The best software happens when everyone on the team feels ownership of the user interface.
    9. 9. Today we'll talk about: (in no particular order) . UX ‘F Practical ways to How to work Some red flags make your users‘ with the UX (or code smells? ) experiences professional in for when your UI better. your life. needs love.
    10. 10. WHY CARE?
    11. 11. Where do you live? Front end or Back end?
    12. 12. spoiler alert: If no one can use your software, no one cares about it.
    13. 13. WHY US? Programmers are uniquely capable of having opinions on interfaces because we are the ones who make them.
    14. 14. All software has USERS. Yes, even APls, bash utilities, and internal tools.
    15. 15. What is the “PROGRAMMER’S lNTERFACE” anyway?
    16. 16. as Fi! '='hl= Jiri, t 2' FrivJuy, Inlay 0’). 2003 [I2-'}) :1 6:57:29 Pia‘. [-3512,] 2' : 'U‘u'u'. 'J2U. U MES l_'3‘l'l/3 MEI) , lg 41 work Column file _Iiewer ml‘-‘Ls SystemTools Iools §ites Favorites ljelp ‘_ V Documents (2) Pictures (3) Videos (4) Music (5) Books (6) Kits (7) Downloads (8) Favorites (9) Backup (10) Programs (11) This (12) CD (13) Temp (14) 15 16 17 16 19 20 Fix Weld Thumb Part SysL Fix Weld 1» V Part SysL , Weld Thumb Part SysL A—Ha ~ Crying in the rain. mp3 « Vl. oc VI-lyVstV Prev toad LVoVc I-VlVyVst PVrVVev toVaVdV Loc Hyst Prev Load Alphaville - Big In Japan. mp3 Pictures]. . AVGWSI ALPHAVILLE - Forever Young. mp3 3‘ iBPMF_001_000#[J00_00l_ gif ‘ SystemToo| s ***” 1 ANTIQUE . Dinata [)inaI; a_mp3 IW 75 X H 75; Z 94%. 52 3.1 KB . 5Y5t9mT00'S93 ‘ANTIQUE - Opa 0pa. mp3 ANTIQUE - Se Thel| o.mp3 Backstreet Boys - Shape Of My Hea Backstreet_Boys_Larger_than_life. r BERLIN - Take My Breath Away. mpE BINGOBOYS - No Communication. mI: ‘ Britney_Spears_Baby_one_more_tir Send me an email-url Britney_Spears_I_did_it_again. mp3 _Britney_Spears_U_drive_me_cra2y. 3 SongsP| ayList. mp| . Visit "IV Site-UV] Celine Dion - My Heart Will Go 0n. m Fi| eMatri><-exe-manifest CHARLES SHAW - Girl You Know It's FILEHETRIX Ijflepeat 1‘ D“! New Zeeland A Space = 1‘ '‘IEarth. mpg ‘i _ ‘x3PMr, oozvo0oarooo, oui. c_ gif Iw 75 x H 75,- 2 94%. 52 4.0 KB * YOU MUST READ the "License terms" topic so that you can consider you have a. license (registered or not) to use and distribute the program. Files 22 Encrypted 0 Se| Num 0 Se| Sz 0 Tota| Sz 1.8 MB PartSz 7.9 GB (30.4 GB) PartAttr CEQRp5Sf IVndexV11 Sz 1.6VKB (0) Attr A V HI. 1 SC 0 Tit| §E3IProVgr3m Fi| esIfilematrixIEdit. |nk Mod Suhday, March 09, 2003 (60); 6:46:20VPM (675) Desc "The target program is used by the "Edit" function" Type P 52 196.0 KB (0) Attr A Title E: IProgram Fi| es'IWindows NTIAccessoriesIwordpad. exe Mod Thursday, August 29, 2002 (241); 4:41 :28 AM (" Param "%n°/ o" Work none I Locate Search I I_I$cyc| eI Delete I IClose viewer MPL I I0ptionsI 20 ‘ 2 3 3 3 6 Hightlight Low light Options are NOT save ' the unregistered version ' k to QEGISTER so that all options would be save Current file "E: 'I, Program Fi| esIfilematrix'IEdit. |nl€'. [Double LMB] = Run ([Ctr| ] = automove to left; [Shift] = autoopen to right; [Alt] = autohold). [RMB] = View. [MMB] = Edit. [LMB + Drag] = File-drag menu. [RMB + Drag] = Set with source path. Drop files from another program to display the "External File Drag" menu.
    17. 17. wGetGUI V1.0 | You are using GNU Wget 1.9-beta - 1.7 is minimum. - Hosts ~ Accept/ R eiect t" Acceptfo‘ Reject: I7 htm[| ] I7 gif I7 trrt Special Retries: '13 Additional Parameters: I7 Act like a browser I7 Convert links I7 lgnorerobotstr-rt Configure Pro: -ry I um: I ELI Running Options I7 Go 2 background I7 Noinfo I7 All info I7 Some info I7 Append to logfile I7 Overwrite Logfile LOQIIIB3 Idefaultlog 55“ L°a" About Exit settin s settin s - Start wGetStart. bat I Add to wGetStart. batI Empty wGetStart. batI - Retrieval Options I7 No clobber I7 Timestamping I7 Continue file download Quota [kB]: Ir I7 Spider [check for files] I7 No directories I7 Force directories I7 Save to custom dir: I7 Clear Server Cache I7 Recursive Retrieval Depth: '7 I7 Down| oad"as-is" I7 Mirror site I" add HTML suffix I7 Only go deeper
    18. 18. Q Q 6 Terminal 219(1) ZIP(1) NAME zip - package and compress (archive) files SYNOPSIS zip [-aABcdDeEfFghjklLnoqrRSTuvVuxyzl@$] [--longoption . ..] [-b path] [-n suffixe e] [-tt date] [zipfile [file . ..]] [-xi list] zipcloak (see separate man page) zipnote (see separate man page) zipsplit (see separate man page) Note: Command line processing in gig has been changed to support long options and options and arguments more consis- tently. Some old command lines that depend on command line inconsistencies may no k. DESCRIPTION gig is a compression and file packaging utility for Unix, VHS, MSDOS, OS/2, win / XP, Minix, Atari, Macintosh, Amiga, and Acorn RISC 05. It is analogous to a combination of the Unix commands ta; (1) and co and is compatible with PKZIP (Phil Katz's ZIP for MSDOS systems).
    19. 19. i-‘ Bulk Rename Utility - I: I 1] File Actions Options Help 1oos23chanwgam—+- lam 100927-‘WW "flldelhierstes-photo. JPG Oldelhierstes-photo. JPG JPGF. .. 2MB 21.11.. 11 ‘°‘“°7"°1a'3"“Va"d*‘" ’ :02delhHmbau. JPG 02delhHmbau. JPG JPG F. .. 3MB 21.11.. . 11. "03delhieis. JPG 03delhieis. JPG JPGF. .. 2MB 21.11.. 11. 1o1D31_Uda1pu1G°a : :04delhivven1i| a’tor. JPG O4delhi—venti| ator. JPG JPGF. .. 3MB 21.11.. . 11. 1011112603 V: ([I: <‘deI: inortl1Iem«paIace1‘e. .. II: jeII: i-r1ortl1Iem-paIace-fens. .. . ‘ e inort empaaceve. .. e i-nort em-paacevversi. .. . . :: ::: ;:: Vb1°g 7:07-delhihumuyans-tomb. JPG 07-delhihumuyans-tomb. JPG JPGF. .. 2MB 21.11.. . 12. F--1111131011 Jfl "D8-delhi-eichhoemchen. JPG 03delhieichhoemchen. JPG JPGF. .. 2MB 21.11.. 3 D I Remove mew flI——Add r7)—i7 R Auto Date (s)—r7 i=1_I—rrumberrng (mew EI- First n I07 Last n I07 PIBIIX W Mode I Mode at IT With F From I37 to IT IP36" 7- Type I Start | ncr. r : I P Match Case Eh“ I: WOICIS I—7 at pos. Fmt DMY v Pad 0 SBIIIZ , riIe(2)—I7 R Case(4H7 R Crop IBelore VI #7 51111111 IT Sen I— Seg1I— BreakIT : F Folder Name IEI Same , I7 Digitsl7 High I7 Trim Custom T Type IBase10[Deeima| ] vI F D/ S I7 Accents I7 Chars I E1-rcep. I 1- 511m Lead Dots Ij I- Dent. 0111 IT Floman Numerals INone VI —MovelCopy (6) I7 flI: Append Folder Name 191?? flI: —Extension (11)ei7 EF INone VI None V 389. Name INone VI5°P~I7_ I-PVPISIT ISame VI — Selections (12) V 1 R New Location (the R FIB, I—‘—. I7 Folders 1‘ Hidden Name Len Min Iu— Max F p. -.11. jI KI 1- March ease I7 Files 1‘ Sublolders Path Len Min I0 : IMax ID I” Copy notMove Fievert *" Working on multiple computers? Synchronize your files across computers with ViceVer: a PFIO. Click Here To Find Out More F Word Space 187 Objects (0 Selected] Favourite D: biIder2010-Max-Indiendia-abend. b|og
    20. 20. (Here is a palate cleanser. )
    21. 21. How can we DO BETTER?
    22. 22. How can we DO BETTER? The programmer's interface happens when you try to design an interface at the same time that you're writing it.
    23. 23. How can we DO BETTER? UX First.
    24. 24. How can we DO BETTER? UX First. . ..and third. ..and fifth
    25. 25. How can we DO BETTER? Negative taste & Positive taste Aaron Swartz, “Two Conceptions of Taste", http: //www. aaronsw. com/ weblog/ Ztaste
    26. 26. How can we DO BETTER? USER CENTERED DESIGN “A process in which the needs, wants, and limitations of the end users of a product are given extensive attention at each stage of the design process. " Wikipedia, “User-Centered Design" http: //en. wikipedia. org/ wiki/ User-centered_design
    27. 27. How can we DO BETTER? USER CENTERED DESIGN Analyze Implement
    28. 28. There is no one true UNIVERSAL UX.
    29. 29. H hTc one Universal - Make it Mine Human - Stay Close Clean - Discover the Consistent Um-‘XP9Cted Useful Fast Transparent Luke Wroblewski, “Developing Design Principles", http: //www. Iukew. com/ ff/ entry. asp?854
    30. 30. How can we DO BETTER? Don't reinvent the wheel.
    31. 31. How can we DO BETTER? PATTERN MATCH
    32. 32. How can we DO BETTER? PATTERN MATCH Usefully
    33. 33. PATTERN MATCH Usefully. Llama Lemur Olive Lemon Orange Orangutan Lollipop Octopus Ocelot Lynx Labrador Licorice
    34. 34. PATTERN MATCH Usefully. Llama Lemur Labrador Lynx Ocelot Orangutan Lollipop Octopus Olive Lemon Orange Licorice
    35. 35. How can we DO BETTER? Protect your users.
    36. 36. How can we DO BETTER? Don't expect people to read.
    37. 37. How can we DO BETTER? Avoid surprising behavior.
    38. 38. How can we DO BETTER? Watch people use your software.
    39. 39. How can we DO BETTER? Watch people use your software. . ..and believe your users.
    40. 40. How can we WORK BETTER WITH THE UX PROFESSIONAL IN OUR LIVES?
    41. 41. The developer's job is to think about how the implementation will affect the UX.
    42. 42. How to work with UX PROS? ll 7, “Yes, but. ”
    43. 43. How to work with UX PROS? Know your limits. Defer.
    44. 44. How to work with UX PROS? (Don't have UX people? That's fine. Grab your coworker. Grab your friend. Grab a few bucks and go to UserTesting. com. )
    45. 45. The users‘ experience depends on everyone on the team. None of us is as good as all of us.
    46. 46. THAN KS! eryn. oneil@gmai| .com @eryno

    ×