6/2/2015 design issues for web sites and interactive multimedia packages 1 design issues for web...

04/18/23 Design issues for web sites and interactive multimedia packages

1

Design Issues for Web sites and Interactive Multimedia Packages

Jeff James and Paula Hodgson, EDC


2

Design

functional User-interface


3

Overview Good design issues:

Student activities Interactions Communications


4

Multimedia packages / web sites

Two sides of the same coin:

Presentation Practice


5

Presentation Concept building

Visual / audio aids – graphics, videos, photos, charts, diagrams, music, animations, etc.

(The Virtual Physiology Lab)

(Fun with Architecture)

http://webct.polyu.edu.hk:8901/NHS_E/ch2.htmlhttp://www.school-for-champions.com/science/experiments/simwaveform.htm

Case / problem presentationshttp://webct.polyu.edu.hk:8901/RS245/Course_content/

flowmain.htm


6

Practice / student activities

Checking understanding; http://cw.prenhall

.com/bookbind/pubbooks/martini4/chapter8/deluxe.html

Experimenting – hypotheses, assumptions;

http://www.ipli.com/cannon.htm

Applications – scenarios (BUSS simulation)


7

Interactions

Human – computer?

Human - human interaction through computer?


8

Communications Teacher with students

Forums, emails Students with students

Forums, emails, chatrooms Students with professionals Students with the world


10

Have we considered…?

Student Presentations

Practice:

E-debate Peer review Questions folder

http://home2.dph.no/~morten/cmcped.htm


11

( pause )


12

half-way summary Paula discussed issues about

WHAT activities, presentations, and communications can be included

Jeff will discuss HOW they will be displayed


13

Interface design

Jeff James

Appearance & navigation


14

General Interface Design Issuesfor

Computer-Delivered Materials


15

Useful References

• Interface Design by Apple Computers

• Web Page Design by J.M. Duff

• The Non-Designer’s Web Book by Williams and Tollett

• Tips for Writers and Designers

( http://www.dsiegel.com/tips/ )

• Net Tips for Designers

( http://www.useit.com/alertbox/ )


16

“The same basic rules apply for:”

Web pages

CAL pages

PowerPoint presentations


17

HCI

Interface/Interaction


18

The user interfacedetermines how theprogram and the usercommunicate.


19

The user-interface design involves three participants:

The user

The computer

The designer


20

The most important rule in designing the user interface is to:

KNOW THE USER


21

Know the Userfor example (fonts):

Adults prefer serif fonts (familiar)

Adolescents like “trendy” fonts

Children feel comfortable with rounded (sans serif) fonts


22

List min. of 5 user attributes

computer access

language skills subject backgroundcomputer experience subject needs

educationcognitive abilities expectationsphysical limitations age, gender , ….


23

The computer conductsa dialogue with the user.


24

Important aspectsof the user interface:

Artistic

Eye flow

Navigation


25

Design tips:

• use visual cues. (powers of recognition > recall)

(see & point, not remember & type)


26

Design tips:

• use metaphors.

(desktop, book, monitors, slides, etc.)


27

Design tips:

• use metaphors. (desktop, book, monitors, slides, etc.)


28

Design tips:• use metaphors.

(desktop, book, monitors, slides, etc.)


29

Design tips:• be consistent.

(background, icons which are “guessable”, location, size, and design, “gray-out”, … )


30

keep the interface simple (less is more) make the interaction compelling

(exploration) make the user comfortable (+ve feedback

eg) don’t make people read (like right now!) consider audience deficiencies

Tips from The Multimedia Bible:


31

Design tips:

• give the user control.

(eg video slides and menu-selection)


32

Design tips:

• give the user control.


33

Examples of interactive styles:

• menu selection

Menu

1. North America 2. South America 3. Europe 4. Africa 5. Asia 6. Australia 7. Antarctia

Type 1, 2, 3, 4, 5, 6, or 7--->


34

menus


35

menus

(symbols vs lables)


36

other interactive styles:

question & answer, fill-in forms, command language, use of function keys, natural language, ...


37

Design tips:

• be forgiving.

Go Back

World Map


38

Screen design

The technique fordirecting the user’seyes around the screen.


39

Screen design

The most importantconsiderations are:

navigation, andaesthetics (visual appeal).


40

please study the next slide


41

play speed movie

take a quiz

more information

WWW

tutorial

SpeedInformation regarding the concept of speed can appear as text here. I know very little about it myself, so perhaps a multimedia tutorial about it would help me. To learn about it, selectoptions below, some perhaps more than once..

Choose one option below:

(note the visual hierarchy)


42

Basic rules for screen design:

use lines, boxes, and borders for organisation.


43

One source lists the 4 basicdesign principles as:

alignment proximity repetition contrast


44

information should be simple and uncluttered (at least 50% “white space”)



45

the screen should be balanced.



46


Usually, the most important information isplaced in the upper left of the screen. Why?

choose a letter:

A B

C D

continue


47


Carefully consider the font and size used for text.

Too many different fonts can be confusing.

Use different styles for emphasis (but don’t but don’t mix mix them).

Use of both upper and lower case is easier to read thanALL UPPER CASE (LESS STRESSFUL TOO).

(use few fonts & styles)


48


Web pages should have text of minimun 14-point and only one or two linked words per paragraph.

text


49

Action Learning Project

Basic rules for screen design:rendered images better quality

(which is “better”?)


50


• 25% slower to read• write 50% less (people don’t scroll)• people scan, rather than read• headings & sub-headings are important

monitor text considerations:


51

Colours

whiteon red

yellowon blue

whiteon black

blackon gray

blackon green

brownon beige


52

Colours

pastels make good backgrounds


53

Colours

colours can “make statements”(warmth, danger, evil, etc.)

adults prefer clean, medium-contrast, adolescents like black and neons,children prefer primary colours.


54

Colours(and other design tips)

see www.pixelfoundry.com


55

Colours

Use colours effectively (e.g.,maps, warnings, ...)


56

Colours

Use colours with restraint(some say max. 4 per screen)


57

Some suggest a minimalistapproach to design.


Reduces resources (time,memory, etc.


58

Don’t re-invent.


Use a graphics artist (andobserve other’s work)


59

Colours

be conservative (4 coloursper screen).


60


61


62


63


64


65

Bells & Whistles

web “candy” (can get stale) interferes with message requires more resources personal (to the designer) (sound control)


66

Designing educational software requires planning, organisation,and creativity.

However, there are a lot of standard“rules” (many common sense) thatcan be followed.

Summary


67

?

6/2/2015 design issues for web sites and interactive multimedia packages 1 design issues for web...

Documents

multimedia packages

overview good design

edc slide

world slide

designers http

presentation practice

nondesigners web book

assumptions http