Getting users to complete tasks

Lesson #130Ideation & Sketching

This week we’ll be focusing on part seven of our ten part series on psychological triggers and patterns. In this lesson, we’ll be covering how you can use the Zeigarnik Effect to get your users to complete necessary tasks within your website or web app.

Ensuring your users achieve

Lesson #129Ideation & Sketching

We’re at trigger six, which brings us a little over halfway through our ten part series on psychological triggers and patterns. In this lesson, we’ll be covering how you can use your customers drive for achievement to maximize the time the spend using your application or service.

Giving users faith in aesthetics

Lesson #128Ideation & Sketching

Part five of our ten part series on psychological triggers and patterns to influence our users is here. In this lesson, we’ll be covering how users look at quality design and branding to make their purchasing decisions and how you can take advantage of this with your design teams.

Using Authority to Earn Your User’s Trust

Lesson #125Ideation & Sketching

Part four of our ten part series on psychological triggers and patterns to influence our users is here. In this lesson, we’ll be covering how you can use outside authorities to add weight to information, making it seem more trustworthy and gain a higher purchase rate.

Influencing Users with the Bandwagon Effect

Lesson #124Ideation & Sketching

Part four of our ten part series on psychological triggers and patterns to influence our users is here. In this lesson, we’ll be covering how you can use outside authorities to add weight to information, making it seem more trustworthy and gain a higher purchase rate.

How to sell more using relative value

Lesson #120Ideation & Sketching

This week we’re continuing our look at how we here at ZURB utilize psychological triggers and patterns to increase engagement with the products we design. In this lesson we’ll be covering how you can use the design trigger of Relative Value to encourage your users to buy more, more often.

Auditing a Site and App

Lesson #114Ideation & Sketching

When faced with a redesign it can sometimes be difficult to know where to begin, and once you’ve started, if you’re really fixing the sites issues. We audit all of our products, review things that work well and identify things that don’t in Notable Notebooks. With Notebooks’ annotation features, a website audit can be used to share insights with a product team and put those ideas in context so they become clear. In this lesson we’ll explore what an audit is, what you’re looking for and what to do once it’s been created.

Finding your Flow

Lesson #109Ideation & Sketching

At ZURB we’re often getting quickly acclimated to client products before we hop into a deep dive for our design work. One of the main goals at the start of a project is to rapidly understand how users will flow through an app at a very high level. We’ll be looking at using a macro-flow Discovery session to get a quick but effective flow created for our new or redesigned product.

Sketched Out: A Guide for Consistent Sketches

Lesson #101Ideation & Sketching

Sketching is a great way to convey basic ideas when talking about page layouts of all sizes and natures. We all have ideas, but if we don't draw them consistently, it's really hard to show your vision. Just because it's clear to us, that doesn't mean it's clear to someone outside. By creating a framework that you replicate will bring easier to understand interfaces and enhance your presentations when talking with your team. Great stuff!

Navigating to Success: Sketching Navigational Components

Lesson #99Ideation & Sketching

It's important to know when to sketch, and that's usually at the beginning of the process before we really know what's going on. We're going to focus on navigation this time around and the basics to make that nav help you give context to the rest of the sketch.

Get Your Ideas Rolling: Building Momentum Through Iteration

Lesson #95Ideation & Sketching

Kick the "big reveal" to the curb and embrace the fails that bring you a better win! As awesome as Apple is, "and one more thing" isn't the best way to go when working in an internal team setting or even with clients. Putting all of your eggs into one basket doesn't help anyone, there's no context for how you got from point A to B. Concept to finished product needs a road map and embracing little steps instead of great leaps is key.

Chart the Real User Experience With Touchpoint Maps

Lesson #78Ideation & Sketching

When we plan an app, we do more than figure out what screens to build. We think about every interaction that end users have with the app and the brand, including email and Twitter, tasks and goals, and in shopping sites purchased product delivery and returns. The entire experience.

We call diagrams of these interactions touchpoint maps. They're an important means of discovering the problems we'll solve with individual screens in later phases of the design process. Here's how to use touchpoint maps to plan successful products from users' perspective.

Autopsy of Failed Sketches Leads to Great Work

Lesson #76Ideation & Sketching

There you are, standing in front of your client, ready to impress with ideas before getting the green light to make functional prototypes. You pin your sketches to a board to review ideas. The sketches suck. Your client looks at you like you're an amateur. And suddenly your brilliant ideas are in doubt. What went wrong?

