Feb252013
blogUncategorized

It’s Week #6 of the UX Design class I’m taking at The Starter League! By the way, they are still accepting some late applications for the spring quarter, but spots are really limited–so make sure you sign up very soon if you’re interested.

Last week, we talked about determining what features you should include while building your products. This week, we moved on to design patterns and wireframing—which is one of the most important exercises in UX design. Let’s dive into design patterns first.

Intro to Design Patterns

Let me start my saying there are an overwhelming number of design patterns from which you can choose when you’re building out your site. For the sake of brevity, a design pattern is a general, reusable solution for a user experience problem or challenge. One of my favorite resources for finding patterns is Patternry.com. Here, you can find a list of dozens of pattern types, like: breadcrumbs, autocomplete, endless scrolling, progress bars, and navigation tabs.

This article would become a mini book in and of itself if I attempted to even mention all of the various patterns you could use while designing a site. So instead, I’m going to take you through the process we’ve been learning in class about deciding which patterns will ultimately work best for you. In the meantime, if you’re interested in discovering the array of pattern choices for your design consideration, here are several awesome additional resources:

So, how do you decide whether a particular design pattern is the right fit for whatever you’re building? Here’s the basic process for analyzing a pattern:

1.) Define what the pattern is

I’ll use an example—let’s look at “ratings” as a design pattern.

Rating is a way for users to give quick feedback, have their voices heard, and easily collect user data about particular objects, like physical products, services, or virtual-based items like software and digital content.

2.) Find a strong visual example of the pattern working at its best

Here’s an example of the ratings design pattern working well on Rotten Tomatoes:

Screen Shot 2013-02-25 at 11.57.19 AM

Doing some research and analyzing the way a particular design pattern is used on other sites will help give you a sense of the way it could be useful to users, as well as how it could look aesthetically, on your site.

3.) What problem does this pattern solve?

  • Allows users to leave a quick opinion
  • Engages an audience by making their opinions an important part of the site
  • Makes a site more interactive and fun for users
  • Creates more reliable ratings due to volume of feedback

4.) When should you use the pattern?

  • You want to engage users
  • Your product requires feedback from users to increase trust and reliability
  • You want to use them in combination with written reviews for a richer experience

5.) How should you use the pattern? (reccos, options)

  • Display an aggregated average of reviews per object
  • Allow users to change their ratings later on
  • Display clickable items (like stars or checkmarks) that light up on rollover to suggest clickability
  • Once a user has selected a rating, create a pop up that ensures readers their ratings have been saved

6.) WHY use this pattern?

  • Rating an object is an easy way to get users to contribute to the site
  • Ratings are a tool you can use to build and foster a great community
  • User ratings make the content on your site more reliable, and your site as a whole more credible

When you think about the problem a pattern solves, as well as when, why, and how to use it, it’s easier to determine whether the pattern is the right fit for your site. Sometimes, we choose design patterns that seem cool or look visually appealing, but aren’t really necessary. Answering these questions will help you stay focused and eliminate the unnecessary.

Wireframes

Now, let’s dive into wireframes. So, what exactly is a wireframe?

A wireframe is an absolute staple of UX work; it is essentially an initial skeleton of a page you’re looking to build. The skeleton is meant to demonstrate the particular priority and organization of elements on a screen, along with how users will get to other parts of the site.

Wireframes can look a lot of different ways. They vary from quick sketches to detailed frameworks using special wireframing software. It’s important to remember, though, that wireframes are more about the placement of various elements on a page, and not so much the “look and feel” of it. You probably won’t see much information on color schemes, typography, photography, or spacing on a wireframe.

Here is an example of a basic sketch wireframe:

primary-sketch_wireframe2

I’ve been working on wireframes for my Starter League Demo Day project (all students present an interdisciplinary project we work on with Starter Leaguers from other classes, like web development, visual design, and HTML/CSS). For our project, my team is working on an interactive digital music magazine. Here’s an example of a medium detail page wireframe I put together using a really cool tool called Balsamiq:

Alabama Shakes_Our Music_Wireframe

And sometimes, UX designers create wireframes that are heavily detailed, like this one:

globalcruise1

Source: UX Magazine

As you can probably surmise by now, wireframes can really help when it comes to defining page requirements, developing a shared understanding of site layout and function amongst a team, exploring user behavior in a more detailed way, and keeping the team focused on producing a great site with design patterns that work best.

What you need to know before you create a wireframe

In class, we talked about some of the information we’d need to collect before creating wireframes. They include:

  • Business requirements (e.g. user stories)
  • Content requirements
  • Design pattern requirements
  • Technical requirements
  • User insight (e.g. personas, mental models, etc.)

You can start the wireframing process by creating content groupings of similar information types that are likely to be used together. For instance, for the interactive music magazine we’re working on, we are thinking of each page in terms of “sections” in a magazine. One section might be specifically about an artist or band’s tour, so all elements that fall under that category would be grouped together (tour photos, quotes, posters, etc.). You also want to begin prioritizing the information on each page from most to least important; this will help you create a hierarchical order for the content, guiding users to click on information in a certain order.

Make sure you understand who you’re building out wireframes for, and be sure to address the questions each audience type will be look for—there are 5:

  1. Primary stakeholders (internal and/or external) – “How is this meeting our business goals?”
  2. Visual designers – “What visual elements need to be displayed on the page?”
  3. Copywriters – “What will I need to write?”
  4. Developers – “How does the site work, and what’s the best way to build it?”
  5. Wireframe creators – “Why did I decide to include each of these wireframe elements? Are they all important? Did I leave anything out?”

Information to include in your wireframes

  • Content – articles, logos, graphics, podcasts, product descriptions, page headings, forms, etc.
  • Layout – placement of page elements (i.e. header, footer, branding, content areas, etc.) and content prioritization
  • Behavior – include notes and annotations to explain in detail any functionality that would be difficult to communicate in a two-dimensional format, like: error messaging, pop-up forms, default settings, etc.

Ultimately, wireframing is a fun and highly important exercise in the UX process. Creating wireframes for the next thing you build will help you visualize, clarify, and communicate your vision to the team of people helping you build your site. It’s also a great exercise for clarifying your own assumptions about what belongs on the page in the first place.

To get you started, here’s a list of incredible wireframe tools you can use:

Until next week!

Note: If you just started following along now, you can catch up on what I’ve learned so far about UX design through The Starter League: