UX Movement » Wireframes http://uxmovement.com User Experience Movement Sun, 14 Jan 2018 02:59:05 +0000 en-US hourly 1 http://wordpress.org/?v=4.2.19 How to Communicate Visual Hierarchy on Wireframeshttp://uxmovement.com/wireframes/how-to-communicate-visual-hierarchy-on-wireframes/ http://uxmovement.com/wireframes/how-to-communicate-visual-hierarchy-on-wireframes/#comments Tue, 15 Mar 2016 14:44:45 +0000 http://uxmovement.com/?p=9163

]]>
The use of color is one of the best ways to communicate visual hierarchy on a design. But on a wireframe, it’s one of the worst. Many designers think they need to use color on a wireframe to communicate hierarchy. If you’re using color to display visual weight, your final design could lose its clarity.

Color Obscures Hierarchical Clarity

It’s easy to see the weight of a colored element on a wireframe because everything else is black and white. But there’s no way to know if that element will have the same clarity when you translate that wireframe to a mockup.

This is because a mockup will have many other colors that compete with it. Any colored element on your wireframe will no longer appear as clear. The visual weight you gave it lessens when other page elements also have color.

hierarchy-clarity

Another danger of using color is that many designers end up relying on it as the primary way to show visual hierarchy. It’s easy to make elements stand out with color on a wireframe. But how clear is your visual hierarchy without it?

Color becomes a crutch for clarity when designers neglect other hierarchical attributes. Don’t use color to compensate for a lack of design. Your design should have a clear hierarchy without it.

Using color isn’t always effective because many sites have color blind users. Your design needs to include other attributes to make the weight of elements clear to all users.

Other Attributes of Visual Hierarchy

Adding color to your wireframe makes it hard to gauge how strong your visual hierarchy is. This is because color overshadows other hierarchical attributes. When you avoid color, you allow those attributes to stand out. The visual weight of color gets lost on a mockup, but these attributes stay intact.

Size

Not every element should have the same size. The bigger an element is the more attention it’ll draw. For size to work, an element needs to look bigger relative to the other elements around it.

hierarchy-size

Shape

You may have content on a page you want to highlight. You’re not limited to only color and size. You can also use shape. Placing a box around the content or sectioning it off with a line shows that area is important.

hierarchy-shape

Placement

Users scan pages in a particular pattern. There are page areas that will get more attention than others. You can place important content in those high attention areas. Above the fold and along the top and left-hand sides are where the user’s eyes fixate on the most.

hierarchy-placement

Inverse Coloring

Color obscures hierarchical clarity, but inverse coloring can add to it. Most wireframes use dark colors on a light background. This is because most sites often use a neutral background color.

But when you inverse the colors, you’re applying a light color on a dark background. This is an effective way to communicate color without suggesting a specific color.

hierarchy-inverse-coloring

Suggesting a specific color will make viewers wonder how that color will affect the rest of the design. That’s not what you want on a wireframe. You want them to focus on the structure and layout.

You should use inverse coloring on interface elements that need a strong color fill. Buttons, menus, and notifications often need this visual clarity because users interact with them. But don’t over do it. You’ll lose hierarchy if every element is light on dark.

Wireframing Toolkit

There are tools that can help you communicate visual hierarchy on your wireframes easier. This wireframing toolkit, Wireframe Patterns, is built for visual clarity. Each UI pattern is designed with proper visual weight without using color.

A Visual Hierarchy Without Color

If your visual hierarchy isn’t clear without color, your design doesn’t use enough attributes. It’s not only possible to communicate visual hierarchy without color, it’s necessary.

Doing so allows you to gauge the clarity of your structure and layout. A wireframe that isn’t clear without color is a wireframe that lacks a strong hierarchy. Adding color won’t fix it, a better design will.


]]>
http://uxmovement.com/wireframes/how-to-communicate-visual-hierarchy-on-wireframes/feed/ 1
Site Flows vs. User Flows: When to Use Whichhttp://uxmovement.com/wireframes/site-flows-vs-user-flows-when-to-use-which/ http://uxmovement.com/wireframes/site-flows-vs-user-flows-when-to-use-which/#comments Wed, 29 Jul 2015 16:28:29 +0000 http://uxmovement.com/?p=8376

]]>
Designing the user experience of a website involves more than figuring out what goes on each page. It’s also about figuring out how those pages flow together. If you don’t plan your page flow, you could run into problems when you start to design.

