Developers Newsletter #6
INDEX
1. A FEW WORDS FROM THE EDITOR
2. THE USER INTERFACE (II)
Exterior beauty
Splash screen
Tip of the day
Wizards
Title bar
Menu bar
Tool bar
Mouse pointers
Buttons
########################################################################
1. A FEW WORDS FROM THE EDITOR
In the last issue we introduced you to that stranger, the evil one who
will use your application. :) We briefly discussed the kinds of users and
their needs, and we also talked a bit about the major features
applications for different users groups should have. Now it's time to
start talking about different elements and aspects of the interface and
some related stuff, trying to give you some clues about when to use them,
when not to use them, what's cool and what's not cool, etc. So, here is
the second part of this article that will continue in the next issue.
Regards,
Ernesto De Spirito
eds2008 @ latiumsoftware.com
########################################################################
2. THE USER INTERFACE (II)
Exterior beauty
===============
The user interface is to an application more or less what the cover is
to a book. You might have heard many times the phrase "Don't judge a
book by its cover". Why not? Because the exterior appearance doesn't
mean anything about interior quality, but truth is most people actually
do give exterior appearance a great importance, so the interface of your
app should be nice.
What is "nice"? I always mention MS Word for Windows as an example
(Linux fans please don't kill me!). Does it use color? No, it's all the
boring standard. Does it use graphics? Except for the tool bars and some
menu aids, there are no graphics, not even as decorations or form
backgrounds. Does it have anything special? No. So, what does it make it
nice? Perhaps the key words here are "order" and "tidiness". Take a look
at all the dialogs. Do you see any element out of place? Do you see any
element (label, text box, etc.) that would be better if moved a single
pixel in any direction? Got what I mean?
As you can see, order and tidiness have inherent beauty, so order and
tidiness should be your primary concern. Make your application beautiful
by itself. It's the easiest, cheapest and best way to make an
application nice. Once, and only once, you got this, a bit of "makeup"
can enhance this beauty, as sure as it can spoil it if you don't have
good taste, so you should be very careful with this. It's more the job
of a graphics designer than the job of a programmer...
Splash screen
=============
The splash screen is used to improve the perceivable speed of your
application. Actually, an application will take a little bit more time
to load with a splash screen than without one, but a splash screen that
appears fast gives the user the (false) sensation that the application
started working fast.
The splash screen is also frequently used as a nag in many shareware
programs.
TIP: Provide a visual indication that your app is loading, especially
if your app would take long to load. Just a simple blinking label saying
"Loading..." would do it, but of course you can use something more
elaborated.
TIP: Integrate the "Tip of the day" in the splash screen, giving the
users something to read while they wait for your application to load.
TIP: The splash screen exists for a purpose. Don't use it if you don't
need it. It's "grease".
Tip of the day
==============
Every day more applications include the "Tip of the day", also known as
the "Did you know?" window. It's an interesting way of teaching some
features of your application. Beginners and many intermediate users will
never disable this window, so you'd better have a lot of tips to show.
Most intermediate and advanced users would rather explore all the tips
in the first session and then disable this window since they'll find it
annoying.
TIP: Allow the user to explore all the tips (with Next - Previous
buttons).
TIP: Include the option to disable the tips of the day in the same
dialog.
TIP: Include meaningful information in the tips, not too obvious stuff
like "You can open a file going to the File menu and selecting Open".
Try to answer real or hypothetical FAQs.
TIP: Put first the tips regarding the basic operation of your program.
Fancy or extra things go last.
TIP: If you don't have enough tips to offer, don't show the tip-of-the-
day window. It's pathetic.
Wizards
=======
Wizards are good for beginners and even for advanced users who might not
be experts in the field of your application. Normally, wizards are used
to substitute a complex dialog box and they are mainly used for setups,
(first-time) configurations and certain kinds of processes that require
some input from the user.
The main advantage of the wizard over the dialog box is that it forces
the user to focus on one thing at a time. Another important advantage is
that wizards can "branch" showing different sets of options according to
the ones the user have chosen before. This way, users don't see what
they don't need to see and therefore things look much simpler.
TIP: When there is space (usually), provide some hint or help. For
example, instead of just saying "Enter your name:" you can write
"Please enter your name below. For example 'Homer J. Simpson'
(without the quotes)". It's different since it gives the users more
precisions about what is expected from them.
TIP: Wizards make things easy, but going step by step every time
eventually becomes too cumbersome for intermediate and advanced users
once they learned the process. When you can, include an "Advanced..."
button and/or some way to disable the wizard and presenting a normal
dialog box instead.
Title bar
=========
TIP: Don't use gradient colors or any custom drawings in the caption bar
of your forms. Why? Because the font and colors you choose may not match
the ones the user configured, and your application would look
"unprofessional". Also, beware many title-bar-painting routines that are
available out there fail to do the job right. Some produce ugly results
in low color depth video modes while others apparently don't take into
account the size of the (minimize, maximize and close) buttons, leaving
a portion of the title bar painted with the default colors. Not nice.
The standard is simple, the standard is nice, and most importantly, the
standard is standard!
Menu bar
========
I shouldn't write a single line about the menu bar, but after seeing
some applications, I feel compelled to say one word: FTFS (Follow
The F^@%*&# Standard! ;)
TIP: The first menu should be File, System, Message, Job, Task or
whatever is the most important thing of your application. The last
option of this menu should be Exit (and the "x" should be its local
shortcut, i.e. the shortcut for the item once the menu was opened).
TIP: You should have a Help menu with at least two items: help index (or
at least a readme file or something!) and an about box.
TIP: Include a shortcut for all the main-menu items and the ones that
are likely to be the most frequently used. Please don't use standard
Windows keys (like Ctrl+X, Ctrl+C, Ctrl+V, F1, Alt+F4, etc.) for other
purposes than their original ones (like Cut, Copy, Paste, Help, Close,
etc.). Don't use Ctrl+S if it's not for saving. Include local shortcuts
for all menu items.
TIP: Don't place a hundred elements in a menu. There is a great
invention called submenu. ;) But please don't abuse of submenus. Try to
reach an equilibrium. Usually (especially for faster access) it is
better to split a menu in two than using submenus.
TIP: As a rule of thumb, the maximum number of menu items is one or two
less than the number that fits in a 640x480 screen with the standard
Windows configuration.
Tool bars
=========
TIP: If your tool bar doesn't have many elements, consider the use of
large icons and the possibility of including labels in the buttons since
beginners don't understand icons (or anything at all! ;) or find it
difficult to associate the image with the action. They don't want to see
fancy graphics; they want to see something they can understand.
TIP: Provide tool tips for all elements in the tool bar. For elements
that have a shortcut key, include it in the tool tip. Advanced users
find it faster to use the shortcut key if they remember it rather than
clicking the button with the mouse.
TIP: Make your graphics simple and easy to understand.
TIP: As a rule of thumb, the maximum number of items in the tool bar is
the number that fits in a 640x480 screen with the standard Windows
configuration.
Mouse pointers
==============
TIP: Don't use your own custom pointers except to mean something
specific to your application. Otherwise, the ones you present might be
different than the ones the user is used to see.
TIP: Don't change the pointer shape often, unless to mean a special
operation (like drag, paint, etc.). An exception to this rule is to
denote parts where the user can click which are not too obvious at a
single glance (actually they should be made obvious by other means
rather than changing the mouse pointer, but sometimes it's difficult).
Buttons
=======
TIP: A text caption is always better than a graphic since it's easier to
read that to interpret the meaning of an image. Also, a text caption
makes obvious which is the shortcut key of the button.
TIP: Text and graphics are a good match.
TIP: If you make a graphic-only button (not recommended), at least have
the decency of providing a tool tip. Thanks. ;)
We will continue in the next issue.
########################################################################
This newsletter is provided "AS IS" without warranty of any kind. Its
use implies the acceptance of our licensing terms and disclaimer of
warranty you can read at http://www.latiumsoftware.com/en/legal.php
where you will also find a note about legal trademarks. Articles are
copyright of their respective authors and they are reproduced here with
their permission. You can redistribute this newsletter as long as you do
it in full (including copyright notices), without changes and gratis.
------------------------------------------------------------------------
Latium Software http://www.latiumsoftware.com/en/index.php
------------------------------------------------------------------------
Copyright (c) 2000 Ernesto De Spirito. All rights reserved.
------------------------------------------------------------------------
|
