Encoding Emotion

This post is in response to Brave and Nass's question "How does emotion play out in computer-mediated communication (CMC)?" in Chapter 4 of The Human-Computer Interaction Handbook...

Emotion certainly plays a significant role in how we communicate with one another by providing a "social context" that seems to define the ways we communicate with one another. A smile on your face indicates to me you are feeling positive and are therefore likely more approachable and receptive to conversation than an individual with a grimace. It seems strange that computers have remained rather removed from needing to understand and convey their user's emotional experience. In many ways, computers have mostly been viewed as a cognitive tool but since computers are now being more and more used as mediums for creativity, connectivity, and interaction among people, we need to consider ways emotion can be encoded into the experience.

Emoticons became necessary because the types of interaction made possible via the Internet could not alone provide the context necessary for the communication. There are still, however, many emotions that cannot or effectively be conveyed through emoticons alone (e.g. sarcasm). Avatars in 3D games have employed emoticon type gestures that allow their character to exhibit behaviors that demonstrate one's mood (e.g. World of Warcraft characters can cheer or dance to celebrate a significant event) but these too often fall short. Emoticons of this type are low-bandwidth emotion conveyers. What's missing is the continuous and high-bandwidth emotional expression one can perceive from direct interaction with one another. Video communication (e.g. Skype) is highly effective, but video communication cannot as easily be shared, transmitted, or processed as text.

An important realization I've had is that emotions are experienced; they are not static. Emoticons are attempting to use another mode or dimension of textual interaction to efficiently "package" emotion into the textual experience--that is difficult to do and which is why they still fall short. Perhaps another mode that could be adopted for conveying emotion textually could be to standardize colors to sentences that indicate tonality, pitch, or cadence (i.e. much like music notes written on a sheet of music). While not ideal aesthetically, this capture would allow emotion to be captured in the communication.

I will soon start a new job at a small company. One important requirement levied by the hiring company was for attaining highly effective communication skills across many mediums and modes given the fact the team is spread around the world. Ideally I should be sure to spend time with these individuals in person to help define a "social context" that will help me "understand them". This provides me the means to know how to communicate with them effectively. We will also set up a "portal" that is a 24 hours a day, seven days a week television screen with a webcam linked directly to other portals around the world. The idea is that the portal will provide for higher-bandwidth communication than email can currently provide. The portal will allow the us as users to feel connected to the other working spaces rather than disconnected and reunited for minutes at a time with video chat like Skype.

InVision: Creating Fully Interactive Wireframes & Prototypes Easily and Beautifully

InVision looks to be extremely cool for the talented dual visual/UX designers who want to get slick looking prototypes out quick.

I recently used Axure RP for prototyping a lo fi interactive prototype for a craigslist redesign but ultimately I was really disappointed in the level of interactivity and the overall look of how the final prototype appeared. Later I used Flex to develop a higher fidelity protoype for a new interactive online shopping application but also found that styling the Flex app proved to be lacking in true artist customization.

Now, the only functionality I can tell that you can add is linking to other mock up which isn't exactly as capable as something like Axure pre-coding (which may be its weak point), but I think my favorite feature is simply being able to directly port a rather slick looking Photoshop, Illustrator, etc. mockup and make it function quickly as a lo-fi prototype. Often times it seems a client will be more interested in how it looks then how it operates (however unfortunate that may be...). InVision will allow the taltend visual/UX designer to create the look and functionality simultaneously into prototypes. Cool idea though in reality you could probably just create slices and quickly code some HTML to do the same. For the price tag, not sure I'd get it, but nevertheless a cool idea.

 

 

Mashable.com 9 Essential Resources for UI Designers

Mashable put out an article today that I think provide a few good resource for UI inspiration, best practices, and guidance:

http://mashable.com/2011/09/16/ui-design-resources/

Thought I would share. Always nice to see what others are up to.

Manners and HCI Design

It's fairly frequent to hear discussions about our (humans) manners and dealing with new devices. As we adopt new technologies it takes a while to figure out how to incorporate the changes in lifestyle in a way that promotes civility between one another. But that's not what I'm talking about. I'm talking about the manners that the devices and applications we create have.

In my day job I frequently deal with creating alerts for users. In my users' field of work it is important that they are alerted sometimes--even if we have to be a bit obnoxious about it--lives are at stake. But as I microwave a burrito for breakfast and then go attend to a few things while it cools down, it's not really important that I be alerted every 60 seconds that the burrito is done. In fact I rarely forget that I put food in the microwave but I frequently want to let it sit there for a few minutes to cool down. But the designers of my cool looking microwave didn't realize that. As I try to reverse engineer the personas they were expecting to buy said shiny appliance, I can see two possible audiences my microwave is designed for:

1) A user who is old and senile and typically forgets within 3 minutes that they have put food in the microwave and needs to be reminded.

2) A mega-stoner who has the munchies but forgot that they were already cooking those Hot Pockets.

Unfortunately for GE I am neither one of these people and I now have an active dislike for GE and their no-user-scenario-using, beep-making product designers. It's not like an oven where the house could catch fire if you go on vacation with it on. No, microwaves turn off when the little timer goes off. Worst case scenario is cold soup.

Another example that I see more and more online is the pop-up survey within seconds of a page loading. "Would you like to take this survey?" it asks. No, users are not invested in content at this point nor has the site made a good impression on the user. As a researcher and occasional surveyor I get the usefulness of surveys. They are easy, inexpensive and don't take much time. But we have to look at their other qualities--annoying, interrupting and boring--especially when we are asking people to volunteer to give their time and attention to the site's cause without compensation. It's not that surveys are wrong but we must employ them in a manner that models our polite standards of interactions. When we talk about user centered design vs task centered or goal centered, I think the use of manners is a possible discriminator for user centered design. If we are always designing for a person then we are less likely to neglect those sociological and communicative details that affect the experience for the end user. And this user sure would appreciate that.

This stuff really matters...

http://www.edibleapple.com/apple-gets-creative-with-icloud-error-messages-photos/

....but it only matters insofar as most software is devoid of decent error messaging. It doesn't have to go to quite such a cutre extreme as this example from Apple, but consider that often the most direct communication you make to your users comes in the form of error messages.

