Links & Resources - User Experience (UX) Design

• User Experience Dictionary by Pidoco, a collaborative online wireframing and prototyping tool
• Glossary of Terms by the User Experience Professionals Association (UK)
• User experience glossary by Amberlight, a UX & Interaction Design company
• Glossary by the Usability Body of Knowledge
• Terms (A–Z) by UX Matters a best practices UX website

• Boxes and Arrows

Readings:

• Rettig, M. (1994) Prototyping for Tiny Fingers. Communications of the ACM, 37 (4).
  • Good description of how to do paper prototyping.
  • Good explanation of why bother.
  • Good description of difference between hi-fi and lo-fi prototypes.
• Integrating Prototyping Into Your Design Process - more general prototyping article.
• Sketchy Wireframes: When you can't (or shouldn't) draw a straight line - discusses the power of visual representations that look like they were quickly thrown together.

• Origins of Personas - The Inmates Run the Asylum is obviously a better resource, but if you do not have the book at hand, or want more back-story, then read this.
• Floyd, Ingbert R.; Jones, M. Cameron; Twidale, Michael B. (2008). Resolving Incommensurable Debates: A Preliminary Identification of Persona Kinds, Attributes, and Characteristics. Artifact, 2(1), 12-26.
  • Yes, I wrote this, but there's lots of different kinds of personas out there and people talk about them as if they are all the same. So if you want to try to sort them out, this article is for you.
  • As an aside, I personally favor Cooperian personas.

• Scenario-Based Design by Mary Beth Rosson and John M. Carroll Chapter 53 in J. Jacko & A. Sears (Eds.), The Human-Computer Interaction Handbook: Fundamentals, Evolving Technologies and Emerging Applications. Lawrence Erlbaum Associates, 2002, pp. 1032-1050.
• Scenario based design as conducted by Unitid Interaction Designers - a nice overview of an actual use of SBD.
• Overview of the Scenario-Based Framework - One method people have found useful for using scenarios.

• Bodystorming - a brief overview of the method.
• Bodystorming & many other kinds of activities - scroll down to find various examples of bodystorming. And to see how the need for distinction pushes academics to "discover" new names for existing methods.

• Storyboarding for Design: An Overview of the Process

Agile methods are a series of methods that are often used in contexts when people are trying to adopt and/or follow the principles of design outlined in the Agile Manifesto. As such, agile methods in aggregate are really more of an approach to design than prescriptions for design. It is also worth noting that most of what are considered Agile Methods are more oriented towards the software development side of things rather than the design side of things.

• Agile Manifesto - definitely worth checking out. It is worth noting that the Agile Manifesto was developed empirically from the work experiences of a number of its creators.

• Dave Raggett's Tutorials. While these are still valid for HTML 5, they were originally written for earlier versions of HTML, and thus their emphasis is a bit different from current HTML 5 development. Still very useful as an initial getting started guide.
  • Getting started with HTML
  • Adding a Touch of Style
  • More Advanced Features
• Mozilla Developer's Network is probably the best reference for HTML, CSS and Javascript tutorials.
  • Introduction to HTML is a useful beginner's guide to HTML.
• Fancy HTML 5 and CSS 3 Techniques - This guide is a bit outdated due to the fact that current browsers support many of these techniques much better than when this was written, and there are some common practices not included (e.g., wrap your main page content in <article> tags). However, it still will give you an idea of things you can do with HTML 5 and CSS 3.

I use the Mozilla Developer's Network (MDN) and W3 Schools most often by googling an HTML tag or CSS property, usually in the following manner: "html ul", "css font", or "html nav mdn", "css border-top-left-radius mdn", etc. W3 Schools is almost always in the top 5 hits, and MDN usually is. I go there first, because they are pretty exhaustive, and I know what to expect.

You can also use this technique to guess tag or property names. By typing in your best guess as to the name, and seeing whether the MDN or W3 Schools site is in the top 10 hits, gives a good indication of whether the tag or property name exists or not. This method of using these sites is a bit less reliable, but can prove useful at times. Often, by guessing at property names you'll find other pages that tell you what the actual property name is, and then you can search that on either of the two sites.

• Mozilla Developer's Network is probably the best reference for HTML & CSS (and Javascript). Nearly any tag or attribute or property you are interested should be covered on the site, and the text is usually pretty helpful. MDN is a newer resource than W3 Schools, so if you find some information missing from the site, try W3 Schools next.
• W3 Schools used to be hands-down the best reference for HTML & CSS (it has never been as good for javascript, however). Recently as HTML 5 and CSS 3 have become the standards, the amount of detail on the site has gone down, and I've found the entries for HTML and CSS have gotten a bit less useful. W3 Schools still has a page for every HTML tag and every CSS property, as well as tutorials, examples, and quizzes, however, so they are good back-up resource.

