Ux intro

722 views

Published on

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

Published in: Design, Technology
  • Be the first to comment

Ux intro

  1. 1. UX sawahid@gmail.com 18th April 2014
  2. 2. Process (15m) Technology (25m) U X Knowledge (20m)
  3. 3. KNOWLEDGE
  4. 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. 5. Peter Morville, semanticstudios.com usable findable credible useful desirable accessible valuable Goals
  6. 6. valuable Deliver value to our sponsors.
  7. 7. UX vs Usability
  8. 8. Designing for Emotion, -Aarron Walter
  9. 9. Seductive Playful Creates flow Has Meaning PLEASURE
  10. 10. PROCESS
  11. 11. Black Box Graphic DesignerBiz Analyst
  12. 12. UX Process Analyst/ Ethnographer Info Architect Int/WF Designer Graphic Designer 2010 Content Choreography 2014
  13. 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. 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. 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. 16. Jesse James Garret - 2000 Do Stuffs Look Up Stuffs
  17. 17. Competencies http://www.linja.com/blog/category/toolbox/
  18. 18. UX Competencies http://blog.mediarain.com/2012/03/the-makeup-of-the-ideal-ux- professional/
  19. 19. Core Competencies •Information Architecture (IA) •Interaction Design •Usability Engineering •Visual Design •Prototype Engineering
  20. 20. UCD vs SDLC http://www.sameerchavan.c
  21. 21. TECHNOLOGY
  22. 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. 23. Responsive Design
  24. 24. Paradigm Shift M C VSynch MVC Concept Server Client (Browser)
  25. 25. V Asynch Server Client (Browser) CM Mobile First Offline First Paradigm Shift MVC Concept
  26. 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. 27. Javascript
  28. 28. Faster JS
  29. 29. Javascript Assembly Language for browser
  30. 30. JSLinux http://bellard.org/jslinux/
  31. 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. 32. ASM.js LLVM Bytecode Emscripten Javascript C C++ ASM.js (Javascript) Google’s PNaCL
  33. 33. ASM.js
  34. 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. 35. Asynchronous Web Server Why ? Handling a lot of small chunks of info instead few big chunks
  36. 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. 37. Storage Canvas Communication
  38. 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. 39. Browser Database NOT part of HTLM5 Standard yet! RDBMS Object Database IndexDB SQLite
  40. 40. Mobile Storage http://www.html5rocks.com/en/tutorials/offline/quota-research/
  41. 41. Desktop Storage http://www.html5rocks.com/en/tutorials/offline/quota-research/
  42. 42. Canvas Pixel control in browser Drawing Apps GUI components WebGL Sencha
  43. 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. 44. THANK YOU

×