Good Design Makes Us Happy

In a TED conference, Don Norman brought in the concept of the "New Me" and shared the 3 ways that good design can make us happy. He said as technology becomes pervasive and the boundaries to access information are diminishing, the ease of replicating a product's functionality has caused the product to loose its attractiveness. To complement for its setback, he feels the need for the product to look aesthetically appealing and must emote a person's emotion of happiness and creativity.

To emote happiness and creativity, one must remove fear. And that feeling of fear can be countered with good design which is capable of interacting with the person at 3 levels - visceral, behavioral and reflective.

Visceral design communicates through a person's vision. It is about manipulating a person's perceptive of the object through colours and styles.

Behavioral design makes a person feel in control. This principle follows closely to the human subconsciously responds where when designing an object, the human norm reactions are taken into consideration.

Reflective design triggers the little "voice" in us that meddles with our judgement that eventually determines our decision.

Norman has conducted many interesting research on designs and emotions. Do visit his site at http://www.jnd.org/about.html to find out more.

With the understanding that an individual can emote different feelings based on aesthetic design, there is a need for us to balance out the elements to be induced in the product or service. Hence, the principle of simplicity or intuitive must be questioned at each designing phase. This is crucial as we often want to provide the best, but to be the best often leads to having more elements in a small frame of an object. Therefore, techniques such as Heuristics Usability evaluation is introduced.

Basing on Heuristic Usability Evaluation alone does not suffice in providing real life responses and experiences of the product of service. The need for usability testing is required to obtain firsthand feedback. In order to perform the test, tracking technologies are put in place to capture a subject's behavior which will be used for further evaluation later.

Emotion – not to be taken lightly for a successful interface!

Often in the aspect of HCI, we are interested in learning how to create a system that is of high utility or high usability for the user. What’s intriguing is that most of the products in the market are already quite usable and valuable to the user, the only way your product can have an edge over your competitors is when your product has the power to create positive emotion in your user!

These days, studies have shifted slightly to more on the human aspect. For example, research on the importance of human’s emotion in HCI is only a recent trend (research papers found are mostly published in the year 2000 onwards). In this blog post, we would give three models of emotion as well as some theories & application of emotion in HCI.

Models of Emotion

Fig 1. Neurological structure of emotion 

LeDoux’s (1996) model stated that generally speaking, every sensory input first have to pass through the Thalamus which can be interpreted as the middleman to relay the information to either the Cortex for high level processing or the Limbic System. The limbic system in short, is the part of your brain that perceives the emotion and enables you to feel it. However, what’s interesting to HCI practitioner is the thalamus-cortex-limbic pathway. This pathway generate emotion is caused by cognitive thinking and is generally linked to emotion such as frustration, pride, satisfaction that user feels when using the system.

Fig 2. Don Norman's three level of brain processing

The second model is presented by Don Norman, human as the most complex animal has three levels of processing in their brain. Visceral is the lowest level, it is how you feel immediately when you make a judgement. Whereas Behavioural and the Reflective level are linked and are of higher level; cognitive thinking is done before producing an emotion on that particular product. It affirms to LeDoux’s model whereby emotions can be created by cognitive thinking as well.

The third and the last model would be of Rafaeli and Vilani-Yavetz. They presented three dimensions: instrumentality, aesthetics, and symbolism that would evoke emotions. Instrumentality refer to how well the product help in accomplishing user task; this is what we have been learning – the usability aspect. For aesthetics, it is said that the aesthetics quality of a product influences consumer’s attitude towards the product. For example, Apple has done a very great job in this particular area; their products strive for zen-like simplicity in their design. And many has indeed purchased their product mainly due to how aesthetically pleasing the product is. Lastly symbolism is the association your product has on the user. For example the ability to personalize the skin of your product could give a sense of self-identity for the user. 

Theories & application of emotion in HCI

