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
04/18/23 Design issues for web sites and interactive multimedia packages
2
Design
functional User-interface
04/18/23 Design issues for web sites and interactive multimedia packages
3
Overview Good design issues:
Student activities Interactions Communications
04/18/23 Design issues for web sites and interactive multimedia packages
4
Multimedia packages / web sites
Two sides of the same coin:
Presentation Practice
04/18/23 Design issues for web sites and interactive multimedia packages
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
04/18/23 Design issues for web sites and interactive multimedia packages
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)
04/18/23 Design issues for web sites and interactive multimedia packages
7
Interactions
Human – computer?
Human - human interaction through computer?
04/18/23 Design issues for web sites and interactive multimedia packages
8
Communications Teacher with students
Forums, emails Students with students
Forums, emails, chatrooms Students with professionals Students with the world
04/18/23 Design issues for web sites and interactive multimedia packages
10
Have we considered…?
Student Presentations
Practice:
E-debate Peer review Questions folder
http://home2.dph.no/~morten/cmcped.htm
04/18/23 Design issues for web sites and interactive multimedia packages
12
half-way summary Paula discussed issues about
WHAT activities, presentations, and communications can be included
Jeff will discuss HOW they will be displayed
04/18/23 Design issues for web sites and interactive multimedia packages
13
Interface design
Jeff James
Appearance & navigation
04/18/23 Design issues for web sites and interactive multimedia packages
14
General Interface Design Issuesfor
Computer-Delivered Materials
04/18/23 Design issues for web sites and interactive multimedia packages
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/ )
04/18/23 Design issues for web sites and interactive multimedia packages
16
“The same basic rules apply for:”
Web pages
CAL pages
PowerPoint presentations
04/18/23 Design issues for web sites and interactive multimedia packages
17
HCI
Interface/Interaction
04/18/23 Design issues for web sites and interactive multimedia packages
18
The user interfacedetermines how theprogram and the usercommunicate.
04/18/23 Design issues for web sites and interactive multimedia packages
19
The user-interface design involves three participants:
The user
The computer
The designer
04/18/23 Design issues for web sites and interactive multimedia packages
20
The most important rule in designing the user interface is to:
KNOW THE USER
04/18/23 Design issues for web sites and interactive multimedia packages
21
Know the Userfor example (fonts):
Adults prefer serif fonts (familiar)
Adolescents like “trendy” fonts
Children feel comfortable with rounded (sans serif) fonts
04/18/23 Design issues for web sites and interactive multimedia packages
22
List min. of 5 user attributes
computer access
language skills subject backgroundcomputer experience subject needs
educationcognitive abilities expectationsphysical limitations age, gender , ….
04/18/23 Design issues for web sites and interactive multimedia packages
23
The computer conductsa dialogue with the user.
04/18/23 Design issues for web sites and interactive multimedia packages
24
Important aspectsof the user interface:
Artistic
Eye flow
Navigation
04/18/23 Design issues for web sites and interactive multimedia packages
25
Design tips:
• use visual cues. (powers of recognition > recall)
(see & point, not remember & type)
04/18/23 Design issues for web sites and interactive multimedia packages
26
Design tips:
• use metaphors.
(desktop, book, monitors, slides, etc.)
04/18/23 Design issues for web sites and interactive multimedia packages
27
Design tips:
• use metaphors. (desktop, book, monitors, slides, etc.)
04/18/23 Design issues for web sites and interactive multimedia packages
28
Design tips:• use metaphors.
(desktop, book, monitors, slides, etc.)
04/18/23 Design issues for web sites and interactive multimedia packages
29
Design tips:• be consistent.
(background, icons which are “guessable”, location, size, and design, “gray-out”, … )
04/18/23 Design issues for web sites and interactive multimedia packages
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:
04/18/23 Design issues for web sites and interactive multimedia packages
31
Design tips:
• give the user control.
(eg video slides and menu-selection)
04/18/23 Design issues for web sites and interactive multimedia packages
32
Design tips:
• give the user control.
04/18/23 Design issues for web sites and interactive multimedia packages
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--->
04/18/23 Design issues for web sites and interactive multimedia packages
35
menus
(symbols vs lables)
04/18/23 Design issues for web sites and interactive multimedia packages
36
other interactive styles:
question & answer, fill-in forms, command language, use of function keys, natural language, ...
04/18/23 Design issues for web sites and interactive multimedia packages
37
Design tips:
• be forgiving.
Go Back
World Map
04/18/23 Design issues for web sites and interactive multimedia packages
38
Screen design
The technique fordirecting the user’seyes around the screen.
04/18/23 Design issues for web sites and interactive multimedia packages
39
Screen design
The most importantconsiderations are:
navigation, andaesthetics (visual appeal).
04/18/23 Design issues for web sites and interactive multimedia packages
40
please study the next slide
04/18/23 Design issues for web sites and interactive multimedia packages
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)
04/18/23 Design issues for web sites and interactive multimedia packages
42
Basic rules for screen design:
use lines, boxes, and borders for organisation.
04/18/23 Design issues for web sites and interactive multimedia packages
43
One source lists the 4 basicdesign principles as:
alignment proximity repetition contrast
04/18/23 Design issues for web sites and interactive multimedia packages
44
information should be simple and uncluttered (at least 50% “white space”)
Basic rules for screen design:
04/18/23 Design issues for web sites and interactive multimedia packages
45
the screen should be balanced.
Basic rules for screen design:
04/18/23 Design issues for web sites and interactive multimedia packages
46
Basic rules for screen design:
Usually, the most important information isplaced in the upper left of the screen. Why?
choose a letter:
A B
C D
continue
04/18/23 Design issues for web sites and interactive multimedia packages
47
Basic rules for screen design:
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)
04/18/23 Design issues for web sites and interactive multimedia packages
48
Basic rules for screen design:
Web pages should have text of minimun 14-point and only one or two linked words per paragraph.
text
04/18/23 Design issues for web sites and interactive multimedia packages
49
Action Learning Project
Basic rules for screen design:rendered images better quality
(which is “better”?)
04/18/23 Design issues for web sites and interactive multimedia packages
50
Basic rules for screen design:
• 25% slower to read• write 50% less (people don’t scroll)• people scan, rather than read• headings & sub-headings are important
monitor text considerations:
04/18/23 Design issues for web sites and interactive multimedia packages
51
Colours
whiteon red
yellowon blue
whiteon black
blackon gray
blackon green
brownon beige
04/18/23 Design issues for web sites and interactive multimedia packages
52
Colours
pastels make good backgrounds
04/18/23 Design issues for web sites and interactive multimedia packages
53
Colours
colours can “make statements”(warmth, danger, evil, etc.)
adults prefer clean, medium-contrast, adolescents like black and neons,children prefer primary colours.
04/18/23 Design issues for web sites and interactive multimedia packages
54
Colours(and other design tips)
see www.pixelfoundry.com
04/18/23 Design issues for web sites and interactive multimedia packages
55
Colours
Use colours effectively (e.g.,maps, warnings, ...)
04/18/23 Design issues for web sites and interactive multimedia packages
56
Colours
Use colours with restraint(some say max. 4 per screen)
04/18/23 Design issues for web sites and interactive multimedia packages
57
Some suggest a minimalistapproach to design.
Basic rules for screen design:
Reduces resources (time,memory, etc.
04/18/23 Design issues for web sites and interactive multimedia packages
58
Don’t re-invent.
Basic rules for screen design:
Use a graphics artist (andobserve other’s work)
04/18/23 Design issues for web sites and interactive multimedia packages
59
Colours
be conservative (4 coloursper screen).
04/18/23 Design issues for web sites and interactive multimedia packages
65
Bells & Whistles
web “candy” (can get stale) interferes with message requires more resources personal (to the designer) (sound control)
04/18/23 Design issues for web sites and interactive multimedia packages
66
Designing educational software requires planning, organisation,and creativity.
However, there are a lot of standard“rules” (many common sense) thatcan be followed.
Summary