Simplifying Technology: A View from DRS

tech-easy

On February 25, Tim Wu, in the New Yorker, published an article titled, “The Problem with Easy Technology.”  As I read the article, I struggled with its implications for the work we do here at Discovery and Research Services, especially with the ongoing migration of the IU libraries website.  Ease of use is our constant goal: to make the website so intuitive that users can easily locate information, navigate between useful pages, and quickly find what they are looking for.  Wu, however, brings up some very important questions about technology and the consequences of over-simplification.

Wu describes this danger in terms of what he calls “biological atrophy.”  That is, as humans strive to make technology easier and easier to use, we will lose critical skills that we have developed over thousands of years.  The development of these “convenience technologies” was supposed to make life easier and give us more time to focus on things like “thought, reflection, and leisure.”  There are many examples of these technologies that can only be seen as good – such as medical technology, photography, or even ski lifts (Wu’s example, not mine).

Wayyyy easier than walking!
Wayyyy easier than walking!

But it is also interesting to think about these challenges in terms of web design and content strategy.  Today, in the “Age of Google,” we consistently see that students, and even sometimes advanced researchers, struggle with any kind of database or webpage that requires them to do more than simply enter a search term.  Because of this expectation of finding information without much of an effort, students struggle more and more with the academic research process when it requires more than a basic search bar.  This also raises challenges for our web content strategy here in DRS.  We of course do not want to make the website difficult to use – quite the opposite, actually.  But I often wonder if student expectations for the site are impossible to keep up with.  It isn’t so much that we lack the talent or ingenuity of major internet companies; it is more about the fact that the nature of our resources and services do not always fit into this strict “Google-y” template.

As we continue with this migration, and with future projects, it will be interesting to see how user expectations continue to evolve.  Think of how much they have changed just in the past ten years!  But I guess that is one reason that we have our jobs: to ensure that our services keep up with user expectations.  I just wonder if, at some point, those expectations become too difficult to possibly keep up with.  As we continue to migrate and re-design the IU libraries website, it will be interesting to keep these challenges in mind.

If you are interested, you can read Wu’s article here.

Making Mobile Meaningful: Digital Collections for Mobile Viewers

Julie Hardesty is the Metadata Analyst/Librarian at IUB Libraries.  She is interested in many aspects of digital libraries, particularly those pertaining to making it easier to find and do things on the Internet.  She is reachable at jlhardes at iu dot edu.

This blog post is based on a recent Digital Library Brown Bag presentation I gave, which is based on a poster I presented at the Digital Library Federation Fall Forum in 2012 in Denver, Colorado (and somewhere along the way, the old lady swallowed the fly and I don’t know why and… well, you get the idea).  Back when all of this started I was a User Interface Design Specialist at Indiana University so don’t judge based on my current Metadata Analyst/Librarian job title – this post really does contain mobile design info.  If you prefer to listen rather than read, you can review the Digital Library Brown Bag presentation recording (guaranteed to be less succinct and interspersed with a lot of “um”s and “where did my cursor go?”s).

There’s a lot of interest in how to deal with mobile and how much we should be considering mobile in our effort to provide online resources through the Indiana University Libraries.  I don’t have all of the stats but I do have the following: we’ve seen a steady increase in mobile use over the last 2 years, at least, for the web site that provides access to the IU Libraries digital collections and services.  The following charts reflect user agent strings that identified mobile devices (like iPhone, iPad, Samsung, Nokia) gathered from web server logs.

Mobile Browser Use Graph

And it’s a definite increase when compared to overall use of that same site (please ignore the October-November 2011 blip – our server administrator was using a monitoring program from his desktop that spiked our usage stats on the site for those months).

Mobile and Non-mobile Use

There are 2 things I would like to point out here: 1) overall use of this site over the same 2-year time period was steady or even declined a little and 2) everyone went on vacation in August 2012, regardless of the device they were using – congratulations, you’re doing it right!

So we have mobile users and it’s worth it to consider what those users are experiencing when they arrive at our digital collections and, more importantly, what they need.  And since this blog post is all about action, I’m just going to run with it and tell you what I did.

