Clicks & Notes

10 May 2005

Overview of Web Application Solutions

Functioning Form - Web Application Solutions: A Designer’s Guide

Web Application Solutions is a guide that helps designers, product managers, and business owners evaluate some of the most popular Web application presentation layer solutions available today. We compare each solution through consistent criteria (deployment & reach, user interactions, processing, interface components & customization, back-end integration, future proofing, staffing & cost, unique features) and provide an overview, set of examples, and references for each.

  • Types of Web Applications:
    • Thin Client
      • uses web browser for security, state management, and script execution
      • most data processing and storage occurs on a remote server
    • Rich Internet Application (RIA)
      • enables richer locally processed user interactions, such as fluid animation, multimedia content, and real-time validation
      • also enables advanced remote messaging
    • Rich Client (smart client, desktop client)
      • a web-connected application that does not run within the browser, and can be delivered as compiled code
  • Web Application Technologies:
    • (X)HTML
    • DHTML (HTML + JavaScript + CSS)
      • DHTML with Remote Scripting via iFrame
      • AJAX (DHTML with XMLHttpRequest
    • Flash (version 6 or higher)
      • Flash with Flex or Laszlo Presentation Server
    • Java Applets
    • Active X
    • Java Web Start
    • Windows Smart Clients

See also: Functioning Form - Web Application Continuums

Many Web Application technologies are an attempt to bridge the gap between Thin (browser-based) and Thick (desktop-based) clients. As a result, it’s useful to consider where they fall on a continuum between these two deployment and design options.

⇒ Filed under:  by jen @ 11:36 pm

Representing Data in Wireframes – Representing Data in Wireframes (PDF, 159 kb)

A poster from the ASIS&T 2005 Information Architecture Summit, outlining the different kinds of sample data you can use in wireframes:

  • actual – real data; provides most accurate view of how information will appear; may also be distracting, particulalry if the data changes and the wireframe does not
  • dummy – made-up data that looks real; best for addresses or other variables that are predictable or follow a specific format
  • labeled – uses the variable name, with added information such as field length; should include notes on business rules, provide examples
  • symbolic – field length and data type are illustrated through repeated characters (e.g. “9″, “X"); best used for numbers, currency, or dates
  • lipsum – fake Latin or Greek text, used as a placeholder; consider rendering lipsum in grey in your wireframe, and superimposing a description of the actual content

(via Column Two and UXCentric)

⇒ Filed under:  by jen @ 10:57 pm

Designing Long Web Forms

Usability News - Caroline’s Corner - Long Forms: Scroll or Tab?

  • basic rule of thumb: one form = one page
  • if that’s not feasible: one topic = one page
  • scrolling is permissible – ideally, keep it within two screens (this will also fit nicely on letter-size paper if the user wants to print the form)
  • it’s better to put form fields in a single column than in two
⇒ Filed under:  by jen @ 10:37 pm

© Jennifer Vetterli, 2005