Glen-Gery Website

1
(No Transcript)
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.
4
The New Face of Glen-Gery
5
The redesign is a major overhaul of the sites
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 Internets power to
  deliver content unlike any other medium.

6
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.

7
How We Work the Web or why Flash is panned.

• To draw in viewers and encourage exploration, a
  website must offer meaningful content thats
  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.

8
How We Work the Web Informavores

• The web experience encourages information
  foraging.
• Users wont 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.

9
(No Transcript)
10
The design of the new Glen-Gery website follows
proven usability principles

• Sites 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.

11
Homepage features designed to draw viewers into
the site.
Find 20 closest distributors relative to viewers
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.
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.
13
Graphical hotspots guide viewers to key areas of
site. Women respond to graphics. Men respond to
html links.
14
Rollovers reveal colors of brick and link to
Brick Product page
15
PERSISTENT NAVIGATION Navigation appearing in
the same place on every page with a consistent
look that gives viewer confirmation theyre 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 sites
hierarchy. Breadcrumbs give the viewer a means of
retracing their steps.
16
A site navigation scheme that shows you where you
are in the context of the sites
hierarchy. Breadcrumbs give the viewer a means
of retracing their steps.
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.
18
Site Highlights

• Brick Product Selection Page
• Photo Gallery
• Viewer tracking

19
Brick Product Selection
20
Brick Product Selection Page
21
Simple search by 9-color range
OR . . .
22
Advanced search
If confused, overwhelmed or simply inept, its
easy to return to Basic Search
23
Basic search on Red results in all red products
displayed in groups of 12, by default.
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.
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

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.
27
Photo Gallery
A searchable database of over 650 Glen-Gery
project images Both residential and commercial
28
Simple search by Color or Keyword
29
arches blending bond chimney coatings color
mortar column coping corbelling corner cornices de
ntil driveway entrance fireplace garden
wall interior lipped mailbox name
brick openings parapet patio pier pillar plinth po
lychromatic quoin radial sculpture sill stair thin
brick tread walkway water table
Search by Color
Search by Keyword
30
Advanced Search
31
Search on Arches displays thumbnail images of
representative projects
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.
33
COMMERCIAL GALLERY works the same as RESIDENTIAL
GALLERY
34
Digital Dragnet
Tracking users activity on the site
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 viewers browser. The browser
then stores the file on the viewers hard drive.
The cookie is used to identify the viewers
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.
36
Glen-Gerys 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.
37
Java Programming
The Glen-Gery site is cutting edge once again!
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 users 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.
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 dont 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 dont 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.
40
Look for the new site to be online in March 2004.