Using WordPress’ Built-in Theme Capabilities for Better UX

Buried deep in the WordPress Codexs are easy to implement, usability enhancers that could benefit any theme. In this session we dive into basic UX methodologies before exploring how WordPress already has the functionality to accommodate core UX needs. With the information provided you can create more usable themes, happier users and a better web for all.

Transcript

1. Using WordPress’ Built In Capabilities for Better UX Ross Johnson / @3pointRoss 3.7designs.co / @37designs
2. I’m Ross Johnson Ross Johnson / @3pointRoss 3.7designs.co / @37designs
3. I like it when things are Easy Intuitive Simple Effortless 3.7designs.co / @37designs
7. 3.7designs.co / @37designs
8. 3.7designs.co / @37designs
9. 3.7designs.co / @37designs
10. 3.7designs.co / @37designs
11. 3.7designs.co / @37designs
12. 3.7designs.co / @37designs
13. 3.7designs.co / @37designs
14. 3.7designs.co / @37designs
15. 3.7designs.co / @37designs http://jingchen416.files.wordpress.com/
16. 3.7designs.co / @37designs
17. 3.7designs.co / @37designs
18. 3.7designs.co / @37designs
19. 3.7designs.co / @37designs
20. A bit about me... Ross Johnson / @3pointRoss 3.7designs.co / @37designs
21. I’m one of those mix breeds... Designer + Coder 3.7designs.co / @37designs
22. somebody stop me... I say “yes” way too much 3.7designs.co / @37designs
23. 3.7designs.co / @37designs Business Owner
24. 3.7designs.co / @37designs Met my biz partner and fiancé because of WordPress
25. Recently Demoted :( 3.7designs.co / @37designs
26. Degree Social Science Grew up pursuing Fine Arts Studied Computer Science 3.7designs.co / @37designs
27. I teach at Michigan State University 3.7designs.co / @37designs credit cseeman on Flickr
28. I co-run WPa2 and help organize WordCamp Detroit 3.7designs.co / @37designs
29. I’ve written a few plugins 3.7designs.co / @37designs
30. I’m an author The Six Layers of Design 3.7designs.co / @37designs
31. I co-host WebAxe 3.7designs.co / @37designs
32. I love and hate Website Users 3.7designs.co / @37designs
34. But we’re here to talk about User Experience 3.7designs.co / @37designs
35. User Experience Defined "User experience" encompasses all aspects of the end-user's interaction with the company, its services, and its products.” - Jakob Nielsen 3.7designs.co / @37designs
36. Why is user experience important? 3.7designs.co / @37designs
37. “Web sites are complicated pieces of technology, and something funny happens when people have trouble using complicated pieces of technology: they blame themselves.” - Jesse James Garrett 3.7designs.co / @37designs
38. “...It is user experience that forms the customer’s impression of the company’s offerings, it is the user experience that differentiates the company from its competitors, and it is the user experience that determines whether your customer will ever come back.” - Jesse James Garrett 3.7designs.co / @37designs
39. Steve Krug Says You know from your own experience as a Web user that paying attention to usability means less frustration and more satisfaction for your visitors, and a better chance that you’ll see them again. 3.7designs.co / @37designs
40. “If something is hard to use, I just don’t use it as much.” - Steve Krug’s Wife 3.7designs.co / @37designs
41. My take on user experience: User experience is a simple way to impact peoples lives in a beneficial way that also helps you or your clients business. - Ross Johnson 3.7designs.co / @37designs
42. What Makes Up User Experience? 3.7designs.co / @37designs
43. 3.7designs.co / @37designs Peter Moreville http://semanticstudios.com/publications/semantics/000029.php
44. Findable: We must strive to design navigable web sites and locatable objects, so users can find what they need. 3.7designs.co / @37designs Peter Moreville http://semanticstudios.com/publications/semantics/000029.php
45. When users visit a site, they’re often trying to find something. 3.7designs.co / @37designs
46. There are challenges to finding info. No sense of scale. No sense of direction. No sense of location. 3.7designs.co / @37designs Steve Krug, Don’t Make Me Think, pg. 57
47. This can be solved through Well Designed Navigation 3.7designs.co / @37designs
48. Navigation can help us: Find what we’re looking for. Know where we are. Anchor our location. Figure out what’s here. 3.7designs.co / @37designs
49. Navigation can help us: Find what we’re looking for. Know where we are. Anchor our location. Figure out what’s here. 3.7designs.co / @37designs
50. The Beer Dilemma 3.7designs.co / @37designs Steve Krug, Don’t Make Me Think, pg. 57
51. 3.7designs.co / @37designs
52. 3.7designs.co / @37designs
54. add_action( 'init', 'create_beer_styles' ); function create_beer_styles() { ! register_taxonomy( ! ! 'beer_styles', ! ! 'beer', ! ! array( ! ! ! 'label' => __( 'Beer Styles' ), ! ! ! 'rewrite' => array( 'slug' => 'beer-styles' ), ! ! ! 'hierarchical' => true, ! ! ) ! ); } 3.7designs.co / @37designs
55. 3.7designs.co / @37designs
56. Navigation can help us: Find what we’re looking for. Know where we are. Anchor our location. Figure out what’s here. 3.7designs.co / @37designs
57. 3.7designs.co / @37designs
58. 3.7designs.co / @37designs
59. <?php wp_nav_menu(); ?> <?php wp_list_pages(); ?> <li class="current-menu-item current_page_item"> <a href="http://demaria.stagedsite.net/markets/">Markets</a> </li> .current-page-ancestor, .current-menu-ancestor, .current_page_ancestor, .current-menu-item, .current_page_item { font-weight: bold; color: #000; } 3.7designs.co / @37designs
60. Navigation can help us: Find what we’re looking for. Know where we are. Anchor our location. Figure out what’s here. 3.7designs.co / @37designs
61. 3.7designs.co / @37designs
62. 3.7designs.co / @37designs
63. is_home(); is_single(); is_page(); is_tag(); is_day(); is_month(); is_year(); is_author(); is_term(); get_post_type(); the_title(); single_cat_title(); 3.7designs.co / @37designs
64. <?php function the_breadcrumb() { echo '<ul id="breadcrumbs">'; if (!is_home()) { echo '<li><a href="'; echo get_option('home'); echo '">'; echo 'Home'; echo "</a></li>"; if (is_category() || is_single()) { echo '<li>'; the_category(' </li><li> '); if (is_single()) { echo "</li><li>"; the_title(); echo '</li>'; } } elseif (is_page()) { echo '<li>'; echo the_title(); echo '</li>'; } } elseif (is_tag()) {single_tag_title();} elseif (is_day()) {echo"<li>Archive for "; the_time('F jS, Y'); echo'</li>';} elseif (is_month()) {echo"<li>Archive for "; the_time('F, Y'); echo'</li>';} elseif (is_year()) {echo"<li>Archive for "; the_time('Y'); echo'</li>';} elseif (is_author()) {echo"<li>Author Archive"; echo'</li>';} elseif (isset($_GET['paged']) && !empty($_GET['paged'])) {echo "<li>Blog Archives"; echo'</ li>';} elseif (is_search()) {echo"<li>Search Results"; echo'</li>';} echo '</ul>'; } ?> http://cazue.com/articles/wordpress-creating-breadcrumbs-without-a-plugin-2013 3.7designs.co / @37designs
65. Navigation can help us: Find what we’re looking for. Know where we are. Anchor our location. Figure out what’s here. 3.7designs.co / @37designs
66. 3.7designs.co / @37designs
67. 3.7designs.co / @37designs
68. <?php $markets = get_terms('markets'); foreach ($markets as $market) { echo ‘<li><a href=’.$market->slug.’>’.$market->name.’</li>’; } ?> 3.7designs.co / @37designs
69. <?php $markets = get_terms('markets'); $current_market = get_query_var(‘markets’); foreach ($markets as $market) { ?> <li <?php if($current_market == $market->slug) { echo ‘class=”active”’; ?>> <a href=’.$market->slug.’>’.$market->name.’ </li> <?php } ?> 3.7designs.co / @37designs
71. wp_list_pages(); 3.7designs.co / @37designs
72. <?php $children = wp_list_pages('title_li=&child_of='.$post->ID.'&echo=0&depth=2'); if($children): ?> <ul class=”section-navigation”> <?php echo $children; ?> </ul> <?php endif; ?> 3.7designs.co / @37designs
75. 3.7designs.co / @37designs Peter Moreville http://semanticstudios.com/publications/semantics/000029.php
76. Usable and Learnability: How easy is it for users to accomplish basic tasks the first time they encounter the design? 3.7designs.co / @37designs Jakob Nielsen - http://www.nngroup.com/articles/usability-101-introduction-to-usability/
77. Sitemaps: “New user testing of site maps shows that they are still useful as a secondary navigation aide, and that they're much easier to use than they were during our research 7 years ago.” Jakob Nielsen - http://www.nngroup.com/articles/site-map-usability/ 3.7designs.co / @37designs
80. Search: “On average about 14% of users started with search. There was a fair amount of variability in the data with a low search percentage by task of 2% and high of 75%. ” Measuring Usability - http://www.measuringusability.com/blog/search-browse.php 3.7designs.co / @37designs
81. get_search_form(); 3.7designs.co / @37designs
82. <h1>Search Results for: ‘<?php the_search_query(); ?>’</h1> <p>You searched for <strong>’<?php the_search_query(); ?>’</strong> and the search returned <?php echo $wp_query->found_posts; ?> items. Here are the results:</p> 3.7designs.co / @37designs Graham Armfield, Simple Usability Tweaks for your WordPress Theme - http://www.slideshare.net/coolfields/wordpress-usability
83. 3.7designs.co / @37designs
85. Perceived Affordance: The property of an object or system’s action possibilities being easily discoverable. 3.7designs.co / @37designs -- Don Norman
86. 3.7designs.co / @37designs
87. 3.7designs.co / @37designs
88. 3.7designs.co / @37designs
89. 3.7designs.co / @37designs
90. 3.7designs.co / @37designs
91. Usability and Error C orrection: How many errors do users make, how severe are these errors, and how easily can they recover from the errors? 3.7designs.co / @37designs Jakob Nielsen - http://www.nngroup.com/articles/usability-101-introduction-to-usability/
93. http://the-web-tech.blogspot.com/2010/03/funny-404-errors-its-my-turn.html
94. Default 404 page
97. 404.php http://codex.wordpress.org/Creating_an_Error_404_Page 3.7designs.co / @37designs
98. http://alistapart.com/article/perfect404
99. 3.7designs.co / @37designs Peter Moreville http://semanticstudios.com/publications/semantics/000029.php
100. Accessible: Just as our buildings have elevators and ramps, our web sites should be accessible to people with disabilities (more than 10% of the population). 3.7designs.co / @37designs Peter Moreville http://semanticstudios.com/publications/semantics/000029.php
101. 3.7designs.co / @37designs
102. 3.7designs.co / @37designs Really?
103. Quick ways to improve accessibility: 1. Use “skip links” 2. Use WAI-ARIA roles 3. Use ALT tags 4. Install WP-Accessibility Jakob Nielsen - http://www.nngroup.com/articles/site-map-usability/ 3.7designs.co / @37designs
104. <p><a href=”#content”>Skip to Content</a></p> <ul id=”main-navigation”> <li><a href=”/”>Home</a></li> <li><a href=”/about”>About</a></li> <li><a href=”/services”>Services</a></li> <li><a href=”/portfolio”>Portfolio</a></li> <li><a href=”/contact”>Contact</a></li> </ul> <div id=”content”> <h1>About Us</h1> ... 3.7designs.co / @37designs Skip Links
105. <nav id=”primary” role=”navigation”> ... </nav> <div id=”content” role=”main”> ... </div> <aside id=”secondary” role=”complementary”> ... </aside> <div id=”search” role=”search”> ... </div> <h2 id=”logo” role=”banner”>WordCamp Grand Rapids</h2> 3.7designs.co / @37designs WAI-ARIA Roles
106. 3.7designs.co / @37designs Use alt text
107. 3.7designs.co / @37designs Use WP-Accessibility http://wordpress.org/plugins/wp-accessibility/
108. “What makes people passionate, pure and simple, is great experiences. If they have great experience with your product and they have great experiences with your service, they’re going to be passionate about your brand, they’re going to be committed to it. That’s how you build that kind of commitment.” - Jesse James Garrett 3.7designs.co / @37designs
109. Thank Y ou! Ross Johnson / @3pointRoss 3.7designs.co / @37designs