Web Live! Developing a Web Information Service Ph. Dr. Jesús Tramullas Dept. of Librarianship and Information Science University of Zaragoza

Web Live ! Developing a Web Information Service Foundations Developing a website project User-centered design Information Architecture Usability

Foundations

Developing a website project

User-centered design

Information Architecture

Usability

Why? People have a need of something… let’s imagine People visit websites for the content and the services Users are task oriented

People have a need of something… let’s imagine

People visit websites for the content and the services

Users are task oriented

We are talking about… People…. Users People needs… Users needs Community… Virtual community Services… Virtual services Social networks… Virtual social networks

People…. Users

People needs… Users needs

Community… Virtual community

Services… Virtual services

Social networks… Virtual social networks

We aren’t talking about… Markup Languages, like HTML or XML Technologies… like Java, o celullar phone Networks… like Internet Tools, like Dreamweaver or Photoshop Telecommunications Companies, like Vodafone

Markup Languages, like HTML or XML

Technologies… like Java, o celullar phone

Networks… like Internet

Tools, like Dreamweaver or Photoshop

Telecommunications Companies, like Vodafone

What do you mean? We are talking about people who want to make things, a lot of things, in a technological mediated environment We are talking about communicate, read, buy, search, see, learn, educate…. In one word: we are talking about interaction

We are talking about people who want to make things, a lot of things, in a technological mediated environment

We are talking about communicate, read, buy, search, see, learn, educate….

In one word: we are talking about interaction

But I’ve hear that… Technology is more important, it’s the core of the Information Society It’s necessary to invest in technological research It’s necessary to pay for high bandwith It’s necessary a computer for every student, for every person

Technology is more important, it’s the core of the Information Society

It’s necessary to invest in technological research

It’s necessary to pay for high bandwith

It’s necessary a computer for every student, for every person

The “real” Knowledge Society Technology are only facilitators Services are the real core of the Knowledge Society… And this services are based in Information And, finally, this services are constructed to facilitate the interaction between people Knowledge resides in the people, not in the networks or the machines

Technology are only facilitators

Services are the real core of the Knowledge Society…

And this services are based in Information

And, finally, this services are constructed to facilitate the interaction between people

Knowledge resides in the people, not in the networks or the machines

How we may think? We may think in services that serve the people needs, based in information, through an interface We may think that every person is different, and can understand and interact in a different manner. We may think that it’s fundamental to study the users and their behaviors

We may think in services that serve the people needs, based in information, through an interface

We may think that every person is different, and can understand and interact in a different manner.

We may think that it’s fundamental to study the users and their behaviors

How we may act? We may use a project approach We may understand what is an information service We may think in terms of user objetives, user needs, and needed content We need to create a users community We need to evaluate the service, in order to refine services and content

We may use a project approach

We may understand what is an information service

We may think in terms of user objetives, user needs, and needed content

We need to create a users community

We need to evaluate the service, in order to refine services and content

Web Live! Developing a Web Information Service Foundations Developing a website project User-centered design Information Architecture Usability

Foundations

Developing a website project

User-centered design

Information Architecture

Usability

Planning a web project It’s essential to adopt a serious method It’s essential to adjust the project to the organization that supports it It’s essential to be focused in users The secret of the success is to establish clear objectives, and adjust the information content and the services to serve that objectives

It’s essential to adopt a serious method

It’s essential to adjust the project to the organization that supports it

It’s essential to be focused in users

The secret of the success is to establish clear objectives, and adjust the information content and the services to serve that objectives

The code is only the reflect Remember that writing the code is only a final phase Remember that code must reflect the objectives and the correspondent services This way, we can obtain a web that focuses more in user needs and user community, that in technological tools

Remember that writing the code is only a final phase

Remember that code must reflect the objectives and the correspondent services

This way, we can obtain a web that focuses more in user needs and user community, that in technological tools

The web project Defining the project Developing site structure Visual design and testing Production and development Launch and maintenance Evaluation and redesign

Defining the project

Developing site structure

Visual design and testing

Production and development

Launch and maintenance

Evaluation and redesign

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

