LIS 861: Information Architecture

Key questions

How do I get HTML from my brain to my computer to my browser?

How do I write a basic HTML file?

Who’s in this class with me, and what are we all doing here?

To read/watch

Required
If needed: Installing a text editor (you can ignore the parts about Python and converting tabs to spaces)

If needed: Head First HTML, Ch. 1

Basic HTML video

Developer Tools video

Zeldman. Before you Begin, Ch. 1-2, 5-6, 8

Things I Wish Someone Had Told Me When I Was Learning How to Code.

Assignment

• Introduce yourself in the Introductions forum, and read your classmates’ and instructor’s introductions.
• Make sure you have a text editor. If you don’t (or don’t know what a text editor is or how it differs from a word processor), install one, using the “Installing a text editor” instructions above.
• Make sure you can edit and save an HTML file in a text editor and view it in your browser. If you don’t know how to do this, read Head First HTML, Chapter 1.
• If you’ve followed the text editor instructions, read Chapter 1, and you still can’t edit and save an HTML file and view it in your browser, ask questions ASAP. You can ask anonymously in the help forum if you prefer.
• Make sure you know where to find developer tools in your browser. If you cannot do this, ask questions ASAP.
• If any unfamiliar terms or concepts in Zeldman are unfamiliar to you, ask questions in the Unfamiliar Terms? thread of the Week 1 discussion forum.
• Answer the other questions in the Week 1 discussion forum.
• We’re all in this together, so make sure your classmates’ questions get answered. If you know the answers already, great. If you don’t, use your ninja-like reference skills to help find answers (don’t forget to explain your search strategy!).

Cancelled due to family emergency

Key questions

How do I add styling to an HTML file with CSS?

How can I learn the basics of good web design, even if I’m not a designer?

What are some of the deeper concepts that web design can provoke us to think about, and what can we learn from them about how to build better web experiences?

To read/watch

Required
What Screens Want

Zeldman, Ch. 9, 10, 12, 13 (just the first section, “On Typography”)

design seeds and Adobe Kuler

If you have a great sense of color, you can skip design seeds, though you might find it fun anyway. Kuler will help you generate reasonable color schemes if you don’t have a strong color sense; even if you do, you might find the hex codes useful.

Google webfonts

Play around with this: search for some fonts that might be good for headers and for body text, add a few to your collection, and make sure you know where to copy-paste the code you need to use them.

Optional
The Elements of Typographic Style Applied to the Web

The Non-Designer’s Design Book

As a non-designer, I found this book VERY illuminating and empowering; it lays out simple rules you can use to make good choices even if you don’t have an instinct for art.

The Design of Everyday Things

A genuine classic of design and user experience that will change the way you see the world around you. Worth reading for its notion of “affordances” alone.

Literary Machines

A weird, quirky, brilliant book unlike anything you’ve ever read. The origin of hypertext. Available on campus at UW; may be hard to find elsewhere, but it’s worth ILLing.

Useful CSS

A helpful cheat sheet for the CSS you’ll use most often.

Less and/or SASS

If you’re comfortable with CSS, and especially if you’ve run into headaches trying to maintain stylesheets for large sites, these will change your whole workflow, and it’ll be great. Bootstrap, which we’ll see next week, is Less-based.

Zeldman, Ch. 11

Read if you’re interested in what’s up with doctype declarations, the details of browser incompatibility, the history behind these things, and why designing for earlier Internet Explorer versions will make you want to pull your hair out.

Assignment

• Do the required readings.
• Make sure you can define the following: skeuomorphism, wireframes, dark patterns, bandwidth-friendly, inheritance (in a CSS context), box model, float.
• Answer the questions in the Week 3 discussion forum in Learn@UW.
• We’re all in this together, so make sure your classmates’ questions get answered. If you know the answers already, great. If you don’t, use your ninja-like reference skills to help find answers (don’t forget to explain your search strategy!).
• Make sure you’ve read and gotten started on Assignment 1, due February 24: you now know everything you need to know to complete it, except responsive design.

Key questions

What is responsive web design and why do we care?

What are some of the differences besides styling that go into designing for mobile? What problems does responsive web design solve, and what problems doesn’t it solve?

How do you apply Bootstrap’s CSS elements to a web site and perform basic customizations?

How does RWD fit into the big picture of usability? (We’ll come back to this later.)

To read/watch

Required

Responsive Web Design

The foundational article for RWD: this is where it got started.

Bootstrap documentation

