prototyping user interactions in web apps
DESCRIPTION
This talk will guide you through the prototyping of javascript interactions in web applications using a great and fun tool called iXEdit.TRANSCRIPT
YOU TALK JAVASCRIPT? YOU TALK JAVASCRIPT? PROTOTYPE IT WITH IXEDIT.
Patrick NDJIENTCHEU,,Billing designer at Orange Cameroon,Software Engineer at koutchoumi.com, [email protected]
BARCAMP CAMEROON, YAOUNDE, 12 June 2010.
WHO I AM ?WHO I AM ?
Software Engineer working as Billing designer Software Engineer working as Billing designer at Orange Cameroon since October 2007.
Project Lead of koutchoumi.com : a real estate ads website launched in december2009.
A pure Lions fan ☺pu e o s a ☺
WHAT IS THE PLAN?WHAT IS THE PLAN?
The need for javascript in web appsj p pp
Why does prototyping matter in user interface Why does prototyping matter in user interface design?
Prototyping javascript interactions: IxEdit
Demo
JAVASCRIPT GREATLY IMPROVES USER EXPERIENCEJAVASCRIPT GREATLY IMPROVES USER EXPERIENCE
More efficiencyMore efficiency
M fMore fun
Better form experience
Brings Desktop UI patterns to the web
JAVASCRIPT: BETTER FORM EXPERIENCE
> Dependantcombo box: « Ville » combo box: Ville and « Quartier »
I t t f db k> Instant feedback
JAVASCRIPT BRINGS DESKTOP UI PATTERNS TO THE WEB
> Modal dialog
T b> Tabs
PROTOTYPING MATTERS IN UI DESIGN
UI design is an iterative process.UI design is an iterative process.
> In early stages of « implementation », you prototype.
> More prototypes meanbetter UI.
> Cheap prototypes meanfaster results.
PROTOTYPING STATIC STATESPROTOTYPING STATIC STATES
> Paper prototyping
> Balsamiq Mockups
PROTOTYPING JAVASCRIPT INTERACTIONS: IXEDIT
IxEdit (ixedit.com) is a JavaScript-based interaction design tool for the web.
It h l d i ti j i t d DOMIt helps designers practice javascript and DOM-scripting without coding.
It is useful to try various interactions rapidly in the prototyping phase.
It’s free and absolutely fun to use ☺
SOME INTERACTIONS WITH IXEDIT
HOW IT WORKS [DEVELOPMENT]?HOW IT WORKS [DEVELOPMENT]?
Your favorite browser is your dev environment:Safari 3.1+, Chrome, Firefox 3+, or Internet Explorer 7+.Eventually, Google Gears to use the local database.
Th it’ i l i lThen, it’s amazingly simple:
HOW IT WORKS [DEPLOYMENT]?HOW IT WORKS [DEPLOYMENT]?IxEdit generates Javascript code designed to workwith JQuery and JQueryUI.with JQuery and JQueryUI.
This code is cross-browser compatible:pInternet Explorer 6+Firefox 2+S f i 3+Safari 3+Opera 9+Chrome.
Once you are done with the design, just removeI Edit j i t d i l i f th h dIxEdit javascript and css inclusions from the headelement of the HTML.
DEMO TIME
W t t ? L t’ d it!Want to see more? Let’s demo it!
QUESTIONS ?Q
THANK YOUTHANK YOU.B h Li Be the Lions you want to see.
http://www.koutchoumi.comhttp://slideshare.net/pattchenhttp://facebook.com/pattchen
Feedback? [email protected]