Web3.0 seminar wipro-session3-flokloreofuserexperience

2,227 views

Published on

Published in: Technology, Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
2,227
On SlideShare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
1
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Web3.0 seminar wipro-session3-flokloreofuserexperience

  1. 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 Scholssbergrafi@zool.in | www.zool.inPrepared: Using the wisdom of everyone 1
  2. 2. Rafi Ali KhanUser-centric techno creative specialist with broad experience indesign and implementation focus on web based applications onvarious platforms, tools and domains. Experience focused on Userexperience, Interaction design, Information Architecture, conceptualizing, storyboarding& prototyping along with strong programming and product development skillsCurrent Role: Lead Architect UI - User Experience Lab, Aris GlobalExperience: ~ 10 years of experience mostly on the Web Applications, consumer sites andopen source toolsSpecialist: Web 2.0 Subject Matter expert / Usability ConsultantKey Clients in the Past: MTV Europe / Ebbon Dacs / Hannover Re / British Telecom / VerizonWireless / Move.com & Realtor.com / Precise Media / Daily Telegraph UK / Coca Cola /Merck / Manipal UniversityCo-Founder and Moonlight at: Zool Tech Solutions Pvt Ltd (http://www.zool.in) 2
  3. 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. 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. 5. A web Web Phenomenonof 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 thefuture, they want it all and they want to pick and choose what they want… 5
  6. 6. The dot com boom “Build it and.. … they will come”Web 1.0 Focus on Documentsthe read only web / - the linear web1995-1999 6
  7. 7. Web 1.0 ApproachIf you build it, they will come. – Millions of static web pages (.html, .shtml) – Desire for online viability – Online Vcards + Brochures / Product Catalogues 7
  8. 8. Web 1.0 Design Philosophy If you cant 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. 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. 10. Web 1.0 Key Drivers• Need for web presence• Internet Communication (Email)• Intranet Solutions• e-Learning• e-commerce (B2B & B2C) 10
  11. 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. 12. Web 1.0 LimitationsDesktop Technology adopted for the web andweb 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. 13. Web 1.0 ConclusionWhen we got a grip on the technical part, thereal possibilities of the web became moreclear.– So we started building Intranet & CMS Applications– Focus on building the Infrastructure 13
  14. 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. 15. In web we trust. “If you engage……they will come.”Web 2.0 Focus onthe re-writable web / the Collaborative web2000-2010 15
  16. 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. 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. 18. Web 2.0 ApproachWeb Standards – Better Browsers – SOA / XML / APIsFocus on the User Synergy of User Experience – Content Management – User Generated (blogs, wiki, tags) – Social Networking – Software as a Service 18
  19. 19. Web 2.0 Social74% of Men use the Internet 74% of Women use the Internet38% 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. 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. 21. User Experience Web 2.0 Design PhilosophyDesign - Lightweight rich functional UI– curves & colorsWeb 2.0 Design Philosophy1. Goal oriented design2. Dont Decorate, Communicate!3. Design like no-ones watching4. The Design Spectrum5. Simplicity in web designTop 15 Design Guidelines1. Simplicity 11. Rich surfaces2. Central layout 12. Gradients3. Fewer columns 13. Reflections4. Separate top section 14. Cute icons5. Solid areas of screen real-estate 15. Star flashes6. Simple nav7. Bold logos8. Bigger text9. Bold text introductions10. Strong colours 21
  22. 22. Web 2.0 Technology (RIA)AJAX REST ATOMRSS SOAP APIsWOA JSON FLEXSEO AIR Ruby .mobile Silverlight 22
  23. 23. Web 2.0 Key DriversOpen 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 / YahooWeb Focused technologies & ToolsLanguages: .NET, J2EE, PHP, Ruby, PythonIDE: Visual Studio, EclipseServers: Apache 2.0, Tomcat, IIS7, Web logicRIA Frameworks: Flex, Silverlight, Extjs, jquery … are surely helping to drive Web 2.0 23
  24. 24. Web 2.0 ExamplesBlogger 24
  25. 25. A look into User ExperienceWeb {Enterprise} 2.0the user focused web / the social work web 25
  26. 26. Engaging yourUsers “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. 27. Users begin with the question“Does this software help manage mybusiness/lifestyle better?”Indisputably; technology answers this question logically applyingprinciples of mathematics to present actionable insights to managebusiness/lifestyle needs.Technology delivers on this promise time and again. (Programmers dont write bad software) 27
  28. 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 neverused. 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 dont write bad software)Unfortunately Programmers write software for programmers. 28
  29. 29. Gone are the days of:smplr “Build it and they will come”– do more with less Businesses are increasingly realizing the importance tosmrtr deliver differentiated user experience across multi-– do more with less channels that not only to attract new customers but alsobttr 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. 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. Its a wonderful change.“ – Bill Burton, Researcher Microsoft Evidence of that change includes Microsofts 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. 31. Engaging YourUsers“Users are a colorful bunch with variedexpectations from the same ecosystem” 31
  32. 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 isnt always the best. Implement • Assign tasks. • Execute. Learn • Determine if the solution met its goals. • Discuss what could be improved. - Wikipedia 32
  33. 33. Elementsof User ExperienceUser Experience strategy helps define the following terms within their appropriate context and clarifies the underlying relationshipsamong these various elements of a typical Web Software Interface. - Jesse James Garrett 33
  34. 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. 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 donepoorly that we notice it.” - Jared Spool 35
  36. 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. 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. 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. 39. “Design thinking is a process for practical, creativeresolution of needs or issues that looks for animproved future result.Unlike critical thinking, design thinking is a creativeprocess based around the "building up" of ideas. Outsidethe box thinking is encouraged in this process since this canoften lead to creative solutions.”– Wikipedia “Design is always about synthesis -synthesis of market needs, technology trends, and business needs.” —Jim Wicks, Motorola 39
  40. 40. RIA – Rich Interactive Application or Rich Internet Application Adobe Flex Integrated RuntimeRich Internet Applications (RIA) are web applications thathave the features and functionality of traditional desktopapplications.RIAs typically transfer the processing necessary for the user interface to theweb client but keep the bulk of the data (i.e., maintaining the state of theprogram, 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. 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. 42. Web Widgets Maximize/Popout Close/Delete Skeleton of a Dashboard Widget Actions Refresh Filter ActionsBack 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. 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. 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. 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. 46. Enterprise ApplicationEnterprise Application = User Interface + Content / Data + Program 46
  47. 47. Social EnterpriseThe focus from B2Bchanges to B2CFortune 100 - Social Media 34% 54% Corporate Facebook blog Fan Page 7 posts per month 3.6 post per week 50% 65% YouTube Twitter Channel Account10 videos per month 27 tweets per week 47
  48. 48. Back to…Web 2.0the rewritable web / the social web 48
  49. 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. 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. 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. 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.0the semantic web / the configurable web2010 - onwards Cloud Computing 52
  53. 53. Purpose“Data on the web defined and linked in a way that itcan be used by machines not just for displaypurposes, but for automation, integration and reuseof data across various applications”- Sir Tim Berners-Lee 53
  54. 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. 55. Web 3.0 Design Philosophy Design around User + Data• Right now, the Webs structure is geared for humans. Its easy for us to visit a Web page and understand what its all about. Computers cant do that. A search engine might be able to scan for keywords, but it cant 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. 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. 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. 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. 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. 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

×