Teaching a New Web User Interface Design Course to Computer Science - Web Technology Undergraduates Leong Lee, Ph.D. Assistant Professor, Dept. of Computer Science Austin Peay State University, Tennessee, USA

Introduction Background – APSU Computer Science Motivation “The End in Mind” Course Design Outcome Challenges 2

Background – APSU Computer Science The Department of Computer Science & IT offers a Bachelor of Science degree with a major in Computer Science and Information Systems (CS&IS) Four areas of study or concentrations: – Computer Science – Information Systems Concentration – Internet and Web Technology – Database Administration There are currently about 400 CS&IS majors Around 30 to 40 graduates each year 3

Background – APSU Computer Science Four minors: – Computer Science – Computer Networking – Mobile Software Technology – Web Technology To graduate, a CS&IS major student needs to choose/satisfy – a concentration – a minor (or second concentration) After graduation, most CS&IS graduates would seek employment 4

Motivation - Questions Two computer science (Internet and Web Technology concentration) graduate A & B, will graduate in May next year (not 1965) Both can write good programs, same GPA A’s user interfaces are pleasant, professional, and follow basic design principles; A is also experienced in the latest web interface programming tools B’s user interfaces are ugly, something is just not right; B has no web interface design / programming experience If you are an employer looking for a software developer (only one), which one will you employ (in today’s economy with a tight budget)? Why? 5

Motivation CSCI 4940 Internship in Info. Technology Database Administration and Internet and Web Technology concentration students are given internship opportunities Potential employers (who have taken in our interns) expressed interests in having students with more interface design skills (nicer websites?) Technology trend: HTML 5 – HTML 5 is just the markup – Use CSS to create the visual look and feel – Separate content from presentation (keep 99% of the design in CSS) Result? Let’s design a Web User Interface Design Course 6

Motivation CSCI 4940 Internship in Info. Technology Database Administration and Internet and Web Technology concentration students are given internship opportunities Potential employers (who took our interns) expressed interests in having students with more interface design skills (nicer websites?) Technology trend: HTML 5 – HTML 5 is just the markup – Use CSS to create the visual look and feel – Separate content from presentation (keep 99% of the design in CSS) Result? Let’s design a Web User Interface Design Course 7

I am not a born programmer / designer :P I am not good at Math (born?) :P Basic web design principles are easy (1 course), and they can be incorporated into programming codes (it will be fun) CS students can be trained in basic design skills, like they can be trained in programming skills Examples? 8

Functional site following 4 basic design principles (AmphibAnat.org, 2007 to 2010) NSF funded ($1,116K) Web interface design: (different design templates) Client-side programming: JavaScript, CSS, html Server-side programming: C#.net Relational database design/admin: Microsoft SQL Server Server setup/admin: Microsoft IIS web server and Microsoft Windows server 9

“The End in Mind” 10

“The End in Mind” Upon completion of this course students should be able to – demonstrate the understanding of web site planning by producing a real-life web application design and development project (static site) – … others A “good” web design – aesthetically appealing with engaging presentation layouts and attractive graphics It fits nicely with our existing courses – CSCI 3300 Introduction to Web Development (client side) – CSCI 3350 Web User Interface Design (aesthetics) – CSCI 4000 Advanced Web Development (server side) – … others, database, server etc 11

Course Design - Teaching Methodology 12 Design Principles web design space design Technical programming tools Web Site Planning project process Students

Course Design – Design Principles 13 Web Site Planning project process Students 4 basic web design principles – alignment, proximity, contrast and repetition – Assignment 1- ideation sketchbook Visual space design principles – scale, stability, dynamics, contrast, asymmetric – Assignment 2 - ideation sketchbook Textbooks (1 & 2) – The Principles of Beautiful Web Design, 2nd Edition, by Jason Beaird – The Non-Designer's Web Book, 3rd Edition, by Robin Williams & John Tollett Design Principles

Course Design – Technical 14 Students Students should have programming background (C++ and/or Java) CSCI 3300 Introduction to Web Development (client side) HTML & CSS are reviewed Textbooks (3 & 4) – Adobe Dreamweaver CS5 Classroom in a Book, Adobe Press – Adobe Fireworks CS5 Classroom in a Book, Adobe Press Assignment 4 – Dreamweaver website Assignment 5 – Fireworks site mock-up Design Principles Technical

Course Design – Website Planning 15 Students To develop a real-world web user interface mock-up/prototype A individual project 1.Content report, client requests, visual research, 4 sketches, color scheme 2.Fireworks (png) mock-up file 3.Sliced Fireworks (png) file, working static website (html, css, images) with content 4.Presentation, website portfolio (screen captures) Assignment 3 – visual research Term Test –theories Design Principles Technical Website Planning

Outcome – through the project 16 NoWebsite TitleInternal Client 1Taskforce Doug Catellier, GIS Analyst 2apdatasolutions.org Doug Catellier, GIS Analyst 32 nd Order Differential Equations Dr. Samuel Jator, Professor Mathematics 4J Computing Dr. Samuel Jator, Professor Mathematics 5Hydraulic Geometry Dr. Gregory Ridenour, Professor Geography 6Pothole Management WebsiteMike Wilson, GIS Manager

Outcome – through the project Basic web design principles emphasizing alignment, proximity, contrast and repetition Web design topics incorporating layout, color, texture, typography and imagery User interface design principles for web pages Client side programming Web site planning Process of designing and developing user interface mock- ups/prototypes 17

Challenges Good design work requires time and effort – e.g. Assignment 1 takes around 15 hours for some of the students CS students are good programmers, but they are not used to visual design work (initially, will need to overcome the hurdle) Professional web design software is expensive The course is now compulsory for CS&IS Internet and Web Technology concentration students – Class will become bigger for the next run of the course Extremely good design vs extremely bad design => grading? 18

::: Thank You ::: Leong Lee, Ph.D. Assistant Professor, Dept. of Computer Science Austin Peay State University, Tennessee, USA