Design screen organization
Download
1 / 73

Design & Screen Organization - PowerPoint PPT Presentation


  • 71 Views
  • Uploaded on

Design & Screen Organization. Some Basic Human Characteristics. Humans are limited in their capacity to process information. People are always learning. People use prior learning to support new learning. People often learn by doing People like to solve problems

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about ' Design & Screen Organization' - yardley-morales


An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
Design screen organization

Design & Screen Organization


Some basic human characteristics
Some Basic Human Characteristics

  • Humans are limited in their capacity to process information.

  • People are always learning.

  • People use prior learning to support new learning.

  • People often learn by doing

  • People like to solve problems

  • People don’t like unsolvable problems.


Some basic user characteristics
Some Basic User Characteristics

  • Mental Models

    • Users are always building models of their world.

    • Users don’t mind if something doesn’t make sense

      • they build their own model to make it make sense

    • Users prefer simple models

      • simple and working solution (even it is not completely correct)


Good bad toolbar icons
Good & Bad toolbar icons

http://www.vbaccelerator.com/home/Resources/Graphics_Library/index.asp


Why is this important know your user
WHY IS THIS IMPORTANTKnow Your User

  • Consider the Individuals using the system (i.e. target user)

  • Skill

    • Computer knowledge, other systems they use, education, keyboarding skills

  • Job – Tasks – Needs

    • Frequency of use, importance to job, structure of job, training, culture

  • Psychological characteristics

    • Motivation, patience, expectations, learning style

  • Physical attributes

    • Age, gender,disabilities


Norman s design principles
Norman’s Design Principles

  • The Design principles are based on

    • Understanding of psychology of users.

    • Understanding of how people interact with the environment

    • Understanding of how people response to good design and bad design


Norman s design principles1
Norman’s Design Principles

  • Providing a good conceptual model

  • Make things visible

  • Managing a natural mapping

  • Providing feedback

  • Supporting automatic learning

  • Providing forcing functions

    • Utilizing constraints


Conceptual model

Gap

System Image

User’s

conceptual

model

Designer’s

conceptual

model

Conceptual Model

  • the underlying understanding of how a technology or device works

Q: What do large gaps cause?


Three conceptual models

Design model

User’s model

Designer

User

System

System

image

Three Conceptual Models


Mapping
Mapping

  • Mapping indicates the relationship between the action of the user and the result of the action.

  • Natural mapping

    • The user’s natural understanding of action results

      • RED for stop and GREEN for go (cultural understanding)


Mapping example
Mapping Example

  • Present the font choices using the fonts themselves

Times New RomanArial

Arial Black

Courier New

Old English

Monotype Sorts

Univers

Direct Manipulation


Mapping example1

F1

F2

F3

F4

F5

F6

F7

F8

Mapping Example

  • Function keys

    • the mapping is somewhat arbitrary

      • F3 for CUT and F4 for PASTE ?

    • Not a natural mapping!

    • No memory aids

    • What happens when you want to cut but you click on F4 (paste)?

Logical Association



Forcing function
Forcing Function joystick?

  • Design that prevents users from taking actions which are inappropriate or which would lead to error

    • Appliance shut off when opened

      • Microwaves

      • Washing Machines

    • Radio buttons

      • Choose one and one only


Forcing function1
Forcing Function joystick?

  • Good example of a forcing function design:

    • Menu bar - grays out and prevents the selection of those items inapplicable to the current context

New

Open

Close

Save

Save as...


Forcing function2
Forcing Function joystick?

  • Lack of Forcing Function

    • DOS - every command is allowed as long as it is typed correctly

    • del *.*

    • deletes all files


Feedback
Feedback joystick?

  • Gives a user an immediate indication of the result of an action

    • Pick up the phone

      • Hear the tone

    • Select text

      • reverse video for

selected text


Affordance
Affordance joystick?

  • Make things visible

  • Provide indication of how something can be used


Affordances
Affordances joystick?

  • What do you need to know?

    • Which side opens?

    • Do I push or pull?

  • Affordances

    • Knobs, Plates, Bars

      • Size and placement


