Your SlideShare is downloading. ×
Ux intro
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Ux intro

289
views

Published on

Introduction to User Experience (UX) concept. Covers the background, and recent technologies (2014) and the areas of HTML5 and web.

Introduction to User Experience (UX) concept. Covers the background, and recent technologies (2014) and the areas of HTML5 and web.

Published in: Design, Technology

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
289
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
9
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
  • WebSQL , IndexDB
  • Javascript VM – Firefox = spidermonkey, Safari/webkit = Nitro/SquirelFish , Google = V8
  • Use pepper API (plugin) to bridge in other browser.
  • OpendbTransactionExecuteSQL
  • SENCHA+Mobile/touch+Ext JS – browser UI+GXT – Java to JSwebGL - GoogleMap
  • Transcript

    • 1. UX sawahid@gmail.com 18th April 2014
    • 2. Process (15m) Technology (25m) U X Knowledge (20m)
    • 3. KNOWLEDGE
    • 4. UX ? SMELL SEE TASTE HEAR TOUCH The creation and synchronization of the elements that affect user’s experience with a particular company, with the intent of influencing their perception and behavior -Russ Unger/Carolyn Chandler “Project Guide to UX Design”
    • 5. Peter Morville, semanticstudios.com usable findable credible useful desirable accessible valuable Goals
    • 6. valuable Deliver value to our sponsors.
    • 7. UX vs Usability
    • 8. Designing for Emotion, -Aarron Walter
    • 9. Seductive Playful Creates flow Has Meaning PLEASURE
    • 10. PROCESS
    • 11. Black Box Graphic DesignerBiz Analyst
    • 12. UX Process Analyst/ Ethnographer Info Architect Int/WF Designer Graphic Designer 2010 Content Choreography 2014
    • 13. How human think Cognitive Psychology Examples: Information chunking (eg. 603-8995-1000) Bower & Springston, pg 203, 1970, Solso Wickelgren & Wickens, pg 251, 1964 Canonical View of Icons/pictures Palmer, Rosch & Chase, pg 119, 1981, Solso
    • 14. Experimentation on human behavior Experiment Examples: Horizontal scanning not vertical Donk, pg 73, 1994, Wickens Optimum text content characteristic for computer(count char not length, 100 char/ln) Dyson, pg 337, 2004,Behavior&IT Vol 23
    • 15. Large scale test result. Field test Examples: Eye gaze paterns: search vs. browse (F-patern) Sav & Kelsi, 2007, Vol 9.1, Usability News Effect of attentional enertia to banner advertisement (size matter, placement no difference) Wang & Day, 2007, Comp. In Human Behavior
    • 16. Jesse James Garret - 2000 Do Stuffs Look Up Stuffs
    • 17. Competencies http://www.linja.com/blog/category/toolbox/
    • 18. UX Competencies http://blog.mediarain.com/2012/03/the-makeup-of-the-ideal-ux- professional/
    • 19. Core Competencies •Information Architecture (IA) •Interaction Design •Usability Engineering •Visual Design •Prototype Engineering
    • 20. UCD vs SDLC http://www.sameerchavan.c
    • 21. TECHNOLOGY
    • 22. HTML CONTENTS CSS PRESENTATION Javascript BEHAVIOR HTML 5 • Canvas • SVG • Video CSS 3 • Transform • 3D transform • Transition • Animation Java C++ Javascript 6 • Class • Module • Generator SCALABLE
    • 23. Responsive Design
    • 24. Paradigm Shift M C VSynch MVC Concept Server Client (Browser)
    • 25. V Asynch Server Client (Browser) CM Mobile First Offline First Paradigm Shift MVC Concept
    • 26. Framework & Tool Kit Knockout.js Angular.js Persistence.js Bootstrap.js Fluid design Layout Look n feel Require.js SQLite DB Webkit – Safari , Chrome Module dependencies Asynchronous Module Loading (AMD) MVC V M Modular Infra
    • 27. Javascript
    • 28. Faster JS
    • 29. Javascript Assembly Language for browser
    • 30. JSLinux http://bellard.org/jslinux/
    • 31. C/C++ Source LLVM Bytecode Emscripten Javascript C C++ (Low Level Virtual Machine) ActionScript, Ada, D, Fortran, OpenGL Shading Language, Haskell, Java bytecode, Julia, Objective-C, Python, Ruby, Rust, Scala,C# http://jamesfriend.com.au/pce-js/ http://noctua-software.com/voxel-invaders/play
    • 32. ASM.js LLVM Bytecode Emscripten Javascript C C++ ASM.js (Javascript) Google’s PNaCL
    • 33. ASM.js
    • 34. Capucino Higher Level Languages Coffeescript 100% JS GUI Framework Superset of JS -Objective-J + OO + Import http://www.cappu ccino-project.org Dart Language Compiler- generate JS Backend-Frontend tool – + VM backend + JS code generator for FE https://www.dartlang.org/ http://coffeescript.org/
    • 35. Asynchronous Web Server Why ? Handling a lot of small chunks of info instead few big chunks
    • 36. Node.js Asynchronous Web Server Vert.x NGINX Single thread Javascript centric Can be extended with C module Running on CRL VM Focus is cross language functions (polyglot) Among longest in market Mutliple worker threads
    • 37. Storage Canvas Communication
    • 38. HTML5 Storage LocalStorage Limit 5 MB-500MB Persistence SessionStorage FileSystem Stored large object Link through URL AppCache WebStorage Temporary Cleared after session Cache pages/resources Config thru manifest Synch problems. Review. W/A ServiceWorker (JS)
    • 39. Browser Database NOT part of HTLM5 Standard yet! RDBMS Object Database IndexDB SQLite
    • 40. Mobile Storage http://www.html5rocks.com/en/tutorials/offline/quota-research/
    • 41. Desktop Storage http://www.html5rocks.com/en/tutorials/offline/quota-research/
    • 42. Canvas Pixel control in browser Drawing Apps GUI components WebGL Sencha
    • 43. WebSocket vs WebRTC Stream Server Client Signaling Server WebSocket Available in most browser Use server session WebRTC New technology. Exists only in modern browsers P2P WebRTC
    • 44. THANK YOU