RSS
 

Responsive Design

03 May

Designing a website that will make it usable when someone accesses it with a mobile device is commonly known as “responsive design”. In general, this means that a website should adapt to the device as the user browses. There are several issues that affect how responsive a website is to a particular mobile device, but I will focus on three: Context, Connectivity, and layout.

Context means you must consider the environment in which the user will be using your website. If the typical user of your site is trying to get some information, like a phone number or address, while standing and hanging onto something to maintain balance in a quickly moving train, things like being able to get the information without typing too much or having to scroll a lot through pages would make the user more likely to use the site. This is opposed to the situation where the user of your site is normally sitting down, perhaps in a library, looking for reviews on a book they are thinking of checking out. In this situation, more typing of input may be acceptable.

Another issue is connectivity. Mobile users roam from coverage region to coverage region and connectivity can be intermittent and slow. In this situation, a website should load quickly and be small enough to fit the memory capacity of the device. When designing for mobile users, websites should ensure that images are kept to a minimum and rendered using the smallest number of pixels possible for usability.

Finally, layout is an issue for mobile devices. Real-estate is a major issue on mobile devices. The screen size of a mobile device can be as little as 52% smaller than the typical screen resolution of a home computer. Because of the loss of so much real estate, navigation should be simplified. For example, removing sidebars and stacking them along with the content, will decrease the width necessary to see the information. Also, moving the navigation to the bottom of page will eliminate the issue of having to scroll past the navigation every time the user goes to a new page.

 

InWorldz – Virtual Reality for Real People

20 Apr


How can I describe a virtual world? It is actually a pretty difficult thing to do unless you’ve experienced one. I recently joined InWorldz and was immediately glad I did; but, at the same time I was intimidated by seemingly infinite possibilities of the things one can do. After spending more time there, it is apparent that this is something one learns over a long period of time and that most members will never master every part of it. Fortunately for me, I had a couple of very knowledgeable mentors and I have been able to do some rudimentary things like making my avatar appear as something other than a generic person, move around and fly, and even teleport to different areas. Probably the most distressing aspect of the experience for me is that I now want to spend so much more time than I actually have learning how to build and create objects, meet other people, and contribute to the community as a whole.

There are two places that I have visited extensively and I’ll comment on those here. First of all, I have been several times to the Community Library on Delphi. This community library contains some books and magazines that are easy to pick up and read. I picked up the latest version of Allure Magazine and took it with me to the pillows on the floor so I could read through it comfortably. The issue I perused was focused on fashions through the years. There were ads for furniture, accessories, and even virtual homes. Upstairs, on the second floor, there are shelves containing classic books like the “Wizard of Oz” and “The Prophet” which takes you to an internet site that allows you to read the entire book. There are also some workstations at which you can sit, but I couldn’t figure out how (or why you would want) to work the virtual computers. Interestingly, if the computer did actually work, you could get yourself into a nested “Matryoshka doll” situation in which you were logged into InWorldz, sitting at a computer logged into InWorldz, and so forth. There is a lot of very nice artwork on the walls overlooking the sea, which makes the whole place feel very comfortable and homey. Finally, there is section on the ground floor (seen behind me in the picture above) which contains several message boards for events and interesting places to explore. I haven’t had the opportunity to really visit ElvenSong, but I can’t wait for it. I did check out the ArtFest which contains several amazing exhibits on an “Alice in Wonderland” theme. In general, the community library, while similar to a library in that there are things to read, nice places to relax and read, and community announcements, the similarity stops there. A real library is constrained by its physical limits, while the community library is a potential portal to almost infinite possibilities. The other nice thing is that in the virtual library, there doesn’t seem to be any rules about keeping quiet!

