1. Accessibility & UI Arch.
CS 422: UI Design and Programming
HCI is the study of how people uses computer technologies and in turn how we can design user-friendly computer technologies. HCI drives innovation at the intersection of people and computers
Accessibility & UI Arch.

2. Reminder
GR1 is due TODAY (Full project proposal). A tentative rubric is posted on Piazza.
If your group is not listed on the sign up sheet, we will not grade GR1.
PS1 is due Feb 14. A tentative rubric is posted on Piazza.
We will cover Accessibility today before moving on to UI software architecture.

3. Accessibility

4. Things we will learn today
What are impairments? Why should we concern ourselves with impairments?
What is universal design?
What is assistive technology?
Some accessibility guidelines

5. Impairments Impairments can be physical or cognitive.
We’ll focus on physical impairments.

6. Impairments Visual impairments Hearing impairments Motor impairments
Color perception
Acuity (“legal blindness”)
Total blindness
Hearing impairments
Often varies with frequency
Motor impairments
Tremor and spasms
Muscle weakness and fatigue
Paralysis

7. Impairments Affect Everybody
Aging
Reduced visual acuity
Hearing loss
Arthritis
Overexposure
Noise-induced hearing loss
RSI
Situational disabilities
Driving a car
Walking down the street
In a noisy environment

8. Situational disabilities
Temporary conditions of ourselves or our environment that effectively cause impairment.

9. Which one is a situational disability?
A. Color blindness B. Dyslexia C. Wearing non-touchscreen gloves on a snowy day D. All of the above

10. Which one is a situational disability?
A. Color blindness B. Dyslexia C. Wearing non-touchscreen gloves on a snowy day D. All of the above

11. Universal Design
Universal design is a school of thought that takes this fact explicitly to heart, by seeking to design for all users, across as much of the spectrum of capability as possible.
Contrast this with the attitude that is implicit in this class, and in most actual design, where we mainly design for the typical user, and then discuss how to make it “accessible” to everybody else.
Universal design challenges us to think about supporting a wide range of capability from the start.

12. Universal Design Equitable use Flexibility in use Simple & intuitive
Perceptible information
Tolerance for error
Low physical effort
Size and space for approach and use

13. Example of universal design
Good universal designs are not dumbed down to make them universal.
One shouldn’t sacrifice efficiency or flexibility for typical users in order to enable users with reduced ability.
Instead, a good universal design has features that make the design better for everyone.
Classic examples are kitchen tools with fat, textured handles (like the vegetable peeler shown here); not only are they easier for arthritis sufferers to grip, they’re more comfortable and less error-prone for typical users too.

14. Assistive Technology: Examples
Output
Screen magnifier
Screen reader
Braille display
Screen flashing on sound
Pointing
Eye or head tracker
Puff-and-sip
Mouse keys
Typing
Onscreen keyboards
Sticky keys
Speech recognition
Screen magnifier software magnifies part of the display to make it easier to read, which helps users who have reduced acuity but are not totally blind. Screen readers help the totally blind, by reading the contents of the display aloud as speech. For totally blind users who know Braille, a screen reader can be connected to a Braille display, which lets them read the screen privately (and quietly) and probably faster as well.

15. Apple Watch is an example of:
Universal Design
Assistive technology
None of the above

16. Apple Watch is an example of:
Universal Design
Assistive technology
None of the above

17. Some accessibility guidelines
Section 508 is an accessibility standard for websites and software created by US government agencies or government contractors.
W3C Accessibility Initiative
Pointing interactions should have keyboard alternatives
Menus should be controllable by the keyboard
Forms and links should be navigable by keyboard
Needed by motor-impaired and vision-impaired
An accessible interface should be amenable to screen reading. All visual content should have textual alternatives.
Widgets, like textboxes and checkboxes, should have labels associated with them.
More examples and resources in the reading.

18. UI Software Architecture

19. Things we will learn today
Design patterns
JavaScript MV* Patterns
Walking the DOM tree
GUI implementation approaches

20. Design patterns
A pattern is a reusable solution that can be applied to commonly occurring problems in software design.
Patterns can provide generalized solutions which are documented in a fashion that doesn't require them to be tied to a specific problem.
When taking a high-level look at the software architecture of GUI software, design patterns have proven most useful.
Three of the most important patterns are model-view, view tree, and listener.