The technique I chose to apply was the single CSS media query.  This technique causes devices up to a certain screen size to display our collection sites differently then everything else.  I focused on handheld mobile phone-sized devices (iPhone size and smaller).  The digital collections to which I applied mobile optimization worked well with tablet-sized screens already so I made the call to treat tablets and desktop browsers similarly and smaller handheld devices differently.

There are multiple techniques for providing a different mobile experience:

  1. Mobile application (think Angry Birds or Bejeweled) – mobile device-specific applications that are downloaded through an app store and are installed to run on your iPhone/Android/Windows phone/whatever.

    Bejeweled
    Yes, this is me killing it at Bejeweled with a super-gem on Level 2. I’m that good.
  2. Mobile version of a web site – this involves creating a separate site with different programming (and a different URL) to provide a mobile user experience.  Out in the world, examples include Best Buy’s mobile site and Amazon’s mobile site.  Within IU, you can find examples such as IU Mobile and IUB Libraries Mobile.  I do not guarantee that these examples will stay valid for very long as mobile delivery changes quite often, but for the most part you can notice these by a different URL (with m.domain or domain/mobile) and the fact that you can often view these mobile versions in a desktop browser.

    IUB Libraries Mobile
    You can see this same IUB Libraries Mobile site in your desktop browser.
  3. Responsive Design – What I consider the ultimate goal in mobile optimization, this technique takes a single site and uses CSS to change the design as the screen size changes (from full desktop browser to mid-size tablet to small-screen mobile phone).  Many implementations of this technique allow you to see its effect just by changing the size of the browser window on your desktop browser: About.com is an oft-cited responsive design from “out there,” A List Apart provided an early example of how this can work to show text and images, and here at IU, the IU Communications department has implemented a responsive design for its site.  Templates with a grid-style layout are available to help create this type of design.

    IU Communication
    IU Communications shown on a desktop browser and on a handheld mobile device.
  4. CSS Media Query – This technique could be thought of as the first step towards Responsive Design or a single view of a responsive-ly designed site.  It involves checking for a certain device size and then applying a set of pre-defined styles or an additional external style sheet.  This is the method I can really talk about since this is what I did.

The mechanics to apply a CSS media query are pretty easy, in HTML/CSS terms.  The first necessary part is the <meta name=”viewport”> in the HTML header:

<meta name=”viewport” content=”width=320, initial-scale=1.0, user-scalable=yes”/>

Generally referred to as the viewport, it was something that Apple came up with for Mobile Safari to allow developers to control the size of the window being viewed (very simplified short story here, follow the viewport link for a great explanation from quirksmode.org).  In the above example, the mobile browser sets  the window to a width of 320px, initial scale is full size, and the window is zoom-able by the user.  Most other mobile browsers have latched onto the viewport and it is now pretty much essential for mobile optimization.  Non-mobile browsers (i.e., desktop browsers) ignore the viewport because they don’t know what to do with it, so it doesn’t cause any problems and can be included in the header of a site without any concerns.

The viewport is also the easiest piece to forget because it just needs to be there and there’s nothing else to be done with it.  If you ever think you have everything in place and the mobile browser is still showing a screen that is way too zoomed out – 99% of the time you forgot the viewport.

The next necessary part is the actual media query and it can be included a couple of different ways – either in the call to an external style sheet or within the style definition itself.  Here is a media query within the style definition:

@media only screen and (max-device-width: 480px) { }

This can be used inside the <style> element in the HTML of a page or it can be used for a section of styles within an external CSS file.  Another way to accomplish this definition is to use the media attribute on a link to an external stylesheet:

<link type=”text/css” rel=”stylesheet” media=”only screen and (max-device-width: 480px)” href=”small_device.css” />

This only applies small_device.css in the event that the media attribute (the media query) is true.  This particular media query is checking that the media type is screen (as opposed to print, braille, or other media types that can interpret HTML and CSS) and that the width of the device is no larger than 480px.  Include this as your final CSS and it will effectively apply your mobile styles.

