Interface and Interaction Design

Information architecture

Information architecture is the term used to describe the structure of a web site, especially how the different pages of the site relate to one another.

There are many possible ways to organize a site. The main idea is that information available should support how the user will use the site to support the user’s tasks (Brinck, 2002). A considerable time should be spent to explore and understand the information to be organized, to identify patterns and relationships.

Navigation

People determine the way they’ll navigate by what they’re trying to accomplish.

A optimal rationality model is an approach where users determine the probability that each link goes to their destination and then follow the highest probability path, remembering everything they see and then follow the highest-probability path, remembering everything they see and backtracking as soon as a trail they left behind has a higher probability of taking them to their goal than the trail they are on (Ibid.).

A satisfing model is an approach that emphasizes that people tend to behave in a way that minimizes mental effort. They remember as little as needed to avoid complicated planning (Ibid.).

Developing information architecture

A simple method to learn about how users perceive content is to use card sorting, this means that content items are written on index cards, people group the cards in the ways that makes sense for them. Results are used as an input for new information architecture.

Resources:

Brinck, T., Gergle, D., Wood, S.D. (2002). Usability for the Web: Designing Web Sites That Work. San Francisco, CA: Morgan Kaufmann Publishers. Pages 118-177.

 This article is an overview about web accessibility and key issues I have found relevant when stying the topic of acessibility.

Accessibility standards

Everyone involved in web design knows the number 508 which refers to the section of the 1988 Amendments to the Rehabilitation Act specifying the accessibility standards for information technology that must be met by any vendor who wanted to do business with the U.S government (Krug, 2006). Now there is a growing, worldwide recognition that users with disabilities have the same right as others to access information technologies (Richards, 2004).

“doing accessibility”

Although the standards have been around for 20 years, three-second of even more of the webpages fail the accessibility testing. Why?

The people that should be “doing accessibility” are young people who are hard to convince because their world largely consists of able-bodied people and it is hard for them to believe that large percentage of the population needs help accessing the Web (Krug, 2006). Still Gerber and Kirchner’s study (2001) summarizes the available data on visual impairment and computer and Internet use. They report that, in the United States, “[t]he total number of people ages 15 and older with any ‘limitation in seeing’ who report they have access to the Internet is just over 1.5 million (1,549,000)…. [A]bout 196,000 people with a ‘severe’ limitation in seeing have access to the Internet, and about 102,000 persons with a severe limitation in seeing use a computer on a regular basis.”

 Accessibile Web page

The reference for Web accessibility standards is the Web Content Accessibility Guidelines (WCAG), published by the Web Accessibility Initiative (1999) of the World Wide Web Consortium.

The WCAG provides a list of recommended practices for Web developers at three severity or importance levels. Priority 1 guidelines, if met, are “a basic requirement for some groups to be able to use Web documents.” Priority 2 requirements, if met, “will remove significant barriers to accessing Web documents.” Finally, Priority 3 requirements, if met, “will improve access to Web documents.”

The three priority levels are standards that Web authors “must,” “should,” and “may” follow, respectively. The hierarchy suggested by the three priority levels has a strong basis in practical fact. A Web page that meets Priority 1 guidelines probably will be significantly easier to use for a wide range of disabled people, while Priorities 2 and 3 offer decreasing returns.

Priority 1 guidelines are generally easy to meet. Some example requirements (Clark, 2003):

• For every item on a page that is not text, provide a text equivalent. Every image on a page, for example, must carry an alternative or alt text that adaptive technology like screen readers can read out loud. A blind visitor to the Web site won’t be able to see the image but can read the text equivalent.
• If you use tables to display data, identify row and column headers. With that added information, a screen reader, for example, can turn a table of information into understandable speech more easily.
• Make sure that information is still understandable without colour. Some forms of colour blindness require care, for example, in combining red and green.

Resources:

Clark, J. (2003). Understanding Web Accessibility. Journal of Volunteer Administration, Volume 21, Nº 1, 2003, pp. 36–39

Krug, S. (2006). Don’t make me think. A Common Sense Approach to Web Usability. USA: New Readers Publishing, 168- 179.

Richards, J.T., Hanson, V.L. (2004). Web Accessibility: A Broader View. In: WWW ‘04: Proceedings of the 13th international conference on World Wide Web. New York, NY, USA: ACM, 72–79.

A prototype is a working model built to develop and test design ideas. In web and software interface design, prototypes can be used to examine content, aesthetics, and interaction techniques from the perspectives of designers, clients, and users (Walker 2002).