Affordances1
Affordances joystick?

  • Buttons

    • Flat

    • Shadowed

  • Hyperlinks

    • Plain text

    • Marked

  • Cursor shapes


Automatic learning
Automatic Learning joystick?

  • People automatically connect their actions with screen displays through repetitive patterns of actions (reinforce learning).

    • A design should provide consistencies that help the user learn to use the device

File Edit View Insert Format Tools


Automatic learning1
Automatic Learning joystick?

  • Good example of Automatic Learning:

    • user actions always involve same number of steps, e.g., select object, select general action to perform on object, select specific case of action

    • Consistence and standards

      • If you know how to use one window application, it will be easy for you to learn another one.


Automatic learning2
Automatic Learning joystick?

  • Example of non-use of Automatic Learning :

    • Screens which change standard menu item locations from display to display


Three conceptual models1
Three Conceptual Models joystick?

Design Model

User’s Model

System Image

Visibility

Action

Feedback

Affordances

Forcing

Functions

Automated Learning

Mapping


Mismatch between designer s user s conceptual models
Mismatch between Designer’s & User’s Conceptual Models joystick?

  • Errors

  • Slow

  • Frustration

  • ...


Knowledge in the head and in the world
Knowledge in the Head and in the World joystick?

  • Knowledge in the world

    • is the information in the environment

  • Knowledge in the head

    • is the information that stored in memory

  • Most of the time we need to combine the two types knowledge to operate things. Why?


Coin examples
Coin Examples joystick?

  • One Cent Coins

    • We recognize coins easily.

    • But we don’t remember all the details.



What information do you memorize
What information do you memorize? joystick?

  • Location of element

  • Shape of element

  • Relationship of element to other elements on screen

  • Pictures of icons

  • Colors


What do you see1
What do you see? joystick?


Human processing of complex visual scenes
Human Processing of Complex Visual Scenes joystick?

  • The time it takes to visually understand a scene depends on the number of unique elements that we must visually identify in the scene

    • If we have already learned the scene, we record it as one element

      • Words are recorded as a single element.

    • One graphical component many have several unique components.



Control panel for desktop video conferencing
Control Panel for Desktop Video Conferencing joystick?

  • Too many elements to learn

  • Elements located all over screen

    • each individual location and relationship to other elements has to be learned

  • Elements not clustered or ordered so that sub-groupings can be learned


Organization of screen elements
Organization of Screen Elements joystick?

  • Balance

  • Symmetry

  • Regularity

  • Predictability

  • Sequentiality

  • Economy

  • Unity

  • Proportion

  • Simplicity

  • Groupings


Balance
Balance joystick?

  • Equal weight of screen elements

    • Left to right, top to bottom


Balance joystick?

Unstable


Balance1
Balance joystick?

  • Left column processed - Right column noted as same

  • Both columns need to be understood by visual processing system


Symmetry
Symmetry joystick?

  • Replicate elements left and right of the center line


Symmetric joystick?

Asymmetric


Symmetry1
Symmetry joystick?

  • Left column processed - Right column noted as same

  • Both right & left columns processed plus relationship of right to left


Regularity
Regularity joystick?

  • Create standard and consistent spacing on horizontal and vertical alignment points


Regular joystick?

Irregular


Regularity1
Regularity joystick?

  • Left column processed - 2 right columns noted as same

  • Location & size of each object processed


Predictability
Predictability joystick?

  • Put things in predictable locations on the screen


Icon joystick?

Search for Movies

File Edit View Insert Window Help

Enter Keywords:

Kung Foo

Grasshopper

Old blind guy

OK

Cancel

OK

Icon

Enter Keywords:

Kung Foo

Grasshopper

Old blind guy

File Edit View Insert Window Help

Search for Movies

Cancel

Predictable

Spontaneous


Predictability1

Icon joystick?

Search for Movies

File Edit View Insert Window Help

Enter Keywords:

Kung Foo

Grasshopper

Old blind guy

OK

Cancel

OK

Icon

Enter Keywords:

Kung Foo

Grasshopper

Old blind guy

File Edit View Insert WindowHelp

Search for Movies

Cancel

