10 UX Hacks for Open Source

10 minutes, 10 hacks! Using examples from Grafana OSS, Grafana Labs UX Designer Jess will show you ten things you can do to improve your project’s user experience even as a non-designer – ranging from color changes to user research.

Transcript

1. 10 UX hacks for your Open Source project 1
2. I hack Grafana’s UX for a living. 10 UX Hacks for your Open Source project | 2 You might already know Grafana –
3. accessibility That means improving 10 UX Hacks for your Open Source project | 3 ease of use joy of use
4. Check your color contrast Accessibility 1 10 UX Hacks for your Open Source project | 4
5. Example: Using Spectrum browser extension with local Grafana instance 10 UX Hacks for your Open Source project | 5
6. Use your software without a mouse Accessibility 2 10 UX Hacks for your Open Source project | 6
7. Example: Using Grafana with a keyboard 10 UX Hacks for your Open Source project | 7
8. Map out your information architecture Accessibility 3 10 UX Hacks for your Open Source project | 8
9. 10 UX Hacks for your Open Source project | 9 Put each function/page on a card Lay out the current structure Profit Question everything Home Dashboard Manage Playlists Snapshots 4 3 2 1
10. Talk to 5 unbiased users Ease of use 5 10 UX Hacks for your Open Source project | 10
11. Find users you don’t know and interview them! Everyone who is working on your software is biased. Want to get interviewed about Grafana? Talk to me! 10 UX Hacks for your Open Source project | 11
12. Lower the knowledge bar Ease of use 4 10 UX Hacks for your Open Source project | 12
13. 10 UX Hacks for your Open Source project | 13 Help and explain Wording Use hemingwayapp.com to simplify your copywriting Not all your users are developers – add help when things get technical.
14. Look at the user journey Ease of use 6 10 UX Hacks for your Open Source project | 14
15. 10 UX Hacks for your Open Source project | 15 Write out all steps of the user journey you can come up with Collect needs, questions and frustrations of your users Start improving Interview real users to expand the journey map 4 3 2 1
16. Give your software a design language Joy of use 7 10 UX Hacks for your Open Source project | 16
17. 10 UX Hacks for your Open Source project | 17 of limited colors and font styles Define a styleguide in a design system / pattern library Use atomic design
18. Look at microinteractions Joy of use 8 10 UX Hacks for your Open Source project | 18
19. Example: Trigger-feedback pairs for Explore live tailing 10 UX Hacks for your Open Source project | 19
20. Make your users feel your “Why” Joy of use 9 10 UX Hacks for your Open Source project | 20
21. Translate your vision into words, images, screens and functions. You all know why you are part of the open-source community. 10 UX Hacks for your Open Source project | 21
22. Do it better than the others Joy of use 10 10 UX Hacks for your Open Source project | 22
23. 10 UX Hacks for your Open Source project | 23 Easier to understand Just the right amount of functionality Sexier Better integration into existing workflows „Better“ can mean many things
24. 10 UX Hacks for your Open Source project | 24
25. There is still work to do at Grafana. 10 UX Hacks for your Open Source project | 25 Help me make Grafana even better with a user interview! Talk to me around this event or online: @jessover9000 @jess (Grafana public Slack) jessica.muller@grafana.com