Approaches to Enhancing the  User Experience Mike McGarel Collaborative Solutions Developer Czarnowski
Agenda <ul><li>Introduction </li></ul><ul><li>Users, Inspiration and Design Philosophy </li></ul><ul><li>Common UI and UX ...
Mike McGarel <ul><li>Notes/Web developer for over 12 years </li></ul><ul><li>Work for a customer, not a business partner <...
Now it's time to talk about  . . .  U
Users
Why a user-focused approach? The Circle of Life, IT-style Happy Developer Happy IT Manager Happy Users
Speaking of users . . .  <ul><li>Your users are not the same as someone else's users </li></ul><ul><li>Consider your audie...
What do users want? <ul><li>Ask them – via testing </li></ul><ul><li>In the beginning, paper prototyping is best </li></ul...
Testing Tips <ul><li>Don't be attached </li></ul><ul><li>Find the obvious </li></ul><ul><li>No such thing as an average us...
“ Don't Make Me Think” <ul><li>Title of excellent book by Steve Krug, usability expert </li></ul><ul><li>We want to do, no...
UI / UX Considerations <ul><li>Page should have visual hierarchy </li></ul><ul><li>Page should be visually appealing </li>...
Corporate apps != Web apps <ul><li>Design limitations </li></ul><ul><li>Audience not there by choice and can't leave </li>...
Some things to think about <ul><li>A good user experience is more art than science </li></ul><ul><li>No absolutes </li></u...
That 1% Inspiration
Quick Design Inspiration: Design Sites <ul><li>Regularly post links to themes and templates </li></ul><ul><li>Also icon se...
A few sites often posting links to templates/themes <ul><li>Smashing Magazine (smashingmagazine.com) </li></ul><ul><li>Web...
Quick Design Inspiration: Color Pickers and Color Schemes <ul><li>Search “color picker” =  over 3 million results </li></u...
Quick Design Inspiration: Design Patterns <ul><li>Reusable solution to a commonly occurring problem </li></ul><ul><li>Exam...
Quick Design Inspiration: Corporate Template <ul><li>Eases design decisions </li></ul><ul><li>Users like consistency </li>...
How some developers view users
Instead, say “Be Our Guest” Image  © C opyright Walt Disney Company
Treat users of your application as you would guests in your home
How do you treat guests at a party? <ul><li>Greet them at the door </li></ul><ul><li>Explain where things are </li></ul><u...
Treating people similarly within an application involves: <ul><li>Home page that answers the questions: </li></ul><ul><ul>...
Using the “Be Our Guest” Approach <ul><li>Consider the users at the beginning </li></ul><ul><li>Make it easy to get inform...
Some Common UI and UX Practices
AT-ATLUG
Some Common UI and UX Practices - 1 <ul><li>Login link, usually on upper right </li></ul><ul><li>Search bar near the top <...
Example: foursquare.com
Some Common UI and UX Practices - 2 <ul><li>Highlighted text to indicate location </li></ul><ul><li>Minimal amount of text...
Some Common UI and UX Practices - 3 <ul><li>Highlighted menu item to indicate location </li></ul><ul><li>Advanced search p...
Some Common UI and UX Practices - 4 <ul><li>Highlights when hovering over menu items </li></ul><ul><li>Sectioned menu </li...
Easy for the user doesn't have to be difficult for the developer.
Script Sample 1: Hiding Unneeded Areas of a Form <ul><li>Site: SkiLUG (http://www.skilug.org) </li></ul><ul><li>Registrati...
Script Sample 1a: Display based on user selection Before After
Script Sample 1b: Source code for page  <ul><li><xp:div id=&quot;divSkiLessons&quot;> </li></ul><ul><li><xp:table styleCla...
Script Sample 1c: Code for hiding the <div> <ul><li>Single line of JavaScript code called in the onClick event  for the ra...
Script Sample 2: An animated navigation menu <ul><li>Location: Back to the database called  DojoExamples.nsf </li></ul>
Script Sample 2a: Source code from page  <ul><li><xp:this.resources> </li></ul><ul><li><xp:dojoModule name= &quot;dijit.la...
Script Sample 2b: Source code from page  <ul><li><xp:div id= &quot;accordion&quot;  dojoType= &quot;dijit.layout.Accordion...
Script Sample 3: A dynamic number of edit boxes <ul><li>From my secret lair under a volcano </li></ul><ul><li>You've heard...
Script Sample 3a: Source code from page  <ul><li><xp:repeat id= &quot;repeat1&quot;  var= &quot;rData&quot;  indexVar= &qu...
Script Sample 3b: Source code from page  <ul><li><td> </li></ul><ul><li><xp:inputText id= &quot;numberBox&quot; > </li></u...
Script Sample 3c: Source code from script library <ul><li>function calculateSum(numArray) { </li></ul><ul><li>var sum = 0;...
Script Sample 3d: Source code from button <ul><li>var uNum = sessionScope.get(&quot;scpBoxes&quot;); </li></ul><ul><li>ses...
In closing . . .
Let's change the perception of Notes'  UX
From SUX
To ROX
Thank you. Thank you very much. <ul><li>Blog:  www.bleedyellow.com/blogs/McGarelGramming/ </li></ul><ul><li>Twitter: @mmcg...
Upcoming SlideShare
Loading in …5
×

Approaches to Enhancing the User Experience

2,988 views
2,893 views

Published on

User satisfaction is a key aspect to a successful business application. What makes a good user experience is subjective, but here we the essentials, mixing theory, common practices and code samples to help you put the pieces together in your own applications. Whether you develop for Notes classic, Domino, XPages or other platforms, this presentation has something you can use right away.

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,988
On SlideShare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
39
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Approaches to Enhancing the User Experience

  1. 1. Approaches to Enhancing the User Experience Mike McGarel Collaborative Solutions Developer Czarnowski
  2. 2. Agenda <ul><li>Introduction </li></ul><ul><li>Users, Inspiration and Design Philosophy </li></ul><ul><li>Common UI and UX Design Practices </li></ul><ul><li>Script Samples </li></ul><ul><li>@Sum </li></ul>
  3. 3. Mike McGarel <ul><li>Notes/Web developer for over 12 years </li></ul><ul><li>Work for a customer, not a business partner </li></ul><ul><li>Responsible for intranet and extranet applications </li></ul><ul><li>Started as a user then moved into IT </li></ul><ul><li>Former software trainer </li></ul><ul><li>Developer for the Blogger Open and SkiLUG sites </li></ul><ul><li>Currently VP of GRANITE, the Chicago-based Lotus user group </li></ul>I AM
  4. 4. Now it's time to talk about . . . U
  5. 5. Users
  6. 6. Why a user-focused approach? The Circle of Life, IT-style Happy Developer Happy IT Manager Happy Users
  7. 7. Speaking of users . . . <ul><li>Your users are not the same as someone else's users </li></ul><ul><li>Consider your audience </li></ul><ul><li>Consider your audience segments </li></ul><ul><li>You are not a user </li></ul><ul><li>Your boss is not a user </li></ul>
  8. 8. What do users want? <ul><li>Ask them – via testing </li></ul><ul><li>In the beginning, paper prototyping is best </li></ul><ul><li>Continuous process </li></ul><ul><li>Make changes or follow up with feedback </li></ul>
  9. 9. Testing Tips <ul><li>Don't be attached </li></ul><ul><li>Find the obvious </li></ul><ul><li>No such thing as an average user </li></ul><ul><li>Find the majority opinion </li></ul>
  10. 10. “ Don't Make Me Think” <ul><li>Title of excellent book by Steve Krug, usability expert </li></ul><ul><li>We want to do, not think about how to do it </li></ul><ul><li>People like choices but not too many </li></ul><ul><li>Meet user expectations </li></ul>
  11. 11. UI / UX Considerations <ul><li>Page should have visual hierarchy </li></ul><ul><li>Page should be visually appealing </li></ul><ul><ul><li>Readable, high contrast text </li></ul></ul><ul><ul><li>Graphics if possible </li></ul></ul><ul><li>Break up complex tasks if possible </li></ul><ul><li>Take advantage of existing behavior, e.g. Google-type searches </li></ul><ul><li>Users don't care what the app can do, they care what they can do </li></ul>
  12. 12. Corporate apps != Web apps <ul><li>Design limitations </li></ul><ul><li>Audience not there by choice and can't leave </li></ul><ul><li>No selling (or is there?) </li></ul><ul><li>Know the competition </li></ul><ul><li>Can you add a “WOW factor”? </li></ul>
  13. 13. Some things to think about <ul><li>A good user experience is more art than science </li></ul><ul><li>No absolutes </li></ul><ul><li>So many user options: </li></ul><ul><ul><li>Devices </li></ul></ul><ul><ul><li>Operating systems </li></ul></ul><ul><ul><li>Clients </li></ul></ul><ul><ul><li>Locations </li></ul></ul><ul><li>XPages design takes more planning traditional Notes/Domino development </li></ul>
  14. 14. That 1% Inspiration
  15. 15. Quick Design Inspiration: Design Sites <ul><li>Regularly post links to themes and templates </li></ul><ul><li>Also icon sets and other resources </li></ul><ul><li>Some free, some not </li></ul><ul><li>Sample theme/template compilations: </li></ul><ul><ul><li>Color </li></ul></ul><ul><ul><li>Nature </li></ul></ul><ul><ul><li>Texture </li></ul></ul><ul><ul><li>Type, e.g, ecommerce or blog </li></ul></ul>
  16. 16. A few sites often posting links to templates/themes <ul><li>Smashing Magazine (smashingmagazine.com) </li></ul><ul><li>Web Design Ledger (webdesignledger. com ) </li></ul><ul><li>1 st Web Designer (1stwebdesigner.com) </li></ul><ul><li>Web Designer Depot (webdesignerdepot.com) </li></ul><ul><li>Design Informer (http://www.designinformer.com) </li></ul><ul><li>Noupe (noupe.com) </li></ul><ul><li>SloDive (slodive.com) </li></ul><ul><li>Naldz Graphics (naldzgraphics.net) </li></ul>
  17. 17. Quick Design Inspiration: Color Pickers and Color Schemes <ul><li>Search “color picker” = over 3 million results </li></ul><ul><li>Search “color scheme” = over 18 million results </li></ul><ul><li>Adobe has a great site for schemes: http://kuler.adobe.com </li></ul><ul><li>More resources: </li></ul><ul><ul><li>Color Scheme Generator (http://www.perban.dk/color+scheme) </li></ul></ul><ul><ul><li>Color Scheme Designer ( http://colorschemedesigner.com ) </li></ul></ul><ul><ul><li>Color Palette Generator (http://www.degraeve.com/color-palette/) </li></ul></ul>
  18. 18. Quick Design Inspiration: Design Patterns <ul><li>Reusable solution to a commonly occurring problem </li></ul><ul><li>Examples: </li></ul><ul><ul><li>Yahoo Design Pattern Library (developer.yahoo.com/patterns/) </li></ul></ul><ul><ul><li>Article: Ultimate Guide toTable UI Patterns (www.jankoatwarpspeed.com/post/2010/02/26/table-ui-patterns.aspx) </li></ul></ul>
  19. 19. Quick Design Inspiration: Corporate Template <ul><li>Eases design decisions </li></ul><ul><li>Users like consistency </li></ul><ul><li>If you don't have a template, now's a good time to put one together </li></ul><ul><li>OneUI is a good start </li></ul>
  20. 20. How some developers view users
  21. 21. Instead, say “Be Our Guest” Image © C opyright Walt Disney Company
  22. 22. Treat users of your application as you would guests in your home
  23. 23. How do you treat guests at a party? <ul><li>Greet them at the door </li></ul><ul><li>Explain where things are </li></ul><ul><li>Put the food and drinks out where they can find them </li></ul><ul><li>Be accommodating </li></ul><ul><li>Thank them for visiting </li></ul>
  24. 24. Treating people similarly within an application involves: <ul><li>Home page that answers the questions: </li></ul><ul><ul><li>Where am I? </li></ul></ul><ul><ul><li>What do you want me to do? </li></ul></ul><ul><ul><li>How can I find the information I need? </li></ul></ul><ul><li>Keep the user comfortable </li></ul><ul><ul><li>Show only what's necessary </li></ul></ul><ul><ul><li>Make it easy to know what to do next </li></ul></ul><ul><ul><li>Use the words the users use </li></ul></ul>
  25. 25. Using the “Be Our Guest” Approach <ul><li>Consider the users at the beginning </li></ul><ul><li>Make it easy to get information when necessary </li></ul><ul><ul><li>e.g. Type-aheads </li></ul></ul><ul><ul><li>e.g. Popup tips </li></ul></ul><ul><li>Keep the user comfortable </li></ul><ul><ul><li>Use common practices </li></ul></ul><ul><ul><li>Keep the choices to a minimum </li></ul></ul><ul><li>Get feedback </li></ul><ul><li>Make changes based on feedback </li></ul>
  26. 26. Some Common UI and UX Practices
  27. 27. AT-ATLUG
  28. 28. Some Common UI and UX Practices - 1 <ul><li>Login link, usually on upper right </li></ul><ul><li>Search bar near the top </li></ul><ul><li>Big buttons for actions </li></ul><ul><li>Used by: </li></ul><ul><ul><li>Delicious </li></ul></ul><ul><ul><li>Dropbox </li></ul></ul><ul><ul><li>Tripit </li></ul></ul><ul><ul><li>Lotus Greenhouse </li></ul></ul><ul><ul><li>(and many more . . . ) </li></ul></ul><ul><ul><li>Foursquare </li></ul></ul><ul><ul><li>Gowalla </li></ul></ul><ul><ul><li>Twitter </li></ul></ul><ul><ul><li>Facebook </li></ul></ul><ul><ul><li>Google </li></ul></ul>
  29. 29. Example: foursquare.com
  30. 30. Some Common UI and UX Practices - 2 <ul><li>Highlighted text to indicate location </li></ul><ul><li>Minimal amount of text on each page </li></ul><ul><li>Immediate indication of results </li></ul><ul><li>Sample XPages site: http://www.bloggeropen.com </li></ul>
  31. 31. Some Common UI and UX Practices - 3 <ul><li>Highlighted menu item to indicate location </li></ul><ul><li>Advanced search page </li></ul><ul><li>Pagers </li></ul><ul><li>Link tooltip </li></ul><ul><li>Inline editing </li></ul><ul><li>Sample XPages site utilizing OneUI: Notes/Domino XPages Development Forum at http://www-10.lotus.com/ldd/xpagesforum.nsf/ </li></ul>
  32. 32. Some Common UI and UX Practices - 4 <ul><li>Highlights when hovering over menu items </li></ul><ul><li>Sectioned menu </li></ul><ul><li>Larger tooltip </li></ul><ul><li>Location: </li></ul><ul><ul><li>Code bin of OpenNTF.org (bottom of Projects page) </li></ul></ul><ul><ul><li>XPages based database called DojoExamples.nsf </li></ul></ul><ul><ul><li>Direct link: http://www.openntf.org/Projects/codebin /codebin.nsf/CodeByDate/43062D24B4C6B1CA862577D2005B6D61 </li></ul></ul>
  33. 33. Easy for the user doesn't have to be difficult for the developer.
  34. 34. Script Sample 1: Hiding Unneeded Areas of a Form <ul><li>Site: SkiLUG (http://www.skilug.org) </li></ul><ul><li>Registration form has separate areas for: </li></ul><ul><ul><li>Sponsorship </li></ul></ul><ul><ul><li>Skiing </li></ul></ul><ul><ul><li>Snowboarding </li></ul></ul><ul><li>Some areas are Section design elements within XPages </li></ul><ul><li>Specific questions and answers are displayed/hidden using Dojo, the JavaScript framework included within XPages </li></ul>
  35. 35. Script Sample 1a: Display based on user selection Before After
  36. 36. Script Sample 1b: Source code for page <ul><li><xp:div id=&quot;divSkiLessons&quot;> </li></ul><ul><li><xp:table styleClass=&quot;formTable&quot; style=&quot;width:100%&quot;> </li></ul><ul><li>(rest of table code here) </li></ul><ul><li></xp:table> </li></ul><ul><li></xp:div> </li></ul>
  37. 37. Script Sample 1c: Code for hiding the <div> <ul><li>Single line of JavaScript code called in the onClick event for the radio button group: </li></ul><ul><li>toggleDivDisplay(&quot;#{id:divSkiLessons}&quot;,this.value); </li></ul><ul><li>A few lines of code in a client side JavaScript: </li></ul><ul><li>function toggleDivDisplay(targetID,val) { </li></ul><ul><li>var displayVal = (val==&quot;Yes&quot;) ? &quot;block&quot; : &quot;none&quot;; </li></ul><ul><li>dojo.style(dojo.byId(targetID),&quot;display&quot;,displayVal); </li></ul><ul><li>} </li></ul>
  38. 38. Script Sample 2: An animated navigation menu <ul><li>Location: Back to the database called DojoExamples.nsf </li></ul>
  39. 39. Script Sample 2a: Source code from page <ul><li><xp:this.resources> </li></ul><ul><li><xp:dojoModule name= &quot;dijit.layout.AccordionContainer&quot; > </xp:dojoModule> </li></ul><ul><li></xp:this.resources> </li></ul>
  40. 40. Script Sample 2b: Source code from page <ul><li><xp:div id= &quot;accordion&quot; dojoType= &quot;dijit.layout.AccordionContainer&quot; > </li></ul><ul><li><xp:div dojoType= &quot;dijit.layout.ContentPane&quot; title= &quot;Main&quot; > </li></ul><ul><li><xp:link escape= &quot;true&quot; text= &quot;Home&quot; id= &quot;link1&quot; value= &quot;/Home.xsp&quot; title= &quot;Back to home&quot; > </xp:link> </li></ul><ul><li><xp:br></xp:br> </li></ul><ul><li><xp:link escape= &quot;true&quot; text= &quot;By Company Name&quot; id= &quot;link2&quot; value= &quot;/ByCompany.xsp&quot; title= &quot;Sorted by company name&quot; > </xp:link> </li></ul>
  41. 41. Script Sample 3: A dynamic number of edit boxes <ul><li>From my secret lair under a volcano </li></ul><ul><li>You've heard of IBM Watson, the supercomputer that defeated two former Jeopardy champions at their own game? </li></ul><ul><li>I present . . . </li></ul>
  42. 42. Script Sample 3a: Source code from page <ul><li><xp:repeat id= &quot;repeat1&quot; var= &quot;rData&quot; indexVar= &quot;rIndex&quot; > </li></ul><ul><li><xp:this.rows> <![CDATA[#{javascript:sessionScope.get(&quot;scpBoxes&quot;).length;}]]> </xp:this.rows> </li></ul><ul><li><xp:this.value> <![CDATA[#{javascript:sessionScope.get(&quot;scpBoxes&quot;)}]]> </xp:this.value> </li></ul>
  43. 43. Script Sample 3b: Source code from page <ul><li><td> </li></ul><ul><li><xp:inputText id= &quot;numberBox&quot; > </li></ul><ul><li><xp:this.value> <![CDATA[#{sessionScope.scpBoxes[rIndex]}]]> </xp:this.value> </li></ul><ul><li><xp:this.converter> <xp:convertNumber type= &quot;number&quot; > </xp:convertNumber></xp:this.converter> </li></ul><ul><li></xp:inputText> </li></ul><ul><li></td> </li></ul>
  44. 44. Script Sample 3c: Source code from script library <ul><li>function calculateSum(numArray) { </li></ul><ul><li>var sum = 0; </li></ul><ul><li>var n = 0; </li></ul><ul><li>for (var i = 0; i < numArray.length; i++) { </li></ul><ul><li>n = (numArray[i] == &quot;&quot;) ? 0 : numArray[i] ; </li></ul><ul><li>sum = sum + n; </li></ul><ul><li>} </li></ul><ul><li>return sum; </li></ul><ul><li>} </li></ul>
  45. 45. Script Sample 3d: Source code from button <ul><li>var uNum = sessionScope.get(&quot;scpBoxes&quot;); </li></ul><ul><li>sessionScope.put(&quot;scpSum&quot;, calcSum(uNum)); </li></ul><ul><li>context.redirectToPage(&quot;Sum.xsp&quot;); </li></ul>
  46. 46. In closing . . .
  47. 47. Let's change the perception of Notes' UX
  48. 48. From SUX
  49. 49. To ROX
  50. 50. Thank you. Thank you very much. <ul><li>Blog: www.bleedyellow.com/blogs/McGarelGramming/ </li></ul><ul><li>Twitter: @mmcgarel </li></ul><ul><li>Email: [email_address] </li></ul><ul><li>LinkedIn: www.linkedin.com/in/mikemcgarel </li></ul>

×