evolution of user interface - digital web & design innovation summit sfo 20 sept 2013 @irajlal

DIGITAL WEB & DESIGN INNOVATION SUMMIT SAN FRANCISCO, CA , SEPT 20, 2013

Evolution of User Interface

Raj Lal Nokia Inc.

@iRajLal

https://twitter.com/irajlal

10+ years in S/W Design

Author • Digital Design Essentials:

100 Ways to design better desktop, Web & mobile UI

(DesignUserInterface.com )

About Me

http://www.designuserinterface.com/

50 Years

Journey Back in Time

What is a User Interface?

Software: application, website, or mobile app

User Interface is the body of a software

Software

User Interface

Function

Data

UI answers 3 ‘HOW’ questions

• How it looks like (VISUAL)

• How it is understood (COGNITIVE)

• How it works (INTERACT)

Presenter

Presentation Notes

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


1964

The Mouse

The Mouse

Presenter

Presentation Notes


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

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

https://twitter.com/irajlal

evolution of user interface - digital web & design innovation summit sfo 20 sept 2013 @irajlal

Technology

d interface

skeuomorphic interface

mobile app user interface

mobile touch interface

html5 adaptive user

user interface evolution

multi touch interface

command line interface