• Course Number: ART-346.W1
• Location: Online
• Day and Time: Tue, 11:00 – 1:45 PM
• Drop-in Hours: Thu, 11:00 – 1:45 PM (and by appt.)
• Dates: 1/19/2021 – 4/27/2021
• Instructor: Andy Deck
• Email Address: andydeck@umich.edu

COURSE DESCRIPTION

The course covers design techniques and concepts relevant to interactive media – a field that encompasses eBooks, web design, interactive kiosks, and apps. Students learn principles and processes useful in the production of these types of digital media. Focusing on interactions among people, machines, and media, students gain experience using several development platforms. Course projects address online, off-line, and mobile device contexts. Readings and assignments for the course explore principles related to layout, color theory, user testing, intuitive navigation, and responsive design. In addition to a collaborative class project, students conceive and develop an independent interactive project. This final work, which serves as a context for technical and creative research, will be discussed in the final class critique. Students will be evaluated on the basis of class participation and on the merits of several projects.

BOOKS

Required
100 Things Every Designer Needs to Know About People (2nd Edition)
By Weinschenk, Susan M.
ISBN-13 : 978-0136746911

Recommended
Interdisciplinary Interaction Design
By Pannafino, James
ISBN-13 : 978-0982634820

Seductive Interaction Design
By Anderson, Stephen P.
ISBN-13 : 978-0321725523

Items requiring action or preparation are denoted ¤

Week One 1/19/2021
• Introductions. Course overview. Interfaces and design patterns
• In class reading on Design patterns
• Introduction to 1st assignment: a collaborative interface element taxonomy book
• Brainstorming element ideas
LAB
¤ Look for interesting UI elements (for assignment) and bad/good interfaces (for discussion)
• Read/review websites linked to the assignment
¤ Email me a description of your two chosen elements (this is to avoid students duplicating elements)
• Research, writing for layout using InDesign template
• Anyone needing assistance with InDesign, come to Thursday lab session (recorded)

Week Two 1/26/2021
¤ Reading for today: Nick Kolenda's UI do's and don'ts
• Discussion: bad/good interface designs, best practices
• Lecture on the language of interactive design
LAB
• Ask me questions (via email or Zoom) if you need help writing about your UI element
• Develop your analysis, description, and historical information for the taxonomy pages
• Work on the layout and imagery, and captions
• Your taxonomy page spread must be exported to PDF. Upload your graphics and .indd files, as well as the PDF when submitting the assignment on Google Classroom

Week Three 2/2/2021
¤ Reading for today: Chapter 5 of UX Best Practices (pp. 75-93) Reducing Friction for a Smooth Experience
• Introduction: 2nd assignment, inventing a typing app for tablets (mock-ups of 4 screens)
• Brainstorm about typing apps (pair with peers in Zoom break-out rooms to think about them)
• Beyond usability: try out the rudimentary 'falling letters' prototype
• Lecture: wire frames and mock-ups
¤ Interface element taxonomy book discussion
LAB
• Research typing apps. Try some!
• Make wireframe sketches of ideas for your four screen mock-ups
• Do Adobe Illustrator tutorials if needed (see Links)
• Concept development. Plan style and substance. Colors and font! Fonts?!
• Production work on mock-ups for tablet app (icons, interface, illustrations)

Week Four 2/9/2021
¤ Reading for today: "Designing Delightful Interactions" (Chapter 6, p.94)
¤ Peer feedback. How can these mock-ups be more interesting, professional looking, striking?
LAB
• Continue production work on tablet app mock-ups
• Incorporate into PSD templates

Week Five 2/16/2021
¤ Reading for today: "A Gamification Framework" (article from UX Magazine)
• Introduce 3rd assignment, Math app cellphone wireframe
• Peer brainstorming math game concepts
• Discussion of wireframe techniques, flow
• Critique of Typing tablet mock-ups
LAB
• Math app research. Math game research?
• Paper sketches of math app flow! Do it!
• Choose a production strategy (e.g. learn some Adobe XD, or download Balsamiq Mockups, or use Photoshop/Illustrator with mock-up frame image)

