Upload
miyoko
View
45
Download
0
Tags:
Embed Size (px)
DESCRIPTION
Corporate Website The Bigger Picture. Avimanyu Datta, Ph.D. Candidate Washington State University. Designing Your Web Site Chapter 8. Web Site Planning Process. Identify the site’s business objectives Selling products or services Educating consumers Providing technical support - PowerPoint PPT Presentation
Citation preview
Avimanyu Datta, Ph.D. Candidate
Washington State University
Designing Your Web SiteChapter 8
Corporate Website The Bigger Picture
Web Site Planning Process Identify the site’s business objectives
› Selling products or services› Educating consumers› Providing technical support› Collecting information from visitors› Offering a virtual community to customers› Directing consumers to other useful sites› Recruiting talented employees
8-2
Web Site Planning Process (continued)
Understand who will visit the site› Demographics is necessary. Do Market
analysis. If possible collect demographics Understand what visitors will do at the site
› Primary audience consists of the targeted customers identified in business plan
› Secondary audiences Vendors Strategic partners Investors General public
8-3
Web Site Planning Process (continued)
Design the site to accommodate the most common technological constraints› Experienced or novice users
Try customizing cite according to the expertise of the user level of expertise CREATE SHORTCUTS
› Browser and version commonly used› Internet connection speeds
Too much dynamic content slows data retrieval speed› Screen resolutions used
Fixed-width pages Pages that resize with the browser window
8-4
Web Site Organization Home page should answer basic visitor questions:
› Who are you?› What do you do?› Where can I find what I want or need?› Why should I be interested in your products or services?
8-5
Web Site Organization (continued)
Secondary pages› Customer login page› Products or services
pages› “Shopping cart” page› Shipping and return
policy pages› Customer support
pages› Contact information
pages› “About Us” pages
8-6
Web Site Organization (continued)
Secondary pages (continued)› Privacy policy and acceptable use pages› Frequently asked questions (FAQ) pages› Employment opportunities pages› “What’s New?” pages› Customer stories or case studies pages› Affiliate program pages› Help pages
8-7
Web Site Organization (continued)
Linear structure› A series of pages linked in sequential order
8-8
Web Site Organization (continued)
Webbed structure› Pages are linked together without regard
for how the content fits logically
8-9
Web Site Organization (continued)
Pure hierarchical structure› Similar to business organizational chart› Information is organized in levels› Home page at Level 1 (top-level)› Main topic pages at Level 2› Additional details about main topics at
remaining levels
8-10
Web Site Organization (continued)
8-11
Web Site Organization (continued)
Mixed hierarchical structure› Combines structured organization with
cross-linked pages
8-12
Web Site Organization (continued)
Site organization› Should enable visitors to find actionable
content quickly and easily› Be neither too flat nor too deep› Logical and intuitive
Avoid a structure that is either too flat or too deep › Try not to go beyond 4 levels of depth.› Structure that is too flat is uninteresting› Structure that is too deep is difficult to
navigate 8-13
Web Site Organization (continued)
Web site storyboard› Used to test a Web site organizational plan› Manual mock-up of site’s organization
Index cards, sticky notes, sheets of paper represent individual Web pages
Use push pins or tape to fasten cards, notes, of sheets of paper to white board or corkboard
Create connecting lines indicating links› Look for illogical links, orphan pages,
missing pages8-14
Web Site Organization (continued)
8-15
Useful and AttractiveWeb Pages
Web accessibility – Designing Web pages so that Web resources are available to people with disabilities
W3C guidelines for accessibility› Visual or auditory content is supported by
alternative content› Color alone should not indicate a link
10% of users are color blind› Adequate contrast for
background/foreground colors8-16
Useful and AttractiveWeb Pages (continued)
8-17
Useful and AttractiveWeb Pages (continued)
W3C guidelines for accessibility (continued)› Simply worded text› Movement, scrolling, and blinks can be
turned off without loss of information or navigation
› Navigational links are clear and consistent› Page content is consistent across all pages
8-18
Useful and AttractiveWeb Pages (continued)
Web usability› Designing Web pages to help all visitors
accomplish their goals at a site quickly and easily
Consistency across all pages› All pages should have a common “look and
feel”(Put company logo and have a consistent layout)
› Elements in same position› Standard color scheme
8-19
Useful and AttractiveWeb Pages (continued)
Navigational elements (internal links)› Embedded text links› Clickable table of contents and top-of-page
links› Navigation bars› Navigation menus› Navigation tabs› Breadcrumb trail› Site map
8-20
Useful and AttractiveWeb Pages (continued)
Embedded text links› Link positioned inside a paragraph› Text in link should clearly describe what
page visitors will see Use Fax Phones Do not use Click here
Clickable table of contents and top-of-page links› Use to navigate topics on a long Web page› Allow visitors to read subtopics and return
to the top of the page without scrolling8-21
Useful and AttractiveWeb Pages (continued)
Navigation bars, menus, and tabs› Navigation bar is a
series of graphic or text-based internal links
› Often found at the top or bottom of Web page
› Navigation menu is a list of internal links
› Navigation tabs are similar to file folder tabs
› Both are used to conserve space on a page
8-22
Useful and AttractiveWeb Pages (continued)
Breadcrumb trail› Hierarchical
navigational outline› Provides visitor with
feedback on path taken to current page
› Use in conjunction with other navigational elements
8-23
Useful and AttractiveWeb Pages (continued)
Site map› Web page that shows a summary of all the
linked pages at the site Rollover links
› Hidden links that appear when mouse is “rolled over” an animated image
› Avoid rollover links
8-24
Useful and AttractiveWeb Pages (continued)
Page layout› Fixed-width pages fit in a maximized
browser window for a specific screen resolution
› Liquid design creates pages that size with the browser window Use tables (arrangement of columns and
rows) Use CSS (cascading style sheets)
8-25
Useful and AttractiveWeb Pages (continued)
Page length› Keep pages short to avoid vertical scrolling
Splash pages and frames› Avoid them
Search function and forms› Add access to search function on all
relevant pages› Use forms to collect information
8-26
Useful and AttractiveWeb Pages (continued)
Writing for the Web› Use simple, direct language› Avoid industry jargon› Use bulleted and numbered lists› Use dark text color on light background› Use a familiar font› Use at least a 12-point equivalent font› Check spelling and grammar, and
proofread
8-27
Useful and AttractiveWeb Pages (continued)
Choose color scheme carefully Use images, audio, and video sparingly
and only when they support the Web site message
Avoid background images Add alternative text to image links Add related text links to support image
links
8-28
Web Design Outsourcing Carefully assess costs of in-house Web
design and development compared to outsourcing costs
Outsourcing benefits› May save time and money› Provides greater access to experienced
specialists familiar with current best practices and trends
› May provide access to usability analysis
8-29
Activity: Go to
http://www.archive.org/web/web.php Check the earlier versions of
www.amazon.com; www.yahoo.com; www.google.com
What drives the change? Although in some case they look drastic, but over a period of time the changes seem subtle.
8-30