Recent

Author Topic: GUI design style guidelines?  (Read 11681 times)

IPguy

  • Sr. Member
  • ****
  • Posts: 385
GUI design style guidelines?
« on: October 21, 2011, 12:25:21 am »
What GUI design guidelines do you use when creating a program for commercial sale?
Is there a set of best practices that are commonly used?

Leledumbo

  • Hero Member
  • *****
  • Posts: 8005
  • Programming + Glam Metal + Tae Kwon Do = Me
Re: GUI design style guidelines?
« Reply #1 on: October 21, 2011, 04:40:01 am »
Not a specific one, I just position myself as the user so I can imagine what he would feel when using my software. One thing I always keep in mind is to have my software's interface as intuitive as possible since many users don't like reading documentation. Instead, they usually ask me to teach them how to use it. By creating intuitive interface, they could quickly use the software without asking me too much about how execute a task.

felipemdc

  • Administrator
  • Hero Member
  • *
  • Posts: 3540
Re: GUI design style guidelines?
« Reply #2 on: October 21, 2011, 08:02:56 am »
What GUI design guidelines do you use when creating a program for commercial sale?
Is there a set of best practices that are commonly used?

I don't remember any set of positive rules which where really good, but there is the Interface Hall of Shame: http://homepage.mac.com/bradster/iarchitect/shame.htm

Basically don't make stuff that blinks, or text that blinks, this is horrible. Avoid strong colors. Make sure that your text and background colors contrast so that visually impaired people can also use the software.

I think that the most important is simply testing. Take your app to someone without much knowledge of computers and let him try to use it. If this person has major problems using it, then you might need to redesign something.

I think it is a cyclic task. You start with something and then you adjust it when you find out that users have problem with any item.

jwdietrich

  • Hero Member
  • *****
  • Posts: 990
    • formatio reticularis
Re: GUI design style guidelines?
« Reply #3 on: October 21, 2011, 08:15:16 am »
In additions to the good suggestions above it might be advisable to implement the UI guidelines for the respective operating system.

