Gerasimos Tsiamalos - Dashboard UX tips for Theme and plugin developers - WordCamp Athens 2016

Transcript

1. UX Tips
   For theme & plugin developers
   WordCamp Athens - Nov 19th, 2016
   Dashboard
   

   View Slide

2. 01. History
   For the newcomers
   History lesson @10.00am? Seriously now? *Yawn*
   

   View Slide

3. Version 1.01
   

   View Slide

4. Version 2.0
   

   View Slide

5. Version 2.5
   

   View Slide

6. Version 2.7
   

   View Slide

7. Version 3.2
   

   View Slide

8. Version 3.6
   

   View Slide

9. 02. UDL
   Universal Design Language. 404.
   Let’s use Comic Sans.
   

   View Slide

10. 03. Style guide
    There is one. Kinda.
    Which means that I can use Comic Sans deliberately. Cha-ching!
    

    View Slide

11. View Slide

12. View Slide

13. View Slide

14. standards.usa.gov
    Draft U.S. Web Design Standards
    No Comic Sans? Me sad :(
    

    View Slide

15. 04. Consistency
    Strive for it.
    Red Comic Sans. Everywhere.
    

    View Slide

16. 05. Different parts
    Different contexts.
    Hm. Comic Sans doesn’t work here. I’ll just use Lobster.
    

    View Slide

17. 06. Admin bar
    Modify it wisely.
    WHAT? Didn’t know that. Let’s add a big fat green UPGRADE TO PRO button up there.
    

    View Slide

18. View Slide

19. View Slide

20. View Slide

21. 06. Main menu
    Top-level everything?
    And green background please!
    

    View Slide

22. View Slide

23. View Slide

24. View Slide

25. Adding a top-level menu should
    only be considered if you really
    need multiple, related screens to
    make WordPress do something it
    was not originally designed to
    accomplish.
    “
    https://codex.wordpress.org/Administration_Menus
    

    View Slide

26. 07. Custom UIs
    Careful there.
    Stay Calm And Use Comic Sans
    

    View Slide

27. View Slide

28. View Slide

29. View Slide

30. View Slide

31. View Slide

32. View Slide

33. Advanced Custom Fields
    

    View Slide

34. 1. Use the style guide
    All right. Gonna use Comic Sans though. Just to spice things up a bit. You know, pizzaz.
    

    View Slide

35. 1. Use the style guide
    But, but my custom checkbox control looks better!
    2. Use the default input controls
    

    View Slide

36. 1. Use the style guide
    Default table styles look so boring. Comic Sans for the headings maybe? No?
    2. Use the default input controls
    3. Use existing conventions
    

    View Slide

37. 1. Use the style guide
    Tables are so ‘90s dude. I’m so gonna Flexbox the heck out of them.
    2. Use the default input controls
    3. Use existing conventions
    4. Do not reinvent the wheel
    

    View Slide

38. 08. Notifications
    Make good use of them.
    Can I have a cup of coffee please? It’s not a notification. I really want a cup of coffee.
    

    View Slide

39. View Slide

40. View Slide

41. View Slide

42. View Slide

43. 09. Upselling
    Do not yell at me.
    Still no coffee.
    

    View Slide

44. View Slide

45. Nope. Doesn’t work.
    

    View Slide

46. View Slide

47. Disabled in free version. All of them.
    

    View Slide

48. View Slide

49. View Slide

50. 1. A simple message/CTA will do
    OVER HERE! BUY NOW! HELLO? GO ON THEN. HIT THE BUY BUTTON.
    

    View Slide

51. 1. A simple message/CTA will do
    But we need the monies to make it awesomer
    2. Fully working free version
    

    View Slide

52. 1. A simple message/CTA will do
    2. Fully working free version
    3. Don’t include disabled sections
    This slide is available in the Pro version only. Upgrade now
    

    View Slide

53. 1. A simple message/CTA will do
    You just clicked on a disabled button. 3 more clicks like that and ve vill delete ze database.
    2. Fully working free version
    3. Don’t include disabled sections
    4. Don’t play tricks on users
    

    View Slide

54. 10. Common sense
    Or lack thereof.
    All asleep. Great. Let’s slowly leave the stage. Shhh…
    

    View Slide

55. Gerasimos Tsiamalos
    Web designer / Co-founder @cssigniter.com
    

    View Slide

56. Premium WordPress Themes & Plugins
    52,000+ happy customers*
    *Thankfully only a handful aren’t THAT happy.
    

    View Slide

57. Thank you!
    Questions? PRO ONLY
    

    View Slide