Prototypes more similar to the final product are “high-fidelity” while those less similar are “low-fidelity.” A high-fidelity prototype is often made with the same methods as the final product and hence has the same interaction techniques and appearance as the final product but is more expensive and time-consuming to produce than a low-fidelity prototype (ibid.)

High vs low fidelity

Though computer technology has developed rapidly lo-fi prototyping still has it’s advantages over hi-fi prototypes. In this article I go trough some of problems with hi-fi prototypes and try to analyze why even today computer based prototypes can’t still compete.

• First of all, lo-fi prototyping is fast- it brings results early in development and allows a team to try far more ideas than they could with high-fidelity prototypes. Lo-fi prototyping helps you apply Fudd’s first law of creativity: “To get a good idea, get lots of ideas (Retting, 1994)”

• Secondly, as hi-fi prototypes look so real testers tend to get obsessed with details as colors and buttons, but do not concentrate on big things as the general layout and controls. In this stage of design process the details are not important and the testers should look at the concept in general. The hand-made appearance of a paper prototype forces users to think about content rather than appearance (Ibid.).

• Finally, developers are so attached to their work because it was so hard to implement that they are not willing to change it so easily (Ibid.), but as lo-fi prototyping does not require so much effort it is really easy to be improved.

Though low fidelity prototyping is good for the early stage design process, later the computer prototype becomes more handy as also Lauri reflected his own experience. Lo-fi allows to get fast feedback and bring in changes but later when the “look and feel” becomes more important lo-fi prototypes are no good. When studying the topic about tools available I came across Irene Anggreeni (2006) article about prototyping tools for early stages of web design which elaborated the idea that software tools which could make the lo-fi prototypes move instead of people moving them would be handy and also helpful for sharing the lo-fi prototype in Web, which so far is the weakest link in lo-fi prototypes, if we had an easy tool like this, lo-fi prototypes could really be a breakthrough.

Resources:

Anggreeni, I. (2006). Prototyping Tools for the Early Stages of Web Design. [Accessed 01.06.2008]

Rettig, M. (1994). Prototyping for tiny fingers. Communications of the ACM. 37 (4), 21-27. New York, NY: ACM. [Accessed 01.06.2008]

Walker, M., Takayama, L., Landay, J. (2002). High-Fidelity or Low-Fidelity, Paper or Computer? [Accessed 01.6.2008]

This is a short overview of tagging systems. Author describes the concept of tagging systems and discusses the ways tags could be used in the tripyou webpage, how the system should be designed (tagging rights, tagging support, resource connectivity, social connectivity, etc) and what could be the user motivations for tagging in tripyou.

Tagging systems

Web-based tagging systems such as Del.icio.us allow users to add freely chosen keywords to any web resource. Similar systems have existed in web browsers and other systems for many years with the difference that these were individual collections.

Social tagging systems

Tagging can be also seen as “social bookmarking” because the act of tagging a resource is similar to categorizing personal bookmarks. Tags allow user to store and collect resources and retrieve them using the tags applied, these method allows elements of social interaction connecting individual bookmarking activities to a rich network of shared tags, resources and users. Tagging systems allow users to share their tags for particular resources and in addition each tag serves as a link to additional resources tagged the same way by others (Marlow, 2006).

As referred above social interaction is a strong issue in tagging. This could be the motivation for tagging in tripyou.net as well. The users of the webpage can easily get in contact with people who use similar tags and tagged resources can be found more easily.

Tagging rights

When designing tripyou free-for-all tagging rights system should be allowed. This means that any user can tag any resource, but also some restrictions can be applied. These include (Ibid.) :

• Permission to tag- Different levels of permissions to tag can be specified, but I believe in tripyou we should not restrict the right to tag.
• Removing a tag- Systems can determine who may remove a tag- whether no one, anyone, the tag creator or the resource owner. For me it seems that we should be really relaxed and allow to remove tags by anyone except user profile where only the resource owner can remove a tag.

Tagging support

Suggestive tagging would probably guarantee that the tags have same semantics and would help to build a folksonomy. Also as according to techessence.info tagging receives criticism from library circles for lacking some of the benefits a predefined controlled vocabulary offers. The primary arguments are that tagging doesn’t offer synonym control or distinguish between two meanings of a word, but I believe that suggestive tagging would help to minimize this problem.

Type of objectt

The type of object refers to the resources which can be tagged. It is quite clear as Lauri wrote in his post that profiles (hostel, restaurant, sightseeing, user), photos, videos, blogposts, groups should be tagged. On Flickr up to 75 tags can be used to a object, I do not have a clear vision if we should limit the number of tags that can be given to a resource.

