Using Wireframe Prototypes to Improve Visual Flow and Web Page Layout
The desire to redesign is aesthetic–driven, while the desire to realign is purpose–driven. One approach seeks merely to refresh, the other aims to fully reposition and may or may not include a full refresh. (Note that by “reposition,” I mean strategy and not physical location or dimensions.)
—Good Designers Redesign, Great Designers Realign by Cameron Moll
With 2,000,000 registered users, IDM’s UltraEdit homepage is the textbook case, arguing both for and against redesign. As designers at IDM make the case for a 2008 realign, undoubtedly someone will utter the phrase “If it’s not broke, don’t fix it.” The question remains whether the company will test with users to understand what’s working and what is succeeding in spite of itself.
The flipside is, when you do find something is broken — you fix it. Too often if it ain’t broken don’t fix it becomes “don’t ask, don’t tell” in working practice. When you don’t test you can’t play the don’t fix what’s not broken card.
Problem: Poor visual Flow with unclear visual hierarchy creating a cluttered look. The navigation is unclear with too many choices. Redundant links and interaction buttons for everything a user might do rather than clarity which comes from stepping into the user’s shoes.
Result: Lack of focus. The interaction design looks more like the flight controls of a modern airliner than a user focused website. Objectives for the page are vague.
This zoomed out view is an ideal starting point for viewing the site as users do. Ask yourself if you can spot basic site elements. For example, where is the navigation? (You can see the side menu in the sidebar, left)
Navigation choices don’t center around a single user type or task, going on–and–on with twenty choices just on the side navigation and another ten along the top, many redundant.
Set in small size, the navigation seems designed to cram as many choices as possible into limited space. This is far from an isolated occurrence, the only difference being many company websites now hide the navigation confusion under dropdown menus. In Web Navigation is About Moving Forward Gerry McGovern explains, “Your job is not to design for all possible directions someone might want to take. That leads to a cluttered website and it will clutter the mind of and overload the attention of your customers.”
What causes this situation? Mainly because programming techniques allow it rather than because the navigation choice jungle is either user effective or necessary. Rather it communicates a lack of focus on, or understanding of user tasks.
Why Wireframe?
Wireframe Layout
It’s easy to favor or dislike a piece of stock photography, button style, typography, copy or even the color of detailed mockups. The one element can skew the judgement of the layout itself. Wireframes allow the level of abstraction necessary to evaluate the big picture, providing a strategic view realistic mockups don’t.
Further, wireframes are easily rearranged, discarded and changed. Anything which takes time to code and artistic effort to compose gains an inevitable inertia to change. Then discussions shift from merit or user focus to protecting the investments of time and effort made. Cheap, simple prototypes are better in the beginning stages of design.
With distracting side columns removed, text and headlines can better aid scanability. Users want to scan the site so they can rapidly target what they came to the site for. This layout aids the scanning user with a clear visual hierarchy which leads the user through the layout quickly and efficiently.
If users perceive a site as a formidable challenge, many will leave. Good visual flow signals to the user they can be successful finding what they came for, just from the overall look of the page.
Primary navigation is clear, even when zoomed out. One navigation bar on the top has high priority action items. In this realign, focus replaces scattershot choices hoping to hit a user task. Consequently thirty nav buttons are reduced to eleven, six on top and five at page bottom, rather than hiding this confusion under menus.
You’re Either Buying Or You Aren’t
Feature List, Feature Map, Latest Changes, Screenshots, Download,
Free Trial, Buy Now, Upgrade, More
Pick a singular objective for each page. With UltraEdit and other free trials available on hundreds of download sites, the top page of the company site has a clear objective: support buyers. One button supports buyers. Another button takes evaluators to a page to support research with information and trial downloads. Two buttons replace a veritable flurry of buttons and links.
Micro tasks can be grouped under the objectives of evaluation or purchase. Evaluators are prepared to go to another page for screen shots, specs and feature lists or to download a trial version to review. People who are ready to buy need the site to provide an express lane, not a series of speed bumps. You can support both, but you can’t do well trying to cater to everyone in one small product box. Get shoppers or product evaluators to a page dedicated to supporting each user objective. One objective per page.
Since stakeholders are not fussing about color, stock photography and which special effect would be cool, the wireframe can focus attention on what each page has to achieve for strategic success. For a focus on buying, specials and testimonials get attention, where previously these elements were hidden in sidebars.
Using wirframes you can focus on content strategy, site structure, and how all the elements work together to accomplish objectives.
Contact Design Crux to design a wireframe which realigns your website strategy today.
Related Articles:
Visual Merchandising and Online Catalog Layout
Resources
- Improve design, dont’t redesign “Redesign is classic organization–centric thinking. It rarely has much to do with making things better for the customer.” Improved designs happen for a reason and focus on the customer, not fashion trends.
- Paper prototyping: IT?s best kept secret? is something A List Apart has written about for prototyping websites. Especially when stakeholders from different contexts have to reach a concensus or you’re trying to teach your programmers to consider design issues, paper prototyping forces attention off code and onto the human factors that code should address beforehand.
- Fitts’ Law: The larger the target object, the faster it can be acquired. Since most web designers don’t study interaction design, applying Fitts’ Law to CSS design provides much needed context. Link presentation and Fitts’ Law helps you understand CSS based navigation problems dicussed in this article.
- “As Schrage states, the tools for serious play are “a medium for gaining insight into the ethology of innovation.” Prototypes change the nature of communication and collaboration. Changing the prototyping medium changes how people behave.” From a review of Serious Play: How the World's Best Companies Simulate to Innovate The message of a prototype culture is Prototyping is the shorthand of innovation.
- A flying menu attack can wound your navigation Too often, menus are used to hide the work that wasn’t done on defining user types and objectives. Drop–Down Menus: Use Sparingly “…the limited interaction widgets available to designers has led to overuse and misuse of drop–down menus, creating usability problems and confusion.” Drop–down Menus: No Thanks “Rather than put items in sub–sections that make sense from an IA standpoint, everything is kept at the same level, simply so it will show up in the drop–down.”
- Many designers still can’t distinguish between objectives and tasks. An article discusses the difference between user objectives and tasks, and what happens when they are confused.
- Landing Page Confusion: How Does Having More Than One Objective to a Page Affect its Performance? Having more than one objective per page degrades performance.
- Feature Richness and User Engagement Nielsen of all people explains the difference between desirability and usability. What Nielsen does not explain is how stakeholders overestimate the desirability of the product, and how few have a working methodology for desirability design.
- Good Designers Redesign, Great Designers Realign by Cameron Moll is about designing websites with a purpose. Never Get Involved in a Land War in Asia (or Build a Website for No Reason) explains how many websites get designed without a purpose or objectives which support the purpose.
- Web Navigation is About Moving Forward when the view of the website user is unclear, the number of navigation and interaction elements on a page seems to mushroom in number.
- Five simple steps to designing grid systems is a nice introduction to web page layout with grids.
- Cultures of Prototyping (PDF) is about developing a culture that rapidly adapts using prototypes to communicate high–level ideas rather than huge upfront investments of time and effort which resist change. Or seat–of–the–pants efforts where effusive optimism replaces sound decision making.