Fundamentals of Interfaces

1
Fundamentals of Interfaces

• E-Business Applications

2
What is an Interface?

• A term of much confusion due to its nature
• GUIs, command-line, programming, hardware, etc.
• Verb meaning to communicate
• It describes the place where two disparate
  systems meet as well as how they meet.

3
What is an Interface?

• An interface must consist of more than one system
• It is more than a tool, it has to have a purpose
  and organization
• Radio dials
• Telephone buttons
• You the user from your experience, help make up
  the interface!

4
What is an Interface?

• Best if not seen, nor heard!
• Assembly Language Programming?
• The more technologically sophisticated the tools,
  the simpler the interface needs to be.
• Good example
• Using a Web Browser to Surf the Web!

5
What is an Interface?

• To make the interface invisible
• Use metaphors/natural mappings
• Spatial metaphors to represent objects in space
• Sound to represent degree or quantity
• Leverage personal experience
• Draw on previous experience but keep unnecessary
  complexity low
• Find a balance between a simple interface
  requiring complex learned behaviours, and a
  complex interface that maps perfectly to the task
  required

6
What is an Interface?

• Quick Note
• Interface - implies a person is part of the
  equation
• User Interface - more specific definition.
• On the other side maybe a phone, monitor etc.
• Graphical user interface
• An interface consisting of graphical
  representations of real world concepts and
  objects.

7
Elements of Interface Design

• Questions that should be addressed
• Is the interface design useful?
• How can you tell if its useful?
• Are the users really to blame for common
  mistakes?
• Are we to blame for building inherently flawed
  applications?
• Are our interfaces/features too confusing?
• Are there workarounds for inherent usability?

8
Elements of Interface Design

• Some principles to follow
• Work with nature
• Work against nature (when you have to)
• Keep It Simple Stupid (but not too simple)
• Emphasize Key Elements
• If possible use constraints to limit possible
  errors
• Design for error
• Define a standard when nothing else works

9
Elements of Interface Design

• Work with Nature
• Use work done in cognitive psychology
• Affordances - the way an object is used
• Constraints - prevents actions/responses
• Natural Mappings (Metaphors)
• Visibility - degree of display
• Feedback - aural/tactile signals
• Direct Manipulation - object manipulation
• These six concepts will help with good design

10
Elements of Interface Design

• Rules for Affordances
• Things that are meant to be pushed, should be
  made to push
• Choose object representation carefully
• Poor representation can lead to user confusion
• Affordances can be assigned values
• Not all need to have a value

11
Elements of Interface Design

• Types of Constraints
• Physical prevents physical action
• Semantic prevents nonsense states. Knowledge
  dependent
• Cultural depends on accepted behaviour
• Logical derived from logical circumstances
• e.g Clicking on a back button, takes you to the
  previous screen.

12
Elements of Interface Design

• Rules for Constraints
• Do not unreasonably restrict natural tendencies
• Ensure the affordance/constraint combination is
  unambiguous
• Ensure the constraints are used in proper context
• Ensure constraint combination doesnt result in a
  dead-end or an endless loop.

13
Elements of Interface Design

• Visibility/Prominence
• Some applications need to have certain elements
  more prominently displayed than others.
• Others need to be more obscured
• Auditory elements can also be considered as being
  visible.

14
Elements of Interface Design

• Natural Mappings
• Part of making an interface invisible
• Can lead to confusion with a poorly chosen
  metaphor

15
Elements of Interface Design

• Feedback
• Can be visual, aural, tactile
• Every action/change in an application should give
  some sort of feedback
• The feedback element can also require a response
• e.g. user confirmation

16
Elements of Interface Design

• Rules for Feedback
• Used to make the interface invisible
• Feedback should not distract the user
• Should appear as a natural extension to the
  application
• Should not conflict with constraints and
  affordances.

17
Elements of Interface Design

• Direct Manipulation
• Use objects to represent other objects to be
  manipulated
• Object can be either a real world object, or
  computer generated
• Same rules apply as for affordances and
  constraints generally apply.

18
Elements of Interface Design

• Forcing Functions
• Same as constraints
• Restricts actions
• Becomes visible when an action is attempted
• Different from constraints
• Forcing function can remain invisible except for
  its effects
• No warnings are issued.
• Three types of forcing functions
• Lockins, lockouts and interlocks.

19
Elements of Interface Design

• Lockins
• Prevents changes of state until certain
  conditions are met.
• Bad example modal dialog box.
• Interrupts program flow
• Forces the user to respond immediately
• Good example
• Software installation programs

20
Elements of interface Design

• Lockouts
• Prevents users from entering a place or state
• An example
• Preventing a program from being installed when
  other programs are running
• Used in conjunction with a lockin, it can prevent
  many serious errors from occurring.

21
Elements of Interface Design

• Interlocks
• Ensures that actions occur in a certain order
• No other execution order is permitted
• Real-world example
• Car wont start until clutch is fully depressed
• Typical light inside a refrigerator
• Software example
• Cannot use an application unless you have logged
  in.

22
Elements of Interface Design

• General Rules and Questions
• Affordances and other notifications should be
  prominent
• Forcing functions should be transparent to the
  user
• The problem is, to what extent should each be
  taken?