The combination of the above viewport and media query is to apply a particular set of styles to mobile devices up to a width of 480px.  Setting the initial width to 320px fits well in the portrait mode of most iPhone, Android, and Windows mobile smartphone devices.  Applying the mobile styles up to 480px then covers landscape mode.  Beyond those two pieces of HTML/CSS are a series of design and usability decisions that can turn a site into a functional thing (like Pinocchio, only completely different).

My first round of mobile optimization happened for a set of digital collections of TEI-encoded texts: Victorian Women Writers Project (VWWP), Brevier Legislative Reports, and Indiana Authors and Their Books.  Each of these sites is distinct, but all are based off of the same software (eXtensible Text Framework (XTF) from the California Digital Library) and all offer basically the same access (full text-encoded access with searching and browsing).  We combined the development of these sites as much as possible in a move to create an electronic text service at the IU Libraries for encoded collections such as these, and the mobile optimization worked the same way.  I figured out what worked for one collection site and then applied the same changes to the other two collection sites.

I also worked out mobile optimization using CSS media queries for Image Collections Online (ICO), an online exhibit site for library and archival image collections, and War of 1812 in the Collections of the Lilly Library, another online exhibit using Omeka to bring together various digital collections to accompany a physical exhibit of War of 1812 archival materials.  These are both sites with image-based content as opposed to text-based content.  Keep that in the back of your head for a sec.

Victorian Women Writers Project Mobile
Caption: Corelli, Marie. The Mighty Atom. London: Hutchinson and Co., 1896. Victorian Women Writers Project. Indiana University Libraries, Web. 15 March 2013. <http://purl.dlib.indiana.edu/iudl/vwwp/
VAB7104>
Brevier Legislative Reports Mobile
Caption: Brevier Legislative Reports. Vol. 5. Indianapolis, Ind.: W. H. Drapier, 1861. Brevier Legislative Reports Digitization Project. Indiana University Maurer School of Law Library and Indiana University Libraries, Web. 15 March 2013. <http://purl.dlib.indiana.edu/iudl/law/
brevier/VAA8558-05>
Indiana Authors and Their Books Mobile
Caption: Stratton-Porter, Gene. A Girl of the Limberlost. New York: Doubleday, Page & Company, 1909. Indiana Authors and Their Books. Indiana University Libraries, Web. 15 March 2013. <http://purl.dlib.indiana.edu/iudl/
inauthors/VAA2373>
Image Collections Online Mobile
Caption: Image Collections Online, Indiana University Libraries, Web. 15 March 2013. <http://www.dlib.indiana.edu/collection/
images>
War of 1812 Mobile
Caption: War of 1812 in the Collections of the Lilly Library. Indiana University Libraries, Web. 15 March 2013. <http://www.collections.libraries.iub.
edu/warof1812>

My first thought when considering mobile is, “What do people want to do on this site from a mobile device?”  Mobile users aren’t in the same situation as someone sitting at a desk in front of a computer.  They are holding the device in one hand and either using the other hand or – if they are more digitally dexterous – the same hand to select and scroll and type.  These are skills that make creatures without opposable thumbs super-jealous, but it also means they have their hands full.  And it’s not just with the device either.  Mobile users on smartphones and smaller mobile devices are often on the move, possibly distracted, probably in a hurry.  Or bored and standing in a line.  Either way, they are not in a situation where they want to learn – they want to do.  They aren’t interested in research, they want access and quick answers (or quick entertainment).  This is supported by recent Pew Internet Research findings from December 2012 that report most mobile connections to libraries are to look for items, find basic information about the library, or renew, reserve, pay fines, and download e-books.

In terms of these digital collections, I think this translates to focusing on the content for mobile users, either the text or the images.  In the case of the electronic text collections, I considered what I was doing as the equivalent of making an e-reader – providing the full-text display in an easy-to-read font size and with simplified searching and browsing.  This meant no page images and making it easy to ignore things that are not the full-text (like the table of contents – I kept it there but it’s collapsible).

