Glen-Gery Website

2. Glen-Gery Website REDESIGN

3. The current GG website was developed in 1995. 9 years ago, it was cutting-edge programming. Today, it is – how shall we say? – “vintage.” 2004 Glen-Gery University

4. The New Face of Glen-Gery 2004 Glen-Gery University

5. The redesign is a major overhaul of the site’s architecture, including: • Programming • User interface • Graphics • Navigation • The objective of the redesign: • Give users information about Glen-Gery brick by… • Taking full advantage of the Internet’s power to deliver content unlike any other medium. 2004 Glen-Gery University

6. No dancing bricks! How We Work the Web … or why Flash is panned. • Websites are “ephemeral,” or low-commitment, transient encounters. • Websites are primarily accessed by first-time users, who must quickly build a conceptual model of how to deal with the content they see. • Users won't invest a lot of time exploring or learning a site because they know they may never return. • 79% of web users scan rather than read. Reading from computer screens is about 25% slower than reading from paper. 2004 Glen-Gery University

7. How We Work the Web … or why Flash is panned. • To draw in viewers and encourage exploration, a website must offer meaningful content that’s easily accessed. • Viewers spend about 10 seconds evaluating a site before deciding whether to stay or move on. • At first glance, websites must give users a quick overview of their features, basic task flow and structure. • Users focus on the parts of a page most likely to be useful. They dismiss gratuitous graphics and special effects as ADS or irrelevant material. 2004 Glen-Gery University

8. How We Work the Web …“Informavores” • The web experience encourages information foraging. • Users won’t commit to the time investment of reading a page in the hopes that it will be worthwhile. • Users move between many pages and select the most “tasty” segments. • Pages that have a user-friendly interface and information rich content appeal to “informavores” and will keep them happily clicking away gathering information. 2004 Glen-Gery University

9. 2004 Glen-Gery University

10. The design of the new Glen-Gery website follows proven usability principles: • Site’s purpose is clearly stated: “Brickwork Design Guide” • Window Title -- “Glen-Gery Brickwork Design Guide” -- has good visibility on search engines and bookmark lists • Site design emphasizes high-priority tasks: “Gallery” and “Brick Product” splats • Search input box at least 25 characters wide, appealing to “Search Dominant Personalities” • Homepage shows examples of real site content: Main project image rotates randomly • Link names begin with important “key words” for ease of viewer scanning and recognition by search engines • Clear, simple navigation to effortlessly guide users through site • Meaningful graphics serve as powerful communicators demonstrating the usefulness of the site. 2004 Glen-Gery University

11. Homepage features designed to draw viewers into the site. Find 20 closest distributors relative to viewer’s zip code Main site features collected in quick search pulldown field Search site field Some people are “search dominant” users and will almost always look for a search box as soon as they enter a site. Analogous to shoppers who look for the nearest clerk when they enter a store. 2004 Glen-Gery University

12. Simplified site navigation uses intuitive keywords to guide users to the information they want. Represented in basic html, the links stand a better chance of being recognized by search engines. 2004 Glen-Gery University

13. Graphical hotspots guide viewers to key areas of site. Women respond to graphics. Men respond to html links. 2004 Glen-Gery University

14. Rollovers reveal colors of brick and link to Brick Product page 2004 Glen-Gery University

15. YOU ARE HERE, STOOPID! PERSISTENT NAVIGATION – Navigation appearing in the same place on every page with a consistent look that gives viewer confirmation they’re still in the same site. Secondary page site navigation in html links. Easy to add/subtract topics BREADCRUMBS – A site navigation scheme that shows you where you are in the context of the site’s hierarchy. Breadcrumbs give the viewer a means of retracing their steps. 2004 Glen-Gery University

16. A site navigation scheme that shows you where you are in the context of the site’s hierarchy. Breadcrumbs give the viewer a means of retracing their steps. 2004 Glen-Gery University

17. Navigation on Secondary Page Header Navigation is important. Research shows that the “back button” accounts for somewhere between 30 and 40 percent of all Web clicks. The navigation on the new site is designed to guide user to desired content in 2 mouse clicks. 2004 Glen-Gery University

18. Site Highlights: • Brick Product Selection Page • Photo Gallery • Viewer tracking 2004 Glen-Gery University

19. Brick Product Selection 2004 Glen-Gery University

