1. Digital Media Dr. Jim Rowan ITEC 2110 Design Principles

2. Roll call Sanchez-Casas, Jon F. Simson, Davis Sinnock, Grant A. Swaim, Mark S. Tran, Dung Q. Vyas, Anand A. Woldeyohannes, Tesfamichael Barton, Paul H. Bois, Lauren C. Bonds, Allison E. Duncan, Jarred T. Lawson, Joseph I. Mulongo, Julio B. Pennison, Heather L. Reilly, Daniel J.

3. Roll call Jones, Crystal L. Marsh, Kerreen A. Thompson, Daniel G. Tran, Christopher V.

4. Hypermedia Structure Website can be a collection of web pages with the same domain name Website can be a collection of web pages that have a common theme Home page is usually the page you arrive at by entering the domain name alone –www.ggc.usg.edu Home page can be a file named index.html Home page can be php or activate a cgi script

5. Organization: Fully Interconnected Small sites might be fully interconnected –every page can get to every other page directly –you just navigate page to page –only works if there are a few pages

6. Organization: Hierarchical Larger sites might be broken down into a hierarchical structure –the domain is broken into categories and those categories may be broken into sub-categories –here you navigate up and down the hierarchy –you may have embedded links to the other categories allowing navigation cross-category –may have some kind of navigation bar to help you figure out where you are in the structure –there may be a ‘trail of breadcrums” to help you understand where you are

7. Organization: Sequential Small sites (or sub-sites) might best be in sequential order Examples: –artist with a small number of works –online registration –order process site

8. Organization: Hybrid Sites that possess a combination of the previously mentioned site organizations –hierarchical organization –with sub-sites that can be hierarchical fully connected sequentially linked

9. Additional Navigation Site visitors do not always arrive at the home page –may want to supply additional navigation buttons if it is a sequence –next and previous button might be in order –some indication of where they are in the sequence might be in order if it is hierarchical –a home page button would help –links to other sub-categories might help

10. Additional Navigation Provide a link the site map –a hierarchical map of the sites page titles –looks like a tree root system or an outline –http://www.gatech.edu/sitemap/ Provide a means to search the site for relevant information

11. Static vs Dynamic Pages Traditional websites are static –the home page is an index.html file More recently sites are becoming dynamic –the webpage is generated programmatically –from a database –possibly using cgi script or php from data entered by the user effectively providing an infinitely large website –think about google, ebay, amazon

12. Coping with growth Notice that the design suggestions are based on what size the site currently What happens if you start a site and then it grows... what then? –migration from one scheme to another is difficult –should you do a cut-over or gradually change? –how do you keep from upsetting your current users? –do you design to please your current traffic or do you change to attract new traffic?

13. Knowing your traffic How would you know if your site organization was useful? Do you rely on the hit rate? Do you collect user traffic to try to follow a user through their use of your site? How would you collect user traffic? –login? –keep up with their ip? –what happens when they go off-site and then come back?

14. Web Design Issues It takes time to load stuff over the web –Slow machines and slow connections will negatively affect the users perception –Example: Flash looks good on a webpage but causes a longer load... people are impatient Any machine on the web can look at your site... how do you guarantee that it looks good on their machine? You don’t know who’s looking at you –you can’t provide appropriate context to help the user understand what is being seen

15. Web Design Issues Don’t know the user’s connection speed Don’t know the user’s machine –Download time can vary by a factor of 40 –Graphics are important but they take time Don’t know the user’s monitor –Desktop –Laptop –Cell phone How do you guarantee that your stuff looks good on their stuff? –short answer... you can’t –longer answer... you can’t but you can do some things to mitigate the problems

16. Control was shifted from Designer to User HTML allows text to reflow to better match the screen size Page elements are not positioned absolutely, they are allowed to flow following certain rules Fonts are not expressed absolutely Font sizes are expressed relative to some base size

17. An example: Using Flash large so they affect load time fixed size so they may require user scrolling complex animations may not play smoothly if the machine is older fonts are embedded so you don’t have any concern about font substitution object layout is fixed always played by the same browser plug-in so incompatibility is not a problem –this is a lie... the plug in IS different a different plug-in for windows, mac and unix

18. Accessibility Prior to the internet, the blind population was the largest consumer of on-line communication Internet didn’t make their lives easier... it made it harder... why? –The internet is overwhelmingly a VISUAL medium

19. Accessibility Mitigation With img tag use alt tag With area (creates hot spot) tag use an alt tag With a quicktime movie use a synchronized voice over or synchronized textual description Use a screen reader –speaks the text on the page –speaks the alt tags –provides auditory clues to hyper links Screen reader problems –screen reader must be aware of the various organizational schemes used on webpages... –two columns may be read across as if on on one line

20. Accessibility Mitigation Make links meaningful... –if you were a screen reader which would be better? click here to download demo

21. Useability Interface design has moved from being considered cosmetic to being a driving force in software design... This change came about with the transition from command driven interfaces to GUI

22. Command driven computer interface

23. GUI –Alan Kay

24. GUI –Alan Kay XEROX PARC 1970’s

25. GUI –Alan Kay XEROX PARC 1970’s –Steven Jobs Macintosh 1984

26. HCI Multi-disciplinary pursuit –sociology –cognitive psychology –computer science –engineering Early start was with webpage useability – in many ways paralleled early industrial engineering work –Jakob Nielsen did some of the earliest work

27. Web design guidelines Put the user first... but who is your user? Put the user in control Don’t provide too much choice... confusion will result Don’t make assumptions about the user... don’t assume where they will enter your site Apply new technology judiciously but keep up with change... a delicate balance Don’t neglect aesthetics... visual presentation has a powerful affect on meaning

28. In the end... Design is a balancing act Adopt new stuff too early, users turn away Adopt new stuff too late, users are bored

29. Questions?