At work, people have learned to not glibly state in front of me: "Just post a big red error message when that happens. Maybe throw in an exclamation mark, a big red X, or heck, why not a skull and cross-bones?" But that is the common approach:  use this moment of one-to-one messaging to bolster a class/power division between you and your users:  in effect, slap them down and show them who's boss.

Interactive and Input Devices, The Buxton Collection

Bill Buxton is a researcher for Microsoft. He's written a cool book that we saw early in this summer in this very blog. He's also been collecting interactive and input devices for decades. Although these items might not be showing up at our local museums anytime soon, we can still check them out online at the Buxton Collection. The collection takes us through a visual history of the input devices that have played their own role in creating and shaping our field.

Some highlights:

The General Magic Data Rover 840 with sweet physical metaphor action.





The Versatron Foot Mouse. One might think this is marketed towards someone with a medical condition or extreme environment, but no--it's marketed as an improvement over your everyday hand mouse. I think this bad boy from 1984 is exactly what you need for your ottoman if you're a laptop couch junkie.





Okay, I admit, I picked this delight from Zenith simply because it is called the Space Command SC 600-X. Why didn't that name stick? It's way cooler than "remote control" or heaven forbid "clicker."

Captcha

I have an undying hatred for Captcha, it seems to haunt my self confidence whenever I attempt to submit anything online. All it says to me is that the website has unmanageable amounts of spam and that somehow, it's the users fault. Well, maybe no one is being blamed, but it is the user that gets stuck with the bill. I'm glad our justic system isn't built off the same logic. "Well, to prove your not guilty, we would like you to perform a miracle, someone benevolent and righteous enough to do such a thing could never be guilty." So, anyway, I got to thinking about new ways of Captchaing submissions that lower the amount of cognitive/ sensory resources needed to complete it. Most Captcha designs are based on the computer intelligence tests that somehow go back to the stoneage when all we had were words that were easy to read and words that were hard to read. With all of our intelligence in the fields of computer science, psychology, and AI, is this the best we can do? The first thing I thought was along the same lines as what is currently in market place, a text word written plainly, with a bunch of words and letters scrolling in front of it. The idea is that your brain would focus on the static word, and the fly by decoy words would be ignored. Well, I made an example..







It didn't take me long to realize that I wasn't a fan, and that I wan't figuring anything special out. So I got to thinking again. I remember watching Tron and thinking man it's so easy to tell his face is CGI, I wonder how well a computer can tell a CGI face from a real face, I know I can. What if a 2nd gen captcha had two faces a CGI face and a real one and the question was posed, "which of these is a real person?"

Can you answer? I think I can, can a robot answer? no clue.

UMEX, a shorter alternative for the already short SUS?

As you might have noted from one of my previous blogs (SUS), I am a big fan of usability analyses and statistics. One thing I have found time and time again, is that it can be very difficult to get participants to take surveys seriously. There often seems to be a sweet spot when the user has less than 5 questions, but over 10 questions and, whether you want to admit it or not, the number of bad data participants increases exponentially. That said, I came across a study recently by researchers at Intel that encountered a similar problem when attempting to incorporate a 10-item, five-point Likert scale called the System Usability Scale (SUS). To solve this, they decided to empirically reduce the number of questions by using only the highest correlating questions from a modified version of the SUS. The SUS was chosen because it had been extensively tested, and has proven to be a reliable representation of user satisfaction and system usability. However, by cutting down the number of questions from the SUS, it would also reduce the amount of data points, to help offset this, the Likert scales increased from 5 to 7 points. Increasing to a 7 point Likert was also heavily backed up by previous research (see Diefenbach et al. (1993), Cox (1980)). The results of the research was titled the Usability Metric for User Experience (UMEX).  

It was concluded that the UMEX is a “reliable, valid, and sensitive alternative to the System Usability Scale.” It has a high correlation with SUS at that of above 0.80. Because of this, it is suggested that the UMEX is fully capable as acting as a standalone application for usability testing. More so, because of its compact size and ease of application, the Umex is attributed by a fundamental requirement by the Use Experience community: “in order to measure user experience effectively, its components need to be measured efficiently.”

I have not ever used the UMEX or anything like it. I can not say it should be used, I just think someone doing a quick and dirty study might like using it.

Color contrast Calculator

Ok, so in the last post I wrote about color contrast and provided some links to a few calculators. I found however, that the calculators have all been designed for the designers and not for the usability tester. So the bold, adventurous spirit that I am… not really, just interested enough, decided to prototype one. Ok, so it is very early in the Alpha phase, and yes I designed it in excel… but I think it has a lot of potential. 

Here’s what it does.

• .       Provides the practitioner with an eyedrop color selector. Many times when doing analyses, we do not have access to the original code, and even if we did, going through code to find a hexadecimal color code isn’t exactly the best use of time.   Provides a quick pass fail for both color and brightness, as well as a combined pass fail.
• .       Shows percentages for acceptance

What it should/ will do

•   Accept text size
•  Have a second tester for background contrast. A big problem with contrast is not just the for/background contrast, but it is also the amount of changing contrast found in the background. For example, if the background is a faded brick wall, although any given color provide plenty of contrast for the forground, the internal contrast between the levels of brick make text reading illegible.
•   The program should automatically spit out the text needed to present the data, with descriptive stats included and everything. (i.e., A basic color contrast analyses showed low levels of contrast (CD = 100)…) 
• Provide an example of the colors chosen.
• A bread toaster.

I am attaching my first draft for anyone interested in looking. HERE is the link

Color contrast

Although many color design rules originated to support visual impairments, they are beneficial for all users. Reading is not an innate ability; we do not learn to read simply by watching others read. It requires effortful study and attention. Reading can be one of the most cognitive recourse intensive things a user does on a website. For this reason, it is vital that we as UX designers, facilitate easy reading for all users. This will ultimately help users discern text, paragraphs, and text bodies much more efficiently. Background / foreground Color testing is often judged on two primary attributes, the contrast of the colors  and the brightness of the colors. Equations and standards for meeting accessibility requirements have been developed by W3C http://www.w3.org/TR/WCAG10-CSS-TECHS/. These standards provide detailed calculations for determining color contrast effectiveness. These formulas are as follows:

 Brightness Difference:

            The brightness difference is found by subtracting the figure index from the ground. The brightness index is found by multiplying each RGB value by a predefined partition of 1000. The values are then summed together and then the total is devided by 1000. The value for Red is 299, the value for Green is 587, and the value for blue is 114. So the completed equation would be: (299R + 587G + 114B)/1000. Next you subtract the index of the 
