Wireframing with Mockflow

Recently I needed to make mockups and wireframes for a redesign of a website. After using some other cumbersome software, I stumbled upon Mockflow. This website contains an application for the creation of mockups and wireframes. Mockflow can be used for free for up to four pages, or through a paid $59 yearly subscription with unlimited mockups.

I only used the free version of Mockflow, but I liked this application most for its intuitive interface and ease of use. From the beginning I was able to use my Gmail account to log in instead of making another separate account. There are numerous different components and styles to add to the wireframe. These elements can be resized and edited down to the color and line size.

Mockflow Interface

All of the components are drag and drop, making it easy and fast to rearrange the page design. The application also had a handy auto-save feature in case the page is accidentally closed. After a design is complete, it can be exported or saved to access at a later time. With the free version, there is also an option to collaborate with another user. The paid version allows for unlimited collaborators.

The following is an example of a completed mockup. This particular example took me less than fifteen minutes to create. I’d highly recommend this application for wireframing or mockup projects.

Example Mockup

Tagxedo, a Word Cloud Program

I’ve recently been using various word cloud programs to analyze interactions from our online chat service and reference desk log. I’ve been comparing word clouds from different points in the semester to find trends or anomalies in the questions being asked at both service points.

After exploring many different types of word cloud programs, I’ve found Tagxedo to be a favorable option for the flexibility in design and the ease of file creation.

The homepage includes several options for creating a word cloud. For this example, I decided to analyze the content of this blog, so I put the link in the (1) field.

For past projects, I had a text file full of words, so I clicked the “start now” link and was able to copy and paste those words into a blank text box.

After the cloud is initially created, there are numerous design options of the left sidebar. This includes color, theme, font, orientation, and layout. The cloud can also be morphed into various shapes, like an apple or word bubble.

Through the “Layout Options” link, the user can find a count of the most common words and choose to exclude any of those words from the cloud. I excluded a few words, such as ‘www’ and ‘edu’ from the following cloud.

After the cloud is finalized, the user can export the file in various sizes and as a .jpg, .png, or imgur.

Web Accessibility in the Library, Part 2

Thanks for joining me again!  If you are just checking in, we’ve been discussing a lot about pie as well as some tools you can use to evaluate the accessibility of an online library resource you want to offer in your collection.  We covered heading structure, unique links, and color contrast in Part 1 and we’ll continue with 4 more accessibility issues that you can evaluate using Firefox plug-ins.

Alt Attributes on Images

Why Evaluate:  Providing alt attributes on images (literally, the alt=”something” inside of an <img> tag) puts text in place to describe the image.  This is useful for screen reader users who can’t see the image so they know why it’s included in the content.  Alt attributes on images are also useful for everyone.  In the case where something goes wrong on the Internet (I know, what could go wrong?) and images won’t or can’t load, the text from an alt attribute shows in the place of the image on the page, giving any user in this situation information about the image and why it is included in the content.

Tool to use: Web Accessibility Evaluation Tool (WAVE) (plugin for Firefox)

WAVE installs as a toolbar and is available under the Tools menu on your browser after installation (Firefox restart required).  This tool, from the WebAIM group, does a pretty good job of identifying multiple accessibility issues, including missing alt attributes on images.  Click the “Errors, Features, and Alerts” button in the toolbar and the page you are viewing in your browser will be reloaded showing various icons all over the page.  The ones you want to watch out for are icons in red.  Mouse over any of the icons and you will see information about the error (red icon), feature (green icon), or alert (yellow icon) that is indicated for the element the icon is near on the page.  Missing alt attributes are indicated by a red icon with a white diagonal slash.

Picture of pie from Wikipedia ‘pie’ entry showing WAVE icon for missing alt attribute.
This pie is sad because it has no alt attribute. Or whipped cream.

If you see these, you’re probably on a page that doesn’t even have valid HTML and the likelihood that the page is accessible has just plummeted.

Screenshot of Wikipedia ‘pie’ entry with WAVE icons.
This is your Wikipedia pie on WAVE. Any questions?

TIP:  To return to the original view of the web site without the lovely WAVE icons, use the “Reset Page” button in the toolbar (also available under the Tools menu for WAVE). Reset Page button from WAVE toolbar.

Continue reading “Web Accessibility in the Library, Part 2”

Web Accessibility in the Library, Part 1

Julie Hardesty is the User Interface Design Specialist in the Digital Library Program, a partnership between the Libraries and University Information Technology Services at Indiana University.  She is also located in Wells Library, but not within pie-throwing distance, unfortunately.  She does like pie, though.  Julie is a huge fan of web accessibility and generally making things on the Internet easy to understand and use.  She is reachable at jlhardes@iu.edu.

