INTERVIEW: GRAPPLING WITH GRAPHICS TIPS & TRICKS: DON'T MAKE THEM SCROLL METRICS: WHAT SCREEN SIZES DO YOU DESIGN FOR? INTERVIEW____________________________________________________ ______________________________________GRAPPLING WITH GRAPHICS Web site owners are constantly struggling with the graphical elements on their sites: shifting them from place to place, adding new ones, and resizing old ones. Because you'll always be grappling with graphics we asked design expert Brad Zumwalt, CEO of Eyewire (formerly Adobe Studios) what he thought Web site owners could do to improve their sites. Editor: How can Web site owners communicate their ideas more effectively using fonts, photos, art and multimedia? Zumwalt: Because we offer the world's largest selection of all of those, this will sound like a contradiction, but we encourage our customers to exercise restraint when using graphical elements. It's a mistaken belief that adding a lot of graphics makes a better site; it just isn't true. People visit Web sites for information. Review and edit your content. Visitors want to skim for information - they want it even quicker than if they were skimming a magazine. As such, you have to make it easy for them: help them skim the contents using a table of contents, provide high-level headline-style overviews, offer an index or site map. When presenting information, think like a journalist: headline, sub-headline, and key information at the top. You can offer them more in-depth information on related pages, but let them dive deeper to find it if they want - don't force them to wade through it. Once you have the structure and content perfected, THEN use the graphics to help them get the info they need. This means using graphics to present information or to guide. Don't let the design overwhelm your message. Finally, don't use typefaces or images that are slow to load - people hate to wait. Speed is everything. Editor: How should Web site owners determine which fonts to use on their site? Zumwalt: It's odd, but many corporate sites often use a different type treatment from their other collateral materials. If they have a standard set of typefaces, why aren't they using those on their site? Type is a powerful visual tool, and needs to be considered part of the company's corporate identity, its brand. There are standard ways of picking complementary typefaces. If you're really interested in using what works, get a typography manual or basic graphic design guide - many of those principles apply to the Web. Use standard graphic styles, such as sans serif headlines with serif text - not too bold and not too thin - that are easy to read at multiple sizes and resolutions. We chose Frutiger and Myriad for our own site. Editor: When is it appropriate to use a video clip on a site? Zumwalt: Once again, everything comes down to speed: how quickly can they access the information? Today, video is more of a curiosity than a practical tool. For most, the technology isn't there yet. Just as with other graphics, if you are doing it for the sake of being cool, realize that you might be setting up a problem for people with slower connections or without the plug-ins they need. Until the technology is really there, you need to ask, 'Does a video clip add information that can't be conveyed with text or static images?' If you're selling video or movies, or devices that are hard to describe, you may need to do it. If you choose to have a video clip, you need to consider how much control you want to give to the viewer. If you want to make it mandatory for them to see the clip, embed it in a page. If you want it voluntary, have it in an automatic pop-up screen or accessible via a second page. Editor: Before redesigning a site what should a Web site owner do? Zumwalt: Ask questions. Make sure that you have a system for both your own internal feedback AND a customer feedback system. Have you asked your own people about the site? And - now be honest - have you tried to navigate the site yourself? How have customers reacted to the current site? Have you tried to survey them? Most important, have you read their feedback? At EyeWire, we review Web site feedback on a weekly basis and are constantly improving the site. Top-line questions should focus on speed (Does the site load quickly enough?); ease of use (Are there problems with the site currently in regards to consistency, navigation, layout, etc? Can you get to one place and back easily?); support of key branding and sales messages (Does it relate to and support your brand?); and feedback systems (How do you solicit feedback: online polls, e-mail surveys? Do you make it easy for customers to contact you?). Small businesses can find hundreds of good and bad corporate examples of what they should incorporate into their Web site redesigns. Adapt ideas from other sites, if you'd like. When you find a site that works for you, save the link for future reference. Editor: What are the most common design/graphic mistakes on the Web? Zumwalt: Most real mistakes are implementation issues, rather than actual design failings. For example, sites that are not cross-platform or browser compatible, having been designed with a certain platform and plug-in in mind. I find that frustrating. If you're using a JavaScript, does it work under Netscape and Microsoft? Does your background imagery look correct? What works in one browser can obscure the text in another; it's an easy fix that often isn't made. Other problems: ? Making it a requisite to use a plug-in on the site. Can they still use the site without the plug-in? If not, they may find it easier to go to a competitor. ? Inconsistent navigation - you can go from A to B, but not back again - or navigation elements that differ on each page. ? Overwhelming graphics or formatting styles that are too big to download or overshadow your message. For example, nesting tables make it very hard for pages to render. Some news sites are notorious for this. You can format fairly easily without the use of tables; we recommend that. Yahoo News does a great job without nesting tables. With the advent of wireless phones and PDAs, you need to look at your site with a text browser to make sure tags are displayed properly. Make sure all your images have alt tags. If someone with a cell-connected Palm Pilot can't understand your site, you could lose a customer. Finally, I often find that people don't put their real-world address or telephone in an easy-to-find place, if at all. This is just plain annoying. Hiding the contact information is very common, but how can you get feedback if people don't know what to do? Editor: What is the first thing Web site owners should be doing to improve their sites? Zumwalt: Believe it or not, it's not the graphics. It's making sure that you have a customer feedback system. Read what they have to say. Listen. Then take action. It's as simple as that. About the Expert Brad Zumwalt is president of EyeWire, Inc. (formerly known as Adobe Studios). EyeWire produces the award-winning EyeWire graphics catalog and the eyewire.com Web site (http://www.eyewire.com), which provides digital visual content (typefaces, photos, illustrations, multimedia and video), tools, and information for strategic use of graphic design in visual communications. TIPS & TRICKS________________________________________________ ________________________________________DON'T MAKE THEM SCROLL Studies have shown that the average Web surfer only scrolls down on 25% of pages browsed. So we recommend that the most important parts of your site appear in a 640 x 480 pixel screen size, and on screens that display only 256 colors (8-bit displays). Since seemingly endless pages will probably be ignored by most, try to avoid them on your site. Remember it's first impressions that count. METRICS_______________________________________________________ __________________________WHAT SCREEN SIZES DO YOU DESIGN FOR? Have you ever wondered what screen resolutions your visitors are using? Using data collected from our Hitometer (http://www.hitometer.com) here is what we found: 800 x 600 46.7% Unreported 19.5% 640 x 480 16.1% 1024 x 768 13.7% 800 x 553 1.2% 1280 x 1024 1.1% 1152 x 864 0.8% 832 x 624 0.4% 1024 x 721 0.4%