In the past we've talked about good sketching technique. To fully understand what that means, we have to look at the opposite. Get your Sharpies ready: Today we're looking at bad lo-fi sketches.

Sketch Smart for Mobile

Lesson #70Ideation & Sketching

Talking about designing responsive websites is one thing. Getting to it is a different story. As much as we like to think mobile-first, in our experience, clients expect to see desktop designs first. Larger designs are more impressive and easier to digest. And sometimes we don't even review smartphone-savvy designs due to time constraints.

But they're important. Ignoring mobile devices can lead to sub-par experiences — and that's counterproductive. With that in mind, here's a technique to quickly sketch out a mobile design from widescreen.

Keep on the Same Page With a Sketching Language

Lesson #61Ideation & Sketching

That we love sketching is no secret. Sketching is a great way to work through ideas before committing them to code, or even wireframes. They help us think through problems by putting them on paper. They're great for sharing ideas. That last part is crucial. ZURB designers don't just sketch — we communicate. To explain ideas at a glance, we sketch the same familiar elements. Here's how to make and use a sketching language.

Sell Sketches to Influence Clients

Lesson #58Ideation & Sketching

Sketches are vital to successful product design. They help us decide what we need (and what we don't) early on; to visualize what our designs might look like, even before we go to clients; and to refine workflows before we jump into code or Photoshop, and define exactly what a person using the product should see at any given moment. They even make great icebreakers to get everyone thinking seriously.

But clients don't always see it that way. Some see scribbles when they expect polished comps. Here's how to present your sketches to a client who only sees useless scribbles.

Using personas to build better user flows

Lesson #46Ideation & Sketching

Brainstorming. Mind maps. Rephrasing questions. There are plenty of ways to plan successful digital products. But only one approaches design problems from the users’ standpoint to create natural routes through a website. We do this with personas: fictitious users we anticipate will use the product. Here’s how to use personas to drive ideation.

Turn Your Ideas Into Solid Wireframes

Lesson #41Ideation & Sketching

The simplest solutions are often the best. But as ideas become layouts we need more than quick & rough. 

Our ideas for design solutions are nothing without implementation, and that begins with lo-fidelity — or lo-fi — wireframes. We use these hand-drawn pages to show other people what we're talking about before we dedicate time to digital wireframes or coded prototypes. Here's how to create low-fi wireframes that turn great ideas into practical pages.

Find the Next Great Idea With Sketches

Lesson #39Ideation & Sketching

Great products are built on great ideas. Early in a project’s development, we dedicate time to working through many quick ideas with sketches that communicate “what-if” scenarios to our clients. We work through lesser ideas until we discover real winners — ideas that ignite sparks that serve both our clients and their customers. And it works. “What if we used a cartoon ninja?” was so unexpected that a quick sketch reshaped an entire project. Quick sketches give us the chance to fail fast and discover opportunities — hence their name, opportunity sketches. Here’s how to discover your great ideas with paper and Sharpies.

Avoid Highlighter Abuse in Sketches

Lesson #32Ideation & Sketching

In low-fidelity sketching, yellow highlighters can draw attention to a page’s key point or call to action. But like any tool, they can be abused. While we strongly recommend using highlighters sparingly in lo-fi sketches, the best way to explain that is to (ahem) highlight bad practice. Here are three different ways to go overboard with highlighters in lo-fi sketches.

How to Sketch Form Elements

Lesson #10Ideation & Sketching

Within our 26-strong team of designers and developers, communicating ideas accurately is as important as communicating them quickly. We developed a standard method for sketching ideas that everyone understands, including clients unfamiliar with how sketching fits in our design process.

Forms are among the most complicated interfaces that users have to deal with. Reducing sketches to rectangles, circles, and a series of squiggly lines helps streamline the process of streamlining web forms.

Here’s how you can draw form elements.

How to Draw a Straight Line

Lesson #2Ideation & Sketching

In this video you’ll learn the three key techniques to drawing a straight line.

Move your arm, not your wrist

• Keep another piece of paper under your drawing sheet. This provides a smoother surface for the pen to move across.
• Move your arm and not your wrist. This keeps the pen at the same angle with the paper and makes the line weight consistent.
• For practice, close your eyes. This helps you focus on not using your wrist.