Predictability

  • User expects title & menu bar on top of screen

  • Visual scene needs to be completely processed - objects not in expected places


Sequentiality
Sequentiality joystick?

  • Guide the eye through the task in an obvious way

    • The Eye is attracted to:

      • bright elements over less bright

      • Isolated elements over grouped

      • graphics before text

      • color before monochrome

      • saturated vs. less saturated colors

      • dark areas before light

      • big vs. small elements

      • unusual shapes over usual ones


Membership Form joystick?

Name:

Dues:

Address:

Pubs:

City:

Total:

State:

Zip:

OK

Cancel

Membership Form

Name:

Cancel

OK

Address:

Pubs:

Dues:

State:

City:

Zip:

Total:

Sequential

Random


Economy
Economy joystick?

  • Use as few styles, fonts, colors, display techniques, dialog styles, etc., as possible


Membership Form joystick?

Name:

Dues:

Address:

Pubs:

City:

Total:

State:

Zip:

OK

Cancel

Membership Form

Name:

Dues:

Address:

Pubs:

City:

Total:

State:

Zip:

OK

Cancel

Economical

Busy


Economy of visual elements

NNNN joystick?

MMMM

xxx: ____

xxx: ____

MMMM

xxx: ____

xxx: ____

xxx: ____

xxx: ____

xxx: ____

xxx: ____

xxx: ____

xxx: ____

xxx: ____

NNNN

xxx: ____

xxx: ____

xxx: ____

xxx: ____

Economy of visual elements

  • minimize number of controls

  • include only those that are necessary

    • eliminate, or relegate others to secondary windows

  • minimize clutter

    • so information is not hidden


Unity
Unity joystick?

  • Make items appear as a unified whole (for visual coherence)

    • Use similar shapes, sizes, or colors

    • Leave less space between screen elements than at the margin of the screen


Unity joystick?

Fragmentation


Proportion
Proportion joystick?

  • Create groupings of data or text by using aesthetically pleasing proportions


Pleasing proportions

Square - 1:1 joystick?

Square Root of 2 - 1:1.414

Golden Triangle - 1:1.618

Square Root of 3 - 1:1.732

Double Square - 1:2

Pleasing Proportions


Simplicity
Simplicity joystick?

  • Minimize the number of aligned points

    • Use only a few columns to display screen elements

  • Combine elements to minimize the number of screen objects

    • Within limits of clarity


Membership Form joystick?

Name:

Dues:

Address:

Pubs:

City:

Total:

State:

Zip:

OK

Cancel

Membership Form

Name:

Address:

Pubs:

City:

Total:

State:

OK

Zip:

Cancel

Simple

Dues:

Complex


Simplicity1
Simplicity joystick?

  • Only four alignments need to be processed

  • A total of nine alignments need to be processed

Membership Form

Name:

Dues:

Address:

Pubs:

City:

Total:

State:

Zip:

OK

Cancel

Membership Form

Name:

Address:

Pubs:

City:

Total:

State:

OK

Zip:

Cancel


Size:: joystick?

Size:

Uniformity:

Height:

Width:

PreserveProportions% of original height% of original width

PreserveProportions% of original% of original

Simple

Complex




Groupings
Groupings joystick?

  • Use visual arrangements to provide functional groupings of screen elements

    • Align elements in a group

    • Evenly space elements in a group

    • Provide separation between groups

  • Use additional group elements sparingly

    • color & borders add complexity


Simple grouping

Membership Form joystick?

Name:

Dues:

Address:

Pubs:

City:

Total:

State:

Zip:

OK

Cancel

Simple Grouping

  • Similar elements aligned vertically

  • Vertical distance between similar objects small


Boxed grouping
Boxed Grouping joystick?

  • Boxes add additional complexity to form

  • Spatial arrangement adequate

Membership Form

Name:

Dues:

Address:

Pubs:

City:

Total:

State:

Zip:

OK

Cancel


Background grouping
Background Grouping joystick?

  • Color adds additional visual complexity

  • Spatial arrangement adequate

Membership Form

Name:

Dues:

Address:

Pubs:

City:

Total:

State:

Zip:

OK

Cancel


ad