Ai-Chu's Design Principles

Hi all,
Here are my design principles for language teaching. Hope you enjoy!

DomoNation.com: design language teaching by elisha75830

My job aid and crazy spring break

OK, so I couldn't finish the dreamweaver tutorial as I promised myself.

This spring break I was and still am overwhelmed by the assignment loads. I contribute most of my time on finishing the job aid and our major project. Yeah, that's right, although major project does not due until some time in April, our group needs to finish creating the whole instructional website by this Monday so we can do trial run next week on W200 class.

Tired, but rewarding week!
Although this spring break feels nothing like a break (been staying up for several nights), I am contented with how much I learned through working on my job aid and the major project. I feel that I am getting a better sense on color and spatial arrangement than I used to be at the beginning of R541 class :)



My job aid:

 

Week 10- Lynda.com Tutorial

Dreamweaver CS6 Essential training

I have not created or designed a website before, but since our major project is going to be an instructional website for PLN, I figured learning some web design skills might be helpful. I have finished the first chapter of Dreamweaver CS6 Essential training on Lynda.com.

Some take-aways includes:

1.  How to manage my workspace
• Panel arrangement
• Different screen display: code, split, design. I can even split the screen into two code windows. One shows HTML and the other shows CSS ( Go to application toolbar and select split screen view).  
2. The difference between HTML and CSS 
• In HTML, you are just giving commands.
• In CSS, you are creating styles through sets of commands.  
3. How to use functions in the "property" inspector including
• Designing your text (font, typeface, bold or Italic...)
• Matching the text color with certain color  
4. How to use functions in the "Insert" panel 
• Create description and title for my webpage (in Meta tag) 
• Preview my design in certain browsers 

This is only the first chapter, so basically what I am learning here is just to get myself familiar with the workspace environment. I am planning to finish the whole 9.5-hour-long tutorial during this spring break. I might spend one day watching the video and practicing the exercise and another day reviewing and applying what I learned through creating a self-introduction webpage. That's my plan for the spring break and I WILL ACHIEVE THIS GOAL!!! 

Week 9- IST conference 2013

Even though I am not a student from IST department, I sure did have a very great time participating the 2013 IST conference . This conference has become the highlight of my week for sure :) Thanks to every IST people who make so many efforts in organizing this event.

During the reception diner, I joined Dr. Curt Bonk's talk in regard to MOOC. I was pretty confused at the beginning because I had never heard of MOOC before...actually it was until I went home and checked it online did I realize MOOC, Massive Open Online Courses, is a general term for online course systems rather than one specific website like Udacity or edX... Still, it is good to learn what MOOC is, its business potential, learning potential, and how it may change the game of higher education. I checked some of the MOOC websites (Udacity, HarvardX...) I really like their website design. In each course, they provide a introductory video at the beginning, which is visually appealing and creative. The Introduction to Computer Science course definitely used the common craft technique.They also provide class summary, skill requirement (There is no prior programming knowledge needed for this course!! <-- This sentence makes this course so appealing to me), and what knowledge we will acquire after completion. These designs no doubt make the course attempting for learners. 

In today's conference, one of the most interesting sessions I attended was Khendum Gyabak's round table which talked about "digital tools utilized to enhance literacy practices among the digitally under-served population". This is a very meaningful research and I like the idea of empowering students through creating their digital stories. Though I like her research very much, I sort of played the devil's advocate and challenged some of her points, after all, I am literacy education majored, should not let people get away from this topic too easily lol. Khendum answered my questions very well, which I felt I should totally learn from her. But at the same time, all the presenters did a great job and I totally learned a lot from everyone of them. Great experience. My mind has been fed :) 

Job aids potential topics

Topic 1: how to brew an espresso with "De'Longhi EC155 15 BAR Pump Espresso and Cappuccino Maker". 

We currently bought this espresso machine to brew coffee at home and found out the manual is extremely abstract and hard to understand, especially for English non-native speakers. Therefore, I would like to create a job aid for making a nice cup of espresso with this espresso machine to help people who are as confused as I am. I might also include information on bean choosing and grinding selection. 

