Category Archives: Information Architecture

Meet Kristin Sullivan- the new UX GRA

Hi all! I’m Kristin Sullivan, the new User Experience GRA with TIS. I recently wrapped up my first year in the Information Studies Master’s program at the UT iSchool. Prior to joining TIS, you could find me working as a teaching assistant (or Purple Shirt) in the iSchool’s IT Lab.

A bit about me: I majored in history and environmental sciences at the University of Vermont In Burlington. Following completion of my undergrad degree, I started to gradually move southward. I worked in a bookstore in NJ and then moved on to work with the Free Library of Philadelphia in their digital resources department. With the Free Library, I managed a computer hotspot that provided resource access and digital literacy training to community members. After almost a year of working with the Free Library, I decided to apply for graduate programs in information science and ended up enrolling in the UT iSchool.

I found my way into the world of UX through the iSchool. Initially interested in building upon my knowledge of web development, I enrolled in the more user experience focused courses offered through the program, such as information architecture and usability. I also used my time as a lab teaching assistant to increase my own technical skills in these areas and to teach others how to use design software programs through one-on-one instruction, tutorials and short courses. Currently, I’m trying to soak up all the UX knowledge that I can and apply user-oriented design to the projects that I work on.

I’m excited to join TIS this summer and work on UX for a library site. I am currently helping to wrap up work on the Geology branch site and implement the guidelines that the very talented, previous GRA, Stefanie Roberts established. Through this position, I am excited to get more hands-on design and user-testing experience. I also would like to build upon my previous teaching experience to create UX-oriented tutorials for TIS and contribute to the TISandboxes.

When I’m not around TIS, I will be working 10 hrs in the IT lab (at least for this summer), taking a summer class at the iSchool, and co-directing the student groups UT Association for Information Science & Technology and Advocating for Women in Technology. As for outside of the UT scope, I like to go on social bike rides and try to do the fun things in Austin.

Meet Stefanie, the new TIS GRA

Salutations! I’m Stefanie Roberts, a first-year UT iSchool master’s student and the new TIS User Experience GRA.

I majored in English at the University of Florida and dabbled in nonprofits, media, education, and healthcare before finding my way to UX. I didn’t even know the field existed until I stumbled upon it while researching library graduate programs. The common threads I found woven through my experiences in other fields—working with people, producing creative deliverables, and designing new systems to improve workflows and outcomes—are also at the heart of UX research and design. I feel fortunate to have wound up here working on UX for a library, the dream combination for many an MSIS student.

This semester, I’ll be collaborating with TIS staff and the Library Web Oversight Group on implementing best practices to redesign and create optimal experiences for UT Libraries website users. Since joining TIS in September, I’ve been generating IA and migrating content for the new Geology branch page. I already can’t remember life before Drupal. I’m especially looking forward to learning more about content strategy, responsive design, and accessibility.

When I’m not at the library, you can find me doing schoolwork, co-directing the Student Association for the School of Information and UT’s student chapter of the Association for Information Science and Technology, biking and running (for fitness and/or to Juiceland), or exploring the cultural goings-on in and around Austin.

The Big C

Useful and usable web content is a big challenge for everyone, everywhere but it’s especially challenging in the Libraries because of our distributed authorship model with no central editing body.

This leads to:

  • Inconsistent tone and writing style
  • Content ROT (Redundant, Obsolete, Trivial)
  • Lack of cohesive information architecture
  • Inconsistent and confusing user experience
  • Training challenges
  • Lack of authority to address content issues
  • Difficulty creating and adhering to a thoughtful content strategy

Karen McGrane’s Responsive Design Won’t Fix Your Content Problem, published on A List Apart, is extremely important and pertinent to us right now.  As we gear up to do a responsive redesign of our entire site, it’s clear that we have a ginormous content challenge on our hands.  And we CAN’T sweep it under the rug and we CAN’T just use what we have and expect any measure of success.

Nutshell version:  The redesign will fail if we do not fix our content problems.

Scary thought.

We probably need to start talking about what we mean when we say “content.”

I’m thinking about it in terms of items like this being our Big C Content:

  • Events
  • News releases
  • Guides
  • Tutorials
  • Information Literacy
  • Hours
  • Physical location info
  • Study Room booking app
  • Interlibrary loan
  • Database access
  • Maps
  • Digital collections
  • Search
  • Policies

And within each of those areas, there is the Little c Content: the individual pieces, including the assets.

Things like:

  • headings
  • lists
  • paragraph text
  • metadata
  • images
  • logos/branding
  • buttons
  • videos
  • charts
  • infographics
  • (white space)

While it’s easy enough to make a style guide that outlines best practices for writing web content and achieving accessibility, that won’t fix the ROT, information architecture issues, and all the larger issues listed above. That alone doesn’t give us more useful and useable Big C Content.

