Issuu on Google+

北 京 科 技 大 学 University of Science and Technology Beijing

交互设计 / Interaction Design 覃京燕老师 / Professor Qin Jingyan

作业3号 / Homework Nº 3 Create the Interface Design for a New Application

丽芳 / Lai Guim 2013年01月07日


Designing a New Application

HOMEWORK: Create a New Application considering: way of thinking, quality of the report, presentation, interface samples, workflow, information arquitecture, etc.. Absolute freedom to choose the topic of the Application.

交互设计 / Interaction Design

作业3号 / Homework Nº 3 - Page 1


Designing a New Application

TABLE OF CONTENTS: 1.

Introduction

2.

Current Application Availability

3.

4.

2.1

For Medical Reference

2.2

For the Relation: Food + Body Weight Care

2.3

For the Relation: Food + Nutritional Value

New Application Proposal 3.1

“Healing Food“: Description

3.2

“Healing Food“: Navigation Map

3.3

“Healing Food“: Interface Workflow

3.4

“Healing Food“: Interface Design

List of Resources

交互设计 / Interaction Design

作业3号 / Homework Nº 3 - Page 2


Designing a New Application 1. Introduction

Health, understood as physical, mental and spiritual wellbeing is considered one of the ground states to live a life of good quality. Within our everyday rutine we face our activities aiming to achieve our life goals the best we can. Strengthening health through good nutrition to help us overcome our weaknesses is fundamental. Although undoubtedly there are health problems whose control is beyond our reach, we can not overlook that there is a not minor range of ailments that we can control throughout the simple action of being aware of what foods incorporate into our daily diet. The main objective of the new application that is presented in this report is to increase the quality of life for users of all ages, without restriction of any kind, allowing them to consult about common health discomforts that are able to be controlled by the food we eat every day, taking advantage of the nutrients they naturally possess. Through the frequent use of this application is also desirable to raise awareness in people about how close is the relationship between what we are, how we feel and what we eat, as well as how relevant is our diet to achieve a permanent state of good health. To create the Interface Design of this application, a brief body of information was constructed crossing three types of contents: - Symptoms of physical, mental and mood discomfort, that usually do not require specialized medical care, taking in consideration its general overview and its most common causes. - Common foods, often present in our daily diet, of plant origin, classified by type. - Healing properties of these foods, considering their nutrients and the functions and processes they develop on a chemical level in human metabolism once consumed. The design for this application considers only foods of plant origin, so as to be able to improve the quality of nutrition by encouraging a balanced health in all kinds of users, without the exclusion of those who have chosen to follow a vegetarian diet. The emphasis of this report is oriented to create a new application achieving a good interface design. A future scientific development of the contents here presented –more accurate in the medical aspects– it is essential in order to offer assistance to its users.

交互设计 / Interaction Design

作业3号 / Homework Nº 3 - Page 3


Designing a New Application 2. Current Application Availability 2.1 For Medical Reference A group of applications oriented to provide medical reference is already available for portable devices. They offer one part of the information that it is required for the new application introduced in this report: a list of common symptoms, with its description, considerations and common causes. For instance, “Medical Reference” from the University of Maryland Medical Center, contains more than 50,000 pages of in-depth and consumer friendly medical information in both English and Spanish.

“Medical Reference“ Application Icon

“Medical Reference“ Application Screenshots

交互设计 / Interaction Design

作业3号 / Homework Nº 3 - Page 4


Designing a New Application 2. Current Application Availability 2.2 For the Relation: Food + Body Weight Care The second group of applications that already exist and are also related to this project are those providing information about the relationship between food and the nutritional facts they posses in order to reduce corporal mass. This kind of applications are oriented to users following special diet to take account of the total calories eaten per day. The information they provide that is useful to this project consist in the nutrition fact per food, like the example above. “Calorie Counter” it is a calorie and fitness tracker, where users can log their weight, count calories and important nutrients, stay up-to-date with a live feed of weight-loss tips, access to over a thousand healthy recipes, and get motivated with the support of other users.

“Calorie Counter“ Application Icon

“Calorie Counter“ Application Screenshots

交互设计 / Interaction Design

作业3号 / Homework Nº 3 - Page 5


Designing a New Application 2. Current Application Availability 2.2 For the Relation: Food + Nutritional Value A third group of existing applications are also providing a part of the information required for this new project. They are informative tools about the nutrients that food naturally posses, but they do not present details about how to use this knowledge for users to take real advantage of it, like heal common health discomforts. “Vitamins & Minerals” is an example of this kind of applications, presented as a tool that provides health information for general educational and informational purposes only, not to provide specific medical recommendation or professional advice.

“Vitamins & Minerals“ Application Icon

“Vitamins & Minerals“ Application Screenshots

交互设计 / Interaction Design

作业3号 / Homework Nº 3 - Page 6


Designing a New Application 3. New Application Proposal 3.1

“Healing Food“: Description