For ICO and War of 1812, my dream was to make them as easy to flip through as the photos on your phone.  I didn’t have quite that kind of time to devote to mobile optimization, but I did make a choice in ICO to push the facets menu below the images that display on search result and browse pages.  That keeps the images top and center on the mobile version of the site.  I also lucked out that our preset thumbnail size for image derivatives just happens to be 200px wide – big enough to be nicely viewable in portrait mode but not too big for my layout goal (320-480px).  My dream also didn’t take into account context, which is important for the War of 1812 site.  The likeliest mobile use case for that site is when patrons are in the Lilly Library walking through the physical exhibit.  A patron encounters an item on display among hundreds of, say, a map of New Jersey.  Jumping on a mobile phone and visiting the War of 1812 web site, one can potentially find more information about that map from the narratives presented on the site and the digitized version of the map than from standing directly in front of the physical object.

Since the narrative and text of the exhibit site are just as important as the images and information provided with them, the navigation for the War of 1812 remained above the main content.  Additionally, Omeka added some software wrinkles that I couldn’t iron out in time so the navigation menu does not collapse.  It’s better than not having a mobile-optimized version of the site, but it didn’t quite come together like I wanted.

Other design decisions that were common across all of these sites were removing features that were too cumbersome to use on small devices: multi-field search forms (Advanced Search) and the Simile timeline that we added to both VWWP and War of 1812.  Removing images can also improve performance over slower network connections, so home pages were simplified this way as much as possible.

So a single (somewhat determined) person with a good understanding of CSS can make mobile meaningful. But more is involved than just the technical details.  Understanding what mobile users need from a site makes the difference between a mobile site designed for a device and a mobile site designed for a person.

My Favorite App: DoubleMap

I will fully admit that I am somewhat of a technology junky. I love to try new gadgets but can’t always afford them. So instead I like to try out apps on my IPhone, most of the time I find one I like for a few days or weeks and then forget about it. But every once in a while I hit that gold mine, that perfect app that changes my life and just makes everything easier.

For me Double Map is one of those apps I could not live without. It is also free which makes it an even bigger bonus. As a graduate student who lives on campus, does not have a car, and depends on the bus system Double Map makes my life so much easier.

This app is a real-time GPS bus tracking service based out of Bloomington, Indiana. It includes real-time bus updates, an easy-to-use website for riders, cross-platform mobile apps, an in-bus GPS tracking system. DoubleMap is currently being used by students at over a dozen institutions and more locations are coming.

Once you turn it on it tells you your locations with a small blue dot and shows you the closest bus stops and the different bus routes that go to that stop. It also shows you where the bus are in real time.

Photo of Bus Routes

You can also click on a bus stop to see when the next bus will arrive. Just select the route you want to view.

List of times the bus will arrive

Or you can filter down to  a particular bus route to just get the information for that route.

Bus Route Options

DoubleMap saves me time, makes using the bus a snap, and is also techy. All in all it’s a win win situation for me. It is available for both the Android and the iPhone and can be found in the Android Market and iPhone App Store.

Augmented Reality a Reality

Earlier this month Google gave the world a sneak peak of Project Glass, the newest creation to come out of the company’s top-secret Google X lab. Project Glass is an augmented reality system worn much like a pair of glasses that displays information layered on top of the user’s visual field. In short, it’s a smart phone for your face.
Project Glass and other similar technology opens up a world of possibilities for social networking, entertainment, education, and even tourism. The concept video released by Google depicts just a few ways that the augmented reality system could simplify our everyday interactions.  The individual in the video uses the specs to check the weather, navigate the streets of New York, book concert tickets, share pictures, and chat with his friends. Perhaps the most surprising thing about Project Glass is the sleek design. The system looks like a high-tech headband with a tiny unobtrusive display screen on one side. Although they might not be the peak of fashion, these are no bulky nerd glasses.

It’s exciting to think about the possibilities for augmented reality in libraries. Imagine an individual trying to locate a book in the stacks of Wells (assuming there are still books in this futuristic scenario). She could use voice commands to search the library catalog, chat with a librarian via Skype, follow an arrow that would lead her directly to the location of her book, and scan the barcode on the book to immediately retrieve reviews from library databases – all without even so much as lifting a smart phone or downloading an app.

