PROVIDE BETTERUSER EXPERIENCETO YOUR PROJECT
Whatwewilltalkabout?1. UI - What is it?2. UX - And that?3. UI and UX in web world4. Practical case - simple form5. What we...
"The user interface, in the in-dustrial design field ofhuman–machine interaction,is the space where interac-tion between h...
"...the goalofhuman-machine interaction engineeringis to produce a user interface which makes iteasy,efficient,andenjoyabl...
UI of computerapplication/websiteGRAPHICAL Textual auditoryKEYBOARD MOUSE TOUCHSCREENabcUSERINTERFACE
USER EXPERIENCEis...GRAPHICAL Textual auditoryKEYBOARD MOUSE TOUCHSCREENabcUSERINTTERFACEUSEREXPERIENCE... the way a perso...
wordofmouthbrandmanagementsearchenginestrategyresponsetimebrowsercompatibilitystandardcomplianceWCAG-2 / section 508compli...
userexperience-usabilitycementsplacementof elementsnaming andcategorizationtone ofvoicetypographynavigationintuitivenessst...
usability-lukewroblewskiSiteSeeing:AVisualApproachToWebUsabilityWebFormDesignmobilefirst
randmanagemesearch enginestrategyresponsetimebrowsercompatibilitystandardcomplianceWCAG-2 / section 508compliancecontent /...
USABILITYANDACCESSIBILITYARE REALLYIMPORTANTbe helpful give access
practicalcase-simple form
positivefeedback
negativefeedback
negativefeedback-optiona
negativefeedback-optionB
twitterhelp
newtechnologiescometohelpyouhtml5 css3 javascript
html5 newform featuresNewelements-nativevalidation<input type=”email” /> <input type=“number” /><input type=”url” /> <inpu...
VIDEOplayer&audioplayer<video src=”our-video.ogv” autoplay=”autoplay”controls=”controls” poster=”123.jpg”> </video>camera,...
websocketsONLINEGAMES,CHATS,REALTIME INFOwebstorageSESSION STORAGE-ONE WINDOWLOCAL STORAGE-BASED ON DOMAINCANVAS2DDRAWINGh...
CSS3 user experienceborder-radiustext-shadow box-shadow opacityrgbagradient multiple bgABCABC
CSS3 buttonsborder-radius text-shadowbox-shadow gradient
CSS3 animationsTRANSLATESKEWSCALEROTATE
JS - jqueryuserinterfaceinteractions widgetsdraggable accordion menuprogressbarsliderspinnertabsautocompletebuttondatepick...
JS -turn.js
JS -BERESPONSIVEMASONRYPLUGIN
Thankyou
Upcoming SlideShare
Loading in...5
×

Provide better user experience to your project

389

Published on

Presentation about user experience - why it is important, what HTML5, CSS3, JavaScript brings to us.

Published in: Education
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

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

No notes for slide