The function of this new application called “Healing Food” works as follows: A person in the middle of his daily routine feels a discomfort in his health, a mild symptom, such as a headache, an itchy throat, or suffer from a scratch on the hands caused by a paper cut. Discomforts that could even be ignored to continue actively to the tasks of the day, although it also could lead to a more serious outcome. On the other hand, nowadays we already have a vast amount of information on the healing properties within our everyday foods. This knowledge is coming from sources as familiar as our grandparents and relatives who have been in closer contact with the production of food in the field, as well as sources within the area of scientific and medical development. This is the kind of knowledge –so difficult to define– will suggest eating a tablespoon of sesame seeds to relieve headache, or eating hot ginger tea for sore throat, or the application of a few drops of lemon juice in the area of the body affected by a cut in the skin. The application presented in this report provides access to such solutions: natural, simple, based on the healing properties of the foods we eat every day. Quick access to a knowledge which each person should be aware in order to have a health of great quality, paying attention to the small signs of the body to prevent a mayor disease or a more serious deterioration in health, avoiding the use of chemical resources. In the application, the user searches the symptom he is feeling from a given list. The search result will explain to the user an overview of the symptom, its special considerations and its common causes, along with a recommendation of foods that will help to overcome the symptoms, supporting this recommentation on the healing properties these foods posses. The following pages will describe the application with a Navigation Map of the contents and functions, an Interface Workflow diagram and the Interface Design of each screen required for proper operation.

交互设计 / Interaction Design

作业3号 / Homework Nº 3 - Page 7


Designing a New Application 3. New Application Proposal 3.2

“Healing Food“: Navigation Map Home / Start Screen Search Symptom

Healing Food

All

By Name

By Type

By Nutrients

Abdomen - Swollen Abdominal Bloating Abdominal Mass Abdominal Pain Abdominal Rigidity Abdominal Sounds Agitation Appetite - Decreased Appetite - Increased Binge Eating

-AAlfalfa Almonds Anise Apples Apricots Artichokes Asparagus Avocados -B-

- Cereals Corn Millet Oats Rice Wheat - Flowers Artichoke Dandelion Greens Jasmine

Calcium Carbohydrates Chloride Chromium Cooper Fiber Fluoride Iodine Iron Magnesium

[......] Vernal Conjunctivitis Vertigo Vesicles Vision Problems Weakness Weight Gain - Unintentional Weight Loss - Unintentional Wrinkles Wrist Pain Yawning - Excessive

[......] Tomatoes Truffles Turmeric Turnips -VVanilla -WWalnuts Watercress Wheat

[......] - Vegetables [...] Chicory Chili Peppers Chives Collard Greens Cucumber Leeks Lettuce Watercress

[......] Vitamin B3 Vitamin B5 Vitamin B6 Vitamin B7 Vitamin B9 Vitamin C Vitamin D Vitamin E Vitamin K Zinc

Symptom Name Description General Considerations Common Causes Recommended Food (List) Food Name Type Thumbnail (Image)

交互设计 / Interaction Design

Food General Picture (Large Size) Scientific Name Type Other names Description Healing Properties Simplest Way of Consume

作业3号 / Homework Nº 3 - Page 8


Designing a New Application 3. New Application Proposal 3.3

“Healing Food“: Interface Workflow Home / Start Screen

Search Symptom

Symptom

交互设计 / Interaction Design

Healing Food

Food

作业3号 / Homework Nº 3 - Page 9


Designing a New Application 3. New Application Proposal 3.4

“Healing Food“: Interface Design

Home / Start Screen, Compact View:

Header Area: Current Content Title Content Area: List of Symptoms Abdomen - Swollen Abdominal Bloating Abdominal Mass Abdominal Pain Abdominal Rigidity Abdominal Sounds Agitation Appetite - Decreased Appetite - Increased Binge Eating [......] Vernal Conjunctivitis Vertigo Vesicles Vision Problems Weakness Weight Gain - Unintentional Weight Loss - Unintentional Wrinkles Wrist Pain Yawning - Excessive

Bottom Area: General Navigation

交互设计 / Interaction Design

作业3号 / Homework Nº 3 - Page 10


Designing a New Application 3. New Application Proposal 3.4

“Healing Food“: Interface Design

Symptom Screen, Compact View:

Header Area: Current Content Title Content Area: Symptom Overview Name Description General Considerations Common Causes Recommended Food (List) Food Name Type Thumbnail (Image)

Bottom Area: General Navigation

Symptom Screen, Extended View in next page: 交互设计 / Interaction Design

作业3号 / Homework Nº 3 - Page 11


交互设计 / Interaction Design

作业3号 / Homework Nº 3 - Page 12


Designing a New Application 3. New Application Proposal 3.4

“Healing Food“: Interface Design

Healing Food by Name, Compact View:

Header Area: Current Content Title Content Area: List of Food by Name -AAlfalfa Almonds Anise Apples Apricots Artichokes Asparagus Avocados -B[......] Tomatoes Truffles Turmeric Turnips -VVanilla -WWalnuts Watercress Wheat

