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

Using WordPress’ Built-in Theme Capabilities for Better UX

Ross Johnson
August 24, 2013

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.

Ross Johnson

August 24, 2013

More Decks by Ross Johnson

Other Decks in Design


  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
  4. None
  5. None
  6. None
  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 /

  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 /

  29. I’ve written a few plugins 3.7designs.co / @37designs

  30. I’m an author The Six Layers of Design 3.7designs.co /

  31. I co-host WebAxe 3.7designs.co / @37designs

  32. I love and hate Website Users 3.7designs.co / @37designs

  33. None
  34. But we’re here to talk about User Experience 3.7designs.co /

  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 /

  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

  53. None
  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
  70. None
  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
  73. None
  74. None
  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
  78. None
  79. None
  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

  84. None
  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/
  92. None
  93. http://the-web-tech.blogspot.com/2010/03/funny-404-errors-its-my-turn.html

  94. Default 404 page

  95. None
  96. None
  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