Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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.

Andrew Cassell

November 16, 2016
Tweet

More Decks by Andrew Cassell

Other Decks in Programming

Transcript

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

    View Slide

  2. View Slide

  3. View Slide

  4. @dcphp
    PHP PERFORMANCE
    PROFILING USING
    BLACKFIRE
    Fabien Potencier
    Washington DC Metro Area PHP Developer User Group

    View Slide

  5. 2016
    2016

    View Slide

  6. Interaction
    UI UX

    View Slide

  7. Project Management

    View Slide

  8. View Slide

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

    View Slide

  10. View Slide

  11. USABILITY

    View Slide

  12. View Slide

  13. View Slide

  14. Andrew Parker - thegongshow.tumbler.com

    View Slide

  15. View Slide

  16. git -r done

    View Slide

  17. View Slide

  18. View Slide

  19. View Slide

  20. View Slide

  21. Dashboard Projects Updates

    View Slide

  22. View Slide

  23. View Slide

  24. View Slide

  25. View Slide

  26. View Slide

  27. Interaction
    UI UX

    View Slide

  28. Interaction
    UI UX

    View Slide

  29. View Slide

  30. View Slide

  31. 31

    View Slide

  32. 32

    View Slide

  33. View Slide

  34. View Slide

  35. View Slide

  36. project
    task
    project_id (maybe null)
    user
    project_user
    ROLE_USER

    View Slide

  37. 7 Dirty Words of a Stakeholder Meeting
    1.Session
    2.Repository
    3.Abstract
    4.Interface
    5.Class
    6.Database
    7.Foreign Key

    View Slide

  38. View Slide

  39. View Slide

  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

    View Slide

  41. View Slide

  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

    View Slide

  43. Modes

    View Slide

  44. View Slide

  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

    View Slide

  46. O I

    View Slide

  47. Those who
    cannot learn
    from history are
    doomed to
    repeat it.
    - George Santayana

    View Slide

  48. View Slide

  49. View Slide

  50. View Slide

  51. View Slide

  52. View Slide

  53. View Slide

  54. View Slide

  55. View Slide

  56. View Slide

  57. View Slide

  58. View Slide

  59. View Slide

  60. View Slide

  61. REALITY

    View Slide

  62. CARS

    View Slide

  63. View Slide

  64. View Slide

  65. View Slide

  66. View Slide

  67. View Slide

  68. GUNS

    View Slide

  69. View Slide

  70. View Slide

  71. View Slide

  72. View Slide

  73. Mode Error

    View Slide

  74. View Slide

  75. View Slide

  76. View Slide

  77. #comodeerror

    View Slide

  78. Modes are a
    significant source of
    errors, confusion,
    unnecessary
    restrictions, and
    complexity in
    interfaces.
    - Jef Raskin

    View Slide

  79. vi

    View Slide

  80. View Slide

  81. Modeless

    View Slide

  82. View Slide

  83. emacs

    View Slide

  84. View Slide

  85. View Slide

  86. SEARCH

    View Slide

  87. View Slide

  88. View Slide

  89. View Slide

  90. View Slide

  91. View Slide

  92. View Slide

  93. View Slide

  94. View Slide

  95. Quasimode

    View Slide

  96. View Slide

  97. View Slide

  98. modes in
    web 1.0

    View Slide

  99. View Slide

  100. Edit

    View Slide

  101. View Slide

  102. Save

    View Slide

  103. View Slide

  104. View Slide

  105. Company Name

    View Slide

  106. View Slide

  107. View Slide

  108. View Slide

  109. View Slide

  110. View Slide

  111. Modal

    View Slide

  112. Modal

    View Slide

  113. Modal

    View Slide

  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

    View Slide

  115. View Slide

  116. View Slide

  117. View Slide

  118. View Slide

  119. View Slide

  120. View Slide

  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

    View Slide

  122. View Slide

  123. View Slide

  124. No Take
    Backsies

    View Slide

  125. Take Bathroom Selfie?

    View Slide

  126. View Slide

  127. Modal
    Alternative?

    View Slide

  128. Modals for Good
    :
    (

    View Slide

  129. View Slide

  130. View Slide

  131. User Account Deleted
    Andrew Cassell’s user account was deleted
    successfully. He will not be missed.

    View Slide

  132. Popovers

    View Slide

  133. View Slide

  134. View Slide

  135. Edit In
    Place

    View Slide

  136. View Slide

  137. View Slide

  138. Modeless

    View Slide

  139. View Slide

  140. View Slide

  141. Example

    View Slide

  142. We learn by
    example and by
    direct experience
    because there are
    real limits to the
    adequacy of verbal
    instruction.
    - Malcolm Gladwell

    View Slide

  143. View Slide

  144. View Slide

  145. View Slide

  146. View Slide

  147. View Slide

  148. 1.)Edit/POST

    View Slide

  149. View Slide

  150. View Slide

  151. View Slide

  152. 2.) Modals

    View Slide

  153. View Slide

  154. Define Task APIs

    View Slide

  155. View Slide

  156. 3.) Bring Features out
    of a Mode

    View Slide

  157. View Slide

  158. View Slide

  159. View Slide

  160. View Slide

  161. 4.) Quasimode
    (Drag & Drop)

    View Slide

  162. sortable

    View Slide

  163. View Slide

  164. View Slide

  165. 5.) Undo

    View Slide

  166. View Slide

  167. View Slide

  168. View Slide

  169. 6.) Edit in Place

    View Slide

  170. Description

    View Slide

  171. View Slide

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

    View Slide

  173. http://createjs.org/

    View Slide

  174. 7.) UI Quasimode
    (Panel)

    View Slide

  175. View Slide

  176. Task Based
    User Interface

    View Slide

  177. View Slide

  178. MODES
    SUCK

    View Slide

  179. View Slide

  180. View Slide

  181. If you think your design
    sucks. That just means
    you are becoming a
    better designer.

    View Slide

  182. Taste

    View Slide

  183. View Slide

  184. View Slide

  185. View Slide

  186. View Slide

  187. jobstobedone.org

    View Slide

  188. View Slide

  189. https://joind.in/event/
    phpworld-2016/no-modes---the-
    future-of-all-web-applications
    Rate this talk:

    View Slide

  190. http://bit.ly/2ajSIpO
    Youtube Playlist:

    View Slide

  191. THANK YOU

    View Slide

  192. @dcphp
    PHP PERFORMANCE
    PROFILING USING
    BLACKFIRE
    Fabien Potencier
    Washington DC Metro Area PHP Developer User Group

    View Slide