The other place I visited was the Museum of American Architecture and Design. This place contains several buildings. One is dedicated to American Architects, the Daniel H. Burnham Hall, with pictures of their work and some information on their lives. The ability to get to more information was built into each piece. There is also a building that houses a railroad and car exhibit, a Robin and Lucienne Day “Simplicity” exhibit, pictures from New York, and a beautiful room with book covers designed by Margaret Neilson Armstrong displayed under enlarged photos of the books. I even explored an old building at the end of park that looks like an old turn-of-the-20th century building. I hope they are planning to put in some period furniture as the place is perfect for it. Finally, there is a dock with several boats (I actually sat down in one of them). I guess the biggest difference between a real museum and the virtual one I saw is that, again, the possibilities are not constrained by the physical properties of the place. I did notice, as I toured the railroad room that you don’t get the same perspective as you would in a real place. I’ve recently been to the railroad museum in Carson City, Nevada and the first thing that strikes you is the size and the smell. You miss (maybe for the better) the olfactory sensations in a virtual world.

I guess the main take away for me in this experience is that creativity is boundless in a virtual world. The Art Fest drove that home. I am hoping that, when I get more time, I will have the opportunity to participate more this curious, yet exciting world.

 

A Force for Change — Digital Story Telling

02 Apr

I am one of those people that believe that every person has a story to tell, lessons to teach, history to impart. Whether it’s my 4th grade daughter, my mother, or my grandparents, each person has their own unique interpretation of their own history, which is in some way tied to the history of millions of other people. I am amateur historian and I love the idea of digital storytelling as a way to connect historical to current events. I chose to make a video using stick figures and text-to-speech to create an instant in my own history. Having a generic mom and dad tell the story allowed me to create an atmosphere that any parent could relate to, and in a way almost impossible to create with words alone. This story has, and will, remain with me forever, but actually telling it in a somewhat permanent way helped me to let go of some of the associated anger.

Digital storytelling makes it easier to express a story in a way that feels comfortable. I believe that if you take away the techno-centric approach to computer applications (YouTube and many blogging tools are successful examples) you have opened the way for technophobes to get their own stories out. In general, much more needs to be done to support languages other than English, but the concepts and user friendly applications are ready for my grandmother and 4th grader to use.

In the past, so many important stories have been lost because of the lack of a convenient and durable medium. I think about my own mother-in-law who was forced into exile from her home at the age of 22 with a 2-month old infant and the subsequent uncertainty that goes with such violent situations. Her story is repeated, even today, over and over again all over the world. I can imagine that if enough people were to record their own personal stories the noise would become so loud, the rest of the world could no longer ignore it. I may be standing on my soapbox, but I really believe that digital storytelling has the potential to change the world, much in the way that instant-messaging has brought about important social change (Arab Spring, Occupy Wall Street). While the increase in data bits may appear to be daunting at this point, the technology to analyze, summarize, and discern the important from the mundane will help alleviate this issue in the near future. I am really looking forward to all the new digital story-telling applications that have yet to be written.

 

xtranormal is Extraordinary

01 Apr

I played around this week with a lot of different digital story-making applications and xtranormal was by far my favorite. This service creates one or two character movies from text and contains the easiest user interface I have had the pleasure to use for adding things like gestures and facial expressions to characters. I can see that, over time, a great deal more bells and whistles will be added. But for now, the twenty available themes/characters are enough to tell a compelling story. I was especially impressed when I added a non-existent word and the application succeeded in pronouncing it almost perfectly! I actually chose to use the simplest characters, the Stikz (stick) figures, because the story I wanted to relate did not require elaborate graphics. Instead, I chose these figures because I felt the story (text) was the most important element and I did not want graphics to get in the way. That said, there are a few issues that could would make the final product more polished. For example, it is difficult to get the text-to-speech functionality to work so as to really convey the feelings of the characters. Sometimes, when my characters were supposed to be expressing dismay or sadness, the sentence would end up sounding upbeat. Other times, when words should be spaced out more evenly, they were run together and the syllabic stress was incorrect. I actually tried several tricks, like adding space or lots of dots as in: …, but these were ignored by the application. This is an application I would encourage anyone to try, my children are chomping at the bit to get at it and I can’t wait until their next research project. They’ve told me that PowerPoint is so 2010.

Here is the movie, which I created on xtranormal and published on YouTube:

 

Who Would Win – Wiki vs. Blog (and why it doesn’t matter)

09 Mar

