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
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!
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.
21. 06. Main menu Top-level everything? And green background please!
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
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.
43. 09. Upselling Do not yell at me. Still no coffee.
45. Nope. Doesn’t work.
47. Disabled in free version. All of them.
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