No Modes – The Future of all Web Applications

In 1970s and 1980s Computer Scientists realized that modes sucked for user interfaces. Larry Tesler (of Xerox PARC & Apple) and Jef Raskin (author, “The Humane Interface”) both described the principles of a modeless interface for computer interaction. 30 years later and web developers are still using modes in nearly every interaction. Learn how to use PHP and jQuery to ditch countless Edit and Save buttons and make your software more intuitive.

Transcript

1. The Future of Web Applications No Modes Andrew Cassell @alc277
4. @dcphp PHP PERFORMANCE PROFILING USING BLACKFIRE Fabien Potencier Washington DC Metro Area PHP Developer User Group
5. 2016 2016
6. Interaction UI UX
7. Project Management
9. http://www.sei.cmu.edu/reports/95tr021.pdf
11. USABILITY
14. Andrew Parker - thegongshow.tumbler.com
16. git -r done
21. Dashboard Projects Updates
27. Interaction UI UX
28. Interaction UI UX
36. project task project_id (maybe null) user project_user ROLE_USER
37. 7 Dirty Words of a Stakeholder Meeting 1.Session 2.Repository 3.Abstract 4.Interface 5.Class 6.Database 7.Foreign Key
40. cassell:~ cassell$: man fsck
 FSCK(8) BSD System Manager's Manual NAME fsck -- filesystem consistency check and interactive repai SYNOPSIS fsck -p [-f] fsck [-l maxparallel] [-q] [-y] [-n] [-d] DESCRIPTION The first form of fsck preens a standard set of filesystem matic reboot. Here fsck reads the filesystem descriptor t have ``rw,'' ``rq'' or ``ro'' as options, and that have no filesystem) are checked one at a time. When pass 1 comple drive containing each filesystem is inferred from the shor are assumed to be the partition designator. In preening m
42. “Since humans are more pliable than computers, it can be easier to make a human fit the computer’s limitations than to design the computer to fit the human’s needs. When that happens, the human becomes a prisoner trapped by the computer rather than liberated by it.” - Karla Jennings 42
43. Modes
45. “It is no accident that swearing is denoted by #&%!#$&. It’s what a typewriter used to do when you typed numbers when the Caps Lock was engaged.” - Dr. James Winter
46. O I
47. Those who cannot learn from history are doomed to repeat it. - George Santayana
61. REALITY
62. CARS
68. GUNS
73. Mode Error
77. #comodeerror
78. Modes are a significant source of errors, confusion, unnecessary restrictions, and complexity in interfaces. - Jef Raskin
79. vi
81. Modeless
83. emacs
86. SEARCH
95. Quasimode
98. modes in web 1.0
100. Edit
102. Save
105. Company Name
111. Modal
112. Modal
113. Modal
114. Interfaces must be designed to accommodate our ability to pay conscious attention to only one object or situation, called our locus of attention, at a time. - Jef Raskin
121. Imagine if every Thursday your shoes exploded if you tied them the usual way. This happens to us all the time with computers, and nobody thinks of complaining. - Jef Raskin
124. No Take Backsies
125. Take Bathroom Selfie?
127. Modal Alternative?
128. Modals for Good : (
131. User Account Deleted Andrew Cassell’s user account was deleted successfully. He will not be missed.
132. Popovers
135. Edit In Place
138. Modeless
141. Example
142. We learn by example and by direct experience because there are real limits to the adequacy of verbal instruction. - Malcolm Gladwell
148. 1.)Edit/POST
152. 2.) Modals
154. Define Task APIs
156. 3.) Bring Features out of a Mode
161. 4.) Quasimode (Drag & Drop)
162. sortable
165. 5.) Undo
169. 6.) Edit in Place
170. <span contenteditable="true">Description</span>
172. https://github.com/vitalets/x-editable
173. http://createjs.org/
174. 7.) UI Quasimode (Panel)
176. Task Based User Interface
178. MODES SUCK
181. If you think your design sucks. That just means you are becoming a better designer.
182. Taste
187. jobstobedone.org
189. https://joind.in/event/ phpworld-2016/no-modes---the- future-of-all-web-applications Rate this talk:
190. http://bit.ly/2ajSIpO Youtube Playlist:
191. THANK YOU
192. @dcphp PHP PERFORMANCE PROFILING USING BLACKFIRE Fabien Potencier Washington DC Metro Area PHP Developer User Group