To sum up I think on tripyou a everyone can add and remove tags from any resouce. Tags, which are like keywords, help to find resources which have something in common and these resources can be either profiles (hostel, restaurant, sightseeing, user), photos, videos, blogposts or groups.

Resources:

Techessence.info., Tagging.[Accessed 01.06.2008]

Flickr., Tags. [Accessed 01.06.2008]

Marlow, C., HT06, Tagging Paper, Taxonomy, Flickr, Academic Article, ToRead. [Accessed 01.06.2008]

When you are young and healthy some things are so basic that you do not notice them. Web accessibility is certainly one of them. Although accessibility is very important (you can bind this with e.g. lifelong learning, democracy), it is amazing how little attention is paid to this.

In the article authors concentrated on senior adults and offered a solution for their problems. From their description it seems that they have discovered an easy solution for physical disabilities of senior adults: text size, line spacing, speak text, page layout etc. This is all great - when I think about my father who is almost 70 years old, I do understand how this all can simplify his life.

Interesting and new to me was also the idea of cognitive changes and how this affects web accessibility. Authors concentrated here mainly on visual presentation of Web, but somehow I started to think whether there is actually a little more behind this. Cognitive limits or changes of users affect also the whole architecture of Web (not only visual part) and therefore also the understanding of that.

At one point looking at figures 2-5 it seemed that the solution authors offered is still complicated and makes the navigation tricky for users. The solution offered here is saving user preference settings, which really makes user’s life easier.

Web accessibility and usability are very close to each other. Even if with the web accessibility is everything alright bad usability will still scare people away form websites. For me there is one rule: if I don’t understand how I can use something (some tool) during the third time I don’t go back there ever.

So if our purpose is to bring more people into Web-users circle - good accessibility is not enough, good usability has the same importance.

Howdy, I posted the overview to my imke blog: Web accessibility

According to the article, book pages and small experience that I have it is really true that paper or lo-fi prototypes should be first considered by design teams. From those materials I inferred one and the main advantage of lo-fi prototypes - you can test it on the first stage of sketching and users during tests concentrate then only on usability and free to comment and discuss the ideas of functionality not visual details which can be changed more easily than navigation system. Comparing digital and paper mockups Brink at al (2002, 219) point out that clients “tend to view digital mockups as final, unchangeable products”. I tend to agree with them as I used also to deal with this process not only during studies:). Also great possibility of early paper design process is its cheapness and flexibility that allows team to fix errors on paper and try as many ideas as they have. Everybody in team is also highly involved and should not think through every small detail like color unless the interface being developed meets client requirements. However this technique takes more time than hi-fi process but is more resultative. The article is very useful in a way how its author brings examples from his experiences and offers comprehensive description of building lo-fi prototype and its main components. The technique goes from early 90-s but is still effective. “Usability for the web” offers step-by-step developments that can be very useful.

Accessibility

Importance of Web accessibility

Nowadays Web accessibility is essential subject for investigation because it studies needs of people with disabilities, faces their equal opportunities and access to Internet to let them participate in society. Web accessibility has become more important when it was required by law and policy organizations.

Finding solutions

Authors of this article demonstrate their technique which enhances the broader access not only for disabled people but for anyone. They point out the question of standards, guidelines for accessibility which should enable web-designers to create sufficient pages for considered users. As I understood from the article the problem is that redesigning existing sites is expensive thing. That’s why authors offer the technique which allows making interface and navigation changes without disturbing the page source. With this article’s help I got more familiar with main problems of disabled people interacting with computer and web. The investigation held by authors shows what physical and cognitive challenges have older adults using web interface. In this paper authors are discussing these problems and provide solutions of adapting interface and web-browser with user’s needs. For example there are problems with mouse and keyboard usage. All those compiled problems lead to specific guidelines for web-designers.

Accessing the content

There are developed different web content adaptations depending on particular user disabilities. For example, “the option for changing the page layout by linearizing it”. This addresses the visual presentation of pages for users with low vision. These adaptations are connected with possibility to configure settings. This access should be extremely easy available in the interface panel. It is important part of navigation in such cases. In my view this is quite hard to know all needs of such users and moreover to test and implement working software.

How it was implemented

Considering my small technical and programming knowledge the implementation section is quite difficult to understand. But I’ll try to bring out main idea: they used proxy server with the software installed there but it caused some difficulties and the current approach is DOM manipulations which is independent from html and no changes are made to the page source. These manipulation mechanisms are supported by the browser and operating system features.
The most interesting feature of their technique is saving user preference settings. The server is remembering the last saved settings and user logging the next time can enter his “personal configured” browser on any machine.

