June 28 th – July 1 st 2006 Implementing Usability: Insights to improve your chances CFUnited...

June 28th – July 1st 2006

Implementing Usability: Insights Implementing Usability: Insights to improve your chancesto improve your chances CFUnited 2007


AgendaAgenda

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 hereWhy we are here

We CF! Our developers are having fun

doing cool things!


CMS gets with the timesCMS 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


What was wrongWhat 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


What we neededWhat we needed

Faster access to toolsLogically organizedCommon toolbars

Better dialogsCommon interface

ExtensibilityMore customization

Maximize available space without “clutter” Scalable solution


What we didWhat we did

Focus on the backend first XML Transport for Client/Server

ColdFusion Custom FactoryExtensible and exposed

JS frameworks on the front endExtended easily to suit our needsOpen our UI code base

Took advantage of existing code base – when it made sense

Listened to our customers


How we did thisHow we did this

We planned!What was the goal of the UI?What was the XML FormatWhat were the commandsHow were they constructedHow will we handle errors


How we did thisHow 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


Why Frameworks?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


Frameworks Will…Frameworks Will…

Help you build better things … faster Sometimes hide complex coding Help you do COOL things!


Frameworks Will NOT…Frameworks Will NOT…

Make you a better coder Solve all of your problems


From Back to FrontFrom Back to Front

The “Woodward” Presentation Model


Why is the back end SO important?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


Problems…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 funCF 8 – “Thank you Adobe”

Constant “chatter” was a concern Debugging


SolutionsSolutions

Built framework without concern for front end

Built test harness to guarantee results


Popular Ajax FrameworksPopular 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


Popular Ajax Frameworks (Cont.)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


How to chooseHow to choose

Are you good with JS? Are you good with XML/XSLT? What about the other

developers/resources


The front endThe front end

Started out as a prototype using PrototypeXSLT on the client side (heavy browser caching)Constructed DOM objects manually

Implemented several Frameworks SpryScript.aculo.usPrototype

Overwrote/extend several standard properties/functionscommonspot.spry.Datasetcommonspot.spry.getRecordSetFromXMLDoc


Problems…Problems…

Namespaces HTTP Timeout Spry Transport Layer JSON and eval()


What makes Spry so different?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


TestingTesting

Back endAutomated testing (multi platforms,

databases, CF versions etc…)Refactoring becomes easier

Front endSet up XML files to handle the “Post/Get”

results instead of getting at the data directly


ConclusionConclusion

Plan2 Freight trains need to meet in the middle

Separate content from presentationEasy development/debugging

“A” framework will not solve your problems

June 28 th – July 1 st 2006 Implementing Usability: Insights to improve your chances CFUnited...

Documents

Transcript of June 28 th – July 1 st 2006 Implementing Usability: Insights to improve your chances CFUnited...