Great user experiences: Tor.com

Why am I so much more motivated to complain about bad experiences than to praise good ones? It’s certainly not because it’s easier – it takes as much or more energy to complain because you usually get resistance in return. Anyway, I’d like to make more of an effort to point out great user/customer experiences when I have them, and to kick off I’m going to tell you about one of my current favorite websites.

Tor.com is a site geared towards science fiction and fantasy fans. Built by the good folks at Tor Books, it’s an intriguing enterprise in that it’s separate from their corporate site and practices something they call “publisher agnosticism,” which means that some content (actually, a lot of content) is contributed by people who don’t work for or publish with Tor Books. They also sell non-Tor books and merchandise in their store. Cool.

But beyond that, it’s just an excellent site. The blog is consistently interesting, even for a sf/fantasy dabbler like myself. The quality of writing is good, and the topics are varied enough to keep me reading without going so far afield that I lose interest. What hooked me initially were the “re-reads” – they take a popular series (Lord of the Rings, The Wheel of Time), and write about it in-depth, with plot summaries, commentary, and lots of reader discussion on each post. I totally want to steal this idea for my library – what a great way to run an online book club! And they don’t limit the discussion to books – they also talk about sf & fantasy film and tv, art, the creative process, and more.  I also love the weekly “Saturday Morning Cartoons” post, which highlights wonderful animated shorts.

Another feature I love: they do periodic themes for the site. October was Steampunk month. In December they did 12 Days of Cthulhumas. The theme permeates the whole site – blog posts, giveaways, highlighted items in the store, even the logo gets transformed:

Standard logo:

Steampunk logo:

Cthulhumas logo:

Even though I subscribe to the blog’s feed in Google Reader, I routinely click through to the site to make sure I’m not missing anything – I can’t say that about any other site I subscribe to. Details like this aren’t enough to create a great user experience, but when you have consistently good quality the details can push you into greatness. As I’m working on the redesign of our library website, this is the level of quality I aspire to.

New Year’s Resolutions?

I am not a fan of resolutions. I like to take the end of the year and the beginning of the next one as a time to evaluate and so on, but resolutions just seem like a set-up for failure so I avoid them. In fact, I studiously avoid starting anything new (exercise routines, organizing systems, what have you) on January 1st, even if it’s something I really want to do. I either start before January or later in the month just to avoid the psychological association with resolutions and failure. (I don’t know how much good that actually does, but…).

Having said that, I was totally inspired by Merlin Mann’s posts on clutter and feel like using the New Year to get control of this area of my life. Merlin posted links yesterday to a good Ask Metafilter discussion on literary clutter (Librarians, take note!) and his series on his own “War on Clutter.” The one that really kicked my butt: Never “organize” what you can discard – oh my gosh, how many dollars I have wasted at the Container Store doing exactly that!

Cool tools for webmasters

Darlene Fichter and Frank Cervone

**update: links added**

Communicating ideas
sketchcast.com – drawing and audio
jingproject.com – capture and share images on screen

• use when showing works better than telling
• just in time demos – canned screens for common how-to questions

picnik – online photo editor, plugin for IE or Firefox

• allows capture of full page, not just what appears on screen

Just for fun!
Kerpoof – make online cartoons, movies, pictures

Other power point sharing sites;

• slideshare.net – presentation sharing
• scribd
• splashcast – combine ppt, mp3, images
• zoho show
• slideaware

thumbalizr.com
capture screen or page image

Visual pagerank

IBM Unstructured Information Modeler

• analyze unstructured data sets
• automatically classify and create categories
• works for 1000 – 10,000 records

Utilities
diffdaff.com

• compare differences in two different directories (e.g. Hard drive and thumb drive) using graphical interface
• logview

SOAP Sonar

• testing and analyzing web services http://www.crosschecknet.com
• web services functional testing
• complex SOAP WSDL support

