YOU TALK JAVASCRIPT?
PROTOTYPE IT WITH IXEDIT.
Patrick NDJIENTCHEU,   ,
Billing designer at Orange Cameroon,
Software Engi...
WHO I AM ?

 Software Engineer working as Billing designer
 at Orange Cameroon since October 2007.


 Project Lead of kout...
WHAT IS THE PLAN?
 The need for j       p          pp
              javascript in web apps

 Why does prototyping matter i...
JAVASCRIPT GREATLY IMPROVES USER EXPERIENCE

  More efficiency

  More f
  M    fun

  Better form experience

  Brings De...
JAVASCRIPT: BETTER FORM EXPERIENCE



> Dependant
combo box: « Ville »
and « Quartier »



> I t t feedback
  Instant f db...
JAVASCRIPT BRINGS DESKTOP UI PATTERNS TO THE WEB



> Modal dialog




 >T b
  Tabs
PROTOTYPING MATTERS IN UI DESIGN

 UI design is an iterative process.


                           > In early stages of « ...
PROTOTYPING STATIC STATES
> Paper prototyping




       > Balsamiq Mockups
PROTOTYPING JAVASCRIPT INTERACTIONS: IXEDIT

 IxEdit (ixedit.com) is a JavaScript-based interaction
 design tool for the w...
SOME INTERACTIONS WITH IXEDIT
HOW IT WORKS [DEVELOPMENT]?
 Your favorite browser is your dev environment:
   Safari 3.1+, Chrome, Firefox 3+, or Interne...
HOW IT WORKS [DEPLOYMENT]?
 IxEdit generates Javascript code designed to work
 with JQuery and JQueryUI.

 This code is cr...
DEMO TIME




Want to
W t t see more? L t’ d
              ? Let’s demo it!
Q
QUESTIONS ?
THANK YOU
      YOU.
Be h Lions you want to see.
B the Li



                              http://www.koutchoumi.com
     ...
Upcoming SlideShare
Loading in...5
×

Prototyping user interactions in web apps

1,425
-1

Published on

This talk will guide you through the prototyping of javascript interactions in web applications using a great and fun tool called iXEdit.

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

No Downloads
Views
Total Views
1,425
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
5
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Prototyping user interactions in web apps

  1. 1. YOU TALK JAVASCRIPT? PROTOTYPE IT WITH IXEDIT. Patrick NDJIENTCHEU, , Billing designer at Orange Cameroon, Software Engineer at koutchoumi.com, patrick@koutchoumi.com p BARCAMP CAMEROON, YAOUNDE, 12 June 2010.
  2. 2. WHO I AM ? Software Engineer working as Billing designer at Orange Cameroon since October 2007. Project Lead of koutchoumi.com : a real estate ads website launched in december 2009. A pure Lions fan ☺ pu e o s a
  3. 3. WHAT IS THE PLAN? The need for j p pp javascript in web apps Why does prototyping matter in user interface design? Prototyping javascript interactions: IxEdit Demo
  4. 4. JAVASCRIPT GREATLY IMPROVES USER EXPERIENCE More efficiency More f M fun Better form experience Brings Desktop UI patterns to the web
  5. 5. JAVASCRIPT: BETTER FORM EXPERIENCE > Dependant combo box: « Ville » and « Quartier » > I t t feedback Instant f db k
  6. 6. JAVASCRIPT BRINGS DESKTOP UI PATTERNS TO THE WEB > Modal dialog >T b Tabs
  7. 7. PROTOTYPING MATTERS IN UI DESIGN UI design is an iterative process. > In early stages of « implementation », you prototype. > More prototypes mean better UI. > Cheap prototypes mean faster results.
  8. 8. PROTOTYPING STATIC STATES > Paper prototyping > Balsamiq Mockups
  9. 9. PROTOTYPING JAVASCRIPT INTERACTIONS: IXEDIT IxEdit (ixedit.com) is a JavaScript-based interaction design tool for the web. It helps d i h l designers practice j ti javascript and DOM i t d DOM- scripting without coding. It is useful to try various interactions rapidly in the prototyping phase. It’s free and absolutely fun to use ☺
  10. 10. SOME INTERACTIONS WITH IXEDIT
  11. 11. 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. Then, it’ amazingly simple: Th it’s i l i l
  12. 12. HOW IT WORKS [DEPLOYMENT]? IxEdit generates Javascript code designed to work with JQuery and JQueryUI. This code is cross-browser compatible: p Internet Explorer 6+ Firefox 2+ Safari S f i 3+ Opera 9+ Chrome. Once you are done with the design, just remove IxEdit javascript and css i l i I Edit j i t d inclusions f from th h d the head element of the HTML.
  13. 13. DEMO TIME Want to W t t see more? L t’ d ? Let’s demo it!
  14. 14. Q QUESTIONS ?
  15. 15. THANK YOU YOU. Be h Lions you want to see. B the Li http://www.koutchoumi.com http://slideshare.net/pattchen http://facebook.com/pattchen Feedback? patrick@koutchoumi.com
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×