Design on Rails for Usability

Transcription

1 Design on Rails for Usability Design meets development

2 Who am I? Name: Christian Lupp Background: System-Design? 2

3 Who am I? I m... sketching & designing coding blogging... an entrepreneur 3

4 Design & development... two worlds collide 4 Picture: Fraport AG

5 Design & development... two worlds collide Terminal 5 Picture: Fraport AG

6 Design & development... two worlds collide Console 6

7 Design & development... two worlds collide Code 7

8 Design & development... two worlds collide Code... in German it s even worse 8

9 But there are a lot of things we have in common... We all begin with a white piece of paper We all have to create something new We all need a lot of creativity We all work at the direct interface to the user We all have to solve wicked problems We all work agile We all try to creat something elegant and beautiful 9

10 Wicked problems Source: flickr.com/photos/lonebluelady/

11 We solve wicked problems... Wicked?... there is no definitive formulation of a wicked problem - formulating the problem and finding a solution are basically the same thing.... wicked problems have no stopping rule. There may always be a better solution.... solutions to wicked problems are not true-or-false but good-or-bad in the specifc context.... every wicked problem can be considered a symptom of another problem.... every wicked problem is essentially unique. 11 Source: Rittel/Dehlinger

12 We solve wicked problems... Is there anything we can do? Yes! sketch and design alternative solutions. evaluate and compare the solutions within the context with users/ customers as there is no internal stopping rule set your own rules: time, budget,... 12

13 We solve wicked problems Source: Rittel/Dehlinger

14 Ideas grow on paper 14 Picture: Frank O. Gehry, Bilbao, Spain

15 Ideas grow on paper 15 Picture: Frank O. Gehry, Bilbao, Spain

16 Ideas grow on paper 16 Picture: Frank O. Gehry, Bilbao, Spain

17 Ideas grow on paper 17 Picture: Frank O. Gehry, Bilbao, Spain wikipedia.org

18 Ideas grow on paper Talk with your pencil Visualize your ideas Map your ideas in landscapes Christian Lupp RailsConfEurope, Berlin September 4th,

19 ... bad ideas need to go to the trash Design also means: reject scetched alternatives... let bad solutions loose, and go on with the good ones. 19

20 Evaluate by using models 20 Source: Picture Mercedes Benz

21 Evaluate by using models... new concepts-cars are also made out of foam and clay! 21 Picture: culturedcode.com

22 Visualisation & modelling Sketching / Storyboarding Rendering Work model Functional model Prototype What s presented? Context & idea of the application Application concept Logic & navigation Functinal interaction Technological feasibility What s the goal? Define the contextual needs of users Visualize the service idea Where is Rails Make service understandable here? Experience the application structure Evaluate the real use & the implementation What s being worked with? Sketch, user scenario, need and idea landscapes Use-cases, graphics, collages Flowcharts, mock-ups, slideshows interactive slideshows fake application application network application 22

23 Visualisation & modelling Sketching / Storyboarding Rendering Work model Functional model Prototype What s presented? Context & idea of the application Application concept Logic & navigation Functinal interaction Technological feasibility What s the goal? Define the contextual needs of users Visualize the service idea Make service understandable Experience the application structure Evaluate the real use & the implementation Ruby on Rails What s being worked with? Sketch, user scenario, need and idea landscapes Use-cases, graphics, collages Flowcharts, mock-ups, slideshows interactive slideshows fake application application network application 23

24 Use Ockham s razor If there are two equal solutions... take the easier one. reduce functionalities until your application is missing something. then, go one step back. Wilhelm of Ockham ( ) 24 Picture: wikipedia.org

25 Make you webapp accessible Text 25

26 Make you webapp accessible Why should you bother to please everybody? Why should your application work for JavaScript-disabled user-agents? Users who rely on screen-readers will love it. Those users who disabled JS... or don t even have JS-support will love it, too. Marketing will love you - especially the SEO guys. All users as you can speedup the overall webapp user experience. 26

27 Make you webapp accessible How can you reach that? Use unobtrusive JavaScript (UJS) and CSS to separate information, style and behavior. HTML CSS UJS style information behavior 27

28 Repeat structures by DRY Source: BMW

29 Repeat structures by DRY users.html.erb index.html.erb Partial _filter.html.erb users.html.erb Partial trend.html.erb _filter.html.erb View Layout View Layout 29

30 Repeat structures by DRY The Rails-principle Don t Repeat Yourself Usability pretty much depends on recognizable patterns Rails-developers use Layouts & Partials for recurring parts within the page... and that fits perfect together with design style guides layout-grids and style-sheets 30

31 Validate inputs and give feedback 31 Source: flickr.com/photos/laszlo-photo/

32 Validate inputs and give feedback The user needs to know what he did wring - by direct validation of user input by validations and direct feedback. If you created a ressource by scaffolding this feedbackloop is just directly implemented. 32

33 Validate inputs and give feedback app/models/user.rb Only validated data is saved into the database 33

34 Validate inputs and give feedback csv shift_date shift 02/18/ /18/ /18/ /18/ /19/ /19/ How do you code a dependent validation? model shift_date shift 02/18/ /18/ /18/ /19/ /19/ app/models/shifts.rb 34

35 Give feedback by using Rails flash messages The user should always be informed about the status of the application. Easy if you use and extend the Rails internal flash-messsaging system. 35

36 Give feedback by using Rails flash messages app/controllers/shifts_controller.rb... in der Action filter app/views/shifts/trend.html.erb app/public/stylesheets/application.css 36

37 Don t let the user wait! 37 Source: schiphol.nl

38 Don t let the user wait... Searchform Results! 38

39 Don t let the user wait... keep him busy! Search process Searchform Sortform Results! 39

40 Don t let the user wait... entertain him! Search process Searchform Results! 40

41 Don t let the user wait... infom him! Search process Searchform... will take some time! Results! 41

42 Thanks! christian o. lupp codedifferent mobile & web innovation system design ip management dipl. des. 42