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.

Accessibility Tip: Header Tags

As good information practitioners, we all know to put “alt” tags on our images and make our text legible for users with disabilities. But one aspect of accessibility often overlooked by the producers of web content is the structure of individual webpages. We’re more concerned with the alignment of a paragraph under a title than we are the association of that paragraph to the title. We create long blocks of text separated into flat paragraphs, without marking where one section ends and another begins. If we do use header tags to mark pages and sections, we think of them as style elements: they make certain text bigger and more visible. But header tags are not merely decorative: they are an essential element that denote the organization and meaning of the content on your webpages to screen readers.

If you use font styles or sizes to mark your section headers, this is what the page looks like to a sighted user:

Page Title

Section 1
Text text text text text.

Section 2
Text text text text text.

It seems nice and hierarchical, with a clearly defined structure, doesn’t it? But this is how a screen reader processes it:

Page Title. Section 1. Text text text text text. Section 2. Text text text text text.

In order to find “Section 2,” the user has to wade through the rest of the page. Since all of the text has equal weight, they can’t use the handy features of their screen reader software to scan the page quickly for a sense of its structure and contents. However, if you mark up “Page Title” as header 1, “Section 1” as header 2, and “Section 2” as another header 2, users with screen readers could read the page the same way a sighted user would.

Beyond accessibility, proper structuring of webpages takes us one step closer to the semantic web we all love to talk about. <strong> means “strong.” <em> means “emphasis.” Neither of them mean “I start a new section.” This is what headers are for!

With this in mind, make sure your headers follow the proper order when you apply them to your webpages. Another issue that arises from thinking about headers as styling elements is that people are sometimes tempted to skip over <h1> and use <h2> or <h3> because they’re smaller and fit what the designers want it to look like on screen. This makes as much sense as putting a title in the “subtitle” field of a book record because it looks prettier that way in the online catalog! If you put an <h2> tag in your webpage, you must have an <h1> before it. Then you can use CSS or the “style” attribute to modify the font size and looks, e.g. <h1 style=”font-size:120%”>.

Note: In the IU Libraries Content Manager, the title you enter for your webpage (the “page name”) will always be in <h1>. Each webpage should have only one <h1>, so begin your page content headers with <h2> and go down the line.

For more information on structuring webpages with headers, see the W3C’s HTML Techniques for Web Content Accessibility Guidelines. The Accessibility and Usability Guide for Penn State also offers practical advice and examples, with nods to other common pitfalls in structuring HTML documents.