Web forms: The good, the bad and the ugly

By Monika Pletschke on January 15, 2015

We all have experience interacting with forms on the web. On-line purchases, web registrations and subscriptions and travel bookings are among the many ways we daily interact with companies in our connected lives.  The experience can be a pleasant one – quick and efficient, or it can be frustrating experience. Much of this depends on the design of the form presented to us.

This article intends to shed some light on what constitutes good vs bad design.

Here are some of my personal likes and dislikes from experiences with web-based applications:

  Like and Dislike icons The form is responsive:  Reaction to invalid input should be as close as possible to the time of input.  Meaningful feedback for invalid input which allows you to identify and correct the error quickly.
 Like and Dislike icons Wait until all the fields are filled before issuing an error message. Do not reveal where the error actually is. Clear the form when an error occurs requiring everything to be filled in again.
 Like and Dislike icons Validation is intelligent. It recognizes context and relationships to other inputs and makes relevant suggestions.
 Like and Dislike icons Input screens are compact and preferable fit on one screen.  The form only renders the fields which I actually have to fill in.
 Like and Dislike icons Forms where you have to use left/right and up/down scroll bars.
 Like and Dislike icons The application considers the rendering device: On a laptop it is easier to type a 4 digit year, whereas on a smartphone it may be easier to turn a scroll wheel.
 Like and Dislike icons Scroll wheel  gadgets:  I was born in the last millennium and don’t appreciate having to turn the wheel from 2014 backwards!  Or how about selecting the country from a drop if you are a Zambian?
 Like and Dislike icons Predictive text completion when it works and is language sensitive.
 Like and Dislike icons Spell checkers which do not recognize the language and make random corrections. (E.g. Why does Windows always correct “for the” to “fort he”?)
 Like and Dislike icons A calendar gadget for input of dates.
 Like and Dislike icons Long periods of wheel  turning  or a blank screen with no feedback whatsoever.
 Like and Dislike icons Unclear date input instructions. Does the form require DD.MM.YYYY or MM/DD/YYYY  or one of the many other combinations used around the world?
 Like and Dislike icons Automatic conversion of time zones. Location sensitive units of measure (metric vs imperial for different countries)

 

Winshuttle Designer and its successor, Winshuttle Composer, are tools to create enhanced or extended solutions for your business. With a user-friendly front-end, easy no-programming integration to SAP and a custom designed workflow, many Winshuttle customers have managed to increase the value of their ERP investment.

While the tools offer absolute flexibility in design, here are some design considerations for getting the best out of your Winshuttle solution.

  1. Do not start with the most complex process as a pilot. As with any development environment, the authors have an initial learning curve to overcome.
  2. For maximum adoption pick the processes according to the Zorro principle: Choose initiatives first where low effort will yield high value (“quick wins”) before moving on to high-effort/high value, etc.;
  3. Avoid complexity: “Cater- for- all-events” processes may just replicate the complexity of your ERP system. Rather create multiple fit-to-purpose solutions targeted specifically at a specialised set of functionality or a specific set of end-users.
  4. Pick the most appropriate source for validating and looking up data: An F4 Lookup directly from SAP is relevant for dynamic data (e.g. customer number). A drop-down in provides fast response time and is appropriate for limited sets of values (e.g . “debit” or “credit”); a SharePoint list may be appropriate when the user does not have access to SAP (e.g. list of currency codes).

Zorro-graph

Have fun creating your Winshuttle solution and do share some of your own design tips…


Questions or comments about this article?

Tweet @Winshuttle to continue the conversation!


About the author

Monika is an experienced IT professional, with more than 20 years in roles ranging from SAP consulting (MM), system analysis and design, solution architecture, integration management and project management. She has worked internationally across multiple industries including automotive, manufacturing, chemicals, energy, telecom, public sector, textiles and tertiary education. As principal solution engineer with Winshuttle since November 2013, she has presented at roadshows, webinars and user group meetings, created tailor-made product demonstrations, contributed to Winshuttle collateral, written proposals and estimated projects. She enjoys the wide range of activities working for a dynamic and growing software company and the wide exposure to diverse business challenges encountered by Winshuttle’s customers.


Related posts


Did you enjoy this article?

Please share it with others and on your social media channels.