1. Defining the project We attend to three main activites: Discovery Planning Clarification All the information must be documented in correspondant deliverables

We attend to three main activites:

Discovery

Planning

Clarification

All the information must be documented in correspondant deliverables

A general view 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 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? Background : What does your intended audience already know about the subject you are discussing? Will the readers likely be experienced Internet or computer users?

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

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?

Background : What does your intended audience already know about the subject you are discussing? Will the readers likely be experienced Internet or computer users?

Defining: Discovery, 1 Understanding of the client, the users, the competitors… developing a strategy Gathering information of the context. The surveys are a core tool. Questionnaires are designed, distributed, collected and analized Collecting all the previous materials of the client or organization

Understanding of the client, the users, the competitors… developing a strategy

Gathering information of the context. The surveys are a core tool. Questionnaires are designed, distributed, collected and analized

Collecting all the previous materials of the client or organization

Defining: Discovery, 2 Understanding the audience: defining target audience, ocassional audience, creating user profiles… Understanding technical capabilities of the audience: computer literacy, skills, educational level, computer platform… Analizing the competitor: visite their webs, study the services, the content…

Understanding the audience: defining target audience, ocassional audience, creating user profiles…

Understanding technical capabilities of the audience: computer literacy, skills, educational level, computer platform…

Analizing the competitor: visite their webs, study the services, the content…

Defining: Planning Setting the budget Creating schedules and time tracking controls Assigning project team Planning for user testing Assembling the project planning

Setting the budget

Creating schedules and time tracking controls

Assigning project team

Planning for user testing

Assembling the project planning

Defining: Clarification After the previous activities, it’s necessary to adjust the initial project to the objectives, capabilities and resources availables The results of the different studies must be included in the deliverables

After the previous activities, it’s necessary to adjust the initial project to the objectives, capabilities and resources availables

The results of the different studies must be included in the deliverables

2. Developing site structure Determine how to organize information and related services, attending to: Content view Site view Page view

Determine how to organize information and related services, attending to:

Content view

Site view

Page view

A general view Structure: How can your message be organized most effectively? Select a model of organizational structure that will best present your information. Content: The text, images, and media will be required. 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. 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?

Structure: How can your message be organized most effectively? Select a model of organizational structure that will best present your information.

Content: The text, images, and media will be required.

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.

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?

Developing… content view Auditing existing content Addresing and organizing content Outlining content Creating a content delivery plan, attending to developing a content management program

Auditing existing content

Addresing and organizing content

Outlining content

Creating a content delivery plan, attending to developing a content management program

Developing… site view View of the whole site, in order to structure the web Related to information architecture Combining content with sitemapping and navigation… way the users make their task

View of the whole site, in order to structure the web

Related to information architecture

Combining content with sitemapping and navigation… way the users make their task

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

Developing… page view Prototypping a page view, a standard for the site Wireframing Navigation Naming and labeling Defining user paths, related to site view

Prototypping a page view, a standard for the site

Wireframing

Navigation

Naming and labeling

Defining user paths, related to site view

PAGE TITLE Descriptive text here.

Descriptive text here.

3. Visual design and testing This is the phase of the look and feel, of the user interface Finally, a prototype is developed, in order to test and validate the proposal of the previous phases The core concepts of the site are developed graphically Finally, a design style guide is created

This is the phase of the look and feel, of the user interface

Finally, a prototype is developed, in order to test and validate the proposal of the previous phases

The core concepts of the site are developed graphically

Finally, a design style guide is created

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

4. Production and development Putting together all the components and making them work Assesing project status Building: file structure, page templates, graphics, scripting, database web driven… Integrating all the components in complex functionality

Putting together all the components and making them work

Assesing project status

Building: file structure, page templates, graphics, scripting, database web driven…

Integrating all the components in complex functionality

5. Launch and maintenance Archiving all the documentation and deliverables Announcing the site and registering in search engines Launching the site Developing a maintenance policy, measuring the user activity logs, and controling the security

Archiving all the documentation and deliverables

Announcing the site and registering in search engines

Launching the site

Developing a maintenance policy, measuring the user activity logs, and controling the security