20. Brick Product Selection Page 2004 Glen-Gery University

21. Simple search by 9-color range OR . . . 2004 Glen-Gery University

22. Advanced search If confused, overwhelmed or simply inept, it’s easy to return to “Basic Search” 2004 Glen-Gery University

23. Basic search on “Red” results in all red products displayed in groups of 12, by default. 2004 Glen-Gery University

24. View all brick products in groups of 12 in image size small, medium or large. “Small,” shown here, is default size. OR… View all brick products. Basic search on “NO Color” results in all products, displayed in groups of 12 by default. Clicking on “view all” displays entire database of Type 1 panels, arranged according to shade. 2004 Glen-Gery University

25. On every product page are links for: • view project with this brick • view brick on virtual house • color mortar • tech info about product • view other products in same color range. • add to “Favorites” BREADCRUMBS • Clicking on thumbnail displays larger image. • All products are identified by: • brick name • series • texture • color range • plant • special order 2004 Glen-Gery University

26. Chaparral shown in range of color mortar Enlarged Chaparral with selected color mortar Chaparral extruded facebrick with neutral grey mortar View same product, side by side, with different color mortar. 2004 Glen-Gery University

27. Photo Gallery A searchable database of over 650 Glen-Gery project images… Both residential and commercial 2004 Glen-Gery University

28. Simple search by Color or Keyword 2004 Glen-Gery University

29. arches blending bond chimney coatings color mortar column coping corbelling corner cornices dentil driveway entrance fireplace garden wall interior lipped mailbox name brick openings parapet patio pier pillar plinth polychromatic quoin radial sculpture sill stair thin brick tread walkway water table Search by Color Search by Keyword 2004 Glen-Gery University

30. Advanced Search 2004 Glen-Gery University

31. Search on “Arches” displays thumbnail images of representative projects 2004 Glen-Gery University

32. Click on thumbnail image for enlarged view. EVERY image will be identified by project name and brick. Clicking on brick name takes viewer to Type 1 panel of same. 2004 Glen-Gery University

33. COMMERCIAL GALLERY works the same as RESIDENTIAL GALLERY 2004 Glen-Gery University

34. Digital Dragnet Tracking users’ activity on the site 2004 Glen-Gery University

35. COOKIES The new Glen-Gery site will use “cookies” to recognize repeat users and aid them in the retrieval of information on subsequent visits. For example, the new site allows users to store images of brick products for ongoing comparison and review, a feature available only if the use of cookies is enabled. A “cookie” is a tiny file sent from the Glen-Gery web server to the viewer’s browser. The browser then stores the file on the viewer’s hard drive. The cookie is used to identify the viewer’s unique ID that is created on their first visit to the site. Information accessed by the viewer is recorded in a database on the Glen-Gery server. 2004 Glen-Gery University

36. Glen-Gery’s Privacy Policy Glen-Gery will maintain the privacy and safeguard any information gathered or supplied on our website. In addition, Glen-Gery uses security measures to protect against the loss, misuse and alteration of data used by our system. 2004 Glen-Gery University

37. Java Programming The Glen-Gery site is cutting edge … once again! 2004 Glen-Gery University

38. JAVA DRIVEN PROGRAMMING Java is a programming language used on more sophisticated websites. It allows far greater flexibility in the way website information can be presented. Possibilities include: -- Tailor a site to user’s preferences (e.g. architects, distributors) -- “Internationalized” website for foreign customers (Spanish, French) -- Write entire site to DVD for offline access (laptop demos) -- Use viewer tracking information to gather data on regional preferences for brick products, colors, etc. 2004 Glen-Gery University

39. Java vs. Javascript Many websites rely on “Javascript” for special effects and functionality. Javascript* is a scripting language that relies on a web browser to execute commands. Because browsers don’t all use the same “dialects” for interpreting Javascript, compatibility issues often occur when data is requested. This can be the reason for blank pages, non-functioning buttons/features, dynamic html menus that don’t work, stalled downloads, dead rollovers, etc. Java acts like a stand-alone application. It uses a browser for its presentation, but is not dependent on it. Therefore, the user is likely to experience few, if any, glitches. * Java & Javascript are not related. Java is a product of Sun Microsystems, Inc. Javascript (formally called ECMAScript) is a product of Netscape Communications Corp. 2004 Glen-Gery University

40. Look for the new site to be online in March 2004.