I haven’t dabbled much with Wiki-mania, but I have benefited from the fruits of those who have. When it comes to needing somewhat reliable information, I am the first to jump on Wikipedia. I’ll use it when I need to remember an equation I’ve seen before but forgot all the variables and I remember it is correct. However, I am less likely to use it when I need to find something I’ve never seen before and the information must be correct. I would tend to rely more on published scholarly works in that case. That’s not to say that Wikipedia doesn’t have trustworthy data, I just tend believe that original sources are better. Wikis are organized collaborative ventures and unless strict controls on the accuracy of the wiki are maintained, they can become useless. Blogs, while collaborative in the sense people can leave comments and perhaps forge friendships, are a more personal form of expression, and should not be taken at face value. (My own comments here are just an opinion, after all!) Wikis are the manifestation of several people working on a common cause, while blogs can be seen as a way to express one’s own opinion, even if they contain helpful pointers to relevant information. Blogs can be helpful sources of information on specific topics, as can wikis, but wikis become quickly more useful as the number of people working in parallel can add information at an exponential rate. Wikis can be a one-stop source for information directly related to a specific topic. The librarian-focused wikis I have seen seem helpful for many of the knowledge requirements and issues librarians face. The fact that wiki model is extremely usable means you could be extremely technically challenge and still contribute. My main point here is that the helpfulness of a wiki (or for that matter, a blog) greatly depends on the user’s intent.

 
 

Web 3.0 – Just a Name to Draw a Line in the Sand

09 Mar

I watched Kate Ray’s video (2011) on Web 3.0 and really didn’t find anything surprising there. I guess that is partly because my current position is focused on how to extract meta-data from structured and unstructured documents and I’m probably up to date on the advances in this area. That said, I believe the video is important in that it points out the main issue, which is how we are going to make this massive collection of data useful and relevant for the six billion people who live on our planet. I am not sure I would agree this video defined Web 3.0, but it does show that data organization and aggregation is critical whether it’s called Web 3.0, Semantic Web or even Everything.org.

