User Experience in the Real World

Presentation by Clark Wimberly

Links/slides from presentation here: http://clarklab.com/talks/user-experience

Pros and cons of common UX blunders

What is UX?

  • What a user experiences
  • study of rules
  • guiding emotions
  • worth their time

UI vs UX

  • UI = User interface – what the user interacts with. Buttons, etc.
  • User Experience – how the interface makes them feel
  • Married but not the same

Paywalls – generally a bad user experience

  • Pros:
    • Registered user
    • who can we spam
  • Cons:
    • another registration for a user
    • they can spam me
  • Business goals can go against user experience
  • Can cause users to leave

Having a page with a slideshow/multiple pages/lots of content to click through

  • Pros:
    • pageviews
  • Cons
    • no one likes clicking
    • users won’t see content
    • harder to author
  • Solutions:
    • Don’t do it
    • View as one page
    • if you want page views, force reload
    • Lazy load plugins to help with bandwidth-heavy sites
    • Sub-navigation/table of contents – can work, but make sure it’s apparent what it is

Social lockers

  • Idea: hold desirable content hostage for likes, subscriptions, etc.
  • Pros:
    • Fans! Followers
  • Cons:
    • Annoying
    • Look like an awkward shill
    • Hit and runs
  • Solutions:
    • Generate value with social
    • Interact with followers
    • Treat it like a subscription service
    • share with @mentions and #hashtags and +names
    • Look for organic activity
    • Keep social interesting and then market to them… don’t market 100% of the time
    • If you use a lot of hashtags you’re probably doing it wrong

Newsletters

Idea: get a bunch of emails and get inside their inbox

  • Pros:
    • Pageviews! Opens!
    • Connect with fans – Great way to give fans an inside scoop
  • Cons:
    • Possibly annoying
    • Look like an awkward shill
    • Breaking the law if you do it wrong
  • Solutions:
    • Be useful
    • Easy to unsubscribe
    • Respect method of email collection
    • Don’t buy lists (or sell, or transfer)
    • Use the email list for what you tell subscribers it’s for – don’t change it up on them
    • Build trust and you might get whitelisted

Accessibility

Idea: make sure that everyone that wants to use your website can. Can be both dealing with physical impairments, but also can mean devices

Responsive design

  • Solutions
    • Use a responsive theme
    • Use a responsive plugin (Jetpack)
    • If neither of those are an option, at least make sure your desktop site isn’t broken so the site can be zoomed in and out, avoids flash
  • Gotchas
    • Readability
    • Image/page weight
    • Performance

Storyboards

  • Visualize the customer/user experience
  • Pros
    • You can get in the user’s head
    • Optimize the flow
    • Concrete goals for planning and arguments
  • Cons
    • Hard truths – learn what doesn’t work
    • Takes time
  • Go nuts
    • Hyper optimize steps
    • Google analytics goals at key steps
    • Make storyboard-based decisions

Personas

  • Who’s using the site
    • Age
    • Gender
    • Interests
    • Skills

Guerilla testing

  • Over the shoulder testing – just watch people use your site
  • Sentiment testing – which of these versions do you trust, find easiest, etc.
  • Drunk user testing – actually watch people test a site when they’ve been drinking. Drops their guard, scattered
  • usertesting.com
  • peek.usertesting.com
  • verifyapp.com

Tools of the attack

  • Analytics (Google, Jetpack, others)
  • InVision
  • UXPin
  • Balsamiq – wireframing
  • Mockingbird – wireframing in the browser
  • Omnigraffle

Doggie bag – what you’re leaving with tonight

  • Think of the user
  • Think ahead of the user
  • React to the user

 

 

Intro to browser tools: Understanding the technical aspects of Firebug

Presented by Nick Batik, Pleiades Services

Firebug is a Firefox extension

To get it, go to Firefox menu under Tools > Add-ons and search for Firebug and install it into your browser.

Firebug allows you to go under the hood of your browser. You can view and change the code on any website to see what’s running and what you can do to modify it. All changes are temporary in your own browser and do not affect the live site. This is a great way to learn HTML and CSS as well as a great tool for designing new sites and modifying existing sites.

To turn on Firebug, look for the small lightning bug in your browser under the address bar. That will open up a window  under the website content; you can also open it as a separate window.

