1. Visual - how does it look like - easy to look at - color, fonts, readability, size, icons, logo, 2. Cognitive - how user perceives it - easy to understand metaphors, Skeuomorphic design (How to use it and how to interact with it). 3. Accessible - how user access its information, features and functionality and how it responds to user requests - - easy to use and interact with How to use it and how to interact with it Accessible - ease of use, easy layout, composition of the interface, one idea in one screen, limit number of items in the menu, Interactive - responsive, feedback, interactivity Lets take a simple example of a clock. Clock application will give the following Information, current time Functionality, you can set time, alarm �And the User Interface decides. How it looks to the user How it’s functionality is understood. How to use and interact with it.
User Interface Journey
Desktop Web
Mobile
1962
First User Interface
1st Computer Game Spacewar
Presenter
Presentation Notes
First Interesting use of User Interface The first computer game for creating a multi player Computer Game SpaceWar . Interface Keyboard and Cathodray tube (NO MOUSE)
Steve Russell
Presenter
Presentation Notes
First Interesting use of User Interface The first computer game Cathode ray tube type display and keyboard input
VISUAL intriguing COGINITIVE 4 commands - spin left - spin right - thrust - fire INTERACT Keyboard
Presenter
Presentation Notes
First Interesting use of User Interface The first computer game for creating a multi player Computer Game SpaceWar . Interface Keyboard and Cathodray tube (NO MOUSE)
1964
The Mouse
The Mouse
Presenter
Presentation Notes
First Interesting use of User Interface The first computer game for creating a multi player Computer Game SpaceWar . Interface Keyboard and Cathodray tube (NO MOUSE)
Douglas Engelbart
Presenter
Presentation Notes
Douglas Engelbart changed the way computers worked, from specialized machinery that only a trained scientist could use, to a user-friendly tool that almost anyone can use. He invented or contributed to several interactive, user-friendly devices: thecomputer mouse, windows, computer video teleconferencing,hypermedia, groupware, email, the Internet and more. In 1964, the first prototype computer mouse was made to use with a graphical user interface (GUI), 'windows'. Engelbart received a patent for the wooden shell with two metal wheels (computer mouse U.S. Patent # 3,541,541) in 1970, describing it in the patent application as an "X-Y position indicator for a display system." "It was nicknamed the mouse because the tail came out the end,"
1978
Command Line Interface
VisiCalc (The first ever spreadsheet)
Bob Frankston & Dan Bricklin invented spreadsheet
Presenter
Presentation Notes
Douglas Engelbart changed the way computers worked, from specialized machinery that only a trained scientist could use, to a user-friendly tool that almost anyone can use. He invented or contributed to several interactive, user-friendly devices: thecomputer mouse, windows, computer video teleconferencing,hypermedia, groupware, email, the Internet and more. In 1964, the first prototype computer mouse was made to use with a graphical user interface (GUI), 'windows'. Engelbart received a patent for the wooden shell with two metal wheels (computer mouse U.S. Patent # 3,541,541) in 1970, describing it in the patent application as an "X-Y position indicator for a display system." "It was nicknamed the mouse because the tail came out the end,"
1983
WIMP / GUI – Apple Lisa
1st personal computer to use GUI
WIMP to GUI
W = Windows I = Icons M = Menus P = Pointer
Steve Jobs with Lisa
“We're prepared to live with Lisa for the next ten years.”
Presenter
Presentation Notes
The very first graphical user interface was developed by the Xerox Corporation at their Palo Alto Research Center (PARC) in the 1970s, but it was not until the 1980s when GUIs became widespread and popular. By that time the CPU power and monitors necessary for an effective GUI became cheap enough to use in home computers. Steve Jobs, co-founder of Apple Computers, visited PARC in 1979 (after buying Xerox stock) and was impressed by the "Alto", the first computer ever with a graphical user interface. Several PARC engineers were later hired by Apple and worked on the Apple Lisa and Macintosh. The Apple research team contributed much in the way of originality in their first GUI computers, and work had already begun on the Lisa before Jobs visited PARC.
1995
UI Frameworks
Visual Studio
Photo Editor
2003
Widgets
Konfabulator
2011+
Advanced User Interfaces
Zooming User Interface
Direct Manipulation
3D Interface
Skeuomorphic Interface
Modern /Metro UI
1990
World Wide Web
Tim Berners-Lee invented Web
Static Web
Dynamic Web - Online Store
1997
Blog
Wordpress Themes
2004
Web 2.0
2005
Ajax
Ajax
2012
HTML5 – 1st Working Draft
HTML5 – Adaptive User Interface
HTML5 – CSS3
1991
Mobile Touch Interface
Pen based Interface
Pen Based Interface
2003
Touchscreen Interface - FingerWorks
Multi Touch Interface
Gesture based Interface
User Interface Evolution Map
1962
1964
1978
1983
1991
1995
1997
2003
2004
2011
2012
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
Thank You
DesignUserInterface.com
Raj Lal Nokia Inc.
@iRajLal
DIGITAL WEB & DESIGN INNOVATION SUMMIT SAN FRANCISCO, CA , SEPT 20, 2013