Conclusion

According to user feedback the web adaptation features of the technique are the dominant part of implementation success. The main advantage of presented technology is adaptation “on the fly” that increased the usability of pages. In conclusion it is important to think of accessibility in commerce, business and information delivery. The web is becoming central in these areas so discussed work consider the cost side also. Authors have found the cheap and effective method thanks to developed technology where the web content needs no change. For future direction there are left many issues like “the process of developing adaptations for users struggling to use mouse”.

 References:

1. Marc Rettig, “Prototyping for tiny fingers”, Practical Programmer, Communications of the ACM, 1994, Vol. 37, No.4.

2. Brinck, T.,D, Gergle., S,D, Wood (2002), Designing web sites that work. Usability for the web, San Fransisco: Morgan Kaufmann Publishers

3. Richards, J.T., Hanson, V.L. (2004). Web Accessibility: A Broader View. In: WWW ‘04: Proceedings of the 13th international conference on World Wide Web. New York, NY, USA: ACM, 72–79.

There are several highlighted lines in this text in my versionJ. There were some very good thoughts like creation of the prototype for fast food restaurant.

But I don’t know the answer to the question: Do we have better computer-based prototyping tools now or should we still rely on paper-based prototyping? This article was not about technological aspects: the arguments used for lo-fi were not technological but more like psychological aspects of human thinking and human activity. So even if technology develops further these aspects actually remain the same.

This article was written in 1994. Obviously technology has developed further since then. There are definitely tools which make prototyping easy, quick and nicely playable.

But other thoughts: we had with our Tripyou wrong at the beginning. First we should have had teams developing prototype and we should have improved our prototype several times. We did not originate from personas and scenarios, but we thought more about ourselves.

Where we also failed was: construct models, not illustrations. Perhaps next year students must pay more attention to the modelling of prototype (roots of design?). There is definitely lack of competence or deeper understanding in our side now. We did not see modelling process as a whole. Now it seems that we might have handyman’s skills but we don’t have engineer’s knowledge.

I’m not sure about this “meme” theme in this article. At one point it might have been very innovative and interesting approach and it is possible to create very interesting theories with “memes”, but in this context I actually don’t see the benefit of using it. Arguments used in this are the same level in almost all psychological aspects in this article, but the headline of the section “A Trojan Meme” is brilliant.

For the next week you have a reading task about accessibility:

Richards, J.T., Hanson, V.L. (2004). Web Accessibility: A Broader View. In: WWW ‘04: Proceedings of the 13th international conference on World Wide Web. New York, NY, USA: ACM, 72–79.

You can download the article from http://www-03.ibm.com/able/news/broader_view.html.

In your blog post you should summarize what you learned from the article.

PS. I noticed that you have to do quite a bit of blogging also in the e-learning course. If it is too much pressure to blog on both courses, then let me now. Otherwise there will be one more reading/blogging task next week and then you have a few weeks to finish your missing posts and work with the prototypes.

Although the article “Prototyping for Tiny Fingers” has been released 14 years ago, it’s still very useful to read. 14 years for the computer industry is like the whole century, but the basics remain the same. The article points out all the factors we should consider while building prototypes. Whether they’re on paper or hard disc.

Actually, I like this way of prototyping - always, when I have to come up with a mockup, I take some papers and pencils and start sketching. Maybe it’s because I like drawing, but for me the paper prototypes give a better overview of the system. Besides, it is very easy to redraw some elements and creating paper prototypes is generally very fast. Ofcourse, later I spend some hours creating the same mockups on the computer, but I can be quite sure, that usually I do not have to modify them in the computer anymore. Everything has been redesigned and tested on the paper.

Some database architects I know, still draw the first structures on paper, instead of using enterprise software like Rational Rose, which actually makes designing databases very easy. These kind of applications enable the designers to creates all the SQL queries and files needed to create a working prototype. Maybe it’s the question of habits, but they say that mockups on papers can be easily followed and draw the ‘big picture’ of the application. Well, we could dream about scanners that will scan the paper prototypes and convert them to digital and standardized mockups. That would be cool. Or do they already exist?

Now we have reached to the advantages of digital mockups. Yes, it takes some time to learn special software, but the digital prototypes are all in a standard format. Everyone familiar with the syntax can easily read to prototypes and make changes if needed. I can’t imagine the application used for hi-fi mockup design 14 years ago, but now they’re more usable for sure. I’m pretty sure that creating prototypes from scratch on a computer will not take more time, as all the standard elements have been already defined. All you have to do, is to drag the elements on the right place. Sounds easy, but still, some of us prefer papers and pencils:)