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?