Designing a Form

Hello!

I am stuck with a app. It has so many fields and i am not good at designing forms..! But i need this app. to be look professional. So i want to know weather are there any standards which are adapted while designing a form ?

Thanks!

I think it looks alot better to use the "Align To Grid" menu item on objects. This 'snaps' them to the dotted gridlines you see on the form when designing (by slightly changing their height and width properties). Also, I find using some nice graphics on Toolbar buttons and even sometimes on normal command buttons work well :)

Phreak

Hi!

Thanks for the reply but i meant like are'nt there any standards ? Like how MS designs their apps. ? What they keep in mind when designing the apps. ? What standards they have when designing the app. ?

Like how much space should be there between 2 text boxes ?! so the app looks great and customer also likes working on it.

Thanks!

Professional form? Hmm... what does a professional form look like? The first thing that comes into my mind is that use as few objects as you can. Another thing: group objects (visually) that are related to each other in some way. Also, don't place objects too randomly on a form. What I mean is this:

[code]
[TEXTBOX .....] [...BUTTON...]
[TEXTBOX ..] [BUTTON]
[TEXTBOX ......] [.....BUTTON.....]
[/Highlight]

When you could:

Code:

---

[TEXTBOX ...] [BUTTON]
[TEXTBOX ...] [BUTTON]
[TEXTBOX ...] [BUTTON]

---

Or even:

Code:

---

[....COMBOBOX....]
[TEXTBOX] [BUTTON]

---

Where combobox changes what is to be changed. And to make it userfriendlier, you could make even so that pressing enter saves the current value that is being edited and then next item is shown from the combobox for edit.

Humm... that's most I can figure out for now. I've seen too many ugly forms, but I can't remember all of the things that are "wrong" about them.


Edit Something more came in to my mind: you can use frames to place stuff inside them. This sometimes makes a nice look to the form, it depends of a project.

And as for the space between two textboxes, you just gotta try to trust your visual eye :D

Nope, don't think there are any standards like this. Tis up to you.
If you use a gap of say 45 twips (3 pixels) then you should use this throughout your app.
If you use command buttons like OK, Save and Cancel, then these should be the same size throughout your app, and the same gap.
Everything should use the same font too.

These are just application specific standards.
You can make these what the hell you like :D

We have a class in our app that validates a form.
You pass the form to a sub and it validates it for you and pops up messages...ie:

In a class module calles clsValidateForm

VB Code:

Option Explicit
 
Public Sub ValidateForm(ByRef pfrmForm As Form)
Dim ctlControl   As Control
   Form Each ctlControl In pfrmForm.Controls
      If TypeOf ctlControl Is CommandButton Then
         ValidateButton ctlControl
      End If
   Next ctlControl
End Sub
 
Private Sub ValidateButton(ByRef pcmdButton As CommandButton)
   If pcmdButton.Width <> 1200 Or pcdmButton.Height <> 400 Then
      MsgBox pcmdButton.Name & " should be 1200 by 400 twips", vbExlamation, "Validate Form"
   End If
End Sub

Then in a module you have:

VB Code:

Public Sub ValidateForm(ByRef pfrmForm As Form)
Dim objValidate  As clsValidateForm
   Set objValidate = New clsValidateForm
   objValidate.ValidateForm pfrmForm
   Set objValidate = Nothing
End Sub

Then in your form you have:

VB Code:

Private Sub Form_Load()
   ValidateForm Me
End Sub

This means that if you break your own standards then your app warns you when you open a form.
The validate class in our app here at work is HUGE! It checks for everything. We even validate control names, to make sure developers have named them correctly.
It checks other thinks like whether labels have a transparent background etc. Tis up to you how far you take this, but it's a good idea to use something like this. This ONLY monitors your own standards you have set throughout your own app.

VB Code:

Private Sub ValidateButton(ByRef pcmdButton As CommandButton)
   If pcmdButton.Width <> 1200 Or pcdmButton.Height <> 400 Then
      MsgBox pcmdButton.Name & " should be 1200 by 400 twips", vbExlamation, "Validate Button"
   End If
   If Left$(pcmdButton, 3) <> "cmd" Then
      MsgBox pcmdButton.Name & "'s name should start with cmd", vbExlamation, "Validate Button"
   End If
End Sub

Hope this has been of some help.

Woka

Yes! Thanks they are helping! :) I also appericiate more views from more people. The more the better! :D

Regarding the layout of controls on a form...hmmm...this is up to you.
Have a look what other apps do.

I like using outlook as a standard as I think this is a well designed app.

When you have labels on a form some people left allign the text, some right allign so in some apps you see:

Code:

---

[lblUsername  ] [TextBox]
[lblAge        ] [TextBox]

---

And some you see:

Code:

---

[  lblUsername] [TextBox]
[        lblAge] [TextBox]

---

Again, there is no standard for this, apart from your own.

Woka

Hello!

Please tell me what do you think about the attached screen shot ? Can this be improved or its okay like this ?

Thanks!

There's absolutely nothing wrong with that form.

One little trick, that might help you, is to place the command buttons in a picture box.

In the attached form I have used to picture boxes with no border.
One is alligned to the bottom oif the form.
This makes it very easy to keep the posiitons of ALL your buttons, without moving them manually.

Just a tip.

Woof

The Windows Interface Guidelines — A Guide for Designing Software
PDF 2MB

Wow! :) Thanks for the Guide I will read it soon! :)

Quote:

---

Originally posted by AvisSoft
Hello!

Please tell me what do you think about the attached screen shot ? Can this be improved or its okay like this ?

Thanks!

---

Most customers I have developed for absolutely HATE multiple colors on a form. You might want to stick to a 2-color scheme.

