Quick Tips on design elements

1. Introduction to Design Principles and Usability
Author
M. Semeniuk

2. Visual Organization: Gestalt Principles
The right column of the blog has the Gestalt Principles defined under
Key Sources and Concepts
– C.Chen Information Visualization
– Definition example from Spokane Falls Community
Proximity Common Region Connectedness
Similarity
Size Shape Shade Color

3. Elements on a Grid System
Placing elements on a grid system will help the user
– Group Information
– Align Elements and relax eye flow
Elements on a Grid Elements not on a Grid

4. Quick Tips: Eye flow
Which shapes do you see first? Usually the user will see
• Large to Small
• Irregular to regular
• Dark to light shade

5. Quick Tips: Eye flow
Users usually look first at the center column

6. Quick Tips: Usability-Button
• Does a button express and function as a button?
• Does the user know if they select the button another action will
perform a function?
• If those questions are true, the button has affordance.
Common buttons for Videos:
* Notice the grouping and the application of the Gestalt Principles.

7. Quick Tips: Usability-Text Alignment
• Accessible text alignment: know your audience – how do they read?
– left alignment creates a visual line instead of a jagged edge as in
right justified text and does not interrupted eye flow.
– avoid centering main the information.
– Try to keep the text length under 100 to 150 words per line
– Consistency of fonts and sizes per grouping; example, headers
the same size.
Left Alignment Center & Right Justified Alignments
Lorem ipsum dolor sit amet, consectetur
Lorem ipsum dolor sit amet, consectetur
adipiscing elit
adipiscing elit
Lorem ipsum dolor sit amet, consectetur Lorem ipsum dolor sit amet, consectetur
adipiscing elit adipiscing elit

8. Quick Tips: Usability-Color
• Chromostereopsis is a visual vibration effect when the eye tries to
adjust or accommodate extreme color spectrums; red and blues are
side by side. This is very difficult for a user to maintain focus.
Example Example
• Keep the color simple, non-competing and consider designing within
color blindness parameters.
Example Blue

9. White space allows the user to focus on the content.

10. No White Space for the User
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent non
lectus odio, sagittis mattis nulla. Fusce at lectus erat, nec pulvinar
erat. Etiam vel urna purus. Maecenas massa nunc, ullamcorper non
dapibus a, facilisis a dui. Nam tempor arcu non lectus facilisis a dui
mass Vestibulum ultrices ipsum at lorem vestibulum et auctor nunc
vehicula. Morbi molestie sapien id libero gravida id iaculis lorem
Without white space it can confuse a user: Where is the focus?
Vestibulum ultrices ipsum at lorem vestibulum et auctor nunc vehicula.
Morbi molestie sapien id libero gravida id iaculis lorem aliquam.
Vivamus nulla neque, pharetra ut sodales quis, malesuada non
justo. Donec dapibus tincidunt posuere. Suspendisse mattis euismod
mattis diam. Vestibulum ultrices ipsum at lorem vestibulum et auctor
nunc vehicula. Morbi molestie sapien id libero gravida id iaculis lorem
aliquam. Vivamus nulla neque.

11. Please comment about your experiences on instructional technology or design
at http://inst-designonline.blogspot.com/