Share
Embed
Slide 1
Slide 1 text
John Athayde
www.meticulous.com
APIs Need UX Too
RVAJS
17 NOV 2022
@johnathayde
@[email protected]
Slide 2
Slide 2 text
API?
Slide 3
Slide 3 text
No content
Slide 4
Slide 4 text
No content
Slide 5
Slide 5 text
Application
Programming
Interface
Slide 6
Slide 6 text
{
"status": "OK"
}
Slide 7
Slide 7 text
No content
Slide 8
Slide 8 text
No content
Slide 9
Slide 9 text
UX
Slide 10
Slide 10 text
LEVEL OF SATISFACTION
THEY ATTAIN FROM USING IT
THE PROMPTNESS
WITH WHICH USERS LEARN TO USE SOMETHING
THE EFFICIENCY
THEY ATTAIN WHILE MAKING USE OF IT
REMEMBERHOW TO USE IT
HOW EASY IT IS FOR THEM TO
ERROR-PRONEIT IS
HOW
Slide 11
Slide 11 text
No content
Slide 12
Slide 12 text
User Journeys:
There’s So Much More than [product]
Slide 13
Slide 13 text
No content
Slide 14
Slide 14 text
No content
Slide 15
Slide 15 text
User Experience
Optimize user
fl
ows through the app
• Don’t interrupt the user’s
fl
ow
• User should know where they are at all times
• Reduce clicks to achieve a desired result
• Reduce friction in the experience
Slide 16
Slide 16 text
DEVELOPER EXPERIENCE
DX
Slide 17
Slide 17 text
User Experience
Optimize user
fl
ows through the app
• Don’t interrupt the user’s developer’s
fl
ow
• User Developer should know where they are at all times
• Reduce clicks calls to achieve a desired result
• Reduce friction in the experience
Slide 18
Slide 18 text
LET’S USE
AN API!
Slide 19
Slide 19 text
HTTP Response Code 200
Slide 20
Slide 20 text
HTTP Response Code 200
Message: File Not Found
Slide 21
Slide 21 text
HTTP Response Code 200
Message: Syntax Error
Slide 22
Slide 22 text
No content
Slide 23
Slide 23 text
Confusion & Delay
Slide 24
Slide 24 text
“Really Bad Portal” courtesy of Adam DuVander h
tt
ps://everydeveloper.com/developer-portal-audience/
Slide 25
Slide 25 text
Libraries/SDKs for Popular Languages
Slide 26
Slide 26 text
Developer Self Service
Slide 27
Slide 27 text
Clear Pricing Up Front
Slide 28
Slide 28 text
Clear Pricing Up Front
Slide 29
Slide 29 text
“Nothing changes user behavior
more than a pricing model.”
— Gi
ff
Constable
Slide 30
Slide 30 text
Provide a Free Trial
Slide 31
Slide 31 text
Provide a Free Trial
Slide 32
Slide 32 text
What’s the Status?
Slide 33
Slide 33 text
AUTH
Slide 34
Slide 34 text
Authorize Me!
API Keys OAuth Tokens JWT Tokens
Slide 35
Slide 35 text
Authorize Me!
API Keys OAuth Tokens JWT Tokens
Great for ge
tt
ing
started fast
Good for accessing
user data
Good for limiting
database lookups
Slide 36
Slide 36 text
Authorize Me!
API Keys OAuth Tokens JWT Tokens
Great for ge
tt
ing
started fast
Good for accessing
user data
Good for limiting
database lookups
Use if you’re only
building for developers
Use if you want easy
access without digging
through documentation
Use in concert with
OAuth to reduce
database lookups
Slide 37
Slide 37 text
h
tt
ps://zapier.com/engineering/static-webhooks/
Slide 38
Slide 38 text
(A Sendgrid Story)
Be conscious of
early decisions
Slide 39
Slide 39 text
“OAuth Butt”
“Many organizations unveiled their API but discover a certain
dilemma that makes them believe that they need to operate
outside of OAuth 2.0's standard to accomplish their goals. If
you
fi
nd yourself describing your API and saying something
like "We use OAuth 2.0, but with API keys," then you might be
an OAuth Bu
tt
. […] It makes it harder to integrate with your
API and as a result could hinder widespread adoption.”
— James Carr, Zapier
h
tt
ps://zapier.com/engineering/oauth-bu
tt
/
Slide 40
Slide 40 text
DOCUMENTATION
Slide 41
Slide 41 text
Credit to u/Deep-Ad591
Slide 42
Slide 42 text
No content
Slide 43
Slide 43 text
No content
Slide 44
Slide 44 text
No content
Slide 45
Slide 45 text
Getting Started Guides
Slide 46
Slide 46 text
IA
INFORMATION ARCHITECTURE
Slide 47
Slide 47 text
— usability.gov h
tt
ps://www.usability.gov/what-and-why/information-architecture.html
“Information architecture (IA) focuses on organizing,
structuring, and labeling content in an effective and
sustainable way. The goal is to help users find
information and complete tasks. To do this, you
need to understand how the pieces fit together to
create the larger picture, how items relate to each
other within the system.”
Slide 48
Slide 48 text
Good Documentation
Makes the World Go Round
• Ge
tt
ing Started Guide, ideally in each
language for which you have an SDK
• A clear place to ask questions
• ACCURATE up-to-date reference
• Sample applications
• Bonus: ongoing blog posts
Slide 49
Slide 49 text
ALL THE
LITTLE THINGS
Slide 50
Slide 50 text
No content
Slide 51
Slide 51 text
Working Copy/Paste Examples
Slide 52
Slide 52 text
No content
Slide 53
Slide 53 text
Version the API
Slide 54
Slide 54 text
Don’t kill features/versions without
understanding the implications
Slide 55
Slide 55 text
Docs with a Playground
Slide 56
Slide 56 text
CHECKLIST
Slide 57
Slide 57 text
#1
Version Your API
Slide 58
Slide 58 text
#2
Research Your User Flows &
Optimize Them for Good DX
Slide 59
Slide 59 text
#3
Write the Documentation
You Wish You Had
Slide 60
Slide 60 text
#4
Respond Accurately
& Gracefully To Errors
Slide 61
Slide 61 text
#5
Continuous Discovery with
Real Users Over Time
Slide 62
Slide 62 text
FINALLY:
“It Depends”
Slide 63
Slide 63 text
LEVEL OF SATISFACTION
THEY ATTAIN FROM USING IT
THE PROMPTNESS
WITH WHICH USERS LEARN TO USE SOMETHING
THE EFFICIENCY
THEY ATTAIN WHILE MAKING USE OF IT
REMEMBERHOW TO USE IT
HOW EASY IT IS FOR THEM TO
ERROR-PRONEIT IS
HOW
Slide 64
Slide 64 text
RESOURCES
Slide 65
Slide 65 text
h
tt
ps://www.apisyouwonthate.com
h
tt
ps://www.everydeveloper.com
Slide 66
Slide 66 text
DEVELOPERUX
Slide 67
Slide 67 text
John Athayde
www.meticulous.com
www.johnathayde.com
www.developerux.com
Thank you!
@johnathayde (twi
tt
er)
@[email protected]
[email protected]