How does Human Computer Interaction applies to SharePoint? Part 4

STRUCTURE

GRID SYSTEM – Designers use grids to organize content and manage the clarity of a message.

Grids are used to organize content in every type of media

  • The circular grids provide a frame for content, ensuring that it will consistently appear through elements such as a die-cut window
  • Web sites may use clear structural alignments to control complex amounts of content, creating a positive online user experience
  • Grids may be used in an environmental setting to provide a tapestry of imagery

BASIC GRID SYSTEM

Includes margins, columns, and gutters. Adding horizontal lines provides additional visual continuity. The most common horizontal inclusion is a “hanging line” or “flow line” from which headlines, quotations, or body copy can flow. Grids allow the designer to easily delineate segments of the layout for specific content

ORGANIZATION

Repeating organizational structures (common grids, alignments, hanging lines, etc.) increases usability by providing the viewer with predictable formats for retrieving content. This web site for Reich Paper provides users with a consistent viewing experience, focusing their attention on the information and the the interface with harmonious and familiar typographic, interactive, and wayfinding systems.

MOVEMENT

Designers use grids to create dynamic movement on the page, convey a sense of space, and establish relationships between information sets. Consider how your eye moves around the three layouts shown here all with the same amount of content on a common four-column grid.

GROUPING

Placement, proximity, and similarity can dramatically change the content of content. In this example, our emotional response to the dog image changes dramatically within it is placed with an image of a young family or converted to gray scale and paired with a photograph of a cage.

Borrow From The Familiar – Use the Golden Ratio or Divine Proportions to determine page margins – the ratio of the longer part to the whole should be the same as the ratio of the shorter part to the longer part.

For web work, think proportionally – When designing for the web, don’t think of columns in terms of fixed width, because web pages are resized preference. Concentrate instead on creating structural value by focusing on proportional relations between page elements (based on ems). Essentially, the user sets the scale and your design expands to fit.

COGNITIVE PERSPECTIVE
The Gestalt Principles of Perception
Eye Tracking

COMMUNICATION PARADIGMS
The Principle of Least Effort
Uncertainty Reduction Theory

STRUCTURE
Hierarchy

In the context of graphic design, “hierarchy” refers to the ordering of pictorial and typographic information sets so that the viewer can quickly gain an understanding of their relative importance.

Clear visual hierarchy is fundamental to graphic communication. It allows readers to skim and scan large fields of content and determine what is useful, usable, and relevant to their needs without having to read each and every word. These spreads from Yale School of Forestry and Environmental Studies view book are excellent examples of visual hierarchy at work. They clearly direct the viewer to pertinent information thus making the navigation of sometimes complex content quick and easy.

HOW USERS PROCESS COMPLEX INFORMATION SETS
Perception of Graphic Statistical Displays: Cleveland’s Take Model
Miller’s Magic Number
Information Overload

HOW VISUAL HIERARCHY CONNECTS TO COMMUNICATION PARADIGMS
LATCH
The Principle of Least Effort
Information Literacy

REMINDER
Reading is fundamental
Bigger isn’t always better

COLOR
Color is seen either by the way light reflects off a surface, or in colored light sources. Color and particularly contrasting color is also used to draw the attention to a particular part of the image. There are primary colors, secondary colors, and tertiary colors. Complementary colors are colors that are opposite to each other on the color wheel. Complementary colors are used to create contrast. Analogous colors are colors that are found side by side on the color wheel. These can be used to create color harmony. Monochromatic colors are tints and shades of one color. Warm colors are a group of colors that consist of reds, yellows, and oranges. Cool colors are group of colors that consist of purples, greens, and
blues.

CONTRAST – Gray scales, Hue, Saturation, Brightness

TYPOGRAPHY – Weight, Size, Spacing, Kerning

Advertisements

I am a technologist with a strong background in software engineering. I have many interests. My current distractions are 70s-80s-90s music [it's a very eclectic collection], ontology, information architecture, mobile device technology, medical bioinformatics, artificial intelligence, and nanorobotics.

Posted in Uncategorized

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: