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.

Team 17 Proposal Review!

The Crisis

Aging population in Singapore
The first problem that our team has identified is the aging population crisis happening in Singapore. As one of the fastest aging populations in Asia, Singapore faces many challenges to mitigate this changing age structure issue. According to the data retrieved from Department of Statistics Singapore, in the year 2005, 1 in 12 residents was 65 years and older. It is also predicted that in the year 2030, the situation will worsen whereby 1 in 5 residents will be 65 years or older.

One main issue faced by the aging population is memory loss as it becomes hard to recall or remember things when one gets old. Especially in events where they have to manage their own health issues such as going for medical check ups, taking medication on time and managing their own health records. The consequences may be disastrous if these events are not well managed and can even be life threatening.

Increase in outpatient visits
The other problem that we have identified is that there is an increase in outpatient visits to healthcare centers in Singapore. This suggests there is a demand for a personal healthcare management system.


Our motivation

After identifying the problem sets, our team decided to propose the development of a personal healthcare web application called SelfMed to enhance management of personal healthcare. The targeted users of the application are:

Primary users: People who have illness that needs to visit the hospital regularly.
Secondary users: Elderly who need to manage their own health condition.
Tertiary users: People who need to manage the health of primary or secondary users.

Sample Persona

Name: Richard

Age: 31
Ethnicity: Chinese
Education: Degree Holder
Martial Status: Single
Job Title: Free-lance Software Programmer
Additional Information: Richard is a patient with kidney disease and due to that, he frequently has to visit the doctor and go for dialysis treatment several days a week. In addition, he has high blood pressure which requires him to closely monitor his diet and take his medication on time.

Literature Review

In this section, we will be doing a literature review on a similar application call MyMeduSchedule.com, a free web-based medication scheduler and reminder app. We will look at the functionality of the application and list down the pros and cons based on our analysis.

Functionality

• Allows the printing of schedules in English or Spanish
• Able to set option to receive reminders to take medication by text or email
• Allows the setting of medication refill reminders
• Allows to keep track of daily medications - strength, dosage and purpose of medication
  

Good Points
Basically, our team thinks that the application is very informative as it provides detailed information of the medication the user has added. This is useful because it serves as a reconfirmation for the user to ensure that he or she is taking the correct medication. In addition, the application allows freedom of input, whereby users can choose to enter dosage instruction in text box or they can choose to select the dosage frequency from a drop down list. Our team thinks that this design is very handy for users and fulfills the flexibility principle.

Bad Points
However, our team thinks that the web application did not fully utilize the space it has. The bottom of the page has too many white space.

In addition, it takes too many steps to complete a task. For instance, after the user adds in new medications, he or she has to proceed to the next page to select dosage frequency and time. Our team thinks that this 2 steps can be merged into one page.


Functionality of our application

Schedule
Basically, this functions works just like a calendar and users can use it to add appointments and also set appointment reminders.

Doctor's Information
This is a mini information database for users to store and view doctor's information such as:

• Doctor's name
• Doctor's picture
• Contact number
• Specialty
• Contact Number
• Clinic Address
• Location map
• Other notes

Medication
This function allows users to view current and past prescriptions with details such as drug purpose, dosage, instructions, etc. In addition, users can opt to set medication reminders to remind themselves to take their medication.

Medical History
This functions let users upload their medical records so that they can view it online or print the reports for easy reference.

Our design

The software that our team has decided to use for our development is the Adobe Flash CS5 with Action Script 3.0. Reason being that it allows the creation of interaction models and is widely accepted by modern web browsers. As for the overall look and feel of design, we will be adopting a light hearted style through the usage of soothing, light and cheerful colors. In addition, the symbols and words used inthe application will be intuitive and purposeful. Lastly, we hope to create a straightforward and guided navigation so that the application is easy to use even for non tech-savvy users.

Low Level Sketch

Login Page

Schedule Page

Doctor's Information

Medication
Medical History

Review and Modifications

• Renamed the application
• Decide on a appropriate color scheme for the application
  
• Change the application from a web based to a tablet application so that users can use it on-the-go
  
• Users' sensitive health information storage will be localized
• Modify schedule function
  
• Restructure navigation to allow users to navigation from any function to any other function.
• Redesign the layout of reminders
  
• Refine persona by adding more details
  
• Application functions should focus on the persona
• Add in the usage of metaphor images
• Refine the application's overall layout adhering the theories, guidelines and principles taught in Lecture 2.
  

Designing for touch screen

Touch screens refer to screens that are operated by finger or stylus. In today's context, finger-based touch screens are gaining popularity with the presence of iPhone and iPad. Designing touch screens by no means is the same as how you would design for a screen of mouse interface.