Here are some CSS resources that students in previous classes have found useful:

• CSS Properties List - this one is quite useful as a reference link. It does not contain all the CSS3 properties, however, so be warned.
• CSS Scrapbook - some quick examples of basic CSS.

HTML/XHTML Validation links:

• W3C HTML Validator - the most popular site, and usually considered to set the standard. Because HTML5 is still under development, however, this validator sometimes lags the most recent HTML 5 release, so sometimes it is useful to use other HTML validators as well. (It also has a few rarely-encountered errors.)
• Validome HTML &c. Validator - A very well written validator (for those interested, this site also has one of the few DTD validators I've been able to find).
• WDG HTML Validator
• XML Schema Validator - From the site: "This service lets you validate XML documents such as XHTML against the appropriate schemas. It performs a more accurate validation than the W3C validator."

CSS Validation links:

• W3C CSS Validator - should be the only one you will need.

The power of CSS:

• CSS Zengarden:
  • CSS Zengarden is a beautiful demonstration of the power of CSS. All the pages linked in the "select a design" section have the exact same content, i.e., the exact same html. Each, however, is associated with a different cascading style sheet (CSS). From those stylesheets, and from those stylesheets alone, come all the vast variations in look-and-feel that you see. Check them out!
  • In particular, notice the Zen Army style sheet by Carl Desmond. Notice how the words in the headers were replaced. How was this done? By setting the {display: none;} for the header block, and then setting an image as background for that header block that has different words embedded in the image. This is but one of the many tricks you can do once you become familiar with CSS.

This section is clearly incomplete. Please feel free to suggest examples you come across which you find particularly useful!

Accessibility Checkers

• Functional Accessibility Evaluator developed by the UIUC Illinois Center for Instructional Technology Accessibility (CITA)

  Try FAE 2.0 if the above link does not work.

  • CITA firefox extension
  • Firefox site
• The WAVE Accessibility Evaluation Tool created by Webaim.org.
• AChecker
• Other Accessibility Resources

Accessibility Standards

• Electronic and Information Technology Accessibility Standards (Section 508)
• W3C Web Content Accessibility Guidelines 1.0
• UIUC Web Accessibility Best Practices
• State of Illinois Web Accessibility Standards
• ITTATC links page to Disabilities Related Laws

Most high quality text editors are free, or at least have free or trial versions that you can use as you're getting started with website design.

Windows:

• Notepad++ is the most popular high quality text editor for Windows.
• Textpad is an excellent text editor. It is not free, but you can download a trial version and use it indefinitely. However, I think it is well worth the cost to purchase, and have bought my own license for the software.
• EditPad Lite (download directly) is the free version, there is also EditPad Pro. Editpad is a pretty good text editor. It is pretty reliable. However, it is often difficult to know whether you are actually saving documents in a particular encoding. I gave up using Editpad Lite when I had to use command-line functions to check the encoding format of my files.
• Notepad is the text editor that comes with windows. It is a terrible text editor. It is unreliable, crashes on occasion with files that are too large, and sometimes screws up the display so that you are not typing where you think you are typing in a particular file. I strongly advise you not to use notepad for anything!

Mac:

• TextWrangler is an excellent editor. It comes with full Unicode support, line numbers (see below), and text highlighting to make coding easier. The one drawback: when you first use TextWrangler, there may be a number of default settings you will probably want to change. First, if you are planning to open multiple files, you probably want to use the "Documents Drawer" by clicking the icon in the upper-right hand corner of the editor (it has an arrow on it). I believe with newer versions of TextWrangler this works differently. Second, in the preferences menu (click the TextWrangler dropdown menu, then click Preferences), you'll probably want to at least do the following:
  • Editing: Keyboard - "Home" and "End" keys: Move cursor to beginning and end of current line.
  • Editor: Defaults - Soft wrap text, Wrap to: Window Width.
  • Editor: Defaults - Default font: (Set...) - Change size to 11? 12? Whatever you can see best.
• JEdit is a multiplatform text editor written in Java. Unfortunately, it is often slow, somewhat unstable (it crashes a lot), and has some unexpected behavior that can make it confusing or frustrating to use. While it is free, I don't really recommend using it. It does, however, support Unicode properly, and has line numbers and text highlighting.
• TextEdit is the text editor that comes with Mac OSX, but I have found it to be problematic. First, while it supposedly supports unicode, and can save in UTF-8 format, it does not always save symbols properly. I have had files which were corrupted before because TextEdit used the wrong UTF-8 code for a particular symbol. Second, it does not have line numbers. While this is not a big deal for very short files, once you start creating files that are longer, and are trying to validate HTML or debug code, finding errors without line numbers becomes extremely difficult. Therefore, while TextEdit is ok, I strongly recommend using TextWrangler instead.

Linux/Unix:

If you use Linux or Unix regularly, you probably already have a text editor you prefer. Most of the popular ones will work well for any kind of web development. Here are a few if you are just getting started using Linux or Unix. Be warned, most Linux/Unix text editors have a pretty steep learning curve. And possibly as a result, when a person gets used to a particular Linux/Unix text editor, their appreciation of it can border on religious devotion.

• Emacs - A super powerful text editor that has many additional functions you can use (e.g., email management). Emacs is middle-of-the-road as far as how easy it is to use. It takes some work to get started, and is easiest to learn if you have someone willing to teach you. Once you get to be an Emacs hacker, your Emacs windows can become your primary interface to your operating system, if you so choose. When I use Linux, Emacs is my text editor of choice.
• Nano or Pico - Nano is for Linux and Pico is for Unix, but they are similar text editors (nano emulates pico) created to be much easier to use than most of the other Linux/Unix text editors. If you want to get started quick, they might be for you.
• Vim or Vi - Vim is for Linux and Vi is for Unix, but they are similar text editors (Vim emulates Vi) created as some of the earliest text editors, they are the preferred editor of uberhackers because they do not have their own interface--they are typically used directly from the command line. Vim/Vi is by far the most difficult to learn how to use, as there are absolutely no interface hints for what any of the commands might be.

The most important web browsers to have are the following three.

• Firefox - The best independent, open source, non-profit, free web browser. Firefox is one of the few browsers that is not a tool used by a larger corporation to try to push the browser market to work in their favor.
• Opera - Probably the most standards-compliant web browser, Opera is also the most accessible web browser with the most built-in support for people who face various kinds of disabilities.
• Chrome - The most popular open source browser, its development is tightly controlled by Google, and recent versions have been aimed at providing exclusive support for Google web applications of all sorts.

If you're working on production-scale projects, then it is important to test on both Microsoft Internet Explorer and Mac's Safari as well.

While it is always best to know what kind of browsers your intended users use, if you have no idea, check out this Wikipedia page on Usage Statistics for some estimates. The short answer is Google Chrome is most popular, followed by Microsoft Internet Explorer and Mozilla Firefox, but mobile browsing represents a large chunk of all browsing now, so be sure you design for that as well.

There are a vast number of browser extensions that add functional capacity to your web browser of choice that can make web development much easier. While nearly all the major browsers support extensions, there are no cross-browser compatible extensions, thus you need to pick ones that work with your current browser. Of all the browsers, Firefox and Chrome have the largest number and highest quality browser extensions.

Some examples of Firefox Extensions that you might find useful:

• Live HTTPHeaders Extension
• Greasemonkey Extension
• Web Developer Extension
• Firebug Extension
• CITA firefox extension
  • Firefox site
• Platypus
• Aardvark

Secure remote login programs such as SSH and secure telnet allow you to login to a server (computer) and work (execute commands) remotely. Thus, if you want to work on files stored on your web server, if your web hosting company or your workplace systems support it, you can ssh into the server and access your files that way. A typical command would be "ssh username@servername.domain.org". For more detailed instructions as to how to SSH into your web server you will need to contact your web host or your workplace tech support. Secure remote login programs tend to be command-line based. While not as familiar or easy to get started with as graphical user interfaces (GUIs), the command line can be much more powerful, and once you are familiar with it, it can be much quicker to use.

Secure file transfer programs allow you to copy files to and from remote servers (computers). There are several standards for secure file transfer, but the most common are secure file transfer protocol (SFTP) and secure copy (SCP). For Mac users, I recommend getting used to SCP. SCP comes free with your computer, and using it helps build familiarity with the command line.

Windows Software Applications

• WinSCP download page.
  • Only file transfer.
  • One of the best of the open source, free applications being developed.
• PuTTY, or download direct.
  • Most useful for remote login. From the download page there are also file transfer clients available, but generally, WinSCP works better.

Mac Software Applications

Any macintosh running OS X should come with SSH (remote login) and SCP (file transfer) installed and available through the command line.

If you prefer a Graphical User Interface (GUI) application, try Cyberduck, but it runs very slowly at times. The command line is far quicker.

Linux/Unix/Other Software Applications

• PuTTY download page.
  • Most useful for remote login, but there are also file transfer clients available.

Professional Web Development Environments

These applications not only provide a means for coding HTML that have significantly more functionality than standard text editors, they also have advanced features such as server integration; IDE-type support for javascript, ajax, php, etc.; virtual server support; etc.

• Aptana - the Community Edition of the Aptana Studio 1.2RC Bundle (free, and supposedly open source) is quite powerful. Only if you are doing advanced professional web development will you need the Professional Edition. If you don't want something as big (and you do want something a bit more stable), just download the unbundled studio version of the Community Edition.

HTML Graphical Editors

If you get comfortable coding HTML & CSS you will probably find these editors unwieldy, and not very useful because they do not give you the power over the HTML & CSS which you are accustomed to. However, they can still be useful editing environments for small projects. These editors are basically free applications which serve the same purpose as Dreamweaver. (Personally, I never have reason to use these kinds of application.)

• Seamonkey - a free OSS HTML editor created by the Mozilla foundation, it also has supplemental capabilities, including: web browsing, e-mail, newsgroups, and IRC chat.

Sometimes it is very useful to install a web server on your personal computer so that you do not need to upload all your files to your web host in order to test them every time you make a change. These web servers are all versions of Apache, the most popular web server by far, it also happens to be free and open source.

• Apache Friends XAMPP - A relatively easy to install Apache distribution that contains MYSQL, PHP, and Perl. This distribution is great for installing Apache on your personal machine, whether laptop or desktop. It more or less runs 'out-of-the-box'.
• MAMP - Similar to XAMPP, some people find this much easier to install on a Mac.
• Apache - If you want to install the original unvarnished.

• Mozilla Developer's Network is probably the best reference for Javascript (and HTML & CSS) tutorials.
• Quirksmode - Especially useful for Javascript Tutorials
• Javascript and XHTML - for help getting pages with Javascript to validate properly, when need be.

• Mustache
• Handlebars
• Bootstrap
• Underscore JS
• Check out this review of CSS Templating by Linkedin.

Web Analytics - Services. Some of these are at least partially pay services, though many offer partial service or demo service for free.

• Google Analytics - free partial service—very useful statistics, easy to incorporate on websites.
• Piwik - OSS
• Clicky - Pay Service
• Open Web Analytics - OSS

• PHP.net is by far the best reference resource there is to learn everything you need to know about PHP. This website and google searches (which usually go straight to php.net) are practically the only resources I use when I am writing php code.

Sites with free, downloadable images which you can use on your own websites as long as you adhere to the licenses. Most are under one of the Creative Commons licenses, so make sure you understand the terms of use before using the images in your own websites. Ask me if you have any questions about what the licenses mean; I'll do my best to answer them (but I'm not a lawyer).

