IS 303

Hierarchical

- Focuses on the proportions of the elements in the design. Often used when the content isn't standardized and repetitive. Created organically by first placing design elements on the page and then finding a rational structure for presenting those elements.

Golden ratio

- For creating pleasing, natural looking compositions.

Input

1. Recording and entering data into the computer system 2. Issuing instructions to the computer

Modular

Best when columns alone don't offer enough flexibility and when vertical and horizontal space are of equal concerns. Popular in digital media.

Centered text

Centered within the box it resides. Typically jagged on both the right and left sides. Centering is most commonly used for text blocks containing few words.

Left aligned text -

Each line of text aligns with the left margin and is ragged along the right margin. Left justified text is the standard for main body text on most websites because it is easy to navigate, design and read. In web design, word spacing is most consistent with left alignment.

Column

Good when information presented is discontinuous and different types of information can be placed in different columns. Most used grid in web design b/c width of screen is finite, unlike the height.

Command-based

INPUT: commands - E.g. abbreviations (e.g. ls) typed in at the prompt to which the system responds (e.g. listing current files) - Some are hard wired at keyboard, others can be assigned to keys • OUTPUT: textual • PRO: Efficient, precise, fast, good for batch tasks • CON: Large overhead to learning set of commands

Manuscript

Simplest; good for presenting large continuous blocks of text or images.

Right aligned text

Text aligns with the right margin and is jagged along the left side. Right justification appears most frequently in navigational elements or break out text blocks that are used more like art elements, such as big quotes.

Justified text

Text stretches the entire width of a frame. While justified text is commonly used in print materials, it is uncommon in web design. The look of justified text can be somewhat hard to predict in different browser sizes. Further, because of the lack of defined hyphenation, text can squeeze and stretch somewhat more unpredictably, making readability an issue online.

Font

The physical embodiment of a collection of letters, numbers, symbols, etc. (whether it's a case of metal pieces or a computer file). Single size of a single typeface.

Typeface

When referring to the design of the collection/alphabet (numbers, punctuation), all font sizes (the way it looks)

WIMP

Windows -> OUTPUT • Icons -> OUTPUT • Menus -> OUTPUT • Pointing device -> INPUT

Gain

distance moved by an input device, divided by the distance moved on the display - "If I move the mouse an inch, how many pixels will it move the cursor?" - Setting that can be set and manipulated by the user • Why would someone want to change this setting?

Brightness

is measured in percent from black (0) to white (100). At 0% brightness, both hue and saturation are meaningless.

Hue

is the actual color. Measured in angular degrees counter-clockwise around the cone starting and ending at red = 0 or 360 (yellow = 60, green = 120, etc.).

Saturation

is the purity of the color, measured in percent from the center of the cone (0) to the surface (100). At 0% saturation, hue is meaningless.

Kerning

space between letters

Tracking

space between words

Leading

the space between lines of text

No. of dimensions

• 1 dimension (knob) • 2 dimensions (mouse) • 3 dimensions (Kinect)

Grids

• A grid is a set of invisible lines - that run vertically and horizontally - that help you dictate where to place content. • Grids make designs balanced and principled. • Help you divide content into discrete, manageable modules. - Makes content more flexible and organized. - Makes content easier to view and experience.

Proximity

• Arrange elements so their proximity corresponds to their relatedness • Ensure labels are close to the elements that they describe • Place unrelated information relatively far from one another (where possible)

Gestalt Psychology

• At its simplest, gestalt theory describes how the mind organizes visual data . - The stronger the clarity of form, the more effective the design. • Describes how people tend to organize visual elements into groups or unified wholes when certain principles are applied.

Device Acquisition Time

• Average time to move one's hand to a device - Keyboard to mouse - Joystick to button

Figure-Ground

• Clearly differentiate between figure and ground in order to focus attention and minimize perceptual confusion

Direct input devices

• E.g. Touch screens • User interacts directly with onscreen objects by touching them • Can use one-handed or two-handed • Single finger or multi-finger • Also can use gestures that user has to learn

Icons

• Invented to represent applications, objects, commands, and tools that were opened when clicked on • Icons are assumed to be easier to learn and remember than commands - Picture Superiority Effect: pictures are remembered better than words • Now pervasive in every interface - e.g. represent desktop objects, tools (e.g. paintbrush), applications (e.g. web browser), and operations (e.g. cut, paste, next, accept, change) • Goal: attractive and informative - icons should be inviting, emotionally appealing, memorable, distinctive.

Direct vs. Indirect Input Devices

• Is interaction with the onscreen object or with a surrogate? • Direct input device - User interacts directly with onscreen objects by touching them - Feedback can be useful, but isn't always present • Indirect input device - User interacts with a remote object that interacts with onscreen objects - Requires feedback (usually via a cursor) to alert the user to "where they are on the screen" and what they can interact with

Property Sensed

• Linear position (mouse) • Motion/force (joystick) • Changes in angle (knob)

Indirect Input Devices

• Mouse - Sensors for x-y motion - Moving device corresponds to onscreen movement - Requires eye-hand co-ordination • Trackballs - Rotating ball - Requires less desk space because, unlike the mouse you don't move the input device.

Auditory Output

• Music, Speech, natural sounds, beeps • Usually for alerting and feedback • Buxton et al argued for more sound • Sounds in email (Gaver) - Incoming mail woosh into inbox - Heavy thud for lengthy email versus light rustle - Reverberation indicating how full or empty the box is

Continuity

• Place elements so their alignment corresponds to their relatedness. • Place unrelated items on different alignment paths • (where possible)

Visual Output

• Pros - Most common form - Expect it in most interfaces - Static or dynamic • Cons - Not best if user needs to focus elsewhere (driving)

Auditory Output 2

• Pros: - Good when eyes engaged in a different task (GPS) - Monitoring background processes to be alerted when something out of the ordinary happens (car engine noise) - Good for blind or partially sighted users • Cons - Cacophony of sound - less is better - Mapping between sound and meaning

Similarity

• Represent elements such that their similarity corresponds to their relatedness • If elements are unrelated to one another on an interface, try to differentiate them from neighboring elements where possible.

Icon Forms

• The mapping between the representation and what it refers to can be : - Similar (simple and concrete - e.g., a picture of a picture to represent the object picture) • use when representation is simple and concrete (most effective) - Analogical or Example (e.g., a picture of a pair of scissors to represent 'cut') • use when representation is complex - Symbolic - (e.g. a lock to represent that it is secure) • use when well established and recognizable - Arbitrary (e.g., arrow to represent undo, X to represent 'delete')

Closure

• Use closure to reduce the complexity of your design. • When designs involve simple, recognizable patterns, consider removing or minimizing the elements of designs that can then be supplied by viewers.

Windows

• Windows were invented to overcome physical constraints of a computer display - enable more information to be viewed and tasks to be performed - could be scrolled, stretched, overlapped, opened, closed, and moved around the screen using the mouse • Scroll bars within windows also enable more information to be viewed • Multiple windows can make it difficult to find desired one, so...