Clicks & Notes

18 May 2005

Designing intersection flows

GUUUI - Designing intersection flows

There is a potential problem if forms are involved and users have to choose between this and that in order to proceed. We should be alert if two or more forms are present on the same page, i.e. if there are two or more sets of input fields with each their submit button - especially if they are placed close to each other and if they work in a similar way.

There seems to be two ways to eliminate intersection problems. If possible, get rid of options which aren’t mission critical. If this isn’t possible, combine the options into one clear dialogue.

⇒ Filed under:  by jen @ 11:23 pm

Calls to action

grokdotcom – So What Exactly is a Call to Action?

The most obvious Calls to Action are ones that say “Add to Shopping Cart” or “Buy Now” or “Subscribe.” A straight-forward “do this.” At the most basic level, they tell the visitor what she can accomplish on that page, and encourage her forward in the conversion process. When Calls to Action like these are paired with Point of Action assurances ("We Value Your Privacy,” “You can always remove the item later"), you motivate action and build confidence.

There are the Calls to Action that are meant to be part of the information-gathering process of the buying decision. You might offer these as Calls to Action: “Next” or “Click here to see alternate views” or “Read what our customers have to say about the Turbo 915.” It helps to pair this sort of Call to Action with an emotionally appealing benefit

Embedded links are less obvious Calls to Action, but when they look the way folks expect a text link to look, and when they intuitively imply where they go, they certainly can function as a Call to Action. These are the Calls to Action that will help you meet the various needs of all the different personality types who come to your site.

⇒ Filed under:  by jen @ 11:20 pm

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

greenonions.com – 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