Page-Level Planning
Now that you have a completed sitemap from your efforts in this post, and can see all the pages of your site, the next step is to zoom in to each of these sitemap boxes representing pages, and flesh out the details of the content, with the interactive and navigation systems they contain.
What are wireframes?
To plan the content and interaction design of each page, you’ll create a detailed diagram-like drawing called a “wireframe.” As shown in above, a wireframe looks more like an architectural blueprint than a web page. In fact, a more boring-looking wireframe is more likely to serve its purpose; if you showed a wireframe that is too finished-looking and fancy to a client, he could mistake it for a visual design treatment and lose focus on the page content and features it is supposed to represent.
Focus on unique page templates
Don’t worry if you are designing a large site. You only create a wireframe for each unique page layout, and these layouts become your site templates. In fact, it is not uncommon to have just 20–25 unique templates powering a site containing over 500 pages. For example, an ecommerce site may have several hundred products, each detailed on a page, with price, pictures, customer reviews, and specifications, etc. All of these pages can utilize a single “product detail” page template design. All data and images specific to each product are contained in a database called a CMS, or content management system, and are fed into the template to create the unique page for each particular product.
You must identify these unique page templates in your sitemap and focus your wireframing efforts on them. As the list below shows, these templates often get names such as “Landing Page 1” or “Landing Page 2.”
1. Home
2. Landing 1
3. Landing 2
4. Landing 3
5. Listing 1
6. Listing 2
7. Detail 1
8. Detail 2
9. Store Locations
10. Order History
11. Login/Password Recovery
12. Registration
13. Customer Service
14. Shopping Cart
15. Billing/Shipping
16. Payment
17. Confirmation
18. Terms/Privacy
As above shows, on your sitemap in addition to the numbering scheme, you can use a code to indicate which template each page should use. Some designers prefer to indicate multiple duplicate pages generated from a single template by displaying a stack of boxes instead of a single box. Either way, the idea is the same: To create a scalable website, identify a few unique page layouts that can serve the needs of the entire site.
Representing content and navigation
Wireframes are like a laundry list of what goes on a page from a content, interactive, and navigation perspective. They show how much copy goes into each copy element, so the writers know how much to write. They show developers what kind of form elements and dropdown menus the page is using. In above, the top content region is using an accordion interface to display a lot of different messages within the same region. All of the components on a wireframe are typically numbered, so that information designers can refer to them as detailed notes on the right margin. These detailed notes are called “annotations”. With such detailed blueprint the development team can start working to build each page.
One thing important to note is that wireframes are not to be taken literally as a layout. All too often designers feel locked in and perceive they could only color in the lines. This is not the case. The wireframe’s purpose is to convey all the components, the interaction design approach, and the relative importance of each factor. The graphic designer can now get creative and arrange a visual layout that reflects these factors.
Visual Design’s Role in Usability
Deciding which widgets to use to accomplish tasks, and what navigation design is best to get people to browse a website, is part logic and part common sense. The visual design treatment and layout of the sets of elements are what makes a site more or less user-friendly.
For example, compare the two forms in above. Form A shows a customer registration form that is tedious and disorganized. Form B on the other hand has the same form elements, but they’ve been arranged in such a way that makes the page not only more inviting but also easier to use.
Affordances: Making things suggestive of their functions
In his book “The Design of Everyday Things”, author Donald Norman points out that we intuitively know how to use devices such as door knobs simply by their shape, visual design, and location. Good design implies the function, and such visual clues which help us navigate our world as well as the world wide web are called “affordances”.
When designing user interfaces, it’s important to visually differentiate clickable from non-clickable items. Buttons, dials, and drop-down menus should have a visual treatment that informs people how to interact with them. Do they click, drag, or flick with their finger? Just as important, ensure that non- clickable items do not have a visually embellished treatment that makes people want to interact with them. Take a look at below. Can you guess which elements are interactive, and how would you interact with them?
Providing visual feedback
When users browse through sites, they like to have a sense of where they are in the scheme of things. Also, if they are working through tasks, they want to know how long before they will be done. To help answer these questions, your interface can provide “you are here” feedback as follows:
Highlight selected navigation
When a user selects a navigation choice, even if they selected something from a drop-down menu, it’s best to keep the main navigation choice highlighted to let them know what section they are in. The website shown in below makes it clear which of the sections you are in currently.
Progress trackers
Progress trackers, like the example shown in above, are a common feature that many sites use to give visual feedback of where a user is in a linear process such as ordering a product or signing up for a service. They look very similar to “breadcrumb navigation”, such as the example in below, but are different in two key ways:
• Non-interactive. For one, progress trackers are not interactive. You cannot click on them and go elsewhere like you can on breadcrumbs; they are simply a visual feedback device.
• They display the whole process. Secondly, progress trackers display the whole linear process from start to finish and highlight which step you are on. A breadcrumb navigation scheme is like a trail, it ends with the current page you are on and shows the pages that preceded it.
Consistency
When users first come to a site, they look around to get oriented. Hopefully, they quickly absorb your visual and navigation strategy and proceed to find what they have come for.
After initially investing in figuring out the interface, they don’t want to waste time orienting again. The interface should have become “transparent”, and they can focus on the content.
The best way to make an interface transparent to the user is to be consistent. Once you establish your visual language for clickable and non-clickable elements and decide on the location for your interactive ones, don’t change it. Keep it consistently in the same vicinity, from the home page to the deepest subpage.
Next to Website Design : User Interface Design - Part 3
No comments:
Post a Comment