Visual design - important pointers

Visual design
1. Proximity and uniform connectedness (enclosure) is the two important principles of Gestalt
2. All graphic design is ultimately management of white spaces.

Gestalt principles
Are related to the visual reorganization of figures and forms.

• Emergence: this principle emphasis that we do not recognize a thing in parts but as a whole. For example, we do not recognize a dog by its body parts (tail, face etc) but as a whole.
• Rectification: Is the constructive or generative aspect of perception. If we draw three dots on a white sheet in close order, our mind will see a triangle there.
• Multi stability: is related to having ambiguous perceptions.
• Invariance: is the property in which the simple geometrical shapes are recognized independent of rotation, translation, and scale.

Visual design principles
The visual design principles are extrapolation of gestalt principles. The perception of visual patterns yielded a number of consistent principles that dominate the theoretical basis for much of modern graphic design.
1. Proximity: The elements that are close to each other are considered as more related than the elements that lie farther apart.
2. Similarity: If the elements share consistent visual look they will be treated as a group.
3. Continuity: We prefer continuous, unbroken contours and paths. The two lines crossing each other are mostly not viewed as four lines meeting at a common point.
4. Closure: We have a strong bias to see completed.
5. Figure ground reversal: Viewer’s perception reverses between two possible interpretations.
6. Uniform connectedness: Refers relations of elements that are defined by enclosing elements within other elements, regions or discrete areas of the page.
7. 1+ 1 = 3 effects: The white space between two elements forms a third element.

1. A consistent approach to layout and navigation allows users to easily locate the information and navigation controls across the web sites.
2. The primary task of graphic design is to create a strong, consistent visual hierarchy in which important elements are emphasized and content is organized logically and predictably.

1. The readers visual scanning moves from contrast of the web pages, then the different sections and finally the written matter content.
2. The most effective way of doing this is to balance the text and links with small graphics.

Color and contrast
1. Text legibility is dependent on the reader’s ability to distinguish the letters from the background filed.
2. Color differentiation depends on brightness and saturation
3. Black text on white background has the highest amount of contrast since black color has no brightness and while color is all-bright.
4. Hue is also a factor with complementary colors such as blue and yellow producing the greatest contrast.
5. Be sure to use colors so it is easy to distinguish text from background.
6. Do not forget that almost 10 percent of male readers have some trouble distinguishing fine shades of red from shades of green
7. If you are using gradient stick with black text and avoid using dark color in the background.
8. Optically bright colors on white like yellow disappear
9. White text on black is almost good for legibility
10. The optimal combination for legibility is black on white
11. Hue
12. Saturation
13. Brightness

Contrast variability
The contrast for the legibility needs to be different from application to application, as there are multiple scenarios in which the application will be used. The mobile devices are used in the house and exteriors, the falling sunlight may make arouse problems in legibility.

Tools for graphic emphasis
1. The tool for graphic emphasis are powerful and must be used in sparingly in small amounts, over use makes them ineffective as emphasis on a particular section is not given.
2. Colors drawn from nature are almost inherently harmonious and subdued

White space
1. A fixed width layout include – the page at the center of the browser window
2. For liquid layouts use 90 to 95 % of the screen instead of 100%, leave some background around the functional areas of the page to prove visual relief.
3. If your page width is reasonable it will provide a visual relief
4. The ground field around the page elements is as active as any figure filed on the page.
5. Filling all the white space in the page is like removing the air form the room. Use white space effectively.

1. The best style is the one that the readers never notice

1. Vision impaired people are lost on the web
2. People with cognitive disabilities such as memory and learning disabilities the difficulty is magnified many fold.

1. Good typography is based on the visual contrast between one font and the other, and the contrast between the text blocks and the surrounding empty space.
2. We read primarily by recognizing the overall shape of the words, not by parsing each letter and then assembling a recognizable word.
3. Avoid all upper case headlines, as they are difficult to read, because words formed with capital letters are monotonous rectangles that offer few distinctive shapes to catch the readers eye.
4. Legibility depends on the top of the words. If you use initial letters as caps, you disrupt the readers scanning of the words.
5. Initial Caps Causes Pointless Bumps
6. The first thing the users see is the overall contrast and the pattern of the page.
7. Choose few heading styles and subtitles to organize your content then use chosen style religiously.
8. In conventional print layout 30 t0 40 characters per line are considered ideal
9. Web page layout violates one of the basic book and magazine typography. The lines of text in web pages are mostly long to be easily read. Magazine and book columns are narrow for physiological reasons: The eyes span of movement is usually eight cms (3 inches wide) so designers keep the paragraphs wide enough to span in the eyes comfortable span of eight cms. If the lines are long, the user’s eyes are strained by flexing the head and eye muscles.

