This document provides an overview of UX topics including: - The definition of UX as the creation and synchronization of elements that affect a user's experience with a company. - An overview of UX goals like being valuable, desirable, and accessible. - Comparisons between UX and usability. - Details on the UX process, technologies involved like HTML5, CSS3, and JavaScript, and tools used in UX like prototyping and information architecture.

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

9. Designing for
Emotion,
-Aarron Walter

10. Seductive
Playful
Creates
flow
Has
Meaning
PLEASURE

11. PROCESS

12. Black Box
Graphic
DesignerBiz
Analyst

13. UX Process
Analyst/
Ethnographer
Info
Architect
Int/WF
Designer Graphic
Designer
2010
Content
Choreography
2014

15. 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

16. 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

17. 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

18. Jesse James
Garret - 2000
Do Stuffs
Look Up Stuffs

19. Competencies
http://www.linja.com/blog/category/toolbox/

20. UX Competencies http://blog.mediarain.com/2012/03/the-makeup-of-the-ideal-ux-
professional/

21. Core Competencies
•Information Architecture (IA)
•Interaction Design
•Usability Engineering
•Visual Design
•Prototype Engineering

22. UCD vs SDLC
http://www.sameerchavan.c

23. TECHNOLOGY

24. 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

25. Responsive
Design

26. Paradigm Shift
M C VSynch
MVC Concept
Server
Client
(Browser)

27. V
Asynch
Server
Client
(Browser)
CM
Mobile First
Offline First
Paradigm Shift
MVC Concept

28. 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

29. Javascript

30. Faster JS

31. Javascript
Assembly Language
for browser

32. JSLinux http://bellard.org/jslinux/

33. 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

34. ASM.js
LLVM Bytecode Emscripten Javascript
C
C++
ASM.js
(Javascript)
Google’s
PNaCL

35. ASM.js

36. 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/

37. Asynchronous Web
Server
Why ?
Handling a lot of
small chunks of
info instead few
big chunks

38. 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

40. Storage
Canvas
Communication

41. 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)

42. Browser Database
NOT part of HTLM5 Standard yet!
RDBMS
Object
Database
IndexDB
SQLite

43. Mobile
Storage
http://www.html5rocks.com/en/tutorials/offline/quota-research/

44. Desktop
Storage
http://www.html5rocks.com/en/tutorials/offline/quota-research/

45. Canvas
Pixel control in
browser
Drawing Apps GUI components
WebGL Sencha

46. 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

47. THANK
YOU