Powerful UX, not just for desktops anymore

Editor's Notes

3. Warning! There will be Canadian content. You will get a lesson in Canadian geography, and there WILL be hockey references. It’s required!
4. So, how’d we get here?
5. Actually, I have a confession to make. I was a Java developer for over 8 years, as was my coworker at the time, 5 years ago.
6. As we were about to embark on a new project, we attended the No Fluff Just Stuff Java Symposium.
7. All the presenters could talk about was Ruby and Ruby on Rails, and how EASY and FAST it was to develop web applications.
8. So, we figured what the heck, lets put on these Ruby slippers and see where they take us. It’s been 5 years. I haven’t even touched any Java code for the last 3 years.
9. So, UX. The user interface of your application is a conversation between you, the developer, and the people who use your application. The question I have for you is this: Exactly What kind of conversation do you want to have? If you don’t think about it in advance, In my experience, the conversation will develop in one of two directions.
10. Baby talk. Too many web applications attempt to provide a good UX, and end up here. It may be a good experience, but I wouldn’t call it a powerful one.
11. At the other end of the spectrum is the application that looks more like this. This is no longer a conversation, it begins to resemble a “maze of twisty little passages, all alike”. Sadly, most applications tend to look more like this, after they’re been around a while. Back in my Java days, because of my history of UI work, I spent a lot of time helping developers optimize the UX of their desktop applications. Given all that it’s not too surprising that I started to bring some of the knowledge and work from my desktop development years onto the web. The web browser of today is much more powerful than the browser of 10 yrs ago, and can handle more complex user interactions, but mostly... it doesn’t. CC - http://www.flickr.com/photos/hoyvinmayvin/4906678960/sizes/l/
12. So, why don’t we bring more powerful user experiences to the browser?
13. So, why don’t we bring more powerful user experiences to the browser?
14. So, why don’t we bring more powerful user experiences to the browser?
15. The building blocks of many powerful libraries are available to you, so make use of them
16. The building blocks of many powerful libraries are available to you, so make use of them
17. The building blocks of many powerful libraries are available to you, so make use of them
18. So, let’s start with an example. I had a problem.
20. don’t forget your routes.rb
21. It’s never that simple. We took a working version to our users and What if... Would it surprise you to discover that the average user doesn’t understand how to use these multiple selection lists?
22. It’s never that simple. We took a working version to our users and What if... Would it surprise you to discover that the average user doesn’t understand how to use these multiple selection lists?
23. It’s never that simple. We took a working version to our users and What if... Would it surprise you to discover that the average user doesn’t understand how to use these multiple selection lists?
24. It’s never that simple. We took a working version to our users and What if... Would it surprise you to discover that the average user doesn’t understand how to use these multiple selection lists?
25. Reference: Java Look & Feel Design Guidelines. Familiar idiom for desktop users (like alert, login, etc) They see it and immediately know what to do. Google : user interface idiom
26. Reference: Java Look & Feel Design Guidelines. Familiar idiom for desktop users (like alert, login, etc) They see it and immediately know what to do. Google : user interface idiom
27. Reference: Java Look & Feel Design Guidelines. Familiar idiom for desktop users (like alert, login, etc) They see it and immediately know what to do. Google : user interface idiom
29. Ok, let’s see what it takes to build such a control, by... exploring it into existence.
30. Non-autocomplete version Javascript improved by: http://alexyz78.blogspot.com/2009/05/addremove-options-from-select-list-with.html and this for sorting: http://ppolyzos.com/2010/07/how-to-sort-a-drop-down-list-select-using-jquery/
31. Non-autocomplete - team select
32. Hey, wait a minute, that sounds like....
33. Hey, wait a minute, that sounds like....
36. autocomplete version - look at the autocomplete examples - they override some internal functions - make use of one of the internal functions (_response), to get the behaviour I want http://railstips.org/blog/archives/2010/10/14/stop-googling/ Don't be afraid to look at the code http://dev.jqueryui.com/browser/ui/jquery.ui.autocomplete.js?rev=abfdb2a8b6f93607c0791ba91ab616aed6b04772
37. Autocomplete version of the demo - player select
40. Of the plugin/gem working in an app. /birds/select
42. Example code, with plugin embedded in an app Plugin will be uploaded shortly