 |
TEACHING
 |
|
In 2009/2010 I am the module co-ordinator and lecturer of Web Design & Implementation (CA669, CA669a) for M.Sc. in
e-Commerce (MECB/MECT), and for Graduate Diploma in IT (GDF).
The module is a 3-hour lecture/week (7.5 credits for CA669 and 5 credits for CA669a) module designed to equip the students with the field of Human-Computer Interaction (HCI), practical design principles and
guidelines, the ability to critique designed artefacts, commence design process, and develop usable Websites. Introducing the latest Web technologies, state-of-the-art HCI
findings and controversies, and plenty of cutting-edge experimental applications, the module will saturate the students with the idea of emerging Web-related products and lifestyle,
as well as providing practical knowledge and skills to develop a Website. First 6 weeks focus on HCI, second 6 weeks focus on technology & implementation.
Lecture time/venue:
2-3pm Monday CG86 (Henry Grattan building)
4-6pm Monday QG21 (Business School)
6:30 - 8pm Wednesday Q217 (**Note the change) - Evening Course only
|
| shcedule 2009/2010 |
|
|
|
|
|
| |
Week 1
|
Introduction: Web Design, HTML and Design Rationale
As a first class of the module, we will be introduced on the module. This module covers not
only the specific technical aspects of designing the websites but also how to make the web interface
usable. Being able to apply Human-Computer Interaction to the Web environment and develop usable Websites is the main goal of this module. There are
many design 'tips' that we see in popular books and on the web but we want to understand what is
behind those tips and where they come from. This bigger picture is important for more comprehensive
understanding (and thus readily capable of applying it to web design) of the area. By the end of this
module, you will be equiped to design a website that is highly usable.
 Read a recent article: "Saying good-bye to DBMSs, designing effective interfaces" by Michael Stonebraker and Jason Hong.
Communications of the ACM, 52(9), 2009, Pages 12-13. Available online on ACM Digital Library: http://doi.acm.org/10.1145/1562164.1562169
Read a recent article: "Modeling trust in e-commerce: an approach based on user requirements"
by Alireza Pourshahid and Thomas Tran.
ICEC '07: Proceedings of the 9th International Conference on Electronic Commerce, pages 413-422. Available online on
ACM Digital Library: http://doi.acm.org/10.1145/1282100.1282179
ASSIGNMENT 1: Website evaluation - see description (2-page PDF; 117K)
Submission deadline: Monday 16 November
We will also briefly review the underlying building element of the web page - HTML. HTML and other technical elements will be
more fully discussed from week 7 (with Dr Cathal Gurrin). There are plenty
'web authoring' tools that you can use that allows you to skip the stage of learning the specific details
of HTML technicality - authoring tools automatically generates HTML for you, as soon as you design the
layout of a web page. However, in order to understand some basic premises of the web page presentation,
its limitation, and simplified set of guidelines, we will need *some* level of knowledge in HTML.
For those who know HTML already, this will be a way to review and maybe extend your view to incorporate design aspect.
For those who don't know HTML, this will be a nice introduction to the technicality of the web page construction.
This week's lectures will end with posing a question whether knowing HTML and all other technicality is enough for a effective,
usable web site.
Macromedia Dreamweaver tutorial
Macromedia Dreamweaver tutorial (Tutorialized.com)
Microsoft FrontPage tutorial
 Lecture Slides - Introduction (PDF; 297K)
Lecture Slides - HTML Basics (PDF; 1.9M)
Read a recent article: "Just for you" by Don Monroe.
Communications of the ACM, 52(8), 2009, Pages 15-17. Available online on ACM Digital Library: http://doi.acm.org/10.1145/1536616.1536622
Read an article: "Understanding purchasing behaviors in a virtual economy:
Consumer behavior involving virtual currency in Web 2.0 communities" by Dong Hee Shin.
Interacting with Computers, 20(4-5), 2008, pp433-446. Available online on ScienceDirect: http://dx.doi.org/10.1016/j.intcom.2008.04.001
Read an article on the trust and personality issues in e-Commerce:
"How does personality affect trust in B2C e-commerce?" by Jo Lumsden and Lisa MacKay.
Proceedings of the 8th international conference on Electronic commerce, 2006, pp471-481. Available online on ACM Digital Library: http://doi.acm.org/10.1145/1151454.1151526
|
| |
Week 2
|
HCI and Design Principles
We will discuss and learn the Human-Computer Interaction (HCI): we will look into what makes a "good" design, and move into user classification.
We will go through design principles and guidelines - one of the most useful and practical outcomes of HCI discipline - with ample amount of real-life examples.
We will also look at how some of successful products incorporated HCI principles and how important it is to understand HCI perspectives in developing
newly-emerging technology and platforms such as mobile, TableTop, interactive TV, Touch Wall, etc.
This will strongly equip you with theoretical basis for designing and critiquing any design artefacts (including websites).
If there is time left, we will continue to next week's lecture on Usability for the Web.
*Note: we have lab sessions from this week:
- GDF (daytime): 9-11am Tuesday
- MECB/T: 9-11am Friday
- GDF (evening): 8-9:30pm Wednesday
It is not mandatory to attend the labs, as the format is self-study with
tutor assistance.
There are a large number of online tutorials on web editing tools... For example check the following:
Macromedia Dreamweaver Basics
Dreamweaver teacherClick course - a step-by-step guide to Dreamweaver by TeacherClick.com
Dreamweaver video tutorials
Dreamweaver tutorials from webdesign.com resources
Or use Google to find suitable tutorials for you. Quickly learn how to use them. Find a particular website you like and try to create an exactly same page from scratch, using Dreamweaver.
16 Dreamweaver 8 QuickSkill Tutorials - easy to understand, animated
examples of 16 main tasks in Dreamweaver, from EducationOnlineforComputers.com
Dreamweaver tutorials - from GuidesandTutorials.com
Getting Started with Dreamweaver - quite comprehensive user guide including tutorials
More user guides, tutorials and printable documentations on Dreamweaver 8 are available from
Education Online for Computer Software.
Lecture Slides - Design Principles & Guidelines (full) (PDF; 2.2M)
Read a recent article:
Powers of 10: Time Scales in User Experience. Jakob Nielsen's Alertbox column, 5 Oct 2009. Available at:
http://www.useit.com/alertbox/timeframes.html
|
| |
Week 3
|
Design Guidelines for Websites
This week we learn design guidelines specifically for Website. This is a more concrete version of last week's general design guidelines, applied to Web-specific environment. It is essential to
know the details of this week's lecture.
More web design guidelines - from US Department of Health and Human Services (check 'Guidelines by Chapter')
Lecture Slides - Web-specific Guidelines (PDF; 4.4M)
|
| |
Week 4
|
Website Evaluation
In this week, we will discuss how to evaluate a website. In terms of methodolgy, the field of HCI and Usability Engineering has many evaluation tools and practices they can offer.
Heuristic inspection, directly observing the users (e.g. video recording, screen capture), indicectly observing (e.g. interaction logging, incident diary), asking the users
(e.g. questionnaire, interview), and model-based methods will be discussed, with a few example case studies. The importance of out-of-the-lab study (field study) in evaluation
will be emphasised and a large-scale evaluation the lecturer has recently conducted himself will be given as an example.
Lecture Slides - Evaluation (PDF; 4.3M)
|
| |
Week 5
|
BANK HOLIDAY MONDAY
(Daytime students: No Class this week)
*For GDF evening students, we will continue Website Evaluation this Wednesday and then start Web Design Process and Technologies.
Read a recent article: "Usability – Context, framework,
definition, design and evaluation" by Brian Shackel.
Interacting with Computers, Volume 21, Issues 5-6, 2009, Pages 339-346.
Available online from ScienceDirect: http://dx.doi.org/10.1016/j.intcom.2009.04.007
Read a recent article: "Human–computer interaction – Whence and whither?"
by Brian Shackel.
Interacting with Computers, Volume 21, Issues 5-6, 2009, Pages 353-366.
Available online from ScienceDirect: http://dx.doi.org/10.1016/j.intcom.2009.04.004
|
| |
Week 6
|
Web Design Process and Technologies
This week we will see larger view on the whole process of website design: planning,
prototyping, implementation and evaluation. We will also cover some of the well-known/emerging web technologies
and how they can be used to enhance the usability of websites.
Web technologies including CSS, Flash, client-side scripting languages (JavaScript), server-side (ASP, PHP), Web 2.0, Semantic Web will be also introduced.
Especially, we will see examples of Web 2.0 applications and note its characteristics, where it came from, and how it could support usability better than
conventional websites.
Lecture Slides - Web Design Process (PDF; 2.9M)
|
| |
Week 7
|
Reading Week: lecture cancelled
All day-time students (GDF + MECB/T): lectures cancelled but Lab sessions will be provided with tutors as usual
*GDF evening students - Monday evening (9th November) lecture and lab cancelled, unlike I said on Monday evening 4th November. Class will resume at 6:30pm the following Monday (16th November)
|
| |
|
|
RECOMMENDED READING
|
< HCI & INTERACTION DESIGN >
- Designing the User Interface: Strategies for
Effective Human-Computer Interaction (4th Ed.)
(Ben Shneiderman and Catherine Plaisant, 2005; Addison-Wesley)
- Interaction Design: beyond Human-Computer Interaction (2nd Ed.)
(Jennifer Preece, Yvonne Rogers, Helen Sharp, 2007; John Wiley & Sons)
- Usability Engineering (Jacob Nielsen, 1993; Academic Press)
- The Design of Everyday Things (Donald Norman, 2002; Basic Books)
- Emotional Design: Why We Love (or Hate) Everyday Things (Donald Norman, 2004; Basic Books)
- Leonardo's Laptop: Human Needs and the New Computing Technologies (Ben Shneiderman, 2002; MIT Press)
- Media Equation: How People Treat Computers, Television, and New Media Like Real People and Places (Byron Reeves and Clifford Nass, 1998; CSLI)
|
< WEB SPECIFIC >
- Web Design: a Complete Introduction (Nigel Chapman and Jenny Chapman, 2006; Wiley)
- Designing Web Usability: The Practice of Simplicity (Jacob Nielsen, 2000; New Riders)
- The Non-Designer's Web Book (2nd ed.)
(Robin Williams & John Tollett, 2000, Peachpit Press)
- Web Design Workshop
(Robin Williams, 2002, Peachpit Press)
< GRAPHIC DESIGN FOR INTERFACE >
- Envisioning Information (Edward Tufte, 1990; Graphics Press)
- Designing Visual Interfaces
(Kevin Mullet & Darrell Sano, 1994; Prentice Hall)
- A Primer of Visual Literacy (Donis Dondis, 1974; MIT Press)
|
|
|
USEFUL LINKS
|
- The Alertbox: Current Issues in Web Usability
- Excellent columns from Web usability authority Jacob Nielsen. Lots of good tips and future
predictions
- Interface Hall of Shame
- Interesting examples of bad designs in software products and explanations
- Dmitry Kirsanov's Top Ten Web Design Tips
- Very useful tips for design ideas and associated HTML tips to implement them
- Web Authoring FAQ
- From Web Design Group: many useful FAQs (e.g. redirecting, hiding source, password protecting, specifying margins around the page...)
- Dan's Web Tips
- Many useful and detailed tips on HTML and other web page design
- How To Make An Annoying Web Page
- Another interesting and funny site showing examples of bad web page design (from the very start)
- webmonkey - the web developer's resource
- Many useful but technically oriented resources (HTML basics, JavaScript library, Web graphic tips, speciall character chart, colour code, CSS, etc.)
- Research-based Web Design & Usability Guidelines
- Some list of generally accepted design guidelines for website
- Website design guidelines for improving usability
- Kindly explained overview and some specific tips for titles, forms, cross-browser compatibility, etc.
|
|
|
|
| student survey |
Teaching survey of my lectures in 2001/2002 autumn semester - survey result (Web Design, 2001/2002)
I conducted a student survey, near the end of 2002/2003 autumn semester,
on my module - to get the students' satisfaction level and opinions
on my lectures. The survey result (Web Design 2002/2003) shows
mixed opinions.
I conducted a student survey, near the end of 2005/6 autumn semester. The survey result (Web Design 2005/6) shows the students'
level of satisfaction on the module that year.
I conducted a student survey, near the end of 2006/7 autumn semester. The survey result (Web Design 2006/7) shows the students'
level of satisfaction on the module that year.
I conducted a student survey, near the end of 2007/8 autumn semester. The survey result (Web Design 2007/8) shows the students'
level of satisfaction on the module that year.
I conducted a student survey, near the end of 2008/9 autumn semester. The survey result (Web Design and Implementation 2008/9) shows the students'
level of satisfaction on the module that year.
|
|
|
|
