FMX 311 UX/UI User Experience & User Interaction
FA 24 | SECTION 1
T/R 10:00 – 11:50AM
CCB 134
Course Description
FMX 311 UI/UX is a studio/production course that studies the nature of interactive media development from the perspective of User Experience (UX) and User Interface and Interaction (UI) development, analyzing the differences and applications of such concepts. The class is divided into two main areas: the first part explores the nature of UI/UX using widely available production and prototyping tools, and the second part studies the nature of Interactivity through the creation of engaging, communicative, and efficient interfaces, fulfilling the Interaction Cycle requirements. Laboratory fee required.
Course Objectives
1) Define the nature of Interactivity
2) Understand the Interaction Cycle: Motivation, Action, Reaction, Satisfaction
3) Learn interaction tools for professional development
4) Learn pre-production tools for pre-visualization
5) Understand the differences between User Experience Vs. User Interaction
6) Define communication elements between developer and user
7) Understand the importance of visual development, including color palettes and fonts
8) Define navigation structures
9) Comprehend the importance of multimedia compression
10) Define the nature of Hypermedia
11) Define the notions of Prototyping for Interactive Media
A LITTLE STORY – courtesy of Haig Mardirosian, former Dean of CAL
<< I had a regular and too frequent visit with one of my several physicians yesterday, admittedly the practitioner I see the most for repetitive tests and such. I’m convinced that these appointments have nothing to do with any condition that I may suffer, but rather with the calculation of just how much billing the insurance carriers will tolerate on my account. About five days before my visit, as I lay in a haze from another medical adventure, I got an email from a physician’s group that does the billing and collecting work for the doctor I was about to see. It was very odd – a pediatric practice group sending bills for a doctor doing decidedly adult medicine. The communication said that I was now required to check in online prior to arriving at the doctor’s office four days later. “Check in” involved entering my entire medical history, billing information, next of kin, etc. etc., all information that the doctor had in hand and updated by me every year in his own records, in his own office, at his own practice. I dutifully went through the pages of electronic forms, only to end up at the big disclaimer page, with acknowledgement, electronic signature, and the check mark signifying that my typed name was my legal signature. I’ll now be training my hand to letter my name in 12 point Arial. Boom! The disclaimer just repeated and returned me to the top of page. It wouldn’t let me escape and my signature and check marks were MIA,. After four foiled attempts, I quit this mess. I’d just let them know on Monday that I had attempted the process but it failed. The system, however, would not give up, Emails and texts arrived every twelve hours for four days and their tone grew more inauspicious: “You MUST check in now!” They might as well have added, “earthling,” to the sentence. Screw this. I arrived at the office yesterday morning, to witness a chaotic scene and a full waiting room of people my age and older all punching away disgustedly at their devices. They had been told that they could not check in personally but HAD to do so electronically. A staff person in scrubs circulated through the waiting room grabbing people’s phones, many of which had never been used for any data or online function before. Techie-scrub-person pointlessly tried to get these poor folks to enter their data. Folks who could see the screen, nor navigate the onscreen keys cried out, “but I don’t know my primary care physician’s phone number. It in my phone!” I heard my name. I found the electronic helper-in-scrubs at the window ready to tell me me that I would not been seen until I had completed my forms. I cut her off and explained that I had tried, but that the disclaimer was a hopeless loop. She assumed a polite, but eye-rollish expression, “well there are about five or six disclaimers and they all look the same. You just have to keep on going.” It was then that the cries around the room of “I’ve done that already,” made sense. Everyone was being fooled by these disclaimers in disguise. So I returned to my seat, figured that they had implemented this insanity on a Monday morning with nothing more than this communication to DO IT! I nevertheless followed up and did notice that, if one actually could read the fine print of the disclaimers beyond the title of each (as though anyone reads a disclaimer), there were indeed about five documents demanding the electronic signature identically and severally. Whatever idiot coded this mess never stopped to think that, should anyone not finish thee signatures, it would be an easy matter of putting up a notice saying, “Please advance to the next page and sign the next form.” Once I had seen a nurse and was waiting for the doctor in another area, I heard the saddest moment of this insanity. A voicing around the corner said, “but I don’t use a computer.” It came from a bent over woman probably well up in her ‘80s trying to explain to one of the scrubbed technologists that she didn’t understand the process and had gotten this far in life never having to do anything like it. They didn’t care. She continued to explain. “I only talk with my phone.” “But if you don’t fill this out, we can’t communicate with you or keep your records, or bill you!” That last threat sounded pretty good from my angle. Regardless, they invited her into the office and put an iPad in front of her so that someone else in scrubs could answer the questions for her and thus create an account in her name. The doctor’s needs got met just fine. The patient, though, would receive no reminders of upcoming appointments, would not be checked in, would not receive bills for balances, and would not have access to her medical records unless a good bureaucrat-in-scrubs has the kindness of heart to dig her information up and read it to her. What does any of this have to do with health? In fact, it sickens. Oh, did I mention that their air conditioning was broken down on a 96 degree Florida day? >>
Process and Strategy
The goal of this class is to use available production tools to understand interactive production processes in professional settings.
It is ideal for you to own the Adobe Creative Cloud • in Particular Photoshop, Illustrator, Dreamweaver, InDesign, Premiere and After Effects • in case you are a commuter or you prefer working at home.
We will use XD extensively: you must use your Adobe account
Other tools we will mention are FIGMA and FLOWMAPP (under development)
All your assignments will be presented in public during our critiques: they should be uploaded to Canvas / Dropbox / student server BEFORE class starts, otherwise I will remove points off of the project grade. These will be backed up in the server space provided by your professor.
Make sure you check your UT webmail account regularly. We will use Canvas / Outlook permanently to post the grades and communicate.
Short readings will be distributed throughout the semester. Most of the information will be provided by the professor or will be found freely online. Critiques will frequently be initiated from various topics covered in the readings. In order to participate effectively you will need to have read the required texts and be able to articulate your responses to them within the context of class discussion and critique.
Use your own portable hard-drives, and JumpDrives such as Sandisk or others in case you have any, to store your work. Do not rely on the CASS LAb student server, it is not secure and you might lose your data. the most secure storage is your own remote web server. It is your responsibility to have a full complete backup of your work.
The computer labs are refrigerated… BRING a sweater or a jacket.
You MUST wash your hands with warm water and soap BEFORE and AFTER using any public computer!
Bring TONS of hand sanitizer and disinfecting wipes to make sure you do not catch any germs from the public computers.
If you are sick: YOU MUST WEAR A MASK in class to avoid infecting other students in a closed poorly ventilated lab, and you must use cleaning wipes and hand sanitizer constantly.
We care about the health and integrity of everyone participating in the class
Grading
There will be several projects throughout the course, including papers, assignments, quizzes and others. Each one of them will be a part of the final 80% of the grade. If necessary I will do some pop quizzes, depending on the students’ participation and motivation, and depending on how certain classes work, I might add an extra work not listed in the syllabus. The final project will count for 20% of the final grade.
The grades posted on Workday may not reflect the final grade on Canvas
| 01 PAIN POINT | 7% |
| 02 INFORMATION ARCHITECTURE | 8% |
| 03 PROTOTYPING | 10% |
| 04 UX DESIGN | 15% |
| 05 INTERACTIVE TYPOGRAPHY | 10% |
| 06 CSS3 ANIMATION | 15% |
| 07 INTERACTIVE RESUME | 15% |
| 08 FINAL | 20% |
ESSENTIAL READINGS
“Don’t Make Me Think: A Common-Sense Approach to Web Usability”
ISBN: 0321965515
https://www.amazon.com/Dont-Make-Think-Revisited-Usability/dp/0321965515
“The Design of Everyday Things” Donald A. Norman
ISBN: 9780262525671
https://mitpress.mit.edu/books/design-everyday-things-revised-and-expanded-edition
“The Design of Future Things” Donald A. Norman
ISBN: 0465002285
https://amazon.com/Design-Future-Things-Don-Norman/dp/0465002285
“Understanding Comics: The Invisible Art” Scott McCloud
ISBN: 9780060976255
https://www.amazon.com/Understanding-Comics-Invisible-Scott-McCloud/dp/006097625X
Resources
• https://developer.mozilla.org
• JAVASCRIPT: blog.udemy.com/javascript-tutorial-learn-the-basics
- Opera Web Standards Curriculum covers the basics of web standards-based design in HTML and CSS.
- Google’s HTML, CSS, and Javascript from the Ground Up presents the basics of web development with video tutorials presented by Google’s expert web developers.
- SitePoint is a pretty good reference for HTML, CSS and JavaScript. Their documentation always mentions feature support across different browsers, and describes known browser bugs.
- The W3C, itself, has a wiki-based general Learn page as well as an HTML element reference.
- The MDN (Mozilla’s Developer Network) takes over at intermediate CSS and covers JavaScript better than anyone.
• www.w3schools.com -> CSS3 / HTML 5 / Javascript / jQuery / DOM + REF
• HTML5 and CSS3, 8th Edition, Elizabeth Castro, PeachPit // http://www.elizabethcastro.com/ ( OPTIONAL )
FTP
Forklift | FUGU free | Filezilla
TEXT EDITOR
Visual Studio Code (free)
Final Exam Schedule
FALL
http://www.ut.edu/schedule/fallfinalexam/
SPRING
http://www.ut.edu/schedule/springfinalexam/
Possible last-minute changes
Although unlikely, it is possible that last-minute changes might be made to the dates for all assignments or class meetings, excepting only the final exam. In this unlikely event, I’ll make all possible efforts to inform students with sufficient lead-time.
I reserve the right to modify this syllabus for any reason at any time.