Conduct usability testing

Usability testing can be very expensive in major product designs if the scope of the product is large using global product user's representatives.The tools that usually go hand in had with such usability testing are very expensive and not easily available.Some of the tools & facilities that come handy are

  1. Morae customer experience software

  2. Camtasia Studio

  3. UserVue Remote User Research

  4. Accessories(Camera etc)

  5. Usability Labs etc

Does this means that we can not go for usability testing if the project allocation fund is small? No not at all, there are many economical usability testing methods can be used to design better product & services like paper prototype usability testing, walk through testing etc.Let us explore the typical steps to follow when we are going to perform usability testing.











Step 1: Software/Application/Product information collection

Knowledge of product to be tested is vital for facilitator & note takers involved in usability testing.If you are new to the project then this information can be collected from the product manager,UX architect,designers or other team members involved in the design of the product.If you are working from the initiation phase of the project then it is an ideal scenario.The user persona's,technical infrastructure,industry area to which the product pertains,number of users globally,geographical locations of users etc are some of the information you should look upon.

Step 2: Critical Task/Scenarios selection

Sit with the product design team and product manager to come to conclusion most critical tasks that will be performed with the application by the users.Suppose it is a flight travel ticket booking site then the most critical tasks that come into mind will be

  • Buying a ticket online

  • Search flights

  • Online Customer service

Step 3:Test scripts & scenarios

A test script includes the task the users needs to perform & gave their valuable responses.Preparation of test scripts will have the below sections.

  • Pre-test questions: "Questions should be very simple" this is the ground rule.We can ask the users to fill a small information sheer which asks for name,age,gender,location,education,interest & hobbies etc. Uncomfortable questions like what is your annual income should not be asked unless it is mandatory affecting their tasks in case of BFSI(Banking and Financial Services) products.

  • Test scenarios: A typical test scenario will be like this.

"This year Diwali holidays are falling in October end.Your manager has granted you ten days of leave.Please book a flight ticket for yourself on the travel portal"

  • Post test questions: The post test questions will be focused on getting the responses from usability testing participants in an intuitive manner.i.e. How do you feel about the number of steps involved. What do you like most about travel portal. Any suggestions you would like to give to improve the application.










Step 4: Conducting usability testing:

Before inviting the actual participants for the usability tests,make a dummy test with one of your team members(with the least knowledge about the product) to insure all the software,cameras,questions framed are working fine & suits well.

  • Invite the participants & welcome them for the test

  • Introduce them to usability testing team

  • Make the users comfortable saying that "We are not testing user skills here rather we are testing the application".This will make the user more comfortable.

  • Distribute the test scripts,Help them in filling the small form, answer their queries in most caring manner.

  • TAKE CARE OF THE USERS - this line should never be compromised.

  • Usability testing - Invite the users to their respective systems & ask them to work on the test scenarios. Make a not of the time while they are performing the test.If they ask any question's answer them with some clues but do not help them in making the task success.Use words like "I am very delighted to see what you have done till now, it will help us to make the application user friendly.Let me take you to the next task".

  • Post-test questions - Collect the users feedback from Post test questions.

  • Note takes will be taking notes throughout the sessions, they will focus on getting the important information that will improve the application.They will have all the quantitative details about each user like how much time they took to complete the test,what were the important path they followed etc, they are also responsible for the videos data capturing & screen hot area files etc.

Step 5: Collecting the responses & Thank giving to the users

Collect the test scenarios form users.Give them the gifts if you have promised it before & thank them for giving their valuable inputs.In this way we can go for usability testing.Usability testing is a Art,science & craft together s0 it will take some time to master the skills.

Not a problem there is first time for everything. :-)