You could:

  • Forget to design certain pages of a site process
  • Forget to design call-to-actions that link certain pages together
  • Not know where certain pages belong in the site hierarchy
  • Not know which pages should link to each other
  • Not know which pages users should navigate to complete a task

If you’ve ever experienced any of these problems, you should have made a site or user flow. Doing so can help you tackle and avoid these problems down the line. But to use them, you first have to understand how they’re different.

A Site Flow and User Flow are Not the Same

Many designers confuse a site flow with a user flow and vice versa. Both illustrate page flow, but at different levels and for different purposes.

A site flow is like looking at a map of the territory. The map shows you a bird’s eye-view of everything, and gives you a general direction of where you can go. This high level view allows you to feel the size and complexity of a site.

siteflow-map

A user flow is like looking at directions from point A to point B. You can see which routes to take, where to turn and the miles it takes to get there. These specifics help you get to your destination with efficiency. This low level view allows you to feel how much time and effort it takes to complete a task.

userflow-directions

When to Use a Site Flow

Before you start wireframing, it’s important to know what pages will go on the site. After that, you need to know which pages should link to each other. This allows you to design call-to-actions that lead users through the right page flow.

siteflow-cta

Site flows also give you a clear picture of the navigational hierarchy. You get a glimpse of the breadth and depth of navigation. If a navigational path gets too deep, you can streamline it. If the navigation gets too broad, you can merge relevant pages. All this helps you design a simpler navigation experience.

siteflow-breadth-depth

Other members of your team can also benefit from site flows. Developers often need to know which pages link to each other when they add code. Having a site flow to guide them prevents wrong or missing links.

It’s also an effective way to let developers know what microinteractions go on a page. Microinteractions often involve heavier coding and functionality. This allows them to plan ahead and find ways to meet those needs.

siteflow-microinteractions

When to Use a User Flow

Not every task is a straightforward path. Some will have twists and turns. These type of page flows are more complex and need hashing out. User flows are perfect for analyzing the efficiency of these tasks.

For example, resetting a forgotten password involves more than clicking through pages. Users have to acknowledge feedback, type in a form field and check their email. A user flow allows you to examine every aspect of the task, so that you can make it quicker and easier.

userflow-error

User flows also help developers understand how the system interacts with user behavior. The system needs to respond to the user when they make errors and do actions. Developers can view all the details and specifics of an interaction on a user flow.

A Toolkit for Faster Flow Creation

You shouldn’t spend a bulk of your time creating flows. They’re supposed to help you get started with design, not keep you from starting.

That’s why you need a toolkit like Flow Patterns. It has a variety of pre-designed flow pages for you to arrange and customize. It comes with microinteractions, markers and callouts to help you create flows faster.

Flows Are for Everyone

Flows aren’t just for designers to look at. They’re a way to share the site vision with everyone on your team. When everyone has a map, they’ll feel more comfortable about where they’re going.

Users will benefit from flows as well. They’ll get a better navigation and page flow experience because you took the time to plan it out.

A site and user flow can influence the user experience at an architectural level. When you make them a necessary part of your design process, everyone benefits.


]]>
http://uxmovement.com/wireframes/site-flows-vs-user-flows-when-to-use-which/feed/ 5
Why the Best Wireframe Style Is No Stylehttp://uxmovement.com/wireframes/why-the-best-wireframe-style-is-no-style/ http://uxmovement.com/wireframes/why-the-best-wireframe-style-is-no-style/#comments Tue, 21 Apr 2015 13:40:11 +0000 http://uxmovement.com/?p=7900

]]>
What tool would you use to hit a nail in? Only a hammer comes to mind. This is because a hammer’s form meets that specific function. It’s form matching function gives it its utility and value.

hammer

A wireframe is only useful and valuable if its form matches its function as well. But many wireframes today don’t follow this principle. As a result, they can end up hurting how others view the future direction of the design. No designer wants to harm their team or project. But if your wireframes don’t have the right form, you could.

The Wireframe’s Function

In order for your wireframe to have the right form, you have to understand its function. The wireframe is a document that’s completed before graphics and coding ever occur. But they can’t occur until you define and arrange the elements for each page.