Bottom Area: Navigation of Healing Food

Healing Food by Name, Extended View in next page: 交互设计 / Interaction Design

作业3号 / Homework Nº 3 - Page 13


交互设计 / Interaction Design

作业3号 / Homework Nº 3 - Page 14


Designing a New Application 3. New Application Proposal 3.4

“Healing Food“: Interface Design

Healing Food by Type, Compact View:

Header Area: Current Content Title Content Area: List of Food by Type - Cereals Corn Millet Oats Rice Wheat - Flowers Artichoke Dandelion Greens Jasmine [......] - Vegetables [...] Chicory Chili Peppers Chives Collard Greens Cucumber Leeks Lettuce Watercress

Bottom Area: Navigation of Healing Food

Healing Food by Type, Extended View in next page: 交互设计 / Interaction Design

作业3号 / Homework Nº 3 - Page 15


交互设计 / Interaction Design

作业3号 / Homework Nº 3 - Page 16


Designing a New Application 3. New Application Proposal 3.4

“Healing Food“: Interface Design

Healing Type by Nutrient, Compact View:

Header Area: Current Content Title Content Area: List of Food by Nutrient Calcium Carbohydrates Chloride Chromium Cooper Fiber Fluoride Iodine Iron Magnesium [......] Vitamin B3 Vitamin B5 Vitamin B6 Vitamin B7 Vitamin B9 Vitamin C Vitamin D Vitamin E Vitamin K Zinc

Bottom Area: Navigation of Healing Food

Healing Food by Nutrient, Extended View in next page: 交互设计 / Interaction Design

作业3号 / Homework Nº 3 - Page 17


交互设计 / Interaction Design

作业3号 / Homework Nº 3 - Page 18


Designing a New Application 3. New Application Proposal 3.4

“Healing Food“: Interface Design

Food Screen, Compact View:

Header Area: Current Content Title Content Area: Food Overview General Picture (Large Size) Scientific Name Type Other names Description Healing Properties Simplest Way of Consume

Bottom Area: General Navigation

Food Screen, Extended View in next page: 交互设计 / Interaction Design

作业3号 / Homework Nº 3 - Page 19


交互设计 / Interaction Design

作业3号 / Homework Nº 3 - Page 20


Designing a New Application 4. List of Resources

ONLINE RESOURCES “Medical Encyclopedia App”. University of Maryland Medical System. https://itunes.apple.com/app/medical-encyclopedia/id313696784?mt=8 “Calorie Counter App”. Everyday Health, Inc.. https://itunes.apple.com/us/app/calorie-counter-free/id375176386?mt=8 “Vitamins & Minerals App”. Michael Quach. https://itunes.apple.com/cl/app/vitamins-minerals/id348735722?mt=8 “Grupos de alimentos y su importancia para la salud: Parte I (Frutas, verduras y hortalizas)”. Henufood: Health and nutrition from food. http://www.henufood.com/nutricion-salud/aprende-a-comer/grupos-de-alimentosy-su-importancia-para-la-salud-parte-i-frutas-verduras-y-hortalizas/ “Alchemical Properties of Foods”. Dennis William Hauck. http://www.alchemylab.com/guideto.htm#sectB “Top 10 Foods to Calm Irritability and Anxiety”. Cycle Harmony. http://www.cycleharmony.com/mood-balance/top-10-foods-to-calm-irritability-and-anxiety “9 Foods Rich in Vitamin B6”. FitDay. http://www.fitday.com/fitness-articles/nutrition/vitamins-minerals/9-foods-rich-in-vitamin-b6.html “Alfalfa”. Wikipedia, The Free Encyclopedia. http://en.wikipedia.org/wiki/Alfalfa “Beet”. Wikipedia, The Free Encyclopedia. http://en.wikipedia.org/wiki/Beet “Collard Greens”. Wikipedia, The Free Encyclopedia. http://en.wikipedia.org/wiki/Collard_greens “Ganbanzo Bean”. Wikipedia, The Free Encyclopedia. http://en.wikipedia.org/wiki/Garbanzo_bean “Tomato”. Wikipedia, The Free Encyclopedia. http://en.wikipedia.org/wiki/Tomato “Calcium in D iet: Food Sources”. University of Maryland Medical Center. http://www.umm.edu/ency/article/002412fod.htm

交互设计 / Interaction Design

作业3号 / Homework Nº 3 - Page 21


Designing a New Application 4. List of Resources

“Carbohydrates - Food Sources”. University of Maryland Medical Center. http://www.umm.edu/ency/article/002469fod.htm “Vitamin K: Food Sources”. University of Maryland Medical Center. http://www.umm.edu/ency/article/002407fod.htm “Zinc in Diet: Food Sources”. University of Maryland Medical Center. http://www.umm.edu/ency/article/002416fod.htm

交互设计 / Interaction Design

作业3号 / Homework Nº 3 - Page 22


USTB AD Interaction Design 03