Big Type and Readability
Posted: May 30, 2012 | Author: Bohyun Kim | Filed under: design, usability, web | Tags: content, readability, text, type, usability, web, web design, website | 3 Comments »The Big Type
Jeffrey Zeldman published a post that explains his choice of big type in his website/blog last week. If you are curious about how huge the type is in his site, see below my screenshot (or visit his site: http://zeldman.com). It is pretty big. Compare it to any Web site or this current site of mine. Yea, the type is huge.
zeldman.com
He says people either hate or love the big type and the simplistic/minimalist layout of his site or just spends time processing them. I found myself loving it because hey, it was so fr**king easy to read without any other distraction in the site. As Zeldman himself says, “It’s over the top but not unusable nor, in my opinion, unbeautiful.” And in my opinion, being fully functional counts to a great degree in favor of beauty.
Readability
The strange satisfaction that I felt while reading the articles in his site set in the big type has led me to realize how hard it is to read the main content of any common web page. It is usually so hard that the first thing I do before reading any Web page is to increase the font size inside a Web browser (thereby also removing the top navigation and all other things on both sides except the main content out of my sight). Sometimes, I also use the ‘Print’ preview, just to read, not to print anything (since this removes all ads and images etc.). Also handy is a plugin like Readability. Zeldman’s site was the first site where none of these actions was necessary.
The Web design convention with must-have items such as a top navigation, header image, navigation on the left, ads and numerous links on the right forces us to take out those very items by manually manipulating the browser in order to make the main content simply readable! This is an irony that is more than fully appreciated by those who build and manage Web sites in particular. We (the universal we as Web workers) follow the convention as something canonical because we want to build a Web site that is usable and pleasant to interact with. But while interacting with any such conventional site, our own behavior reveals that we try to eliminate those very canonical elements.
It’s not that we can or should eliminate right away all those conventional items. They are useful for various purposes. But the point is that no matter how useful they are, those things are also great distractions in reading. In a Web site or a page where reading is the primary activity, the readability of its content is a greater problem than other sites or pages. Zeldman’s Big Type experiment would be simply bizarre if it is applied without any modification to, say, the WSJ homepage. But it probably is not a bad idea to apply it to an individual article page in the WSJ Web site.
Zeldman’s experimental design with the big type reminds me of what the application, Flipboard, does. (See below the demo video if you are not familiar with the Flipboard app.) It strips off elements that are distracting to reading and re-formats the page in a way that is attractive and functional. Where the design fails to help one to read a Web page, an app comes to rescue.
Now you may ask how all these relate to libraries. My question is: (a) how much of the main function of a library Web site is reading, and how much is not, (b) what parts of a library Web site is to be read and not, and (c) how we can balance and facilitate those different uses of a library Web site. Rarely a Web site is designed solely for reading, but reading is an important part of almost always a certain section of any Web site. So this is an issue that is worth thinking about and matters to not only library Web sites but also any other Web site. Just asking these questions could be a good step towards making your Web pages more usable.
In the next post, I will discuss how we read on the Web and how to design and serve the content for the Web in a user-friendly manner.
A co-operative model to circulating technology collections
Posted: May 29, 2012 | Author: Jim Hahn | Filed under: management, technology | Tags: circulating technology, startup | Leave a comment »Circulating technology collections are seeing increased popularity in academic settings. Devices like the iPad are designed to be refreshed about every year. Observers of the consumer electronics market will note that many of the devices so coveted are designed for obsolescence. This planned obsolescence poses problems for collecting and circulating technology.
Technology is a different type of resource than a book. Librarians know how to preserve books, but in general, the preservation and conservation of electronics is related to a rapidly changing marketplace. Considering the rate of obsolesce and the game we continually lose in the purchase of consumer electronics, what rental models do libraries need in order to maximize collections budgets in this area?
Circulating technology at the Undergraduate Library, University of Illinois at Urbana-Champaign
The Nash Equilibrium may be instructive for co-operative models applied to library circulating collections. Two or more libraries that know each other’s choices can cooperate and still pursue individual best interests. In general, this works because each cooperating group doesn’t change its approach based on what the other agent is doing; it assumes the other will continue its maximally beneficial strategy. This is germane to the collection of tech in circulating collections if we consider that no library is entering into the consumer electronics market alone; rather, we are all entering into the same problem area.
We all have a limited collections budget and we are all highly concerned with getting the most out of our shrinking collections budgets — all while innovating and keeping pace with a changing digital landscape.
One non-profit business model I’ve pondered is setting up a type of library co-operative where libraries (the set of all libraries that collect technology for loaning to patrons) do not actually purchase any of the electronics that are planned to become obsolete but rather, by size of their co-operative set are able to pool resources into rental paradigms. We would be able to do this through an open online interface that showed what individual libraries wanted to offer, and what they were able to contribute in order to rent the given technology.
On the co-op’s website, a library or other educational institution would indicate they would like to rent consumer electronics equipment, once the co-op hits a profitable/break-even threshold for renting, then all libraries will get the contract to rent. The reason why this works is because all libraries have chosen to rent for a set period at a set price using Nash equilibria to modulate the rental threshold algorithm.
When the renting contract expires, the co-op can (a) get our rentals back, and sell wholesale, but not as a rule keep any inventory, or (b) if the library (rentee) thinks the technology isn’t obsolete by the time the contract ends, they can purchase at a marked down rate. This is not completely without precedent, since many libraries use a rental option for their new release books.
Such a tech cooperative helps to mitigate the risk of consumer electronic obsolescence for libraries – - there isn’t any purchase, except as managed through the cooperative. And since we know all too well that consumer electronics are built in with designed-obsolescence, it doesn’t make financial sense for a library or educational institution to purchase an item that will not be in demand later, or will only be useful for a short time.
Is this the year for a library technology co-op? Is ALA a place that could manage such an operation; a Tech Co-op housed within LITA? Would your institution participate in such a rental paradigm?
Design 101: design elements, part 1
Posted: May 23, 2012 | Author: Lisa Kurt | Filed under: design, library design, marketing, Uncategorized, usability | Leave a comment »Previously, I wrote about the importance of design in libraries and the design process. Next I’d like to delve in deeper and talk about the elements of design. These elements, or components, are the pieces that make up a whole design. Design elements work together to create a successful design that communicates to your audience if used well.
Most designers would agree, the elements of design are essentially the following:
- color
- shape
- line
- space or composition
- value
- size
- texture
I am also going to add typography. Though not traditionally an element, choosing type carefully and in some cases even showcasing it within your design, can transform something that meets the status quo into a higher quality design. In carefully crafting your design with an understanding of the elements, your design may be considered not only professional, but memorable.
Rather than talk about all of the elements in this post. I’m going to focus on three to get you started and then I’ll come back to typography and perhaps others in future posts.
With color, composition, and size down, you can create a strong design whether you are making a flyer, sign, promotional materials, or webpage. To create a design considered high quality, nuanced, or sophisticated by design standards, you will need to push further and understand all of the elements. This post is just to get yourself started and able to make something professional that will add to your credibility as a professional organization.
http://frankandjan.com/WIT/?tag=comic-sans
Some have asked me in the past, what credibility has to do with design and libraries and it’s a good question. Without delving too deeply, you can see the above photo where someone has made a simple sign using the typeface comic sans and in response someone calls them out for being unprofessional in using it. Honestly, I have mixed feelings about this image but it still illustrates a valid point: in creating bad design or making poor design choices, you may look unprofessional to your audience. Good design will build trust and credibility with your users. I’ll be including examples throughout this post to show different elements and where they work.
Color
Starting with color, there is an enormous amount of resources on color theory and designing with color. There are scholars who have made a living on researching color alone. To have a successful design, you don’t need to be a color expert but it helps if you have some basics down to understand how color works and doesn’t. It’s a choice to include color in your design- plenty of successful designs are black and white or have minimal color and it’s part of the aesthetic and the message they want to convey.
Sometimes one color is enough; this is called a monochromatic color scheme.
Employing the use of opposite colors on the spectrum together is complementary.
There are numerous ways of combining colors and using them effectively in design. When using color the most important piece to keep in mind is using color consciously, thoughtfully and being aware of individuals who may have vision impairments. You can use many colors in a design, but if not done so with care, it may not achieve the look or convey the message intended. In some cases, misuse of color may not be readable. There are a number of resources available that can assist in putting together a good color palette as well ensuring your colors are accessible.
Composition
Composition is where the pieces lay on the page in relation to the page sides, edges and other pieces. Composition may include: an illustration or a logo, title text, headlines, or a call to action, and smaller elements such as a block of text or links. There is a decision to be made about what the most important elements are. Not every element should have the same amount of weight in importance.
In laying out the composition, you’ll want to pay attention to what is referred to as alignment. Often in design you’ll see a strong left alignment where several elements begin at the same starting point on a page; this is fairly conventional and a good choice. Left alignment is certainly not the only successful way to create a composition, but it rarely fails. As the design is being formed it’s good to think of the elements and pieces you are working with abstractly. Imagine them as puzzle pieces or building blocks. Many designers use methods such as the grid, wireframing, or abstract sketching to get a rough sense of the composition. The grid is a good place to start and is a current design trend. My best advice is as you build together the pieces, keeps things somewhat loose and flexible so that you think of the overall page and the pieces in relation to each other, rather than get bogged down by one piece.
http://www.jessicahische.is/designing
On Jessica Hische’s website, she balances a lot of information on each page without losing the quality of the overall design. She showcases portfolio pieces and allows those designs to shine while the composition, typography, and color compliment her efforts and don’t compete for attention. To the right of the large image, Hische aligns the subheading and links to the left, along with the various elements below the link list. Organizing the site in this way creates order and contributes positively to the overall design. Hische devotes a good deal of the composition to white space. Doing so allows the viewer’s eye to rest and directs them back toward the focus, in this case the photo and information on the portfolio piece she is showcasing.
Size
Size is related to composition in that the size of one shape or block of text will relate to others around it.
So, for example, if you have a title, subtitle, author, and publisher and you want to emphasize the title above everything else, then the title will naturally be larger in size. Next, you may want the subtitle to be less than the title but larger than the author or publisher. In some cases, you may want to make the author name the largest element- these are all design decisions relating to size that will convey different things to the audience who sees it.
http://trentwalton.com/2011/05/10/fit-to-scale/
On Trent Walton’s website, he’s making a point about responsive web design (a topic I hope to delve into in a future post). To communicate his message, he’s using size and color. The bold color and size of the title, Fit to Scale, captures viewer’s attention. There is also variation in size within the text block, drawing out the first sentence for emphasis. The navigation is also a different size, easy to see when it’s needed but not in the way of the message of the page.
Putting design into practice
Now that we’ve gone over some basics, I recommend exploring what designs out there speak to you. Develop a collection of designs you like; whether they are websites, flyers, posters, etc., if there is something you like about the design then study it. Much like writers who read a lot to become better writers, designers will study good design and analyze what makes it good in order to become a better designer.
Get feedback from other designers or others who understand design. There are a number of excellent portfolio websites out there that have extremely rich communities willing to offer a critique in exchange for a critique. These are excellent resources that are invaluable to designers, as meaningful feedback is very difficult to find:
Look more deeply into what elements the designer has employed to make the design successful and ask yourself some questions: what colors did they use? what is the balance between the different colors used? is there whitespace? how is the composition set up? can you identify alignments? how did the designer break apart size?
If there is a design you don’t like it is worth exploring why you don’t like it. Ask the same kinds of questions. What makes it fail to you? Figure out what it is that makes you react strongly
This is a way to get yourself to really think in a design way, observe, and subsequently learn about design. In seeing, you will be a step closer to designing well.
If you can recognize, study and thoughtfully employ these elements and make them work together harmoniously you can make a good design. Keep things simple- better to err on the side of restraint than give too much.
Don’t forget that in designing, you are communicating. Think about the message. What do you want to say and how can you attempt to convince your users to believe you? Are you earning credibility? Trust? What kind of atmosphere are you creating?
Design is an opportunity to give our users a positive experience and perhaps even to delight them.
Real World Semantic Web?: Facebook’s Open Graph Protocol
Posted: May 9, 2012 | Author: Margaret Heller | Filed under: linked-data, web | Tags: facebook, linked data, open graph, semantic web | 3 Comments »
Original image available at https://developers.facebook.com/docs/opengraph/
Librarians need to understand what the semantic web is and how to use it, but this can be challenging. While the promise of the semantic web has existed for over a decade, to the uninitiated there may not seem to be many implementations that are accessible to the average person.
One implementation that most people use daily is Facebook’s Open Graph Protocol, which is their version of the semantic web. This is a useful example to illustrate the ideas behind the semantic web and linked data. Libraries and other cultural institutions want and need to make their data open, and Facebook’s openness is highly questionable, so it will also illustrate some of the potential problems with linked data that isn’t open. There is much great work being done in the library world with the semantic web and linked data, which will be addressed in more detail in further posts.
The Semantic Web and Linked Data
The “semantic web” describes a web where data is understood by computers in some of the same ways humans understand it. Tim Berners-Lee illustrates this wonderfully in his 2001 Scientific American article with a future in which the diagnosis of a family member with cancer is made easier by the smart device which can find the most appropriate specialist in a convenient location at a convenient time, with very little work on the part of the searcher. This is only possible, however, when data is semantically meaningful. Open hours for a doctor (or a library) written on a website mean something to a human, but very little to a computer. Once those hours are structured in a way that can be made meaningful, the computer can tell you if the doctor’s office is open–and if it has access to your calendar, what you have to cancel to go there.
Linking data takes this implementation a step further and makes it possible to connect data, to avoid, as the W3C says “a sheer collection of datasets”. Berners-Lee outlines the steps that need to be followed to make linked data in a 2006 post, namely to use uniform resource indicators (URIs) as names, to present those URIs in the hypertext protocol, use a standard format such as RDF to present useful information, and link to additional URIs with related information. A 2010 follow-up points out that to be linked open data, the data must be presented with a license that allows free unimpeded use, such as the Creative Commons CC-BY license. Such data doesn’t have to be structured in any particular way as long as it’s open. He says that “…you get one (big!) star if the information has been made public at all, even if it is a photo of a scan of a fax of a table — if it has an open licence.” But “five-star” linked open data meets all of the above requirements as well.
Facebook’s Open Graph Protocol
Moving into a different world, let’s consider what the semantic web and linked data look like at Facebook. First, it is interesting to consider what Facebook was before it was semantic. When Facebook first started in 2005, you could make a list of things you “liked”. You might have said you “liked” the movie Clueless and “liked” running, but these were just lists that would let others in your college classes know a few facts about you next time you saw them in class or at a party. In theory you could use these lists to find others that shared your interests, but this required a person to understand what interests matched each other.
But starting in 2010 these “likes” took on a real semantic meaning. Suddenly “liking” the movie Clueless meant that, among other things, the owners of the “Clueless” identity on Facebook could directly send you marketing announcements. In addition, you could “like” content outside of Facebook completely as long as that website used the correct markup on the page to speak to Facebook, and thus link together content with people. Unlike Facebook’s earlier scheme of Beacon, it was easier to understand how you were exposing yourself to advertisers and to control privacy and sharing, though this still left people troubled.
In late 2011/early 2012 Facebook opened up this system even more to third party developers, which went along with the new Facebook Timeline. Now any person could perform any verb with any application. So “Margaret read a book on Goodreads” or “Margaret listened to a song on Spotify”–real world actions–turn into semantically meaningful statements on my Facebook Timeline. As long as the user authenticates the application, the application can access the necessary information to grab the information about the object from the webpage and show the user’s interaction with it.
Developing for the Open Graph
The Open Graph protocol was developed based on the idea of the “social graph”, which represents the connections between people and the types of relationships they have with each other. In the Facebook universe, this includes the relationships people have with other types of entities, such as media, products, and companies. It was developed by Facebook to make a quick and easy way for websites to include semantically meaningful data. It is based on the standard RDF specification for linked data and includes basic and optional metadata, as well as different types of structured data about objects, of which music and videos are the most well-defined.
To see the Open Graph in action, simply replace “www” with “graph” at the beginning of any Facebook page. For instance, let’s take a look at my own library’s information at http://graph.facebook.com/rebeccacrownlibrary. You can see that this page describes a library, and get our phone number, physical location, and open hours. Most important, a computer viewing this page can understand this information. For complete details, see the Graph API documentation–even for non-developers this is interesting; for instance, find out how to get the URL for your current profile picture to embed in other sites. To get access to this information, you can use various methods, including the Facebook Query Language.
Of course, you only get access to this information if it’s explicitly made public by the page. For anything beyond that, applications must use authentication in order to access more. Linking information from outside of Facebook is one way only–you can’t pull very much at all out of Facebook into the open web. Note that, for instance, Google searches will pull up only basic information from a Facebook page rather than any content that page has posted.
Outside of Facebook–How “Open” is the Open Graph?
It is precisely this closed effect that has a lot of people worried about Facebook’s implementation of the semantic web. Brad Fitzpatrick described the problems in 2007 inherent in implementations of the “social graph” on the web, which was that standards were quirky, non-interoperable, and usually completely walled off. The solution would be a Social Graph API that would create a social graph outside of any one company and belonging to all. This would allow people to find friends and connections without signing up for additional services or relying on Facebook or any other company. Fitzpatrick did later create a Social Graph API, which Google recently pulled out of their products. Some of the problems of an open social graph are familiar to librarians: people are hesitant to share too much information with just anyone about with whom they associate, what they like, and what they think (Prodromou). The great boon for advertisers in social networking services is that inside walled gardens with reasonable privacy controls is that people are willing to share much more information. Thus the walled garden of Facebook, inaccessible to Google, means that that valuable social data is inaccessible. It is perhaps not coincidental that around the same time Google stopped supporting the open Social Graph API that they released the API for their own social networking service Google Plus.
Concerns with the Open Graph remain that it is not actually open, and in particular that it uses the open standard of RDF to ingest but not share content (Turenhout). The Open Graph Protocol website states that a variety of big websites are publishing websites with Open Graph markup and it is ingested by Facebook (of course), Google, and mixi. It remains unclear how much this particular standard will be adopted outside of Facebook.
Conclusion
Whether or not you think you have any idea what linked data is, any time you click a “like” button on a website or sign up for a social sharing app in Facebook, you are participating in the semantic web. But every time that data link goes behind a Facebook wall, it fails in being open linked data. Just as librarians have always worked to keep the world’s knowledge available to all, we must continue to ensure that potentially important linked data is kept open as well–and with no commercial motive. The LODLAM Summit has outlined and continues to work on what linked open data looks like for libraries, archives, and museums. The W3C Library Linked Data Incubator Group released its final report in fall 2011, which provides a thorough overview of the roles and responsibilities of libraries in the world of linked open data. There is a lot of possibility around this area right now, and the future openness of the world wide web may very well depend on action taken right now.
In a future post, we will examine some specific examples of work being done in the library world around the semantic web and linked data.
Works Cited
When Browsing Becomes Confusing
Posted: May 7, 2012 | Author: Bohyun Kim | Filed under: usability, web | Tags: browsing, list, navigation, web design | 2 Comments »During the usability testing I ran a while ago, there was one task that quite baffled at least one participant. I will share the case with you in this post. The task given to the usability testing participant was this: “You would like to find out if the library has a journal named New England Journal of Medicine online.”
The testing begins at the Florida International University Medical library website, which has a search box with multiple tabs. As you can see below, one of the tabs is E-Journals. Most of the users selected the E-Journals tab and typed in the journal title. This gave them a satisfactory answer right away. But a few took a different path, and this approach revealed something interesting about browsing the library’s e-journals in the E-Journal portal site which is a system separate from the library’s website.
Browsing for a Specific E-Journal
1. In the case I observed, a student selected the link ‘Medical E-journals’ in the library homepage above instead of using the search box. The student was taken to the E-Journal Portal site, which also presents a search box where one can type in a journal title. But the student opted to browse and clicked ‘N.’
2. The student was given the following screen after clicking ‘N.’ He realized that that there are lots of e-journals whose title begins with ‘N’ and clicked ‘Next.’
3. The site presented him with the following screen. At this point, he expressed puzzlement at what happened after the click. The screen appeared to him the same as before. He could not tell what his click did to the screen. So he clicked ‘Next’ again.
4. He was still baffled at first and then gave up browsing. The student typed in a journal title in the search box instead and got the match.
Lessons Learned
A couple of things were learned from observing this case.
- First, this case shows that some people prefer browsing to searching even when the search could be much faster and the search box is clearly visible.
- Second, a click needs to create a visible change to prevent a user’s frustration.
- Third, what is a visible and discernible change may well be different to different people.
The first is nothing new. We know that some users prefer to search while some prefer to browse. So both features – search and browse – in a Web site should work intuitively. In this example, the E-Journal portal has a good search feature but shows some confusing aspect in browsing. I found the change from step 2 to 3 and step 3 to 4 somewhat baffling just as the student who participated in the usability testing did. I could not discern the difference from step 2 to 3 and step 3 to 4 right away. Although I was familiar with the E-Journal portal, I was not aware of this issue at all until I saw a person actually attempting to get to New England Journal of Medicine by browsing only because I myself have always used the search feature in the past.
But, when I showed this case to one of my colleagues, she said the change of the screens shown above was clear to her. She did not share the same level of confusion that the student experienced. Also, once I had figured out what the difference in each step, I could no longer experience the same confusion either. So how confusing this browsing experience can vary. I will go over the process one more time below and point out why this browsing process could be confusing to some people.
The student had difficulty in perceiving the change from step 2 to 3. The screen in step 3 appeared to him to have unchanged from step 2. The same for the screen in step 3. from step 4. Actually, there was a change. It was just hard to notice to the student and was something different from what he expected. What the system does when a user clicks ‘Next,’ is to move from the first item on the sub-list under N to the second item (N&H-Nai -> NAJ-Nan) and then again from the second item to the third item (NAJ-Nan -> Nat-Nat). This, however, did not match what the student expected. He thought the ‘Next’ link would bring up the sub-list beginning with the next of the last entry, ‘Nat-Nat,’ not the next of the currently selected entry. The fact that the sub-list shows many ‘Nat-Nat’s also confused him. (This is likely to be because the system is bundling 50 e-journals and then extract the first three letters of the first and last journal in the bundle to create items on the sub-list.) A user sees the last item on the sub-list in step 3 and 4. stay the same ‘Nat-Nat’ and wonders whether his clicking ‘Next’ had any effect.
Making browsing a large number of items user-friendly is a challenge. The more items there are to browse, the more items the system should allow a user to skip at once. This will help a user to get to the item s/he is looking for more quickly. Also, when there are many items to browse, a user is likely to look for the second and third category to zoom in on the item s/he is looking for. Faceted browsing/search is an effective way to organize a large number of items so that people can quickly drill down to a sub-category of things which they are interested in. Many libraries now use a discovery system over an OPAC (online public access catalog) to provide such faceted browsing/search. In this case, for example, allowing a user to select the second letter of the item after selecting the first instead of trudging through each bundle of fifty journal titles would expedite the browsing significantly.
What other things can you think of to improve the browsing experience in this E-Journal portal? Do you have any Web site where you can easily and quickly browse a large number of items?
** Below are the screens with the changes marked in red for your review:
2′.
3′.
4′.
