Designing Embedded User Assistance for Web- based Applications Scott DeLoach.

Slides:

Advertisements

Similar presentations

Developing Context-sensitive Help for Web Applications Scott DeLoach.

Advertisements

Case Studies in Web-based Embedded User Assistance Scott DeLoach © Copyright 2004, User First Services.

Basic Computer Skills Windows & the Internet.

Samsung Smart TV is a web-based application running on an application engine installed on digital TVs connected to the Internet.

1 Web Site Design Overview of the Internet Cookie Setton.

Lesson 10: Starting Windows Applications start an application program move between open application programs start an application using the Run command.

Chapter 8 Creating Style Sheets.

Web Accessibility Tests Using the Firefox Browser ACCESS to Postsecondary Education through Universal Design for Learning.

1 Chapter 11 Developing Custom Help. 11 Chapter Objectives Use HTML to create customized Help topics for an application Use the HTML Help Workshop to.

CSC 2720 Building Web Applications JavaScript. Introduction  JavaScript is a scripting language most often used for client-side web development.  JavaScript.

4.01B Authoring Languages and Web Authoring Software 4.01 Examine webpage development and design.

1 Lesson 1 Quick HTML Know-How HTML and JavaScript BASICS, 4 th Edition Barksdale / Turner.

 Definition of HTML Definition of HTML  Tags in HTML Tags in HTML  Creation of HTML document Creation of HTML document  Structure of HTML Structure.

Paul Trani Adobe Certified Instructor/Expert Resources:

Windows & The Internet. Objectives: Identify and use computer hardware Open and close a desired program Switch back and forth between open windows Create.

DHTML - Introduction Introduction to DHTML, the DOM, JS review.

DHTML. What is DHTML?  DHTML is the combination of several built-in browser features in fourth generation browsers that enable a web page to be more.

ES 101. Module MS Front Page Tutorial and Web Hosting.

Architecture Of ASP.NET. What is ASP?  Server-side scripting technology.  Files containing HTML and scripting code.  Access via HTTP requests.  Scripting.

JavaScript Teppo Räisänen LIIKE/OAMK HTML, CSS, JavaScript HTML defines the structure CSS defines the layout JavaScript is used for scripting It.

HTML Forms and Scripts. Session overview What are forms? Static vs dynamic Client-side scripts –JavaScript.

1 Lesson 6 Exploring Microsoft Office 2007 Computer Literacy BASICS: A Comprehensive Guide to IC 3, 3 rd Edition Morrison / Wells.

INTRODUCTION TO FRONTPAGE. TOPICS TO BE DISCUSSED……….  Introduction Introduction  Features Features  Starting Front Page Starting Front Page  Components.

McGraw-Hill/Irwin © 2004 by The McGraw-Hill Companies, Inc. All rights reserved. Dynamic Action with Macromedia Dreamweaver MX Barry Sosinsky Valda Hilley.

Web Design ITM 2010 Tutorial 1 Prepared by Wang Shiyu.

SEG3210 DHTML Tutorial. DHTML DHTML is a combination of technologies used to create dynamic and interactive Web sites. –HTML - For creating text and image.

CNIT 133 Interactive Web Pags – JavaScript and AJAX JavaScript Environment.

10 Adding Interactivity to a Web Site Section 10.1 Define scripting Summarize interactivity design guidelines Identify scripting languages Compare common.

Chapter 1 Understanding the Web Design Environment Principles of Web Design, 4 th Edition.

Week 1 Understanding the Web Design Environment. 1-2 HTML: Then and Now HTML is an application of the Standard Generalized Markup Language Intended to.

University of Sunderland CDM105 Session 5 Web Authoring Tools The past and present A history of web authoring tools and an overview of Macromedia Dreamweaver.

SEG3210 DHTML Tutorial. DHTML DHTML is a combination of technologies used to create dynamic and interactive Web sites. –HTML - For creating text and image.

Creating an Animated Web Page

XP Tutorial 4 New Perspectives on JavaScript, Comprehensive1 Working with Objects Creating an Animated Web Page.

Flash & JavaScript Mariela Hristova October 19, 2004 INF 385E – Fall 2004 – School of Information.

JavaScript, Fourth Edition

DHTML - Introduction Chapter Introduction to DHTML, the DOM, JS review.

Interactive Client-Side Technologies MMIS 656 Web Design Technologies Acknowledgements: Estrella, S. (2003). The Web Wizard’s Guide to DHTML and CSS.

Introduction to Programming the WWW I CMSC Summer 2003 Lecture 7.

Introduction to JavaScript CS101 Introduction to Computing.

Cs332a_chapt10.ppt CS332A Advanced HTML Programming DHTML Dynamic Hypertext Markup Language A term describing a series of technologies Not a stand-a-lone.

DHTML. What is it? Dynamic HTML. Not a standard unlike HTML or Java It is a term applied by both Netscape and Microsoft to a collection of technologies.

TOPIC II Dynamic HTML Prepared by: Nimcan Cabd Cali.

1 A Basic Introduction to Flash. Outline What is a flash? Macromedia Flash MX 2004 Flash concepts Flash Demos Conclusion Additional help 2.

4.01B Authoring Languages and Web Authoring Software 4.01 Examine webpage development and design.

Unit 1 – Web Concepts Instructor: Brent Presley.

CSS Hadas Kahsay. Overview  What is CSS  Basic syntax of CSS Rules  How to link CSS style to html documents  Browsers and CSS  Advantages of CSS.

New and Improved Financial Aid Help Service System for Clark Atlanta University By Shannon Parker.

HTML HYPER TEXT MARKUP LANGUAGE. INTRODUCTION Normal text” surrounded by bracketed tags that tell browsers how to display web pages Pages end with “.htm”