21. Design patterns
The model-view abstraction, which has evolved somewhat since its original formulation in the early 80’s;
The view tree, which is a central feature in the architecture of every important GUI toolkit; and
The listener pattern, which is essential to decoupling the model from the view.
Not the only ones…

22. Other Design Patterns E.g., Constructor pattern

23. If you haven’t used JavaScript before:
Parts 1, 2, and 3

24. View Tree
Virtually every GUI system has some kind of view tree. The view tree is a powerful structuring idea, which is loaded with responsibilities in a typical GUI.
Output
GUIs change their output by mutating the view tree
A redraw algorithm automatically redraws the affected views
Input
GUIs receive keyboard and mouse input by attaching listeners to views (more on this in a bit)
Layout
Automatic layout algorithm traverses the tree to calculate positions and sizes of views

25. Listener Pattern Input handlers are associated with views
Also called listeners, event handlers, subscribers, observers
To handle mouse input, for example, we can attach a handler to the view that is called when the mouse is clicked on it.

26. Listener Pattern
GUI input handling is an example of the Listener pattern
aka Publish-Subscribe, Event, Observer
An event source generates a stream of discrete events
e.g., mouse events
Listeners register interest in events from the source
Can often register only for specific events - e.g., only want mouse events occurring inside a view’s bounds
Listeners can unsubscribe when they no longer want events
When an event occurs, the event source distributes it to all interested listeners

27. JavaScript MV* Patterns
Three common patterns
MVC (Model-View-Controller),
MVP (Model-View-Presenter) and
MVVM (Model-View-ViewModel)

28. MVC (Model-View-Controller)
MVC is an architectural design pattern that encourages improved application organization through a separation of concerns.
It enforces the isolation of business data (Models) from user interfaces (Views), with a third component (Controllers) traditionally managing logic and
The pattern was originally designed by Trygve Reenskaug during his time working on Smalltalk-80 (1979) user-input. 

30. Advantages of Model-View
Separation of responsibilities
Each module is responsible for just one feature
Model: data
View: input and output
Decoupling
View and model are decoupled from each other, so they can be changed independently
Model can be reused with other views
Multiple views can simultaneously share the same model
Views can be reused for other models

32. MVP (Model-View-Presenter)
Model-view-presenter (MVP) is a derivative of the MVC design pattern which focuses on improving presentation logic. 
The P in MVP stands for presenter. It's a component which contains the user-interface business logic for the view.
Unlike MVC, invocations from the view are delegated to the presenter, which are decoupled from the view and instead talk to it through an interface.
This allows for all kinds of useful things such as being able to mock views in unit tests.
MVP is generally used most often in enterprise-level applications where it's necessary to reuse as much presentation logic as possible.

33. MVVM (Model-View-ViewModel)
MVVM (Model View ViewModel) is an architectural pattern based on MVC and MVP, which attempts to more clearly separate the development of user-interfaces (UI) from that of the business logic and behavior in an application. 
The Model in MVVM represents domain-specific data or information that our application will be working with. A typical example of domain-specific data might be a user account (e.g., name, avatar, ) or a music track (e.g., title, year, album).
The View is the only part of the application that users actually interact with. They are an interactive UI that represent the state of a ViewModel.
The ViewModel can be considered a specialized Controller that acts as a data converter. It changes Model information into View information, passing commands from the View to the Model.
Views and ViewModels communicate using data-bindings and events.
MVVM (by name) was originally defined by Microsoft for use with Windows Presentation Foundation (WPF) and Silverlight

34. DOM tree The backbone of an HTML document are tags.
According to Document Object Model (DOM), every HTML-tag is an object. Nested tags are called “children” of the enclosing one.
The text inside a tag it is an object as well.
All these objects are accessible using JavaScript.

35. Example

36.  <head>,
Walking the DOM
The DOM allows to do anything with elements and their contents, but first we need to reach the corresponding DOM object, get it into a variable, and then we are able to modify it.
All operations on the DOM start with the  document object. From it we can access any node.
A script cannot access an element that doesn’t exist at the moment of running. In particular, if a script is inside <head> then document.body is unavailable, because the browser did not read it yet.

