Designing user interfaces
This presentation is the property of its rightful owner.
Sponsored Links
1 / 32

Designing user interfaces PowerPoint PPT Presentation

  • Uploaded on
  • Presentation posted in: General

Designing user interfaces. Lecture 7 Web design. Origins: Memex.

Download Presentation

Designing user interfaces

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

Designing user interfaces

Designing user interfaces

Lecture 7

Web design

Version 6

Origins memex

Origins: Memex

“A memex is a device in which an individual stores all his books, records , and communications, and which is mechanized so that it may be consulted with exceeding speed and flexibility. It is an enlarged intimate supplement to his memory.”

[Source: Vannevar Bush, 1945]

Version 6

Origins hypertext and hypermedia

Origins: hypertext and hypermedia

  • Data is stored as a series of nodes connected by machine-supported links

  • A node is an integrated and self-sufficient unit of information:

    • Hypertext (text)

    • Hypermedia (graphics, animation, images and sound)

  • User navigates between nodes by following links

  • The sequence of nodes forms a path

Version 6

Hypertext nodes and links

Hypertext nodes and links

Kublai Khan (1215-1266),

grandson of Genghis Khan,

elected leader of the Mongols

at Shang-tu on May 5 1260

Node 2

Node 1

In Xanadu did Kubla Khan

A stately pleasure dome decree:

where Alph, the sacred river, ran

Through caverns measureless to man

Down to a sunless sea

Node 1

Scrolling window

Node 3

Editable text

Closed window icon

Version 6

Origins xanadu

Origins: Xanadu

Ted Nelson coined the term ‘hypertext’ (defined as "non-sequential writing with free user movement”) at an ACM Conference in 1965.

“In project Xanadu, all media contents get permanent addresses, so that they can be addressed by anyone independent of their documentary context. On-line quotation references these permanent addresses. All links reference these permanent addresses, so that the same links are always on the same content-- wherever that content is re-used.”

Version 6

Origins world wide web

Origins: World Wide Web

“We should work toward a universal linked information system, in which generality and portability are more important than fancy graphics techniques and complex extra facilities.”

Information Management: A Proposal,

Tim Berners-Lee, CERN, March 1989

  • Hypertext

  • Client-server architecture

  • Remote access across networks

  • Non-centralised data

  • Ability to add private links

Version 6

Basic components of the web

Basic components of the Web

  • Common address system

    • Uniform Resource Locator (URL)

  • Network protocol for handling requests and responses

    • Hypertext transfer protocol (HTTP)

  • Language for constructing documents

    • Hypertext mark-up language (HTML)

Version 6

Basic web architecture

Basic Web architecture







Internet Explorer




Version 6

Interaction styles for the web

Interaction styles for the Web


  • User’s psychology

    • Attitude and motivation?

  • Knowledge and experience

    • Typing skills, experience of system, task and application, use of other systems, computer literacy?

  • Characteristics of the task

    • Frequency of use, training, system use, turnover rate, task importance and structure?

      Have these changed since 1989?

Version 6

Objects actions interface oai model

Objects/Actions Interface (OAI) model

  • Specify the users and set the goals

  • Task

    • Structured information objects

    • Information actions

  • Interface

    • Metaphors for information objects

    • Handles (affordances) for actions

[Source: Ben Shneiderman, 1998]

Version 6

Oai model for web design

OAI model for Web design















Version 6

Task atomic information objects

Task: atomic information objects

  • Text data

    • Name, birth date, job title, biography, resume or technical report

  • Image data:

    • Icon, corporate logo, portrait photo

  • Other types?

Version 6

Task aggregate information objects

Strategies for aggregating information:

Short unstructured lists

Linear structures

Arrays or tables

Hierarchies, trees

Multi-trees, faceted retrieval


Task: aggregate information objects

Version 6

Task atomic information actions


Looking for a name in an alphabetical list

Scanning a list of scientific article titles

Reading a paragraph

Following a reference link

Task: atomic information actions

Version 6

Task aggregate information actions

Composed of atomic actions:

Browsing an almanac table of contents, jumping to a chapter on sports and scanning for skiing topics

Locating a scientific term in an alphabetic index and reading articles containing the term

Using a keyword search in a catalog to obtain a list of candidate book titles

Following cross reference from one legal precedent to another, repeatedly, until no new relevant precedents appear

Scanning a music catalog to locate classical symphonies by eighteenth century French composers

Task: aggregate information actions

Version 6

Interface metaphors for objects

File cabinets, folders, and documents

Books with chapters

Encyclopedia with articles

Television with channels

Shopping mall with stores

Museum with exhibits

Interface: metaphors for objects

Version 6

Interface handles for actions

Allow user to:

Formulate plan based on visible action handles (e.g. labels, icons, buttons)

Decide which plans are possible and how to construct them

Carry out plan based on a series of clicks and keystrokes

Interface: handles for actions

Version 6

General principles for web pages 1

General principles for Web pages (1)

  • Compactness and branching

    • Use more links for index pages

    • Avoid excessive fragmentation

    • Reduce scrolling

  • Navigation support

    • Meaningful structures to guide users

    • Provide users with overview of the Web site

[Source: Ben Shneiderman, 1998]

Version 6

General principles for web pages 2

General principles for Web pages (2)

  • Sequencing, clustering and emphasis

    • Use sequence to guide users

    • Cluster related items to show relationships

    • Emphasise more important items

  • Support for universal access

    • Provide text-only versions and international versions

    • Provide access for handicapped users

Version 6

Web usability

Web usability

Usability describes the effectiveness, efficiency and satisfaction with which users achieve goals

Usability is very important for Web applications:

In product design and software design customers pay first and experience usability later

On the Web, users experience usability first and pay later

[Source: Nielsen, 2000]

Version 6

Web response times

Web response times

  • Less than 0.1 second,

    • Appears ‘instantaneous’

  • Between 0.1-1.0 second

    • Noticeable, but users’ thoughts are not interrupted. They feel that they are moving freely

  • Between 1.0-10 seconds

    • Noticeable, but user’s attention remains focused on the task

  • Above 10 seconds

    • Users may want to perform other tasks. Explain cause of delay

Version 6

Size limits for web pages

Size limits for Web pages


Version 6

Guidelines for page size

Guidelines for page size

  • Keep graphics to a minimum

  • Use multimedia only to enhance user’s understanding of information

  • Use style sheets to improve page design without download penalty

  • Ensure fast initial loading of the page

  • Provide alternatives for images

  • Reduce complexity by splitting information into several simple tables

Version 6

Using hyperlinks

Using hyperlinks

  • Types of links

    • Structural navigation links

    • Associative links

    • ‘See also’ links

  • Link descriptions

    • Short (2-4 words)

    • Informative

    • Supplementary text for similar links

  • Link titles

    • Name of site or subsite

    • Additional information

Version 6

Example navigation links

Example: navigation links


Version 6

Example associative links

Example: associative links


Version 6

Example descriptive links

Example: descriptive links


Version 6

Testing usability

Test in realistic settings

Early in-house testing (limited numbers)

Extensive in-house testing

Intensive field testing

Phased roll-out process

Testing usability

Version 6

Monitoring usability

Log usage

Ask for user feedback

Rate of change is guided by

User expectations

Organisational policy

Monitoring usability

Version 6



  • Describe the origins of Web

  • Apply the OAI model to Web design

  • Explain the importance of usability in Web design

  • Evaluate Web sites using suitable guidelines

    Further reading and revision:

  • Shneiderman, Chap 16, pp. 567-581

  • Nielsen (2000)

Version 6

Designing user interfaces

Version 6

Designing user interfaces

Version 6

  • Login