Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Designing interfaces that don't suck when your customers scale!

Designing interfaces that don't suck when your customers scale!

Customers come in all shapes and sizes. Some will use your products exactly as you intend while others will go way beyond your expectations. This is perfectly normal, possibly the price of success, but it can result in all kinds of problems that you didn't expect. Problems can range from terrible performance to usability issues where the user interface becomes useless. It can be surprising when a dashboard that looks great for ten records can be completely unusable when it displays a thousand records. This can be far more frustrating than a page that is simply slow to load.

Octopus Deploy, a friendly .NET deployment automation tool, has to contend with this problem. Some customers have a single project, and some have thousands. It's a challenge designing for everyone. This talk is all about thinking about scale when building and designing the user interface of your apps and web sites. We’ll review the lessons learned from growing Octopus Deploy and offer actionable tips that you can apply on the projects you're building right now. Techniques and patterns to display empty state, one thing, some things and too many things. This is still a work in progress so you'll see the good, the bad and the ugly. The goal of this presentation is to help you design your apps so they work great for all your customers.

Presented at the Brisbane .NET User Group
https://www.meetup.com/Brisbane-Net-User-Group/

Rob Pearson

July 18, 2017
Tweet

More Decks by Rob Pearson

Other Decks in Technology

Transcript

  1. Rob Pearson About me — Canuck — Aussie — Developer

    — ❤ Product Development — ❤ Happy Customers — ❤ Apple Products — Octopus Deploy by day — Side Projects by night @robpearson | octopus.com | #SneakPreview 2
  2. Have you ever used an app that becomes unusable once

    it scaled? @robpearson | octopus.com | #SneakPreview 3
  3. Agenda 1. Customers come in different sizes 2. Explore how

    to find problems in your apps 3. Designing Interfaces for too much data @robpearson | octopus.com | #SneakPreview 9
  4. Small — Small number of users — Small or known

    data sets — Use your product exactly as you intended — Product works perfectly! Image - https://mcdonalds.co.nz/sites/mcdonalds.co.nz/files/700x487_hero_bbq_cheeseburger_pdts.png 11
  5. Medium — Increasing numbers of users — Larger data sets

    — Increased complexity but things are still usable — Product is still working pretty well Image - https://mcdonalds.co.nz/sites/mcdonalds.co.nz/files/hero_hungerbusters_bigmac_0.png 12
  6. Large — High number of users — Large data sets

    — Diverse usage and some areas can become unusable — Product used in unexpected ways Image - https://mcdonalds.com.au/sites/mcdonalds.com.au/files/hero_pdt_value_au.png 13
  7. Image - Mastering Chaos - A Netflix Guide to Microservices

    - https://www.infoq.com/presentations/netflix-chaos-microservices 15
  8. Listen and Learn Our customers tell us! — Customer support

    — Email, Forums, Social Media — Bugs and feature requests @robpearson | octopus.com | #SneakPreview 19
  9. Listen and Learn We ask our customers — Hallway conversations

    — Watch your users use your app Alternately: — Walk through the app yourself — Analytics can also help @robpearson | octopus.com | #SneakPreview 20
  10. Review your existing applications Nine states of design by Vince

    Speelman — None (Empty state) — One — Some — Too Many @robpearson | octopus.com | #SneakPreview 21
  11. Approaches — Dashboards — Data Visualization — Seek pattern —

    Show pattern — 'Sticky' user interfaces — Tables @robpearson | octopus.com | #SneakPreview 24
  12. Dashboards and data visualization — Single purpose — Aggregate/Summarise —

    Group data logically — Important what you show/ don't show — A picture can say a thousand words — White space! @robpearson | octopus.com | #SneakPreview 26
  13. Seek Pa!ern Have the user ask for what they want

    — Pull model — User enters search criteria — User reviews search results Example: Google @robpearson | octopus.com | #SneakPreview 27
  14. Show pa!ern — Push Model — Search — Filters —

    Sorting — Grouping — Hide/Show — Cards Example: Outlook @robpearson | octopus.com | #SneakPreview 28
  15. 'Sticky' User Interfaces — Create a 'sticky' user interface —

    Remember customisations/search criteria — Support saving favourite searches/filters — This can be a huge time saver! Example: Google/YouTube @robpearson | octopus.com | #SneakPreview 30
  16. Tables — Show structured data — Filtering and Sort are

    inherent Example: Excel @robpearson | octopus.com | #SneakPreview 31
  17. Summary 1. Customers come in different sizes 2. Explore how

    to find problems in your apps 3. Designing Interfaces for too much data @robpearson | octopus.com | #SneakPreview 33