Printable View
Hi guys! I am in the middle of working on an address-book program and would like some constructive criticism on the layout and design of my forms. I will include some screenshots below.
Thanks in advance and please don't be too harsh!
First this is an image of my main window, with no contacts in the central contact list:
http://img29.picoodle.com/img/img29/...mm_025a803.png
A quick search box that is ALWAYS visible (and an app wide hotkey to jump to it) would be a good thing to have in a program like this..
Also it looks like the image you are using is stretched pretty bad. Looks blurry. I know you always lose some quality when saving a screenshot to a jpg or gif, but I think its probably a little blurry anyway right?
OK, that sounds like a resonable suggestion. I could add it next to the two buttons on the right end of the top ToolStrip.
yeah.
If possible, make it search/show results AS you type versus having to type and hit enter. (just like windows desktop search works)
OK, I've added a Quick Search combo box to the MenuStrip. The text inside the combo box disappears when it is focused and returns when it is left. I will add the searching code later. Have you any more suggestions?
PS: Updated the image in the first post.
well like I said, add a form wide hotkey to set focus to the search box, that is always a handy feature that is underused but really appreciated by those who discover it.
I might have more suggestions if you post more screenshots (like ones with data entered in)
Here's another screenshot showing some contacts in the list. The list can be customised to show contacts in List, Icons and Details views as well.
http://img35.picoodle.com/img/img35/...2m_27c8a39.png
yes, split the icon in two and use the left for men and the right for women. Visual representations are nice. If possible, you could even have a list of custom icons to choose from or let the user assign a photo.
Thanks for your reply, Lord_Orwell!
I have already got the features you suggested, although, they're not visible from the screenshots I have up. The user can select a gender for each contact. Depending on the gender, either a woman icon or a man icon is shown. The user can also choose an image for the contact which can be used instead.
only other suggestion i can give at this point then is a drop-down menu that lets you configure the screen color. It highly resembles a couple of other windows programs already available due to the standard coloring scheme.
One suggestion (often overlooked) would be also to adjust your windows fonts to large and extra large (also set your DPI to 120 from the default of 96). This all can be done in the display properties menu.
You would be surprised how bad an app can look when you adjust these things (sadly even some Microsoft applications suffer from this)
Most people leave their defaults alone, but if you want to maximize compatibility, its always a good idea to at least see what your app looks like with these settings adjusted.
I know this thread is a good few months old now but why discard a carcass when it can still be used! Just thought I'd upload an updated image of my program. I recently did a lot of work on making the UI feel more Vista-like.
Any constructive criticism is appreciated!
I must also add; I'm just looking for criticism about the appearence of the UI. I'm still working on some of the features and I'll set up a seperate thread for suggestions for these.
I don't like the borderless edge of the bottom graphic and the "alphabet strip" you have. It looks like the alphabet strip is covering it because of the lack of border.
http://img27.picoodle.com/img/img27/...wm_5c7ff28.jpg
I've added a border to the left and right edges of the bottom graphic, but it is difficult to keep this consistent as the image is stretched. I will be replacing it with my own version soon, which will not have this problem. I've also uploaded a screenshot with the Index bar hidden. It can be hidden/shown from the menu.
EDIT: And I've rather stupidly saved the screenshot as a JPEG instead of PNG so sorry for the terrible quality!
The Task list should be pinnable.... I'd like to be able to move it out of the way w/o closing it....
-tg
Looks like you are using the Janus controls, is that correct?
/henrik
what about your 90% user base that thinks the default black vista theme is not only ugly, but hard on the eyes? Does your app support the theme changing?Quote:
Originally Posted by dom_stapleton
It does now! The user can select the following toolbar colour schemes:
http://img31.picoodle.com/img/img31/...em_9b4a79c.jpg
I am also extending these colour schemes from the rest of the application. And I've replaced the MenuStrip control with an old-fashioned MainMenu control as I think it looks more native to Windows.
Oh, and I'm not sure what the Janus controls are, MrNorth. All of the controls you can see in the screenshots are straight from the .NET Framework (I have overriden a couple of the controls to add extra things, like the empty label in the ListView, for example).
An updated screenshot of the main form (with the teal toolbar colour scheme):
http://img34.picoodle.com/img/img34/...dm_7624940.png
I like that much better than the black one. While it's not a big issue, does it auto-change the colors when windows color scheme changes? There are color constants you can use as colors that are basically shortcuts to whatever the current system color is for a certain item.
also forgot to mention, turn off glass and see how it looks. Vista basic doesn't come with it.
Just a quick update:
I've finished working on the quick search box; it now works in an identical way to the search feature in Windows Explorer in Vista. As you type it hides all of the contacts that don't match the criteria you entered.
For example, if you type "s", it hides all the contacts that don't have an "s" somewhere in their details. As you keep typing it updates the list accordingly.
PS: Thanks to kleinma for the suggestion, sorry it took so long!
http://img30.picoodle.com/img/img30/...dm_d8c95df.png
http://img34.picoodle.com/img/img34/...2m_79d89ae.png
@ Lord_Orwell: The program looks practically identical without Vista Aero turned on. It's only really the non-client area of the window that looks different. I check to see what the program looks like in a Windows 9x-style shell occassionally and it doesn't look too bad.
Oh, and the search box is focused by pressing the F3 key.
well it all depends on what controls you use. aero glass isn't just the transparent borders. it controls the appearance of a lot of buttons to give them shiny highlights.
http://www.vbforums.com/images/ieimages/2008/05/1.png
MyContacts in Vista Basic.
http://img34.picoodle.com/img/img34/...nm_e50f03c.png
MyContacts in Windows Standard.
I don't think they look too out of place.
looks fine
Here is a screenshot of a wizard-style window in my program. I have tried as hard as possible to make it look like an Aero Wizard.
Any comments?
http://img30.picoodle.com/img/img30/...dm_2f3d53e.png
I really like the last few images you have posted. It's well on it's way to looking like a native Vista application, especially with the addition of this wizard.
The only thing that I can fault in your 'Wizard' is the text and icon. A few things really:
- Some of the wizard just have the extended glass into the client area with no text, have you considered that?
- The icon looks out of place in the fact that it seems too low quality to be there, maybe increase the size a bit or remove it completely
- The text is not anti-aliased nor does it have any glow, it looks a little inset to the page in fact. To make it look totally realistic I'd try to simply add a white glow behind the text
Apart from that, great work at doing the system-scheme matching, really :thumb: I wish I had the time to work towards making my apps look like that.
Thanks for your comments, RudiVisser.
I originally planned to try and implement the glow behind the text on the glass area, but as yet I haven't been able to figure out how this can be done.
I have added an offset copy of the text in white behind the text to make it a bit more readable when the wizard is over a dark background, but this was only meant to be temporary.
Do you know how I could implement the text glow? I'm currently scouring the Internet but, so far, to no avail...
Well I know you can use the Windows API DrawThemeTextEx, but in VB.NET, I'm not sure how to do so. Perhaps a question for the API/VB forums :thumb:
Keep it up btw :)
you could always cheat and do it with photoshop
Drawing images over the glass area doesn't work as you'd expect either, however.
Excellent! Thanks for that, RudiVisser! I searched for the DrawThemeTextEx API and it does exactly what I wanted! I found an example in C# so after a bit of decoding this is what it looks like now:
http://img34.picoodle.com/img/img34/...dm_76adce5.png
PS: Just in case you want to use the glowing text in your application too, this thread of mine contains the solution:
http://www.vbforums.com/showthread.p...98#post3247798
That looks great, really :thumb:
The image looks more in place now that it's bigger too :) Good job!
Thanks, RudiVisser :thumb:!
This is another screenshot. It's a contact form and is used to create new contacts and edit existing ones. The large button on the top-right displays the contact's image which can be chosen from the user's computer; it's displaying the default image at the moment. Also, the green bar at the top is syncronised with the rest of the program, like in my main window (see post #20 above).
http://img32.picoodle.com/img/img32/...dm_932765b.png
Again, any comments or suggestions are greatly appreciated and really help me with the evolution of this program.
PS: Just as a side note, this window is the one I'm least happy with in my program so the more suggestions the better.
This would require a major window overhaul, but you don't really know which part of a person's information is going to be important for your user and they ought to be able to control what information is presented to them. I have thrown together a quick example of what i am talking about here:
You could also implement it the way access does, with the little plusses on the left that expand it. I don't know what your sub-windows look like, but you should have some method of controlling the main window. For example some people would rather have the phone number up front while others would want the "notes" (like at a bank where they all up yo business "how's the wife" stuff).
Just an idea.
Dom, regarding the wizard you made, im quite interested in how you did it. Could you explain how you got it to look like a vista app?
Thanks for your post, Lord_Orwell. You've provided some good ideas and I'm going to try and test some of them out. I'll post the results here.
As to your post, CodedFire, I have attached an example of an Aero Wizard form. I hope it gives you enough information to be able to adapt it for yourself.
You are a star my friend, Thanks!
You weren't lying when you said you where drawing it all yourself huh, i notice some of the main functions are missing (for obvious reasons of course). But i definitely get how your doing it now.
I have reorganised the contact window a bit, but I am still using the TabControl at the moment. I will start working on collapsable sections as well as you suggested, Lord_Orwell, but this will probably take a while.
http://img37.picoodle.com/img/img37/...dm_b9b7532.png
Which functions were missing, CodedFire? I didn't deliberately leave any out...
Sorry i wasnt being cheeky, i thought you where protecting your work. Um, this one here: MakeWindowGlass(Me.Handle, 0, 0, 40, 0)
Check out this post:
http://www.vbforums.com/showthread.p...98#post3247798
There's a class that contains the necessary code for drawing glowing text on a form there.
while i have a good idea for the interface, i have no idea how you would go about creating the effect, unless there's a vb.net control i am not aware of that has that functionality? Actually something closer to the design of the way the visual studio toolbox is done would be much cooler, and you could fit more on screen at once.
There is a control that inherits from the Panel control. It has a header that, when clicked, expands and collapses it, so that won't be too much of a problem.
The header of this control is custom painted so emulating the Visual Studio toolbox should be quite easy.
PS: I've updated the form image in post #42 slightly.
Sorry, CodedFire, this is the code for the MakeWindowGlass method:
Code:Private Structure MARGINS
Public cxLeftWidth As Integer
Public cxRightWidth As Integer
Public cyTopHeight As Integer
Public cyBottomHeight As Integer
End Structure
<DllImport("dwmapi.dll", CallingConvention:=CallingConvention.Winapi, CharSet:=CharSet.Auto)> _
Private Function DwmExtendFrameIntoClientArea(ByVal hWnd As IntPtr, ByRef pMarinset As MARGINS) As Integer
End Function
Private Sub MakeWindowGlass(ByVal hWnd As IntPtr, ByVal leftMargin As Integer, ByVal rightMargin As Integer, ByVal topMargin As Integer, ByVal bottomMargin As Integer)
Dim margins As New MARGINS
With margins
.cxLeftWidth = leftMargin
.cxRightWidth = rightMargin
.cyTopHeight = topMargin
.cyBottomHeight = bottomMargin
End With
DwmExtendFrameIntoClientArea(hWnd, margins)
End Sub
could you be more specific? I would love to know what control it is so i can make collapsible panels myself.Quote:
Originally Posted by dom_stapleton
Follow the "XP Common Controls Library" link in my signature. This guy has made a control, called a TaskBox, that performs this functionality.Quote:
Originally Posted by Lord Orwell
Excellent code! Thanks Dom!
his site says "won't work without xp". This probably isn't an issue if it also works on vista, but it doesn't say.Quote:
Originally Posted by dom_stapleton
I think he means that the theming of the control doesn't work without XP as it's hardcoded to syncronise with the old XP themes. The basic principle of the control still works though.
lol i used to run a program i designed in a prison's motorpool to track work done to their fleet (86 vehicles). You could delete records, but you had to enter a password to do so.
Updated the window again a bit. Based it on the new Windows Explorer style from Windows 7. I've simplified the menu system too, like IE 7.
http://img32.picoodle.com/img/img32/...dm_daf9344.png
Only thing i personally don't like is the save/save and close/close trio of buttons. I would either make the save and close a dropdown and have the other two buttons in it or have a separate save and a close button, with the close button prompting you to save if you haven't.
More feedback: The close button is in fact completely unnecessary since the form has a close button. I am a big fan of standard interfaces as well and it seems to me the standard nomenclature labels them as "exit" not close.
Thanks for your post, Lord_Orwell.
I take your point with the Save, Save and Close and Close buttons. I'm just going to replace them with Save and Revert (reverts the contact to the state it was in when it was last saved).
As for the use of the term Close: I feel this is the correct term as the window is merely a child window of a bigger application. My main window has an Exit menu option as it actually exits the application. Close denotes that it just closes this one window, which is what it does.
ok that's fine then. I wasn't aware it was part of a MDI.