6. Evaluation and redesign Studying the user activity logs, looking for high rated informacion and/or services Analysing the problems reported by users and experts Developing a program of usability evaluation Redesigning the site: interface-oriented, content-oriented, or service-oriented

Studying the user activity logs, looking for high rated informacion and/or services

Analysing the problems reported by users and experts

Developing a program of usability evaluation

Redesigning the site: interface-oriented, content-oriented, or service-oriented

Web Live! Developing a Web Information Service Foundations Developing a website project User-centered design Information Architecture Usability

Foundations

Developing a website project

User-centered design

Information Architecture

Usability

Webs for users “ 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.”

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

User-centered Design In every phase of the project, take the user into account We must integrate the users in the work, in order to get the best user experience for the final product By the way, now the process must be iterative, the web project must be iterative at all

In every phase of the project, take the user into account

We must integrate the users in the work, in order to get the best user experience for the final product

By the way, now the process must be iterative, the web project must be iterative at all

Knowing the audience Identify potential visitors of your Web site site must meet their needs and expectations well designed site should meet a range of skills and interests Users include Web surfers Novice and occasional users Expert and frequent users International users Physically challenged

Identify potential visitors of your Web site

site must meet their needs and expectations

well designed site should meet a range of skills and interests

Users include

Web surfers

Novice and occasional users

Expert and frequent users

International users

Physically challenged

Analyze users… Analyze users Age group, skill level, access, information needs Analyze tasks Understand what information users want and need Understand how users get that information today Select a group of users to work in

Analyze users

Age group, skill level, access, information needs

Analyze tasks

Understand what information users want and need

Understand how users get that information today

Select a group of users to work in

Asking users… How do they get the information now? What do they need to know? What tasks do they expect to accomplish on the Web site? Are they finding what they need now? Are there any parts of the site they do not want to see removed? Do they have any pet peeves? Do they have any favorite sites?

How do they get the information now?

What do they need to know?

What tasks do they expect to accomplish on the Web site?

Are they finding what they need now?

Are there any parts of the site they do not want to see removed?

Do they have any pet peeves?

Do they have any favorite sites?

Listening users… What they like, and what not, and why The way they use to get success How they develop the tasks How they reduce work How they think is better Remember: you aren’t the user

What they like, and what not, and why

The way they use to get success

How they develop the tasks

How they reduce work

How they think is better

Remember: you aren’t the user

Web Live! Developing a Web Information Service Foundations Developing a website project User-centered design Information Architecture Usability

Foundations

Developing a website project

User-centered design

Information Architecture

Usability

Information Architecture Information Organization Navigation Systems Labeling Systems Search Systems Thesauri, metadata and vocabularies

Information Organization

Navigation Systems

Labeling Systems

Search Systems

Thesauri, metadata and vocabularies

Organizing Information Information is heterogeneousand ambiguous: it’s necessary to classify it Considering information policy and organization structure Developing content schemes, attending to content characteristics Developing organization structures: relation types between contents

Information is heterogeneousand ambiguous: it’s necessary to classify it

Considering information policy and organization structure

Developing content schemes, attending to content characteristics

Developing organization structures: relation types between contents

Navigation Systems Components that make possible to navigate between pages Types:global, hierarchical,specific… Technical components: navigation areas, menus, frames… It’s necessary to respect special principles for legibility and consistency

Components that make possible to navigate between pages

Types:global, hierarchical,specific…

Technical components: navigation areas, menus, frames…

It’s necessary to respect special principles for legibility and consistency

Labeling Systems Labels are used to represent contents It’s necessary to develop labels systematically It’s necessary to respect special principles for consistency and permanency Developing guides for writing and using labels

Labels are used to represent contents

It’s necessary to develop labels systematically

It’s necessary to respect special principles for consistency and permanency

Developing guides for writing and using labels

Search Systems Tools for searching and accessing information in the proper website Internal search engines Web maps Directories and indexes, tables of contents It’s high recomendable to integrate navigation and search systems

Tools for searching and accessing information in the proper website

Internal search engines

Web maps

Directories and indexes, tables of contents

It’s high recomendable to integrate navigation and search systems

