The web phenomenon
2 likes2,040 views
The document discusses the evolution of the web from past to present to future. It describes Web 1.0 as the linear "read-only" web where the approach was "build it and they will come." Web 2.0 is described as the collaborative web where the approach shifted to "if you engage them, they will come." The future is envisioned as the configurable web where users will be provided access on their terms with "multiple device access to what they want, when they want it, and how they want it."
The web phenomenon
- 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