UI Guidelines

1. Signs of Bad design

 Inconsistency with other programs/screens and with the user's
expectations
 Nonstandard mouse and keyboard input
 Nonstandard windows or dialog boxes that require nonstandard responses
from the user
 Use of nonstandard controls or standard controls that behave in
nonstandard ways
 Confusing and hard-to-understand error messages
 Inadequate accessibility
 Inadequate user assistance

2. Know the standards followed for your project and why

3. Adhering to standards makes it a lot more easier to maintain and to bring change
4. Reasons for non adherence
a. You don't know what the standards are.
b. You prefer to make up your own standards as you go., not aligned with
requirements
c. You find conforming to the standards too much trouble.
d. You found a really cool ActiveX control on the Internet and want to use it
in your program somehow, even though it doesn't conform to the
standards.
5. Deviate only if there is a need , to go forward

UI Guidelines – To keep in Mind

1. Establish consistent terminology ,throughout application

2. Consistent terminology helps us in understanding and communicating better
3. Use the same term to describe the same thing. Using different terms for items
that have only subtle differences will confuse users.
4. A little work choosing consistent terminology early on will save everyone a
whole lot of work later.
5. Try to use the terminology which is the standard , accepted and known to all ,
6. Problematic terms may lead to confusion, misunderstanding and offense

A.M., P.M. Not am or pm.

abort Use end to refer to communications and network
connections, quit for programs, and stop for hardware operations.
above Use preceding or earlier instead.
 accelerator Use shortcut instead.
and/or Use or instead.
bitmap Use graphic or picture instead.
boot Use start instead.
Execute Use run or try
7. Remember the user is not you , but some one .Use his language
8. Avoid offensive and strong terms like kill, terminate, abort ,as they
acceptable only in the programmers world.
9. Establish a consistent user interface style ,as to the user it is appearance which
determines the behavior of the application
10. Also the users wont be comfortable in doing what they are not usually familiar
, example double clicking a push button
11. Simple guidance for designing a general appearance

 Use consistency A consistent appearance will make the user interface easier
to understand and use. The user interface elements should look as if they
belong together.
 Use arrangement and flow In Western cultures, people read from left to right
and from top to bottom, so place the more important information on top and to
the left. The upper left corner receives the most attention.
 Use alignment In general, use left alignment to make user interface elements
easier to scan. Use decimal alignment or right alignment for numeric text.
Avoid right alignment and center alignment for non-numeric text. You don't
have to center everything or make everything symmetrical. Prefer having
white space on the right side and bottom instead.
 Use grouping Group related user interface elements to show relationships.
Display related information together. Place controls near the objects acted
upon. Use white space, group boxes, lines and labels, or other separators to
group related user interface elements.
 Use emphasis Try to draw attention to the user interface elements that need to
be seen first, using focus, location, grouping, hierarchy, enabling/disabling,
size, color, or font attributes. Try to visually indicate what the user should do
next.
 Use visual clues Try to use like sizing and spacing to indicate that user
interface elements are similar and different sizing and spacing to indicate that
user interface elements are different.
 Use white space Use white space to create "breathing room" that makes
window layout easier to understand and more comfortable to view. The
spacing should appear more or less balanced and even, with no awkward gaps.
However, avoid having too much white space. If possible, try to make the
window smaller instead.
 Watch for vanity Don't plaster company or product names and logos all over
the place. While large company or product names and logos are perfectly
acceptable in splash screens or about boxes, the available space in other
 windows should be used for something else. If there is nothing else, try to
make the window smaller instead.
 Watch sizing Make user interface elements resolution independent.. Avoid
using pixels for sizing.
 Consider using resource templates or predefined layout grids Resource
templates or predefined layout grids will help you obtain consistency between
different windows.

12. Identify the users of the system and classify them Beginners, Intermediate
and Advanced. Beginners need a lot of guidance, Advance would preer
shortcuts and quick launches.
13. Do not place text links consecutively adjacent to each other without any non-
link character in between. This leads to two or more text links being
misunderstood as same link.
14. Navigation: Provide a consistent navigation system in such a way that the
users can easily navigate to any section, sub-section or a particular screen
from any instance.

15. Use appropriate HTML tags to display relevant information (semantic mark-
up).

16. When access key is used for links, buttons and text fields, indicate its usage to
the user by specifying the character used as access key in bold. For example if
“F” is used as access key for First Name text field, then the label for the same
can be displayed as “First Name”
17. Before designing ask the following questions
a. Who are the program's users?
b. Are they a member of a specific group of users or the mass market?
c. What is their background or profession?
d. What is their software skill level?
e. What are their specific needs and goals?
f. Why will they buy the program?
g. Why will they like it?
18. Remember Users aren’t you. Designers and Users have different goals

Typical User goals

 Users don't generally use software because they enjoy using software. (Games are
an obvious exception.) Rather, they use software to get their work done.
 Despite the fact that users generally don't use software because they enjoy using
it, users want to get their work done enjoyably.
 Users want to get their work done quickly.
 Users want to get their work done without having to read documentation or ask
for help. They don't want to know how the software works.
 When they have to read documentation, users want it to answer their questions
with a minimum amount of effort.
 Users want software to install and uninstall easily.

19. Things to avoid

a. Capitals
b. Beeping or blinking text
c. Unnessary audio’s
d. Distracting text
e. Distracting backgrounds and images,animations and graphics
f. Harsh colors
g. Being not flexibile , not remembering information user has already
entered
h. Being cryptic and incomplete
i. Difficult to navigate
j. Use 3-d effect unnessary
k. Just being inconsistent
20. In Web development Users need to be able to predict where links will lead
and differentiate one link from another
21. Keep speed in mind .
22. UI Testing points
a. The key to successful programmer testing is to change your
perspective and use your program like a user.
b. Check for the dialog boxes
c. Error Messages
d. Printer and other external medium errors
e. System color and resolution problems
f. Spelling errors
23. How to improve accessibility of Web sites
Below is a list of my top 12 Web accessibility tips, sorted by project
management importance:
a. Use CSS for layout, instead of <table>.
b. Use <table> for Excel-like information only, not for layout.
c. Define all font styles via CSS.
d. A page must be logical and readable with CSS disabled.
e. Use text structure via <H1>, <H2>, <P>, <STRONG>, etc.
f. Use text presentation via <B>, <CENTER>, etc.
g. Use meaningful links or link "title" attributes, not just "click here".
h. Use meaningful alternative image attributes.
i. Do not use blinking text because of photosensitive epilepsy.
j. Do not use pop-ups.
 k. Do not use moving text.
l. Use an icon in addition to red color in error situations.
m. Use JavaScript sparingly. When used make sure that the content
presented using JavaScript is available to those users who have the
JavaScript disabled in their user agents. (browsers)
n. Do not use underline text when it is not a link.
o. Do not specify width and height attribute for image.
p. Do not use text as images, as the information conveyed will not be
available to the user when the user disables images or the image does
not load. In unavoidable instances supplement the text information in
image with equivalent plain text using CSS image replacement
techniques.
q. For lengthy pages that requires scroll, provide “Top of page” link at
necessary places.
r. Do not rely on colour alone for differentiating text information. For
example displaying link text in a different color without underlining
them will make it hard for the users with colour blindness or non-
visual users to differentiate it from the normal text.

http://www.webpagesthatsuck.com/worst-web-sites-of-2007.html