This is the Winter 23 final website.

Course Details

This course has five major learning objectives, some of which will be the focus of an individual assignment, others will practiced across multiple assignments.

• Overall Course Themes
• Course modules
• Other relevant courses

Overall Course Themes

In addition, students will do the following throughout the course:

• Navigate the Android Studio Development Environment.
• Use a version control system (Git) for tracking changes to your work.
• Read and use library and toolkit documentation.
• Read and navigate larger assignment specifications and starter code bases.
• Use advanced features of Java such as interfaces, abstract classes, inner classes, listeners and callbacks.
• Implement simple applications from scratch which requires:
  • Preparing Android mainifests.
  • Creating XML representions of objects that are added to your app dynamically through getting resources or inflation.
  • Support the Android Activity life cycle.
  • Developing an interactor hierarchy.
  • Handling events, including user input.
  • Displaying information to the screen with responsive layout.

Course modules

Drawing and Animation

Learning Goals Create hierarchies of objects and draw on the screen.

• Use drawing abstractions such as a Canvas to programmatically draw on screen and use coordinate transformations to move and scale and orient them.
• Place objects inherited from the View(details here) class anywhere onscreen by specifying it’s top left x/y coordinates.
• Size new components in the smallest possible “bounding boxes” so they are just big enough to fit its content (text, image, etc.).
• Nice interactions often incorporate animation. You should be able to set up an animations using timing options such as slow in/slow out.

Layout

Learning Goals Set up an interface so that it looks the as expected and reacts properly to changes in orientation and size.

• Visually represent an interface as an Interactor Hierarchy (and vice versa). This includes the ability to:
  • draw an interactor hierarchy with all of its components given only a picture of the interface.
  • sketch an interface from an interactor hierarchy.
• Create reactive layouts that properly position objects and handle dynamic events such as resizing or switching from portrait to landscape mode.
• Design and implement your own a layout container that can properly lay out any number of child items. Examples include a two column scrolling layout or a social media newsfeed that dynamically shows things as you scroll.
• Properly support the dynamic addition and removal of child components.
• Properly reacting to changes in scale or orientation.

Events and Interaction

Learning Goals 1) Handle input from the user, both at the application level and within a specific interactor. 2) Implement custom interactors that know how to deal with events such as touching on the screen.

• Use application callbacks (in the form of Java listeners) to respond to events such as a user pressing a Button or interacting with other objects on the screen.
• Define and use the Model-View-Controller pattern to develop modular and maintainable applications (“Separation of Concerns”)
• Build custom interactors beyond what is provided by default in the Android toolkit by responding to lower level events (such as click or keypress events).
  • Describe an interactors “Essential Geometry” and “Essential Behavior” (where does the interaction occur and where it does not).
  • Describe the Android the event handling/bubbling algorithm to properly build non-rectangular interactors, lenses, and other special case input handling.
  • Build and extend finite state machine that describe how the interaction works.
  • Build non-rectangular interactors by responding only to events within a given target.
• Support classes of interaction techninques by building variations on a single interactor that all make use of the same finite state machine controller for their behavior.

Application Development

Learning Goals Build applications using programatic support that meet basic standards for accessibility, security, interactivity, and user mental models.

• Fix accessibility problems including adding proper labeling, focus, navigation and contrast.
  • Properly use alt text to describe items on the screenhow to optimize navigation.
  • Use accessibility tools to ensure the app is inclusive and accessable.
  • Ensure that contrast and scaling are appropriate for all users.
• Assess and fix potential app security considerations based on Android’s best practices.
• Implement interface features such as “Undo” and “Redo” to help users recover from errors.
  • Capture and store information about changes to an interface over time.
  • Manage memory so too much history isn’t stored.
• Use storage methods such as Bundles and SharedPreferences.
• Use common Android interface interactors such as Toast, and FloatingActionButton.

Study and Communication about app concerns

Learning Goals Read detailed specs and library documentation; write clear and comprehensive reports on your findings as well as reflections on your learning.

• Critique other work with constructive observations and feedback.
• Analyze and describe app accessiblity, usability, and/or security problems in detail so that others could implement appropriate fixes.
• Describe and analyze the ethical implications of app development and use including:
  • Identifying possible concerns such as identity theft, manipulating users and changing their behavior.
  • Identifying possible unexamined biases such as assumptions of ability, language, or skin color.
• Use techniques to study actual responses to theoretical human behavior such as Fitts Law. This includes:
  • Developing questions to probe analytically.
  • Logging data from the system to support experimental design.
  • Properly consenting participants prior to running the study.
  • Analyzing the data and developing charts to illustrate conclusions.
  • Accurately reporting on the study process, results, data analysis, and conclusions.
• Design, implement, and analyze studies, such as a System Usability Scale study, to ensure an app is usable.

Other relevant courses

There are a number of classes on campus that teach related concepts which you may wish to consider in addition to this one. As of Winter 2022, here are the ones we are aware of:

• CSE 154: Web Programming: Au 21 This course covers languages, tools, and techniques for developing interactive and dynamic web pages. Topics include page styling, design, and layout; client and server side scripting; web security; and interacting with data sources such as databases.
• HCDE 310: Interactive Systems Design & Technology This course is a project based course that teaches how to prototype applications on the web using Python that solve human problems or enable new activities. Includes information about APIs and how people interact with them. It differs from CSE 340 in its choice of platform. Additionally, it doesn’t cover the theory of UI programming, nor issues such as accessibility, undo, and so on.
• INFO 340: Client side web development This is a programming course, and there will be significant overlap between the courses, as INFO 343 also touches on event based programming, output, and accessibility. CSE 154: Web Programming also covers some related material. However, both are about programming on the web using JavaScript instead of on Android, using Java. In addition, CSE 340 covers more of the theory of UI programming and design, similar to HCID 520.
• CSE 440: Introduction to HCI; 441: Advanced HCI This is an advanced series of courses for undergraduate seniors. The focus of 440 is less on programming and more broadly on methods for designing, prototyping, and evaluating user interfaces to computing applications, while 441 is an open ended capstone course. These are excellent follow on courses to 340, for a student who wants to go deeper into how to make usable, enjoyable effective interfaces, and how to solve interesting problems with HCI. Related is CSE 510, the HCI course for the professional masters program.
• CSE442 Data Visualization for majors or CSE412 Data Visualization for non majors both study techniques and algorithms for creating effective visualizations based on principles similar to those taught in this course. Those include graphic design, perceptual psychology, and cognitive science. Ultimately students learn how to design and build interactive visualizations for the web using different frameworks.
• HCID 520: User Interface Software + Technology (Wi 21, Wi 20, Wi 19) This course teaches about user interfaces, including what they are, how they are built, and some inventions in user interface software and technology. There are many similarities between these classes. However HCID 520 is only open to MHCI+D students Masters students.
• HCID 521: Prototyping This class is for the MHCI+D students only and focuses on prototyping techniques, not implementation. It covers everything from paper prototyping to physical interfaces to 3D printing.