Since I come from a mix of academic and technology business backgrounds, I always find arguments over current terms du-jour and the tendency to turn them into buzzwords pretty amusing. Terms like Web 3.0, Semantic Web, Cloud Computing always put me on alert for buzzword bingo winners! While I have the greatest respect for innovators like Tim Berners-Lee, I am also skeptical when complex issues are dumbed-down for the least common denominator. According to Greg Boutin (as paraphrased by Richard MacManus, (2009) Web 3.0 is all about openness and linked data. However, I think it is much more complicated than that. Three years after the publication of this article, the W3C is still trying to agree on standards for both data and linking to data (2012). And so far, it looks like they’ve managed to define provenance (2012) (the origin of data). While provenance is very important, a great deal more needs to be done. And even if we could get the semantic part correct there are huge issues with security and privacy that have yet to be worked out. While cloud-computing is being hyped to Mars, the fact remains that data is basically not nearly secure enough to trust highly sensitive data to reside there. I’m guessing that the Pentagon doesn’t use the cloud. As far as I can tell, there’s no THERE there when it comes to Web 3.0. Before we can get to Web 3.0 we have to arrive at Web 2.0, but you can be sure we’ll be hearing all about Web 4.0 and computing in the stratosphere before long.

More to my taste is the publication by Tim O’Reilly’s (2005) article. He makes some salient points about what Web 2.0 is: services rather than products, users as developers, leveraging the long tail, harnessing collective intelligence, device independence, control over data that becomes richer as more people use them, and lightweight user interfaces (i.e. drop the functionality no one uses), development models, and business models. We are a long way towards that ideal, but still need to work on a few of the items. For example, harnessing collective intelligence has been manifested in several ideas such as folksonomies and tag clouds. But this can be seen as unstructured data and we have not yet found a good way to analyze unstructured data in a way that is actually useful. Many companies are now focused heavily in this area and we may see some results in the next few years, but we just aren’t there yet. In MacManus’s article (2009) he quotes a comment left on another column, “Google’s algorithm [is] a lot more sophisticated than just statistical methodology”. I have to disagree with that statement. Most algorithms are statistically-based, it a matter of performance and accuracy of the results. Some statistical methods are better than others; however, the holy-grail approach(s) just hasn’t been discovered yet.

Efforts to standardize data, like RTF and OWL are important aspects of the Semantic Web and are probably most useful for libraries and other users of structured data. Perhaps there really needs to be two webs: the structured web for formal documents like published papers, contractual documents, books, newpapers or things we typically think of in terms of hardcopy materials; and the unstructured web for things like Tweets, Facebook comments, images, chat sessions. The approach to creating data about these two different types of information should be completely different, perhaps using a more formal ontological approach to the former (and thus requiring specialists to get it right) and a folksonomy/cloud tag approach to the latter. In either case, the existing algorithms used to create meta-data for aggregation are still lacking in terms of scalability and accuracy. Perhaps Web 3.0 is not so much about how we use the web anymore, but more about how we can get the web to do our thinking for us.


References:

O’Reilly, T.(September, 2005). What Is Web 2.0: Design Patterns and Business Models for the Next Generation of Software. Web 2.0. Web. Retrieved from http://oreilly.com/web2/archive/what-is-web-20.html.

Linked Data. (2012). WC3 Standards:Semantic Web:Data. Web. Retrieved from http://www.w3.org/standards/semanticweb/data#specifications.

MacManus, R. (May, 2009). Understanding the New Web Era: Web 3.0, Linked Data, Semantic Web. ReadWriteWeb. Retrieved from http://www.readwriteweb.com/archives/understanding_the_new_web_era_web_30_linked_data_s.php

Provenance Current Status. (2012). WC3 Standards:All Standards and Drafts:Provenance Current Status. Web. Retrieved from http://www.w3.org/standards/techs/provenance#w3c_all.

Ray, K. (2011) Web 3.0. Vimeo Website. Web. Retrieved from http://vimeo.com/11529540.

 
 

Collaborating on Zoho

08 Mar

I have actually worked on a lot of collaborations with Google Docs and other collaborative products, such as SharePoint. In general, I find collaboration tools to be very helpful. I have never worked with Zoho which feels very much like Excel. One of the advantages of this tool is that it is easy to see what others have put into the worksheet and I found a couple of tools about which I knew nothing and will probably use in my own work in the future. I can foresee adding a ranking which might lead to a very helpful “top 10” list. The organization of the worksheet also makes it very easy to quickly locate and download tools for my own purposes. It is also very helpful to have a link to site where the tool is being used because it can be hard to understand how you would actually use it in your own applications without seeing it in action. Finally, I can see how I could quickly build up a library of current “hot” tools and widgets when a significant number of people collaborate on this document.

 

Usability, Accessibility, and Culture

27 Feb

Usability is basically the ease with which a user can use a computer interface, whether it is a website or program on the user’s local computer. Usability is concerned with issues like how easily the interface can be learned, the ease with which users can recover from errors, how easy it is to remember functions, and how much fun it is to use (Nielsen, n.d.). Accessibility, however, is concerned with whether a user interface is as easy to use for a person with disabilities as it is for people without disabilities. User interfaces should be designed to present components and information in alternative formats so they can be perceived in a way that is comfortable for the user (W3C Recommendation, 2008). For example, while a sighted person is able to see images on a website, a blind person cannot. If images are not labeled as such, any text that is read by specialized screen readers may confuse the listener if it references an image that the user is unaware of. Accessibility includes issues such as the ability of blind people to understand every element on a website, keyboard functionality that allows a person unable to manipulate a mouse to access all the elements on the page using the keyboard, and people who are color-blind are able to interpret all functionality because color is not used as the only indicator of the availability of a function. Accessibility is even concerned with allowing older people with varying degrees of functional degeneration. In general, while the objectives of usability and accessibility are different, both are concerned with making interfaces easier to use. Making an interface both usable and accessible, everyone benefits, those with disabilities, those who may be suffering from a gradual decrease in function as they age, and those without.

Probably the most important reason for implementing both usability and accessibility is that if an interface is not usable, no one will use it. If, for example, a website depends on people actually using their site in order to remain viable, an unusable website will soon cause the owners to be looking for a new job. Most people don’t have time to waste trying to figure out how to use a website. And once they are frustrated, they will give up, find an alternative source for the information and/or service, and never return to the website. The most important reason for making your website accessible, in my opinion, is that it really is the right thing to do. Information should be universally available and when a website is not accessible to disabled people, they are shut out only because they are disabled. For the less altruistic, it also makes business sense. If a website business will be working with the government they are required to make their site accessible by Section 508 amendment to the Workforce Rehabilitation Act of 1973. And, according to Jim Thatcher (2011) 54 million Americans have disabilities. Since this is almost 20% of the population, it would be business suicide to disregard this potential customer base.

There are many issues you need to be aware of while designing a website for accessibility. Designing for the visually impaired is an area where there are currently many options. Probably the easiest is to make sure all non-text content, like images, is accessible by providing alternative (alt) text. Because a huge proportion of the population is also color-blind, color should never be the only indicator for functional information. Another issue is text-size. A sizable proportion of population is aging and visual difficulties among them require text to be larger for comfortable reading. Text as part of images should always be done in very large font, as such non-text words cannot be later re-sized by a browser. The contrast ratio for all foreground/background color combinations should be at least 7:1 if default text is not large.

When designing the navigational structure, issues such as keyboard accessibility should be considered. For example, all functionality should be made available by using the keyboard and no functionality should depend solely on the mouse.

Other issues include designing so that all pages in the site operate in predictable ways, making sure that there is nothing on the page that flashes in such a way as to cause seizures, and making content understandable. Finally, web designers need to understand that designing for accessibility does not mean that design and implementation time will greatly increase and that their designs will be compromised by making sure their site is accessible. They should be aware that everyone wins when a site is accessible (Krug, 2006).

Colors have different meanings in different cultures. For example, white symbolizes mourning in Japan, while black symbolizes mourning in North America. Certain images are repulsive in some cultures. For example, in many Middle Eastern countries, both pigs and dogs are considered dirty and disgusting. You probably wouldn’t want to put cute pictures of dogs on your website if you were trying to sell something in Jordon or Saudi Arabia. While you should obviously be careful when translating content, an awareness of word usage should also be part of the design. At best, some phrases may not be understandable, such as use of colors as adjectives. At worst, some phrases may actually be offensive.

Whether or not I would put the same images on a website in Japan and North America greatly depends on the subject of the website. In high-context cultures, meaning is derived from non-textual cues, such as gestures and silence. I may use more images of groups of people on the Japanese website and images of individual people on the North American site to show sensitivity to the collective versus individual emphasis in Japanese and North American culture, respectively. But as this is more of a cultural value than a high- or low-context communication characteristic, I’m not sure what other differences would cause me to change the images. Other than, of course, those mentioned in the paragraph above.


 

References:
Nielsen, J. (n.d.) Usability 101: Introduction to usability. Useit.com -> Alertbox. Retrieved from http://www.useit.com/alertbox/20030825.html

Krug, S. (2006). Don’t make me think. New Riders Publishing: Berkeley.

Web Accessibility for Section 508. (2011). Jim Thatcher.com. Retrieved from http://www.jimthatcher.com/webcourse1.htm.

Web Content Accessibility Guidelines (WCAG) 2.0. (2008). W3C Recommendation. Retrieved from http://www.w3.org/TR/WCAG20/#intro-layers-guidance.

 
 

Tearing Apart My Favorite Website

24 Feb

Poudre River Public Library District

Where & Why?

Probably one of websites I use most frequently is our local public library website . It was an eye-opening experience for me to choose this site for my usability study. Perhaps it would have made more sense to look at a site I’ve never visited before, but in one sense, my familiarity with it really allowed me to take a deep dive into just how usable it is, especially if I were unable to see or had to find my way around it using only the keyboard.

What’s Right With It

In general, the site is quite usable. Keyboard shortcuts work and all images contain the alt property with descriptive text. Links are generally descriptive with a few exceptions. The content is not overloaded with images and the most important functions of a library are available from the home page. There are actually two ways to navigate: a horizontal navigation bar at the very top and an expanded navigation panel at the right side of every page. As there is a sizable proportion of first-language Spanish speakers in our community, there is a Spanish version of every page with the exact same navigational elements in Spanish. I can truly appreciate that! Whenever I needed to go on-line for business while I lived in Israel the “English” version could sometimes be a life-saver. But I also noticed that many times, not much effort was put into the English version, so I’d either leave frustrated or I would have to dig up someone to translate for me, never a good way to save time. While my Spanish is limited, I can see that a great deal more effort was put into the mirror Spanish site for our library here.

What’s Wrong With It

Of course not everything was perfect, as I suspect is the case with just about every homepage out there with the exception of Steve Krug’s and Amazon. I did find a few issues with navigation, accessibility, and understandability. I will confess that I used the Web Accessibility Evaluation Tool to check out the Poudre Library pages but some of the issues I found were not actually caught by this tool. I suspect that is because some issues are impossible to programmatically catch. For example, descriptive wording requires powerful semantic analysis that is not possible for computers to currently perform. Almost all the pages passed the evaluation with the exception of a couple of forms pages, and since I am not yet familiar with how these work, I can not really make a judgement about them.

Accessibility

  • There was one major issue with accessibility on this site. The Contrast ratio of major portions of the site were very low. For example, there is a Quick Link side panel on the left with light orange text over a darker orange background. The contrast ratio for these two colors was 2.74:1. The left side panel also failed with a contrast ratio of 2.82:1. Finally, the headings (which were not actually HTML headings in the HTML file) also have a contrast ratio of 2.82:1. All these numbers are considered failing contrast measures by the Luminosity Colour Contrast Ratio Analyzer I noticed it right away and I would probably be considered an average, sighted user. If I were asked to fix these issues, I’d change the color scheme to something with a much higher contrast ratio.
  • The default font is very small in the side panels and search box, with 9pt for the former and 5pt for the latter. I was able to increase the size using my browsers settings, but for someone who is not browser literate, it may be difficult to use the search box or understand what is available in the Quick Links subsection. Most of the titles for each section of the site are actually images and these appear to be large enough without having to increase the size, even if it were possible. I did perform a test in which I disabled page colors and the resulting page was much easier to read, with most text becoming black on a white background. I would definitely make the default text size much larger.
  • There is an Ask Colorado chat box at the bottom of the right side panel. It is not clear to me that a visually-impaired person reading this page with a screen reader could use this functionality. It is implemented using iFrames and I understand that iFrames have accessibility issues. Also, the label is at the bottom of the box, so anyone tabbing through the links might get confused about where to type their question. Even as a sighted person, I am not sure for what I can use this functionality. There is already an Ask-A-Librarian link and if the chat box is also a way to connect with a librarian, perhaps this chat box should be on that page.

Navigation

  • As I previously alluded to, there are two ways to navigate from the homepage: a horizontal top bar and a side panel. The top bar contains links to all the important functions the library provides, however, the separation between functional elements could be more emphasized. A simple vertical bar would probably suffice, but I would actually make them look more like tabs if I were asked to fix it.
  • The side bar navigation is more problematic. I have already described the problems with contrast and font size. Another issue is that there are links to external pages mixed in with links to internal pages. The link to History Connection , between Ask-A-Librarian and Reading Room takes the visitor outside the Poudre Library site altogether, the user is forced to use the browser back button to get back to the library site. I would rearrange the links so that external sites were clearly delineated and I think this is a good example of when you want the external sites to be opened in a new tab (but not window, if possible) since there really are not that many.

Understandability

  • The Interlibary Loan link is an internal link that allows a vistor to stay within the library site and find out about Prospector , the Colorado interlibrary system. The image link for Prospector is stuck outside of the list of Online Resources under the Interlibrary loan link. Clicking on it will take the visitor directly to the Prospector site, which is outside the Poudre Library site. Not only is the image not aligned in the list, but it is not clear what Prospector means. A visitor would already have to know that Prospector was the interlibrary system in order to use it. In this case, I would either remove the image and make a text-only link as a sub-item list under interlibrary load, or I would remove it altogether and allow the visitor access to it on the Interlibrary loan page only.
  • I also have a pet-peeve with the label Helping Hands in the General Info section. I have volunteered many times with the library and this is a link for volunteers to go to in order to log hours and do other things in connection with volunteering. The first time I had to use it, I could not figure out where to go. I was only told to go to the volunteer link not a Helping Hands link, so it took me forever to find it. I believe that this is a case of inappropriate cutesy jargon that serves only to confuse people and might even be hurting the library by not making it easier for people to volunteer. I would definitely change that link to say Volunteers/Volunteer Opportunities.