So much of information design is published on the web. Yet with the growth in mobile devices, information designers and webmasters need to address information presentation on these smaller screens.
That's where information design comes in. Information design uses "pictures, symbols, colors, and words to communicate ideas, illustrate information or express relationships visually (Emerson). It should not be a surprise that so much of information design products are published on the web. Likewise, information design also applies to any content delivered on websites. But with the shift to mobile, it is critical that designers consider new ways to convey their information across a variety of devices. "The Web" is no longer just about desktop browsers.
In November 2011, Nielsen reported that a wide majority of mobile phone subscribers owned a smartphone capable of displaying web pages. 64% of users aged 25-34 owned a smartphone, and about half of adults 18-25 and 35-44. This trend is increasing; at Morris, we estimate about 2/3 of our students have smartphones, a figure that is inline with Neilsen.
This increasing trend to mobile has practical effects on web sites. According to a Fall 2011 analysis of our incoming freshmen, 151 new students accessed their admissions application on a mobile device. Of those, 37 submitted. In a university advertising campaign on the StarTribune website, mobile traffic had the highest click-through rate as a percentage of all traffic.
Across all of higher ed, according to a 2012 Noel-Levitz report, over half of surveyed students have looked at a campus website on a mobile device - and half of those reported that a mobile website improved their opinion of the university. This trend is not just about students, of course, but about all web users. "The landscape is changing," according to Marcotte, "perhaps more quickly than we might like." In fact, mobile web usage is expected to outpace traditional desktop browsing in the next 1-3 years (per estimates by Walsh and Morgan Stanley).
In publishing information on the web, like in any information product, designers must keep three things in mind (this list taken from Ginny Redish, author of Let Go Of The Words):
- It's about making products work for people
- It's about people and their goals and tasks
- The way we organize, write, and design documents (or websites) can help or hinder people
Adapting information design to mobile must maintain that same focus. But the challenge is in the viewing. According to website w3schools, over 85% of desktop users employ a screen resolution higher than 1024x768. Yet mobile rarely exceeds that. The iPad2 only reaches 1024x768 and the iPhone uses only 960x640. And information product intended for a high resolution screen will not look right on the smaller display. To make products (such as websites) work for everyone, we must support mobile devices at the same time as the high-resolution desktops.
The preferred way to do this is by applying a method called responsive web design. The concepts of responsive web design is highly technical, but web designers can use a few methods to make pages responsive to the size of the screen. It's not about detecting the browser and delivering a different web pages; the key is creating a webpage that lets the browser deal with the content in a way that suits the size of the display.
One method is to shift content on a web page when it is displayed on lower resolutions. For example, if the screen is smaller, elements on a page may shift from a 6-column layout to 3-column. Or secondary navigation might move from the side to the top or bottom of the page. In shifting content, however, the web designer needs to prioritize the content, so the most important information is displayed first, where it is easier to find.
Other content might simply be hidden on smaller displays, to be revealed when the user clicks on an icon or does some other action. For example, navigation might be collapsed to a single icon, or callouts might be hidden until a user clicks on a button.
A third option is to simply remove content when the screen cannot support it effectively. Large navigation icons might disappear, leaving only the captions for navigation. Photos and other large images may be removed for the sake of space. Information designers tend to avoid removing content, but done with care, eliminating the content may make sense.
Using icons to replace text, for example, mirror's Ginny Redish's recommendation to "let go of the words" when writing for the web. Break up large content by topic, make effective use of visuals, etc. That's where you can use icons to leverage your web site.
But icons must be chosen carefully. Comprehension of icons differs based on age, according to research by Koutsourelakis and Chorianopoulos. In the extreme case, icons with high levels of abstraction may be difficult to understand. But icons that relate to real-life activities, and those where users may have previous experience, are most likely to be well received.
That's all very well, but information design (and good web design) is not just about creating information products - but in "finding the right way to design and deliver that information." Successful information designers must be aware of how that information will be viewed. And since the web is now mobile, websites need to accommodate mobile devices by default.
This changes how we view our websites. By Fall this year, we will roll out a new website design for the University of Minnesota Morris. Matt and Matt are working with Bryan and Melissa to create a design that starts with mobile devices, and extends to desktop browsers. This is a great example of responsive web design, and I'm very proud of the work we are doing here. Morris was the first campus in the University of Minnesota system to have a mobile-enabled front page, and soon Morris will be the first campus in the U of M system to have a fully-mobile website. Thanks to Matt, Matt, Rebecca, Brian, and Melissa for all their hard work!
