Web Content Development

Dr. Komlodi

Class 2: Defining & Practicing IA

Agenda

• Reading Quiz:– Problems?– Grading by the end of this week– IA Chapter 3, DMMT Ch2 due next class

• Information architect exercise

• Defining & practicing IA

• Process of IA and the roles of an IA (term project deliverables)

Review

• What is information architecture?

• What is NOT information architecture?

Who Does What on A Site

• Information Architect– Conceptualizes purpose and strategy supported by

research; – Plans and develops information architecture; – Gathers, writes, edits content in response to the

information needs of users, as well as the mission and culture of the site’s sponsor(s).

• Graphics Designer– Creates the user interface, the site’s “look and feel”;

develops site’s graphics.

• Programmer/Engineer– Builds the site’s functionality, code base, environment,

etc.

• Must be fluent in the principles of Web usability (project administration, site analysis, user surveys, audience profiles, test planning, recruitment, test implementation, analysis, and reporting), information architecture, and graphical user-interface design principles to provide Web usability expertise to clients and team.

• Familiar with basic web technologies such as HTML, CSS, XML, XHTML, ASP, PHP and .NET suite of solutions – and how these technologies are used to build web sites and applications.

• Familiar with Content Management Systems (CMS) and dynamic web applications.

• Familiarity with e-mail marketing and direct mail, preferably with experience managing usability as it relates to conversion and personalization of content for customer segments.

IA Exercise SummaryExperience

• 5+ years of experience designing information architecture for a high traffic, media-focused multi-platform firm.

• Background in cognitive psychology, library & information science, or graphic design • Excellent problem-solving skills. • A solid understanding of User Centered Design principles• Understanding of programming technologies, specifically capabilities and limitations.• Understanding of content management systems.• Familiarity with user research methodologies and web analytics.• Deep understanding of user behavior and information retrieval.• Ability to manage multiple projects under tight deadlines with complex requirements. • Experience working with technical and design teams and an understanding of their

workflow and processes.• Excellent written and oral communication skills.• Precise organization skills.• Meticulous attention to detail. • Strong interpersonal skills and ability to collaborate with inter-disciplinary teams in

deadline situations

IA Exercise SummaryExperience

• Participate in all phases of scoping, architecting, and design • Define the user model and user interface for new Barnes & Noble products and

features • Partner with business owners and the project team to define an experience that

meets business and user goals • Translate specific use cases and business rules into a recommended approach • Develop high-level and/or detailed user scenarios, wireframes, and prototypes

to effectively communicate design ideas • Consult with technical leads to determine feasibility of the recommended

approach • Produce the detailed functional specifications required to implement design • Gauge the usability of new and existing features, and make constructive and

reasonable suggestions for change • Work with designers and engineers to realize the blueprint • Support the QA team through integration and end-to-end testing • Monitor user feedback, site data and customer service inquiries to identify

opportunities for growth and improvement.

IA Exercise Summary - Tasks

IA Exercise Summary

• $90,000 - 140,000

• $100,000 - 120,000

• $45,000 - 55,000 (entry level)

• $65,000 - 90,000

• $100,000 - 120,000

• $90,000 - 94,999

The Role of IA in Websites

• IA defines most of what you see on a website: the content, organization, and navigation of the information on the site

• Jared Spool: Users could find target pages in site 42% of the time

• If IA is not done right, your website will be a failure

Information Architects

• Innies and outies

• Training for IA-s?– Graphic design and information design– Information and library science– Journalism and writing– Usability engineering– Marketing– Computer science

Why Focus on Web Content and Information Architecture?

• Cost Efficiency– Finding information– Not finding information– Value of education– Construction– Maintenance– Training– Value of brand

• Competitive Advantage– In a bloated WWW, clear thinking and usability stand

out

The Web Needs Clear Thinking

• Search engines are indexing fewer sites• Users are relying on favorite sites,

referrals from trusted sources• Sites that last do so because they have a

plan reflecting users needs• Everyone can publish, but not everyone

should

From “Presence” to “Experience”

• Early Web: Provide information– Content, navigation, infrequent updates– Focus is on designing a web “presence”

• Recent Past: Deliver services & functions– Online registration, pay online, online giving, etc.– Focus is on programming & technical engineering

• Present: Build community & experience– Online Learning, SIGs, CMS, BLOGS– Focus is on community and the user “experience”

www.archive.org

Evolution of a Site

Information

(info., facts, directions, etc.)

Interaction

(self-service, functions)

Community (End users connect)

Process of Information Architecture

Term Project Deliverables

User-Centered Web Development Life Cycle

• Define mission and target user population

• Collect user (and sponsor) requirements

• Create, evaluate, and modify conceptual design

• Create and modify physical design

• Perform usability testing

• Implement and market website

• Evaluate and improve site

Lazar, J. (2005) Web usability. Pearson, Addison-Wesley.

