“Restful User Experience”
         Unconventional views on
  user experience vs. architectural design



             Wayn...
What is this all about?
                                To share
                           my humble opinions
           ...
Background
• Representational state transfer (REST)
  – A software architecture style for distributed
    hypermedia syste...
The REST Triangle
[Post, Get, Put, Delete],                                               Hypermedia: HTML, XML,
 [Post, G...
REST vs. RPC
• Resource-centric view       • Command-centric view
   – ONE uniform set of         – Custom, unique sets of...
REST vs. SOAP
• REST simplicity =         • WS-* Complexity =
  freedom from choice         freedom of choice

  – 5 decis...
UX through REST lens




     Image Source: http://www.flickr.com/photos/mark_boucher/794747329/
UX Differences
                        in software architectural terms




                                               ...
iPhone Feature List …




                        Source: http://www.apple.com/iphone/
… aka “Sitemap”
                                                /calendar    /photos

                                    ...
Conceptual Restful State Machine of iPhone
     i.e., web browsing mentality can be mapped smoothly

                  /ph...
The iPhone Triangle

[Tap, Glide, Flick, Pinch,                                                   CoverFlow, List, Icon,
 ...
Restful User Experience (RUX)

      UNIFORM                                                        STANDARDIZED
      UNI...
Further RUX Example – Universal Remote Control


                                                          • One-Touch Con...
Different Approaches to Universal Remote Control, aka
                        RUX vs. RPC-UX



          15 Devices

    ...
RUX or RPC-UX?
   aka, REST or RPC




 Image Source: http://deadthingsdontfly.deviantart.com/art/thisway-thatway-72119766
freedom of choice                                          freedom from choice



         4+ 10+
                        ...
iPhone Takes 2/3 of Mobile Market




           Source: http://blog.concentricsky.com/2009/03/iphone-takes-23-of-mobile-m...
Implications
•   Market suggests RUX popularity
    – Device / application with lots “nouns” in usage scenarios better ado...
REST through UX lens




      Image Source: http://www.flickr.com/photos/valpopando/2787823568/
Less is More (More or Less):
     Uncommon Sense and the Design of Computers


System Functionality vs. Human             ...
Software Architecture Design
                                 through “less is more” lens


System Functionality vs. Human...
A Strong AND General System?
                 a.k.a., integrated set of strong specific systems


                        ...
Approaches to “Net Benefit”
         in Software Systems Integration



                   Solution A:
                   ...
Less is More
The world wide web works by design, not magic




       • Few verbs
                                Whole un...
More or Less?
Situations where RPC works way better …


 Strong Specific System                          Weak General Syst...
More or Less?
   … and REST works positively terribly




Try playing piano in a browser or on an iPhone all day …


     ...
REST or RPC?
aka, RUX or RPC-UX




Image Source: http://deadthingsdontfly.deviantart.com/art/thisway-thatway-72119766
RUX vs. RPC-UX versus REST vs. RPC
                             RPC-UX                                        RUX
        ...
UX Classification of iPhone Apps

                RPC-UX                                                                  ...
“Pure” RPC vs. “Pure” REST
       Difference in Aggregated Complexity


V                                    R      V     ...
A Pragmatic Architectural Approach
                                   for
             Large Scale System Integration
    ...
The Pragmatic Architectural Approach to
             Realize “Net Benefit”

                 Tactic Use of RPC (RPC-UX):
 ...
The Result – A Hybrid System

                  Actual System                        Cognitive Load
              Strength...
Implications
•   Complexity should be a decisive factor in architectural design
     – For small & simple systems, either ...
Last Not Least
Always Picture Your System First …




                                 Your
                              ...
References
•   Roy T. Fielding’s DISSERTATION
     – Architectural Styles and the Design of Network-based Software Archite...
“Everything should be made as
simple as possible, but not simpler.”




        Image Source: http://en.wikipedia.org/wiki...
Upcoming SlideShare
Loading in …5
×

Restful User Experience

11,110 views

Published on

Unconventional views on user experience and architectural design

Published in: Technology, News & Politics
2 Comments
20 Likes
Statistics
Notes
No Downloads
Views
Total views
11,110
On SlideShare
0
From Embeds
0
Number of Embeds
184
Actions
Shares
0
Downloads
274
Comments
2
Likes
20
Embeds 0
No embeds

No notes for slide

Restful User Experience

  1. 1. “Restful User Experience” Unconventional views on user experience vs. architectural design Wayne Lee, May 2009 http://trilancer.wordpress.com/
  2. 2. What is this all about? To share my humble opinions on user experience designs with insights from representational state transfer studies as well as inspecting software architectural design with user experience philosophy to improve overall system design … Or simply put, to study through UX REST LENS and through REST UX LENS to better system designs Image Source: http://www.flickr.com/photos/danielgreene/344196890/ http://www.flickr.com/photos/surstubben/475404411/
  3. 3. Background • Representational state transfer (REST) – A software architecture style for distributed hypermedia systems, e.g., the World Wide Web – Introduced by Roy Fielding in 2000 • User experience (UX) – The overarching experience a person has as a result of interactions with a product or service, its delivery, and related artifacts, according to their design
  4. 4. The REST Triangle [Post, Get, Put, Delete], Hypermedia: HTML, XML, [Post, Get, Put, Delete], Hypermedia: HTML, XML, Represe [C R U D] … JSON, JPG, GIF … [C R U D] … JSON, JPG, GIF … Verbs Constrained Set Constrained Set ntations Constrained Set Constrained Set RESOURCES Nouns Universal URI, XRI … Universal URI, XRI … Unconstrained Set Unconstrained Set
  5. 5. REST vs. RPC • Resource-centric view • Command-centric view – ONE uniform set of – Custom, unique sets of methods (verbs) methods (verbs) – Standard media types – Custom media types – Lots resources (nouns) – Fewer objects (nouns) – Some common knowledge – Prior specific knowledge required to access ALL required to locate / access resources each object
  6. 6. REST vs. SOAP • REST simplicity = • WS-* Complexity = freedom from choice freedom of choice – 5 decisions to choose – 12 decisions to choose among 16 alternatives among 32 alternatives – 12 decisions already – 2 decisions already taken (but 5 are DIY) taken (SOAP, WSDL + XSD) Source: http://www.jopera.org/docs/publications/2008/restws
  7. 7. UX through REST lens Image Source: http://www.flickr.com/photos/mark_boucher/794747329/
  8. 8. UX Differences in software architectural terms l” ” tfu PC es “R “R Press together to lock / unlock “Dumb Phone” iPhone • Lots models, varying UX • Few models, consistent UX • Lots buttons, with function overload • Few buttons, soft keys on-demand • Various key-combinations to invoke lots • Few gestures (tap, flick, glide…) to (sometimes mysterious) functions invoke ALL functions Image Source: Nokia & Apple
  9. 9. iPhone Feature List … Source: http://www.apple.com/iphone/
  10. 10. … aka “Sitemap” /calendar /photos /sms /maps /youtube /weather /stocks /notes Home /calc /itunes /apps /phone /ipod /sms /safari
  11. 11. Conceptual Restful State Machine of iPhone i.e., web browsing mentality can be mapped smoothly /phone/favorites /phone/favorites/Jerry /phone/contacts/Tom /phone/contacts Call (submit) /phone /phone/keypad /phone/call Dial (form input)  Call (submit) End Call /phone/voicemail /phone/voicemail/Emily Call Back (submit) Delete /phone/reschedule State Transitions Explained with REST Create a new call /calendar POST /phone/call Call session resource Destroy current DELETE /phone/call End Call call session /mail Redirect back to state before call
  12. 12. The iPhone Triangle [Tap, Glide, Flick, Pinch, CoverFlow, List, Icon, [Tap, Glide, Flick, Pinch, CoverFlow, List, Icon, Represe Rotate, Swing … ] ] Map, Table, Player … Rotate, Swing … Map, Table, Player … Verbs Constrained Set Constrained Set ntations Constrained Set Constrained Set Nouns Events, SMS, Mails, Photos, Events, SMS, Mails, Photos, Songs, Videos, Apps … Songs, Videos, Apps … Unconstrained Set Unconstrained Set
  13. 13. Restful User Experience (RUX) UNIFORM STANDARDIZED UNIFORM STANDARDIZED Represe buttons //commands // Info presentation buttons commands Info presentation Verbs ntations gestures … layouts //views gestures … layouts views Nouns UNLIMITED UNLIMITED Volume of content Volume of content indexed or hyperlinked indexed or hyperlinked
  14. 14. Further RUX Example – Universal Remote Control • One-Touch Control • Up to 15 components: video, audio, & gaming • Compatibility: supports 5,000+ brands & 225,000 devices Logitech Harmony 1000 Advanced Universal Remote Source: http://www.logitech.com/index.cfm/remotes/universal_remotes/devices/373&cl=US,EN
  15. 15. Different Approaches to Universal Remote Control, aka RUX vs. RPC-UX 15 Devices VS Logitech Harmony 1000 5 Devices 8 Devices 16 Devices Sony RM-AX4000A Logitech Harmony 510 Sony RMVL610B for common users for power users Image Source: Sony & Logitech
  16. 16. RUX or RPC-UX? aka, REST or RPC Image Source: http://deadthingsdontfly.deviantart.com/art/thisway-thatway-72119766
  17. 17. freedom of choice freedom from choice 4+ 10+ 3 Models 14 10 Models 4 Models Models Models Models 12 (color variation included) Models / Series Source: http://www.electronista.com/articles/08/06/30/rbc.high.iphone.demand/
  18. 18. iPhone Takes 2/3 of Mobile Market Source: http://blog.concentricsky.com/2009/03/iphone-takes-23-of-mobile-market/
  19. 19. Implications • Market suggests RUX popularity – Device / application with lots “nouns” in usage scenarios better adopt RUX to ease user access – RPC-UX still works with limited nouns, but potential extensibility greatly hindered by e.g., physical shape • iPhone resembles web browsing experiences – If you can surf the Web, you can use an iPhone – If you can’t “surf” a phone, you won’t use it to surf the Web • Less choices + good design = good business UX through REST lens
  20. 20. REST through UX lens Image Source: http://www.flickr.com/photos/valpopando/2787823568/
  21. 21. Less is More (More or Less): Uncommon Sense and the Design of Computers System Functionality vs. Human System Strength vs. Generality y alit on ti nc Fu of Example: Potato Peeler th row (Can do FEW things BETTER than others) G Strength Strong Growth of Human Capability Example: Generic Kitchen Knife Specific (Can do LOTS things, but NOT optimized) System Threshold of Frustration a.k.a. “Complexity Barrier” Weak General System Generality Source: http://www.billbuxton.com/LessIsMore.html
  22. 22. Software Architecture Design through “less is more” lens System Functionality vs. Human System Strength vs. Generality • SOA • “Smartphone” which demand lity RPC systems, Dedicated client na really smart user tio nc Specific Remote Control… Fu Strength Strong Human Capability Restful systems, Web browser Specific Universal Remote Control… System • Web dev • iPhone Weak General System Generality The theories hold true for developers & users alike …
  23. 23. A Strong AND General System? a.k.a., integrated set of strong specific systems Unlikely – “Net Benefit” – Due to “threshold of frustration” from high A theoretical solution from Buxton about cognitive load in design & use digital and networked devices … Strength Strength Cognitive Load “Net Benefit” Threshold of Frustration Generality Generality Net Benefit: devices communicate & cooperate with each other, thereby assuming much of the load that would otherwise burden the user … Source: http://www.billbuxton.com/LessIsMore.html
  24. 24. Approaches to “Net Benefit” in Software Systems Integration Solution A: Unlikely Solution A: Intelligence in each system to enable Intelligence in each system to enable due to even more automatic communication & collaboration automatic communication & collaboration complexity therein between systems … aka. Magic between systems … aka. Magic Solution B: Feasible Solution B: Apply principles, standardization, Apply principles, standardization, Apply “less is more” simplification, unification & specifications… simplification, unification & specifications… for greater good aka. Design Constraints aka. Design Constraints
  25. 25. Less is More The world wide web works by design, not magic • Few verbs Whole universe of knowledge REST • A few MIME types only clicks away • Uniform resource URI Image: 3D Map of World Wide Web from www.opte.org
  26. 26. More or Less? Situations where RPC works way better … Strong Specific System Weak General System Looking for a Presenter? Handy & efficient Overkill & inconvenient Source: http://www.logitech.com/index.cfm/remotes/presentation_remote/devices/175&cl=us,en
  27. 27. More or Less? … and REST works positively terribly Try playing piano in a browser or on an iPhone all day … Source: http://www.daniellaberge.com/music/webpiano/webpiano1.htm http://moocowmusic.com/
  28. 28. REST or RPC? aka, RUX or RPC-UX Image Source: http://deadthingsdontfly.deviantart.com/art/thisway-thatway-72119766
  29. 29. RUX vs. RPC-UX versus REST vs. RPC RPC-UX RUX • Direct & Efficient • Lower “cognitive load” working with Pros large complex systems • High “cognitive load” operating large • Indirect / inefficient for responsive / Cons complex systems repetitive tasks • Fits specific command-&-control tasks • Fits general tasks Conclusion • Good for power users, professionals … • Good for common users, info seekers… RPC REST • Optimized for specific task • Low technical barrier to entry Pros • Fine-grained control • Massively extensible / scalable • Hidden status & implicit semantics • Performance penalty, hard to customize Cons • Complicated testing & debugging • Coarse-grained control • Fits proprietary mission-critical apps • Fits open resource-oriented apps Conclusion • Costly planning & implementation • Easier planning & implementation
  30. 30. UX Classification of iPhone Apps RPC-UX RUX QuickVoice Recorder BrainTeaser Kindle for iPhone FedEx Mobile quot;Purequot; RPC-UX quot;Purequot; RUX RPC REST A given system is usually a balanced combination of RPC-UX & RUX, aka RPC & REST
  31. 31. “Pure” RPC vs. “Pure” REST Difference in Aggregated Complexity V R V R N N # of systems integrated V – Verbs (method) R – Representations (media) Low High N – Nouns (object, resource)
  32. 32. A Pragmatic Architectural Approach for Large Scale System Integration V R A REST “Core” Some RPC “Deviations” • Governing constraints • Local architecture & principles ARCHITECT • Uniform interfaces & views • Special methods or layouts • Mitigated overall complexity • Optimized local performance DEVELOPER • Clearer global design • Optimized local design • Minimized cognitive load • Optimized local operation USER • Assured common user access • Convenience for power users N
  33. 33. The Pragmatic Architectural Approach to Realize “Net Benefit” Tactic Use of RPC (RPC-UX): Tactic Use of RPC (RPC-UX): Strong Specific Approach Specific command, custom configuration, Local Specific command, custom configuration, To strengthen specific tasks non-standard interface, proprietary layout… non-standard interface, proprietary layout… Deviance and power users To optimize specific local designs To optimize specific local designs + + + Strategic Use of REST (RUX): Strategic Use of REST (RUX): Weak General Approach Architectural constraints, standardization, Global Architectural constraints, standardization, For common user access with simplification, convention over configuration… simplification, convention over configuration… Uniformity minimized cognitive load To mitigate overall complexity for design To mitigate overall complexity for design
  34. 34. The Result – A Hybrid System Actual System Cognitive Load Strength & Generality Perceived by User Strong specific features atop Strength Strength Threshold of Frustration “Net Benefit” foundation Generality Generality
  35. 35. Implications • Complexity should be a decisive factor in architectural design – For small & simple systems, either RPC or REST will work – For large complex system integration: Strategic use of REST + Tactic use of RPC recommended • An actual system architecture should be a reasonable balance of REST + RPC, according to usage nature • Always fight complexity with Architectural Wisdom, not prayers for miracle REST through UX lens
  36. 36. Last Not Least Always Picture Your System First … Your System
  37. 37. References • Roy T. Fielding’s DISSERTATION – Architectural Styles and the Design of Network-based Software Architectures • Wikipedia: – http://en.wikipedia.org/wiki/Representational_State_Transfer – http://en.wikipedia.org/wiki/User_experience • Bill Buxton: – http://www.billbuxton.com/LessIsMore.html • iPhone App Store – http://www.apple.com/iphone/appstore/
  38. 38. “Everything should be made as simple as possible, but not simpler.” Image Source: http://en.wikipedia.org/wiki/File:Albert_Einstein_portrait.jpg

×