Topic 2: Tax return preparation for foreigners. 

Tax return is also an extremely confusing process which I have not yet figured out. One of the greatest problem is its term usage in the instruction, which many of my friends have been complaining about. It would be great if I can ever get familiar with the whole process and design a job aid to make the process easier and understandable for people, but I am not confident of me ever understand the whole complicated procedure... 

Week 8- Scaffolding

Summary:

• Tom Bruch, John Saye
• Soft scaffolds, the dynamic actions of a teacher or peer in support of an activity
• Hard scaffolds: the static supports that can be planned in advance.

• Four types of scaffolding (Hannafin, Land, Oliver, 1999)
• Conceptual: 
• "here's the help you'll need for understanding this concept
•  --> highlight important concepts, provide questions or definition
• Strategic: 
• --> bullet points/ listing / diagrams
• Metacognitive
• --> reflection
• Procedural
• --> clip guy-information on procedure

• Things to think about:
• Complexity: ease vs challenge
• Structure: contrived vs realistic/ authentic
• Depth: basic vs deep understanding

• Decision points
• Presentation of content
• Practice
• Feedback
• Assessment
• Feedback
• Conclusion(reflection)

• A word about fading
• The goal: fade the support; achieve learner independence
• We don't always get this right

• How do we consider scaffolding in our design?
• Intentional design decisions
• Hard scaffolding
• Soft scaffolding
• With consideration for
• Complexity
• Structure
•  depth
• At various decision points
• Presentation
• Practice/feedback
• Assessment/feedback

• What's the difference between a job aid and a scaffold?
• Technology tools for job aids/ scaffolding
• Adobe captivate
• Groups diigo  

Reflection:

                                                  "What's the difference between a job aid and a scaffold? "

      To answer this question, I searched for more information on job aids and I found these two links to be extremely helpful: Designing a job aid, Dave's Ensampler. Based on my understanding, they are different in the following aspects:

	Job Aids	Scaffold
Purpose	To quickly access information to perform a task	To effectively acquire knowledge during task execution
Design	Gear towards one specific task	Gear towards specific learning goals
Element	Only involves presentation	Involves presentation, practice, feedback and assessment
Type	Tend to be procedural	Can be conceptual, strategic, metacognitive or procedural.

Basically, I feel that job aid is a part of scaffolding process while scaffolding involves a broader scope of learner's learning. I don't know if I understand correctly though... 

Week 7: Storytelling/ humor/ cases

Summary:

What is the role of humor?

• To create a memorable moment
• To foster a creative collaborative environment
• "contextually rich learning"
• Attention
• Encoding
• Emotion: emotion drives attention and attention drives  learning-Robert sylwester.

Why do we use stories? (Jonassen & Hernandez-Serrano, 2002)

• To convey or make meaning

• As a cultural communication tool

• To affirm commonalities or make distinctions

• To create memories

• To frame interpretations

• To understand

• To support arguments
• To facilitate vicarious interactions
• To facilitate authentic exploration

What is a story? (common elements)

• Context and characters
• Beginning, middle, end
• Conflict, climax, resolution
• Types:
• The springboard: what you can get learners from here to there; "I did this and you can, too" story.
• The exemplary situation: "the best way to do it" story
• The cautionary tale: don't do this, or something terrible will happen
• The turning point: we were doing this and we change our direction, and this happened as result.
• The historical account: part of what happened in the history
• The news item
• The allegory/ parable/ fable/ myth

What is a case?

• A story with a targeted learning or assessment purpose
• Sometimes called a scenario or a case-scenario

When do we use a case?

• To illustrate a pathway or best practice: learner reflects, discusses meaning
• As source for learner response, application of knowledge (formative assessment)
• To reveal gaps in learner knowledge: learner provides response, reflects, experiences, collaborative interactions, discusses meaning
• As summative assessment tool: learner provides response, is scored according to established criteria

Developing the Case

• Context and characters
• Challenge
• Timeline
• [the response]
• [results]

Decision points

• Introduction

• Presentation of content

• Practice
• Feedback
• Assessment
• Feedback
• Conclusion

