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.
A simple MVC web app provided an ideal solution to our clients' requirements on this occasion. Once developed we moved on to the presentation.
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.
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
The system is working great, we really like the format!
- What we did
- Identity design—We designed the key recognizable brand attributes.
- Hosting—We provide hosting services.
- Ongoing—We provide ongoing enhancement and development.
- Content creation—We provided original content creation services.
- Member management—Member management system.
- MVC—Model–view–controller app.