Applying visual design principles to API design

Slide 1

Slide 1 text

Applying visual design principles to API design Matthew O’Riordan | CEO, Ably Realtime at DevRelCon ‘18 - London

Slide 2

Slide 2 text

Ably’s product is a realtime API I’m on the governing board of the OpenAPI Initiative, core team for AsyncAPI Ably Open Data Streaming Programme launching this month. Free realtime data for developers. Why I care about APIs 2 AsyncAPI

Slide 3

Slide 3 text

The visual design trap 3 Matthew O’Riordan | DevRelCon ‘18 - London

Slide 4

Slide 4 text

APIs are the primary interfaces your developers interact with 4 Matthew O’Riordan | DevRelCon ‘18 - London

Slide 5

Slide 5 text

Design matters. Even with APIs. 5 Design is Function Design amplifies your message First Impressions stick Matthew O’Riordan | DevRelCon ‘18 - London

Slide 6

Slide 6 text

6 #1 Design is Function Matthew O’Riordan | DevRelCon ‘18 - London

Slide 7

Slide 7 text

vs 7 Matthew O’Riordan | DevRelCon ‘18 - London

Slide 8

Slide 8 text

8 Matthew O’Riordan | DevRelCon ‘18 - London

Slide 9

Slide 9 text

9 #2 First impressions stick Matthew O’Riordan | DevRelCon ‘18 - London

Slide 10

Slide 10 text

vs 10 Matthew O’Riordan | DevRelCon ‘18 - London First impressions of an API and its design, will define how developers perceive you.

Slide 11

Slide 11 text

11 #3 Design amplifies your message through simplification Matthew O’Riordan | DevRelCon ‘18 - London

Slide 12

Slide 12 text

12 #773 Blah blah blah Matthew O’Riordan | DevRelCon ‘18 - London

Slide 13

Slide 13 text

API design is a new discipline 13 Uncharted = mistakes Matthew O’Riordan | DevRelCon ‘18 - London

Slide 14

Slide 14 text

Colour Balance Proximity Hierarchy Contrast Alignment 8 common visual design principles you need to know Repetition Space 14 Matthew O’Riordan | DevRelCon ‘18 - London

Slide 15

Slide 15 text

Colour Balance Proximity Hierarchy Contrast Alignment 8 6 common design principles you need to know Repetition Space 15 Matthew O’Riordan | DevRelCon ‘18 - London

Slide 16

Slide 16 text

8 6 Three common design principles you need to know 16 Matthew O’Riordan | DevRelCon ‘18 - London Hierarchy & Repetition Contrast & Balance Proximity & Space

Slide 17

Slide 17 text

Hierarchy & Proximity Flat structures are hard to discover Hierarchical APIs are more intuitive & self-documenting 17 Matthew O’Riordan | DevRelCon ‘18 - London

Slide 18

Slide 18 text

Contrast & Balance Lots of arguments affects balance and contrast negatively. Distil down to what’s needed for most use cases. Allow advanced features to be discovered without noise. 18 Matthew O’Riordan | DevRelCon ‘18 - London

Slide 19

Slide 19 text

Repetition & Space API surface area growth is a problem Consistency through repetition of methods. Overload and use Enum types to provide space in your APIs. 19 Matthew O’Riordan | DevRelCon ‘18 - London

Slide 20

Slide 20 text

● Live in the developer API mindset ● Use the three visual design principles ● Ensure your design becomes invisible. ● Apply the 80/20 rule to interfaces ● Reduce API surface area API Design Checklist 20 Matthew O’Riordan | DevRelCon ‘18 - London

Slide 21

Slide 21 text

Open Data Stream Programme 10 Matthew O’Riordan | DevRelCon ‘18 - London Early access at go.ably.io/open-data

Slide 22

Slide 22 text

Thank you! Design asset credits: Noun Project and Flaticon Follow me on Twitter @mattheworiordan Tweet your questions at me with #DevRelCon Find out more about our data streaming platform go.ably.io/dsx