School of Computer Science & Information Technology

School of Computer Science & Information Technology

G6DPMM - Lecture 9G6DPMM - Lecture 9

Media Design I – Text & ImagesMedia Design I – Text & Images

The Importance of TextThe Importance of Text Historical movement away from textHistorical movement away from text

Operating SystemsOperating Systems Hypertext / HypermediaHypertext / Hypermedia The WebThe Web PDAs & PhonesPDAs & Phones

Ease of useEase of use Open standard (mostly) – ASCII/Unicode:Open standard (mostly) – ASCII/Unicode: Easy to generate (technically)Easy to generate (technically) PortablePortable Easy to maintain / editEasy to maintain / edit Readily computer manipulableReadily computer manipulable

Near universal accessibilityNear universal accessibility

The Future of TextThe Future of Text

TechnologicallyTechnologically Other media will eventually become as easy to Other media will eventually become as easy to

manipulate as textmanipulate as text

but…but…

The written wordThe written word Important for artistic, cultural, educational reasonsImportant for artistic, cultural, educational reasons Books / Newspapers have not been replaced by TV!Books / Newspapers have not been replaced by TV!

The Consumption of InformationThe Consumption of Information The advent of “browsing” behaviourThe advent of “browsing” behaviour

Compare information consumption with pre-IT times:Compare information consumption with pre-IT times: Shorter sessionsShorter sessions More integrated into other activities.More integrated into other activities.

The changing nature of readingThe changing nature of reading The reading of non linear content is not always linearThe reading of non linear content is not always linear Some reading is not even forwards!Some reading is not even forwards! Why?Why? Design does need to reflect this widely observed “fact”Design does need to reflect this widely observed “fact”

Advertising Text & MultimediaAdvertising Text & Multimedia Many parallels between writing for advertising Many parallels between writing for advertising

and writing for multimediaand writing for multimedia ““Screen-full” of text Screen-full” of text cfcf posters posters etc.etc. Competition for readers attentionCompetition for readers attention

Ideas borrowed from advertising theoryIdeas borrowed from advertising theory GAS AnalysisGAS Analysis

GoalsGoals AudienceAudience ScopeScope

GoalsGoals Why do you want to say it?Why do you want to say it? Readers goalsReaders goals

(Why are they reading the material?)(Why are they reading the material?) Obtaining informationObtaining information EntertainmentEntertainment CommunicatingCommunicating Obtaining something physicalObtaining something physical

Writers goalsWriters goals(Why are you writing the material?)(Why are you writing the material?) Services (e.g. education)Services (e.g. education) Communicating ideas (e.g. philosophical / political / religious)Communicating ideas (e.g. philosophical / political / religious) Branding / advertisingBranding / advertising Creativity / artCreativity / art

AudienceAudience

Who do you want to say it to?Who do you want to say it to? ““Know your user”Know your user”

Stereotyping – defining the user groupStereotyping – defining the user group Cultural / socio-economic / educational etc.Cultural / socio-economic / educational etc. Technological experienceTechnological experience

Access / effective use of interface / effective extraction of knowledgeAccess / effective use of interface / effective extraction of knowledge

AdaptationAdaptation Traditional products often individually craftedTraditional products often individually crafted Less common with mass-production – including multimediaLess common with mass-production – including multimedia Adaptive and personalised systems are starting to become Adaptive and personalised systems are starting to become

feasiblefeasible

ScopeScope

What are you going to say?What are you going to say? Determine boundariesDetermine boundaries

Depth & structure of knowledgeDepth & structure of knowledge Small enough to be feasibleSmall enough to be feasible Large enough to achieve the goalsLarge enough to achieve the goals

Choosing a logicChoosing a logic Reader must appreciate the scope and content as Reader must appreciate the scope and content as

quickly as possiblequickly as possible Possible models – narrative / argument / visionPossible models – narrative / argument / vision

Text on ScreenText on Screen