I’m sure there are other ways to look at it but I think a good place to start is focusing more clearly on what we mean when talking about content. This will lead to more productive conversations about strategy and responsibilities.

We have a content strategy sub group who is focusing on this issue.

Members are:

  • Jade Diaz (topic co-leader)
  • Mason Jones
  • Natalie Moore (topic co-leader)
  • Minnie Rangel
  • Robyn Rosenberg
  • Kristi Selvaraj
  • Audrey Templeton
  • Travis Willmann

Contact any of us with feedback. We believe it’s crucial enough to push this conversation to a wider audience. So much hangs in the balance.

Hello!

Currently, I am the new UX GRA at TIS, and I will be working with the Information Architect, Jade Diaz, on improving the user experience of various interfaces throughout the semester. I will be taking part in:

  • understanding project requirements
  • usability assessments and documentation
  • generating information architecture and prototypes for new designs
  • helping web authors maintain and update content in Drupal

How I got here:

I’ve always been fascinated with understanding how people process information and how this information helps them make decisions in their lives, so I got my Bachelor’s degree in Psychology from Texas A&M University. Unfortunately, I came to realize that getting a PhD in psychology was not for me, so I began looking into other areas that incorporated psychology, but did not require clinical training.

I didn’t ever feel a strong pull towards technology, but my dad is obsessed with the history of computing hardware, so there were always weirdly huge and old computers all over the house that I couldn’t be less interested in. However, I was fascinated with how different those old interfaces looked compared to my new iMac G3 (which obviously rocked the ‘Flower Power’ design). I couldn’t even imagine how someone could use a computer without windows or menus or icons.

When I decided to try to bridge these two interests, one of understanding how people learn and process information, and another of understanding how to improve interface designs to increase usability, I came across the field of HCI. I looked at a few different graduate programs, and decided to attend UT’s Master’s program in Information Studies. I am specializing in usability, information architecture, and UX research/design.

Other than school and work, I love spending time with my two wonderful cats, Gus and Sophie. I also got a guitar for Christmas, so I’m trying to teach myself a few things. I sort of like working out, and love spending time with friends and family.

Writing for the Web

A lot of people are terrified of writing, but here’s what I think: If you can speak, you can write.  This is especially true for the Web.  Some may be better than others, but with the following guidelines and practice, everyone can improve.

Steve Krug, author of the best-selling usability book Don’t Make Me Think, says Web pages should be self-evident, obvious, and self-explanatory.  Users should be able to “get it” without expending a whole lot of cognitive energy.  Most users scan Web pages instead of reading them, anyway.  Even readers with above-average intelligence read only about 20% of text.

So with all that scanning and conservation of mental energy, what do Web users notice?

  • Page layout
  • Navigation features
  • Images
  • Highlighted keywords, such as links
  • Meaningful subheadings
  • Lists

How can you make such features especially noticeable?

  1. Omit needless words.
    Getting rid of unnecessary words reduces the “noise level” of the page, makes the useful content prominent, and makes the pages shorter and scannable.  Not sure where to get started?  Steve Krug likes to say, “Get rid of half the words on each page, then get rid of half of what’s left.”
  2. Use plain language.
    People prefer to read simple and informal writing online.  So avoid jargon, use familiar words, define acronyms and abbreviations, and use abbreviations sparingly.  Use descriptive words, especially in the first sentence of each paragraph, and use active voice.
  3. Make content meaningful.
    – Group related information and functions.
    – Use descriptive headings and subheadings.  Style them in bold, so they stand out.
    – Ensure that labels clearly reflect the information and items contained within a category.
    – Use bulleted and numbered lists.
    – Leave plenty of whitespace.
  4. Match link names with the page they point to.
    “Click here” is not very descriptive.  A better way to help users understand and use your Web site and its subpages are to clearly label all links.  For example, instead of writing “Click here for a map,” you might write, “For help, view a Campus Map.”

Ultimately, try to think about your audience and what their level of understanding and familiarity might be when they initially encounter your Web page, and let that guide your writing.  Remember, you want your site to be easy to read and easy to understand.

Here are some additional resources you might find helpful:

(For a slide presentation of this post, download the PDF: Writing for the Web, 3.40MB.)

Nifty Wireframing Tools

Hey there! Are you interested in wireframing? If so, but you’re not quite sure what wireframing is—or if you want more information some existing products, Axure and Balsamiq, this post is for you.

To begin, what is a wireframe? Wireframes are essentially blueprints for web and app design and are an early step of the development process. They allow developers to create frameworks of their project and to indicate where elements such as text, photos, menus etc. will be. Using wireframes, designers can plan what sort of functionality the website or application will have, what type of and how information will be displayed, and the priorities of these functions and information. Additionally, designers can use wireframes to easily produce several different design options for a project and to effectively communicate their ideas to other team members.