Week Six 2/23/2021
¤ Reading for today Seductive Interaction Design, Chapter 1
• Motivating users
• Lo-fi digital wireframe demo. Use grid guides!
• Peer-to-peer paper wireframe sketch analysis
LAB
• Produce 'lo-fi digital' wireframe visualizations of math app screens

Week Seven 3/2/2021
¤ Reading for today “How People See” from 100 Things... (pp. 1-30)
¤ Critique of math app lo-fi wireframe (8 cellphone layouts)
• Introduce 4th assignment, client questionnaire
• Gestalt psychology, building your client questionnaire
LAB
• Imagine the clients you want!
• What do you need to know from them to make great work?
• Research. Ask a designer!

Week Eight 3/9/2021
¤ Reading for today: Building Brand Consistency
• Branding and visual identity. UX/UI deliverables
LAB
• Develop questionnaire appearance. Graphics, attention to detail

Week Nine 3/16/2021
¤ Questionnaire due, critique and peer-to-peer feedback
• Introduction: 5th assignment, Tour branding and web mock-ups (3 screen mock-ups)
• Market research peer activity: comparison of tours. Who are they for?
• Responsive design. Market research
LAB
• Brand attribute brainstorming. Logo development.
• Develop the tour brand's visual identity.
• Brainstorming, concept development sketching

Wellness Break 3/23/2021

Week Eleven 3/30/2021
¤ Reading for today “How People Think” from 100 Things... (pp. 68-88)
• The mental model. Personas
• Production issues and design elements (icons, color, typography, interface, illustration)
LAB
• Convey the place(s). The Establish a "call to action."

Week Twelve 4/6/2021
• Critique of tour branding web mock-ups
¤ Reading for today: Liu's "Designing for Kids" (website nngroup.com/articles/kids-cognition)
Introduction: 6th assignment, mad lib infotainment prototype for tablets (mock-ups of 10-12 screens)
• Designing for kids, education, and safety
• Research mad libs! Use mad libs websites and apps, and do them as printouts with others
• See redkid.net/madlibs for inspiration (bad interface!)
LAB
• Brainstorming, concept development, and sketchbook activity relating to 6th assignment Reading Chou

Week Thirteen 4/13/2021
• Infotainment and education. New media and empowerment
• Mock-ups production issues
• Peer-to-peer wireframe sketches and visual identity evaluation
LAB
• Production work on wireframe for case study

Week Fourteen 4/20/2021
• Navigation, all potential user actions
Making mock-ups interactive. Motion dynamics
LAB
Wiring up the interactive linking

Week Fifteen 4/27/2021 (10:30 AM)
Final critique (Infotainment prototype )
• Infotainment "mad lib" tablet apps
Tuesday, April 27 10:30 AM - 1:00 PM

1. Interface design taxonomy Due February 2
   
   • Using Adobe InDesign, typography, screenshot(s)
   • Working within the given template, analyze and write about two interface elements. Find and include examples (screenshots) of them. Do research about the elements to provide good descriptions with background, best design practices, etc.
2. Typing app mock-ups Due February 16
   
   • Make 4 landscape-mode "screenshots" for a tablet app that teaches touch typing
   • The visualizations represent four distinct moments/aspects of the app that could inspire people to want to download the app
3. Math app cellphone wireframe Due March 2
   
   • A series of 8 lo-fi "screenshots" that show a user's experiential "path" through a math app that you invent for phones
   • You may wish to apply gamification concepts to make the experience more seductive
   • Choose a clear target demographic for the app
   • Indicate the flow from each user decision (e.g. arrow from clicked here to the next screen)
4. Client Questionnaire Due March 16
   
   • Using Typeform.com free account
   • Produce a survey/form for new client work/projects
   • Apply interaction design principles to make the process interesting
   • Apply visual design options within Typeform.com
