Your SlideShare is downloading. ×
Prototyping user interactions in web apps
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Prototyping user interactions in web apps

1,351

Published on

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

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,351
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
4
Comments
0
Likes
1
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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. 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. 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. JAVASCRIPT GREATLY IMPROVES USER EXPERIENCE More efficiency More f M fun Better form experience Brings Desktop UI patterns to the web
  • 5. JAVASCRIPT: BETTER FORM EXPERIENCE > Dependant combo box: « Ville » and « Quartier » > I t t feedback Instant f db k
  • 6. JAVASCRIPT BRINGS DESKTOP UI PATTERNS TO THE WEB > Modal dialog >T b Tabs
  • 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. PROTOTYPING STATIC STATES > Paper prototyping > Balsamiq Mockups
  • 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. SOME INTERACTIONS WITH IXEDIT
  • 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. 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. DEMO TIME Want to W t t see more? L t’ d ? Let’s demo it!
  • 14. Q QUESTIONS ?
  • 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

×