Evolution of User Interface - Digital Web & Design Innovation Summit SFO 20 Sept 2013 @iRajLal (original) (raw)

• 1. DIGITAL WEB & DESIGN INNOVATION SUMMIT SAN FRANCISCO, CA , SEPT 20, 2013 Evolution of User Interface Raj Lal Nokia Inc. @iRajLal

• 2. 10+ years in S/W Design Author • Digital Design Essentials: 100 Ways to design better desktop, Web & mobile UI (DesignUserInterface.com ) About Me

• 3. 50 Years Journey Back in Time

• 4. What is a User Interface? Software: application, website, or mobile app User Interface is the body of a software

• 5. Software User Interface Function Data

• 6. UI answers 3 ‘HOW’ questions • How it looks like (VISUAL) • How it is understood (COGNITIVE) • How it works (INTERACT)

• 7. User Interface Journey Desktop Web Mobile

• 8. 1962 First User Interface

• 9. 1st Computer Game Spacewar

• 10. Steve Russell

• 11. VISUAL intriguing COGINITIVE 4 commands - spin left - spin right - thrust - fire INTERACT Keyboard

• 12. 1964 The Mouse

• 13. The Mouse

• 14. Douglas Engelbart

• 15. 1978 Command Line Interface

• 16. VisiCalc (The first ever spreadsheet)

• 17. Bob Frankston & Dan Bricklin invented spreadsheet

• 18. 1983 WIMP / GUI – Apple Lisa

• 19. 1st personal computer to use GUI

• 20. WIMP to GUI W = Windows I = Icons M = Menus P = Pointer

• 21. Steve Jobs with Lisa “We're prepared to live with Lisa for the next ten years.”

• 22. 1995 UI Frameworks

• 23. Visual Studio

• 24. Photo Editor

• 25. 2003 Widgets

• 26. Konfabulator

• 28. 2011+ Advanced User Interfaces

• 29. Zooming User Interface

• 30. Direct Manipulation

• 31. 3D Interface

• 32. Skeuomorphic Interface

• 33. Modern /Metro UI

• 34. 1990 World Wide Web

• 35. Tim Berners-Lee invented Web

• 36. Static Web

• 37. Dynamic Web - Online Store

• 38. 1997 Blog

• 39. Wordpress Themes

• 40. 2004 Web 2.0

• 42. 2005 Ajax

• 43. Ajax

• 44. 2012 HTML5 – 1st Working Draft

• 45. HTML5 – Adaptive User Interface

• 46. HTML5 – CSS3

• 47. 1991 Mobile Touch Interface

• 48. Pen based Interface

• 49. Pen Based Interface

• 50. 2003 Touchscreen Interface - FingerWorks

• 51. Multi Touch Interface

• 52. Gesture based Interface

• 53. User Interface Evolution Map 1962 1964 1978 1983 1991 1995 1997 2003 2004 2011 2012

• 54. This is Not the End Now this is not the end. It is not even the beginning of the end. But it is, perhaps, the end of the beginning. - Winston Churchill

• 55. Thank You DesignUserInterface.com Raj Lal Nokia Inc. @iRajLal DIGITAL WEB & DESIGN INNOVATION SUMMIT SAN FRANCISCO, CA , SEPT 20, 2013