Fundamentals of Interfaces E-Business Applications

Fundamentals of Interfaces

E-Business Applications

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.


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!


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’!


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


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.

Elements of Interface Design

Questions that should be addressed Is the interface design useful? How can you tell if it’s 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?


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


Work with Nature Use work done in cognitive psychology

Affordances - the way an object is usedConstraints - prevents actions/responsesNatural Mappings (Metaphors)Visibility - degree of displayFeedback - aural/tactile signalsDirect Manipulation - object manipulation

These six concepts will help with good 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


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.


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 doesn’t result

in a ‘dead-end’ or an ‘endless loop’.


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.


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

metaphor


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

responsee.g. user confirmation


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.


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.


Forcing Functions Same as constraints

Restricts actionsBecomes visible when an action is attempted

Different from constraints Forcing function can remain invisible except for

its effectsNo warnings are issued.

Three types of forcing functions Lockins, lockouts and interlocks.


Lockins Prevents changes of state until certain

conditions are met. Bad example: modal dialog box.

Interrupts program flowForces the user to respond immediately

Good example: Software installation programs

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.


Interlocks Ensures that actions occur in a certain order No other execution order is permitted Real-world example:

Car won’t start until clutch is fully depressedTypical light inside a refrigerator

Software exampleCannot use an application unless you have

logged in.


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?

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

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 redesignKeep the fog index low

Reduces cost due to redesign and additional programming

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 user’s attention on the

important aspects of the page.

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

A Framework for Easy to Use Web Pages

Making Web Pages Easy to Use

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


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

pagesTesting cannot show that the web page is

useable


How do you build a framework? One way... The Cognitive Approach Give an ordered ‘visual hierarchy’ of

informationHierarchy should match the communicated content Element contrast will tend to produce a visual

hierarchyHave layers of inactive background with notable

content When everything is emphasized, nothing is

emphasized


Visual Processing of Web Pages Certain perceptual elements have priority Process of reading a web page into two

phases Search and Scanning


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


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


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

your page


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


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


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


Search Phase - Fonts Certain type styles become part of the text’s

meaningType faceFont 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


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


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


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


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

Usability Design Plan

Usability Special Interest Group Software developers checklist on usability

http://www.csd.uwo.ca/courses/CS436b/notesfolder/sware_dev_usability.htm

Usability Test Plan

Usability Special Interest Group Usability Evaluation Plan

http://www.csd.uwo.ca/courses/CS436b/notesfolder/usability_test_plan.htm

Documents

Fundamentals of Interfaces E-Business Applications