Keeping all this futuristic awesomeness in mind, there are a host of ethical, social, and even psychological questions that arise with the development of augmented reality technology. Issues of privacy, commercialization, and information overload are but a few reasons to be hesitant about welcoming Project Glass with open arms.  However, as the inevitable extension of mobile computing, this technology is coming down the pipeline whether we’re ready for it or not.   There are many applications of augmented reality that are downright revolutionary, but it is best to proceed with caution into this brave new world.

Sidebar: Don’t expect to be sporting your very own pair of Google glasses on the beach this summer. While Google employees are currently testing prototypes, the company does not anticipate a public release of the product this calendar year.

Notre Dame & responsive design

I’m back again to bang my responsive design drum  … this time to share a really interesting blog post about the University of Notre Dame site:

Delivering an Amazing Site on Every Device: Notre Dame Edition

There’s lots to mull over in the article, but I specifically want to highlight that in the last two years, they’ve seen a 900% increase in traffic to their mobile site … and, over the same time period, a 500% increase in mobile traffic to their main site. Even with that increase, mobile traffic constitutes only 5% of visits to their main site overall – it seems like a no-brainer to me that we are only going to see the proportion of mobile traffic grow and grow, what with all the tablets and smartphones flooding the market.

Notre Dame: mobile trafficWhile the Libraries’ mobile site has yet to see that kind of increase, the statistics on mobile visits to the Libraries’ main site show an increase of about the same proportion as ND saw – since February 2010, mobile traffic to libraries.iub.edu has increased by approximately 550% … and mobile traffic makes up about a percent and a half of our overall site visits. Plenty of room for growth!

Watch this space for some news relating to the Libraries’ mobile site in the near future. In the meantime, we’re always interested to hear your thoughts and comments on responsive design, ideas for our mobile site, or would love it if you have other examples of responsive sites you’d like to share with us.

Apple’s new education apps

For a graduate assistant in DUX, I’m actually a bit of a luddite when it comes to new technology.  My phone is not smart, my computer remains firmly planted on a desk, and my books are the kind that won’t crash when you spill coffee on them (a necessity, given my reading habits).  That said, when I read about Apple’s new iBooks Author software, I drooled a little bit.  iBooks Author works in conjunction with the iBooks 2 app, released by Apple in mid-January, to allow Joe Nobody to publish his very own digital book.  It’s clearly geared toward the educational community with an emphasis on textbook publishing, but ostensibly you can publish any kind of book your heart desires (yes, even that sci-fi novel you wrote when you were 16.  HarperCollins doesn’t know what it was missing).

No, I don’t harbor a secret desire to publish a textbook (or Zombie Vampires from Mars, even though it would have been an instant classic), but I do harbor a not-so-secret desire to see educational materials become more accessible.  Apple has teamed up with several prominent publishers to deliver textbooks that normally cost somewhere in the triple digits at much lower (dare I say reasonable?) prices.  Digital distribution makes good sense in the textbook market, where new editions come out every few years.  Who wants to drop another $200 because the editors added a new chapter and updated citations?  No one!  Just consider how much coffee $200 could buy.  iBooks Author further increases accessibility by enabling instructors to publish their own materials digitally.  I could see this technology easily taking the place of traditional course packs, which are expensive for the university to print, expensive for students to buy, and wasteful of natural resources (yay trees!).  All this with the fun of mixed media (embedded YouTube videos in my textbook?  Yes, please!) makes me think that edu-apps like iBooks and iBooks Author are indicative of the future of educational materials.

Caveat 1: As it stands, iBooks textbooks are only viewable on Apple mobile devices.  There seems to be some way to convert these files to PDFs so they can be viewed on other devices, but I’m a little fuzzy on the details and Apple’s documentation certainly isn’t helping me out on this front.  In the name of educational democracy, a work-around for students without iPads would need to be in place before the iBooks app is fully implemented in the classroom.