Provide better user experience to your project

  1. 1. PROVIDE BETTERUSER EXPERIENCETO YOUR PROJECT
  2. 2. Whatwewilltalkabout?1. UI - What is it?2. UX - And that?3. UI and UX in web world4. Practical case - simple form5. What web can offer you?a) HTML5b) CSS3c) JavaScript
  3. 3. "The user interface, in the in-dustrial design field ofhuman–machine interaction,is the space where interac-tion between humans andmachines occurs."UI-whatisit?
  4. 4. "...the goalofhuman-machine interaction engineeringis to produce a user interface which makes iteasy,efficient,andenjoyableto operate a machine in the way whichproduces the desired result."UI-Good UI desing
  5. 5. UI of computerapplication/websiteGRAPHICAL Textual auditoryKEYBOARD MOUSE TOUCHSCREENabcUSERINTERFACE
  6. 6. USER EXPERIENCEis...GRAPHICAL Textual auditoryKEYBOARD MOUSE TOUCHSCREENabcUSERINTTERFACEUSEREXPERIENCE... the way a person feels about usinga product, system or service.User experience is subjective,because it is all aboutindividual feeling.REMEMBER
  7. 7. wordofmouthbrandmanagementsearchenginestrategyresponsetimebrowsercompatibilitystandardcomplianceWCAG-2 / section 508compliancecolorschemeand contrastmediausegraphicelementsplacementofelementsnamingandcategorizationtoneofvoicetypographynavigationintuitivenessstructureappropriateforpurposeexpectedinformationnounexpectederrorsconformityconsistencyverifyabilitysatisfactiondifferentiationuniquenesscontent / presentationseparationnamingmarketingexpectedfunctionalitylaunchimplementationgraphicdesigninteractiondesigninformationarchitecturecontentandfunctionalityuserrequirementsstrategic foundationphhaasephhhaasephasephaseproductiondevelopmentconceptualstrategiccustomerproviderexperienceuserVALUEfindabilityaccessabilitydesirabilityusabilitycredibilityusefulnessfindabilityaccessabilitydesirabilityusabilitycredibilityusefulnessdontunderestimatethepowerofuserexperiencestrategic phaseconceptual phasedevelopment phaseproduction phase
  8. 8. userexperience-usabilitycementsplacementof elementsnaming andcategorizationtone ofvoicetypographynavigationintuitivenessstructureconformityconsistencyfyabilitfindabilityaccessability desirabilityusabilitycredibilityusefulnessusability
  9. 9. usability-lukewroblewskiSiteSeeing:AVisualApproachToWebUsabilityWebFormDesignmobilefirst
  10. 10. randmanagemesearch enginestrategyresponsetimebrowsercompatibilitystandardcomplianceWCAG-2 / section 508compliancecontent / presentationseparationmarketingfindabilityaccessabilitydesirabilityusabilitycredibilityusefulnesstyaccessabilitydeuserexperience-accessibility
  11. 11. USABILITYANDACCESSIBILITYARE REALLYIMPORTANTbe helpful give access
  12. 12. practicalcase-simple form
  13. 13. positivefeedback
  14. 14. negativefeedback
  15. 15. negativefeedback-optiona
  16. 16. negativefeedback-optionB
  17. 17. twitterhelp
  18. 18. newtechnologiescometohelpyouhtml5 css3 javascript
  19. 19. html5 newform featuresNewelements-nativevalidation<input type=”email” /> <input type=“number” /><input type=”url” /> <input type=“range” /><input type=”date” /> <input type=“tel” /><input type=”time” /> <input type=“color” /><input type=”datetime” /> <input type=”week” /><input type=”month” />newattributes<input type=”text” placeholder=”Write e-mail” /><input type=”text” required=”required” /><input type=”file” multiple=”multiple” /><input type=”text” pattern=”[0-9]{2}-[0-9]{3}” /><input type=”number” min=”0” max=”100” step=”5” />
  20. 20. VIDEOplayer&audioplayer<video src=”our-video.ogv” autoplay=”autoplay”controls=”controls” poster=”123.jpg”> </video>camera,micROPHONEaccesshtml5 nativepower
  21. 21. websocketsONLINEGAMES,CHATS,REALTIME INFOwebstorageSESSION STORAGE-ONE WINDOWLOCAL STORAGE-BASED ON DOMAINCANVAS2DDRAWINGhtml5 advanced
  22. 22. CSS3 user experienceborder-radiustext-shadow box-shadow opacityrgbagradient multiple bgABCABC
  23. 23. CSS3 buttonsborder-radius text-shadowbox-shadow gradient
  24. 24. CSS3 animationsTRANSLATESKEWSCALEROTATE
  25. 25. JS - jqueryuserinterfaceinteractions widgetsdraggable accordion menuprogressbarsliderspinnertabsautocompletebuttondatepickerdialogdroppableselectablesortableresizable
  26. 26. JS -turn.js
  27. 27. JS -BERESPONSIVEMASONRYPLUGIN
  28. 28. Thankyou
  1. A particular slide catching your eye?

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

×