See e. g. for Mac OS X: (http://developer.apple.com/library/mac/#documentation/UserExperience/Conceptual/AppleHIGuidelines/Intro/Intro.html)

and for Windows:
http://www.microsoft.com/download/en/details.aspx?displaylang=en&id=2695
function GetRandomNumber: integer; // xkcd.com
begin
  GetRandomNumber := 4; // chosen by fair dice roll. Guaranteed to be random.
end;

http://www.formatio-reticularis.de

Lazarus 2.0.0 | FPC 3.0.4 | PPC, Intel, ARM | macOS, Windows, Linux

mdalacu

  • Full Member
  • ***
  • Posts: 198
    • dmSimpleApps
Re: GUI design style guidelines?
« Reply #4 on: October 21, 2011, 08:29:18 am »

vvzh

  • Jr. Member
  • **
  • Posts: 58
Re: GUI design style guidelines?
« Reply #5 on: October 21, 2011, 03:18:37 pm »

lainz

  • Guest
Re: GUI design style guidelines?
« Reply #6 on: October 21, 2011, 05:38:52 pm »
When you finally got the style don't forget to test it using different themes, font sizes in the target OS.

For example ubuntu has an option to change the system font size without need to restart, in windows is different, you need to log off the user account to apply the changes in font size (High DPI).

In the Windows User Experience Interaction Guidelines say something about High DPI but you can read some more things in the wiki ( http://wiki.lazarus.freepascal.org/High_DPI ). And some about icons in Windows ( http://wiki.lazarus.freepascal.org/Windows_Icon ).

ssamayoa

  • Full Member
  • ***
  • Posts: 163
Re: GUI design style guidelines?
« Reply #7 on: October 21, 2011, 06:34:33 pm »
I found an execllent book named "Dont make me think".

http://www.sensible.com/dmmt.html

Is focused in web applications but applies to any kind of application.

Is not just about rules on how to size, position and color the components,  is about to get into mental model of your intented audience (user).

Look at this article wrote by Joel Spolsky: http://www.joelonsoftware.com/uibook/fog0000000249.html

Little old but still valid.

Regards.
« Last Edit: October 21, 2011, 07:10:12 pm by ssamayoa »

Ocye

  • Hero Member
  • *****
  • Posts: 518
    • Scrabble3D
Re: GUI design style guidelines?
« Reply #8 on: October 21, 2011, 08:45:24 pm »
To add one more style guide, "open source" (whatever this means in terms of a guide) and intended for cross plattform use: http://wyoguide.sourceforge.net/. I would recommend to follow Microsoft's UX guide, mentioned by jwdietrich. If you look for best practices you should search for Design Pattern. E.g. http://www.cs.helsinki.fi/u/salaakso/patterns/index.html or http://ui-patterns.com/.
A well-designed application is more than just to follow some rules. Take into account to ask experts to do it for you.
Lazarus 1.7 (SVN) FPC 3.0.0

TurboRascal

  • Hero Member
  • *****
  • Posts: 672
  • "Good sysadmin. Bad programmer."™
Re: GUI design style guidelines?
« Reply #9 on: October 22, 2011, 01:23:31 am »
In additions to the good suggestions above it might be advisable to implement the UI guidelines for the respective operating system.

This actually raises an interesting question - Lazarus is crossplatform, so which of the guidelines (four of them are cited) should be followed if the application compiles on four different desktops/widgetsets and it has the same layout in all of them?

I agree some common sense should be followed and everything should be made as intuitive as possible regardless of the type of graphical interface it uses; however there are some real practical differences between the guidelines, for example on some systems buttons are ordered like OK then Cancel, Yes then No, but on others ordering them vice versa is the norm...
« Last Edit: October 22, 2011, 02:21:44 am by TurboRascal »
Regards, ArNy the Turbo Rascal
-
"The secret is to give them what they need, not what they want." - Scotty, STTNG:Relics

jwdietrich

  • Hero Member
  • *****
  • Posts: 990
    • formatio reticularis
Re: GUI design style guidelines?
« Reply #10 on: October 22, 2011, 10:28:33 am »
Actually, in the process of software development we have to trade off between coding efficiency, i. e. using one source code for multiple platforms, and the principle of minimal surprise on the respective platform.

Fortunately, Lazarus takes its principle "Write one, compile anywhere" serious: The platform-specific widget sets exonerate the developer from writing platform-specific code. However, there are a few points, where some requirements of the respective operating system have to be met. Apart from the ordering of buttons mentioned by TurboRascal this applies e. g. to menus.

As an example, on Mac OS X there is an application menu on the left which holds entries for an about box, preferences, some global OS-wide services and quitting the application. Under Windows and most Linux GUIs however, the about box is accessible from the help menu and the preferences entry often has differing locations. Additionally the modifier keys are not identical on different platforms. It is the command key (apple key) on Mac OS X and iOS, while it is the ctrl key on Windows and Linux.

How can we adapt to these restrictions and simultaneously keep one source code?

In my applications I have solved this with conditional compiling. To take an example from SimThyr, I have defined a menubar with both an application menu for the Mac (defined with the apple-logo) and a help menu for all platforms but with different entries with respect to the OS. The procedure AdaptMenus that is called early in the run of the application performs the assimilation process:

Code: [Select]
procedure AdaptMenus;
var
  modifierKey: TShiftState;
begin
  {$IFDEF LCLcarbon}
    modifierKey := [ssMeta];
    SimThyrToolbar.WinAboutItem.Visible := false;
    SimThyrToolbar.Divider_5_1.Visible := false;
    SimThyrToolbar.Divider_2_2.Visible := false;
    SimThyrToolbar.Divider_2_2.Visible := false;
    SimThyrToolbar.WinPreferencesItem.Visible := false;
    SimThyrToolbar.AppleMenu.Visible := true;
  {$ELSE}
    modifierKey := [ssCtrl];
    SimThyrToolbar.WinAboutItem.Visible := true;
    SimThyrToolbar.Divider_5_1.Visible := true;
    SimThyrToolbar.Divider_2_2.Visible := true;
    SimThyrToolbar.WinPreferencesItem.Visible := true;
    SimThyrToolbar.AppleMenu.Visible := false;
  {$ENDIF}
  SimThyrToolbar.NewMenuItem.ShortCut:=ShortCut(VK_N, modifierKey);
  SimThyrToolbar.OpenMenuItem.ShortCut:=ShortCut(VK_O, modifierKey);
  SimThyrToolbar.CloseMenuItem.ShortCut:=ShortCut(VK_W, modifierKey);
  SimThyrToolbar.SaveItem.ShortCut:=ShortCut(VK_S, modifierKey);
  SimThyrToolbar.QuitMenuItem.ShortCut:=ShortCut(VK_Q, modifierKey);
  SimThyrToolbar.UndoMenuItem.ShortCut:=ShortCut(VK_Z, modifierKey);
  SimThyrToolbar.CutMenuItem.ShortCut:=ShortCut(VK_X, modifierKey);
  SimThyrToolbar.CopyMenuItem.ShortCut:=ShortCut(VK_C, modifierKey);
  SimThyrToolbar.PasteMenuItem.ShortCut:=ShortCut(VK_V, modifierKey);
   SimThyrToolbar.RunItem.ShortCut:=ShortCut(VK_R, modifierKey);
end;                   

This is a quite simple way to provide both platform-conformity and keeping one source code for all platforms.
function GetRandomNumber: integer; // xkcd.com
begin
  GetRandomNumber := 4; // chosen by fair dice roll. Guaranteed to be random.
end;

http://www.formatio-reticularis.de

Lazarus 2.0.0 | FPC 3.0.4 | PPC, Intel, ARM | macOS, Windows, Linux

Ocye

  • Hero Member
  • *****
  • Posts: 518
    • Scrabble3D
Re: GUI design style guidelines?
« Reply #11 on: October 22, 2011, 10:30:34 am »
Of course you should follow system style in that case. Lazarus offers access to standard dialogs, so use it.
On the other hand most aspects regarding interface and interaction are equal across OS. One of the first guideline from Smith and Mosier [1] is from 1986. And it's still valid.

[1] http://hcibib.org/sam/
Lazarus 1.7 (SVN) FPC 3.0.0

jwdietrich

  • Hero Member
  • *****
  • Posts: 990
    • formatio reticularis
Re: GUI design style guidelines?
« Reply #12 on: October 22, 2011, 10:36:26 am »
[1] http://hcibib.org/sam/

That is a very interesting resource. Is there a PS or PDF version available?
function GetRandomNumber: integer; // xkcd.com
begin
  GetRandomNumber := 4; // chosen by fair dice roll. Guaranteed to be random.
end;

http://www.formatio-reticularis.de

Lazarus 2.0.0 | FPC 3.0.4 | PPC, Intel, ARM | macOS, Windows, Linux

Ocye

  • Hero Member
  • *****
  • Posts: 518
    • Scrabble3D
Lazarus 1.7 (SVN) FPC 3.0.0

jwdietrich

  • Hero Member
  • *****
  • Posts: 990
    • formatio reticularis
Re: GUI design style guidelines?
« Reply #14 on: October 22, 2011, 11:13:20 am »
Great, thanks!
function GetRandomNumber: integer; // xkcd.com
begin
  GetRandomNumber := 4; // chosen by fair dice roll. Guaranteed to be random.
end;

http://www.formatio-reticularis.de

Lazarus 2.0.0 | FPC 3.0.4 | PPC, Intel, ARM | macOS, Windows, Linux