Would you know how to tell if an online resource offered in your library is accessible for screen reader users or keyboard-only users or users on mobile devices?  Many vended online library resources suffer from inaccessibility and, as a result, a lack of usability for anyone who tries to use them, regardless of the device used for access.  As the gatekeepers to scholarly information at Indiana University, we have the power to make choices and recommendations that will improve the access of our online resources as well as the overall experience that is discovering and using information at IU.  The following are seven ways to take stock of the accessibility of an online resource (and the tools to help you measure that stock).  Consider using these tools the next time you are reviewing a resource for purchase or recommending a resource to conduct scholarly research.  Disclaimer (or support): these tools are only suggestions – there are others available but these are the tools I like to use.

ALA Accessibility Challenge:  If you are going to ALA this month in Anaheim, California, ask a vendor or two on the exhibit floor about the accessibility of their products.  And don’t take a VPAT for an answer (it’s just a form, it does not guarantee that what they are currently trying to sell you is, in fact, accessible).  Ask about headers and unique links and form labels and color contrast for the site they have on display in the exhibit (see details below).  These are things that affect accessibility and anyone trying to sell you a web site should be able to discuss them.

Heading Structure

Why Evaluate: The list of headings (h1 – h6, in HTML lingo) is a shortcut that screen reader users can use to “scan” the page for content, similarly to how a sighted user would scan a page.  Arguably, a lack of heading structure on a page can make things difficult for a sighted user to make sense of the content as well.  If headings are considered within the content, the content is more likely to be broken up visually and the focus for the page will be more obvious.

Tool to use: HeadingsMap (plugin for Firefox)

HeadingsMap for Firefox will appear under your Tools menu in the browser once installed (Firefox restart required).  Triggering this plug-in will open a column on the left side of the browser window showing a hierarchical list of headings on the page.  Anything in red/pink indicates a heading that is out of order.  This tool makes it very easy to see the headings and their hierarchy and any potential problems.

Headings list shown in HeadingsMap for Wikipedia ‘pie’ entry.
Pie might be important here.

Continue reading “Web Accessibility in the Library, Part 1”

You say “iPad,” Google Analytics says “iOS”

Given that we’ve held a couple of workshops on using Google Analytics in the last couple of weeks, I thought I’d share an article about a recent change in how Google Analytics tracks Apple devices – logging is no longer broken out by device (iPhone, iPad, iPod Touch) but instead will be noted under a catch-all category of “iOS.” The change took place on May 29th.

What does this mean for the average Google Analytics user? Be aware that data-sets spanning that date (May 1 – May 31, for example) are going to have numbers and displays that look a little bit funky because of the change as they sort of “bump over” from one measure to the other. Going forward, it means we will all have a sense of overall Apple-device traffic to our sites, and if one is interested in determining which Apple devices, the best way to do that will be through looking at screen resolution reporting (logged under Audience -> Technology -> Browser & OS).

AND – if you’re really geeking out on Google Analytics right now, you might take a gander at these two case studies on how PBS and the San Francisco Museum of Modern Art have been using Google Analytics. We’re always interested to see discussions of GA usage specific to nonprofits.

Thanks, Anne, for the tips on the articles.

Don’t Get Stressed by RSS!

RSS feed iconA recent post from Prof Hacker – the Chronicle of Higher Education’s teaching and technology blog – discusses the challenges of intentional reading online. The author suggests that RSS feeds, in addition to being a stellar way of keeping up-to-date on your favorite Digital User Experience blog, might have the unfortunate side-effect of contributing to information overload.

This got me thinking about the ways in which we use RSS feeds and similar information aggregators. In theory, these tools are intended to help us filter out extraneous content and focus in on the good stuff. Although they might not be able to prevent the online avalanche of information, at least they tailor the avalanche to our interests. In practice, however, RSS feeds may actually amplify our anxiety over all the stuff we can’t devote our attention to. I have more than a few feeds in my Google Reader with 1000+ unread items that niggle at the edges of my conscience. They serve only to remind me of all the articles I’m not reading; of all the potentially brain-expanding tidbits that I’m passing up in favor of checking Facebook just one more time. I’m getting anxious just thinking about it! And I know I’m not the only one with a somewhat antagonistic relationship with their RSS reader.