1. Thoughts created by emotions tend to dominate cognitive thoughts. Cognitive thoughts are thoughts like thinking how to solve a particular problem (the thalamus-cortex-limbic pathway), whereby emotional thoughts could be “I won’t want to use this system anymore” after being frustrated with a system. In HCI–context, the use of a “beep” sound (beep is associated with sense of urgency) will grab a user’s attention immediately even if the user is focused on cognitive thoughts. Usage of the “beep” sound must be used with care as well, if the user is already frustrated with the cognitive thoughts, the sound would do only harm than good.


2. Emotion stimulus events are generally better remembered than those of unemotional. Especially negative events, users are more than likely to recall them. Emotion encoded in a particular mood is also better recalled when in the same mood.  Hmm, pretty sure you are capable of listing some products that you really had a bad user experience with, more easily if you are in bad mood now.


3. People in positive mood are more effective in their performance. In HCI-context, if your interfaces do not make a user frustrated (Rafaeli and Vilani-Yavetz’s instrumentality), user would naturally feel more positive. And the chances are that the user would better utilize the tools that you have created for the user. An example in our context would be comparison between the various IDE in the market. Imagine you are trying to create object-oriented programs using Eclipse or Blue-J, creating multiple classes of objects in Blue-J would cluster your interfaces pretty quickly, whereby creating objects in Eclipse is a breeze. Definitely, the time taken to finish coding the same software would be different. 


4. In general, there are 8 basic needs for an individuals, fulfilling either of the need will trigger a positive emotion in the user. They are
1.  Physiological – hunger, thirst, bodily comfort
2. Safety/security – being out of danger
3. Social: affiliate with others, be accepted
4.  Esteem: to achieve, be competent, gain approval and recognition
5. Cognitive: to know, to understand and explore
6. Aesthetic: symmetry, order and beauty
7.  Self-Actualization: to find self-fulfillment and realize one’s potential
8. Transcendence: help others find their self-fulfillment and realize their potential
5. 
   
         For example, knowing that you are shopping at a secured site tends to let the user feel more at ease compared to one whereby it give no sense of security. Another example would be for education software, when the student has correctly answered the question, appraisal can be given whereby the user would feel a sense of self-esteem – triggering positive emotion.


6. There’s this concept of residual emotion, whereby if emotion A was triggered and emotion B is triggered soon after A, the intensity of emotion B would be much stronger if A has not fade away yet. For example when you have just completed a project (sense of accomplishment, emotion A) and you want to upload it to IVLE’s workbin. However, IVLE’s procedure of uploading document keep giving you an error “File type not accepted” with no remedies provided. This would inevitably trigger a much more intensified sense of frustration (emotion B).


7. Colors play a key role in the emotion as well. In our past blog posts, there had been 2 posts on the usage of colors. Choosing the appropriate colors would definitely trigger the right emotion! We shall not repeat what’s stated; look back for the 2 posts if you are interested on what kind of colors create what kind of emotions!

Summing it up, we hope that with the models and theories presented about emotion, it will create a sense of awareness of how important the role of emotion in HCI is; the kind of effect it would have on user. Certainly, an application that induces positive emotion would have an edge over its competitors; assuming usability and function wise are on the same level. 

References
Fishwick, P. (n.d.). Exploring Attributes of Skinas Potential Antecedents of Emotion in HCI. MIT Press.

Nass, S. B. (2003). Emotion in Human-ComputerInteraction. In S. B. Nass, The human-computer interaction handbook.

Norman, D. A. (2003). Attractive Things Works Betteer.In D. A. Norman, Science of affect and emotion.

Cognitive and Pluralistic Usability Walkthroughs

Evaluation is a important process in HCI which helps to ensure that the product is verified and validated. Verification is the correctness within the terms of the product specification, in other words, designing the product right. While validation is the correctness of the product within the terms of its intended use, which means designing the right product.

There are several usability evaluation methods that can help developers in designing user interfaces that are easy to learn and use. The different methods helps to discover usability problems during the product development process so as to fine tune the interface to perfection.

