1 / 24

Implementing Usability: Insights to improve your chances

Implementing Usability: Insights to improve your chances. CFUnited 2007. Agenda. Why we are here What we did What we learned What we wished we had done differently Where we are going from here. Why we are here. We CF! Our developers are having fun doing cool things!.

quyn-gray
Download Presentation

Implementing Usability: Insights to improve your chances

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Implementing Usability: Insights to improve your chances • CFUnited 2007

  2. Agenda • Why we are here • What we did • What we learned • What we wished we had done differently • Where we are going from here

  3. Why we are here • We CF! • Our developers are having fun doing cool things!

  4. CMS gets with the times • We are a web application • We have been around for a long time (CF v. 1.5!) • A LOT has changed since we started • We wanted to build something to last • Didn’t want to reinvent the wheel • Needed to solve real world problems

  5. What was wrong • Interface icons/menus were outdated • Interacting with dialogs was difficult • Buttons were not consistent • Administration and Content were too separated • Using “window.open()” was slower • It wasn’t fun to play with

  6. What we needed • Faster access to tools • Logically organized • Common toolbars • Better dialogs • Common interface • Extensibility • More customization • Maximize available space without “clutter” • Scalable solution

  7. What we did • Focus on the backend first • XML Transport for Client/Server • ColdFusion Custom Factory • Extensible and exposed • JS frameworks on the front end • Extended easily to suit our needs • Open our UI code base • Took advantage of existing code base – when it made sense • Listened to our customers

  8. How we did this • We planned! • What was the goal of the UI? • What was the XML Format • What were the commands • How were they constructed • How will we handle errors

  9. How we did this • We gathered information (tons of information) • Hired someone with usability experience • Built a STRONG back end model • Built a prototype • Integrated some frameworks • Had some fun

  10. Why Frameworks? • Development frameworks help you build cool stuff - faster • Reinvent the wheel? • Documentation • Learn from other’s experiences • Most have an open code base • Easy separation of successes and failures • Easier to test/debug

  11. Frameworks Will… • Help you build better things … faster • Sometimes hide complex coding • Help you do COOL things!

  12. Frameworks Will NOT… • Make you a better coder • Solve all of your problems

  13. From Back to Front • The “Woodward” Presentation Model

  14. Why is the back end SO important? • The data is your lifeline • Interface design is volatile • Browser incompatibilities • UI designers are constantly changing their mind • The browsers were not designed for asynchronous applications • Building architectures/frameworks is what we do best • Scalability starts from the back end not the front end • Utilize resources: CF/Java skill set on back end | JS/Flash skill set on the front end

  15. Problems… • Not a lot of documentation on how to build a robust engine for Ajax in CF • Interacting with CFC’s through forms – not so fun • CF 8 – “Thank you Adobe” • Constant “chatter” was a concern • Debugging

  16. Solutions • Built framework without concern for front end • Built test harness to guarantee results

  17. Popular Ajax Frameworks • jQuery (2006) • Strong community backing • Good Documentation • Plugins • Yahoo UI Library (2006) • Maintained by large organization • Many implementations • Soup to Nuts • Prototype • Large Ruby on Rails community support • Shorthand access to many common routines • Supports OO programming styles

  18. Popular Ajax Frameworks (Cont.) • Mootools (2006) • Object Oriented • Good examples • DoJo Toolkit (2004) • Open source • Supported by IBM and Sun • Large code base • AjaxCFC (2005) • Built by Rob Gonda • Delivers serialized data (not JSON/XML) to JS • Easy • Spry (2006) • Maintained by Adobe • Different approach then other framework • Doesn’t pollute global space

  19. How to choose • Are you good with JS? • Are you good with XML/XSLT? • What about the other developers/resources

  20. The front end • Started out as a prototype using Prototype • XSLT on the client side (heavy browser caching) • Constructed DOM objects manually • Implemented several Frameworks • Spry • Script.aculo.us • Prototype • Overwrote/extend several standard properties/functions • commonspot.spry.Dataset • commonspot.spry.getRecordSetFromXMLDoc

  21. Problems… • Namespaces • HTTP Timeout • Spry Transport Layer • JSON and eval()

  22. What makes Spry so different? • Dynamic HTML/Templates (i.e. very similar to CF development) • Dynamic HTML building vs. Native HTML • Focused heavily on the data (richer user experience) • Hooks well into “presentation” frameworks • Script.aculo.us • Yahoo UI Library • Open code base • Integrates nicely into ColdFusion • Even nicer in 8! • Supports XML, HTML or JSON Data Objects

  23. Testing • Back end • Automated testing (multi platforms, databases, CF versions etc…) • Refactoring becomes easier • Front end • Set up XML files to handle the “Post/Get” results instead of getting at the data directly

  24. Conclusion • Plan • 2 Freight trains need to meet in the middle • Separate content from presentation • Easy development/debugging • “A” framework will not solve your problems

More Related