So how do we put ourselves back in the RSS driver’s seat? Prof Hacker suggests some rigorous pruning. I would like to second that sentiment. Subscribing to a feed does not put you under any obligation toward the information presented there. And if you chose to subscribe, you can also choose to unsubscribe. RSS feeds are wonderful tools that should help us streamline the flow of information, not intensify the data deluge. As seasoned internet users we are accomplished scanners, but every once in a while taking the time to read selectively and deliberately might be just the ticket to a more meaningful online experience.

Despite the potential drawbacks, I can’t emphasize enough how valuable RSS feeds are for managing online reading. I subscribe to all manner of feeds that support both my personal and professional interests, making it easier to access information that’s important to me. If you’re not familiar with RSS technology and are looking for a good place to start, check out this easy to understand video.

Writing for the Web: Tip o’the Week

I recently stumbled across a pretty good conference presentation about writing Web content, given by writer/information architect Steph Hay last year in Dusseldorf. (Isn’t technology great? There’s no way I could have attended a conference in Dusseldorf, but I can watch the video!) I thought this might be of interest to folks who attended my “Writing for the Web” presentation at the Libraries’ In-House Institute, or those who thought about it but chose another presentation instead.

In the presentation, Hay notes that the three elements of compelling web content are focus, credibility, and consistency. She also says that in order to fulfill these goals, content should be meaningful, helpful, and results-oriented (there is a “call to action” involved and the user knows what will happen if they take the suggested action). Those are all good points, and she elaborates on them somewhat in her presentation – but the tip that really stood out for me was this one:

Rewrite anything that sounds ridiculous when read out loud.

Now, as a poet I’ve done this for years – when revising a poem I always, always read it out loud to myself (and yes, my cats think I am a nut who walks around the house muttering to herself all the time). But I will admit that I never actually thought about doing this for web content, and it’s a rather brilliant idea. Not only will it help you to identify tone that isn’t quite right – too wordy, too stuffy, too flip – but it will also help you to typos.

Wait. I just read that out loud. It will also help you to IDENTIFY typos. Yeah. See? It works!

So give it a try, and let me know what you think…

You can view Steph Hay’s full 34-minute presentation here (it’s pretty engaging), or go to http://vimeo.com/34840666

The Facts About FAQs

There are many different ways that libraries can provide help and guidance to patrons in finding the information they’re seeking online. Web 2.0 applications, such as wikis and blogs, have become increasingly popular for this purpose. These tools deliver information about library resources and services while allowing users input via comments or (in some cases) editing privileges. Another way to help online users is via chat services, available now in many academic and public libraries. Instant messaging allows users to receive feedback and advice almost immediately with all the context and messiness of their question in mind. This is particularly useful for less common questions and unique situations. But by far the most ubiquitous online help resource is the FAQ.

 While the FAQ does not have the personal touch of an instant messaging service or the collaborative features of a blog or wiki, it has some distinct advantages. First, the large majority of users are familiar with the FAQ format. Many websites, whether commercial, personal, or informational, have an FAQ section. So if your patrons have used the internet before, they’ve most likely encountered at least one FAQ. Second, unlike a chat service, it does not require library staff to be immediately available. Although maintenance is a must (as will be discussed in further detail below), the FAQ is an independent animal that can, if properly constructed, be trusted on its own for a little while.

That said, there are many situations in which an FAQ is not appropriate and there are an infinite number of ways to execute an FAQ poorly. In this A List Apart article, R. Steven Gracey is particularly critical of the FAQ. It’s not all condemnation for this universal help tool, however. Gracey also gives some excellent pointers on how to make an FAQ effective and (gasp!) helpful for users. When done right, the FAQ can be a valuable tool for library websites that supports good content by making it discoverable to users. Below I enumerate some points made by Gracey, and a few of my own, on how to create an FAQ that is not a crutch for bad web content, but a scaffolding for good web content.

  • Include actual questions. If a real person has never asked some variation of the question, it probably doesn’t belong in your FAQ. After all, FAQ stands for “frequently asked questions,” not “questions I really think my users want to know, but they’ve never asked because they’re just too darn shy.”
  • Make it easy to find. If your FAQ isn’t findable, you’re in trouble. Big trouble. People are looking for the FAQ because they can’t locate the information they’re seeking. If the FAQ is difficult to find, you will have grumpy users.
  • Keep it manageable. The point of an FAQ is not to document every fact that can be found on your website. A scan of 112 academic library FAQs done at the University of Notre Dame revealed that some library FAQs had as many as 400 questions included. That’s too many. Period.
  • Maintenance! Seriously. If your collections have changed, or if you’ve had turnover in your staff, of if you’ve moved the copy machines, or if the sun has risen, there’s probably something that’s out of date on your FAQ. Update and weed frequently. Add when needed.
  • Make it searchable OR sort by category. No one wants to look through all 400 of your questions to find the answer they’re looking for. Allowing users to search or to scan categories makes the process a whole lot faster and less frustrating.
  • Assume the user won’t find her answer. Never suppose your FAQ can address every question. Provide a link or contact information somewhere on the FAQ page where the user can go for further help. In Libraryland, this will most often take the shape of a link to the chat service (if available) or an email address for a reference librarian.

