New Media 3850 – Advanced Online Design
Session:
Instructor:
Email:
Web:
Office:
Office Hours:
Phone:
Spring 2006
Christopher Moore
christopher.moore@uleth.ca
www.learnmegood.ca
W888
Mondays 11:00-2:30; Wednesdays 11:00-2:30; or by appointment
380-1885
Room B519
Mondays 3:00 pm – 4:50 pm
Wednesdays 3:00 pm – 4:50 pm
Successful interfaces are clear, intuitive, and virtually transparent. Usability specialist Jakob
Nielsen advocates for the “practice of simplicity”—stripping away unnecessary visual clutter and
optimizing performance for a range of potential delivery systems. Design practice has
dramatically shifted in the last decade from production of artifacts that privilege aesthetic
concerns to defining and “scripting” user experience. So-called “experience design” is not
discipline- or media-specific, rather, it is based on creating an architecture to support a desired
emotional or goal-oriented outcome for a majority of users. The focus is shifted from a tangible
final product or commodity to the intersection between content, context and the user.
Advanced Online Design is a research and production-oriented course that explores the
fundamentals of interface design, information architecture, navigational systems, and usability
testing. This course builds upon the technical and conceptual ideas explored in NMED 3520:
Net.Art, and covers Actionscripting in Flash at an intermediate level. In this course, students will
learn various methods for rapid prototyping, user testing, and systems analysis. Specific
examples will address human perception and cognition as they relate to site navigation, as well
as legibility and accessibility concerns. Through design of interfaces for various platforms and
displays, students will become familiar with the challenges of creating content for an increasingly
wired world of information appliances.
Objectives:
Upon completion of this course, students will become conversant with the
discourse and practice of experience design. Students will learn the basic tenets
of functional web design and architecture, as well as how to implement usability
testing. The projects in this course are structured to engage different audiences,
experiences, as well as to demonstrate optimization for multiple platforms and
displays. By the end of the course, students will be able to produce Flash-based
content for web delivery, personal digital assistants (PDAs), cell phones, and
touch-screen kiosks.
Required
Texts:
Nielsen, Jakob. Designing Web Usability: The Practice of Simplicity.
New Riders Publishing, 2000. ISBN 1-56205-810-X.
Pucknell, Hogg & Swann. Flash MX 2004 Demystified. Peachpit Press, 2004.
ISBN 0-7357-1397-9. (*recommended, but not essential)
All books are available from the U of L bookstore. Additional materials are
located online at www.learnmegood.ca.
You are required to bring a notebook/sketchbook and writing implements to each
class session. It is expected that you will take notes during the lectures and
demonstrations to assist you outside of the class sessions.
Optional
Equipment:
It is recommended that you bring a set of headphones to each class session, as
the workstations are not equipped with speakers. While personal storage space
exists on the network, it is subject to down-time and routine maintenance. For
this reason, you should always backup data on a CD-RW disk or a portable USB
drive.
Attendance & What and how much you learn in this class is directly related to your participation
Participation: in every lecture and lab session. The studio environment is an important tool for
learning about methodologies and processes, and for developing critical and
technical skills. Your most important contribution to this learning environment is
your interest and creative imagination. Engage – use all your experience,
knowledge and natural creativity to develop your skills and those of your peers.
Your engagement will be directly proportional to your learning and success in this
course.
An attendance sheet will circulate during each class. At the end of the term, you
will receive a grade based on your attendance record, mature and considerate
conduct in class, questions and comments made during class, etc. Appropriate
conduct includes arriving on time, returning promptly after break sessions,
respecting individuals who have the floor during a presentation or discussion,
turning off monitors when asked, providing assistance to colleagues requiring
help, and avoiding idle chatter unrelated to the focus of a given lecture or lesson.
I realize that not all students are as comfortable as others in speaking regularly
during seminars, therefore, I will accept other activities as evidence of
participation. For example, you can bring an interesting handout to class, or
provide an interesting link or media sample to share with your colleagues. I am
always looking for new resources to update and refine the course delivery in
subsequent iterations.
If you are unable to attend a class session, as a courtesy, please advise me of
the situation via email. If you miss more than three classes and/or three labs,
you may be asked to withdraw from the course.
Assignments: Any project that may be designated an exercise or which is part of the
coursework must comply with university guidelines related to human and animal
ethics as well as should comply with Canadian laws. If you have questions about
risks, please consult with the instructor.
Assignments are to be completed by the beginning of the class on the date which
they are due. All students must be prepared to present each project during the
face-to-face session. All completed assignments are to be submitted on a nonreturnable CD or DVD, unless otherwise specified.
Academic
Integrity:
You must correctly document in your assignments all ideas and media that have
been incorporated in your projects, but have been borrowed from outside
sources or from your colleagues. In the case of teamwork, the bounds of what
was contributed by each student must be clearly delineated. Failure to do so is
considered as academic dishonesty and treated accordingly. For written papers,
all sources used in the development of your work must be cited as references.
Where text is borrowed from another source, quotation marks must indicate the
citation and the source must be acknowledged appropriately. (A Turbian citation
guide is available in pdf format at:
www.uleth.ca/~christopher.moore/SampleCitations(Turabian).pdf)
2
Late Policy:
Projects submitted late will receive a deduction of 5% per day, unless prior
arrangements have been negotiated. If you are struggling with the content, or
having difficulties managing your time, please advise me. I am a compassionate
individual, and am most often able to accommodate requests, if you provide a
reasonable alternative.
Personal
Security:
This course will strive for consistency with the University’s policy on personal
security, where it is acknowledged that freedom of expression and frank
discussion of controversial issues are kept in balance with an individual’s rights
not to be subject to discrimination based on gender, ethnicity, sexual orientation
or other forms of intolerance.
Sexual harassment is a serious offence that includes but is not limited to sexual
advances, unwanted requests for sexual favours, and other unwanted verbal or
physical conduct of a sexual nature. Behaviour need not be intentional to
constitute harassment. Harassment occurs when an objective person in the
position of an individual claiming harassment would find the conduct or
comments would have the impact of creating a hostile environment.
Evaluation:
10% Readings / Participation / Attendance
10% Key Questions (evaluated weekly)
10% Site Usability Analysis
Due
30% Official Band Website/Portal
20% Site Design and Execution
5% Usability Report
Due
25% Promotional Flash Microsite
Due
15% Viral Promotion For Handheld Device
Due
Class Schedule:
Please note that this is a tentative schedule of class activities. Current information and syllabus
updates may be viewed on the course website at www.learnmegood.ca.
Week One – January 2-4
No Classes
Week Two – January 9-11
Title
Topics:
Readings:
Skills:
Assignment Introduction: Site Usability Analysis
Assignment Introduction: Official Band Website/Portal
Week Three – January 16-18
Title
Topics:
Readings: Nielsen, Jakob. Designing Web Usability: The Practice of Simplicity.
Chapter 1: Introduction: Why Web Usability?, Chapter 2: Page Design
Skills:
3
Milestone: Paper Prototype Due
Week Four – January 23-25
Title
Topics:
Readings: Nielsen, Jakob. Designing Web Usability: The Practice of Simplicity.
Chapter 3: Content Design
Skills:
Week Five – January 30-February 1
Title
Topics:
Readings: Nielsen, Jakob. Designing Web Usability: The Practice of Simplicity.
Chapter 4: Site Design
Skills:
Week Six – February 6-8
Title
Topics:
Readings: Nielsen, Jakob. Designing Web Usability: The Practice of Simplicity.
Chapter 6: Accessibility for Users with Disabilities, Chapter 7: International Use: Serving a
Global Audience
Skills:
Milestone: Functional Prototype Due
Week Seven – February 13-15
Title
Topics:
Readings: Nielsen, Jakob. Designing Web Usability: The Practice of Simplicity.
Chapter 8: Future Predictions: The Only Web Constant is Change, Chapter 9: Conclusion:
Simplicity in Web Design
Skills:
Assignment Due: Official Band Website/Portal
Assignment Introduction: Promotional Flash Microsite
Reading Week – February 20-25
Classes cancelled
Week Eight – February 27-March 1
Title
Topics:
Readings:
Skills:
Assignment Due: Site Usability Analysis
Week Nine – March 6-8
Title
Topics:
Readings:
Skills:
Week Ten – March 13-15
Title
Topics:
Readings:
Skills:
4
Milestone: Functional Prototype Due
Week Eleven – March 20-22
Title
Topics:
Readings:
Skills:
Assignment Due: Promotional Flash Microsite
Assignment Introduction: Viral Promotion for Handheld Device
Week Twelve – March 27-29
Title
Topics:
Readings:
Skills:
Week Thirteen – April 3-5
Title
Topics:
Readings:
Skills:
Week Fourteen – April 10-12
Presentations
Topics:
Readings:
Skills:
Milestone: Functional Prototype Due
Assignment Due: Viral Promotion for Handheld Device
Key Questions:
Value: 10% (assessed on a weekly basis)
Due: Every Monday by 9:00 am, via email with the subject line “KQ-weekX-lastname”
Advanced Online Design is a practice-based course, and aims to develop critical and analytical
skills. As opposed to formalized lectures, the discussions will be moderated in a seminar style
based on review of case studies. It is imperative that you read the assigned textbook chapters on
a regular basis, as your projects will be directly tied to the principles outlined in the Nielsen
reference.
Each week, you are expected to review the assigned chapter(s), and formulate two distinct
questions or responses based upon specific passages from the text. Each question/comment
should be approximately 2-3 sentences in length, and should be open-ended in nature, so as to
provoke discussion among the group. Questions may be asked to clarify terminology or ideas, or
alternatively, to challenge what is espoused in the text. Feel free to disagree with Nielsen’s
points or state an opinion, but you must provide some rationale for your argument. Please
include a page number and/or direct quote for easy reference. In addition, you must provide
URLs that illustrate each of your comments, or may be used as a reference for the discussion.
These sites may be examples of good or bad design, but be prepared to defend your choices.
It is imperative that your submissions be received by 9:00am on the lecture day, as I will filter the
questions prior to the class session. We may not have the opportunity to get to all of the
5
questions/comments, and there may be similar submissions, so I will prioritize the emails. Please
ensure that you format the subject as indicated in the header above for ease of sorting.
Assignments:
Assignment: Site Usability Analysis
An illustrated report analyzing the navigational structure and functionality of a chosen site
according to the guidelines provided in Jakob Nielsen’s Designing Web Usability.
Value: 10%
Due: Week 8 – February 27
Having completed Jakob Nielsen’s Designing Web Usability, you are asked to apply the basic
principles of usability analysis to evaluate and critique a site of your choice. In this process, you
should make judicious reference to the course text to focus on specific navigation and layout
concerns. It is advisable to select a site that is not extremely bad or extremely good, as it will be
more challenging to find successful elements, or the contrary. Look for an example that is
moderately good, but could benefit from some fine-tuning.
Using screenshots, illustrate perceived problems, and annotate the images in Photoshop.
Whenever possible, alter the image to suggest a new solution that would help to alleviate the
problem. Use the examples in Nielsen’s text for inspiration.
Consider some of the following when analyzing the site:
-Is there consistency from page-to-page (design, treatment of text, location of navigation
controls, etc.)?
-How easy is it to locate specific information? Is the hierarchy of information logical and
granular enough to be easily understood?
-Is there a simple, structured display of navigation pathways and how to return to various
“zones” in the site?
-How legible is the overall design? Are colours and fonts wisely chosen (consider users
with accessibility issues)?
-Does the site accommodate a variety of browsers, platforms, and screen dimensions
(test in IE, Firefox, Safari, Netscape, and at various resolutions)?
-How successfully are images and media elements treated? Is the download rate
acceptable and are the elements optimized adequately?
You should also provide a brief overview of the company or site owner, with information regarding
demographics, like estimated site traffic, typical user profile, company size, international
presence, and off-line reputation/history. If provided, list the optimal configuration stated by the
site, as well as any plug-ins or downloads required for viewing the content. Please also elaborate
to the best of your ability on the structure of the site and its delivery formats (i.e. frame-based
layout, tables, etc.).
Deliverables:
-1000 word report (double-spaced, with relevant citations)
-Provide a hardcopy with appropriately labeled cover
-Include annotated screenshot illustrations, printed in full-colour
Assignment: Official Band Website/Portal
A user-tested information site for a fictitious musical act.
Value: 30% (20% site design; 10% usability report)
Due: Week 7 – February 13
Working in teams, you will perform the role of a client as well as a designer commissioned to
develop the official site portal for a fictitious musical act. As the client, you will provide feedback
6
and guidance to your designer-partner, with regards to style, mood, and overall feeling of the site.
This client brief will take place very early in the development process, and it will form the
foundation for development of both a paper and digital prototype that will undergo usability
testing.
Deliverables:
-A fully-functional site containing all of the specifications required by the client
brief
-Usability report summary (~500 words) that outlines the issues encountered in
the test phase, as well as the proposed/implemented solutions as a result of the
paper and digital tests (hardcopy with cover)
-Video documentation of the usability testing
Assignment: Promotional Flash Microsite
An interactive site promoting the latest release from a fictional band.
Value: 25%
Due: Week 11 – March 20
blah
Deliverables:
Assignment: Viral Promotion For Handheld Device
An interactive toy related to the microsite, and optimized for a handheld device.
Value: 15%
Due: Week 14 – April 12
blah
Deliverables:
Evaluation Scale
The following scale range will be used in all course assessments:
A+
A
AB+
B
BC+
C
CD+
D
DF
90%-100%
85% - 89%
80% - 84%
77% - 79%
74% - 76%
70% - 73%
67% - 69%
64% - 66%
60% - 63%
57% - 59%
54% - 56%
50% - 53%
0% - 49%
Evaluation Criteria
In creative disciplines, the evaluation process is not always transparent or clearly stated.
Multiple-choice and automated tests are easy to administer, but they cannot replicate the
qualitative assessment necessary to judge a work of art or design. It is the instructor’s role to
7
determine the relative merit based upon multiple factors – some technical, some ethical, and
others, aesthetic:
-
Does the project meet the requirements, as stated in Assignment criteria?
How much effort or engagement was involved in completing the project?
Does the final work thoughtfully or provocatively comment on the chosen subject?
Has the student progressed technically or conceptually in the development process?
Does the work demonstrate an understanding of the creative and compositional
principles discussed in the class sessions?
Did the student make incremental progress on a week-to-week basis?
Does the project demonstrate innovation, challenge, or take risks?
Has the student exceeded the instructor’s expectations?
How closely does the work mirror professional/industry standards?
Having considered these factors, among others, the instructor must determine where the project
should be placed within a given range for each criteria. The cumulative assessment of these
factors is translated into a letter grade. For further granularity, please review the following
general grade range descriptions:
D-range:
C-range:
B-range:
The work is unsatisfactory. The student has unsuccessfully completed the
project and/or has met only the most basic requirements. The work may exhibit
only a passing resemblance to the criteria laid out for the project. The student
may have diverged from the criteria without previous discussion with the
instructor. The student may have submitted a project from another course or
situation, and claimed it to be new work. The work is rife with mistakes, or is
possibly unplayable/unreadable without expert technical intervention and/or a
very forgiving eye. The work is incoherent or does not successfully or
meaningfully communicate a concept or theme. The student is not progressing in
their development. The work is below average in the opinion of the instructor.
The work is acceptable. The student has made an earnest attempt to fulfill the
criteria laid out for the project. The student is not progressing well in their
development. The student has not taken sufficient time to internalize,
understand, own, and interpret the criteria for the project. The student may be
unclear on the criteria for the project and has not asked for clarification from
colleagues or the instructor. The student may have diverged substantially from
the criteria without previous consultation with the instructor. The student has not
referenced secondary sources of information or experience outside the
classroom. The work contains too many technical errors – i.e. poor transitions,
inappropriate pacing or conceptual structure, failure to acknowledge quoted
material, scripting errors, audio problems, grammatical or spelling mistakes, too
short or substantially too long. The work is average and acceptable in the
opinion of the instructor.
The work is good. The student has made an earnest attempt to fulfill the criteria
laid out for the project. The student is progressing in their development. The
student has taken sufficient time to internalize, understand, own, and interpret
the criteria for the project, with notable success. The student may have
referenced a few secondary sources of information or experience in an
interesting way. The student’s interpretation of the criteria may be somewhat
lacking. The interpretation may lack sufficient personal voice or originality; it may
be unsubtle. The work may experiment earnestly without huge success. The
student may have diverged slightly from the criteria without previous consultation
with the instructor. The work may contain a few technical errors – i.e. poor
transitions, inappropriate pacing or conceptual structure, failure to acknowledge
quoted material, scripting errors, audio problems, grammatical or spelling
8
mistakes, too short or substantially too long. The work is generally good in the
opinion of the instructor.
A-range:
The work is excellent. The student has fulfilled the criteria laid out for the project
through active engagement while demonstrating a personal voice. The student
has referenced many secondary sources of information or experience in an
interesting way. The student has internalized all project criteria and offers
supplementary ideas that support the criteria, or skillfully deconstructs the
established criteria in a creative way. The student is progressing at an aboveaverage rate. The project is at least almost totally free of technical errors. The
project probably demonstrates earnest and successful experimentation.
A+:
The work is outstanding. The student has fulfilled all criteria worthy of an A mark
and has excelled beyond the instructor’s expectations. The work approaches or
attains the capacity of a professional in the field. The work approaches suitability
for publication or professional broadcast. The work represents substantial,
innovative experimentation.
9