Thesauri, metadata, vocabularies Systems of words that establish the semantic networks between contents Used for describing and managing content Linked to navigation and search systems Increasingly used in digital content management, knowledge management… towards the semantic web

Systems of words that establish the semantic networks between contents

Used for describing and managing content

Linked to navigation and search systems

Increasingly used in digital content management, knowledge management… towards the semantic web

Web Live! Developing a Web Information Service Foundations Developing a website project User-centered design Information Architecture Usability

Foundations

Developing a website project

User-centered design

Information Architecture

Usability

Usability ISO definition : The effectiveness, efficiency, and satisfaction with which specified users achieve specified goals in particular environments Website usability is the measure of how an individual user actually navigates, finds information, and interacts with the website

ISO definition : The effectiveness, efficiency, and satisfaction with which specified users achieve specified goals in particular environments

Website usability is the measure of how an individual user actually navigates, finds information, and interacts with the website

Guidelines for Usability Consistency Efficiency Ease Format Flexibility Time to learn Speed of performance Rate of errors Subjective satisfaction Observation Interviews Questionnaires Keyboards

Consistency

Efficiency

Ease

Format

Flexibility

Time to learn

Speed of performance

Rate of errors

Subjective satisfaction

Observation

Interviews

Questionnaires

Keyboards

Planning It’s necessary to test the website against specific techniques and tools The objective is to get an evaluation of the website, total or partially, in order to improve it We need a rational plan of usability testing Be careful with gurus and consultancy

It’s necessary to test the website against specific techniques and tools

The objective is to get an evaluation of the website, total or partially, in order to improve it

We need a rational plan of usability testing

Be careful with gurus and consultancy

An usability study Objectives Methodology Target audience, participans Specific task list Conduct the session Final evaluation Results and recommendations

Objectives

Methodology

Target audience, participans

Specific task list

Conduct the session

Final evaluation

Results and recommendations

Some usability methods Expert reviews, heuristic evaluations Direct observation Focus groups Task analysis Prototyping Think aloud Questionaries Informal interviews

Expert reviews, heuristic evaluations

Direct observation

Focus groups

Task analysis

Prototyping

Think aloud

Questionaries

Informal interviews

Only usability isn’t solution… Usability must be included in the website project like a tool, in all the lifecicyle, not only as a final evaluation Usability is a key component in the user-centered design approach Users are changing… context changing… the user behavior are different now that in 1998, and that in 2006

Usability must be included in the website project like a tool, in all the lifecicyle, not only as a final evaluation

Usability is a key component in the user-centered design approach

Users are changing… context changing… the user behavior are different now that in 1998, and that in 2006

Top Signs That Things Are Going Badly "Our Web site is intuitive and user-friendly." "We can use [XML/SOAP/buzzword…] to fix that." "If you stop and think about how the interface works for a second, it makes complete sense." "How can our users be so stupid? It's so obvious!" "We don't need to do any user testing. I'm a user, and I find it easy to use." "We'll just put an 'Under Construction' sign there." "Shrink the fonts more so that we can put more content at the top." "We need a splash screen.”

"Our Web site is intuitive and user-friendly."

"We can use [XML/SOAP/buzzword…] to fix that."

"If you stop and think about how the interface works for a second, it makes complete sense."

"How can our users be so stupid? It's so obvious!"

"We don't need to do any user testing. I'm a user, and I find it easy to use."

"We'll just put an 'Under Construction' sign there."

"Shrink the fonts more so that we can put more content at the top."

"We need a splash screen.”

References Garret, J.J. (2002) The Elements of User Experience . Indianapolis: New Riders Goto, K., Cotler, E. (2002) Web ReDesign. Workflow that Works . Indianapolis: New Riders Rosenfeld, L., Morville, P. (2002) Information Architecture for the World Wide Web . Sebastopol: O’Reilly

Garret, J.J. (2002) The Elements of User Experience . Indianapolis: New Riders

Goto, K., Cotler, E. (2002) Web ReDesign. Workflow that Works . Indianapolis: New Riders

Rosenfeld, L., Morville, P. (2002) Information Architecture for the World Wide Web . Sebastopol: O’Reilly

Thanks for you attention

Thanks for you attention