This is a reference work, so you don’t need to read it comprehensively. Instead, skim it (especially the Getting Started page) to learn what your options are, and then solidify your understanding by building a basic Bootstrap page from one of the templates and the available CSS components. (You don’t need to use the JS components now, although if you were familiar with HTML and/ or programming before the course, they’re a good way to extend your knowledge. We’ll come back to them.)
If you haven’t read a lot of tech documentation before, here’s how: pick one component. Then either read about in-depth and then build it, or build and then read its documentation in more depth as needed – whichever style works better for you – going back and forth between reading and building until the component works. The documentation may not make total sense until you’ve built the thing, and that’s okay.

Responsive Web Design for Libraries

You can download the slides as PDF from this page, but you may find the SpeakerDeck version faster.

Control Issues

Responsive Design Won’t Fix Your Content Problem

Cell Internet Use 2013

Read the full report, particularly the demographics of cell-mostly vs desktop-mostly users.

Smartphone Ownership 2013

Read the full report.

Optional

If you need to see CSS in action, I’ve made a few videos for you (screenshots of my applying CSS to the HTML file from week 1). CSS Selectors, CSS Box model, CSS Font Styling and Google Fonts

Hanson, Ch. 3.

Clark, Ch. 5.

A Dao of Web Design

The example sites available at Bootstrap (use your dev tools to analyze them!)

Assignment

• Do the required readings/viewing.
• Answer questions in the Week 4 discussion forums.
• Make sure you’ve read and gotten started on Assignment 1, due February 24: you now know everything you need to know to complete it.

Due end of week: Web site version 1.0

Key questions

What is a content management system and why do we care?

How can you evaluate whether a CMS and its plugins meet your needs?

What are some of the nontechnical issues raised by large web projects?

To read/watch

Required

Byron et al., Ch.1, 2, 7, and Appendix B

Use opensourcecms.com (or your own Drupal installation) to actually do the hands-on sections in Ch. 2. You won’t be able to do all the hands-on parts of Ch. 7 without your own installation that includes the relevant modules; just do what you can.

Varnum, Ch. 1

Jones & Farrington, Ch. 2 and 3

At least one of the Done in WordPress blog series (Goodman 2013):

• Madison (NH) Local Library History
• Belchertown High School Library
• The Grove Library (a regional public library in Australia)
• Scholarly Publishing @ MIT Libraries

Doing a Content Inventory

Schmidt & Etches, pp 60-71 (the sections on content audit and content workflow)

Optional

Byron et al. (the rest of the book)

Varnum (the rest of the book)

Drupal Ladder

Walks you through how to contribute to Drupal code and documentation.

The Drupal community, including its IRC channels and meetups

The Drupal4lib mailing list

The LITA Drupal4Lib interest group

Jones & Farrington (the rest of the book)

Goodman (2014)

WordPress.com

Get a free blog and mess around with it. (Or install your own from WordPress.org!)

WordPress Codex

The reference manual for WordPress technical support.

WordPress meetups

Halvorson & Rach

Follow some of the authors of this week’s reading on twitter: @webchick (Angela Byron), @varnum (Ken Varnum), @pollyalida (Polly-Alida Farrington), @thecorkboard (Kyle Jones - also a UW student!), @godaisies (Amanda Goodman), @walkingpaper (Aaron Schmidt), @etches (Amanda Etches)

Assignment

• Do the readings

• Make sure you know what the following terms mean. If there are any you don’t know, do research and/or ask questions until you do:

  • open source
  • dynamic (in the context of a web page)
  • modules/plugins
  • PHP
  • database, MySQL
  • web server
  • operating system
  • RSS feed
  • deprecated (in the software context)
  • case-sensitive
• Answer the questions in the Learn@UW Week 5 forum
• Don’t forget that Assignment 1 is due next Monday!

Key questions

What is jQuery and why do we care?

How can I add some interactivity to my page with jQuery?

How does the jQuery + CSS combination give us powerful new options?

Readings and work

Required

Read the Week 6 reading in Learn@UW (available in the Content Browser sidebar), containing the How To Read Documentation video and the What is the DOM explanation.

Watch Lynda.com jQuery for Web Designers: Introduction, part 1 (Introducing jQuery), part 2 (Essential jQuery concepts)

You can access this via your UW account: Log in > Log in through your organization or school > type www.wisc.edu in the blank. If you’re not already logged in to wisc.edu you’ll be asked to do that; otherwise it should just work.
Make sure to do the challenge in part 2. It’s okay if your answer differs from his as long as it works; there’s usually more than one right answer in programming.