Text on screen is less “readable” than text on Text on screen is less “readable” than text on paperpaper Hardware limitations – will eventually change, but Hardware limitations – will eventually change, but

not for the foreseeable future.not for the foreseeable future. Information retention / fatigue / cognitive loadInformation retention / fatigue / cognitive load

Text should thus be “scannable”Text should thus be “scannable” Quick skim-reading should give an accurate overviewQuick skim-reading should give an accurate overview Informed decisions can then be made as to whether it Informed decisions can then be made as to whether it

is worth the effort of readingis worth the effort of reading

Scannable TextScannable Text Inverse Pyramid StructureInverse Pyramid Structure

Title Title Summary Summary Overview Overview Article Article Executive Summary / Press ReleaseExecutive Summary / Press Release

Front LoadingFront Loading

Short paragraphsShort paragraphs Split up large tracts of text – more so than for printSplit up large tracts of text – more so than for print

HeadingsHeadings Use Use short short headings liberally – one per conceptheadings liberally – one per concept

Avoid superlatives and “promotional” writingAvoid superlatives and “promotional” writing Avoid superfluous descriptionAvoid superfluous description

The slide that deals with methods to facilitate rapid information extraction from text is entitled Scanable Text.

Scannable Text. This slide deals with methods to facilitate rapid information extraction from text.

Length of TextLength of Text Keep it short!Keep it short!

Readers Readers willwill not read long tracts on screen not read long tracts on screen As short as possible, but long enough to say what has to be said.As short as possible, but long enough to say what has to be said. Concise – often takes many rewrites.Concise – often takes many rewrites.

Keep length consistentKeep length consistent ““Natural” breaks may lead to wildly varying sizes of text. Natural” breaks may lead to wildly varying sizes of text. Add artificial breaks if necessary to maintain rough consistencyAdd artificial breaks if necessary to maintain rough consistency

Scrolling issuesScrolling issues Avoid scrolling if internal reference is necessary (e.g. between related Avoid scrolling if internal reference is necessary (e.g. between related

points)points) Scrolling is often essential, but very easy to overuseScrolling is often essential, but very easy to overuse

Structuring long textStructuring long text Use liberal headings & subheadingsUse liberal headings & subheadings Consider layout / numberingConsider layout / numbering Easy with material written for hypermedia, but hard with legacy materialEasy with material written for hypermedia, but hard with legacy material

Consistency of TextConsistency of Text Tone of voiceTone of voice

Formal vs. CasualFormal vs. Casual Vocabulary, idiom, slang etc.Vocabulary, idiom, slang etc. Aim for a specific effect, but don’t overdo it!Aim for a specific effect, but don’t overdo it!

Level of knowledgeLevel of knowledge Write for a specific user “model”Write for a specific user “model” Don’t patronise or confuseDon’t patronise or confuse

Grammatical ConsistencyGrammatical Consistency Be careful with pronouns (e.g. I, you, they, we)Be careful with pronouns (e.g. I, you, they, we) Especially important with instructionsEspecially important with instructions

Names in a hypertextNames in a hypertext e.g. “Home” “Start” “Introduction” “Index Page”e.g. “Home” “Start” “Introduction” “Index Page”

Capitalisation in titles and headingsCapitalisation in titles and headings

Linking From TextLinking From Text Useful techniquesUseful techniques

Gather links together in one part of the screenGather links together in one part of the screen Only suitable for a small number of linksOnly suitable for a small number of links

Link from a carefully worded part of the textLink from a carefully worded part of the text Only suitable if appropriate wording is in the textOnly suitable if appropriate wording is in the text

Include the link in bracketsInclude the link in brackets Provide instructionsProvide instructions

Patronising if instructions are obviousPatronising if instructions are obvious

Do not litter the text with links!Do not litter the text with links! Provide information about:Provide information about:

Local or remote linkLocal or remote link Size of media (i.e. subjective speed of link)Size of media (i.e. subjective speed of link) Media type (especially sound or movie)Media type (especially sound or movie) Content of link (i.e. relevanceContent of link (i.e. relevance

Vanevar Bush’s seminal article on using technology to make human knowledge more accessible is As We May Think.Vanevar Bush’s seminal article [As We May Think] on

using technology to make human knowledge more accessible was published in 1945.Vanevar Bush’s seminal article [Click Here for “As We May

Think”] on using technology to make human knowledge more accessible was published in 1945.

Readability of TextReadability of Text Screen vs PrintScreen vs Print

Reading from screen is more tiring than from paperReading from screen is more tiring than from paper Retention is lowerRetention is lower Consider if text on screen is appropriateConsider if text on screen is appropriate Guidelines for readability are different!Guidelines for readability are different!

Legibility of fontsLegibility of fonts Choose an appropriate font for the sizeChoose an appropriate font for the size Generally – san-serif for titles & serif for body textGenerally – san-serif for titles & serif for body text Do not gratuitously mix fontsDo not gratuitously mix fonts Use fairly large fonts on screen (typically 12-18pt)Use fairly large fonts on screen (typically 12-18pt)

Other legibility issuesOther legibility issues Use white-spaceUse white-space Left align with ragged right marginLeft align with ragged right margin High colour contrast between text and backgroundHigh colour contrast between text and background Generally use dark text on a light backgroundGenerally use dark text on a light background

FontsFonts

Serif fontsSerif fontse.g. Times Roman – use for main bodies of texte.g. Times Roman – use for main bodies of text

SanserifSanserife.g. Helvetica / Arial – use for titlese.g. Helvetica / Arial – use for titles

MonospacedMonospacede.g. Courier / Typewriter – use as necessary e.g. Courier / Typewriter – use as necessary (e.g. tables of data / code listings etc.)(e.g. tables of data / code listings etc.)

DecorativeDecorativeUse with extreme caution for effectUse with extreme caution for effect

Highlighting TextHighlighting Text

Highlighted TextHighlighted Text Bold, coloured or a different fontBold, coloured or a different font Can be very effectiveCan be very effective Use extremely sparinglyUse extremely sparingly Never EVER use blinking text!Never EVER use blinking text!

DisabledDisabled If text is inappropriate (e.g. a disabled link) “grey” itIf text is inappropriate (e.g. a disabled link) “grey” it Reduce contrast so that it is deliberately less legibleReduce contrast so that it is deliberately less legible

SelectedSelected If a part of text is especially active (e.g. one of a If a part of text is especially active (e.g. one of a

series of options selected), dynamically highlight it.series of options selected), dynamically highlight it.

Screen PositioningScreen Positioning

Hierarchy (i.e. importance) is implied by the Hierarchy (i.e. importance) is implied by the position on the page.position on the page.

Top is intuitively more important than bottomTop is intuitively more important than bottom Western text is read:Western text is read:

Left to rightLeft to right Top to bottomTop to bottom

Hence the assumption of importanceHence the assumption of importance NB language dependenceNB language dependence

Screen PositioningScreen Positioning

Hierarchy (i.e. importance) is implied by the Hierarchy (i.e. importance) is implied by the position on the page.position on the page.

Top is intuitively more important than bottomTop is intuitively more important than bottom Western text is read:Western text is read:

Left to rightLeft to right Top to bottomTop to bottom

Hence the assumption of importanceHence the assumption of importance NB Language dependenceNB Language dependence

1 2

3 4

Most Important

Least Important

Layout GridsLayout Grids

Users “move” through the systemUsers “move” through the system Sequnce of screensSequnce of screens

Components should not seem to “move” aroundComponents should not seem to “move” around Most important with interactive elements Most important with interactive elements

(e.g. navigation buttons)(e.g. navigation buttons) Standard “Layout Grid” assigning areas of screen to Standard “Layout Grid” assigning areas of screen to

specific functionality can be usefulspecific functionality can be useful

Sometimes there is conflict between the layout Sometimes there is conflict between the layout grid and functional (or aesthetic) designgrid and functional (or aesthetic) design Lesser of evils!Lesser of evils!

Text & GraphicsText & Graphics Pictures are a powerful cognitive aidPictures are a powerful cognitive aid Ideally pictures and text support and compliment each otherIdeally pictures and text support and compliment each other

Pictures may illustrate the textPictures may illustrate the text Text may explain pictures (e.g. labels or captions)Text may explain pictures (e.g. labels or captions)

Remember the “cost” of imagesRemember the “cost” of images Cognitive overheadCognitive overhead Data budgetData budget Hard cash! (i.e. copyright fees)Hard cash! (i.e. copyright fees)

Images must be appropriateImages must be appropriate They should be a part of the messageThey should be a part of the message They should be high enough quality to do their jobThey should be high enough quality to do their job Avoid cognitive overload (easy with too many images) Avoid cognitive overload (easy with too many images)

– “busy” interface.– “busy” interface.

Images as Symbols - IconsImages as Symbols - Icons Images can sometimes be used in place of text – iconsImages can sometimes be used in place of text – icons Visual symbol of underlying abstracted features – they Visual symbol of underlying abstracted features – they

represent meaningrepresent meaning AdvantagesAdvantages

Fast to selectFast to select Often most effective as a supplement to text rather than a replacementOften most effective as a supplement to text rather than a replacement Language independentLanguage independent

DisadvantagesDisadvantages Usually very expensiveUsually very expensive

Quality artwork is always expensiveQuality artwork is always expensive Many images are required (e.g. different sizes and states)Many images are required (e.g. different sizes and states) Cheap clip-art icons are usually low quality and always clichéd. Cheap clip-art icons are usually low quality and always clichéd.

Contextual and cultural issuesContextual and cultural issues

Designing IconsDesigning Icons Abstraction and VisualisationAbstraction and Visualisation

What is the essence of the concept?What is the essence of the concept? How can this be represented visually?How can this be represented visually?

Physical objects are generally easyPhysical objects are generally easy e.g. cat, aeroplane, telephonee.g. cat, aeroplane, telephone

Invisible / intangible items are harderInvisible / intangible items are harder e.g. air, alcohole.g. air, alcohol

Abstract concepts can be very hardAbstract concepts can be very hard e.g. search, save, weighte.g. search, save, weight

Sometimes, but not always, conventions are availableSometimes, but not always, conventions are available Icons should be intuitiveIcons should be intuitive

Designing Icons (cont.)Designing Icons (cont.) Anachronistic symbolsAnachronistic symbols

Modern devices/artefacts are often not easily distinguishable Modern devices/artefacts are often not easily distinguishable Obsolete versions are often instantly recognisableObsolete versions are often instantly recognisable

e.g. bellows cameras, steam trains etc.e.g. bellows cameras, steam trains etc.

Familiar symbols in a foreign contextFamiliar symbols in a foreign context Roadsigns are a common exampleRoadsigns are a common example

Powerful images make good iconsPowerful images make good icons Elemental images – e.g. fire, water, sun, moon etc.Elemental images – e.g. fire, water, sun, moon etc. Human figures – e.g. people, heads, hands, babies etc.Human figures – e.g. people, heads, hands, babies etc.

ArrowsArrows Extremely powerful – usually they are the strongest “cognitive Extremely powerful – usually they are the strongest “cognitive

draw” on screen.draw” on screen. Handle with care!Handle with care!

Icon SetsIcon Sets Icons should not be designed in isolationIcons should not be designed in isolation

Icon setsIcon sets Consistent in terms of:Consistent in terms of:

ColourColour StyleStyle WeightWeight MetaphorMetaphor

Commercial icon sets are availableCommercial icon sets are available Fairly cheap (typically hundreds of pounds)Fairly cheap (typically hundreds of pounds) Risk of cliché Risk of cliché

Avoid free icon setsAvoid free icon sets Rarely of high quality or consistencyRarely of high quality or consistency If they are, then cliché is inevitableIf they are, then cliché is inevitable