A word of caution

• It is important to understand the range of cultural considerations
• Humor rarely translates between cultures and languages
• Don’t' essentialize: don't use characters or storylines that will deepen the negative impression/ perception on a certain group of people. Ex, use a Hispanic person as a criminal character.

Reflection: 

        Storytelling is an important element in teaching. Dr. G and Dr. L's screenshots together provides a comprehensive introduction to the theoretical principles and practical application of this element. On top of Dr. G's elaboration on case development, I think if we would like to use case analysis as a summative assessment, we should plan out the evaluation criteria first, and then develop the case based on the evaluation criteria. This shall ensure the case story includes all that should be evaluated. 

        The RSS story video in Dr. L's screenshot not only is interesting but also happens to be our project content. We might include this video in our project. "The open textbooks explained example" is an awesome idea for developing storytelling video when we lack the skills of using computer software to design graphics or animations. 

        Finally, in terms of humor and essentializing, it is true that humor doesn't translate between languages and cultures. For example, Americans like to show humor through sarcasm, which is something doesn't exist in Asian cultures. Using sarcasm as a way of humor may only make students of other cultures feel bad about themselves because they do not feel engaged in the situation and sometimes they even need someone else to explain to them why it is funny. It is also true that we should not use characters or story lines that will deepen the negative impression/ perception on a certain group of people. What is ironic is, I did not learn any of the negative perceptions until I started my studies in the US and people kept "EMPHASIZING" that we should NOT EMPHASIZING these negative perceptions and then explain what negative perceptions exists currently. If they did not tell me those existing ideologies, I may not even develop those perceptions. What makes the situation even more complicated is that, obviously, if you don't know these ideologies and act upon them, people recognize you as a foreigner, an outsider of this society. So what now? 

Week 6: Evaluation and assessment of learners

Summary: 
Why do we assess learners?

• To make decisions
• About students
• Learning
• Placement
• Degree
• Recognition
• Remediation
• About instruction
• Effectiveness
• Pace
• Material
• Coverage

Start with

• Learning/ performance objectives
• Objectives should be clear, measurable, represent knowledge/ skill gains, not activties

Important consideration: reliability

• Assessment reliability
• How consistently does this measure the thing?
• Examples:
• Bathroom scale: if you gain 20 pounds within one day, then you will question the reliability of the scale
• Driver's test
• Assumption: assessments should be reliable and not subject to the following:
• Error
• Wide range of interpretations regarding what is being asked
• Limitations of observation

Important consideration: validity

• Assessment validity
• How do the procedures and interpretations support our purpose?
• Content: alignment between test and course content
• Dose the bathroom scale measure weight in pounds?
• Criterion: real-world correlation
• Does the number on the bathroom scale provide us with an accurate measure of weight loss?
• Does the number on the bathroom scale provide us with an accurate measure of fat loss?
• Construct: meaning
• What does the weight mean or signify?

Essay:

• Long or short repsonses to a prompt
• Instructions should be detailed
• Question should specify all expectations
• Criteria for scoring should be cleraly established in form of chekclist  or rubric
• Easy to writing, time-consuming to score

Performance

• Demonstration of skill
• Can be speech, project, or other format
• Instructions should be detailed and specify all expectations
• Scored according to detailed criteria in the form of checklist or rubric
• Reliable assessments are difficult to write and time-consuming to score

Personal interview: (eg qualifying exam, conference presentation)

Decision points:

• Why do we need to know this and what do we need to know?
• During instruction (formative)
• Following instruction (summative)
• Remediation opportunities?
• High stakes? SAT--> the purpose is not valid, but the test itself is valid and reliable. Using SAT as an indicator of school performance is a wrongful claim.

