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

Good Error Message - it's a sign! (Seminar)

Imagine meeting a crossroad and you find a signboard that is written in an unfamiliar language. On your right, you spot another signboard that has been chipped off. The road is quiet and the sun is setting. You wonder, “If there is anyone who can guide me through?”

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:

Interesting Article Review on Bad Error Message-

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.

Interesting Links:

Creative Design for 404 Errors - http://www.webdesignshock.com/404-error-page-designs/
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

Color in Design - Part 1

In any design, one of the key aspects is colors. Various messages can be communicated through text, but colors are powerful tools as they can create style and stir emotion in people. However, color is subjective as people may perceive them differently; Changing the hue or saturation of a color can evoke a completely different feeling. Hence, it is important to understand the meaning behind each color, so you can use them to convey your idea and messages effectively in user interface design.

Warm Colors

Variations of red, orange and yellow are warm colors. They represent positivity, passion, happiness, enthusiasm, and energy in general.

Red

Red is a strong color. It can have an overwhelming effect if it is used extensively in designs. It is associated with importance or danger, as well as love and passion. Red can be a good choice to portray power or passion. However, red can be very versatile. Brighter shades of red appear to be more energetic while darker shades seems more powerful and elegant. Be aware that the negative connotations of red are rage, emergency, and anger.

Gradient of red gives the site a sense of energy and elegance.

Overwhelming effect when red is used extensively

Orange

Orange is a very vibrant, cheerful and energetic color. It can commands attention without being as overpowering as red. Hence, it’s often considered more friendly and inviting, and less aggressive. Orange symbolizes happiness, joy and sunshine. It also signifies ignorance and deceit.

The site looks vibrant with orange used. It attracts attention.

Yellow

Yellow is often considered the brightest and most energizing of the warm colors. It’s associated with happiness, hope and sunshine.

In designs, bright yellow can lend a sense of happiness and cheerfulness. Light yellows also give a more calm feeling of happiness than bright yellows. Dark yellows and gold-hued yellows can sometimes look antique and be used in designs where a sense of permanence is desired.
A dingy yellow brings about negative feelings: caution, criticism, laziness, deceit and jealousy. Yellow is also associated with danger, though not as strongly as red.

Yellow adds cheerfulness and a calm feeling to this site.

Yellow accents bring attention to various headings. They also gives a sense of permanence to this site.

Cool Colors
Cool colors include green, blue, and purple. They are often more subdued than warm colors. They are usually calming, relaxing, and somewhat reserved. Use cool colors in your designs to give a sense of calm or professionalism.

Green

Green has many of the same calming attributes that blue has, but it also incorporates some of the energy of yellow. Green symbolizes nature and has a healing quality. It can be used to symbolize growth and harmony.

In design, green can have a balancing and harmonizing effect, and is very stable. It’s appropriate for designs related to wealth, stability, renewal, and nature. Brighter greens are more energizing and vibrant, while olive greens are more representative of the natural world. Dark greens are the most stable and representative of affluence.

On the other hand, green is symbolic of money, showing greed or jealousy. It can also be used to symbolize a lack of experience or a beginner in need of growth

Green is used to give emphasis to the nature-related content.

Blue

Blue is used extensively to represent calmness and responsibility. Blue is a peaceful and calming color exuding stability and expertise. Blue can also symbolize trust and dependability.

In design, the exact shade of blue you select will have a huge impact on how your designs are perceived. Light blues are often relaxed and calming. Bright blues can be energizing and refreshing. Dark blues are excellent for corporate sites or designs where strength and reliability are important.

A cool shade can bring about the negative side of blue, symbolizing depression, coldness, and passiveness.

Blue gives a sense of peacefulness and calmness. Dark blue is used to add stability to this site.

Purple

Purple was long associated with royalty. It’s associated with spirituality, creativity and imagination too.

In design, dark purples can give a sense wealth and luxury. Light purples are softer and are associated with spring and romance. Brighter purples can exude a magical feeling.

Darker purples can conjure gloominess and sadness.

The sense of royalty and luxury is further enhanced with purple

Purple is used in this site to convey the idea of imagination and creativity

Neutral Colors
Neutral colors often serve as the backdrop in design and combined with brighter accent colors. They can also be used on their own in designs, and can create very sophisticated layouts. The meanings and impressions of neutral colors are much more affected by the colors that surround them.

Black

Black is the strongest of the neutral colors. On the positive side, it’s commonly associated with power, elegance, and formality.

Black is commonly used in edgier designs, as well as in very elegant designs. It can be conservative or modern, traditional or unconventional, depending on the colors it’s combined with. Black can make it easier to convey a sense of sophistication and mystery in a design. It is often correlated with power, elegance, sophistication, and depth.

Black can also be seen negatively because the color is associated with death, mystery, grief, mourning, and sorrow.

Black is used to give the site an elegant and sophisticated feel

White

White, like black, it can work well with just about any other color. White is often associated with purity, cleanliness, simplicity, goodness and virtue. In design, white is generally considered a neutral backdrop that amplifies other colors.

Conversely, white can be seen as cold and distant.

White gives simplicity and lightens this site

Gray

Gray is a neutral color, but it can sometimes be considered moody or depressing.

Gray is generally conservative and formal, but can also be modern and sophisticated. It’s commonly used in corporate designs, where there is an emphasis on formality and professionalism.

Various shades of grey combined with black gives the site a modern, sophisticated feel