Pages
Friday, 30 March 2012
Good Design Makes Us Happy
Saturday, 24 March 2012
Emotion – not to be taken lightly for a successful interface!
Models of Emotion
Fig 1. Neurological structure of emotion |
Fig 2. Don Norman's three level of brain processing |
Theories & application of emotion in HCI
- 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.
- 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.
- 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.
- 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
- Physiological – hunger, thirst, bodily comfort
- Safety/security – being out of danger
- Social: affiliate with others, be accepted
- Esteem: to achieve, be competent, gain approval and recognition
- Cognitive: to know, to understand and explore
- Aesthetic: symmetry, order and beauty
- Self-Actualization: to find self-fulfillment and realize one’s potential
- Transcendence: help others find their self-fulfillment and realize their potential
- 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.
- 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).
- 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!
References
Fishwick, P. (n.d.). Exploring Attributes of Skinas Potential Antecedents of Emotion in HCI. MIT Press.
Thursday, 15 March 2012
Cognitive and Pluralistic Usability Walkthroughs
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
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
Saturday, 10 March 2012
Color in Design - Part 2
Primary Hues |
Secondary Hues |
Pure hues used to give emphasize on the mood of website |
Low Saturated Red |
High Saturated Red |
High saturated blue texts are used to stand out from low saturated blue background |
Red Tint |
Tints bring lighter mood |
Red Tone |
Combining different tones can give a vintage feel to website design |
Red Shade |
Red shaded background gives neutrality to the overall design, as it reduce the overwhelming effect of pure red |
Light Red |
Dark Red |
Different values in colors display contrast, which make the overall design visually appealing |
Friday, 2 March 2012
Team 17 Developing app for iPad
Friday, 17 February 2012
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
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
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
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
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.
Wednesday, 15 February 2012
Designing for touch screen
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?
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.
- “Pop-opens“: hidden menus that appear after a long press on a UI element – kind of like a ‘sticky’ dropdown menu
- “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.
- 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.
- The space between buttons is recommended to me of the minimum of 3mm apart to the maximum of 6mm apart.
- Placement of important control button should be in the bottom navigation.
- 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.
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 |
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 |
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 |
Tuesday, 7 February 2012
Good Error Message - it's a sign! (Seminar)
How do you feel?
Good error messages, in any form, play a crucial role in providing indicators to signal the user to perform the next course of appropriate actions. Without error messages, users will be left hanging, as if standing in a middle of a crossroad with a mixed feeling of frustration, fear and confusion.
Study has shown that users often demonstrate high level of frustration when a system or application crashes and provides an “unexpected error message”. The build on of anger comes when users have to spend a considerable long amount of time trying to decipher the message, solve the issue and are to no avail. In some cases, users receive error messages that are both misleading and exasperating.
In general, a good error message should :
a. Communicate the problem
b. Communicate how to fix it
c. Communicate why to fix it, provide incentive
For example,
Here are examples of bad/misleading error messages:
Invalid State Error: What’s a Poor Person to Do?
Concepts and Principles
After understanding the functions of an error message and its benefits, we now look at the concepts and principles that guide developers in developing good error messages.
1. Be explicit - Show that error has occurred through an error message box.
· When users make mistakes and get no feedback, they are completely lost.
2. Use human - readable language - Users are not detectives.
· Avoid the used of programming jargon or codes that are unfamiliar to the general public.
3. Use polite phrasing - Be courteous and friendly to users.
· Users are more driven to solve the problem at hand when they are greeted politely.
4. Be specific - Don't go round the bush, just tell me the problem.
· In order to get things done efficiently, users want to be informed of the problem quickly and directly.
5. Be helpful - Save the users.
· Provide constructive advice to assist users to overcome the problem. For example, instead of saying "out of stock," your error message should either tell users when the product will be available or provide a way for users to ask to be notified when the product is restocked.
6. Preserve as much as the user's work as possible
· Allow users correct errors by editing their original action instead of having to do everything over again. For example, in presenting search results, show a search box with the user's original query terms to facilitate revisions. If no hits were found, let users search a wider scope with a single click.
7. Reduce the work of correcting error
· If possible, guess the correct action and let users pick it from a small list of fixes. For example, instead of just saying "city and zip code don't match," let users click on a button for the city that matches the zip code they entered.
8. Educate the user - Raise awareness and learn through mistakes.
· Hypertext links can be used to connect a concise error message to a page with additional background material or an explanation of the problem.
Bad Error Messages - http://www.instructionaldesign.org/bad_error_messages.html
Tactful Error Messages in Web Design - http://blog.nerdburn.com/entries/user-interface-design/tactful-error-messages-in-web-application-design
Team Members
Seah Guo Hua
Steve Ng
Xavier Woo
Random HCI Quotes
It’s not enough that we build products that function, that are understandable and usable, we also need to build products that bring joy and excitement, pleasure and fun, and yes, beauty to people’s lives. – Don Norman
Design creates stories, and stories create memorable experiences, and great experiences have this innate ability to change the way in which we view our world. – Christian Saylor
Failure and loss can be good. If you aren’t finding failure in your design work, then you aren’t really exploring all the possible solutions… Failure is not an end result if we have purpose and intention. It’s only a marker along the road to designing great experiences. – Francisco Inchauste
Designing interactions and guiding experience is more than interface design or usability tricks. Every piece of interaction will speak to the user. Every detail, every piece of marketing copy, image, icon, drop shadow, layout placement, or button contributes to the user’s associations and judgements about the company they are dealing with. – Shawn Borsky
Most people believe that User Experience is just about finding the best solution for your users — but it’s not. UX is about defining the problem that needs to be solved (the why), defining the types of people who need it to be solved (the who), and defining the way in which it should be solved to be relevant to those people (the how). – Whitney Hess
Good design is design that changes behavior for the better. I think it needs to take into account the context of the environment, of the human condition, the culture and then attempt to make the things you do—make us do them better, make us do better things. It encourages us to change the way that we live. – Jon Kolko