MVC for Wufoo

Our client had a set of forms that they needed their clients to complete over time. The forms were powered by Wufoo, but a system was needed to record the progress as clients filled forms over time. We created a little MVC app to manage the process.

New user registration

MVC

A simple MVC web app provided an ideal solution to our clients' requirements on this occasion. Once developed we moved on to the presentation.

Simply intuitive

To help provide an intuitive user experience to the wide range of visitors that made up the audience for this app we:

  • kept content to a minimum
  • used clear language
  • used negative space, clear and clean design.

User experience

We care a great deal about UX and try within our remits to maximize the intuitive, simple and attractive.

A tiny but good example of caring for UX—we wanted to provide people submitting a form with a confirmation, invariably a good idea as noted by Jakob Nielsen in 'Top 10 Application-Design Mistakes':

4. No Feedback
One of the most basic guidelines for improving a dialog's usability is to provide feedback:

  • Show users the system's current state.
  • Tell users how their commands have been interpreted.
  • Tell users what's happening.

Sites that keep quiet leave users guessing. Often, they guess wrong.

Top 10 Application-Design Mistakes / Jakob Nielsen

We used jQuery to slide in a confirmation message, a common mechanism. Knowing the audience would be wide ranging, we felt leaving the message in view might cause it to have too much impact, perhaps implying a call to action. To solve this we had the dialogue automatically slide away, but we were keen to avoid the potential of a half read message disappearing.

Simple but effective solution

Our simple but effective solution (I'm sure others have done this but we came up with it independently) was to slide down a link: 'Show last message' after the message had gone, specifically:

  • message times-out, slides up & away; page slides up to fill the void
  • content slides down one line and 'Show last message' link appears.

This up-down sequence succinctly draws attention to the appearance of the 'Show last message' link, the user understands what has happened and understands how to re-read the message in case they missed some of it.

A GIF of the sequence

Summary

Domain
forms.homeopathy.com

The system is working great, we really like the format!

What we did
Identity designWe designed the key recognizable brand attributes.
Website buildWe designed and produced the CSS, HTML5, JavaScript and graphic resources needed to build this website.
HostingWe provide hosting services.
OngoingWe provide ongoing enhancement and development.
Content creationWe provided original content creation services.
Member managementMember management system.
MVCModel–view–controller app.

Terms and conditions | Copyright © 2007—2017 Clearly Convey Inc., clearlyconvey.ca, Ottawa, ON. | Colophon | Google+