Post your questions and/or reflections on the Lynda video in the relevant thread of the Learn@UW Week 6 forum.

Read the documentation at api.jquery.com for .slideToggle(), .addClass(), .removeClass(), .toggleClass(), .css()

Add an effect to your HTML page from Assignment 1 with jQuery, and tell us about it in the relevant thread of the Week 6 forum.

It can be any effect you like, and the page doesn’t have to look good when you’re done; the goal is to make it work. If you aren’t sure where to start, use .toggleClass() on something that has a class already.

Answer the “what is jQuery and why do we care” question in the Learn@UW Week 6 forum.

Optional

Do you have unresolved questions or nifty insights? Post to the ‘any other questions & reflections’ thread.

Read anything else that looks interesting on api.jquery.com.

Read anything that looks interesting on learn.jquery.com.

There’s a ton of great info here, but it assumes that you have some programming experience. You can absolutely still read it if you don’t - just be prepared to spend some extra time looking things up and asking questions. It’s okay if it doesn’t all make sense on the first read-through; it will make more sense as you gain experience.

The UW library is looking for focus group participants for a web site redesign; you might find this process interesting.

Key questions

What are the Bootstrap JavaScript components, and how do they give us some new options for interactivity?

How can we iterate code: make it work or make it better, e.g. by critiquing it and trying new things?

Assignment

Required Read Bootstrap JavaScript components

Review last weeks’ How to Read Documentation video if needed.

Apply a bootstrap.js effect to your HTML page.

Reply to a post (not your own) in last week’s Your jQuery Effect thread as follows (pick one):

• Find a post with a script (whether it works or not). Describe what you believe the script is doing, step by step, in English, and ask the original author if that’s accurate. (If you’re the original author, please tell them if they’re right! If they’re not, explain what you were going for. As a bonus, this may help you understand errors in your code.)
• Find a post where someone wants help improving the script and help them out. If you know exactly what to do, go ahead and explain it or write the code. If you don’t, that’s fine too - ask some questions that will help them clarify their thinking, or find some resources that you think might help them get on the right track, or explain the half you do know how to solve and ask for help on the half you don’t.

Iterate your jQuery from last week. If it wasn’t working, try a new strategy (get something simpler to work, ask for help and go from there, etc.) If it was, make it do something more complicated. Post about it to last week’s ‘Your jQuery Effect’ thread.

Read the final project one-pager and final project deliverable assignments. There’s a Final Projects thread in the Content Browser > Course-wide info area you can use to ask questions, propose ideas, and find teammates.

Discuss the Week 7 discussion forum threads.

Except for the questions/reflections thread, none of these are optional. If you’re having trouble with your Bootstrap effect, posting about what you’ve tried and where you’re stuck is a completely legitimate way to participate.

Optional

The rest of Lynda.com jQuery for Web Designers

Lynda.com jQuery Essential Training

I found this more technical than the jQuery for Web Designers class, but you may find it handy to have an additional perspective.

Building Twitter Bootstrap

Curious how and why Twitter built Bootstrap? Here you go!

Progressive Enhancement with JavaScript

You can do lots of cool stuff with JS, but possibly at a cost: e.g. making sites slower to load, or less accessible to users who have screenreaders, or who have disabled JavaScript. Progressive enhancement is the idea that the bare-bones version of your site (no JS, no CSS) should work, providing access to all the core content and functionality; styling and interactivity are layers on top of that which enhance the experience for other users. This article discusses some of the techniques for doing that.

Key questions

How do users seek information?

What are some organizational tools that can help (or hinder!) that search?

How can we evaluate whether a web site’s information architecture succeeds in helping users find stuff?

To read/do

Required

Read:

• Morville & Rosenfeld, Chapters 1, 5, 6, 7, 20
• Carol Kuhlthau’s Information Search Process
• Card Sorting: How Many Users to Test
• Avoid Category Names That Suck
• Where Am I?
• Home Page Goals,
• Flat vs. Deep Website Hierarchies
• Prejudices and Antipathies (Introduction and Preface only)

Answer the card sorting question in the forums. Come back later and see how your classmates answered it; respond to something you find thought-provoking.

Answer one of the following in the Evaluation thread in the Week 8 Discussion Forum:

• The articles “Avoid Category Names That Suck”, “Where Am I?”, and “Home Page Goals” each give some concrete criteria for evaluating a web page’s information architecture. Pick whichever article you found most interesting, and evaluate a library web page according to those criteria. (Any library is fine.) Tell us about it.
• Pick an idea from this week and go to the UW library catalog to learn more about it. Keeping in mind Kuhlthau’s ideas and the techniques you’ve seen this week: what did you encounter that helped your process of selection, exploration, formulation, and collection? What hindered it? Did anything particularly increase, or decrease, either your uncertainty or your anxiety? Tell us about it.

Optional

Optimizing Websites in the Post Panda World

Toward the end, suggests some interesting and unconventional clues that may help answer information needs.

The rest of Prejudices and Antipathies

What Happens When Architectural Questions Are Not Asked?

A concrete example of how to confuse users via Facebook privacy settings.

The Design of Browsing and Berrypicking Techniques for the Online Search Interface

A classic paper on how people think when looking for information. It challenged conventional wisdom at the time, though its suggestions for how to build interfaces may seem dated today.

The Anatomy of a Large-Scale Hypertextual Web Search Engine

A late-1990s paper on using citation analysis (discussed in the berrypicking paper, above) to build a prototype search engine. Google went on to be fairly well known.

Folksonomies? How about Metadata Ecologies? and folksonomies + controlled vocabularies

Eminent information architect Louis Rosenfeld and internet theorist Clay Shirky argue about the relative values of controlled vocabularies and folksonomies (vocabularies for organization that emerge from user-defined labels).

Any Wikipedia page

What tools are here to organize information? (Be sure to look at sidebars, if any; tabs; and whatever’s toward the bottom of the page. What categories is the page part of? What does Wikipedia tell us about its context or provenance?)

Have fun!

Due end of week: Final project one-pager

Key questions

What are some key principles of usability?

What are some usability challenges faced by library web sites in particular?

Assignment

Required

Read the Week 9 Overview (located in the Learn@UW content browser).

Read:

• Krug, Ch. 1-3, 5, 7-9
• User Experience vs. the World
• Library Terms that Users Understand
• Catalog by Design
• Schmidt & Etches, Ch 1 (available online from ALA TechSource)

Answer the 3 discussion questions in the Week 9 forums.

Keep these ideas in mind as you interact with whatever web sites you use every day.

Optional

The rest of Krug

The Design of Everyday Things

If you didn’t read it in week 3 - and maybe again, if you did.

The rest of Schmidt & Etches

Aaron Schmidt writes a Library Journal column on usability, The User Experience

http://www.usability.gov/

Lots of useful tools.

Whitney Hess’s DIY UX talk

An overview of the process of the process that you could use to improve user experience.

Design Choices Can Cripple a Website

An example of how small web design choices can have dramatic effects on task completion.

Your Library Web Site Stinks And It’s Your Fault

Matthew Reidsma tells us how to make it better.

Key questions

What’s a persona?

What can personas help us achieve, and what problems can they help us avoid?

What are good and bad ways to come up with personas?

Assignment

Required

Read:

• The Week 10 overview (in Learn@UW)
• Cooper, Ch. 9 (will be on course e-reserve soon)
• Audiences, Outcomes, and Determining User Needs
• Digital Public Library of America personas
  and scenarios
• Designing for 5 Types of E-Commerce Shoppers
• Dark Patterns: Deception vs. Honesty in UI Design

Also read any one of the following:

• Nicol and O’English, Rising Tide: Faculty Expectations of Library Websites
• Designing Web Registration Processes for Kids
• Children’s Websites: Usability Issues in Designing for Kids
• Teenage Usability: Designing Teen-Targeted Websites

Then answer the Week 10 Discussion Forum questions.

Optional

• When to Use Which User Experience Research Methods

You probably won’t be able to implement all of these methods, but you may find it interesting to see how wide the options are, and think about what the benefits and drawbacks of different methods are, in case you find yourself needing to choose among them. The methods also illustrate a variety of ways you might gather data for generating personas.

Moved to following week: Accessibility evaluation

Key questions

What are some specific techniques and tools you can use to answer questions about web site usability?

Given these tools, what kinds of questions can we ask?

What benefits and limitations do different usability testing tools have?

Assignment

Required

• Read the Week 11 overview in Learn@UW.
• Read How We Do Usability Testing
• Read Steve Krug’s usability test script
• Read Farney and McHale, Ch. 5 and 6.
• Google Analytics: read about its features, with an eye toward answering the discussion questions in the forums. Watch the screencast in Learn@UW.
• Crazy Egg: read about its features, try its demo (slow to load; be patient), and watch this screencast of how Khan Academy uses it
• Browserstack: read about its features and watch this (rather enthusiastic) screencast
• Read about heuristics: 10 Usability Heuristics for User Interface Design, How to Conduct a Heuristic Evaluation, Characteristics of Usability Problems Found by Heuristic Evaluation
• Answer the Week 11 discussion questions in the forums.

