A look at how the web evolved from Web 1.0 to Web 3.0

1. The Web Phenomenon
Re-Engineering for User Experience (PAST, PRESENT & FUTURE)
Presented by: Rafi Ali Khan “True User Experience ….is about
encouraging Communication”
– Ed Scholssberg
rafi@zool.in | www.zool.in
Prepared: Using the wisdom of everyone 1

2. Rafi Ali Khan
User-centric techno creative specialist with broad experience in
design and implementation focus on web based applications on
various platforms, tools and domains. Experience focused on User
experience, Interaction design, Information Architecture, conceptualizing, storyboarding
& prototyping along with strong programming and product development skills
Current Role: Lead Architect UI - User Experience Lab, Aris Global
Experience: ~ 10 years of experience mostly on the Web Applications, consumer sites and
open source tools
Specialist: Web 2.0 Subject Matter expert / Usability Consultant
Key Clients in the Past: MTV Europe / Ebbon Dacs / Hannover Re / British Telecom / Verizon
Wireless / Move.com & Realtor.com / Precise Media / Daily Telegraph UK / Coca Cola /
Merck / Manipal University
Co-Founder and Moonlight at: Zool Tech Solutions Pvt Ltd (http://www.zool.in)
2

3. Interface Phenomenon
• TYPEWRITER
• MOUSE
• XEROX COPIER
• COMMODORE 64
• PRINTERS
• POST IT
• Floppy drives / CD drives
• tapes/cassettes /mp3 /dvd
• DIGITAL CAMERA (not Polaroid)
• MOBILE PHONE
• BARCODE READERS
• CREDIT CARD
• SWIPECARDS - FLASH CARDS (USB PORTS)
• IPOD
• IPHONE
• SURFACE/TOUCH
* In no particular order
3

4. Web Phenomenon???
• A phenomenon is any extraordinary event that
is observable in a as a philosophical way
rather than a measurable physical one.
• It succeeded in spite of:
– The Internet not having a business plan
– No CEO to run the show
– Early plain - Jane browser support
– Fragmented web hyperlinked by reference
– Early detractors who said one cannot build
a world wide network on TCP/IP – IBM, 1992
– Just on a belief that the answer is out there
somewhere
4

5. A web Web Phenomenon
of User Experience
Linear Web - 1.0 Collaborative Web – 2.0 Configurable Web – 3.0
“Build it and.. “If you engage… “If you
build, engage, share, collaborate, personalize, syndi
… they will come” …they will come.” cate, have an open policy …
…provide multiple device access to what they
want, when they want it and how they want it..
…they will come”
The changing ways of user experience – in the context of web:
Users were happy to just find content and tools, then they began to explore and engage and in the
future, they want it all and they want to pick and choose what they want…
5

6. The dot com boom
“Build it and.. … they will come”
Web 1.0 Focus on Documents
the read only web / - the linear web
1995-1999
6

7. Web 1.0 Approach
If you build it, they will come.
– Millions of static web pages (.html, .shtml)
– Desire for online viability
– Online Vcards + Brochures / Product Catalogues
7

8. Web 1.0 Design Philosophy
If you can't make it work, at least make it look
good.
• Content is king
• Bevels and dropshadows
• Animated Gifs
• No Structure, Styling or Standards
• Its under construction
8

9. Web 1.0 Examples
• Web Directories
– Yahoo, Altavista, dmoz
• Web Catalogues
– Amazon
• Business Directories
– Alibaba, Yellow page
• Corporate Websites
– everyone got one
• Personal Pages
– everyone got one too
9

10. Web 1.0 Key Drivers
• Need for web presence
• Internet Communication (Email)
• Intranet Solutions
• e-Learning
• e-commerce (B2B & B2C)
10

11. Web 1.0 Learning
• We discovered
– the power of networks
– the power of links (Linked documents)
– the power of reach and content
– the power of collaboration
• 45 million global users
11

12. Web 1.0 Limitations
Desktop Technology adopted for the web and
web development tools
– C++, CGI Perl, Java Applets
– HTML on Notepad, Homesite (no web specific IDEs)
– VBScripts / Javascripts / Jscripts
– Poor Web Server Technology
– Browser Standards
– Lacks Context, Scalability, Interaction
12

13. Web 1.0 Conclusion
When we got a grip on the technical part, the
real possibilities of the web became more
clear.
– So we started building Intranet & CMS
Applications
– Focus on building the Infrastructure
13

14. Business @ Speed of Thought
• Information flow is your life blood
• The 1990s was driven by infrastructure
• The 2000s will be driven by velocity
• Good news must travel fast bad news faster
• Adopt the web Workstyle – Lifestyle
• Create a paperless office
- Author, Bill Gates 1999
14

15. In web we trust.
“If you engage……they will come.”
Web 2.0 Focus on
the re-writable web / the Collaborative web
2000-2010
15

16. Some Buzz Words of Web 2.0
• Blogging
• Mashup
• Ajax
• Wiki
• Rich Internet Application
• Visual & Keyword Tagging (Folksonomy), Social Book
Marking
• Social Networking
• Web Oriented Architecture
• Video & Photo Share
• Content Sharing
• Agile Development
• RSS – (the web crawler killer)
16

17. 3 Simple keys to identify a Web 2.0 application
• Technology & Approach
• User Centric Design – Perpetual Beta
• User generated content *
* Quote
“Every system worth using will be abused before its used”
17

18. Web 2.0 Approach
Web Standards
– Better Browsers
– SOA / XML / APIs
Focus on the User Synergy
of User Experience
– Content Management
– User Generated (blogs, wiki, tags)
– Social Networking
– Software as a Service
18

19. Web 2.0 Social
74% of Men use the Internet 74% of Women use the Internet
38% of users, use the internet several times a day | 21% - once a day.
Age group: 93% (19-29) | 81% (30-49) | 70% (50-64) * On a crowd19
sample of 100 people

20. Web 2.0 Design Philosophy
• Re-Engineering of Products for better User Experience
– Product Branding & UX Strategy / Contextual Analysis
– Own Product UI Standards & UI Component Design
• Information Architecture
– Creating Information Hierarchy / Story boards & Wireframes
– Application Structure / Navigational Pattern / Nomenclature
• Interaction Design
– Application Level consistency / Mapping user goals to screens
– Page Level task based analysis / Information transparency
• Usability Engineering
– Navigation, Task oriented goals, Terminology
– Screen Flow & Interaction
• Visual Design
– Layout Design / Brand Colors / Themes / Iconography
• Prototype Engineering
“Focus on the users and everything else
– UI Framework / Patterns / Components library
will follow” – Google’s UX Strategy
– Product Prototype
20

21. User Experience
Web 2.0 Design Philosophy
Design - Lightweight rich functional UI
– curves & colors
Web 2.0 Design Philosophy
1. Goal oriented design
2. Don't Decorate, Communicate!
3. Design like no-one's watching
4. The Design Spectrum
5. Simplicity in web design
Top 15 Design Guidelines
1. Simplicity 11. Rich surfaces
2. Central layout 12. Gradients
3. Fewer columns 13. Reflections
4. Separate top section 14. Cute icons
5. Solid areas of screen real-estate 15. Star flashes
6. Simple nav
7. Bold logos
8. Bigger text
9. Bold text introductions
10. Strong colours
21

22. Web 2.0 Technology (RIA)
AJAX REST ATOM
RSS SOAP APIs
WOA JSON FLEX
SEO AIR Ruby .mobile Silverlight
22

23. Web 2.0 Key Drivers
Open Access Open Software / Source
• CRM – SUGAR CRM
• Mail/Chat – GMail /Hotmail/Yahoo/AIM
• Content Management – Liferay / Alfresco / OpenCMS
• Social Network – Facebook, Twitter • ERP – Open Bravo
• Map – Bing Maps / Google Maps / Yahoo Maps • IM – Jabber
• Shopping – Amazon / Ebay • Database – MySQL
• Encyclopedia – Wikipedia • Mail Client – Zimbra / Scalix / Zenprise
• Blogs – Wordpress
• RealEstate – Realtor.com
• Wiki – Wikimedia
• Search – Google, Bing • Aggregator – NewsGator
• Intranet – Traction/ MS Sharepoint Service
• UI Components – Google / Yahoo
Web Focused technologies & Tools
Languages: .NET, J2EE, PHP, Ruby, Python
IDE: Visual Studio, Eclipse
Servers: Apache 2.0, Tomcat, IIS7, Web logic
RIA Frameworks: Flex, Silverlight, Extjs, jquery
… are surely helping to drive Web 2.0
23

24. Web 2.0 Examples
Blogger
24

25. A look into User Experience
Web {Enterprise} 2.0
the user focused web / the social work web
25

26. Engaging your
Users
“Build it and they will come” – Early Web
“I’ve been amazed at how often those outside the discipline of
design assume that what designers do is decoration. Good design
is problem solving “- Jeffery Veen,
26

27. Users begin with the question
“Does this software help manage my
business/lifestyle better?”
Indisputably; technology answers this question logically applying
principles of mathematics to present actionable insights to manage
business/lifestyle needs.
Technology delivers on this promise time and again. (Programmers don't write bad software)
27

28. Users have a follow up question
“How do I use this software?”
Research reveals that up to 46% of software products build (at enterprise level) is never
used. Why? Because the software is too hard to use and too unfamiliar.
“It’s too much trouble; don’t make me think”, says the user.
(Programmers don't write bad software)
Unfortunately Programmers write software for programmers.
28

29. Gone are the days of:
smplr
“Build it and they will come”
– do more with less
Businesses are increasingly realizing the importance to
smrtr deliver differentiated user experience across multi-
– do more with less
channels that not only to attract new customers but also
bttr never let them go.
– do more with less
Today’s customers are more discerning in the content of the service they
choose to consume.
“Give me something I need and make it simple to use.”
29

30. Software 2.0 Design
@ Microsoft
“In transition from being an
engineering-led company to as much a
design-led company.
There are more designers at Microsoft
on any single team as there were not
too long ago in the entire company.
It's a wonderful change.“
– Bill Burton, Researcher Microsoft
Evidence of that change includes Microsoft's having given
control of the design of Office 2007 to a team of user
experience designers. And the Office 2007 user interface is
dramatically different from any Office user interface which
has preceded it.
30

31. Engaging Your
Users
“Users are a colorful bunch with varied
expectations from the same ecosystem”
31

32. Enabling Define
• Decide what issue you are trying to resolve.
the User Experience • Agree on who the audience is.
Research
• Collect examples of other attempts to solve the same issue.
• Talk to your end-users, that brings you the most fruitful ideas for later
design
Ideate
• Identify the needs and motivations of your end-users.
• Generate as many ideas as possible to serve these identified needs
Prototype
• Combine, expand, and refine ideas.
• Create multiple drafts.
Choose
• Set aside emotion and ownership of ideas.
• Remember: the most practical solution isn't always the best.
Implement
• Assign tasks.
• Execute.
Learn
• Determine if the solution met its goals.
• Discuss what could be improved.
- Wikipedia
32

33. Elements
of User Experience
User Experience strategy helps define the following terms within their appropriate context and clarifies the underlying relationships
among these various elements of a typical Web Software Interface.
- Jesse James Garrett
33

34. What Users are asking for?
• Responsive vs Performance
• Recognition vs Recall (Memory can keep at the most 7+-2 items) Very
important when it comes to iconography, structure, images and visual cues.
Recognition gives you orientation – like driving home.
• Human’s take time to make a choice…instead of from where to where – why not
just get to Koromangala and give the remaining details there.
• Minimum visual cues are more than enough to navigate to a location.
• Graphical Interfaces vs Command Line
• Progressive Disclosure (don’t show options unless they
are needed)
• Attention is limited – even though we claim to multitask –
only one task can have conscious attention – like driving our performance does not
suffer once we have learned.
34

35. User Experience Jargons
• Human Computer Interaction (HCI)
• User Interface Design (UID)
• User Experience Design (UED)
• User Centered Design (UCD)
• Graphical User Interface (GUI)
• Information Architecture (IA)
• Usability
• Usability Testing
“User Experience design should become invisible when it’s done well. It’s only when it’s done
poorly that we notice it.” - Jared Spool
35

36. Knowledge vs. wisdom
• Knowledge is knowing that tomato is a fruit. Wisdom is not putting it
in the fruit salad.
If we knew what it was we were doing, it would
not be called research, would it?
- Albert Einstein
36

37. Usability Design
Designing with use in mind
"Keep the client focused on two aspects of the
design: what they want to accomplish, and who
they are trying to accomplish this for. Business goals
and user goals."
—Peter Van Dijck
37

38. Usability
• Why usability? Coz many don’t care about this
giving us an opportunity to build something
that will stand out of the crowd.
• Functional needs and emotional needs need
to be addressed
Insanity: doing the same thing over and
over again and expecting different results.
- Albert Einstein
38

39. “Design thinking is a process for practical, creative
resolution of needs or issues that looks for an
improved future result.
Unlike critical thinking, design thinking is a creative
process based around the "building up" of ideas. Outside
the box thinking is encouraged in this process since this can
often lead to creative solutions.”
– Wikipedia
“Design is always about synthesis -synthesis of market needs, technology
trends, and business needs.” —Jim Wicks, Motorola
39

40. RIA – Rich Interactive Application or Rich Internet Application
Adobe
Flex Integrated
Runtime
Rich Internet Applications (RIA) are web applications that
have the features and functionality of traditional desktop
applications.
RIAs typically transfer the processing necessary for the user interface to the
web client but keep the bulk of the data (i.e., maintaining the state of the
program, the data, etc.) back on the application server.
Bridging Desktop and Web
• Drop.io
• Picasa Adobe Flex Rules, Everything Else Drools
• Live Drive
Platform Support
40

41. Ideate - Building Front End Controls
• Identify the needs and motivations of your end-users.
• Generate as many ideas as possible to serve these identified needs
• Building front end components
Flyout Dashboard Information Bar
Advanced Search
Grid View with Form Views
Double Row Grid
Action Menus for Grid
Grouping Grids Editable Tree Grids
Editable Grids Grid Right Click Menus Calendar Components Multiselect Flyout
41

42. Web Widgets
Maximize/Popout
Close/Delete
Skeleton of a Dashboard Widget Actions
Refresh
Filter
Actions
Back 6 Drop Down menu Share
Forward
Print
5
Export
4 Alert
3 Meets SLA Save
SLA Delayed Configure
2
Failed SLA
1
0
Bar Graph
Network Software Hardware MS MS SQL Grid View
Exchange Server
Line Graph
Pie graph
iGoogle, netVibes
42

43. Procuring Dashboard Widgets
Centrally Maintained
Ag Widget Library
(Hosted Service)
Authorization
Medical
Safety Regulatory Clinical
Information
Get Widgets Get Widgets Get Widgets Get Widgets
43

44. Collaboration Bar
Application notes
• Easy access to
collaborative content
• Context based as well as
across application
– Mail Access Bookmarks
– Chat
– Notes
– Bookmarks
– Alerts across the system
– Reminders across the
Alerts
system
– Tasks
– Multiple Open Tabs
– and more…
Quick
Reminders
44

45. Preferences
• Different Users prefer different views and its imperative that
we build some level of customization for the users.
Advanced Preferences for Application Settings
and System Settings
45

46. Enterprise Application
Enterprise Application = User Interface + Content / Data + Program 46

47. Social Enterprise
The focus from B2B
changes to B2C
Fortune 100 - Social Media
34% 54%
Corporate Facebook
blog Fan Page
7 posts per month 3.6 post per week
50% 65%
YouTube Twitter
Channel Account
10 videos per month 27 tweets per week
47

48. Back to…
Web 2.0
the rewritable web / the social web
48

49. Web 2.0 Learning
• We discovered
– (re) the power of networks
– the power of collaboration
• 1 Billion+ Users
– the power of friends & communities
– the power of shared content (mashups)
– the power of web applications
– how to be connected always
– agile methodologies (rapid prototyping)
– we can make money out of Web
• advertisement / SaaS / e-Commerce / Content on Demand
49

50. Web 2.0 Limitations
• Basically, web 2.0 is a social change. The technical
part of the web hasn’t changed very much.
• No Persistent Identity
• Content walled within applications
• Infrastructure for scale is with a top few
50

51. Web 2.0 Conclusion
• There is no meaning to data for computers
– (Semantic or Metadata for data)
• eg. Search/ Query bring back list of URLs not data
• Lacks linking/relationship of data (Oncology)
• Implicit knowledge should be explicitly stated
Eg. Java = Coffee or language or island
– Focus is shifting back to technology
51

52. The Web is your Platform
“If you
build, engage, share, collaborate, personalize, syndi
cate, have an open policy …
…provide multiple device access to what they
want, when they want it and how they want it..
…they will come”
Web 3.0
the semantic web / the configurable web
2010 - onwards
Cloud Computing
52

53. Purpose
“Data on the web defined and linked in a way that it
can be used by machines not just for display
purposes, but for automation, integration and reuse
of data across various applications”
- Sir Tim Berners-Lee
53

54. Web 3.0 Approach
While Web 2.0 uses the Internet to make connections between
people, Web 3.0 will use the Internet to make connections
with information.
– We will consume web in much more ways
• Desktops, Handhelds, TV etc
– Need for a Persistent Identity
– Need for Linked Data to answer
– Web Personal assistant
– World of Mashups
– Smarter Browsers
– Videos become first class linked citizens
– Mobile Web
– Ubiquitous Web
54

55. Web 3.0 Design Philosophy
Design around User + Data
• Right now, the Web's structure is geared for humans. It's easy for us to
visit a Web page and understand what it's all about. Computers can't do
that. A search engine might be able to scan for keywords, but it can't
understand how those keywords are used in the context of the page.
• Newer ways of integrating, combining, analyzing and presenting data
• Reuse of data across application, enterprises or social
55

56. Web 3.0 Examples
• DBPedia
– Wikipedia’s Structured data
• Web 3.0 Applications
– Bing Maps
• Virtual Earth, Satellite, Street Maps, Flickr, Photosynth
integration
56

57. Web 3.0 Key Drivers
– Necessity to attach metadata to web resources – vocabularies to
describe “things” properties, domains, people, specifying relationships
between resources, managing knowledge about things
– Implicit knowledge should be explicitly stated
eg,. Java = Coffee or language or island
• Support integration of information that comes from different kind of
sources
– text documents, audio sources, video sources
• Improve automatic processing of the information expected from a source
and provide formal meaning to these
• Embed the extracts information into context
• Users are always Connected, HTML 5, Semantic Web (Meaning of
Data), Cloud Computing, Websites as Web Services, SaaS, Persistent
Identities, Data as a Service will drive the needs of Web 3.0.
57

58. Web 3.0 Conclusion
– Personalized & Configurable Web
– Linked, Exchangeable and Relational Data
• Linking data is the power of Web 3.0
– Social & Persistent Web
– Interface/Device Independent
– Localization
• Location aware
– Affective Computing
• System captures Behavior
• Natural language processing - system recognizes connotative and denotative
meanings
– Community Based Information Provisioning
• Wisdom of the crowd (Amapedia / Wikipedia / Wikimapia)
• Crowd Sourcing (Open Source / Paid Source)
• Social tagging / Mechanical Turks
58

59. Web 3.0 Limitations
• How do we get the Semantics in place
– Will the existing web be upgraded?
– Will the Semantic Web exist as a separate entity?
• Once we fulfill the needs outlined in the Web
3.0 approach,.
• Then we are limited by our imagination
59

60. Thank you…
“The Web has an exponential path in front of it, meaning it
has the ability to propel science, medicine, business, social
issues and personal interactions in ways that are increasingly
important to society and our own everyday”
– Steve Ballmer
Zool:
A team of consultants focused on providing engaging solutions for B2C
, Web 2.0, social media, application strategy and UX design consulting.
“Several concepts and theories presented here are extracts adopted from established User
Experience ideology and collective learning of the team.“
60