form vs. function sistemes multimèdia/hipermèdia universitat pompeu fabra enric guaus i termens...

Form vs. Function

Sistemes Multimèdia/Hipermèdia

Universitat Pompeu Fabra

Enric Guaus i Termens

Music Technology Group

Universitat Pompeu Fabra

[email protected]

mailto:[email protected]

Sistemes Multimèdia/Hipermèdia - Universitat Pompeu Fabra 2

Index

• Usability– Why Usability?– Usability Basics– How to use Usability– Definition

• Hypertext and HyperMedia– Definition– Golden Rules– Typical errors– When creating an hypertext document– Hypertext Structure

• Examples– A good site structure– A not so good site structure

Usability


Why Usability?

• Costs Savings- Example

• Insurance Company: redisigning its application forms

• Boeing 757: allows operation by two instead of three pilots

• User Interfaces – European Union Directive (1992)

• Software must be suitable for the task

• Software must be easy to use

• The principles of software ergonomics must be applied


Usability Basics

• Understanding users and their tasks– You are not alone in the world!– Things must be engineered for intelligent people thinking on

silly people

• User is always right– "Read the instructions carefully!“– The design allows feedback

• User is not always right– Sometimes, they don't know what is useful for them


Usability Basics (2)

• Users are not designers & Designers are not users– Let everybody perform his task– Example: Short cuts definition

• The boss is not a user– Only the authentic final user knows the real requirements

• Less is more– A large options list: the user gets lost!

• Details are important• On-line Help: really useful?• Usability engineering is Process


How to Use Usability?

• Recognize the use of usability in your organization• Usability needs management support• Start with very specific applications• Integrate usability engineering into all the activities

progressively• Make sure that all the usability engineering is

subjected to user testing


Definition (Nielsen)

• Usability "User Friendly“• Usability is NOT a single, one dimensional property of

a user interface• Usability has multiple components and is associated

with five usability attributes:– Learnability– Efficiency– Memorability– Errors– Satisfaction


Learnability

• The most fundamental usability attribute• Most applicacions start out with the user being able to

do nothing• Exceptions: walk-up-and-use systems• Measuring Learnability

– We must measure the time spent for the users for learning the system in a sufficient level of proficiency to do useful work


Efficiency

• For expert users• When they know how the system works: How

efficient is their job?• Measuring Efficiency

– We can measure the time that a expert user takes to perform a typical task


Memorability

• Causal Users– Third major category of users

• They know the basics of our system• The interface must be easy to remember


Errors

• Definition– Action that does not accomplish the desired goal

• Measuring Errors– Counting the number of such actions made by users while

performing a specified task

• Errors are produced by – Users– Bad design


Satisfaction

• How pleasant it is to use the system– Important in a nonwork entertainment environment

• Measuring Satisfaction– Subjective measuring– Psyhophysiological measures


Which is the best combination?

• Depends on each specific application• Learnibility for new users vs Efficiency for expert users

Hypertext and Hypermedia


Definition (Shneiderman):

• Networks of nodes containing information that are connected by links– Nodes

• articles, document files, cards, pafes, frames, screens

– Information• Text, graphics, codeo, sound

– Links• pointers, references, cites


Definition (2)

• Hypertext– Applied to text-only applications

• Hypermedia– Inclusion of other media information (video, sound)

• Danger!– Hypertext can become an hyperchaos


Golden Rules (Shneiderman)

• There is a large body of information organized into numerous fragments

• The fragments relate to one another• The user needs only a small fraction of the fragments

at any time


Typical errors

• Too many links• Too long articles• Inadequate tables of contents


When creating an hypertext document

• Know the users and their tasks• Let them test your designs• You are not a good judge of your design• Ensure that meaningful structure comes first• Build the project arround the information, not the technology• Apply diverse skills• Make certain that the project team includes

– Information specialists (graphic arts)– Content specialists (users)– Technologists (programmers)

• Respect chunking– Organize information into chunks that deal with one topic– About 1000 words


When creating an hypertext document (2)

• Show interrelationships– Too few links bore readers– Too many links distract readers

• Ensure simplicity in transversal– link structure must allow a simple but consistent navigation

• Design each screen carefully– Clearity– Avoid Scrolling– Meaningfull headers

• Require low cognitive load– Do not require the user tot memorize terms or codes– Let the user conentrate on the contents


Hipertext structure

• Executive overview– Home Page or Introductory article

• Top-down– The links in the home page are to main topics only

• Menu– Organize the home page as a detailed table of contents

• Search strategy– String search easily available

Examples


A Good Site Structure

• History of 3rd. Generation Sites– 1rst. Generation sites

• Designed for text terminals• Text based information• Organization

– Some data-stream separators– Some links to other texts

– 2nd. Generation sites• Similar structure• Icons replacing words• Some images and backgrounds

– 3rd. generation Sites• Created from a designed point of view• Designed under the models of consumer psychology


A Good Site Structure (2)• 3rd. Generation sites structure

– Entry• Tells the visitor where he is• No commercial interests

– Fish Food• Basket of goodies to attract visitors• This is not the purpose of the site

– Entry Tunnels• Guided tour

– The Core Page• Information itself• Create a community

– Exit• A well marked exit button suggest

visitors not to leave this site


A not so good Site Structure

– About the structure• Non well-organized information• Exess of links• Pop-up windows• Front doors• Frames• Surveys• Scroll

– About the page• Backgrounds• Music• Links• Outlet information• Others

form vs. function sistemes multimèdia/hipermèdia universitat pompeu fabra enric guaus i termens...

Documents

usability slide

use of usability

usability engineering

user interface usability

usability attributes

fundamental usability

organization usability

usability definition