Caveat 2: There’s some lingering confusion about authors’ rights with regard to the content they publish and sell using the iBooks Author platform.  Check out this post from the New York Times technology blog and this article from the Telegraph to read about the two sides of the issue.

As a future librarian, my question is this: How can libraries get it in on the edu-app fun?  Here in DUX, we’re working daily to make our available resources more mobile-friendly.  What else can libraries do to reach students who increasingly learn digitally?  I’d love to hear your thoughts.

My Favorite App: Winter Survival Kit

Every so often, I sort through the apps on my phone and delete those that seem redundant (I really don’t need more than about three different weather apps, do I?) or outdated (do I still need the special app for the conference I went to six months ago? No!) or that I simply haven’t used more than once or twice since downloading them (hello, Wolfram Alpha). But there’s one that I’ve downloaded, yet never used, that I’m not going to delete – and that’s the Winter Survival Kit.

home screen of Winter Survival Kit app This app, developed by a team at North Dakota State (where they know from winter storms), is intended for drivers who may find themselves unexpectedly stranded due to a blizzard or ice storm. It includes instructions for preparing oneself – how to check your car before the bad weather hits, what to pack in an emergency travel kit – as well as a number of features that kick in when you touch the big red “I’m Stranded!” button. If you’ve input the capacity of your gas tank ahead of time, it will provide estimates for how long your fuel can be expected to hold out; if you’ve input emergency contact information it will offer that; and it will provide occasional life-saving reminders (such as telling you to clear snow from around your tailpipe to prevent carbon monoxide buildup). Of course, some of this information (contact numbers, as well as GPS and other data helpful in an emergency) is probably already available on your phone, but this app gathers it all together in one place so you can find it even if you are panicked. And it automates a few things, such as sending out auto-alerts to your emergency contacts.

All in all, a great app, and one I hope none of us will ever have to use!

Free; available for iOS and Android.

The Power of Informational Apps

An IU News Room Release last Thursday highlighted the work of Dr. Rob Potter, an Associate Professor at IU’s Department of Telecommunications. Potter and his co-authors in Australia conducted a study of 225 adults as they used unfamiliar “apps” on devices like Google Androids and Apple iPhones. The researchers found that, surprisingly, users found information-based apps more stimulating and engaging than mobile games. Furthermore, these apps were effective in influencing the users’ affiliations for certain brands.

“We found…that when you have an app that provides people with information, it is something they internalize and personalize,” Potter said. “You’ve invited the brand into your life and onto your phone.”

The researchers focused on retail-centric apps, like the Kraft app for cooking/entertaining tips and Target’s app for weekly ads and product reviews. However, the findings could have equally important implications for the information sciences. Libraries, too, have a “brand.” Until recently, it’s been stuck on dusty shelves of printed books, hard to access and annoying to deal with. Harnessing the power of apps, we could slowly change that stereotype and promote our services and resources as tools patrons find useful in their daily lives.

How can we do this with limited technology and manpower? After all, most libraries are not a Best Buy or a Gap Jeans, with billions to spend on sleek-looking software. But looking at it from the glass-half-full perspective, we already have a head start. Libraries are all about information. This study debunks the myth that we need to produce the next Angry Birds to distract users from the boring “thinking” stuff underneath. Users want information, and they want it quickly at their convenience.

At IU, we’re lucky enough to have access to indexing service apps for staff and students. As listed on our new mobile website, the EBSCO-driven OneSearch@IU allows Android and iPhone owners to make the most of our subscription databases while on the bus or waiting for a computer in the Information Commons, as do ScienceDirect and Naxos. Various freeware can also be found for the popular Google Scholar. Simply by promoting these existing resources, we could potentially increase the visibility and perceived value of the libraries to students and staff.

You can read the full study in the November 2011 issue of the Journal of Interactive Marketing, titled “The Effectiveness of Branded Mobile Phone Apps” (Volume 25, Issue 4, Pages 191-200; DOI: 10.1016/j.intmar.2011.06.001). Full-text is currently unavailable through our subscription, but you can obtain a preliminary copy of the paper by contacting Bethany Nolan at at 812-855-6494 or nolanb@indiana.edu.