High-fidelity wireframe vs low-fidelity wireframe example from wirify.com

The complexity of wireframes varies greatly: some wireframes are merely simple static sketches while other—“high-fidelity”—mockups are realistic prototypes of the final product. Often, these include interactive pages and elements that mimic the look and functionality of the final product. Deciding which type of wireframing is best for your project depends on the context, but there are a variety of tools available that cater to a wide spectrum of needs.

 

Balsamiq

Balsamiq is a low-fidelity, rapid wireframing tool that allows users to quickly generate “sketchy” looking wireframes which can be linked together to enable a click through feature.  With only essential features, Baslamiq is quick to learn, easy to use, and great for communicating a project’s integral components without getting distracted by details.  Visit the Balsamiq website for pricing and downloads. Various packages and trial versions are available, with single user licenses starting at an affordable $79.

 

Axure

If a more powerful wireframing tool is what you desire, Axure might be a good option. This user-friendly tool uses “widgets” (i.e. website design elements) that you can drag and drop into a design interface to create interactive HTML prototypes. Prototypes can be made in varying degrees of completion—if you prefer a low-fidelity hand drawn look, elements can be modified to varying levels of “sketchiness.” If you want a high-fidelity model with realistic functionality, Axure can do this too. Animated content, drag and drops and more can all be incorporated into your wireframes. If you are a student (and meet certain requirements), you can get an Axure RP Pro student license for free(!). Non- students can purchase Axure from around $300 to 600 depending upon the version. If you don’t want to spend the money but still want to try it out, a 30-day free trial is available as well.

UT Digital Repository Asset Layout Updated with Icons

Steven Williams and Matthew Villalobos, of Technology Integration Services, collaborated with Amy Rushing and Colleen Lyon to improve the user experience of viewing files in the UT Digital Repository. The default display of a DSpace/Manakin repository is to display files, and their metadata, in a text representation across rows. In order to provide users with a more visual cue, graphic icons for the most frequently used file types were created. In order to associate a file type with its appropriate icon, XSL transformation was performed in the Manakin layer matching the object mime type with its icon.

In addition to using icons to help users quickly scan for file types, the metadata associated with the object has also been moved to a vertical display floating to the right of the icon. The vertical layout not only allows for an improved gaze path, but also provides more space for longer descriptions and spacing for future data like statistics.

Classics Library Redesign

TIS worked closely with the Classics Library staff to evaluate and organize their site content. The redesign focused on  more user-friendly layouts and improved consistency with other library sites like FAL, APL, MSL, and PCL. TIS also took the opportunity to transition the site into the Libraries Content Management System to improve template stability and allow improved access for multiple authors.

Classics Home Page

The new site reduces maintenance and provides consistent data maintained by views from centrally-managed content. Examples of centrally-managed content are Library Hours, Human Resources managed Staff Directory, and the integration of the Libraries Recent Arrivals application.


TIS also sought to improve communication and outreach by providing a blog to represent a digital news board. The similarly themed blog, which is accessed from the classics home page, presents a traditional news listing with built-in tagging, archiving, and RSS feeds. The blog also affords content separation that allows for less formal posting of content. The Classics staff use the news blog to highlight specialized classics books, journals, and other resources available across campus Libraries.

The Classics Library has already received several positive comments:

nice, Gina! It looks good

–ex-Chair

Cool! Thanks very much for this. I will bookmark it forthwith”
–Faculty

this is fantastic!! Very helpful indeed esp. for us who are on the other side of  campus!

–Fine Arts Faculty

 

Perry-Castañeda Library Redesign

TIS worked closely with the Perry-Castañeda Library staff to re-organize and redesign the site. PCL staff reduced the amount of content and worked with TIS to develop a new structure that resulted in improved navigation. Consistency with other recent branch redesigns, such as FAL, APL, MSL, and Classics, were maintained by following similar templates, but the PCL site was customized to fit its needs.

Home Page

Content duplication was reduced by integrating Library hours, staff contact information, and locations guide from their central locations. Now, hours will automatically update when the central hours application is updated. Staff contact information will automatically update when Human Resources updates, adds, or removes staff from the central staff directory. The PCL location guide will automatically update when the central location guide is updated.

PCL Staff Contact and Location Guide

New Video tutorials were integrated into content layouts, and panels were used to allow content editors the ability to edit while reducing the chance of layout errors.

Panel and Tutorial Integration

Implementing the redesign included re-organizing the site while being served to production from the Content Management System. The transition required updating and deleting content in order to provide a new structure. Re-organizing live content required tracking URL changes and updating links. After content was re-organized, the site was transferred to a development server, the design was developed into a theme, and it was  applied to production.

A special thanks goes to Susanne Ristow for heading up the Perry-Castañeda Library redesign.