arrangement

A wireframe’s function is to display necessary page elements in an orderly arrangement. The UX designer defines this arrangement through user research, best practices and stakeholder goals. It’s then vetted through stakeholders to gain consensus before moving to graphics and coding.

Why Visual Clarity Is Important

Since you have to share your wireframes to gain consensus, visual clarity is of utmost importance. Stakeholders need to be able to see the structure and strategy for the website without getting distracted by how each element will look in the final design. A wireframe should allow them to examine:

  • what elements should be on the page
  • why they should be there
  • where you should place them
  • how they should function

When you put different shades and colors on your wireframes, viewers get hung up about how each element will look. Even if you tell them the style isn’t permanent, they still can’t avoid it because it’s a natural reaction to what they see. You want them to think about style in the graphics stage, not wireframing.

strategy-structure

Important questions about site structure and strategy need to get answered first. Wireframe styles make this harder to do. Colors, shapes, fonts and images cloud the vision you’re trying to communicate. This can lead to your team making wrong decisions that could have a lasting impact on the site.

Wireframe Styles That Reduce Visual Clarity

Dysfunctional wireframes exist when designers let their personal style get in the way. Sometimes they add style to sell their wireframes to stakeholders better. Other times it’s done out of vanity.

Whatever the reason, style over substance has no place in wireframes, when substance is what makes a wireframe. Here are some wireframe styles that reduce visual clarity to avoid.

Colored Wireframes

The big difference between a wireframe and a mockup is color. When you put color in your wireframes, you mix its function with that of a graphic mockup. The mockup’s function is to communicate branding and style, not the wireframe’s. Mixing the two reduces the wireframe’s visual clarity, making structure and strategy harder to define.

colored

Grayscale Wireframes

Grayscale wireframes used to be the conventional style. But the various shades of gray distract from the wireframe’s function. This leaves viewers wondering why certain elements are lighter and darker gray than others. It draws too much focus on individual elements and not enough on how the user experience works as a whole.

grayscale

When you’re using gray on gray, you have to use different shades to make elements more distinguishable. This gives you more work to do. If you’re spending time getting the shading right, you’re taking time away from developing the site’s structure.

Grayscale wireframes also make elements hard to see and read. This can cause confusion and eyestrain when viewing. You don’t want your team to experience this every time they view your wireframes after each iteration.

Block Wireframes

A structure is useless if it can’t fit the content. It’s important to know early if your content will fit within the structure you’re designing. Block wireframing makes this hard to see by replacing text with blocks.

Text length and height can affect the size of buttons, menus, headings, paragraphs and other fixed areas. Viewers can’t get an accurate picture of how users will read the site if they can’t see how the text fits in the UI. Nor can they get an accurate measurement of element or margin sizes.

block

Monochrome is as Clear as it Gets

The best wireframe style is no style. The result of no style is monochrome – one color against white. This is the clearest form of wireframing that matches its function.

When viewers look at a monochrome wireframe, all they see is structure. There aren’t any colors or shades on particular elements that fight for their attention. Instead, everything is equal weight so you can focus on the whole user experience. This forces viewers to debate the arrangement of elements, rather than how they will look.

monochrome-wireframe

Another benefit to monochrome is that you don’t have to worry about making shades of gray or color tones look good together. You’re only working with one color, so when you wireframe you’re concentrating on the structure, not how it looks. This keeps you focused, saves you time and helps you make iterations faster.

color-choices

The monochrome color you use should have a high enough contrast against white that it’s easy on the eyes. Gray on white tends to make elements look faint and dull. Black on white tends to have a heavy contrast that can strain the eyes. The perfect balance for a clear and pleasing look is dark blue-gray on white. It’s not only easy on the eyes from afar, but also up close when examining detail.

Monochrome Wireframing Toolkit

Wireframing in no style isn’t easy if you haven’t done it before. Wireframe Patterns is a monochrome toolkit that will help you get started. You’ll find many desktop and mobile libraries each with an array of complete UI patterns.

view-toolkitFinal Thoughts

A dysfunctional wireframe can break a team apart if people can’t see eye-to-eye on a site’s vision. A functional wireframe can bring people together if everyone is clear on a common vision. You need visual clarity on your wireframes for this to happen.