We have looked at 2 evaluation methods, Usability Testing and Heuristic Evaluation during Lecture 4. In this post, we will be exploring 2 other methods that is used in HCI evaluation which is the Cognitive Walkthrough and Pluralistic Walkthrough methods.

What is Cognitive Walkthrough?
The cognitive walkthrough is a usability testing method that evaluates the design of a user interface its ease of exploratory learning based on cognitive learning and use. This method can be done on the interface at any time during the development phase from the pre design stage to the post design stage. The walkthrough process consists of a preparatory phase and a analysis phase. During the preparatory phase, evaluators determine the interface to be used and its representative users, the task, and the actions to be taken during the task. While in the analysis phase, the evaluators work through the 4 steps of HCI:

1. The user sets a goal to be completed within the system
2. The user determines on the current available actions
3. The user selects the action that they think will take them closer to their goal
4. The user performs the action and evaluates the feedback given by the system

Example of Cognitive Walkthrough on iTunes

Part 1

Part 2

Pros and Cons
Cognitive walkthough is usually good at identify certain classes of problems with a interface, especially showing how easy or difficult a system is to learn or use effectively. In other words, how difficult it is to start using the system without reading the documentation.

The disadvantage of cognitive walkthough is that when it is used on larger or tasks with higher complexity, it can be quite time-consuming.

Pluralistic Walkthrough
The next evaluation method that we will be looking at is the pluralistic walkthrough. This method unlike the cognitive walkthrough is a group inspection method that brings representative users, system designers and usability experts together into a discussion session to come out with new ideas. The discussion is based on tasks that the participants try to perform with the help of hardcopy panels of the interface. The users will receive a set of hardcopies of the dialogues that they need to perform the given tasks. Documentation or help functions are usually not required because the interface designers are around to answer any questions or clear any doubts. Therefore, the users are able to carry out the tasks and the designers will get valuable hints about the usability of the overall system.

The pluralistic walkthrough method has five characteristics:

1. The method will include three types of participants in the same walkthrough session, namely the representative users, system designers and usability experts.
2. The interface is presented with hardcopy panels and the panels are presented in the same order as they would appear in the actual system.
3. All the three types of participants will take the role of a user.
4. The participants will write down the actions they would take to perform each of the given tasks.
5. The group will discuss the solutions to which they have reached. The administrator first presents a correct answer. Following that, the users will describe their solutions, and only after that, the system designers and usability experts will offer their opinions.

Example of a pluralistic walkthrough setting



Pros and Cons
This walkthrough method provides reliable data on a particular user interface panel in much the same way as traditional usability testing. However, the efficiency of the system, the user interface flow and navigation throughout the system cannot be reliably evaluated with the use of this method.





References:
http://www.youtube.com/watch?v=Ro77wQq0sWo
http://www.youtube.com/watch?v=P72XbgQ-Z_k&feature=related
http://www.infodesign.com.au/ftp/UsabilityTesting.pdf
http://www.chici.org/references/designing_evaluations_to_evaluate.pdf
http://www.useit.com/papers/heuristic/inspection_summary.html
http://ics.colorado.edu/techpubs/pdf/92-07.pdf
http://www.soberit.hut.fi/~sri/pluralistic.pdf
http://www.ukoln.ac.uk/qa-focus/documents/briefings/briefing-87/html/
http://en.wikipedia.org/wiki/Usability#Inspectionmethods
http://www.cs.cmu.edu/~bam/nsfworkshop/hcireport.html#Methods
http://en.wikipedia.org/wiki/Cognitive_walkthrough

Color in Design - Part 2

From Color in Design - part 1, you have learned the meanings of various colors. To use colors effectively, changing their properties can result in different effects. With the knowledge of color properties, creating a color scheme would be less complicated. This post will cover hue, saturation,value, chroma, tints, tones and shades of colors.

Hue

What it is: Hue basically refers to colors. Blue, green, red are hues.

Effect in design: Convey important messages. (Messages of each colors can be found in part 1)