Reflection: 
           One of the things I have been missing out is the connection between learning objectives and learning content. There is always a weak link between these two nodes in my lesson plan. In fact, I believe many teachers, especially novice ones like me, oversee this link. Well, instead of saying "oversee this link", maybe I should say that I always determine my teaching content first and then write down my teaching objectives based on that. It is easier for me to design my teaching without setting up the objectives first. 
          I understand that my design order is wrong. I should determine teaching objectives first and then design my teaching content according to that; otherwise, it would be meaningless to set up objectives. Yet, it is really difficult for me to think and design in this order. What should I do? 
         In addition to the instructional design perspective, Dr. L introduced several handy technologies for evaluation and feedback. iRubric is the most useful one among all. I definitely will use it for my future teaching and our final project. StudyBlue seems pretty cool, too. I might try to use it for self-study purpose. Polleverywhere is fun and eye-catching, but it is only useful in large-scale classes. If it is a small class, I can just ask students to respond by raising hands or answer my questions. Another drawback of using Polleverywhere is that it gives students a legitimate reason to take out their smartphones or laptops, which may become a serious distraction in class. 

Week 5: Motivation-Reflection on our major project

Our major project for R541 is to create a webquest for preservice teacher in W200 to learn how to incorporate Personal Learning Networks (PLN) into their teaching as well as for their professional growth.
During the class discussion, Dr. G tossed out a question regarding our major project: "how are you going to motivate a bunch of 19-year-old college students to learn something they do not care about at this point of time?" Great question. We didn't really think about that.

I guess, in order for students to be engaged in this topic, we will need to take the following steps:

1. In the introduction section, we can provide some fun videos to demonstrate why learning about PLN is important  in terms of building up individual's professional image and benign professional connections.
2. We can also provide interview recordings of the Jacob teachers (the outstanding educators in Indiana) speaking about incorporating PLN as examples to demonstrate how PLN has been successfully used to increase students' learning effectiveness and motivation. 
3. One of the tasks in the process will require students to create a PLN community (e.g. a facebook group) for learning PLN. In this way, students will gain a sense of ownership and a sense of achievement during the process. Through the collaborating learning and social interaction in the group, students will also understand the value of PLN in terms of learning as well as professional growth. 

 Those are the ideas we have so far for motivating our students. Let us know if you have some other ideas!!

How to use Photoshop CS6 to erase unwanted photo background

So I just learned how to use Photoshop CS6 to erase unwanted photo background today, which brought me a great sense of achievement. haha~
For those who lack the drawing skill as I do, I am going to demonstrate how I erased the photo background through Phtoshop CS6.