Also, custom colors look ugly if somebody happens not to use Windows default color scheme. Like, someone might have text color white and otherwise a quite dark theme... so either use Windows system colors (tooltip color might work sometimes besides default white).

I think the form posted could be better. At the moment it has too much stuff in it, even if it is quite clear. I'm not too sure on what for the form is done so I can't give a good suggestion myself. But I'm sure there is a way to make it feel lighter and yet keep all the required functionality.

I don't know about you guys, but I have been able to use the tabbed dialog stuff with success, it isn't so bad if you know how to place it, looks much better when you use a tabbed dialog for windows that are only around 1/3 the screen size, any bigger and it kind of gets messy.

EDIT: Why the hell is there an angry face on the side of this topic?

Looks good, I think (my opinion) would be to drop the [Ok] and [Cancel] buttons to the bottom right of the form and not on the side....

Quote:

---

Originally posted by Wokawidget
One little trick, that might help you, is to place the command buttons in a picture box.

---

Nice tip Wokadude ;)




Bruce.

hello!

thanks for all the tips etc. the form is actually i think can't be compacted due to the calculations preformed. Using tabstripi is not an option for me as it does not works becuase the user need to see the all the data at same time.

I have used different colours so the manufacturer's and suppplier details can be differentiated becuase both have same fields etc.

Now you all know that it needs calculations to be done etc. so can this form be modified now ?

Thanks!

You could place the controls inside a FRAME, and then add a frame title to tell the user what data is what...

BruveVB...I am full of useless info like that ;)

Woof

arr you beat me to it woka,

frames are so usefull when creating professional looking forms :)

Here's a new SS now what all ya think ? :bigyello:

Thanks!

Yup. Spot on.
The only thing I would do is have the buttons at the bottom of the screen.
And instead of 2 buttons I would have an OK, Cancel and Save button.
OK: Saves changes and unloads form.
Cancel: Cancels changes and unloads form.
Save: Saves changes, but leaves form open so the user can edit a field if they want to.

But that's just me.

Oh, I would also add an icon to your form title bar.
Plus, make sure all your tab stops are correct. This really annoys users if they arn't :(

Woka

Quote:

---

Originally posted by AvisSoft
Here's a new SS now what all ya think ? :bigyello:

Thanks!

---

Very proffessional looking, good job.

Something I always do is: Change the border to flat, AND resize the height to fit the input - and nothing more(this is for textboxes), so in the application you have, I'd make the textboxes small enough to only cover one line, unless you actually use the multiline functionlity, in which case my advice is useless. I've often found compacting it gives that extra edge that makes it really nice =).

I agree. At a 2nd glance your txt boxes do seem a little large in height.
I size them so the white gap at the top is the same as the bottom. You'l notice that you have a massive white gap at the bottom of your txtboxes.
You'll be supprised at the amount of realestate that is released on your form when you resize and move controls.

Wooof

Hello!

I have again re-designed the form according to the tips and tricks given by all the people..please re-check. Once the form becomes good and attractive i'll then re-design all my forms like that only. Currently i am using Wizards. But i want to give the user the flexibility of adding forms quikly without using wizards. Wizards are helpful but they consume time.

Thanks!

Now I am being picky!

The buttons should go:

OK, Cancel, Apply

just to keep to MS standards.

I would probably use SAVE instead of Apply too, but that's up to you. Not a problem so long as you are consistant throughout your app.

Woka

Quote:

---

Originally posted by Wokawidget
I agree. At a 2nd glance your txt boxes do seem a little large in height.
I size them so the white gap at the top is the same as the bottom. You'l notice that you have a massive white gap at the bottom of your txtboxes.
You'll be supprised at the amount of realestate that is released on your form when you resize and move controls.

Wooof

---

I don't understand by the white gap...which white gap you're refering to ?

Thanks!

You have already removed the white space by making the height of your txt boxes smaller.

Woka

Oh! :)

This is a sample on how different you can go:

And here is the code so you can test how it works:

Woka - good spot on the text box height... I could "just tell" something wasn't right, but couldn't put my finger on it. Never send a gnome to do a badger's job.

Merri - while that interface looks cool and is very compact, how it for quick data entry. It looks like it would take alot or clicking around just to enter the data.

Just my $0.02 worth, take it or leave it.

TG

techgnome: basically just by pushing enter you get to the next data and save what you just did. That's why I sent the code too so you can test how it works. I'm sure it can be improved, I made it quickly in some 10-15 minutes.

Improving it... probably a possibility to use arrow keys to browse the listboxes so you can easily get back to the last one if you made a typo (at the moment the focus always goes to the textbox below a listbox).

ah, I see now. Why not a grid then?

Then the item and it's value and data entry are all right there.

TG

Because I hate using OCXs :) You could set custom tabs to the listboxes but I were too lazy to look such code for just a sample.

Quote:

---

Originally posted by techgnome
Woka - good spot on the text box height... I could "just tell" something wasn't right, but couldn't put my finger on it. Never send a gnome to do a badger's job.

Merri - while that interface looks cool and is very compact, how it for quick data entry. It looks like it would take alot or clicking around just to enter the data.

Just my $0.02 worth, take it or leave it.

TG

---

Hey, I was the one to spot that :p

Quote:

---

Originally posted by vbNeo
Hey, I was the one to spot that :p

---

My appologies.


I really need to get my eyes checked.... maybe I just need a memory upgrade.

TG :blush:

Damn it! I was taking all the credit there!

I now have nothing...*sulk*

Sad Woka :(

Hi Merri!

Thanks for the new layout it looks great! :) I'll check it out soon and let you know the results.

Thanks everyone else for their valuable tips and tricks!