Primary Hues

Secondary Hues

Example:

Pure hues used to give emphasize on the mood of website

 

Saturation

What it is: How hues appear under different lighting

Effect in design: Colors with similar saturation levels create more cohesive-looking designs. Low saturated colors would make high saturated colors stand out. A good example for using high vs low saturated colors would be text with a high saturated color on a background with low saturated color.

Note: High saturated colors do not refer to light colors.

Low Saturated Red

High Saturated Red

Example:

High saturated blue texts are used to stand out from low saturated blue background

Chroma

What it is: Purity of color. Hue with high chroma means no black, white or gray is added. 

Effect in design: It will be elaborated in the following properties, namely tint, tone and shade.

Tint

What it is: Hue with white added. Very light tints are sometimes called pastels.

Effect in design: Create vintage or lighter designs. Pastels tints can make designs appear to be more feminine or appeal to parents of babies and toddlers.

Red Tint

Example:

Tints bring lighter mood

Tone

What it is: Hue with gray added.

Effect in design: Can create a vintage or sophisticated/elegant feel to websites, depending on the hues. 

Red Tone

Example:

Combining different tones can give a vintage feel to website design

Shade

What it is: Hue with black added.

Effect in design: Can serve as neutral colors. Shade is combined with tints to avoid giving a dark and heavy feel.

Red Shade

Example:

Red shaded background gives neutrality to the overall design, as it reduce the overwhelming effect of pure red

Value

What it is: How light or dark a color is.

Effect in design: Colors with high contrast values, especially the ones with high chroma, generally create more aesthetically pleasing designs. 

Light Red

Dark Red

Example:

Different values in colors display contrast, which make the overall design visually appealing

Team 17 Developing app for iPad

Previously, we introduced our project's concept and that is to create an app that enhances management of personal healthcare. Today, we will share with you the technical prospects and limitations revolving around our project.

Our preferred handheld device: iPad

According to royal.pingdom.com, Apples' iPad owns 88% of the global web traffic. Trailing behind are devices that run on operating systems like Android which accounts for 11% of the web traffic, webOS 0.5% and Blackberry OS 0.5%. In general, Joshua Toposky explains in engadget.com that the success of iPad's popularity and high web traffic can be attributed to the improvement on its sleek exterior design and efficient performance - shorter programme respond timing and easy to understand interface.

Ranking as the most favorable portable device over the years, it is no wonder that as of 02 March 2012, Apple's store has hit an astonishing six figures number of apps, of which 500,000 are iPhone apps and 140,000 more for the well - received iPad (adapted from www.apple.com - iPhone and iPad).

Hence, given Apple's pervasiveness in the market and the growing demand for iPad, we have decided to create our app which is compatible to the Apples' iPad.

Software Consideration

Flash will be our chosen developer software to create develop and simulate our app in Apple's iPad environment.

Design Consideration

We will be following closely to Apple's guideline in developing our app for iPad.

1) Display

While developing an app for iPad, Apple explains that:

The comfortable minimum size of tappable UI elements is 44 x 44 points.

The quality of app artwork is apparent.

The user's focus is on the content.

The dimension for the display on an iPad while in:

Portrait - 768 x 1024 pixels

Landscape - 1024 x 768 pixels

Most Apps have a single window.

2) Gesture

The following shows the gestures users make to interact with iOS - based devices.

Tap

- To press or select a control or item.

Drag

- To scroll or pan.

- To drag an element.

Flick

- To scroll or pan quickly.

Swipe

- With one finger, to reveal the delete button in a table-view row or to reveal Notification Center.

- With four fingers, to switch between apps on iPad.

Double Tap

- To zoom in and center a block of content or an image

- To zoom out.

Pinch

- Pinch open to zoom in.

- Pinch open to zoom out.

Touch & hold

- In editable and selectable text, to display a magnified view for cursor positioning.

Shake

- To initiate an undo or redo action.

3) Interaction

Apple explains that user interacts will one app at a time.