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

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

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

A717e9d055b2284e573b2412e32f5397?s=128

WordPress Greek Community

November 19, 2016
Tweet

Transcript

  1. UX Tips For theme & plugin developers WordCamp Athens -

    Nov 19th, 2016 Dashboard
  2. 01. History For the newcomers History lesson @10.00am? Seriously now?

    *Yawn*
  3. Version 1.01

  4. Version 2.0

  5. Version 2.5

  6. Version 2.7

  7. Version 3.2

  8. Version 3.6

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

  10. 03. Style guide There is one. Kinda. Which means that

    I can use Comic Sans deliberately. Cha-ching!
  11. None
  12. None
  13. None
  14. standards.usa.gov Draft U.S. Web Design Standards No Comic Sans? Me

    sad :(
  15. 04. Consistency Strive for it. Red Comic Sans. Everywhere.

  16. 05. Different parts Different contexts. Hm. Comic Sans doesn’t work

    here. I’ll just use Lobster.
  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.
  18. None
  19. None
  20. None
  21. 06. Main menu Top-level everything? And green background please!

  22. None
  23. None
  24. None
  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
  26. 07. Custom UIs Careful there. Stay Calm And Use Comic

    Sans
  27. None
  28. None
  29. None
  30. None
  31. None
  32. None
  33. Advanced Custom Fields

  34. 1. Use the style guide All right. Gonna use Comic

    Sans though. Just to spice things up a bit. You know, pizzaz.
  35. 1. Use the style guide But, but my custom checkbox

    control looks better! 2. Use the default input controls
  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
  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
  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.
  39. None
  40. None
  41. None
  42. None
  43. 09. Upselling Do not yell at me. Still no coffee.

  44. None
  45. Nope. Doesn’t work.

  46. None
  47. Disabled in free version. All of them.

  48. None
  49. None
  50. 1. A simple message/CTA will do OVER HERE! BUY NOW!

    HELLO? GO ON THEN. HIT THE BUY BUTTON.
  51. 1. A simple message/CTA will do But we need the

    monies to make it awesomer 2. Fully working free version
  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
  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
  54. 10. Common sense Or lack thereof. All asleep. Great. Let’s

    slowly leave the stage. Shhh…
  55. Gerasimos Tsiamalos Web designer / Co-founder @cssigniter.com

  56. Premium WordPress Themes & Plugins 52,000+ happy customers* *Thankfully only

    a handful aren’t THAT happy.
  57. Thank you! Questions? PRO ONLY