IE Developer Tools Jonathan Seitel Program Manager.

Chapter 10 Dynamic HTML (DHTML) JavaScript, Third Edition.

Learning Aim C.  Creating web pages involves many considerations.  In this section we will look at the different software tools you can use and how.

JavaScript and Ajax (JavaScript Environment) Week 6 Web site:

Basic Computer Skills Windows & the Internet vfu.bg/en/e-Learning/

Teaching slides Chapter 6. Chapter 6 Software user interface design & construction Contents Introduction Graphical user interface – Rich window based.

Working with Cascading Style Sheets

Project 1 Introduction to HTML.

Using DHTML to Enhance Web Pages

4.01B Authoring Languages and Web Authoring Software

Human Computer Interaction

Chapter A - Getting Started with Dreamweaver MX 2004

INTRODUCTION TO HTML5.

Section 10.1 YOU WILL LEARN TO… Define scripting

DHTML Javascript Internet Technology.

4.01B Authoring Languages and Web Authoring Software

DHTML Javascript Internet Technology.

Dreamweaver MX 2004 Fundamentals

Microsoft Office Illustrated Fundamentals

Web Programming and Design

Presentation transcript:

Designing Embedded User Assistance for Web- based Applications Scott DeLoach

Help that appears in the application rather than in a separate Help window. Examples: - Microsoft Money - HTML Help Workshop - HomeSite What is Embedded Help?

Interactivity - shortcut buttons - troubleshooting - product tours - Performance support Provide alternate interface(s) Easier to use Advantages of Embedded Help

Small Help area Lacks structure (TOCs, Index) Printing problems Harder to create and implement Disadvantages of Embedded Help

Example 1: Designing for Compatibility App/Site: Ceridian Empowerment Specs: Works any browser Uses JavaScript Does not use DHTML or CSS

Context-sensitivity (draft icons) Screen-level Help provides a summary of the screen and links to related task topics.

Context-sensitivity 1 How it works JavaScript code: determines the current page (currentpage.htm) loads Help file as h_currentpage.htm 2

Active Assistance Help text automatically changes when the user moves to a different field.

Active Assistance JavaScript code: receives the form elements name (bDate) shows the Help file (h_bDate.htm) 2 How it works 1

Progress Tracking Task topics monitor your progress with the arrow and mark skipped steps.

Progress Tracking JavaScript code: receives the form element or pages name finds a match in the step list moves the arrow to the step 3 <BODY TEXT="000000" BGCOLOR="ffffff" onload="helptask();"> 1 How it works 2

Cross-browser Help System JavaScript-based TOC and CGI-based search work with older browsers on virtually any platform.

Tools Dreamweaver (embedded Help) Notepad (JavaScript js file) RoboHELP HTML (Help system) Technologies JavaScript frames Tools and Technologies

Example 2: Fully Integrated Assistance App/Site: MySample.com Specs: Works in IE 4+ and Netscape 4+ Uses JavaScript Uses DHTML and CSS

Window Overviews and Tips

Enhanced Hover Help

How it works onMouseOver="helpSHOW(this.title)" onMouseOut="helpHIDE(this.title)" 1 JavaScript code shows and hides the requested layer. 2

Tools Dreamweaver (embedded Help) Notepad (JavaScript js file) RoboHELP HTML (Help system) Technologies JavaScript DHTML and CSS Tools and Technologies

Example 3: Automatic Assistance App/Site: Alamo.com Specs: Works in IE 4+ and Netscape 4+ Uses JavaScript Uses DHTML and CSS

Automatic Assistance Helpful Information automatically changes as different fields receive focus.

Tools HTML Editor Technologies JavaScript DHTML and CSS Tools and Technologies

Example 4: Focusing on Tasks App/Site: eBay Specs: Works in IE 4+ and Netscape 4+ Uses JavaScript Uses DHTML and CSS

Show me how icon is available for every eBay item. Modular Task-based Tutorial

Simple introduction and overview of the bidding tutorial. Modular Task-based Tutorial

Tutorial includes real information based on the item (in this case, the actual current bid rather than a static number). Modular Task-based Tutorial

How it works Hidden layer with CGI-generated price. 1 JavaScript code shows and hides the requested layer. 2

Tools Dreamweaver (prototyping) Technologies JavaScript DHTML CGI Tools and Technologies

Example 5: Focusing on Performance App/Site: US Postal Service POS1 Specs: Works in any browser Designed for use without a mouse Uses JavaScript

High-volume Retail Application

Quick Procedural Information Help appears when user presses Help on customized keyboard.

Tools Notepad Technologies HTML JavaScript Tools and Technologies

HTML Dynamic HTML (DHMTL) Cascading Style Sheets (CSS) JavaScript Document Object Model (DOM) What do I need to know?

Heinle, Nick. Designing with JavaScript. A great introduction to JavaScript. Holzner, Steven. JavaScript Complete. This book focuses on version 4+ browsers and provides good information about Dynamic HTML. Goodman, Danny. JavaScript Bible. An excellent reference book. Its the best resource for answering syntax and browser compatibility questions. Recommended JavaScript Books

Schurman, Eric. Dynamic HTML in Action. Great introduction to HTML and DHTML. Goodman, Danny. Dynamic HTML: The Definitive Reference. A handy reference, especially if you are developing cross- platform embedded Help. Microsoft Press. DHTML Reference and SDK. Comprehensive reference book. If you need to know everything about DHTML in Internet Explorerand theres a lot it can do!this is the book for you. Recommended DHTML Books

Feel free to me. Or, catch me later at the conference! Scott DeLoach Founding Partner, User First Services, Inc. Certified RoboHELP Instructor and Consultant Questions?