The web phenomenon

The Web PhenomenonRe-Engineering for User Experience (PAST, PRESENT & FUTURE)

Presented by: Rafi Ali Khan [email protected] | www.zool.in

Prepared: Using the wisdom of everyone

“True User Experience ….is about encouraging Communication” – Ed Scholssberg

1

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 GlobalExperience: ~ 10 years of experience mostly on the Web Applications, consumer sites and open source toolsSpecialist: 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

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 order3

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 theresomewhere

4

Linear Web - 1.0

“Build it and..

… they will come”

Collaborative Web – 2.0

“If you engage…

…they will come.”

Configurable Web – 3.0

“If you build, engage, share, collaborate, personalize, syndicate, have an open policy …

…provide multiple device access to what theywant, when they want it and how they want it..

…they will come”

A webof User Experience

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…

Web Phenomenon

5

Web 1.0the read only web / - the linear web

1995-1999

Focus on Documents

The dot com boom“Build it and.. … they will come”

6

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

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

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

Web 1.0 Key Drivers

• Need for web presence• Internet Communication (Email)• Intranet Solutions• e-Learning• e-commerce (B2B & B2C)

10

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

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

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

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

Web 2.0the re-writable web / the Collaborative web

In web we trust.

2000-2010

Focus on

“If you engage……they will come.”

15

• 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)

Some Buzz Words of Web 2.0

16

• Technology & Approach• User Centric Design – Perpetual Beta

• User generated content *

“Every system worth using will be abused before its used”* Quote

3 Simple keys to identify a Web 2.0 application

17

Web 2.0 Approach

Web Standards– Better Browsers– SOA / XML / APIs

Focus on the User– Content Management – User Generated (blogs, wiki, tags)– Social Networking– Software as a Service

Synergyof User Experience

18

Web 2.0 Social74% of Men use the Internet 74% of Women use the Internet

* On a crowd sample of 100 people38% of users, use the internet several times a day | 21% - once a day.Age group: 93% (19-29) | 81% (30-49) | 70% (50-64) 19

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– UI Framework / Patterns / Components library– Product Prototype

“Focus on the users and everything elsewill follow” – Google’s UX Strategy

20

Web 2.0 Design PhilosophyDesign - Lightweight rich functional UI – curves & colors

1. Goal oriented design2. Don't Decorate, Communicate!3. Design like no-one's watching 4. The Design Spectrum 5. Simplicity in web design

Web 2.0 Design Philosophy

1. Simplicity 2. Central layout 3. Fewer columns 4. Separate top section 5. Solid areas of screen real-estate 6. Simple nav 7. Bold logos 8. Bigger text 9. Bold text introductions 10. Strong colours

Top 15 Design Guidelines11. Rich surfaces 12. Gradients 13. Reflections 14. Cute icons 15. Star flashes

User Experience

21

Web 2.0 Technology (RIA)

RSS SOAPJSON

APIsRESTAJAX ATOM

FLEXSilverlight.mobile

WOASEO AIR Ruby

22

Web 2.0 Key Drivers

… are surely helping to drive Web 2.0

Open Access• Mail/Chat – GMail /Hotmail/Yahoo/AIM

• Social Network – Facebook, Twitter

• Map – Bing Maps / Google Maps / Yahoo Maps

• Shopping – Amazon / Ebay

• Encyclopedia – Wikipedia

• RealEstate – Realtor.com

• Search – Google, Bing

• CRM – SUGAR CRM

• Content Management – Liferay / Alfresco / OpenCMS

• ERP – Open Bravo

• IM – Jabber

• Database – MySQL

• Mail Client – Zimbra / Scalix / Zenprise

• Blogs – Wordpress

• Wiki – Wikimedia

• Aggregator – NewsGator

• Intranet – Traction/ MS Sharepoint Service

• UI Components – Google / Yahoo

Open Software / Source

Web Focused technologies & ToolsLanguages: .NET, J2EE, PHP, Ruby, PythonIDE: Visual Studio, EclipseServers: Apache 2.0, Tomcat, IIS7, Web logicRIA Frameworks: Flex, Silverlight, Extjs, jquery

23

Web 2.0 Examples

Blogger

24

Web {Enterprise} 2.0the user focused web / the social work web

A look into User Experience

25

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

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

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

Gone are the days of:

“Build it and they will come”Businesses are increasingly realizing the importance to deliver differentiated user experience across multi-channels that not only to attract new customers but also never let them go.

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

smplr– do more with less

smrtr– do more with less

bttr– do more with less

29

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

Software 2.0 Design@ Microsoft

30

Engaging Your

Users“Users are a colorful bunch with variedexpectations from the same ecosystem”

31

Define• Decide what issue you are trying to resolve. • 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

Enablingthe User Experience

32

Elementsof User Experience

- Jesse James Garrett

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.

33

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

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

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

"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

Usability DesignDesigning with use in mind

37

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

“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

Adobe Flex Rules, Everything Else Drools

RIA – Rich Interactive Application or Rich Internet Application

FlexAdobe 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• Live Drive

Platform Support

40

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

0

1

2

3

4

5

6

Network Software Hardware MS Exchange

MS SQL Server

Meets SLA

SLA Delayed

Failed SLA

Web Widgets

Skeleton of a Dashboard Widget Actions

ActionsDrop Down menu

Close/DeleteMaximize/Popout

BackRefresh

Forward

Grid View

Bar Graph

Line Graph Pie graph

FilterSharePrintExportAlertSaveConfigure

iGoogle, netVibes42

Centrally Maintained Ag Widget Library (Hosted Service)

Safety Regulatory Clinical Medical Information

Authorization

Get Widgets Get Widgets Get Widgets Get Widgets

Procuring Dashboard Widgets

43

Collaboration Bar

• Easy access to collaborative content

• Context based as well as across application

– Mail Access– Chat– Notes– Bookmarks– Alerts across the system– Reminders across the

system– Tasks– Multiple Open Tabs– and more…

Application notes

Bookmarks

Alerts

QuickReminders

44

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

Enterprise Application

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

The focus from B2B changes to B2C

Fortune 100 - Social Media

34%Corporate

blog

7 posts per month

50%YouTubeChannel

10 videos per month

54%FacebookFan Page

3.6 post per week

65%TwitterAccount

27 tweets per week

Social Enterprise

47

Web 2.0the rewritable web / the social web

Back to…

48

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

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

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

Web 3.0the semantic web / the configurable web

The Web is your Platform

2010 - onwardsCloud Computing

“If you build, engage, share, collaborate, personalize, syndicate, have an open policy …

…provide multiple device access to what theywant, when they want it and how they want it..

…they will come”

52

“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

Purpose

53

Web 3.0 ApproachWhile 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

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

Web 3.0 Examples

• DBPedia– Wikipedia’s Structured data

• Web 3.0 Applications– Bing Maps

• Virtual Earth, Satellite, Street Maps, Flickr, Photosynthintegration

56

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

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

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

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

“Several concepts and theories presented here are extracts adopted from established User Experience ideology and collective learning of the team.“

Zool:A team of consultants focused on providing engaging solutions for B2C , Web 2.0, social media, application strategy and UX design consulting.

60