1. 6/2/2015 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. 6/2/2015 Design issues for web sites and interactive multimedia packages 2 Design  functional  User-interface

3. 6/2/2015 Design issues for web sites and interactive multimedia packages 3 Overview  Good design issues: Student activities Interactions Communications

4. 6/2/2015 Design issues for web sites and interactive multimedia packages 4 Multimedia packages / web sites Two sides of the same coin: Presentation Practice

5. 6/2/2015 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.html http://www.school-for- champions.com/science/experiments/simwaveform.htm  Case / problem presentations http://webct.polyu.edu.hk:8901/RS245/Course_content/flo wmain.htm

6. 6/2/2015 Design issues for web sites and interactive multimedia packages 6 Practice / student activities  Checking understanding; http://cw.prenhall.com/bookbind/pubbooks/martini4/chapter8/delu xe.html http://cw.prenhall.com/bookbind/pubbooks/martini4/chapter8/delu xe.html  Experimenting – hypotheses, assumptions; http://www.ipli.com/cannon.htm  Applications – scenarios (BUSS simulation)

7. 6/2/2015 Design issues for web sites and interactive multimedia packages 7 Interactions  Human – computer?  Human - human interaction through computer?

8. 6/2/2015 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

9. 6/2/2015 Design issues for web sites and interactive multimedia packages 9

10. 6/2/2015 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

11. 6/2/2015 Design issues for web sites and interactive multimedia packages 11 ( pause )

12. 6/2/2015 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

13. 6/2/2015 Design issues for web sites and interactive multimedia packages 13 Interface design  Jeff James Appearance & navigation

14. 6/2/2015 Design issues for web sites and interactive multimedia packages 14 General Interface Design Issues for Computer-Delivered Materials

15. 6/2/2015 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/ )http://www.dsiegel.com/tips/ Net Tips for Designers ( http://www.useit.com/alertbox/ )http://www.useit.com/alertbox/

16. 6/2/2015 Design issues for web sites and interactive multimedia packages 16 “The same basic rules apply for:” Web pages CAL pages PowerPoint presentations

17. 6/2/2015 Design issues for web sites and interactive multimedia packages 17 HCI Interface/Interaction

18. 6/2/2015 Design issues for web sites and interactive multimedia packages 18 The user interface determines how the program and the user communicate.

19. 6/2/2015 Design issues for web sites and interactive multimedia packages 19 The user-interface design involves three participants: The user The computer The designer

20. 6/2/2015 Design issues for web sites and interactive multimedia packages 20 The most important rule in designing the user interface is to: KNOW THE USER

21. 6/2/2015 Design issues for web sites and interactive multimedia packages 21 Know the User for example (fonts): Adults prefer serif fonts (familiar) Adolescents like “trendy” fonts Children feel comfortable with rounded (sans serif) fonts

22. 6/2/2015 Design issues for web sites and interactive multimedia packages 22 List min. of 5 user attributes computer access language skillssubject background computer experiencesubject needs education cognitive abilitiesexpectations physical limitationsage, gender, ….

23. 6/2/2015 Design issues for web sites and interactive multimedia packages 23 The computer conducts a dialogue with the user.

24. 6/2/2015 Design issues for web sites and interactive multimedia packages 24 Important aspects of the user interface: Artistic Eye flow Navigation

25. 6/2/2015 Design issues for web sites and interactive multimedia packages 25 Design tips: use visual cues. (powers of recognition > recall) (see & point, not remember & type)

26. 6/2/2015 Design issues for web sites and interactive multimedia packages 26 Design tips: use metaphors. (desktop, book, monitors, slides, etc.)

27. 6/2/2015 Design issues for web sites and interactive multimedia packages 27 Design tips: use metaphors. (desktop, book, monitors, slides, etc.)

28. 6/2/2015 Design issues for web sites and interactive multimedia packages 28 Design tips: use metaphors. (desktop, book, monitors, slides, etc.)

29. 6/2/2015 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”, … )

30. 6/2/2015 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:

31. 6/2/2015 Design issues for web sites and interactive multimedia packages 31 Design tips: give the user control. (eg video slides and menu-selection)

32. 6/2/2015 Design issues for web sites and interactive multimedia packages 32 Design tips: give the user control.

33. 6/2/2015 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--->

34. 6/2/2015 Design issues for web sites and interactive multimedia packages 34 menus

35. 6/2/2015 Design issues for web sites and interactive multimedia packages 35 menus (symbols vs lables)

36. 6/2/2015 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,...

37. 6/2/2015 Design issues for web sites and interactive multimedia packages 37 Design tips: be forgiving. Go Back World Map

38. 6/2/2015 Design issues for web sites and interactive multimedia packages 38 Screen design The technique for directing the user’s eyes around the screen.

39. 6/2/2015 Design issues for web sites and interactive multimedia packages 39 Screen design The most important considerations are: navigation, and aesthetics (visual appeal).

40. 6/2/2015 Design issues for web sites and interactive multimedia packages 40 please study the next slide

41. 6/2/2015 Design issues for web sites and interactive multimedia packages 41 play speed movie take a quiz more information WWW tutorial Speed Information 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, select options below, some perhaps more than once.. Choose one option below: (note the visual hierarchy)

42. 6/2/2015 Design issues for web sites and interactive multimedia packages 42 Basic rules for screen design: use lines, boxes, and borders for organisation.

43. 6/2/2015 Design issues for web sites and interactive multimedia packages 43 One source lists the 4 basic design principles as:  alignment  proximity  repetition  contrast

44. 6/2/2015 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:

45. 6/2/2015 Design issues for web sites and interactive multimedia packages 45 the screen should be balanced. Basic rules for screen design:

46. 6/2/2015 Design issues for web sites and interactive multimedia packages 46 Basic rules for screen design: Usually, the most important information is placed in the upper left of the screen. Why? choose a letter: AB C D continue

47. 6/2/2015 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. but don’t mix Use different styles for emphasis (but don’t mix them ). Use of both upper and lower case is easier to read than ALL UPPER CASE (LESS STRESSFUL TOO). (use few fonts & styles)

48. 6/2/2015 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

49. 6/2/2015 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”?)

50. 6/2/2015 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:

51. 6/2/2015 Design issues for web sites and interactive multimedia packages 51 Colours white on red yellow on blue white on black black on gray black on green brown on beige

52. 6/2/2015 Design issues for web sites and interactive multimedia packages 52 Colours pastels make good backgrounds

53. 6/2/2015 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.

54. 6/2/2015 Design issues for web sites and interactive multimedia packages 54 Colours (and other design tips) see www.pixelfoundry.comwww.pixelfoundry.com

55. 6/2/2015 Design issues for web sites and interactive multimedia packages 55 Colours Use colours effectively (e.g., maps, warnings,...)

56. 6/2/2015 Design issues for web sites and interactive multimedia packages 56 Colours Use colours with restraint (some say max. 4 per screen)

57. 6/2/2015 Design issues for web sites and interactive multimedia packages 57 Some suggest a minimalist approach to design. Basic rules for screen design: Reduces resources (time, memory, etc.

58. 6/2/2015 Design issues for web sites and interactive multimedia packages 58 Don’t re-invent. Basic rules for screen design: Use a graphics artist (and observe other’s work)

59. 6/2/2015 Design issues for web sites and interactive multimedia packages 59 Colours be conservative (4 colours per screen).

60. 6/2/2015 Design issues for web sites and interactive multimedia packages 60

61. 6/2/2015 Design issues for web sites and interactive multimedia packages 61

62. 6/2/2015 Design issues for web sites and interactive multimedia packages 62

63. 6/2/2015 Design issues for web sites and interactive multimedia packages 63

64. 6/2/2015 Design issues for web sites and interactive multimedia packages 64

65. 6/2/2015 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)

66. 6/2/2015 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) that can be followed. Summary

67. 6/2/2015 Design issues for web sites and interactive multimedia packages 67 ?