figure from the background and you have the difference.

Color Difference

            Color difference is very similar, however, the index is simply a summation of all RGB values and the difference is found by subtracting one from the other.

The range for color brightness difference is 125. The range for color difference is 500.

Many calculators have been created to do this for you.

http://www.hgrebdes.com/colour/spectrum/colourvisibility.html

http://snook.ca/technical/colour_contrast/colour.html

http://www.takeform.net/contrastCalculator.php

http://www.hp.com/hpinfo/abouthp/accessibility/webaccessibility/color_tool.html

Craigslist? Why bother redesigning it?

After all that grueling work, I come across this link for an Adobe Air desktop app of CL.
http://www.cldesktop.com/

I love the sporadic migration of web apps to the desktop (actually I helped design one: Yousendit's "Express"). Somehow it feels like the barbarians storming the walls.

-Rob

Existing Product Redesign vs. New Products

There is a very big difference between doing Interaction and Experience design for new products vs doing these tasks for the redesign or upgrade of existing products. My last two jobs were with companies that had established software products and product managers with loads of client and product knowledge. In this scenario, there is much less up-front user research to be done since the feedback is typically steady and a product manager knows the shortcomings and the opportunities for enhancements. Consequently, it is easy to look at the job of Interaction Design more in the middle of the process. From assignments over the course of my classes, it is typically the early research that is lacking in my projects and I've come to realize that only certain, lucky individuals get to do true product research. The discovery of a need may still come from another role such as a product manager or the business portion of a company. But if the product is new, it is the designer and researcher that must use proper methods to discover the use cases. One of the things I look forward to as I move forward in this career is doing proper research on users with interviews, case studies, focus groups and ethnography, to name the main methods.

New Login Designs - New Problems

I posted something a few weeks about about bad design and noted the issues with single sign-on or the lack thereof.

Recently I came across this post which looks at an emerging issue with a user's ability to login using authentication via an entirely different service, such as Facebook.

This is a login option I don't tend to use - I prefer to keep everything separate - but I thought these stats were interesting, noting how often folks end up with multiple accounts and still can't remember their login:

"User Interface Engineering's analysis of a major online retailer found that 45% of all customers had multiple registrations in the system, 160,000 people requested passwords per day, and 75% of these people never completed the purchase they started once they requested their password. Ouch."

The folks at bagcheck illustrate an approach they're trying in order to help make this type of login easier for the end-user. I like that they show they're process and how it evolves.

What does strike me as odd is that you can see all these other user names when you search for your own... that seems worrisome.

Article: http://bagcheck.com/blog/02-design-solutions-for-new-log-in-problems

Javascript UI Libraries - Bridging the Gap Between UX Designers and Web Developers

I decided to finish my blog posts with the same topic that I started with - the gaps between the developers and designers. Responses to my first post were interesting and insightful.

Again, I remember people talking about developers shooting down their UX ideas because they simply don't think it is possible given the time-constraints. Javascript UI libraries are rapidly evolving into the role of saviors for both UX designers and developers. There are several javascript libraries out there that makes the job of manipulating a web-page's objects within it's Document Object Model very easy. In addition many common widgets that are used most frequently while designing websites are now emulated by simple to use Javascript libraries. Examples of these commonly used widgets are - Accordions, Drop Down Menus, Dialog Boxes, Minimizable boxes etc,.

Following are a few of the many Javascript UI libraries that make the use of these widgets as easy as a couple of lines of code.

YUI

JQuery UI

MochaUI

Scriptaculous

Livepipe

AlloyUI

XUI

Knowledge of the features of these libraries would strengthen your case when a software developer shoots down your proposal stating 'lack of time' as a reason. Software developers in turn can turn themselves into amazing UX developers without much effort if they are familiar with these wonderful tools. Adding new UX features to their repertoire everyday, these libraries are bridging the gap between designers and developers.

Geri Interaction Design: Importance of Logo in Branding

Geri Interaction Design: Importance of Logo in Branding: "New Logo Sketches This is a redesign sketch of a new logo for the HCI site. I attempted to keep some of the same language of the existing l..."

Geri Interaction Design: Card Sort Exercise

Geri Interaction Design: Card Sort Exercise: "Lecture number six had a section about a method of research from the information technology discipline called card sorting. This is a method..."

Geri Interaction Design: Creation of App For HCI site.

Geri Interaction Design: Creation of App For HCI site.: "Wireframe for HCI site This is the wireframe for the proposed redesign of the Iowa State University Human Computer Interaction site. The ho..."

Opportunities for UX Improvement in Retail Websites

My curiosity to know if there are any websites or UX firms that examines different websites for usability metrics led to a few fairly interesting companies, individual blogs and websites. One of my favorite studies conducted by Usography is this UX audit.

Usography reviewed 100 top retail web sites and presented their findings in "Retailer UX Audit". The sites were rated according to a list of 30 user experience feature criteria (listed in the article). The founder of Usography, Paul Bryan, summarized their findings in this article on UXbooth.com. It is interesting to note that on a scale of 30 two companies were were tied for first position. What is more interesting is the fact that these two companies implemented 16 out of the 30 features. I'm sure the article would be even more fascinating to people who worked on the 'Individual Class Project 3' (Socialite) or participated in an in-class activity where we discussed about ideas for a shopping application with social features. Aren't you thrilled to see that some of the best features that were found to be missing from many sites were actually discussed during the in-class activity? For example we discussed about features related to price comparison and visual try-ons. Though companies like Buy.com and Amazon.com which are online-only retailers take the top spots, they only implement half of the features used as the evaluation criteria. This tells us that even in case of mature companies there is a significant potential for UX improvement. I do not believe that implementing all 30 features would increase the sites overall usability. Also a thorough cost-benefit analysis should precede the decision to support implementation of any of the listed features. However this audit provides tremendous value to the companies by pointing-out areas of improvement, without the companies having to invest in a UX evaluation.

Note: Do check-out Usography's website and services. They have an interesting business model and offer several design services with a lot of focus on evaluation.

A Picture Is Worth a Thousand Words...er...Page Hits

The saying is true and Stew Langille, former VP of marketing at Mint, is out to prove it with his new startup visual.ly. Visual.ly will attempt to build a community, market and tools for infographics. Later this year, visual.ly plans to release Web-based “prosumer” tools for editorial, marketing, student and other users to create their own shiny infographics.

According to Langille, some of the most successful posts on Mint.com's site, that garnered the site its user base, were the posts including infographics. These posts would receive 30 to 40 times the page views of non-infographic posts.

Visual.ly hopes to make creating attractive infographics from user data easy--particularly easier than creating them with non-data driven programs like Adobe Photoshop. These designs can then be tweeked and shared as desired.

It is an interesting idea and I'm looking forward to trying it out. Making attractively designed infographics in Illustrator or Photoshop is not always ideal. I'm curious to see how they'll create different themes or styles so all the infographics do not begin to seem the same. A few of my favorites shown so far are True Colors: Color Preferences By Gender, Mars Missions and The Evolution of the Geek.

Google’s new User Interface

Have you noticed Google’s clean, a minimalistic user interface? The new facelift slowly started to spread across Google’s suite of products when Google+ (Google’s answer to Social Networking problems) was introduced. You could say that the new interface has a much more breathing room compared to the previous by looking at the before and after Gmail themes (below). Allowing extra spaces in between links, buttons, within buttons, words, and sentences makes the information on the page easily readable and digestible. By applying different shades of grays to the controls and fonts, the new facelift brings out all the important information to the forefront. Regardless of all the positive aspect about the new interface, you might experience scrolling vertically, roughly about 128 pixels further down (differences in the Gmail’s before and after image height) to view rest of the content, whereas in the old interface the content would be available to you without scrolling vertically.

Gmail Theme (before)


Gmail Theme (after)


Because of the extra spaced links, controls, and large buttons, Google’s new interface is easier to use on my iPad too. I was able to test the new interface with Google News since Gmail only supports iPad friendly web version.

Google News (before)


Google News (after)

Marc Hassenzahl's Why, What, and How.

While reading Marc Hassenzahl’s chapter on User Experience and Experience Design (link below) in conjunction with Buxton’s “Sketching User Experiences”, the differences and what user experience is became clear to me. Commentaries by several user experience gurus at the bottom of Hassenzahl’s chapter are also helpful in understanding user experience and experience design.

The Philips’ Wake-Up Light is a perfect example that describes a (what Hassenzahl calls it) surrogate experience. Let’s say an enlarged version of the wake-up light that was flat and mounted on to one of the bedroom walls, it would only be visible and active during the user set time—by doing so, would it enhance the user experience?

The three levels of Why, What, and How that Hassenzahl, lays out are easy to understand in terms of the experience of a product. Basically, Why clarifies the “needs and emotions involved in an activity, the meaning, the experience.” After the Why is determined, then the What “determines functionality that is able to provide the experience.” And the How is “way of putting the functionality to action.”
Ref: http://www.interaction-design.org/encyclopedia/user_experience_and_experience_design.html

Micro businesses and service design

One of the things that this course has helped me do is recognize service design. I remember when I had my first visual design class in undergrad and I started seeing the world differently and noticing things like alignment, proximity, fonts, and so forth in the media around me. Now the way I perceive the world has a service recog capability that wasn't there before. So I recently saw a very interesting business in my local town that I think is awesome because it's people recognizing a need that is not being met and then fulfilling it. It's not super-complicated but it's a good example of how micro-businesses can work.

The service is called ikea*run. Our city is about 4 hours away from an Ikea store but there are enough people in town who have lived other places and traveled to know that we like Ikea. If you've ever tried to order from Ikea online then you know about their ridonkulous shipping fees. So these clever folks have started a business where you can order Ikea stuff and they will go get for less than the Ikea shipping and without the hassle of going yourself.

http://ikearunhsv.com/index.html

Tag Clouds and Cognition

Tag clouds have been very popular that last few years, even overused in certain circumstances. Trying to present useful information in a tag cloud seems way out of bounds. But what I've been wondering about lately is how to present information to the user in a tag cloud type of presentation where the weighted links and general organization of items is more intuitive.

Tag clouds generally don't make sense to a new user. It's just a jumble of different-sized words. But it is clear that some things are more important and those words come to the forefront. So, when presenting data to a user, perhaps it makes sense to present the more often-used data in bolder text. I'd like to consider contrasting the matrix format with a tag cloud presentation.

Here is an example:

Name: Bo Campbell
Address: California
Phone: 805-867-5309

Versus:

Name Bo Campbell
State California
Phone 805-867-5309

It is important here to know what the user is looking for, so let's assume after exhaustive user research we know that the user is first looking for the name and then the phone number. He doesn't really care about the state. I am setting up some surveys for this, but my hunch is that the time it takes to find the data will be very similar. However, the experience may be much different. Instead of scanning line by line, it may be much easier for the eye to catch the words that are presented to them larger and in the right location.

This is more how our brain has to work in the real world. We don't have danger categorized and ordered for use to scan. We have more important dangers that we look out for and keep our eyes open for. Perhaps the expression of data is easier to comprehend in this format.

A Contextual Usability Framework for a Mobile Computing Environment

I read this article on the Journal of Usability Studies that was published in May 2011. You may be interested to learn about this framework:

The work of several scholars (Bevan & Macleod, 1994; Shami et al., 2005; Thomas & Macredie, 2002) who attempted to identify additional variables that may impact usability and subsequently adoption, led to the conceptual emergence of context of use (herein referred to as context)as it relates to usability, also referred to as contextual usability. Several frameworks encapsulating context have been proposed (Han et al., 2001; Lee & Benbasat, 2003; Sarker & Wells, 2003; Tarasewich, 2003; Yuan & Zheng, 2005). While there may be other usability frameworks that attempt to capture the essence of context, the models cited here provide a representative set of work in this area. From these we adapted the framework proposed by Han et al. (2001) because it offers considerable detail for each dimension they identified.

On the basis of the discussion on approaches to usability evaluation and the framework proposed by Han et al. (2001) and Kwahk and Han (2002), we propose a contextual usability framework for a mobile computing environment. The framework is depicted in Figure 1 and contains three elements. First, the outer circle shows the four contextual factors (i.e., User, Technology, Task/Activity, and Environment) described earlier as impacting usability. Second, the inner circle shows the key usability dimensions (i.e., Effectiveness, Efficiency, Satisfaction, Learnability, Flexibility, Attitude, Operability, etc.). Third, the box on the top of contextual factors shows a list of consequences (i.e., improving systems integration, increasing adoption, retention, loyalty, and trust, etc.).

Compared to the framework proposed by Han et al. (2001) and Kwahk and Han (2002), there are several advantages of the suggested mobile usability framework. Although the previous frameworks proposed by Han et al. (2001) and Kwahk and Han (2002) are comprehensive, they are difficult to follow due to formation and evaluation dimensions being merged into one diagram. Thus, the suggested framework depicted in Figure 1 represents a simple yet direct way to identify and address the various contextual mobile usability dimensions. In addition, with its central focus on usability, it offers specific guidance on the implementation of any interface/interaction project along with potential outcomes.

In addition, two modifications are introduced in terms of nomenclature for mobile contextual usability. First, “Technology” replaces “Product,” as this term helps conceive the system that a user may interact with a greater set of components, instead of simply the device or application itself. One example of this is found in the case of mobile usability where the inclusion of the wireless network is likely in addition to the mobile device (i.e., the product) when studying usability of a mobile product or service. Because mobile usability is mainly related to mobile technology, which continually improves the limitations of mobile interfaces and its applications, the technological factor of a mobile usability framework is an important and unique component that needs to be taken care of. Second, “Task/Activity” replaces “Activity,” as the former term appears more commonly in usability literature when describing the nature of users’ interaction with the technology. In addition, a list of consequences of usability was added to the framework as an output of usability evaluations.

These four variables (i.e., user, task/activity, environment, technology) were used for the presentation of the qualitative review of previous empirical research3 that relates to the usability assessment of mobile applications and/or mobile devices. The benefit of using these variables for the literature review is found in both the structure it provides for the discussion to follow, as well as to help highlight any areas that are lacking investigation.

Ref: http://www.upassoc.org/upa_publications/jus/2011may/coursaris2.html

Emerging approaches to long-term usability

There is no one definitive solution for the problem of how to ensure long-term usability of data.

Ensuring physical survival of the bits is addressed by today’s archiving solutions. Typically, they deal with the obsolescence of media and form factors by migrating the data from one medium to another. Ensuring the usability of the information is the greater challenge, but in many cases there are a number of viable approaches.

These include:

• Using virtualization technology to emulate the obsolete hardware needed to execute the applications that can make the digital artifact useful.
• Converting the artifact to a standard canonical format, so that the problem is limited to ensuring the usability of the standard format.
• Periodically transforming the artifact into a current format.

The right approach often depends on why it is important to ensure the long-term usability of the information, and on the characteristics of the data, such as format or size. Once the business requirements are determined, it becomes possible to adapt and design a solution to meet specific needs.

IBM has been addressing various aspects of ensuring long-term usability over the past decade, with a wide variety of solutions that address both the survival of the bits and the broader issues of long-term usability.

Ref: http://www-935.ibm.com/services/nl/dias/lt/emeging_approaches.html

Content-Incentive-Usability Framework for Corporate Portal Design!

While working on reviewing an Agricultural Knowledge Management Portal I have come across an interesting paper, which discusses about a content-Incentive-Usability Framework for Corporate Portal Design from a Knowledge Management Perspective.

It discusses about three important components:

First, Specify the issues involved with the creation and integration of content for knowledge portals.

Second, highlight the importance of providing incentives for employees to share knowledge.

Third, examine how user acceptance of KM portals can be promoted, and how this knowledge can be used to desing better corporate portals.

If you are interested to learn more about this framework please find resources at http://www.irma-international.org/chapter/content-incentive-usability-framework-corporate/17867/

Swoogle: A Semantic Web Search Engine!

Have you heard of Swoogle?

You can find this search engine at http://swoogle.umbc.edu/index.php?option=com_frontpage&service=search&queryType=search_swt&searchStart=1&searchString=

Swoogle is a search engine for Semantic Web Ontologies, documents, terms and data found on the web. Swoogle provides services to human users through a browser interface and to software agents via RESTful web services. Swoogle employs Resource Description Framework (RDF) semantic technique - and other semantic technique is Topic Map which you may aware of that.

Swoogle is a research project (PhD thesis work of Li Ding) developed at and is hosted by the University of Maryland, Baltimore County. This project received funding from US DARPA and NSF.

You can read more at - http://www.searchenginejournal.com/swoogle-an-engine-for-the-semantic-web/5469/

How much is too much?

Did you ever hear about the philosophy: "fail early, fail fast". I picked up this line while reading about the "lean start-up philosophy".

Imagine a two person start-up trying to develop a web 2.0 application. Time is the most precious resource for the company and delivering a working prototype is everything! In such circumstances, the million dollar questions is: "how much time do you spend on conceptualizing, planning and designing before you start implementing the prototype? In other words, how much (time spend on design/planning) is too much?"

I know that the answer to this different for each scenario and is dependent upon - the time you have, the overall goal of the project and the immediate goal of the prototype. However I thought, it would be neat if someone could come-up with a 'COMPLEX' flowchart that helps people figure out which design methodologies are more relevant to a particular situation than others. I call it a COMPLEX flow-chart since the number of possible scenarios are infinite and each scenario warrants a unique approach. However it should be possible to identify the 10-20 most common(or general) scenarios and then create a flow chart that. For example the flowchart would tell you that - the card-sorting method is more relevant to scenario X, but usability testing with low fidelity prototypes are more suitable for scenario Y. Basically if we synthesize the different design principles, techniques, methods learned in this class into an applicability based flowchart it would be a nifty tool!

I would like to know your thoughts/opinions on this. Do you think it would be possible? Or would it be too much of a generalization? Or too complicated?

Low/High Fidelity Prototype at Work

There are many different ways to prototyping web pages and applications. In this post I want to mainly touch on low and high fidelity prototypes and which fits best at my company currently. I work in an agile development where the software engineers tend to work faster (at least that’s the case at my workplace), which means the engineers would have a “working” prototype for demonstration prior to going over a low fidelity prototype. Perhaps the engineers should hold off until the low fidelity prototypes are approved and signed off, but that does not seem to happen in the agile world.

When I created low fidelity prototypes (very few times), I thought it generated valuable usability conversation, arguments and suggestions, but unfortunately the scrum team (engineers, BA, PM, QA) thought it decelerated the development process. Whenever there is a meeting (backlog grooming, project planning, design) that debates a feature, the teams would want to see the big picture (high fidelity prototypes) right of the bat.

The quality and usability of the applications at my workplace could be highly improved by at least fifty plus percent if the teams take the role of design in software product development seriously. In Bill Buxton's book, a clear representation of design, engineering, marketing, and sales in all phases of the product development process shows that the engineering team’s role in the design phase is very little, which means that the engineering team would have no room to demonstrate a “working” prototype.

Data visualization on the iPad using Flash Builder

I came across Adobe’s sales dashboard demo app while searching for the Flash Builder tutorials. My initial thought about this demo app was that if I were to prototype a dashboard app, it would not have looked anything like this demo app. My prototype would have carried a data grid, some charts, and lots and lots of buttons! This demo app carries an intuitive user interface, which represents big and small deals in circles/bubbles that users can interact with on the x and y-axis. By displaying information in a way that is easier for an end-user to digest large chunks of data in a usable interface, would ultimately enhance the user experience. The touch gestures in the iPad are perfect and the sales dashboard app built using the Flash Builder demos how pleasurable the user experience can be. It’s very useful to let the user do a gesture based interaction for the purpose of knowing that something is happening and being informed that something is happening in the device.

I haven’t played with the Flash Builder’s mobile properties, but from what I’ve seen (tutorials, sample flash builder mobile apps) I seem to enjoy it.

America: The Story of Us

I don’t know if you have watched America: The Story of Us but this is a very interesting documentary. A co-worker was watching it over lunch the other day and I quickly became absorbed. I am not an avid history buff and I don’t watch the history channel on a regular basis, except for American Pickers, but this show had me immediately. The story is presented in a rich factual way. Though they are reenacting the information it is truly breath taking and makes the history come alive. It isn’t your usual boring narrated film. The thought that went into the design elements and how technology was used to enhance the story not take away from it was phenomenal. If you have not watched the series you can see it on Netflix. Hurry before the price goes up. I know I plan to take a look before canceling my Netflix subscription.

Mobile Application Development - Data/Functionality Driven Decisions

I work in a large-company that very recently instituted a mobile-computing team. After attending a talk about the mobile UX, I could identify an interesting challenges while choosing the general mobile application development direction.

Native vs. Web Applications - choosing the right path!

Native application are mobile applications native to the mobile OS. (Eg. iOS, Android). Web applications are applications written in HTML/JavaScript, accessible through a web-browser on the mobile device and respond to gestures just like native applications. It is important to choose between native and mobile applications because of the following reasons:

1. Native applications provide hardware interaction support like camera integration, gps integration etc., Web applications do not support this.

2. Web application code-base is easy to maintain since you can write once and deploy across all platforms.

When native applications are chosen since code needs to be written for each single platform and also maintaining a uniform UI/UX design is an additional challenge.

So choose wisely!

Never Used a Computer Before in His Life

There are people in this world who have never used a computer! We are often quick to forget this. I find it hard to believe too.

Jennifer Boriss, a Fire Fox developer, recently encountered 60 year old Joe, a cafeteria worker, stumbling around the mall food court "bored out of his mind". Boriss had originally traveled to the mall to conduct user tests on how people surf the web (interesting note: she mentions she finds malls an excellent place to find user test participants due to the variation in technical expertise). She ended up spending three hours with Joe, finding his unbiased, inexperienced and untouched impression of the Internet a source of valuable insight.

While she did focus primarily on browser usability, I loved how she found that Joe instantly attempted to use the "Help" menu as a guide for him to navigate the world wide web. There really is no guide book for using the web. Its hard to believe that perhaps we take for granted all the drop down menus, text boxes, and scroll bars we seemingly find so intuitive. While these inexperienced users are becoming more and more rare, Joe's experience serves as a good reminder of remembering to think about your users' context, skill level and basis of interaction.

A few of Boriss's discoveries:

• No matter the user skill level, users stick with what they know. In the case of new users: text. Simple and informative text is effective.
• Don't assume users will naturally investigate how software will work. Provide visual feedback and encouragement.
• Don't make too many assumptions on how user's will use your technology

We truly take for granted what we know as we become experienced technology users. We've become so accustomed to scroll bars and drop down menus. Now we have touch interfaces where we can scroll around with a finger touch and zoom in with a pinch. We are even becoming more familiar with motion sensing devices that allow us to swipe through the air and move around to interact with the virtual world. It would be very interesting to see Joe try out a smartphone, tablet, or the Microsoft Kinect.

With the growth of ubiquitous computing, its interesting to think of how we will interact with technology in the future and decide what is natural and ideal. I personally strive and hope to create and support technologies that will us to interact in such natural ways that provide us deeper interaction with the world around us. I think we will need to learn more about ways to mesh our expertise of perceiving physical affordances in the world with our expertise of navigating virtual world of software and the web.

System Usability Scale (SUS)

I felt like we went over the SUS very quickly, so I wanted to elaborate on it a little.

Originally developed by John Brook in 1986, the System Usability Scale (SUS) is a self reported survey metric used to evaluate application usability. The survey is comprised of 10 questions that rate user satisfaction or dissatisfaction on a 5-point scale. The odd questions are positively worded and the even are negatively worded, this is done to add variation to the survey. The questions are as follows:

1. I think that I would like to use this system frequently.
2. I found the system unnecessarily complex.
3. I thought the system was easy to use.
4. I think that I would need the support of a technical person to be able to use this system.
5. I found the various functions in this system were well integrated.
6. I thought there was too much inconsistency in this system.
7. I would imagine that most people would learn to use this system very quickly.
8. I found the system very cumbersome to use.
9. I felt very confident using the system.
10. I needed to learn a lot of things before I could get going with this system.

To score the SUS you must first change each score from the alternating 1-5 scale to a standard 0-4 scale where 0 is dissatisfied and 5 is very satisfied. To do this, you take the odd scores (positive worded scores) and subtract 1 from each score. For example, if you had a score of 5 it would now be 4 (5-1). Then you take all of the even scores and make it reverse by subtracting the score from 5. For example if you had a score of 3 it would now be a 2 (5-3). All of the scores can now be summed together and multiplied by 2.5. It is multiplied by 2.5 to make the score out of 100. If each odd score was a five and each even score was a 1, the final score would be a perfect SUS score of 100. SUS scores average at about 66% (69% Median). With 77% in the 75^th percentile, anything over 80% can be considered a “good” score (Tullis & Albert, 2008).

Below are some quick reference answers.

How is the SUS used?
          The SUS is most frequently used to compare application designs

How many questions are in the SUS questionare?
          10

Is the SUS reliable?
          Multiples studies (Lewis & Sauro 2009; Bangor et al 2008) have founds the SUS to have a Cronbach’s Alpha of .90 (note anything above .7 is considered “good”)

What does the SUS try to measure?
          Effectiveness, Efficiency, Satisfaction

Please, if you have any other FAQs please ask them and I will answer (look up the answer)

Interesting Observations, and Related Resources, from Working on the HCI Website

As I carried out my discovery/research work for my attempt at a re-design of our HCI website, I came across a lot of interesting data, particularly from the site's Google Analytics account, that brought UX concepts back to mind that I was first introduced to when getting into the field. In my experience, in the past year, there seems to have been a dramatic decrease in the mentions of the importance of "copy" and proper "writing for the web." These topics were once extremely prominent across UX publications and online entities. This article, by French UX consultancy Miratech, outlines some reasons, based on comparisons with print reading, that call for curtailed and, most importantly, scannable amounts of copy. The tendency to scan and not gaze as much and decreased information retention mean a lot for text-heavy sites like the current HCI portal. It means that important links, like the PDF versions of all course offerings, found at the very bottom of some inner site pages, are rarely noticed and thus substantially underutilized. In fact, on the page this PDF lives on, Google's in-page click analysis shows an insignificant use (below 1% in page clicks) of the PDF link. In general, throughout the HCI website, less than 4-5% of clicks occur below the fold. Besides for PDF resources like this course handbook, this means that other important pieces of information may be jumped over: contact information, application information, etc.. as all of these academic tidbits live within paragraphs of extensive text. I would say the homepage suffers from the very same problem and that it may correlate with the low depth and length of visits that the site (for 50% + of visits), as a whole, experiences (in absolutes, and not in averages since some students/faculty behaviors are outliers and increase the mean).

So, although it's a relatively old topic in the web-focused domain of the HCI/UX field, it's interesting to once again see a working example of it. This is something I am paying specific attention to during the CFR.org re-design, which I am mid-way in terms of completing, particularly with certain about pages; the coupling of lengthy paragraphs and poor font choices (size/family) make for pages from which most users don't glean anything useful.

As I was thinking about all of this web copy talk, it brought to mine instances of menus, particularly "specials menus" in restaurants I've visited, where I've felt as equally burdened as when trying to find information on a much too wordy website... a topic which kind of ties in with service design. I'm wondering if anyone has perhaps potentially read or knows of resources related not specifically to web and writing, but to, more generally, services and writing/textual components of the service. I'd love to read more into it.

Pepto Bismol is Expensive but Feels So Good

The rising cost of design as a project progresses goes hand-in-hand with the "cone of uncertainty" in project management. A designer rarely gets the opportunity to revisit design the farther along a product goes. We are relegated to doing the best we can and then we watch as the design floats down the river, down the conveyer belt, dropped into a container, a lid sealed on, and a label. In a poor process, these late design opportunities present themselves more often, maybe due to ignorance at the upper levels, or cynicism about the design process. But in today's generally "Agile" environment, it happens rarely, though I wouldn't be blogging about it if I didn't recently get that opportunity. And wow, it is a really great opportunity, though not without risks and difficulties.

Our engineering department recently decided to change their code-base. In other words, a very quick and complete rewrite of a project that I had done research, design, and testing on. I was happy with the end-product in general, but one little piece was bothering me and we didn't have enough time to do any more design. It would have worked fine, but if you're a designer, you know, it needs to sit well in the gut. This wasn't sitting well. And then, POW, a new chance. And what a chance it has been. It's expensive, yes. Not as expensive as after the release, but it is costing them. At least the cost was factored into the change decision and the top brass are on-board. Consequently, my gut feels better. The area I didn't like is smooth as silk now. I was offered redemption! I guess I'm just saying that I'm stoked I got this chance and wish there was some part of the process that could be built-in for it, but it's textbook malpractice. Just costs to much.

It must be said, also, that the process isn't completed, yet. The code is still being rewritten and this entire rewrite is to take 4-6 weeks. In other word, I have very little time to test my new design and testing is the real proof. Without the testing, it's just a hunch, and that's scarier than not having a strong gut feeling about it. So I'm struggling to get to a point where I can test, and testing takes so much time, and means iteration. Gotta do it. Otherwise, there goes that twinge in the gut again. Ready to release on a beta of 30 large clients without usability testing? I have just one thing to ask ya, are you feelin' lucky? Huh, punk, are ya?

Service Design Tools

At my work place, one of my boss has a large poster of Service Design Tools hanging on one of the wall. It spurred an interesting discussion between me and her. This graphic representation of how each discipline is intertwined and where they have their roots is fascinating. It shows the inter-relation, history as well as mile stones in each field. Hope you'll enjoy as much as I did.

3M's Visualization Attention Service

https://vas.3m.com/

I came across this very interesting services provided by 3M when I was searching for various Eye Tracking technology. Recently, I got to try Tobii's (http://www.tobii.com/en/analysis-and-research/global/?gclid=CKnmjuelhKoCFacaQgodLmHGzA) Eye Tracking technology which was super cool! It's cost factor led me to research other inexpensive methods that captures a user's attention.

3M which is usually famous for all their typical products has now come out with a service called Visual Attention Service. They claim that they can "accurately indicate what design elements people are most likely to notice in the first 3-5 seconds". Now that is quite fascinating that they can accurately determine what catches the users attention. The way it works is that you can upload an image and instantly the 3M's VAS will generate heat maps and hot spots (based on scientific methods) that provides other information such which elements will be noticed by the user in the first 3-5 seconds.

Following is excerpts from their website:
http://solutions.3m.com/wps/portal/3M/en_US/VisualAttentionService/home/why_use_vas/

"The tool analyzes basic design elements such as colors, faces, shapes, contrast and text, to accurately predict which areas will attract attention in the first 3 to 5 seconds. The results show you the hotspots – and the not-so-hot spots – so you can easily confirm your design choices or alter your image to emphasize specific elements.

3M VAS does not measure the strength of marking messages or the emotional impact of a design – it goes straight to the heart of visual science to tell you where the human eye will naturally gravitate in the first few seconds of viewing. Once you're certain you've grabbed the attention of as many people as possible, your next steps depend on your own marketing goals and needs."

This is a great inexpensive (first 5 images free and then you have various subscription options) way to test designs in the early phase instead of using conducting a usability testing. This approach can be integrated early on in the design process as a very cost effective method that can generate valid data.

Global companies must harness cloud-based services

The url below is at a large IT conference and highlights the partnership and ideas of Oracle and more specifically InfoSys.

http://www.infosys.com/Oracle/features-opinions/Pages/oracle-open-world-keynote2010.aspx

'Look beyond the cloud'
Global companies must harness cloud-based services and platforms, and capitalize on solutions based on multi-tenancy and non-linear payment models to accelerate innovation.

'Invest in the future'
Companies must serve the digital generation by focusing on mobile technologies in diverse areas such as e-Commerce and healthcare. They can enable better collaboration across the enterprise through social media and pervasive computing.

This is very much worth the listen. Particulary notice the presentation on "iEngage" which is one of the infosys platform products. iEngage goes beyond creating facilitation of information transfer and becomes an interactive engagement platform. In the presentation it refers to consumers. Companies must understand the power is at the consumer (users) level and need to understand the consumers demand.

Tesco's subway shopping

A friend at work showed me this the other day and I just think it's a perfect example of service design in action. Tesco, a global grocery store chain, has created a way for shoppers to purchase groceries by scanning grocery items on a giant graphic on subway walls using their cell phones and then Tesco will deliver them to the shopper's home.

Amazing service design. Saves time and eliminates a lot of the work of shopping for customers and I imagine it could lead to quite a revenue boost for Tesco. Plus all of the free viral marketing that they are getting.

http://www.digitaltrends.com/mobile/south-korean-supermarket-chain-opens-virtual-grocery-stores-in-subways/

http://www.youtube.com/watch?v=oPM4Ui6Sjfk&feature=youtube_gdata_player

Eye tracking and custom eye-drawing software

Source: http://www.eyewriter.org/

I was browsing for something (I can’t remember what) about a week ago… I might have started with google’s sci/tech news and landed on the EyeWriter.

EyeWriter is a low-cost eye tracking and custom eye-drawing software that enables you to write or draw using your eyes instead of your hand. It’s interesting how these two technologies work together to help Tony Quan (graffiti artist), who was diagnosed with paralyzing Amyotrophic Lateral Sclerosis (ALS). Tony is now able to draw again using just his eyes with EyeWriter.

What if EyeWriter was combined with other software like Word, Excel, or games that are customized to fit the needs of an individual and what if our smart phones were equipped with this combination? Would we achieve a better user experience since the number of clicks and taps could be relatively minimal? And just as I was wondering how this technology could be combined with robots, I came across the LiveWriter which is EyeWriter + Robot Arm. But I'm aware of other ways to have a robot write or draw something, and LiveWriter is another option that is opensource and low-cost.

Get the code from: http://code.google.com/p/eyewriter/downloads/list

Potential to improve some user experiences Using HTML 5

Apple's iphone and ipad doesnot support the flash and silverlight, which is a big draw back for users as well as from user experience angle. In Such cases HTML 5 is alternate for creating RIA.

HTML 5 has potential to improve the improve some user experiences, it comes with its own set of implementation challenges that can outweigh its benefits. UED professionals should look to HTML 5 as a means to improve accessibility, design apps for Apple devices, and build text-heavy sites.

Using HTML 5 we can improve the experiences in some of the places like

• Experiences for people with disabilities
• Apps that are solely intended for Apple devices
• Producing text-heavy sites that require text resizing

Some of the Best features about HTML 5 which can be considered while building best User experience Design

• Movable content : The user can easily drag and drop any web content making the user interface very easy
• Quick access to videos and audios : As there is no need of flash plug-ins , so the site will load very quickly by using less lines of codes

http://html5demos.com/
http://html5gallery.com/

http://www.beautyoftheweb.com/?fbid=KRSl2gndnuX#

Social Circles, Service Design, and Other Thoughts

Today, I wanted to point out two articles I've come across during my usual, pre-work Monday morning read.

First, and most relevant to our Google+ discussions in class, here's a piece by Frank Spillers, who, like Mike, emphasizes that perhaps the greatest innovation of Google+ is the introduction of social circles. Frank concludes that this extraction of a "real-world social phenomenon" and its application to Google's "user experience strategy" is a sign of "intelligent life" in social networking and design. This particularly rang a bell with me as I thought in a similar vein for my Craigslist re-design project in this course; breaking away from the "social media" stereotype of social design was a main, personal goal during that individual project and to effectively do so, I had to think of "real-world social phenomena," as Frank describes them, inherent in real-world activities that parallel Craigslist's functionality. Out of this perspective, I was able to derive social functionality that did, in the end, prove useful to the users I was testing: bookmarking/saving of listings (much like physical ads -- both for later reference and for sharing with others), more personal, direct sharing of ads (via a bunch of mediums including of course social media channels and e-mail), and friends' activity on the "market"/Craigslist (bordering on this idea of "social circles," we're definitely more prone to trust those within our circles during transactions, as opposed to strangers).. and so on.

Another relevant piece I came across is a cool booklet about service design and its implications for local authorities. Most interesting about this literature, of course, is the extension of service design's usefulness from more profit-oriented entities that we've examined to public services that directly concern local authorities and governments. As "public services are currently confronted with a number of complex social challenges" (higher demand, aging population, etc.) and simultaneous "squeeze[s] on government resources," service design emerges as a "new discipline" that can cost-effectively help "reach solutions relatively quickly and in a manner that is highly visual and comprehensivle for all." Ever since Mike introduced us to the topic in class, I've been highly interested with keeping service design in mind as a career direction, perhaps after these studies. Articles like this one only re-inforce his take that the discipline is gaining more and more importance and is a great market for HCI practitioners, current and future, to think about entering.