"the goal is simply to get you comfortable working your way through problems you’ll commonly be called upon to solve using jQuery"
Web Development
boomerang
"a piece of javascript that you add to your web pages, where it measures the performance of your website from your end user's point of view. It has the ability to send this data back to your server for further analysis. "
biz ladies: get a website in a weekend
A comprehensive primer for building a WordPress-powered site in a weekend. Geared towards non-geeks.
Do You Know Your Users?
Stop. Don’t answer immediately, take a couple of seconds to think about what that question entails and the smaller questions that come with it:
- Who are your users?
- How would they describe themselves?
- Why do they visit your site?
- What are the different types of users that you are building your site for?
- Which are more important to you?
- Which are more or less likely to visit, stay and use the tools you build?
- Which don’t stay as long as you would like?
So, do you know your users? If not, here are a few methods to learn more. Some are fast, cheap and easy, others require a bit more work, but provide far more information.
Short Polls
You’d be amazed at what you could learn by a single poll question, especially over time.
Implementation Strategy
Create a series of questions to gain information you don’t already have about your users. This may vary widely, but here are some ideas:
- Are you male or female?
- How old are you?
- What is your favorite part of the site?
- What part of the site is your least favorite?
- Is this your first time to the site?
- How often do you visit the site?
The key is to only show one question at a time. Ideally the poll is placed prominently and consistently on the site. Placing the poll in the same spot in the sidebar and rotating the question every couple of weeks will pay rich rewards over time. Most users are much more likely to answer one short question every so often than they are to answer a full survey, which takes a larger investment of time up front.
Feedback Surveys
This longer form is useful for getting information quickly, but you may not reach everyone you’d like to. It does have the very real benefit of branching questions. If the user says they are a regular visitor, you can dig in a little deeper to determine why they come back.
Analytics
Standard analytics that report on your site’s traffic is important when you need to find the popular areas of the site. We’re going to skip that for now as I expect you already have most of that defined or can get your hands on it easily enough.
The more interesting data comes from user-specific analytics that will help you answer questions such as the average age of your visitors, whether they are male or female and how interested they are in participating in the community. Working with this data will allow you to decide which groups of users visit one area of the site more often or take part in you discussions more regularly.
User Interviews
If you’re able to talk to your users directly, you can gain a wealth of information. This can be a complex undertaking requiring a lot of effort, so I recommend working with your passive data before you decide to invest the time and money interviewing your customers and prospects. Additionally, you won’t capture data from those casual visitors who stumble upon your site through a search result, so the data is incomplete when thinking about the largest area for growth.
Tie it Together
The best of all possible worlds would be to tie your direct questions (polls and surveys) with the information gathered from your analytics. If you can determine which questions to show a user based on how often they visit, you’ll have better data. If you can present questions based on how many friends the user has connected with on your site, you have a whole new axis of data to learn from.
Now That You Have Data
With the information you gathered you can prioritize where you spend your time and effort. Revisit the questions at the beginning of this piece to see how your answers differ and think about how you can use this knowledge to craft your site so it delights your users and achieves your business goals.
What Have I Missed?
This is by no means a comprehensive list of methods and ideas, and I bet that some of you have other (better?) ideas and experience to share. I’d love to hear what you think in the comments!
Image courtesy of Life Photo Archive
Sketchy Wireframes, the Comic Sans of UX
Sketchy-style wireframes, have wiggled their way into user experience documents the world over. With awesome tools like Balsamiq Mockups and a range of stencil sets to choose from, like as not, when an artifact describing the layout, features and workflows of a site is sent around the office or to a client, it’ll have squiggly lines.
Caveat: This post is about the sketchy style used in wireframes, not sketching in general. Sketching is an important part of the wireframing, workflow and design processes. Many a brilliant idea started life on the back of a napkin.
The reason most so often cited for the use of a sketchy style is that the squiggles convey that the document is still a work in progress. A secondary reason often follows with a claim that the sketch look obviously isn’t the site’s final design.
But sketchy style wireframes inevitably convey the opposite of what is intended, and worse, they come with additional negative implications overlooked by the proponents of the squiggle. In truth, sketchy wireframes imply that you don’t think your client is smart enough to separate crisp lines from a final design.
Simply put, the sketchy style is unprofessional. Yeah, I said it.
Would You Accept a Contract in Comic Sans?
I wouldn’t and I’m willing to bet that you would question any professional who provided you a legal document reminiscent of Garfield and Family Circle.
Wireframes aren’t supposed to be zany – they are supposed to be informative.
While our industry is young, and the tool set, younger still, we have many examples from which to learn. Architects and engineers are expected to deliver crisp lines and readable notes when they produce plans for a new home or skyscraper. The same holds true for engineers of all stripes.
Documents of any importance need to reinforce your experience, your expertise and the decisions you made as you produced them. The sketchy style does quite the opposite.
Sketchy Wireframes Imply a Lack of Importance and Conviction
Just as the final design for the site will convey a certain mood, the visual presentation of the wireframes should reinforce their importance to the success of the project. When you use a sketchy style your documents encourage the client to “fix” them.
Sketchy Wireframes Imply that Your Client Can’t Mentally Separate the Structure of a Site from its Design
While you may think this the case, you are either underestimating your clients, which is condescending or you should search for new ones, as clients who can’t understand the concept of a blueprint will likely struggle in their own endeavors. People are smart, and while you may have to explain the concept of a wireframe to a new client, the concept is easily understood.
Sketchy Wireframes Impede Comprehension
The goal of the document is to demonstrate the hierarchy of information and features and the relationships between those pieces. Wireframes are the blueprints for key business and design decisions. Adding visual clutter in the form of wavy lines, odd angles and handwriting fonts distracts from this singular purpose.
So, for the love of UX, save the sketchy look for the design phase where it belongs. Give your clients what they deserve – professional documents that aid their decisions and reinforce their selection of you for their important projects.
What Do You Think?
Am I wrong? Am I missing a key point? Do you agree with all your heart?
Leave a comment and let me know.
Change the Thesis Doctype and Add Meta Tags
I love using Thesis because it lets me focus on content, while providing all of the design and development hooks I need to tweak the theme as I see fit. I’ve dug in a good bit, and while I’m far from an expert, I’m confident that anything and everything I want to do is available to me.
One thing I discovered early is that the default doctype is XHTML Strict, which is great in many respects, but can add some complexity given enough design changes and external data sources.
In 1.6 I was able to add some custom code to change the doctype to XHTML Transitional, simplifying some issues I was having with IE 8. Those same reasons necessitated that I include a new meta tag as well. Thesis 1.7 changed the implementation methods, so I’m documenting the new, right way to modify the doctype and add items to the page head in the hope that others might find it useful.
Credit: I learned about of this from girlie, who was kind enough to point me in the right direction on the Thesis forums.
Modify the Thesis Doctype
Simply add this to custom_functions.php in your Thesis directory:
/* !Custom Doctype */
function custom_doctype() {
return '< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">';
}
add_filter('thesis_doctype','custom_doctype');
Adding Meta Tags or Conditional Comments
This hadn’t occurred to me as I’m used to placing these directly in the code, but once girlie pointed me in the right direction I found it is a simpler solution.
- Go to the WordPress Dashboard
- Click Thesis in the sidebar – this should open the Site Options page. If it doesn’t, click the Site Options link
- Click the plus icon for the Additional Scripts box under Document Head
- Paste your tags, conditional comments and or anything else you’d like included in the
<head>
- Click the save button and verify that it worked on your site
Thinking About Thesis?
If you’re thinking about purchasing Thesis, and I highly recommend you do, I’d appreciate it if you follow this link when you want to learn more or are ready to buy the theme.