• How much feedback is too much?
• What level of constraint is too high?

23
Applying Interface Design to the Web

• Design for error
• Build in appropriate responses, checks and
  balances
• Have clear and explanatory error messages
• Issue appropriate warnings before a potentially
  dangerous action may occur

24
Applying Interface Design for the Web

• Pay Attention to your Users
• Build what they want, not what you think they
  want
• Listen to the naïve users
• May elect to educate rather than redesign
• Keep the fog index low
• Reduces cost due to redesign and additional
  programming

25
Applying Interface Design for the Web

• Keep the Interface Clean and Uncluttered
• Shy away from too many bells and whistles
• Deliver unambiguous interfaces
• Make the interface direct and navigation clear
• Help focus the users attention on the important
  aspects of the page.

26
Maintaining Web Site Interface Flexibility

• Web site interfaces can be easily redesigned
• Separation of appearance from functionality
• Keep static pages separate from the backend
• The templates can be fine-tuned according to user
  feedback
• Shrink-wrapped applications cannot
• Interface tied in with back-end

27
A Framework for Easy to Use Web Pages

• Making Web Pages Easy to Use

28
Framework for Easy to Use Web Pages

• Why are some web pages easy to understand, and
  others appear as a mess?
• Pages that dazzle can also distract
• This can cause important information to be
  hidden
• Text becomes unreadable and the viewer leaves

29
A Framework for Easy to Use Web Pages

• How do you build a framework?
• Critical judgements are useless
• Leads to conclusions based on personal affection,
  idiosyncrasy, affinity or poor judgement
• What about usability testing?
• Usability testing reveals flaws in poorly
  designed pages
• Testing cannot show that the web page is useable

30
A Framework for Easy to Use Web Pages

• How do you build a framework?
• One way... The Cognitive Approach
• Give an ordered visual hierarchy of information
• Hierarchy should match the communicated content
• Element contrast will tend to produce a visual
  hierarchy
• Have layers of inactive background with notable
  content
• When everything is emphasized, nothing is
  emphasized

31
A Framework for Easy to Use Web Pages

• Visual Processing of Web Pages
• Certain perceptual elements have priority
• Process of reading a web page into two phases
• Search and Scanning

32
A Framework for Easy to Use Web Pages

• Search phase
• User decides where they should enter the page
• Eight elements in the framework
• Motion, Size
• Images, Colour
• Fonts, Position
• Area, Proximity/Reading Order

33
A Framework for Easy to Use Web Pages

• Search Phase - Motion
• Most important variable in the search phase a
  strong cue
• Motion detection is automatic
• Object in motion to pop out of the display
• However attention is not kept for longer than a
  few hundredths of a second

34
A Framework for Easy to Use Web Pages

• Search Phase - Motion Caveats
• Animation should be meaningful
• Should not be distracting
• It should add something to the content of your
  page

35
A Framework for Easy to Use Web Pages

• Search Phase - Size
• Larger objects will be focused on in preference
  to smaller
• Users fixate on them first
• Users look at them longer than smaller displays
• There is perceived visual importance

36
A Framework for Easy to Use Web Pages

• Search Phase - Images
• Research done by Stone Glock
• Users first looked at the figure for 1-2 seconds,
  then the text caption
• Graphics and images are attended to in preference
  to text
• Users pick out specific information, first from
  graphics
• Only afterward do they start reading the harder
  medium of text

37
A Framework for Easy to Use Web Pages

• Search Phase - Colour
• Several elements have a similar size, color can
  be used to discriminate which element is most
  important
• Images which are more brightly colored will gain
  focus
• Colour and contrast also show relationships
  between items and establish importance

38
A Framework for Easy to Use Web Pages

• Search Phase - Fonts
• Certain type styles become part of the texts
  meaning
• Type face
• Font weight
• Font size, italics, underlining become part of
  meaning of the text
• Text style draws attention to important words.
• Titles and headers are the fundamental human
  interface issue in web pages

39
A Framework for Easy to Use Web Pages

• Search Phase - Position
• When all else is equal, position is the
  arbitrator
• Pages of text are viewed at a number of
  granularities
• Top-left and Top-center items tend to be noticed
  first and are considered more important
• Non text displays - the center will be dominant
• Factors such as symmetry will displace the center

40
A Framework for Easy to Use Web Pages

• Scanning Phase
• User locates an entry point into the page during
  the search phase
• Second phase now produces scanning of the area
  which contains that entry point

41
A Framework for Easy to Use Web Pages

• Scanning Phase - Area
• Group of elements on a page
• Grouping or placing elements in proximity
  provides information about their relationship
• Colored backgrounds and table cells can lead the
  readers eye down the page
• Items which share the same color will typically
  be seen as relating to each other

42
A Framework for Easy to Use Web Pages

• Scanning Phase - Proximity Reading Order
• The tendency of individual elements to be
  associated more strongly with nearby elements
  than those which are farther away
• Elements in close proximity will be grouped
  together
• Grouping will follow a reading order, moving from
  left to right, and top to bottom

43
Usability Design Plan

• Usability Special Interest Group
• Software developers checklist on usability

44
Usability Test Plan

• Usability Special Interest Group
• Usability Evaluation Plan