Optional

• Rocket Surgery Made Easy
• The rest of McHale and Farney
• Lehman and Nikkel
• Incorporate Google Analytics or Crazy Egg in a page you control; play around with the dashboard and see what you can learn. (GA is free; Crazy Egg offers a free trial. Both require accounts.)
• Try out BrowserStack. (It offers a free trial, requiring an account.)
• Usability.gov how-to and tools section

Due end of week: Accessibility evaluation

Key questions

How might the web look different if you were navigating it with some disability you don’t (currently) have?

What tools can help us investigate other perspectives on the web and check for accessibility problems?

What are some techniques for fixing accessibility problems?

Assignment

Required

• Read Riley-Huff
• Read Cynthia Ng’s three-part blog series on techniques for making your website accessible: Part 1, Part 2, Part 3
• Read Tools I use when performing accessibility assessment
• Watch the accessibility test screencast in Learn@UW
• Complete and turn in the Accessibility evaluation assignment

Optional

• Ask questions or make comments in the Week 12 forum as needed.
• Read/skim the WAI quick reference on How to Meet WCAG 2.0 (it isn’t actually quick, but it’s a good reference, and you can customize it to show only the areas of concern you care about, or the level of compliance you’re aiming for)

Due end of week: Web site version 2.0

Key questions

Who are your patrons with disabilities? What sorts of needs do they have and what design choices and adaptive technologies address them?

What’s universal design, and why is it a useful perspective?

What are specific examples of how these issues play out in a library context?

Assignment

Required

• Week 13 Overview (in Learn@UW)
• All Technology Is Assistive Technology: Six dispositions for designers on disability
• Principles of Universal Design - available in HTML, PDF, and text formats; read whichever you prefer
• Laura Kalbag - LXJS 2013 - Designing for accessibility
• Disability and communication: A consideration of cross-disability communication and technology
• Deafness and the User Experience
• Tending a Wild Garden: Library Web Design for Persons with Disabilities
• An Evaluation of Finding Aid Accessibility for Screen Readers
• When is a PDF accessible?

You’ll probably be connecting lots of patrons to lots of PDFs as a librarian, so you should know about their accessibility issues.

Optional

• The Accessibility Project
• AccessAbility: Access and Usability at Penn State: What to Fix

Reference works, in case you need to learn more on specific topics or get a quick sense of things to check. The Accessibility Project is open source and welcomes contributions of articles as well as code; see the issues list and contributor guidelines if you’re interested in contributing.

• Section508.gov

If you’ll be implementing projects in the US public sector, you will need to familiarize yourself with Section 508, which governs accessibility.

• Eames: The Architect and the Painter

If you were intrigued by their work (referenced in the Medium article), I strongly recommend this beautiful, intriguing documentary about them. A fascinating and brilliant couple.

Key questions

What’s the agile project management method, and why do we care?

How do you run an effective meeting?

What does project management look like in library technical projects?

Assignment

Required

Salo, Project Management

Waters, How to Implement Scrum in 10 Easy Steps, and the 10 blog posts linked from it describing those steps

Metz, LIS 861: Project Management

Rogers (PowerPoint file available in Learn@UW - make sure to read the presenter notes)

Ballard & Teague-Rector

Critchlow, Friedman, & Suchy

Glendon & Baumann

Optional

Fail4Lib preconference materials

Want to know more about risk in project management? Discover how some library projects have failed, and what we can learn from that.

Library Project Management Toolkit

A crowdsourced reference (you can edit it!) full of info on project management software, charters and one-pagers, working with stakeholders, etc.

Metz, Managing Projects Part 1 and Part 2

This provides more specifics on how you can implement project planning, including some good concrete stuff on time and budget estimation. Make sure to read the presenter notes.

Key questions

Whom might you need to get on board when you implement a library technology project?

What obstacles might you encounter in getting buy-in?

What strategies and tactics can you use to build an effective, two-way communications strategy that lets you get good technology work done?

Assignment

Required

• Read the Week 15 overview in Learn@UW.
• Watch the embedded video and read the linked documents.
• Answer the two discussion forum questions.
• Don’t forget about your final project and your failure assessment, due at the end of next week!

Due end of week: Final project deliverables; failure assessment

TBD