15

I've been browsing through the web for good templates/themes but I've never seen a really, really good example for the typical Business App with 20-40 fields per page and 2-5 tabs in between. Most of the WP themes, Admin page themes or even some CMS themes don't seem to jive with what most users (or at least the one's I've met) expect from their business apps.

Some of considerations like:

  • Having a large number of fields in a single page (as mentioned above)
  • Smaller fonts to make space for all those fields as opposed to the large readable ones that seem like a prominent theme for most other themes
  • All relevant information in a single screen
  • "Professional"-feel (also boring, dull, cubicle-gray serious XD)

Can you point me to any good examples or themes that suit business apps and any good tutorials for Business App designs? Themes and tutorials less oriented towards marketing and more towards functional use. You can correct me if my idea of usability for a business app is wrong.

|improve this question
12

Here are some great links for you... maybe you will find what you're looking for:

And from Lukew you can learn a lot about form design: http://www.lukew.com/ and here's a Lukew presentation: http://videos.visitmix.com/MIX09/C17F

some additinal articles from my delicious: http://www.delicious.com/rolficak/form

|improve this answer
  • +1 for providing resources for the question asker to investigate, as opposed to one-off opinions which may or may not suit the context in question. – jameswanless Mar 18 '11 at 19:18
  • your welcome ;) – Roland Pokornyik Mar 19 '11 at 7:58
5

I'm working on something similar at the moment so I'd thought I'd share my thoughts.

Let's say you have 40 input fields on one "Edit Organisation" page.

First step - tabs: Can they be broken down into discrete segments (i.e., are there some fields that don't rely on others on the page?) Maybe there are fields that you can put in their own tab/page: "Edit Address", "Edit Contact Person", "Edit Fire Safety Information" etc. ?

Second step - steps: Is it a stepped process? Do you need to finish one set of inputs before another? Split it up into separate pages and provide a progress indicator and next/previous links.

Third step - progressive disclosure: Can you hide some fields until they are needed? e.g., if choosing one option allows you to select multiple sub-options, hide the sub-options till you are sure they are needed on screen.

Fourth step - blocks: If you can't do the above, split the page up into separate blocks that contain similar information and provide a heading. Lukew example.

Fifth step - navigation: Think about how to get to each individual tab/page. Do you arrive on the Edit Organisation page and then click off to Edit Address? Can you arrive on Edit Address in the screen before? Make sure you can find and get to your separated information easily.

I would be very reluctant to change the size of something just to fit more in. Better a long, well laid out form, than a short jumbled mess. Also another basic principle to keep in mind is to make the input fields as long as they should be for the data going in. e.g., a postcode field will be shorter than an email address field.

Hope that helps!

|improve this answer
3

I don't have any bright examples of business web apps with large forms - in part because such UI design is really not that good an idea - in general.

I believe, that a sound exercise would be to examine each field and determine whether that field is really necessary? And if so, consider whether the data can be calculated or inferred from other input data - or if reasonable defaults can be utilized? And instead of a blank text field (potentially scaring the user), can the field be represented in a more accessible (constrained/visual) way?

But again, it depends on the type of system and the use context. Can you be more specific in terms of purpose of the web app?

|improve this answer
  • 1
    Unfortunately the users aren't scared by too many text boxes. They're the ones wanting all the fields on the same page. – JeffO Mar 18 '11 at 19:59
  • Aye. It's unfortunate. There're all these principles I've read over the web but in the end, it's the user's opinions that matter in the end. While I may debate with them regarding requirements and functionality, the number of fields on a page is something that users or marketing would just want to let slide. Thanks for the guidelines though. – Jonn Mar 20 '11 at 13:07
  • -1 this answer is offensive – samazi Jun 16 '17 at 0:15
  • 1
    Unfortunate that we can't downvote comments, otherwise I would "-1" samazi for needless detracting, which of course, offends me. – Jgod Dec 21 '19 at 6:06
1

Online banking is your answer, I think. If your bank provides an online account, you'll find there complicated multi-level navigation, an attempt to cram as much info as possible into one screen, and probably somewhat of a dry look-and-feel (though probably it will be branded with the bank's colors, but still, it will have a solid, business-like feel to it - if it's done well).

You'll probably not find many forms there, though. For those, you might try opening an online application to a business school (e.g. Harvard). Or online applications for an american visa, for stuff to do with taxes, practically anything related to government bureaucracy.

Google Analytics is also a good example of a complex, "dull" and data-intensive web app.

|improve this answer
1

It being tax season...Turbo Tax comes to mind. Grant you, its UI isn't single page, but I've never come across any thing that does so well at simplifying what is essentially a giant form from he'll.

I also agree with agib, break it down, assess the fields and build a UI and good UX. If a filled in form or more likely filled in database fields are what you need int the end, that can be handled programmatically after data submission. Don't torture your user.

|improve this answer
0

I feel you won't get 100% in readily available app templates. Good thing is that you take inspiration and as Mr. Roland has mentioned implement it with your app. That way you achieve two things. 1.Customizing the UI design as per requirement 2.Usability perspective UI design.

|improve this answer
  • No readily available examples? XD Nuts. I'm a programmer who's just concerned with getting it working. A good sample would be a nice jumpstart as I don't want to spend a loooot of time (which I already have) coming up with a design. – Jonn Mar 20 '11 at 13:14
0

I'm working on a UX design now to retool a form broken out into multiple steps in a wizard. One thing we are adding is a percentage indicator on each page. This will be keyed to answering a series "does situation x apply to you" questions and conditionally showing form inputs. Those questions are a basis for stating the percentage of completion. Our hypothesis is that we will get more complete form usage if we offer the user a way of knowing how far along they are.

|improve this answer

Not the answer you're looking for? Browse other questions tagged or ask your own question.