Don’t allow your personal style, preference or vanity get in the way of a document that everyone shares. The goal of a wireframe is to get consensus on the user experience. Make it easier on yourself and your team by adopting a wireframe form that matches its function.


]]>
http://uxmovement.com/wireframes/why-the-best-wireframe-style-is-no-style/feed/ 18
3 Best Vector Wireframing Tools for Designershttp://uxmovement.com/wireframes/3-best-vector-wireframing-tools-for-designers/ http://uxmovement.com/wireframes/3-best-vector-wireframing-tools-for-designers/#comments Tue, 17 Jun 2014 14:56:58 +0000 http://uxmovement.com/?p=6903

]]>
What’s the best tool for wireframing? This is a common question among designers. It’s hard to answer because each designer has different needs. What makes it harder is that there are too many tools to choose from. Understanding your workflow is the first step in finding the best tool that works for you.

Vector is a Must Because Design is an Iterative Process

Design is an iterative process that needs constant tweaking and fine-tuning. Vector tools allow you to make changes to your design at a fast speed with minimal effort. Just by clicking on an element you can resize or restyle it. You can even make changes to more than one object at the same time.

Raster tools (e.g. Photoshop) don’t give you as much efficiency. Making changes to an object takes many clicks and you can only do it one-by-one. Revisions happen often in wireframing. That’s why it’s important to use a vector tool, so that you can revise your wireframes on the fly.

Vector is a Must for Pixel-Perfection

Vector tools allow you to scale and zoom in on your graphics without losing pixel quality. Doing this with a raster tool will give you pixelated bitmap images. The blurriness will make it hard to view your designs the way you intended.

Raster tools don’t allow you to export your graphics in vector format. This means they’ll only look crisp in certain resolutions. If you enlarge a bitmap image, it’ll look blurry because it doesn’t have enough pixels. But if you enlarge a vector image, it’ll stay crisp and clear at any resolution.

Top 3 Tools for Wireframe-Only Designers

Are you a wireframe-only designer, or do you also design visual mockups? If all you do is wireframe, you don’t need a tool that’s heavy in graphical editing. A basic web-based wireframing tool should suit your needs.

These tools won’t let you create stunning graphics, but they’re enough to make wireframes. What sets these tools apart are their smart guides, pattern libraries, grids and pages feature.

1. Moqups

2. GoMockingbird

3. Wireframe.cc

Top 3 Tools for the Complete Designer

A basic web-based wireframing tool isn’t enough for the complete designer. Complete designers who design both wireframes and visual mockups need a tool more advanced. These tools allow them to add dynamic color, typography, gradients and shadows to objects.

Not only that, but they offer more wireframing features that web-based tools don’t have. These include custom symbols, layer styles, export slices and precise pixel alignment. When it comes to creating wireframes and visual mockups, these tools are a cut above the rest.

1. Sketch

2. Omnigraffle

3. Illustrator

Final Thoughts

A tool can’t help you make better design decisions. The purpose of wireframing is to find the best order, structure and layout for your content. That comes from wireframing in an iterative process. Vector tools help you do that faster and easier. Designers may have different needs, but one thing they all need in a tool is for it to support their workflow. The best tool is the one that supports yours.


]]>
http://uxmovement.com/wireframes/3-best-vector-wireframing-tools-for-designers/feed/ 8
Hand and Arrow Cursors for Your Wireframeshttp://uxmovement.com/wireframes/hand-and-arrow-cursors-for-your-wireframes/ http://uxmovement.com/wireframes/hand-and-arrow-cursors-for-your-wireframes/#comments Thu, 29 Aug 2013 13:25:58 +0000 http://uxmovement.com/?p=6128

]]>
Sometimes when you’re wireframing you want to show what happens when users hover their mouse cursor over an element. This is where an image of a hand or arrow cursor comes in handy.

However, most hand and arrow cursor images found on the web are the wrong size, not transparent, poorly pixellated or just don’t look right. Here’s a perfect transparent image of a hand and arrow cursor you can use on your wireframes. Simply drag the image into your mockup tool or right-click and save the image.

hand_cursor

arrow_cursor


]]>
http://uxmovement.com/wireframes/hand-and-arrow-cursors-for-your-wireframes/feed/ 3