CS 349: User Interfaces This course focusses on creating user interfaces (UIs), including underlying UI architecture and algorithms, practice implementing UIs using frameworks, and theories and methods relevant to interface design. https://www.student.cs.uwaterloo.ca/~cs349 Jeff Avery Gustavo Tondello Winter 2020
We’re experts with technology. This might be how we see a “computer”. What about the rest of the world? 2
For many users, this is a computer – it’s something they use to solve a problem or perform a task. 3
This is a course about “User Interaction” § Interaction is the process where a person expresses some intention to an application, and the application presents feedback to the person. 4
User Interface How does this relate to user interfaces? § Interaction refers to actions by user and system over time - Interaction is a dialog between the user and system - Alternates between the user manipulating controls and the system responding with feedback § A User Interface refers to the external presentation to the user that supports this - Controls (what you can manipulate to communicate intent) - Feedback (what the program uses to communicate its response) In this course, we’re concerned with building efficient graphical interfaces to support interaction. 5
Introduction 17
Apple Macintosh (1984) Apple’s Macintosh (Jan 1984), brings the GUI to the masses 18
Apple Macintosh: 1984 Windows 1.0: 1985 Commodore Amiga (1985) Windows 95: 1995 19
Computing Today 22
Modern GUI Interfaces remain graphical and based on the original GUI paradigms. A GUI does not have to look like Windows or macOS, or rely on mouse/KB - WIMP (Windows, Icons, Menus, Pointers) is a familiar paradigm 23
Touch interfaces Smartwatch Apple iPhone Multitouch wall Haptic interface 24
Gestural interface “Kinect” (2010) “MYO armband” (2013) 25 “Leap Motion” (2012)
Voice interface Apple HomePod Google Home Amazon Echo 26
Why Study HCI? § Well designed interfaces empower people to do things they couldn’t otherwise do - Movie production, music production, image editing, assistive technologies, … § A well-designed tool can change the world - The web browser, Linux, iPhone, spreadsheet, email, instant messaging, git, live streaming, … - Smartphones, tablets (multi-touch) - Voice agents (voice) § For many people, the UI is the computer. - Building effective UIs makes computers compelling and useful for many, many people 28
UI development jobs § ‘UI designer/developer’ or ‘Front-end developer’ (CS 349) - Focused specifically on UI – usually on a web applications context § ‘Application developer’ or ‘Software developer’ or ‘Full-stack developer’ - Works on all aspects of software development, including UI § ‘Mobile developer’ (CS 349) - Focused specifically on mobile apps, including UI § ‘UX (user experience) designer’ (CS 449) - Focused on understanding the user needs and designing the experience (usually focusing on the interaction, not on the visuals) CS 349 - Introduction 29
UI development jobs (CS 449) (CS 349) Source: https://asinthecity.com/2011/11/10/the-difference-between-a-ux-designer-and-ui-developer/ CS 349 - Introduction 30
UI development jobs (CS 349) (CS 449) Source: http://www.uxbeginner.com/how-to-navigate-the-ocean-of-ux-job-titles/ CS 349 - Introduction 31
Syllabus What to expect How to be successful Next steps
Goal § The focus of this course is on building user-interfaces. § Our overall objective is to teach you to build compelling and useful user- interfaces, across a variety of platforms and devices. Learning Objectives § Understand the architecture, algorithms and design principles underlying common user-interfaces (and UI frameworks) § Demonstrate the ability to implement a compelling and useful UI on both desktop and mobile platforms. § Articulate and use basic theories and methods for UI design. § Leverage Human-Computer Interaction research directly related to building user-interfaces. 33
Lectures § No textbooks! § Lectures include slides, videos, code demos. - Slides and demo code will be posted before lectures. - Not all course content will be on the slides. I will explain things in greater detail than is presented on the slides. - Anything discussed in class is testable (unless stated otherwise) § Laptops and tablets should be used to: - View lecture slides and take your own notes - Look up content related to lecture - Try sample code § During lecture, please do not: - Watch movies with the volume turned up - Work on assignments for other classes 34
Evaluation 30% Final Exam 70% Assignments - A1 (10%) - A2 (15%) - A3 (15%) - A4 (15%) - A5 (15%) We will introduce Java and Android programming in-class, but you’re expected to learn on your own. Assignments are your own individual work No group assignments! • We use MOSS automated plagiarism detection. If you copy or share • code, we will catch you. 35
Assignment Self-evaluation / Instructor Evaluation Self-evaluation § Totally optional, but recommended for the following benefits: - Improves learning - Is an important skill for effective learning and professional development - Will tell you what you need to improve in your implementation - Will tell you in advance what your assignment grade will likely be - Can help the TA mark your assignment faster and avoid the need for remark requests § However: - The TA will take your self-evaluation in consideration, but their assessment may be different - The instructor (TA) evaluation will be the one used for your course grade calculation Introduction 36
Getting Help Web Site : www.student.cs.uwaterloo.ca/~cs349/ § Schedule with topics, lecture notes, sample code, recommended reading § Office hours for lecture and assignment help Office Hours § 1-2 hours of office hours every day (details TBD) § Help with assignments, clarification on course material Piazza : https://piazza.com/uwaterloo.ca/winter2020/cs349 § Announcements, Q&A about course material and assignments § Sign up and use your real name (it helps us to help you) § Answer questions, but don’t be too explicit - do not post assignment code! § Staff will monitor - best-effort response, but no time-guarantees 37
What Next? 1. Check out the website: student.cs.uwaterloo.ca/~cs349 2. Register on Piazza: piazza.com/uwaterloo.ca/winter2020/cs349 3. Check out the sample code and slides. § `git pull’ the starter code and slides. § Details on the website 4. Try A0 § Install of Java 11, Git 2.x and IntelliJ 2019.3. § Run samples to make sure everything is configured properly. Introduction 38
Recommend
More recommend