Information Architecture in theUser-Centered Web Development Life Cycle

• Define mission and target user population

• Collect user (and sponsor) requirements

• Create, evaluate, and modify conceptual design

• Create and modify physical design

• Perform usability testing

• Implement and market website

• Evaluate and improve site

Lazar, J. (2005) Web usability. Pearson, Addison-Wesley.

Information Architecture in theUser-Centered Web Development Life Cycle

• Define mission and target user population

• Collect user (and sponsor) requirements– Site scope

Lazar, J. (2005) Web usability. Pearson, Addison-Wesley.

Content, Context, Users

Context

UsersContent

Information Architecture for the World Wide Web

Goals of the Research• Who are the sponsors/stakeholders of your site (i.e., who's paying

and/or responsible for its development)?

• What are the sponsor's goals and objectives for the site? How do you know this?

• What does this audience need from your site? How do you know this?

• Are the needs of your sponsors and users in synch? If not, how will you resolve this potential conflict? If so, how will you take advantage of these shared interests?

• How will members of your Web team become familiar with answers to these basic questions?

Information Architecture in theUser-Centered Web Development Life Cycle

• Define mission and target user population

• Collect user (and sponsor) requirements

• Create, evaluate, and modify conceptual design:– High-level blueprint

– Application flow or script

Lazar, J. (2005) Web usability. Pearson, Addison-Wesley.

Tran-script1.1.2

Tran-script1.1.2

Student’s Home Page

1.1

Student’s Home Page

1.1

Major/Gen Ed

Reqs1.1.4

Major/Gen Ed

Reqs1.1.4

MyAdvisor1.1.1

MyAdvisor1.1.1

E-MailArchi ve

1.1.7

E-MailArchi ve

1.1.7

List ofCourses

1.1.3

List ofCourses

1.1.3

Forms1.1.8

Forms1.1.8

Advisi ngHistor y1.1.6

Advisi ngHistor y1.1.6

Advisor’s Home Page

1.2

Advisor’s Home Page

1.2

From myUMBC portal

Student Summar y

1.2.1

Student Summar y

1.2.1

Sem.Courses

1.2.2

Sem.Courses

1.2.2

Director yof

Advisors1.2.3

Director yof

Advisors1.2.3

E-mail1.1.9

E-mail1.1.9

DegreeShopping

1.1.4.1

LEGEND

AdvisorRecor ds

EditPersonal

Info1.2.4

StudentRecor ds

VirtualChat1.1.5

CourseAuthor-ization1.1.10

StudentRecor ds

Entry

Dyn. Page

App.

Database

ONLI NE ADVI SI NG 2003v.1 – 1/11Reached from myUMBC portalAt http:/ / my.umbc.edu

Blueprint

Information Architecture in theUser-Centered Web Development Life Cycle

• Define mission and target user population

• Collect user (and sponsor) requirements– Site scope

• Create, evaluate, and modify conceptual design:– High-level blue print

– Application flow or script

• Create and modify physical design– Wire frame

– Detailed content inventoryLazar, J. (2005) Web usability. Pearson, Addison-Wesley.

DesignmyUMBC Standard Header

ENGL/IFSM387 Site Wireframe - Student Advisement Home

John Q. Public123 Oak LaneBaltimore, MD 21212

Status: JuniorMajor: Computer ScienceMinor: none

John, you are currently scheduled for

Tues October 4 2003 at 2:30pm

Advisement Appointment

Important Dates

Online Advisement

11/ 01/ 2003Last Day to Drop Courses Fall 2003

10/ 01/ 2003Fall 2003 GraduationApplications Due

Go to Advisement Appointment

myAdvising@UMBC

12/ 11/ 2003Finals Begin Fall 2003

UMBC Calendar

UMBC Advising

myAdvising Home

My Advisor

My Transcript

My Courses

Course Authorization

My Major

Compare Majors

Advisor Chat

Advising History

Email History

Advisement Forms

Contact AdvisorCurrent Schedule Summary

Advisor Information

Your assigned advisor is:

Dr. J . Random HoserAssociate Professor, Computer ScienceOffice: ECS545 Phone:(410)455-0000randomhoser@umbc.edu

Advisor Details

Schedule Details

Links

Academic Services

Finance Office

Financial Aid

Registrar

Provost

Class Schedules

Academic Depts

Kuhn Library

Undergrad Catalog

Graduate Catalog

…

…

Advisement appt info ishighlighted for visibility

Link is provided to godirectly to chat area

Schedule summaryis same as found in academic informationpage

Advisor informationprovided with email linkand link to detailed info

Student informationsummary

Advisement sitenavigation links

Current locationis highlighted

Related links

Links can change to relateto current page topic

Important milestonedates are displayed

with link to full UMBCcalendar

Student

Advising

Home

Page

Wire Frame Example

Content Inventory