Improving the Interactive Course Web User Interface Clinton W. Smullen III Stephanie A. Smullen The University of Tennessee at Chattanooga E-Learn 2007 October 17,2007 Quebec City, CA

Web 2.0 • Familiar to current students • Used in popular sites – MySpace, YouTube, GMail, GoogleMaps

• Offers – – – –

Richer user experience Closer to desktop application Faster and smoother interactions More responsive than classic Web 1.0

Web 2.0 Who is the target audience for education and training software being developed today? – Current college students – Students entering college in next few years

These users have higher UI expectations – Expectations have changed in last 3 years

Web 2.0 Courseware offering better UI may – Attract more students – Better hold their interest

Than traditional web interface Commonly implemented with AJAX

AJAX Asynchronous Java And XML Designed to improve web application responsiveness provide desktop-like user interfaces reduce network overhead reduce server loads

AJAX A set of technologies: HTML/XHTML, CSS, Dynamic HTML, Client scripting in Java or JavaScript, Document object model, XML data exchange, Synchronous or asynchronous data retrieval using XMLHttpRequest objects

See http://adaptivepath.com/

AJAX • Can perform behind the scenes actions • UI remains active during info retrieval • Renders results without a new page

Old model: click, wait for page load, view page

New model: click, keep working, see results – without replacing the page

AJAX • Technical basics well understood • Implemented in most current browsers • Issues remain: User Interface Web Culture Design Software Engineering Performance Security

User Interface Issues • Users familiar with click-wait-load – No special feedback needed

• AJAX can update part of a page – How to notify the user? – Color background of new results • Then fade background to neutral

User Interface Issues Improve perceived speed of app • Appear faster than server-based • Use local processing – Pre-fetch info (e.g. GoogleMaps) – Process data on client (e.g. sorting, forms-checking, etc)

How do we do this in other apps?

Web Culture Issues Web users familiar with browsers: Click-wait-load Back Button History list

None of these work in AJAX! Without special programming And user training

Web Culture Issues The “Bookmark” and AJAX • Users like bookmarks – Use them often

• Bookmarks won’t work with AJAX – in traditional browsers

• AJAX bookmark must encapsulate current state • Do this efficiently is research issue

Web Culture Issues The “Bookmark” and AJAX • Build a “sitemap” for site? • Allow indexing of AJAX pages by search engines (e.g. Google) • Link to topics within the site?

Web Culture Issues The “Bookmark” and AJAX • Death of page-view metrics? – Measure “clicks” (page-visits)

• New measures? – Page rankings, ad revenues – Measure time spent on page? – Measure activity on page? • Level of activity?

Design Issues Essential AJAX is: (the modern view) – Partial page updates – In response to user actions – Using asynchronous communications

AJAX is not tied to – A language (JavaScript) – Use of XML – Particular communications mode

Design Issues What implementation technologies? – Language: • JavaScript? Java? Flash? • JavaFX or Mobile?

– Data representation: • XML? HTML? JSON? Text?

– Data communications: • XMLHttpRequest? HTML? • AdvancedDOM? App-specific?

Design Issues Target client platforms, devices? – Traditional browsers • On laptops, desktops

– Handheld devices • Pda’s, Phones, iPhones

– Set-top boxes • CATV delivery • NTSC/PAL or HD?

Design Issues Balance client tasks and server? – Performance, speed vs download size

Offline use? – Usable when no network service? – Store info? Synchronize later?

Server push vs client pull? Auditing?

Design Issues Accessibility and AJAX – What if JavaScript is disabled or NA? • Code, maintain 2 versions?

– Support assistive technologies? • Alerts for dynamic updates? • Enable multiple HCI devices?

An active area of research in AJAX

Software Engineering Issues Standards: Cross-browser problems – JavaScript, DOM, XMLHttpRequest, CSS, XML, exceptions, etc – Testing on multiple platforms

Synchronous vs asynchronous use – Development, testing difficulties

Use of a “framework”, IDE, library – AJAX Framework, JavaScript Framework – Commercial vs Open-Source • Google Web Toolkit

Performance Issues HTML vs AJAX – Initial download vs update size – 40-70% savings, or not – AJAX is not always better!

UI bloat – Rise in size of AJAX initial downloads

Local processor speed – AJAX burdens slow client?

Impact on server? On user tasks?

Security Issues • A large topic • Many AJAX holes are also in Web 1.0 • AJAX can be secure – If coded carefully, tested, implemented ... – But often is not, due to AJAX complexity

• Particular focus on client JavaScript – Malware – Exploits

Security Issues AJAX services can • Open a server to greater attack • Be exploited to attack other servers • Be misused unknown to the user • Make DoS attacks easier

Conclusions Students expect more now Use of AJAX can help meet these expectations • Better user interface • Enhanced interactivity • Faster application response • More controlled data presentation

Conclusions Problem areas in AJAX remain Research goes on Widely implemented Can be secure Consider AJAX for your next educational system