Evolved
text editor – adapts to a large number of programming languages; color codes different languages and elements

Perl Express

Fun with Images

• Flash Slideshow Maker
• Flashgallery Generator
  • allows customization of slideshow based on context

Search and Indexing

• Google sitemap builder
  • makes sure google indexes everything on your site

Open source federated searching

• Library Find (Oregon state)
• dbWiz (Simon Fraser University)
• Masterkey (index data)

IBM Omnifind Yahoo edition

• Supports up to 500,000 documents
• go from installer to searching in minutes
• easy to use graphical tools to configure look and feel
• configurable synonyms and featured links increase relevancy
• download and install on server

Google Coop CSE
good site integration

OpenURL referrer Toolbar
doesn’t go away when you delete cookies

Flog Blog

Freedom
Pack your own browser
Portable Firefox – bundled with portable apps to take bookmarks, extensions, passwords

asterisk logger v.1.02 – reveal stored passwords
undelete – recovers deleted files, unerases lost data
unstoppable copier – recover all bytes from scratched cds
simple file shredder – securely delete files so they can’t be restored
KeePass – store all your passwords in one database, locked with one master key

New Rules for Web Design

Jeff Wisniewski

Jeff looked at some of the old “rules” of web-design and discussed whether or not they are still relevant.

Design is an inexact science, but there are decades of research in usability, credibility, interface design, and hci; a lot of questions have been answered

Simplicity rules?

• rich and interactive
• RIAs
• the user experience

depends on functions – google can be simple because they have essentially one function; we need to give our users a richer experience

Content is king

• But, design matters A LOT
• novice users judge superficially and quickly!
• Professional design = increased credibility

All content is created equal?

• Design for what your users are doing
• emphasize the highest priority tasks so that users have a clear starting point – Nielsen

By the numbers:
Rule of Seven (categories manageable by users):

• guideline, not a rule
• persuasive evidence both ways
• answer depends on context
• more than 9 – maybe your site lacks focus?

3 click rule:

• is dead
• design for SCENT
• users will happily click so long as they feel they are on the right path

Design for 800×600

• NO! optimize for 1024×768
• what of other platforms? (phones, handhelds, etc.) Use CSS media types
• flexible as opposed to fixed design

Color:

• majority users browse with 24-bit color rendering
• RIP websafe palette? Still consider:
  • file size
  • alternative platforms

For redesign inspiration:

• DON’T check other library websites!!
• Standards, conventions, and user expectations are established outside of library land…Jacob’s law (users spend most of time on sites other than your site)

How often to redesign?

• Constantly
• iterative, evolutionary change
• revolutionary change is disruptive
• a/b testing: post two versions of page with ONE difference (placement of item on page, e.g.);compare use
• sometimes a tear down is required
• think about major destinations on the web, amazon, ebay, yahoo, etc. – constant iterative change

Follow your own conventions

• is reference “reference” on your website (n.b. It shouldn’t be!)
• carry web conventions through physical space and other publications
• style guidelines across print & electronic media

But follow established web conventions

• home link upper left
• clickable banner
• contact us link
• placement of navigation

greater bandwidth= design freedom?

• Two trends: more high-speed access
• more non-traditional devices on relatively slower networks (apple iPhone)

I must support all browsers

• for basic content – yes!
• Accessibility is critical and the right thing to do
• for value-added content, style and interactivity?
• Graded support aka progressive enhancement

providing a text-only version of your homepage or site?

• Separate presentation and content with css and you won’t need a separate version

Avoid css for layout…it’s buggy

• yes, but no longer enough to justify not using it
• stop using tables for layout

top of page is prime real estate?

• Actually, it’s useless space…banner blindness
• Nielsen: people have a tendency to never look at a slim rectangular are that’s above the page’s main headline

Popups

• will very likely be blocked – nothing mission critical
• can be useful when linking to supporting information

Flash is evil?

