|
Design
within boundaries of an "image-safe" area
![[sketch of image-safe area]](images/imgsafe.gif)
Anticipate your users' screen resolution settings and the
size of their monitors. Use this information to define a
dimension for the "image-safe" area. Allow room for browser
elements such as navigation buttons and scroll bars. In the
illustration to the right, the main title "Forget Me Not"
does not fit into the image-safe area. This may misinform
users, because unless they widen the browser window, they
will read the
message as "Forget Me."
Design
in a style that will appeal to your audience's tastes
Use your audience profile and strategy
definition to define a visual style for your site which they
will find appealing. A reference site for a general
corporate audience will need to convey a different image
than a site which should appeal to restaurant managers and
hobbyist connoisseurs interested in exotic fruit.
Test
the visual design
Before you begin coding and creating the
visuals for your site, ask users to evaluate the planned
visual style. Create some quick paper sketches that are
easily revised. Offer your participants alternative sketches
of different designs. Consider asking each participant the
following questions:
-
What would you perceive as the purpose
of the site based on this presentation?
-
What would you be looking for once you
arrived at the site?
-
What would you do next after seeing
this presentation?
-
What do you like and dislike about the
presentation? (ask about the user's reaction to the
metaphor if a metaphor is used in the presentation)
-
What impression would you form of the
company [organization] based on the visual style?
Creating simple sketches are valuable not
only for soliciting feedback from users, but also for
communicating your purpose and plans to other team members.
Establish and/or comply with your organization's design
conventions
Many organizations have an established
set of design conventions that dictate how their logo and
related elements of corporate identity are to appear on
stationery and other materials. Consistent design
conventions help your organization become more recognizable
to the public. If your organization does not have a set of
design conventions that apply to web design, you might
suggest that one be established.
Maintain consistent visual identity
Establish a visual identity by using
related visual elements throughout your site. A consistent
visual style gives a site a sense of unity and reinforces
users' experience that they are rooted in a certain place.
Present your message efficiently and avoid clutter
Your words and your design will be more
powerful if you can say more with less, so be rigorous about
eliminating superfluous elements. Every element of your
design should support the goal of your message. While using
purely decorative elements is legitimate, keep in mind that
a tremendous amount of information is competing for users'
attention. Information overload can cause discomfort and
prevent users from finding the information they want to
find.
Draw
attention to new or greatly changed content
Regularly updating your site will
increase its value and give users incentive to return. Make
it easy for users to see what you have added and when you
added it as soon as they enter your site. Enable users to go
directly to the new information without wasting time
reviewing areas they have already seen. You can provide
direct links from a "What's New?" area to the new
information.
Avoid
requiring users to scroll in order to determine page
contents
Users should be able to recognize
immediately whether the subject of any given page interests
them. Elements that are critical to identifying page
contents need to be visible in the image-safe area without
scrolling.
Avoid
requiring the use of horizontal scroll bars
|
 |
Avoid using images and tables that are wider than your
defined image-safe area. If images and tables are wider
than the browser window, a horizontal scrolling bar will
appear. Users often become annoyed if they have to
manipulate a horizontal scrolling bar to see content. |
Use
the top and left areas of the page for navigation and
identity
Display navigation and identity in the
top and left areas of the screen. A masthead at the top of
each page works well for displaying a company logo and
high-level site categories. The left area of the screen is
useful for displaying navigation links within a category.
Users are comfortable and familiar with this design. It also
clearly and consistently separates navigation from content
so that users know where to find each. This layout has
tested well with users of the IBM site. |