Navigations / Menus

                                   

Typical navigation

Hot zone for thumb

 Typical navigations like the above would no longer be applicable to your touch screen application. The reason is simple – human’s fingers are fat and this type of menu would require the precision of using a mouse.  So what can be done?

Placement of navigation menu

Research has shown that for iPhone, there is a hot zone that your thumb would reach at ease. Generally speaking, with that research, it is fair to claim that your menu is more appropriate at the lower half of the screen than at the top.

Furthermore, if you were to place the navigation at the top of the screen, it would possibly create inconvenience to the user as the user’s hand will obscure the contents if the user would to attempt to access your menu.

Hence, for iPhone, our advice is to place the navigation menu at the bottom. For devices with bigger touch screens, placement of navigation menu at bottom is fine too. Placing navigation at the right would be a better choice than left as research has shown that at least 70% of the population are right handers. 

Behavior of navigation menu

With the presence of touch screen, designer can certainly explore different ways in which how navigation menu interact with user. Here are some examples for your reference.

1. “Pop-opens“: hidden menus that appear after a long press on a UI element – kind of like a ‘sticky’ dropdown menu
2. “Drag-opens”: sliding menus that the user manually pulls open like a drawer, to access the info or elements within. These are nice, because return users can drag it partially open to only reveal the info/element that is needed, thus saving screen space overall.

Buttons

Earlier on, we mentioned that touch screen does not offer the precision what a mouse can offer. Hence, here are some guidelines with regards to buttons for touch screen. Fitts's law would definitely be applicable for design consideration as well. 

1. Appropriate buttons’ size to have the minimum size of 2*2cm, and the maximum of 4cm*4cm. Naturally, if your button size increases, do scale your font size as well.
2. The space between buttons is recommended to me of the minimum of 3mm apart to the maximum of 6mm apart. 
3. Placement of important control button should be in the bottom navigation.
4. Offer feedbacks as per how normal screen would react. For example when user’s hold onto the button, the button icon could have a change in color. Notice the example below, the "PLAY" button has a change in the color tone(second picture) when a user hold onto the button.

                                            

             

Concepts of familiarity

When designing for touch screen, always remember that the following gestures are what users will be familar with. Be sure to use them whenever you are deciding how does your application interact with the user! 

Panning gesture
Entry state: One or two fingers in contact with the screen.
Motion: Drag, with any additional fingers remaining in same position relative to each other.
Exit state: Last finger up ends the gesture.
Effect: Move the underlying object directly and immediately as the fingers move. Be sure to keep the contact point under the finger throughout the gesture.

Panning gesture

Zoom gesture
Entry state: Two fingers in contact with the screen at the same time.
Motion: Fingers move apart or together (pinch) along an axis.
Exit state: Any finger up ends the gesture or the fingers break the axis.
Effect: Zoom the underlying object in or out directly and immediately as the fingers separate or approach on the axis. Be sure to keep the contact points under the finger throughout the gesture.

Zooming gesture

Rotate gesture
Entry state: Two fingers in contact with the screen at the same time.
Motion: One or both fingers rotate around the other, moving perpendicular to the line between them.
Exit state: Any finger up ends the gesture.
Effect: Rotate the underlying object the same amount as the fingers have rotated. Be sure to keep the contact points under the finger throughout the gesture.

Rotating gesture

Two-finger tap gesture
Entry state: Two fingers in contact with the screen at the same time.
Motion: No motion.
Exit state: Any finger up ends the gesture.
Effect: Alternatively zooms or restores the default view for the object between the fingers.

Two-finger tapping gesture

Press and tap gesture
Entry state: One finger in contact with the screen, followed by a second finger.
Motion: No motion.
Exit state: Second finger up ends the gesture.
Effect: Performs a right click for the object under the first finger.

Press and tap gesture

Other guidelines that are useful

For touchscreen application, the general consensus is to use bright colors as the background. Bright colors would reduce glare and helps prevents the user from seeing fingerprints. Believe it or not, take your touch screen devices and have a look at the applications available. Most of them utilize light or bright colors. Off your screen, and you will be able to see plenty of fingerprints of your phone.

If your application is content heavily – multiple page of content – the principle of familiarity could be applied here. A gesture such as swipe of the screen to the next page would certainly please the suprised user. 

References

http://www.sapdesignguild.org/resources/tsdesigngl/index.htm

http://inspiredm.com/designing-websites-touchscreens/

http://msdn.microsoft.com/en-us/library/cc872774.aspx