• Save
Web3.0 seminar wipro-session3-flokloreofuserexperience
Upcoming SlideShare
Loading in...5
×
 

Web3.0 seminar wipro-session3-flokloreofuserexperience

on

  • 1,732 views

 

Statistics

Views

Total Views
1,732
Views on SlideShare
1,732
Embed Views
0

Actions

Likes
0
Downloads
1
Comments
0

0 Embeds 0

No embeds

Accessibility

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Web3.0 seminar wipro-session3-flokloreofuserexperience Web3.0 seminar wipro-session3-flokloreofuserexperience Presentation Transcript

  • 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
  • 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
  • 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
  • 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
  • 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
  • The dot com boom “Build it and.. … they will come”Web 1.0 Focus on Documentsthe read only web / - the linear web1995-1999 6
  • 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
  • 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
  • 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 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
  • 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
  • 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
  • In web we trust. “If you engage……they will come.”Web 2.0 Focus onthe re-writable web / the Collaborative web2000-2010 15
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • Web 2.0 Technology (RIA)AJAX REST ATOMRSS SOAP APIsWOA JSON FLEXSEO AIR Ruby .mobile Silverlight 22
  • 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
  • Web 2.0 ExamplesBlogger 24
  • A look into User ExperienceWeb {Enterprise} 2.0the user focused web / the social work web 25
  • 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
  • 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
  • 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
  • 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
  • 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
  • Engaging YourUsers“Users are a colorful bunch with variedexpectations from the same ecosystem” 31
  • 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
  • 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
  • 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 donepoorly 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
  • 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
  • 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, 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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 ApplicationEnterprise Application = User Interface + Content / Data + Program 46
  • 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
  • Back to…Web 2.0the rewritable web / the social web 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
  • 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
  • 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
  • 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
  • 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
  • Web 3.0 Examples• DBPedia – Wikipedia’s Structured data• Web 3.0 Applications – Bing Maps • Virtual Earth, Satellite, Street Maps, Flickr, Photosynth integration 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 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