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 Slides based on Jeff Avery’s Hanae Rateau Spring2020
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 (input) and the system responding with feedback (output) 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) “Leap Motion” (2012) 25
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
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 All material and information can be found on the website : https://www.student.cs.uwaterloo.ca/~cs349/s20/index.html All lectures are on video. For some lectures, code demo and video tutorial will be available on the website. If you have any questions regarding the lectures, I will host short Q&A sessions once a week. You will be able to ask lecture related questions. 34
Evaluation 20% Final Quizz 70% Assignments - A1 (15%) - A2 (25%) - A3 (30%) - A4 (30%) 10% Quizzes We will introduce Java and Android programming in- class, but you’re expected to learn on your own. Online quizzes will be available on the website. 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 This is optional but recommended as it has benefits: - Improves learning - Important skill even as a professional developer - 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 No Office hours but the TAs and I will have Piazza slots to answer questions there. 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 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