Making Your Webpages Mobile-Friendly

Smartphones are everywhere, and their popularity is likely to continue to grow. A survey published in July by the Pew Internet and American Life Project found that 35% of American adults own a smartphone, and a fourth of them use it more often than their traditional desktops to access the Internet. More recently, Nielsen’s third-quarter survey similarly found that a third of the adults who use mobile devices own smartphones, and that proportion is inflated to 62% in the 25-to-34 age range.

Many of the students (and staff!) using our libraries’ resources are logging in with iPhones, Androids, and other palm-sized devices. Even if you have limited control over the layout of your webpages (you’re using the Content Manager, a blogging service, or templates, for example), there’s a lot you can do to make these users’ experiences as rewarding and painless as possible.

1. Test your webpages on mobile devices
The easiest way to find out how your webpage designs affect mobile users is to experience them yourself! If you don’t have access to a mobile device, Media & Reserve Services circulates an iPod Touch equipped with Safari.

2. Use a logical layout
Present the most important information to your users directly in the body of your webpage. Avoid busy right side boxes and dense blocks of text. Make sure your links on the main left menu are also available in the content; users may not notice the submenus opening off the tiny screen!

3. Minimize bandwidth
People buy mobile devices because they want information fast–they don’t want to wait all day for your figures to load. Most data plans also cap bandwidth per month, so help your users out by limiting the amount of data on your pages. Try not to embed long videos or link to large PDFs. If you have images, resize them before uploading to the server; don’t load an enormous JPG and scale it down in the HTML.

4. Limit Javascript
Widgets are all the rage, but resist the urge to use them instead of plain Jane text when you can. Users with touchscreen devices can’t hover over buttons to trigger drop-down menus. Your desktop may have plug-ins that aren’t available on certain phones. Fancy scripts also increase power consumption, which shortens battery life.

5. Go easy on the styles
A curly font may look lovely on your workstation, but be impossible to read when it’s shrunk down on a phone. Non-standard fonts may not be supported by many mobile devices. Mobile phones often have lower contrast and are used in less-than-optimal lighting conditions, so avoid custom-colored text that blends into the background. When in doubt, imagine what your webpage would look like as a small, blurry rectangle outside at night or in a dim restaurant.

For more comprehensive tips, see the W3C’s recommendations for Mobile Web Best Practices. Webcredible also offers a nice set of principles to apply in your webpage design.

Mobile Redesign – Usability Testing

Usability testing was an important part of our recent redesign of the IU Libraries mobile web site. Below are some of the things we learned by talking to users over the course of three usability sessions this summer.

The overall response to the site was very positive:

  • “Looks nice, is very clear and useful”
  • “Useful and cool, hours and locations especially”
  • “I’m impressed with how fast it is”
  • “I like that it looks like IU Mobile”
  • “I would definitely use this”

We also found some areas for improvement:

Problem: On the Home page, the labels “Find”, “IUCat”, and “News” were often confusing.

What we did: We merged “Find” and “IUCat” into one item named “Search Library Resources”. This was also made easier by the decision to change the homepage from an icon-based layout to a list layout (more room for labels). We also changed “News” to “Library News”.

Home Page Before & After

Problem: Users did not see the “All IUB Libraries” list option at the top of the Hours & Locations page.

What we did: We added a black header to the top of the page with the text “Browse All Libraries”.

Problem: The map on the “Hours & Location” page often confused users. They would not see the yellow and green icons to the right of the labels and didn’t know what the blue icon on the map meant. We wrongly assumed users would know that the blue icon was their current location and had not provided a key for it.

What we did: We moved the existing two icons to the left of their labels and added a new header directly above the map indicating that the blue icon represents the current location of the user. We also added pop-up windows to each icon.

Hours and Locations Before & After

The improvements resulting from usability testing made the final site much more usable and useful. Our future work will focus on expanding access to research tools on mobile devices, broadening the “How Do I?” section of the site, and improving the clarity of the “Hours & Locations” page with regard to the locations of services within the Herman B Wells library.