5. Tour Branding and Web mock-ups Due April 6
   
   • Make Web mock-ups for a tour giving agency/company/organization
   • Choose a destination that interests you (and factor in the images you'll need)
6. Mad lib tablet mock-ups & prototype Due April 27
   
   • Infotainment for tablets — 10 screen mock-ups
   • A mini-case study in Interaction Design
   • Written app description
   • Wireframe sketches
   • See redkid.net/madlibs for inspiration (a bad interface!)
   • Consider how the mad lib activity could be both more fun and more educational using the tablet as its medium rather than a book.
   • Use Adobe Illustrator, Photoshop, InvisionApp.com

Learning outcomes

Here is a partial list of course goals.

• Learn and apply interface design principles
• Analyze existing interaction designs and invent new ones
• Recognize ways to augment traditional media with interactive content
• Learn procedures and aesthetic approaches to the design of interfaces
• Conduct context specific research to inform interface designs
• Learn to maintain quality control for design consistency
• Apply prototyping techniques to enable collaborative development
• Visualize elegant and effective designs in the context of course projects
• Learn procedural protocols relevant to interaction design
• Critique the usability and aesthetics of student project designs
• Develop and document visual ideas through sketching and illustration

Software relevant to this course is listed below. Whatever tools are not free will be available for use in the computer labs.

This course will leverage several Adobe programs, including Adobe Illustrator and Adobe Photoshop, and possibly Adobe XD

This online tool is free for a few non-commercial projects and it will serve to make mock-up imagery active (navigation prototype) for the final project.

This free online portfolio tool is not required but it is highly recommended. You are encouraged to present your project work in this format as a way to develop your online presence as a designer.

Grades will be based on project assignments, attendance and class participation. You will receive feedback on the work you submit during the course via critique, in class, and drop-in "office hours." YOU MUST KEEP YOUR COPY OF ALL SUBMITTED WORK UNTIL THE END OF THE COURSE.

Make sure you read assignment descriptions carefully in Google Classroom. Completed projects are to be graded using the following criteria: timely completion, assignment requirements, design concepts, quality control, comprehension of the material, technical proficiency, project development, and demonstration of aesthetic and technical development.

Your grade for this course will be computed by the following formula:

• 10% Interface design taxonomy
• 15% Typing app tablet mock-ups
• 15% Math App cellphone screenshots
• 15% Client Questionnaire
• 15% Tour Branding and Web mock-ups
• 15% Mad Libs infotainment prototype
•  5% Reading presentation
• 10% General participation, attendance and critique

The following descriptions articulate factors relevant to grade assessment in this course.

Students who earn an “A” produce work that is impressive, goes beyond what is required of the course, and exemplifies a superb work ethic. Their work is exceptional. “A” students might — or should — share their knowledge with their classmates, and they are active participants in class discussions. “A”-grade students do not spend time distracted by others or digital devices, and are contributing members of the class. Lastly, “A”-level students demonstrate an evolving understanding of the material through iterative efforts of their work.

In the “A-” range, a student has performed very closely to the level of his or her “A”-level counterpart, but has produced at least one project/homework/component of the grading scheme that was below a grade of “A.” Perhaps the student missed too many classes, sed up to class late too often, or submitted an assignment/homework that was not “A”-level.

Students earning grades of “B+” produce very good work, which is close with that of their counterparts earning in the “C” range, but offer a sustained and meaningful structure to a critical user experience and design that is more complex than students earning a grade in the “C” range. “B+” students’ work is logically organized, responds to assignments in thoughtful and distinctive ways, and offers a sound user experience. Although minor coding and layout errors may be present, they are under control and do not impede user experience or content.

Overall, “B” range students produce work with good results. He or she possesses a strong understanding of the course’s content and shows a high level of competence in the skill set taught in the course.

Students in the “B-” range are producing work that is above adequate but below average. Their work shows flashes of very good work, but, overall, is not compelling for a grade of a “B.”

“These are average assignments. They will demonstrate some success in engaging with the assigned material. The document will show that the student can identify and work with key frameworks and methods with a particular set of content and apply them to ideas and examples found in other precedents, or other outside interactive experiences. Additionally, the assignment will demonstrate effort in the areas of user experience, interaction design. Typical of a “C/C+” assignment, however, is a disjointed sense of content hierarchy and user experience in connection with the page. Generally these assignments contain general coding errors which create unwanted or negative rendering, however, the assignments still work and an effort to debug and fix errors is present.”

In the “C” range, a student has show more than minimal progress to pass, but not quite on the level of a “C+” student.

A student who earns a grade of “D” has performed the bare minimum to pass the course. He or she has performed very near to that of a student who would typically fail, but has some basic understanding of important concepts related to the course. He or she has also shown some attempt at trying to grasp the material of the course. In essence, the student has produced work that shows evidence of minimal effort expended and/or minimal aptitude.

Failing grades are earned by students who do not submit required work, produce incomplete work, and/or do not participate consistently. Grades of “E” are also earned by students who show no comprehension of the topics discussed in class and no commitment to attempt to comprehend. Students who fail show no interest in learning, make no effort to remedy problem areas, are continually distracted in class by other students and/or mobile electronic devices, and interrupt class.

• Mental Health and Well-Being Students may experience stressors that can impact both their academic experience and their personal well-being. These may include academic pressures and challenges associated with relationships, mental health, alcohol or other drugs, identities, finances, etc. If you are experiencing concerns, seeking help is a courageous thing to do for yourself and those who care about you. If the source of your stressors is academic, please contact me so that we can find solutions together. For personal concerns, U-M offers a variety of resources, many which are listed on the Resources for Student Well-being webpage. You can also search for additional well-being resources here.
• Responsibility: Students are responsible for all assignments, even if they are absent. Late assignments, failure to complete the assignments for class discussion and/or critique, and lack of preparedness for in-class discussions, presentations and/or critiques will jeopardize the successful completion of this course.
• Participation: Class participation is an essential part of class and includes: keeping up with reading and assignments, and contributing meaningfully to class discussions, active participation in group work, and attending class regularly and on time.
• Attendance: Faculty members may fail any student who is absent for a significant portion of class time. A significant portion of class time is defined as five absences for classes that meet twice per week. Lateness or early departure from class will also be deducted from the attendance grade.
• Delays: In rare instances, your instructor may be delayed arriving to class. If he or she has not arrived by the time class is scheduled to start, you must wait a minimum of thirty minutes for his/her arrival. In the unlikely event that your instructor misses class entirely, a notice will be posted on this website indicating your assignment for the next class meeting.
• Electronic Devices: Use of electronic devices (phones, tablets, laptops) is permitted when the device is being used in relation to the course's work. All other uses are prohibited in the classroom and devices should be turned off before class starts.
• Academic Honesty and Integrity: The University of Michigan Flint views academic honesty and integrity as the duty of every member of the academic community. All members of the University community are expected to conduct themselves in accord with high standards of academic honesty and integrity. It is the responsibility of students to learn the procedures specific to their discipline for correctly and appropriately differentiating their own work from that of others. Compromising your academic integrity may lead to serious consequences, including (but not limited to) one or more of the following: failure of the assignment, failure of the course, academic warning, disciplinary probation, suspension or dismissal.

Here are some practical resources that are relevant to the course:

Google Classroom

• You must be signed in to visit Google Classroom

Required book

• 100 Things Every Designer Needs to Know About People (2nd Edition). ISBN-13 : 978-0136746911

Reading List

• Sign up via Google Docs while logged in with your uniquename

Illustrator

• Complete beginner’s guide to Adobe Illustrator
• Ep2/19
• Ep3/19