Web Live! Developing a Web Information Service


Published on

Encuentro ARION Evaluación de la calidad en la Sociedad del Conocimiento. Sabiñánigo, Junio 2004

Published in: Technology, Education
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Web Live! Developing a Web Information Service

  1. 1. Web Live! Developing a Web Information Service Ph. Dr. Jesús Tramullas Dept. of Librarianship and Information Science University of Zaragoza
  2. 2. Web Live ! Developing a Web Information Service <ul><li>Foundations </li></ul><ul><li>Developing a website project </li></ul><ul><li>User-centered design </li></ul><ul><li>Information Architecture </li></ul><ul><li>Usability </li></ul>
  3. 3. Why? <ul><li>People have a need of something… let’s imagine </li></ul><ul><li>People visit websites for the content and the services </li></ul><ul><li>Users are task oriented </li></ul>
  4. 4. We are talking about… <ul><li>People…. Users </li></ul><ul><li>People needs… Users needs </li></ul><ul><li>Community… Virtual community </li></ul><ul><li>Services… Virtual services </li></ul><ul><li>Social networks… Virtual social networks </li></ul>
  5. 5. We aren’t talking about… <ul><li>Markup Languages, like HTML or XML </li></ul><ul><li>Technologies… like Java, o celullar phone </li></ul><ul><li>Networks… like Internet </li></ul><ul><li>Tools, like Dreamweaver or Photoshop </li></ul><ul><li>Telecommunications Companies, like Vodafone </li></ul>
  6. 6. What do you mean? <ul><li>We are talking about people who want to make things, a lot of things, in a technological mediated environment </li></ul><ul><li>We are talking about communicate, read, buy, search, see, learn, educate…. </li></ul><ul><li>In one word: we are talking about interaction </li></ul>
  7. 7. But I’ve hear that… <ul><li>Technology is more important, it’s the core of the Information Society </li></ul><ul><li>It’s necessary to invest in technological research </li></ul><ul><li>It’s necessary to pay for high bandwith </li></ul><ul><li>It’s necessary a computer for every student, for every person </li></ul>
  8. 8. The “real” Knowledge Society <ul><li>Technology are only facilitators </li></ul><ul><li>Services are the real core of the Knowledge Society… </li></ul><ul><li>And this services are based in Information </li></ul><ul><li>And, finally, this services are constructed to facilitate the interaction between people </li></ul><ul><li>Knowledge resides in the people, not in the networks or the machines </li></ul>
  9. 9. How we may think? <ul><li>We may think in services that serve the people needs, based in information, through an interface </li></ul><ul><li>We may think that every person is different, and can understand and interact in a different manner. </li></ul><ul><li>We may think that it’s fundamental to study the users and their behaviors </li></ul>
  10. 10. How we may act? <ul><li>We may use a project approach </li></ul><ul><li>We may understand what is an information service </li></ul><ul><li>We may think in terms of user objetives, user needs, and needed content </li></ul><ul><li>We need to create a users community </li></ul><ul><li>We need to evaluate the service, in order to refine services and content </li></ul>
  11. 12. Web Live! Developing a Web Information Service <ul><li>Foundations </li></ul><ul><li>Developing a website project </li></ul><ul><li>User-centered design </li></ul><ul><li>Information Architecture </li></ul><ul><li>Usability </li></ul>
  12. 13. Planning a web project <ul><li>It’s essential to adopt a serious method </li></ul><ul><li>It’s essential to adjust the project to the organization that supports it </li></ul><ul><li>It’s essential to be focused in users </li></ul><ul><li>The secret of the success is to establish clear objectives, and adjust the information content and the services to serve that objectives </li></ul>
  13. 14. The code is only the reflect <ul><li>Remember that writing the code is only a final phase </li></ul><ul><li>Remember that code must reflect the objectives and the correspondent services </li></ul><ul><li>This way, we can obtain a web that focuses more in user needs and user community, that in technological tools </li></ul>
  14. 15. The web project <ul><li>Defining the project </li></ul><ul><li>Developing site structure </li></ul><ul><li>Visual design and testing </li></ul><ul><li>Production and development </li></ul><ul><li>Launch and maintenance </li></ul><ul><li>Evaluation and redesign </li></ul>
  15. 16. Web Design Design on paper Heuristic evaluations cognitive walkthroughs Prototype Implement Field studies, call center, interaction logs Ship user studies Evaluate User studies, function tests Evaluate Evaluate Evaluate Early design Late design Production Discovery Analyze information Elicit goals Contextual Inquiry Analyze users/tasks
  16. 17. 1. Defining the project <ul><li>We attend to three main activites: </li></ul><ul><ul><li>Discovery </li></ul></ul><ul><ul><li>Planning </li></ul></ul><ul><ul><li>Clarification </li></ul></ul><ul><li>All the information must be documented in correspondant deliverables </li></ul>
  17. 18. A general view <ul><li>Purpose/Message : What should the web page accomplish? What kind of information/service is to be provided that would cause someone to visit your web site? List major topics, begin an outline and a list of possible resources </li></ul><ul><li>Audience : Identify your target audience/viewers. Whom do you wish to share your message with? (Include characteristics such as age, where they live, language, a cause they feel strongly about…) What do they share in common with your web site? </li></ul><ul><li>Background : What does your intended audience already know about the subject you are discussing? Will the readers likely be experienced Internet or computer users? </li></ul>
  18. 19. Defining: Discovery, 1 <ul><li>Understanding of the client, the users, the competitors… developing a strategy </li></ul><ul><li>Gathering information of the context. The surveys are a core tool. Questionnaires are designed, distributed, collected and analized </li></ul><ul><li>Collecting all the previous materials of the client or organization </li></ul>
  19. 20. Defining: Discovery, 2 <ul><li>Understanding the audience: defining target audience, ocassional audience, creating user profiles… </li></ul><ul><li>Understanding technical capabilities of the audience: computer literacy, skills, educational level, computer platform… </li></ul><ul><li>Analizing the competitor: visite their webs, study the services, the content… </li></ul>
  20. 21. Defining: Planning <ul><li>Setting the budget </li></ul><ul><li>Creating schedules and time tracking controls </li></ul><ul><li>Assigning project team </li></ul><ul><li>Planning for user testing </li></ul><ul><li>Assembling the project planning </li></ul>
  21. 22. Defining: Clarification <ul><li>After the previous activities, it’s necessary to adjust the initial project to the objectives, capabilities and resources availables </li></ul><ul><li>The results of the different studies must be included in the deliverables </li></ul>
  22. 24. 2. Developing site structure <ul><li>Determine how to organize information and related services, attending to: </li></ul><ul><ul><li>Content view </li></ul></ul><ul><ul><li>Site view </li></ul></ul><ul><ul><li>Page view </li></ul></ul>
  23. 25. A general view <ul><li>Structure: How can your message be organized most effectively? Select a model of organizational structure that will best present your information. </li></ul><ul><li>Content: The text, images, and media will be required. </li></ul><ul><li>Navigation: What type of navigation tools (buttons, contents list, site index…) will you use? Begin the process of story boarding your site. Begin with the welcome page, think of several other pages that you will include and graphically show how they will relate to your welcome or home page. </li></ul><ul><li>Interactivity: Will your users interact or participate in the Web pages in some way? Are they expected to do something with the information on this Web site? </li></ul>
  24. 26. Developing… content view <ul><li>Auditing existing content </li></ul><ul><li>Addresing and organizing content </li></ul><ul><li>Outlining content </li></ul><ul><li>Creating a content delivery plan, attending to developing a content management program </li></ul>
  25. 27. Developing… site view <ul><li>View of the whole site, in order to structure the web </li></ul><ul><li>Related to information architecture </li></ul><ul><li>Combining content with sitemapping and navigation… way the users make their task </li></ul>
  26. 29. PROJECT TITLE | Site Map Web Page Name Sub-pages Sub-pages Sub-pages More Sub-Pages More Sub-Pages More Sub-Pages A1 B1 C1 A2 A2-1 A2-2 A2-3
  27. 30. Developing… page view <ul><li>Prototypping a page view, a standard for the site </li></ul><ul><li>Wireframing </li></ul><ul><li>Navigation </li></ul><ul><li>Naming and labeling </li></ul><ul><li>Defining user paths, related to site view </li></ul>
  28. 32. PAGE TITLE <ul><li>Descriptive text here. </li></ul>
  29. 33. 3. Visual design and testing <ul><li>This is the phase of the look and feel, of the user interface </li></ul><ul><li>Finally, a prototype is developed, in order to test and validate the proposal of the previous phases </li></ul><ul><li>The core concepts of the site are developed graphically </li></ul><ul><li>Finally, a design style guide is created </li></ul>
  30. 34. Corporate Identity Header Bar sdsdsd Dsfdsfds dsfdsfdsfsdf Corporate Identity Navigation Bar Ererre ewrewr ewrewr Asasasasasdsdf asdsadasdsfdsd asdvxccxvcsdfdd cxvcxvdsfdsffdsfd cxvdsfdsfdsfdsfds sdfdsfdsdsfdsfdsd dsfdsfdsfdsfdsfdfs sdfdsfdsfdsfdsfdfs Graphics Hewr>> ewr>> sdfdsfdsfdsf Dsfgdsfdsfdsfdsfdsfd sdfdsfds sdfdsfdsfdsfds
  31. 35. 4. Production and development <ul><li>Putting together all the components and making them work </li></ul><ul><li>Assesing project status </li></ul><ul><li>Building: file structure, page templates, graphics, scripting, database web driven… </li></ul><ul><li>Integrating all the components in complex functionality </li></ul>
  32. 38. 5. Launch and maintenance <ul><li>Archiving all the documentation and deliverables </li></ul><ul><li>Announcing the site and registering in search engines </li></ul><ul><li>Launching the site </li></ul><ul><li>Developing a maintenance policy, measuring the user activity logs, and controling the security </li></ul>
  33. 39. 6. Evaluation and redesign <ul><li>Studying the user activity logs, looking for high rated informacion and/or services </li></ul><ul><li>Analysing the problems reported by users and experts </li></ul><ul><li>Developing a program of usability evaluation </li></ul><ul><li>Redesigning the site: interface-oriented, content-oriented, or service-oriented </li></ul>
  34. 41. Web Live! Developing a Web Information Service <ul><li>Foundations </li></ul><ul><li>Developing a website project </li></ul><ul><li>User-centered design </li></ul><ul><li>Information Architecture </li></ul><ul><li>Usability </li></ul>
  35. 42. Webs for users <ul><li>“ In virtually every case, a web site is a ‘self-service’ product. There is no instruction manual to read beforehand, no training seminar to attend, no customer service representative to help guide the user throught the site. There is only the user, facing the site alone with her wits and experience to guide her.” </li></ul>
  36. 43. User-centered Design <ul><li>In every phase of the project, take the user into account </li></ul><ul><li>We must integrate the users in the work, in order to get the best user experience for the final product </li></ul><ul><li>By the way, now the process must be iterative, the web project must be iterative at all </li></ul>
  37. 45. Knowing the audience <ul><li>Identify potential visitors of your Web site </li></ul><ul><ul><li>site must meet their needs and expectations </li></ul></ul><ul><ul><li>well designed site should meet a range of skills and interests </li></ul></ul><ul><li>Users include </li></ul><ul><ul><li>Web surfers </li></ul></ul><ul><ul><li>Novice and occasional users </li></ul></ul><ul><ul><li>Expert and frequent users </li></ul></ul><ul><ul><li>International users </li></ul></ul><ul><ul><li>Physically challenged </li></ul></ul>
  38. 46. Analyze users… <ul><li>Analyze users </li></ul><ul><ul><li>Age group, skill level, access, information needs </li></ul></ul><ul><li>Analyze tasks </li></ul><ul><ul><li>Understand what information users want and need </li></ul></ul><ul><ul><li>Understand how users get that information today </li></ul></ul><ul><li>Select a group of users to work in </li></ul>
  39. 47. Asking users… <ul><li>How do they get the information now? </li></ul><ul><li>What do they need to know? </li></ul><ul><li>What tasks do they expect to accomplish on the Web site? </li></ul><ul><li>Are they finding what they need now? </li></ul><ul><li>Are there any parts of the site they do not want to see removed? </li></ul><ul><li>Do they have any pet peeves? </li></ul><ul><li>Do they have any favorite sites? </li></ul>
  40. 48. Listening users… <ul><li>What they like, and what not, and why </li></ul><ul><li>The way they use to get success </li></ul><ul><li>How they develop the tasks </li></ul><ul><li>How they reduce work </li></ul><ul><li>How they think is better </li></ul><ul><li>Remember: you aren’t the user </li></ul>
  41. 49. Web Live! Developing a Web Information Service <ul><li>Foundations </li></ul><ul><li>Developing a website project </li></ul><ul><li>User-centered design </li></ul><ul><li>Information Architecture </li></ul><ul><li>Usability </li></ul>
  42. 50. Information Architecture <ul><li>Information Organization </li></ul><ul><li>Navigation Systems </li></ul><ul><li>Labeling Systems </li></ul><ul><li>Search Systems </li></ul><ul><li>Thesauri, metadata and vocabularies </li></ul>
  43. 51. Organizing Information <ul><li>Information is heterogeneousand ambiguous: it’s necessary to classify it </li></ul><ul><li>Considering information policy and organization structure </li></ul><ul><li>Developing content schemes, attending to content characteristics </li></ul><ul><li>Developing organization structures: relation types between contents </li></ul>
  44. 52. Navigation Systems <ul><li>Components that make possible to navigate between pages </li></ul><ul><li>Types:global, hierarchical,specific… </li></ul><ul><li>Technical components: navigation areas, menus, frames… </li></ul><ul><li>It’s necessary to respect special principles for legibility and consistency </li></ul>
  45. 53. Labeling Systems <ul><li>Labels are used to represent contents </li></ul><ul><li>It’s necessary to develop labels systematically </li></ul><ul><li>It’s necessary to respect special principles for consistency and permanency </li></ul><ul><li>Developing guides for writing and using labels </li></ul>
  46. 54. Search Systems <ul><li>Tools for searching and accessing information in the proper website </li></ul><ul><li>Internal search engines </li></ul><ul><li>Web maps </li></ul><ul><li>Directories and indexes, tables of contents </li></ul><ul><li>It’s high recomendable to integrate navigation and search systems </li></ul>
  47. 55. Thesauri, metadata, vocabularies <ul><li>Systems of words that establish the semantic networks between contents </li></ul><ul><li>Used for describing and managing content </li></ul><ul><li>Linked to navigation and search systems </li></ul><ul><li>Increasingly used in digital content management, knowledge management… towards the semantic web </li></ul>
  48. 57. Web Live! Developing a Web Information Service <ul><li>Foundations </li></ul><ul><li>Developing a website project </li></ul><ul><li>User-centered design </li></ul><ul><li>Information Architecture </li></ul><ul><li>Usability </li></ul>
  49. 58. Usability <ul><li>ISO definition : The effectiveness, efficiency, and satisfaction with which specified users achieve specified goals in particular environments </li></ul><ul><li>Website usability is the measure of how an individual user actually navigates, finds information, and interacts with the website </li></ul>
  50. 59. Guidelines for Usability <ul><li>Consistency </li></ul><ul><li>Efficiency </li></ul><ul><li>Ease </li></ul><ul><li>Format </li></ul><ul><li>Flexibility </li></ul><ul><li>Time to learn </li></ul><ul><li>Speed of performance </li></ul><ul><li>Rate of errors </li></ul><ul><li>Subjective satisfaction </li></ul><ul><li>Observation </li></ul><ul><li>Interviews </li></ul><ul><li>Questionnaires </li></ul><ul><li>Keyboards </li></ul>
  51. 60. Planning <ul><li>It’s necessary to test the website against specific techniques and tools </li></ul><ul><li>The objective is to get an evaluation of the website, total or partially, in order to improve it </li></ul><ul><li>We need a rational plan of usability testing </li></ul><ul><li>Be careful with gurus and consultancy </li></ul>
  52. 61. An usability study <ul><li>Objectives </li></ul><ul><li>Methodology </li></ul><ul><li>Target audience, participans </li></ul><ul><li>Specific task list </li></ul><ul><li>Conduct the session </li></ul><ul><li>Final evaluation </li></ul><ul><li>Results and recommendations </li></ul>
  53. 62. Some usability methods <ul><li>Expert reviews, heuristic evaluations </li></ul><ul><li>Direct observation </li></ul><ul><li>Focus groups </li></ul><ul><li>Task analysis </li></ul><ul><li>Prototyping </li></ul><ul><li>Think aloud </li></ul><ul><li>Questionaries </li></ul><ul><li>Informal interviews </li></ul>
  54. 63. Only usability isn’t solution… <ul><li>Usability must be included in the website project like a tool, in all the lifecicyle, not only as a final evaluation </li></ul><ul><li>Usability is a key component in the user-centered design approach </li></ul><ul><li>Users are changing… context changing… the user behavior are different now that in 1998, and that in 2006 </li></ul>
  55. 64. Top Signs That Things Are Going Badly <ul><li>&quot;Our Web site is intuitive and user-friendly.&quot; </li></ul><ul><li>&quot;We can use [XML/SOAP/buzzword…] to fix that.&quot; </li></ul><ul><li>&quot;If you stop and think about how the interface works for a second, it makes complete sense.&quot; </li></ul><ul><li>&quot;How can our users be so stupid? It's so obvious!&quot; </li></ul><ul><li>&quot;We don't need to do any user testing. I'm a user, and I find it easy to use.&quot; </li></ul><ul><li>&quot;We'll just put an 'Under Construction' sign there.&quot; </li></ul><ul><li>&quot;Shrink the fonts more so that we can put more content at the top.&quot; </li></ul><ul><li>&quot;We need a splash screen.” </li></ul>
  56. 65. References <ul><li>Garret, J.J. (2002) The Elements of User Experience . Indianapolis: New Riders </li></ul><ul><li>Goto, K., Cotler, E. (2002) Web ReDesign. Workflow that Works . Indianapolis: New Riders </li></ul><ul><li>Rosenfeld, L., Morville, P. (2002) Information Architecture for the World Wide Web . Sebastopol: O’Reilly </li></ul>
  57. 66. <ul><li>Thanks for you attention </li></ul>