37. Walking the DOM

38. Let’s try out How to access: The <div> DOM node?
The <ul> DOM node?
The second <li> node?

39. The <div> DOM node. document. body
The <div> DOM node? document.body.firstElementChild // or document.body.children[0]
The <ul> DOM node?
document.body.lastElementChild
// or
document.body.children[1]
The second <li> node?
document.body.lastElementChild.lastElementChild

40. GUI implementation approaches
Procedural programming
Declarative programming
Direct manipulation

41. Procedural programming
Code that says how to get what you want
An explicit flow of control
Put down block A.
Put block B on block A.
Put block C on block B.

42. Declarative programming
Code that says what you want
No explicit flow of control
A tower of 3 blocks.

43. Direct Manipulation
Creating what you want in a direct manipulation interface
E.g., Draw, drag-and-drop, etc.

44. What kind of GUI implementation is using the Design view in Adobe Dreamweaver?
Direct Manipulation
Declarative programming
Procedural programming
None of the above

45. What kind of GUI implementation is using the Design view in Adobe Dreamweaver?
Direct Manipulation
Declarative programming
Procedural programming
None of the above

46. What kind of GUI implementation is using the Design view in Adobe Dreamweaver?
Direct Manipulation
In direct manipulation style, the programmer uses a direct-manipulation graphical user interface to create the view tree.
Usually called GUI builders
Offer a palette of view object classes, a drawing area to arrange them on, and a property editor for changing their properties.
A good tool for occasional web designers who favor learnability and safety over efficiency.

47. What kind of GUI implementation is this?
Direct Manipulation
Declarative programming
Procedural programming
None of the above

48. What kind of GUI implementation is this?
Direct Manipulation
Declarative programming
Procedural programming
None of the above

49. What kind of GUI implementation is this?
tag : type of an element
property: attribute of an element
Declarative programming
In declarative style, the programmer writes code that directly represents the desired view tree.
There’s no explicit flow of control in a declarative specification of a tree; it doesn’t do, it just is.
Markup language such as HTML is an example of declarative UI programming.
An HTML element is a component in the view hierarchy.

50. What is the DOM tree? What are the tags and attributes here?

51. What kind of GUI implementation is this?
Direct Manipulation
Declarative programming
Procedural programming
None of the above

52. What kind of GUI implementation is this?
Direct Manipulation
Declarative programming
Procedural programming
None of the above

53. What kind of GUI implementation is this?
Procedural programming
In procedural style, the programmer has to say, step-by-step, how to reach the desired state.
There’s an explicit thread of control. This means you’re writing code (in, say, Javascript) that calls constructors to create view objects, sets properties of those objects, and then connects them together into a tree structure (by calling, say, appendChild() methods).
Javascript can procedurally mutate a DOM or view tree

54. Are these the same?
Yes No

55. Are these the same?
Yes No

57. Advantages & Disadvantages
Declarative is usually more compact
Programmer only has to know how to say what, not how
Automatic algorithms are responsible for figuring out how
Declarative may be harder to debug
Can’t set breakpoints, single-step, print in a declarative spec
Debugging may be more trial-and-error
Declarative specs make direct-manipulation authoring tools possible
Declarative spec can be loaded and saved by a tool
Procedural specs generally can’t

58. Declarative UI for Model/View Binding
A reactive template makes declarative connections between model and view
<input type="text" ng-model="userName"> Hello, {{userName}}!
AngularJS, ReactJS, and Meteor are recent web toolkits that offer reactive templates
But data binding exists in many other toolkits too (e.g. Android, Visual Basic)
For example, the AngularJS code here binds the <input> textbox to a model variable named userName, so that whenever the user edits the content of the textbox, the userName variable will be updated to match the textbox. It’s a two-way binding, so if the model variable is changed programmatically, rather than by the user, then the textbox will update to match the model.
The example also shows {{...}} template syntax that displays model data in the view. The AngularJS framework automatically takes care of updating or regenerating the HTML whenever the referenced part of the model changes.

59. Next class
Input