This list is by no means comprehensive, and it is largely a product of my own experience with FAQs, rather than any kind of authoritative study. Questions (frequently asked, or otherwise) and comments welcome!

Image courtesy of flickr user Ciccio Pizzettaro

Create surreal passphrases that are more secure and easier to remember

 If you would like to create a secure and memorable passphrase, create a nonsense phrase that creates a surreal scene.

A recent study by Joseph Bonneau and Ekaterina Shutova found that passphrases may not be as secure as you think. The study found that because people use common phrases instead of random multiple words in, they are more susceptible to being able to a dictionary attack (or automated attack on a system using common words, phrases, or passwords to break into user’s accounts). The study recommends that you should use random multi-word phrases rather than common language phrases.

For a few years now I have been creating my own surreal passphrases. I create passphrases that evoke a vivid, memorable, yet surreal scene. For me, these passphrases are fairly easy to remember, and as the research suggest, more secure. This is illustrated in a cartoon I came across from http://xkcd.com/ while doing research for this post. The cartoon illustrates both the passable memorability and the increased security of a nonsense passphrase.

Joseph Bonneau has written that, “a really strong password is one that nobody else has ever used.”  A surreal passphrase has a low likelihood that it has ever been used before and a low likelihood that it will be guessed by someone trying to break into your accounts. Furthermore, if it is poperly and creatively constructed, it will probably be easier to remember.

IPv4 and IPv6

You might have heard of World IPv6 Day, held on June 8, 2011. Major organizations, such as Google, Facebook, Yahoo!, and universities like Indiana University have participated. Like many others, you might have wondered how and why this was important to the average internet user. This post will explain the issue: IP (Internet Protocol) address exhaustion. The IP address here refers to IPv4 (IP version 4), which was introduced in 1980 and is the current Internet Protocol. Because the number of available IPv4 addresses is diminishing, IPv6 (IP version 6) will eventually become the standard protocol in the near future.

The IP address exhaustion is derived from the IPv4 addressing structure. An IPv4 address is made up of four 8-bit (totaling 32 bits) sections, and is expressed as four numbers between 0 and 255 separated by a period like this: 129.79.38.88. This “Dot Decimal Notation (DDN)” is a human readable form, but actually computers communicate in binary form, 0s and 1s, so the address above in decimal form will be like this in binary:

Decimal 129. 79. 38. 88
Binary 10000001. 01001111. 00100110. 01011000

• In the binary form, zeros are added between the bytes for a visual purpose.

This addressing structure gives a total IPv4 address space of 232, or 4,294,967,296. Although the pools of IPv4 look big, IPv4 address exhaustion has been expected because of the dramatic growth of the Internet. On February 3, 2011, the Internet Assigned Numbers Authority (lANA), which is responsible for global IP addressing, allocated the last five address blocks to the five Regional Internet Registry organizations which are responsible for IP addressing within a particular region. The Asia Pacific Network Information Centre (APNIC) was the first to exhaust its regional pool on April, 15, 2011.

IPv6, known as IPng (IP next generation), is the next IP address designed to replace IPv4 and is expressed as 8 groups of two byte hexadecimal values separated by colons. A typical IPv6 address looks like this: 1111:2222:3333:4444:5555:6666:7777:8888. This colon-hexadecimal structure increases the IP address space from 232 of IPv4 to 2128, approximately 340 undecillion or 3.4 x 1038 IP numbers, therefore, provides a much greater number of addressable nodes than IPv4.

These days, most computers have either an IPv4 address or both an IPv4 and IPv6 address as shown in the screenshot above. Until IPv6 completely replaces with IPv4, both IPv4 and IPv6 will exist side-by-side for the near future. The primary limitation to deploying an all IPv6 network is that, not all devices support IPv6 and many special purposes devices, such as network printers, still only support IPv4. In addition, many applications do not support IPv6 addresses yet and will not function correctly on an IPv6 only network.

For more about IU specific IPv6 environment, check at the Knowledge Base and IU Webmaster websites.