Usability Heuristics comes under Human Computer Interaction (HCI). World famous web usability consultant Mr.Jakob Nielsen states 10 general principles for interaction design (1995). He had listed 10 usability heuristics from using the main designing concepts (Design principles). This is the process to systematically inspect the interface for usability problems.
• Visibility of system status –
Web developers must continuously inform the user about "What is going on". Or else user will leave the website. To provide feedback about the current status of the website, developers can use,
• Match between system and the real world –
Always the system must speak the users' language. Developers must include simple language with meaningful common and simple words, mnemonics, abbreviations etc. System oriented languages will confused the user.
• User control and freedom –
Most of the users do not like to feel trapped by the computer. Developers must provide clearly marked exits like Cancel buttons, Undo buttons, Redo buttons, Interrupt options, Close buttons, Default options etc.
• Consistency and standards –
Designers must apply a same visual appearance across the website (E.g. – Same information controls in the same location on all windows)
• Error prevention –
Developers must avoid errors.
• Recognition rather than recall –
Developers should minimize the user's memory load. Hence people have a very small and low memory. As developers he or she should always promote recognition over recall. People consider recognizing something than recalling it from the memory is easier. Thus web developers must use GUI (Graphical User Interface) controls to facilitate users to recognize options (E.g. – Menus, list boxes, combo boxes, calendar controls etc.)
• Flexibility and efficiency of use –
A website can be viewed by three types of users.
i. Novice users
ii. Intermittent users
iii. Expert users (Power users, Experience users)
Developers must provide user friendly options for novice users (Allow history systems, navigational jumps etc.). But for the expert users, developers can provide key board and mouse shortcuts (To perform frequent operations quickly).
• Aesthetic and minimalist design –
Nielsen (1993) states that, "Dialogues should not contain information which is irrelevant or rarely needed. Every extra unit of information in a dialogue competes with the relevant units of information and diminishes their relative visibility". (p.20)
• Help users recognize, diagnose, and recover from errors –
Developers have to provide instructions to users directly to avoid from errors and mistakes.
If the user fills a contact form, developers have to inform his/her mistakes immediately. Think the user has forgotten to fill some of the details. As a result of that the system will remind that he/she should fill the details.
For these kind of mistake developers can use a red colored single line. It will appear with some instruction. Generally people use red colour to get the attraction or to symbolize something wrong. As a result of that, user will defiantly see the notice.
After the user submits the form, developers should inform the status of the submission (Successful or Fail). Because users do not know about the backend process.
The error messages and solutions must in plain and simple language (No codes or System oriented languages).
• Help and documentation –
All the information should be easy to search, focused on the user's task, list concrete steps to be carried out, and not be too large.
Designers use "Design Principles" to make their designs attractive and successful. Lidwell, Holden and Butler (2003) conclude that, "The use of well-established design principles increases the probability that a design will be successful" (p.13).
Lidwell, Holden and Butler states a paraphrase of William Strunk's in "Universal Principles of Design".
"The best designers sometimes disregard the principles of design. When they do so, however, there is usually some compensating merit attained at the cost of the violation. Unless you are certain of doing as well, it is best to abide by the principles."
It is better to discuss about "Main" designing principles.
• Proximity –
Proximity means the bond or relationship between elements on a page (Arrangement of elements that relate to one another).
• Proportion –
The feeling of unity created when all parts (Sizes, amounts, numbers) relate well with each other.
• Contrast –
It means the juxtaposition of opposing elements. Big and small elements, black and white texts, squares and circles can create contrast in a design.
• Balance –
It means the distribution of the visual weight of objects, colours and textures. Balance can be dividing into 5 parts.
i. Symmetrical Balance (Formal balance) – Equal weights and equal sides.
ii. Asymmetrical Balance (Informal balance) - Unbalance.
iii. Horizontal Symmetry - Mirror image; horizontal side.
iv. Approximate Horizontal Symmetry - Both sides looks same. But not a mirror image.
v. Radial Symmetry – Object is symmetrical around the center point.
The Rule of Third / Golden Ratio is also a balancing technique use by designers.
"The rule of thirds is a technique derived from the use of early grid systems in composition. It is applied by dividing a medium into thirds both vertically and horizontally, creating an invisible grid of nine rectangles and four intersections."
(Lidwell, Holden and Butler 2003: p.208)
• Emphasis –
Determine the weights, spaces and perspective and where the eye dominance goes first in a design. It is the focal point or center of interest of a composition (First element of the visual hierarchy).
• Rhythm and Repetition –
The elements that used repeatedly are known as rhythms. Rhythms are well organized movements. Repetitive elements throughout a design can be used to enhance and clarify information.
• Unity –
Unity is the combination of all the design principles.
Butterick (2007) states that, "Typography is the visual component of the written word. Typography is for the benefit of the reader, not the writer." Typography plays a major role in web designing. Reader's attraction and attention is depending on the design and typography. In web typography, the analyst had founded many font typefaces (Serifs, Sans Serifs, Display, Monospace, Handwriting etc.). Among them Serif and Sans Serifs fonts are uses commonly.
• Serif fonts –
Brackets are the supportive curves which connect the serif to the stroke.
E.g. - Designing Concepts into a Temple Website
• Sans Serif Font –
Un-bracketed serifs are attached sharply and usually at 90 degree angles. Designers use "Sans Serif" fonts than "Serifs". Hence Sans Serifs are legible and readable than Serif fonts.
E.g. - Designing Concepts into a Temple Website
Designers use Capital fonts rarely. Usually capital fonts are used for titles or to get the attention of the reader. Before use capital fonts, designers must think twice. Hence capital fonts are hard to read quickly.
Nowadays web designers use Web Fonts. Web fonts are downloaded by the user's browser while rendering the webpage, and then applied to text. Developers can reduce the file sizes and add various kind of spectacular web fonts. The default size of a web font is 16px (1em, 12pts, 100%). The default colour is black.
Readers do not like to read lengthy texts. Readers want quick information. Developers and designers should apply the data and information short and sweet. Left aligning the texts and breaking the sentences into paragraphs are some of the tricks that designers can use. The main objective of a website is to provide 100% clear data and information (Readability and legibility). It is clear that typography is the main key to achieve this objective.