• Flickr Creative Commons Licensed Images - Be sure to understand the creative commons license that applies to the picture you chose, so that you are using it properly—different pictures are under different CC licenses.
• Open Clip Art Library
  • All clip art in the OCAL is dedicated to the Public Domain
  • This means, to quote directly from the Creative Commons site: "Dedicator recognizes that, once placed in the public domain, the Work may be freely reproduced, distributed, transmitted, used, modified, built upon, or otherwise exploited by anyone for any purpose, commercial or non-commercial, and in any way, including by methods that have not yet been invented or conceived."
• Google search for "free images"
• Google search for "creative commons images"

Some website evaluation schemes. Does your website pass their criteria?

• Cornell Library - Evaluating Web Sites: Criteria and Tools
• University of Maryland Library - Evaluating Web Sites
• New Mexico State University - The Good, the bad and the Ugly
• Berkley - Evaluating Web pages
• Kathy Schrock - Critical Evaluation of Information Guides

Internet and Web Statistics

It is sometimes interesting to look at the growth of the internet and at demographic issues such as the digital divide. The following sites give some resources for doing such research, but think critically about their data quality. For example, the Pew foundation is probably one of the more reliable sites for statistics, they have a deserved reputation for high quality statistical research, but they do have a pro-internet bias which can color their results.

• Pew Internet & American Life Project
  • A non-profit organization that is one of the most comprehensive in collecting statistics about the internet, they are constantly conducting large scale surveys in order to collect demographic information about the internet and to attempt to capture the impact the internet is having, both locally and globally.

Other Links:

• Image Spam URL