Once you have a console open, you can inspect the CSS, HTML or Javascript for any website (one running WordPress or not!). You can modify any code you wish, but none of it will be saved on the browser. You will need to save it to a file and upload it to your server for the changes to take effect. Firebug just allows for inspecting, previewing and testing code changes.

From here, Nick demonstrated how to use Firebug, which is difficult to capture in a blog post. Until we can get his video uploaded, here are some links to tutorials you can check out:

  • StudioPress’ tutorial: http://www.studiopress.com/tips/using-firebug
  • Chris Coyier’s CSS-Tricks screencast: http://css-tricks.com/video-screencasts/15-introduction-to-firebug/
  • The Firebug Tutorial Series: http://www.youtube.com/watch?v=tdIk2PztcL0

Nick mentioned the DOM tab in Firebug and explained  briefly how to use it to identify areas of a page that can be modified with Javascript. You can read more about this here: https://getfirebug.com/dom

The Layout tab will show you how much space a selected element takes up on the page.

For the Javascript tab, here’s another tutorial: https://getfirebug.com/javascript

 

 

WordPress Theme Anatomy and Child Themes – Part I

WordPress Theme Anatomy

Presenter: Corey Ellis

Notes from Corey’s presentation: http://urli.st/s8c

WordPress theme development in WordPress codex

Stepping into Templates

What is necessary for a WordPress theme:

  • At minimum a WordPress theme needs two files:
    • index.php – controls structure of site (what the site does)
    • style.css – the stylesheet for the site (how the site looks)
  • Most WordPress theme will have more files, but these two are mandatory for a WordPress theme to work.
  • Most themes will also include functions.php as well as wp_head(); and wp_footer(); hooks in a php file

header.php file

  • Anything inside the section < head > < /head > is just information that doesn’t display in a browser window but is necessary for things to work
  • In the section < body >< /body > is what the user will see
  • The < title > tag controls what is shown in the browser window
  • wp_head(); and wp_footer(); are hooks that tell the browser what to execute in the header or footer; often used by plugins
  • the tag < body class >  allows you to modify the body class in your CSS: see body class reference in the Codex

How to view stylesheet and other structural information of a website

  •  inspection tools that you can use to see/modify the code of a website
  •  does not actually commit changes but allow you to see how a change would look
  • Firebug for Firefox
  • Chrome Developer Tools 
  • will work on any website; great way to learn

Other PHP files

  • header.php and footer.php control the header and footer
  • everything else (category.php, single.php, sidebar.php etc.) control what’s in the middle
  • Themes will have one or more php files which will assemble a page with the header, footer, body, sidebar etc. depending on which page is requested – e.g. single.php is the page created to display a single blog post
  • Template hierarchy graphic (from WordPress Codex) determines which page WordPress will display in the browser

 

Building Child Themes

Presenter: Bobbie Wilson

Why use a child theme?

  • You can use child themes to practice your theme skills
  • If you want to modify an existing theme, you can make changes and when the parent theme is updated, your changes won’t get overwritten

How to build a child theme

  • WordPress Codex on child themes
  • All themes will be found in your WordPress install in the directory: wp-content/themes
  • You will create a new directory for your new theme. It will have its own folder at the same level in the directory as the parent theme. So you might have /themes/twentytwelve and /themes/twentytwelvechild as two separate folders both within the themes folder.
  • A child theme needs a style.css file. You can create it in any text editor and save it in a folder named for the child theme. So you can create a new child theme called Playground and save a style.css file in a folder called playground.
  • Inside your style.css you will need to insert certain code:
/*
Theme Name:     Twenty Twelve Child (or whatever you're calling it)
Theme URI:      http://example.com/
Description:    Child theme for the Twenty Twelve theme
Author:         Your name here
Author URI:     http://example.com/about/
Template:       twentytwelve                             
Version:        0.1.0
*/
  • The template name has to be typed exactly the same way the parent theme folder is named in your themes directory
  • In your style.css you then need a line that includes the parent theme, to pull the parent theme styles into the child theme. Again, this will need to be typed exactly as the parent theme is named in the themes directory:
@import url("../twentytwelve/style.css");
  • The child theme will inherit everything in the parent theme unless there are styles in the child theme; all child theme styles will override the parent styles.
  • You can add php files to your child theme, including your own functions.php file. Just don’t duplicate functions in your child theme or your child theme will crash.

Slight digression: