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 and contexts. 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 Week 8: February 27
30% Official Band Website/Portal
20% Site Design and Execution
5% Usability Report
Due Week 7: February 13
25% Promotional Flash Microsite
Due Week 11: March 20
15% Viral Promotion For Handheld Device
Due Week 14: April 12
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
Introduction and Course Overview
Topics: the designer-client relationship, briefs, prototyping, experience design
Assignment Introduction: Site Usability Analysis
Assignment Introduction: Official Band Website/Portal
Week Three – January 16-18
Web Usability and Page Design Fundamentals
Topics: art versus engineering, cross-platform design, common problems, response time, linking
protocols
Readings: Nielsen, Jakob. Designing Web Usability: The Practice of Simplicity.
Chapter 1: Introduction: Why Web Usability?, Chapter 2: Page Design
Milestone: Paper Prototype Due
3
Week Four – January 23-25
Designing and Optimizing Content For Web Delivery
Topics: guidelines for writing, legibility issues, effective use of media elements, user behavioural
patterns
Readings: Nielsen, Jakob. Designing Web Usability: The Practice of Simplicity.
Chapter 3: Content Design
Week Five – January 30-February 1
Site Architecture and Content Management
Topics: structuring the interface and navigation, design simplification, managing large amounts of
information, search features
Readings: Nielsen, Jakob. Designing Web Usability: The Practice of Simplicity.
Chapter 4: Site Design
Week Six – February 6-8
Accessibility and Global Design
Topics: addressing the special needs of users, concerns for international users
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 (* note: Chapter 5: Intranet Design is not a required reading)
Milestone: High-Fidelity Prototype Due
Week Seven – February 13-15
Future Trends and Current Developments
Topics: long and short-term predictions, anticipating the next wave of technology, information
appliances
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
Assignment Due: Official Band Website/Portal
Assignment Introduction: Promotional Flash Microsite
Reading Week – February 20-25
Classes cancelled
Week Eight – February 27-March 1
Designing User Experience
Topics: design consistency, creating ambiance, review of Actionscript fundamentals
Assignment Due: Site Usability Analysis
Week Nine – March 6-8
Managing Interactive Content
Topics: asset management, working with and targeting movie clips, dynamic content loading,
drag and drop
Week Ten – March 13-15
Working With Variables
Topics: defining and calling upon variables, updating and reassigning variable content, counting,
review of audio and video integration
Milestone: High-Fidelity Prototype Due
Week Eleven – March 20-22
Designing For Handheld Devices
Topics: limitations of information appliances, Flash Player formats
Assignment Due: Promotional Flash Microsite
Assignment Introduction: Viral Promotion for Handheld Device
4
Week Twelve – March 27-29
Content Optimization
Topics: vector versus raster, text and image considerations, legibility
Week Thirteen – April 3-5
Work Session
Week Fourteen – April 10-12
High-Fidelity Testing and Presentations
Milestone: High-Fidelity 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
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:
The following information is provided as general project guidelines to introduce the objectives and
deliverables for each assignment. Further elaboration and examples will be provided during the
in-class sessions.
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 two sites of your choice. In this process,
you should make judicious reference to the course text to focus on specific navigation and layout
5
concerns. It is advisable to select sites that are 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. Compare and contrast how one site
deals with certain content versus the other. What is successful, and what is not so successful?
Consider some of the following when analyzing the sites:
-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 companies or site owners, 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 sites, 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 sites and their 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
Milestones: Paper Prototype January 16; High-Fidelity Prototype February 6
Working in pairs, 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
and guidance to your designer-partner, with regards to style, mood, and overall feeling of the site.
The client will also supply any written content to the designer for formatting. This client brief will
take place very early in the development process, and it will form the foundation for development
of both paper and high-fidelity digital prototypes that will undergo usability testing.
This project is intended as an informational site, so a clear, consistent navigation system is
imperative. When in doubt, opt for the simplest user-friendly solution to various design problems.
In the next project, you will have the opportunity to develop a much more experimental application
of the principles; at this stage, keep any complex or less intuitive media elements as optional
content for expert users. Please keep in mind that you are designing for the average user, with
less specialized knowledge and technical savvy than students in the New Media program.
6
Through consultation with your client, the parameters for the site content will be defined.
However, you may wish to include the following on your site:
-History or biography (written by client)
-Discography (design past CD/DVD covers)
-Performances/tour dates
-Gallery
-Audio or video samples (can be appropriated)
-Contact information (record label or management)
-Fan forum (message board, submitted artwork, etc.)
-Links
-Merchandise (simulate t-shirt designs, screensavers, etc.)
While your client is a creative individual in the music industry, it is important not to overwhelm the
user with superfluous design “flourishes.” For example, refrain from heavy downloads up-front,
automatic music streaming, or overly large Flash elements that are loaded without the user
choosing to do so. Large media elements should be labeled as such, and the user must be
required to select the elements for download (indicate size, when appropriate).
Because the music industry is largely based on image, marketing, and promotion, it is important
to create a graphically distinct “brand” for your musical talent. Using the client’s brief, style, and
genre of music, develop a wordmark and/or logotype to be used throughout the promotions. This
should reflect other like artists, but also convey a sense of distinction to set them apart from the
crowd. It is possible to develop an inventive and visually-arresting site without relying on heavy
graphics and media. If you decide to use a non-traditional navigation system, be especially
conscious of consistency and ease-of-use. Consider the following:
-Clean, minimalist approach: light-weight text, little detail, focus on textures, simplified
colour scheme, hard edges, mechanical/computer-generated imagery
-Earthy: warm colours, hand-rendered imagery, painterly textures, soft edges, less
structured fonts
-Hardcore: dark colours, high-contrast, heavy text, aggressive angles
-Worldly: similar to earthy criteria, but with a culturally-specific twist
-Or…?
The design decisions made for fonts and colours should carry forward to any photography on the
site. Consider whether you wish to feature your client in well-lit high-contrast studio shots, grainy
outdoor slides (nostalgic), black and white, colour, monochrome, or dimly-lit scenarios.
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
-Include all final and relevant working files, along with the usability documentation
on a CD/DVD
Assignment: Promotional Flash Microsite
An interactive site promoting the latest release from a fictional band.
Value: 25%
Due: Week 11 – March 20
Milestone: High-Fidelity Prototype March 15
Following up on the informational band site, you are now tasked with creating a microsite to
promote the most recent release by your client-artist-partner. The design schema should remain
7
consistent, but the purpose and approach are entirely different. The microsite need not be
immediately intuitive, nor does it need to convey a great deal of “meaningful” information. This
site is a marketing device to alert fans of the new project, generate hype, and provide a sampling
of the new recordings. There is also less concern with filesize, however, the final result should be
reasonable for web delivery.
You may consider this as an interactive video project, a game, or more of a synaesthetic
exploration of the audio tracks. The users should feel excited by the content, and it should
capture their attention for an extended period of time. Using Flash and Actionscript, develop
draggable, clickable, and mouse-driven interactions to enhance the interactive component.
Obviously, there needs to be plenty of audio included in the piece, but consider allowing the user
to create custom mixes, allow dynamic panning and selection of sound, or structure the site with
“zones,” rooms, or locations with different tracks “installed” in space. It is also probably wise not
to give away entire tracks, as this defeats the purpose of the promotion.
In addition to the interactive component, you must include some information regarding the release
date, purchasing options, track listings, and anything that might appeal to a potential customer.
This could be displayed once the user exits the interface, in a pop-up window, or as a separate
page linked discretely from the main content. You should also include links back to the official
site, in case a user was ported directly to the microsite.
While this project is independent of the final handheld assignment, it may be wise to consider
how a more simplified version of this microsite could be adapted for a smaller resolution and a
slower processor.
Deliverables:
-A Flash-based interactive microsite, linked to your official website
-Include all final and working files on a CD/DVD
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
Milestone: High-Fidelity Prototype April 10
The final project involves developing a viral promotion designed for display on a handheld device,
such as a Personal Digital Assistant (PDA), or a cell phone. Because the screens are quite small
(typical PDA resolution is 240x320, portrait format), and the processing power is limited, you will
need to focus a great deal of attention on optimization and legibility concerns. The processing
power of a cell phone is incrementally less than that of a PDA, so be sure to test often during the
development phase.
For all intents and purposes, the development process is identical to that of traditional web
delivery. The main distinction is that the Flash Player designed for handheld devices does not
support more advanced functions. The most recent version for Pocket PC-enabled devices is
Flash 6, meaning it will not support streaming video formats, most components, and newer
Actionscript commands. In addition, rollover functions are not enabled, as PDAs operate on a
click-only system, while cell phones are reliant exclusively on keypad entry.
You may wish to treat this as a scaled-down version of the microsite interface, or begin anew. As
with the previous, consistency in design, and provision of basic information (release date, web
address) must be considered. When conceptualizing the piece, imagine how the user will interact
with the work, and in what context—for the most part, it will be during down-time in public transit
or waiting rooms. Therefore, it is important to create a piece that is complex enough or
compelling enough to sustain a user’s interest. Simple games are most successful, in this regard.
8
Deliverables:
-A Flash-Lite or Flash 6 for Pocket PC file, optimized for a specific handheld
device
-Please include all final and working files on a CD/DVD
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
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:
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
9
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.
C-range:
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.
B-range:
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
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.
10