• Flash introductions are evil
• Flash can be used for effective animation and interactivity
• RIAs
• Example: http://www.library.pitt.edu/etd_tutorials/

Mouseover menus

• raise usability considerations
• They’re slower, not scanable (preventing users from getting an overview)

Opening links in new browser window

• is sometimes okay: external links, non-web docs: PDFs, etc.
• help files
• TELL users
• tabbed browsers make this less of an issue

Never create an “auto forward” it breaks the back button

• server side redirects are best
• Set auto forward time high enough to allow users to use back button

Scrolling is bad

• users scroll if there is a clue that there is something below the fold
• use the fashionable “cut off” look – content doesn’t break evenly, so users have an indicator that more content exists

Keep it above the fold

• true for most important content
• 76% of users scrolled and a good portion scroll to the bottom, despite height of window

Images of people

• generally increase trust (unless they’re really good-looking people)
• naturally draw attention – this may not be a good thing…distraction
• people, labeled, increase credibility the most

RIA=rich internet application (ajax, flex technologies)

good sites & features;

• css zen garden
• google labs
• search suggest – list of possible matches as you start typing

Putting Evidence-based Practice to Work

Frank Cervone and Amanda Hollister

Frank:
The problems of website design:
web development/hci is an intricate mix of technology and design

• majority of librarians haven’t been trained in hci
• gaps in understanding the significant differences between the online and in-person experiences

the more an org. depends on its public for achieving mission, the more it should employ dialogic features into website

Evidence-based practice (andrew booth definition)

• data provides the primary evidence for making decisions, not anecdotal stories or “common sense”
• evaluation occurs early in the process

what happens now:

• decisions are made based on Beliefs of what is needed (often biased); assumptions, anecdotal evidence and preferences
• evaluation, if it occurs, happens afterward (too late!)

derived from evidence-based model of medicine
fundamental precepts:

• study phenomena
• contrast results to other studies of same or related phenomena
• combine results

define problem>find evidence>evaluate evidence>apply results of evaluation>evaluate change>redefine problem and go back through cycle

SPICE
Setting: context-where is this being used?
Population: who are users?
Intervention: what is being done?
Comparison: what are alternatives?
Evaluation: what does success mean?

Levels of evidence

Northwestern
first usability test in 2001
focused on Electronic resources/home-grown resource finder
2nd test
how are people using catalog?
Data mining
tried not to make assumptions
dispelled some myths

Looked at areas of site with highest reported difficulty or frustration
Restructured web development process
Web advisory group – reps from all areas of library
Induction process:
required reading list (usability research, etc.)
required training:

• in usability
• conducting a usability test
• other soft skills

Overall:

• site usability has improved – proven by stats
• debates less rancorous about how to proceed; can always go back to data
• easier to develop strategies for incremental improvements over time – not locked into tight academic schedule

Jargon:
metasearch, e-journals, virtual reference, electronic resources
why should I go here?

Anecdotal evidence is good for identifying problems to look at, but usually comes from skewed user group – studies will show how representative they are;

Amanda:
Breadcrumbs: putting users on the right path

users are often “lost”
tool-based website design
dynamic, page-based crumbs – code found on google
temporary session cookie
code needed “minor” tweaking – endless path of crumbs
consultant hired:
each xml crumb file traps:
pages visited, IP, page timestamp, does not collect off site pages
does not collect browser navigation

Data analysis
pick a page to analyze
put data into magic box; out comes user paths that end on selected page
can see # of clicks to the page
ideal paths and less than ideal paths
how can you nudge users back to where they meant to go?

Advantages of trapping xml path data:

• huge amount of data
• real-time usability testing
• flexible
• no observer effect

However:

• Doesn’t track sessions that leave the website
• can’t see user response (frustration)

Future directions: implement predictive track analysis
implement timestamp analysis

code for breadcrumbs: www.yasuremedia.com/Breadcrumb/breadcrumb.htm