No Modes – The Future of all Web Applications

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.

Be9645e99392d37fd0e8018f22122fc3?s=128

Andrew Cassell

November 16, 2016
Tweet

Transcript

  1. The Future of Web Applications No Modes Andrew Cassell @alc277

  2. None
  3. None
  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

  8. None
  9. http://www.sei.cmu.edu/reports/95tr021.pdf

  10. None
  11. USABILITY

  12. None
  13. None
  14. Andrew Parker - thegongshow.tumbler.com

  15. None
  16. git -r done

  17. None
  18. None
  19. None
  20. None
  21. Dashboard Projects Updates

  22. None
  23. None
  24. None
  25. None
  26. None
  27. Interaction UI UX

  28. Interaction UI UX

  29. None
  30. None
  31. 31

  32. 32

  33. None
  34. None
  35. None
  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
  38. None
  39. None
  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
  41. None
  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

  44. None
  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
  48. None
  49. None
  50. None
  51. None
  52. None
  53. None
  54. None
  55. None
  56. None
  57. None
  58. None
  59. None
  60. None
  61. REALITY

  62. CARS

  63. None
  64. None
  65. None
  66. None
  67. None
  68. GUNS

  69. None
  70. None
  71. None
  72. None
  73. Mode Error

  74. None
  75. None
  76. None
  77. #comodeerror

  78. Modes are a significant source of errors, confusion, unnecessary restrictions,

    and complexity in interfaces. - Jef Raskin
  79. vi

  80. None
  81. Modeless

  82. None
  83. emacs

  84. None
  85. None
  86. SEARCH

  87. None
  88. None
  89. None
  90. None
  91. None
  92. None
  93. None
  94. None
  95. Quasimode

  96. None
  97. None
  98. modes in web 1.0

  99. None
  100. Edit

  101. None
  102. Save

  103. None
  104. None
  105. Company Name

  106. None
  107. None
  108. None
  109. None
  110. None
  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
  115. None
  116. None
  117. None
  118. None
  119. None
  120. None
  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
  122. None
  123. None
  124. No Take Backsies

  125. Take Bathroom Selfie?

  126. None
  127. Modal Alternative?

  128. Modals for Good : (

  129. None
  130. None
  131. User Account Deleted Andrew Cassell’s user account was deleted successfully.

    He will not be missed.
  132. Popovers

  133. None
  134. None
  135. Edit In Place

  136. None
  137. None
  138. Modeless

  139. None
  140. None
  141. Example

  142. We learn by example and by direct experience because there

    are real limits to the adequacy of verbal instruction. - Malcolm Gladwell
  143. None
  144. None
  145. None
  146. None
  147. None
  148. 1.)Edit/POST

  149. None
  150. None
  151. None
  152. 2.) Modals

  153. None
  154. Define Task APIs

  155. None
  156. 3.) Bring Features out of a Mode

  157. None
  158. None
  159. None
  160. None
  161. 4.) Quasimode (Drag & Drop)

  162. sortable

  163. None
  164. None
  165. 5.) Undo

  166. None
  167. None
  168. None
  169. 6.) Edit in Place

  170. <span contenteditable="true">Description</span>

  171. None
  172. https://github.com/vitalets/x-editable

  173. http://createjs.org/

  174. 7.) UI Quasimode (Panel)

  175. None
  176. Task Based User Interface

  177. None
  178. MODES SUCK

  179. None
  180. None
  181. If you think your design sucks. That just means you

    are becoming a better designer.
  182. Taste

  183. None
  184. None
  185. None
  186. None
  187. jobstobedone.org

  188. None
  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