Documente Academic
Documente Profesional
Documente Cultură
Sinoj Mullangath
Communication
Communication conveys facts, concepts and emotions To convey something, one requires a language and a medium A language requires letters, words, sentences and rules of usage (=grammar)
Visual Media
Print
Articles, Brochure, Manuals, Fine Arts
Motion
Films, Animations, Performances
Interactive
Websites, Online Help, CBTs, CD-ROM
Visible Language
Layout Typography Color Texture Imagery Identity Sequencing Animation Sound
* In this context
Organize
Consistency
Internal: same types of elements are shown in the same places External: existing platforms and cultural conventions should be followed across user interfaces Real world: consistent with real-world experiences, observations and perceptions of the user Innovation: deviating from existing conventions, if it provides a clear benefit to the user
Organize
Screen Layout
Use a grid structure Define spaces Spread vs. Page Design Standardize the structure Easy to locate menus or dialogue boxes Group related elements
Organize
Navigation
provide an initial focus for the viewer's attention direct attention to primary, secondary, and peripheral items assist in navigation through the material simple learning curve
Economize
Four major points to be considered
Simplicity: include only the elements that are most important for communication Clarity: meaning of the components are not ambiguous Distinctiveness: important properties of the elements are distinct Emphasis: important elements are easily perceived
Communicate
To communicate successfully, the interface must keep in balance:
Legibility Readability Symbolism Multiple views Typography Color
Comprehensible display
Easy to identify and interpret Inviting and attractive
Symbolism
To communicate the content efficiently, carefully select and refine
Icons Symbols Charts Maps Diagrams Photographs
Typography
Typefaces
Legible, clear and distinctive type faces to distinguish between different classes of information (max 3 faces)
Typestyles
Point size, italics, boldness, underline, color (max 3 styles)
Typesetting
40-60 char per line, flush left, avoid centering or justified or all caps text in a line, proper word spacing, paragraph indentation, and line spacing
Typography
Composition
spacial unit + contrast
Weightage
chroma + lightness + thickness
Direction
height + positioning + style
Character
tight/space + type-dimension
Color (Plus)
Emphasize important information Identify subsystems of structures Portray objects in realistic manner Depict time and progress Reduce errors of interpretation Add coding dimensions Increase comprehensibility Increase believability and appeal
Color (Minus)
Complex mechanisms
Display Reproduction
Cross-culture issues
Color
Psychology
Individual character
Red = Hot, Vibrant, Passionate Blue = Cool, Dependable, Depth Yellow = Youth, Energy, Warmth White = Serene, Calm, Clean Purple = Rich, Royal, Classy
Color
Color wheel Color groups
Warm colors Welcoming Too much = Stuffy Cool colors Composed Too much = Cold
Color
Color groups
Complementary or Contrasting
Analogous or Harmonious
Color
Organization
consistency of organization group related items infer a similarity among objects complete and consistent grouping objects color coding scheme
Color
Economy
design the display to first work well in black-and-white to remember the meaning of usage of colors (5+/-2) color emphasis to draw the user's attention hierarchy of highlighted, neutral, and dark areas of display maximum simplicity and clarity
Color
Communication
appropriate colors for the central and peripheral areas color area vs. weightage difference in chroma and value environment & background
Symbolism
existing cultural and professional usage connotations in cultures
Print vs Online
Space/ Gravity: Defined vs. Open Composition: Planned vs. Changing Volume: Pages vs. Scroll Structure: Sequential vs. Random User: Participate vs. Anticipate Character: Static vs. Dynamic Usage: confine vs. Freedom Communication: One-way vs. Two-way
Print OR Online
Visual form consists of
Primary element(s) Secondary element(s) Peripherals Grid White spaces Blind spots Fillers
sinojm@yahoo.com