Step 1: Go to IUWare (http://iuware.iu.edu/Windows) and download the Adobe CS6 package. It's completely free for IU students. 


Step 2: Open the images in Photoshop. Click on "File" and select "Open" to open the images you want. 

In my case, I am going to erase the background of the following pictures, so I will open all of them in Photoshop. But today, I am only going to demonstrate how I erase the background based on the third image.

Step 3: Right click on the "Quick selection tool" on the left-side tool bar and change it into "Magic Wand Tool". 

Step 4: Click on the unwanted white background. 
Use "shift" key to select all the noncontinuous white parts at once. The parts being successfully selected will have dotted delineation. Zoom in the picture for parts that are hard to click on.

Step 5: Go to Menu bar and click on "Select", and the choose "Inverse". 

Now you will see the Eiffel tower has dotted delineation instead.

Step 6: Click on the "Add a mask" icon on the bottom right. 
Now you will notice the background has been removed.
Also in the layer column, there is a layer mask thumbnail. The black part means the part you don't want and the white part means the part you want to keep.

Finally, after finish adjusting the color of your image, save the image as a PNG or JPEG (if you are not creating your infographic in Photoshop) and we are good to go!!

 This is how I created the first section of my infographic. Hope you find this post helpful~

My infographic storyboard

Here is the initial planning and wireframing of my infographic.
I have also created a prezi slide as my storyboard to demonstrate the logic behind all my design decisions.

Knowledge map for F.Y.I. major project

Janet, Fallon and I are designing the Personal Learning Networks webquest project together as a team. We call ourselves "F.Y.I.- Facilitate Your Ideation".

Here is our knowledge map for the major project proposal.

Week 4: Representation for our major project

Our group is going to design a webquest for learning how to  incorporate  "personal learning network" into instruction. The target audience is  a group of IU preservice teachers who are learning how to use computer in education. 

Based on the readings and Dr. G's lecture on imagery and representation, here are some considerations about the representation for our project.

1. Graphic organizers: considering the purpose of this project is to teach preservice teachers how to incorporate personal learning networks, one of the potential graphic organizers we may use is a flow chart that help learners visualize the instructional design process. 
2. Accuracy: Personal learning network (PLN) is a very concrete idea. It refers to websites such as Facebook, Twitters etc. I think, in terms of giving PLN examples, we may use more accurate, figurative pictures to illustrate our points. However, in terms of understanding the whole idea, some abstract images may be included. 
3. Clarity: the learners will have basic understanding about PLN prior to our instruction, so they are not considered totally novice in this circumstance. Therefore, clarity of our representation may not be high. 
4.  Learner involvement: the nature of a webquest instructional design requires learners' high involvement. The level of understanding the learners need to achieve should enable them to design PLN instructional activities independently. This will also meet Bloom's taxonomy of cognitive levels "synthesis". 

Tutorial session: Infographics-Planning and Wireframing

• Web designer vs web developer: very creative example of how to use infographic to present comparative information. Helpful to my infographic assignment. 
• wireframing:
• Title
• Intro paragraph
• Other information sections

• Determining what to visualize
• Infographic is journalism meshed together with design . You are taking research and data, and displaying it in a way that is accessible to a larger audience.
• Citing information.
• Generate questions pertaining to the central topic
• See if the illustration answer our question

• Two principles for inforgraphic dumbers:
• Is the data interesting to the audience
• Can the subject be easier, or more fully understood, via imagery than plain text?

• Use excel spread sheet to organize your data
• Overview-sections (table of content)
• Different tabs for different sections
• Give each section a title

• Find stories in your data:
• Find out the interesting facts from your data

• Choosing the right visualization (charts I hadn't considered in the past) 
• Bubble chart
• Timelines
• venn diagram
• Pictograph
• Relationship diagrams
• Glyphs

• Planning dimension:
• Where? Blog, textbook…?
• Photoshhop--width: 850; height:5000 (crop it later)

• On photoshop, use transparent rectangle (or any other shapes)to create your wireframes. 

Week 3: Imagery and Media

Big words: 

1. Value
2. Hue
3. Monochromatic color combination
4. Complementary color combination
5. Analogous color combination
6. Triadic color combination
7. Dominance --> determined by value and hue
8. balance
9. grids
10. typography
11. composition
12. layout
13. alignment 
14. proximity

Analyzing value and dominance

1. what are the lightest structures in display?
2. Divide them into two more levels of gray values
3. Are the appropriate elements dominant? 
4. Is the layout balanced? 
5. If one element needs to be adjusted, what will the impact be on everything else? 

Typology: 

1. Text has to be Visible, legible, readable. 
2. Visibility: 
• size
• contrast
• interference
• occlusion
3. Legibility (letter forms): 
• letter spacing
• character shapes (image resolution)
• contrast
• interference
4. Readability: 
• Line length: ideal-2/3 and 1/3 of a standard page width; no scrolling or wall-to-wall text 
• Letter forms: lowercase letters are easier to read
• Typeface: Book faces (serif or sans-serif) for texts; display or italic faces for short titles or labels. 
• justification: ragged right
5. text as visuals: 
• The gray value of your text has to be moderate
• Factors influencing the value: typeface, point size, 
• You can make your text "shout" through typeface selection, point size, boldness, italics, and color.
• Typefaces convey affective meaning through metaphor and through common use

Questions to ask: 

1. Need further clarification on how to analyze the dominance and balance. 
2. Produce a value analysis and a grid diagram for your assigned website. (where?) 

My Infographic Topics

1. Do you need fish oil? 

Last December, I was choosing nutrition supplements for my grandpa who has heart disease, and therefore I learned that choosing a nutrition supplement is not as easy as you imagine. You need to select the best product for yourself based on your own health condition, nutrition intake, age, gender etc. Taking in the wrong dosage or wrong kinds of supplement might otherwise cause negative effect on your health. It took me such a long long time to do research on this topic since I didn't want to jeopardize my grandpa's health but the information on the internet was terribly complicated. Therefore, I would like to try creating an Infographic about fish oil, telling people

1. who need fish oil?
2. What are the benefits for taking fish oil?
3. How much dosage you need to intake based on your own conditions?
4. How do you choose a safe fish oil product?


2. Travelling to France or Scotland, which one is better? 

My boyfriend and I are planning on a one-week trip to Europe this summer break. So far, we have two options in mind, France and Scotland. It will also be very interesting to me to do some research on the tourism information about these two countries and create an Infographic showing the pros and cons between these two options. Possible categories for comparison would be:

1. Expense
2. Fun things to do
     (1) Natural landscapes
     (2) Cultural landscapes (music, festivals, architectures, etc.)
     (3) Museums
     (4) Night life
3. lodging and accommodations
4. Foods


This is so far I got. Both topics are very interesting to me, but I guess I like my second topic more than my first one. People who are reading my blog, please give me some suggestions on which topic I should choose and what information I should further include. Thanks~

My Infographic design principles

This week, Dr. Appelman came to our class and gave us a very inspiring speech on visual design. He said that "everything is designed with a frame. You as a designer is to decide what is in the frame". This is a great inspiration to me, reminding me to look at the big picture first instead of jumping into the details right away. Fonts, color, spatial arrangements etc. are all details that should be concerned only after you have developed your big picture based on your central concept. Dr. G and Dr. L's lecture on Infographic later on supported this concept. We started from discussing what infographic is and what the objectives for designing an infographic are.  Several infographic examples are introduced based on how they hold onto their central idea while developing the whole picture. No matter  you are organizing your information through "ask question", "tell a story" or "make a comparison", as long as you keep the central concept in mind as the starting point for your design, you will be able to create a successful infographic. So, keep in mind:

1. Look into the essence of your topic first, 
2. and then look at the components you may have in the frame,
3.  then you decide how you are going to develop/organize/ create your picture. 

Example 1:

This Infographic has a clear central idea and has organized its information according to its central theme. It is really easy for the audience to follow his design logic.

Example 2:

This Infographic is also well-organized. The curvy path indicates the steps we should follow to build up our credit score, which I find to be a very clever and efficient way organize this topic.

Example 3:

This Infographic fails to catch the essence of the topic first. The information provided below does not support the argument the designer set as the topic.After reading the Infographic, I still don't understand why there's a little geek in all of us.

My Infographic example

Here is my infographic example:

Is Your Bachelors Degree Worth It? infographic by Raj Kamal.

The topic of this infographic is very attracting to me since I have always been interested in educational issues.

The infographic provides organized and concrete information to discuss the expense of a bachelor's degree vs its value. Five themes/points showing the depreciation of bachelor's degree are clearly illustrated through the use of different fonts, illustrations/ charts, space arrangements etc.

I especially like the graphic of "starting pay by degree". By the contrast of height, it clearly shows how the cost of a bachelor's degree is way, way higher than its pay-off for most disciplines. We education majored is sadly one of the lowest starting pays...

Self-introduction

Hi to my dear friends who are reading my blog now :)

 
    My name is Ai-Chu Ding. You can also call me Elisha. I am from Taiwan and I am a first year doctoral student in the Department of Literacy, Culture and Language Education. Before I came to IU, I majored Foreign Languages and Literatures at National Taiwan University. After student taught English in a Taiwanese junior high school for half year, I went to University of Michigan and got my master's degree in Education Policy there. This is my first time taking course opened by the IST department and I am kind of a newbie in the area of IST. Not too many of you have met me yet because I was absent from our first class meeting due to some personal reasons. However, when I listened to the class recording, I really wished I were there to join all of you. The topic of this week was so interesting and the class discussion was so vigorous and intriguing!! I wish I hadn't missed the discussion.... anyhow, I am really looking forward to seeing all of you on next Monday.

    The reason why I am taking R541 is because I have always been interesting in knowing how we can improve our instruction, making it more effective and motivating. Now that I have taken the first class, I am even more certain about how much this class is going to help me become a better instruction designer.