Slide 1: Web 2.0 and Beyond A Discussion of the Latest Trends in Interaction Design, SEO, and Accessibility
Slide 2: What is Web 2.0?  Web services  AJAX- Asynchronous JavaScript And XML  RoR- Ruby on Rails development framework  Mimic client-based apps  Launching public betas  Viral marketing through niche blogs and listserves  Community  Social tagging  Sharing- content & applications (APIs)  Bold interface design  Big type/print  Pastel or high contrast colors  Web standards coding  Optimize content for search engines  Provide a more usable environment for those with accessibility challenges
Slide 3: What Does It Look Like?  Kodak Easyshare vs. Flickr  Travelocity vs. Kayak  Mapquest vs. Google Maps  Yahoo! Mail vs. Gmail
Slide 4: Easyshare vs. Flickr
Slide 5: Travelocity vs. Kayak
Slide 6: Mapquest vs. Google Maps
Slide 7: Yahoo! Mail vs. Gmail
Slide 8: How Does It Behave?  Less page refreshes  Functionality such as login and registration appear directly on top of the parent screen or directly within the interface under the control that prompted the action (without a refresh)  Immediate system feedback to the user with progress wheels and the yellow fade technique  Modular design  Reuse of functionality  Controlled by cascading style sheets, AJAX, Flash, and/or JavaScript
Slide 9: Login the New Way
Slide 10: How Does It Effect the Interaction Designer?  Users will become used to less page refreshes  User will expect streamlined interaction (i.e. not a new page for login or      registration) Issues with the page model or use of the browser’s history file Providing ample feedback to the user Documentation- how to document interaction within the viewport not page to page wireframes Interaction diagram- similar to a page flow but highlights constellations of functionality within the screen Interaction review after coding- no longer observing transitions from page to page but user action to system response to user comprehension to user action
Slide 11: Cool Web 2.0 Apps and Sites  Basecamp- by 37signals- project management software  Carbonmade- by nterfaceportfolio management software  Odeo- media interface
Slide 12: Search Engine Optimization (SEO) What does a user advocate need to know?  Research  Users  Keywords- information architect, IA, Jesse James Garrett, JJG, Visio templates, AJAX  Related to web standards coding- easier for search engines to determine if the page content pertains to the user’s query- meta data such as page description, title, and keywords  Search engine algorithms help to determine the placement of a URL within a search result  Increase page ranking  Link building- good traffic / bad traffic  Optimize content for maximum “pick up”  Goal: Top placement on page 1
Slide 13: Top Search Engines  Yahoo!  Google  Worth Mentioning  Dogpile  Clusty  DMOZ- directory
Slide 14: SEO in a Nutshell What does the industry look like?  Generally a low barrier to entry  Success is based upon knowing the site’s user base, industry, and niche touch points on the web (build credibility and page rank)  Lots of low priced software to assist with keyword creation, page rank, code clean up, and site submission (Web CEO and SEO Studio)  Lots of offshore companies provide the service  Known corporate SEO and SEM companies: iProspect
Slide 15: SE Glossary of Terms                             Algorithm - The formula that determines how a web page will rank in the search results pages of a search engine. Anchor Text - Also known as Link Text, the clickable text of a hyperlink. Blind Traffic - Low quality traffic generated by misleading banners or SPAM. Clustering - In search engine search results pages, clustering is limiting each represented website to one or two listings. CPA - Cost Per Action. CPC - Cost Per Click. CPM - Cost per 1,000 impressions. CTR - Click Through Ratio. Doorway Page - A web page designed to draw in Internet traffic from search engines, and then direct this traffic to another website. EPV - Earnings Per Visitor. Filter Words - Words such as is, am, were, was, the, for, do, ETC, that search engines deem irrelevant for indexing purposes. Hit - A single access request made to the server. IBL - Inbound Link. A link from another site to your site. ODP - The Open Directory Project (http://dmoz.org/) Outbound Link - A link from a page of your site to another site. Page Views - The number of times distinct pages of a website are served. PPC - Pay Per Click. Query - The execution of a search on a search engine. SE - Search engine. SEM - Search engine marketing. SEO - Search engine optimization. SEP - Search engine placement. SERP - Search Engine (Search) Results Page. Stemming - Word variations. For example, if I entered the query "swim", a search engine that supports stemming might return results that include "swimming" or "swims". Stop Word - A word which is ignored in a query because the word is so commonly used that it makes no contribution to relevancy. Examples are common net words such as computer and web, and general words like get, I, me, the and you. Unique Visitor - An instance of a unique site connecting to your server. URL - Universal Resource Locator. USP - Unique Selling Proposition. Sometimes mistakenly defined as Unique Selling Point. The Unique Selling Proposition concept was first developed by Rosser Reeves of the Ted Bates Agency.
Slide 16: Accessibility How does this effect the UI designer?  Section 508  Federal law  Not just a government site concern  Target.com, AOL, and Bank of America  National Federation for the Blind (NFB)
Slide 17: Key Areas of Focus  Do not rely on color for user actions- click on the blue button to continue  Provide alternative navigational schemes to accommodate screen readers (skip       nav) Provide ample feedback to the user (AJAX?) Create high contrast alternatives to viewing content 12 pt. type is a minimum size for body copy Tables require special attention (tabular data, headers, scope, and axis tags) Don’t be too tricky when using well-established metaphors (difficult for screen readers to navigate complex forms) Provide degradeable alternatives (no JavaScript version of major actions)
Slide 18: Summarization  The Web is looking more like print and behaving more like desktop applications  Web standards coding is not only a best practice for the front-end developer but a necessity relating to SEO and Accessibility  SEO is not an exact science but following good coding guidelines and implementing a deep, niche, viral marketing campaign can help achieve good placement and assist “findability”  Accessibility is a global concern- not just a Federal law that is applied to government web sites
Slide 19: Questions?  So how does this effect our web site?  What are some cool things we could do that make sense for our audience?